import {environment} from '../../../environments/environment';
|
import {NzMessageService, NzModalService} from 'ng-zorro-antd';
|
import {Component, OnInit, Injector} from '@angular/core';
|
import {HttpClient} from '@angular/common/http';
|
import * as echarts from 'echarts';
|
import * as $ from 'jquery';
|
|
@Component({
|
selector: 'app-report',
|
templateUrl: './report.component.html',
|
styleUrls: ['./report.component.css']
|
|
})
|
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;
|
|
private echartOption = {
|
backgroundColor: '',
|
title: {
|
text: '',
|
// subtext: '12月份',
|
left: 'center'
|
},
|
tooltip: {
|
trigger: 'axis'
|
},
|
legend: {
|
data: [],
|
orient: 'vertical',
|
right: 30,
|
top: 5,
|
bottom: 20,
|
type: 'scroll'
|
},
|
xAxis: {
|
type: 'category',
|
// boundaryGap: false,
|
data: [],
|
name: ''
|
},
|
yAxis: {
|
type: 'value',
|
name: ''
|
|
},
|
series: []
|
};
|
|
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() {
|
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 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;
|
} */
|
const showName = this.items[i].showName =
|
items[i].mac ? ('设备:' + items[i].deviceName) :
|
((items[i].monitorPointId ? '监测点:' + items[i].monitorPointName : items[i].areaName) + (items[i].professionName ? items[i].professionName : ''));
|
const legendName = items[i].formatTime + label + showName;
|
items[i].legendName = option.legend.data[i] = legendName;
|
if (res.data.datas[i][sensorKey]) {
|
option.series.push({
|
name: legendName,
|
data: res.data.datas[i][sensorKey],
|
type: params.reportType,
|
smooth: true,
|
itemStyle: {
|
normal: {
|
barBorderRadius: [10, 10, 10, 10]
|
}
|
}
|
});
|
}
|
}
|
const myChart = echarts.init(document.getElementById('mydiv' + index));
|
myChart.setOption(option, true);
|
window.onresize = myChart.resize;
|
if (option.series.length < 1) {
|
$('#mydiv' + index).remove();
|
}
|
}
|
this.sensorArr.forEach(i => {
|
if (i >= sensors.length) {
|
$('#mydiv' + i).remove();
|
}
|
});
|
this.spinning = false;
|
if (!this.title) {
|
this.title = items[0].formatTime;
|
}
|
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] && res.data.sortList[i][key] != 0) {
|
this.resultArr.push({
|
sensorName: sensor.name,
|
monitorPointName: this.items[split[1]].showName,
|
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);
|
}
|
}
|
}
|
