报警数据 饼图功能

xufenglei

2018-04-20 63ad97852c7db6df7f44185881a8c9c031a230c9

报警数据 饼图功能

 src/app/routes/reports/alarm/alarm.component.html

New file
@@ -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>&nbsp;&nbsp;&nbsp;维&nbsp;&nbsp;&nbsp;度</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>&nbsp;&nbsp;&nbsp;项&nbsp;&nbsp;&nbsp;目</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>&nbsp;类&nbsp;&nbsp;&nbsp;型</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>

 src/app/routes/reports/alarm/alarm.component.ts

New file
@@ -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;

  }

}


 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,

 src/assets/app-data.json

@@ -64,6 +64,10 @@
                  "link": "/reports/demo"
                  },
                  {
                  "text": "报警数据",
                  "link": "/reports/alarm"
                  },
                  {
                  "text": "数据导出",
                  "link": "/reports/excel"
                  }