New file |
| | |
| | | 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";
|
| | | 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: boolean = 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.title.text = '指标报警占比情况';
|
| | | option.series = [];
|
| | | 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;
|
| | | }
|
| | | }
|