[Fix 0000] 皮带巷场景可配置首页问题修复

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

@@ -16,7 +16,7 @@
         :module-name="cfg.moduleName"
         :device-type="cfg.deviceType"
         :page-type="cfg.pageType"
-        :data="readData"
+        :data="data"
         :visible="true"
       />
     </div>
@@ -32,7 +32,7 @@
 
   // 初始化配置
   const { configs, fetchConfigs } = useInitConfigs();
-  const { updateEnhancedConfigs, updateData } = useInitPage('皮带巷智能管控');
+  const { data, updateData } = useInitPage('皮带巷智能管控');
 
   // 下拉框选项
   const beltOptions = [
@@ -43,7 +43,7 @@
   const selectedBeltId = ref('1');
 
   // 模拟数据
-  const readData = ref({
+  const readData = {
     fmhjcInfo: [
       {
         beltName: '主运巷皮带1',
@@ -123,7 +123,7 @@
       possibleCause: '皮带摩擦过热或电器设备故障',
       recommendation: '立即检查3#皮带区域设备',
     },
-  });
+  };
 
   // 下拉框切换处理
   function handleBeltChange(id: string) {
@@ -150,7 +150,7 @@
     fetchConfigs('belt').then(() => {
       configs.value = testBeltNew;
       Promise.resolve(readData).then(updateData);
-      updateEnhancedConfigs(configs.value);
+      // updateEnhancedConfigs(configs.value);
     });
   }
 

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

@@ -788,14 +788,14 @@ export const testBeltNew: Config[] = [
       list: [],
       preset: [
         {
+          readFrom: 'fmhjcInfo[0]',
           list: [
             {
               title: '微震测声传感器',
-              readFrom: 'fmhjcInfo.wz',
               contentTop: [
                 {
                   label: '平均值',
-                  code: 'avg',
+                  code: '${wz.avg}',
                   color: 'white',
                 },
                 {
@@ -828,11 +828,10 @@ export const testBeltNew: Config[] = [
             },
             {
               title: 'HCl传感器',
-              readFrom: 'hcl',
               contentTop: [
                 {
                   label: '平均值',
-                  code: 'avg',
+                  code: '${avg}',
                   color: 'white',
                 },
                 {
@@ -868,7 +867,6 @@ export const testBeltNew: Config[] = [
             },
             {
               title: '光纤测温传感器',
-              readFrom: 'gx',
               contentTop: [
                 {
                   label: '平均值',
@@ -908,7 +906,6 @@ export const testBeltNew: Config[] = [
             },
             {
               title: 'CO传感器',
-              readFrom: 'co',
               contentTop: [
                 {
                   label: '平均值',
@@ -948,7 +945,6 @@ export const testBeltNew: Config[] = [
             },
             {
               title: '温度传感器',
-              readFrom: 'wd',
               contentTop: [
                 {
                   label: '平均值',
@@ -1033,8 +1029,12 @@ export const testBeltNew: Config[] = [
       chart: [],
       gallery: [],
       gallery_list: [],
-      table: [
+      table: [],
+      list: [],
+      complex_list: [],
+      preset: [
         {
+          readFrom: '',
           type: 'C',
           tableReadFrom: 'sysList',
           columns: [
@@ -1074,9 +1074,6 @@ export const testBeltNew: Config[] = [
           },
         },
       ],
-      list: [],
-      complex_list: [],
-      preset: [],
     },
     showStyle: {
       size: 'width:1030px;height:300px;',
@@ -1086,15 +1083,15 @@ export const testBeltNew: Config[] = [
   },
 
   {
-    deviceType: 'sensorAnalysis',
+    deviceType: '',
     moduleName: '火灾监测设备状态',
     pageType: 'beltNew',
     moduleData: {
       header: {
-        show: true,
+        show: false,
         readFrom: '',
         selector: {
-          show: true,
+          show: false,
           value: '${beltName}',
         },
         slot: {
@@ -1121,58 +1118,60 @@ export const testBeltNew: Config[] = [
       gallery: [],
       gallery_list: [],
       table: [],
-      list: [
-        {
-          title: '火焰传感器', // 对应 UI 图中的组标题
-          readFrom: 'hy',
-          items: [
-            {
-              label: '是否报警',
-              code: 'isAlarm', // 占位符
-              status: 'isAlarm', // 状态映射逻辑 (0:正常, 1:报警)
-            },
-            {
-              label: '最大值产生于',
-              code: 'maxTime',
-              info: '1521胶运顺槽600m',
-            },
-          ],
-        },
+      list: [],
+      complex_list: [],
+      preset: [
         {
-          title: '温度传感器',
-          readFrom: 'wd',
-          items: [
-            {
-              label: '是否报警',
-              code: 'isAlarm', // 占位符
-              status: 'isAlarm', // 状态映射逻辑 (0:正常, 1:报警)
-            },
+          readFrom: 'sensorAnalysis',
+          config: [
             {
-              label: '最大值产生于',
-              code: 'maxTime',
-              info: '1521胶运顺槽600m',
+              title: '火焰传感器', // 对应 UI 图中的组标题
+              items: [
+                {
+                  label: '是否报警',
+                  code: '${hy.alarm}', // 占位符
+                  status: '1', // 状态映射逻辑 (0:正常, 1:报警)
+                },
+                {
+                  label: '最大值产生于',
+                  code: 'maxTime',
+                  info: '1521胶运顺槽600m',
+                },
+              ],
             },
-          ],
-        },
-        {
-          title: '烟雾传感器',
-          readFrom: 'yw',
-          items: [
             {
-              label: '是否报警',
-              code: 'isAlarm', // 占位符
-              status: 'isAlarm', // 状态映射逻辑 (0:正常, 1:报警)
+              title: '温度传感器',
+              items: [
+                {
+                  label: '是否报警',
+                  code: 'isAlarm', // 占位符
+                  status: 'isAlarm', // 状态映射逻辑 (0:正常, 1:报警)
+                },
+                {
+                  label: '最大值产生于',
+                  code: 'maxTime',
+                  info: '1521胶运顺槽600m',
+                },
+              ],
             },
             {
-              label: '最大值产生于',
-              code: 'maxTime',
-              info: '1521胶运顺槽600m',
+              title: '烟雾传感器',
+              items: [
+                {
+                  label: '是否报警',
+                  code: 'isAlarm', // 占位符
+                  status: 'isAlarm', // 状态映射逻辑 (0:正常, 1:报警)
+                },
+                {
+                  label: '最大值产生于',
+                  code: 'maxTime',
+                  info: '1521胶运顺槽600m',
+                },
+              ],
             },
           ],
         },
       ],
-      complex_list: [],
-      preset: [],
     },
     showStyle: {
       size: 'width:400px;height:400px;',
@@ -1183,15 +1182,15 @@ export const testBeltNew: Config[] = [
 
   // ==================== 右侧下部：车辆定位与CO浓度关联分析 ====================
   {
-    deviceType: 'vehicleCOAnalysis',
+    deviceType: '',
     moduleName: '车辆定位与CO浓度关联分析',
     pageType: 'beltNew',
     moduleData: {
       header: {
-        show: true,
+        show: false,
         readFrom: '',
         selector: {
-          show: true,
+          show: false,
           value: '${beltName}',
         },
         slot: {
@@ -1218,75 +1217,80 @@ export const testBeltNew: Config[] = [
       gallery: [],
       gallery_list: [],
       table: [],
-      list: [
-        {
-          type: 'control',
-          title: '车辆干扰排除',
-          layout: 'horizontal',
-          readFrom: '',
-          items: [
-            {
-              label: '状态',
-              code: 'isRisk',
-              trans: {
-                true: '开启',
-                false: '关闭',
-              },
-            },
-          ],
-        },
-        {
-          type: 'activity',
-          title: '最近车辆活动',
-          readFrom: 'activityList',
-          items: [
-            {
-              label: '',
-              code: 'pos',
-            },
-            {
-              label: '',
-              code: 'vehicle',
-            },
-            {
-              label: '',
-              code: 'status', // 状态映射逻辑 (0:已排除, 1:预警)
-            },
-          ],
-        },
+      list: [],
+      complex_list: [],
+      preset: [
         {
-          type: 'analysis',
-          title: 'CO浓度异常分析',
-          readFrom: 'analysisList',
-          items: [
+          readFrom: 'vehicleCOAnalysis',
+          list: [
             {
-              label: '',
-              code: 'pos',
+              type: 'control',
+              title: '车辆干扰排除',
+              layout: 'horizontal',
+              readFrom: '',
+              items: [
+                {
+                  label: '状态',
+                  code: 'isRisk',
+                  trans: {
+                    true: '开启',
+                    false: '关闭',
+                  },
+                },
+              ],
             },
             {
-              label: '',
-              code: 'analysisText',
+              type: 'activity',
+              title: '最近车辆活动',
+              readFrom: 'activityList',
+              items: [
+                {
+                  label: '',
+                  code: 'pos',
+                },
+                {
+                  label: '',
+                  code: 'vehicle',
+                },
+                {
+                  label: '',
+                  code: 'status', // 状态映射逻辑 (0:已排除, 1:预警)
+                },
+              ],
             },
-          ],
-        },
-        {
-          type: 'reasonAnalysis',
-          title: '',
-          readFrom: '',
-          items: [
             {
-              label: '可能原因',
-              code: 'possibleCause',
+              type: 'analysis',
+              title: 'CO浓度异常分析',
+              readFrom: 'analysisList',
+              items: [
+                {
+                  label: '',
+                  code: 'pos',
+                },
+                {
+                  label: '',
+                  code: 'analysisText',
+                },
+              ],
             },
             {
-              label: '建议',
-              code: 'recommendation',
+              type: 'reasonAnalysis',
+              title: '',
+              readFrom: '',
+              items: [
+                {
+                  label: '可能原因',
+                  code: 'possibleCause',
+                },
+                {
+                  label: '建议',
+                  code: 'recommendation',
+                },
+              ],
             },
           ],
         },
       ],
-      complex_list: [],
-      preset: [],
     },
     showStyle: {
       size: 'width:400px;height:410px;',

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

@@ -7,7 +7,6 @@
     <ventBox1 v-if="visible" :class="getModuleClass(showStyle)" :style="style">
       <template v-if="moduleName" #title>
         <div :class="{ 'cursor-pointer': !!moduleData.to }" @click="redirectTo">{{ moduleName }}</div>
-        {{ selectedData }}
       </template>
       <template #container>
         <slot>

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

@@ -3,7 +3,7 @@
     <!-- 数据列表容器 -->
     <div class="sensor-list">
       <!-- 循环渲染分组 -->
-      <div v-for="(group, index) in config.list" :key="index" class="sensor-group">
+      <div v-for="(group, index) in config" :key="index" class="sensor-group">
         <!-- 组标题 -->
         <div class="group-title">{{ group.title }}</div>
 
@@ -17,7 +17,7 @@
             <div class="item-label">{{ item.label }}：</div>
             <div class="item-content">
               <!-- 主要数值/状态 -->
-              <span class="item-value">{{ parseValue(item.code, group.readFrom) }} 时刻 {{ item.info }} </span>
+              <span class="item-value">{{ getFormattedText(data, item.code) }} 时刻 {{ getFormattedText(data, item.info!) }} </span>
             </div>
           </template>
         </div>
@@ -27,66 +27,30 @@
 </template>
 
 <script setup lang="ts">
-  import { defineProps, computed } from 'vue';
+  import { computed } from 'vue';
+  import { getFormattedText } from '../../hooks/helper';
 
   const props = defineProps<{
-    config: {
-      list: Array<{
-        title: string;
-        readFrom: string;
-        items: Array<{
-          label: string;
-          code: string;
-          status?: string;
-          info?: string;
-        }>;
+    config: Array<{
+      title: string;
+      readFrom: string;
+      items: Array<{
+        label: string;
+        code: string;
+        status?: string;
+        info?: string;
       }>;
-      data: {
-        [key: string]: any;
-      };
+    }>;
+    data: {
+      [key: string]: any;
     };
   }>();
 
-  /**
-   * 解析 ${} 占位符的函数
-   * @param str - 原始字符串，如 "${[0].avg}"
-   */
-  const parseValue = (str: string, readFrom: string) => {
-    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 {
-          return props.config.data[str];
-        }
-      }
-
-      return '数据未找到';
-      return 'N/A';
-    } catch (e) {
-      return 'Error';
-    }
-  };
-
   /**
    * 解析状态并返回对应的 CSS 类名
    */
   const parseStatus = (statusStr: string) => {
-    const statusVal = parseValue(statusStr);
+    const statusVal = getFormattedText(props.data, statusStr);
     // 假设 0 为正常，1 为报警
     return statusVal === '1' ? 'status-danger' : 'status-normal';
   };

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

@@ -1,10 +1,9 @@
 <template>
   <div class="sensor-analysis-board">
     <!-- 根据布局方向渲染，这里假设是垂直列 -->
-    <div>{{ dataObj.data }}11</div>
     <div class="sensor-group">
       <!-- 循环渲染每一个传感器卡片 -->
-      <div v-for="(sensor, index) in dataObj.config.list" :key="index" class="sensor-card">
+      <div v-for="(sensor, index) in config.list" :key="index" class="sensor-card">
         <div class="sensor-header">
           <h3 class="sensor-title">{{ sensor.title }}</h3>
         </div>
@@ -14,19 +13,19 @@
           <div class="value-item">
             <span class="label">{{ sensor.contentTop[0].label }}</span>
             <span class="value" :style="{ color: sensor.contentTop[0].color }">
-              {{ parseTemplate(sensor.contentTop[0].code, sensor.readFrom) }}
+              {{ getFormattedText(data, sensor.contentTop[0].code) }}
             </span>
           </div>
           <div class="value-item">
             <span class="label">{{ sensor.contentTop[1].label }}</span>
             <span class="value" :style="{ color: sensor.contentTop[1].color }">
-              {{ parseTemplate(sensor.contentTop[1].code, sensor.readFrom) }}
+              {{ getFormattedText(data, sensor.contentTop[1].code) }}
             </span>
           </div>
           <div class="value-item">
             <span class="label">{{ sensor.contentTop[2].label }}</span>
             <span class="value" :style="{ color: sensor.contentTop[2].color }">
-              {{ parseTemplate(sensor.contentTop[2].code, sensor.readFrom) }}
+              {{ getFormattedText(data, sensor.contentTop[2].code) }}
             </span>
           </div>
         </div>
@@ -41,10 +40,10 @@
             <div
               class="row-value"
               :style="{
-                color: getAlarmColor(parseTemplate(sensor.contents[0].code, sensor.readFrom)),
+                color: getAlarmColor(getFormattedText(data, sensor.contents[0].code)),
               }"
             >
-              {{ getAlarmText(parseTemplate(sensor.contents[0].code, sensor.readFrom)) }}
+              {{ getAlarmText(getFormattedText(data, sensor.contents[0].code)) }}
             </div>
           </div>
 
@@ -54,8 +53,8 @@
               <div class="detail-row">
                 <span class="row-label">{{ sensor.contents[1].label }}: </span>
                 <div class="row-value" :style="{ color: sensor.contents[1].color }">
-                  <span>{{ parseTemplate(sensor.contents[1].code, sensor.readFrom) }} 时刻</span>
-                  <span v-if="sensor.contents[1].info" class="info">{{ parseTemplate(sensor.contents[1].info['code'], sensor.readFrom) }}</span>
+                  <span>{{ getFormattedText(data, sensor.contents[1].code) }} 时刻</span>
+                  <span v-if="sensor.contents[1].info" class="info">{{ getFormattedText(data, sensor.contents[1].code) }}</span>
                 </div>
               </div>
             </div>
@@ -68,67 +67,31 @@
 
 <script lang="ts" setup>
   import { ref, computed } from 'vue';
+  import { getFormattedText } from '../../hooks/helper';
 
   const props = defineProps<{
-    dataObj: {
-      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;
-      };
+    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.dataObj.data[index] !== undefined) {
-            return props.dataObj.data[index][key];
-          }
-        }
-      } else {
-        if (readFrom) {
-          return props.dataObj.data[readFrom][str];
-        } else {
-          return props.dataObj.data[str];
-        }
-      }
-
-      return '数据未找到';
-      return 'N/A';
-    } catch (e) {
-      return 'Error';
-    }
-  }
-
   // --- 3. 交互逻辑 ---
   const collapsedIndex = ref(null);
 

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

@@ -16,14 +16,14 @@
           <svg class="icon-dot" viewBox="0 0 16 16" width="10" height="10">
             <circle cx="8" cy="8" r="8" fill="red" />
           </svg>
-          <span class="risk-text">{{ config.data[config.otherProps.prop] }}</span>
+          <span v-if="!!data" class="risk-text">{{ data[config.otherProps.prop] }}</span>
         </div>
       </div>
     </div>
 
     <!-- 表格主体 -->
     <div class="table-container">
-      <table class="warning-table">
+      <table v-if="!!data" class="warning-table">
         <thead>
           <tr>
             <th v-for="col in config.columns" :key="col.prop" :style="{ width: col.width }">
@@ -32,7 +32,7 @@
           </tr>
         </thead>
         <tbody>
-          <tr v-for="(row, index) in config.data[config.tableReadFrom]" :key="index" class="table-row">
+          <tr v-for="(row, index) in data[config.tableReadFrom]" :key="index" class="table-row">
             <td v-for="col in config.columns" :key="col.prop" class="table-cell">
               <!-- 如果是 render 函数，且需要渲染 HTML，使用 v-html -->
               <span v-if="col.render" v-html="col.render(row)"></span>
@@ -59,9 +59,9 @@
         title: string;
         prop: string;
       };
-      data: {
-        [key: string]: any;
-      };
+    };
+    data: {
+      [key: string]: any;
     };
   }>();
 </script>

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

@@ -186,23 +186,23 @@
 
         <!-- 1. 传感器状态面板 -->
         <template v-if="config.name === 'sensor_status'">
-          <SensorStatusPanel class="content__module" :dataObj="config" />
+          <SensorStatusPanel class="content__module" :config="config.config" :data="config.data" />
         </template>
 
-        3. 火灾监测设备分析
-        <!-- <template v-if="config.name === 'fire_sensor_analysis'">
-          <FireSensorAnalysis class="content__module" :config="config" />
-        </template> -->
+        <!-- 3. 火灾监测设备分析 -->
+        <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" />
-        </template> -->
+        <template v-if="config.name === 'warning_result'">
+          <WarningResultList class="content__module" :config="config.config" :data="config.data" />
+        </template>
 
         <!-- 5. 车辆定位与 CO 浓度关联分析 -->
-        <!-- <template v-if="config.name === 'vehicle_co_analysis'">
-          <VehicleCOAnalysis class="content__module" :list="config.list" :data="config.data" />
-        </template> -->
+        <template v-if="config.name === 'vehicle_co_analysis'">
+          <VehicleCOAnalysis class="content__module" :list="config.config.list" :data="config.data" />
+        </template>
       </div>
     </div>
   </div>
@@ -523,7 +523,6 @@
         default: {
           const cfg = preset.shift();
           if (!cfg) break;
-          debugger;
           const data = getData(refData, cfg.readFrom, cfg.parser);
           arr.push({
             ...item,

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

@@ -49,7 +49,7 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { ref, watch } from 'vue';
+  import { nextTick, ref, watch } from 'vue';
   import { Config } from '../../../deviceManager/configurationTable/types';
   import { useInitModule } from '../hooks/useInit';
   import { MenuItem, Menu, Dropdown } from 'ant-design-vue';
@@ -78,7 +78,6 @@
   watch(
     () => props.data,
     (d) => {
-      debugger;
       init(d);
       emit('select', selectedDevice.value);
     },

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

@@ -1,4 +1,4 @@
-import { computed, ref } from 'vue';
+import { computed, MaybeRef, ref, unref } from 'vue';
 import { list as cfgList } from '@/views/vent/deviceManager/configurationTable/configuration.api';
 // import { list } from '@/views/vent/deviceManager/deviceTable/device.api';
 import { Config } from '@/views/vent/deviceManager/configurationTable/types';
@@ -243,8 +243,8 @@ export function useInitModule(deviceType: Config['deviceType'], moduleData: Conf
     return getFormattedText(selectedDevice.value, header.slot.value, header.slot.trans);
   });
 
-  function init(data) {
-    const result = mock || data;
+  function init(data: MaybeRef) {
+    const result = mock || unref(data);
     if (header.show && header.selector.show) {
       // 如果配置里指明需要 header，检验后初始化设备信息
       const records: Record<string, any>[] | Record<string, any> = getData(get(result, deviceType, []), header.readFrom) || [];