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