| src/app/routes/report/report.component.html | ●●●●● patch | view | raw | blame | history | |
| src/app/routes/report/report.component.ts | ●●●●● patch | view | raw | blame | history | |
| src/app/routes/reports/demo/demo.component.html | ●●●●● patch | view | raw | blame | history | |
| src/app/routes/reports/demo/demo.component.ts | ●●●●● patch | view | raw | blame | history |
src/app/routes/report/report.component.html
@@ -17,7 +17,7 @@ <div class="title"> <div class="title_left"></div> <div class="text"> <span *ngFor="let item of items;let i = index"><span *ngIf="i > 0">与</span>{{item.monitorPointName}}</span> <span *ngFor="let item of items;let i = index"><span *ngIf="i > 0">与</span>{{item.monitorPointName}}{{item.professionName}}</span> <span>实时监测分析</span> </div> <div class="title_right"></div> @@ -29,12 +29,12 @@ <div class="{{i % 2 == 0 ? 'left' : 'right'}}"> <div class="text_t"> <div class="text_t_left"></div> <div class="text_t_bg">{{item.monitorPointName}}</div> <div class="text_t_bg">{{item.monitorPointName}}{{item.professionName}}</div> <div class="text_t_right"></div> <div class="clear_fix"></div> </div> <p *ngIf="item.monitorPointId" class="text1">公司地址：{{item.monitorPointAddress}}</p> <p class="text1">拥有监测设备{{item.deviceCount}}台</p> <p class="text1">拥有监测设备{{item.deviceCount?item.deviceCount:0}}台</p> <div class="clear_fix"></div> </div> </div> src/app/routes/report/report.component.ts
@@ -123,27 +123,32 @@ for (let i = 0; i < items.length; i++) { this.title = items[i].formatTime; items[i].deviceCount = deviceCounts[i]; if (!(items[i].monitorPointId)) { /* if (!(items[i].monitorPointId)) { items[i].monitorPointName = items[i].areaName; } const legendName = items[i].formatTime + label + (items[i].mac ? '设备:' + items[i].deviceName : (items[i].monitorPointId ? '监测点:' + items[i].monitorPointName : items[i].areaName)); } */ const showName = items[i].showName = items[i].mac ? '设备:' + items[i].deviceName : (items[i].monitorPointId ? '监测点:' + items[i].monitorPointName : items[i].areaName) + items[i].professionName; const legendName = items[i].formatTime + label + showName; items[i].legendName = option.legend.data[i] = legendName; option.series.push({ name: legendName, data: res.data.datas[i][sensorKey], type: params.reportType, smooth: true, itemStyle: { normal: { barBorderRadius: [10, 10, 10, 10] if (res.data.datas[i][sensorKey]) { option.series.push({ name: legendName, data: res.data.datas[i][sensorKey], type: params.reportType, smooth: true, itemStyle: { normal: { barBorderRadius: [10, 10, 10, 10] } } } }); }); } } const myChart = echarts.init(document.getElementById('mydiv' + index)); myChart.setOption(option, true); window.onresize = myChart.resize; if (option.series.length < 1) { $('#mydiv' + index).remove(); } } this.sensorArr.forEach(i => { if (i >= sensors.length) { @@ -151,6 +156,9 @@ } }); this.spinning = false; if (!this.title) { this.title = items[0].formatTime; } const title: any[] = this.title.replace(' ', '-').split('-'); this.title = ''; for (let i = 0; i < title.length; i++) { @@ -227,7 +235,7 @@ if (sensor.key === split[0]) { this.resultArr.push({ sensorName: sensor.name, monitorPointName: this.items[split[1]].mac ? this.items[split[1]].deviceName : this.items[split[1]].monitorPointName, monitorPointName: this.items[split[1]].showName, result: res.data.sortList[i][key] + '%', effect: sensor.effect, measures: sensor.measures src/app/routes/reports/demo/demo.component.html
@@ -12,7 +12,7 @@ <nz-option *ngFor="let option of sensorOptions" [nzLabel]="option.name" [nzValue]="option.sensorKey + '-' + option.name + '-' + option.unit"></nz-option> </nz-select> --> <nz-popover [nzPlacement]="'bottomLeft'" [nzTrigger]="'click'"> <nz-input [nzType]="'input'" nz-popover [ngModel]="sensorNames" name="sensorKeys" [nzReadonly]="true" [nzPlaceHolder]="'请选择 项目'"> <nz-input [nzType]="'input'" nz-popover [ngModel]="sensorNames" name="sensorKeys" [nzReadonly]="true" [nzPlaceHolder]="'请选择 项目'" [nzSize]="'large'"> <ng-template #suffix> <i class="anticon anticon-down ant-cascader-picker-arrow" style="right: 1px;"></i> </ng-template> @@ -29,7 +29,19 @@ <div nz-col [nzSpan]="5" class="mb-md"> <div nz-form-item class="d-flex"> <div nz-form-label class="label-width-70"> <label nz-form-item-required>类型</label> <label>维度</label> </div> <div nz-form-control class="flex-1"> <nz-select [(ngModel)]="query.dimension" name="dimension" [nzSize]="'large'" [nzPlaceHolder]="'请选择'" (ngModelChange)="dimensionChange($event)"> <nz-option *ngFor="let option of dimensionOptions" [nzLabel]="option.label" [nzValue]="option.value" ></nz-option> </nz-select> </div> </div> </div> <div nz-col [nzSpan]="5" class="mb-md"> <div nz-form-item class="d-flex"> <div nz-form-label class="label-width-70"> <label>类型</label> </div> <div nz-form-control class="flex-1"> <nz-select [(ngModel)]="timeType" name="timeType" [nzSize]="'large'" [nzPlaceHolder]="'请选择'"> @@ -41,7 +53,7 @@ <div nz-col [nzSpan]="5" class="mb-md"> <div nz-form-item class="d-flex"> <div nz-form-label class="label-width-70"> <label nz-form-item-required>图型</label> <label>图型</label> </div> <div nz-form-control class="flex-1"> <nz-select [(ngModel)]="query.reportType" name="reportType" [nzSize]="'large'" [nzPlaceHolder]="'请选择'"> @@ -50,7 +62,7 @@ </div> </div> </div> <div nz-col [nzSpan]="5" class="mb-md" *ngIf="items.length < 2"> <div nz-col [nzSpan]="4" class="mb-md" *ngIf="items.length < 2"> <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> @@ -67,13 +79,13 @@ <label nz-form-item-required>省市区</label> </div> <div nz-form-control class="flex-1"> <nz-cascader (nzLoad)="areaLazyLoad($event,i)" [nzPlaceHolder]="'请选择 省/市/区'" [nzAllowClear]="false" [nzChangeOnSelect]="true" (nzSelect)="regionChange($event,i)"> <nz-cascader [nzSize]="'large'" (nzLoad)="areaLazyLoad($event,i)" [nzPlaceHolder]="'请选择 省/市/区'" [nzAllowClear]="false" [nzChangeOnSelect]="true" (nzSelect)="regionChange($event,i)"> </nz-cascader> </div> </div> </div> <div nz-col [nzSpan]="5" class="mb-md"> <div nz-col [nzSpan]="5" class="mb-md" [ngStyle]="{'display':monitorPointShow ? 'block' : 'none' }"> <div nz-form-item class="d-flex"> <div nz-form-label class="label-width-70"> <label>监测站点</label> @@ -83,6 +95,18 @@ [nzNotFoundContent]="'无法找到'" (ngModelChange)="monitorPointChange($event,i)" nzShowSearch nzAllowClear> <nz-option *ngFor="let option of item.monitorPointOptions" [nzLabel]="option['name']" [nzValue]="option"> </nz-option> </nz-select> </div> </div> </div> <div nz-col [nzSpan]="5" class="mb-md" [ngStyle]="{'display':professionShow ? 'block' : 'none' }"> <div nz-form-item class="d-flex"> <div nz-form-label class="label-width-70"> <label >行业</label> </div> <div nz-form-control class="flex-1"> <nz-select [(ngModel)]="item.profession" name="profession{{item.id}}" [nzSize]="'large'" [nzPlaceHolder]="'请选择 行业'" nzAllowClear (ngModelChange)="professionChange($event,i)" > <nz-option *ngFor="let option of professionOptions" [nzLabel]="option.name" [nzValue]="option" ></nz-option> </nz-select> </div> </div> </div> @@ -101,10 +125,10 @@ <div nz-col [nzSpan]="5" class="mb-md"> <div nz-form-item class="d-flex"> <div nz-form-label class="label-width-70"> <label nz-form-item-required>时间</label> <label>时间</label> </div> <div nz-form-control class="flex-1"> <nz-datepicker style="width: 100%;" [(ngModel)]="item.time" name="time{{item.id}}" [nzPlaceHolder]="'请选择 时间'" [nzFormat]="timeType.format" [nzDisabledDate]="_disabledDate" <nz-datepicker style="width: 100%;" [(ngModel)]="item.time" name="time{{item.id}}" [nzFormat]="timeType.format" [nzDisabledDate]="_disabledDate" [nzAllowClear]="false" [nzMode]="timeType.value=='hour'||timeType.value=='day'?'day':'month'" [nzShowTime]="timeType.value=='hour'?true:false" [nzSize]="'large'"></nz-datepicker> </div> </div> src/app/routes/reports/demo/demo.component.ts
@@ -28,12 +28,19 @@ {value: 'bar', label: '柱状图'}, {value: 'line', label: '折线图'} ]; public professionOptions = []; public dimensionOptions = [ {value: 'monitorPoint', label: '监测站点'}, {value: 'profession', label: '行业'} ]; monitorPointShow = true; professionShow = false; public items: any[] = [{ id: 0, profession: null, monitorPoint: null, device: null, time: null, time: new Date(), monitorPointOptions: [], deviceOptions: [] }]; @@ -53,6 +60,7 @@ ) { this.timeType = this.typeOptions[1]; this.query.reportType = this.reportOptions[1].value; this.query.dimension = this.dimensionOptions[0].value; } ngOnInit() { @@ -64,6 +72,28 @@ } }); this.http.get(environment.SERVER_BASH_URL + 'mobile/profession').subscribe((res: any) => { if (res.errno !== 0) { this.msgSrv.error(res.message); } else { this.professionOptions = res.data; } }); } dimensionChange(value) { this.items.forEach((item,index) => { item.profession = null; item.monitorPoint = null; item.device = null; }); if (value === 'monitorPoint') { this.professionShow = false; this.monitorPointShow = true; } else { this.professionShow = true; this.monitorPointShow = false; } } public onTreeClickSelect(event): void { @@ -112,9 +142,10 @@ const id = (this.items.length > 0) ? this.items[this.items.length - 1].id + 1 : 0; const index = this.items.push({ id: id, profession: null, monitorPoint: null, device: null, time: null, time: new Date(), monitorPointOptions: [], deviceOptions: [] }); @@ -150,6 +181,7 @@ let areaName = ''; const option = event.option; this.items[i].monitorPoint = null; this.items[i].profession = null; this.items[i].areaCode = null; this.items[i].device = null; @@ -195,6 +227,26 @@ } } professionChange(value, i) { this.items[i].deviceOptions = []; this.items[i].device = null; if (value) { if (!!this.items[i].areaName) { this.items[i].professionId = value.id; this.http.get(environment.SERVER_BASH_URL + 'device/professionId', {params: this.items[i]}).subscribe((res: any) => { if (res.code === 0) { this.msgSrv.error(res.message); } else { this.items[i].deviceOptions = res.data; } }); } else { this.msgSrv.error('请先选择 省市区！'); } } } _disabledDate(current: Date): boolean { return current && current.getTime() > Date.now(); } @@ -207,17 +259,24 @@ const areaName = ''; const item = this.items[i]; const queryItem: any = {}; if ((!!item.time) && (item.monitorPointOptions.length > 0)) { if (item.monitorPointOptions.length > 0) { for (const key in item) { if (item[key]) { queryItem[key] = item[key]; } } if (queryItem.profession) { queryItem.professionId = queryItem.profession.id; queryItem.professionName = queryItem.profession.name; delete queryItem.profession; } if (queryItem.monitorPoint) { queryItem.monitorPointId = queryItem.monitorPoint.id; queryItem.monitorPointName = queryItem.monitorPoint.name; queryItem.monitorPointAddress = queryItem.monitorPoint.address; delete queryItem.monitorPoint; } else { queryItem.monitorPointName = queryItem.areaName; } delete queryItem.monitorPointOptions; if (queryItem.device) {
