From c597ff5895ae803ce5584f3e8463d8f9224b0fa4 Mon Sep 17 00:00:00 2001 From: xufenglei <xufenglei> Date: Fri, 27 Apr 2018 09:03:59 +0800 Subject: [PATCH] 优化 饼图功能 --- src/app/routes/report/report.component.ts | 214 ++++++++++++++++++++++++++++------------------------- 1 files changed, 113 insertions(+), 101 deletions(-) diff --git a/src/app/routes/report/report.component.ts b/src/app/routes/report/report.component.ts index ac0270b..85f429f 100644 --- a/src/app/routes/report/report.component.ts +++ b/src/app/routes/report/report.component.ts @@ -12,6 +12,16 @@ }) export class ReportComponent implements OnInit { + constructor( + public injector: Injector, + public http: HttpClient, + public msgSrv: NzMessageService + ) { + for (let index = 0; index < 30; index++) { + this.sensorArr.push(index); + } + } + [x: string]: any; public spinning = true; @@ -29,22 +39,10 @@ legend: { data: [], orient: 'vertical', - right: 40, + right: 30, top: 5, bottom: 20, type: 'scroll' - }, - toolbox: { - show: false, - feature: { - dataZoom: { - yAxisIndex: 'none' - }, - dataView: {readOnly: false}, - magicType: {type: ['line', 'bar']}, - restore: {}, - saveAsImage: {} - } }, xAxis: { type: 'category', @@ -61,19 +59,19 @@ }; public sensorArr: any = []; + public resultArr: any = []; public items: any = []; public title: string; private timeArr = ['���', '���', '���', '���', '���']; public typeArr = ['year', 'month', 'day', 'hour']; - constructor( - public injector: Injector, - public http: HttpClient, - public msgSrv: NzMessageService - ) { - for (let index = 0; index < 30; index++) { - this.sensorArr.push(index); - } - } + 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: { @@ -87,77 +85,12 @@ legend: { // x : 'center', top: '10%', - data: ['PM 2.5', 'PM 10', '���������������CO���', '���������������SO������', '���������O������', '���������������NO������'] + data: [] }, - graphic: [{ - type: 'text', - left: '24%', - top: '49%', - style: { - text: '������������' - } - }, { - type: 'text', - left: '74%', - top: '49%', - style: { - text: '{b}' - } - } - ], - series: [ - { - name: '������������', - type: 'pie', - radius: ['30%', '50%'], - center: ['25%', '50%'], - label: { - normal: { - formatter: '{b}:{d}%' - } - }, - labelLine: { - normal: { - show: true - } - }, - data: [ - {value: 100, name: 'PM 2.5'}, - {value: 100, name: 'PM 10'}, - {value: 200, name: '���������������CO���'}, - {value: 200, name: '���������������SO������'}, - {value: 100, name: '���������O������'}, - {value: 100, name: '���������������NO������'} - ] - }, - { - name: '������������', - type: 'pie', - radius: ['30%', '50%'], - center: ['75%', '50%'], - label: { - normal: { - formatter: '{b}:{d}%', - } - }, - labelLine: { - normal: { - show: true, - } - }, - data: [ - {value: 0, name: 'PM 2.5'}, - {value: 0, name: 'PM 10'}, - {value: 100, name: '���������������CO���'}, - {value: 100, name: '���������������SO������'}, - {value: 100, name: '���������O������'}, - {value: 100, name: '���������������NO������'} - - ] - } - ] + graphic: [], + series: [] }; - + public isShow = true; ngOnInit() { const params = JSON.parse(sessionStorage.getItem('queryParams')); if (!!params) { @@ -182,7 +115,7 @@ option.yAxis.name = split[2] && split[2] !== 'null' ? '������:' + split[2] : ''; option.series = []; option.legend.data = []; - if (index % 2 == 0) { + if (index % 2 === 0) { option.backgroundColor = 'rgba(0,0,0,0)'; } else { option.backgroundColor = 'rgba(23,133,23,0.06)'; @@ -190,11 +123,12 @@ 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)); - option.legend.data[i] = legendName; + const legendName = items[i].formatTime + label + + (items[i].mac ? '������:' + items[i].deviceName : (items[i].monitorPointId ? '���������:' + items[i].monitorPointName : items[i].areaName)); + items[i].legendName = option.legend.data[i] = legendName; option.series.push({ name: legendName, data: res.data.datas[i][sensorKey], @@ -222,14 +156,92 @@ for (let i = 0; i < title.length; i++) { this.title += title[i] + timeArr[i]; } - if (sensors.length % 2 == 0) { - this.pieCharOption.backgroundColor = 'rgba(0,0,0,0)'; + + 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]) { + this.resultArr.push({ + sensorName: sensor.name, + monitorPointName: this.items[split[1]].mac ? this.items[split[1]].deviceName : this.items[split[1]].monitorPointName, + result: res.data.sortList[i][key] + '%', + effect: sensor.effect, + measures: sensor.measures + }); + } + + }); + } + } + } } else { - this.pieCharOption.backgroundColor = 'rgba(23,133,23,0.06)'; + $('#pieChar').remove(); + this.isShow = false; } -// const myChart = echarts.init(document.getElementById('pieChar')); -// myChart.setOption(this.pieCharOption, true); -// window.onresize = myChart.resize; } }); } else { -- Gitblit v1.8.0