From 63ad97852c7db6df7f44185881a8c9c031a230c9 Mon Sep 17 00:00:00 2001
From: xufenglei <xufenglei>
Date: Fri, 20 Apr 2018 09:06:51 +0800
Subject: [PATCH] 报警数据 饼图功能
---
src/app/routes/reports/alarm/alarm.component.ts | 307 ++++++++++++++++++++++++++++++++++++++
src/app/routes/reports/alarm/alarm.component.html | 124 +++++++++++++++
src/app/routes/reports/reports.module.ts | 4
src/assets/app-data.json | 4
4 files changed, 438 insertions(+), 1 deletions(-)
diff --git a/src/app/routes/reports/alarm/alarm.component.html b/src/app/routes/reports/alarm/alarm.component.html
new file mode 100644
index 0000000..63d6e19
--- /dev/null
+++ b/src/app/routes/reports/alarm/alarm.component.html
@@ -0,0 +1,124 @@
+<pro-header [title]="'������������'"></pro-header>
+<nz-card [nzBordered]="false">
+ <form nz-form (ngSubmit)="reportQuery()" [nzLayout]="'inline'">
+ <div nz-row [nzGutter]="24">
+
+ <div nz-col [nzSpan]="6" class="mb-md">
+ <div nz-form-item class="d-flex">
+ <div nz-form-label>
+ <label> ��� ���</label>
+ </div>
+ <div nz-form-control class="flex-1">
+ <nz-select [(ngModel)]="query.dimension" name="dimension" [nzSize]="'large'" [nzPlaceHolder]="'���������'" (ngModelChange)="dimensionChange($event)">
+ <nz-option *ngFor="let option of dimensionOptions" [nzLabel]="option.label" [nzValue]="option.value" ></nz-option>
+ </nz-select>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div nz-row [nzGutter]="24">
+ <div nz-col [nzSpan]="6" class="mb-md">
+ <div nz-form-item class="d-flex">
+ <div nz-form-label>
+ <label> ��� ���</label>
+ </div>
+ <div nz-form-control class="flex-1" style="width: 300px">
+ <nz-popover [nzPlacement]="'bottomLeft'" [nzTrigger]="'click'">
+ <nz-input [nzType]="'input'" nz-popover [ngModel]="sensorNames" name="sensorKeys" [nzReadonly]="true" [nzPlaceHolder]="'��������� ������'">
+ <ng-template #suffix>
+ <i class="anticon anticon-down ant-cascader-picker-arrow" style="right: 1px;"></i>
+ </ng-template>
+ </nz-input>
+ <ng-template #nzTemplate>
+ <div [ngStyle]="{'width': '240px', 'height': '240px', 'overflow-y' :'auto'}">
+ <nz-tree [nzNodes]="sensorOptions" (nzActivate)="onTreeClickSelect($event)" (nzDeactivate)="onTreeClickSelect($event)" [nzCheckable]="true" (nzCheck)="onSensorSelect($event)"></nz-tree>
+ </div>
+ </ng-template>
+ </nz-popover>
+ </div>
+ </div>
+ </div>
+
+ <div nz-col [nzSpan]="6" class="mb-md">
+ <div nz-form-item class="d-flex">
+ <div nz-form-label>
+ <label> ��� ���</label>
+ </div>
+ <div nz-form-control class="flex-1">
+ <nz-select [(ngModel)]="timeType" name="timeType" [nzSize]="'large'" [nzPlaceHolder]="'���������'">
+ <nz-option *ngFor="let option of typeOptions" [nzLabel]="option.label" [nzValue]="option" ></nz-option>
+ </nz-select>
+ </div>
+ </div>
+ </div>
+
+ <div nz-col [nzSpan]="6" class="mb-md">
+ <div nz-form-item class="d-flex">
+ <div nz-form-label>
+ <label >������</label>
+ </div>
+ <div nz-form-control class="flex-1">
+ <nz-datepicker style="width: 100%;" [(ngModel)]="time" name="time" [nzPlaceHolder]="'��������� ������'" [nzSize]="'large'" [nzFormat]="timeType.format"
+ [nzMode]="'month'" ></nz-datepicker>
+ </div>
+ </div>
+ </div>
+
+ </div>
+
+ <div nz-row [nzGutter]="24">
+
+ <div nz-col [nzSpan]="6" class="mb-md">
+ <div nz-form-item class="d-flex">
+ <div nz-form-label>
+ <label nz-form-item-required>���������</label>
+ </div>
+ <div nz-form-control class="flex-1">
+ <nz-cascader (nzLoad)="areaLazyLoad($event)" [nzPlaceHolder]="'��������� ���/���/���'" [nzAllowClear]="false" [nzChangeOnSelect]="true" (nzSelect)="regionChange($event)">
+ </nz-cascader>
+ </div>
+ </div>
+ </div>
+
+ <div nz-col [nzSpan]="6" class="mb-md">
+ <div nz-form-item class="d-flex">
+ <div nz-form-label>
+ <label>���������</label>
+ </div>
+ <div nz-form-control class="flex-1">
+ <nz-select [(ngModel)]="query.monitorPointId" name="monitorPoint" [nzPlaceHolder]="'��������� ���������'" [nzSize]="'large'"
+ [nzNotFoundContent]="'������������'" (ngModelChange)="monitorPointChange($event)" nzShowSearch nzAllowClear [nzDisabled]="isDisable">
+ <nz-option *ngFor="let option of monitorPointOptions" [nzLabel]="option['name']" [nzValue]="option['id']"> </nz-option>
+ </nz-select>
+ </div>
+ </div>
+ </div>
+
+ <div nz-col [nzSpan]="6" class="mb-md">
+ <div nz-form-item class="d-flex">
+ <div nz-form-label>
+ <label>������</label>
+ </div>
+ <div nz-form-control class="flex-1">
+ <nz-select [(ngModel)]="query.mac" name="mac" [nzSize]="'large'" [nzPlaceHolder]="'��������� ������'" [nzNotFoundContent]="'������������'" nzShowSearch nzAllowClear [nzDisabled]="isDisable">
+ <nz-option *ngFor="let option of deviceOptions" [nzLabel]="option.name" [nzValue]="option.mac" ></nz-option>
+ </nz-select>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div nz-row [nzGutter]="24">
+ <div nz-col [nzSpan]="6" class="mb-md">
+ <button nz-button type="submit" [nzType]="'primary'" [nzSize]="'large'" [nzLoading]="loading">������</button>
+ </div>
+ </div>
+ </form>
+</nz-card>
+
+<nz-card [nzBordered]="false" [ngStyle]="{'display':isShow ? 'block' : 'none' }">
+ <div id="mydiv">
+ <!-- <div id="mydiv{{i}}" style="height: 485.35px; width: 1000px"></div> -->
+ </div>
+</nz-card>
\ No newline at end of file
diff --git a/src/app/routes/reports/alarm/alarm.component.ts b/src/app/routes/reports/alarm/alarm.component.ts
new file mode 100644
index 0000000..52bf05e
--- /dev/null
+++ b/src/app/routes/reports/alarm/alarm.component.ts
@@ -0,0 +1,307 @@
+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;
+ }
+}
diff --git a/src/app/routes/reports/reports.module.ts b/src/app/routes/reports/reports.module.ts
index e050e3b..988eb1a 100644
--- a/src/app/routes/reports/reports.module.ts
+++ b/src/app/routes/reports/reports.module.ts
@@ -16,6 +16,7 @@
import { MonitorPointService } from '@business/services/http/monitor-point.service';
import { DeviceService } from '@business/services/http/device.service';
import { DateService } from '@business/services/util/date.service';
+import { AlarmComponent } from './alarm/alarm.component';
const routes: Routes = [
{
@@ -24,7 +25,7 @@
{ path: 'query', component: QueryComponent },
{ path: 'demo', component: DemoComponent },
{ path: 'excel', component: ExcelComponent },
-
+ { path: 'alarm', component: AlarmComponent },
]
}
];
@@ -45,6 +46,7 @@
...COMPONENTS_NOROUNT,
DemoComponent,
ExcelComponent,
+ AlarmComponent,
QueryComponent
],
providers: [SensorsService, NzMessageService, AreacodeService,
diff --git a/src/assets/app-data.json b/src/assets/app-data.json
index 1e7d1a2..47fe7ec 100644
--- a/src/assets/app-data.json
+++ b/src/assets/app-data.json
@@ -64,6 +64,10 @@
"link": "/reports/demo"
},
{
+ "text": "������������",
+ "link": "/reports/alarm"
+ },
+ {
"text": "������������",
"link": "/reports/excel"
}
--
Gitblit v1.8.0