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.html     |   23 +++++++
 src/assets/img/No1.png                          |    0 
 src/assets/img/No2.png                          |    0 
 src/app/routes/report/images/bg2.png            |    0 
 src/app/routes/reports/alarm/alarm.component.ts |   39 ++++++------
 src/app/routes/report/report.component.css      |   18 +++++
 src/assets/img/No5.png                          |    0 
 src/app/routes/report/report.component.ts       |   58 +++++++++++++------
 src/assets/img/No4.png                          |    0 
 src/app/routes/report/images/table_bg.png       |    0 
 src/assets/img/No3.png                          |    0 
 11 files changed, 98 insertions(+), 40 deletions(-)

diff --git a/src/app/routes/report/images/bg2.png b/src/app/routes/report/images/bg2.png
index 9d4d9c2..b349c5a 100644
--- a/src/app/routes/report/images/bg2.png
+++ b/src/app/routes/report/images/bg2.png
Binary files differ
diff --git a/src/app/routes/report/images/table_bg.png b/src/app/routes/report/images/table_bg.png
new file mode 100644
index 0000000..526753f
--- /dev/null
+++ b/src/app/routes/report/images/table_bg.png
Binary files differ
diff --git a/src/app/routes/report/report.component.css b/src/app/routes/report/report.component.css
index 1bf9b73..4c1ce15 100644
--- a/src/app/routes/report/report.component.css
+++ b/src/app/routes/report/report.component.css
@@ -41,5 +41,21 @@
 	.t_bg_b{width: 100%;height: 485.35px; background:url(./images/bg2.png) no-repeat center top;background-size: 100%;}
 	.t_bg_b h1{padding-top: 25px; text-align: center; font-size: 16px; line-height: 34px; font-weight: 600;}
 
