From fdde9a5cb356933bac26b64b67b53167ce2f41bd Mon Sep 17 00:00:00 2001 From: xufenglei <xufenglei> Date: Thu, 17 May 2018 10:03:29 +0800 Subject: [PATCH] 行业 优化 --- src/app/routes/report/report.component.ts | 250 ++++++++++++++++++++++++++++++++++++++----------- 1 files changed, 191 insertions(+), 59 deletions(-) diff --git a/src/app/routes/report/report.component.ts b/src/app/routes/report/report.component.ts index f898999..85643f5 100644 --- a/src/app/routes/report/report.component.ts +++ b/src/app/routes/report/report.component.ts @@ -2,22 +2,19 @@ import {NzMessageService, NzModalService} from 'ng-zorro-antd'; import {Component, OnInit, Injector} from '@angular/core'; 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: [] + styleUrls: ['./report.component.css'] + }) export class ReportComponent implements OnInit { - [x: string]: any; - constructor( public injector: Injector, public http: HttpClient, - public activeRoute: ActivatedRoute, public msgSrv: NzMessageService ) { for (let index = 0; index < 30; index++) { @@ -25,7 +22,12 @@ } } - public echartOption = { + [x: string]: any; + + public spinning = true; + + private echartOption = { + backgroundColor: '', title: { text: '', // subtext: '12������', @@ -37,21 +39,10 @@ legend: { data: [], orient: 'vertical', - right: 40, + right: 30, top: 5, - bottom: 20 - }, - toolbox: { - show: false, - feature: { - dataZoom: { - yAxisIndex: 'none' - }, - dataView: {readOnly: false}, - magicType: {type: ['line', 'bar']}, - restore: {}, - saveAsImage: {} - } + bottom: 20, + type: 'scroll' }, xAxis: { type: 'category', @@ -64,67 +55,208 @@ name: '' }, - series: [ - // { - // smooth: true, - // type: 'line', - // data: [], - // name: '', - // itemStyle: { - // normal: { - // barBorderRadius: [10, 10, 10, 10] - // } - // } - // } - ] + series: [] }; - sensorArr: any = []; - + public sensorArr: any = []; + public resultArr: any = []; + public items: any = []; + public title: string; + private timeArr = ['���', '���', '���', '���', '���']; + public typeArr = ['year', 'month', 'day', 'hour']; + public sensorKeys: any = [ + {key: 'e1', name: 'PM 2.5', effect: 'PM2.5������������������������������������������������������������������������������������', measures: '������������������������������������������������������������������������������������'}, + {key: 'e2', name: 'PM 10', effect: '���������PM10������������������������������������������������������������������������������������', measures: '���������������������������������������������������������������������������������������'}, + {key: 'e10', name: '���������������CO���', effect: '���������������������������������������������������������������������������������������', measures: '������������������������������������������'}, + {key: 'e11', name: '���������������SO������', effect: '������������������������������������������������������������������������������������', measures: '������������������������������������������������������������������������������������������������������������������SO2'}, + {key: 'e15', name: '���������O������', effect: '������������������������ ������������������������������������������������������������������������������', measures: '������������������������������������'}, + {key: 'e16', name: '���������������NO������', effect: '���������������������������������������������������������������������������������������', measures: '���������������������������������(���������)������������������������������������������'} + ]; + + private pieCharOption: any = { + title: { + text: 'AQI������������������������', + x: 'center' + }, + tooltip: { + trigger: 'item', + formatter: '{a} <br/>{b}: {c} ({d}%)' + }, + legend: { + // x : 'center', + top: '10%', + data: [] + }, + graphic: [], + series: [] + }; + public isShow = true; ngOnInit() { - this.activeRoute.queryParams.subscribe(params => { - const items = JSON.parse(params.items); - const query = params; - this.http.get(environment.SERVER_BASH_URL + 'report/compare', {params: query}).subscribe((res: any) => { + const params = JSON.parse(sessionStorage.getItem('queryParams')); + if (!!params) { + localStorage.removeItem('queryParams'); + const items = this.items = JSON.parse(params.items); + const timeType = params.type; + this.http.get(environment.SERVER_BASH_URL + 'report/compare', {params: params}).subscribe((res: any) => { if (res.code === 0) { this.msgSrv.error(res.message); } else { const option = this.echartOption; - const datas = res.data.datas; - const times = res.data.times - const sensors = res.data.sensors - option.xAxis.data = times; - option.xAxis.name = query.xAxisName; + const sensors = res.data.sensors; + const deviceCounts = res.data.deviceCounts; + const timeArr = this.timeArr; + const label = timeArr[this.typeArr.indexOf(timeType)]; + option.xAxis.data = res.data.times; + option.xAxis.name = timeArr[timeArr.indexOf(label) + 1]; for (let index = 0; index < sensors.length; index++) { - let sensorKey = sensors[index]; - let split = sensorKey.split('-'); - option.title.text = split[1] + query.label + '������������'; - option.yAxis.name = split[2] && split[2] != 'null' ? split[2] : ''; + const sensorKey = sensors[index]; + const split = sensorKey.split('-'); + option.title.text = split[1] + label + '������������'; + option.yAxis.name = split[2] && split[2] !== 'null' ? '������:' + split[2] : ''; option.series = []; option.legend.data = []; - + if (index % 2 === 0) { + option.backgroundColor = 'rgba(0,0,0,0)'; + } else { + option.backgroundColor = 'rgba(23,133,23,0.06)'; + } for (let i = 0; i < items.length; i++) { - const legendName = items[i].formatTime + query.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 - }); + this.title = items[i].formatTime; + items[i].deviceCount = deviceCounts[i]; + /* if (!(items[i].monitorPointId)) { + items[i].monitorPointName = items[i].areaName; + } */ + const showName = this.items[i].showName = + items[i].mac ? ('������:' + items[i].deviceName) : + ((items[i].monitorPointId ? '���������:' + items[i].monitorPointName : items[i].areaName) + (items[i].professionName ? items[i].professionName : '')); + const legendName = items[i].formatTime + label + showName; + items[i].legendName = option.legend.data[i] = legendName; + 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) { $('#mydiv' + i).remove(); } }); + 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++) { + this.title += title[i] + timeArr[i]; + } + + if ((params.type === 'month' || params.type === 'year') && res.data.sortList.length > 0) { + let center = ['50%', '50%']; + let left = '40%'; + const length = items.length; + const alarmDatas = res.data.alarmDatas; + for (let i = 0; i < length; i++) { + this.pieCharOption.legend.data = []; + const data = []; + this.sensorKeys.forEach(sensorKey => { + this.pieCharOption.legend.data.push(sensorKey.name); + if (alarmDatas[i]) { + data.push({ + name: sensorKey.name, + value: alarmDatas[i][sensorKey.key] + }); + } + }); + if (length === 2) { + if (i === 0) { + center = ['25%', '50%']; + left = '15%'; + } else { + center = ['75%', '50%']; + left = '65%'; + } + } + this.pieCharOption.series.push({ + name: items[i].monitorPointName, + type: 'pie', + radius: ['20%', '40%'], + center: center, + label: { + normal: { + formatter: '{b}:{d}%' + } + }, + labelLine: { + normal: { + show: true + } + }, + data: data + }); + this.pieCharOption.graphic.push({ + type: 'text', + left: left, + top: '20%', + style: { + text: items[i].legendName + } + }); + } + + if (sensors.length % 2 === 0) { + this.pieCharOption.backgroundColor = 'rgba(0,0,0,0)'; + } else { + this.pieCharOption.backgroundColor = 'rgba(23,133,23,0.06)'; + } + const myChart = echarts.init(document.getElementById('pieChar')); + myChart.setOption(this.pieCharOption, true); + window.onresize = myChart.resize; + + for (let i = 0, j = res.data.sortList.length; i < j; i++) { + if (i < 5) { + for (const key in res.data.sortList[i]) { + const split = key.split('-'); + this.sensorKeys.forEach(sensor => { + if (sensor.key === split[0] && res.data.sortList[i][key] != 0) { + this.resultArr.push({ + sensorName: sensor.name, + monitorPointName: this.items[split[1]].showName, + result: res.data.sortList[i][key] + '%', + effect: sensor.effect, + measures: sensor.measures + }); + } + + }); + } + } + } + } else { + $('#pieChar').remove(); + this.isShow = false; + } } }); - }); + } else { + this.msgSrv.error('������������������������������������'); + setTimeout('window.close();', 1000); + } } } -- Gitblit v1.8.0