[Mode 0000] 可配置页面皮带预警监测模块优化

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

@@ -5,7 +5,6 @@
     <!-- <div class="header-container">
       <customHeader> 皮带巷智能管控 </customHeader>
     </div> -->
-
     <!-- 主体区域 -->
     <div class="border">
       <!-- 配置模块区 -->
@@ -29,8 +28,7 @@
   // 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';
+  import ModuleCommon from '@/views/vent/home/configurable/components/ModuleCommon.vue';
 
   // 初始化配置
   const { configs, fetchConfigs } = useInitConfigs();
@@ -45,7 +43,7 @@
   const selectedBeltId = ref('1');
 
   // 模拟数据
-  const readData = {
+  const readData = ref({
     fmhjcInfo: [
       {
         beltName: '主运巷皮带1',
@@ -100,12 +98,6 @@
           pos: '1#皮带区域',
           vehicle: '车辆23425',
           status: '0',
-          // vehicle2: '车辆53456',
-          // vehicle3: '未通过车辆',
-          // coReason1: 'CO浓度异常升高，已确认为车辆干扰',
-          // coReason3: 'CO浓度异常升高，已确认非车辆干扰',
-          // possibleCause: '皮带摩擦过热或电器设备故障',
-          // recommendation: '立即检查3#皮带区域设备',
         },
         {
           pos: '2#皮带区域',
@@ -131,7 +123,7 @@
       possibleCause: '皮带摩擦过热或电器设备故障',
       recommendation: '立即检查3#皮带区域设备',
     },
-  };
+  });
 
   // 下拉框切换处理
   function handleBeltChange(id: string) {

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

@@ -29,7 +29,6 @@
   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('皮带巷三级防灭火系统');

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

@@ -1,125 +0,0 @@
-<template>
-  <!-- 常用模块 -->
-  <Transition
-    :enter-active-class="`animate__animated  animate__fadeIn${capitalizedPosition}`"
-    :leave-active-class="`animate__animated  animate__fadeOut${capitalizedPosition}`"
-  >
-    <ventBox1 v-if="visible" :class="getModuleClass(showStyle)" :style="style" :pageType="pageType">
-      <template v-if="moduleName" #title>
-        <div :class="{ 'cursor-pointer': !!moduleData.to }" style="font-weight: bold; font-style: italic" @click="redirectTo">{{ moduleName }}</div>
-      </template>
-      <template #container>
-        <slot>
-          <Content
-            :style="{ height: header.show ? 'calc(100% - 30px)' : '100%' }"
-            :moduleData="moduleData"
-            :data="selectedDevice"
-            :chartData="chartData"
-          />
-        </slot>
-      </template>
-    </ventBox1>
-  </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';
-
-  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 { selectedDeviceID, selectedDevice, options, init } = useInitModule(props.deviceType, props.moduleData);
-
-  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';
-  });
-
-  // 根据配置里的定位判断应该使用哪个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));
-  }
-
-  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';
-
-  .module-common .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-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/headerBelt.vue

@@ -6,89 +6,89 @@
   </div>
 </template>
 <script lang="ts">
-import { defineComponent, computed } from 'vue';
-import { Decoration5 } from '@kjgl77/datav-vue3';
-export default defineComponent({
-  name: 'CustomHeader',
-  components: { Decoration5 },
-  props: {},
-  emits: ['change'],
-});
+  import { defineComponent, computed } from 'vue';
+  import { Decoration5 } from '@kjgl77/datav-vue3';
+  export default defineComponent({
+    name: 'CustomHeader',
+    components: { Decoration5 },
+    props: {},
+    emits: ['change'],
+  });
 </script>
 <style lang="less">
-@import '/@/design/vent/modal.less';
+  @import '/@/design/vent/modal.less';
 
