[Feat 0000]历史数据页面开发 导航栏组件优化

src/views/vent/home/configurable/belt/belt-new.vue

@@ -1,13 +1,7 @@
 <!-- belt-new.vue -->
 <template>
   <div class="company-home">
-    <customHeader
-      :fieldNames="{ label: 'systemname', value: 'sys_id' }"
-      :options="options"
-      :optionValue="optionValue"
-      @change="changeSelectRow"
-      @open-history="goToHistory"
-    >
+    <customHeader :fieldNames="{ label: 'systemname', value: 'sys_id' }" :options="options" :optionValue="optionValue" @change="changeSelectRow">
       矿井全域皮带巷三级防灭火系统
     </customHeader>
     <div class="modal-box" id="modalBox" v-if="pageType !== 'history' && isInitModal">
@@ -19,360 +13,391 @@
     </div>
 
     <div class="border">
-      <template v-if="pageType === 'history'">
-        <History />
-      </template>
-      <template v-else>
-        <ModuleCommon
-          v-for="cfg in cfgs"
-          :key="cfg.deviceType + cfg.moduleName"
-          :show-style="cfg.showStyle"
-          :module-data="cfg.moduleData"
-          :module-name="cfg.moduleName"
-          :device-type="cfg.deviceType"
-          :page-type="cfg.pageType"
-          :data="data"
-          :visible="true"
-          style="z-index: 20"
-        />
-        <ModuleCommonDual
-          v-if="cfgA && cfgB"
-          :show-style="cfgA.showStyle"
-          :module-data-a="cfgA.moduleData"
-          :module-name-a="cfgA.moduleName"
-          :device-type-a="cfgA.deviceType"
-          :module-data-b="cfgB.moduleData"
-          :module-name-b="cfgB.moduleName"
-          :device-type-b="cfgB.deviceType"
-          :data="data"
-          :visible="true"
-        />
-      </template>
+      <ModuleCommon
+        v-for="cfg in cfgs"
+        :key="cfg.deviceType + cfg.moduleName"
+        :show-style="cfg.showStyle"
+        :module-data="cfg.moduleData"
+        :module-name="cfg.moduleName"
+        :device-type="cfg.deviceType"
+        :page-type="cfg.pageType"
+        :data="data"
+        :visible="true"
+        style="z-index: 20"
+      />
+      <ModuleCommonDual
+        v-if="cfgA && cfgB"
+        :show-style="cfgA.showStyle"
+        :module-data-a="cfgA.moduleData"
+        :module-name-a="cfgA.moduleName"
+        :device-type-a="cfgA.deviceType"
+        :module-data-b="cfgB.moduleData"
+        :module-name-b="cfgB.moduleName"
+        :device-type-b="cfgB.deviceType"
+        :data="data"
+        :visible="true"
+      />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-  import { onMounted, ref, watch, nextTick, computed, onUnmounted } from 'vue';
-  import customHeader from './components/customHeader-belt.vue';
-  import { useInitConfigs, useInitPage } from '../hooks/useInit';
-  import { testBeltNew, testYjkf, testSpary } from './configurable.data';
-  import ModuleCommon from './components/ModuleCommon.vue';
-  import ModuleCommonDual from './components/ModuleCommonDual.vue';
-  import Three3D from '/@/views/vent/home/configurable/components/three3D.vue';
-  import BeltNav from './components/BeltNav.vue';
-  import { useRouter, useRoute } from 'vue-router';
-  import { getSystem, getMonitorAndAlertBelt, getWarnInfo, getDevice, getDataHome, getWarnResult, getStaffInfo } from './configurable.api';
-  import { modalAnimate, destroy } from './threejs/belt.threejs';
-  import History from './components/detail/history.vue';
-  import sys from '/@/locales/lang/en/sys';
-  // 初始化配置
-  const { configs, fetchConfigs } = useInitConfigs();
-  const cfgs = computed(() => configs.value.filter((_, index) => index !== 2 && index !== 3));
-  const cfgA = computed<any>(() => configs.value[2]);
-  const cfgB = computed<any>(() => configs.value[3]);
-  const { updateEnhancedConfigs, updateData, data } = useInitPage('矿井全域皮带巷三级防灭火系统');
-  const isInitModal = ref(false);
-  const pageCache = ref({
-    fire_risk_warn: { configs: testBeltNew },
-    emergencyControl: { configs: testYjkf },
-    sprayControl: { configs: testSpary },
-  });
-  let timer = null,
-    modal = null;
-  const pageType = ref('fire_risk_warn');
-  const route = useRoute();
-  const modalMonitorData = ref({});
-  // 下拉框选项
-  /** 场景选项 */
-  const options = ref([]);
-  const optionValue = ref('');
-  async function getSysDataSource() {
-    const res = await getDataHome({ dataList: 'risk_evaluator' }).catch(() => {});
-    options.value = res.risk_evaluator || [];
-    await nextTick();
-    if (options.value.length > 0 && !optionValue.value) {
-      const firstId = options.value[0].sys_id;
-      changeSelectRow(firstId);
-    }
-  }
-  // 切换检测数据
-  function changeSelectRow(deviceID) {
-    optionValue.value = deviceID;
-    refresh();
+import { onMounted, ref, watch, nextTick, computed, onUnmounted } from 'vue';
+import customHeader from './components/customHeader-belt.vue';
+import { useInitConfigs, useInitPage } from '../hooks/useInit';
+import { testBeltNew, testYjkf, testSpary } from './configurable.data';
+import ModuleCommon from './components/ModuleCommon.vue';
+import ModuleCommonDual from './components/ModuleCommonDual.vue';
+import Three3D from '/@/views/vent/home/configurable/components/three3D.vue';
+import BeltNav from './components/BeltNav.vue';
+import { useRouter, useRoute } from 'vue-router';
+import { getSystem, getMonitorAndAlertBelt, getWarnInfo, getDevice, getDataHome, getWarnResult, getStaffInfo } from './configurable.api';
+import { modalAnimate, destroy } from './threejs/belt.threejs';
+import History from './history.vue';
+import sys from '/@/locales/lang/en/sys';
+// 初始化配置
+const { configs, fetchConfigs } = useInitConfigs();
+const cfgs = computed(() => configs.value.filter((_, index) => index !== 2 && index !== 3));
+const cfgA = computed<any>(() => configs.value[2]);
+const cfgB = computed<any>(() => configs.value[3]);
+const { updateEnhancedConfigs, updateData, data } = useInitPage('矿井全域皮带巷三级防灭火系统');
+const isInitModal = ref(false);
+const pageCache = ref({
+  fire_risk_warn: { configs: testBeltNew },
+  emergencyControl: { configs: testYjkf },
+  sprayControl: { configs: testSpary },
+});
+let timer = null,
+  modal = null;
+const pageType = ref('fire_risk_warn');
+const route = useRoute();
+const modalMonitorData = ref({});
+// 下拉框选项
+/** 场景选项 */
+const options = ref([]);
+const optionValue = ref('');
+async function getSysDataSource() {
+  const res = await getDataHome({ dataList: 'risk_evaluator' }).catch(() => {});
+  options.value = res.risk_evaluator || [];
+  await nextTick();
+  if (options.value.length > 0 && !optionValue.value) {
+    const firstId = options.value[0].sys_id;
+    changeSelectRow(firstId);
   }
-  function goToHistory() {
-    if (pageType.value === 'history') {
-      // 当前是历史页 → 切回默认页
-      pageType.value = 'fire_risk_warn';
-    } else {
-      // 当前不是 → 打开历史页
-      pageType.value = 'history';
-      destroy(modal);
+}
+// 切换检测数据
+function changeSelectRow(deviceID) {
+  optionValue.value = deviceID;
+  refresh();
+}
+// 预警等级映射
+const warnTypeMap = {
+  '102': '黄色预警(较大风险)',
+  '103': '橙色预警(重大风险)',
+  '104': '红色预警(特别重大风险)',
+};
+// 处理接口返回数据
+interface WarnResult {
+  warnName: string;
+  coRange?: string;
+  coTrend?: string;
+  tempRange?: string;
+  tempTrend?: string;
+  hclRange?: string;
+  warnCtrl?: string;
+}
+// 处理预警指标展示数据格式
+function groupWarnByType(data: any) {
+  const result: WarnResult[] = [];
+  // 遍历 102、103、104...
+  Object.keys(data).forEach((warnKey) => {
+    const list = data[warnKey] || [];
+    const warnName = warnTypeMap[warnKey as keyof typeof warnTypeMap];
+    function getWarnCtrlByWarnName(warnName) {
+      if (warnName === '黄色预警(较大风险)') return '预警';
+      if (warnName === '橙色预警(重大风险)') return '报警启动喷淋';
+      if (warnName === '红色预警(特别重大风险)') return '启动喷淋与排烟';
+      return '';
     }
-  }
-  // 预警等级映射
-  const warnTypeMap = {
-    '102': '黄色预警(较大风险)',
-    '103': '橙色预警(重大风险)',
-    '104': '红色预警(特别重大风险)',
-  };
-  // 处理接口返回数据
-  interface WarnResult {
-    warnName: string;
-    coRange?: string;
-    coTrend?: string;
-    tempRange?: string;
-    tempTrend?: string;
-    hclRange?: string;
-    warnCtrl?: string;
-  }
-  // 处理预警指标展示数据格式
-  function groupWarnByType(data: any) {
-    const result: WarnResult[] = [];
-    // 遍历 102、103、104...
-    Object.keys(data).forEach((warnKey) => {
-      const list = data[warnKey] || [];
-      const warnName = warnTypeMap[warnKey as keyof typeof warnTypeMap];
-      function getWarnCtrlByWarnName(warnName) {
-        if (warnName === '黄色预警(较大风险)') return '预警';
-        if (warnName === '橙色预警(重大风险)') return '报警启动喷淋';
-        if (warnName === '红色预警(特别重大风险)') return '启动喷淋与排烟';
-        return '';
-      }
-      // 构建当前预警对象
-      const warnObj: WarnResult = { warnName };
-      warnObj.warnCtrl = getWarnCtrlByWarnName(warnName);
-      list.forEach((item: any) => {
-        const { deviceType, fmin, fmax, trendMin, trendMax, trendCxTimeUnit } = item;
-        // CO
-        if (deviceType === 'modelsensor_co') {
-          if (fmin != null && fmax != null) {
-            warnObj.coRange = `${fmin} - ${fmax}`;
-          } else if (fmin != null && fmax == null) {
-            warnObj.coRange = `> ${fmin}`;
-          }
-          // 处理变化率
-          else if (trendMin != null && trendMax != null) {
-            if (warnName === '黄色预警(较大风险)') {
-              warnObj.coTrend = `加速上升(${trendMin} - ${trendMax})`;
-            } else if (warnName === '橙色预警(重大风险)') {
-              warnObj.coTrend = `急剧上升(${trendMin} - ${trendMax})`;
-            } else if (warnName === '红色预警(特别重大风险)') {
-              warnObj.coTrend = `极端上升(${trendMin} - ${trendMax})`;
-            }
-          } else if (trendMin != null && trendMax == null) {
-            warnObj.coTrend = `极端上升>${trendMin}`;
-          }
+    // 构建当前预警对象
+    const warnObj: WarnResult = { warnName };
+    warnObj.warnCtrl = getWarnCtrlByWarnName(warnName);
+    list.forEach((item: any) => {
+      const { deviceType, fmin, fmax, trendMin, trendMax, trendCxTimeUnit } = item;
+      // CO
+      if (deviceType === 'modelsensor_co') {
+        if (fmin != null && fmax != null) {
+          warnObj.coRange = `${fmin} - ${fmax}`;
+        } else if (fmin != null && fmax == null) {
+          warnObj.coRange = `> ${fmin}`;
         }
-        // 温度（带单位）
-        else if (deviceType === 'modelsensor_temperature') {
-          if (fmin != null && fmax != null) {
-            warnObj.tempRange = `${fmin} - ${fmax}℃`;
-          } else if (fmin != null && fmax == null) {
-            warnObj.tempRange = `≥ ${fmin}℃(持续高温)`;
-          } else if (trendMin != null) {
-            let unit = '';
-            if (trendCxTimeUnit === 0) unit = '分钟';
-            if (trendCxTimeUnit === 1) unit = '小时';
-            warnObj.tempTrend = `>+${trendMin}℃ /${unit}`;
+        // 处理变化率
+        else if (trendMin != null && trendMax != null) {
+          if (warnName === '黄色预警(较大风险)') {
+            warnObj.coTrend = `加速上升(${trendMin} - ${trendMax})`;
+          } else if (warnName === '橙色预警(重大风险)') {
+            warnObj.coTrend = `急剧上升(${trendMin} - ${trendMax})`;
+          } else if (warnName === '红色预警(特别重大风险)') {
+            warnObj.coTrend = `极端上升(${trendMin} - ${trendMax})`;
           }
+        } else if (trendMin != null && trendMax == null) {
+          warnObj.coTrend = `极端上升>${trendMin}`;
         }
-        // HCL
-        else if (deviceType === 'modelsensor_hcl') {
-          if (fmin != null && fmax != null) {
-            warnObj.hclRange = `${fmin} - ${fmax}`;
-          } else if (fmin != null && fmax == null) {
-            warnObj.hclRange = `≥ ${fmin}`;
-          }
+      }
+      // 温度（带单位）
+      else if (deviceType === 'modelsensor_temperature') {
+        if (fmin != null && fmax != null) {
+          warnObj.tempRange = `${fmin} - ${fmax}℃`;
+        } else if (fmin != null && fmax == null) {
+          warnObj.tempRange = `≥ ${fmin}℃(持续高温)`;
+        } else if (trendMin != null) {
+          let unit = '';
+          if (trendCxTimeUnit === 0) unit = '分钟';
+          if (trendCxTimeUnit === 1) unit = '小时';
+          warnObj.tempTrend = `>+${trendMin}℃ /${unit}`;
         }
-      });
-      result.push(warnObj);
+      }
+      // HCL
+      else if (deviceType === 'modelsensor_hcl') {
+        if (fmin != null && fmax != null) {
+          warnObj.hclRange = `${fmin} - ${fmax}`;
+        } else if (fmin != null && fmax == null) {
+          warnObj.hclRange = `≥ ${fmin}`;
+        }
+      }
     });
+    result.push(warnObj);
+  });
 
-    return result;
-  }
-  // 刷新数据
-  async function refresh() {
-    // 由于模型中需要用到风门的监测数据，这里进行公共调用（后期精确调用风门）
-    const modalRes = {};
-    const systemParams = {
-      devicetype: 'sys',
-      systemID: optionValue.value,
-    };
-    const resSys = await getSystem(systemParams);
+  return result;
+}
+// 刷新数据
+async function refresh() {
+  // 由于模型中需要用到风门的监测数据，这里进行公共调用（后期精确调用风门）
+  const modalRes = {};
+  const systemParams = {
+    devicetype: 'sys',
+    systemID: optionValue.value,
+  };
+  const resSys = await getSystem(systemParams);
+  const params = {
+    sysId: optionValue.value,
+    monitorType: 2,
+  };
+  const warnInfo = await getWarnInfo(params);
+  const staffInfo = await getStaffInfo({ sysId: optionValue.value });
+  Object.assign(modalRes, resSys);
+  if (pageType.value == 'fire_risk_warn') {
+    configs.value = [...testBeltNew];
     const params = {
       sysId: optionValue.value,
-      monitorType: 2,
+      dataList: 'fire_risk_warn,warn_result,vehicle_co_correlate',
+      alarmLevel: '102,103,104',
     };
-    const warnInfo = await getWarnInfo(params);
-    const staffInfo = await getStaffInfo({ sysId: optionValue.value });
-    Object.assign(modalRes, resSys);
-    if (pageType.value == 'fire_risk_warn') {
-      configs.value = [...testBeltNew];
-      const params = {
-        sysId: optionValue.value,
-        dataList: 'fire_risk_warn,warn_result,vehicle_co_correlate',
-        alarmLevel: '102,103,104',
-      };
-      const resWarn = await getMonitorAndAlertBelt(params);
-      resWarn.warnInfo = groupWarnByType(warnInfo);
-      console.log(resWarn.warnInfo, '111111111');
-      resWarn.staffInfo = staffInfo;
-      updateData(resWarn);
-      Object.assign(modalRes, resWarn);
-    } else if (pageType.value == 'emergencyControl') {
-      updateData(resSys);
-      configs.value = [...testYjkf];
-      const alarmParams = {
-        sysId: optionValue.value,
-        alarmLevel: '104',
-      };
-      const alarmRes = await getWarnResult(alarmParams);
-      if (alarmRes.warn_result) {
-        data.value.warn_result = alarmRes.warn_result;
-      }
-      data.value.warnInfo = groupWarnByType(warnInfo);
-      data.value.staffInfo = staffInfo;
-      updateData(data.value);
-    } else if (pageType.value == 'sprayControl') {
-      updateData(resSys);
-      const params1 = {
-        sysId: optionValue.value,
-        alarmLevel: '103,104',
-      };
-      const sprayData = [];
-      const dustData = [];
-      if (data.value?.deviceInfo) {
-        // 遍历对象的所有 value
-        Object.values(data.value.deviceInfo).forEach((item) => {
-          const hasSprayAuto = item.type && item.type.toLowerCase().includes('spray');
-          if (hasSprayAuto) {
-            sprayData.push({ ...item, ...item.readData });
-          }
-        });
-        Object.values(data.value.deviceInfo).forEach((item) => {
-          const hasDustAuto = item.type && item.type.toLowerCase().includes('dustdev');
-          if (hasDustAuto) {
-            dustData.push({ ...item, ...item.readData });
-          }
-        });
-      }
-      data.value.sprayData = sprayData;
-      data.value.dustData = dustData;
-      data.value.warnInfo = groupWarnByType(warnInfo);
-      data.value.staffInfo = staffInfo;
-      const alarmRes = await getWarnResult(params1);
-      if (alarmRes.warn_result) {
-        data.value.warn_result = alarmRes.warn_result;
-      }
-      configs.value = [...testSpary];
-    } else {
-      configs.value = testBeltNew;
+    const resWarn = await getMonitorAndAlertBelt(params);
+    resWarn.warnInfo = groupWarnByType(warnInfo);
+    console.log(resWarn.warnInfo, '111111111');
+    resWarn.staffInfo = staffInfo;
+    updateData(resWarn);
+    Object.assign(modalRes, resWarn);
+  } else if (pageType.value == 'emergencyControl') {
+    updateData(resSys);
+    configs.value = [...testYjkf];
+    const alarmParams = {
+      sysId: optionValue.value,
+      alarmLevel: '104',
+    };
+    const alarmRes = await getWarnResult(alarmParams);
+    if (alarmRes.warn_result) {
+      data.value.warn_result = alarmRes.warn_result;
+    }
+    data.value.warnInfo = groupWarnByType(warnInfo);
+    data.value.staffInfo = staffInfo;
+    updateData(data.value);
+  } else if (pageType.value == 'sprayControl') {
+    updateData(resSys);
+    const params1 = {
+      sysId: optionValue.value,
+      alarmLevel: '103,104',
+    };
+    const sprayData = [];
+    const dustData = [];
+    if (data.value?.deviceInfo) {
+      // 遍历对象的所有 value
+      Object.values(data.value.deviceInfo).forEach((item) => {
+        const hasSprayAuto = item.type && item.type.toLowerCase().includes('spray');
+        if (hasSprayAuto) {
+          sprayData.push({ ...item, ...item.readData });
+        }
+      });
+      Object.values(data.value.deviceInfo).forEach((item) => {
+        const hasDustAuto = item.type && item.type.toLowerCase().includes('dustdev');
+        if (hasDustAuto) {
+          dustData.push({ ...item, ...item.readData });
+        }
+      });
+    }
+    data.value.sprayData = sprayData;
+    data.value.dustData = dustData;
+    data.value.warnInfo = groupWarnByType(warnInfo);
+    data.value.staffInfo = staffInfo;
+    const alarmRes = await getWarnResult(params1);
+    if (alarmRes.warn_result) {
+      data.value.warn_result = alarmRes.warn_result;
     }
-    modalMonitorData.value = modalRes;
+    configs.value = [...testSpary];
+  } else {
+    configs.value = testBeltNew;
   }
+  modalMonitorData.value = modalRes;
+}
 
-  // // 定时刷新
-  function initInterval() {
-    if (timer) clearInterval(timer);
-    timer = setInterval(() => {
-      refresh();
-    }, 60000);
-  }
+// // 定时刷新
+function initInterval() {
+  if (timer) clearInterval(timer);
+  timer = setInterval(() => {
+    refresh();
+  }, 60000);
+}
 
-  async function changePage(pageTypeStr) {
-    const target = pageTypeStr || route.query.pageType || 'fire_risk_warn';
-    if (pageType.value === target) return;
-    pageType.value = target;
-    configs.value = pageCache.value[target]?.configs || testBeltNew;
-    await nextTick();
-    await refresh();
-  }
-  // watch(
-  //   // 监听动态路由参数 :type
-  //   () => route.params.type,
-  //   (newVal) => {
-  //     if (newVal) {
-  //       console.log('切换页面类型：', newVal);
-  //       refresh(); // 切换路由自动刷新
-  //     }
-  //   }
-  // );
+async function changePage(pageTypeStr) {
+  const target = pageTypeStr || route.query.pageType || 'fire_risk_warn';
+  if (pageType.value === target) return;
+  pageType.value = target;
+  configs.value = pageCache.value[target]?.configs || testBeltNew;
+  await nextTick();
+  await refresh();
+}
+// watch(
+//   // 监听动态路由参数 :type
+//   () => route.params.type,
+//   (newVal) => {
+//     if (newVal) {
+//       console.log('切换页面类型：', newVal);
+//       refresh(); // 切换路由自动刷新
+//     }
+//   }
+// );
 
-  function initModalAnimate(modal3D) {
-    modal = modal3D;
-    modal.isRender = true;
-    modalAnimate(modal, modalMonitorData);
+function initModalAnimate(modal3D) {
+  modal = modal3D;
+  modal.isRender = true;
+  modalAnimate(modal, modalMonitorData);
+}
+function clearTimer() {
+  if (timer) {
+    clearInterval(timer);
+    timer = null;
   }
-  function clearTimer() {
-    if (timer) {
-      clearInterval(timer);
-      timer = null;
+}
+watch(
+  () => route.query.pageType,
+  (newQueryType) => {
+    if (newQueryType) {
+      changePage(newQueryType as string);
     }
-  }
-  watch(
-    () => route.query.pageType,
-    (newQueryType) => {
-      if (newQueryType) {
-        changePage(newQueryType as string);
-      }
-    },
-    { immediate: true } // 初始化立刻执行
-  );
+  },
+  { immediate: true } // 初始化立刻执行
+);
 
-  watch(
-    () => modalMonitorData.value,
-    (newData, oldData) => {
-      if (newData && !Object.keys(oldData).length) {
-        isInitModal.value = true;
-      }
+watch(
+  () => modalMonitorData.value,
+  (newData, oldData) => {
+    if (newData && !Object.keys(oldData).length) {
+      isInitModal.value = true;
     }
-  );
+  }
+);
 
-  onMounted(async () => {
-    await getSysDataSource();
-    await refresh();
-    initInterval();
-  });
-  onUnmounted(() => {
-    clearTimer();
-    destroy(modal);
-    modal?.destroy();
-  });
+onMounted(async () => {
+  await getSysDataSource();
+  await refresh();
+  initInterval();
+});
+onUnmounted(() => {
+  clearTimer();
+  destroy(modal);
+  modal?.destroy();
+});
 </script>
 <style lang="less" scoped>
-  .company-home {
-    background: url('/@/assets/images/beltFire/baseMap.png') no-repeat center;
+.company-home {
+  background: url('/@/assets/images/beltFire/baseMap.png') no-repeat center;
+  width: 100%;
+  height: 100%;
+  color: @white;
+  position: relative;
+  font-family: 'Microsoft YaHei', sans-serif;
+  .top-bg {
     width: 100%;
-    height: 100%;
-    color: @white;
+    height: 56px;
+    position: absolute;
+    margin-top: 10px;
+    z-index: 1;
+  }
+  .header-container {
+    position: absolute;
+    top: 20px;
+    left: 20px;
+    z-index: 10;
+  }
+
+  .border {
+    width: 100%;
+    height: 94%;
+    background: url('/@/assets/images/beltFire/mainbj.png') no-repeat;
+    background-size: 100% 100%;
     position: relative;
-    font-family: 'Microsoft YaHei', sans-serif;
-    .top-bg {
-      width: 100%;
-      height: 56px;
-      position: absolute;
-      margin-top: 10px;
-      z-index: 1;
-    }
-    .header-container {
-      position: absolute;
-      top: 20px;
-      left: 20px;
-      z-index: 10;
-    }
+    width: 100%;
+  }
+}
 
-    .border {
-      width: 100%;
-      height: 94%;
-      background: url('/@/assets/images/beltFire/mainbj.png') no-repeat;
-      background-size: 100% 100%;
-      position: relative;
-      width: 100%;
+.center-warning-container {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 50%;
+  width: 600px;
+  height: 200px;
+  background-color: rgba(0, 0, 0, 0.7);
+  border-radius: 10px;
+  padding: 15px;
+  box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
+  z-index: 5;
+  color: #fff;
+
+  .warning-header {
+    font-size: 18px;
+    font-weight: bold;
+    margin-bottom: 10px;
+    color: #ff6b6b;
+  }
+
+  .warning-list {
+    width: 100%;
+    height: 100%;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .warning-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 8px;
+    background-color: rgba(0, 0, 0, 0.5);
+    border-radius: 5px;
+    border-left: 4px solid #ff6b6b;
+
+    .warning-time {
+      font-size: 14px;
+      color: #ccc;
     }
   }
 
+  // 中间预警结果区
   .center-warning-container {
     position: absolute;
     left: 50%;
@@ -416,113 +441,67 @@
         font-size: 14px;
         color: #ccc;
       }
-    }
-
-    // 中间预警结果区
-    .center-warning-container {
-      position: absolute;
-      left: 50%;
-      transform: translateX(-50%);
-      top: 50%;
-      width: 600px;
-      height: 200px;
-      background-color: rgba(0, 0, 0, 0.7);
-      border-radius: 10px;
-      padding: 15px;
-      box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
-      z-index: 5;
-      color: #fff;
 
-      .warning-header {
-        font-size: 18px;
+      .warning-level {
+        font-size: 14px;
         font-weight: bold;
-        margin-bottom: 10px;
-        color: #ff6b6b;
-      }
-
-      .warning-list {
-        width: 100%;
-        height: 100%;
-        overflow-y: auto;
-        display: flex;
-        flex-direction: column;
-        gap: 8px;
-      }
-
-      .warning-item {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        padding: 8px;
-        background-color: rgba(0, 0, 0, 0.5);
-        border-radius: 5px;
-        border-left: 4px solid #ff6b6b;
-
-        .warning-time {
-          font-size: 14px;
-          color: #ccc;
+        padding: 4px 8px;
+        border-radius: 4px;
+        &.level-critical {
+          background-color: #ff6b6b;
+          color: white;
         }
-
-        .warning-level {
-          font-size: 14px;
-          font-weight: bold;
-          padding: 4px 8px;
-          border-radius: 4px;
-          &.level-critical {
-            background-color: #ff6b6b;
-            color: white;
-          }
-          &.level-high {
-            background-color: #ffcc00;
-            color: black;
-          }
-          &.level-normal {
-            background-color: #66cc66;
-            color: white;
-          }
+        &.level-high {
+          background-color: #ffcc00;
+          color: black;
+        }
+        &.level-normal {
+          background-color: #66cc66;
+          color: white;
         }
+      }
 
-        .warning-action {
-          .btn-start-spray {
-            background-color: #00e1ff;
-            color: #000;
-            border: none;
-            padding: 4px 10px;
-            border-radius: 4px;
-            cursor: pointer;
-            font-size: 12px;
-            transition: all 0.3s;
-            &:hover {
-              background-color: #00c3e6;
-            }
+      .warning-action {
+        .btn-start-spray {
+          background-color: #00e1ff;
+          color: #000;
+          border: none;
+          padding: 4px 10px;
+          border-radius: 4px;
+          cursor: pointer;
+          font-size: 12px;
+          transition: all 0.3s;
+          &:hover {
+            background-color: #00c3e6;
           }
         }
       }
     }
+  }
 
-    // 巷道示意图
-    .belt-diagram {
-      position: absolute;
-      left: 50%;
-      transform: translateX(-50%);
-      bottom: 50px;
-      width: 800px;
-      height: 100px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
+  // 巷道示意图
+  .belt-diagram {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    bottom: 50px;
+    width: 800px;
+    height: 100px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 
-      img {
-        width: 100%;
-        height: 100%;
-        object-fit: contain;
-      }
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
     }
   }
-  .modal-box {
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    z-index: 1;
-  }
+}
+.modal-box {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  z-index: 1;
+}
 </style>

src/views/vent/home/configurable/belt/belt.vue

@@ -2,27 +2,22 @@
 <template>
   <div class="company-home">
     <div class="border">
-      <customHeader @open-history="goToHistory">矿井全域皮带巷三级防灭火系统</customHeader>
+      <customHeader>矿井全域皮带巷三级防灭火系统</customHeader>
       <SubApp />
       <div class="box-container">
-        <template v-if="showHistory">
-          <History />
-        </template>
-        <template v-else>
-          <ModuleCommon
-            v-for="cfg in configs"
-            :key="cfg.deviceType"
-            :show-style="cfg.showStyle"
-            :module-data="cfg.moduleData"
-            :module-name="cfg.moduleName"
-            :device-type="cfg.deviceType"
-            :page-type="cfg.pageType"
-            :data="data"
-            :visible="true"
-            @click-item="handleItemClick"
-            :active-id="currentSelectedId"
-          />
-        </template>
+        <ModuleCommon
+          v-for="cfg in configs"
+          :key="cfg.deviceType"
+          :show-style="cfg.showStyle"
+          :module-data="cfg.moduleData"
+          :module-name="cfg.moduleName"
+          :device-type="cfg.deviceType"
+          :page-type="cfg.pageType"
+          :data="data"
+          :visible="true"
+          @click-item="handleItemClick"
+          :active-id="currentSelectedId"
+        />
       </div>
     </div>
   </div>
@@ -34,7 +29,6 @@ import { useInitConfigs, useInitPage } from '../hooks/useInit';
 import { testBeltLaneFire } from './configurable.data';
 import ModuleCommon from './components/ModuleCommon.vue';
 import SubApp from '/@/components/vent/micro/createSubApp.vue';
-import History from './components/detail/history.vue';
 import { getDataHome } from './configurable.api';
 
 const { configs, devicesTypes, fetchConfigs } = useInitConfigs();
@@ -51,9 +45,6 @@ const handleItemClick = (item) => {
   currentSelectedId.value = clickId;
   refreshData();
 };
-function goToHistory() {
-  showHistory.value = !showHistory.value;
-}
 
 // 数据筛选
 const filterDataById = (sourceData, clickId: string | number) => {

src/views/vent/home/configurable/belt/components/customHeader-belt.vue

@@ -11,12 +11,6 @@
         <span>{{ item.name }}</span>
       </div>
     </div>
-    <!-- 右侧历史数据 -->
-    <div class="history-nav">
-      <div @click="openModel()" class="nav-item" :class="{ active: visible }">
-        <span>历史数据</span>
-      </div>
-    </div>
     <!-- 下拉选择器 -->
     <div class="container-title" v-if="fieldNames && options.length">
       <a-select
@@ -31,15 +25,11 @@
       />
     </div>
   </div>
-
-  <!-- 历史数据弹窗 -->
-  <!-- <History v-model:visible="visible" /> -->
 </template>
 
 <script lang="ts" setup>
 import { computed, ref, watch } from 'vue';
 import { router } from '/@/router';
-import History from './detail/history.vue';
 
 // 类型定义
 interface MenuItem {
@@ -95,7 +85,11 @@ const menuList: MenuItem[] = [
   },
   {
     name: '灾变模拟分析',
-    path: 'micro-vent-3dModal/dashboard/analysis?type=sysMonitor&deviceType=sysfireTunnel&sysID=2028657172566073346&sysType=leatherr',
+    path: '/micro-vent-3dModal/dashboard/analysis?type=sysMonitor&deviceType=sysfireTunnel&sysID=2028657172566073346&sysType=leather',
+  },
+  {
+    name: '历史数据',
+    path: '/belt/history/home',
   },
 ];
 // 下拉框样式
@@ -128,11 +122,6 @@ const isActive = (menuPath: string): boolean => {
 const handleNavClick = (item: MenuItem) => {
   router.push(item.path);
 };
-// 打开/关闭历史数据弹窗
-const openModel = () => {
-  visible.value = !visible.value;
-  emit('open-history');
-};
 // 下拉选择器变化
 const handleTitleChange = (value: string) => {
   currentTitleValue.value = value;
@@ -256,36 +245,10 @@ const handleTitleChange = (value: string) => {
       background-size: 100% 190% !important;
     }
   }
-
-  .history-nav {
-    position: fixed;
-    top: 15px;
-    right: 230px;
-    pointer-events: auto;
-
-    .nav-item {
-      width: 120px;
-      height: 35px;
-      line-height: 35px;
-      padding: 0;
-      box-sizing: border-box;
-      padding-bottom: 10px;
-      text-align: center;
-      background: url('/@/assets/images/beltFire/titleNav.png') no-repeat center center;
-      background-size: 100% 90%;
-      cursor: pointer;
-      color: #fff;
-    }
-    .nav-item.active {
-      background: url('/@/assets/images/beltFire/titleNavActive.png') no-repeat center center !important;
-      background-size: 100% 190% !important;
-    }
-  }
 }
 
 :deep(.zxm-select) {
   width: 100%;
-
   .@{ventSpace}-select-selector {
     background: transparent !important;
     border: none !important;

src/views/vent/home/configurable/belt/components/detail/history.vue

@@ -1,90 +0,0 @@
-<template>
-  <div class="scene-box">
-    <div class="center-container">
-      <div class="history-group">
-        <div class="history-container">
-          <workFaceHistory
-            v-if="activeKey == 'monitor_history' && isRefresh"
-            ref="historyTable"
-            class="vent-margin-t-20"
-            :deviceId="optionValue"
-            :device-type="deviceType"
-          />
-          <!-- <workFaceHandleHistory
-            v-if="activeKey == 'handler_history' && isRefresh"
-            ref="alarmHistoryTable"
-            class="vent-margin-t-20"
-            :deviceId="optionValue"
-            :device-type="deviceType"
-          />
-          <workFaceAlarmHistory
-            v-if="activeKey == 'faultRecord' && isRefresh"
-            ref="handlerHistoryTable"
-            class="vent-margin-t-20"
-            :deviceId="optionValue"
-            :device-type="deviceType"
-          /> -->
-        </div>
-      </div>
-    </div>
-    <!-- <BottomMenu @change="changeActive" /> -->
-  </div>
-</template>
-
-<script setup lang="ts">
-import { onBeforeMount, ref, onMounted, onUnmounted, nextTick } from 'vue';
-import BottomMenu from './bottomMenu.vue';
-import workFaceHistory from './workFaceHistory.vue';
-
-type DeviceType = { deviceType: string; deviceName: string; datalist: any[] };
-const deviceList = ref<DeviceType[]>([]);
-const activeKey = ref('monitor_history');
-const deviceActive = ref('');
-const deviceType = ref('');
-const optionValue = ref('');
-const loading = ref(false);
-const isRefresh = ref(true);
-function changeActive(activeValue) {
-  activeKey.value = activeValue;
-  loading.value = true;
-}
-</script>
-<style lang="less" scoped>
-@import '/@/design/vent/modal.less';
-@import '/@/design/theme.less';
-@ventSpace: zxm;
-
-:deep(.@{ventSpace}-tabs-tabpane-active) {
-  overflow: auto;
-}
-.scene-box {
-  --image-wokeFaca-nav: url('/@/assets/images/vent/wokeFaca-nav.png');
-  --gradient-0: linear-gradient(45deg, #96c5ca38, #156c7d4a);
-  --color-0: #73e8fe;
-  --color-2: #96c5ca38;
-  --color-3: #156c7d4a;
-  --color-5: #0d2b46;
-  --color-6: #00fffd22;
-  --color-7: #44b4ff33;
-  --color-10: #6176af;
-  --color-15: #ffffff88;
-  --color-16: #f73b2440;
-  --color-18: #ff9b1740;
-  --color-22: #ffa500;
-  width: 100%;
-  height: 100%;
-}
-.history-group {
-  padding: 0 30px;
-  margin-top: 90px;
-  .history-container {
-    position: relative;
-    background: var(--color-5);
-    width: calc(100% + 10px);
-    left: -10px;
-    border: 1px solid var(--color-6);
-    padding: 10px 0;
-    box-shadow: 0 0 20px var(--color-7) inset;
-  }
-}
-</style>

src/views/vent/home/configurable/belt/history.vue

@@ -0,0 +1,157 @@
+<template>
+  <div class="company-home">
+    <div class="border">
+      <customHeader>矿井全域皮带巷三级防灭火系统</customHeader>
+      <SubApp />
+      <div class="box-container">
+        <BasicTable ref="historyTable" @register="registerTable" :scroll="{ x: 1000, y: 500 }" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { BasicTable } from '/@/components/Table';
+import { useListPage } from '/@/hooks/system/useListPage';
+import { defHttp } from '/@/utils/http/axios';
+import dayjs from 'dayjs';
+import customHeader from './components/customHeader-belt.vue';
+// 表格列配置（你可以随便加字段）
+const columns = ref([
+  {
+    title: '设备名称',
+    dataIndex: 'deviceName',
+    width: 180,
+  },
+  {
+    title: '设备位置',
+    dataIndex: 'devicePos',
+    width: 180,
+  },
+  {
+    title: '监测值',
+    dataIndex: 'monitorValue',
+    width: 120,
+  },
+  {
+    title: '采集时间',
+    dataIndex: 'createTime',
+    width: 200,
+  },
+]);
+
+// 查询接口 模拟
+const getHistoryDataApi = (params) =>
+  defHttp.post({
+    url: '/monitor/device/history',
+    params,
+  });
+
+// 表格注册
+const { tableContext } = useListPage({
+  tableProps: {
+    api: getHistoryDataApi, // 绑定查询接口
+    columns: columns.value, // 绑定表格列
+    showIndexColumn: true,
+    bordered: true,
+    size: 'small',
+
+    // 查询表单配置
+    formConfig: {
+      labelWidth: 80,
+      showSubmitButton: true, // 显示查询按钮
+      showResetButton: true, // 显示重置按钮
+      schemas: [
+        // 时间范围
+        {
+          field: 'beginTime',
+          label: '开始时间',
+          component: 'DatePicker',
+          defaultValue: dayjs().subtract(1, 'day').startOf('day'),
+          componentProps: {
+            showTime: true,
+            valueFormat: 'YYYY-MM-DD HH:mm:ss',
+          },
+          colProps: { span: 6 },
+        },
+        {
+          field: 'endTime',
+          label: '结束时间',
+          component: 'DatePicker',
+          defaultValue: dayjs(),
+          componentProps: {
+            showTime: true,
+            valueFormat: 'YYYY-MM-DD HH:mm:ss',
+          },
+          colProps: { span: 6 },
+        },
+        {
+          field: 'deviceName',
+          label: '皮带巷',
+          component: 'Select',
+          componentProps: { placeholder: '请选择皮带巷' },
+          colProps: { span: 6 },
+        },
+        // 设备名称搜索
+        {
+          field: 'deviceName',
+          label: '设备名称',
+          component: 'Select',
+          componentProps: { placeholder: '请选择设备' },
+          colProps: { span: 6 },
+        },
+      ],
+    },
+
+    // 分页
+    pagination: {
+      pageSize: 20,
+      showSizeChanger: false,
+    },
+  },
+});
+
+const [registerTable] = tableContext;
+</script>
+
+<style scoped lang="less">
+.spray-wrapper {
+  width: 100%;
+  height: 100%;
+  background-image: url('/@/assets/images/beltFire/baseMap.png');
+  background-size: cover;
+}
+
+#spray3D {
+  pointer-events: all;
+}
+
+.spray-wrapper :deep(.list-item_L .list-item__icon_L) {
+  background-image: url('/@/assets/images/home-container/configurable/minehome/list-icon-file.png');
+}
+.spray-wrapper :deep(.list-item_N:nth-child(1)) {
+  background-image: url('/@/assets/images/home-container/configurable/minehome/list-bg-n5.png');
+}
+.spray-wrapper :deep(.list-item_N:nth-child(2)) {
+  background-image: url('/@/assets/images/home-container/configurable/minehome/list-bg-n6.png');
+}
+.company-home {
+  background: url('/@/assets/images/beltFire/baseMap.png') no-repeat center;
+  width: 100%;
+  height: 100%;
+  color: @white;
+  position: relative;
+  .border {
+    width: 100%;
+    height: 94%;
+    background: url('/@/assets/images/beltFire/mainbj.png') no-repeat;
+    background-size: 100% 100%;
+    margin-top: 50px;
+    .test {
+      background: url('./test.png') no-repeat;
+      background-size: 100% 100%;
+    }
+  }
+}
+</style>