[Feat 0000]皮带巷代码合并

src/views/vent/BeltLaneThreeLevelFire/home/index.vue

@@ -251,65 +251,6 @@ const readData = {
         },
       ],
     },
-    {
-      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: '在线',
-        },
-        {
-          deviceName: '风门7',
-          frontDoorStatus: '关闭',
-          backDoorStatus: '关闭',
-          netStatus: '在线',
-        },
-        {
-          deviceName: '风门8',
-          frontDoorStatus: '关闭',
-          backDoorStatus: '关闭',
-          netStatus: '在线',
-        },
-        {
-          deviceName: '风门9',
-          frontDoorStatus: '关闭',
-          backDoorStatus: '关闭',
-          netStatus: '在线',
-        },
-      ],
-    },
   ],
 };
 // const readData = ref({});

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

@@ -2,310 +2,385 @@
 <template>
   <div class="company-home">
     <!-- 顶部标题栏 + 下拉选择 -->
-    <!-- <div class="header-container">
-      <customHeader> 皮带巷智能管控 </customHeader>
-    </div> -->
-
+    <customHeader> 皮带巷智能管控 </customHeader>
+    <div class="top-bg">
+      <BeltNav />
+    </div>
     <!-- 主体区域 -->
     <div class="border">
       <!-- 配置模块区 -->
-      <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="readData"
-        :visible="true"
-      />
+      <template v-if="pageType == 'fireMonitor'">
+        <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'">
+        <ModuleCommon1
+          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>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-  import { onMounted, ref } from 'vue';
-  // import customHeader from './components/customHeader-belt.vue';
-  import { useInitConfigs, useInitPage } from '../hooks/useInit';
-  import { testBeltNew } from './configurable.data';
-  import ModuleCommon from './components/ModuleCommon.vue';
-  import { is } from '/@/utils/is';
-
-  // 初始化配置
-  const { configs, fetchConfigs } = useInitConfigs();
-  const { updateEnhancedConfigs, updateData } = useInitPage('皮带巷智能管控');
+import { onMounted, ref, watch, computed } from 'vue';
+import customHeader from './components/customHeader-belt.vue';
+import { useInitConfigs, useInitPage } from '../hooks/useInit';
+import { testBeltNew, testYjkf } from './configurable.data';
+import ModuleCommon from './components/ModuleCommon.vue';
+import ModuleCommon1 from './components/ModuleCommonBelt.vue';
+import { is } from '/@/utils/is';
+import BeltNav from './components/BeltNav.vue';
+import { config } from 'process';
+import { useRouter, useRoute } from 'vue-router';
+import { getSystem } from './configurable.api';
+const router = useRouter();
+const route = useRoute();
+// 初始化配置
+const { configs, fetchConfigs } = useInitConfigs();
+const { updateEnhancedConfigs, updateData, data } = useInitPage('皮带巷智能管控');
+const pageType = computed(() => route.query.pageType || 'fireMonitor');
+// 下拉框选项
+const beltOptions = [
+  { id: '1', beltName: '主运巷皮带 1' },
+  { id: '2', beltName: '主运巷皮带 2' },
+];
 
-  // 下拉框选项
-  const beltOptions = [
-    { id: '1', beltName: '主运巷皮带 1' },
-    { id: '2', beltName: '主运巷皮带 2' },
-  ];
+const selectedBeltId = ref('1');
 
-  const selectedBeltId = ref('1');
-
-  // 模拟数据
-  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: '启动喷淋',
-          },
-        ],
-      },
-    ],
-    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: '' },
+// 模拟数据
+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' },
     },
-    vehicleCOAnalysis: {
-      isRisk: true,
-      activityList: [
+  ],
+  pdhzfxInfo: [
+    {
+      beltName: '主运巷皮带1',
+      warningLevel: '一般风险',
+      sysList: [
         {
-          pos: '1#皮带区域',
-          vehicle: '车辆23425',
-          status: '0',
-          // vehicle2: '车辆53456',
-          // vehicle3: '未通过车辆',
-          // coReason1: 'CO浓度异常升高，已确认为车辆干扰',
-          // coReason3: 'CO浓度异常升高，已确认非车辆干扰',
-          // possibleCause: '皮带摩擦过热或电器设备故障',
-          // recommendation: '立即检查3#皮带区域设备',
+          time: '2026-03-21 13:23:34',
+          area: '3#皮带区域',
+          type: 'CO浓度异常',
+          status: '三级预警',
+          advice: '立即检查该区域设备，启动应急预案',
+          action: '启动喷淋',
         },
         {
-          pos: '2#皮带区域',
-          vehicle: '车辆53456',
-          status: '1',
+          time: '2026-03-21 13:23:34',
+          area: '3#皮带区域',
+          type: 'CO浓度异常',
+          status: '三级预警',
+          advice: '立即检查该区域设备，启动应急预案',
+          action: '启动喷淋',
         },
         {
-          pos: '3#皮带区域',
-          vehicle: '未通过车辆',
-          status: '0',
+          time: '2026-03-21 13:23:34',
+          area: '3#皮带区域',
+          type: 'CO浓度异常',
+          status: '三级预警',
+          advice: '立即检查该区域设备，启动应急预案',
+          action: '启动喷淋',
         },
       ],
-      analysisList: [
-        {
-          pos: '1#皮带区域',
-          analysisText: 'CO浓度异常升高，已确认为车辆干扰',
-        },
-        {
-          pos: '1#皮带区域',
-          analysisText: 'CO浓度异常升高，已确认为车辆干扰',
-        },
-      ],
-      possibleCause: '皮带摩擦过热或电器设备故障',
-      recommendation: '立即检查3#皮带区域设备',
     },
-  };
+  ],
+  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#皮带区域设备',
+  },
+  doorData: [
+    {
+      id: 1,
+      position: '16联巷短路风门',
+      frontStatus: '关闭',
+      backStatus: '关闭',
+      networkStatus: '在线',
+      modelImg: '',
+      open: true,
+    },
+    {
+      id: 2,
+      position: '18联巷短路风门',
+      frontStatus: '打开',
+      backStatus: '打开',
+      networkStatus: '在线',
+      modelImg: '',
+      open: true,
+    },
+    {
+      id: 3,
+      position: '23联巷短路风门',
+      frontStatus: '关闭',
+      backStatus: '关闭',
+      networkStatus: '在线',
+      modelImg: '',
+      open: false,
+    },
+  ],
+};
 
-  // 下拉框切换处理
-  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 '';
   }
+}
 
-  // 刷新数据
-  function refresh() {
-    fetchConfigs('belt').then(() => {
+// 刷新数据
+function refresh() {
+  fetchConfigs('belt').then(() => {
+    if (route.query.pageType == 'fireMonitor') {
       configs.value = testBeltNew;
-      Promise.resolve(readData).then(updateData);
-      updateEnhancedConfigs(configs.value);
-    });
-  }
-
-  // 定时刷新
-  function initInterval() {
-    setInterval(() => {
-      refresh();
-    }, 60000);
-  }
+    } else if (route.query.pageType == 'emergencyControl') {
+      configs.value = testYjkf;
+    } else if (route.query.pageType == 'sprayControl') {
+      configs.value = testYjkf;
+    } else {
+      configs.value = testBeltNew;
+    }
+    Promise.resolve(readData).then(updateData);
+    updateEnhancedConfigs(configs.value);
+  });
+}
 
-  onMounted(() => {
+// 定时刷新
+function initInterval() {
+  setInterval(() => {
     refresh();
-    initInterval();
-  });
+  }, 60000);
+}
+
+watch(
+  () => route.query.pageType,
+  (newVal) => {
+    if (newVal) {
+      console.log('切换页面：', newVal);
+      refresh(); // 关键：切换菜单自动刷新
+    }
+  },
+  { immediate: true }
+);
+
+onMounted(() => {
+  console.log(pageType, '123');
+  refresh();
+  initInterval();
+});
 </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;
+    overflow: hidden;
 
-    .header-container {
-      position: absolute;
-      top: 20px;
-      left: 20px;
-      z-index: 10;
+    .box-container {
+      position: relative;
+      width: 100%;
+      height: 100%;
     }
+  }
 
-    .border {
-      width: 100%;
-      height: 94%;
-      background: url('/@/assets/images/beltFire/mainbj.png') no-repeat;
-      background-size: 100% 100%;
-      margin-top: 55px;
-      position: relative;
-      overflow: hidden;
+  // 中间预警结果区
+  .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;
 
-      .box-container {
-        position: relative;
-        width: 100%;
-        height: 100%;
-      }
+    .warning-header {
+      font-size: 18px;
+      font-weight: bold;
+      margin-bottom: 10px;
+      color: #ff6b6b;
     }
 
-    // 中间预警结果区
-    .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-list {
+      width: 100%;
+      height: 100%;
+      overflow-y: auto;
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
 
-      .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;
     }
   }
+}
 </style>

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

@@ -3,9 +3,9 @@
   <div class="company-home">
     <div class="border">
       <customHeader>皮带巷三级防灭火系统</customHeader>
-      <div style="width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 0">
+      <!-- <div style="width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 0">
         <SubApp />
-      </div>
+      </div> -->
       <div class="box-container">
         <ModuleCommon
           v-for="cfg in configs"
@@ -14,6 +14,7 @@
           :module-data="cfg.moduleData"
           :module-name="cfg.moduleName"
           :device-type="cfg.deviceType"
+          :page-type="cfg.pageType"
           :data="readData"
           :visible="true"
         />
@@ -23,355 +24,270 @@
   </div>
 </template>
 <script setup lang="ts">
-  import { onMounted, ref } from 'vue';
-  import customHeader from './components/customHeader-belt.vue';
-  import { useInitConfigs, useInitPage } from '../hooks/useInit';
-  import { testBeltLaneFire } from './configurable.data';
-  import ModuleCommon from './components/ModuleCommonBelt.vue';
-  import SubApp from '/@/components/vent/micro/createSubApp.vue';
-  import { read } from 'fs';
-  // import { BDFireMock } from './mock';
-  const { configs, fetchConfigs } = useInitConfigs();
-  const { updateEnhancedConfigs, updateData } = useInitPage('皮带巷三级防灭火系统');
-  const readData = {
-    pdhzfxInfo: [
-      {
-        beltName: '测试1',
-        sysList: [
-          {
-            beltName: '东翼胶带运输大巷皮带',
-            warnlevel: '重大风险',
-          },
-          {
-            beltName: '1102主运顺槽皮带',
-            warnlevel: '报警',
-          },
-          {
-            beltName: '1101主运顺槽皮带',
-            warnlevel: '低分险',
-          },
-          {
-            beltName: '东翼胶带运输大巷皮带',
-            warnlevel: '一般风险',
-          },
-          {
-            beltName: '东翼胶带运输大巷皮带',
-            warnlevel: '较大风险',
-          },
-        ],
-      },
-    ],
-    plmhInfo: [
-      {
-        beltName: '测试1',
-        sysList: [
-          {
-            netstatus: '1',
-            yxzt: '1',
-            plsy: '1#区域 1.4MPa',
-            kzms: '手动',
-          },
-        ],
-      },
-      {
-        beltName: '测试2',
-        sysList: [
-          {
-            netstatus: '1',
-            yxzt: '1',
-            plqy: '1#区域',
-            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: '在线',
-          },
-          {
-            deviceName: '风门7',
-            frontDoorStatus: '关闭',
-            backDoorStatus: '关闭',
-            netStatus: '在线',
-          },
-          {
-            deviceName: '风门8',
-            frontDoorStatus: '关闭',
-            backDoorStatus: '关闭',
-            netStatus: '在线',
-          },
-          {
-            deviceName: '风门9',
-            frontDoorStatus: '关闭',
-            backDoorStatus: '关闭',
-            netStatus: '在线',
-          },
-        ],
-      },
-    ],
-  };
-  // const readData = ref({});
-  function refresh() {
-    fetchConfigs('belt').then(() => {
-      configs.value = testBeltLaneFire;
-      Promise.resolve(readData).then(updateData);
-      // updateEnhancedConfigs(configs.value);
-      // getDataSource();
-    });
-  }
-  // async function getDataSource() {
-  //   const res = await list({ devicetype: 'belt', pagetype: 'normal' });
-  //   let dataSource: any = [];
-  //   dataSource = res.msgTxt[0] && res.msgTxt[0].datalist ? res.msgTxt[0].datalist[0] : {};
-  //   if (dataSource) {
-  //     readData.value = Object.assign(dataSource, dataSource.readData);
-  //   }
-  // }
-
-  // 查询关联设备列表
-  // async function getDeviceList() {
-  //   const res = await systemList({ devicetype: 'sys', systemID: optionValue.value });
-  //   const result = res.msgTxt;
-  //   const deviceArr = <DeviceType[]>[];
-  //   result.forEach((item) => {
-  //     const data = item['datalist'].filter((data: any) => {
-  //       const readData = data.readData;
-  //       return Object.assign(data, readData);
-  //     });
-  //     if (item.type != 'sys') {
-  //       deviceArr.unshift({ deviceType: item.type, deviceName: item['typeName'] ? item['typeName'] : item['datalist'][0]['typeName'], datalist: data });
-  //     }
-  //   });
-  //   deviceList.value = deviceArr;
-  //   deviceActive.value = deviceArr[0].deviceType;
-  //   deviceChange(0);
-  // }
+import { onMounted, ref } from 'vue';
+import customHeader from './components/customHeader-belt.vue';
+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 { getSystem } from './configurable.api';
+import { read } from 'fs';
+// import { BDFireMock } from './mock';
+const { configs, fetchConfigs } = useInitConfigs();
+const { updateEnhancedConfigs, updateData } = useInitPage('皮带巷三级防灭火系统');
+const readData = {
+  pdhzfxInfo: [
+    {
+      beltName: '测试1',
+      sysList: [
+        {
+          beltName: '东翼胶带运输大巷皮带',
+          warnlevel: '重大风险',
+        },
+        {
+          beltName: '1102主运顺槽皮带',
+          warnlevel: '报警',
+        },
+        {
+          beltName: '1101主运顺槽皮带',
+          warnlevel: '低分险',
+        },
+        {
+          beltName: '东翼胶带运输大巷皮带',
+          warnlevel: '一般风险',
+        },
+        {
+          beltName: '东翼胶带运输大巷皮带',
+          warnlevel: '较大风险',
+        },
+      ],
+    },
+  ],
+  plmhInfo: [
+    {
+      beltName: '测试1',
+      sysList: [
+        {
+          netstatus: '1',
+          yxzt: '1',
+          plsy: '1#区域 1.4MPa',
+          kzms: '手动',
+        },
+      ],
+    },
+    {
+      beltName: '测试2',
+      sysList: [
+        {
+          netstatus: '1',
+          yxzt: '1',
+          plqy: '1#区域',
+          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: [
+    {
+      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: '在线',
+    },
+  ],
+};
+// const readData = ref({});
+function refresh() {
+  fetchConfigs('belt').then(() => {
+    configs.value = testBeltLaneFire;
+    const params = {
+      systemID: '2028657172566073346',
+      type: 'all',
+      devicetype: 'sys',
+    };
+    Promise.resolve(getSystem(params)).then(updateData);
+    updateEnhancedConfigs(configs.value);
+    // getDataSource();
+  });
+}
 
-  function initInterval() {
-    setInterval(() => {
-      refresh();
-    }, 60000);
-  }
-  onMounted(() => {
+function initInterval() {
+  setInterval(() => {
     refresh();
-    initInterval();
-  });
+  }, 60000);
+}
+onMounted(() => {
+  refresh();
+  initInterval();
+});
 </script>
 
 <style lang="less" scoped>
-  .spray-wrapper {
-    width: 100%;
-    height: 100%;
-    background-image: url('/@/assets/images/beltFire/baseMap.png');
-    background-size: cover;
-  }
+.spray-wrapper {
+  width: 100%;
+  height: 100%;
+  background-image: url('/@/assets/images/beltFire/baseMap.png');
+  background-size: cover;
+}
 
-  #spray3D {
-    pointer-events: all;
-  }
+#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;
+.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: 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;
-    }
+    height: 94%;
+    background: url('/@/assets/images/beltFire/mainbj.png') no-repeat;
+    background-size: 100% 100%;
+    margin-top: 50px;
   }
+}
 </style>

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

@@ -1,102 +0,0 @@
-<!-- eslint-disable vue/multi-word-component-names -->
-<template>
-  <div class="company-home">
-    <div class="border">
-      <customHeader :fieldNames="{ label: 'systemname', value: 'id', options: 'children' }">皮带巷智能管控</customHeader>
-      <div class="top-bg">
-        <BeltNav />
-      </div>
-      <div class="box-container">
-        <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"
-        />
-      </div>
-      <!-- 巷道模型组件 -->
-    </div>
-  </div>
-</template>
-<script setup lang="ts">
-import { onMounted, ref } from 'vue';
-import customHeader from './components/customHeader-belt.vue';
-import { useInitConfigs, useInitPage } from '../hooks/useInit';
-import { testJcyj } from './configurable.data';
-import ModuleCommon from './components/ModuleCommonBelt.vue';
-import { getHomeData, sysList, list } from './configurable.api';
-import { message, Modal } from 'ant-design-vue';
-import BeltNav from './components/BeltNav.vue';
-import { doorMock } from './mock.ts';
-
-// import { BDFireMock } from './mock';
-const { configs, fetchConfigs } = useInitConfigs();
-const { updateEnhancedConfigs, data, updateData } = useInitPage('皮带巷智能管控');
-function refresh() {
-  fetchConfigs('belt').then(() => {
-    configs.value = testJcyj;
-    // Promise.resolve(doorMock).then(updateData);
-    // getHomeData({}).then(updateData);
-    // getDataSource();
-  });
-}
-
-function initInterval() {
-  setInterval(() => {
-    // getHomeData({}).then(updateData);
-  }, 60000);
-}
-onMounted(async () => {
-  refresh();
-  initInterval();
-});
-</script>
-
-<style lang="less" scoped>
-.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: 55px;
-  }
-  .top-bg {
-    width: 100%;
-    height: 56px;
-    position: absolute;
-    margin-top: -20px;
-    z-index: 1;
-  }
-}
-</style>

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