-.@{ventSpace}-select-dropdown.drop {
-  background-color: transparent !important;
+  .@{ventSpace}-select-dropdown.drop {
+    background-color: transparent !important;
 
-  .@{ventSpace}-select-item-option-selected,
-  .@{ventSpace}-select-item-option-active {
-    background-color: #ffffff33 !important;
-  }
-  .@{ventSpace}-select-item {
-    color: inherit;
-    &:hover {
+    .@{ventSpace}-select-item-option-selected,
+    .@{ventSpace}-select-item-option-active {
       background-color: #ffffff33 !important;
     }
-  }
-  .@{ventSpace}-select-tree {
-    .@{ventSpace}-select-tree-treenode {
+    .@{ventSpace}-select-item {
       color: inherit;
+      &:hover {
+        background-color: #ffffff33 !important;
+      }
     }
-    .@{ventSpace}-select-tree-switcher-icon {
-      color: inherit;
+    .@{ventSpace}-select-tree {
+      .@{ventSpace}-select-tree-treenode {
+        color: inherit;
+      }
+      .@{ventSpace}-select-tree-switcher-icon {
+        color: inherit;
+      }
     }
   }
-}
 </style>
 <style lang="less" scoped>
-@import '/@/design/theme.less';
-@ventSpace: zxm;
+  @import '/@/design/theme.less';
+  @ventSpace: zxm;
 
-.vent-custom-header {
-  --image-vent-header1: url('/@/assets/images/beltFire/top.png');
-  width: 100%;
-  position: relative;
-  z-index: 9999;
-  pointer-events: none;
-  .vent-home-header {
+  .vent-custom-header {
+    --image-vent-header1: url('/@/assets/images/beltFire/top.png');
     width: 100%;
-    position: fixed;
-    top: 0;
-    // background: url('/@/assets/images/vent/new-home/header-bg.png') no-repeat;
-    // height: 100px;
-    height: 89px;
-    background-size: contain;
-    display: flex;
-    justify-content: center;
-    .header-icon {
-      margin-top: 45px;
-    }
-    .header-text {
+    position: relative;
+    z-index: 9999;
+    pointer-events: none;
+    .vent-home-header {
+      width: 100%;
       position: fixed;
-      top: 5px;
-      color: #fff;
-      font-size: 32px;
-      font-family: 'ysbtFont';
-      background-image: linear-gradient(#ffffff 50%, @vent-base-light-bg);
-      -webkit-background-clip: text;
-      color: transparent;
+      top: 0;
+      // background: url('/@/assets/images/vent/new-home/header-bg.png') no-repeat;
+      // height: 100px;
+      height: 89px;
+      background-size: contain;
+      display: flex;
+      justify-content: center;
+      .header-icon {
+        margin-top: 45px;
+      }
+      .header-text {
+        position: fixed;
+        top: 5px;
+        color: #fff;
+        font-size: 32px;
+        font-family: 'ysbtFont';
+        background-image: linear-gradient(#ffffff 50%, @vent-base-light-bg);
+        -webkit-background-clip: text;
+        color: transparent;
+      }
     }
   }
-}
-:deep(.zxm-select) {
-  width: 300px;
-  .@{ventSpace}-select-selector {
-    background: transparent !important;
-    border: none !important;
-    box-shadow: none !important;
-    .zxm-select-selection-item {
+  :deep(.zxm-select) {
+    width: 300px;
+    .@{ventSpace}-select-selector {
+      background: transparent !important;
+      border: none !important;
+      box-shadow: none !important;
+      .zxm-select-selection-item {
+        color: #fff !important;
+        font-size: 20px;
+      }
+    }
+    .@{ventSpace}-select-arrow {
       color: #fff !important;
-      font-size: 20px;
     }
   }
-  .@{ventSpace}-select-arrow {
-    color: #fff !important;
-  }
-}
 </style>

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

@@ -755,7 +755,7 @@ export const testBeltNew: Config[] = [
     pageType: 'beltNew',
     moduleData: {
       header: {
-        show: true,
+        show: false,
         readFrom: '',
         selector: {
           show: true,
@@ -786,206 +786,210 @@ export const testBeltNew: Config[] = [
       gallery_list: [],
       table: [],
       complex_list: [],
-      list: [
-        {
-          title: '微震测声传感器',
-          readFrom: 'wz',
-          contentTop: [
-            {
-              label: '平均值',
-              code: 'avg',
-              color: 'white',
-            },
-            {
-              label: '最大值',
-              code: 'max',
-              color: 'white',
-            },
-            {
-              label: '最小值',
-              code: 'min',
-              color: 'white',
-            },
-          ],
-          contents: [
-            {
-              label: '是否报警',
-              code: 'alarm',
-              trans: {
-                true: '报警',
-                false: '正常',
-              },
-              color: 'green',
-            },
-            {
-              label: '最大值产生于',
-              code: 'maxTime',
-              color: 'white',
-            },
-          ],
-        },
-        {
-          title: 'HCl传感器',
-          readFrom: 'hcl',
-          contentTop: [
-            {
-              label: '平均值',
-              code: 'avg',
-              color: 'white',
-            },
-            {
-              label: '最大值',
-              code: 'max',
-              color: 'white',
-            },
-            {
-              label: '最小值',
-              code: 'min',
-              color: 'white',
-            },
-          ],
-          contents: [
-            {
-              label: '是否报警',
-              code: 'alarm',
-              trans: {
-                true: '报警',
-                false: '正常',
-              },
-              color: 'green',
-            },
-            {
-              label: '最大值产生于',
-              code: 'maxTime',
-              color: 'white',
-              info: {
-                code: 'pos',
-              },
-            },
-          ],
-        },
-        {
-          title: '光纤测温传感器',
-          readFrom: 'gx',
-          contentTop: [
-            {
-              label: '平均值',
-              code: 'avg',
-              color: 'white',
-            },
-            {
-              label: '最大值',
-              code: 'max',
-              color: 'white',
-            },
-            {
-              label: '最小值',
-              code: 'min',
-              color: 'white',
-            },
-          ],
-          contents: [
-            {
-              label: '是否报警',
-              code: 'alarm',
-              trans: {
-                true: '报警',
-                false: '正常',
-              },
-              color: 'green',
-            },
-            {
-              label: '最大值产生于',
-              code: 'maxTime',
-              color: 'white',
-              info: {
-                code: 'pos',
-              },
-            },
-          ],
-        },
-        {
-          title: 'CO传感器',
-          readFrom: 'co',
-          contentTop: [
-            {
-              label: '平均值',
-              code: 'avg',
-              color: 'white',
-            },
-            {
-              label: '最大值',
-              code: 'max',
-              color: 'white',
-            },
-            {
-              label: '最小值',
-              code: 'min',
-              color: 'white',
-            },
-          ],
-          contents: [
-            {
-              label: '是否报警',
-              code: 'alarm',
-              trans: {
-                true: '报警',
-                false: '正常',
-              },
-              color: 'green',
-            },
-            {
-              label: '最大值产生于',
-              code: 'maxTime',
-              color: 'white',
-              info: {
-                code: 'pos',
-              },
-            },
-          ],
-        },
+      list: [],
+      preset: [
         {
-          title: '温度传感器',
-          readFrom: 'wd',
-          contentTop: [
+          list: [
             {
-              label: '平均值',
-              code: 'avg',
-              color: 'white',
+              title: '微震测声传感器',
+              readFrom: 'fmhjcInfo.wz',
+              contentTop: [
+                {
+                  label: '平均值',
+                  code: 'avg',
+                  color: 'white',
+                },
+                {
+                  label: '最大值',
+                  code: 'max',
+                  color: 'white',
+                },
+                {
+                  label: '最小值',
+                  code: 'min',
+                  color: 'white',
+                },
+              ],
+              contents: [
+                {
+                  label: '是否报警',
+                  code: 'alarm',
+                  trans: {
+                    true: '报警',
+                    false: '正常',
+                  },
+                  color: 'green',
+                },
+                {
+                  label: '最大值产生于',
+                  code: 'maxTime',
+                  color: 'white',
+                },
+              ],
             },
             {
-              label: '最大值',
-              code: 'max',
-              color: 'white',
+              title: 'HCl传感器',
+              readFrom: 'hcl',
+              contentTop: [
+                {
+                  label: '平均值',
+                  code: 'avg',
+                  color: 'white',
+                },
+                {
+                  label: '最大值',
+                  code: 'max',
+                  color: 'white',
+                },
+                {
+                  label: '最小值',
+                  code: 'min',
+                  color: 'white',
+                },
+              ],
+              contents: [
+                {
+                  label: '是否报警',
+                  code: 'alarm',
+                  trans: {
+                    true: '报警',
+                    false: '正常',
+                  },
+                  color: 'green',
+                },
+                {
+                  label: '最大值产生于',
+                  code: 'maxTime',
+                  color: 'white',
+                  info: {
+                    code: 'pos',
+                  },
+                },
+              ],
             },
             {
-              label: '最小值',
-              code: 'min',
-              color: 'white',
+              title: '光纤测温传感器',
+              readFrom: 'gx',
+              contentTop: [
+                {
+                  label: '平均值',
+                  code: 'avg',
+                  color: 'white',
+                },
+                {
+                  label: '最大值',
+                  code: 'max',
+                  color: 'white',
+                },
+                {
+                  label: '最小值',
+                  code: 'min',
+                  color: 'white',
+                },
+              ],
+              contents: [
+                {
+                  label: '是否报警',
+                  code: 'alarm',
+                  trans: {
+                    true: '报警',
+                    false: '正常',
+                  },
+                  color: 'green',
+                },
+                {
+                  label: '最大值产生于',
+                  code: 'maxTime',
+                  color: 'white',
+                  info: {
+                    code: 'pos',
+                  },
+                },
+              ],
             },
-          ],
-          contents: [
             {
-              label: '是否报警',
-              code: 'alarm',
-              trans: {
-                true: '报警',
-                false: '正常',
-              },
-              color: 'green',
+              title: 'CO传感器',
+              readFrom: 'co',
+              contentTop: [
+                {
+                  label: '平均值',
+                  code: 'avg',
+                  color: 'white',
+                },
+                {
+                  label: '最大值',
+                  code: 'max',
+                  color: 'white',
+                },
+                {
+                  label: '最小值',
+                  code: 'min',
+                  color: 'white',
+                },
+              ],
+              contents: [
+                {
+                  label: '是否报警',
+                  code: 'alarm',
+                  trans: {
+                    true: '报警',
+                    false: '正常',
+                  },
+                  color: 'green',
+                },
+                {
+                  label: '最大值产生于',
+                  code: 'maxTime',
+                  color: 'white',
+                  info: {
+                    code: 'pos',
+                  },
+                },
+              ],
             },
             {
-              label: '最大值产生于',
-              code: 'maxTime',
-              color: 'white',
-              info: {
-                code: 'pos',
-              },
+              title: '温度传感器',
+              readFrom: 'wd',
+              contentTop: [
+                {
+                  label: '平均值',
+                  code: 'avg',
+                  color: 'white',
+                },
+                {
+                  label: '最大值',
+                  code: 'max',
+                  color: 'white',
+                },
+                {
+                  label: '最小值',
+                  code: 'min',
+                  color: 'white',
+                },
+              ],
+              contents: [
+                {
+                  label: '是否报警',
+                  code: 'alarm',
+                  trans: {
+                    true: '报警',
+                    false: '正常',
+                  },
+                  color: 'green',
+                },
+                {
+                  label: '最大值产生于',
+                  code: 'maxTime',
+                  color: 'white',
+                  info: {
+                    code: 'pos',
+                  },
+                },
+              ],
             },
           ],
         },
       ],
-      preset: [],
     },
     showStyle: {
       size: 'width:400px;height:825px;',

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

@@ -168,406 +168,406 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { computed } from 'vue';
-import {
-  CommonItem,
-  Config,
-  // ModuleDataBoard,
-  // ModuleDataChart,
-  // ModuleDataList,
-  // ModuleDataPreset,
-  // ModuleDataTable,
-} from '../../../deviceManager/configurationTable/types';
-import MiniBoard from '../../components/detail/MiniBoard.vue';
-import TimelineList from '../../components/detail/TimelineList.vue';
-import TimelineListNew from '../../components/detail/TimelineListNew.vue';
-import CustomList from '../../components/detail/CustomList.vue';
-import CustomGallery from '../../components/detail/CustomGallery.vue';
-import CustomGalleryNew from '../../components/preset/CustomGalleryNew.vue';
-import ComplexList from '../../components/detail/ComplexList.vue';
-import ComplexListNew from '../../components/preset/ComplexListNew.vue';
-import GalleryList from '../../components/detail/GalleryList.vue';
-import CustomTable from '../../components/detail/CustomTable.vue';
-import CustomTableNew from '../../components/preset/CustomTableNew.vue';
-import CustomChart from '../../components/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 '../../components/preset/QHCurve.vue';
-import MeasureDetail from '../../components/preset/MeasureDetail.vue';
-import CustomTabs from '../../components/preset/CustomTabs.vue';
-import AIChat from '/@/components/AIChat/MiniChat.vue';
-import DeviceAlarm from '../../components/preset/DeviceAlarm.vue';
-import SelectCs from '../../components/preset/SelectCs.vue';
-import MiniBoardNew from '../../components/detail/MiniBoard-New.vue';
-import Partition from '../../components/preset/partition.vue';
-import SelectorDualChart from '../../components/preset/selectorDualChart.vue';
-import RadioLabel from '../../components/preset/radioLabel.vue';
-import ButtonList from '../../components/preset/buttonList.vue';
-import VentRoute from '../../components/preset/ventRoute.vue';
-import EarlyWarnMonitor from '../../components/preset/earlyWarnMonitor.vue';
-import CoalSeam from '../../components/preset/CoalSeam.vue';
-// import FIreWarn from './preset/FIreWarn.vue';
-// import FIreControl from './preset/FIreControl.vue';
-
-const props = defineProps<{
-  data: any;
-  moduleData: Config['moduleData'];
-}>();
-
-const { background, layout } = props.moduleData;
-
-// 获取当原始配置带 items 项时的最终 items 配置
-function getItems(raw, items: CommonItem[]) {
-  return items.map((i) => {
-    return {
-      ...i,
-      label: getFormattedText(raw, i.label, i.trans),
-      value: getFormattedText(raw, i.value, i.trans),
-    };
-  });
-}
-
-// 获取当 List 组件配置带 items 项时的最终 items 配置
-function getListItems(raw: any, items: CommonItem[], mapFromData?: boolean) {
-  if (mapFromData && Array.isArray(raw)) {
-    return raw.map((data) => {
-      const item = items[0];
+  import { computed } from 'vue';
+  import {
+    CommonItem,
+    Config,
+    // ModuleDataBoard,
+    // ModuleDataChart,
+    // ModuleDataList,
+    // ModuleDataPreset,
+    // ModuleDataTable,
+  } from '../../../deviceManager/configurationTable/types';
+  import MiniBoard from '../../components/detail/MiniBoard.vue';
+  import TimelineList from '../../components/detail/TimelineList.vue';
+  import TimelineListNew from '../../components/detail/TimelineListNew.vue';
+  import CustomList from '../../components/detail/CustomList.vue';
+  import CustomGallery from '../../components/detail/CustomGallery.vue';
+  import CustomGalleryNew from '../../components/preset/CustomGalleryNew.vue';
+  import ComplexList from '../../components/detail/ComplexList.vue';
+  import ComplexListNew from '../../components/preset/ComplexListNew.vue';
+  import GalleryList from '../../components/detail/GalleryList.vue';
+  import CustomTable from '../../components/detail/CustomTable.vue';
+  import CustomTableNew from '../../components/preset/CustomTableNew.vue';
+  import CustomChart from '../../components/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 '../../components/preset/QHCurve.vue';
+  import MeasureDetail from '../../components/preset/MeasureDetail.vue';
+  import CustomTabs from '../../components/preset/CustomTabs.vue';
+  import AIChat from '/@/components/AIChat/MiniChat.vue';
+  import DeviceAlarm from '../../components/preset/DeviceAlarm.vue';
+  import SelectCs from '../../components/preset/SelectCs.vue';
+  import MiniBoardNew from '../../components/detail/MiniBoard-New.vue';
+  import Partition from '../../components/preset/partition.vue';
+  import SelectorDualChart from '../../components/preset/selectorDualChart.vue';
+  import RadioLabel from '../../components/preset/radioLabel.vue';
+  import ButtonList from '../../components/preset/buttonList.vue';
+  import VentRoute from '../../components/preset/ventRoute.vue';
+  import EarlyWarnMonitor from '../../components/preset/earlyWarnMonitor.vue';
+  import CoalSeam from '../../components/preset/CoalSeam.vue';
+  // import FIreWarn from './preset/FIreWarn.vue';
+  // import FIreControl from './preset/FIreControl.vue';
+
+  const props = defineProps<{
+    data: any;
+    moduleData: Config['moduleData'];
+  }>();
+
+  const { background, layout } = props.moduleData;
+
+  // 获取当原始配置带 items 项时的最终 items 配置
+  function getItems(raw, items: CommonItem[]) {
+    return items.map((i) => {
       return {
-        ...item,
-        label: getFormattedText(data, item.label, item.trans),
-        value: getFormattedText(data, item.value, item.trans),
+        ...i,
+        label: getFormattedText(raw, i.label, i.trans),
+        value: getFormattedText(raw, i.value, i.trans),
       };
     });
   }
-  return getItems(raw, items);
-}
-
-/** 根据配置里的layout将配置格式化为带 key 的具体配置，例如：[{ key: 'list', value: any, ...ModuleDataList }] */
-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) || [];
-
-  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,
+  // 获取当 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,
-          ...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);
+          label: getFormattedText(data, item.label, item.trans),
+          value: getFormattedText(data, item.value, item.trans),
+        };
+      });
+    }
+    return getItems(raw, items);
+  }
 
-        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);
+  /** 根据配置里的layout将配置格式化为带 key 的具体配置，例如：[{ key: 'list', value: any, ...ModuleDataList }] */
+  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) || [];
+
+    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);
 
-        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),
-                  };
-                }),
-              };
-            }),
+            items: getItems(data, cfg.items),
           });
-        } else {
+          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: 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),
-                  };
-                }),
-              };
-            }),
+            items: getListItems(data, cfg.items, cfg.mapFromData),
           });
