From 4e4cae085739fd5e72e047d368351bfd6ceaf4e3 Mon Sep 17 00:00:00 2001
From: fengxiang <110431245@qq.com>
Date: Sun, 25 Mar 2018 12:20:40 +0800
Subject: [PATCH] grid 冻结列 上下滚动实现
---
src/app/routes/analysis/query/query.component.ts | 917 ++++++++++++++++++++++++++++++++++++++-------------------
1 files changed, 611 insertions(+), 306 deletions(-)
diff --git a/src/app/routes/analysis/query/query.component.ts b/src/app/routes/analysis/query/query.component.ts
index 268f91a..fca727c 100644
--- a/src/app/routes/analysis/query/query.component.ts
+++ b/src/app/routes/analysis/query/query.component.ts
@@ -1,340 +1,645 @@
-import { ExampleService } from '@business/services/util/example.service';
-import { MonitorPointService } from '@business/services/http/monitor-point.service';
-import { AreacodeService } from '@business/services/http/areacode.service';
-import { DataCondition } from './../../../business/entity/data';
-import { LineChartCriteria, TimePeriod, Organization, MonitorPoint } from '@business/entity/data';
-import { PageBean, ResultBean } from '@business/entity/grid';
-import { Sensor } from '@business/entity/data';
-import { SensorsService } from '@business/services/http/sensors.service';
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
import { _HttpClient } from '@delon/theme';
+import { Sensor, Device, DataCondition, MonitorPoint, Organization, LineChartCriteria, PairData } from '@business/entity/data';
import { TimeUnits, AreaRange, ResultCode } from '@business/enum/types.enum';
+import { SensorsService } from '@business/services/http/sensors.service';
+import { PageBean, ResultBean, Grid } from '@business/entity/grid';
+import { NzTreeComponent } from 'ng-tree-antd';
import * as moment from 'moment';
-import { CascaderOption } from 'ng-zorro-antd/src/cascader/nz-cascader.component';
+import { ExampleService } from '@business/services/util/example.service';
+import { DeviceService } from '@business/services/http/device.service';
import { environment } from '@env/environment';
+import { CascaderOption } from 'ng-zorro-antd/src/cascader/nz-cascader.component';
+import { AreacodeService } from '@business/services/http/areacode.service';
+import { MonitorPointService } from '@business/services/http/monitor-point.service';
+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',
templateUrl: './query.component.html',
- styleUrls: [ './query.component.less' ]
+ styleUrls: ['./query.component.less']
})
export class QueryComponent implements OnInit {
- public sensorList: Sensor[];
- public timeUnits: { label: string, value: TimeUnits, disabled: boolean }[] = [];
- public lineChartCriteria: LineChartCriteria = {sensorKey: 'e1', timePeriod: {startTime: null, endTime: null}, dataConditions: []};
- _areas: {label: any, value: any};
- _monitorPoint;
- public monitorPoints: MonitorPoint[];
- get lineChartSensorName(): String {
- return !!this.sensorList ? this.sensorList.find( sensor => sensor.sensorKey === this.lineChartCriteria.sensorKey).name : null;
- }
- public _timePeriodUnitValue: TimeUnits = TimeUnits.DAY;
- public set timePeriodUnitValue(value: TimeUnits) {
- this._timePeriodUnitValue = value;
- switch (value) {
- // YYYY-MM-DD HH:mm:ss
- case TimeUnits.MONTH:
- this.timeType.dateFormat = 'YYYY-MM';
- this.timeType.mode = 'month';
- this.timeType.timePickerOption = null;
- break;
- case TimeUnits.DAY:
- this.timeType.dateFormat = 'YYYY-MM-DD';
- this.timeType.mode = 'day';
- this.timeType.timePickerOption = null;
- break;
- case TimeUnits.HOUR:
- this.timeType.dateFormat = 'YYYY-MM-DD HH ���';
- this.timeType.mode = 'day';
- this.timeType.timePickerOption = true;
- break;
- case TimeUnits.MINUTE:
- this.timeType.dateFormat = 'YYYY-MM-DD HH:mm';
- this.timeType.mode = 'day';
- this.timeType.timePickerOption = true;
- break;
- }
- }
- public timeType: {dateFormat?: string, mode?: 'month'|'day', timePickerOption?: boolean}
- = {dateFormat: 'YYYY-MM-DD', mode: 'day', timePickerOption: null};
- get timePeriodUnitName(): String {
- return this.timeUnits.find( item => item.value === this._timePeriodUnitValue).label;
- }
- constructor(
- private sensorsService: SensorsService,
- private areacodeService: AreacodeService,
- private http: _HttpClient,
- private monitorPointService: MonitorPointService,
- ) {
- }
+ // 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[] = [];
+ /**
+ * ���������������������������������
+ * ���������������������������������������������������������������������
+ * @memberof QueryComponent
+ */
+ public timeUnitOptions = [
+ {label: '������', value: TimeUnits.MONTH},
+ {label: '������', value: TimeUnits.DAY},
+ {label: '������', value: TimeUnits.HOUR},
+ {label: '������', value: TimeUnits.MINUTE},
+ ];
+ public timeUnit: {label: string, value: TimeUnits} = this.timeUnitOptions[2];
+ // ���������������������������������������
+ public actualTime: Date = moment().subtract(1, 'days').toDate();
+ public actualYearOptions: number [];
+ public isCollapse = false;
+ public isChartCollapse = false;
+ // ������������
+ 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 = 0;
+ public sensorNameScrollTop = 0;
+ @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���'};
+ // ���key-value������,������������������
+ private _sensors: {[key: string]: string} = {};
+ private _sensorNames: string;
+ get sensorNames(): string {
+ return this._sensorNames;
+ }
+ public toggleCollapse() {
+ this.isCollapse = !this.isCollapse;
+ }
+ public toggleChartCollapse() {
+ // ���������������
+ if (this.isChartCollapse && !!this.echartsIntance) {
+ this.reloadChart();
+ this.switchSensor(this.chartSelectedIndex);
+ // this.chartLoading = false;
+ }
+ this.isChartCollapse = !this.isChartCollapse;
+ }
+ public deviceOptions: Device[] = [];
+ public dataCondition: DataCondition = {areaRangeId: 320583, areaRange: AreaRange.AREA };
- private initPage() {
- this.sensorsService.getPagingList(null, null).subscribe(
- (res: PageBean) => {
- this.sensorList = res.data;
- }
- );
- this.timeUnits.push(
- {label: '���', value: TimeUnits.YEAR, disabled: false},
- {label: '���', value: TimeUnits.MONTH, disabled: false},
- {label: '���', value: TimeUnits.DAY, disabled: false},
- {label: '���', value: TimeUnits.HOUR, disabled: false},
- {label: '���', value: TimeUnits.MINUTE, disabled: false}
- );
- const now = new Date();
- this.lineChartCriteria.timePeriod.startTime = now;
- this.lineChartCriteria.timePeriod.endTime = new Date(now.getTime());
- // ��������� ���������
- this.http.get(environment.SERVER_BASH_URL + 'organization/get-my-org').subscribe(
- ( res: ResultBean<Organization>) => {
- if (res.code === ResultCode.SUCCESS) {
- const org = res.data;
- 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.dataConditionTemp.areaRange = AreaRange.AREA;
- this.dataConditionTemp.areaRangeId = org.areaCode;
- } else if (areaNames.cityName != null) {
- this._areas.value = org.cityCode;
- this.dataConditionTemp.areaRange = AreaRange.CITY;
- this.dataConditionTemp.areaRangeId = org.cityCode;
- } else {
- this._areas.value = org.provinceCode;
- this.dataConditionTemp.areaRange = AreaRange.PROVINCE;
- this.dataConditionTemp.areaRangeId = org.provinceCode;
- }
- } else {
- this._areas = {label: '���������/���������/���������', value: 320583};
- this.dataConditionTemp.areaRange = AreaRange.AREA;
- this.dataConditionTemp.areaRangeId = 320583;
- }
- }
- }
- );
- }
- monitorPointChange(text) {
- const pageBean: PageBean = {pageIndex: 0, pageSize: 20};
+ public monitorPointOptions: MonitorPoint[] = [];
+
+ get actualYear(): number {
+ return this.actualTime.getFullYear();
+ }
+ set actualYear(year) {
+ this.actualTime.setFullYear(Number(year));
+ }
+ monitorPointsChange(text?: string) {
+ const pageBean: PageBean = { pageIndex: 0, pageSize: 20 };
const example = new ExampleService();
let areaName = '';
- switch (this.dataConditionTemp.areaRange) {
- case AreaRange.PROVINCE:
- areaName = 'provinceCode'; break;
- case AreaRange.CITY:
- areaName = 'cityCode'; break;
- case AreaRange.AREA:
- areaName = 'areaCode'; break;
+ switch (this._areas.length) {
+ case 1:
+ areaName = 'provinceCode'; break;
+ case 2:
+ areaName = 'cityCode'; break;
+ case 3:
+ areaName = 'areaCode'; break;
}
if (!!text) {
- example.or().andLike({name: 'name', value: '%' + text + '%'})
- .andEqualTo({name: areaName, value: this.dataConditionTemp.areaRangeId});
+ example.or().andLike({ name: 'name', value: '%' + text + '%' })
+ .andEqualTo({ name: areaName, value: Number(this._areas.slice(-1).pop().value) });
} else {
example.or()
- .andEqualTo({name: areaName, value: this.dataConditionTemp.areaRangeId});
+ .andEqualTo({ name: areaName, value: Number(this._areas.slice(-1).pop().value) });
}
this.monitorPointService.getPageByExample(pageBean, example).subscribe(
- (res: PageBean) => {
- if (!!res && !!res.data) {
- this.monitorPoints = res.data;
- }
- }
- );
- }
+ (res: PageBean) => {
+ if (!!res && !!res.data) {
+ this.monitorPointOptions = res.data;
+ }
+ }
+ );
+ }
+ devicesChange(text?: string) {
+ if (!!this.monitorPoint) {
+ const example = new ExampleService();
+ if (!!text) {
+ example.or().andEqualTo({ name: 'monitorPointId', value: this.monitorPoint.id })
+ .andLike({name: 'text', value: text});
+ }else {
+ example.or().andEqualTo({ name: 'monitorPointId', value: this.monitorPoint.id });
+ }
+ this.deviceService.getPageByExample(null, example).subscribe(
+ (res: PageBean) => {
+ if (!!res && !!res.data) {
+ this.deviceOptions = res.data;
+ }
+ }
+ );
+ } else {
+ this.deviceOptions = [];
+ }
+ }
+ /**
+ * ������������
+ */
+ public chartLoading: boolean;
+ public chartOption;
+ public echartsIntance;
+ public chartSelectedIndex = 0;
+ public onChartInit(e): void {
+ this.echartsIntance = e;
+ }
+ constructor(
+ private http: _HttpClient,
+ private sensorsService: SensorsService,
+ private deviceService: DeviceService,
+ private areacodeService: AreacodeService,
+ private monitorPointService: MonitorPointService,
+ private msg: NzMessageService,
+ private dateService: DateService,
+ ) { }
ngOnInit() {
this.initPage();
}
- get _isSameDay() {
- return this.lineChartCriteria.timePeriod.startTime && this.lineChartCriteria.timePeriod.endTime && moment(this.lineChartCriteria.timePeriod.startTime).isSame(this.lineChartCriteria.timePeriod.endTime, 'day');
- }
- get _startShowTime() {
- return this.timeType.timePickerOption ?
- {nzHideDisabledOptions: true,
- nzDisabledHours: () => {
- const endTime = this.lineChartCriteria.timePeriod.endTime;
- const hours = this.newArray(50);
- return this._isSameDay && !!endTime ? hours.slice(endTime.getHours() + 1, 24) : [];
- },
- nzDisabledMinutes: (h) => {
- if (this._timePeriodUnitValue === TimeUnits.MINUTE) {
- const endTime = this.lineChartCriteria.timePeriod.endTime;
- if (this._isSameDay && h === endTime.getHours()) {
- const minutes = this.newArray(122);
- return minutes.slice(endTime.getMinutes() + 1, 60);
- } else {
- return [];
- }
- } else {
- return this.newArray(60).slice(1);
- }
-
- },
- nzDisabledSeconds: () => {
- return this.newArray(60).slice(1);
+ private initPage() {
+ this.sensorsService.getPagingList(null, null).subscribe(
+ (res: PageBean) => {
+ this.sensorOptions.push({id: -1, name: '������', isExpanded: true, children: res.data});
}
- } : false;
- }
- get _endShowTime() {
- return this.timeType.timePickerOption ?
- {nzHideDisabledOptions: true,
- nzDisabledHours: () => {
- const startTime = this.lineChartCriteria.timePeriod.startTime;
- return this._isSameDay && !!startTime ? this.newArray(startTime.getHours()) : [];
- },
- nzDisabledMinutes: (h) => {
- if (this._timePeriodUnitValue === TimeUnits.MINUTE) {
- const startTime = this.lineChartCriteria.timePeriod.startTime;
- if (this._isSameDay && h === startTime.getHours()) {
- return this.newArray(startTime.getMinutes());
- } else {
- return [];
+ );
+ this.actualYearOptions = this.newArray(this.actualYear - 9, 10).map(item => Number(item)).reverse();
+ // ��������� ���������
+ this.http.get(environment.SERVER_BASH_URL + 'organization/get-my-org').subscribe(
+ (res: ResultBean<Organization>) => {
+ if (res.code === ResultCode.SUCCESS) {
+ const org = res.data;
+ const areas = new Array(3);
+ if (!!org.areaNames) {
+ const areaNames = org.areaNames;
+ 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 {
+ 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.setAreasData(areas);
+ }
}
-
- } else {
- return this.newArray(60).slice(1);
- }
- },
- nzDisabledSeconds: () => {
- return this.newArray(60).slice(1);
- }
- } : false;
+ );
}
- newArray = (len) => {
+ 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) {
+ // ������ ������������������
+ if (this._monitorPoint !== value) {
+ this._monitorPoint = value; // ���������������������������������������������������������
+ this._device = null; // ���������������
+ this.devicesChange();
+ }
+ // ������null ������������������������������
+ } else {
+ this._monitorPoint = null;
+ this.device = null;
+ this.deviceOptions = null;
+ }
+
+ }
+ // ��������� ������ ���������
+ public _device: Device;
+ set device(val: Device) {
+ this._device = val;
+
+ }
+ get device(): Device {
+ return this._device;
+ }
+
+
+ /**
+ * ������ ���������������
+ *
+ * @readonly
+ * @type {string}
+ * @memberof QueryComponent
+ */
+ 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;
+ }
+ );
+ } else {
+ this._sensors = {};
+ }
+ }else {
+ if (!!data.checked) {
+ this._sensors [data.id] = data.sensorKey;
+ }else {
+ delete this._sensors[data.id];
+ }
+ }
+ this._sensorNames = '';
+ this.sensorOptions[0].children.forEach(
+ sensor => {
+ const hasSensor = Object.keys(this._sensors).some(
+ id => Number(id) === Number(sensor.id)
+ );
+ if (hasSensor) {
+ this._sensorNames += sensor.name + ',';
+ }
+ }
+ );
+ }
+ public setTimeUnit(val: {label: string, value: TimeUnits} ) {
+ switch (val.value) {
+ // YYYY-MM-DD HH:mm:ss
+ case TimeUnits.MONTH:
+ 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.mode = 'month';
+ this._timeType.showTime = false;
+ break;
+ case TimeUnits.HOUR:
+ 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.mode = 'day';
+ this._timeType.showTime = {
+ nzHideDisabledOptions: true,
+ nzDisabledHours: () => {
+ return [];
+ },
+ nzDisabledMinutes: (h) => {
+ return this.newArray(60).slice(1).map(
+ item => Number(item)
+ );
+ },
+ nzDisabledSeconds: () => {
+ return this.newArray(60).slice(1).map(
+ item => Number(item)
+ );
+ }
+ };
+ break;
+ }
+ }
+ private newArray = (startOrLen: number, len?: number, prefix?: string, suffix?: string) => {
const result = [];
- for (let i = 0; i < len; i++) {
- result.push(i);
+ const s = !!len ? startOrLen : 0;
+ len = !!len ? len : startOrLen;
+ suffix = !!suffix ? suffix : '';
+ prefix = !!prefix ? prefix : '';
+ for (let i = s; result.length < len; i++) {
+ result.push(prefix + i + suffix);
}
return result;
- }
- _disabledStartDate = (startValue: Date) => {
- if (!startValue || !this.lineChartCriteria.timePeriod.endTime) {
- return false;
+ }
+ public loadGrid(): void {
+ // ������������
+ const sensors = Object.values(this._sensors);
+ if ( sensors.length === 0 ) {
+ this.msg.error(' ������������ ������������');
+ return ;
}
- let format = this.timeType.dateFormat;
- // ������������������������������ ������������������������ 00.00.00
- if (format.indexOf('H', 11)) {
- format = format.replace(/HH.*/, '');
- }
- const _startValue = moment(moment(startValue).format(format), format);
- return _startValue.valueOf() > this.lineChartCriteria.timePeriod.endTime.getTime();
- }
- _disabledEndDate = (endValue: Date) => {
- if (!endValue || !this.lineChartCriteria.timePeriod.startTime) {
- return false;
- }
- const _endValue: Date = new Date(endValue.getTime());
- _endValue.setHours(23);
- _endValue.setMinutes(59);
- _endValue.setSeconds(59);
- return _endValue.getTime() < this.lineChartCriteria.timePeriod.startTime.getTime();
- }
- _timeChange = (type: string) => {
- const startTime = this.lineChartCriteria.timePeriod.startTime;
- const endTime = this.lineChartCriteria.timePeriod.endTime;
- if (type === 'start') {
- !!endTime ? '' : this.lineChartCriteria.timePeriod.endTime = startTime;
- } else {
- !!startTime ? '' : this.lineChartCriteria.timePeriod.startTime === endTime;
- }
- }
- get startYear(): number {
- !!this.lineChartCriteria.timePeriod.startTime ?
- '' : this.lineChartCriteria.timePeriod.startTime = new Date();
- return this.lineChartCriteria.timePeriod.startTime.getFullYear();
- }
- set startYear(value) {
- !!this.lineChartCriteria.timePeriod.startTime ?
- '' : this.lineChartCriteria.timePeriod.startTime = new Date();
- if (this.startYear === this.endYear && value < this.startYear) {
- // ������������������������
- setTimeout(() => {
- this.endYear += 1;
- }, 1);
- }
- this.lineChartCriteria.timePeriod.startTime.setFullYear(value);
- }
- get minStartYear(): number {
- const now = new Date();
- return now.getFullYear() - 50;
- }
- get maxStartYear(): number {
- return this.endYear;
- }
- get endYear(): number {
- !!this.lineChartCriteria.timePeriod.endTime ?
- '' : this.lineChartCriteria.timePeriod.endTime = new Date();
- return this.lineChartCriteria.timePeriod.endTime.getFullYear();
- }
-
- set endYear(value) {
- !!this.lineChartCriteria.timePeriod.endTime ?
- '' : this.lineChartCriteria.timePeriod.endTime = new Date();
- if (this.startYear === this.endYear && value > this.startYear) {
- // ������������������������
- setTimeout(() => {
- this.startYear -= 1;
- }, 1);
- }
- this.lineChartCriteria.timePeriod.endTime.setFullYear(value);
- }
- get minEndYear(): number {
- return this.startYear;
- }
- get maxEndYear(): number {
- const now = new Date();
- return now.getFullYear() + 50;
- }
- dataConditionTemp: DataCondition = {};
- 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;
- }
- }
- setAreaCodes(codes: string[]) {
- if (!!codes && !!codes.length) {
- const n = codes.length;
- switch (n) {
- case 1:
- this.dataConditionTemp.areaRangeId = Number(codes[0]);
- this.dataConditionTemp.areaRange = AreaRange.PROVINCE;
+ this.grid.loading = true;
+ this.sensorNameScrollLeft = 0;
+ this.grid.data = [];
+ 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;
- case 2:
- this.dataConditionTemp.areaRangeId = Number(codes[1]);
- this.dataConditionTemp.areaRange = AreaRange.CITY;
- break;
- case 3:
- this.dataConditionTemp.areaRangeId = Number(codes[2]);
- this.dataConditionTemp.areaRange = AreaRange.AREA;
- break;
- }
- this._monitorPoint = 1;
+ }
+ }
+ const dataConditions = [this.dataCondition];
+ const lineChartCriteria: LineChartCriteria = {
+ sensorKeys: sensors,
+ timePeriod: {startTime: start , endTime: end, timeUnits: this.timeUnit.value },
+ dataConditions: dataConditions
+ };
+ const timePeriod = lineChartCriteria.timePeriod;
+ switch (timePeriod.timeUnits) {
+ case TimeUnits.MONTH:
+ this.grid.columns = this.newArray(1, 12, null, '���').map(
+ item => {
+ return {text: item};
+ }
+ ); break;
+ case TimeUnits.DAY:
+ const mo = moment(lineChartCriteria.timePeriod.startTime);
+ const days = mo.endOf('month').date();
+ this.grid.columns = this.newArray(1, days, null, '���').map(
+ item => {
+ return {text: item};
+ }
+ ); break;
+ case TimeUnits.HOUR:
+ this.grid.columns = this.newArray(0, 24, null, '���').map(
+ item => {
+ return {text: item};
+ }
+ ); break;
+ case TimeUnits.MINUTE:
+ this.grid.columns = this.newArray(0, 60, null, '���').map(
+ item => {
+ return {text: item};
+ }
+ ); break;
+ }
+ // ���������������������������������
+ this.tableWidth = this.grid.columns.length * 80 + 160;
+ this.reloadChart();
+ // ������������������
+ this.reloadChartTitle();
+ // ������������
+ this.grid.data = [];
+ this.http.post(environment.SERVER_BASH_URL + '/report/line-chart', lineChartCriteria).subscribe(
+ (res: ResultBean<{[key: string]: Array<Array<PairData>>}>) => {
+ if (res.code === 1) {
+ 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;
+ });
+ let weight = this.aqiSort[key];
+ weight = !!weight ? weight : 101;
+ // this.gridSensors.push(sensor);
+ const sensorData = data[key][0].map(
+ pair => {
+ if (weight > 100) {
+ // pair.value ���null,������������
+ weight = !!pair.value ? weight : weight + 1;
+ }
+ // ���������������������2���
+ return !!pair.value ? String(Math.round(pair.value * 100) / 100) : '-';
+ }
+ );
+ 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.switchSensor(0);
+ }
+ }
+ );
+ $('.ant-table-body').scroll(
+ () => {
+ this.sensorNameScrollLeft = $('.ant-table-body').scrollLeft();
+ this.sensorNameScrollTop = -$('.ant-table-body').scrollTop();
+ }
+ );
+ }
+ private reloadChart(): void {
+ 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({ xAxis : [{data : timeList}]});
+ this.chartLoading = true;
}
- setMonitorPoint(value) {
- console.log(value);
- this.dataConditionTemp.areaRangeId = value;
- this.dataConditionTemp.areaRange = AreaRange.MONITORPOINT;
+ 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 _chartTitleTemp = '';
+ public reloadChartTitle(): void {
+ 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);
+ if ( this.grid.data.length > this.chartSelectedIndex) {
+ names[3] = this.grid.data[this.chartSelectedIndex].sensor.name;
+ }
+ const title = names.join(' ') + ' ������';
+ if (title.trim() !== this._chartTitleTemp.trim()) {
+ this._chartTitleTemp = title;
+ }
+ }
+ public switchSensor(index: number): void {
+ this.chartSelectedIndex = index;
+ this.chartLoading = true;
+ this.reloadChartTitle();
+ setTimeout(() => {
+ const series = [{type: 'line', data: this.grid.data[index].data}];
+ this.echartsIntance.setOption({
+ title: {
+ text: this._chartTitleTemp
+ },
+ yAxis : [
+ {
+ name : '���������' + this.sensorUnit
+ }
+ ],
+ series: series
+ });
+ this.chartLoading = false;
+ }, 600);
+ }
+ private getPeriodDate(value: Date , type?: 'start'|'end' ): Date {
+ let month = 0;
+ let day = 1;
+ let hour = 0;
+ let minute = 0;
+ let second = 0;
+ let millisecond = 0;
+ if ('end' === type) {
+ month = 11;
+ day = 31;
+ hour = 23;
+ minute = 59;
+ second = 59;
+ millisecond = 999;
+ }
+ const mo = moment(value);
+ switch ( this.timeUnit.value ) {
+ case TimeUnits.MONTH:
+ mo.month(month).date(day).hour(hour).minute(minute).second(second).millisecond(millisecond); break;
+ case TimeUnits.DAY:
+ mo.date(day).hour(hour).minute(minute).second(second).millisecond(millisecond); break;
+ case TimeUnits.HOUR:
+ mo.hour(hour).minute(minute).second(second).millisecond(millisecond); break;
+ case TimeUnits.MINUTE:
+ mo.minute(minute).second(second).millisecond(millisecond); break;
+ // case TimeUnits.MINUTE:
+ // mo.second(second).millisecond(millisecond); break;
+ }
+ return mo.toDate();
+ }
+ public sensorTableFocusIndex = -1;
+ public sensorTableFocus(index) {
+ this.sensorTableFocusIndex = index;
+ }
+ public sensorTableBlur(index) {
+ this.sensorTableFocusIndex = -1;
+ }
}
+
+
--
Gitblit v1.8.0