| | |
|---|
| | | import {environment} from '../../../../environments/environment';
|
|---|
| | | import {DateService} from '../../../business/services/util/date.service';
|
|---|
| | | import {NzMessageService} from 'ng-zorro-antd';
|
|---|
| | | import { Component, OnInit } from '@angular/core';
|
|---|
| | | import { _HttpClient } from '@delon/theme';
|
|---|
| | | import {HttpClient} from '@angular/common/http';
|
|---|
| | | import {zip} from 'rxjs/observable/zip';
|
|---|
| | | import * as echarts from 'echarts';
|
|---|
| | |
|
|---|
| | | @Component({
|
|---|
| | | selector: 'app-statistical-query',
|
|---|
| | | templateUrl: './statistical-query.component.html',
|
|---|
| | | })
|
|---|
| | | export class StatisticalQueryComponent implements OnInit {
|
|---|
| | | [x: string]: any;
|
|---|
| | | public query: any = {};
|
|---|
| | | public sensorOptions = [];
|
|---|
| | | public typeOptions = [
|
|---|
| | | {value: 'year', label: '年', format: 'YYYY'},
|
|---|
| | | {value: 'month', label: '月', format: 'YYYY-MM'},
|
|---|
| | | {value: 'day', label: '日', format: 'YYYY-MM-DD'},
|
|---|
| | | {value: 'hour', label: '时', format: 'YYYY-MM-DD HH'}
|
|---|
| | | ];
|
|---|
| | |
|
|---|
| | | constructor(
|
|---|
| | | private http: _HttpClient
|
|---|
| | | ) { }
|
|---|
| | |
|
|---|
| | | ngOnInit() {
|
|---|
| | | public http: HttpClient,
|
|---|
| | | public dateSrv: DateService,
|
|---|
| | | public msgSrv: NzMessageService
|
|---|
| | | ) {
|
|---|
| | | this.timeType = this.typeOptions[1];
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | private echartOption = {
|
|---|
| | | title: {
|
|---|
| | | text: '',
|
|---|
| | | left: 'center'
|
|---|
| | | },
|
|---|
| | | tooltip: {
|
|---|
| | | trigger: 'item',
|
|---|
| | | axisPointer: {
|
|---|
| | | type: 'cross'
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | xAxis: {
|
|---|
| | | type: 'category',
|
|---|
| | | data: [],
|
|---|
| | | name: ''
|
|---|
| | | },
|
|---|
| | | yAxis: {
|
|---|
| | | type: 'value',
|
|---|
| | | name: ''
|
|---|
| | |
|
|---|
| | | },
|
|---|
| | | series: [
|
|---|
| | | {
|
|---|
| | | data: [],
|
|---|
| | | type: 'line',
|
|---|
| | | smooth: true,
|
|---|
| | | name: ''
|
|---|
| | | }
|
|---|
| | | ]
|
|---|
| | | };
|
|---|
| | |
|
|---|
| | | ngOnInit() {
|
|---|
| | |
|
|---|
| | | zip(
|
|---|
| | | this.http.get(environment.SERVER_BASH_URL + 'sensor/all'),
|
|---|
| | | this.http.get(environment.SERVER_BASH_URL + 'monitor-point/list/region', {params: {name: 'areaCode', value: '320583'}})
|
|---|
| | | ).subscribe(
|
|---|
| | | ([sensors, monitorPoints]) => {
|
|---|
| | | this.sensorOptions = sensors['data'];
|
|---|
| | | this.monitorPointOptions = monitorPoints['data'];
|
|---|
| | | });
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | _disabledDate(current: Date): boolean {
|
|---|
| | | return current && current.getTime() > Date.now();
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | reportQuery() {
|
|---|
| | | const query = this.query;
|
|---|
| | | query.type = this.timeType.value;
|
|---|
| | | const formatTime = this.dateSrv.date_format(this.time, this.timeType.format);
|
|---|
| | | const queryItems = [{formatTime: formatTime, monitorPointId: this.monitorPoint.id}];
|
|---|
| | | query.items = JSON.stringify(queryItems);
|
|---|
| | | query.sensors = JSON.stringify([this.sensor.sensorKey]);
|
|---|
| | | const myChart = echarts.init(document.getElementById('mydiv'));
|
|---|
| | | myChart.showLoading();
|
|---|
| | | this.http.get(environment.SERVER_BASH_URL + 'report/compare', {params: query}).subscribe((res: any) => {
|
|---|
| | | const option = this.echartOption;
|
|---|
| | | option.title.text = this.monitorPoint.name + ' ' + formatTime + ' ' + this.sensor.name + ' ' + this.timeType.label + '报表';
|
|---|
| | | option.yAxis.name = '单位：' + this.sensor.unit;
|
|---|
| | | option.xAxis.data = res.data.times;
|
|---|
| | | option.series[0].data = res.data.datas[0][this.sensor.sensorKey];
|
|---|
| | | myChart.setOption(option, true);
|
|---|
| | | window.onresize = myChart.resize;
|
|---|
| | | myChart.hideLoading();
|
|---|
| | | });
|
|---|
| | | }
|
|---|
| | | }
|
|---|
