From a1c7c8f01bc80853b0b591bbb1742e7be9c72f5c Mon Sep 17 00:00:00 2001
From: fengxiang <110431245@qq.com>
Date: Tue, 20 Mar 2018 17:06:35 +0800
Subject: [PATCH] Merge branch 'develop' of http://blit.7drlb.com:8888/r/screen-frontend into develop
---
src/app/routes/report/report.component.html | 8 +-
src/app/routes/report/report.component.css | 6 +-
src/app/routes/report/report.component.ts | 43 +++++++------
src/app/routes/reports/demo/demo.component.ts | 84 +++++++++++++--------------
src/app/routes/reports/demo/demo.component.html | 20 +++++-
5 files changed, 87 insertions(+), 74 deletions(-)
diff --git a/src/app/routes/report/report.component.css b/src/app/routes/report/report.component.css
index 036bf21..ee4dc07 100644
--- a/src/app/routes/report/report.component.css
+++ b/src/app/routes/report/report.component.css
@@ -8,8 +8,8 @@
h1,h2,h3,h4,ul,li,p{padding:0;margin:0;list-style:none;font-weight:lighter;}
.clear_fix:after{content:"";display: block;height:0;clear:both;visibility: hidden}
- .bg{ margin: 0 0; width: 1000px;height: 486px;}
- .t_bg{height: 486px; background:url(./images/bg.png) no-repeat center top; background-size: 100% 100%; }
+ .bg{ margin: 0 0; width: 1000px;}
+ .t_bg{height: 485.3px; background:url(./images/bg.png) no-repeat center top; background-size: 100% 100%; }
.t_bg img{text-align: center; width:200px; display: block; margin: 0 auto; padding-top: 30px;}
@@ -33,7 +33,7 @@
/*bottom*/
- .t_bg_b{width: 100%;height: 486px; background:url(./images/bg2.png) no-repeat center top;background-size: 100%;}
+ .t_bg_b{width: 100%;height: 485.3px; background:url(./images/bg2.png) no-repeat center top;background-size: 100%;}
.t_bg_b h1{padding-top: 25px; text-align: center; font-size: 16px; line-height: 34px; font-weight: 600;}
diff --git a/src/app/routes/report/report.component.html b/src/app/routes/report/report.component.html
index 94fb4d1..224d7e4 100644
--- a/src/app/routes/report/report.component.html
+++ b/src/app/routes/report/report.component.html
@@ -7,7 +7,7 @@
<div class="t_bg">
<img src="./assets/img/logo.png">
- <h1>2018���01���������������������������</h1>
+ <h1>{{title}}������������������������</h1>
<div class="container">
<div class="title">
<div class="title_left"></div>
@@ -27,7 +27,7 @@
<div class="content">
<div *ngFor="let item of items;let i = index">
- <div class="left">
+ <div class="{{i % 2 == 0 ? 'left' : 'right'}}">
<h2>{{item.monitorPointName}}</h2>
<p class="text1">���������������{{item.monitorPointAddress}}</p>
<p class="text1">���������������������{{item.deviceCount}}���</p>
@@ -42,7 +42,7 @@
<div id="content" style="display: none;">
<div *ngFor="let i of sensorArr">
- <div id="mydiv{{i}}" style="height: 487px; width: 1000px"></div>
+ <div id="mydiv{{i}}" style="height: 485.3px; width: 1000px"></div>
</div>
</div>
@@ -52,7 +52,7 @@
<div class="bg" *ngIf="! spinning">
<div class="t_bg_b">
- <h1>2018���01������������������������������</h1>
+ <h1>{{title}}������������������������</h1>
</div>
</div>
diff --git a/src/app/routes/report/report.component.ts b/src/app/routes/report/report.component.ts
index 8ef6a88..32699da 100644
--- a/src/app/routes/report/report.component.ts
+++ b/src/app/routes/report/report.component.ts
@@ -9,14 +9,10 @@
@Component({
selector: 'app-report',
templateUrl: './report.component.html',
- // styles: ['./report.component.less'],
styleUrls: ['./report.component.css']
})
export class ReportComponent implements OnInit {
- [x: string]: any;
-
- spinning: boolean = true;
constructor(
public injector: Injector,
public http: HttpClient,
@@ -27,6 +23,10 @@
this.sensorArr.push(index);
}
}
+
+ [x: string]: any;
+
+ public spinning: boolean = true;
public echartOption = {
backgroundColor: '',
@@ -69,24 +69,14 @@
name: ''
},
- series: [
- // {
- // smooth: true,
- // type: 'line',
- // data: [],
- // name: '',
- // itemStyle: {
- // normal: {
- // barBorderRadius: [10, 10, 10, 10]
- // }
- // }
- // }
- ]
+ series: []
};
sensorArr: any = [];
items: any = [];
timeType: any = {};
+ title: string;
+ timeArr = ['���', '���', '���', '���', '���'];
ngOnInit() {
this.activeRoute.queryParams.subscribe(params => {
@@ -115,14 +105,20 @@
option.backgroundColor = 'rgba(23,133,23,0.06)';
}
for (let i = 0; i < items.length; i++) {
+ this.title = items[i].formatTime;
const legendName = items[i].formatTime + timeType.label + (items[i].mac ? items[i].deviceName : items[i].monitorPointName);
option.legend.data[i] = legendName;
const seriesData = datas[i]['data' + i][0][sensorKey];
option.series.push({
data: seriesData,
smooth: true,
- type: 'line',
- name: legendName
+ type: params.reportType,
+ name: legendName,
+ itemStyle: {
+ normal: {
+ barBorderRadius: [10, 10, 10, 10]
+ }
+ }
});
}
const myChart = echarts.init(document.getElementById('mydiv' + index));
@@ -135,8 +131,15 @@
}
});
$('#content').attr({style: "display: inline;"});
+ this.spinning = false;
+ const title = this.title.replace(' ', '-').split('-');
+ this.title = '';
+ for (let i = 0; i < title.length; i++) {
+ if (i < 3) {
+ this.title = this.title + title[i] + this.timeArr[i];
+ }
+ }
}
- this.spinning = false;
});
});
}
diff --git a/src/app/routes/reports/demo/demo.component.html b/src/app/routes/reports/demo/demo.component.html
index 2650c22..f988a34 100644
--- a/src/app/routes/reports/demo/demo.component.html
+++ b/src/app/routes/reports/demo/demo.component.html
@@ -8,7 +8,7 @@
<label> ��� ���</label>
</div>
<div nz-form-control class="flex-1">
- <nz-select [(ngModel)]="query.sensorKey" name="sensorKey" [nzSize]="'large'" [nzPlaceHolder]="'���������'" nzAllowClear>
+ <nz-select [nzMode]="'multiple'" [(ngModel)]="query.sensorKey" name="sensorKey" [nzSize]="'large'" [nzPlaceHolder]="'���������'" nzAllowClear>
<nz-option *ngFor="let option of sensorOptions" [nzLabel]="option.name" [nzValue]="option.sensorKey" ></nz-option>
</nz-select>
</div>
@@ -26,7 +26,21 @@
</div>
</div>
</div>
- <div nz-col [nzSpan]="6" class="mb-md" *ngIf="items.length < 2">
+ <div nz-col [nzSpan]="6" class="mb-md">
+ <div nz-form-item class="d-flex">
+ <div nz-form-label>
+ <label nz-form-item-required>������</label>
+ </div>
+ <div nz-form-control class="flex-1">
+ <nz-select [(ngModel)]="query.reportType" name="reportType" [nzSize]="'large'" [nzPlaceHolder]="'���������'">
+ <!-- <nz-option [nzLabel]="'���������'" [nzValue]="'bar'" selected></nz-option>
+ <nz-option [nzLabel]="'���������'" [nzValue]="'line'" ></nz-option> -->
+ <nz-option *ngFor="let option of reportOptions" [nzLabel]="option.label" [nzValue]="option.value" ></nz-option>
+ </nz-select>
+ </div>
+ </div>
+ </div>
+ <div nz-col [nzSpan]="6" class="mb-md" *ngIf="items.length < 4">
<button nz-button type="button" [nzType]="'primary'" [nzSize]="'large'" (click)="addItem()">
<!-- <i class="anticon anticon-plus"></i> -->
<i class="anticon anticon-plus-circle-o"></i>
@@ -68,7 +82,7 @@
<label nz-form-item-required>������</label>
</div>
<div nz-form-control class="flex-1">
- <nz-datepicker style="width: 100%;" value="" [(ngModel)]="item.time" name="time{{item.id}}" id="{{item.time}}" [nzPlaceHolder]="'���������'" [nzFormat]="time.format" [nzMode]="time.mode" [nzSize]="'large'" nzShowTime [nzDisabledDate]="_disabledDate"></nz-datepicker>
+ <nz-datepicker style="width: 100%;" [(ngModel)]="item.time" name="time{{item.id}}" [nzPlaceHolder]="'���������'" [nzFormat]="time.format" [nzMode]="query.type=='hour'||query.type=='day'?'day':'month'" [nzSize]="'large'" [nzShowTime]="query.type=='hour'?true:false" [nzDisabledDate]="_disabledDate"></nz-datepicker>
</div>
</div>
</div>
diff --git a/src/app/routes/reports/demo/demo.component.ts b/src/app/routes/reports/demo/demo.component.ts
index 1189314..755551b 100644
--- a/src/app/routes/reports/demo/demo.component.ts
+++ b/src/app/routes/reports/demo/demo.component.ts
@@ -12,14 +12,35 @@
})
export class DemoComponent implements OnInit {
+ constructor(
+ public http: HttpClient,
+ public dateSrv: DateService,
+ public router: Router,
+ public msgSrv: NzMessageService
+ ) {
+ const timeType = this.timeType = this.typeOptions[1];
+ this.query.type = timeType.value;
+ this.time.format = timeType.format.toUpperCase();
+ this.query.reportType = this.reportOptions[1].value;
+ }
[x: string]: any;
- query: any = {
- };
- time: any = {
- format: 'YYYY',
- mode: 'month'
- };
- items = [{
+ public query: any = {};
+ public sensorOptions = [];
+ public typeOptions = [
+ {value: 'year', label: '���', xAxisName: '���', format: 'yyyy', typeFormat: '%Y-%m', timeLength: 12},
+ {value: 'month', label: '���', xAxisName: '���', format: 'yyyy-MM', typeFormat: '%Y-%m-%d', timeLength: 28},
+ {value: 'day', label: '���', xAxisName: '���', format: 'yyyy-MM-dd', typeFormat: '%Y-%m-%d %H', timeLength: 24},
+ {value: 'hour', label: '���', xAxisName: '���', format: 'yyyy-MM-dd HH', typeFormat: '%Y-%m-%d %H:%i', timeLength: 60}
+ ];
+ public reportOptions = [
+ {value: 'bar', label: '���������'},
+ {value: 'line', label: '���������'}
+ ];
+ public monitorPointOptions = [];
+ public deviceOptions = [];
+ public time: any = {};
+ public timeType: any = {};
+ public items = [{
id: 0,
monitorPoint: null,
mac: '',
@@ -29,20 +50,7 @@
deviceName: '',
monitorPointAddress: '',
deviceCount: ''
-
}];
-
- public sensorOptions = [];
- public monitorPointOptions = [];
- public deviceOptions = [];
-
- constructor(
- public http: HttpClient,
- public dateSrv: DateService,
- public router: Router,
- public msgSrv: NzMessageService
- ) {
- }
ngOnInit() {
this.http.get(environment.SERVER_BASH_URL + 'sensor/all').subscribe((res: any) => {
@@ -50,6 +58,15 @@
this.msgSrv.error(res.message);
} else {
this.sensorOptions = res.data;
+ }
+ });
+ }
+
+ typeChange(searchText) {
+ this.typeOptions.forEach(types => {
+ if (types.value === searchText) {
+ this.timeType = types;
+ this.time.format = types.format.toUpperCase();
}
});
}
@@ -68,7 +85,6 @@
deviceCount: ''
});
}
-
searchChange(searchText, i) {
if (searchText) {
@@ -121,23 +137,8 @@
}
}
- public typeOptions = [
- {value: 'year', label: '���', mode: 'month', xAxisName: '���', format: 'yyyy', typeFormat: '%Y-%m', timeLength: 12},
- {value: 'month', label: '���', mode: 'month', xAxisName: '���', format: 'yyyy-MM', typeFormat: '%Y-%m-%d', timeLength: 28},
- {value: 'day', label: '���', mode: 'day', xAxisName: '���', format: 'yyyy-MM-dd', typeFormat: '%Y-%m-%d %H', timeLength: 24},
- {value: 'hour', label: '���', mode: 'day', xAxisName: '���', format: 'yyyy-MM-dd HH', typeFormat: '%Y-%m-%d %H:%i', timeLength: 60}
- ];
-
- timeType = this.typeOptions[0];
-
- typeChange(searchText) {
- this.typeOptions.forEach(types => {
- if (types.value === searchText) {
- this.timeType = types;
- this.time.format = types.format.toUpperCase();
- this.time.mode = types.mode;
- }
- });
+ _disabledDate(current: Date): boolean {
+ return current && current.getTime() > Date.now();
}
reportQuery() {
@@ -152,18 +153,13 @@
break;
}
}
- if (validate && query.type) {
+ if (validate && query.type && query.reportType) {
query.timeType = JSON.stringify(this.timeType);
query.items = JSON.stringify(this.items);
- console.info(this.items);
this.router.navigate(['report'], {queryParams: query});
} else {
this.msgSrv.error('���������������������������������������');
}
- }
-
- _disabledDate(current: Date): boolean {
- return current && current.getTime() > Date.now() ;
}
}
--
Gitblit v1.8.0