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 | 700 ++++++++++++++++++++++++++++++++++++++++++++++++++++------ 1 files changed, 627 insertions(+), 73 deletions(-) diff --git a/src/app/routes/analysis/query/query.component.ts b/src/app/routes/analysis/query/query.component.ts index fea1e49..fca727c 100644 --- a/src/app/routes/analysis/query/query.component.ts +++ b/src/app/routes/analysis/query/query.component.ts @@ -1,91 +1,645 @@ -import { LineChartCriteria, TimePeriod } from '@business/entity/data'; -import { PageBean } 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 { TimeUnits } from '@business/enum/types.enum'; +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 { 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 timePeriod:TimePeriod = {startTime:null,endTime:null}; - public lineChartCriteria:LineChartCriteria = {sensorKey:'e1', timePeriod:{startTime:null,endTime:null},dataConditions:[]}; + // 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 }; - get lineChartSensorName():String{ - return !!this.sensorList?this.sensorList.find( sensor => sensor.sensorKey==this.lineChartCriteria.sensorKey).name:null; - } - private _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.timePickerOption = {nzFormat:"HH:mm"}; - break; + 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._areas.length) { + case 1: + areaName = 'provinceCode'; break; + case 2: + areaName = 'cityCode'; break; + case 3: + areaName = 'areaCode'; break; } - } - public timeType:{dateFormat?:string,mode?:'year'|'month'|'day',timePickerOption?:{}} - = {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 - ) { - this.initPage(); - } - private initPage(){ - this.sensorsService.getPagingList(null,null).subscribe( - (res: PageBean) => { - this.sensorList = res.data; + if (!!text) { + 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: Number(this._areas.slice(-1).pop().value) }); + } + this.monitorPointService.getPageByExample(pageBean, example).subscribe( + (res: PageBean) => { + if (!!res && !!res.data) { + this.monitorPointOptions = 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} + } + 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(); + } + 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; + 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); + } + } + ); + } + 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 + ','; + } + } ); } - ngOnInit() { - } - get _isSameDay() { - console.log(this.lineChartCriteria.timePeriod.startTime && this.lineChartCriteria.timePeriod.endTime && moment(this.lineChartCriteria.timePeriod.startTime).isSame(this.lineChartCriteria.timePeriod.endTime, 'day')); - return this.lineChartCriteria.timePeriod.startTime && this.lineChartCriteria.timePeriod.endTime && moment(this.lineChartCriteria.timePeriod.startTime).isSame(this.lineChartCriteria.timePeriod.endTime, 'day'); - } - _disabledStartDate = (startValue) => { - if (!startValue || !this.lineChartCriteria.timePeriod.endTime) { - return false; + 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; } - console.log(startValue); - console.log("getTime:"+startValue.getTime()); - let _startValue = moment(startValue,this.timeType.dateFormat); - console.log("valueOf:"+_startValue.valueOf()); - return _startValue.valueOf() > this.lineChartCriteria.timePeriod.endTime; - }; - _disabledEndDate = (endValue) => { - if (!endValue || !this.lineChartCriteria.timePeriod.startTime) { - return false; + } + 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 endValue.getTime() < this.lineChartCriteria.timePeriod.startTime; + return result; + } + public loadGrid(): void { + // ������������ + const sensors = Object.values(this._sensors); + if ( sensors.length === 0 ) { + this.msg.error(' ������������ ������������'); + return ; + } + 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; + } + } + 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; + } + 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