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';
|
// 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 {environment} from '../../../../environments/environment';
|
import * as echarts from 'echarts';
|
import * as $ from 'jquery';
|
|
@Component({
|
selector: 'app-alarm',
|
templateUrl: './alarm.component.html',
|
})
|
|
export class AlarmComponent implements OnInit {
|
|
constructor(
|
public http: HttpClient,
|
public dateSrv: DateService,
|
public msgSrv: NzMessageService,
|
private areacodeService: AreacodeService,
|
) {
|
this.timeType = this.typeOptions[1];
|
this.query.dimension = this.dimensionOptions[0].value;
|
}
|
|
[x: string]: any;
|
public loading = false;
|
public isShow = false;
|
public sensorArr: any = [];
|
public query: any = {};
|
public sensorOptions = [];
|
public monitorPointOptions = [];
|
public deviceOptions = [];
|
public typeOptions = [
|
{value: 'year', label: '年', format: 'YYYY'},
|
{value: 'month', label: '月', format: 'YYYY-MM'}
|
];
|
public dimensionOptions = [
|
{value: 'sensor', label: '项目'},
|
{value: 'monitorPoint', label: '监测站点'}
|
];
|
isDisable = false;
|
private treeClickStream: Subject<any> = new Subject<any>();
|
private _sensors: {[key: string]: string} = {};
|
private _sensorNames: string;
|
get sensorNames(): string {
|
return this._sensorNames;
|
}
|
|
private pieCharOption: any = {
|
title: {
|
text: '指标报警占比情况',
|
x: 'center'
|
},
|
tooltip: {
|
trigger: 'item',
|
formatter: '{a} <br/>{b}: {c} ({d}%)'
|
},
|
// legend: {
|
// //x : 'center',
|
// top: '10%',
|
// data: []
|
// },
|
series: []
|
};
|
private serie: any = {
|
name: '',
|
type: 'pie',
|
radius: ['20%', '40%'],
|
label: {
|
normal: {
|
formatter: '{b}:{d}%'
|
}
|
},
|
labelLine: {
|
normal: {
|
show: true
|
}
|
},
|
data: []
|
};
|
|
ngOnInit() {
|
this.http.get(environment.SERVER_BASH_URL + 'sensor/all').subscribe((res: any) => {
|
if (res.code === 0) {
|
this.msgSrv.error(res.message);
|
} else {
|
this.sensorOptions.push({id: -1, name: '全部', isExpanded: true, children: res.data});
|
}
|
});
|
}
|
|
dimensionChange(value) {
|
if (value === 'sensor') {
|
this.isDisable = false;
|
} else {
|
this.isDisable = true;
|
this.query.monitorPointId = null;
|
this.query.mac = null;
|
}
|
}
|
|
public onTreeClickSelect(event): void {
|
this.treeClickStream.next(event);
|
}
|
|
public onSensorSelect(event): void {
|
const data = event.node.data;
|
if (data.id === -1 && data.halfChecked === false) {
|
if (!!data.checked) {
|
this.sensorOptions[0].children.forEach(
|
sensor => {
|
this._sensors[sensor.id] = sensor.sensorKey + '-' + sensor.name + '-' + sensor.unit;
|
}
|
);
|
} else {
|
this._sensors = {};
|
}
|
} else {
|
if (!!data.checked) {
|
this._sensors[data.id] = data.sensorKey + '-' + data.name + '-' + data.unit;
|
} else {
|
delete this._sensors[data.id];
|
}
|
}
|
this.reloadSensorNames();
|
|
}
|
private reloadSensorNames(): void {
|
// 异步提升展现速度
|
setTimeout(() => {
|
this._sensorNames = '';
|
const sensorNameList = Object.keys(this._sensors).map(
|
id => {
|
const sensor = this.sensorOptions[0].children.find(item => {
|
return Number(id) === Number(item.id);
|
});
|
return sensor.name;
|
}
|
);
|
this._sensorNames = sensorNameList.join(', ');
|
}, 1);
|
}
|
|
public areaLazyLoad(event: {option: CascaderOption, index: number, resolve: (children: CascaderOption[]) => void, reject: () => void}) {
|
const index = event['index'];
|
const option = event.option;
|
switch (index) {
|
case -1:
|
this.areacodeService.getProvinces().subscribe(
|
(res: {label: string, value: string}[]) => {
|
event.resolve(res);
|
}
|
);
|
break;
|
case 0:
|
this.areacodeService.getCities(option.value).subscribe(
|
(res: {label: string, value: string}[]) => {
|
event.resolve(res);
|
}
|
);
|
break;
|
case 1:
|
this.areacodeService.getAreas(option.value).subscribe(
|
(res: {label: string, value: string}[]) => {
|
event.resolve(res);
|
}
|
);
|
break;
|
}
|
}
|
|
public regionChange(event: {option: CascaderOption, index: number}) {
|
let name = '';
|
const option = event.option;
|
this.query.areaCode = null;
|
this.query.monitorPointId = null;
|
this.query.mac = null;
|
switch (event.index) {
|
case 0:
|
name = 'provinceCode';
|
this.query.provinceCode = option.value;
|
this.query.cityCode = null;
|
break;
|
case 1:
|
name = 'cityCode';
|
this.query.cityCode = option.value;
|
break;
|
case 2:
|
name = 'areaCode';
|
this.query.areaCode = option.value;
|
break;
|
}
|
this.http.get(environment.SERVER_BASH_URL + 'monitor-point/list/region', {params: {name: name, value: option.value}}).subscribe((res: any) => {
|
if (res.code === 0) {
|
this.msgSrv.error(res.message);
|
} else {
|
this.monitorPointOptions = res.data;
|
}
|
});
|
}
|
|
monitorPointChange(value) {
|
this.query.mac = null;
|
this.deviceOptions = [];
|
if (value) {
|
this.http.get(environment.SERVER_BASH_URL + 'device/monitorPointId', {params: {monitorPointId: value}}).subscribe((res: any) => {
|
if (res.code === 0) {
|
this.msgSrv.error(res.message);
|
} else {
|
this.deviceOptions = res.data;
|
}
|
});
|
}
|
}
|
|
reportQuery() {
|
const query = this.query;
|
if (this.monitorPointOptions.length > 0) {
|
this.sensorArr = [];
|
$('#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>');
|
}
|
this.loading = true;
|
this.isShow = false;
|
query.time = this.dateSrv.date_format(this.time, this.timeType.format);
|
delete query.sensors;
|
if (this._sensors) {
|
const sensors = [];
|
for (const key in this._sensors) {
|
sensors.push(this._sensors[key]);
|
}
|
if (sensors.length > 0) {
|
query.sensors = JSON.stringify(sensors);
|
}
|
}
|
query.type = this.timeType.value;
|
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') {
|
for (const key in res.data) {
|
let name: string;
|
this.sensorOptions[0].children.forEach(sensor => {
|
if (key === sensor.sensorKey) {
|
name = sensor.name;
|
}
|
});
|
option.title.text = name + '指标报警占比情况';
|
|
if (index % 2 === 0) {
|
option.backgroundColor = 'rgba(0,0,0,0)';
|
} else {
|
option.backgroundColor = 'rgba(23,133,23,0.06)';
|
}
|
|
option.series = [];
|
this.serie.name = name;
|
this.serie.data = res.data[key];
|
option.series.push(this.serie);
|
|
const myChart = echarts.init(document.getElementById('mydiv' + index));
|
myChart.setOption(option, true);
|
window.onresize = myChart.resize;
|
index = index + 1;
|
}
|
} else {
|
option.series = [];
|
if (!!res.data.list && res.data.list.length > 0) {
|
option.title.text = '指标报警占比情况';
|
this.serie.data = res.data.list;
|
option.series.push(this.serie);
|
const myChart = echarts.init(document.getElementById('mydiv' + index));
|
myChart.setOption(option, true);
|
window.onresize = myChart.resize;
|
index = index + 1;
|
}
|
|
// this.setOption(option,index);
|
}
|
|
this.sensorArr.forEach(i => {
|
if (i >= index) {
|
$('#mydiv' + i).remove();
|
}
|
});
|
this.loading = false;
|
this.isShow = true;
|
|
});
|
} else {
|
this.msgSrv.error('没有监控站点数据！');
|
}
|
}
|
|
setOption(option, index) {
|
const myChart = echarts.init(document.getElementById('mydiv' + index));
|
myChart.setOption(this.pieCharOption, true);
|
window.onresize = myChart.resize;
|
index = index + 1;
|
}
|
}
|
