From c8d8b2d3cf0807f46d1d365da0560b25a1a73ae7 Mon Sep 17 00:00:00 2001
From: fengxiang <110431245@qq.com>
Date: Fri, 23 Mar 2018 14:58:40 +0800
Subject: [PATCH] 数据查询优化，设备坐标 保持bug修复
---
src/app/routes/analysis/query/query.component.ts | 428 ++++++++++++++++++++++++++++++-----------------------
1 files changed, 241 insertions(+), 187 deletions(-)
diff --git a/src/app/routes/analysis/query/query.component.ts b/src/app/routes/analysis/query/query.component.ts
index 0ca1a58..3f41f21 100644
--- a/src/app/routes/analysis/query/query.component.ts
+++ b/src/app/routes/analysis/query/query.component.ts
@@ -15,6 +15,7 @@
import { NzMessageService } from 'ng-zorro-antd';
import * as $ from 'jquery';
import { DateService } from '@business/services/util/date.service';
+import { zip } from 'rxjs/observable/zip';
@Component({
selector: 'app-query',
@@ -22,6 +23,22 @@
styleUrls: ['./query.component.less']
})
export class QueryComponent implements OnInit {
+ // aqi������������
+ private aqiSort = {
+ e1: 1,
+ e2: 2,
+ e10: 3,
+ e11: 4,
+ e15: 5,
+ e16: 6
+ };
+ public tableWidth = 2800;
+ private tableWidthOption = {
+ 'MONTH': 1400,
+ 'DAY': 2800,
+ 'HOUR': 2100,
+ 'MINUTE': 5000
+ };
public expandForm: boolean; // ��������� ������������
// public sensors: any[] = [];
public sensorOptions: any[] = [];
@@ -37,17 +54,19 @@
{label: '������', value: TimeUnits.MINUTE},
];
public timeUnit: {label: string, value: TimeUnits} = this.timeUnitOptions[2];
- public actualTime: Date = new Date();
+ // ���������������������������������������
+ public actualTime: Date = moment().subtract(1, 'days').toDate();
public actualYearOptions: number [];
public isCollapse = false;
+ public isChartCollapse = false;
// ������������
- public _areas: { label: any, value: any[] };
- public grid: Grid<any> = new Grid();
- public gridSensorNames: string[] = [];
+ public _areas: { label: string, value: string }[] = new Array();
+ public grid: Grid<{sensor: Sensor, data: string [], weight?: number}> = new Grid();
+ // public grid.data: {sensor: Sensor, data: string [], weight?: number} [] = [];
// ������������������������������������������
public sensorNameScrollLeft = '0px';
@ViewChild(NzTreeComponent) private tree: NzTreeComponent;
- private _timeType: {showTime: boolean|{[key: string]: Function|boolean}, mode: 'month' | 'day', dateFormat: string } = {showTime: false, mode: 'day', dateFormat: 'YYYY-MM-DD'};
+ private _timeType: {showTime: boolean|{[key: string]: Function|boolean}, mode: 'month' | 'day', dateFormat: string } = {showTime: false, mode: 'day', dateFormat: 'YYYY���MM���DD���'};
// ���key-value������,������������������
private _sensors: {[key: string]: string} = {};
private _sensorNames: string;
@@ -56,6 +75,14 @@
}
public toggleCollapse() {
this.isCollapse = !this.isCollapse;
+ }
+ public toggleChartCollapse() {
+ // ���������������
+ if (this.isChartCollapse && !!this.echartsIntance) {
+ this.switchSensor(this.chartSelectedIndex);
+ // this.chartLoading = false;
+ }
+ this.isChartCollapse = !this.isChartCollapse;
}
public deviceOptions: Device[] = [];
public dataCondition: DataCondition = {areaRangeId: 320583, areaRange: AreaRange.AREA };
@@ -72,20 +99,20 @@
const pageBean: PageBean = { pageIndex: 0, pageSize: 20 };
const example = new ExampleService();
let areaName = '';
- switch (this.dataCondition.areaRange) {
- case AreaRange.PROVINCE:
+ switch (this._areas.length) {
+ case 1:
areaName = 'provinceCode'; break;
- case AreaRange.CITY:
+ case 2:
areaName = 'cityCode'; break;
- case AreaRange.AREA:
+ case 3:
areaName = 'areaCode'; break;
}
if (!!text) {
example.or().andLike({ name: 'name', value: '%' + text + '%' })
- .andEqualTo({ name: areaName, value: this.dataCondition.areaRangeId });
+ .andEqualTo({ name: areaName, value: Number(this._areas.slice(-1).pop().value) });
} else {
example.or()
- .andEqualTo({ name: areaName, value: this.dataCondition.areaRangeId });
+ .andEqualTo({ name: areaName, value: Number(this._areas.slice(-1).pop().value) });
}
this.monitorPointService.getPageByExample(pageBean, example).subscribe(
(res: PageBean) => {
@@ -149,104 +176,105 @@
(res: ResultBean<Organization>) => {
if (res.code === ResultCode.SUCCESS) {
const org = res.data;
- if (!!org.areaNames) {
+ const areas = new Array(3);
+ if (!!org.areaNames) {
const areaNames = org.areaNames;
- this._areas = { label: null, value: null };
- this._areas.label = Object.values(areaNames).filter(
- val => !!val
- ).join('/');
- if (areaNames.areaName != null) {
- this._areas.value = org.areaCode;
- this.dataCondition.areaRange = AreaRange.AREA;
- this.dataCondition.areaRangeId = org.areaCode;
- } else if (areaNames.cityName != null) {
- this._areas.value = org.cityCode;
- this.dataCondition.areaRange = AreaRange.CITY;
- this.dataCondition.areaRangeId = org.cityCode;
- } else {
- this._areas.value = org.provinceCode;
- this.dataCondition.areaRange = AreaRange.PROVINCE;
- this.dataCondition.areaRangeId = org.provinceCode;
- }
+ Object.keys(areaNames).forEach(
+ key => {
+ const value = areaNames[key];
+ if ( value != null) {
+ switch (key) {
+ case 'provinceName' :
+ areas[0] = {label : value, value: org.provinceCode }; break;
+ case 'cityName' :
+ areas[1] = {label : value, value: org.cityCode }; break;
+ case 'areaName' :
+ areas[2] = {label : value, value: org.areaCode }; break;
+ }
+ }
+ }
+ );
} else {
- this._areas = { label: '���������/���������/���������', value: [ 320000, 320500, 320583]};
- this.dataCondition.areaRange = AreaRange.AREA;
- this.dataCondition.areaRangeId = 320583;
+ for (let i = 0; i < areas.length; i++) {
+ switch (i) {
+ case 0:
+ areas[0] = {label : '���������', value: 320000 }; break;
+ case 1:
+ areas[1] = {label : '���������', value: 320500 }; break;
+ case 2:
+ areas[2] = {label : '���������', value: 320583 }; break;
+ }
+ }
}
- // ������������������
- this.monitorPointsChange();
+ this.setAreasData(areas);
}
}
);
}
- // ��������������������� ������
- public setAreaCodes(codes: string[]) {
- this._areas.value = codes;
- if (!!codes && !!codes.length) {
- const n = codes.length;
- if (this.dataCondition.areaRangeId !== Number(codes[n - 1])) {
- this.dataCondition.areaRangeId = Number(codes[n - 1]);
- let changeMonitorPoint = false;
- switch (n) {
- case 1:
- this.dataCondition.areaRange = AreaRange.PROVINCE;
- if (!this.monitorPoint || this.monitorPoint.provinceCode !== this.dataCondition.areaRangeId) {
- changeMonitorPoint = true;
- }
- break;
- case 2:
- this.dataCondition.areaRange = AreaRange.CITY;
- if (!this.monitorPoint || this.monitorPoint.cityCode !== this.dataCondition.areaRangeId) {
- changeMonitorPoint = true;
- }
- break;
- case 3:
- this.dataCondition.areaRange = AreaRange.AREA;
- if (!this.monitorPoint || this.monitorPoint.areaCode !== this.dataCondition.areaRangeId) {
- changeMonitorPoint = true;
- }
- break;
- }
- if ( this.actualYearOptions.length === 0 || changeMonitorPoint) {
- this.monitorPointsChange();
- this.monitorPoint = null;
- }
- }
+ 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 setAreasData(areas: {label: string, value: string}[] ) {
+ let isChanged = false;
+ isChanged = areas.some( (item , index: number) => {
+ // this._areas[index] ���null ������ ���������������
+ return this._areas.length < areas.length
+ || !this._areas[index]
+ || this._areas[index].value !== item.value;
+ });
+ if ( isChanged ) {
+ this._areas = areas;
+ this.monitorPoint = null;
+ this.monitorPointsChange();
+ }
+ }
+
+ // ��������� ������ ���������, ������ ���������������������������null ������������������������������
public _monitorPoint: MonitorPoint;
get monitorPoint(): MonitorPoint {
return this._monitorPoint;
}
- set monitorPoint(value) {
- if (!value || value !== this._monitorPoint ) {
- this._monitorPoint = value;
- if (!!value) {
- this.dataCondition.areaRangeId = value.id;
- this.dataCondition.areaRange = AreaRange.MONITORPOINT;
- // ������������������������
- this._device = null;
+ set monitorPoint(value) {
+ if (!!value) {
+ // ������ ������������������
+ if (this._monitorPoint !== value) {
+ this._monitorPoint = value; // ���������������������������������������������������������
this.devicesChange();
- } else {
- // ���null ������ ���������������
- this.setAreaCodes(this._areas.value);
- this._device = null;
- this.deviceOptions = [];
- }
- }
+ }
+ // ������null ������������������������������
+ } else {
+ this._monitorPoint = null;
+ this.device = null;
+ this.deviceOptions = null;
+ }
+
}
// ��������� ������ ���������
public _device: Device;
set device(val: Device) {
this._device = val;
- if (!!val) {
- this.dataCondition.areaRange = AreaRange.DEVICE;
- this.dataCondition.areaRangeId = val.id;
- } else {
- // ���������null ������������������������������
- this.monitorPoint = this._monitorPoint;
- }
}
get device(): Device {
@@ -293,26 +321,27 @@
);
}
public setTimeUnit(val: {label: string, value: TimeUnits} ) {
+ this.tableWidth = this.tableWidthOption[val.value];
switch (val.value) {
// YYYY-MM-DD HH:mm:ss
case TimeUnits.MONTH:
- this._timeType.dateFormat = 'YYYY';
+ this._timeType.dateFormat = 'YYYY���';
// this._timeType.dateFormat = 'YYYY-MM';
// this._timeType.mode = 'month';
// this._timeType.endShowTime = null;
break;
case TimeUnits.DAY:
- this._timeType.dateFormat = 'YYYY-MM';
+ this._timeType.dateFormat = 'YYYY���MM���';
this._timeType.mode = 'month';
this._timeType.showTime = false;
break;
case TimeUnits.HOUR:
- this._timeType.dateFormat = 'YYYY-MM-DD';
+ this._timeType.dateFormat = 'YYYY���MM���DD���';
this._timeType.mode = 'day';
this._timeType.showTime = false;
break;
case TimeUnits.MINUTE:
- this._timeType.dateFormat = 'YYYY-MM-DD HH';
+ this._timeType.dateFormat = 'YYYY���MM���DD��� HH���';
this._timeType.mode = 'day';
this._timeType.showTime = {
nzHideDisabledOptions: true,
@@ -331,30 +360,6 @@
}
};
break;
- }
- }
- 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;
}
}
private newArray = (startOrLen: number, len?: number, prefix?: string, suffix?: string) => {
@@ -378,11 +383,32 @@
this.grid.loading = true;
this.sensorNameScrollLeft = '0px';
this.grid.data = [];
- this.gridSensorNames = [];
const start: Date = this.getPeriodDate(this.actualTime , 'start');
const end: Date = this.getPeriodDate(this.actualTime , 'end');
this.dataCondition['actualTime'] = null;
this.dataCondition['timeUnits'] = this.timeUnit.value;
+ // ���������������
+ const mptValue: number = !!this._monitorPoint ? this._monitorPoint.id : null;
+ const devValue: number = !!this._device ? this._device.id : null;
+ const areasData = [ devValue, mptValue, Number(this._areas.slice(-1).pop().value)];
+ for (let index = 0 ; index < areasData.length ; index++) {
+ const item = areasData[index];
+ if ( item !== null ) {
+ this.dataCondition.areaRangeId = item;
+ switch (index) {
+ case 0: this.dataCondition.areaRange = AreaRange.DEVICE; break;
+ case 1: this.dataCondition.areaRange = AreaRange.MONITORPOINT; break;
+ case 2:
+ switch (this._areas.length ) {
+ case 1: this.dataCondition.areaRange = AreaRange.PROVINCE; break;
+ case 2: this.dataCondition.areaRange = AreaRange.CITY; break;
+ case 3: this.dataCondition.areaRange = AreaRange.AREA; break;
+ }
+ break;
+ }
+ break;
+ }
+ }
const dataConditions = [this.dataCondition];
const lineChartCriteria: LineChartCriteria = {
sensorKeys: sensors,
@@ -422,37 +448,35 @@
this.http.post(environment.SERVER_BASH_URL + '/report/line-chart', lineChartCriteria).subscribe(
(res: ResultBean<{[key: string]: Array<Array<PairData>>}>) => {
if (res.code === 1) {
- let series = [];
const data = res.data;
if (!!data) {
const sensorKeys = Object.keys(data);
+ // aqi������������������������������������ ���������
sensorKeys.forEach(
key => {
const sensor = (<Array<Sensor>>this.sensorOptions[0].children).
find(item => {
return item.sensorKey === key;
});
- this.gridSensorNames.push(sensor.name);
+ let weight = this.aqiSort[key];
+ weight = !!weight ? weight : 101;
+ // this.gridSensors.push(sensor);
const sensorData = data[key][0].map(
pair => {
- return !!pair.value ? pair.value : '-';
+ if (weight > 100) {
+ // pair.value ���null,������������
+ weight = !!pair.value ? weight : weight + 1;
+ }
+ return !!pair.value ? String(Math.round(pair.value)) : '-';
}
);
- this.grid.data.push(sensorData);
+ this.grid.data.push({sensor: sensor, data: sensorData, weight: weight});
}
);
}
+ this.grid.data.sort( (a, b) => a.weight - b.weight );
this.grid.loading = false;
- this.chartSelectedIndex = 0;
- this.reloadChart();
- setTimeout(() => {
- // ������������������
- series = [{type: 'line', data: this.grid.data[0]}];
- this.echartsIntance.setOption({
- series: series
- });
- this.chartLoading = false;
- }, 10);
+ this.switchSensor(0);
}
}
);
@@ -463,73 +487,103 @@
);
}
private reloadChart(): void {
- const timeList = this.grid.columns.map(item => item.text);
- const title = this.gridSensorNames[this.chartSelectedIndex];
- // if (!!this.echartsIntance) {
- // this.chartOption = null;
- // this.echartsIntance.clear();
+ const timeList = this.grid.columns.map(item => item.text);
+ if (!!this.echartsIntance) {
+ this.chartOption = null;
+ this.echartsIntance.clear();
+ }
+ // let series = null;
+ // if ( this.chartSelectedIndex < this.grid.data.length ) {
+ // series = [{type: 'line', data: this.grid.data[this.chartSelectedIndex]}];
// }
- this.initOpton({title: title, xData: timeList});
+
+ this.initOpton({ xAxis : [{data : timeList}]});
this.chartLoading = true;
}
- private initOpton(opt: {title: string, xData: string[]}) {
- this.chartOption = {
- title: {
- text: opt.title
- },
- tooltip : {
- trigger: 'axis',
- axisPointer: {
- type: 'cross',
- label: {
- backgroundColor: '#6a7985'
- }
- }
- },
- legend: {
- data: []
- },
- toolbox: {
- feature: {
- saveAsImage: {}
- }
- },
- grid: {
- left: '3%',
- right: '4%',
- bottom: '3%',
- containLabel: true
- },
- xAxis : [
- {
- type : 'category',
- boundaryGap : false,
- data : opt.xData
- }
- ],
- yAxis : [
- {
- type : 'value'
- }
- ],
- series : [
- ]
- };
+ private initOpton(opt: {[key: string]: object}) {
+ const defaultOption = {
+ title: {
+ left: 'center'
+ },
+ tooltip : {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'cross',
+ label: {
+ backgroundColor: '#6a7985'
+ }
+ }
+ },
+ legend: {
+ data: []
+ },
+ toolbox: {
+ feature: {
+ saveAsImage: {}
+ }
+ },
+ grid: {
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ containLabel: true
+ },
+ xAxis : [
+ {
+ type : 'category',
+ boundaryGap : false
+ }
+ ],
+ yAxis : [
+ {
+ type : 'value'
+ }
+ ],
+ series : [
+ ]
+ };
+ $.extend(true, defaultOption, opt);
+ this.chartOption = defaultOption;
+ }
+ public get sensorUnit() {
+ return this.grid.data[this.chartSelectedIndex].sensor.unit;
+ }
+ public get chartTitle(): string {
+ const names = ['������', '������', '������', '������'];
+ switch ( this.dataCondition.areaRange ) {
+ case AreaRange.MONITORPOINT :
+ names[0] = '���������';
+ names[1] = this._monitorPoint.name; break;
+ case AreaRange.DEVICE :
+ names[0] = '������';
+ names[1] = this._device.name; break;
+ default :
+ names[0] = '';
+ names[1] = this._areas.map( item => item.label).join('/');
+ break;
+ }
+ names[2] = moment(this.actualTime).format(this._timeType.dateFormat);
+ names[3] = this.grid.data[this.chartSelectedIndex].sensor.name;
+ return names.join(' ') + ' ������';
}
public switchSensor(index: number): void {
this.chartSelectedIndex = index;
this.chartLoading = true;
- const title = this.gridSensorNames[this.chartSelectedIndex];
setTimeout(() => {
- const series = [{type: 'line', data: this.grid.data[index]}];
+ const series = [{type: 'line', data: this.grid.data[index].data}];
this.echartsIntance.setOption({
title: {
- text: title
+ text: this.chartTitle
},
- series: series
+ yAxis : [
+ {
+ name : '���������' + this.sensorUnit
+ }
+ ],
+ series: series
});
this.chartLoading = false;
- }, 600);
+ }, 600);
}
private getPeriodDate(value: Date , type?: 'start'|'end' ): Date {
let month = 0;
--
Gitblit v1.8.0