| 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
@@ -1,3 +1,5 @@ <!-- <input type='button' value='打印' class='notprint' onclick='javascript:window.print();' /> --> <div id ="mydiv" style="height: 300px; width: 100%"></div> <div *ngFor="let i of sensorArr"> <div id ="mydiv{{i}}" style="height: 487px; width: 1000px"></div> </div>
@@ -4,29 +4,30 @@ import {HttpClient} from '@angular/common/http'; import {ActivatedRoute} from '@angular/router'; import * as echarts from 'echarts'; import * as $ from 'jquery'; @Component({ selector: 'app-report', templateUrl: './report.component.html', styles: [] }) export class ReportComponent implements OnInit { public data: any; public isShow = true; [x: string]: any; constructor( injector: Injector, public injector: Injector, public http: HttpClient, public activeRoute: ActivatedRoute, public msgSrv: NzMessageService ) { } ) { for (let index = 0; index < 19; index++) { this.sensorArr.push(index); } } public echartOption = { title: { text: '', subtext: '12月份', // subtext: '12月份', left: 'center' }, tooltip: { @@ -37,7 +38,7 @@ left: 'left' }, toolbox: { show: true, show: false, feature: { dataZoom: { yAxisIndex: 'none' @@ -61,7 +62,7 @@ }, series: [ { smooth: false, smooth: true, type: 'line', data: [], name: '' @@ -80,10 +81,15 @@ ] }; sensorArr: any = []; arr = new Array(); ngOnInit() { this.activeRoute.queryParams.subscribe(params => { const query = params; this.http.get(environment.SERVER_BASH_URL + 'report/compare', {params: query}).subscribe((res: any) => { console.info(query.label); query.items = JSON.parse(query.items); this.http.post(environment.SERVER_BASH_URL + 'report/compare', query).subscribe((res: any) => { if (res.code === 0) { this.msgSrv.error(res.message); } else { @@ -91,18 +97,34 @@ const data = res.data; if (data['time']) { option.xAxis.data = data['time']; option.title.text = query.sensorName + query.label + '历走势图'; option.series[0].data = []; option.legend.data[0] = ''; option.series[0].name = ''; option.series[1].data = []; option.legend.data[1] = ''; option.series[1].name = ''; option.xAxis.name = query.xAxisName; if (data.dataA) { const legendNamea = (query.deviceaName ? query.deviceaName : query.monitorPointaName) + query.time + query.label; option.series[0].data = data.dataA; option.legend.data[0] = legendNamea; option.series[0].name = legendNamea; let index = 0; for (const key in data.dataA[0]) { this.arr.push(index); let split = key.split('-'); option.title.text = split[1] + query.label + '历走势图'; option.series[0].data = data.dataA[0][key]; option.yAxis.name = split[2]; const myChart = echarts.init(document.getElementById('mydiv' + index)); myChart.setOption(option, true); window.onresize = myChart.resize; index++; } this.sensorArr.forEach(i => { if (this.arr.indexOf(i) == -1) { $('#mydiv' + i).remove(); } }); } if (data.dataB) { const legendNameb = (query.devicebName ? query.devicebName : params.monitorPointbName) + query.timeb + query.label; @@ -110,29 +132,10 @@ option.legend.data[1] = legendNameb; option.series[1].name = legendNameb; } option.yAxis.name = query.sensorUnit; option.xAxis.name = query.xAxisName; const myChart = echarts.init(document.getElementById('mydiv')); myChart.setOption(option, true); window.onresize = myChart.resize; } this.isShow = true; } }); }); } doPrint() { this.isShow = false; window.print(); } printBtnBoolean = true; printComplete() { this.printBtnBoolean = true; } beforePrint() { this.printBtnBoolean = false; } } src/app/routes/reports/demo/demo.component.html
@@ -5,7 +5,7 @@ <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> <label> 项 目</label> </div> <div nz-form-control class="flex-1"> <nz-select [(ngModel)]="query.sensorKey" name="sensorKey" [nzSize]="'large'" [nzPlaceHolder]="'请选择'" (ngModelChange)="sensorChange($event)" nzAllowClear> @@ -20,23 +20,31 @@ <label nz-form-item-required>类型</label> </div> <div nz-form-control class="flex-1"> <nz-select [(ngModel)]="query.type" name="isDelete" [nzSize]="'large'" [nzPlaceHolder]="'请选择'" (ngModelChange)="typeChange($event)"> <nz-select [(ngModel)]="query.type" name="type" [nzSize]="'large'" [nzPlaceHolder]="'请选择'" (ngModelChange)="typeChange($event)"> <nz-option *ngFor="let option of typeOptions" [nzLabel]="option.label" [nzValue]="option.value" ></nz-option> </nz-select> </div> </div> </div> <div nz-col [nzSpan]="6" class="mb-md" *ngIf="items.length!=5"> <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> <span>增加查询条目</span> </button> </div> </div> <div nz-row [nzGutter]="24"> <div nz-row [nzGutter]="24" *ngFor="let item of items;let i = index"> <div nz-col [nzSpan]="6" class="mb-md"> <div nz-form-item class="d-flex"> <div nz-form-label> <label >监测点</label> <label nz-form-item-required>监测点</label> </div> <div nz-form-control class="flex-1"> <nz-select [(ngModel)]="query.monitorPoint" name="monitorPoint" nzAllowClear [nzPlaceHolder]="'请输入'" [nzFilter]="false" [nzSize]="'large'" (nzSearchChange)="searchChange($event)" [nzNotFoundContent]="'无法找到'" (ngModelChange)="monitorPointChange($event)" nzShowSearch> <nz-select [(ngModel)]="item.monitorPoint" name="monitorPoint{{item.id}}" nzAllowClear [nzPlaceHolder]="'请输入'" [nzFilter]="false" [nzSize]="'large'" (nzSearchChange)="searchChange($event,i)" [nzNotFoundContent]="'无法找到'" (ngModelChange)="monitorPointChange($event,i)" nzShowSearch> <nz-option *ngFor="let option of monitorPointOptions" [nzLabel]="option['name']" [nzValue]="option['id']"> </nz-option> </nz-select> </div> @@ -48,7 +56,7 @@ <label> 设备</label> </div> <div nz-form-control class="flex-1"> <nz-select [(ngModel)]="query.mac" name="mac" [nzSize]="'large'" nzAllowClear [nzPlaceHolder]="'请选择'" (ngModelChange)="deviceChange($event)"> <nz-select [(ngModel)]="item.mac" name="mac{{item.id}}" [nzSize]="'large'" nzAllowClear [nzPlaceHolder]="'请选择'" (ngModelChange)="deviceChange($event,i)"> <nz-option *ngFor="let option of deviceOptions" [nzLabel]="option.name" [nzValue]="option.mac" ></nz-option> </nz-select> </div> @@ -57,53 +65,21 @@ <div nz-col [nzSpan]="6" class="mb-md"> <div nz-form-item class="d-flex"> <div nz-form-label> <label >时间</label> <label nz-form-item-required>时间</label> </div> <div nz-form-control class="flex-1"> <nz-datepicker style="width: 100%;" [(ngModel)]="query.time" name="time" [nzPlaceHolder]="'请选择'" [nzFormat]="time.format" [nzMode]="time.mode" [nzSize]="'large'" nzShowTime></nz-datepicker> <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></nz-datepicker> </div> </div> </div> <div nz-col [nzSpan]="6" class="mb-md" *ngIf="items.length!=1"> <button nz-button type="button" [nzType]="'danger'" [nzSize]="'large'" (click)="items.splice(i, 1)" nzGhost> <i class="anticon anticon-minus-circle-o dynamic-delete-button"></i> <span>删除查询条目</span> </button> </div> </div> <div nz-row [nzGutter]="24"> <div nz-col [nzSpan]="6" class="mb-md"> <div nz-form-item class="d-flex"> <div nz-form-label> <label >监测点</label> </div> <div nz-form-control class="flex-1"> <nz-select [(ngModel)]="query.monitorPointb" name="monitorPointb" nzAllowClear [nzPlaceHolder]="'请输入'" [nzFilter]="false" [nzSize]="'large'" (nzSearchChange)="searchChangeb($event)" [nzNotFoundContent]="'无法找到'" (ngModelChange)="monitorPointbChange($event)" nzShowSearch> <nz-option *ngFor="let option of monitorPointbOptions" [nzLabel]="option['name']" [nzValue]="option['id']"> </nz-option> </nz-select> </div> </div> </div> <div nz-col [nzSpan]="6" class="mb-md"> <div nz-form-item class="d-flex"> <div nz-form-label> <label> 设备</label> </div> <div nz-form-control class="flex-1"> <nz-select [(ngModel)]="query.macb" name="macb" [nzSize]="'large'" nzAllowClear [nzPlaceHolder]="'请选择'" (ngModelChange)="devicebChange($event)"> <nz-option *ngFor="let option of devicebOptions" [nzLabel]="option.name" [nzValue]="option.mac" ></nz-option> </nz-select> </div> </div> </div> <div nz-col [nzSpan]="6" class="mb-md"> <div nz-form-item class="d-flex"> <div nz-form-label> <label >时间</label> </div> <div nz-form-control class="flex-1"> <nz-datepicker style="width: 100%;" [(ngModel)]="query.timeb" name="timeb" [nzPlaceHolder]="'请选择'" [nzFormat]="time.format" [nzMode]="time.mode" [nzSize]="'large'" nzShowTime></nz-datepicker> </div> </div> </div> </div> <div nz-row [nzGutter]="24"> <div nz-col [nzSpan]="6" class="mb-md"> <button nz-button type="submit" [nzType]="'primary'" [nzSize]="'large'">查询</button> src/app/routes/reports/demo/demo.component.ts
@@ -4,6 +4,7 @@ import {Component, OnInit} from '@angular/core'; import {HttpClient} from '@angular/common/http'; import {Router} from '@angular/router'; import * as $ from 'jquery' @Component({ @@ -20,26 +21,27 @@ format: 'YYYY', mode: 'month' }; items = [{ id: 0, monitorPoint: null, mac: null, time: null, formatTime: null }]; public sensorOptions = []; public monitorPointOptions = []; public deviceOptions = []; public monitorPointbOptions = []; public devicebOptions = []; constructor( public http: HttpClient, public dateSrv: DateService, public router: Router, public msgSrv: NzMessageService ) {} ) { } ngOnInit() { this.query.time = null; this.query.timeb = null; this.http.get(environment.SERVER_BASH_URL + 'sensor/all').subscribe((res: any) => { if (res.code === 0) { this.msgSrv.error(res.message); @@ -49,7 +51,19 @@ }); } searchChange(searchText) { addItem() { const id = (this.items.length > 0) ? this.items[this.items.length - 1].id + 1 : 0; const index = this.items.push({ id, monitorPoint: null, mac: null, time: null, formatTime: null }); } searchChange(searchText, i) { if (searchText) { const query = encodeURI(searchText); if (query) { @@ -64,13 +78,12 @@ } } monitorPointChange(value) { this.query.mac = null; monitorPointChange(value, i) { this.deviceOptions = []; if (value) { this.monitorPointOptions.forEach(monitorPoint => { if (monitorPoint.id === value) { this.monitorPointa = monitorPoint; this.monitorPoint = monitorPoint; } }); this.http.get(environment.SERVER_BASH_URL + 'device/monitorPointId', {params: {monitorPointId: value}}).subscribe((res: any) => { @@ -81,64 +94,17 @@ } }); } else { this.monitorPointa = null; this.items[i].monitorPoint = null; this.items[i].mac = null; } } searchChangeb(searchText) { if (searchText) { const query = encodeURI(searchText); if (query) { this.http.get(environment.SERVER_BASH_URL + '/monitor-point/list/' + query).subscribe((res: any) => { if (res.code === 0) { this.msgSrv.error(res.message); } else { this.monitorPointbOptions = res.data; } }); } } } devicebChange(value) { if (value) { this.devicebOptions.forEach(device => { if (device.mac === value) { this.deviceb = device; } }); } else { this.deviceb = null; } } deviceChange(value) { this.devicea = null; deviceChange(value, i) { this.device = null; if (value) { this.deviceOptions.forEach(device => { if (device.mac === value) { this.devicea = device; } }); } else { this.devicea = null; } } monitorPointbChange(searchText) { this.query.macb = null; this.devicebOptions = []; if (searchText) { this.monitorPointbOptions.forEach(monitorPoint => { if (monitorPoint.id === searchText) { this.monitorPointb = monitorPoint; } }); this.http.get(environment.SERVER_BASH_URL + 'device/monitorPointId', {params: {monitorPointId: searchText}}).subscribe((res: any) => { if (res.code === 0) { this.msgSrv.error(res.message); } else { this.devicebOptions = res.data; this.device = device; } }); } @@ -164,40 +130,29 @@ reportQuery() { const query = this.query; if (query.sensorKey && query.type && ((query.monitorPoint && query.time) || (query.monitorPointb && query.timeb))) { if (query.time) { query.time = this.dateSrv.date_format(query.time, this.time.format); } if (query.timeb) { query.timeb = this.dateSrv.date_format(query.timeb, this.time.format); } if (query.type) { this.items.forEach(item => { if (item.monitorPoint && item.time) { item.formatTime = this.dateSrv.date_format(item.time, this.time.format); } else { this.msgSrv.error('请完善搜索项或删除查询条目'); return; } }); query.format = this.timeType.format; query.typeFormat = this.timeType.typeFormat; query.xAxisName = this.timeType.xAxisName; query.label = this.timeType.label; query.sensorName = this.sensor.name; query.sensorUnit = this.sensor.unit; if (this.devicea) { query.deviceaName = this.devicea.name; } if (this.deviceb) { query.devicebName = this.deviceb.name; } if (this.monitorPointa) { query.monitorPointaName = this.monitorPointa.name; } if (this.monitorPointb) { query.monitorPointbName = this.monitorPointb.name; } query.items = JSON.stringify(this.items); this.router.navigate(['report'], {queryParams: query}); } else { this.msgSrv.error('请完善搜索项'); this.msgSrv.error('请完善搜索项或删除查询条目'); } } sensorChange(value) { this.sensor = {}; this.sensorOptions.forEach(sensor => { if (sensor.sensorKey === value) { this.sensor = sensor;