-
+	.table_bg{ margin: 0 85px;}
+	
+	.table_t{}
+	.table_t .t01,.table_t .t02,.table_t .t03,.table_t .t04{ float: right;text-align:center;font-size: 12px;color: #00f6ff; font-weight: bold;}
+	.table_t .t01{ width: 125px;}
+	.table_t .t02{ width: 115px;}
+	.table_t .t03{ width: 260px;}
+	.table_t .t04{ width: 280px;}
+	
+	.table_text{ margin: 5px 0;}
+	.table_text img{ }
+	.table_text .table_tab_bg{background: url(./images/table_bg.png) no-repeat right;}
+	.table_text .tab1,.table_text .tab2,.table_text .tab3,.table_text .tab4{ float: left; color: #fff; text-align: center; margin-top: 4px;}
+	.table_text .tab1{ width: 125px; font-size: 11px; padding: 0 10px;}
+	.table_text .tab2{ width: 115px; font-size: 10px; padding: 0 10px; line-height: 15px;}
+	.table_text .tab3{ width: 260px; font-size: 10px; padding: 0 25px; line-height: 15px;}
+	.table_text .tab4{ width: 280px; font-size: 10px; padding: 0 20px; line-height: 15px;}
 
diff --git a/src/app/routes/report/report.component.html b/src/app/routes/report/report.component.html
index d485e30..31a282c 100644
--- a/src/app/routes/report/report.component.html
+++ b/src/app/routes/report/report.component.html
@@ -50,9 +50,28 @@
 			<div id="pieChar" style="height: 485.35px; width: 1000px"></div>
 		</div>
 
-		<div class="bg"  *ngIf="!spinning">
-			<div class="t_bg_b">
+		<div id="conclusion" class="bg"  *ngIf="!spinning && isShow" >
+ 			<div class="t_bg_b">
 				<h1>{{title}}������������������������</h1>
+				<div class="table_bg">
+					<div class="table_t">
+						<p class="t04">���������������������</p>
+						<p class="t03">������������</p>
+						<p class="t02">������������������������</p>
+						<p class="t01">���������</p>			
+						<div class="clear_fix"></div>	
+					</div>
+					<div class="table_text"  *ngFor="let item of resultArr;let i = index">
+						<img src="./assets/img/No{{i+1}}.png"  style="float: left;">
+						<div class="table_tab_bg">
+							<p class="tab1">{{item.sensorName}}</p>
+							<p class="tab2">{{item.monitorPointName}}({{item.result}})</p>
+							<p class="tab3">{{item.effect}}</p>
+							<p class="tab4">{{item.measures}}</p>
+							<div class="clear_fix"></div>
+						</div>	
+					</div>
+				</div>
 			</div>
 		</div>
 
diff --git a/src/app/routes/report/report.component.ts b/src/app/routes/report/report.component.ts
index aeebed5..85f429f 100644
--- a/src/app/routes/report/report.component.ts
+++ b/src/app/routes/report/report.component.ts
@@ -39,7 +39,7 @@
     legend: {
       data: [],
       orient: 'vertical',
-      right: 40,
+      right: 30,
       top: 5,
       bottom: 20,
       type: 'scroll'
@@ -59,17 +59,18 @@
   };
 
   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'},
-    {key: 'e2', name: 'PM 10'},
-    {key: 'e10', name: '���������������CO���'},
-    {key: 'e11', name: '���������������SO������'},
-    {key: 'e15', name: '���������O������'},
-    {key: 'e16', name: '���������������NO������'}
+    {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 = {
@@ -89,7 +90,7 @@
     graphic: [],
     series: []
   };
-
+  public isShow = true;
   ngOnInit() {
     const params = JSON.parse(sessionStorage.getItem('queryParams'));
     if (!!params) {
@@ -114,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)';
@@ -156,14 +157,14 @@
             this.title += title[i] + timeArr[i];
           }
 
-          if ((params.type == 'month' || params.type == 'year') && res.data.sortList.length > 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 = [];
-              let data = [];
+              const data = [];
               this.sensorKeys.forEach(sensorKey => {
                 this.pieCharOption.legend.data.push(sensorKey.name);
                 if (alarmDatas[i]) {
@@ -173,8 +174,8 @@
                   });
                 }
               });
-              if (length == 2) {
-                if (i == 0) {
+              if (length === 2) {
+                if (i === 0) {
                   center = ['25%', '50%'];
                   left = '15%';
                 } else {
@@ -189,7 +190,7 @@
                 center: center,
                 label: {
                   normal: {
-                    formatter: "{b}:{d}%"
+                    formatter: '{b}:{d}%'
                   }
                 },
                 labelLine: {
@@ -209,16 +210,37 @@
               });
             }
 
-            if (sensors.length % 2 == 0) {
+            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;
+            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;
           }
         }
       });
diff --git a/src/app/routes/reports/alarm/alarm.component.ts b/src/app/routes/reports/alarm/alarm.component.ts
index 52bf05e..0a7a2b1 100644
--- a/src/app/routes/reports/alarm/alarm.component.ts
+++ b/src/app/routes/reports/alarm/alarm.component.ts
@@ -1,12 +1,13 @@
-import {DateService} from "../../../business/services/util/date.service";
-import {HttpClient} from "@angular/common/http";
+import {DateService} from '../../../business/services/util/date.service';
+import {HttpClient} from '@angular/common/http';
 import {Component, OnInit} from '@angular/core';
 import {_HttpClient} from '@delon/theme';
-import {Subject} from "rxjs";
+// tslint:disable-next-line:import-blacklist
+import {Subject} from 'rxjs';
 import {CascaderOption} from 'ng-zorro-antd/src/cascader/nz-cascader.component';
 import {AreacodeService} from '@business/services/http/areacode.service';
 import {NzTreeComponent} from 'ng-tree-antd';
-import {NzMessageService} from "ng-zorro-antd";
+import {NzMessageService} from 'ng-zorro-antd';
 import {environment} from '../../../../environments/environment';
 import * as echarts from 'echarts';
 import * as $ from 'jquery';
@@ -44,7 +45,7 @@
     {value: 'sensor', label: '������'},
     {value: 'monitorPoint', label: '���������'}
   ];
-  isDisable: boolean = false;
+  isDisable = false;
   private treeClickStream: Subject<any> = new Subject<any>();
   private _sensors: {[key: string]: string} = {};
   private _sensorNames: string;
