src/views/vent/deviceManager/configurationTable/types.ts

@@ -108,7 +108,8 @@ export interface ModuleData {
         | 'warning_result'
         | 'vehicle_co_analysis'
         | 'sprayCtrl'
-        | 'cameraList';
+        | 'cameraList'
+        | 'CameraListTest';
       /** 分区大小 */
       basis: string;
       overflow?: boolean;
@@ -233,6 +234,7 @@ export interface ModuleDataList extends ReadFrom {
       info?: string;
     } & CommonItem
   >;
+  pagetype?: string;
 }
 
 export interface ModuleDataGallery extends ReadFrom {
@@ -394,6 +396,7 @@ export interface ModuleDataComplexList extends ReadFrom {
       } & CommonItem
     >;
   }[];
+  pagetype?: string;
 }
 
 export interface ModuleDataTabs extends ReadFrom {

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

@@ -1,7 +1,6 @@
 <!-- belt-new.vue -->
 <template>
   <div class="company-home">
-    <!-- 顶部标题栏 + 下拉选择 -->
     <customHeader> 皮带巷智能管控 </customHeader>
     <div class="modal-box" id="modalBox" v-if="pageType !== 'history' && isInitModal">
       <Three3D ref="three3D" :modalName="'pidai'" class="modal-3d" @success="initModalAnimate" />
@@ -10,36 +9,12 @@
     <div class="top-bg">
       <BeltNav @change-page="changePage" :pageType="pageType" />
     </div>
-    <!-- 主体区域 -->
+
     <div class="border">
-      <!-- 配置模块区 -->
-      <template v-if="pageType == 'fire_risk_warn'">
-        <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"
-        />
-      </template>
-      <template v-if="pageType == 'emergencyControl'">
-        <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"
-        />
+      <template v-if="pageType === 'history'">
+        <History />
       </template>
-      <template v-if="pageType == 'sprayControl'">
+      <template v-else>
         <ModuleCommon
           v-for="cfg in configs"
           :key="cfg.deviceType"
@@ -52,483 +27,399 @@
           :visible="true"
         />
       </template>
-      <template v-if="pageType == 'history'">
-        <History />
-      </template>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-  import { onMounted, ref, watch, nextTick } 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 Three3D from '/@/views/vent/home/configurable/components/three3D.vue';
-  import BeltNav from './components/BeltNav.vue';
-  import { useRouter, useRoute } from 'vue-router';
-  import { getSystem, getMonitorAndAlertBelt, getDevice } from './configurable.api';
-  import { modalAnimate } from './threejs/belt.threejs';
-  import History from './components/detail/history.vue';
-  // 初始化配置
-  const { configs, fetchConfigs } = useInitConfigs();
-  const { updateEnhancedConfigs, updateData, data } = useInitPage('皮带巷三级防灭火系统');
-  const isInitModal = ref(false);
-  // const pageType = computed(() => {
-  //   const currentType = route.params.type as string;
-  //   return currentType;
-  // });
-  const pageType = ref('fire_risk_warn');
-  const route = useRoute();
-  const modalMonitorData = ref({});
-  // 下拉框选项
-  const beltOptions = [
-    { id: '1', beltName: '主运巷皮带 1' },
-    { id: '2', beltName: '主运巷皮带 2' },
-  ];
+import { onMounted, ref, watch, nextTick } 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 Three3D from '/@/views/vent/home/configurable/components/three3D.vue';
+import BeltNav from './components/BeltNav.vue';
+import { useRouter, useRoute } from 'vue-router';
+import { getSystem, getMonitorAndAlertBelt, getDevice } from './configurable.api';
+import { modalAnimate } from './threejs/belt.threejs';
+import History from './components/detail/history.vue';
+// 初始化配置
+const { configs, fetchConfigs } = useInitConfigs();
+const { updateEnhancedConfigs, updateData, data } = useInitPage('皮带巷三级防灭火系统');
+const isInitModal = ref(false);
+const pageCache = ref({
+  fire_risk_warn: { configs: testBeltNew },
+  emergencyControl: { configs: testYjkf },
+  sprayControl: { configs: testSpary },
+});
 
-  const selectedBeltId = ref('1');
+const pageType = ref('fire_risk_warn');
+const route = useRoute();
+const modalMonitorData = ref({});
+// 下拉框选项
+const beltOptions = [
+  { id: '1', beltName: '主运巷皮带 1' },
+  { id: '2', beltName: '主运巷皮带 2' },
+];
 
-  // 模拟数据
-  const readData = {
-    fmhjcInfo: [
-      {
-        beltName: '主运巷皮带1',
-        wz: { strtype: 'wz', avg: '111', max: '222', min: '333', alarm: false, pos: 'AAAA', maxTime: '2013-05-24 15:52:42' },
-        hcl: { strtype: 'HCl', avg: 'XXX', max: 'XXX', min: 'XXX', alarm: false, pos: 'AAAA', maxTime: '2013-05-24 15:52:42' },
-        gx: { strtype: 'gx', avg: 'XXX', max: 'XXX', min: 'XXX', alarm: false, pos: 'AAAA', maxTime: '2013-05-24 15:52:42' },
-        co: { strtype: 'CO', avg: 'XXX', max: 'XXX', min: 'XXX', alarm: true, pos: 'AAAA', maxTime: '2013-05-24 15:52:42' },
-        wd: { strtype: 'wd', avg: 'XXX', max: 'XXX', min: 'XXX', alarm: false, pos: 'AAAA', maxTime: '2013-05-24 15:52:42' },
-      },
-    ],
-    pdhzfxInfo: [
-      {
-        beltName: '主运巷皮带1',
-        warningLevel: '一般风险',
-        sysList: [
-          {
-            time: '2026-03-21 13:23:34',
-            area: '3#皮带区域',
-            type: 'CO浓度异常',
-            status: '三级预警',
-            advice: '立即检查该区域设备，启动应急预案',
-            action: '启动喷淋',
-          },
-          {
-            time: '2026-03-21 13:23:34',
-            area: '3#皮带区域',
-            type: 'CO浓度异常',
-            status: '三级预警',
-            advice: '立即检查该区域设备，启动应急预案',
-            action: '启动喷淋',
-          },
-          {
-            time: '2026-03-21 13:23:34',
-            area: '3#皮带区域',
-            type: 'CO浓度异常',
-            status: '三级预警',
-            advice: '立即检查该区域设备，启动应急预案',
-            action: '启动喷淋',
-          },
-          {
-            time: '2026-03-21 13:23:34',
-            area: '3#皮带区域',
-            type: 'CO浓度异常',
-            status: '三级预警',
-            advice: '立即检查该区域设备，启动应急预案',
-            action: '启动喷淋',
-          },
-        ],
-      },
-    ],
-    sensorAnalysis: {
-      hy: { name: '火焰传感器', alarm: false, maxTime: '2013-05-24 15:52:42', pos: '' },
-      wd: { name: '温度传感器', alarm: false, maxTime: '2013-05-24 15:52:42', pos: '' },
-      yw: { name: '烟雾传感器', alarm: false, maxTime: '2013-05-24 15:52:42', pos: '' },
-    },
-    vehicleCOAnalysis: {
-      isRisk: true,
-      activityList: [
-        {
-          pos: '1#皮带区域',
-          vehicle: '车辆23425',
-          status: '0',
-          // vehicle2: '车辆53456',
-          // vehicle3: '未通过车辆',
-          // coReason1: 'CO浓度异常升高，已确认为车辆干扰',
-          // coReason3: 'CO浓度异常升高，已确认非车辆干扰',
-          // possibleCause: '皮带摩擦过热或电器设备故障',
-          // recommendation: '立即检查3#皮带区域设备',
-        },
-        {
-          pos: '2#皮带区域',
-          vehicle: '车辆53456',
-          status: '1',
-        },
-        {
-          pos: '3#皮带区域',
-          vehicle: '未通过车辆',
-          status: '0',
-        },
-      ],
-      analysisList: [
-        {
-          pos: '1#皮带区域',
-          analysisText: 'CO浓度异常升高，已确认为车辆干扰',
-        },
-        {
-          pos: '1#皮带区域',
-          analysisText: 'CO浓度异常升高，已确认为车辆干扰',
-        },
-      ],
-      possibleCause: '皮带摩擦过热或电器设备故障',
-      recommendation: '立即检查3#皮带区域设备',
-    },
-    sprayData: [
-      {
-        beltArea: '1#皮带区域',
-        devicePosition: '1#皮带-50m处',
-        netStatus: '0', // 网络状态：0=断开，1=连接
-        runStatus: '1', // 运行状态：0=异常，1=正常
-        waterVolume: 86,
-        waterPressure: 1.4,
-      },
-      {
-        beltArea: '2#皮带区域',
-        devicePosition: '2#皮带-120m处',
-        netStatus: '1',
-        runStatus: '1',
-        waterVolume: 72,
-        waterPressure: 0.8,
-      },
-      {
-        beltArea: '3#皮带区域',
-        devicePosition: '3#皮带-200m处',
-        netStatus: '1',
-        runStatus: '0',
-        waterVolume: 45,
-        waterPressure: 1.6,
-      },
-    ],
-  };
+const selectedBeltId = ref('1');
 
-  // 下拉框切换处理
-  function handleBeltChange(id: string) {
-    selectedBeltId.value = id;
-    refresh();
-  }
+// 下拉框切换处理
+function handleBeltChange(id: string) {
+  selectedBeltId.value = id;
+  refresh();
+}
 
-  // 风险等级样式映射
-  function getLevelClass(level: string) {
-    switch (level) {
-      case '重大风险':
-        return 'level-critical';
-      case '高风险':
-        return 'level-high';
-      case '一般风险':
-        return 'level-normal';
-      default:
-        return '';
-    }
+// 风险等级样式映射
+function getLevelClass(level: string) {
+  switch (level) {
+    case '重大风险':
+      return 'level-critical';
+    case '高风险':
+      return 'level-high';
+    case '一般风险':
+      return 'level-normal';
+    default:
+      return '';
   }
-  // 刷新数据
-  async function refresh() {
-    // fetchConfigs('sys_Leather').then(() => {
-    //   console.log(pageType.value, '========');
-    //   if (pageType.value == 'fire_risk_warn') {
-    //     configs.value = testBeltNew;
-    //     const params = {
-    //       sysId: '1637983899775242242',
-    //       dataList: 'fire_risk_warn,warn_result,vehicle_co_correlate',
-    //     };
-    //     Promise.resolve(getMonitorAndAlertBelt(params)).then(updateData);
-    //   } else if (pageType.value == 'emergencyControl') {
-    //     const params = {
-    //       devicetype: 'sys',
-    //       systemID: '1637983899775242242',
-    //       type: 'ventS',
-    //     };
-    //     Promise.resolve(getSystem(params)).then(updateData);
-    //     configs.value = testYjkf;
-    //   } else if (pageType.value == 'sprayControl') {
-    //     const params = {
-    //       devicetype: 'sys',
-    //       systemID: '2028657172566073346',
-    //     };
-    //     Promise.resolve(getDevice(params)).then((originalData) => {
-    //       updateData(originalData);
-    //       const sprayData: any[] = [];
-    //       if (data.value?.msgTxt) {
-    //         data.value.msgTxt.forEach((item) => {
-    //           const hasSprayAuto = item.type && item.type.toLowerCase().includes('spray_auto');
-    //           if (hasSprayAuto) {
-    //             sprayData.push({
-    //               ...item,
-    //               ...item.readData,
-    //             });
-    //           }
-    //         });
-    //       }
-    //       data.value.sprayData = sprayData;
-    //       updateData(data.value);
-    //     });
-    //     configs.value = testSpary;
-    //   } else {
-    //     configs.value = testBeltNew;
-    //   }
-    // });
+}
+// 刷新数据
+async function refresh() {
+  // await fetchConfigs('sys_Leather');
+
+  //   if (pageType.value === 'fire_risk_warn') {
+  //     configs.value = testBeltNew;
+  //     const res = await getMonitorAndAlertBelt({
+  //       sysId: '1637983899775242242',
+  //       dataList: 'fire_risk_warn,warn_result,vehicle_co_correlate',
+  //     });
+  //     updateData(res);
+  //   } else if (pageType.value === 'emergencyControl') {
+  //     configs.value = testYjkf;
+  //     const res = await getSystem({
+  //       devicetype: 'sys',
+  //       systemID: '1637983899775242242',
+  //       type: 'ventS',
+  //     });
+  //     updateData(res);
+  //   } else if (pageType.value === 'sprayControl') {
+  //     const params = {
+  //       devicetype: 'sys',
+  //       systemID: '2028657172566073346',
+  //     };
+  //     Promise.resolve(getDevice(params)).then((originalData) => {
+  //       updateData(originalData);
+  //       const sprayData: any[] = [];
+  //       if (data.value?.msgTxt) {
+  //         data.value.msgTxt.forEach((item) => {
+  //           const hasSprayAuto = item.type && item.type.toLowerCase().includes('spray_auto');
+  //           if (hasSprayAuto) {
+  //             sprayData.push({
+  //               ...item,
+  //               ...item.readData,
+  //             });
+  //           }
+  //         });
+  //       }
+  //       data.value.sprayData = sprayData;
+  //       updateData(data.value);
+  //     });
+  //     configs.value = testSpary;
+  //   }
+  //   if (isFirst) initialized.value = true;
 
-    // 由于模型中需要用到风门的监测数据，这里进行公共调用（后期精确调用风门）
-    const modalRes = {};
-    const systemParams = {
+  // 由于模型中需要用到风门的监测数据，这里进行公共调用（后期精确调用风门）
+  const modalRes = {};
+  const systemParams = {
+    devicetype: 'sys',
+    systemID: '1637983899775242242',
+    type: 'ventS',
+  };
+  const resSys = await getSystem(systemParams);
+  Object.assign(modalRes, resSys);
+  if (pageType.value == 'fire_risk_warn') {
+    configs.value = [...testBeltNew];
+    const params = {
+      sysId: '1637983899775242242',
+      dataList: 'fire_risk_warn,warn_result,vehicle_co_correlate',
+    };
+    const resWarn = await getMonitorAndAlertBelt(params);
+    updateData(resWarn);
+    Object.assign(modalRes, resWarn);
+  } else if (pageType.value == 'emergencyControl') {
+    //
+    updateData(resSys);
+    configs.value = [...testYjkf];
+  } else if (pageType.value == 'sprayControl') {
+    const params = {
       devicetype: 'sys',
-      systemID: '1637983899775242242',
-      type: 'ventS',
+      systemID: '2028657172566073346',
     };
-    const resSys = await getSystem(systemParams);
-    Object.assign(modalRes, resSys);
-    if (pageType.value == 'fire_risk_warn') {
-      configs.value = testBeltNew;
-      const params = {
-        sysId: '1637983899775242242',
-        dataList: 'fire_risk_warn,warn_result,vehicle_co_correlate',
-      };
-      const resWarn = await getMonitorAndAlertBelt(params);
-      updateData(resWarn);
-      Object.assign(modalRes, resWarn);
-    } else if (pageType.value == 'emergencyControl') {
-      //
-      updateData(resSys);
-      configs.value = testYjkf;
-    } else if (pageType.value == 'sprayControl') {
-      const params = {
-        devicetype: 'sys',
-        systemID: '2028657172566073346',
-      };
-      Promise.resolve(getDevice(params)).then((originalData) => {
-        updateData(originalData);
-        const sprayData: any[] = [];
-        if (data.value?.msgTxt) {
-          data.value.msgTxt.forEach((item) => {
-            const hasSprayAuto = item.type && item.type.toLowerCase().includes('spray_auto');
-            if (hasSprayAuto) {
-              sprayData.push({
-                ...item,
-                ...item.readData,
-              });
-            }
-          });
-        }
-        data.value.sprayData = sprayData;
-        updateData(data.value);
-      });
-      configs.value = testSpary;
-    } else {
-      configs.value = testBeltNew;
-    }
-    modalMonitorData.value = modalRes;
+    Promise.resolve(getDevice(params)).then((originalData) => {
+      updateData(originalData);
+      const sprayData: any[] = [];
+      if (data.value?.msgTxt) {
+        data.value.msgTxt.forEach((item) => {
+          const hasSprayAuto = item.type && item.type.toLowerCase().includes('spray_auto');
+          if (hasSprayAuto) {
+            sprayData.push({
+              ...item,
+              ...item.readData,
+            });
+          }
+        });
+      }
+      data.value.sprayData = sprayData;
+      updateData(data.value);
+    });
+    configs.value = [...testSpary];
+    console.log(configs.value);
+  } else {
+    configs.value = testBeltNew;
   }
+  modalMonitorData.value = modalRes;
+}
 
-  // // 定时刷新
-  function initInterval() {
-    setInterval(() => {
-      refresh();
-    }, 60000);
-  }
+// // 定时刷新
+function initInterval() {
+  setInterval(() => {
+    refresh();
+  }, 60000);
+}
 
-  async function changePage(pageTypeStr: string) {
-    const finalPageType = pageTypeStr || (route.query.pageType as string) || '';
-    pageType.value = finalPageType;
+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(); // 切换路由自动刷新
+//     }
+//   }
+// );
 
-    await refresh();
-  }
+function initModalAnimate(modal) {
+  console.log('初始化模型', modal);
+  modal.isRender = true;
+  modalAnimate(modal, modalMonitorData);
+}
 
-  // watch(
-  //   // 监听动态路由参数 :type
-  //   () => route.params.type,
-  //   (newVal) => {
-  //     if (newVal) {
-  //       console.log('切换页面类型：', newVal);
-  //       refresh(); // 切换路由自动刷新
-  //     }
-  //   }
-  // );
+watch(
+  () => route.query.pageType,
+  (newQueryType) => {
+    if (newQueryType) {
+      changePage(newQueryType as string);
+    }
+  },
+  { immediate: true } // 初始化立刻执行
+);
 
-  function initModalAnimate(modal) {
-    console.log('初始化模型', modal);
-    modal.isRender = true;
-    modalAnimate(modal, modalMonitorData);
+watch(
+  () => modalMonitorData.value,
+  (newData, oldData) => {
+    if (newData && !Object.keys(oldData).length) {
+      isInitModal.value = true;
+    }
   }
+);
 
-  watch(
-    () => route.query.pageType,
-    (newQueryType) => {
-      if (newQueryType) {
-        changePage(newQueryType as string);
-      }
-    },
-    { immediate: true } // 初始化立刻执行
-  );
+onMounted(async () => {
+  await refresh();
+  initInterval();
+});
+</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;
+  }
 
-  watch(
-    () => modalMonitorData.value,
-    (newData, oldData) => {
-      if (newData && !Object.keys(oldData).length) {
-        isInitModal.value = true;
-      }
-    }
-  );
+  .border {
+    width: 100%;
+    height: 94%;
+    background: url('/@/assets/images/beltFire/mainbj.png') no-repeat;
+    background-size: 100% 100%;
+    position: relative;
+    width: 100%;
+    height: 100%;
+  }
+}
 
-  onMounted(async () => {
-    await refresh();
-    initInterval();
-  });
-</script>
+.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;
 
-<style lang="less" scoped>
-  .company-home {
-    background: url('/@/assets/images/beltFire/baseMap.png') no-repeat center;
+  .warning-header {
+    font-size: 18px;
+    font-weight: bold;
+    margin-bottom: 10px;
+    color: #ff6b6b;
+  }
+
+  .warning-list {
     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;
+    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;
     }
-    .header-container {
-      position: absolute;
-      top: 20px;
-      left: 20px;
-      z-index: 10;
+  }
+
+  // 中间预警结果区
+  .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;
     }
 
-    .border {
+    .warning-list {
       width: 100%;
-      height: 94%;
-      background: url('/@/assets/images/beltFire/mainbj.png') no-repeat;
-      background-size: 100% 100%;
-      position: relative;
-      overflow: hidden;
-      .box-container {
-        position: relative;
-        width: 100%;
-        height: 100%;
-      }
+      height: 100%;
+      overflow-y: auto;
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
     }
 
-    // 中间预警结果区
-    .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-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-list {
-        width: 100%;
-        height: 100%;
-        overflow-y: auto;
-        display: flex;
-        flex-direction: column;
-        gap: 8px;
+      .warning-time {
+        font-size: 14px;
+        color: #ccc;
       }
 
-      .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;
+        &.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

@@ -31,268 +31,144 @@ import { testBeltLaneFire } from './configurable.data';
 import ModuleCommon from './components/ModuleCommon.vue';
 import SubApp from '/@/components/vent/micro/createSubApp.vue';
 // import { BDFireMock } from './mock';
-import { getDevice } from './configurable.api';
+import { getDataHome } from './configurable.api';
 const { configs, devicesTypes, fetchConfigs } = useInitConfigs();
 const { updateEnhancedConfigs, updateData, data } = useInitPage('皮带巷三级防灭火系统');
-const readData = {
-  pdhzfxInfo: [
-    {
-      beltName: '皮带巷1',
-      sysList: [
-        {
-          beltName: '东翼胶带运输大巷皮带',
-          warnlevel: '重大风险',
-        },
-        {
-          beltName: '1102主运顺槽皮带',
-          warnlevel: '报警',
-        },
-        {
-          beltName: '1101主运顺槽皮带',
-          warnlevel: '低分险',
-        },
-        {
-          beltName: '东翼胶带运输大巷皮带',
-          warnlevel: '一般风险',
-        },
-        {
-          beltName: '东翼胶带运输大巷皮带',
-          warnlevel: '较大风险',
-        },
-      ],
-    },
-  ],
-  spray_auto: [
-    {
-      beltName: '皮带巷1',
-      sysList: [
-        {
-          netstatus: '1',
-          deviceStatus: '1',
-          plsy: '1#区域 1.4MPa',
-          kzms: '手动',
-        },
-      ],
-    },
-    {
-      beltName: '皮带巷2',
-      sysList: [
-        {
-          netstatus: '1',
-          deviceStatus: '1',
-          plqy: '2#区域',
-          plsy: '1.6MPa',
-          kzms: '自动',
-        },
-      ],
-    },
-  ],
-  fmhjcInfo: [
-    {
-      beltName: '皮带巷1',
-      sysList: [
-        {
-          warnLevel: '一般风险',
-          deviceType: '微震测声传感器',
-        },
-        {
-          warnLevel: '一般风险',
-          deviceType: '光纤测温传感器',
-        },
-        {
-          warnLevel: '一般风险',
-          deviceType: 'HCI传感器',
-        },
-        {
-          warnLevel: '一般风险',
-          deviceType: '烟雾传感器',
-        },
-        {
-          warnLevel: '一般风险',
-          deviceType: 'CO传感器',
-        },
-        {
-          warnLevel: '一般风险',
-          deviceType: '火焰传感器',
-        },
-        {
-          warnLevel: '一般风险',
-          deviceType: '温度传感器',
-        },
-        {
-          warnLevel: '一般风险',
-          deviceType: '多参数传感器',
-        },
-        {
-          warnLevel: '一般风险',
-          deviceType: 'AI视频火焰分析',
-        },
-      ],
-    },
-    {
-      beltName: '皮带巷2',
-      sysList: [
-        {
-          warnLevel: '一般风险',
-          deviceType: '微震测声传感器',
-        },
-        {
-          warnLevel: '一般风险',
-          deviceType: '光纤测温传感器',
-        },
-        {
-          warnLevel: '一般风险',
-          deviceType: 'HCI传感器',
-        },
-        {
-          warnLevel: '一般风险',
-          deviceType: '烟雾传感器',
-        },
-        {
-          warnLevel: '一般风险',
-          deviceType: 'CO传感器',
-        },
-        {
-          warnLevel: '一般风险',
-          deviceType: '火焰传感器',
-        },
-        {
-          warnLevel: '一般风险',
-          deviceType: '温度传感器',
-        },
-        {
-          warnLevel: '一般风险',
-          deviceType: '多参数传感器',
-        },
-        {
-          warnLevel: '一般风险',
-          deviceType: 'AI视频火焰分析',
-        },
-      ],
-    },
-  ],
-  yjkfArray: [
-    {
-      beltName: '皮带巷1',
-      aqjkData: [
-        {
-          deviceName: '风门1',
-          frontDoorStatus: '关闭',
-          backDoorStatus: '开启',
-          netStatus: '在线',
-        },
-        {
-          deviceName: '风门2',
-          frontDoorStatus: '关闭',
-          backDoorStatus: '开启',
-          netStatus: '在线',
-        },
-        {
-          deviceName: '风门3',
-          frontDoorStatus: '关闭',
-          backDoorStatus: '开启',
-          netStatus: '在线',
-        },
-        {
-          deviceName: '风门4',
-          frontDoorStatus: '开启',
-          backDoorStatus: '开启',
-          netStatus: '在线',
-        },
-        {
-          deviceName: '风门5',
-          frontDoorStatus: '开启',
-          backDoorStatus: '开启',
-          netStatus: '在线',
-        },
-        {
-          deviceName: '风门6',
-          frontDoorStatus: '开启',
-          backDoorStatus: '开启',
-          netStatus: '在线',
-        },
-        {
-          deviceName: '风门7',
-          frontDoorStatus: '关闭',
-          backDoorStatus: '关闭',
-          netStatus: '在线',
-        },
-        {
-          deviceName: '风门8',
-          frontDoorStatus: '关闭',
-          backDoorStatus: '关闭',
-          netStatus: '在线',
-        },
-        {
-          deviceName: '风门9',
-          frontDoorStatus: '关闭',
-          backDoorStatus: '关闭',
-          netStatus: '在线',
-        },
-      ],
-    },
-    {
-      beltName: '皮带巷2',
-      aqjkData: [
-        {
-          deviceName: '1#风门',
-          frontDoorStatus: '关闭',
-          backDoorStatus: '开启',
-          netStatus: '在线',
-        },
-        {
-          deviceName: '2#风门',
-          frontDoorStatus: '关闭',
-          backDoorStatus: '开启',
-          netStatus: '在线',
-        },
-        {
-          deviceName: '3#风门',
-          frontDoorStatus: '关闭',
-          backDoorStatus: '开启',
-          netStatus: '在线',
-        },
-        {
-          deviceName: '4#风门',
-          frontDoorStatus: '开启',
-          backDoorStatus: '开启',
-          netStatus: '在线',
-        },
-        {
-          deviceName: '5#风门',
-          frontDoorStatus: '开启',
-          backDoorStatus: '开启',
-          netStatus: '在线',
-        },
-        {
-          deviceName: '6#风门',
-          frontDoorStatus: '开启',
-          backDoorStatus: '开启',
-          netStatus: '在线',
-        },
-      ],
-    },
-  ],
-};
 // const readData = ref({});
 function refresh() {
-  fetchConfigs('belt').then(() => {
+  fetchConfigs('Leather').then(() => {
     configs.value = testBeltLaneFire;
-    // const params = {
-    //   devicetype: 'sys',
-    //   systemID: '2028657172566073346',
-    // };
-    // Promise.resolve(getDevice(params)).then(updateData);
-    Promise.resolve(readData).then(updateData);
-    // updateEnhancedConfigs(configs.value);
-    // getDataSource();
+    Promise.resolve(
+      getDataHome({
+        dataList: configs.value
+          .filter((e) => e.deviceType)
+          .map((e) => e.deviceType)
+          .join(','),
+      })
+    ).then((res: any) => {
+      res.gate_control = [
+        {
+          sysId: 2028657172566073346,
+          systemName: '皮带巷三级防灭火系统总',
+          gateMap: [
+            {
+              frontGateOpen: '1',
+              rearGateOpen: '0',
+              positon: '风门1',
+              status: '1',
+            },
+            {
+              frontGateOpen: '0',
+              rearGateOpen: '1',
+              positon: '五盘区402辅运大巷风门',
+              status: '1',
+            },
+            {
+              frontGateOpen: '1',
+              rearGateOpen: '1',
+              positon: '风门3',
+              status: '1',
+            },
+            {
+              frontGateOpen: '0',
+              rearGateOpen: '0',
+              positon: '风门4',
+              status: '1',
+            },
+            {
+              frontGateOpen: '0',
+              rearGateOpen: '0',
+              positon: '风门5',
+              status: '1',
+            },
+            {
+              frontGateOpen: '1',
+              rearGateOpen: '1',
+              positon: '风门6',
+              status: '1',
+            },
+          ],
+        },
+      ];
+      res.monitor_alert = [
+        {
+          devTypeMap: [
+            {
+              name: 'CO传感器',
+              alarmLevel: '101',
+            },
+            {
+              name: '温度传感器',
+              alarmLevel: '101',
+            },
+            {
+              name: '火焰传感器',
+              alarmLevel: '101',
+            },
+            {
+              name: '微震测声传感器',
+              alarmLevel: '101',
+            },
+            {
+              name: '光纤测温传感器',
+              alarmLevel: '101',
+            },
+            {
+              name: 'HCI传感器',
+              alarmLevel: '101',
+            },
+            {
+              name: '烟雾传感器',
+              alarmLevel: '101',
+            },
+            {
+              name: '多参数传感器',
+              alarmLevel: '101',
+            },
+            {
+              name: 'AI视频火焰分析',
+              alarmLevel: '101',
+            },
+          ],
+          sysId: '2028657172566073346',
+          sysName: '皮带巷三级防灭火系统总',
+        },
+      ];
+      res.spray_control = [
+        {
+          systemName: '皮带巷1',
+          sysList: [
+            {
+              netstatus: '1',
+              deviceStatus: '1',
+              plsy: '1#区域 1.4MPa',
+              kzms: '手动',
+            },
+          ],
+        },
+        {
+          systemName: '皮带巷2',
+          sysList: [
+            {
+              netstatus: '1',
+              deviceStatus: '1',
+              plqy: '2#区域',
+              plsy: '1.6MPa',
+              kzms: '自动',
+            },
+          ],
+        },
+      ];
+      updateData(res);
+    });
+    updateEnhancedConfigs(configs.value);
   });
 }
 
 function initInterval() {
   setInterval(() => {
     refresh();
-  }, 60000);
+  }, 5000);
 }
 onMounted(() => {
   refresh();

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

@@ -3,7 +3,7 @@
     <!-- 左侧圆形图标 -->
     <div class="icon-left">
       <div class="icon-circle">
-        <div class="icon" @click="pathClick">3D</div>
+        <div class="icon" @click="pathClick">首页</div>
       </div>
     </div>
     <!-- 中间按钮组 -->
@@ -92,7 +92,7 @@ function handleNavClick(data) {
   emit('changePage', pageType);
 }
 function pathClick() {
-  router.push('/micro-vent-2dModal/configurable/belt/fireS/home');
+  router.push('/micro-vent-3dModal/configurable/belt/fireS/home');
 }
 function openModal() {
   modalVisible.value = !modalVisible.value;
@@ -164,13 +164,13 @@ const handleCancel = () => {
   background: url('/@/assets/images/beltFire/activeBtn.png') center / 100% 100% no-repeat;
 }
 .icon-left .icon {
-  font-size: 14px;
+  font-size: 16px;
   font-weight: bold;
   z-index: 9999;
   cursor: pointer;
 }
 .icon-right .icon {
-  font-size: 14px;
+  font-size: 16px;
   font-weight: bold;
   z-index: 9999;
   cursor: pointer;

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

@@ -11,14 +11,20 @@
       <template #container>
         <slot>
           <Header :deviceType="deviceType" :moduleData="moduleData" :data="data" @select="handleSelect" />
-          <!-- <Content
+          <Content
             v-if="pageType == 'belt'"
             :style="{ height: header.show ? 'calc(100% - 30px)' : '100%' }"
             :moduleData="moduleData"
             :data="selectedDevice"
             :chartData="chartData"
-          /> -->
-          <Content :style="{ height: header.show ? 'calc(100% - 30px)' : '100%' }" :moduleData="moduleData" :data="data" :chartData="chartData" />
+          />
+          <Content
+            v-else
+            :style="{ height: header.show ? 'calc(100% - 30px)' : '100%' }"
+            :moduleData="moduleData"
+            :data="data"
+            :chartData="chartData"
+          />
         </slot>
       </template>
     </ventBox1>
@@ -89,19 +95,19 @@ function redirectTo() {
  * 模块选择切换事件
  * @param selectedItem
  */
-function handleSelect(selectedItem: any) {
-  selectedData.value = selectedItem;
-  if (!selectedItem) return;
+// function handleSelect(selectedItem: any) {
+//   selectedData.value = selectedItem;
+//   if (!selectedItem) return;
 
-  selectedDeviceID.value = options.value[0]?.value;
-  if (selectedItem.id !== undefined && selectedItem.id !== null) {
-    // 确保这个 ID 在当前的 options 里存在
-    const isValid = options.value.some((opt) => opt.value === selectedItem.id);
-    if (isValid) {
-      selectedDeviceID.value = selectedItem.id;
-    }
-  }
-}
+//   selectedDeviceID.value = options.value[0]?.value;
+//   if (selectedItem.id !== undefined && selectedItem.id !== null) {
+//     // 确保这个 ID 在当前的 options 里存在
+//     const isValid = options.value.some((opt) => opt.value === selectedItem.id);
+//     if (isValid) {
+//       selectedDeviceID.value = selectedItem.id;
+//     }
+//   }
+// }
 watch(
   () => props.data,
   (d) => {

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

@@ -3,9 +3,6 @@
     <div class="title">
       <div class="panel-title">
         <div class="tab-title">短路风门管控详情</div>
-        <div>
-          <a-button class="btn" @click="yjControl()">应急控制</a-button>
-        </div>
       </div>
     </div>
     <div class="content-layout">
@@ -76,9 +73,6 @@ const setChildRef = (el, index) => {
     childRefs.value[index] = el;
   }
 };
-function yjControl() {
-  console.log('应急控制');
-}
 function monitorAnimation(selectData, index) {
   if (!selectData?.readData) return;
   const frontOpen = selectData.readData.frontGateOpen === '1';

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

@@ -27,7 +27,7 @@
         </div>
       </div>
     </div>
-    <BottomMenu @change="changeActive" />
+    <!-- <BottomMenu @change="changeActive" /> -->
   </div>
 </template>
 

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

@@ -7,8 +7,10 @@ import _ from 'lodash';
 
 enum Api {
   monitorAndAlertBelt = '/ventanaly-device/monitor/disaster/monitorAndAlertBelt',
-  getDevice = '/modelreq/monitor/device',
+  // 首页数据获取
+  getDataHome = '/ventanaly-device/monitor/disaster/threeLevelFireHomepage',
   getSystem = '/modelreq/monitor/system',
+  getDevice = '/modelreq/monitor/device',
   //车辆干扰排除状态查询
   getStatus = '/ventanaly-device/safety/deviceVehiclePass/switch/status',
   // 车辆干扰排除控制
@@ -16,6 +18,7 @@ enum Api {
 }
 export const getSystem = (params) => defHttp.post({ url: Api.getSystem, params });
 export const getMonitorAndAlertBelt = (params) => defHttp.post({ url: Api.monitorAndAlertBelt, params });
-export const getDevice = (params) => defHttp.post({ url: Api.getDevice, params });
+export const getDataHome = (params) => defHttp.post({ url: Api.getDataHome, params });
 export const getStatus = () => defHttp.get({ url: Api.getStatus });
 export const changeStatus = (params) => defHttp.get({ url: Api.changeStatus, params });
+export const getDevice = (params) => defHttp.post({ url: Api.getDevice, params });

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

@@ -2,7 +2,7 @@ import { Config } from '../../../deviceManager/configurationTable/types';
 // 皮带巷三级防灭火首页
 export const testBeltLaneFire: Config[] = [
   {
-    deviceType: 'pdhzfxpj',
+    deviceType: 'risk_evaluator',
     moduleName: '皮带火灾风险状态整体评价',
     pageType: 'belt',
     moduleData: {
@@ -41,7 +41,7 @@ export const testBeltLaneFire: Config[] = [
       complex_list: [
         {
           type: 'A',
-          readFrom: 'pdhzfxInfo[0].sysList',
+          readFrom: 'risk_evaluator',
           mapFromData: true,
           pagetype: 'complex_list1',
           items: [
@@ -49,8 +49,8 @@ export const testBeltLaneFire: Config[] = [
               title: '',
               contents: [
                 {
-                  label: '${beltName}',
-                  value: '${warnlevel}',
+                  label: '${systemname}',
+                  value: '${alarm_level}',
                   info: '',
                 },
               ],
@@ -68,7 +68,7 @@ export const testBeltLaneFire: Config[] = [
     },
   },
   {
-    deviceType: 'fmhjcInfo',
+    deviceType: 'monitor_alert',
     moduleName: '防灭火检测与预警信息',
     pageType: 'belt',
     moduleData: {
@@ -77,7 +77,7 @@ export const testBeltLaneFire: Config[] = [
         readFrom: '',
         selector: {
           show: true,
-          value: '${beltName}',
+          value: '${sysName}',
         },
         slot: {
           show: false,
@@ -107,7 +107,7 @@ export const testBeltLaneFire: Config[] = [
       complex_list: [
         {
           type: 'C',
-          readFrom: 'sysList',
+          readFrom: 'devTypeMap',
           mapFromData: true,
           pagetype: 'Belt',
           items: [
@@ -115,9 +115,8 @@ export const testBeltLaneFire: Config[] = [
               title: '',
               contents: [
                 {
-                  label: '${deviceType}',
-                  value: '${frontDoorStatus}',
-                  info: '',
+                  label: '${name}',
+                  value: '${alarmLevel}',
                 },
               ],
             },
@@ -134,7 +133,7 @@ export const testBeltLaneFire: Config[] = [
     },
   },
   {
-    deviceType: 'spray_auto',
+    deviceType: 'spray_control',
     moduleName: '喷淋灭火系统',
     pageType: 'belt',
     moduleData: {
@@ -143,7 +142,7 @@ export const testBeltLaneFire: Config[] = [
         readFrom: '',
         selector: {
           show: true,
-          value: '${beltName}',
+          value: '${systemName}',
         },
         slot: {
           show: false,
@@ -225,7 +224,7 @@ export const testBeltLaneFire: Config[] = [
     },
   },
   {
-    deviceType: 'yjkfArray',
+    deviceType: 'gate_control',
     moduleName: '应急控风减灾',
     pageType: 'belt',
     moduleData: {
@@ -234,7 +233,7 @@ export const testBeltLaneFire: Config[] = [
         readFrom: '',
         selector: {
           show: true,
-          value: '${beltName}',
+          value: '${systemName}',
         },
         slot: {
           show: false,
@@ -262,23 +261,24 @@ export const testBeltLaneFire: Config[] = [
       table: [
         {
           type: 'C',
-          readFrom: 'aqjkData',
+          readFrom: 'gateMap',
+          pageType: 'Belt',
           columns: [
             {
               name: '设备位置',
-              prop: 'deviceName',
+              prop: 'positon',
             },
             {
               name: '前门状态',
-              prop: 'frontDoorStatus',
+              prop: 'frontGateOpen',
             },
             {
               name: '后门状态',
-              prop: 'backDoorStatus',
+              prop: 'rearGateOpen',
             },
             {
               name: '网络状态',
-              prop: 'netStatus',
+              prop: 'status',
             },
           ],
         },
@@ -1133,7 +1133,7 @@ export const testSpary: Config[] = [
   {
     deviceType: '',
     moduleName: '摄像头视频信号',
-    pageType: '',
+    pageType: 'beltYjkf',
     moduleData: {
       header: {
         show: false,

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

@@ -1,14 +1,13 @@
 <template>
   <div class="camera-modal">
     <div class="camrea-area">
-      <!-- 完全沿用你成熟的播放器容器 -->
       <div v-if="renderPlayer" ref="playerRef" style="display: flex; width: 100%; height: 100%; overflow-y: auto; pointer-events: none"></div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { onMounted, nextTick, watch, ref, onBeforeUnmount } from 'vue';
+import { onMounted, ref, onBeforeUnmount, watch, nextTick } from 'vue';
 import { useCamera } from '/@/hooks/system/useCameraPianation';
 
 const props = defineProps({
@@ -21,8 +20,8 @@ const props = defineProps({
 const { getCamera, removeCamera } = useCamera();
 const playerRef = ref();
 const renderPlayer = ref(true);
-
-// 提取所有摄像头
+const cameraLoaded = ref(false);
+// 提取摄像头
 const allCameras = () => {
   const list: any[] = [];
   props.data.forEach((device: any) => {
@@ -30,36 +29,38 @@ const allCameras = () => {
       device.cameras.forEach((item) => {
         list.push({
           ...item,
-          deviceID: device.deviceID, // 携带设备ID
+          deviceID: device.deviceID,
         });
       });
     }
   });
   return list;
 };
+
 const loadCameras = async () => {
-  // await nextTick();
+  if (cameraLoaded.value) return;
+  await nextTick();
   const cameras = allCameras();
   if (cameras.length === 0) return;
+
   removeCamera(playerRef);
   await getCamera('', playerRef, renderPlayer, '', cameras);
+  cameraLoaded.value = true;
 };
 watch(
   () => props.data,
-  (newVal, oldVal) => {
-    if (newVal && newVal !== oldVal) {
+  (newVal) => {
+    if (newVal && newVal.length > 0) {
       loadCameras();
     }
   },
-  { deep: true }
+  { deep: true, immediate: true }
 );
-onMounted(async () => {
-  await loadCameras();
+onMounted(() => {
+  loadCameras();
 });
-
-// 销毁
 onBeforeUnmount(() => {
-  removeCamera(playerRef);
+  // removeCamera(playerRef);
 });
 </script>
 
@@ -81,7 +82,6 @@ onBeforeUnmount(() => {
   .liveVideo {
     width: 430px !important;
     height: 276px !important;
-    align-self: auto !important;
     background-size: 100% 100% !important;
   }
   .video-parent {

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

@@ -7,7 +7,7 @@
         <div v-for="(ctx, j) in item.contents" :key="`vvhccdclc${j}`" :class="`list-item__content_${type} ${getBgClass(ctx.value)}`">
           <div class="list-item__label"> {{ ctx.label }}</div>
           <div class="list-item__value" :class="`list-item__value_${type}`">
-            {{ ctx.value }}
+            {{ getAlertName(ctx.value) }}
           </div>
         </div>
       </div>
@@ -16,7 +16,9 @@
 </template>
 
 <script lang="ts" setup>
-withDefaults(
+import { onMounted } from 'vue';
+
+const props = withDefaults(
   defineProps<{
     listConfig: {
       title: string;
@@ -34,23 +36,40 @@ withDefaults(
     type: 'C',
   }
 );
-
+const alarmMap: Record<string | number, string> = {
+  '101': '绿色预警',
+  '102': '蓝色预警',
+  '103': '黄色预警',
+  '104': '橙色预警',
+  '201': '报警',
+  '0': '正常',
+  '1001': '网络中断',
+};
 const getBgClass = (riskLevel: string) => {
   switch (riskLevel) {
-    case '低风险':
+    case '0':
+      return 'bg-lowRisk';
+    case '101':
       return 'bg-lowRisk';
-    case '一般风险':
+    case '102':
       return 'bg-normalRisk';
-    case '较大风险':
+    case '103':
       return 'bg-greaterRisk ';
-    case '重大风险':
+    case '104':
       return 'bg-majorRisk';
-    case '报警':
+    case '201':
+      return 'bg-warning';
+    case '1001':
       return 'bg-warning';
     default:
       return 'bg-lowRisk';
   }
 };
+const getAlertName = (riskLevel: string | number) => {
+  const key = String(riskLevel);
+  return alarmMap[key] || riskLevel;
+};
+onMounted(() => {});
 </script>
 
 <style lang="less" scoped>
@@ -61,14 +80,14 @@ const getBgClass = (riskLevel: string) => {
   background-repeat: no-repeat;
   position: relative;
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   list-style: none;
 }
 
 .list-item_A {
   align-items: center;
   text-align: center;
-  margin: 10px 10px 17px 10px;
+  margin: 21px 0px;
   display: flex;
   flex-direction: column; /* 竖排 */
   gap: 5px; /* 间距 */

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

@@ -7,7 +7,7 @@
         <div v-for="(ctx, j) in item.contents" :key="`vvhccdclc${j}`" :class="`list-item__content_${type}`">
           <div class="item-top">
             <div class="sensor-icon"></div>
-            <div class="risk-text">{{ ctx.value }}</div>
+            <div class="risk-text">{{ getAlertName(ctx.value) }}</div>
           </div>
           <div class="item-bottom">
             {{ ctx.label }}
@@ -39,9 +39,20 @@ const props = withDefaults(
     type: 'C',
   }
 );
-onMounted(() => {
-  console.log('listConfig', props.listConfig);
-});
+const alarmMap: Record<string | number, string> = {
+  '101': '绿色预警',
+  '102': '蓝色预警',
+  '103': '黄色预警',
+  '104': '橙色预警',
+  '201': '报警',
+  '0': '正常',
+  '1001': '网络中断',
+};
+const getAlertName = (riskLevel: string | number) => {
+  const key = String(riskLevel);
+  return alarmMap[key] || riskLevel;
+};
+onMounted(() => {});
 </script>
 
 <style lang="less" scoped>
@@ -52,7 +63,7 @@ onMounted(() => {
   background-repeat: no-repeat;
   position: relative;
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   list-style: none;
 }
 .list_wrapper_C {

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

@@ -4,12 +4,12 @@
       <div class="label-t" v-for="(item, index) in columns" :key="`svvhbcth-${index}`" :style="{ flexBasis }">{{ item.name }}</div>
     </div>
     <div ref="scrollRef" class="table__content_list" :class="`table__content_list_${type}`">
-      <div class="table__content_list_row" v-for="(item, index) in data" :key="`svvhbct-${index}`">
+      <div class="table__content_list_row" v-for="(item, index) in data.data.gateMap" :key="`svvhbct-${index}`">
         <div v-for="(t, i) in columns" :key="`svvhbctr-${i}`" :style="{ flexBasis }" :class="`table__content__list_item_${type}`">
           <slot :name="t.prop" :scope="item">
             <span>
               <span
-                v-if="t.prop === 'frontDoorStatus' || t.prop === 'backDoorStatus' || t.prop === 'netStatus'"
+                v-if="t.prop === 'frontGateOpen' || t.prop === 'rearGateOpen' || t.prop === 'status'"
                 :class="`status-dot ${getStatusClass(get(item, t.prop))}`"
               ></span>
               {{ get(item, t.prop) }}
@@ -21,25 +21,23 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { computed, defineProps, onMounted, ref } from 'vue';
+import { computed, onMounted, ref } from 'vue';
 import _ from 'lodash';
 import { useAutoScroll } from '/@/hooks/core/useAutoScroll';
 
 let props = withDefaults(
   defineProps<{
-    /** B | C */
     type: string;
     autoScroll: boolean;
-    /** 列表表头配置，每个prop都有其对应的slot来提供定制化功能 */
     columns: { prop: string; name: string }[];
-    data: any[];
+    data: any; // 1. 将类型从 any[] 改为 any，允许接收对象
     defaultValue: string;
   }>(),
   {
     type: 'B',
     autoScroll: false,
     columns: () => [],
-    data: () => [],
+    data: () => ({}), // 2. 默认值改为空对象
     defaultValue: '-',
   }
 );
@@ -50,12 +48,12 @@ if (props.autoScroll) {
 }
 const getStatusClass = (status) => {
   switch (status) {
-    case '在线':
+    case '1':
       return 'online';
-    case '开启':
+    case '1':
       return 'open';
-    case '关闭':
-    case '离线':
+    case '0':
+    case '0':
       return 'offline';
     default:
       return '';
@@ -69,9 +67,7 @@ function get(o, p) {
   const d = _.get(o, p);
   return _.isNil(d) ? props.defaultValue : d === '' ? props.defaultValue : d;
 }
-onMounted(() => {
-  console.log(props.data, '-----data');
-});
+onMounted(() => {});
 </script>
 <style lang="less" scoped>
 @import '/@/design/theme.less';

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

@@ -6,8 +6,13 @@
       <div class="control-bar">
         <a-button class="control-btn" @click="handleSpary(true)">启动喷淋</a-button>
         <a-button class="control-btn" @click="handleSpary(false)">停止喷淋</a-button>
-        <a-button class="control-btn">手动控制</a-button>
-        <a-button class="control-btn">自动控制</a-button>
+        <div class="switch-wrapper">
+          <span class="text1">自动</span>
+          <div class="toggle-switch" :class="{ 'is-on': isOn }" @click="toggleSwitch">
+            <div class="slider"></div>
+          </div>
+          <span class="text1">手动</span>
+        </div>
       </div>
       <!-- 循环渲染分组 -->
       <div v-for="(beltData, index) in data" :key="index" class="block-item">
@@ -79,7 +84,7 @@ const props = defineProps<{
 
 // --- 存储选中的 sid ---
 const selectedSids = ref<string[]>([]);
-
+const isOn = ref(false);
 // --- 处理勾选变化 ---
 const handleCheckChange = (checked: boolean, sid: string) => {
   if (checked) {
@@ -99,23 +104,7 @@ const handleCheckChange = (checked: boolean, sid: string) => {
 const getBgClass = (index) => {
   return index % 2 === 0 ? 'bg-1' : 'bg-2';
 };
-/**
- * 根据配置项从当前皮带数据中获取对应的值
- * @param currentItem 当前循环到的单条皮带数据 (beltData)
- * @param configItem 配置项 (包含 code 和 trans)
- */
-const getItemText = (currentItem: any, configItem: { code: string; trans?: any }) => {
-  // 1. 获取原始值: 通过 code 字段从 currentItem 中取值
-  const rawValue = currentItem[configItem.code];
 
-  // 2. 如果有翻译映射 (trans)，则进行翻译
-  if (configItem.trans && configItem.trans[rawValue] !== undefined) {
-    return configItem.trans[rawValue];
-  }
-
-  // 3. 没有翻译则直接返回原始值
-  return rawValue;
-};
 const handleSpary = (state: boolean) => {
   if (state) {
     console.log('启动喷淋');
@@ -123,6 +112,9 @@ const handleSpary = (state: boolean) => {
     console.log('停止喷淋');
   }
 };
+function toggleSwitch() {
+  isOn.value = !isOn.value;
+}
 onMounted(() => {
   console.log(props.config, '123');
   console.log(props.data, 'data');
@@ -149,8 +141,11 @@ onMounted(() => {
   background: url('@/assets/images/beltFire/yjkf/1-2title.png');
   background-size: 100% 100%;
   display: flex;
-  justify-content: space-around;
+  justify-content: space-between;
+  align-items: center;
   height: 50px;
+  padding: 0 10px;
+  box-sizing: border-box;
 }
 .control-btn {
   background: linear-gradient(180deg, #34b7f1 0%, #1890ff 100%);
@@ -159,7 +154,7 @@ onMounted(() => {
   font-size: 12px;
   padding: 2px 8px;
   height: 24px;
-  margin: auto;
+  margin-left: 5px;
   box-shadow: 0 0 6px 2px rgba(24, 144, 255, 0.4);
   display: inline-flex;
   align-items: center;
@@ -339,4 +334,53 @@ onMounted(() => {
     opacity: 1;
   }
 }
+.toggle-switch {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 5px 5px;
+  width: 40px;
+  height: 20px;
+  border-radius: 15px;
+  position: relative;
+  cursor: pointer;
+  border: 1px solid #15567f;
+  box-sizing: border-box;
+  margin-top: 3px;
+  background: #0f2840; /* 加背景更美观 */
+
+  .slider {
+    position: absolute;
+    top: 3px;
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    background-color: #ffffff;
+    transition: all 0.3s ease;
+    z-index: 1;
+
+    /* 默认关闭：左边 */
+    left: 3px;
+  }
+  /* 开启：滑块去右边 */
+  &.is-on {
+    .slider {
+      left: calc(100% - 15px);
+    }
+  }
+}
+.text1 {
+  line-height: 30px;
+  font-size: 12px;
+  padding-left: 0px;
+  font-style: normal;
+}
+.switch-wrapper {
+  margin-right: 10px;
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
 </style>

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

@@ -39,7 +39,7 @@
       <div v-for="item in filteredList('analysis')" :key="item.type">
         <div class="section-title">{{ item.title }}</div>
         <div class="analysis-list">
-          <div v-for="(ana, idx) in monitData" :key="idx">
+          <div v-for="(ana, idx) in monitData" :key="idx" class="item-style">
             <div class="analysis-item">
               <span class="label">{{ ana.strName }}</span>
               <span class="text">{{ ana.judge }}</span>
@@ -159,7 +159,6 @@ onMounted(async () => {
 
 .monitor-container {
   width: 370px;
-  height: 410px;
   background: linear-gradient(180deg, #0d213f 0%, #0a162a 100%);
   border: 1px solid #1a3b5d;
   color: #fafafa;
@@ -361,8 +360,13 @@ onMounted(async () => {
 .analysis-list {
   font-size: 12px;
   line-height: 1.6;
+  padding: 5px;
+}
+.item-style {
+  border: 2px solid #1c75aa;
+  border-radius: 4px;
+  margin-top: 10px;
 }
-
 .analysis-item {
   background: url('@/assets/images/beltFire/fireMonitor/2-4.png') no-repeat;
   background-size: 100% 100%;

src/views/vent/home/configurable/components/content.vue

@@ -114,13 +114,13 @@
         </template>
         <!-- 表格部分 -->
         <template v-if="config.name === 'table'">
-          <template v-if="config.pagetype === 'Belt'">
+          <template v-if="config.pageType === 'Belt'">
             <CustomTableBelt
               class="content__module text-center overflow-auto"
               :type="config.type"
               :columns="config.columns"
               :auto-scroll="config.autoScroll"
-              :data="config.data"
+              :data="config"
             />
           </template>
           <template v-else>