+          break;
         }
-        break;
-      }
-      case 'gallery_list': {
-        const cfg = gallery_list.shift();
-        if (!cfg) break;
-        const data = getData(refData, cfg.readFrom, cfg.parser);
+        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),
-          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) => {
-              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),
-                  };
-                }),
-              };
-            }),
+            items: getItems(data, cfg.items),
           });
-        } else {
+          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) => {
+                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 '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: 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),
-                  };
-                }),
-              };
-            }),
+            items: getItems(data, cfg.items),
+            galleryItems: getItems(data, cfg.galleryItems),
           });
+          break;
         }
-        break;
-      }
-      case 'chart': {
-        const cfg = chart.shift();
-        if (!cfg) break;
-        const data = getData(refData, cfg.readFrom, cfg.parser);
+        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) => {
+                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 'chart': {
+          const cfg = chart.shift();
+          if (!cfg) break;
+          const data = 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({
+            ...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,
-        });
-        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;
-      }
-      default: {
-        const cfg = preset.shift();
-        if (!cfg) break;
-        const data = getData(refData, cfg.readFrom, cfg.parser);
+          arr.push({
+            ...cfg,
+            ...item,
+            columns: cfg.columns,
+            data,
+          });
+          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;
+        }
+        default: {
+          const cfg = preset.shift();
+          if (!cfg) break;
+          const data = getData(refData, cfg.readFrom, cfg.parser);
 
-        arr.push({
-          ...item,
-          data,
-          config: cfg,
-        });
-        break;
+          arr.push({
+            ...item,
+            data,
+            config: cfg,
+          });
+          break;
+        }
       }