@@ -39,30 +39,35 @@ const activeIndex = ref(0);
 const menuList = ref([
   {
     name: '防灭火监测与预警',
-    targatUrl: '/micro-vent-3dModal/beltWarnMonitor/index',
     position: 'left',
+    pageType: 'fireMonitor',
   },
   {
     name: '喷淋系统管控',
-    targatUrl: '/micro-vent-3dModal/SprySystem/index',
     position: 'center',
+    pageType: 'sprayControl',
   },
   {
     name: '应急控风减灾',
-    targatUrl: '/micro-vent-3dModal/beltYjkf/index',
     position: 'right',
+    pageType: 'emergencyControl',
   },
 ]);
 
 // 点击事件
 function handleNavClick(data: any) {
   activeIndex.value = data.index;
-  router.push({ path: data.item.targatUrl });
+  const pageType = `${data.item.pageType}`;
+  router.replace({
+    query: {
+      ...router.currentRoute.value.query, // 保留原有参数
+      pageType: pageType,
+    },
+  });
 }
 
 onMounted(() => {
-  const currentPath = route.path;
-  const idx = menuList.value.findIndex((item) => item.targatUrl === currentPath);
+  const idx = menuList.value.findIndex((item) => item.pageType === route.query.pageType);
   if (idx !== -1) activeIndex.value = idx;
 });
 </script>

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

