Merge branch 'master' of http://182.92.126.35:3000/hrx/mky-vent-base

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

@@ -67,9 +67,23 @@ export function parseModuleData(listData: { moduleData: ModuleData; showStyle: S
 // }
 
 /** 根据配置中的 formatter 将文本格式并返回 */
-export function getFormattedText(data: any, prop: string, formatter?: string): string {
-  if (formatter) {
-    return formatter.replace(/\$\{\}/g, _.get(data, prop, '-'));
-  }
-  return _.get(data, prop, '-');
+export function getFormattedText(data: any, formatter: string, defaultValue?: any): string {
+  // e.g. 'pre${prop[0].name}suf' => ['pre${prop[0].name}suf', 'prop[0].name']
+  const exp = /\$\{([\w|\.|\[|\]]*)\}/g;
+  const res = exp.exec(formatter);
+  if (!res) return formatter;
+
+  const [__, prop] = res;
+  const val = defaultValue === undefined ? '-' : defaultValue;
+  return formatter.replace(exp, _.get(data, prop, val));
+}
+
+export function getRawProp(formatter: string): string {
+  // e.g. 'pre${prop[0].name}suf' => ['pre${prop[0].name}suf', 'prop[0].name']
+  const exp = /\$\{([\w|\.|\[|\]]*)\}/g;
+  const res = exp.exec(formatter);
+  if (!res) return '';
+
+  const [__, prop] = res;
+  return prop;
 }

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

@@ -64,10 +64,10 @@ export const ModulePresetMap: Record<
         showSelector: true,
         showSlot: true,
         selector: {
-          prop: 'strinstallpos',
+          prop: '${strinstallpos}',
         },
         slot: {
-          prop: 'strinstallpos',
+          prop: '${strinstallpos}',
         },
       },
       background: {
@@ -83,11 +83,11 @@ export const ModulePresetMap: Record<
           readFrom: 'readData',
           items: [
             {
-              prop: 'Fan1StartStatus_str',
+              prop: '${Fan1StartStatus_str}',
               label: '一号机状态',
             },
             {
-              prop: 'Fan2StartStatus_str',
+              prop: '${Fan2StartStatus_str}',
               label: '二号机状态',
             },
           ],
@@ -98,6 +98,7 @@ export const ModulePresetMap: Record<
       table: [],
       gallery: [],
       preset: [],
+      complex_list: [],
     },
     showStyle: {
       size: 'width:450px;height:280px;',
@@ -110,10 +111,10 @@ export const ModulePresetMap: Record<
         showSelector: true,
         showSlot: true,
         selector: {
-          prop: 'strinstallpos',
+          prop: '${strinstallpos}',
         },
         slot: {
-          prop: 'strinstallpos',
+          prop: '${strinstallpos}',
         },
       },
       background: {
@@ -128,21 +129,22 @@ export const ModulePresetMap: Record<
         {
           type: 'line',
           readFrom: 'majorpath.paths',
-          xAxis: [{ prop: 'name' }],
+          xAxis: [{ prop: '${name}' }],
           yAxis: [
             { label: 'Drag', align: 'left' },
             { label: 'M3', align: 'right' },
           ],
           series: [
-            { label: 'Drag', prop: 'drag' },
-            { label: 'M3', prop: 'm3' },
-            // { label: '回2', prop: 'hui2' },
+            { label: 'Drag', prop: '${drag}' },
+            { label: 'M3', prop: '${m3}' },
+            // { label: '回2', prop: '${hui2}' },
           ],
         },
       ],
       gallery: [],
       table: [],
       preset: [],
+      complex_list: [],
     },
     showStyle: {
       size: 'width:450px;height:280px;',
@@ -155,10 +157,10 @@ export const ModulePresetMap: Record<
         showSelector: true,
         showSlot: true,
         selector: {
-          prop: 'strinstallpos',
+          prop: '${strinstallpos}',
         },
         slot: {
-          prop: 'strinstallpos',
+          prop: '${strinstallpos}',
         },
       },
       background: {
@@ -173,21 +175,22 @@ export const ModulePresetMap: Record<
         {
           type: 'line_area',
           readFrom: 'majorpath.paths',
-          xAxis: [{ prop: 'name' }],
+          xAxis: [{ prop: '${name}' }],
           yAxis: [
             { label: 'Drag', align: 'left' },
             { label: 'M3', align: 'right' },
           ],
           series: [
-            { label: 'Drag', prop: 'drag' },
-            { label: 'M3', prop: 'm3' },
-            // { label: '回2', prop: 'hui2' },
+            { label: 'Drag', prop: '${drag}' },
+            { label: 'M3', prop: '${m3}' },
+            // { label: '回2', prop: '${hui2}' },
           ],
         },
       ],
       gallery: [],
       table: [],
       preset: [],
+      complex_list: [],
     },
     showStyle: { size: 'width:450px;height:280px;' },
   },
@@ -198,10 +201,10 @@ export const ModulePresetMap: Record<
         showSelector: true,
         showSlot: true,
         selector: {
-          prop: 'strinstallpos',
+          prop: '${strinstallpos}',
         },
         slot: {
-          prop: 'strinstallpos',
+          prop: '${strinstallpos}',
         },
       },
       background: {
@@ -219,15 +222,16 @@ export const ModulePresetMap: Record<
           xAxis: [],
           yAxis: [],
           series: [
-            { label: 'Drag', prop: 'drag' },
-            { label: 'M3', prop: 'm3' },
-            // { label: '回2', prop: 'hui2' },
+            { label: 'Drag', prop: '${drag}' },
+            { label: 'M3', prop: '${m3}' },
+            // { label: '回2', prop: '${hui2}' },
           ],
         },
       ],
       gallery: [],
       table: [],
       preset: [],
+      complex_list: [],
     },
     showStyle: { size: 'width:450px;height:280px;' },
   },
@@ -238,10 +242,10 @@ export const ModulePresetMap: Record<
         showSelector: false,
         showSlot: false,
         selector: {
-          prop: 'strinstallpos',
+          prop: '${strinstallpos}',
         },
         slot: {
-          prop: 'strinstallpos',
+          prop: '${strinstallpos}',
         },
       },
       background: {
@@ -255,13 +259,14 @@ export const ModulePresetMap: Record<
       table: [],
       preset: [],
       gallery: [],
+      complex_list: [],
       chart: [
         {
           type: 'bar',
           readFrom: 'sysdata.history',
-          xAxis: [{ prop: 'time' }],
+          xAxis: [{ prop: '${time}' }],
           yAxis: [{ label: '回1', align: 'left' }],
-          series: [{ label: '回1', prop: 'hui1' }],
+          series: [{ label: '回1', prop: '${hui1}' }],
         },
       ],
     },
