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