| | |
|---|
| | | styleUrls: ['./query.component.less'] |
|---|
| | | }) |
|---|
| | | export class QueryComponent implements OnInit { |
|---|
| | | |
|---|
| | | |
|---|
| | | // aqi六项排序 |
|---|
| | | private aqiSort = { |
|---|
| | | e1: 1, |
|---|
| | |
|---|
| | | // }; |
|---|
| | | public expandForm: boolean; // 搜索区 展开控制 |
|---|
| | | // public sensors: any[] = []; |
|---|
| | | public sensorOptions: any[] = []; |
|---|
| | | public sensorOptions: any[] = []; |
|---|
| | | /** |
|---|
| | | * 数据类型，下拉列表数据 |
|---|
| | | * 注意，年度类型，对应查询数据单位为月，以此类推 |
|---|
| | |
|---|
| | | 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; |
|---|
| | | private _sensorNames: string; |
|---|
| | | get sensorNames(): string { |
|---|
| | | return this._sensorNames; |
|---|
| | | } |
|---|
| | |
|---|
| | | this.reloadChart(); |
|---|
| | | this.switchSensor(this.chartSelectedIndex); |
|---|
| | | // this.chartLoading = false; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | this.isChartCollapse = !this.isChartCollapse; |
|---|
| | | } |
|---|
| | | public deviceOptions: Device[] = []; |
|---|
| | | public dataCondition: DataCondition = {areaRangeId: 320583, areaRange: AreaRange.AREA, deviceDimension: DeviceDimension.NONE}; |
|---|
| | | |
|---|
| | | public dimensionOptions: MonitorPoint[] = []; |
|---|
| | | |
|---|
| | | |
|---|
| | | get actualYear(): number { |
|---|
| | | return this.actualTime.getFullYear(); |
|---|
| | | } |
|---|
| | | set actualYear(year) { |
|---|
| | | set actualYear(year) { |
|---|
| | | this.actualTime.setFullYear(Number(year)); |
|---|
| | | } |
|---|
| | | dimensionsChange(text?: string) { |
|---|
| | | switch (this.dimensionItem.value) { |
|---|
| | | case DeviceDimension.MONITORPOINT: |
|---|
| | | this.monitorPointsChange(text); break; |
|---|
| | | case DeviceDimension.PROFESSION: |
|---|
| | | this.professionsChange(text); break; |
|---|
| | | } |
|---|
| | | // switch (this.dimensionItem.value) { |
|---|
| | | // case DeviceDimension.MONITORPOINT: |
|---|
| | | // this.monitorPointsChange(text); break; |
|---|
| | | // case DeviceDimension.PROFESSION: |
|---|
| | | // this.professionsChange(text); break; |
|---|
| | | // } |
|---|
| | | |
|---|
| | | this.monitorPointsChange(text); |
|---|
| | | } |
|---|
| | | professionsChange(text?: string) { |
|---|
| | | this.http.get<ResultBean<any[]>>('profession/getall').subscribe( |
|---|
| | |
|---|
| | | devicesChange(text?: string) { |
|---|
| | | if (!!this.deviceDimension) { |
|---|
| | | const example = new ExampleService(); |
|---|
| | | const deviceDimensionProperty = |
|---|
| | | const deviceDimensionProperty = |
|---|
| | | this.dimensionItem.value === DeviceDimension.MONITORPOINT ? 'monitorPointId' : 'professionId'; |
|---|
| | | if (!!text) { |
|---|
| | | example.or().andEqualTo({ name: deviceDimensionProperty, value: this.deviceDimension.id }) |
|---|
| | |
|---|
| | | public onChartInit(e): void { |
|---|
| | | this.echartsIntance = e; |
|---|
| | | } |
|---|
| | | constructor( |
|---|
| | | constructor( |
|---|
| | | private http: _HttpClient, |
|---|
| | | private sensorsService: SensorsService, |
|---|
| | | private deviceService: DeviceService, |
|---|
| | |
|---|
| | | private monitorPointService: MonitorPointService, |
|---|
| | | private msg: NzMessageService, |
|---|
| | | private dateService: DateService, |
|---|
| | | ) { } |
|---|
| | | ngOnInit() { |
|---|
| | | ) { } |
|---|
| | | ngOnInit() { |
|---|
| | | this.initPage(); |
|---|
| | | // 监测项目 tree click 事件 |
|---|
| | | this.treeClickStream.debounceTime(1).subscribe( event => { |
|---|
| | | const data = event.node.data; |
|---|
| | | // console.log(data); |
|---|
| | | const data = event.node.data; |
|---|
| | | // console.log(data); |
|---|
| | | if (data.id === -1) { |
|---|
| | | const children = data.children; |
|---|
| | | // 全选状态 |
|---|
| | |
|---|
| | | delete this._sensors [data.id]; |
|---|
| | | } |
|---|
| | | const length = Object.keys(this._sensors).length; |
|---|
| | | parentData['halfChecked'] = length > 0 |
|---|
| | | parentData['halfChecked'] = length > 0 |
|---|
| | | && this.sensorOptions[0].children.length > length; |
|---|
| | | parentData['checked'] = !parentData['halfChecked'] && length !== 0; |
|---|
| | | } |
|---|
| | |
|---|
| | | if (res.code === ResultCode.SUCCESS) { |
|---|
| | | const org = res.data; |
|---|
| | | const areas = new Array(3); |
|---|
| | | if (!!org.areaNames) { |
|---|
| | | if (!!org.areaNames) { |
|---|
| | | const areaNames = org.areaNames; |
|---|
| | | Object.keys(areaNames).forEach( |
|---|
| | | key => { |
|---|
| | |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | ); |
|---|
| | | ); |
|---|
| | | } else { |
|---|
| | | for (let i = 0; i < areas.length; i++) { |
|---|
| | | switch (i) { |
|---|
| | |
|---|
| | | let isChanged = false; |
|---|
| | | isChanged = areas.some( (item , index: number) => { |
|---|
| | | // this._areas[index] 为null 改变 监控站点选项 |
|---|
| | | return this._areas.length < areas.length |
|---|
| | | || !this._areas[index] |
|---|
| | | return this._areas.length < areas.length |
|---|
| | | || !this._areas[index] |
|---|
| | | || this._areas[index].value !== item.value; |
|---|
| | | }); |
|---|
| | | if ( isChanged ) { |
|---|
| | |
|---|
| | | get deviceDimension(): {id: number, name: string} { |
|---|
| | | return this._deviceDimension; |
|---|
| | | } |
|---|
| | | set deviceDimension(value) { |
|---|
| | | set deviceDimension(value) { |
|---|
| | | if (!!value) { |
|---|
| | | // 值变 改变设备选项 |
|---|
| | | if (this._deviceDimension !== value) { |
|---|
| | |
|---|
| | | this.device = null; |
|---|
| | | this.deviceOptions = null; |
|---|
| | | } |
|---|
| | | |
|---|
| | | |
|---|
| | | } |
|---|
| | | // 第三步 设置 监控站点 |
|---|
| | | public _device: Device; |
|---|
| | |
|---|
| | | get device(): Device { |
|---|
| | | return this._device; |
|---|
| | | } |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * 获取 传感器名称 |
|---|
| | | * |
|---|
| | | * |
|---|
| | | * @readonly |
|---|
| | | * @type {string} |
|---|
| | | * @memberof QueryComponent |
|---|
| | | */ |
|---|
| | | */ |
|---|
| | | private treeClickStream: Subject<any> = new Subject<any>(); |
|---|
| | | public onTreeClickSelect(event): void { |
|---|
| | | this.treeClickStream.next(event); |
|---|
| | |
|---|
| | | this._sensorNames = sensorNameList.join(', '); |
|---|
| | | }, 1); |
|---|
| | | } |
|---|
| | | public setTimeUnit(val: {label: string, value: TimeUnits} ) { |
|---|
| | | 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.mode = 'month'; |
|---|
| | | // this._timeType.endShowTime = null; |
|---|
| | | break; |
|---|
| | | case TimeUnits.DAY: |
|---|
| | |
|---|
| | | } |
|---|
| | | return result; |
|---|
| | | } |
|---|
| | | public loadGrid(): void { |
|---|
| | | public loadGrid(): void { |
|---|
| | | // 数据检查 |
|---|
| | | const sensors = Object.values(this._sensors); |
|---|
| | | if ( sensors.length === 0 ) { |
|---|
| | |
|---|
| | | this.dataCondition.areaRangeId = item; |
|---|
| | | switch (index) { |
|---|
| | | case 0: this.dataCondition.areaRange = AreaRange.DEVICE; break; |
|---|
| | | case 1: |
|---|
| | | case 1: |
|---|
| | | // 维度为监控点 |
|---|
| | | if (this.dimensionItem.value === DeviceDimension.MONITORPOINT) { |
|---|
| | | this.dataCondition.areaRange = AreaRange.MONITORPOINT; |
|---|
| | | this.dataCondition.areaRange = AreaRange.MONITORPOINT; |
|---|
| | | // 维度为行业 |
|---|
| | | } else { |
|---|
| | | // 重新标定区域范围 |
|---|
| | | this.switchAreas(); |
|---|
| | | // 重新设置区域值 |
|---|
| | | this.dataCondition.areaRangeId = areasData.slice(-1).pop(); |
|---|
| | | this.dataCondition.areaRangeId = areasData.slice(-1).pop(); |
|---|
| | | } break; |
|---|
| | | case 2: |
|---|
| | | case 2: |
|---|
| | | this.switchAreas(); |
|---|
| | | break; |
|---|
| | | } |
|---|
| | |
|---|
| | | return {text: item}; |
|---|
| | | } |
|---|
| | | ); break; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | // 设置表格宽度，要在此处 |
|---|
| | | this.tableWidth = this.grid.columns.length * 80 + 160; |
|---|
| | | this.tableWidth = this.grid.columns.length * 80 + 160; |
|---|
| | | this.reloadChart(); |
|---|
| | | // 重设报表标题 |
|---|
| | | this.reloadChartTitle(); |
|---|
| | |
|---|
| | | } |
|---|
| | | } |
|---|
| | | private reloadChart(): void { |
|---|
| | | const timeList = this.grid.columns.map(item => item.text); |
|---|
| | | const timeList = this.grid.columns.map(item => item.text); |
|---|
| | | if (!!this.echartsIntance) { |
|---|
| | | this.chartOption = null; |
|---|
| | | this.echartsIntance.clear(); |
|---|
| | |
|---|
| | | // if ( this.chartSelectedIndex < this.grid.data.length ) { |
|---|
| | | // series = [{type: 'line', data: this.grid.data[this.chartSelectedIndex]}]; |
|---|
| | | // } |
|---|
| | | |
|---|
| | | |
|---|
| | | this.initOpton({ xAxis : [{data : timeList}]}); |
|---|
| | | this.chartLoading = true; |
|---|
| | | } |
|---|
| | |
|---|
| | | switch ( this.dataCondition.areaRange ) { |
|---|
| | | case AreaRange.MONITORPOINT : |
|---|
| | | names[0] = '监控站点'; |
|---|
| | | names[1] = this._deviceDimension.name; break; |
|---|
| | | names[1] = this._deviceDimension.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('/'); |
|---|
| | | names[1] = this._areas.map( item => item.label).join('/'); |
|---|
| | | break; |
|---|
| | | } |
|---|
| | | // 维度命名 |
|---|
| | |
|---|
| | | names[3] = moment(this.actualTime).format(this._timeType.dateFormat); |
|---|
| | | if ( this.grid.data.length > this.chartSelectedIndex) { |
|---|
| | | names[4] = 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(); |
|---|
| | | this.chartLoading = true; |
|---|
| | | this.reloadChartTitle(); |
|---|
| | | setTimeout(() => { |
|---|
| | | const series = [{type: 'line', data: this.grid.data[index].data}]; |
|---|
| | | this.echartsIntance.setOption({ |
|---|
| | |
|---|
| | | ], |
|---|
| | | series: series |
|---|
| | | }); |
|---|
| | | this.chartLoading = false; |
|---|
| | | }, 600); |
|---|
| | | 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 second = 0; |
|---|
| | | let millisecond = 0; |
|---|
| | | if ('end' === type) { |
|---|
| | | month = 11; |
|---|
| | |
|---|
| | | public sensorTableFocus(index) { |
|---|
| | | this.sensorTableFocusIndex = index; |
|---|
| | | } |
|---|
| | | |
|---|
| | | |
|---|
| | | public sensorTableBlur(index) { |
|---|
| | | this.sensorTableFocusIndex = -1; |
|---|
| | | } |
|---|
