[Wip 0000] 首页矿井通风检测可配置化

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

@@ -112,6 +112,7 @@ export interface ModuleData {
         | 'sprayCtrl'
         | 'cameraList'
         | 'sys_wind_card'
+        | 'plain'
         | 'CameraListTest';
       /** 分区大小 */
       basis: string;

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

@@ -1,50 +1,34 @@
 <template>
   <a-row class="midback-info" :gutter="5">
-    <div v-for="item in computedConfig" :key="item.class" class="middata" :class="item.class">
+    <div v-for="item in computedConfig" :key="item.class" class="middata" :class="item.class" @click="handleClick(item)">
       <div class="midnumberval">{{ item.value }}</div>
       <div class="infotext1">{{ item.label }}</div>
     </div>
-    <!-- <div style="width: 17%; margin-left: 1%; margin-right: 2%; float: left">
-      <div class="middata middata2">
-        <div class="midnumberval">{{ '123' }}</div>
-        <div class="infotext1">总进风量(m³/min)</div>
-      </div>
-    </div>
-    <div style="width: 17%; margin-left: 1%; margin-right: 2%; float: left">
-      <div class="middata middata3">
-        <div class="midnumberval">{{ '123' }}</div>
-        <div class="infotext1">计划风量(m³/min)</div>
-      </div>
-    </div>
-    <div style="width: 17%; margin-left: 1%; margin-right: 2%; float: left">
-      <div class="middata middata4">
-        <div class="midnumberval">{{ '123' }}</div>
-        <div class="infotext1">通风巷道长度(万m)</div>
-      </div>
-    </div>
-    <div style="width: 17%; margin-left: 1%; margin-right: 2%; float: left">
-      <div class="middata middata6">
-        <div class="midnumberval">{{ '123' }}%</div>
-        <div class="infotext1">有效风量率</div>
-      </div>
-    </div> -->
+    <BasicModal title="测风装置列表" @register="register">
+      {{ list }}
+    </BasicModal>
   </a-row>
 </template>
 <script lang="ts" setup>
-  import { computed } from 'vue';
+  import { computed, ref } from 'vue';
   import { getFormattedText } from '../hooks/helper';
   import { useGlobSetting } from '/@/hooks/setting';
+  import { Config } from '../../../deviceManager/configurationTable/types';
+  import { get } from 'lodash-es';
+  import { useModal } from '/@/components/Modal';
+  import BasicModal from '/@/components/Modal/src/BasicModal.vue';
 
   const props = defineProps<{
     isDataRealTime: boolean;
     data: any;
-    customConfig?: any;
+    config?: Config;
   }>();
 
   const { sysOrgCode } = useGlobSetting();
+  const [register, { openModal }] = useModal();
 
-  const config = computed(() => {
-    if (props.customConfig) return props.customConfig;
+  const items = computed(() => {
+    if (props.config && get(props.config, 'moduleData.preset.length')) return get(props.config, 'moduleData.preset[0].items');
     if (sysOrgCode === 'huainanzhangji') {
       return [
         {
@@ -113,14 +97,26 @@
 
   const computedConfig = computed(() => {
     const data = props.data;
-    return config.value.map((e, i) => {
+    return items.value.map((e, i) => {
       return {
         label: getFormattedText(data, e.label),
         value: getFormattedText(data, e.value),
-        class: `middata${i}`,
+        params: getFormattedText(data, e.params),
+        class: `middata${i} ${e.params ? 'cursor-pointer' : ''}`,
       };
     });
   });
+
+  const list = ref<any[]>([]);
+
+  function handleClick(item: any) {
+    if (item.params) {
+      openModal();
+      fetchDetail(item.params);
+    }
+  }
+
+  function fetchDetail(params: any) {}
 </script>
 <style lang="less" scoped>
   .midback-info {
@@ -130,52 +126,54 @@
   .middata {
     // margin-top: 7px;
     padding: 5px 0px 5px 60px;
-    width: 175px;
+    width: 190px;
     height: 64px;
     // margin-top: 4px;
     // margin-left: 10px;
     // margin-bottom: 5px;
     background-size: 100% 100%;
     text-align: center;
+    pointer-events: all;
+    cursor: pointer;
   }
 
   .middata0 {
     .midnumberval {
       color: #e6ffee;
     }
-    background: url('/@/assets/images/home-container/configurable/middata1.png');
+    background: url('/@/assets/images/home-container/configurable/middata1.png') no-repeat;
   }
 
   .middata1 {
     .midnumberval {
       color: #d3f8ff;
     }
-    background: url('/@/assets/images/home-container/configurable/middata2.png');
+    background: url('/@/assets/images/home-container/configurable/middata2.png') no-repeat;
   }
 
   .middata2 {
     .midnumberval {
       color: #fffcd5;
     }
-    background: url('/@/assets/images/home-container/configurable/middata3.png');
+    background: url('/@/assets/images/home-container/configurable/middata3.png') no-repeat;
   }
 
   .middata3 {
     .midnumberval {
       color: #deeafe;
     }
-    background: url('/@/assets/images/home-container/configurable/middata6.png');
+    background: url('/@/assets/images/home-container/configurable/middata6.png') no-repeat;
   }
 
   .middata4 {
     .midnumberval {
       color: #f3e3ff;
     }
-    background: url('/@/assets/images/home-container/configurable/middata5.png');
+    background: url('/@/assets/images/home-container/configurable/middata5.png') no-repeat;
   }
 
   .middata5 {
-    background: url('/@/assets/images/home-container/configurable/middata4.png');
+    background: url('/@/assets/images/home-container/configurable/middata4.png') no-repeat;
   }
 
   .midnumberval {

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

@@ -254,405 +254,405 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, defineAsyncComponent, ref } from 'vue';
-import { CommonItem, Config } from '../../../deviceManager/configurationTable/types';
-import { clone } from 'lodash-es';
-import { getData, getFormattedText } from '../hooks/helper';
+  import { computed, defineAsyncComponent, ref } from 'vue';
+  import { CommonItem, Config } from '../../../deviceManager/configurationTable/types';
+  import { clone } from 'lodash-es';
+  import { getData, getFormattedText } from '../hooks/helper';
 
-const MiniBoard = defineAsyncComponent(() => import('./detail/MiniBoard.vue'));
-const TimelineList = defineAsyncComponent(() => import('./detail/TimelineList.vue'));
-const TimelineListNew = defineAsyncComponent(() => import('./detail/TimelineListNew.vue'));
-const CustomList = defineAsyncComponent(() => import('./detail/CustomList.vue'));
-const CustomGallery = defineAsyncComponent(() => import('./detail/CustomGallery.vue'));
-const ComplexList = defineAsyncComponent(() => import('./detail/ComplexList.vue'));
-const GalleryList = defineAsyncComponent(() => import('./detail/GalleryList.vue'));
-const CustomTable = defineAsyncComponent(() => import('./detail/CustomTable.vue'));
-const CustomChart = defineAsyncComponent(() => import('./detail/CustomChart.vue'));
-const BlastDelta = defineAsyncComponent(() => import('../../../monitorManager/deviceMonitor/components/device/modal/blastDelta.vue'));
-const QHCurve = defineAsyncComponent(() => import('./preset/QHCurve.vue'));
-const MeasureDetail = defineAsyncComponent(() => import('./preset/MeasureDetail.vue'));
-const CustomTabs = defineAsyncComponent(() => import('./preset/CustomTabs.vue'));
-const AIChat = defineAsyncComponent(() => import('/@/components/AIChat/MiniChat.vue'));
-const DeviceAlarm = defineAsyncComponent(() => import('./preset/DeviceAlarm.vue'));
-const SelectCs = defineAsyncComponent(() => import('./preset/SelectCs.vue'));
-const MiniBoardNew = defineAsyncComponent(() => import('./detail/MiniBoard-New.vue'));
-const Partition = defineAsyncComponent(() => import('./preset/partition.vue'));
-const SelectorDualChart = defineAsyncComponent(() => import('./preset/selectorDualChart.vue'));
-const RadioLabel = defineAsyncComponent(() => import('./preset/radioLabel.vue'));
-const ButtonList = defineAsyncComponent(() => import('./preset/buttonList.vue'));
-const NitrogenBtnList = defineAsyncComponent(() => import('./preset/nitrogenBtnList.vue'));
-const cardList = defineAsyncComponent(() => import('./preset/cardList.vue'));
-const generalList = defineAsyncComponent(() => import('./preset/generalList.vue'));
-const GateBoard = defineAsyncComponent(() => import('../belt/components/detail/gateBoard.vue'));
-const fireGateBoard = defineAsyncComponent(() => import('../firedoor/components/fireDoorBoard.vue'));
-const PersonPositioning = defineAsyncComponent(() => import('./preset/PersonPositioning.vue'));
-// ==================== 新增皮带巷火灾监测组件 ====================
-const SensorStatusPanel = defineAsyncComponent(() => import('./belt/SensorStatusPanel.vue'));
-const FireSensorAnalysis = defineAsyncComponent(() => import('./belt/FireSensorAnalysis.vue'));
-const WarningResultList = defineAsyncComponent(() => import('./belt/WarningResultList.vue'));
-const VehicleCOAnalysis = defineAsyncComponent(() => import('./belt/VehicleCOAnalysis.vue'));
-// 首页组件
-const CustomListBelt = defineAsyncComponent(() => import('./belt/CustomListBelt.vue'));
-const ComplexListBelt = defineAsyncComponent(() => import('./belt/ComplexListBelt.vue'));
-const ComplexList1Belt = defineAsyncComponent(() => import('./belt/ComplexList1Belt.vue'));
-const CustomTableBelt = defineAsyncComponent(() => import('./belt/CustomTableBelt.vue'));
-const SprayControl = defineAsyncComponent(() => import('./belt/SprayControl.vue'));
-const CameraList = defineAsyncComponent(() => import('./belt/CameraList.vue'));
-const CameraListTest = defineAsyncComponent(() => import('./belt/CameraListTest.vue'));
+  const MiniBoard = defineAsyncComponent(() => import('./detail/MiniBoard.vue'));
+  const TimelineList = defineAsyncComponent(() => import('./detail/TimelineList.vue'));
+  const TimelineListNew = defineAsyncComponent(() => import('./detail/TimelineListNew.vue'));
+  const CustomList = defineAsyncComponent(() => import('./detail/CustomList.vue'));
+  const CustomGallery = defineAsyncComponent(() => import('./detail/CustomGallery.vue'));
+  const ComplexList = defineAsyncComponent(() => import('./detail/ComplexList.vue'));
+  const GalleryList = defineAsyncComponent(() => import('./detail/GalleryList.vue'));
+  const CustomTable = defineAsyncComponent(() => import('./detail/CustomTable.vue'));
+  const CustomChart = defineAsyncComponent(() => import('./detail/CustomChart.vue'));
+  const BlastDelta = defineAsyncComponent(() => import('../../../monitorManager/deviceMonitor/components/device/modal/blastDelta.vue'));
+  const QHCurve = defineAsyncComponent(() => import('./preset/QHCurve.vue'));
+  const MeasureDetail = defineAsyncComponent(() => import('./preset/MeasureDetail.vue'));
+  const CustomTabs = defineAsyncComponent(() => import('./preset/CustomTabs.vue'));
+  const AIChat = defineAsyncComponent(() => import('/@/components/AIChat/MiniChat.vue'));
+  const DeviceAlarm = defineAsyncComponent(() => import('./preset/DeviceAlarm.vue'));
+  const SelectCs = defineAsyncComponent(() => import('./preset/SelectCs.vue'));
+  const MiniBoardNew = defineAsyncComponent(() => import('./detail/MiniBoard-New.vue'));
+  const Partition = defineAsyncComponent(() => import('./preset/partition.vue'));
+  const SelectorDualChart = defineAsyncComponent(() => import('./preset/selectorDualChart.vue'));
+  const RadioLabel = defineAsyncComponent(() => import('./preset/radioLabel.vue'));
+  const ButtonList = defineAsyncComponent(() => import('./preset/buttonList.vue'));
+  const NitrogenBtnList = defineAsyncComponent(() => import('./preset/nitrogenBtnList.vue'));
+  const cardList = defineAsyncComponent(() => import('./preset/cardList.vue'));
+  const generalList = defineAsyncComponent(() => import('./preset/generalList.vue'));
+  const GateBoard = defineAsyncComponent(() => import('../belt/components/detail/gateBoard.vue'));
+  const fireGateBoard = defineAsyncComponent(() => import('../firedoor/components/fireDoorBoard.vue'));
+  const PersonPositioning = defineAsyncComponent(() => import('./preset/PersonPositioning.vue'));
+  // ==================== 新增皮带巷火灾监测组件 ====================
+  const SensorStatusPanel = defineAsyncComponent(() => import('./belt/SensorStatusPanel.vue'));
+  const FireSensorAnalysis = defineAsyncComponent(() => import('./belt/FireSensorAnalysis.vue'));
+  const WarningResultList = defineAsyncComponent(() => import('./belt/WarningResultList.vue'));
+  const VehicleCOAnalysis = defineAsyncComponent(() => import('./belt/VehicleCOAnalysis.vue'));
+  // 首页组件
+  const CustomListBelt = defineAsyncComponent(() => import('./belt/CustomListBelt.vue'));
+  const ComplexListBelt = defineAsyncComponent(() => import('./belt/ComplexListBelt.vue'));
+  const ComplexList1Belt = defineAsyncComponent(() => import('./belt/ComplexList1Belt.vue'));
+  const CustomTableBelt = defineAsyncComponent(() => import('./belt/CustomTableBelt.vue'));
+  const SprayControl = defineAsyncComponent(() => import('./belt/SprayControl.vue'));
+  const CameraList = defineAsyncComponent(() => import('./belt/CameraList.vue'));
+  const CameraListTest = defineAsyncComponent(() => import('./belt/CameraListTest.vue'));
 
-const SysWindCard = defineAsyncComponent(() => import('./preset/SysWindCard.vue'));
+  const SysWindCard = defineAsyncComponent(() => import('./preset/SysWindCard.vue'));
 
-const props = defineProps<{
-  data: any;
-  moduleData: Config['moduleData'];
-  chartData: any;
-  activeId?: [String, Number];
-}>();
+  const props = defineProps<{
+    data: any;
+    moduleData: Config['moduleData'];
+    chartData: any;
+    activeId?: [String, Number];
+  }>();
 
-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;
+  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 配置
-function getItems(raw: any, items: CommonItem[]) {
-  return items.map((i) => {
-    return {
-      ...i,
-      label: getFormattedText(raw, i.label, i.trans),
-      value: getFormattedText(raw, i.value, i.trans),
-    };
-  });
-}
-
-// 获取当 List 组件配置带 items 项时的最终 items 配置
-function getListItems(raw: any, items: CommonItem[], mapFromData?: boolean) {
-  if (mapFromData && Array.isArray(raw)) {
-    return raw.map((data) => {
-      const item = items[0];
+  // 获取当原始配置带 items 项时的最终 items 配置
+  function getItems(raw: any, 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 的具体配置 */
-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) || [];
+  // 获取当 List 组件配置带 items 项时的最终 items 配置
+  function getListItems(raw: any, items: CommonItem[], mapFromData?: boolean) {
+    if (mapFromData && Array.isArray(raw)) {
+      return raw.map((data) => {
+        const item = items[0];
+        return {
+          ...item,
+          label: getFormattedText(data, item.label, item.trans),
+          value: getFormattedText(data, item.value, item.trans),
+        };
+      });
+    }
+    return getItems(raw, items);
+  }
 
-  const mockData = clone(props.chartData) || [];
+  /** 根据配置里的 layout 将配置格式化为带 key 的具体配置 */
+  const layoutConfig = computed(() => {
+    const refData = props.data;
+    const board = clone(props.moduleData.board) || [];
+    const list = clone(props.moduleData.list) || [];
+    const gallery = clone(props.moduleData.gallery) || [];
+    const complex_list = clone(props.moduleData.complex_list) || [];
+    const gallery_list = clone(props.moduleData.gallery_list) || [];
+    const tabs = clone(props.moduleData.tabs) || [];
+    const chart = clone(props.moduleData.chart) || [];
+    const table = clone(props.moduleData.table) || [];
+    const preset = clone(props.moduleData.preset) || [];
+    const partition = clone(props.moduleData.partition) || [];
 
-  return layout.items.reduce((arr: any[], item) => {
-    switch (item.name) {
-      case 'board': {
-        const cfg = board.shift();
-        if (!cfg) break;
-        const data = getData(refData, cfg.readFrom, cfg.parser);
-        arr.push({
-          overflow: true,
-          ...item,
-          ...cfg,
-          items: getItems(data, cfg.items),
-        });
-        break;
-      }
-      case 'list': {
-        const cfg = list.shift();
-        if (!cfg) break;
-        const data = getData(refData, cfg.readFrom, cfg.parser);
-        arr.push({
-          // overflow: true,
-          ...item,
-          ...cfg,
-          items: getListItems(data, cfg.items, cfg.mapFromData),
-        });
-        break;
-      }
-      case 'gallery': {
-        const cfg = gallery.shift();
-        if (!cfg) break;
-        const data = getData(refData, cfg.readFrom, cfg.parser);
-        arr.push({
-          overflow: true,
-          ...item,
-          ...cfg,
-          items: getItems(data, cfg.items),
-        });
-        break;
-      }
-      case 'complex_list': {
-        const cfg = complex_list.shift();
-        if (!cfg) break;
-        const data = getData(refData, cfg.readFrom, cfg.parser);
-        if (cfg.mapFromData) {
-          const firstListItem = cfg.items[0];
+    const mockData = clone(props.chartData) || [];
+
+    return layout.items.reduce((arr: any[], item) => {
+      switch (item.name) {
+        case 'board': {
+          const cfg = board.shift();
+          if (!cfg) break;
+          const data = getData(refData, cfg.readFrom, cfg.parser);
           arr.push({
             overflow: true,
             ...item,
             ...cfg,
-            items: (data || []).map((d: any) => {
-              return {
-                title: getFormattedText(d, firstListItem.title, firstListItem.trans),
-                contents: firstListItem.contents.map((e: any) => {
-                  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);
-                    contentItem.value = d.alarm_level ?? '-';
-                  }
-                  if (cfg.pagetype === 'Belt') {
-                    contentItem.value = d.value ?? '-';
-                  }
-                  return contentItem;
-                }),
-              };
-            }),
+            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: getListItems(data, cfg.items, cfg.mapFromData),
+          });
+          break;
+        }
+        case 'gallery': {
+          const cfg = gallery.shift();
+          if (!cfg) break;
+          const data = getData(refData, cfg.readFrom, cfg.parser);
           arr.push({
             overflow: true,
             ...item,
             ...cfg,
-            items: cfg.items.map((i: any) => {
-              return {
-                title: getFormattedText(data, i.title, i.trans),
-                contents: i.contents.map((e: any) => {
-                  return {
-                    ...e,
-                    label: getFormattedText(data, e.label, e.trans),
-                    value: getFormattedText(data, e.value, e.trans),
-                  };
-                }),
-              };
-            }),
+            items: getItems(data, cfg.items),
           });
+          break;
         }
-        break;
-      }
-      case 'gallery_list': {
-        const cfg = gallery_list.shift();
-        if (!cfg) break;
-        const data = getData(refData, cfg.readFrom, cfg.parser);
-        arr.push({
-          overflow: true,
-          ...item,
-          ...cfg,
-          items: getItems(data, cfg.items),
-          galleryItems: getItems(data, cfg.galleryItems),
-        });
-        break;
-      }
-      case 'tabs': {
-        const cfg = tabs.shift();
-        if (!cfg) break;
-        const data = getData(refData, cfg.readFrom, cfg.parser);
-        if (cfg.mapFromData) {
-          const firstListItem = cfg.items[0];
+        case 'complex_list': {
+          const cfg = complex_list.shift();
+          if (!cfg) break;
+          const data = getData(refData, cfg.readFrom, cfg.parser);
+          if (cfg.mapFromData) {
+            const firstListItem = cfg.items[0];
+            arr.push({
+              overflow: true,
+              ...item,
+              ...cfg,
+              items: (data || []).map((d: any) => {
+                return {
+                  title: getFormattedText(d, firstListItem.title, firstListItem.trans),
+                  contents: firstListItem.contents.map((e: any) => {
+                    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);
+                      contentItem.value = d.alarm_level ?? '-';
+                    }
+                    if (cfg.pagetype === 'Belt') {
+                      contentItem.value = d.value ?? '-';
+                    }
+                    return contentItem;
+                  }),
+                };
+              }),
+            });
+          } else {
+            arr.push({
+              overflow: true,
+              ...item,
+              ...cfg,
+              items: cfg.items.map((i: any) => {
+                return {
+                  title: getFormattedText(data, i.title, i.trans),
+                  contents: i.contents.map((e: any) => {
+                    return {
+                      ...e,
+                      label: getFormattedText(data, e.label, e.trans),
+                      value: getFormattedText(data, e.value, e.trans),
+                    };
+                  }),
+                };
+              }),
+            });
+          }
+          break;
+        }
+        case 'gallery_list': {
+          const cfg = gallery_list.shift();
+          if (!cfg) break;
+          const data = getData(refData, cfg.readFrom, cfg.parser);
           arr.push({
             overflow: true,
             ...item,
             ...cfg,
-            items: (data || []).map((d: any) => {
-              return {
-                title: getFormattedText(d, firstListItem.title, firstListItem.trans),
-                contents: firstListItem.contents.map((e: any) => {
-                  return {
-                    ...e,
-                    label: getFormattedText(d, e.label, e.trans),
-                    value: getFormattedText(d, e.value, e.trans),
-                  };
-                }),
-              };
-            }),
+            items: getItems(data, cfg.items),
+            galleryItems: getItems(data, cfg.galleryItems),
+          });
+          break;
+        }
+        case 'tabs': {
+          const cfg = tabs.shift();
+          if (!cfg) break;
+          const data = getData(refData, cfg.readFrom, cfg.parser);
+          if (cfg.mapFromData) {
+            const firstListItem = cfg.items[0];
+            arr.push({
+              overflow: true,
+              ...item,
+              ...cfg,
+              items: (data || []).map((d: any) => {
+                return {
+                  title: getFormattedText(d, firstListItem.title, firstListItem.trans),
+                  contents: firstListItem.contents.map((e: any) => {
+                    return {
+                      ...e,
+                      label: getFormattedText(d, e.label, e.trans),
+                      value: getFormattedText(d, e.value, e.trans),
+                    };
+                  }),
+                };
+              }),
+            });
+          } else {
+            arr.push({
+              overflow: true,
+              ...item,
+              ...cfg,
+              items: cfg.items.map((i: any) => {
+                return {
+                  title: getFormattedText(data, i.title, i.trans),
+                  contents: i.contents.map((e: any) => {
+                    return {
+                      ...e,
+                      label: getFormattedText(data, e.label, e.trans),
+                      value: getFormattedText(data, e.value, e.trans),
+                    };
+                  }),
+                };
+              }),
+            });
+          }
+          break;
+        }
+        case 'chart': {
+          const cfg = chart.shift();
+          if (!cfg) break;
+          const data = cfg?.type == 'scatter' ? getData(mockData, cfg.readFrom, cfg.parser) : getData(refData, cfg.readFrom, cfg.parser);
+          arr.push({
+            ...item,
+            config: cfg,
+            data,
+          });
+          break;
+        }
+        case 'table': {
+          const cfg = table.shift();
+          if (!cfg) break;
+          const data = getData(refData, cfg.readFrom, cfg.parser);
+          arr.push({
+            ...cfg,
+            ...item,
+            columns: cfg.columns,
+            data: data,
           });
-        } else {
+          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,
-            items: cfg.items.map((i: any) => {
-              return {
-                title: getFormattedText(data, i.title, i.trans),
-                contents: i.contents.map((e: any) => {
-                  return {
-                    ...e,
-                    label: getFormattedText(data, e.label, e.trans),
-                    value: getFormattedText(data, e.value, e.trans),
-                  };
-                }),
-              };
-            }),
           });
+          break;
+        }
+        default: {
+          const cfg = preset.shift();
+          if (!cfg) break;
+          const data = getData(refData, cfg.readFrom, cfg.parser);
+          arr.push({
+            ...item,
+            data,
+            config: cfg,
+          });
+          break;
         }
-        break;
-      }
-      case 'chart': {
-        const cfg = chart.shift();
-        if (!cfg) break;
-        const data = cfg?.type == 'scatter' ? getData(mockData, cfg.readFrom, cfg.parser) : getData(refData, cfg.readFrom, cfg.parser);
-        arr.push({
-          ...item,
-          config: cfg,
-          data,
-        });
-        break;
-      }
-      case 'table': {
-        const cfg = table.shift();
-        if (!cfg) break;
-        const data = getData(refData, cfg.readFrom, cfg.parser);
-        arr.push({
-          ...cfg,
-          ...item,
-          columns: cfg.columns,
-          data: 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;
       }
-    }
-    return arr;
-  }, []);
-});
+      return arr;
+    }, []);
+  });
 </script>
 <style lang="less" scoped>
-@import '@/design/theme.less';
+  @import '@/design/theme.less';
 
-.content {
-  height: calc(100% - 30px);
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  overflow-y: auto;
-  overflow-x: hidden;
-}
-.content__background {
-  width: 100%;
-  // height: 100%;
-  height: calc(100% - 65px);
-  position: absolute;
-  top: 65px;
-  left: 0;
-  z-index: 0;
-  object-fit: fill;
-  padding: 5px;
-  box-sizing: border-box;
-}
-.content__background_1 {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  top: 0px;
-  left: 0;
-  z-index: 0;
-  object-fit: fill;
-}
+  .content {
+    height: calc(100% - 30px);
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+  .content__background {
+    width: 100%;
+    // height: 100%;
+    height: calc(100% - 65px);
+    position: absolute;
+    top: 65px;
+    left: 0;
+    z-index: 0;
+    object-fit: fill;
+    padding: 5px;
+    box-sizing: border-box;
+  }
+  .content__background_1 {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0px;
+    left: 0;
+    z-index: 0;
+    object-fit: fill;
+  }
 
-.image__background {
-  width: 35%;
-  height: 61%;
-  left: 30%;
-}
+  .image__background {
+    width: 35%;
+    height: 61%;
+    left: 30%;
+  }
 
-.content__module {
-  width: 100%;
-  height: 100%;
-}
+  .content__module {
+    width: 100%;
+    height: 100%;
+  }
 
-.content__module1 {
-  background: url('@/assets/images/vent/homeNew/databg/4.png');
-  background-repeat: no-repeat;
-  background-size: 100% 100%;
-  height: 129px;
-  margin-top: 20%;
-}
+  .content__module1 {
+    background: url('@/assets/images/vent/homeNew/databg/4.png');
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    height: 129px;
+    margin-top: 20%;
+  }
 
-.content__moduleFire {
-  width: 100%;
-  height: 100%;
-  margin-left: -24% !important;
-}
+  .content__moduleFire {
+    width: 100%;
+    height: 100%;
+    margin-left: -24% !important;
+  }
 
-.content__module_dust {
-  background: url('@/assets/images/vent/homeNew/bottomBg.png');
-  background-repeat: no-repeat;
-  background-size: 100% 100%;
-  width: 100%;
-  height: 100%;
-}
+  .content__module_dust {
+    background: url('@/assets/images/vent/homeNew/bottomBg.png');
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    width: 100%;
+    height: 100%;
+  }
 
-::-webkit-scrollbar {
-  width: 5px !important;
-}
+  ::-webkit-scrollbar {
+    width: 5px !important;
+  }
 
-::-webkit-scrollbar-thumb {
-  width: 5px !important;
-}
+  ::-webkit-scrollbar-thumb {
+    width: 5px !important;
+  }
 
-:deep(.zxm-select:not(.zxm-select-customize-input) .zxm-select-selector) {
-  color: #fff;
-}
+  :deep(.zxm-select:not(.zxm-select-customize-input) .zxm-select-selector) {
+    color: #fff;
+  }
 
-:deep(.zxm-select-arrow) {
-  color: #fff;
-}
+  :deep(.zxm-select-arrow) {
+    color: #fff;
+  }
 
-:deep(.zxm-select-selection-item) {
-  color: #fff !important;
-}
+  :deep(.zxm-select-selection-item) {
+    color: #fff !important;
+  }
 
-:deep(.zxm-select-selection-placeholder) {
-  color: #fff !important;
-}
+  :deep(.zxm-select-selection-placeholder) {
+    color: #fff !important;
+  }
 
-:deep(.dialog-overlay) {
-  width: 100%;
-  height: 100%;
-  position: unset;
-  box-shadow: unset;
-}
+  :deep(.dialog-overlay) {
+    width: 100%;
+    height: 100%;
+    position: unset;
+    box-shadow: unset;
+  }
 </style>

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

@@ -6328,6 +6328,79 @@ export const testConfigElectro: Config[] = [
   },
 ];
 export const testConfigVent182: Config[] = [
+  {
+    deviceType: '',
+    moduleName: 'HIDDEN',
+    pageType: 'vent_182',
+    moduleData: {
+      header: {
+        show: false,
+        readFrom: '',
+        selector: {
+          show: false,
+          value: '',
+        },
+        slot: {
+          show: false,
+          value: '',
+        },
+      },
+      background: {
+        show: false,
+        type: 'image',
+        link: '',
+      },
+      layout: {
+        direction: 'column',
+        items: [
+          {
+            name: 'plain',
+            basis: '100%',
+          },
+        ],
+      },
+      preset: [
+        {
+          readFrom: '',
+          items: [
+            {
+              label: '总回风量(m³/min)',
+              value: '${midinfo[0].sysinfo.info.totalRetM3}',
+            },
+            {
+              label: '总进风量(m³/min)',
+              value: '${midinfo[0].sysinfo.info.totalIntM3}',
+            },
+            {
+              label: '计划风量(m³/min)',
+              value: '${midinfo[0].sysinfo.info.totalPlanM3}',
+            },
+            {
+              label: '通风巷道长度(万m)',
+              value: '${midinfo[0].sysinfo.info.flength}',
+            },
+            {
+              label: '有效风量率(%)',
+              value: '${midinfo[0].sysinfo.info.useM3Perent}',
+            },
+          ],
+        },
+      ],
+      list: [],
+      chart: [],
+      table: [],
+      gallery: [],
+      complex_list: [],
+      gallery_list: [],
+      board: [],
+      to: '',
+    },
+    showStyle: {
+      size: 'width:420px;height:280px;',
+      version: '原版',
+      position: 'top:60px;left:0;',
+    },
+  },
   {
     deviceType: 'fanmain',
     moduleName: '主通风机系统',

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

@@ -14,7 +14,7 @@
           全矿井通风检测
           <CaretDownOutlined />
         </a>
-        <MonitorBar v-if="showBar" class="module-monitor-bar" :is-data-real-time="isDataRealTime" :data="data" />
+        <MonitorBar v-if="showBar" class="module-monitor-bar" :is-data-real-time="isDataRealTime" :data="data" :config="hiddenConfigs[0]" />
       </template>
       <!-- <a-dropdown class="module-dropdown" :class="{ 'module-dropdown-original': isOriginal }" :trigger="['click']" placement="bottomRight">
         <template #overlay>
@@ -99,7 +99,7 @@
   import { usePermission } from '/@/hooks/web/usePermission';
 
   const { sysDataType = 'monitor', title = '智能通风管控系统' } = useGlobSetting();
-  const { configs, isOriginal, isCommon, fetchConfigs } = useInitConfigs();
+  const { configs, hiddenConfigs, isOriginal, isCommon, fetchConfigs } = useInitConfigs();
   const { mainTitle, enhancedConfigs, hiddenList, data, updateData, updateEnhancedConfigs } = useInitPage(title);
   const { hasPermission } = usePermission();
   const route = useRoute();