From b7aa850069d53ca1cc2aea791e7401216f5b795c Mon Sep 17 00:00:00 2001 From: fengxiang <110431245@qq.com> Date: Mon, 19 Mar 2018 16:44:07 +0800 Subject: [PATCH] 数据查看 --- src/app/routes/analysis/query/query.component.ts | 895 +++++++++++++++++++++++++--------------------------------- 1 files changed, 389 insertions(+), 506 deletions(-) diff --git a/src/app/routes/analysis/query/query.component.ts b/src/app/routes/analysis/query/query.component.ts index ee131b9..3a2eb57 100644 --- a/src/app/routes/analysis/query/query.component.ts +++ b/src/app/routes/analysis/query/query.component.ts @@ -1,175 +1,74 @@ -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 { LineChartCriteria, TimePeriod, Organization, MonitorPoint, DataCondition, Device, PairData } from '@business/entity/data'; -import { PageBean, ResultBean, Grid } 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 { environment } from '@env/environment'; +import { ExampleService } from '@business/services/util/example.service'; import { DeviceService } from '@business/services/http/device.service'; -import { DateService } from '@business/services/util/date.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'; + @Component({ - selector: 'app-query', - templateUrl: './query.component.html', - styleUrls: ['./query.component.less'] + selector: 'app-query', + templateUrl: './query.component.html' }) export class QueryComponent implements OnInit { - public sensorList: Sensor[]; - public timeUnits: { label: string, value: TimeUnits }[] = []; - public lineChartCriteria: LineChartCriteria = { sensorKey: 'e1', timePeriod: { startTime: null, endTime: null }, dataConditions: [] }; - _areas: { label: any, value: any }; - _monitorPoint: MonitorPoint; - _device: Device; - _dataTimeUnits: { label: string, value: TimeUnits } = { label: '���', value: TimeUnits.DAY }; - _actualTime: number; - actualTimes: number[]; - public _timePeriodUnitValue: TimeUnits = TimeUnits.DAY; // ��������������������� - dataTimeUnitsList: { label: string, value: TimeUnits }[] = []; - public monitorPoints: MonitorPoint[]; - public devices: Device[]; + 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 = new Date(); + public actualYearOptions: number []; + public isCollapse = false; + // ������������ + public _areas: { label: any, value: any[] }; + public grid: Grid<any> = new Grid(); + public gridSensorNames: string[] = []; + @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 deviceOptions: Device[] = []; + public dataCondition: DataCondition = {areaRangeId: 320583, areaRange: AreaRange.AREA }; - dataConditionTemp: DataCondition = { timeUnits: TimeUnits.DAY, actualTime: null }; - get lineChartSensorName(): String { - return !!this.sensorList ? this.sensorList.find(sensor => sensor.sensorKey === this.lineChartCriteria.sensorKey).name : null; - } - public set timePeriodUnitValue(value: TimeUnits) { - this._timePeriodUnitValue = value; - this.lineChartCriteria.timePeriod.timeUnits = 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; - } - const index = this.timeUnits.findIndex(item => { - return item.value === value; - }); - // ������������������ ��������������� - this.dataTimeUnitsList = this.timeUnits; - const length = this.timeUnits.length; - const end = index < length - 1 ? index + 2 : length - 1; - this._dataTimeUnits = this.timeUnits.find( item => item.value === value); - setTimeout(() => { - this.dataTimeUnitsList = null; - }, 1); - setTimeout(() => { - this.dataTimeUnitsList = this.timeUnits.slice( index, end ); - }, 1); - - } - 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, - private deviceService: DeviceService, - private dateService: DateService, - private msg: NzMessageService - ) { - } - - private initPage() { - this.sensorsService.getPagingList(null, null).subscribe( - (res: PageBean) => { - this.sensorList = res.data; - } - ); - this.timeUnits.push( - { label: '���', value: TimeUnits.YEAR }, - { label: '���', value: TimeUnits.MONTH }, - { label: '���', value: TimeUnits.DAY }, - { label: '���', value: TimeUnits.HOUR }, - { label: '���', value: TimeUnits.MINUTE } - ); - this.dataTimeUnitsList = this.timeUnits.slice(2, 4); - this._dataTimeUnits = this.dataTimeUnitsList[0]; - const now = new Date(); - this.lineChartCriteria.timePeriod.timeUnits = TimeUnits.DAY; - 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; - } - } - } - ); - // ������������������ - this.monitorPointsChange(null); - } - devicesChange(mpId) { - if (!!mpId) { - const example = new ExampleService(); - example.or().andEqualTo({ name: 'monitorPointId', value: mpId }); - this.deviceService.getPageByExample(null, example).subscribe( - (res: PageBean) => { - if (!!res && !!res.data) { - this.devices = res.data; - } - } - ); - } else { - this.devices = null; - } - } - monitorPointsChange(text) { + 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) { + switch (this.dataCondition.areaRange) { case AreaRange.PROVINCE: areaName = 'provinceCode'; break; case AreaRange.CITY: @@ -179,206 +78,254 @@ } if (!!text) { example.or().andLike({ name: 'name', value: '%' + text + '%' }) - .andEqualTo({ name: areaName, value: this.dataConditionTemp.areaRangeId }); + .andEqualTo({ name: areaName, value: this.dataCondition.areaRangeId }); } else { example.or() - .andEqualTo({ name: areaName, value: this.dataConditionTemp.areaRangeId }); + .andEqualTo({ name: areaName, value: this.dataCondition.areaRangeId }); } this.monitorPointService.getPageByExample(pageBean, example).subscribe( (res: PageBean) => { if (!!res && !!res.data) { - this.monitorPoints = 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 = []; + } + } + constructor( + private http: _HttpClient, + private sensorsService: SensorsService, + private deviceService: DeviceService, + private areacodeService: AreacodeService, + private monitorPointService: MonitorPointService, + private msg: NzMessageService, + ) { } ngOnInit() { this.initPage(); + $('.ant-table-body').on( + 'click', + function() { + alert(); + console.log( $('.ant-table-body').scrollLeft()); + } + ); } - 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 []; + private initPage() { + this.sensorsService.getPagingList(null, null).subscribe( + (res: PageBean) => { + this.sensorOptions.push({id: -1, name: '������', isExpanded: true, children: res.data}); + } + ); + 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; + 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; + } + } else { + this._areas = { label: '���������/���������/���������', value: [ 320000, 320500, 320583]}; + this.dataCondition.areaRange = AreaRange.AREA; + this.dataCondition.areaRangeId = 320583; + } + // ������������������ + this.monitorPointsChange(); } - } else { - return this.newArray(60).slice(1); } - - }, - nzDisabledSeconds: () => { - return this.newArray(60).slice(1); - } - } : 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 []; + // ��������������������� ������ + 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; } - - } else { - return this.newArray(60).slice(1); - } - }, - nzDisabledSeconds: () => { - return this.newArray(60).slice(1); + 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; } - } : false; - } - newArray = (len) => { - const result = []; - for (let i = 0; i < len; i++) { - result.push(i); + if ( this.actualYearOptions.length === 0 || changeMonitorPoint) { + this.monitorPointsChange(); + this.monitorPoint = null; + } + } } - return result; } - newArray2 = (start, len) => { - const result = []; - for (let i = start; i <= len; i++) { - result.push(i); - } - return result; - } - _disabledStartDate = (startValue: Date) => { - if (!startValue || !this.lineChartCriteria.timePeriod.endTime) { - return false; - } - 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 = (value, type?: 'start'|'end') => { - const startTime = this.lineChartCriteria.timePeriod.startTime; - const endTime = this.lineChartCriteria.timePeriod.endTime; - - if (type === 'start') { - this.lineChartCriteria.timePeriod.startTime = value; - !!endTime ? '' : this.lineChartCriteria.timePeriod.endTime = value; + // ��������� ������ ��������� + 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; + this.devicesChange(); + } else { + // ���null ������ ��������������� + this.setAreaCodes(this._areas.value); + this._device = null; + this.deviceOptions = []; + } + } + } + // ��������� ������ ��������� + public _device: Device; + set device(val: Device) { + this._device = val; + if (!!val) { + this.dataCondition.areaRange = AreaRange.DEVICE; + this.dataCondition.areaRangeId = val.id; } else { - this.lineChartCriteria.timePeriod.endTime = value; - !!startTime ? '' : this.lineChartCriteria.timePeriod.startTime === value; + // ���������null ������������������������������ + this.monitorPoint = this._monitorPoint; } } - 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; + 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]; + } } - const mo = moment(value); - switch ( this.lineChartCriteria.timePeriod.timeUnits ) { - case TimeUnits.YEAR: - mo.month(month).date(day).hour(hour).minute(minute).second(second).millisecond(millisecond); break; + 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: - mo.date(day).hour(hour).minute(minute).second(second).millisecond(millisecond); break; + this._timeType.dateFormat = 'YYYY'; + // this._timeType.dateFormat = 'YYYY-MM'; + // this._timeType.mode = 'month'; + // this._timeType.endShowTime = null; + break; case TimeUnits.DAY: - mo.hour(hour).minute(minute).second(second).millisecond(millisecond); break; + this._timeType.dateFormat = 'YYYY-MM'; + this._timeType.mode = 'month'; + this._timeType.showTime = false; + break; case TimeUnits.HOUR: - mo.minute(minute).second(second).millisecond(millisecond); break; + this._timeType.dateFormat = 'YYYY-MM-DD'; + this._timeType.mode = 'day'; + this._timeType.showTime = false; + break; case TimeUnits.MINUTE: - mo.second(second).millisecond(millisecond); break; + 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; } - return mo.toDate(); } - 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; - } - areaLazyLoad(event: { option: CascaderOption, index: number, resolve: (children: CascaderOption[]) => void, reject: () => void }) { + public areaLazyLoad(event: { option: CascaderOption, index: number, resolve: (children: CascaderOption[]) => void, reject: () => void }) { const index = event['index']; const option = event.option; switch (index) { @@ -402,188 +349,124 @@ ); break; } } - setAreaCodes(codes: string[]) { - if (!!codes && !!codes.length) { - const n = codes.length; - if (this.dataConditionTemp.areaRangeId !== Number(codes[n - 1])) { - this.dataConditionTemp.areaRangeId = Number(codes[n - 1]); - switch (n) { - case 1: - this.dataConditionTemp.areaRange = AreaRange.PROVINCE; - break; - case 2: - this.dataConditionTemp.areaRange = AreaRange.CITY; - break; - case 3: - this.dataConditionTemp.areaRange = AreaRange.AREA; - break; - } - this.monitorPointsChange(null); - this._monitorPoint = null; - this.devicesChange(null); - this._device = null; - } - this._areas.value = codes; + private newArray = (startOrLen: number, len?: number, prefix?: string, suffix?: string) => { + const result = []; + 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; } - // ������������������������������ - setMonitorPoint(value: MonitorPoint) { - if (!!value) { - this.dataConditionTemp.areaRangeId = value.id; - this.dataConditionTemp.areaRange = AreaRange.MONITORPOINT; - } else { - this.setAreaCodes(this._areas.value); - } - if (value !== this._monitorPoint) { - this._device = null; - this.devicesChange(!!value ? value.id : null); - } - this._monitorPoint = value; - } - // ������������������ - setDevice(value: Device) { - if (!!value) { - this._device = value; - this.dataConditionTemp.areaRangeId = value.id; - this.dataConditionTemp.areaRange = AreaRange.DEVICE; - } else { - this.setMonitorPoint(this._monitorPoint); - } - } - setDataTimeUnits(item) { - this._dataTimeUnits = item; - this.dataConditionTemp.timeUnits = item.value; - if (!this.actualTimeDisabled) { - this._actualTime = 1; - switch (item.value) { - case TimeUnits.MONTH: - this.actualTimes = this.newArray2(1, 12); break; - case TimeUnits.DAY: - this.actualTimes = this.newArray2(1, 31); break; - case TimeUnits.HOUR: - this.actualTimes = this.newArray2(0, 23); break; - case TimeUnits.MINUTE: - this.actualTimes = this.newArray2(1, 59); break; - } - } - } - // ������������������������ actualTimeDisabled - get actualTimeDisabled() { - if (!!this.dataTimeUnitsList && this._dataTimeUnits === this.dataTimeUnitsList[0]) { - this.setActualTime(null); - // ������������������������������ - this.actualTimes = null; - } - return !!this.dataTimeUnitsList && this._dataTimeUnits === this.dataTimeUnitsList[0]; - } - - setActualTime(val) { - this.dataConditionTemp.actualTime = val; - this._actualTime = val; - } - search(event) { - // ������������������ - const startTime = this.lineChartCriteria.timePeriod.startTime; - const endTime = this.lineChartCriteria.timePeriod.endTime; - this.lineChartCriteria.timePeriod.startTime = this.getPeriodDate(startTime); - this.lineChartCriteria.timePeriod.endTime = this.getPeriodDate(endTime, 'end'); - this.lineChartCriteria.dataConditions.pop(); - this.lineChartCriteria.dataConditions.push(this.dataConditionTemp); - this.reloadChart(); - } - private reloadChart(): void { - const countTimeRange = this.dateService.countTimeRange(this.lineChartCriteria.timePeriod); - let timeList: string[]; - const maxTimeRange = 5000; - if (countTimeRange < maxTimeRange ) { - timeList = this.dateService.makeTimeList(this.lineChartCriteria.timePeriod); - } else { - this.msg.error('������������������������' + maxTimeRange + '������������������������' + countTimeRange); + public loadGrid(): void { + // ������������ + const sensors = Object.values(this._sensors); + if ( sensors.length === 0 ) { + this.msg.error(' ������������ ������������'); return ; } - - if (!!this.echartsIntance) { - this.chartOption = null; - this.echartsIntance.clear(); - } - this.initOpton({data: timeList}); - this.chartLoading = true; - this.http.post(environment.SERVER_BASH_URL + '/report/line-chart', this.lineChartCriteria).subscribe( - (res: ResultBean<Array<Array<PairData>>>) => { - if (res.code === 1) { - const series = []; - const dataList = res.data; - if (!!dataList && !!dataList.length) { - dataList.forEach( - data => { - const outData = data.map( item => { - return item.value; - }); - series.push({type: 'line', data: outData}); - } - ); - this.echartsIntance.setOption({ - series: series - }); - this.chartLoading = false; - } + this.grid.loading = true; + 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 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}; } - ); - } - private reloadGrid() { - const timePeriod = this.lineChartCriteria.timePeriod; - } - private initOpton(opt: {data: string[]}) { - - this.chartOption = { - title: { - text: '' - }, - tooltip : { - trigger: 'axis', - axisPointer: { - type: 'cross', - label: { - backgroundColor: '#6a7985' + ); break; + case TimeUnits.MINUTE: + this.grid.columns = this.newArray(0, 60, null, '���').map( + item => { + return {text: item}; + } + ); break; + } + this.http.post(environment.SERVER_BASH_URL + '/report/line-chart', lineChartCriteria).subscribe( + (res: ResultBean<{[key: string]: Array<Array<PairData>>}>) => { + if (res.code === 1) { + const series = []; + const data = res.data; + if (!!data) { + const sensorKeys = Object.keys(data); + sensorKeys.forEach( + key => { + const sensor = (<Array<Sensor>>this.sensorOptions[0].children). + find(item => { + return item.sensorKey === key; + }); + this.gridSensorNames.push(sensor.name); + const sensorData = data[key][0].map( + pair => { + return !!pair.value ? pair.value : '-'; + } + ); + this.grid.data.push(sensorData); } - } - }, - legend: { - data: [] - }, - toolbox: { - feature: { - saveAsImage: {} - } - }, - grid: { - left: '3%', - right: '4%', - bottom: '3%', - containLabel: true - }, - xAxis : [ - { - type : 'category', - boundaryGap : false, - data : opt.data - } - ], - yAxis : [ - { - type : 'value' - } - ], - series : [ - ] - }; - } - chartLoading: boolean; - chartOption; - echartsIntance; - grid: Grid<any> = new Grid(); - onChartInit(ec) { - this.echartsIntance = ec; - } + ); + } + this.grid.loading = false; + } + } + ); + } + 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(); + } } + + -- Gitblit v1.8.0