From b8941db692db2e54f6f4a6dc36c500ce53e2da5a Mon Sep 17 00:00:00 2001
From: xufenglei <xufenglei>
Date: Fri, 03 Aug 2018 11:01:23 +0800
Subject: [PATCH] 扬尘监控-统计查询
---
src/app/routes/raise-dust/statistical-query/statistical-query.component.ts | 96 +++++++++++++++++++++++++++++--
src/app/routes/raise-dust/statistical-query/statistical-query.component.html | 70 ++++++++++++++++++++++
src/assets/img/5.jpg | 0
src/assets/img/6.jpg | 0
4 files changed, 157 insertions(+), 9 deletions(-)
diff --git a/src/app/routes/raise-dust/statistical-query/statistical-query.component.html b/src/app/routes/raise-dust/statistical-query/statistical-query.component.html
index e9d3bb7..2c272dd 100644
--- a/src/app/routes/raise-dust/statistical-query/statistical-query.component.html
+++ b/src/app/routes/raise-dust/statistical-query/statistical-query.component.html
@@ -1,4 +1,70 @@
<div class="content__title">
- <h1>Page Name</h1>
+ <h1>������������</h1>
</div>
-<pro-header [title]="'Page Name'"></pro-header>
+
+<nz-card [nzBordered]="false">
+ <form nz-form (ngSubmit)="reportQuery()" [nzLayout]="'inline'">
+ <div nz-row [nzGutter]="24" >
+ <div nz-col [nzSpan]="5" class="mb-md">
+ <div nz-form-item class="d-flex">
+ <div nz-form-label class="label-width-70">
+ <label>������</label>
+ </div>
+ <div nz-form-control class="flex-1">
+ <nz-select [(ngModel)]="sensor" name="sensor" [nzSize]="'large'" [nzPlaceHolder]="'��������� ������'">
+ <nz-option *ngFor="let option of sensorOptions" [nzLabel]="option.name" [nzValue]="option"></nz-option>
+ </nz-select>
+ </div>
+ </div>
+ </div>
+ <div nz-col [nzSpan]="5" class="mb-md">
+ <div nz-form-item class="d-flex">
+ <div nz-form-label class="label-width-70">
+ <label>������������</label>
+ </div>
+ <div nz-form-control class="flex-1">
+ <nz-select [(ngModel)]="monitorPoint" name="monitorPoint" [nzPlaceHolder]="'��������� ������������'" [nzSize]="'large'"
+ [nzNotFoundContent]="'������������'" nzShowSearch>
+ <nz-option *ngFor="let option of monitorPointOptions" [nzLabel]="option['name']" [nzValue]="option"> </nz-option>
+ </nz-select>
+ </div>
+ </div>
+ </div>
+ <div nz-col [nzSpan]="5" class="mb-md">
+ <div nz-form-item class="d-flex">
+ <div nz-form-label class="label-width-70">
+ <label>������</label>
+ </div>
+ <div nz-form-control class="flex-1">
+ <nz-select [(ngModel)]="timeType" name="timeType" [nzSize]="'large'">
+ <nz-option *ngFor="let option of typeOptions" [nzLabel]="option.label" [nzValue]="option" ></nz-option>
+ </nz-select>
+ </div>
+ </div>
+ </div>
+ <div nz-col [nzSpan]="5" class="mb-md">
+ <div nz-form-item class="d-flex">
+ <div nz-form-label class="label-width-70">
+ <label>������</label>
+ </div>
+ <div nz-form-control class="flex-1">
+ <nz-datepicker style="width: 100%;" [(ngModel)]="time" name="time" [nzFormat]="timeType.format" [nzDisabledDate]="_disabledDate" [nzAllowClear]="false"
+ [nzMode]="timeType.value=='hour'||timeType.value=='day'?'day':'month'" [nzShowTime]="timeType.value=='hour'?true:false" [nzSize]="'large'"></nz-datepicker>
+ </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'">
+ ������
+ </button>
+ </div>
+ </div>
+ </form>
+</nz-card>
+
+<nz-card [nzBordered]="false">
+ <div id="mydiv" style="height: 485.35px; width: 100%"></div>
+</nz-card>
diff --git a/src/app/routes/raise-dust/statistical-query/statistical-query.component.ts b/src/app/routes/raise-dust/statistical-query/statistical-query.component.ts
index 22fc612..6c2ecdf 100644
--- a/src/app/routes/raise-dust/statistical-query/statistical-query.component.ts
+++ b/src/app/routes/raise-dust/statistical-query/statistical-query.component.ts
@@ -1,17 +1,99 @@
-import { Component, OnInit } from '@angular/core';
-import { _HttpClient } from '@delon/theme';
+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 '@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
- ) { }
+ constructor(
+ public http: HttpClient,
+ public dateSrv: DateService,
+ public msgSrv: NzMessageService
+ ) {
+ this.timeType = this.typeOptions[1];
+ }
- ngOnInit() {
- }
+ 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();
+ });
+ }
}
diff --git a/src/assets/img/5.jpg b/src/assets/img/5.jpg
new file mode 100644
index 0000000..ae99cbf
--- /dev/null
+++ b/src/assets/img/5.jpg
Binary files differ
diff --git a/src/assets/img/6.jpg b/src/assets/img/6.jpg
new file mode 100644
index 0000000..5d2fc49
--- /dev/null
+++ b/src/assets/img/6.jpg
Binary files differ
--
Gitblit v1.8.0