| | |
| | | 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'; |
| | | |
| | |
| | | |
| | | }) |
| | | export class ReportComponent implements OnInit { |
| | | constructor( |
| | | public injector: Injector, |
| | | public http: HttpClient, |
| | | public activeRoute: ActivatedRoute, |
| | | public msgSrv: NzMessageService |
| | | ) { |
| | | for (let index = 0; index < 30; index++) { |
| | | this.sensorArr.push(index); |
| | | } |
| | | } |
| | | |
| | | [x: string]: any; |
| | | |
| | | public spinning: boolean = true; |
| | | public spinning = true; |
| | | |
| | | public echartOption = { |
| | | private echartOption = { |
| | | backgroundColor: '', |
| | | title: { |
| | | text: '', |
| | |
| | | series: [] |
| | | }; |
| | | |
| | | sensorArr: any = []; |
| | | items: any = []; |
| | | timeType: any = {}; |
| | | title: string; |
| | | timeArr = ['年', '月', '日', '时', '分']; |
| | | ngOnInit() { |
| | | public sensorArr: any = []; |
| | | public items: any = []; |
| | | public title: string; |
| | | private timeArr = ['年', '月', '日', '时', '分']; |
| | | public typeArr = ['year', 'month', 'day', 'hour']; |
| | | constructor( |
| | | public injector: Injector, |
| | | public http: HttpClient, |
| | | public msgSrv: NzMessageService |
| | | ) { |
| | | for (let index = 0; index < 30; index++) { |
| | | this.sensorArr.push(index); |
| | | } |
| | | } |
| | | |
| | | this.activeRoute.queryParams.subscribe(params => { |
| | | private pieCharOption: any = { |
| | | title: { |
| | | text: 'AQI指标报警占比情况', |
| | | x: 'center' |
| | | }, |
| | | tooltip: { |
| | | trigger: 'item', |
| | | formatter: '{a} <br/>{b}: {c} ({d}%)' |
| | | }, |
| | | legend: { |
| | | // x : 'center', |
| | | top: '10%', |
| | | data: ['PM 2.5', 'PM 10', '一氧化碳(CO)', '二氧化硫(SO₂)', '臭氧(O₃)', '二氧化氮(NO₂)'] |
| | | }, |
| | | graphic: [{ |
| | | type: 'text', |
| | | left: '24%', |
| | | top: '49%', |
| | | style: { |
| | | text: '大华涂料' |
| | | } |
| | | }, { |
| | | type: 'text', |
| | | left: '74%', |
| | | top: '49%', |
| | | style: { |
| | | text: '{b}' |
| | | } |
| | | } |
| | | ], |
| | | series: [ |
| | | { |
| | | name: '访问来源', |
| | | type: 'pie', |
| | | radius: ['30%', '50%'], |
| | | center: ['25%', '50%'], |
| | | label: { |
| | | normal: { |
| | | formatter: '{b}:{d}%' |
| | | } |
| | | }, |
| | | labelLine: { |
| | | normal: { |
| | | show: true |
| | | } |
| | | }, |
| | | data: [ |
| | | {value: 100, name: 'PM 2.5'}, |
| | | {value: 100, name: 'PM 10'}, |
| | | {value: 200, name: '一氧化碳(CO)'}, |
| | | {value: 200, name: '二氧化硫(SO₂)'}, |
| | | {value: 100, name: '臭氧(O₃)'}, |
| | | {value: 100, name: '二氧化氮(NO₂)'} |
| | | ] |
| | | }, |
| | | { |
| | | name: '访问来源', |
| | | type: 'pie', |
| | | radius: ['30%', '50%'], |
| | | center: ['75%', '50%'], |
| | | label: { |
| | | normal: { |
| | | formatter: '{b}:{d}%', |
| | | } |
| | | }, |
| | | labelLine: { |
| | | normal: { |
| | | show: true, |
| | | } |
| | | }, |
| | | data: [ |
| | | {value: 0, name: 'PM 2.5'}, |
| | | {value: 0, name: 'PM 10'}, |
| | | {value: 100, name: '一氧化碳(CO)'}, |
| | | {value: 100, name: '二氧化硫(SO₂)'}, |
| | | {value: 100, name: '臭氧(O₃)'}, |
| | | {value: 100, name: '二氧化氮(NO₂)'} |
| | | |
| | | ] |
| | | } |
| | | ] |
| | | }; |
| | | |
| | | ngOnInit() { |
| | | const params = JSON.parse(sessionStorage.getItem('queryParams')); |
| | | if (!!params) { |
| | | localStorage.removeItem('queryParams'); |
| | | const items = this.items = JSON.parse(params.items); |
| | | const timeType = this.timeType = JSON.parse(params.timeTypes); |
| | | 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(timeType.label) + 1]; |
| | | 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] + timeType.label + '历走势图'; |
| | | option.title.text = split[1] + label + '历走势图'; |
| | | option.yAxis.name = split[2] && split[2] !== 'null' ? '单位:' + split[2] : ''; |
| | | option.series = []; |
| | | option.legend.data = []; |
| | |
| | | } |
| | | for (let i = 0; i < items.length; i++) { |
| | | this.title = items[i].formatTime; |
| | | const legendName = items[i].formatTime + timeType.label + (items[i].mac ? items[i].deviceName : items[i].monitorPointName); |
| | | items[i].deviceCount = deviceCounts[i]; |
| | | if (!items[i].monitorPointid) { |
| | | items[i].monitorPointName = items[i].areaName; |
| | | } |
| | | const legendName = items[i].formatTime + label + (items[i].mac ? '设备:' + items[i].deviceName : (items[i].monitorPointid ? '监测点:' + items[i].monitorPointName : items[i].areaName)); |
| | | option.legend.data[i] = legendName; |
| | | option.series.push({ |
| | | name: legendName, |
| | | data: res.data.datas[i]['data' + i][0][sensorKey], |
| | | data: res.data.datas[i][sensorKey], |
| | | type: params.reportType, |
| | | smooth: true, |
| | | itemStyle: { |
| | |
| | | $('#mydiv' + i).remove(); |
| | | } |
| | | }); |
| | | $('#content').attr({style: "display: inline;"}); |
| | | 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 (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; |
| | | } |
| | | }); |
| | | }); |
| | | } else { |
| | | this.msgSrv.error('页面错误,将关闭该页面!'); |
| | | setTimeout('window.close();', 1000); |
| | | } |
| | | } |
| | | } |