| | |
| | | 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; |
| | | // } |
| | | |
| | | this.monitorPointsChange(text); |
| | | switch (this.dimensionItem.value) { |
| | | case DeviceDimension.MONITORPOINT: |
| | | this.monitorPointsChange(text); break; |
| | | case DeviceDimension.PROFESSION: |
| | | this.professionsChange(text); break; |
| | | } |
| | | } |
| | | 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( |
| | | /** |
| | | * 放在 sensor 选项加载完后调用 |
| | | * @param sensorKeys |
| | | */ |
| | | private mockSelectSensors(sensorKeys: string[]) { |
| | | // 模拟选择 aqi 6个参数 |
| | | // Object.keys(this.aqiSort) |
| | | sensorKeys.forEach( key => { |
| | | const sensor = this.sensorOptions[0].children.find( |
| | | sen => sen.sensorKey === key |
| | | ) |
| | | if (!!sensor) { |
| | | sensor['halfChecked'] = false; |
| | | sensor['checked'] = true; |
| | | const event = {node: {data: sensor}}; |
| | | this.onSensorSelect(event); |
| | | } |
| | | }); |
| | | } |
| | | 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; |
| | | } |
| | |
| | | this.sensorsService.getPagingList(null, null).subscribe( |
| | | (res: PageBean) => { |
| | | this.sensorOptions.push({id: -1, name: '全部', isExpanded: true, children: res.data}); |
| | | this.mockSelectSensors(Object.keys(this.aqiSort)); |
| | | } |
| | | ); |
| | | this.actualYearOptions = this.newArray(this.actualYear - 9, 10).map(item => Number(item)).reverse(); |
| | |
| | | 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); |
| | | } |
| | | public onSensorSelect(event): void { |
| | | debugger; |
| | | const data = event.node.data; |
| | | if (data.id === -1 && data.halfChecked === false) { |
| | | if (!!data.checked) { |
| | |
| | | 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); |
| | | debugger; |
| | | if ( sensors.length === 0 ) { |
| | | this.msg.error(' 监测项目 不能为空'); |
| | | return ; |
| | |
| | | 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; |
| | | } |