-    }
-    // console.log(arr,'arr---')
-    return arr;
-  }, []);
-});
+      // console.log(arr,'arr---')
+      return arr;
+    }, []);
+  });
 </script>
 <style lang="less" scoped>
-@import '@/design/theme.less';
-
-.content {
-  height: calc(100% - 30px);
-  position: relative;
-  // z-index: -2;
-  display: flex;
-  flex-direction: column;
-  overflow-y: auto; // 这里会导致样式无故添加滚动条
-  overflow-x: hidden;
-}
-
-.content__background {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 0;
-  object-fit: fill;
-}
-
-.content__background_1 {
-  width: 100%;
-  height: calc(100% - 10px);
-  position: absolute;
-  top: 10px;
-  left: 0;
-  z-index: 0;
-  object-fit: fill;
-}
-
-.image__background {
-  width: 35%;
-  height: 61%;
-  left: 30%;
-}
-
-.content__module {
-  // margin-top: 5px;
-  // margin-bottom: 5px;
-  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__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:first-of-type {
-//   margin-top: 0;
-// }
-// .content__module:last-of-type {
-//   margin-bottom: 0;
-// }
-::-webkit-scrollbar {
-  width: 5px !important;
-}
-
-::-webkit-scrollbar-thumb {
-  width: 5px !important;
-}
-
-:deep(.zxm-select:not(.zxm-select-customize-input) .zxm-select-selector) {
-  /* background-color: transparent; */
-  color: #fff;
-}
-
-:deep(.zxm-select-arrow) {
-  color: #fff;
-}
-
-:deep(.zxm-select-selection-item) {
-  color: #fff !important;
-}
-
-:deep(.zxm-select-selection-placeholder) {
-  color: #fff !important;
-}
-
-:deep(.dialog-overlay) {
-  width: 100%;
-  height: 100%;
-  position: unset;
-  box-shadow: unset;
-}
-
-::-webkit-scrollbar {
-  width: 5px !important;
-}
-
-::-webkit-scrollbar-thumb {
-  width: 5px !important;
-}
+  @import '@/design/theme.less';
+
+  .content {
+    height: calc(100% - 30px);
+    position: relative;
+    // z-index: -2;
+    display: flex;
+    flex-direction: column;
+    overflow-y: auto; // 这里会导致样式无故添加滚动条
+    overflow-x: hidden;
+  }
+
+  .content__background {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 0;
+    object-fit: fill;
+  }
+
+  .content__background_1 {
+    width: 100%;
+    height: calc(100% - 10px);
+    position: absolute;
+    top: 10px;
+    left: 0;
+    z-index: 0;
+    object-fit: fill;
+  }
+
+  .image__background {
+    width: 35%;
+    height: 61%;
+    left: 30%;
+  }
+
+  .content__module {
+    // margin-top: 5px;
+    // margin-bottom: 5px;
+    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__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:first-of-type {
+  //   margin-top: 0;
+  // }
+  // .content__module:last-of-type {
+  //   margin-bottom: 0;
+  // }
+  ::-webkit-scrollbar {
+    width: 5px !important;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    width: 5px !important;
+  }
+
+  :deep(.zxm-select:not(.zxm-select-customize-input) .zxm-select-selector) {
+    /* background-color: transparent; */
+    color: #fff;
+  }
+
+  :deep(.zxm-select-arrow) {
+    color: #fff;
+  }
+
+  :deep(.zxm-select-selection-item) {
+    color: #fff !important;
+  }
+
+  :deep(.zxm-select-selection-placeholder) {
+    color: #fff !important;
+  }
+
+  :deep(.dialog-overlay) {
+    width: 100%;
+    height: 100%;
+    position: unset;
+    box-shadow: unset;
+  }
+
+  ::-webkit-scrollbar {
+    width: 5px !important;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    width: 5px !important;
+  }
 </style>

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

@@ -7,6 +7,7 @@
     <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/SensorStatusPanel.vue

@@ -1,9 +1,10 @@
 <template>
   <div class="sensor-analysis-board">
     <!-- 根据布局方向渲染，这里假设是垂直列 -->
+    <div>{{ dataObj.data }}11</div>
     <div class="sensor-group">
       <!-- 循环渲染每一个传感器卡片 -->
-      <div v-for="(sensor, index) in config.list" :key="index" class="sensor-card">
+      <div v-for="(sensor, index) in dataObj.config.list" :key="index" class="sensor-card">
         <div class="sensor-header">
           <h3 class="sensor-title">{{ sensor.title }}</h3>
         </div>
@@ -69,22 +70,24 @@
   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;
-        }[];
-      }>;
+    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;
       };
@@ -107,15 +110,15 @@
           const index = match[1]; // 获取索引，例如 "0"
           const key = match[2]; // 获取属性名，例如 "max"
           // 安全读取数据
-          if (props.config.data[index] !== undefined) {
-            return props.config.data[index][key];
+          if (props.dataObj.data[index] !== undefined) {
+            return props.dataObj.data[index][key];
           }
         }
       } else {
         if (readFrom) {
-          return props.config.data[readFrom][str];
+          return props.dataObj.data[readFrom][str];
         } else {
-          return props.config.data[str];
+          return props.dataObj.data[str];
         }
       }
 

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

