| src/app/routes/raise-dust/statistical-query/statistical-query.component.html | ●●●●● patch | view | raw | blame | history | |
| src/app/routes/raise-dust/statistical-query/statistical-query.component.ts | ●●●●● patch | view | raw | blame | history | |
| src/assets/img/5.jpg | patch | view | raw | blame | history | |
| src/assets/img/6.jpg | patch | view | raw | blame | history |
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> src/app/routes/raise-dust/statistical-query/statistical-query.component.ts
@@ -1,17 +1,99 @@ 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(); }); } } src/assets/img/5.jpg