@@ -0,0 +1,122 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <!-- Header部分 -->
+  <div
+    v-if="headerConfig.show"
+    class="w-100% flex costume-header"
+    :class="headerConfig.selector.toggleIcon ? 'costume-headerToggleIcon' : 'costume-header'"
+  >
+    <!-- 选择下拉框，自动填充剩余空间，这种实现是因为 Select 不支持 suffix -->
+    <Dropdown
+      v-if="headerConfig.selector.show"
+      class="flex-grow-1"
+      :class="!headerConfig.selector.toggleIcon ? 'costume-header_left' : ''"
+      :trigger="['click']"
+      :bordered="false"
+      @open-change="visible = $event"
+    >
+      <div class="flex-basis-100% flex flex-items-center" @click.prevent>
+        <div class="w-100px flex-grow-1 overflow-hidden whitespace-nowrap text-ellipsis" style="margin-left: 20px">
+          {{ selectedDeviceLabel }}
+        </div>
+        <CaretUpOutlined class="w-30px" v-if="visible" />
+        <CaretDownOutlined class="w-30px" v-else />
+      </div>
+      <template #overlay>
+        <Menu :selected-keys="[selectedDeviceID]" @click="selectHandler">
+          <MenuItem v-for="item in options" :key="item.value" :title="item.label">
+            {{ item.label }}
+          </MenuItem>
+        </Menu>
+      </template>
+    </Dropdown>
+    <template v-if="headerConfig.slot.show">
+      <div class="flex-basis-50% flex flex-items-center flex-grow-1 costume-header_right">
+        <SwapOutlined class="w-30px" />
+        <div class="flex-grow-1">
+          {{ selectedDeviceSlot }}
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref, watch } from 'vue';
+import { Config } from '../../../../deviceManager/configurationTable/types';
+import { useInitModule } from '../../../../home/configurable/hooks/useInit';
+import { MenuItem, Menu, Dropdown } from 'ant-design-vue';
+import { CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons-vue';
+const props = defineProps<{
+  moduleData: Config['moduleData'];
+  deviceType: Config['deviceType'];
+  data: any;
+}>();
+
+const emit = defineEmits(['select']);
+
+const visible = ref(false);
+const headerConfig = props.moduleData.header;
+const { selectedDeviceID, selectedDevice, selectedDeviceSlot, selectedDeviceLabel, options, init } = useInitModule(
+  props.deviceType,
+  props.moduleData
+);
+
+function selectHandler({ key }) {
+  selectedDeviceID.value = key;
+  emit('select', selectedDevice.value);
+}
+
+watch(
+  () => props.data,
+  (d) => {
+    init(d);
+    emit('select', selectedDevice.value);
+  },
+  {
+    immediate: true,
+  }
+);
+</script>
+<style scoped>
+@import '/@/design/theme.less';
+
+.costume-header {
+  height: 30px;
+  background: url('@/assets/images/beltFire/4-1.png');
+  background-size: 100% 100%;
+}
+.costume-headerToggleIcon {
+  height: 30px;
+  background: url('@/assets/images/beltFire/4-1.png');
+  background-size: 100% 100%;
+}
+.costume-header_left {
+  border-left: 3px solid;
+  border-right: 3px solid;
+  border-image-source: linear-gradient(to top, #00000033, var(--vent-base-light-bg), #00000033);
+  border-image-slice: 1;
+}
+.costume-header_right {
+  border-right: 3px solid;
+  border-image-source: linear-gradient(to top, #00000033, var(--vent-base-light-bg), #00000033);
+  border-image-slice: 1;
+}
+img {
+  width: 16px;
+  height: 16px;
+  margin-left: 8px;
+}
+::v-deep .zxm-select:not(.zxm-select-customize-input) .zxm-select-selector {
+  /* background-color: transparent; */
+  color: #fff;
+}
+::v-deep .zxm-select-arrow {
+  color: #fff;
+}
+::v-deep .zxm-select-selection-item {
+  color: #fff !important;
+}
+::v-deep .zxm-select-selection-placeholder {
+  color: #fff !important;
+}
+</style>

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

@@ -10,6 +10,7 @@
       </template>
       <template #container>
         <slot>
+          <Header :deviceType="deviceType" :moduleData="moduleData" :data="data" @select="selectedData = $event"></Header>
           <Content
             :style="{ height: header.show ? 'calc(100% - 30px)' : '100%' }"
             :moduleData="moduleData"
@@ -22,104 +23,103 @@
   </Transition>
 </template>
 <script lang="ts" setup>
-  import Header from './headerBelt.vue';
-  import ContentBelt from './contentBelt.vue';
-  import Content from '../../components/content.vue';
-  // import ModuleLeft from './original/moduleLeft.vue';
-  // import ModuleBottom from './original/moduleBottom.vue';
-  import { computed, ref, watch } from 'vue';
-  import ventBox1 from './ventBoxBelt.vue';
-  import { openWindow } from '/@/utils';
-  import { getFormattedText } from '../../hooks/helper';
-  import { useInitModule } from '../../hooks/useInit';
-  // import { ModuleProps } from '../types';
+import Header from './Header.vue';
+import ContentBelt from './contentBelt.vue';
+import Content from '../../components/content.vue';
+// import ModuleLeft from './original/moduleLeft.vue';
+// import ModuleBottom from './original/moduleBottom.vue';
+import { computed, ref, watch } from 'vue';
+import ventBox1 from './ventBoxBelt.vue';
+import { openWindow } from '/@/utils';
+import { getFormattedText } from '../../hooks/helper';
+import { useInitModule } from '../../hooks/useInit';
+// import { ModuleProps } from '../types';
 
-  const props = defineProps<{
-    pageType: string;
-    /** 配置的详细模块信息 */
-    moduleData: any;
-    /** 配置的详细样式信息 */
-    showStyle: any;
-    /** 该模块配置中的设备标识符 */
-    deviceType: string;
-    /** api返回的数据 */
-    data: any;
-    moduleName: string;
-    visible: boolean;
-    chartData?: any;
-  }>();
-  defineEmits(['close', 'click']);
+const props = defineProps<{
+  pageType: string;
+  /** 配置的详细模块信息 */
+  moduleData: any;
+  /** 配置的详细样式信息 */
+  showStyle: any;
+  /** 该模块配置中的设备标识符 */
+  deviceType: string;
+  /** api返回的数据 */
+  data: any;
+  moduleName: string;
+  visible: boolean;
+  chartData?: any;
+}>();
+defineEmits(['close', 'click']);
 
-  const { header } = props.moduleData;
+const { header } = props.moduleData;
 
-  const { selectedDeviceID, selectedDevice, options, init } = useInitModule(props.deviceType, props.moduleData);
+const { selectedDeviceID, selectedDevice, options, init } = useInitModule(props.deviceType, props.moduleData);
 
-  const selectedData = ref();
+const selectedData = ref();
 
-  const style = computed(() => {
-    const size = props.showStyle.size;
-    const position = props.showStyle.position;
-    console.log(props.showStyle, '123123');
-    return size + position + 'position: absolute; pointer-events: auto; z-index: 1';
-  });
-  const pageType = computed(() => {
-    return props.pageType || '';
-  });
-  const capitalizedPosition = computed(() => {
-    return props.showStyle.position.includes('left') ? 'Left' : 'Right';
-  });
+const style = computed(() => {
+  const size = props.showStyle.size;
+  const position = props.showStyle.position;
+  return size + position + 'position: absolute; pointer-events: auto; z-index: 1';
+});
+const pageType = computed(() => {
+  return props.pageType || '';
+});
+const capitalizedPosition = computed(() => {
+  return props.showStyle.position.includes('left') ? 'Left' : 'Right';
+});
 
-  // 根据配置里的定位判断应该使用哪个class
-  function getModuleClass({ size, position }) {
-    const [_, width] = size.match(/width:([0-9]+)px/) || [];
-    if (position.includes('bottom') || parseInt(width) > 800) {
-      return 'module-common module-common-longer';
-    }
-    return 'module-common';
+// 根据配置里的定位判断应该使用哪个class
+function getModuleClass({ size, position }) {
+  const [_, width] = size.match(/width:([0-9]+)px/) || [];
+  if (position.includes('bottom') || parseInt(width) > 800) {
+    return 'module-common module-common-longer';
   }
+  return 'module-common';
+}
 
-  function redirectTo() {
-    const { to } = props.moduleData;
-    if (!to) return;
-    openWindow(getFormattedText(selectedData.value, to));
-  }
+function redirectTo() {
+  const { to } = props.moduleData;
+  if (!to) return;
+  openWindow(getFormattedText(props.data, to));
+}
 
-  watch(
-    () => props.data,
-    (d) => {
-      init(d);
-      if (!selectedDeviceID.value) {
-        selectedDeviceID.value = options.value[0]?.value;
-      }
-    },
-    {
-      immediate: true,
+watch(
+  () => props.data,
+  (d) => {
+    init(d);
+    if (!selectedDeviceID.value) {
+      selectedDeviceID.value = options.value[0]?.value;
     }
-  );
+  },
+  {
+    immediate: true,
+  }
+);
 </script>
 <style lang="less" scoped>
-  @import '/@/design/theme.less';
+@import '/@/design/theme.less';
 
-  .module-common .box1-center {
-    height: calc(100% - 48px);
-  }
+.module-common .box1-center {
+  height: calc(100% - 48px);
+}
 
-  :deep(.box1-center) {
-    height: calc(100% - 48px);
+:deep(.box1-center) {
+  height: calc(100% - 48px);
+}
+:deep(.box1-center > .box-container) {
+  height: 100%;
+  padding: 0 !important;
+  width: 100% !important;
+}
+.module-common-longer {
+  :deep(.box1-top) {
+    --image-box1-top: url('/@/assets/images/beltFire/1-1.png');
+    background-image: url('/@/assets/images/beltFire/1-1.png');
   }
-  :deep(.box1-center > .box-container) {
-    height: 100%;
-    padding: 0 !important;
-    width: 100% !important;
-  }
-  .module-common-longer {
-    :deep(.box1-top) {
-      --image-box1-top: url('/@/assets/images/beltFire/1-1.png');
-      background-image: url('/@/assets/images/beltFire/1-1.png');
-    }
-    :deep(.box1-bottom) {
-      --image-box1-bottom: url('/@/assets/images/beltFire/1-2.png');
-      background-image: url('/@/assets/images/beltFire/1-2.png');
-    }
+  :deep(.box1-bottom) {
+    --image-box1-bottom: url('/@/assets/images/beltFire/1-2.png');
+    background-image: url('/@/assets/images/beltFire/1-2.png');
   }
+}
 </style>

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

@@ -24,13 +24,15 @@
 </template>
 <script lang="ts" setup>
 import Header from './headerBelt.vue';
-import Content from './contentBelt.vue';
+// import Content from './contentBelt.vue';
+import Content from '../../components/content.vue';
 // import ModuleLeft from './original/moduleLeft.vue';
 // import ModuleBottom from './original/moduleBottom.vue';
-import { computed, ref } from 'vue';
+import { computed, ref, watch } from 'vue';
 import ventBox1 from './ventBoxBelt.vue';
 import { openWindow } from '/@/utils';
 import { getFormattedText } from '../../hooks/helper';
+import { useInitModule } from '../../hooks/useInit';
 // import { ModuleProps } from '../types';
 
 const props = defineProps<{
@@ -50,6 +52,9 @@ const props = defineProps<{
 defineEmits(['close', 'click']);
 
 const { header } = props.moduleData;
+
+const { selectedDeviceID, selectedDevice, options, init } = useInitModule(props.deviceType, props.moduleData);
+
 const selectedData = ref();
 
 const style = computed(() => {
@@ -79,6 +84,19 @@ function redirectTo() {
   if (!to) return;
   openWindow(getFormattedText(selectedData.value, to));
 }
+
+watch(
+  () => props.data,
+  (d) => {
+    init(d);
+    if (!selectedDeviceID.value) {
+      selectedDeviceID.value = options.value[0]?.value;
+    }
+  },
+  {
+    immediate: true,
+  }
+);
 </script>
 <style lang="less" scoped>
 @import '/@/design/theme.less';

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

@@ -46,14 +46,14 @@
         </template>
         <!-- 通常列表部分 -->
         <template v-if="config.name === 'list'">
-          <CustomListBelt class="content__module" :type="config.type" :list-config="config.items" />
+          <CustomListBelt class="content__module" :type="config.type" :data="config.data" :list-config="config.items" />
         </template>
         <!-- 复杂列表部分 -->
         <template v-if="config.name === 'complex_list'">
-          <ComplexListBelt class="content__module" :type="config.type" :list-config="config.items" />
+          <ComplexListBelt class="content__module" :type="config.type" :data="config.data" :list-config="config.items" />
         </template>
         <template v-if="config.name === 'complex_list1'">
-          <ComplexList1Belt class="content__module" :type="config.type" :list-config="config.items" />
+          <ComplexList1Belt class="content__module" :type="config.type" :data="config.data" :list-config="config.items" />
         </template>
         <!-- 表格部分，这部分通常是占一整个模块的 -->
         <template v-if="config.name === 'table'">
@@ -62,7 +62,7 @@
             :type="config.type"
             :columns="config.columns"
             :auto-scroll="config.autoScroll"
-            :data="config.data"
+            :config="config"
           />
         </template>
         <template v-if="config.name === 'gateBoard'">
@@ -234,59 +234,38 @@ const layoutConfig = computed(() => {
         const cfg = complex_list1.shift();
         if (!cfg) break;
         const data = getData(refData, cfg.readFrom, cfg.parser);
+        arr.push({
+          overflow: true,
+          ...item,
+          ...cfg,
+          items: cfg.items.map((i) => {
+            return {
+              title: getFormattedText(data, i.title, i.trans),
+              contents: i.contents.map((e) => {
+                return {
+                  ...e,
+                  label: getFormattedText(data, e.label, e.trans),
+                  value: getFormattedText(data, e.value, e.trans),
+                };
+              }),
+            };
+          }),
+        });
+        console.log(refData, 'refData');
 
-        if (cfg.mapFromData) {
-          const firstListItem = cfg.items[0];
-          arr.push({
-            overflow: true,
-            ...item,
-            ...cfg,
-            items: (data || []).map((d) => {
-              return {
-                title: getFormattedText(d, firstListItem.title, firstListItem.trans),
-                contents: firstListItem.contents.map((e) => {
-                  return {
-                    ...e,
-                    label: getFormattedText(d, e.label, e.trans),
-                    value: getFormattedText(d, e.value, e.trans),
-                  };
-                }),
-              };
-            }),
-          });
-        } else {
-          arr.push({
-            overflow: true,
-            ...item,
-            ...cfg,
-            items: cfg.items.map((i) => {
-              return {
-                title: getFormattedText(data, i.title, i.trans),
-                contents: i.contents.map((e) => {
-                  return {
-                    ...e,
-                    label: getFormattedText(data, e.label, e.trans),
-                    value: getFormattedText(data, e.value, e.trans),
-                  };
-                }),
-              };
-            }),
-          });
-        }
         break;
       }
       case 'table': {
         const cfg = table.shift();
+        console.log(cfg, '111');
         if (!cfg) break;
-        const data = getData(refData, cfg.readFrom, cfg.parser);
-
         arr.push({
-          ...cfg,
+          overflow: true,
           ...item,
+          ...cfg,
           columns: cfg.columns,
-          data,
+          data: refData,
         });
-        console.log(arr, '11111111111');
         break;
       }
       default: {
@@ -302,7 +281,6 @@ const layoutConfig = computed(() => {
         break;
       }
     }
-    // console.log(arr,'arr---')
     return arr;
   }, []);
 });

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

@@ -19,7 +19,9 @@
 </template>
 
 <script lang="ts" setup>
-withDefaults(
+import { onMounted } from 'vue';
+
+const props = withDefaults(
   defineProps<{
     listConfig: {
       title: string;
@@ -37,6 +39,9 @@ withDefaults(
     type: 'C',
   }
 );
+onMounted(() => {
+  console.log('listConfig', props.listConfig);
+});
 </script>
 
 <style lang="less" scoped>

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

@@ -39,7 +39,7 @@
 import { ref, onMounted, nextTick, defineProps, watch } from 'vue';
 import * as echarts from 'echarts';
 import { get } from 'lodash-es';
-import gateSVG from '../gateSVG.ssl.vue';
+import gateSVG from '../gateSVG.vue';
 import { config } from 'dotenv';
 let props = defineProps({});
 const gateData = [

src/views/vent/home/configurable/belt/components/gateSVG.ssl.vue → src/views/vent/home/configurable/belt/components/gateSVG.vue

@@ -6,7 +6,10 @@
     preserveAspectRatio="none"
     x="0px"
     y="0px"
-   width="360px" height="204" style="padding:5px" viewBox="500 320 1000 500"
+    width="360px"
+    height="204"
+    style="padding: 5px"
+    viewBox="500 320 1000 500"
   >
     <defs>
       <linearGradient id="Gradient_1" gradientUnits="userSpaceOnUse" x1="-961.8" y1="-242.45" x2="-961.8" y2="-242.45" spreadMethod="pad">
@@ -1187,126 +1190,126 @@
 </template>
 
 <script setup lang="ts">
-  import { onMounted, defineExpose, withDefaults, defineProps } from 'vue';
-  import { useSvgAnimation } from '/@/hooks/vent/useSvgAnimation';
+import { onMounted, defineExpose, withDefaults, defineProps } from 'vue';
+import { useSvgAnimation } from '/@/hooks/vent/useSvgAnimation';
 
-  const props = withDefaults(
-    defineProps<{
-      /** 组件唯一标识符，提供后可以确保多个组件复用时的元素定位依旧准确 */
-      identify?: number;
-    }>(),
-    { identify: -1 }
-  );
+const props = withDefaults(
+  defineProps<{
+    /** 组件唯一标识符，提供后可以确保多个组件复用时的元素定位依旧准确 */
+    identify?: number;
+  }>(),
+  { identify: -1 }
+);
 
-  // 元素信息（常量数据，使用Map）
-  const elementInfo = new Map([
-    [
-      `anim_FengMen_SiShanLing_Men_L_0_Layer0_0_FILL_0${props.identify}`,
-      {
-        key: 'FengMen_SiShanLing_Men_L_0_Layer0_0_FILL',
-        transforms: [
-          'matrix( 0.29864501953125, 0, 0, 0.29864501953125, 852.6,507.75) ',
-          'matrix( 0.30267333984375, 0.0030975341796875, 0, 0.2986297607421875, 852.65,507.8) ',
-          'matrix( 0.3066864013671875, 0.0063018798828125, 0, 0.2986297607421875, 852.6,507.8) ',
-          'matrix( 0.3106536865234375, 0.00958251953125, 0, 0.2986297607421875, 852.6,507.8) ',
-          'matrix( 0.3145904541015625, 0.012939453125, 0, 0.2986297607421875, 852.6,507.75) ',
-          'matrix( 0.318511962890625, 0.0163726806640625, 0, 0.2986297607421875, 852.65,507.8) ',
-          'matrix( 0.3223724365234375, 0.0198974609375, 0, 0.2986297607421875, 852.6,507.8) ',
-          'matrix( 0.3261871337890625, 0.0235137939453125, 0, 0.2986297607421875, 852.6,507.8) ',
-          'matrix( 0.329986572265625, 0.027191162109375, 0, 0.2986297607421875, 852.65,507.75) ',
-          'matrix( 0.333740234375, 0.0309600830078125, 0, 0.2986297607421875, 852.65,507.75) ',
-          'matrix( 0.337432861328125, 0.0348052978515625, 0, 0.2986297607421875, 852.6,507.8) ',
-          'matrix( 0.341094970703125, 0.038726806640625, 0, 0.2986297607421875, 852.6,507.8) ',
-          'matrix( 0.3447113037109375, 0.042724609375, 0, 0.2986297607421875, 852.65,507.8) ',
-          'matrix( 0.3482818603515625, 0.04681396484375, 0, 0.2986297607421875, 852.65,507.8) ',
-          'matrix( 0.3517913818359375, 0.0509796142578125, 0, 0.2986297607421875, 852.55,507.75) ',
-          'matrix( 0.355255126953125, 0.055206298828125, 0, 0.2986297607421875, 852.6,507.75) ',
-          'matrix( 0.358673095703125, 0.059539794921875, 0, 0.2986297607421875, 852.65,507.8) ',
-          'matrix( 0.3620452880859375, 0.0639190673828125, 0, 0.2986297607421875, 852.6,507.8) ',
-          'matrix( 0.3653564453125, 0.068389892578125, 0, 0.2986297607421875, 852.6,507.8) ',
-          'matrix( 0.3686065673828125, 0.0729217529296875, 0, 0.2986297607421875, 852.6,507.8) ',
-          'matrix( 0.3718109130859375, 0.077545166015625, 0, 0.2986297607421875, 852.6,507.8) ',
-          'matrix( 0.374969482421875, 0.0822296142578125, 0, 0.2986297607421875, 852.65,507.8) ',
-          'matrix( 0.3780670166015625, 0.0869903564453125, 0, 0.2986297607421875, 852.6,507.8) ',
-          'matrix( 0.381103515625, 0.091827392578125, 0, 0.2986297607421875, 852.55,507.8) ',
-          'matrix( 0.3840789794921875, 0.0967254638671875, 0, 0.2986297607421875, 852.6,507.8) ',
-          'matrix( 0.386993408203125, 0.1016998291015625, 0, 0.2986297607421875, 852.6,507.8) ',
-          'matrix( 0.38983154296875, 0.10675048828125, 0, 0.2986297607421875, 852.6,507.8) ',
-          'matrix( 0.3926239013671875, 0.1118621826171875, 0, 0.2986297607421875, 852.6,507.8) ',
-          'matrix( 0.3953399658203125, 0.1170501708984375, 0, 0.2986297607421875, 852.6,507.8) ',
-          'matrix( 0.39801025390625, 0.122314453125, 0, 0.29864501953125, 852.6,507.75) ',
-        ],
-        opacity: [],
-      },
-    ],
-    [
-      `anim_FengMen_SiShanLing_Men_R_0_Layer0_0_FILL_0${props.identify}`,
-      {
-        key: 'FengMen_SiShanLing_Men_R_0_Layer0_0_FILL',
-        transforms: [
-          'matrix( 0.298553466796875, 0, 0, 0.298553466796875, 893.2,498.6) ',
-          'matrix( 0.3026885986328125, 0.0033416748046875, 0, 0.2985382080078125, 892.7,498.15) ',
-          'matrix( 0.306793212890625, 0.0067901611328125, 0, 0.2985382080078125, 892.15,497.7) ',
-          'matrix( 0.31085205078125, 0.0103302001953125, 0, 0.2985382080078125, 891.6,497.25) ',
-          'matrix( 0.3148956298828125, 0.0139617919921875, 0, 0.2985382080078125, 891.15,496.8) ',
-          'matrix( 0.3188629150390625, 0.0176849365234375, 0, 0.2985382080078125, 890.6,496.35) ',
-          'matrix( 0.3227996826171875, 0.0214996337890625, 0, 0.2985382080078125, 890.15,495.85) ',
-          'matrix( 0.326690673828125, 0.025390625, 0, 0.2985382080078125, 889.65,495.35) ',
-          'matrix( 0.3305511474609375, 0.029388427734375, 0, 0.2985382080078125, 889.15,494.85) ',
-          'matrix( 0.3343353271484375, 0.0334625244140625, 0, 0.2985382080078125, 888.65,494.35) ',
-          'matrix( 0.3380889892578125, 0.037628173828125, 0, 0.2985382080078125, 888.2,493.8) ',
-          'matrix( 0.3417816162109375, 0.0418701171875, 0, 0.2985382080078125, 887.7,493.25) ',
-          'matrix( 0.345428466796875, 0.0462188720703125, 0, 0.2985382080078125, 887.3,492.7) ',
-          'matrix( 0.3490142822265625, 0.0506439208984375, 0, 0.2985382080078125, 886.8,492.15) ',
-          'matrix( 0.3525543212890625, 0.0551605224609375, 0, 0.2985382080078125, 886.35,491.6) ',
-          'matrix( 0.3560028076171875, 0.05975341796875, 0, 0.2985382080078125, 885.95,491.05) ',
-          'matrix( 0.3594207763671875, 0.064422607421875, 0, 0.2985382080078125, 885.5,490.45) ',
-          'matrix( 0.3627777099609375, 0.0691986083984375, 0, 0.2985382080078125, 885.1,489.85) ',
-          'matrix( 0.3660736083984375, 0.07403564453125, 0, 0.2985382080078125, 884.7,489.25) ',
-          'matrix( 0.3693084716796875, 0.0789642333984375, 0, 0.2985382080078125, 884.3,488.6) ',
-          'matrix( 0.372467041015625, 0.0839691162109375, 0, 0.2985382080078125, 883.9,488) ',
-          'matrix( 0.3755645751953125, 0.08905029296875, 0, 0.2985382080078125, 883.45,487.3) ',
-          'matrix( 0.37860107421875, 0.094207763671875, 0, 0.2985382080078125, 883.1,486.65) ',
-          'matrix( 0.381561279296875, 0.099456787109375, 0, 0.2985382080078125, 882.7,486) ',
-          'matrix( 0.38446044921875, 0.1047821044921875, 0, 0.2985382080078125, 882.35,485.35) ',
-          'matrix( 0.38726806640625, 0.11016845703125, 0, 0.2985382080078125, 882,484.65) ',
-          'matrix( 0.3900146484375, 0.1156463623046875, 0, 0.2985382080078125, 881.65,483.95) ',
-          'matrix( 0.3926849365234375, 0.121185302734375, 0, 0.2985382080078125, 881.3,483.25) ',
-          'matrix( 0.395294189453125, 0.126800537109375, 0, 0.2985382080078125, 880.95,482.55) ',
-          'matrix( 0.3978118896484375, 0.13250732421875, 0, 0.298553466796875, 880.55,481.7) ',
-        ],
-        opacity: [],
-      },
-    ],
-  ]);
+// 元素信息（常量数据，使用Map）
+const elementInfo = new Map([
+  [
+    `anim_FengMen_SiShanLing_Men_L_0_Layer0_0_FILL_0${props.identify}`,
+    {
+      key: 'FengMen_SiShanLing_Men_L_0_Layer0_0_FILL',
+      transforms: [
+        'matrix( 0.29864501953125, 0, 0, 0.29864501953125, 852.6,507.75) ',
+        'matrix( 0.30267333984375, 0.0030975341796875, 0, 0.2986297607421875, 852.65,507.8) ',
+        'matrix( 0.3066864013671875, 0.0063018798828125, 0, 0.2986297607421875, 852.6,507.8) ',
+        'matrix( 0.3106536865234375, 0.00958251953125, 0, 0.2986297607421875, 852.6,507.8) ',
+        'matrix( 0.3145904541015625, 0.012939453125, 0, 0.2986297607421875, 852.6,507.75) ',
+        'matrix( 0.318511962890625, 0.0163726806640625, 0, 0.2986297607421875, 852.65,507.8) ',
+        'matrix( 0.3223724365234375, 0.0198974609375, 0, 0.2986297607421875, 852.6,507.8) ',
+        'matrix( 0.3261871337890625, 0.0235137939453125, 0, 0.2986297607421875, 852.6,507.8) ',
+        'matrix( 0.329986572265625, 0.027191162109375, 0, 0.2986297607421875, 852.65,507.75) ',
+        'matrix( 0.333740234375, 0.0309600830078125, 0, 0.2986297607421875, 852.65,507.75) ',
+        'matrix( 0.337432861328125, 0.0348052978515625, 0, 0.2986297607421875, 852.6,507.8) ',
+        'matrix( 0.341094970703125, 0.038726806640625, 0, 0.2986297607421875, 852.6,507.8) ',
+        'matrix( 0.3447113037109375, 0.042724609375, 0, 0.2986297607421875, 852.65,507.8) ',
+        'matrix( 0.3482818603515625, 0.04681396484375, 0, 0.2986297607421875, 852.65,507.8) ',
+        'matrix( 0.3517913818359375, 0.0509796142578125, 0, 0.2986297607421875, 852.55,507.75) ',
+        'matrix( 0.355255126953125, 0.055206298828125, 0, 0.2986297607421875, 852.6,507.75) ',
+        'matrix( 0.358673095703125, 0.059539794921875, 0, 0.2986297607421875, 852.65,507.8) ',
+        'matrix( 0.3620452880859375, 0.0639190673828125, 0, 0.2986297607421875, 852.6,507.8) ',
+        'matrix( 0.3653564453125, 0.068389892578125, 0, 0.2986297607421875, 852.6,507.8) ',
+        'matrix( 0.3686065673828125, 0.0729217529296875, 0, 0.2986297607421875, 852.6,507.8) ',
+        'matrix( 0.3718109130859375, 0.077545166015625, 0, 0.2986297607421875, 852.6,507.8) ',
+        'matrix( 0.374969482421875, 0.0822296142578125, 0, 0.2986297607421875, 852.65,507.8) ',
+        'matrix( 0.3780670166015625, 0.0869903564453125, 0, 0.2986297607421875, 852.6,507.8) ',
+        'matrix( 0.381103515625, 0.091827392578125, 0, 0.2986297607421875, 852.55,507.8) ',
+        'matrix( 0.3840789794921875, 0.0967254638671875, 0, 0.2986297607421875, 852.6,507.8) ',
+        'matrix( 0.386993408203125, 0.1016998291015625, 0, 0.2986297607421875, 852.6,507.8) ',
+        'matrix( 0.38983154296875, 0.10675048828125, 0, 0.2986297607421875, 852.6,507.8) ',
+        'matrix( 0.3926239013671875, 0.1118621826171875, 0, 0.2986297607421875, 852.6,507.8) ',
+        'matrix( 0.3953399658203125, 0.1170501708984375, 0, 0.2986297607421875, 852.6,507.8) ',
+        'matrix( 0.39801025390625, 0.122314453125, 0, 0.29864501953125, 852.6,507.75) ',
+      ],
+      opacity: [],
+    },
+  ],
+  [
+    `anim_FengMen_SiShanLing_Men_R_0_Layer0_0_FILL_0${props.identify}`,
+    {
+      key: 'FengMen_SiShanLing_Men_R_0_Layer0_0_FILL',
+      transforms: [
+        'matrix( 0.298553466796875, 0, 0, 0.298553466796875, 893.2,498.6) ',
+        'matrix( 0.3026885986328125, 0.0033416748046875, 0, 0.2985382080078125, 892.7,498.15) ',
+        'matrix( 0.306793212890625, 0.0067901611328125, 0, 0.2985382080078125, 892.15,497.7) ',
+        'matrix( 0.31085205078125, 0.0103302001953125, 0, 0.2985382080078125, 891.6,497.25) ',
+        'matrix( 0.3148956298828125, 0.0139617919921875, 0, 0.2985382080078125, 891.15,496.8) ',
+        'matrix( 0.3188629150390625, 0.0176849365234375, 0, 0.2985382080078125, 890.6,496.35) ',
+        'matrix( 0.3227996826171875, 0.0214996337890625, 0, 0.2985382080078125, 890.15,495.85) ',
+        'matrix( 0.326690673828125, 0.025390625, 0, 0.2985382080078125, 889.65,495.35) ',
+        'matrix( 0.3305511474609375, 0.029388427734375, 0, 0.2985382080078125, 889.15,494.85) ',
+        'matrix( 0.3343353271484375, 0.0334625244140625, 0, 0.2985382080078125, 888.65,494.35) ',
+        'matrix( 0.3380889892578125, 0.037628173828125, 0, 0.2985382080078125, 888.2,493.8) ',
+        'matrix( 0.3417816162109375, 0.0418701171875, 0, 0.2985382080078125, 887.7,493.25) ',
+        'matrix( 0.345428466796875, 0.0462188720703125, 0, 0.2985382080078125, 887.3,492.7) ',
+        'matrix( 0.3490142822265625, 0.0506439208984375, 0, 0.2985382080078125, 886.8,492.15) ',
+        'matrix( 0.3525543212890625, 0.0551605224609375, 0, 0.2985382080078125, 886.35,491.6) ',
+        'matrix( 0.3560028076171875, 0.05975341796875, 0, 0.2985382080078125, 885.95,491.05) ',
+        'matrix( 0.3594207763671875, 0.064422607421875, 0, 0.2985382080078125, 885.5,490.45) ',
+        'matrix( 0.3627777099609375, 0.0691986083984375, 0, 0.2985382080078125, 885.1,489.85) ',
+        'matrix( 0.3660736083984375, 0.07403564453125, 0, 0.2985382080078125, 884.7,489.25) ',
+        'matrix( 0.3693084716796875, 0.0789642333984375, 0, 0.2985382080078125, 884.3,488.6) ',
+        'matrix( 0.372467041015625, 0.0839691162109375, 0, 0.2985382080078125, 883.9,488) ',
+        'matrix( 0.3755645751953125, 0.08905029296875, 0, 0.2985382080078125, 883.45,487.3) ',
+        'matrix( 0.37860107421875, 0.094207763671875, 0, 0.2985382080078125, 883.1,486.65) ',
+        'matrix( 0.381561279296875, 0.099456787109375, 0, 0.2985382080078125, 882.7,486) ',
+        'matrix( 0.38446044921875, 0.1047821044921875, 0, 0.2985382080078125, 882.35,485.35) ',
+        'matrix( 0.38726806640625, 0.11016845703125, 0, 0.2985382080078125, 882,484.65) ',
+        'matrix( 0.3900146484375, 0.1156463623046875, 0, 0.2985382080078125, 881.65,483.95) ',
+        'matrix( 0.3926849365234375, 0.121185302734375, 0, 0.2985382080078125, 881.3,483.25) ',
+        'matrix( 0.395294189453125, 0.126800537109375, 0, 0.2985382080078125, 880.95,482.55) ',
+        'matrix( 0.3978118896484375, 0.13250732421875, 0, 0.298553466796875, 880.55,481.7) ',
+      ],
+      opacity: [],
+    },
+  ],
+]);
 
-  const { animationElements, triggerAnimation } = useSvgAnimation(elementInfo);
+const { animationElements, triggerAnimation } = useSvgAnimation(elementInfo);
 
-  // 初始化元素引用
-  onMounted(() => {
-    elementInfo.forEach((__, elementId) => {
-      const el = document.querySelector(`[data-anim-id="${elementId}"]`);
-      if (el) {
-        animationElements.set(elementId, el as HTMLElement);
-      }
-    });
+// 初始化元素引用
+onMounted(() => {
+  elementInfo.forEach((__, elementId) => {
+    const el = document.querySelector(`[data-anim-id="${elementId}"]`);
+    if (el) {
+      animationElements.set(elementId, el as HTMLElement);
+    }
   });
+});
 
-  /** 根据SVG的使用场景播放动画 */
-  function animate(door1, door2, door3) {
-    // 在SVG图片中，找到需要动起来的元素（类似<use xlink:href="#RE_L_0_Layer0_0_FILL"></use>），并填入id即可控制该元素的动画（如有）
-    const open = door1 || door2 || door3;
-    triggerAnimation(['FengMen_SiShanLing_Men_L_0_Layer0_0_FILL', 'FengMen_SiShanLing_Men_R_0_Layer0_0_FILL'], !open);
-  }
+/** 根据SVG的使用场景播放动画 */
+function animate(door1, door2, door3) {
+  // 在SVG图片中，找到需要动起来的元素（类似<use xlink:href="#RE_L_0_Layer0_0_FILL"></use>），并填入id即可控制该元素的动画（如有）
+  const open = door1 || door2 || door3;
+  triggerAnimation(['FengMen_SiShanLing_Men_L_0_Layer0_0_FILL', 'FengMen_SiShanLing_Men_R_0_Layer0_0_FILL'], !open);
+}
 
-  // 导出方法以便外部调用
-  defineExpose({
-    animate,
-  });
+// 导出方法以便外部调用
+defineExpose({
+  animate,
+});
 </script>
 <style scoped>
-  /* 可以添加一些基础样式 */
-  [data-anim-id] {
-    transition: transform 3s;
-  }
+/* 可以添加一些基础样式 */
+[data-anim-id] {
+  transition: transform 3s;
+}
 </style>

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

@@ -6,637 +6,11 @@ import { reactive } from 'vue';
 import _ from 'lodash';
 
 enum Api {
-  list = '/safety/ventanalyDevice/homedata2',
-  getDevice = '/monitor/device', //实时数据
-  sysList = '/safety/ventanalyManageSystem/list',
-  getHomeData = '/safety/ventanalyDevice/homedata',
-  getDisHome = '/monitor/disaster/getDisHome',
-  getBDDustData = '/monitor/disaster/getDisDustHome',
-  // getBDFireData = '/monitor/disaster/getDisFireHome',
-  getDeviceSys = '/ventanaly-device/monitor/getSysFireHomeInfo',
-  getAlarmRecord = '/ventanaly-device/safety/ventanalyAlarmLog/sysLinkDevAlarmLog',
-  getTotal = '/safety/ventanalyAlarmLog/total',
-  sysTypeWarnList = '/safety/ventanalyAlarmLog/sysTypeWarn',
-  getDisasterProportion = '/safety/ventanalyAlarmLog/getDisasterProportion',
-  system = '/ventanaly-device/monitor/device',
   getSystem = '/modelreq/monitor/system',
 }
 
-export const sysList = (params) => defHttp.get({ url: Api.sysList, params });
-export const getDevice = (params) => defHttp.post({ url: Api.getDevice, params });
 export const getSystem = (params) => defHttp.post({ url: Api.getSystem, params });
 
 // 搞这个缓存是由于：目前代码上的设计是多个模块发出多次请求，每个模块自己负责消费前者的响应。
 // 这会导致相同的请求被同时发送多次。
 const cache = new Map<string, Promise<any>>();
-
-/**
- * 列表接口，5.5专用，和6.0的getHomeData基本一致
- * @param params
- */
-export const list = (params) => {
-  const key = `${Api.list}?${JSON.stringify(params)}`;
-  if (!cache.has(key)) {
-    cache.set(
-      key,
-      defHttp.post({ url: Api.list, params }).finally(() => {
-        cache.delete(key);
-      })
-    );
-  }
-  return (cache.get(key) as Promise<any>).then((res) => {
-    if (res.fanmain) {
-      // 处理频率字段，为了兼容旧版保留，现配置项已支持一级动态字段
-      res.fanmain.forEach((e) => {
-        if (e.readData.Fan2StartStatus === '1') {
-          e.current = '二号';
-          e.readData.FanFreqHz = e.readData.Fan2FreqHz;
-        } else {
-          e.current = '一号';
-          e.readData.FanFreqHz = e.readData.Fan1FreqHz;
-        }
-      });
-    }
-    if (res.fanlocal) {
-      res.fanlocal.forEach((e) => {
-        e.chartData = [
-          {
-            x: '吸风量',
-            yRealtime: e.readData.windQuantity1,
-            yMock: floor(parseFloat(e.inletAirVolume_merge) * random(0.98, 1, false), 2),
-            y: e.inletAirVolume_merge,
-          },
-          {
-            x: '供风量',
-            yRealtime: e.readData.windQuantity2,
-            yMock: floor(parseFloat(e.ductOutletAirVolume_merge) * random(0.98, 1, false), 2),
-            y: e.ductOutletAirVolume_merge,
-          },
-        ];
-        if (e.readData.Fan2StartStatus === '1') {
-          e.current = '二号';
-          e.readData.FanfHz = e.readData.Fan2fHz;
-        } else {
-          e.current = '一号';
-          e.readData.FanfHz = e.readData.Fan1fHz;
-        }
-      });
-    }
-    if (res.sys_majorpath) {
-      res.sys_majorpath.forEach((e) => {
-        const { drag_1, drag_2, drag_3, drag_total } = e.majorpath;
-        const { fy_merge = { value: '1' } } = e.readData;
-        const drag_merge = parseInt(fy_merge.value);
-        // const m3_merge = parseInt(retM3_merge.value);
-
-        e.piechart = [
-          { val: drag_1, valMock: floor((drag_1 / drag_total) * drag_merge), label: '进风区' },
-          { val: drag_2, valMock: floor((drag_2 / drag_total) * drag_merge), label: '用风区' },
-          { val: drag_3, valMock: floor((drag_3 / drag_total) * drag_merge), label: '回风区' },
-        ];
-        e.readData.dengjikong_merge = get(res, 'midinfo[0].sysinfo.equalarea');
-        e.readData.fy_merge_int = drag_merge;
-        // e.dengjikong_merge = floor((1.19 * (m3_merge / 60)) / Math.sqrt(drag_merge), 2);
-      });
-    }
-    if (res.sys_surface_caimei) {
-      res.sys_surface_caimei.forEach((e) => {
-        if (isArray(e.history)) {
-          e.history = slice(e.history, e.history.length - 30, e.history.length);
-        }
-        if (isArray(e.history_report)) {
-          e.history_report = slice(e.history_report, e.history_report.length - 30, e.history_report.length);
-          console.log(e, '999000');
-        }
-      });
-    }
-    if (res.device_arr) {
-      res.device_arr = Object.values(res.device);
-    }
-    if (res.sys_wind) {
-      res.sys_wind.forEach((e) => {
-        if (e.readData.m3) {
-          e.readData.m3 = e.readData.m3.replace('-', '');
-        }
-        if (e.readData.va) {
-          e.readData.va = e.readData.va.replace('-', '');
-        }
-      });
-    }
-    if (res.windrect) {
-      res.windrect.forEach((e) => {
-        if (e.readData.m3) {
-          e.readData.m3 = e.readData.m3.replace('-', '');
-        }
-        if (e.readData.va) {
-          e.readData.va = e.readData.va.replace('-', '');
-        }
-      });
-    }
-    if (res.safetymonitor) {
-      const { sysOrgCode } = useGlobSetting();
-      // 沙坪
-      if (sysOrgCode === 'jsnyspmy') {
-        res.safetymonitor = _.sortBy(res.safetymonitor, (e) => {
-          const map = new Map([
-            ['1960160466651189249', 1],
-            ['1960160465543892994', 2],
-            ['1960160465376120833', 3],
-            ['1960160466168844289', 4],
-            ['1960160465736830977', 5],
-            ['1960160466026237954', 6],
-            ['1960160407146598402', 7],
-          ]);
-
-          const inx = map.get(e.deviceID) || 9999;
-
-          return inx;
-        });
-      }
-    }
-
-    return res;
-  });
-};
-
-export const getHomeData = (params) => {
-  const key = `${Api.getHomeData}?${JSON.stringify(params)}`;
-  if (!cache.has(key)) {
-    cache.set(
-      key,
-      defHttp.post({ url: Api.getHomeData, params }).finally(() => {
-        cache.delete(key);
-      })
-    );
-  }
-  return (cache.get(key) as Promise<any>).then((res) => {
-    res.fanmain.forEach((e) => {
-      if (e.readData.Fan2StartStatus === '1') {
-        e.current = '二号';
-        e.readData.FanFreqHz = e.readData.Fan2FreqHz;
-      } else {
-        e.current = '一号';
-        e.readData.FanFreqHz = e.readData.Fan1FreqHz;
-      }
-    });
-    res.fanlocal.forEach((e) => {
-      e.chartData = [
-        {
-          x: '吸风量',
-          y: e.readData.windQuantity1,
-        },
-        {
-          x: '供风量',
-          y: e.readData.windQuantity2,
-        },
-      ];
-      if (e.readData.Fan2StartStatus === '1') {
-        e.current = '二号';
-        e.readData.FanfHz = e.readData.Fan2fHz;
-      } else {
-        e.current = '一号';
-        e.readData.FanfHz = e.readData.Fan1fHz;
-      }
-    });
-    res.sys_majorpath.forEach((e) => {
-      e.piechart = [
-        { val: e.majorpath.drag_1, label: '进风区' },
-        { val: e.majorpath.drag_2, label: '用风区' },
-        { val: e.majorpath.drag_3, label: '回风区' },
-      ];
-    });
-
-    return res;
-  });
-};
-
-export const getBDDustData = (params) => {
-  const key = `${Api.getBDDustData}?${JSON.stringify(params)}`;
-  if (!cache.has(key)) {
-    cache.set(
-      key,
-      defHttp.post({ url: Api.getBDDustData, params }).finally(() => {
-        cache.delete(key);
-      })
-    );
-  }
-  return cache.get(key) as Promise<any>;
-};
-
-// 塔山火灾预警页面获取数据接口
-export const getDeviceSys = (params) => {
-  const key = `${Api.getDeviceSys}?${JSON.stringify(params)}`;
-  if (!cache.has(key)) {
-    cache.set(
-      key,
-      defHttp.post({ url: Api.getDeviceSys, params }).finally(() => {
-        cache.delete(key);
-      })
-    );
-  }
-  return (cache.get(key) as Promise<any>).then((res) => {
-    return res;
-  });
-};
-
-export const getAlarmRecord = (params) => {
-  const key = `${Api.getAlarmRecord}?${JSON.stringify(params)}`;
-  if (!cache.has(key)) {
-    cache.set(
-      key,
-      defHttp.post({ url: Api.getAlarmRecord, params }).finally(() => {
-        cache.delete(key);
-      })
-    );
-  }
-  return (cache.get(key) as Promise<any>).then((res) => {
-    return res;
-  });
-};
-
-export const getDisHome = (params) => {
-  // 生成缓存key，基于接口地址和参数
-  const key = `${Api.getDisHome}?${JSON.stringify(params)}`;
-
-  // 缓存不存在时发起请求
-  if (!cache.has(key)) {
-    cache.set(
-      key,
-      defHttp.post({ url: Api.getDisHome, params }).finally(() => {
-        // 请求完成后删除缓存，保证下次请求能获取最新数据
-        cache.delete(key);
-      })
-    );
-  }
-
-  // 返回缓存中的Promise并处理响应数据
-  return (cache.get(key) as Promise<any>).then((res) => {
-    // 1. 处理 pdArray 中的光纤温度数据（解析JSON字符串）
-    if (res.pdArray && Array.isArray(res.pdArray)) {
-      res.pdArray.forEach((e) => {
-        // 先校验 arrayFiber 是数组，避免forEach报错
-        if (e.arrayFiber && Array.isArray(e.arrayFiber)) {
-          e.arrayFiber.forEach((j) => {
-            // 安全解析 JSON，避免 undefined/无效JSON 导致报错
-            j.fibreTemperatureArr = safeJsonParse(j.fibreTemperature, []);
-          });
-        }
-      });
-    }
-
-    // 2. 处理 sgGxObj 下的设备数据
-    if (res.sgGxObj) {
-      // 2.1 解析 devGxcw 中的光纤温度
-      if (res.sgGxObj.devGxcw && Array.isArray(res.sgGxObj.devGxcw)) {
-        res.sgGxObj.devGxcw.forEach((e) => {
-          e.fibreTemperatureArr = safeJsonParse(e.fibreTemperature, []);
-        });
-      }
-
-      // 2.2 为 devSgjc 中的气体字段设置默认值
-      if (res.sgGxObj.devSgjc && Array.isArray(res.sgGxObj.devSgjc)) {
-        res.sgGxObj.devSgjc.forEach((e) => {
-          e.o2val = e.o2Val || 0;
-          e.coval = e.coVal || 0;
-          e.gasval = e.gasVal || 0;
-          e.ch2val = e.ch2Val || 0;
-          e.chval = e.chVal || 0;
-        });
-      }
-    }
-
-    // 3. 重组 obfObj 为按气体类型分类的结构
-    if (res.obfObj && Array.isArray(res.obfObj.arrayDev)) {
-      res.obfObj.obfObjModded = [
-        { objType: '氧气', arrayDev: mapObfDev(res.obfObj.arrayDev, 'o2Val') },
-        { objType: '甲烷', arrayDev: mapObfDev(res.obfObj.arrayDev, 'ch4Val') },
-        { objType: '一氧化碳', arrayDev: mapObfDev(res.obfObj.arrayDev, 'coVal') },
-        { objType: '乙炔', arrayDev: mapObfDev(res.obfObj.arrayDev, 'c2h2Val') },
-        { objType: '二氧化碳', arrayDev: mapObfDev(res.obfObj.arrayDev, 'co2Val') },
-        { objType: '乙烯', arrayDev: mapObfDev(res.obfObj.arrayDev, 'c2h4Val') },
-        { objType: '压差', arrayDev: mapObfDev(res.obfObj.arrayDev, 'dpVal') },
-        { objType: '温度', arrayDev: mapObfDev(res.obfObj.arrayDev, 'tempVal') },
-      ];
-    }
-
-    return res;
-  });
-};
-
-/**
- * 安全解析 JSON 字符串的工具函数
- * @param {string} jsonStr - 要解析的JSON字符串
- * @param {any} defaultValue - 解析失败/值无效时的默认值
- * @returns {any} 解析结果或默认值
- */
-function safeJsonParse(jsonStr, defaultValue = null) {
-  // 先校验值是否为有效字符串
-  if (!jsonStr || typeof jsonStr !== 'string') {
-    return defaultValue;
-  }
-  // 捕获解析异常
-  try {
-    return JSON.parse(jsonStr);
-  } catch (err) {
-    console.warn('JSON解析失败', jsonStr, err);
-    return defaultValue;
-  }
-}
-
-/**
- * 映射 obfObj.arrayDev 数据的工具函数，减少重复代码
- * @param {Array} devArray - 设备数组
- * @param {string} valKey - 要取值的字段名
- * @returns {Array} 映射后的数组
- */
-function mapObfDev(devArray, valKey) {
-  return devArray.map((e) => ({
-    strinstallpos: e.strinstallpos,
-    val: e[valKey] || 0,
-  }));
-}
-//获取通风监测预警图表数据
-export const sysTypeWarnList = (params) => {
-  const key = `${Api.sysTypeWarnList}?${JSON.stringify(params)}`;
-  if (!cache.has(key)) {
-    cache.set(
-      key,
-      defHttp.post({ url: Api.sysTypeWarnList, params }).finally(() => {
-        cache.delete(key);
-      })
-    );
-  }
-  return (cache.get(key) as Promise<any>).then((res) => {
-    return res;
-  });
-};
-//获取多灾融合预警-风险权重比例数据
-export const getDisasterProportion = (params) => {
-  const key = `${Api.getDisasterProportion}?${JSON.stringify(params)}`;
-  if (!cache.has(key)) {
-    cache.set(
-      key,
-      defHttp.post({ url: Api.getDisasterProportion, params }).finally(() => {
-        cache.delete(key);
-      })
-    );
-  }
-  return (cache.get(key) as Promise<any>).then((res) => {
-    return res;
-  });
-};
-
-//多灾融合预警
-function getLevelNum() {
-  return new Promise(async (resolve) => {
-    const list: Record<string, any> = {};
-    const typeArr = ['fire', 'dust', 'vent', 'gas'];
-    for (let i = 0; i < typeArr.length; i++) {
-      const type = typeArr[i];
-      const result = await sysTypeWarnList({ type });
-      if (type == 'fire') {
-        list.fire = result.length || 0;
-      } else if (type == 'dust') {
-        list.dust = result.length || 0;
-      } else if (type == 'vent') {
-        list.vent = result.length || 0;
-      } else if (type == 'gas') {
-        list.gas = result.length || 0;
-      }
-    }
-    resolve(list);
-  });
-}
-export const getTotal = (params) => {
-  const { sysDataType } = useGlobSetting();
-
-  const key = `${Api.getTotal}?${JSON.stringify(params)}`;
-  if (!cache.has(key)) {
-    cache.set(
-      key,
-      defHttp.get({ url: Api.getTotal, params }).finally(() => {
-        cache.delete(key);
-      })
-    );
-  }
-  return (cache.get(key) as Promise<any>).then(async (res) => {
-    console.log(res, '多灾融合预警数据');
-
-    let dataVent = await getLevelNum();
-    const levelsList = [
-      {
-        name: '报警',
-        value: 0,
-      },
-      {
-        name: '重大风险',
-        value: 0,
-      },
-      {
-        name: '较大风险',
-        value: 0,
-      },
-      {
-        name: '一般风险',
-        value: 0,
-      },
-      {
-        name: '低风险',
-        value: dataVent.vent || 0,
-      },
-    ];
-    //通风监测预警数据
-    switch (sysDataType) {
-      case 'monitor':
-        res.ventWarn = {
-          ventJf: res.ventInfo.zongjinfeng,
-          ventXf: res.ventInfo.xufengliang,
-          ventHf: res.ventInfo.zonghuifeng,
-        };
-        res.ventData = [
-          {
-            name: '报警',
-            value: res.info.sysInfo.ventS.levels.alarm,
-          },
-          {
-            name: '重大风险',
-            value: res.info.sysInfo.ventS.levels.red,
-          },
-          {
-            name: '较大风险',
-            value: res.info.sysInfo.ventS.levels.orange,
-          },
-          {
-            name: '一般风险',
-            value: res.info.sysInfo.ventS.levels.yellow,
-          },
-          {
-            name: '低风险',
-            value: dataVent.vent ? dataVent.vent : res.info.sysInfo.ventS.levels.blue,
-          },
-        ];
-
-        break;
-      case 'report':
-        res.ventWarn = {
-          ventJf: res.ventInfo.totalIntM3,
-          ventXf: res.ventInfo.xufengliang,
-          ventHf: res.ventInfo.totalRetM3,
-        };
-        res.ventData = levelsList;
-        break;
-      default:
-        res.ventWarn = {
-          ventJf: res.ventInfo.totalIntM3,
-          ventXf: res.ventInfo.xufengliang,
-          ventHf: res.ventInfo.totalRetM3,
-        };
-        res.ventData = levelsList;
-    }
-    //设备监测预警数据
-    res.deviceWarn = reactive({});
-    Object.keys(res.info.devicekindInfo).forEach((el) => {
-      res.deviceWarn[`${el}_all`] = res.info.devicekindInfo[el].totalcount;
-      res.deviceWarn[`${el}_warn`] = res.info.devicekindInfo[el].count;
-      res.deviceWarn[`${el}_close`] = res.info.devicekindInfo[el].netstatus;
-    });
-    //瓦斯监测预警数据
-    res.gasData = reactive({});
-    res.gasData.safety_sum = res.info.sysInfo.gasS.devices.reduce((a, b) => a + b.gasNumber, 0);
-    res.gasData.gas_sum = res.info.sysInfo.gasS.devices.reduce((a, b) => a + b.pumpNumber, 0);
-    res.gasData.monitorData = res.info.sysInfo.gasS.devices.map((el) => {
-      return {
-        label: el.systemname,
-        value: el.gasNumber,
-        value1: el.pumpNumber,
-      };
-    });
-
-    //火灾监测预警数据
-    res.fireInfos = reactive({});
-    res.fireInfos.dataOn = [];
-
-    if (res.bundletubeInfo && res.bundletubeInfo.msgTxt.length != 0 && res.bundletubeInfo.msgTxt[0].datalist.length != 0) {
-      res.bundletubeInfo.msgTxt[0].datalist.forEach((el) => {
-        res.fireInfos.dataOn.push({
-          warnLevel: el.syswarnLevel_str,
-          smokeJd: el.syswarnLevel_des,
-          value1: el.strinstallpos,
-        });
-      });
-    } else {
-      res.fireInfos.dataOn = [];
-    }
-    res.fireInfos.tempVal = res.info.sysInfo.fireS.summaryInfo
-      ? res.info.sysInfo.fireS.summaryInfo.external.temperature && res.info.sysInfo.fireS.summaryInfo.external.temperature.maxlevel == '0'
-        ? '低风险'
-        : '低风险'
-      : '';
-    res.fireInfos.smokeVal = res.info.sysInfo.fireS.summaryInfo
-      ? res.info.sysInfo.fireS.summaryInfo.external.smokeval &&
-        res.info.sysInfo.fireS.summaryInfo.external.smokeval.maxlevel &&
-        res.info.sysInfo.fireS.summaryInfo.external.smokeval.maxlevel == '0'
-        ? '低风险'
-        : '低风险'
-      : '';
-
-    res.fireInfos.fireVal = res.info.sysInfo.fireS.summaryInfo
-      ? res.info.sysInfo.fireS.summaryInfo.external.fireval &&
-        res.info.sysInfo.fireS.summaryInfo.external.fireval.maxlevel &&
-        res.info.sysInfo.fireS.summaryInfo.external.fireval.maxlevel == '0'
-        ? '低风险'
-        : '低风险'
-      : '';
-
-    res.fireInfos.coVal = res.info.sysInfo.fireS.summaryInfo
-      ? res.info.sysInfo.fireS.summaryInfo.external.coval && res.info.sysInfo.fireS.summaryInfo.external.coval.value
-        ? res.info.sysInfo.fireS.summaryInfo.external.coval.value
-        : '-'
-      : '';
-    //粉尘监测预警数据
-    res.dustInfo = [
-      {
-        name: '报警',
-        value: res.info.sysInfo.dustS.levels.alarm,
-      },
-      {
-        name: '重大风险',
-        value: res.info.sysInfo.dustS.levels.red,
-      },
-      {
-        name: '较大风险',
-        value: res.info.sysInfo.dustS.levels.orange,
-      },
-      {
-        name: '一般风险',
-        value: res.info.sysInfo.dustS.levels.yellow,
-      },
-      {
-        name: '低风险',
-        value: dataVent.dust ? dataVent.dust : res.info.sysInfo.dustS.levels.blue,
-      },
-    ];
-
-    return res;
-  });
-};
-
-//机电硐室
-export const getElectroData = (params) => {
-  const key = `${Api.system}?${JSON.stringify(params)}`;
-  if (!cache.has(key)) {
-    cache.set(
-      key,
-      defHttp.post({ url: Api.system, params }).finally(() => {
-        cache.delete(key);
-      })
-    );
-  }
-  return (cache.get(key) as Promise<any>).then(async (res) => {
-    let data = res.msgTxt.find((el) => el.type == 'ballvalve_auto');
-    data.tempData = data?.datalist?.map((el, index) => {
-      return {
-        areaName: el.readData.areaName,
-        tempStart: el.readData.tempStart,
-        tempStop: el.readData.tempStop,
-        CORealtime: el.readData.CORealtime,
-      };
-    });
-    if (data?.datalist) {
-      data.datalist.forEach((el) => {
-        el.cardData = {
-          title: el.strinstallpos,
-          areaText: '区域',
-          areaVal: el.readData.areaName,
-          moduleText: '模式',
-          moduleVal: el.readData.smokePattern,
-          statusText: '烟雾传感器状态',
-          statusVal: el.readData.smokeSensorStatus == 'False' ? '正常-低电平' : '异常',
-          phoneText: '机号',
-          phoneVal: el.readData.deviceName,
-          tempNowText: '实时测温',
-          tempNowVal: el.readData.tempRealtime,
-          tempOpenText: '开启温度',
-          tempOpenVal: el.readData.tempStart,
-          timeText: '延时t1',
-          timeVal: 0,
-          tempMaxText: '最高温度',
-          tempMaxVal: el.readData.tempMax,
-          tempCloseText: '关闭温度',
-          tempCloseVal: el.readData.tempMin,
-          time3Text: '延时t3',
-          time3Val: 0,
-          deviceSTAT: el.readData.deviceSTAT == '1' ? true : false,
-        };
-      });
-      data.chartData = data.datalist.map((el) => {
-        return {
-          time: el.readData.areaName,
-          coRealTime: el.readData.CORealtime,
-          coWarn: el.readData.COWarn,
-        };
-      });
-    }
-    return data;
-  });
-};

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

@@ -2,7 +2,7 @@ import { Config } from '../../../deviceManager/configurationTable/types';
 // 皮带巷三级防灭火首页
 export const testBeltLaneFire: Config[] = [
   {
-    deviceType: 'pdhzfxInfo',
+    deviceType: '',
     moduleName: '皮带火灾风险状态整体评价',
     pageType: 'belt',
     moduleData: {
@@ -27,7 +27,7 @@ export const testBeltLaneFire: Config[] = [
         direction: 'column',
         items: [
           {
-            name: 'complex_list1',
+            name: 'complex_list',
             basis: '100%',
           },
         ],
@@ -38,12 +38,12 @@ export const testBeltLaneFire: Config[] = [
       gallery_list: [],
       table: [],
       list: [],
-      complex_list: [],
-      complex_list1: [
+      complex_list: [
         {
           type: 'A',
           readFrom: 'pdhzfxInfo[0].sysList',
           mapFromData: true,
+          pagetype: 'complex_list1',
           items: [
             {
               title: '',
@@ -57,26 +57,9 @@ export const testBeltLaneFire: Config[] = [
             },
           ],
         },
-        // {
-        //   type: 'C',
-        //   readFrom: 'sysList',
-        //   mapFromData: true,
-        //   items: [
-        //     {
-        //       title: '',
-        //       contents: [
-        //         {
-        //           label: '${beltName}',
-        //           value: '${warnlevel}',
-        //           info: '',
-        //         },
-        //       ],
-        //     },
-        //   ],
-        // },
       ],
       preset: [],
-      to: '/micro-vent-3dModal/beltYjkf/index',
+      to: '/belt/fireS/fireMonitor',
     },
     showStyle: {
       size: 'width:430px;height:350px;',
@@ -126,6 +109,7 @@ export const testBeltLaneFire: Config[] = [
           type: 'C',
           readFrom: 'sysList',
           mapFromData: true,
+          pagetype: 'Belt',
           items: [
             {
               title: '',
@@ -141,7 +125,7 @@ export const testBeltLaneFire: Config[] = [
         },
       ],
       preset: [],
-      // mock: BDfireMock,
+      to: '/belt/fireS/fireMonitor',
     },
     showStyle: {
       size: 'width:430px;height:430px;',
@@ -189,6 +173,7 @@ export const testBeltLaneFire: Config[] = [
         {
           type: 'B',
           readFrom: 'sysList',
+          pagetype: 'Belt',
           items: [
             {
               label: '系统状态',
@@ -231,7 +216,7 @@ export const testBeltLaneFire: Config[] = [
           readFrom: '',
         },
       ],
-      // mock: BDfireMock,
+      to: '/belt/fireS/sprayControl',
     },
     showStyle: {
       size: 'width:430px;height:350px;',
@@ -278,6 +263,7 @@ export const testBeltLaneFire: Config[] = [
         {
           type: 'C',
           readFrom: 'aqjkData',
+          pagetype: 'Belt',
           columns: [
             {
               name: '设备位置',
@@ -301,6 +287,7 @@ export const testBeltLaneFire: Config[] = [
       list: [],
       complex_list: [],
       preset: [],
+      to: '/belt/fireS/emergencyControl',
     },
     showStyle: {
       size: 'width:430px;height:430px;',
@@ -351,7 +338,7 @@ export const testYjkf: Config[] = [
       complex_list: [],
       preset: [
         {
-          readFrom: 'device.gate_list',
+          readFrom: 'doorData',
           items: [
             {
               label: '前门状态',
@@ -385,9 +372,9 @@ export const testYjkf: Config[] = [
     },
   },
   {
-    deviceType: 'yjkfArray',
+    deviceType: '',
     moduleName: '摄像头视频信号',
-    pageType: 'beltYjkf',
+    pageType: 'emergencyControl',
     moduleData: {
       header: {
         show: false,
@@ -432,329 +419,15 @@ export const testYjkf: Config[] = [
     },
   },
 ];
-export const testJcyj: Config[] = [
-  {
-    deviceType: 'pdhzfxInfo',
-    moduleName: '火灾监测设备监测与分析',
-    pageType: 'belt',
-    moduleData: {
-      header: {
-        show: false,
-        readFrom: '',
-        selector: {
-          show: true,
-          value: '${beltName}',
-        },
-        slot: {
-          show: false,
-          value: '',
-        },
-      },
-      background: {
-        show: false,
-        type: 'video',
-        link: '',
-      },
-      layout: {
-        direction: 'column',
-        items: [
-          {
-            name: 'complex_list1',
-            basis: '100%',
-          },
-        ],
-      },
-      board: [],
-      chart: [],
-      gallery: [],
-      gallery_list: [],
-      table: [],
-      list: [],
-      complex_list: [],
-      complex_list1: [
-        {
-          type: 'A',
-          readFrom: 'pdhzfxInfo[0].sysList',
-          mapFromData: true,
-          items: [
-            {
-              title: '',
-              contents: [
-                {
-                  label: '${beltName}',
-                  value: '${warnlevel}',
-                  info: '',
-                },
-              ],
-            },
-          ],
-        },
-        // {
-        //   type: 'C',
-        //   readFrom: 'sysList',
-        //   mapFromData: true,
-        //   items: [
-        //     {
-        //       title: '',
-        //       contents: [
-        //         {
-        //           label: '${beltName}',
-        //           value: '${warnlevel}',
-        //           info: '',
-        //         },
-        //       ],
-        //     },
-        //   ],
-        // },
-      ],
-      preset: [],
-      to: '/micro-vent-3dModal/beltYjkf/index',
-    },
-    showStyle: {
-      size: 'width:440px;height:810px;',
-      version: '原版',
-      position: 'top:40px;left:25px;',
-    },
-  },
-  {
-    deviceType: 'fmhjcInfo',
-    moduleName: '预警结果',
-    pageType: 'belt',
-    moduleData: {
-      header: {
-        show: true,
-        readFrom: '',
-        selector: {
-          show: true,
-          value: '${beltName}',
-        },
-        slot: {
-          show: false,
-          value: '',
-        },
-      },
-      background: {
-        show: false,
-        type: 'video',
-        link: '',
-      },
-      layout: {
-        direction: 'column',
-        items: [
-          {
-            name: 'complex_list',
-            basis: '100%',
-          },
-        ],
-      },
-      board: [],
-      chart: [],
-      gallery: [],
-      gallery_list: [],
-      table: [],
-      list: [],
-      complex_list: [
-        {
-          type: 'C',
-          readFrom: 'sysList',
-          mapFromData: true,
-          items: [
-            {
-              title: '',
-              contents: [
-                {
-                  label: '${deviceType}',
-                  value: '${warnLevel}',
-                  info: '',
-                },
-              ],
-            },
-          ],
-        },
-      ],
-      preset: [],
-      // mock: BDfireMock,
-    },
-    showStyle: {
-      size: 'width:980px;height:280px;',
-      version: '原版',
-      position: 'top:570px;left:480px;',
-    },
-  },
-  {
-    deviceType: 'plmhInfo',
-    moduleName: '火灾监测设备监测与分析',
-    pageType: 'belt',
-    moduleData: {
-      header: {
-        show: true,
-        readFrom: '',
-        selector: {
-          show: true,
-          value: '${beltName}',
-        },
-        slot: {
-          show: false,
-          value: '',
-        },
-      },
-      background: {
-        show: false,
-        type: 'video',
-        link: '',
-      },
-      layout: {
-        direction: 'column',
-        items: [
-          {
-            name: 'list',
-            basis: '100%',
-          },
-        ],
-      },
-      board: [],
-      chart: [],
-      gallery: [],
-      gallery_list: [],
-      table: [],
-      list: [
-        {
-          type: 'B',
-          readFrom: 'sysList',
-          items: [
-            {
-              label: '系统状态',
-              value: '${[0].netstatus}',
-              trans: {
-                '0': '离线',
-                '1': '正常',
-              },
-              color: 'blue',
-              info: '',
-            },
-            {
-              label: '运行状态',
-              value: '${[0].yxzt}',
-              trans: {
-                '0': '未喷淋',
-                '1': '正在喷淋',
-              },
-              color: 'blue',
-              info: '',
-            },
-            {
-              label: '喷淋水压状态',
-              value: '${[0].plsy}',
-              color: 'blue',
-              info: '',
-            },
-            {
-              label: '控制模式',
-              value: '${[0].kzms}',
-              color: 'blue',
-              info: '',
-            },
-          ],
-        },
-      ],
-      complex_list: [],
-      preset: [
-        {
-          readFrom: '',
-        },
-      ],
-      // mock: BDfireMock,
-    },
-    showStyle: {
-      size: 'width:430px;height:350px;',
-      version: '原版',
-      position: 'top:30px;right:25px;',
-    },
-  },
-  {
-    deviceType: 'yjkfArray',
-    moduleName: '车辆定位于CO浓度关联分析',
-    pageType: 'belt',
-    moduleData: {
-      header: {
-        show: true,
-        readFrom: '',
-        selector: {
-          show: true,
-          value: '${beltName}',
-        },
-        slot: {
-          show: false,
-          value: '',
-        },
-      },
-      background: {
-        show: false,
-        type: 'video',
-        link: '',
-      },
-      layout: {
-        direction: 'row',
-        items: [
-          {
-            name: 'table',
-            basis: '100%',
-          },
-        ],
-      },
-      board: [],
-      chart: [],
-      gallery: [],
-      gallery_list: [],
-      table: [
-        {
-          type: 'C',
-          readFrom: 'aqjkData',
-          columns: [
-            {
-              name: '设备位置',
-              prop: 'deviceName',
-            },
-            {
-              name: '前门状态',
-              prop: 'frontDoorStatus',
-            },
-            {
-              name: '后门状态',
-              prop: 'backDoorStatus',
-            },
-            {
-              name: '网络状态',
-              prop: 'netStatus',
-            },
-          ],
-        },
-      ],
-      list: [],
-      complex_list: [],
-      preset: [],
-    },
-    showStyle: {
-      size: 'width:430px;height:430px;',
-      version: '原版',
-      position: 'top:415px;right:25px;',
-    },
-  },
-];
-
-/**
- * 皮带巷火灾监测预警系统 - 新版配置数据
- * 完全匹配 UI 图 4a7o4k9i.png
- */
 export const testBeltNew: Config[] = [
   // ==================== 左侧栏：火灾监测设备状态 ====================
   {
-    deviceType: 'fmhjcInfo',
+    deviceType: '',
     moduleName: '火灾监测设备报警与分析',
-    pageType: 'beltNew',
+    pageType: 'fireMonitor',
     moduleData: {
       header: {
-        show: true,
+        show: false,
         readFrom: '',
         selector: {
           show: true,
@@ -987,20 +660,20 @@ export const testBeltNew: Config[] = [
       preset: [],
     },
     showStyle: {
-      size: 'width:400px;height:825px;',
+      size: 'width:400px;height:790px;',
       version: '原版',
-      position: 'top:20px;left:25px;',
+      position: 'top:50px;left:25px;',
     },
   },
 
   // ==================== 中央中部：预警结果列表 ====================
   {
-    deviceType: 'pdhzfxInfo',
+    deviceType: '',
     moduleName: '预警结果',
-    pageType: 'beltNew',
+    pageType: 'fireMonitor',
     moduleData: {
       header: {
-        show: true,
+        show: false,
         readFrom: '',
         selector: {
           show: true,
@@ -1082,12 +755,12 @@ export const testBeltNew: Config[] = [
   },
 
   {
-    deviceType: 'sensorAnalysis',
+    deviceType: '',
     moduleName: '火灾监测设备状态',
-    pageType: 'beltNew',
+    pageType: 'fireMonitor',
     moduleData: {
       header: {
-        show: true,
+        show: false,
         readFrom: '',
         selector: {
           show: true,
@@ -1179,12 +852,12 @@ export const testBeltNew: Config[] = [
 
   // ==================== 右侧下部：车辆定位与CO浓度关联分析 ====================
   {
-    deviceType: 'vehicleCOAnalysis',
+    deviceType: '',
     moduleName: '车辆定位与CO浓度关联分析',
-    pageType: 'beltNew',
+    pageType: 'fireMonitor',
     moduleData: {
       header: {
-        show: true,
+        show: false,
         readFrom: '',
         selector: {
           show: true,

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

@@ -0,0 +1,131 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <div class="list flex items-center" :class="`list_${type}`">
+    <div class="flex-grow" :class="`list_wrapper_${type}`">
+      <!-- 遍历每一组传感器数据 -->
+      <div v-for="(item, i) in listConfig" :key="`customlist${i}`" class="list-item" :class="`list-item_${type}`">
+        <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 }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+withDefaults(
+  defineProps<{
+    listConfig: {
+      title: string;
+      contents: {
+        value: string;
+        color: string;
+        label?: string;
+        info?: string;
+      }[];
+    }[];
+    type: string;
+  }>(),
+  {
+    listConfig: () => [],
+    type: 'C',
+  }
+);
+
+const getBgClass = (riskLevel: string) => {
+  switch (riskLevel) {
+    case '低风险':
+      return 'bg-lowRisk';
+    case '一般风险':
+      return 'bg-normalRisk';
+    case '较大风险':
+      return 'bg-greaterRisk ';
+    case '重大风险':
+      return 'bg-majorRisk';
+    case '报警':
+      return 'bg-warning';
+    default:
+      return 'bg-lowRisk';
+  }
+};
+</script>
+
+<style lang="less" scoped>
+@import '/@/design/theme.less';
+
+.list {
+  padding-left: 20px;
+  background-repeat: no-repeat;
+  position: relative;
+  display: flex;
+  align-items: center;
+  list-style: none;
+}
+
+.list-item_A {
+  align-items: center;
+  text-align: center;
+  margin: 10px 10px 17px 10px;
+  display: flex;
+  flex-direction: column; /* 竖排 */
+  gap: 5px; /* 间距 */
+}
+.list-item__content_A {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: 35px;
+  padding: 0 12px;
+  color: #ffffff;
+  font-size: 13px;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+.list-item__content_A > .list-item__label {
+  padding-left: 40px;
+}
+.list-item__content_A > .list-item__value {
+  padding-right: 30px;
+  font-weight: bold;
+  font-style: italic;
+}
+.bg-lowRisk {
+  background-image: url('/@/assets/images/beltFire/lowRisk.png');
+}
+.bg-normalRisk {
+  background-image: url('/@/assets/images/beltFire/normalRisk.png');
+}
+.bg-greaterRisk {
+  background-image: url('/@/assets/images/beltFire/greaterRisk.png');
+}
+.bg-warning {
+  background-image: url('/@/assets/images/beltFire/warning.png');
+}
+.bg-majorRisk {
+  background-image: url('/@/assets/images/beltFire/majorRisk.png');
+}
+
+.list-item__content_A.bg-lowRisk .list-item__value {
+  color: #32ddff;
+}
+
+.list-item__content_A.bg-normalRisk .list-item__value {
+  color: #ffff00;
+}
+
+.list-item__content_A.bg-greaterRisk .list-item__value {
+  color: #ff9d17;
+}
+
+.list-item__content_A.bg-warning .list-item__value {
+  color: #ff0000;
+}
+
+.list-item__content_A.bg-majorRisk .list-item__value {
+  color: #ff3823;
+}
+</style>

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

@@ -0,0 +1,147 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <div class="list flex items-center" :class="`list_${type}`">
+    <div class="flex-grow" :class="`list_wrapper_${type}`">
+      <!-- 遍历每一组传感器数据 -->
+      <div v-for="(item, i) in listConfig" :key="`customlist${i}`" class="list-item" :class="`list-item_${type}`">
+        <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>
+          <div class="item-bottom">
+            {{ ctx.label }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted } from 'vue';
+
+const props = withDefaults(
+  defineProps<{
+    listConfig: {
+      title: string;
+      contents: {
+        value: string;
+        color: string;
+        label?: string;
+        info?: string;
+      }[];
+    }[];
+    type: string;
+  }>(),
+  {
+    listConfig: () => [],
+    type: 'C',
+  }
+);
+onMounted(() => {
+  console.log('listConfig', props.listConfig);
+});
+</script>
+
+<style lang="less" scoped>
+@import '/@/design/theme.less';
+
+.list {
+  padding-left: 20px;
+  background-repeat: no-repeat;
+  position: relative;
+  display: flex;
+  align-items: center;
+  list-style: none;
+}
+.list_wrapper_C {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 5px;
+}
+.list-item_C {
+  width: 80%;
+  padding: 5px 0;
+}
+
+.list-item__content_C {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  background-position: center;
+}
+
+.item-top {
+  width: 100%;
+  height: 80px;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+/* 外层list-item奇数时的图标 */
+.list-item:nth-child(odd) .list-item__content_C {
+  background-image: url('@/assets/images/beltFire/2-4.png');
+}
+
+/* 外层list-item偶数时的图标 */
+.list-item:nth-child(even) .list-item__content_C {
+  background-image: url('@/assets/images/beltFire/2-1.png');
+}
+/* 传感器图标 */
+.sensor-icon {
+  width: 100%;
+  height: 100%;
+  background-repeat: no-repeat;
+  background-size: 55% 100%;
+  background-position: center;
+  margin-bottom: 4px;
+}
+/* 外层list-item奇数时的图标 */
+.list-item:nth-child(odd) .sensor-icon {
+  background-image: url('@/assets/images/beltFire/2-5.png');
+}
+
+/* 外层list-item偶数时的图标 */
+.list-item:nth-child(even) .sensor-icon {
+  background-image: url('@/assets/images/beltFire/2-2.png');
+}
+/* 风险文字 */
+.risk-text {
+  white-space: nowrap;
+  width: 100%;
+  text-align: center;
+  color: #87ecf3;
+  font-size: 14px;
+  padding: 4px;
+  font-style: italic;
+  font-weight: bold;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  background-position: center;
+}
+/* 外层list-item奇数时的图标 */
+.list-item:nth-child(odd) .risk-text {
+  background-image: url('@/assets/images/beltFire/2-3.png');
+}
+
+/* 外层list-item偶数时的图标 */
+.list-item:nth-child(even) .risk-text {
+  background-image: url('@/assets/images/beltFire/2-6.png');
+}
+
+/* 底部：传感器名称 */
+.item-bottom {
+  margin-bottom: 5px;
+  text-align: center;
+  color: #fff;
+  font-size: 12px;
+  line-height: 1.2;
+  width: 100%;
+}
+</style>

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

@@ -0,0 +1,144 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <div class="list flex" :class="`list_${type}`">
+    <div class="flex-grow" :class="`list__wrapper_${type}`">
+      <div v-for="(item, i) in listConfig" :key="`customlist${i}`" class="list-item" :class="`list-item_${type}`">
+        <div class="list-item__content" :class="`list-item__content_${type} ${getBgClass(item.value)}`">
+          <div class="list-item__label"> {{ item.label }}</div>
+          <div class="list-item__value" :class="`list-item__value_${type}`" v-if="item.label != '控制模式'">
+            <span v-if="item.label === '系统状态' || item.label === '运行状态'" class="status_dot"></span>
+            {{ item.value }}
+          </div>
+          <div class="list-item__value" :class="`list-item__value_${type}`" v-else>
+            <!-- 单选按钮组 -->
+            <div class="radio-group">
+              <label class="radio-label">
+                <input
+                  type="radio"
+                  :name="`mode_${i}`"
+                  value="auto"
+                  :checked="item.value === '自动'"
+                  @change="$emit('mode-change', { index: i, mode: '自动' })"
+                />
+                <span>自动</span>
+              </label>
+              <label class="radio-label">
+                <input
+                  type="radio"
+                  :name="`mode_${i}`"
+                  value="manual"
+                  :checked="item.value === '手动'"
+                  @change="$emit('mode-change', { index: i, mode: '手动' })"
+                />
+                <span>手动</span>
+              </label>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+withDefaults(
+  defineProps<{
+    listConfig: {
+      label: string;
+      value: string; // 低风险 | 一般风险 | 较大风险 | 严重风险 | 报警
+      color?: string;
+      info?: string;
+    }[];
+    type: string;
+  }>(),
+  {
+    listConfig: () => [],
+    type: 'A',
+  }
+);
+const getBgClass = (riskLevel: string) => {
+  switch (riskLevel) {
+    case '低风险':
+      return 'bg-lowRisk';
+    case '一般风险':
+      return 'bg-normalRisk';
+    case '较大风险':
+      return 'bg-greaterRisk ';
+    case '重大风险':
+      return 'bg-majorRisk';
+    case '报警':
+      return 'bg-warning';
+    default:
+      return 'bg-lowRisk';
+  }
+};
+</script>
+
+<style lang="less" scoped>
+@import '/@/design/theme.less';
+
+.list {
+  background-repeat: no-repeat;
+  position: relative;
+}
+
+.list-item_B {
+  align-items: center;
+  text-align: center;
+  margin: 20px;
+  display: flex;
+}
+.list-item__content_B {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: 42px;
+  padding: 0 30px;
+  color: #ffffff;
+  font-size: 13px;
+  background-image: url('/@/assets/images/beltFire/3-1.png');
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+.list-item__content_B > .list-item__label {
+  padding-top: 10px;
+  font-size: 14px;
+}
+.list-item__content_B > .list-item__value {
+  padding-top: 10px;
+  font-size: 14px;
+  font-weight: bold;
+  color: #fff;
+}
+.radio-group {
+  display: flex;
+  gap: 10px;
+  justify-content: center;
+  align-items: center;
+}
+
+.radio-label {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  cursor: pointer;
+  font-size: 14px;
+}
+
+.radio-label input[type='radio'] {
+  width: 16px;
+  height: 16px;
+  margin: 0;
+  cursor: pointer;
+}
+
+.status_dot {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  margin-right: 4px;
+  background-color: #46ff9c;
+}
+</style>

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

@@ -0,0 +1,173 @@
+<template>
+  <div class="table__content">
+    <div class="table__content_label" :class="`table__content_label_${type}`">
+      <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 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'"
+                :class="`status-dot ${getStatusClass(get(item, t.prop))}`"
+              ></span>
+              {{ get(item, t.prop) }}
+            </span>
+          </slot>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { computed, defineProps, 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[];
+    defaultValue: string;
+  }>(),
+  {
+    type: 'B',
+    autoScroll: false,
+    columns: () => [],
+    data: () => [],
+    defaultValue: '-',
+  }
+);
+
+const scrollRef = ref(null);
+if (props.autoScroll) {
+  useAutoScroll(scrollRef);
+}
+const getStatusClass = (status) => {
+  switch (status) {
+    case '在线':
+      return 'online';
+    case '开启':
+      return 'open';
+    case '关闭':
+    case '离线':
+      return 'offline';
+    default:
+      return '';
+  }
+};
+const flexBasis = computed(() => {
+  return Math.fround(100 / props.columns.length) + '%';
+});
+
+function get(o, p) {
+  const d = _.get(o, p);
+  return _.isNil(d) ? props.defaultValue : d === '' ? props.defaultValue : d;
+}
+</script>
+<style lang="less" scoped>
+@import '/@/design/theme.less';
+@import '@/design/theme.less';
+
+@font-face {
+  font-family: 'douyuFont';
+  src: url('/@/assets/font/douyuFont.otf');
+}
+.table__content {
+  --image-content-label: url('/@/assets/images/beltFire/4-1.png');
+  --image-content-text: url('/@/assets/images/beltFire/4-2.png');
+  --image-content-label-d: url(/@/assets/images/home-container/configurable/minehome/content-label.png);
+  --image-content-body-d: url('/@/assets/images/home-container/configurable/minehome/content-body.png');
+  height: 100%;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 5px 0;
+
+  .table__content_label {
+    padding: 10px;
+    width: 400px;
+    height: 32px;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    .label-t {
+      text-align: center;
+      font-size: 14px;
+    }
+  }
+  .table__content_label_C {
+    background-position: center 100%;
+    background-size: 100% 40px;
+    background-repeat: no-repeat;
+    background-image: var(--image-content-label);
+    height: 40px;
+    .label-t {
+      background-repeat: no-repeat;
+      background-size: 80% auto;
+      background-position: center;
+      background-image: var(--image-list-head);
+    }
+  }
+
+  .table__content_list {
+    height: calc(100% - 32px);
+    width: 400px;
+    display: flex;
+    flex-direction: column;
+    padding: 5px 0;
+    box-sizing: border-box;
+    overflow-y: auto;
+    .table__content_list_row {
+      width: 100%;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+      color: #fff;
+      margin-bottom: 5px;
+      span {
+        display: inline-block;
+        text-align: center;
+      }
+    }
+  }
+  .table__content_list_C {
+    .table__content_list_row {
+      min-height: 50px;
+      background-size: 100% auto;
+      background-repeat: no-repeat;
+      background-position: center bottom;
+      background-image: var(--image-content-text);
+    }
+  }
+  .status-dot {
+    display: inline-block;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    margin-right: 4px;
+  }
+
+  .status-dot.online {
+    background-color: #46ff9c;
+    box-shadow: 0 0 6px 2px rgba(76, 248, 142, 0.6);
+  }
+
+  .status-dot.open {
+    background-color: #2cb6ff;
+    box-shadow: 0 0 6px 2px rgba(34, 125, 245, 0.425);
+  }
+
+  .status-dot.offline,
+  .status-dot.closed {
+    background-color: gray;
+    box-shadow: 0 0 6px 2px rgba(105, 105, 105, 0.6);
+  }
+}
+</style>

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

@@ -66,216 +66,216 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref, computed } from 'vue';
-
-  const props = defineProps<{
-    config: {
-      list: Array<{
-        readFrom: string;
-        title: string;
-        contentTop: {
-          code: string;
-          color: string;
-          label?: string;
-        }[];
-        contents: {
-          code: string;
-          color: string;
-          label?: string;
-          info?: string;
-        }[];
-      }>;
-      data: {
-        [key: string]: any;
-      };
+import { ref, computed } from 'vue';
+
+const props = defineProps<{
+  config: {
+    list: Array<{
+      readFrom: string;
+      title: string;
+      contentTop: {
+        code: string;
+        color: string;
+        label?: string;
+      }[];
+      contents: {
+        code: string;
+        color: string;
+        label?: string;
+        info?: string;
+      }[];
+    }>;
+    data: {
+      [key: string]: any;
     };
-  }>();
-
-  /**
-   * 解析模板字符串并返回值
-   * @param {String} templateStr - 例如: '${[0].max}'
-   */
-  function parseTemplate(str, readFrom) {
-    try {
-      // 简单的字符串替换逻辑
-      // 匹配 ${[索引].属性名} 格式
-      if (str.includes('${')) {
-        const regex = /\$\{\[(\d+)\]\.(\w+)\}/;
-
-        const match = str.match(regex);
-        if (match) {
-          const index = match[1]; // 获取索引，例如 "0"
-          const key = match[2]; // 获取属性名，例如 "max"
-          // 安全读取数据
-          if (props.config.data[index] !== undefined) {
-            return props.config.data[index][key];
-          }
+  };
+}>();
+
+/**
+ * 解析模板字符串并返回值
+ * @param {String} templateStr - 例如: '${[0].max}'
+ */
+function parseTemplate(str, readFrom) {
+  try {
+    // 简单的字符串替换逻辑
+    // 匹配 ${[索引].属性名} 格式
+    if (str.includes('${')) {
+      const regex = /\$\{\[(\d+)\]\.(\w+)\}/;
+
+      const match = str.match(regex);
+      if (match) {
+        const index = match[1]; // 获取索引，例如 "0"
+        const key = match[2]; // 获取属性名，例如 "max"
+        // 安全读取数据
+        if (props.config.data[index] !== undefined) {
+          return props.config.data[index][key];
         }
+      }
+    } else {
+      if (readFrom) {
+        return props.config.data[readFrom][str];
       } else {
-        if (readFrom) {
-          return props.config.data[readFrom][str];
-        } else {
-          return props.config.data[str];
-        }
+        return props.config.data[str];
       }
-
-      return '数据未找到';
-      return 'N/A';
-    } catch (e) {
-      return 'Error';
     }
-  }
-
-  // --- 3. 交互逻辑 ---
-  const collapsedIndex = ref(null);
-
-  const toggleCollapse = (index) => {
-    collapsedIndex.value = collapsedIndex.value === index ? null : index;
-  };
-
-  // --- 4. 状态判断方法 ---
-  const getAlarmColor = (value) => {
-    // 根据 trans 规则判断颜色
-    if (value === true || value == 1) return 'red';
-    if (value === false || value == 0) return 'green';
-    return 'white';
-  };
 
-  const getAlarmText = (value) => {
-    if (value === true) return '报警';
-    if (value === false) return '正常';
-    return value;
-  };
+    return '数据未找到';
+    return 'N/A';
+  } catch (e) {
+    return 'Error';
+  }
+}
+
+// --- 3. 交互逻辑 ---
+const collapsedIndex = ref(null);
+
+const toggleCollapse = (index) => {
+  collapsedIndex.value = collapsedIndex.value === index ? null : index;
+};
+
+// --- 4. 状态判断方法 ---
+const getAlarmColor = (value) => {
+  // 根据 trans 规则判断颜色
+  if (value === true || value == 1) return 'red';
+  if (value === false || value == 0) return 'green';
+  return 'white';
+};
+
+const getAlarmText = (value) => {
+  if (value === true) return '报警';
+  if (value === false) return '正常';
+  return value;
+};
 </script>
 
 <style scoped>
-  .sensor-analysis-board {
-    background: linear-gradient(180deg, #0b2b4a 0%, #020f1a 100%);
-    color: #fff;
-    font-family: 'Microsoft YaHei', sans-serif;
-    padding: 10px;
-    border-radius: 8px;
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
-  }
-
-  .sensor-group {
-    display: flex;
-    flex-direction: column;
-    gap: 15px;
-  }
-
-  .sensor-card {
-    background: rgba(0, 40, 70, 0.6);
-    border: 1px solid #00bfff;
-    border-radius: 8px;
-    padding: 15px;
-    box-shadow: inset 0 0 10px rgba(0, 191, 255, 0.3);
-  }
-
-  .sensor-header {
-    border-bottom: 1px solid #00bfff;
-    padding-bottom: 8px;
-    margin-bottom: 10px;
-  }
-
-  .sensor-title {
-    font-size: 18px;
-    font-weight: bold;
-    color: #00bfff;
-    margin: 0;
-  }
-
+.sensor-analysis-board {
+  background: linear-gradient(180deg, #0b2b4a 0%, #020f1a 100%);
+  color: #fff;
+  font-family: 'Microsoft YaHei', sans-serif;
+  padding: 10px;
+  border-radius: 8px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
+}
+
+.sensor-group {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
+.sensor-card {
+  background: rgba(0, 40, 70, 0.6);
+  border: 1px solid #00bfff;
+  border-radius: 8px;
+  padding: 15px;
+  box-shadow: inset 0 0 10px rgba(0, 191, 255, 0.3);
+}
+
+.sensor-header {
+  border-bottom: 1px solid #00bfff;
+  padding-bottom: 8px;
+  margin-bottom: 10px;
+}
+
+.sensor-title {
+  font-size: 18px;
+  font-weight: bold;
+  color: #00bfff;
+  margin: 0;
+}
+
+.sensor-values {
+  display: flex;
+  justify-content: space-around;
+  margin-bottom: 15px;
+  text-align: center;
+}
+
+.value-item {
+  flex: 1;
+  padding: 5px;
+}
+
+.label {
+  display: block;
+  font-size: 14px;
+  color: #8ecfff;
+  margin-bottom: 5px;
+}
+
+.value {
+  font-size: 24px;
+  font-weight: bold;
+  color: #fff;
+}
+
+.sensor-details {
+  background: rgba(0, 20, 40, 0.8);
+  border-radius: 6px;
+  padding: 10px;
+}
+
+.detail-row {
+  display: flex;
+  justify-content: space-between;
+  padding: 8px 0;
+  cursor: pointer;
+  border-bottom: 1px solid rgba(142, 207, 255, 0.3);
+  transition: background 0.3s;
+}
+
+.detail-row:last-child {
+  border-bottom: none;
+}
+
+.detail-row:hover {
+  background: rgba(0, 100, 200, 0.3);
+}
+
+.row-label {
+  font-size: 15px;
+  color: #a0daff;
+  display: flex;
+  align-items: center;
+}
+
+.row-value {
+  font-size: 16px;
+  font-weight: bold;
+}
+
+.arrow-icon {
+  transition: transform 0.3s;
+  margin-right: 5px;
+  font-size: 12px;
+}
+
+.is-collapsed .arrow-icon {
+  transform: rotate(90deg);
+}
+
+.collapse-content {
+  padding-top: 10px;
+  animation: fadeIn 0.5s ease-in-out;
+}
+
+/* 折叠动画 */
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+/* 模拟图片中的样式 */
+@media (max-width: 600px) {
   .sensor-values {
-    display: flex;
-    justify-content: space-around;
-    margin-bottom: 15px;
-    text-align: center;
-  }
-
-  .value-item {
-    flex: 1;
-    padding: 5px;
-  }
-
-  .label {
-    display: block;
-    font-size: 14px;
-    color: #8ecfff;
-    margin-bottom: 5px;
-  }
-
-  .value {
-    font-size: 24px;
-    font-weight: bold;
-    color: #fff;
-  }
-
-  .sensor-details {
-    background: rgba(0, 20, 40, 0.8);
-    border-radius: 6px;
-    padding: 10px;
-  }
-
-  .detail-row {
-    display: flex;
-    justify-content: space-between;
-    padding: 8px 0;
-    cursor: pointer;
-    border-bottom: 1px solid rgba(142, 207, 255, 0.3);
-    transition: background 0.3s;
-  }
-
-  .detail-row:last-child {
-    border-bottom: none;
-  }
-
-  .detail-row:hover {
-    background: rgba(0, 100, 200, 0.3);
-  }
-
-  .row-label {
-    font-size: 15px;
-    color: #a0daff;
-    display: flex;
-    align-items: center;
-  }
-
-  .row-value {
-    font-size: 16px;
-    font-weight: bold;
-  }
-
-  .arrow-icon {
-    transition: transform 0.3s;
-    margin-right: 5px;
-    font-size: 12px;
-  }
-
-  .is-collapsed .arrow-icon {
-    transform: rotate(90deg);
-  }
-
-  .collapse-content {
-    padding-top: 10px;
-    animation: fadeIn 0.5s ease-in-out;
-  }
-
-  /* 折叠动画 */
-  .fade-enter-active,
-  .fade-leave-active {
-    transition: opacity 0.3s ease;
-  }
-
-  .fade-enter-from,
-  .fade-leave-to {
-    opacity: 0;
-  }
-
-  /* 模拟图片中的样式 */
-  @media (max-width: 600px) {
-    .sensor-values {
-      flex-direction: column;
-      gap: 10px;
-    }
+    flex-direction: column;
+    gap: 10px;
   }
+}
 </style>

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

@@ -82,6 +82,9 @@
           <template v-else-if="config.type === 'timelineNew'">
             <TimelineListNew class="content__module" :list-config="config.items" />
           </template>
+          <template v-else-if="config.pagetype === 'Belt'">
+            <CustomListBelt class="content__module" :type="config.type" :list-config="config.items" />
+          </template>
           <template v-else>
             <CustomList class="content__module" :type="config.type" :list-config="config.items" />
           </template>
@@ -99,11 +102,28 @@
         </template>
         <!-- 复杂列表部分 -->
         <template v-if="config.name === 'complex_list'">
-          <ComplexList class="content__module" :type="config.type" :list-config="config.items" />
+          <template v-if="config.pagetype === 'Belt'">
+            <ComplexListBelt class="content__module" :type="config.type" :list-config="config.items" />
+          </template>
+          <template v-else-if="config.pagetype === 'complex_list1'">
+            <ComplexList1Belt class="content__module" :type="config.type" :list-config="config.items" />
+          </template>
+          <template v-else>
+            <ComplexList class="content__module" :type="config.type" :list-config="config.items" />
+          </template>
         </template>
         <!-- 表格部分 -->
         <template v-if="config.name === 'table'">
+          <CustomTableBelt
+            v-if="config.pagetype === 'Belt'"
+            class="content__module text-center overflow-auto"
+            :type="config.type"
+            :columns="config.columns"
+            :auto-scroll="config.autoScroll"
+            :data="config.data"
+          />
           <CustomTable
+            v-else
             class="content__module text-center overflow-auto"
             :type="config.type"
             :columns="config.columns"
@@ -181,9 +201,7 @@
       <template v-if="config.key === 'fire_warn'">
         <FIreWarn class="content__module" />
       </template> -->
-
         <!-- ==================== 新增皮带巷火灾监测模块 ==================== -->
-
         <!-- 1. 传感器状态面板 -->
         <template v-if="config.name === 'sensor_status'">
           <SensorStatusPanel class="content__module" :config="config" />
@@ -209,426 +227,429 @@
 </template>
 
 <script lang="ts" setup>
-  import { computed, ref } from 'vue';
-  import { CommonItem, Config } from '../../../deviceManager/configurationTable/types';
-  import MiniBoard from './detail/MiniBoard.vue';
-  import TimelineList from './detail/TimelineList.vue';
-  import TimelineListNew from './detail/TimelineListNew.vue';
-  import CustomList from './detail/CustomList.vue';
-  import CustomGallery from './detail/CustomGallery.vue';
-  import ComplexList from './detail/ComplexList.vue';
-  import GalleryList from './detail/GalleryList.vue';
-  import CustomTable from './detail/CustomTable.vue';
-  import CustomChart from './detail/CustomChart.vue';
-  import { clone } from 'lodash-es';
-  import { getData, getFormattedText } from '../hooks/helper';
-  import BlastDelta from '../../../monitorManager/deviceMonitor/components/device/modal/blastDelta.vue';
-  import QHCurve from './preset/QHCurve.vue';
-  import MeasureDetail from './preset/MeasureDetail.vue';
-  import CustomTabs from './preset/CustomTabs.vue';
-  import AIChat from '/@/components/AIChat/MiniChat.vue';
-  import DeviceAlarm from './preset/DeviceAlarm.vue';
-  import SelectCs from './preset/SelectCs.vue';
-  import MiniBoardNew from './detail/MiniBoard-New.vue';
-  import Partition from './preset/partition.vue';
-  import SelectorDualChart from './preset/selectorDualChart.vue';
-  import RadioLabel from './preset/radioLabel.vue';
-  import ButtonList from './preset/buttonList.vue';
-  import NitrogenBtnList from './preset/nitrogenBtnList.vue';
-  import cardList from './preset/cardList.vue';
-  import generalList from './preset/generalList.vue';
-  import GateBoard from '../belt/components/detail/gateBoard.vue';
-  // ==================== 新增皮带巷火灾监测组件 ====================
-  import SensorStatusPanel from './belt/SensorStatusPanel.vue';
-  import FireSensorAnalysis from './belt/FireSensorAnalysis.vue';
-  import WarningResultList from './belt/WarningResultList.vue';
-  import VehicleCOAnalysis from './belt/VehicleCOAnalysis.vue';
+import { computed, ref } from 'vue';
+import { CommonItem, Config } from '../../../deviceManager/configurationTable/types';
+import MiniBoard from './detail/MiniBoard.vue';
+import TimelineList from './detail/TimelineList.vue';
+import TimelineListNew from './detail/TimelineListNew.vue';
+import CustomList from './detail/CustomList.vue';
+import CustomGallery from './detail/CustomGallery.vue';
+import ComplexList from './detail/ComplexList.vue';
+import GalleryList from './detail/GalleryList.vue';
+import CustomTable from './detail/CustomTable.vue';
+import CustomChart from './detail/CustomChart.vue';
+import { clone } from 'lodash-es';
+import { getData, getFormattedText } from '../hooks/helper';
+import BlastDelta from '../../../monitorManager/deviceMonitor/components/device/modal/blastDelta.vue';
+import QHCurve from './preset/QHCurve.vue';
+import MeasureDetail from './preset/MeasureDetail.vue';
+import CustomTabs from './preset/CustomTabs.vue';
+import AIChat from '/@/components/AIChat/MiniChat.vue';
+import DeviceAlarm from './preset/DeviceAlarm.vue';
+import SelectCs from './preset/SelectCs.vue';
+import MiniBoardNew from './detail/MiniBoard-New.vue';
+import Partition from './preset/partition.vue';
+import SelectorDualChart from './preset/selectorDualChart.vue';
+import RadioLabel from './preset/radioLabel.vue';
+import ButtonList from './preset/buttonList.vue';
+import NitrogenBtnList from './preset/nitrogenBtnList.vue';
+import cardList from './preset/cardList.vue';
+import generalList from './preset/generalList.vue';
+import GateBoard from '../belt/components/detail/gateBoard.vue';
+// ==================== 新增皮带巷火灾监测组件 ====================
+import SensorStatusPanel from './belt/SensorStatusPanel.vue';
+import FireSensorAnalysis from './belt/FireSensorAnalysis.vue';
+import WarningResultList from './belt/WarningResultList.vue';
+import VehicleCOAnalysis from './belt/VehicleCOAnalysis.vue';
+// 首页组件
+import CustomListBelt from './belt/CustomListBelt.vue';
+import ComplexListBelt from './belt/ComplexListBelt.vue';
+import ComplexList1Belt from './belt/ComplexList1Belt.vue';
+import CustomTableBelt from './belt/CustomTableBelt.vue';
+const props = defineProps<{
+  data: any;
+  moduleData: Config['moduleData'];
+  chartData: any;
+}>();
 
-  const props = defineProps<{
-    data: any;
-    moduleData: Config['moduleData'];
-    chartData: any;
-  }>();
+const emit = defineEmits<{
+  (e: 'start-spray', data: any): void;
+  (e: 'emergency-action', action: string, data: any): void;
+}>();
 
-  const emit = defineEmits<{
-    (e: 'start-spray', data: any): void;
-    (e: 'emergency-action', action: string, data: any): void;
-  }>();
+const { background, layout } = props.moduleData;
 
-  const { background, layout } = props.moduleData;
+// 获取当原始配置带 items 项时的最终 items 配置
+function getItems(raw: any, items: CommonItem[]) {
+  return items.map((i) => {
+    return {
+      ...i,
+      label: getFormattedText(raw, i.label, i.trans),
+      value: getFormattedText(raw, i.value, i.trans),
+    };
+  });
+}
 
-  // 获取当原始配置带 items 项时的最终 items 配置
-  function getItems(raw: any, items: CommonItem[]) {
-    return items.map((i) => {
+// 获取当 List 组件配置带 items 项时的最终 items 配置
+function getListItems(raw: any, items: CommonItem[], mapFromData?: boolean) {
+  if (mapFromData && Array.isArray(raw)) {
+    return raw.map((data) => {
+      const item = items[0];
       return {
-        ...i,
-        label: getFormattedText(raw, i.label, i.trans),
-        value: getFormattedText(raw, i.value, i.trans),
+        ...item,
+        label: getFormattedText(data, item.label, item.trans),
+        value: getFormattedText(data, item.value, item.trans),
       };
     });
   }
+  return getItems(raw, items);
+}
 
-  // 获取当 List 组件配置带 items 项时的最终 items 配置
-  function getListItems(raw: any, items: CommonItem[], mapFromData?: boolean) {
-    if (mapFromData && Array.isArray(raw)) {
-      return raw.map((data) => {
-        const item = items[0];
-        return {
-          ...item,
-          label: getFormattedText(data, item.label, item.trans),
-          value: getFormattedText(data, item.value, item.trans),
-        };
-      });
-    }
-    return getItems(raw, items);
-  }
-
-  /** 根据配置里的 layout 将配置格式化为带 key 的具体配置 */
-  const layoutConfig = computed(() => {
-    const refData = props.data;
-    const board = clone(props.moduleData.board) || [];
-    const list = clone(props.moduleData.list) || [];
-    const gallery = clone(props.moduleData.gallery) || [];
-    const complex_list = clone(props.moduleData.complex_list) || [];
-    const gallery_list = clone(props.moduleData.gallery_list) || [];
-    const tabs = clone(props.moduleData.tabs) || [];
-    const chart = clone(props.moduleData.chart) || [];
-    const table = clone(props.moduleData.table) || [];
-    const preset = clone(props.moduleData.preset) || [];
-    const partition = clone(props.moduleData.partition) || [];
+/** 根据配置里的 layout 将配置格式化为带 key 的具体配置 */
+const layoutConfig = computed(() => {
+  const refData = props.data;
+  const board = clone(props.moduleData.board) || [];
+  const list = clone(props.moduleData.list) || [];
+  const gallery = clone(props.moduleData.gallery) || [];
+  const complex_list = clone(props.moduleData.complex_list) || [];
+  const gallery_list = clone(props.moduleData.gallery_list) || [];
+  const tabs = clone(props.moduleData.tabs) || [];
+  const chart = clone(props.moduleData.chart) || [];
+  const table = clone(props.moduleData.table) || [];
+  const preset = clone(props.moduleData.preset) || [];
+  const partition = clone(props.moduleData.partition) || [];
 
-    const mockData = clone(props.chartData) || [];
+  const mockData = clone(props.chartData) || [];
 
-    return layout.items.reduce((arr: any[], item) => {
-      switch (item.name) {
-        case 'board': {
-          const cfg = board.shift();
-          if (!cfg) break;
-          const data = getData(refData, cfg.readFrom, cfg.parser);
-          arr.push({
-            overflow: true,
-            ...item,
-            ...cfg,
-            items: getItems(data, cfg.items),
-          });
-          break;
-        }
-        case 'list': {
-          const cfg = list.shift();
-          if (!cfg) break;
-          const data = getData(refData, cfg.readFrom, cfg.parser);
+  return layout.items.reduce((arr: any[], item) => {
+    switch (item.name) {
+      case 'board': {
+        const cfg = board.shift();
+        if (!cfg) break;
+        const data = getData(refData, cfg.readFrom, cfg.parser);
+        arr.push({
+          overflow: true,
+          ...item,
+          ...cfg,
+          items: getItems(data, cfg.items),
+        });
+        break;
+      }
+      case 'list': {
+        const cfg = list.shift();
+        if (!cfg) break;
+        const data = getData(refData, cfg.readFrom, cfg.parser);
+        arr.push({
+          overflow: true,
+          ...item,
+          ...cfg,
+          items: getListItems(data, cfg.items, cfg.mapFromData),
+        });
+        break;
+      }
+      case 'gallery': {
+        const cfg = gallery.shift();
+        if (!cfg) break;
+        const data = getData(refData, cfg.readFrom, cfg.parser);
+        arr.push({
+          overflow: true,
+          ...item,
+          ...cfg,
+          items: getItems(data, cfg.items),
+        });
+        break;
+      }
+      case 'complex_list': {
+        const cfg = complex_list.shift();
+        if (!cfg) break;
+        const data = getData(refData, cfg.readFrom, cfg.parser);
+        if (cfg.mapFromData) {
+          const firstListItem = cfg.items[0];
           arr.push({
             overflow: true,
             ...item,
             ...cfg,
-            items: getListItems(data, cfg.items, cfg.mapFromData),
+            items: (data || []).map((d: any) => {
+              return {
+                title: getFormattedText(d, firstListItem.title, firstListItem.trans),
+                contents: firstListItem.contents.map((e: any) => {
+                  return {
+                    ...e,
+                    label: getFormattedText(d, e.label, e.trans),
+                    value: getFormattedText(d, e.value, e.trans),
+                  };
+                }),
+              };
+            }),
           });
-          break;
-        }
-        case 'gallery': {
-          const cfg = gallery.shift();
-          if (!cfg) break;
-          const data = getData(refData, cfg.readFrom, cfg.parser);
+        } else {
           arr.push({
             overflow: true,
             ...item,
             ...cfg,
-            items: getItems(data, cfg.items),
+            items: cfg.items.map((i: any) => {
+              return {
+                title: getFormattedText(data, i.title, i.trans),
+                contents: i.contents.map((e: any) => {
+                  return {
+                    ...e,
+                    label: getFormattedText(data, e.label, e.trans),
+                    value: getFormattedText(data, e.value, e.trans),
+                  };
+                }),
+              };
+            }),
           });
-          break;
         }
-        case 'complex_list': {
-          const cfg = complex_list.shift();
-          if (!cfg) break;
-          const data = getData(refData, cfg.readFrom, cfg.parser);
-          if (cfg.mapFromData) {
-            const firstListItem = cfg.items[0];
-            arr.push({
-              overflow: true,
-              ...item,
-              ...cfg,
-              items: (data || []).map((d: any) => {
-                return {
-                  title: getFormattedText(d, firstListItem.title, firstListItem.trans),
-                  contents: firstListItem.contents.map((e: any) => {
-                    return {
-                      ...e,
-                      label: getFormattedText(d, e.label, e.trans),
-                      value: getFormattedText(d, e.value, e.trans),
-                    };
-                  }),
-                };
-              }),
-            });
-          } else {
-            arr.push({
-              overflow: true,
-              ...item,
-              ...cfg,
-              items: cfg.items.map((i: any) => {
-                return {
-                  title: getFormattedText(data, i.title, i.trans),
-                  contents: i.contents.map((e: any) => {
-                    return {
-                      ...e,
-                      label: getFormattedText(data, e.label, e.trans),
-                      value: getFormattedText(data, e.value, e.trans),
-                    };
-                  }),
-                };
-              }),
-            });
-          }
-          break;
-        }
-        case 'gallery_list': {
-          const cfg = gallery_list.shift();
-          if (!cfg) break;
-          const data = getData(refData, cfg.readFrom, cfg.parser);
+        break;
+      }
+      case 'gallery_list': {
+        const cfg = gallery_list.shift();
+        if (!cfg) break;
+        const data = getData(refData, cfg.readFrom, cfg.parser);
+        arr.push({
+          overflow: true,
+          ...item,
+          ...cfg,
+          items: getItems(data, cfg.items),
+          galleryItems: getItems(data, cfg.galleryItems),
+        });
+        break;
+      }
+      case 'tabs': {
+        const cfg = tabs.shift();
+        if (!cfg) break;
+        const data = getData(refData, cfg.readFrom, cfg.parser);
+        if (cfg.mapFromData) {
+          const firstListItem = cfg.items[0];
           arr.push({
             overflow: true,
             ...item,
             ...cfg,
-            items: getItems(data, cfg.items),
-            galleryItems: getItems(data, cfg.galleryItems),
-          });
-          break;
-        }
-        case 'tabs': {
-          const cfg = tabs.shift();
-          if (!cfg) break;
-          const data = getData(refData, cfg.readFrom, cfg.parser);
-          if (cfg.mapFromData) {
-            const firstListItem = cfg.items[0];
-            arr.push({
-              overflow: true,
-              ...item,
-              ...cfg,
-              items: (data || []).map((d: any) => {
-                return {
-                  title: getFormattedText(d, firstListItem.title, firstListItem.trans),
-                  contents: firstListItem.contents.map((e: any) => {
-                    return {
-                      ...e,
-                      label: getFormattedText(d, e.label, e.trans),
-                      value: getFormattedText(d, e.value, e.trans),
-                    };
-                  }),
-                };
-              }),
-            });
-          } else {
-            arr.push({
-              overflow: true,
-              ...item,
-              ...cfg,
-              items: cfg.items.map((i: any) => {
-                return {
-                  title: getFormattedText(data, i.title, i.trans),
-                  contents: i.contents.map((e: any) => {
-                    return {
-                      ...e,
-                      label: getFormattedText(data, e.label, e.trans),
-                      value: getFormattedText(data, e.value, e.trans),
-                    };
-                  }),
-                };
-              }),
-            });
-          }
-          break;
-        }
-        case 'chart': {
-          const cfg = chart.shift();
-          if (!cfg) break;
-          const data = cfg?.type == 'scatter' ? getData(mockData, cfg.readFrom, cfg.parser) : getData(refData, cfg.readFrom, cfg.parser);
-          arr.push({
-            ...item,
-            config: cfg,
-            data,
-          });
-          break;
-        }
-        case 'table': {
-          const cfg = table.shift();
-          if (!cfg) break;
-          // const data = getData(refData, cfg.readFrom, cfg.parser);
-          arr.push({
-            ...cfg,
-            ...item,
-            columns: cfg.columns,
-            data: refData,
+            items: (data || []).map((d: any) => {
+              return {
+                title: getFormattedText(d, firstListItem.title, firstListItem.trans),
+                contents: firstListItem.contents.map((e: any) => {
+                  return {
+                    ...e,
+                    label: getFormattedText(d, e.label, e.trans),
+                    value: getFormattedText(d, e.value, e.trans),
+                  };
+                }),
+              };
+            }),
           });
-          break;
-        }
-        case 'partition': {
-          const cfg = partition.shift();
-          if (!cfg) break;
-          const data = getData(refData, cfg.readFrom, cfg.parser);
+        } else {
           arr.push({
             overflow: true,
             ...item,
-            data,
             ...cfg,
+            items: cfg.items.map((i: any) => {
+              return {
+                title: getFormattedText(data, i.title, i.trans),
+                contents: i.contents.map((e: any) => {
+                  return {
+                    ...e,
+                    label: getFormattedText(data, e.label, e.trans),
+                    value: getFormattedText(data, e.value, e.trans),
+                  };
+                }),
+              };
+            }),
           });
-          break;
-        }
-
-        // ==================== 新增皮带巷模块配置处理 ====================
-        // 火灾监测设备报警与分析
-        case 'sensor_status': {
-          arr.push({
-            overflow: true,
-            ...item,
-            list: list,
-            data: refData,
-          });
-          break;
-        }
-        //火灾监测设备状态
-        case 'fire_sensor_analysis': {
-          arr.push({
-            overflow: true,
-            ...item,
-            list: list,
-            data: refData,
-          });
-          break;
         }
+        break;
+      }
+      case 'chart': {
+        const cfg = chart.shift();
+        if (!cfg) break;
+        const data = cfg?.type == 'scatter' ? getData(mockData, cfg.readFrom, cfg.parser) : getData(refData, cfg.readFrom, cfg.parser);
+        arr.push({
+          ...item,
+          config: cfg,
+          data,
+        });
+        break;
+      }
+      case 'table': {
+        const cfg = table.shift();
+        if (!cfg) break;
+        // const data = getData(refData, cfg.readFrom, cfg.parser);
+        arr.push({
+          ...cfg,
+          ...item,
+          columns: cfg.columns,
+          data: refData,
+        });
+        break;
+      }
+      case 'partition': {
+        const cfg = partition.shift();
+        if (!cfg) break;
+        const data = getData(refData, cfg.readFrom, cfg.parser);
+        arr.push({
+          overflow: true,
+          ...item,
+          data,
+          ...cfg,
+        });
+        break;
+      }
+      // ==================== 新增皮带巷模块配置处理 ====================
+      // 火灾监测设备报警与分析
+      case 'sensor_status': {
+        arr.push({
+          overflow: true,
+          ...item,
+          list: list,
+          data: refData,
+        });
+        break;
+      }
+      //火灾监测设备状态
+      case 'fire_sensor_analysis': {
+        arr.push({
+          overflow: true,
+          ...item,
+          list: list,
+          data: refData,
+        });
+        break;
+      }
 
-        case 'warning_result': {
-          const cfg = table.shift();
-          if (!cfg) break;
-          arr.push({
-            overflow: true,
-            ...item,
-            ...cfg,
-            columns: cfg.columns,
-            data: refData,
-          });
-          break;
-        }
+      case 'warning_result': {
+        const cfg = table.shift();
+        if (!cfg) break;
+        arr.push({
+          overflow: true,
+          ...item,
+          ...cfg,
+          columns: cfg.columns,
+          data: refData,
+        });
+        break;
+      }
 
-        case 'vehicle_co_analysis': {
-          arr.push({
-            overflow: true,
-            ...item,
-            list: list,
-            data: refData,
-          });
-          break;
-        }
+      case 'vehicle_co_analysis': {
+        arr.push({
+          overflow: true,
+          ...item,
+          list: list,
+          data: refData,
+        });
+        break;
+      }
 
-        default: {
-          const cfg = preset.shift();
-          if (!cfg) break;
-          const data = getData(refData, cfg.readFrom, cfg.parser);
-          arr.push({
-            ...item,
-            data,
-            config: cfg,
-          });
-          break;
-        }
+      default: {
+        const cfg = preset.shift();
+        if (!cfg) break;
+        const data = getData(refData, cfg.readFrom, cfg.parser);
+        arr.push({
+          ...item,
+          data,
+          config: cfg,
+        });
+        break;
       }
-      return arr;
-    }, []);
-  });
+    }
+    return arr;
+  }, []);
+});
 </script>
 <style lang="less" scoped>
-  @import '@/design/theme.less';
+@import '@/design/theme.less';
 
-  .content {
-    height: calc(100% - 30px);
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    overflow-y: auto;
-    overflow-x: hidden;
-  }
-  .content__background {
-    width: 100%;
-    // height: 100%;
-    height: calc(100% - 65px);
-    position: absolute;
-    top: 65px;
-    left: 0;
-    z-index: 0;
-    object-fit: fill;
-    padding: 5px;
-    box-sizing: border-box;
-  }
-  .content__background_1 {
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    top: 0px;
-    left: 0;
-    z-index: 0;
-    object-fit: fill;
-  }
+.content {
+  height: calc(100% - 30px);
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+.content__background {
+  width: 100%;
+  // height: 100%;
+  height: calc(100% - 65px);
+  position: absolute;
+  top: 65px;
+  left: 0;
+  z-index: 0;
+  object-fit: fill;
+  padding: 5px;
+  box-sizing: border-box;
+}
+.content__background_1 {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0px;
+  left: 0;
+  z-index: 0;
+  object-fit: fill;
+}
 
-  .image__background {
-    width: 35%;
-    height: 61%;
-    left: 30%;
-  }
+.image__background {
+  width: 35%;
+  height: 61%;
+  left: 30%;
+}
 
-  .content__module {
-    width: 100%;
-    height: 100%;
-  }
+.content__module {
+  width: 100%;
+  height: 100%;
+}
 
-  .content__module1 {
-    background: url('@/assets/images/vent/homeNew/databg/4.png');
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-    height: 129px;
-    margin-top: 20%;
-  }
+.content__module1 {
+  background: url('@/assets/images/vent/homeNew/databg/4.png');
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  height: 129px;
+  margin-top: 20%;
+}
 
-  .content__moduleFire {
-    width: 100%;
-    height: 100%;
-    margin-left: -24% !important;
-  }
+.content__moduleFire {
+  width: 100%;
+  height: 100%;
+  margin-left: -24% !important;
+}
 
-  .content__module_dust {
-    background: url('@/assets/images/vent/homeNew/bottomBg.png');
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-    width: 100%;
-    height: 100%;
-  }
+.content__module_dust {
+  background: url('@/assets/images/vent/homeNew/bottomBg.png');
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  width: 100%;
+  height: 100%;
+}
 
-  ::-webkit-scrollbar {
-    width: 5px !important;
-  }
+::-webkit-scrollbar {
+  width: 5px !important;
+}
 
-  ::-webkit-scrollbar-thumb {
-    width: 5px !important;
-  }
+::-webkit-scrollbar-thumb {
+  width: 5px !important;
+}
 
-  :deep(.zxm-select:not(.zxm-select-customize-input) .zxm-select-selector) {
-    color: #fff;
-  }
+:deep(.zxm-select:not(.zxm-select-customize-input) .zxm-select-selector) {
+  color: #fff;
+}
 
-  :deep(.zxm-select-arrow) {
-    color: #fff;
-  }
+:deep(.zxm-select-arrow) {
+  color: #fff;
+}
 
-  :deep(.zxm-select-selection-item) {
-    color: #fff !important;
-  }
+:deep(.zxm-select-selection-item) {
+  color: #fff !important;
+}
 
-  :deep(.zxm-select-selection-placeholder) {
-    color: #fff !important;
-  }
+:deep(.zxm-select-selection-placeholder) {
+  color: #fff !important;
+}
 
-  :deep(.dialog-overlay) {
-    width: 100%;
-    height: 100%;
-    position: unset;
-    box-shadow: unset;
-  }
+:deep(.dialog-overlay) {
+  width: 100%;
+  height: 100%;
+  position: unset;
+  box-shadow: unset;
+}
 </style>

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

@@ -16,15 +16,7 @@
       @open-change="visible = $event"
     >
       <div class="flex-basis-100% flex flex-items-center" @click.prevent>
-        <img
-          style="margin-right: 10px"
-          v-if="headerConfig.selector.toggleIcon"
-          src="@/assets/images/home-container/configurable/electroChamper/2-2.png"
-          alt=""
-        />
-        <SwapOutlined v-else class="w-30px" />
-
-        <div class="w-100px flex-grow-1 overflow-hidden whitespace-nowrap text-ellipsis">
+        <div class="w-100px flex-grow-1 overflow-hidden whitespace-nowrap text-ellipsis" style="margin-left: 20px">
           {{ selectedDeviceLabel }}
         </div>
         <CaretUpOutlined class="w-30px" v-if="visible" />
@@ -49,82 +41,82 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { ref, watch } from 'vue';
-  import { Config } from '../../../deviceManager/configurationTable/types';
-  import { useInitModule } from '../hooks/useInit';
-  import { MenuItem, Menu, Dropdown } from 'ant-design-vue';
-  import { SwapOutlined, CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons-vue';
+import { ref, watch } from 'vue';
+import { Config } from '../../../deviceManager/configurationTable/types';
+import { useInitModule } from '../../../home/configurable/hooks/useInit';
+import { MenuItem, Menu, Dropdown } from 'ant-design-vue';
+import { CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons-vue';
+const props = defineProps<{
+  moduleData: Config['moduleData'];
+  deviceType: Config['deviceType'];
+  data: any;
+}>();
 
-  const props = defineProps<{
-    moduleData: Config['moduleData'];
-    deviceType: Config['deviceType'];
-    data: any;
-  }>();
+const emit = defineEmits(['select']);
 
-  const emit = defineEmits(['select']);
+const visible = ref(false);
+const headerConfig = props.moduleData.header;
+const { selectedDeviceID, selectedDevice, selectedDeviceSlot, selectedDeviceLabel, options, init } = useInitModule(
+  props.deviceType,
+  props.moduleData
+);
 
-  const visible = ref(false);
-  const headerConfig = props.moduleData.header;
-  const { selectedDeviceID, selectedDevice, selectedDeviceSlot, selectedDeviceLabel, options, init } = useInitModule(
-    props.deviceType,
-    props.moduleData
-  );
+function selectHandler({ key }) {
+  selectedDeviceID.value = key;
+  emit('select', selectedDevice.value);
+}
 
-  function selectHandler({ key }) {
-    selectedDeviceID.value = key;
+watch(
+  () => props.data,
+  (d) => {
+    init(d);
     emit('select', selectedDevice.value);
+  },
+  {
+    immediate: true,
   }
-
-  watch(
-    () => props.data,
-    (d) => {
-      init(d);
-      emit('select', selectedDevice.value);
-    },
-    {
-      immediate: true,
-    }
-  );
+);
 </script>
 <style scoped>
-  @import '/@/design/theme.less';
+@import '/@/design/theme.less';
 
-  .costume-header {
-    height: 30px;
-    background-image: linear-gradient(90deg, var(--vent-base-light-bg-opcity), transparent 20%, transparent 80%, var(--vent-base-light-bg-opcity));
-  }
-  .costume-headerToggleIcon {
-    height: 30px;
-    background: url('@/assets/images/home-container/configurable/electroChamper/2-1.png');
-    background-size: 100% 100%;
-  }
-  .costume-header_left {
-    border-left: 3px solid;
-    border-right: 3px solid;
-    border-image-source: linear-gradient(to top, #00000033, var(--vent-base-light-bg), #00000033);
-    border-image-slice: 1;
-  }
-  .costume-header_right {
-    border-right: 3px solid;
-    border-image-source: linear-gradient(to top, #00000033, var(--vent-base-light-bg), #00000033);
-    border-image-slice: 1;
-  }
-  img {
-    width: 16px;
-    height: 16px;
-    margin-left: 8px;
-  }
-  ::v-deep .zxm-select:not(.zxm-select-customize-input) .zxm-select-selector {
-    /* background-color: transparent; */
-    color: #fff;
-  }
-  ::v-deep .zxm-select-arrow {
-    color: #fff;
-  }
-  ::v-deep .zxm-select-selection-item {
-    color: #fff !important;
-  }
-  ::v-deep .zxm-select-selection-placeholder {
-    color: #fff !important;
-  }
+.costume-header {
+  height: 30px;
+  background: url('@/assets/images/beltFire/4-1.png');
+  background-size: 100% 100%;
+}
+.costume-headerToggleIcon {
+  height: 30px;
+  background: url('@/assets/images/beltFire/4-1.png');
+  background-size: 100% 100%;
+}
+.costume-header_left {
+  border-left: 3px solid;
+  border-right: 3px solid;
+  border-image-source: linear-gradient(to top, #00000033, var(--vent-base-light-bg), #00000033);
+  border-image-slice: 1;
+}
+.costume-header_right {
+  border-right: 3px solid;
+  border-image-source: linear-gradient(to top, #00000033, var(--vent-base-light-bg), #00000033);
+  border-image-slice: 1;
+}
+img {
+  width: 16px;
+  height: 16px;
+  margin-left: 8px;
+}
+::v-deep .zxm-select:not(.zxm-select-customize-input) .zxm-select-selector {
+  /* background-color: transparent; */
+  color: #fff;
+}
+::v-deep .zxm-select-arrow {
+  color: #fff;
+}
+::v-deep .zxm-select-selection-item {
+  color: #fff !important;
+}
+::v-deep .zxm-select-selection-placeholder {
+  color: #fff !important;
+}
 </style>