| 
					
				 | 
			
			
				@@ -1,213 +0,0 @@ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-<template> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-  <div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-    <a-form :model="formState" layout="inline" :label-col="{ style: { width: '80px' } }" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-                    :wrapper-col="{ span: 8 }" autocomplete="off" @submit.prevent="handleQuery"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      <a-form-item label="查询设备"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-        <a-select v-model:value="formState.selectedDeviceId" style="width: 180px"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-          <a-select-option v-for="d in deviceList" :key="d.deviceId" :value="d.deviceId">{{ d.name }}</a-select-option> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-        </a-select> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      </a-form-item> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      <a-form-item label="分析点位"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-        <a-select v-model:value="formState.selectedValueCode" style="width: 180px"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-          <a-select-option v-for="item in valueCodeList" :key="item.valuecode" :value="item.valuecode"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-            {{ item.valuename || item.valuecode }} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-          </a-select-option> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-        </a-select> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      </a-form-item> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      <a-form-item label="开始时间"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-        <a-date-picker 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-          v-model:value="formState.startTime" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-          style="width:180px" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-          show-time 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-          valueFormat="YYYY-MM-DD HH:mm:ss" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-          placeholder="请选择开始时间" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-          :disabled-date="disabledStartDate" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-        /> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      </a-form-item> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      <a-form-item label="结束时间"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-        <a-date-picker 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-          v-model:value="formState.endTime" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-          style="width:180px" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-          show-time 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-          valueFormat="YYYY-MM-DD HH:mm:ss" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-          placeholder="请选择结束时间" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-          :disabled-date="disabledEndDate" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-        /> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      </a-form-item> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      <a-form-item> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-        <a-button type="primary" html-type="submit">查询</a-button> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      </a-form-item> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-    </a-form> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-     
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-    <div style="margin-top: 16px;" class="wang"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      <BarAndLine 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-        :key="chartKey" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-        v-if="finalDataSource.length && finalChartsColumns.length" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-        :chartsColumnsType="chartsColumnsType" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-        :xAxisPropType="xAxisPropType" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-        :dataSource="finalDataSource" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-        :height="height" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-        :chartsColumns="finalChartsColumns" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-        :chartsType="chartsType" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-        :option="option" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-        @refresh="$emit('refresh')" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      /> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-    </div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-  </div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-</template> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				- 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-<script lang="ts"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-import { defineComponent, ref, watch, onMounted, computed, reactive } from 'vue'; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-import { message } from 'ant-design-vue'; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-import dayjs from 'dayjs'; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-import BarAndLine from './BarAndLine.vue'; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-import { getDeviceHistoryData } from '@/views/vent/monitorManager/deviceMonitor/components/device/device.api'; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns'; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				- 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-export default defineComponent({ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-  name: 'DeviceHistoryChart', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-  components: { BarAndLine }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-  props: { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-    chartsColumnsType: String, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-    xAxisPropType: String, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-    dataSource: { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      type: Array, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      default: () => [], 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-    }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-    height: { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      type: String, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      default: '400px', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-    }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-    chartsColumns: { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      type: Array, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      default: () => [], 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-    }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-    chartsType: { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      type: String, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      default: 'history', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-    }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-    option: { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      type: Object, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      default: () => ({ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-        grid: { top: '20%', left: '10px', right: '5px', bottom: '10%', containLabel: true }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-        toolbox: { feature: {} }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      }), 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-    }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-  }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-  emits: ['refresh'], 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-  setup(props, { emit }) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-    // 查询表单相关 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-    const deviceList = ref([ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      { deviceId: '1657545388451663016', name: '辅运平硐111' }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-    ]); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-    const valueCodeList = ref(props.chartsColumns); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-    // 用reactive统一管理表单状态 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-    const formState = reactive({ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      selectedDeviceId: deviceList.value[0]?.deviceId || '', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      selectedValueCode: valueCodeList.value[0]?.valuecode || '', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      startTime: dayjs().startOf('day').format('YYYY-MM-DD HH:mm:ss'), 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      endTime: dayjs().format('YYYY-MM-DD HH:mm:ss'), 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-    }); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-    const chartData = ref<any[]>([]); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-    const chartColumns = ref<any[]>([]); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-    const isQueried = ref(false); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-    // 图表key,用于查询后强制刷新图表 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-    const chartKey = ref(0); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				- 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-    function disabledStartDate(current: any) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      if (!formState.endTime) return false; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      return current && current.valueOf() > dayjs(formState.endTime).valueOf(); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-    } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-    function disabledEndDate(current: any) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      if (!formState.startTime) return false; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      return current && current.valueOf() < dayjs(formState.startTime).valueOf(); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-    } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				- 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-    watch(() => formState.selectedDeviceId, (newVal) => { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      if (!newVal) return; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      chartColumns.value = getTableHeaderColumns(formState.selectedDeviceId + '_chart'); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-    }); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				- 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-    onMounted(() => { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      chartColumns.value = getTableHeaderColumns(formState.selectedDeviceId + '_chart'); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-    }); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				- 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-    async function handleQuery() { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      if (!formState.selectedDeviceId || !formState.selectedValueCode) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-        message.warning('请选择设备和分析点位'); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-        return; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      try { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-        const res = await getDeviceHistoryData({ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-          deviceId: formState.selectedDeviceId, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-          valueCode: formState.selectedValueCode, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-          startTime: formState.startTime, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-          endTime: formState.endTime, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-        }); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-        if (res && Array.isArray(res.list)) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-          chartData.value = res.list.map(item => ({ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-            ...item, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-            [formState.selectedValueCode]: Number(item.val), 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-          })); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-          chartColumns.value = getTableHeaderColumns(formState.selectedDeviceId + '_chart'); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-          isQueried.value = true; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-          // 查询成功后更新key,强制刷新图表 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-          chartKey.value += 1; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-        } else { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-          chartData.value = []; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-          chartColumns.value = []; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-          isQueried.value = true; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-          message.info('未查询到数据'); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-        } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      } catch (e) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-        chartData.value = []; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-        chartColumns.value = []; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-        isQueried.value = true; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-        message.error('查询失败'); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-    } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				- 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-    // 只要查询过就用查询数据,否则用外部props 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-    const finalDataSource = computed(() => { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      return isQueried.value ? chartData.value : props.dataSource; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-    }); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-     
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-    const finalChartsColumns = computed(() => { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      return isQueried.value ? chartColumns.value : props.chartsColumns; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-    }); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				- 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-    return { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      deviceList, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      valueCodeList, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      formState, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      chartData, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      chartColumns, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      handleQuery, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      finalDataSource, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      finalChartsColumns, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      chartsColumnsType: props.chartsColumnsType, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      xAxisPropType: props.xAxisPropType, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      height: props.height, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      chartsType: props.chartsType, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      option: props.option, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      disabledStartDate, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      disabledEndDate, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      chartKey, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-    }; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-  }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-}); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-</script> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-<style lang="less" scoped> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-@import '/@/design/theme.less'; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				- 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-.zxm-form-item { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-  margin-right: 26px ; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-  ::v-deep .zxm-form-item-label { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-    color: #fff; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-    > label { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      color: #fff; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-    } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-  } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				- 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-</style> 
			 |