@@ -186,23 +186,23 @@
 
         <!-- 1. 传感器状态面板 -->
         <template v-if="config.name === 'sensor_status'">
-          <SensorStatusPanel class="content__module" :config="config" />
+          <SensorStatusPanel class="content__module" :dataObj="config" />
         </template>
 
-        <!-- 3. 火灾监测设备分析 -->
-        <template v-if="config.name === 'fire_sensor_analysis'">
+        3. 火灾监测设备分析
+        <!-- <template v-if="config.name === 'fire_sensor_analysis'">
           <FireSensorAnalysis class="content__module" :config="config" />
-        </template>
+        </template> -->
 
         <!-- 4. 预警结果列表 -->
-        <template v-if="config.name === 'warning_result'">
+        <!-- <template v-if="config.name === 'warning_result'">
           <WarningResultList class="content__module" :config="config" />
-        </template>
+        </template> -->
 
         <!-- 5. 车辆定位与 CO 浓度关联分析 -->
-        <template v-if="config.name === 'vehicle_co_analysis'">
+        <!-- <template v-if="config.name === 'vehicle_co_analysis'">
           <VehicleCOAnalysis class="content__module" :list="config.list" :data="config.data" />
-        </template>
+        </template> -->
       </div>
     </div>
   </div>
@@ -476,52 +476,54 @@
 
         // ==================== 新增皮带巷模块配置处理 ====================
         // 火灾监测设备报警与分析
