[Feat 0000]三级防灭火系统功能开发 页面优化

src/layouts/default/header/index.vue

@@ -62,7 +62,7 @@
         <a-radio :value="true">2.5D</a-radio>
         <a-radio :value="false">3D</a-radio>
       </a-radio-group>
-      <WeatherBroadcast v-if="sysOrgCode != 'sdmtjtgsd' && isShowQy && portValue != '8062'" />
+      <WeatherBroadcast v-if="sysOrgCode != 'sdmtjtgsd' && isShowQy && portValue != '8062' && hasPermission('show:weather')" />
       <VoiceBroadcast v-if="sysOrgCode != 'sdmtjtgsd' && portValue != '8062'" />
       <AIChat v-if="hasPermission('show:AIChat')" />
       <VoiceBroadcastGsd v-if="sysOrgCode == 'sdmtjtgsd'" />

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

@@ -1,3 +1,4 @@
+import { string } from 'vue-types';
 export interface Config {
   /** 模块的名称 */
   moduleName: string;

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

@@ -1,7 +1,14 @@
 <!-- belt-new.vue -->
 <template>
   <div class="company-home">
-    <customHeader Type="deatil"> 皮带巷智能管控 </customHeader>
+    <customHeader
+      :fieldNames="{ label: 'systemname', value: 'sys_id', options: 'children' }"
+      :options="options"
+      :optionValue="optionValue"
+      @change="changeSelectRow"
+    >
+      矿井全域皮带巷三级防灭火系统
+    </customHeader>
     <div class="modal-box" id="modalBox" v-if="pageType !== 'history' && isInitModal">
       <Three3D ref="three3D" :modalName="'pidai'" class="modal-3d" @success="initModalAnimate" />
       <div class="modal-css3d" id="css3dContainer"> </div>
@@ -40,12 +47,12 @@ import ModuleCommon from './components/ModuleCommon.vue';
 import Three3D from '/@/views/vent/home/configurable/components/three3D.vue';
 import BeltNav from './components/BeltNav.vue';
 import { useRouter, useRoute } from 'vue-router';
-import { getSystem, getMonitorAndAlertBelt, getDevice } from './configurable.api';
+import { getSystem, getMonitorAndAlertBelt, getDevice, getDataHome } from './configurable.api';
 import { modalAnimate } from './threejs/belt.threejs';
 import History from './components/detail/history.vue';
 // 初始化配置
 const { configs, fetchConfigs } = useInitConfigs();
-const { updateEnhancedConfigs, updateData, data } = useInitPage('皮带巷三级防灭火系统');
+const { updateEnhancedConfigs, updateData, data } = useInitPage('矿井全域皮带巷三级防灭火系统');
 const isInitModal = ref(false);
 const pageCache = ref({
   fire_risk_warn: { configs: testBeltNew },
@@ -57,32 +64,22 @@ const pageType = ref('fire_risk_warn');
 const route = useRoute();
 const modalMonitorData = ref({});
 // 下拉框选项
-const beltOptions = [
-  { id: '1', beltName: '主运巷皮带 1' },
-  { id: '2', beltName: '主运巷皮带 2' },
-];
-
-const selectedBeltId = ref('1');
-
-// 下拉框切换处理
-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 '';
+/** 场景选项 */
+const options = ref([]);
+const optionValue = ref('');
+async function getSysDataSource() {
+  const res = await getDataHome({ dataList: 'risk_evaluator' }).catch(() => {});
+  options.value = res.risk_evaluator || [];
+  // 初始时选择第一条数据
+  if (!optionValue.value) {
+    changeSelectRow(options.value[0]['sys_id']);
   }
 }
+// 切换检测数据
+function changeSelectRow(deviceID) {
+  optionValue.value = deviceID;
+  // getDeviceList();
+}
 // 刷新数据
 async function refresh() {
   // await fetchConfigs('sys_Leather');
@@ -234,6 +231,7 @@ watch(
 
 onMounted(async () => {
   await refresh();
+  await getSysDataSource();
   initInterval();
 });
 </script>

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

@@ -2,7 +2,7 @@
 <template>
   <div class="company-home">
     <div class="border">
-      <customHeader Type="home">皮带巷三级防灭火系统</customHeader>
+      <customHeader>矿井全域皮带巷三级防灭火系统</customHeader>
       <!-- <div class="test" style="width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 0"> -->
       <SubApp />
       <!-- </div> -->
@@ -17,6 +17,7 @@
           :page-type="cfg.pageType"
           :data="data"
           :visible="true"
+          @clickItem="handleItemClick"
         />
       </div>
       <!-- 巷道模型组件 -->
@@ -33,60 +34,303 @@ import SubApp from '/@/components/vent/micro/createSubApp.vue';
 // import { BDFireMock } from './mock';
 import { getDataHome } from './configurable.api';
 const { configs, devicesTypes, fetchConfigs } = useInitConfigs();
-const { updateEnhancedConfigs, updateData, data } = useInitPage('皮带巷三级防灭火系统');
-// const readData = ref({});
+const { updateEnhancedConfigs, updateData, data } = useInitPage('矿井全域皮带巷三级防灭火系统');
+const readData = ref({
+  monitor_alert: [
+    {
+      sysId: '2028657172566073300',
+      devJSONAarry: [
+        {
+          name: '光纤测温',
+          value: 0,
+        },
+        {
+          name: 'CO传感器',
+          value: 0,
+        },
+        {
+          name: '烟雾传感器',
+          value: 103,
+        },
+        {
+          name: '火焰传感器',
+          value: 0,
+        },
+        {
+          name: 'HCl传感器',
+          value: 0,
+        },
+        {
+          name: '微震测声传感器',
+          value: 0,
+        },
+        {
+          name: '温度传感器',
+          value: 0,
+        },
+        {
+          name: '多参数传感器',
+          value: 0,
+        },
+      ],
+      sysName: '东翼胶带运输大巷',
+    },
+    {
+      sysId: '2028657172566073301',
+      devJSONAarry: [
+        {
+          name: '光纤测温',
+          value: 103,
+        },
+        {
+          name: 'CO传感器',
+          value: 103,
+        },
+        {
+          name: '烟雾传感器',
+          value: 103,
+        },
+        {
+          name: '火焰传感器',
+          value: 103,
+        },
+        {
+          name: 'HCl传感器',
+          value: 103,
+        },
+        {
+          name: '微震测声传感器',
+          value: 103,
+        },
+        {
+          name: '温度传感器',
+          value: 103,
+        },
+        {
+          name: '多参数传感器',
+          value: 103,
+        },
+      ],
+      sysName: '1101胶带运输顺槽',
+    },
+  ],
+  spray_control: [
+    {
+      systemName: '东翼胶带运输大巷',
+      sysId: '2028657172566073300',
+      sysList: [
+        {
+          netstatus: '1',
+          deviceStatus: '1',
+          plsy: '1#区域 1.4MPa',
+          kzms: '手动',
+        },
+      ],
+    },
+    {
+      sysId: '2028657172566073301',
+      systemName: '1101胶带运输顺槽',
+      sysList: [
+        {
+          netstatus: '1',
+          deviceStatus: '1',
+          plsy: '1#区域 1.4MPa',
+          kzms: '自动',
+        },
+      ],
+    },
+  ],
+  gate_control: [
+    {
+      sysId: '2028657172566073300',
+      systemName: '东翼胶带运输大巷',
+      gateArray: [
+        {
+          rearGateOpen: '0',
+          positon: '风门1',
+          frontGateOpen: '0',
+          status: 1,
+        },
+        {
+          rearGateOpen: '1',
+          positon: '五盘区402辅运大巷风门',
+          frontGateOpen: '1',
+          status: 1,
+        },
+        {
+          rearGateOpen: '1',
+          positon: '风门3',
+          frontGateOpen: '1',
+          status: 1,
+        },
+        {
+          rearGateOpen: '0',
+          positon: '风门4',
+          frontGateOpen: '0',
+          status: 1,
+        },
+        {
+          rearGateOpen: '0',
+          positon: '风门5',
+          frontGateOpen: '0',
+          status: 1,
+        },
+        {
+          rearGateOpen: '1',
+          positon: '风门6',
+          frontGateOpen: '1',
+          status: 1,
+        },
+      ],
+    },
+    {
+      sysId: '2028657172566073301',
+      systemName: '1101胶带运输顺槽',
+      gateArray: [
+        {
+          rearGateOpen: '1',
+          positon: '风门1#',
+          frontGateOpen: '1',
+          status: 1,
+        },
+        {
+          rearGateOpen: '1',
+          positon: '五盘区402辅运大巷风门',
+          frontGateOpen: '1',
+          status: 1,
+        },
+        {
+          rearGateOpen: '0',
+          positon: '风门3#',
+          frontGateOpen: '0',
+          status: 1,
+        },
+        {
+          rearGateOpen: '1',
+          positon: '风门4#',
+          frontGateOpen: '0',
+          status: 1,
+        },
+        {
+          rearGateOpen: '0',
+          positon: '风门5#',
+          frontGateOpen: '1',
+          status: 1,
+        },
+        {
+          rearGateOpen: '1',
+          positon: '风门6#',
+          frontGateOpen: '0',
+          status: 1,
+        },
+      ],
+    },
+  ],
+  risk_evaluator: [
+    {
+      sys_id: '2028657172566073300',
+      systemname: '东翼胶带运输大巷',
+      alarm_level: 103,
+    },
+    {
+      sys_id: '2028657172566073301',
+      systemname: '1101胶带运输顺槽',
+      alarm_level: null,
+    },
+    {
+      sys_id: '2028657172566073302',
+      systemname: '1102辅运顺槽',
+      alarm_level: null,
+    },
+  ],
+});
+// function refresh() {
+//   fetchConfigs('Leather').then(() => {
+//     configs.value = testBeltLaneFire;
+//     Promise.resolve(
+//       getDataHome({
+//         dataList: configs.value
+//           .filter((e) => e.deviceType)
+//           .map((e) => e.deviceType)
+//           .join(','),
+//       })
+//     ).then((res: any) => {
+//       res.spray_control = [
+//         {
+//           systemName: '东翼胶带运输大巷',
+//           sysId: 2028657172566073300,
+//           sysList: [
+//             {
+//               netstatus: '1',
+//               deviceStatus: '1',
+//               plsy: '1#区域 1.4MPa',
+//               kzms: '手动',
+//             },
+//           ],
+//         },
+//         {
+//           sysId: 2028657172566073301,
+//           systemName: '1101胶带运输顺槽',
+//           sysList: [
+//             {
+//               netstatus: '1',
+//               deviceStatus: '1',
+//               plqy: '2#区域',
+//               plsy: '1.6MPa',
+//               kzms: '自动',
+//             },
+//           ],
+//         },
+//       ];
+//       updateData(res);
+//     });
+//     updateEnhancedConfigs(configs.value);
+//   });
+// }
+let timer = null;
+const handleItemClick = (data) => {
+  const clickId = data.id;
+  if (!clickId) return;
+  filterDataById(clickId);
+};
+
+// 抽离公共筛选方法，初始化 + 点击共用
+const filterDataById = (clickId: string | number) => {
+  const source = readData.value;
+  const monitor = source.monitor_alert.find((item) => String(item.sysId) === String(clickId));
+  const spray = source.spray_control.find((item) => String(item.sysId) === String(clickId));
+  const gate = source.gate_control.find((item) => String(item.sysId) === String(clickId));
+
+  const newData = {
+    ...data.value,
+    monitor_alert: monitor ? [monitor] : [],
+    spray_control: spray ? [spray] : [],
+    gate_control: gate ? [gate] : [],
+    risk_evaluator: source.risk_evaluator,
+  };
+  updateData(newData);
+};
+
 function refresh() {
-  fetchConfigs('Leather').then(() => {
+  fetchConfigs('belt').then(() => {
     configs.value = testBeltLaneFire;
-    Promise.resolve(
-      getDataHome({
-        dataList: configs.value
-          .filter((e) => e.deviceType)
-          .map((e) => e.deviceType)
-          .join(','),
-      })
-    ).then((res: any) => {
-      res.spray_control = [
-        {
-          systemName: '皮带巷1',
-          sysList: [
-            {
-              netstatus: '1',
-              deviceStatus: '1',
-              plsy: '1#区域 1.4MPa',
-              kzms: '手动',
-            },
-          ],
-        },
-        {
-          systemName: '皮带巷2',
-          sysList: [
-            {
-              netstatus: '1',
-              deviceStatus: '1',
-              plqy: '2#区域',
-              plsy: '1.6MPa',
-              kzms: '自动',
-            },
-          ],
-        },
-      ];
-      updateData(res);
-    });
-    updateEnhancedConfigs(configs.value);
+    const firstId = readData.value.monitor_alert?.[0]?.sysId;
+    if (firstId) {
+      filterDataById(firstId);
+    } else {
+      Promise.resolve(readData).then(updateData);
+    }
   });
 }
-let timer = null;
-
-function initInterval() {
-  if (timer) clearInterval(timer);
-  timer = setInterval(() => {
-    refresh();
-  }, 5000);
-}
+// function initInterval() {
+//   if (timer) clearInterval(timer);
+//   timer = setInterval(() => {
+//     refresh();
+//   }, 5000);
+// }
 onMounted(() => {
   refresh();
-  initInterval();
+  // initInterval();
 });
 onUnmounted(() => {
   if (timer) {

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

@@ -1,11 +1,7 @@
 <template>
   <div class="tech-nav-container">
     <!-- 左侧圆形图标 -->
-    <div class="icon-left">
-      <div class="icon-circle">
-        <div class="icon" @click="pathClick">首页</div>
-      </div>
-    </div>
+
     <!-- 中间按钮组 -->
     <div class="top-img"></div>
     <div class="nav-buttons">
@@ -19,11 +15,11 @@
       </div>
     </div>
     <!-- 右侧圆形图标 -->
-    <div class="icon-right">
+    <!-- <div class="icon-right">
       <div class="icon-circle">
         <span class="icon" @click="openModal()">应急控制</span>
       </div>
-    </div>
+    </div> -->
   </div>
   <ConfirmModal v-model:visible="modalVisible" @handleCancel="handleCancel" @handleConfirm="handleConfirm" class="btn-confirm-modal"> </ConfirmModal>
 </template>
@@ -52,25 +48,25 @@ activeType.value = (route.query.pageType as string) || props.pageType || '';
 // 导航菜单列表
 const menuList = ref([
   {
-    name: '防灭火监测与预警',
+    name: '皮带巷火灾监测预警(一级)',
     position: 'left',
     pageType: 'fire_risk_warn',
   },
   {
-    name: '喷淋系统管控',
+    name: '火灾防治控制(二级)',
     position: 'center',
     pageType: 'sprayControl',
   },
   {
-    name: '应急控风减灾',
-    position: 'center',
-    pageType: 'emergencyControl',
-  },
-  {
-    name: '历史数据',
+    name: '防灾减灾应急联动控制(三级)',
     position: 'right',
-    pageType: 'history',
+    pageType: 'emergencyControl',
   },
+  // {
+  //   name: '历史数据',
+  //   position: 'right',
+  //   pageType: 'history',
+  // },
 ]);
 
 watch(
@@ -186,14 +182,14 @@ const handleCancel = () => {
   flex: 1;
   padding: 0 20px;
   margin-top: 15px;
-  margin-left: 60px;
+  margin-left: 55px;
   box-sizing: border-box;
 }
 .top-img {
   width: 100%;
   height: 100px;
   background: url(/src/assets/images/beltFire/yjkf/1-2.png) no-repeat center;
-  background-size: 84% 62%;
+  background-size: 100% 62%;
   position: absolute;
   top: 9px;
   left: 0;

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

@@ -69,7 +69,6 @@ function selectHandler({ key }) {
 watch(
   () => props.data,
   (d) => {
-    console.log(options, '------');
     init(d);
     emit('select', selectedDevice.value);
   },

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

@@ -17,6 +17,7 @@
             :moduleData="moduleData"
             :data="selectedDevice"
             :chartData="chartData"
+            @clickItem="(data) => emit('clickItem', data)"
           />
           <Content
             v-else
@@ -56,8 +57,12 @@ const props = defineProps<{
   visible: boolean;
   chartData?: any;
 }>();
-defineEmits(['close', 'click']);
-
+// defineEmits(['close', 'click']);
+const emit = defineEmits<{
+  (e: 'close'): void;
+  (e: 'click'): void;
+  (e: 'clickItem', data: any): void;
+}>();
 const { header } = props.moduleData;
 
 const { selectedDeviceID, selectedDevice, options, init } = useInitModule(props.deviceType, props.moduleData);

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

@@ -3,7 +3,19 @@
     <div class="vent-home-header">
       <div class="header-text"><slot></slot></div>
     </div>
-    <div class="container-title" :class="[Type === 'home' ? 'title-home' : Type === 'detail' ? 'title-detail' : '']">
+    <div class="nav">
+      <div
+        v-for="(item, index) in menuList"
+        :key="index"
+        @click="handleNavClick(item)"
+        style="cursor: pointer"
+        class="nav-item"
+        :class="{ active: isActive(item.path) }"
+      >
+        <span>{{ item.name }}</span>
+      </div>
+    </div>
+    <div class="container-title" v-if="fieldNames">
       <a-select
         class="title-select"
         ref="select"
@@ -14,16 +26,14 @@
         :options="options"
         :dropdownStyle="{ background: 'transparent', borderBottom: '1px solid #ececec66', backdropFilter: 'blur(50px)', color: '#fff' }"
       >
-        <a-select-option value="2">15212工作面</a-select-option>
-        <a-select-option value="1598491318007898113">采煤工作面</a-select-option>
-        <a-select-option value="3">掘进工作面</a-select-option>
       </a-select>
     </div>
   </div>
 </template>
 <script lang="ts">
-import { defineComponent, computed } from 'vue';
+import { defineComponent, computed, ref } from 'vue';
 import { Decoration5 } from '@kjgl77/datav-vue3';
+import { router } from '/@/router';
 export default defineComponent({
   name: 'CustomHeader',
   components: { Decoration5 },
@@ -46,6 +56,29 @@ export default defineComponent({
   emits: ['change'],
   setup(props, { emit }) {
     const currentTitleValue = computed(() => props.optionValue);
+    const menuList = ref([
+      {
+        name: '首页',
+        path: '/micro-vent-3dModal/configurable/belt/fireS/home',
+      },
+      {
+        name: '详情监控页',
+        path: '/belt/fireS/home',
+      },
+      {
+        name: '灾变模拟分析',
+        path: '/micro-vent-3dModal/dashboard/analysis?type=sysMonitor&deviceType=sysfireTunnel&sysID=2028657172566073346&deviceid=2028650091184177153&sysType=leather',
+      },
+    ]);
+    function isActive(menuPath) {
+      const currentRoutePath = router.currentRoute.value.path;
+      const menuRoutePath = menuPath.split('?')[0];
+      return currentRoutePath.startsWith(menuRoutePath);
+    }
+    function handleNavClick(item) {
+      console.log('✅️点击', item.path);
+      router.push(item.path);
+    }
     // 标题选择
     function handleTitleChange(value) {
       emit('change', value);
@@ -53,6 +86,9 @@ export default defineComponent({
     return {
       currentTitleValue,
       handleTitleChange,
+      menuList,
+      handleNavClick,
+      isActive,
     };
   },
 });
@@ -93,8 +129,8 @@ export default defineComponent({
   width: 100%;
   position: relative;
   z-index: 9999;
-  pointer-events: none;
   height: 60px;
+  pointer-events: auto;
   .vent-home-header {
     width: 100%;
     position: fixed;
@@ -131,23 +167,43 @@ export default defineComponent({
     pointer-events: auto;
     position: relative;
     z-index: 9999;
-    .title-home {
-      top: -40px !important;
-    }
-    .title-detail {
-      top: 20px !important;
-    }
+    top: 70px;
     .title-select {
       width: 340px;
       position: absolute;
-
       top: 0;
       // left: 160px;
     }
   }
+  .nav {
+    width: 100%;
+    position: fixed;
+    top: 0;
+    display: flex;
+    left: 20px;
+    gap: 30px;
+    top: 15px;
+    pointer-events: auto;
+    .nav-item {
+      flex: 1;
+      max-width: 120px;
+      height: 35px;
+      line-height: 35px;
+      padding: 0;
+      box-sizing: border-box;
+      padding-bottom: 10px;
+      text-align: center;
+      background: url('/@/assets/images/beltFire/titleNav.png') no-repeat center center;
+      background-size: 100% 90%;
+    }
+    .nav-item.active {
+      background: url('/@/assets/images/beltFire/titleNavActive.png') no-repeat center center !important;
+      background-size: 100% 190% !important;
+    }
+  }
 }
 :deep(.zxm-select) {
-  width: 300px;
+  width: 400px;
   .@{ventSpace}-select-selector {
     background: transparent !important;
     border: none !important;
@@ -155,6 +211,7 @@ export default defineComponent({
     .zxm-select-selection-item {
       color: #fff !important;
       font-size: 20px;
+      margin-left: 20px !important;
     }
   }
   .@{ventSpace}-select-arrow {

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

@@ -51,7 +51,7 @@ export const testBeltLaneFire: Config[] = [
                 {
                   label: '${systemname}',
                   value: '${alarm_level}',
-                  info: '',
+                  id: '${sys_id}',
                 },
               ],
             },
@@ -69,14 +69,14 @@ export const testBeltLaneFire: Config[] = [
   },
   {
     deviceType: 'monitor_alert',
-    moduleName: '防灭火检测与预警信息',
+    moduleName: '皮带巷火灾监测预警(一级)',
     pageType: 'belt',
     moduleData: {
       header: {
-        show: true,
+        show: false,
         readFrom: '',
         selector: {
-          show: true,
+          show: false,
           value: '${sysName}',
         },
         slot: {
@@ -107,7 +107,7 @@ export const testBeltLaneFire: Config[] = [
       complex_list: [
         {
           type: 'C',
-          readFrom: 'devJSONAarry',
+          readFrom: 'monitor_alert[0].devJSONAarry',
           mapFromData: true,
           pagetype: 'Belt',
           items: [
@@ -134,14 +134,14 @@ export const testBeltLaneFire: Config[] = [
   },
   {
     deviceType: 'spray_control',
-    moduleName: '喷淋灭火系统',
+    moduleName: '火灾防治控制(二级)',
     pageType: 'belt',
     moduleData: {
       header: {
-        show: true,
+        show: false,
         readFrom: '',
         selector: {
-          show: true,
+          show: false,
           value: '${systemName}',
         },
         slot: {
@@ -171,7 +171,7 @@ export const testBeltLaneFire: Config[] = [
       list: [
         {
           type: 'B',
-          readFrom: 'sysList',
+          readFrom: 'spray_control[0].sysList',
           pagetype: 'Belt',
           items: [
             {
@@ -225,14 +225,14 @@ export const testBeltLaneFire: Config[] = [
   },
   {
     deviceType: 'gate_control',
-    moduleName: '应急控风减灾',
+    moduleName: '防灾减灾应急联动控制(三级)',
     pageType: 'belt',
     moduleData: {
       header: {
-        show: true,
+        show: false,
         readFrom: '',
         selector: {
-          show: true,
+          show: false,
           value: '${systemName}',
         },
         slot: {
@@ -261,7 +261,7 @@ export const testBeltLaneFire: Config[] = [
       table: [
         {
           type: 'C',
-          readFrom: 'gateArray',
+          readFrom: 'gate_control[0].gateArray',
           pageType: 'Belt',
           columns: [
             {

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

@@ -4,11 +4,19 @@
     <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
+          v-for="(ctx, j) in item.contents"
+          :key="`vvhccdclc${j}`"
+          style="cursor: pointer"
+          @click="handleItemClick(i, j)"
+          :class="[
+            `list-item__content_${type}`,
+            getBgClass(ctx.value),
+            { active: activeGroup === i && activeItem === j }, // 关键修复
+          ]"
+        >
           <div class="list-item__label"> {{ ctx.label }}</div>
-          <div class="list-item__value" :class="`list-item__value_${type}`">
-            {{ getAlertName(ctx.value) }}
-          </div>
+          <div class="list-item__value" :class="`list-item__value_${type}`"> {{ getAlertName(ctx.value) }} </div>
         </div>
       </div>
     </div>
@@ -16,17 +24,18 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted } from 'vue';
-
+import { onMounted, ref } from 'vue';
+import { getFormattedText } from '../../hooks/helper';
 const props = withDefaults(
   defineProps<{
     listConfig: {
       title: string;
       contents: {
         value: string;
-        color: string;
-        label?: string;
+        color?: string;
+        label: string;
         info?: string;
+        id?: string;
       }[];
     }[];
     type: string;
@@ -36,6 +45,13 @@ const props = withDefaults(
     type: 'C',
   }
 );
+const emit = defineEmits<{
+  clickItem: [data: any];
+}>();
+
+const activeGroup = ref(0);
+const activeItem = ref(0);
+
 const alarmMap: Record<string | number, string> = {
   '101': '绿色预警',
   '102': '蓝色预警',
@@ -65,10 +81,24 @@ const getBgClass = (riskLevel: string) => {
       return 'bg-lowRisk';
   }
 };
+
+const handleItemClick = (groupIndex: number, itemIndex: number) => {
+  activeGroup.value = groupIndex;
+  activeItem.value = itemIndex;
+  // 获取原始数据
+  const rawData = props.listConfig[groupIndex].contents[itemIndex];
+  const formattedData = {
+    ...rawData,
+  };
+
+  // 抛出去的是处理后的数据
+  emit('clickItem', formattedData);
+};
 const getAlertName = (riskLevel: string | number) => {
   const key = String(riskLevel);
   return alarmMap[key] || riskLevel;
 };
+
 onMounted(() => {});
 </script>
 
@@ -93,6 +123,7 @@ onMounted(() => {});
   gap: 5px; /* 间距 */
 }
 .list-item__content_A {
+  position: relative; /* 必须保留，为了定位伪元素 */
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -103,6 +134,8 @@ onMounted(() => {});
   font-size: 13px;
   background-repeat: no-repeat;
   background-size: 100% 100%;
+  /* 确保背景图在底层 */
+  z-index: 1;
 }
 .list-item__content_A > .list-item__label {
   padding-left: 40px;
@@ -127,7 +160,18 @@ onMounted(() => {});
 .bg-majorRisk {
   background-image: url('/@/assets/images/beltFire/majorRisk.png');
 }
-
+.list-item__content_A.active::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: url('/@/assets/images/beltFire/border.png') no-repeat center center;
+  background-size: 100% 100%;
+  z-index: 2;
+  pointer-events: none;
+}
 .list-item__content_A.bg-lowRisk .list-item__value {
   color: #32ddff;
 }

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

@@ -4,7 +4,7 @@
       <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.data.gateArray" :key="`svvhbct-${index}`">
+      <div class="table__content_list_row" v-for="(item, index) in data.data.gate_control[0].gateArray" :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>
@@ -12,7 +12,7 @@
                 v-if="t.prop === 'frontGateOpen' || t.prop === 'rearGateOpen' || t.prop === 'status'"
                 :class="`status-dot ${getStatusClass(get(item, t.prop))}`"
               ></span>
-              {{ get(item, t.prop) }}
+              {{ formatValue(item, t.prop) }}
             </span>
           </slot>
         </div>
@@ -48,12 +48,11 @@ if (props.autoScroll) {
 }
 const getStatusClass = (status) => {
   switch (status) {
+    case 1:
     case '1':
       return 'online';
-    case '1':
-      return 'open';
-    case '0':
     case '0':
+    case 0:
       return 'offline';
     default:
       return '';
@@ -67,6 +66,22 @@ function get(o, p) {
   const d = _.get(o, p);
   return _.isNil(d) ? props.defaultValue : d === '' ? props.defaultValue : d;
 }
+function formatValue(obj, path) {
+  const value = _.get(obj, path);
+  console.log(value, '111111');
+  if (_.isNil(value) || value === '') {
+    return props.defaultValue;
+  }
+  switch (path) {
+    case 'status':
+      return value === 1 ? '连接' : '断开';
+    case 'rearGateOpen':
+    case 'frontGateOpen':
+      return value === '1' ? '打开' : '关闭';
+    default:
+      return value;
+  }
+}
 onMounted(() => {});
 </script>
 <style lang="less" scoped>
@@ -157,12 +172,6 @@ onMounted(() => {});
     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;

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

@@ -106,7 +106,7 @@
             <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" />
+            <ComplexList1Belt class="content__module" :type="config.type" :list-config="config.items" @clickItem="handleClickItem" />
           </template>
           <template v-else>
             <ComplexList class="content__module" :type="config.type" :list-config="config.items" />
@@ -129,7 +129,7 @@
               :type="config.type"
               :columns="config.columns"
               :auto-scroll="config.autoScroll"
-              :data="config.data"
+              :data="config.data.data"
             />
           </template>
         </template>
@@ -223,7 +223,6 @@
         <template v-if="config.name === 'fire_sensor_analysis'">
           <FireSensorAnalysis class="content__module" :config="config.config.config" :data="config.data" />
         </template>
-
         <!-- 4. 预警结果列表 -->
         <template v-if="config.name === 'warning_result'">
           <WarningResultList class="content__module" :config="config.config" :data="config.data" />
@@ -298,9 +297,12 @@ const props = defineProps<{
 
 const emit = defineEmits<{
   (e: 'start-spray', data: any): void;
+  (e: 'clickItem', data: any): void;
   (e: 'emergency-action', action: string, data: any): void;
 }>();
-
+const handleClickItem = (data: any) => {
+  emit('clickItem', data);
+};
 const { background, layout } = props.moduleData;
 
 // 获取当原始配置带 items 项时的最终 items 配置
@@ -397,11 +399,15 @@ const layoutConfig = computed(() => {
               return {
                 title: getFormattedText(d, firstListItem.title, firstListItem.trans),
                 contents: firstListItem.contents.map((e: any) => {
-                  return {
+                  const contentItem = {
                     ...e,
                     label: getFormattedText(d, e.label, e.trans),
                     value: getFormattedText(d, e.value, e.trans),
                   };
+                  if (cfg.pagetype === 'complex_list1') {
+                    contentItem.id = getFormattedText(d, e.id, e.trans);
+                  }
+                  return contentItem;
                 }),
               };
             }),

src/views/vent/home/configurable/hooks/useInit.ts

@@ -309,6 +309,7 @@ export function useInitPage(title: string) {
   }
 
   function updateData(d: any) {
+    console.log(d, '------');
     data.value = d;
   }