From 0e722c9f6127ea7a41ca08fd36547e421b79edeb Mon Sep 17 00:00:00 2001
From: xufenglei <xufenglei>
Date: Wed, 25 Apr 2018 10:26:37 +0800
Subject: [PATCH] 饼图 结论

---
 src/app/routes/report/report.component.ts |  273 ++++++++++++++++++++++++++++++++++++++----------------
 1 files changed, 192 insertions(+), 81 deletions(-)

diff --git a/src/app/routes/report/report.component.ts b/src/app/routes/report/report.component.ts
index a021f06..85f429f 100644
--- a/src/app/routes/report/report.component.ts
+++ b/src/app/routes/report/report.component.ts
@@ -2,29 +2,32 @@
 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 < 19; index++) {
+    for (let index = 0; index < 30; index++) {
       this.sensorArr.push(index);
     }
   }
 
-  public echartOption = {
+  [x: string]: any;
+
+  public spinning = true;
+
+  private echartOption = {
+    backgroundColor: '',
     title: {
       text: '',
       // subtext: '12������',
@@ -35,19 +38,11 @@
     },
     legend: {
       data: [],
-      left: 'left'
-    },
-    toolbox: {
-      show: false,
-      feature: {
-        dataZoom: {
-          yAxisIndex: 'none'
-        },
-        dataView: {readOnly: false},
-        magicType: {type: ['line', 'bar']},
-        restore: {},
-        saveAsImage: {}
-      }
+      orient: 'vertical',
+      right: 30,
+      top: 5,
+      bottom: 20,
+      type: 'scroll'
     },
     xAxis: {
       type: 'category',
@@ -60,82 +55,198 @@
       name: ''
 
     },
-    series: [
-      {
-        smooth: true,
-        type: 'line',
-        data: [],
-        name: ''
-      },
-      {
-        smooth: true,
-        type: 'line',
-        data: [],
-        name: '',
-        itemStyle: {
-          normal: {
-            barBorderRadius: [10, 10, 10, 10]
-          }
-        }
-      }
-    ]
+    series: []
   };
 
-  sensorArr: any = [];
-  arr = new Array();
+  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 query = params;
-      console.info(query.label);
-      query.items = JSON.parse(query.items);
-      this.http.post(environment.SERVER_BASH_URL + 'report/compare', 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 data = res.data;
-          if (data['time']) {
-            option.xAxis.data = data['time'];
-            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.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++;
+          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++) {
+            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++) {
+              this.title = items[i].formatTime;
+              items[i].deviceCount = deviceCounts[i];
+              if (!(items[i].monitorPointId)) {
+                items[i].monitorPointName = items[i].areaName;
               }
-              this.sensorArr.forEach(i => {
-                if (this.arr.indexOf(i) == -1) {
-                  $('#mydiv' + i).remove();
+              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],
+                type: params.reportType,
+                smooth: true,
+                itemStyle: {
+                  normal: {
+                    barBorderRadius: [10, 10, 10, 10]
+                  }
                 }
               });
             }
-            if (data.dataB) {
-              const legendNameb = (query.devicebName ? query.devicebName : params.monitorPointbName) + query.timeb + query.label;
-              option.series[1].data = data['dataB'];
-              option.legend.data[1] = legendNameb;
-              option.series[1].name = legendNameb;
+            const myChart = echarts.init(document.getElementById('mydiv' + index));
+            myChart.setOption(option, true);
+            window.onresize = myChart.resize;
+          }
+          this.sensorArr.forEach(i => {
+            if (i >= sensors.length) {
+              $('#mydiv' + i).remove();
             }
+          });
+          this.spinning = false;
+          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]) {
+                      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 {
+            $('#pieChar').remove();
+            this.isShow = false;
           }
         }
       });
-    });
+    } else {
+      this.msgSrv.error('������������������������������������');
+      setTimeout('window.close();', 1000);
+    }
   }
-
 }

--
Gitblit v1.8.0