@@ -59,7 +60,7 @@
     },
     tooltip: {
       trigger: 'item',
-      formatter: "{a} <br/>{b}: {c} ({d}%)"
+      formatter: '{a} <br/>{b}: {c} ({d}%)'
     },
     //    legend: {
     //      //x : 'center',
@@ -74,7 +75,7 @@
     radius: ['20%', '40%'],
     label: {
       normal: {
-        formatter: "{b}:{d}%"
+        formatter: '{b}:{d}%'
       }
     },
     labelLine: {
@@ -83,7 +84,7 @@
       }
     },
     data: []
-  }
+  };
 
   ngOnInit() {
     this.http.get(environment.SERVER_BASH_URL + 'sensor/all').subscribe((res: any) => {
@@ -96,9 +97,9 @@
   }
 
   dimensionChange(value) {
-    if (value == 'sensor') {
-      this.isDisable = false;
-    } else {
+    if (value === 'sensor') {
+      this.isDisable = false;
+    } else {
       this.isDisable = true;
       this.query.monitorPointId = null;
       this.query.mac = null;
@@ -226,7 +227,7 @@
       $('#mydiv').empty();
       for (let index = 0; index < 30; index++) {
         this.sensorArr.push(index);
-        $('#mydiv').append("<div id='mydiv" + index + "' style='height: 485.35px; width: 1000px'></div>");
+        $('#mydiv').append('<div id=\'mydiv' + index + '\' style=\'height: 485.35px; width: 1000px\'></div>');
       }
       this.loading = true;
       this.isShow = false;
@@ -245,17 +246,17 @@
       this.http.get(environment.SERVER_BASH_URL + 'report/pie', {params: query}).subscribe((res: any) => {
         const option = this.pieCharOption;
         let index = 0;
-        if (query.dimension == 'monitorPoint') {
+        if (query.dimension === 'monitorPoint') {
           for (const key in res.data) {
             let name: string;
             this.sensorOptions[0].children.forEach(sensor => {
-              if (key == sensor.sensorKey) {
+              if (key === sensor.sensorKey) {
                 name = sensor.name;
               }
             });
             option.title.text = name + '������������������������';
 
-            if (index % 2 == 0) {
+            if (index % 2 === 0) {
               option.backgroundColor = 'rgba(0,0,0,0)';
             } else {
               option.backgroundColor = 'rgba(23,133,23,0.06)';
@@ -270,8 +271,8 @@
             myChart.setOption(option, true);
             window.onresize = myChart.resize;
             index = index + 1;
-          }
-        } else {
+          }
+        } else {
           option.title.text = '������������������������';
           option.series = [];
           this.serie.data = res.data.list;
@@ -281,7 +282,7 @@
           window.onresize = myChart.resize;
           index = index + 1;
 
-          //this.setOption(option,index);
+          // this.setOption(option,index);
         }
 
         this.sensorArr.forEach(i => {
@@ -298,7 +299,7 @@
     }
   }
 
-  setOption(option,index) {
+  setOption(option, index) {
     const myChart = echarts.init(document.getElementById('mydiv' + index));
     myChart.setOption(this.pieCharOption, true);
     window.onresize = myChart.resize;
diff --git a/src/assets/img/No1.png b/src/assets/img/No1.png
new file mode 100644
index 0000000..3247245
--- /dev/null
+++ b/src/assets/img/No1.png
Binary files differ
diff --git a/src/assets/img/No2.png b/src/assets/img/No2.png
new file mode 100644
index 0000000..e137d5e
--- /dev/null
+++ b/src/assets/img/No2.png
Binary files differ
diff --git a/src/assets/img/No3.png b/src/assets/img/No3.png
new file mode 100644
index 0000000..04677e7
--- /dev/null
+++ b/src/assets/img/No3.png
Binary files differ
diff --git a/src/assets/img/No4.png b/src/assets/img/No4.png
new file mode 100644
index 0000000..efd5b94
--- /dev/null
+++ b/src/assets/img/No4.png
Binary files differ
diff --git a/src/assets/img/No5.png b/src/assets/img/No5.png
new file mode 100644
index 0000000..4025d3e
--- /dev/null
+++ b/src/assets/img/No5.png
Binary files differ

--
Gitblit v1.8.0