@@ -274,10 +279,10 @@ export const ModulePresetMap: Record<
         showSelector: false,
         showSlot: false,
         selector: {
-          prop: 'devicePos',
+          prop: '${devicePos}',
         },
         slot: {
-          prop: 'devicePos',
+          prop: '${devicePos}',
         },
       },
       background: {
@@ -293,25 +298,25 @@ export const ModulePresetMap: Record<
           readFrom: 'device',
           items: [
             {
-              prop: 'gate',
+              prop: '${gate}',
               label: '风门',
               // label: '光纤预警',
               color: 'blue',
             },
             {
-              prop: 'window',
+              prop: '${window}',
               label: '风窗',
               // label: '喷雾开启数',
               color: 'blue',
             },
             {
-              prop: 'windrect',
+              prop: '${windrect}',
               label: '测风',
               // label: '联网数量',
               color: 'blue',
             },
             {
-              prop: 'stationtype',
+              prop: '${stationtype}',
               label: '空位',
               // label: '断网数量',
               color: 'blue',
@@ -323,6 +328,7 @@ export const ModulePresetMap: Record<
       table: [],
       chart: [],
       preset: [],
+      complex_list: [],
     },
     showStyle: { size: 'width:450px;height:280px;' },
   },
@@ -333,11 +339,10 @@ export const ModulePresetMap: Record<
         showSelector: false,
         showSlot: true,
         selector: {
-          prop: 'strinstallpos',
+          prop: '${strinstallpos}',
         },
         slot: {
-          prop: 'netstatus.val',
-          formatter: '网络异常：${} 台',
+          prop: '${网络异常：}${netstatus.val} 台',
         },
       },
       background: {
@@ -350,6 +355,7 @@ export const ModulePresetMap: Record<
       chart: [],
       table: [],
       preset: [],
+      complex_list: [],
       gallery: [],
       list: [
         {
@@ -358,31 +364,31 @@ export const ModulePresetMap: Record<
           items: [
             {
               label: '正常',
-              prop: 'blue.val',
+              prop: '${blue}.val',
               color: 'blue',
               info: '',
             },
             {
               label: '告警',
-              prop: 'orange.val',
+              prop: '${orange}.val',
               color: 'orange',
               info: '',
             },
             {
               label: '报警',
-              prop: 'yellow.val',
+              prop: '${yellow}.val',
               color: 'yellow',
               info: '',
             },
             {
               label: '危险',
-              prop: 'red.val',
+              prop: '${red}.val',
               color: 'red',
               info: '',
             },
             {
               label: '错误',
-              prop: 'alarm.val',
+              prop: '${alarm}.val',
               color: 'green',
               info: '',
             },
@@ -399,10 +405,10 @@ export const ModulePresetMap: Record<
         showSelector: true,
         showSlot: true,
         selector: {
-          prop: 'devicePos',
+          prop: '${devicePos}',
         },
         slot: {
-          prop: 'devicePos',
+          prop: '${devicePos}',
         },
       },
       background: {
@@ -415,25 +421,26 @@ export const ModulePresetMap: Record<
       list: [],
       preset: [],
       gallery: [],
+      complex_list: [],
       table: [
         {
           type: 'B',
           readFrom: 'history',
           columns: [
             {
-              prop: 'cate',
+              prop: '${cate}',
               label: '类别',
             },
             {
-              prop: 'temp',
+              prop: '${temp}',
               label: '温度',
             },
             {
-              prop: 'wspd',
+              prop: '${wspd}',
               label: '风速',
             },
             {
-              prop: 'spst',
+              prop: '${spst}',
               label: '喷雾状态',
             },
           ],
@@ -450,10 +457,10 @@ export const ModulePresetMap: Record<
         showSelector: true,
         showSlot: false,
         selector: {
-          prop: 'strinstallpos',
+          prop: '${strinstallpos}',
         },
         slot: {
-          prop: 'strinstallpos',
+          prop: '${strinstallpos}',
         },
       },
       background: {
@@ -467,10 +474,253 @@ export const ModulePresetMap: Record<
       list: [],
       table: [],
       chart: [],
+      complex_list: [],
       preset: [{}],
     },
     showStyle: { size: 'width:450px;height:280px;' },
   },
+  '采空区火情综合预警（1*1）': {
+    moduleData: {
+      header: {
+        show: false,
+        showSelector: false,
+        showSlot: true,
+        selector: {
+          prop: '${strinstallpos}',
+        },
+        slot: {
+          prop: '${网络异常：}${netstatus.val} 台',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      layout: ['complex_list', 'list'],
+      // layout: ['list'],
+      board: [],
+      chart: [],
+      gallery: [],
+      table: [],
+      list: [
+        {
+          type: 'B',
+          readFrom: '',
+          items: [
+            {
+              label: '堵塞状态',
+              prop: '${fsectarea}',
+              color: 'yellow',
+              info: '',
+            },
+            {
+              label: '甲烷浓度',
+              prop: '${stationname}',
+              color: 'yellow',
+              info: '',
+            },
+          ],
+        },
+      ],
+      complex_list: [
+        {
+          type: 'A',
+          readFrom: '',
+          items: [
+            {
+              label: '火情状态',
+              prop: '${fsectarea}',
+              color: 'yellow',
+              info: '',
+            },
+            {
+              label: '回采位置',
+              prop: '${stationname}',
+              color: 'white',
+              info: '',
+            },
+            {
+              label: '硐室火情',
+              prop: '${stationtype}',
+              color: 'blue',
+              info: '',
+            },
+            {
+              label: '联动设备状态',
+              prop: '${typeName}',
+              color: 'blue',
+              info: '',
+            },
+          ],
+          galleryItems: [
+            {
+              prop: '${低风险}',
+              label: '',
+              color: 'white',
+            },
+            {
+              prop: '${CO}',
+              label: '',
+              color: 'white',
+            },
+          ],
+        },
+      ],
+      preset: [],
+    },
+    showStyle: {
+      size: 'width:450px;height:280px;',
+    },
+  },
+  '重点区域实时火情（1*2）': {
+    moduleData: {
+      header: {
+        show: false,
+        showSelector: true,
+        showSlot: true,
+        selector: {
+          prop: '${devicePos}',
+        },
+        slot: {
+          prop: '${devicePos}',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      layout: ['complex_list', 'blast_delta', 'list'],
+      board: [],
+      gallery: [],
+      list: [
+        {
+          type: 'E',
+          readFrom: '',
+          items: [
+            {
+              label: '火情状态',
+              prop: '${fsectarea}',
+              color: 'yellow',
+              info: '',
+            },
+            {
+              label: '回采位置',
+              prop: '${stationname}',
+              color: 'white',
+              info: '',
+            },
+            {
+              label: '硐室火情',
+              prop: '${stationtype}',
+              color: 'blue',
+              info: '',
+            },
+            {
+              label: '联动设备状态',
+              prop: '${typeName}',
+              color: 'blue',
+              info: '',
+            },
+            {
+              label: '火情状态',
+              prop: '${fsectarea}',
+              color: 'yellow',
+              info: '',
+            },
+            {
+              label: '回采位置',
+              prop: '${stationname}',
+              color: 'white',
+              info: '',
+            },
+            {
+              label: '硐室火情',
+              prop: '${stationtype}',
+              color: 'blue',
+              info: '',
+            },
+            {
+              label: '联动设备状态',
+              prop: '${typeName}',
+              color: 'blue',
+              info: '',
+            },
+            // {
+            //   label: '火情状态',
+            //   prop: '${fsectarea}',
+            //   color: 'yellow',
+            //   info: '',
+            // },
+            // {
+            //   label: '回采位置',
+            //   prop: '${stationname}',
+            //   color: 'white',
+            //   info: '',
+            // },
+            // {
+            //   label: '硐室火情',
+            //   prop: '${stationtype}',
+            //   color: 'blue',
+            //   info: '',
+            // },
+            // {
+            //   label: '联动设备状态',
+            //   prop: '${typeName}',
+            //   color: 'blue',
+            //   info: '',
+            // },
+          ],
+        },
+      ],
+      table: [],
+      chart: [],
+      preset: [{}],
+      complex_list: [
+        {
+          type: 'B',
+          readFrom: '',
+          items: [
+            {
+              label: '火情状态',
+              prop: '${fsectarea}',
+              color: 'yellow',
+              info: '',
+            },
+            {
+              label: '回采位置',
+              prop: '${stationname}',
+              color: 'white',
+              info: '',
+            },
+            {
+              label: '硐室火情',
+              prop: '${stationtype}',
+              color: 'blue',
+              info: '',
+            },
+            {
+              label: '联动设备状态',
+              prop: '${typeName}',
+              color: 'blue',
+              info: '',
+            },
+          ],
+          galleryItems: [
+            {
+              prop: '${低风险}',
+              label: '风险等级',
+              color: 'white',
+            },
+          ],
+        },
+      ],
+    },
+    showStyle: {
+      size: 'width:450px;height:570px;',
+    },
+  },
 };
 
 // export const ModuleChartTypeMap = {

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

@@ -25,7 +25,6 @@ export interface ModuleDataBoard {
   items: {
     /** 展示牌说明内容 */
     label: string;
-    formatter?: string;
     prop: string;
   }[];
 }
@@ -37,7 +36,6 @@ export interface ModuleDataList {
   items: {
     /** 列表项说明内容 */
     label: string;
-    formatter?: string;
     prop: string;
     color: string;
     /** 针对列表项说明的额外信息 */
@@ -54,7 +52,26 @@ export interface ModuleDataGallery {
   items: {
     /** 列表项说明内容 */
     label: string;
-    formatter?: string;
+    prop: string;
+    color: string;
+  }[];
+}
+export interface ModuleDataComplexList {
+  /** 列表项预设的背景类型 */
+  type: 'A' | 'B';
+  /** 读取数据时的基础路径 */
+  readFrom: string;
+  items: {
+    /** 列表项说明内容 */
+    label: string;
+    prop: string;
+    color: string;
+    /** 针对列表项说明的额外信息 */
+    info: string;
+  }[];
+  galleryItems: {
+    /** 列表项说明内容 */
+    label: string;
     prop: string;
     color: string;
   }[];
@@ -70,7 +87,6 @@ export interface ModuleDataChart {
   order?: 'desc' | 'asc';
   /** 图表x轴配置（若有），例如：{ prop: 'strInstallPos' } */
   xAxis: {
-    formatter?: string;
     prop: string;
   }[];
   /** 图表y轴配置（若有），例如：['风量', '风速'] */
@@ -118,14 +134,12 @@ export interface ModuleData {
     selector: {
       /** 图标，具体支持的输入种类请联系技术人员 */
       icon?: string;
-      formatter?: string;
       prop: string;
     };
     /** 右侧插槽的配置 */
     slot: {
       /** 图标，具体支持的输入种类请联系技术人员 */
       icon?: string;
-      formatter?: string;
       prop: string;
     };
   };
@@ -138,13 +152,14 @@ export interface ModuleData {
   };
   // layout: (ModuleDataBoard | ModuleDataChart | ModuleDataList | ModuleDataTable | ModuleDataPreset)[];
   /** 模块的布局，使用规定的枚举组合为一个数组，代表着从上到下所应展示的元素 */
-  layout: ('board' | 'list' | 'chart' | 'table' | 'gallery' | 'blast_delta' | 'fire_control' | 'fire_warn')[];
+  layout: ('board' | 'list' | 'chart' | 'table' | 'gallery' | 'complex_list' | 'blast_delta' | 'fire_control' | 'fire_warn')[];
   preset: ModuleDataPreset[];
   board: ModuleDataBoard[];
   chart: ModuleDataChart[];
   list: ModuleDataList[];
   table: ModuleDataTable[];
   gallery: ModuleDataGallery[];
+  complex_list: ModuleDataComplexList[];
   /** 如果目前没有数据可以对接，可使用模拟数据先行展示 */
   mock?: any[];
 }
@@ -152,7 +167,7 @@ export interface ShowStyle {
   /** 模块的宽高，一般来说是选好不动即可。特殊情况下可以自定义宽高 */
   size: keyof typeof ModuleSizeMap;
   /** 模块的版本，分新版及旧版，只要有一个模块指定为旧版，那么整个页面风格将变更为旧版 */
-  version: '原版' | '新版';
+  version: '原版' | '新版' | '普通版';
   /** 模块的位置，即定位 */
   position: keyof typeof ModulePositionMap;
 }

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

@@ -0,0 +1,69 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <!-- 基准的列表模块，通过不同的 type 展示不同的样式 -->
+  <div class="flex w-full">
+    <CustomGallery :class="`complex-list__gallery_${type}`" :type="complexTypeMap[type][0]" :gallery-config="galleryConfig" />
+    <CustomList :class="`complex-list__list_${type}`" :type="complexTypeMap[type][1]" :list-config="listConfig" />
+  </div>
+</template>
+<script lang="ts" setup>
+  import CustomList from './CustomList.vue';
+  import CustomGallery from './CustomGallery.vue';
+
+  withDefaults(
+    defineProps<{
+      listConfig: {
+        value: string;
+        color: string;
+        label: string;
+        prop: string;
+        info: string;
+      }[];
+      galleryConfig: {
+        value: string;
+        color: string;
+        label: string;
+        prop: string;
+      }[];
+      /** A B */
+      type: string;
+    }>(),
+    {
+      listConfig: () => [],
+      galleryConfig: () => [],
+      type: 'A',
+    }
+  );
+
+  const complexTypeMap = {
+    A: ['B', 'A'],
+    B: ['C', 'A'],
+  };
+
+  //   defineEmits(['click']);
+</script>
+<style lang="less" scoped>
+  @import '@/design/vent/color.less';
+
+  .complex-list__gallery_A {
+    // width: 200px;
+    flex-basis: 35%;
+    height: 240px;
+    // transform: scale(0.8);
+    // might not work in Firefox
+    zoom: 0.6;
+  }
+  .complex-list__list_A {
+    flex-basis: 65%;
+  }
+
+  .complex-list__gallery_B {
+    // width: 200px;
+    flex-basis: 35%;
+    // transform: scale(0.8);
+    // might not work in Firefox
+  }
+  .complex-list__list_B {
+    flex-basis: 65%;
+  }
+</style>

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

@@ -45,7 +45,7 @@
             data: series.map((serie) => {
               return {
                 name: serie.label,
-                value: get(props.chartData, serie.prop, 0),
+                value: getFormattedText(props.chartData, serie.prop, 0),
                 labelLine: { show: false },
                 label: { show: false },
                 itemStyle: {
@@ -88,7 +88,7 @@
           return {
             type: 'category',
             data: sorttedData.map((d) => {
-              return getFormattedText(d, e.prop, e.formatter);
+              return getFormattedText(d, e.prop);
             }),
           };
         }),
@@ -110,7 +110,7 @@
           const data = sorttedData.map((d) => {
             return {
               name: serie.label,
-              value: get(d, serie.prop, 0),
+              value: getFormattedText(d, serie.prop, 0),
             };
           });
           curr.push({
@@ -172,7 +172,7 @@
           return {
             type: 'category',
             data: sorttedData.map((d) => {
-              return getFormattedText(d, e.prop, e.formatter);
+              return getFormattedText(d, e.prop);
             }),
           };
         }),
@@ -192,7 +192,7 @@
           const data = sorttedData.map((d) => {
             return {
               name: serie.label,
-              value: get(d, serie.prop, 0),
+              value: getFormattedText(d, serie.prop, 0),
             };
           });
 
@@ -202,8 +202,6 @@
           };
         }),
       };
-
-      return {};
     }
 
     // 折线图和上面的柱状图类似
@@ -227,7 +225,7 @@
             type: 'category',
             boundaryGap: false,
             data: sorttedData.map((d) => {
-              return getFormattedText(d, e.prop, e.formatter);
+              return getFormattedText(d, e.prop);
             }),
           };
         }),
@@ -248,7 +246,7 @@
           const data = sorttedData.map((d) => {
             return {
               name: serie.label,
-              value: get(d, serie.prop, 0),
+              value: getFormattedText(d, serie.prop, 0),
             };
           });
 

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

@@ -3,7 +3,7 @@
   <!-- 基准的画廊模块，通过不同的 type 展示不同的样式 -->
   <div class="gallery" :class="`gallery_${type}`">
     <!-- 部分类型的画廊需要加一张图片 -->
-    <div :class="`gallery-item_cneter_${type}`"></div>
+    <div :class="`gallery-item_center_${type}`"></div>
     <div v-for="item in galleryConfig" :key="item.prop" :class="`gallery-item_${type}`">
       <!-- 画廊项的具体内容填充剩余宽度 -->
       <div class="gallery-item__label">{{ item.label }}</div>
@@ -42,7 +42,7 @@
     height: 100%;
   }
 
-  .gallery-item_cneter_A {
+  .gallery-item_center_A {
     background: url(@/assets/images/home-container/configurable/gallery_center.png) no-repeat;
     width: 144px;
     height: 126px;
@@ -75,7 +75,7 @@
     right: 60px;
   }
 
-  .gallery-item_cneter_B {
+  .gallery-item_center_B {
     background: url(/@/assets/images/home-container/configurable/deco_2.png) no-repeat;
     width: 100%;
     height: 90%;
@@ -99,28 +99,52 @@
     height: 70px;
     line-height: 70px;
     top: 20px;
-    left: 36%;
+    left: calc(50% - 70px);
   }
   .gallery > .gallery-item_B:nth-child(3) {
     width: 60px;
     height: 60px;
     line-height: 60px;
     top: 50px;
-    right: 34%;
+    // right: 34%;
+    right: calc(50% - 70px);
   }
   .gallery > .gallery-item_B:nth-child(4) {
     width: 55px;
     height: 55px;
     line-height: 55px;
     bottom: 90px;
-    left: 38%;
+    left: calc(50% - 55px);
   }
   .gallery > .gallery-item_B:nth-child(5) {
     width: 50px;
     height: 50px;
     line-height: 50px;
     bottom: 70px;
-    right: 38%;
+    right: calc(50% - 50px);
+  }
+  .gallery-item_B > .gallery-item__label {
+    display: none;
+  }
+
+  .gallery-item_center_C {
+    background: url(/@/assets/images/home-container/configurable/deco_4.png) no-repeat;
+    width: 100%;
+    height: 100%;
+    // top: 5%;
+    position: absolute;
+    background-position: center;
+    background-size: auto 100%;
+  }
+  .gallery_C {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-around;
+    text-align: center;
+  }
+  .gallery-item_C > .gallery-item__value {
+    font-size: 20px;
   }
 
   .gallery-item__value_red {

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

@@ -0,0 +1,51 @@
+<template>
+  <ventBox1 class="module-common" :style="style">
+    <template #title>
+      <div>{{ moduleName }}</div>
+    </template>
+    <template #container>
+      <slot></slot>
+    </template>
+  </ventBox1>
+</template>
+<script lang="ts" setup>
+  // import ModuleLeft from './original/moduleLeft.vue';
+  // import ModuleBottom from './original/moduleBottom.vue';
+  import { computed } from 'vue';
+  import { ShowStyle } from '../../../deviceManager/configurationTable/types';
+  import ventBox1 from '/@/components/vent/ventBox1.vue';
+
+  const props = defineProps<{
+    showStyle: ShowStyle;
+    moduleName: string;
+    visible: boolean;
+  }>();
+  defineEmits(['close']);
+
+  const style = computed(() => {
+    const size = props.showStyle.size;
+    const position = props.showStyle.position;
+    return size + position + 'position: absolute;';
+  });
+
+  // 根据配置里的定位判断应该使用哪个module组件
+  // function getModuleComponent(position) {
+  //   if (position === '中下') {
+  //     return ModuleBottom;
+  //   }
+  //   return ModuleLeft;
+  // }
+</script>
+<style scoped>
+  .module-common .box1-center {
+    height: calc(100% - 70px);
+  }
+  :deep(.box1-center) {
+    height: calc(100% - 70px);
+  }
+  :deep(.box1-center > .box-container) {
+    height: 100%;
+    padding: 0 !important;
+    width: 100% !important;
+  }
+</style>

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

@@ -52,7 +52,7 @@
     </video>
     <template v-for="config in layoutConfig" :key="config.key">
       <!-- 告示板部分 -->
-      <div v-if="config.key === 'board'" class="flex flex-justify-around pt-10px pb-10px">
+      <div v-if="config.key === 'board'" class="content__module flex flex-justify-around pt-10px pb-10px">
         <MiniBoard
           v-for="item in config.items"
           :key="item.prop"
@@ -64,19 +64,22 @@
       </div>
       <!-- 图表部分，这部分通常需要填充，有告示板、Header等内容需要填充父级 -->
       <template v-if="config.key === 'chart'">
-        <CustomChart :chart-config="config.config" :chart-data="config.data" class="flex-grow" />
+        <CustomChart class="content__module flex-grow" :chart-config="config.config" :chart-data="config.data" />
       </template>
       <!-- 通常列表部分 -->
       <template v-if="config.key === 'list'">
         <template v-if="config.type === 'timeline'">
-          <TimelineList :list-config="config.items" />
+          <TimelineList class="content__module" :list-config="config.items" />
         </template>
         <template v-else>
-          <CustomList :type="config.type" :list-config="config.items" />
+          <CustomList class="content__module" :type="config.type" :list-config="config.items" />
         </template>
       </template>
       <template v-if="config.key === 'gallery'">
-        <CustomGallery :type="config.type" :gallery-config="config.items" />
+        <CustomGallery class="content__module" :type="config.type" :gallery-config="config.items" />
+      </template>
+      <template v-if="config.key === 'complex_list'">
+        <ComplexList class="content__module" :type="config.type" :list-config="config.items" :gallery-config="config.galleryItems" />
       </template>
       <!-- 表格部分，这部分通常是占一整个模块的 -->
       <template v-if="config.key === 'table'">
@@ -84,24 +87,24 @@
           v-if="config.type === 'A'"
           :columns="config.columns"
           :data="tableData"
-          class="mt-20px mb-10px text-center flex-grow overflow-auto"
+          class="content__module text-center flex-grow overflow-auto"
         />
         <CustomTable
           v-else
           :type="config.type"
           :columns="config.columns"
           :data="tableData"
-          class="mt-20px mb-10px text-center flex-grow overflow-auto"
+          class="content__module text-center flex-grow overflow-auto"
         />
       </template>
       <template v-if="config.key === 'blast_delta'">
-        <BlastDelta class="mt-10px mb-10px" :pos-monitor="blastDeltaData" :canvas-size="{ width: 250, height: 147 }" />
+        <BlastDelta class="content__module" :pos-monitor="blastDeltaData" :canvas-size="{ width: 250, height: 137 }" />
       </template>
       <template v-if="config.key === 'fire_control'">
-        <FIreControl class="mt-10px mb-10px" />
+        <FIreControl class="content__module" />
       </template>
       <template v-if="config.key === 'fire_warn'">
-        <FIreWarn class="mt-10px mb-10px" />
+        <FIreWarn class="content__module" />
       </template>
     </template>
   </div>
@@ -123,8 +126,9 @@
   import TimelineList from './TimelineList.vue';
   import CustomList from './CustomList.vue';
   import CustomGallery from './CustomGallery.vue';
+  import ComplexList from './ComplexList.vue';
   import CustomTable from './CustomTable.vue';
-  import { getFormattedText } from '../../../deviceManager/configurationTable/adapters';
+  import { getFormattedText, getRawProp } from '../../../deviceManager/configurationTable/adapters';
   import CustomChart from './CustomChart.vue';
   import { get, clone } from 'lodash-es';
   import CommonTable from '../../billboard/components/CommonTable.vue';
@@ -147,6 +151,7 @@
     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 chart = clone(props.moduleData.chart);
     const table = clone(props.moduleData.table);
     const preset = clone(props.moduleData.preset);
@@ -164,7 +169,8 @@
             items: cfg.items.map((i) => {
               return {
                 ...i,
-                value: getFormattedText(data, i.prop, i.formatter),
+                label: getFormattedText(data, i.label),
+                value: getFormattedText(data, i.prop),
               };
             }),
           });
@@ -180,7 +186,8 @@
             items: cfg.items.map((i) => {
               return {
                 ...i,
-                value: getFormattedText(data, i.prop, i.formatter),
+                label: getFormattedText(data, i.label),
+                value: getFormattedText(data, i.prop),
               };
             }),
           });
@@ -197,7 +204,33 @@
             items: cfg.items.map((i) => {
               return {
                 ...i,
-                value: getFormattedText(data, i.prop, i.formatter),
+                label: getFormattedText(data, i.label),
+                value: getFormattedText(data, i.prop),
+              };
+            }),
+          });
+          break;
+        }
+        case 'complex_list': {
+          const cfg = complex_list.shift();
+          if (!cfg) break;
+          const data = mock || cfg.readFrom ? get(refData, cfg.readFrom) : refData;
+
+          arr.push({
+            ...cfg,
+            key,
+            items: cfg.items.map((i) => {
+              return {
+                ...i,
+                label: getFormattedText(data, i.label),
+                value: getFormattedText(data, i.prop),
+              };
+            }),
+            galleryItems: cfg.galleryItems.map((i) => {
+              return {
+                ...i,
+                label: getFormattedText(data, i.label),
+                value: getFormattedText(data, i.prop),
               };
             }),
           });
@@ -226,7 +259,7 @@
             columns: (cfg.columns || []).map((e) => {
               return {
                 name: e.label,
-                prop: e.prop,
+                prop: getRawProp(e.prop),
               };
             }),
             data: get(data, cfg.readFrom, []),
@@ -394,6 +427,16 @@
     z-index: -1;
     object-fit: fill;
   }
