From 43afaa6ad53ca4368fbc6426500f3f71f6f8b765 Mon Sep 17 00:00:00 2001 From: fengxiang <110431245@qq.com> Date: Mon, 12 Mar 2018 09:02:31 +0800 Subject: [PATCH] 报表部分功能和token刷新 --- src/app/routes/analysis/query/query.component.ts | 519 +++++++++++++++++++++++++++++++++++++-------------------- 1 files changed, 337 insertions(+), 182 deletions(-) diff --git a/src/app/routes/analysis/query/query.component.ts b/src/app/routes/analysis/query/query.component.ts index 268f91a..9d59510 100644 --- a/src/app/routes/analysis/query/query.component.ts +++ b/src/app/routes/analysis/query/query.component.ts @@ -1,8 +1,7 @@ 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 { LineChartCriteria, TimePeriod, Organization, MonitorPoint, DataCondition, Device } 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'; @@ -12,86 +11,114 @@ import * as moment from 'moment'; import { CascaderOption } from 'ng-zorro-antd/src/cascader/nz-cascader.component'; import { environment } from '@env/environment'; - +import { DeviceService } from '@business/services/http/device.service'; @Component({ - selector: 'app-query', - templateUrl: './query.component.html', - styleUrls: [ './query.component.less' ] + selector: 'app-query', + templateUrl: './query.component.html', + 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 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[]; + + dataConditionTemp: DataCondition = { timeUnits: TimeUnits.DAY, actualTime: null }; get lineChartSensorName(): String { - return !!this.sensorList ? this.sensorList.find( sensor => sensor.sensorKey === this.lineChartCriteria.sensorKey).name : null; + 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; + 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; + 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}; + 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; + 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 initPage() { this.sensorsService.getPagingList(null, null).subscribe( - (res: PageBean) => { + (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} + { 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) { + (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: null, value: null }; this._areas.label = Object.values(areaNames).filter( val => !!val ).join('/'); @@ -109,41 +136,58 @@ this.dataConditionTemp.areaRangeId = org.provinceCode; } } else { - this._areas = {label: '���������/���������/���������', value: 320583}; + this._areas = { label: '���������/���������/���������', value: 320583 }; this.dataConditionTemp.areaRange = AreaRange.AREA; this.dataConditionTemp.areaRangeId = 320583; - } - } - } + } + } + } ); + // ������������������ + this.monitorPointsChange(null); } - monitorPointChange(text) { - const pageBean: PageBean = {pageIndex: 0, pageSize: 20}; + 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) { + const pageBean: PageBean = { pageIndex: 0, pageSize: 20 }; const example = new ExampleService(); let areaName = ''; switch (this.dataConditionTemp.areaRange) { case AreaRange.PROVINCE: - areaName = 'provinceCode'; break; + areaName = 'provinceCode'; break; case AreaRange.CITY: - areaName = 'cityCode'; break; + areaName = 'cityCode'; break; case AreaRange.AREA: - areaName = 'areaCode'; break; + 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: this.dataConditionTemp.areaRangeId }); } else { example.or() - .andEqualTo({name: areaName, value: this.dataConditionTemp.areaRangeId}); + .andEqualTo({ name: areaName, value: this.dataConditionTemp.areaRangeId }); } this.monitorPointService.getPageByExample(pageBean, example).subscribe( - (res: PageBean) => { - if (!!res && !!res.data) { - this.monitorPoints = res.data; - } - } - ); - } + (res: PageBean) => { + if (!!res && !!res.data) { + this.monitorPoints = res.data; + } + } + ); + } ngOnInit() { this.initPage(); } @@ -152,102 +196,144 @@ } 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) { + { + nzHideDisabledOptions: true, + nzDisabledHours: () => { const endTime = this.lineChartCriteria.timePeriod.endTime; - if (this._isSameDay && h === endTime.getHours()) { - const minutes = this.newArray(122); - return minutes.slice(endTime.getMinutes() + 1, 60); + 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 []; - } - } else { + return this.newArray(60).slice(1); + } + + }, + nzDisabledSeconds: () => { 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) { + { + nzHideDisabledOptions: true, + nzDisabledHours: () => { const startTime = this.lineChartCriteria.timePeriod.startTime; - if (this._isSameDay && h === startTime.getHours()) { - return this.newArray(startTime.getMinutes()); + 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 []; + } + } else { - return []; + return this.newArray(60).slice(1); } - - } else { + }, + nzDisabledSeconds: () => { return this.newArray(60).slice(1); } - }, - nzDisabledSeconds: () => { - return this.newArray(60).slice(1); - } } : false; } newArray = (len) => { const result = []; for (let i = 0; i < len; i++) { - result.push(i); + result.push(i); } 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; + 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) => { + } + _disabledEndDate = (endValue: Date) => { if (!endValue || !this.lineChartCriteria.timePeriod.startTime) { - return false; + 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) => { + } + _timeChange = (value, type?: 'start'|'end') => { const startTime = this.lineChartCriteria.timePeriod.startTime; - const endTime = this.lineChartCriteria.timePeriod.endTime; - if (type === 'start') { - !!endTime ? '' : this.lineChartCriteria.timePeriod.endTime = startTime; + const endTime = this.lineChartCriteria.timePeriod.endTime; + + if (type === 'start') { + this.lineChartCriteria.timePeriod.startTime = value; + !!endTime ? '' : this.lineChartCriteria.timePeriod.endTime = value; } else { - !!startTime ? '' : this.lineChartCriteria.timePeriod.startTime === endTime; + this.lineChartCriteria.timePeriod.endTime = value; + !!startTime ? '' : this.lineChartCriteria.timePeriod.startTime === value; } - } - get startYear(): number { - !!this.lineChartCriteria.timePeriod.startTime ? - '' : this.lineChartCriteria.timePeriod.startTime = new Date(); - return this.lineChartCriteria.timePeriod.startTime.getFullYear(); - } - set startYear(value) { + + } + private getPeriodDate(value: Date , type?: 'start'|'end' ): Date { + debugger; + let month = 0 ; + let day = 0; + let hour = 0; + let minute = 0; + let second = 0; + if ('end' === type) { + month = 12; + day = 31; + hour = 23; + minute = 59; + second = 59; + } + const mo = moment(value); + switch ( this.lineChartCriteria.timePeriod.timeUnits ) { + case TimeUnits.YEAR: + mo.month(month).day(day).hour(hour).minute(minute).second(second); break; + case TimeUnits.MONTH: + mo.day(day).hour(hour).minute(minute).second(second); break; + case TimeUnits.DAY: + mo.hour(hour).minute(minute).second(second); break; + case TimeUnits.HOUR: + mo.minute(minute).second(second); break; + case TimeUnits.MINUTE: + mo.second(second); break; + } + return mo.toDate(); + } + get startYear(): number { !!this.lineChartCriteria.timePeriod.startTime ? - '' : this.lineChartCriteria.timePeriod.startTime = new Date(); + '' : 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(() => { @@ -255,86 +341,155 @@ }, 1); } this.lineChartCriteria.timePeriod.startTime.setFullYear(value); - } - get minStartYear(): number { + } + get minStartYear(): number { const now = new Date(); return now.getFullYear() - 50; - } - get maxStartYear(): number { + } + get maxStartYear(): number { return this.endYear; - } - get endYear(): number { + } + get endYear(): number { !!this.lineChartCriteria.timePeriod.endTime ? - '' : this.lineChartCriteria.timePeriod.endTime = new Date(); + '' : this.lineChartCriteria.timePeriod.endTime = new Date(); return this.lineChartCriteria.timePeriod.endTime.getFullYear(); - } - - set endYear(value) { + } + + set endYear(value) { !!this.lineChartCriteria.timePeriod.endTime ? - '' : this.lineChartCriteria.timePeriod.endTime = new Date(); - if (this.startYear === this.endYear && value > this.startYear) { + '' : 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 { + } + get minEndYear(): number { return this.startYear; - } - get maxEndYear(): number { + } + 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 }) { + } + areaLazyLoad(event: { option: CascaderOption, index: number, resolve: (children: CascaderOption[]) => void, reject: () => void }) { const index = event['index']; - const option = event.option; + 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; + 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; - 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; + } + 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; + } + } + // ������������������������������ + 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._actualTime = null; + this.actualTimes = null; } - } - setMonitorPoint(value) { - console.log(value); - this.dataConditionTemp.areaRangeId = value; - this.dataConditionTemp.areaRange = AreaRange.MONITORPOINT; + 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.http.post(environment.SERVER_BASH_URL + '/report/line-chart', this.lineChartCriteria).subscribe( + res => console.log(res) + ); + } + chartOption; + echartsIntance; + onChartInit(ec) { + this.echartsIntance = ec; } } -- Gitblit v1.8.0