-        case 'sensor_status': {
-          arr.push({
-            overflow: true,
-            ...item,
-            list: list,
-            data: refData,
-          });
-          break;
-        }
+        // case 'sensor_status': {
+        //   const cfg = list.shift();
+        //   arr.push({
+        //     overflow: true,
+        //     ...item,
+        //     list: list,
+        //     data: getData(refData, cfg.readFrom, cfg.parser),
+        //   });
+        //   break;
+        // }
         //火灾监测设备状态
-        case 'fire_sensor_analysis': {
-          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;
+          debugger;
           const data = getData(refData, cfg.readFrom, cfg.parser);
           arr.push({
             ...item,

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

@@ -78,6 +78,7 @@
   watch(
     () => props.data,
     (d) => {
+      debugger;
       init(d);
       emit('select', selectedDevice.value);
     },

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

@@ -248,24 +248,18 @@ export function useInitModule(deviceType: Config['deviceType'], moduleData: Conf
     if (header.show && header.selector.show) {
       // 如果配置里指明需要 header，检验后初始化设备信息
       const records: Record<string, any>[] | Record<string, any> = getData(get(result, deviceType, []), header.readFrom) || [];
-      debugger;
-
-      if (Array.isArray(devices.value)) {
-        devices.value = records.map((e, i) => {
-          return {
-            id: i,
-            ...e,
-          };
-        });
-        options.value = devices.value.map((e) => {
-          return {
-            label: getFormattedText(e, header.selector.value, header.selector.trans),
-            value: e.id,
-          };
-        });
-      } else {
-        devices.value = records;
-      }
+      devices.value = records.map((e, i) => {
+        return {
+          id: i,
+          ...e,
+        };
+      });
+      options.value = devices.value.map((e) => {
+        return {
+          label: getFormattedText(e, header.selector.value, header.selector.trans),
+          value: e.id,
+        };
+      });
     } else {
       // 没有的话按默认的，将返回结果直接作为一整个设备信息供模块使用
       const record = {