+  .content__module {
+    margin-top: 5px;
+    margin-bottom: 5px;
+  }
+  .content__module:first-of-type {
+    margin-top: 0;
+  }
+  .content__module:last-of-type {
+    margin-bottom: 0;
+  }
   ::v-deep .zxm-select:not(.zxm-select-customize-input) .zxm-select-selector {
     /* background-color: transparent; */
     color: #fff;

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

@@ -336,10 +336,10 @@ export const testConfigA: Config[] = [
   //       showSelector: true,
   //       showSlot: true,
   //       selector: {
-  //         prop: 'strinstallpos',
+  //         prop: '${strinstallpos}',
   //       },
   //       slot: {
-  //         prop: 'strinstallpos',
+  //         prop: '${strinstallpos}',
   //       },
   //     },
   //     background: {
@@ -354,12 +354,12 @@ export const testConfigA: Config[] = [
   //         layout: 'val-top',
   //         items: [
   //           {
-  //             prop: 'readData.windSpeed1',
+  //             prop: '${readData}.windSpeed1',
   //             label: '风速1',
   //           },
   //           {
   //             label: '风速2',
-  //             prop: 'readData.windSpeed2',
+  //             prop: '${readData}.windSpeed2',
   //           },
   //         ],
   //       },
@@ -386,10 +386,10 @@ export const testConfigA: Config[] = [
   //       showSelector: true,
   //       showSlot: true,
   //       selector: {
-  //         prop: 'strinstallpos',
+  //         prop: '${strinstallpos}',
   //       },
   //       slot: {
-  //         prop: 'strinstallpos',
+  //         prop: '${strinstallpos}',
   //       },
   //     },
   //     background: {
@@ -404,15 +404,15 @@ export const testConfigA: Config[] = [
   //       {
   //         type: 'line_area',
   //         readFrom: 'majorpath.paths',
-  //         xAxis: [{ prop: 'name' }],
+  //         xAxis: [{ prop: '${name}' }],
   //         yAxis: [
   //           { label: 'Drag', align: 'left' },
   //           { label: 'M3', align: 'right' },
   //         ],
   //         series: [
-  //           { label: 'Drag', prop: 'drag' },
-  //           { label: 'M3', prop: 'm3' },
-  //           // { label: '回2', prop: 'hui2' },
+  //           { label: 'Drag', prop: '${drag}' },
+  //           { label: 'M3', prop: '${m3}' },
+  //           // { label: '回2', prop: '${hui2}' },
   //         ],
   //       },
   //     ],
@@ -428,7 +428,7 @@ export const testConfigA: Config[] = [
   // },
   {
     deviceType: 'warn',
-    moduleName: 'fire_warn-左下预设类',
+    moduleName: '采空区火情综合预警',
     pageType: '',
     moduleData: {
       header: {
@@ -436,11 +436,10 @@ export const testConfigA: Config[] = [
         showSelector: false,
         showSlot: true,
         selector: {
-          prop: 'strinstallpos',
+          prop: '${strinstallpos}',
         },
         slot: {
-          prop: 'netstatus.val',
-          formatter: '网络异常：${} 台',
+          prop: '网络异常：${netstatus.val} 台',
         },
       },
       background: {
@@ -448,14 +447,95 @@ export const testConfigA: Config[] = [
         type: 'video',
         link: '',
       },
-      layout: ['fire_warn'],
+      layout: ['list', 'list'],
       // layout: ['list'],
       board: [],
       chart: [],
       gallery: [],
       table: [],
-      list: [],
-      preset: [{}],
+      list: [
+        {
+          type: 'B',
+          readFrom: '',
+          items: [
+            {
+              label: '堵塞状态',
+              prop: '${fsectarea}',
+              color: 'yellow',
+              info: '',
+            },
+            {
+              label: '甲烷浓度',
+              prop: '${stationname}',
+              color: 'yellow',
+              info: '',
+            },
+          ],
+        },
+        {
+          type: 'B',
+          readFrom: '',
+          items: [
+            {
+              label: '堵塞状态',
+              prop: '${fsectarea}',
+              color: 'yellow',
+              info: '',
+            },
+            {
+              label: '甲烷浓度',
+              prop: '${stationname}',
+              color: 'yellow',
+              info: '',
+            },
+          ],
+        },
+      ],
+      complex_list: [
+        {
+          type: 'A',
+          readFrom: '',
+          items: [
+            {
+              label: '火情状态',
+              prop: '${fsectarea}',
+              color: 'yellow',
+              info: '',
+            },
+            {
+              label: '回采位置',
+              prop: '${stationname}',
+              color: 'white',
+              info: '',
+            },
+            {
+              label: '硐室火情',
+              prop: '${stationtype}',
+              color: 'blue',
+              info: '',
+            },
+            {
+              label: '联动设备状态',
+              prop: '${typeName}',
+              color: 'blue',
+              info: '',
+            },
+          ],
+          galleryItems: [
+            {
+              prop: '低风险',
+              label: '',
+              color: 'white',
+            },
+            {
+              prop: '${CO}',
+              label: '',
+              color: 'white',
+            },
+          ],
+        },
+      ],
+      preset: [],
     },
     showStyle: {
       size: 'width:450px;height:280px;',
@@ -474,11 +554,11 @@ export const testConfigA: Config[] = [
         showSlot: false,
         selector: {
           icon: 'SwapOutlined',
-          prop: 'strinstallpos',
+          prop: '${strinstallpos}',
         },
         slot: {
           icon: 'SwapOutlined',
-          prop: 'strinstallpos',
+          prop: '${strinstallpos}',
         },
       },
       background: {
@@ -492,18 +572,19 @@ export const testConfigA: Config[] = [
       table: [],
       preset: [],
       gallery: [],
+      complex_list: [],
       chart: [
         {
           type: 'bar',
           readFrom: 'sysdata.history',
-          xAxis: [{ prop: 'time' }],
+          xAxis: [{ prop: '${time}' }],
           yAxis: [
             { label: '回1', align: 'left' },
             // { label: '回2', align: 'right' },
           ],
           series: [
-            { label: '回1', prop: 'hui1' },
-            // { label: '回2', prop: 'hui2' },
+            { label: '回1', prop: '${hui1}' },
+            // { label: '回2', prop: '${hui2}' },
           ],
         },
       ],
@@ -524,10 +605,10 @@ export const testConfigA: Config[] = [
         showSelector: true,
         showSlot: false,
         selector: {
-          prop: 'strinstallpos',
+          prop: '${strinstallpos}',
         },
         slot: {
-          prop: 'strinstallpos',
+          prop: '${strinstallpos}',
         },
       },
       background: {
@@ -538,6 +619,7 @@ export const testConfigA: Config[] = [
       layout: ['list', 'list'],
       // layout: ['blast_delta'],
       board: [],
+      complex_list: [],
       gallery: [],
       list: [
         {
@@ -546,49 +628,49 @@ export const testConfigA: Config[] = [
           items: [
             {
               label: '面积',
-              prop: 'fsectarea',
+              prop: '${fsectarea}',
               color: 'blue',
               info: '',
             },
             {
               label: '分站名称',
-              prop: 'stationname',
+              prop: '${stationname}',
               color: 'blue',
               info: '',
             },
             {
               label: '分站类别',
-              prop: 'stationtype',
+              prop: '${stationtype}',
               color: 'blue',
               info: '',
             },
             {
               label: '分类',
-              prop: 'typeName',
+              prop: '${typeName}',
               color: 'blue',
               info: '',
             },
             {
               label: '告警标识',
-              prop: 'warnFlag',
+              prop: '${warnFlag}',
               color: 'blue',
               info: '',
             },
             {
               label: '告警等级',
-              prop: 'warnLevel',
+              prop: '${warnLevel}',
               color: 'blue',
               info: '',
             },
             {
               label: '告警描述',
-              prop: 'warnLevel_str',
+              prop: '${warnLevel_str}',
               color: 'blue',
               info: '',
             },
             {
               label: '错误记录',
-              prop: 'warnLogNotOkCount',
+              prop: '${warnLogNotOkCount}',
               color: 'blue',
               info: '',
             },
@@ -600,25 +682,25 @@ export const testConfigA: Config[] = [
           items: [
             {
               label: '面积',
-              prop: 'fsectarea',
+              prop: '${fsectarea}',
               color: 'blue',
               info: '',
             },
             {
               label: '分站名称',
-              prop: 'stationname',
+              prop: '${stationname}',
               color: 'blue',
               info: '',
             },
             {
               label: '分站类别',
-              prop: 'stationtype',
+              prop: '${stationtype}',
               color: 'blue',
               info: '',
             },
             {
               label: '分类',
-              prop: 'typeName',
+              prop: '${typeName}',
               color: 'blue',
               info: '',
             },
@@ -645,10 +727,10 @@ export const testConfigA: Config[] = [
   //       showSelector: true,
   //       showSlot: true,
   //       selector: {
-  //         prop: 'devicePos',
+  //         prop: '${devicePos}',
   //       },
   //       slot: {
-  //         prop: 'devicePos',
+  //         prop: '${devicePos}',
   //       },
   //     },
   //     background: {
@@ -666,15 +748,15 @@ export const testConfigA: Config[] = [
   //         readFrom: 'history',
   //         columns: [
   //           {
-  //             prop: 'index',
+  //             prop: '${index}',
   //             label: '编号',
   //           },
   //           {
-  //             prop: 'time',
+  //             prop: '${time}',
   //             label: '报警时间',
   //           },
   //           {
-  //             prop: 'warn',
+  //             prop: '${warn}',
   //             label: '报警内容',
   //           },
   //         ],
@@ -698,10 +780,10 @@ export const testConfigA: Config[] = [
   //       showSelector: true,
   //       showSlot: true,
   //       selector: {
-  //         prop: 'devicePos',
+  //         prop: '${devicePos}',
   //       },
   //       slot: {
-  //         prop: 'devicePos',
+  //         prop: '${devicePos}',
   //       },
   //     },
   //     background: {
@@ -722,20 +804,79 @@ export const testConfigA: Config[] = [
   //     position: '右下',
   //   },
   // },
+  // {
+  //   deviceType: 'sys_majorpath',
+  //   moduleName: 'unknown-右中',
+  //   pageType: '',
+  //   moduleData: {
+  //     header: {
+  //       show: true,
+  //       showSelector: true,
+  //       showSlot: true,
+  //       selector: {
+  //         prop: '${devicePos}',
+  //       },
+  //       slot: {
+  //         prop: '${devicePos}',
+  //       },
+  //     },
+  //     background: {
+  //       show: false,
+  //       type: 'video',
+  //       link: '',
+  //     },
+  //     layout: ['table'],
+  //     board: [],
+  //     list: [],
+  //     preset: [],
+  //     gallery: [],
+  //     complex_list: [],
+  //     table: [
+  //       {
+  //         type: 'B',
+  //         readFrom: 'history',
+  //         columns: [
+  //           {
+  //             prop: '${cate}',
+  //             label: '类别',
+  //           },
+  //           {
+  //             prop: '${temp}',
+  //             label: '温度',
+  //           },
+  //           {
+  //             prop: '${wspd}',
+  //             label: '风速',
+  //           },
+  //           {
+  //             prop: '${spst}',
+  //             label: '喷雾状态',
+  //           },
+  //         ],
+  //       },
+  //     ],
+  //     chart: [],
+  //   },
+  //   showStyle: {
+  //     size: 'width:450px;height:280px;',
+  //     version: '新版',
+  //     position: 'top:350px;right:0;',
+  //   },
+  // },
   {
     deviceType: 'sys_majorpath',
-    moduleName: 'unknown-右中',
+    moduleName: '重点区域实时火情',
     pageType: '',
     moduleData: {
       header: {
-        show: true,
+        show: false,
         showSelector: true,
         showSlot: true,
         selector: {
-          prop: 'devicePos',
+          prop: '${devicePos}',
         },
         slot: {
-          prop: 'devicePos',
+          prop: '${devicePos}',
         },
       },
       background: {
@@ -743,107 +884,136 @@ export const testConfigA: Config[] = [
         type: 'video',
         link: '',
       },
-      layout: ['table'],
+      layout: ['complex_list', 'blast_delta', 'list'],
       board: [],
-      list: [],
-      preset: [],
       gallery: [],
-      table: [
+      list: [
         {
-          type: 'B',
-          readFrom: 'history',
-          columns: [
+          type: 'E',
+          readFrom: '',
+          items: [
             {
-              prop: 'cate',
-              label: '类别',
+              label: '火情状态',
+              prop: '${fsectarea}',
+              color: 'yellow',
+              info: '',
             },
             {
-              prop: 'temp',
-              label: '温度',
+              label: '回采位置',
+              prop: '${stationname}',
+              color: 'white',
+              info: '',
             },
             {
-              prop: 'wspd',
-              label: '风速',
+              label: '硐室火情',
+              prop: '${stationtype}',
+              color: 'blue',
+              info: '',
             },
             {
-              prop: 'spst',
-              label: '喷雾状态',
+              label: '联动设备状态',
+              prop: '${typeName}',
+              color: 'blue',
+              info: '',
+            },
+            {
+              label: '火情状态',
+              prop: '${fsectarea}',
+              color: 'yellow',
+              info: '',
+            },
+            {
+              label: '回采位置',
+              prop: '${stationname}',
+              color: 'white',
+              info: '',
             },
+            {
+              label: '硐室火情',
+              prop: '${stationtype}',
+              color: 'blue',
+              info: '',
+            },
+            {
+              label: '联动设备状态',
+              prop: '${typeName}',
+              color: 'blue',
+              info: '',
+            },
+            // {
+            //   label: '火情状态',
+            //   prop: '${fsectarea}',
+            //   color: 'yellow',
+            //   info: '',
+            // },
+            // {
+            //   label: '回采位置',
+            //   prop: '${stationname}',
+            //   color: 'white',
+            //   info: '',
+            // },
+            // {
+            //   label: '硐室火情',
+            //   prop: '${stationtype}',
+            //   color: 'blue',
+            //   info: '',
+            // },
+            // {
+            //   label: '联动设备状态',
+            //   prop: '${typeName}',
+            //   color: 'blue',
+            //   info: '',
+            // },
           ],
         },
       ],
+      table: [],
       chart: [],
-    },
-    showStyle: {
-      size: 'width:450px;height:280px;',
-      version: '新版',
-      position: 'top:350px;right:0;',
-    },
-  },
-  {
-    deviceType: 'sys_majorpath',
-    moduleName: 'fire_control-右下预设类',
-    pageType: '',
-    moduleData: {
-      header: {
-        show: false,
-        showSelector: true,
-        showSlot: true,
-        selector: {
-          prop: 'devicePos',
-        },
-        slot: {
-          prop: 'devicePos',
-        },
-      },
-      background: {
-        show: false,
-        type: 'video',
-        link: '',
-      },
-      layout: ['gallery'],
-      board: [],
-      gallery: [
+      preset: [{}],
+      complex_list: [
         {
-          type: 'A',
-          readFrom: 'sys_majorpath',
+          type: 'B',
+          readFrom: '',
           items: [
             {
-              prop: 'total',
-              label: 'CO2',
-              // label: '光纤预警',
-              color: 'blue',
+              label: '火情状态',
+              prop: '${fsectarea}',
+              color: 'yellow',
+              info: '',
             },
             {
-              prop: 'pwkqs',
-              label: 'CO',
-              // label: '喷雾开启数',
-              color: 'blue',
+              label: '回采位置',
+              prop: '${stationname}',
+              color: 'white',
+              info: '',
             },
             {
-              prop: 'online',
-              label: 'O2',
-              // label: '联网数量',
+              label: '硐室火情',
+              prop: '${stationtype}',
               color: 'blue',
+              info: '',
             },
             {
-              prop: 'offline',
-              label: 'Na',
-              // label: '断网数量',
+              label: '联动设备状态',
+              prop: '${typeName}',
               color: 'blue',
+              info: '',
+            },
+          ],
+          galleryItems: [
+            {
+              prop: '低风险',
+              label: '风险等级',
+              color: 'white',
             },
           ],
         },
       ],
-      list: [],
-      table: [],
-      chart: [],
-      preset: [],
     },
     showStyle: {
-      size: 'width:450px;height:280px;',
+      size: 'width:450px;height:570px;',
       version: '新版',
-      position: 'top:640px;right:0;',
+      position: 'top:350px;right:0;',
     },
   },
 ];
@@ -859,10 +1029,10 @@ export const testConfigB: Config[] = [
   //       showSelector: false,
   //       showSlot: true,
   //       selector: {
-  //         prop: 'strinstallpos',
+  //         prop: '${strinstallpos}',
   //       },
   //       slot: {
-  //         prop: 'netstatus.val',
+  //         prop: '${netstatus}.val',
   //         formatter: '网络异常：${} 台',
   //       },
   //     },
@@ -878,31 +1048,31 @@ export const testConfigB: Config[] = [
   //     list: [
   //       {
   //         label: '正常',
-  //         prop: 'blue.val',
+  //         prop: '${blue}.val',
   //         color: 'blue',
   //         type: 'timeline',
   //       },
   //       {
   //         label: '告警',
-  //         prop: 'orange.val',
+  //         prop: '${orange}.val',
   //         color: 'orange',
   //         type: 'timeline',
   //       },
   //       {
   //         label: '报警',
-  //         prop: 'yellow.val',
+  //         prop: '${yellow}.val',
   //         color: 'yellow',
   //         type: 'timeline',
   //       },
   //       {
   //         label: '危险',
-  //         prop: 'red.val',
+  //         prop: '${red}.val',
   //         color: 'red',
   //         type: 'timeline',
   //       },
   //       {
   //         label: '错误',
-  //         prop: 'alarm.val',
+  //         prop: '${alarm}.val',
   //         color: 'green',
   //         type: 'timeline',
   //       },
@@ -924,10 +1094,10 @@ export const testConfigB: Config[] = [
   //       showSelector: true,
   //       showSlot: false,
   //       selector: {
-  //         prop: 'strinstallpos',
+  //         prop: '${strinstallpos}',
   //       },
   //       slot: {
-  //         prop: 'strinstallpos',
+  //         prop: '${strinstallpos}',
   //       },
   //     },
   //     background: {
@@ -941,13 +1111,13 @@ export const testConfigB: Config[] = [
   //         label: 'F1',
   //         type: 'C',
   //         layout: 'val-top',
-  //         prop: 'f1Val',
+  //         prop: '${f1Val}',
   //       },
   //       {
   //         label: 'F2',
   //         type: 'C',
   //         layout: 'val-top',
-  //         prop: 'f2Val',
+  //         prop: '${f2Val}',
   //       },
   //     ],
   //     list: [],
@@ -956,15 +1126,15 @@ export const testConfigB: Config[] = [
   //         readFrom: 'history',
   //         columns: [
   //           {
-  //             prop: 'index',
+  //             prop: '${index}',
   //             label: '编号',
   //           },
   //           {
-  //             prop: 'time',
+  //             prop: '${time}',
   //             label: '自定义字段A',
   //           },
   //           {
-  //             prop: 'warn',
+  //             prop: '${warn}',
   //             label: '自定义字段B',
   //           },
   //         ],
@@ -974,15 +1144,15 @@ export const testConfigB: Config[] = [
   //       {
   //         type: 'pie',
   //         readFrom: 'readData',
-  //         xAxis: [{ prop: 'stationname' }],
+  //         xAxis: [{ prop: '${stationname}' }],
   //         yAxis: [
   //           { label: '风量1', align: 'left' },
   //           // { label: '回2', align: 'right' },
   //         ],
   //         series: [
-  //           { label: '风量1', prop: 'va' },
-  //           { label: '风量2', prop: 'va2' },
-  //           // { label: '回2', prop: 'hui2' },
+  //           { label: '风量1', prop: '${va}' },
+  //           { label: '风量2', prop: '${va2}' },
+  //           // { label: '回2', prop: '${hui2}' },
   //         ],
   //       },
   //     ],
@@ -1004,11 +1174,11 @@ export const testConfigB: Config[] = [
   //       showSlot: false,
   //       selector: {
   //         icon: 'SwapOutlined',
-  //         prop: 'strinstallpos',
+  //         prop: '${strinstallpos}',
   //       },
   //       slot: {
   //         icon: 'SwapOutlined',
-  //         prop: 'strinstallpos',
+  //         prop: '${strinstallpos}',
   //       },
   //     },
   //     background: {
@@ -1024,14 +1194,14 @@ export const testConfigB: Config[] = [
   //       {
   //         type: 'bar',
   //         readFrom: 'sysdata.history',
-  //         xAxis: [{ prop: 'time' }],
+  //         xAxis: [{ prop: '${time}' }],
   //         yAxis: [
   //           { label: '回1', align: 'left' },
   //           // { label: '回2', align: 'right' },
   //         ],
   //         series: [
-  //           { label: '回1', prop: 'hui1' },
-  //           // { label: '回2', prop: 'hui2' },
+  //           { label: '回1', prop: '${hui1}' },
+  //           // { label: '回2', prop: '${hui2}' },
   //         ],
   //       },
   //     ],
@@ -1052,10 +1222,10 @@ export const testConfigB: Config[] = [
   //       showSelector: true,
   //       showSlot: true,
   //       selector: {
-  //         prop: 'strinstallpos',
+  //         prop: '${strinstallpos}',
   //       },
   //       slot: {
-  //         prop: 'strinstallpos',
+  //         prop: '${strinstallpos}',
   //       },
   //     },
   //     background: {
@@ -1070,15 +1240,15 @@ export const testConfigB: Config[] = [
   //       {
   //         type: 'line',
   //         readFrom: 'majorpath.paths',
-  //         xAxis: [{ prop: 'name' }],
+  //         xAxis: [{ prop: '${name}' }],
   //         yAxis: [
   //           { label: 'Drag', align: 'left' },
   //           { label: 'M3', align: 'right' },
   //         ],
   //         series: [
-  //           { label: 'Drag', prop: 'drag' },
-  //           { label: 'M3', prop: 'm3' },
-  //           // { label: '回2', prop: 'hui2' },
+  //           { label: 'Drag', prop: '${drag}' },
+  //           { label: 'M3', prop: '${m3}' },
+  //           // { label: '回2', prop: '${hui2}' },
   //         ],
   //       },
   //     ],
@@ -1100,10 +1270,10 @@ export const testConfigB: Config[] = [
   //       showSelector: false,
   //       showSlot: true,
   //       selector: {
-  //         prop: 'strinstallpos',
+  //         prop: '${strinstallpos}',
   //       },
   //       slot: {
-  //         prop: 'netstatus.val',
+  //         prop: '${netstatus}.val',
   //         formatter: '网络异常：${} 台',
   //       },
   //     },
@@ -1119,31 +1289,31 @@ export const testConfigB: Config[] = [
   //     list: [
   //       {
   //         label: '正常',
-  //         prop: 'blue.val',
+  //         prop: '${blue}.val',
   //         color: 'blue',
   //         type: 'B',
   //       },
   //       {
   //         label: '告警',
-  //         prop: 'orange.val',
+  //         prop: '${orange}.val',
   //         color: 'orange',
   //         type: 'B',
   //       },
   //       {
   //         label: '报警',
-  //         prop: 'yellow.val',
+  //         prop: '${yellow}.val',
   //         color: 'yellow',
   //         type: 'B',
   //       },
   //       {
   //         label: '危险',
-  //         prop: 'red.val',
+  //         prop: '${red}.val',
   //         color: 'red',
   //         type: 'B',
   //       },
   //       {
   //         label: '错误',
-  //         prop: 'alarm.val',
+  //         prop: '${alarm}.val',
   //         color: 'green',
   //         type: 'B',
   //       },

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

@@ -29,6 +29,11 @@ export function useInitConfigs() {
       return c.showStyle.version === '原版';
     });
   });
+  const isCommon = computed(() => {
+    return configs.value.some((c) => {
+      return c.showStyle.version === '普通版';
+    });
+  });
 
   function fetchConfigs() {
     return cfgList({}).then(({ records }) => {
@@ -40,6 +45,7 @@ export function useInitConfigs() {
     fetchConfigs,
     configs,
     isOriginal,
+    isCommon,
   };
 }
 

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

@@ -19,6 +19,11 @@
         <Content v-bind="cfg" />
       </ModuleOriginal>
     </template>
+    <template v-else-if="isCommon">
+      <ModuleCommon v-for="cfg in configs" :key="cfg.deviceType" :show-style="cfg.showStyle" :module-name="cfg.moduleName" :visible="true">
+        <Content v-bind="cfg" />
+      </ModuleCommon>
+    </template>
     <template v-else>
       <!-- 下面是正常展示的各新版模块 -->
       <ModuleEnhanced
@@ -55,6 +60,7 @@
   import { Config } from '../../deviceManager/configurationTable/types';
   import ModuleEnhanced from './components/ModuleEnhanced.vue';
   import ModuleOriginal from './components/ModuleOriginal.vue';
+  import ModuleCommon from './components/ModuleCommon.vue';
   import Content from './components/content.vue';
   import { testConfigA } from './configurable.data';
   // import mapComponent from './components/3Dmap/index.vue';
@@ -72,7 +78,7 @@
   const hiddenList = computed(() => {
     return enhancedConfigs.value.filter((e) => e.visible === false);
   });
-  const { configs, isOriginal, fetchConfigs } = useInitConfigs();
+  const { configs, isOriginal, isCommon, fetchConfigs } = useInitConfigs();
 
   onMounted(() => {
     // configs.value = testConfigB;

src/views/vent/monitorManager/alarmMonitor/common/gasParamter.vue

@@ -16,9 +16,9 @@
 <script setup lang="ts">
 import { ref, reactive } from 'vue'
 let tableData = ref<any[]>([
-    { name: '相对瓦斯涌出量', value: '0.83m³/t', address: '二水平中部辅运大巷1860米', work: '42205综放面', code: 'ZWY270/355' },
-    { name: '综采最大涌出量', value: '3.16m³/min', address: '12煤组辅运大巷480米', work: '12上302综放面', code: 'ZWY300/355' },
-    { name: '掘进最大涌出量', value: '0.68m³/min', address: '12煤二盘区辅运大巷1280米', work: '12201综采面', code: 'ZWY300/355' },
+    { name: '相对瓦斯涌出量', value: '8.18m³/t', address: '1475移动式瓦斯抽采泵站', work: '16219-1综放工作面', code: '2Be1-405' },
+    { name: '综采最大涌出量', value: '2.51m³/min', address: '六采区进风大巷移动式瓦斯抽采泵站', work: '16120油页岩工作面', code: 'ZWY120/160G' },
+    { name: '掘进最大涌出量', value: '0.59m³/min', address: '', work: '', code: '' },
 ])
 
 let columns = reactive([
@@ -35,7 +35,7 @@ let columns = reactive([
                         align: 'center',
                     },
                     {
-                        title: '29.92m³/min',
+                        title: '20.65m³/min',
                         dataIndex: 'value',
                         key: 'value',
                         align: 'center'