Merge branch 'master' of http://39.97.59.228:8013/hrx/mky-vent-base

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

@@ -53,368 +53,326 @@
 </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 } 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;
-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);
+  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();
-}
-function goToHistory() {
-  if (pageType.value === 'history') {
-    // 当前是历史页 → 切回默认页
-    pageType.value = 'fire_risk_warn';
-  } else {
-    // 当前不是 → 打开历史页
-    pageType.value = 'history';
+  // 切换检测数据
+  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 '';
+  function goToHistory() {
+    if (pageType.value === 'history') {
+      // 当前是历史页 → 切回默认页
+      pageType.value = 'fire_risk_warn';
+    } else {
+      // 当前不是 → 打开历史页
+      pageType.value = 'history';
+      destroy(modal);
     }
-    // 构建当前预警对象
-    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})`;
+  }
+  // 预警等级映射
+  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}`;
           }
-        } else if (trendMin != null && trendMax == null) {
-          warnObj.coTrend = `极端上升>${trendMin}`;
         }
-      }
-      // 温度（带单位）
-      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 (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}`;
+          }
         }
-      }
-      // HCL
-      else if (deviceType === 'modelsensor_hcl') {
-        if (fmin != null && fmax != null) {
-          warnObj.hclRange = `${fmin} - ${fmax}`;
-        } else if (fmin != null && fmax == null) {
-          warnObj.hclRange = `≥ ${fmin}`;
+        // 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);
     });
-    result.push(warnObj);
-  });
 
-  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,
-      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',
+    return result;
+  }
+  // 刷新数据
+  async function refresh() {
+    // 由于模型中需要用到风门的监测数据，这里进行公共调用（后期精确调用风门）
+    const modalRes = {};
+    const systemParams = {
+      devicetype: 'sys',
+      systemID: optionValue.value,
     };
-    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 = {
+    const resSys = await getSystem(systemParams);
+    const params = {
       sysId: optionValue.value,
-      alarmLevel: '103,104',
+      monitorType: 2,
     };
-    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;
+    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;
     }
-    configs.value = [...testSpary];
-  } else {
-    configs.value = testBeltNew;
+    modalMonitorData.value = modalRes;
   }
-  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(modal) {
-  console.log('初始化模型', modal);
-  modal.isRender = true;
-  modalAnimate(modal, modalMonitorData);
-}
-function clearTimer() {
-  if (timer) {
-    clearInterval(timer);
-    timer = null;
+  function initModalAnimate(modal3D) {
+    modal = modal3D;
+    modal.isRender = true;
+    modalAnimate(modal, modalMonitorData);
   }
-}
-watch(
-  () => route.query.pageType,
-  (newQueryType) => {
-    if (newQueryType) {
-      changePage(newQueryType as string);
+  function clearTimer() {
+    if (timer) {
+      clearInterval(timer);
+      timer = null;
     }
-  },
-  { immediate: true } // 初始化立刻执行
-);
+  }
+  watch(
+    () => route.query.pageType,
+    (newQueryType) => {
+      if (newQueryType) {
+        changePage(newQueryType as string);
+      }
+    },
+    { 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();
-});
+  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;
-  width: 100%;
-  height: 100%;
-  color: @white;
-  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;
-  }
-
-  .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 {
+  .company-home {
+    background: url('/@/assets/images/beltFire/baseMap.png') no-repeat center;
     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;
+    color: @white;
+    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;
+    }
 
-    .warning-time {
-      font-size: 14px;
-      color: #ccc;
+    .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%;
@@ -458,67 +416,113 @@ onUnmounted(() => {
         font-size: 14px;
         color: #ccc;
       }
+    }
 
-      .warning-level {
-        font-size: 14px;
+    // 中间预警结果区
+    .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;
-        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;
-        }
+        margin-bottom: 10px;
+        color: #ff6b6b;
       }
 
-      .warning-action {
-        .btn-start-spray {
-          background-color: #00e1ff;
-          color: #000;
-          border: none;
-          padding: 4px 10px;
+      .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;
+        }
+
+        .warning-level {
+          font-size: 14px;
+          font-weight: bold;
+          padding: 4px 8px;
           border-radius: 4px;
-          cursor: pointer;
-          font-size: 12px;
-          transition: all 0.3s;
-          &:hover {
-            background-color: #00c3e6;
+          &.level-critical {
+            background-color: #ff6b6b;
+            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;
+            }
           }
         }
       }
     }
-  }
 
-  // 巷道示意图
-  .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/components/customHeader-belt.vue

@@ -95,7 +95,7 @@ const menuList: MenuItem[] = [
   },
   {
     name: '灾变模拟分析',
-    path: 'micro-vent-3dModal/dashboard/analysis?type=sysMonitor&deviceType=sysfireTunnel&sysID=xxxx&sysType=leather',
+    path: 'micro-vent-3dModal/dashboard/analysis?type=sysMonitor&deviceType=sysfireTunnel&sysID=2028657172566073346&sysType=leatherr',
   },
 ];
 // 下拉框样式
@@ -302,4 +302,4 @@ const handleTitleChange = (value: string) => {
     color: #fff !important;
   }
 }
-</style>
+</style>

src/views/vent/home/configurable/belt/threejs/belt.threejs.ts

@@ -7,12 +7,9 @@ import { panelManager } from './PanelManager';
 import { defHttp } from '/@/utils/http/axios';
 import MonitorPanel from './MonitorPanel.vue';
 import SprinklerPanel from './sprinklerPanel.vue';
-import { animateCamera } from '/@/utils/threejs/util';
-import doubleWindow from '/@/views/vent/monitorManager/windowMonitorBet/shuangdaoFc.threejs';
 
 const gateList = ref([]);
 const sprayList = ref([]);
-const panelApp = [];
 let mouseoverEvent, mouseUpEvent, doubleEvent;
 const normalColor = new THREE.Color(0xff0000);
 const warningColor = new THREE.Color(0xfc5f2e);
@@ -26,7 +23,6 @@ let clickSelecteObject;
 const modalData = ref(null);
 const warningPartitionIndex = ref('-1');
 const warningPartitionIndexList: number[] = [];
-const partitionRefMap = new Map();
 
 export async function modalAnimate(modal, modalMonitorData: Ref<any, any>) {
   // const data = modalMonitorData.value;
@@ -247,7 +243,7 @@ export async function modalAnimate(modal, modalMonitorData: Ref<any, any>) {
       const solidBox = partition.getObjectByName(partition.name + '_solid') as THREE.Mesh;
       const line = partition.getObjectByName(partition.name + '_line') as THREE.LineSegments;
       const partitionIndex = partition.name.split('partition')[1];
-      if (solidBox && line) {
+      if (solidBox && line && modalData.value) {
         if (warningPartitionIndexList.includes(partitionIndex)) {
           const data = modalData.value[partitionIndex + ''];
           const warningColor = warningColorMap.get(data['alarmLevel']) || normalColor;
@@ -344,17 +340,13 @@ export async function modalAnimate(modal, modalMonitorData: Ref<any, any>) {
 }
 
 function createMonitorPanel3D(modal, partition) {
+  if (!modalData.value) return;
   const box = new THREE.Box3();
   box.setFromObject(partition);
   const center = box.getCenter(new THREE.Vector3());
   const partitionIndex = partition.name.split('partition')[1];
   const index = partitionIndex.split('_')[0];
   const data = modalData.value[index + ''];
-  // if (partitionRefMap.has(partition.name)) {
-  //   partitionRefMap.set(partition.name, ref(data));
-  // } else {
-  //   partitionRefMap.get(partition.name).value = data;
-  // }
   if (data && !panelManager.getPanel(`partition${index}`)) {
     panelManager.createPanel(modal.scene, MonitorPanel, {
       instanceId: partition.name,
@@ -487,6 +479,7 @@ function initMouseEvent(modal, beltModal, partitionList) {
 
 function partitionEvent(intersects, partitionList, modal, event) {
   // 重置
+  if (!modalData.value) return;
   partitionList.forEach((partition) => {
     const index = partition.name.split('partition')[1];
     if (!clickSelecteObject || (clickSelecteObject && clickSelecteObject.name !== partition.name)) {
@@ -1062,11 +1055,6 @@ function drawSprayPartitionByBox(group: THREE.Object3D, vertices: THREE.Vector3[
   return partitionGroup;
 }
 
-export function destroy(modal, gateList) {
-  gateList.value = null;
-  modal.canvasContainer?.removeEventListener('mousemove', mouseoverEvent);
-}
-
 function partitionAnimate(intersect0, modal) {
   const box = new THREE.Box3();
   box.setFromObject(intersect0);
@@ -1144,3 +1132,14 @@ function partitionAnimate(intersect0, modal) {
     }
   );
 }
+
+export function destroy(modal) {
+  gateList.value = [];
+  sprayList.value = [];
+  clickSelecteObject = null;
+  modalData.value = null;
+  warningPartitionIndex.value = '-1';
+  warningPartitionIndexList.length = 0;
+  panelManager.destroyAll();
+  modal.canvasContainer?.removeEventListener('mousemove', mouseoverEvent);
+}