新增设备历史数据查询组件（未完成，需要修改业务逻辑代码）

src/components/chart/DeviceHistoryChart.vue

@@ -0,0 +1,213 @@
+<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>

src/views/vent/monitorManager/deviceMonitor/components/device/device.api.ts

@@ -17,6 +17,7 @@ enum Api {
   queryNowGasSta = '/safety/gasDayReport/queryNowGasSta',
   queryReportData = '/safety/reportLocalData/queryReportData', //查询瓦斯日报列表
   getDeviceListBySubId = '/safety/ventanalyDeviceInfo/getDeviceListBySubId', //查询分站
+  getDeviceHistoryData = '/safety/ventanalyMonitorData/getRealHistoryData', //查询设备历史数据
 }
 //分站全部列表
 export const getListAll = () => defHttp.post({ url: Api.getDeviceListBySubId });
@@ -55,3 +56,10 @@ export const queryNowGasSta = (params) => defHttp.post({ url: Api.queryNowGasSta
  * @param params
  */
 export const queryReportData = (params) => defHttp.post({ url: Api.queryReportData, params });
+
+/**
+ * 设备历史数据接口
+ * @param params
+ */
+export const getDeviceHistoryData = (params) => defHttp.post({ url: "safety/ventanalyMonitorData/getRealHistoryData?startTime=2025-07-02 00:00:00&endTime=2025-07-03 23:00:00&deviceId=1657545388451663016&valueCode=dustval" });
+// export const getDeviceHistoryData = (params) => defHttp.post({ url: Api.getDeviceHistoryData, data: params });

src/views/vent/monitorManager/sensorMonitor/index.vue

@@ -70,7 +70,18 @@
               :scroll="{ y: chartsColumns.length > 0 ? 300 : 600 }"
             />
             <div class="charts-box" v-if="chartsColumns.length > 0">
-              <BarAndLine
+              <!-- <BarAndLine
+                :chartsColumnsType="selectData.deviceType"
+                xAxisPropType="ttime"
+                :dataSource="historyDataSource"
+                height="300px"
+                :chartsColumns="chartsColumns"
+                chartsType="history"
+                :option="echartsOption1"
+                @refresh="refreshEchatrs"
+              /> -->
+              <!-- 设备历史数据组件测试代码 -->
+              <DeviceHistoryChart
                 :chartsColumnsType="selectData.deviceType"
                 xAxisPropType="ttime"
                 :dataSource="historyDataSource"
@@ -146,6 +157,7 @@
 
 <script setup lang="ts">
   import BarAndLine from '/@/components/chart/BarAndLine.vue';
+  import DeviceHistoryChart from '/@/components/chart/DeviceHistoryChart.vue';
   import { Select } from 'ant-design-vue';
   import { onBeforeMount, computed, ref, onMounted, onUnmounted, toRaw, reactive, nextTick, unref } from 'vue';
   import MonitorTable from '../comment/MonitorTable.vue';