[Feat 0000] 可配置首页更新

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

@@ -1,4 +1,4 @@
-import { get, forEach, set, isNil } from 'lodash-es';
+import { forEach, set } from 'lodash-es';
 import { ModuleData, ShowStyle } from './types';
 
 /** 将原本的 formData 格式化为 api.saveOrUpdate 需要的格式 */
@@ -20,27 +20,3 @@ export function parseModuleData(listData: { moduleData: ModuleData; showStyle: S
 
   return listData;
 }
-
-/** 根据配置中的 formatter 将文本格式并返回 */
-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;
-  const txt = get(data, prop);
-  return formatter.replace(exp, isNil(txt) ? val : txt);
-}
-
-/** 获取 formatter 需要取的源 prop，用于在一些不支持 formatter 的组件中使用 */
-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/types.ts

@@ -17,33 +17,51 @@ export interface Config {
  * 模块的配置
  *
  * 该配置将描述本模块的基础样式，应该展示哪些内容，应该如何排布主要元素
+ * 配置带有基本的说明，但有几项常用的配置，以下是特别说明：
  *
- * 配置中有几项常用的配置，以下是部分说明：
+ * 假设一个首页的 api 返回的数据为：`{ fanmain: { f1Val: 2555, f2Val: 0, run: 1, history: [] } }`，以下示例基于此数据；
  *
- * 假设模块依赖的数据为：`{ f1Val: 2555 }`；
+ * formatter 格式是什么?
  *
- * 配置中有许多 value、lable 都是遵循 formatter 格式的，formatter 格式可以用于自定义展示文本
+ * 配置中有许多 value、lable 都是遵循 formatter 格式的，formatter 格式可以用于自定义展示文本。
+ * 使用示例：在基准数据为上述 api 数据时，formatter 为 `风量：${fanmain.f1val}`，则对应的文本将是 `风量：2555`。
  *
- * 使用示例：`f1的值为：${f1Val}呀！`。则对应的文本将是`f1的值为：2555呀！`
+ * readFrom 使用指南：
  *
+ * readFrom 用于配置数据指向，你可能看到多个父子关系的 readFrom，如果它们是，那么读取数据是也是遵循父子关系的。
+ * 例如有配置：{ board: { ..., readFrom: 'fanmain' } }，那么 board 的内容将以 { f1Val: 2555 } 作为基准数据，后续需要在此基础上继续配置。
+ * 例如有配置：{ board: { ..., readFrom: '' } }，那么 board 的内容将以 api 数据作为基准数据，后续需要在此基础上继续配置。
+ * 例如有配置：{ chart: { ..., readFrom: 'fanmain', series: [{ ..., readFrom: 'history' }] } }，那么 chart 的内容将以 fanmain.history 的数据作为基准数据。
+ * 特殊的，header 如果需要展示下拉框，那么下拉选中的那条信息将作为基准信息。
+ *
+ * trans 使用指南：
+ *
+ * trans 设计目的是为了让某些不易读懂的值有一个翻译，也用于一些特别的目的。
+ * 例如有配置：{ board: { ..., readFrom: 'fanmain', items: [{ ..., value: '${run}', trans: { 1: '运行', '2': '停止' } }] } }。
+ * 那么 board 将会显示 运行 字样，trans 的值也支持 formatter 格式，可以用在动态取值上。
+ * 例如有配置：{ chart: { ..., readFrom: 'fanmain', items: [{ ..., label: '当前运行风机的风量', value: '${run}', trans: { 1: '${f1Val}', '2': '${f2Val}' } }] } }。
+ * 那么 board 将会显示 2555 字样。
+ * 特殊的，如果有字样无法翻译完全，那么 trans 中如果提供了 default 字段，则其他字段匹配不到后会展示 default 的内容，反之展示未翻译的内容。
  */
 export interface ModuleData {
   header: {
-    /** 是否展示 header，header 的展示与否影响各个模块的 readFrom 实现，详细请阅读各模块的详细介绍 */
+    /** 是否展示 header */
     show: boolean;
-    /** 是否展示左侧的选择框 */
-    showSelector: boolean;
-    /** 是否展示右侧插槽 */
-    showSlot: boolean;
+    /** 读取数据时的基础路径，如果指定，应指向数组 */
+    readFrom: string;
     /** 左侧选择框的配置 */
     selector: {
+      show: boolean;
       /** 展示的内容，formatter 格式 */
       value: string;
     };
     /** 右侧插槽的配置 */
     slot: {
+      show: boolean;
       /** 展示的内容，formatter 格式 */
       value: string;
+      /** 翻译依据，formatter 格式 */
+      trans?: Record<string, string>;
     };
   };
   background: {
@@ -54,25 +72,25 @@ export interface ModuleData {
     /** 背景资源的链接 */
     link: string;
   };
-  /** 模块的布局，使用规定的枚举组合为一个数组，代表着从上到下所应展示的元素 */
-  layout: ('board' | 'list' | 'chart' | 'table' | 'gallery' | 'complex_list' | 'gallery_list' | 'blast_delta' | 'measure_detail')[];
-  /** 模块内容的分区 */
-  slice: {
-    /** 分区方向 */
+  layout: {
+    /** 布局方向 */
     direction: 'column' | 'row';
-    /** 分区大小，该数组的数量应该和 layout 数量一致 */
-    basis: string[];
-    /** 是否允许溢出自滚动 */
-    ignoreOverflow?: boolean;
+    items: {
+      /** 分区名称，对应下方的配置 */
+      name: 'board' | 'list' | 'chart' | 'table' | 'gallery' | 'complex_list' | 'gallery_list' | 'blast_delta' | 'measure_detail';
+      /** 分区大小 */
+      basis: string;
+      overflow?: boolean;
+    }[];
   };
-  preset?: ModuleDataPreset[];
   board?: ModuleDataBoard[];
-  chart?: ModuleDataChart[];
   list?: ModuleDataList[];
-  table?: ModuleDataTable[];
   gallery?: ModuleDataGallery[];
-  complex_list?: ModuleDataComplexList[];
   gallery_list?: ModuleDataGalleryList[];
+  chart?: ModuleDataChart[];
+  table?: ModuleDataTable[];
+  preset?: ModuleDataPreset[];
+  complex_list?: ModuleDataComplexList[];
   /** 如果目前没有数据可以对接，可使用模拟数据先行展示 */
   mock?: any;
   /** 如果模块需要跳转，可以在这里配置，不支持 formatter 格式 */
@@ -88,88 +106,86 @@ export interface ShowStyle {
   position: string;
 }
 
-export interface ModuleDataBoard {
+/**
+ * 读取数据所使用的配置，在首页配置中的多处频繁使用
+ */
+export interface ReadFrom {
+  /** 读取数据时的基础路径，如果配置了 header，应接着 Config.deviceType 配取值路径，反之应配置详尽路径 */
+  readFrom: string;
+  /** 数据解析格式 */
+  parser?: 'json';
+}
+
+export interface CommonItem {
+  /** 展示牌说明内容，formatter 格式 */
+  label: string;
+  /** 展示牌值内容，formatter 格式 */
+  value: string;
+  /** 翻译依据，formatter 格式 */
+  trans?: Record<string, string>;
+}
+
+export interface ModuleDataBoard extends ReadFrom {
   /** 展示牌预设的背景类型 */
   type: 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'G';
   /** 展示牌布局，决定是 label 部分在上方或是 value 在上方 */
   layout: 'val-top' | 'label-top';
-  /** 读取数据时的基础路径，如果配置了 header，应接着 Config.deviceType 配取值路径，反之应配置详尽路径 */
-  readFrom: string;
   /** 核心配置，每个展示牌对应一项 */
-  items: {
-    /** 展示牌说明内容，formatter 格式 */
-    label: string;
-    /** 展示牌值内容，formatter 格式 */
-    value: string;
-  }[];
+  items: CommonItem[];
 }
 
-export interface ModuleDataList {
+export interface ModuleDataList extends ReadFrom {
   /** 列表预设的背景类型 */
   type: 'timeline' | 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'G';
-  /** 读取数据时的基础路径，如果配置了 header，应接着 Config.deviceType 配取值路径，反之应配置详尽路径 */
-  readFrom: string;
+  /** 是否需要根据数据来决定所展示的项目数量，需要确保 items 至少有一项，且 readFrom 指向数组 */
+  mapFromData?: boolean;
   /** 核心配置，每个列表项对应一项 */
-  items: {
-    /** 列表项说明内容，formatter 格式 */
-    label: string;
-    /** 列表项值内容，formatter 格式 */
-    value: string;
-    /** 列表项指定颜色，根据类型不同会有各自的样式 */
-    color: 'red' | 'orange' | 'yellow' | 'green' | 'blue' | 'white';
-    /** 针对列表项说明的额外信息，部分类型的列表项会使用 */
-    info: string;
-  }[];
+  items: Array<
+    {
+      /** 列表项指定颜色，根据类型不同会有各自的样式 */
+      color?: 'red' | 'orange' | 'yellow' | 'green' | 'blue' | 'white';
+      /** 针对列表项说明的额外信息，部分类型的列表项会使用 */
+      info?: string;
+    } & CommonItem
+  >;
 }
 
-export interface ModuleDataGallery {
+export interface ModuleDataGallery extends ReadFrom {
   /** 画廊预设的背景类型 */
   type: 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'G' | 'H';
-  /** 读取数据时的基础路径，如果配置了 header，应接着 Config.deviceType 配取值路径，反之应配置详尽路径 */
-  readFrom: string;
   /** 核心配置，每个画廊项对应一项 */
-  items: {
-    /** 画廊项说明内容，formatter 格式 */
-    label: string;
-    /** 画廊项值内容，formatter 格式 */
-    value: string;
-    /** 画廊项指定颜色，根据类型不同会有各自的样式 */
-    color: 'red' | 'orange' | 'yellow' | 'green' | 'blue' | 'white';
-  }[];
+  items: Array<
+    {
+      /** 画廊项指定颜色，根据类型不同会有各自的样式 */
+      color?: 'red' | 'orange' | 'yellow' | 'green' | 'blue' | 'white';
+    } & CommonItem
+  >;
 }
 
-export interface ModuleDataGalleryList {
+export interface ModuleDataGalleryList extends ReadFrom {
   /** 复杂列表预设的背景类型 */
   type: 'A' | 'B';
-  /** 读取数据时的基础路径，如果配置了 header，应接着 Config.deviceType 配取值路径，反之应配置详尽路径 */
-  readFrom: string;
   /** 核心配置，每个复杂列表的列表项对应一项 */
-  items: {
-    /** 列表项说明内容，formatter 格式 */
-    label: string;
-    /** 列表项值内容，formatter 格式 */
-    value: string;
-    /** 列表项指定颜色，根据类型不同会有各自的样式 */
-    color: 'red' | 'orange' | 'yellow' | 'green' | 'blue' | 'white';
-    /** 针对列表项说明的额外信息，部分类型的列表项会使用 */
-    info: string;
-  }[];
+  items: Array<
+    {
+      /** 列表项指定颜色，根据类型不同会有各自的样式 */
+      color?: 'red' | 'orange' | 'yellow' | 'green' | 'blue' | 'white';
+      /** 针对列表项说明的额外信息，部分类型的列表项会使用 */
+      info?: string;
+    } & CommonItem
+  >;
   /** 核心配置，每个复杂列表的画廊项对应一项 */
-  galleryItems: {
-    /** 画廊项说明内容，formatter 格式 */
-    label: string;
-    /** 画廊项值内容，formatter 格式 */
-    value: string;
-    /** 画廊项指定颜色，根据类型不同会有各自的样式 */
-    color: 'red' | 'orange' | 'yellow' | 'green' | 'blue' | 'white';
-  }[];
+  galleryItems: Array<
+    {
+      /** 列表项指定颜色，根据类型不同会有各自的样式 */
+      color?: 'red' | 'orange' | 'yellow' | 'green' | 'blue' | 'white';
+    } & CommonItem
+  >;
 }
 
-export interface ModuleDataChart {
+export interface ModuleDataChart extends ReadFrom {
   /** 图表类型，一个类型对应一种图表预设 */
   type: 'pie' | 'bar' | 'line' | 'line_area' | 'line_bar' | 'line_smooth' | 'line_smooth_complex' | 'bar_stack';
-  /** 读取数据时的基础路径，如果配置了 header，应接着 Config.deviceType 配取值路径，反之应配置详尽路径。应该指到数组上 */
-  readFrom: string;
   /** 排序依据，该项应配置将配合 readFrom 使用 */
   sortBy?: string;
   /** 排序规则，desc降序，asc升序 */
@@ -209,11 +225,9 @@ export interface ModuleDataChart {
   };
 }
 
-export interface ModuleDataTable {
+export interface ModuleDataTable extends ReadFrom {
   /** 表格的预设样式 */
   type: 'A' | 'B' | 'C';
-  /** 读取数据时的基础路径，如果配置了 header，应接着 Config.deviceType 配取值路径，反之应配置详尽路径 */
-  readFrom: string;
   /** 核心配置，每个表格列对应一项 */
   columns: {
     /** 数据说明，注意该项不支持 formatter 格式 */
@@ -223,33 +237,27 @@ export interface ModuleDataTable {
   }[];
 }
 
-export interface ModuleDataPreset {
-  /** 读取数据时的基础路径，如果配置了 header，应接着 Config.deviceType 配取值路径，反之应配置详尽路径 */
-  readFrom: string;
+export interface ModuleDataPreset extends ReadFrom {
   /** 表格的预设样式，由各个预设单独使用，没有固定类型 */
   [key: string]: any;
 }
 
-export interface ModuleDataComplexList {
+export interface ModuleDataComplexList extends ReadFrom {
   /** 列表预设的背景类型 */
   type: 'A' | 'B' | 'C' | 'D';
-  /** 读取数据时的基础路径，如果配置了 header，应接着 Config.deviceType 配取值路径，反之应配置详尽路径 */
-  readFrom: string;
   /** 是否需要根据数据来决定所展示的项目数量，需要确保 items 至少有一项，且 readFrom 指向数组 */
-  mapFromData: boolean;
+  mapFromData?: boolean;
   /** 核心配置，每个列表项对应一项 */
   items: {
     /** 列表项标题，formatter 格式 */
     title: string;
-    contents: {
-      /** 列表项说明内容，formatter 格式 */
-      label: string;
-      /** 列表项值内容，formatter 格式 */
-      value: string;
-      /** 列表项指定颜色，根据类型不同会有各自的样式 */
-      color: 'red' | 'orange' | 'yellow' | 'green' | 'blue' | 'white';
-      /** 针对列表项说明的额外信息，部分类型的列表项会使用 */
-      info: string;
-    }[];
+    contents: Array<
+      {
+        /** 列表项指定颜色，根据类型不同会有各自的样式 */
+        color?: 'red' | 'orange' | 'yellow' | 'green' | 'blue' | 'white';
+        /** 针对列表项说明的额外信息，部分类型的列表项会使用 */
+        info?: string;
+      } & CommonItem
+    >;
   }[];
 }

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

@@ -5,7 +5,7 @@
 
       <div class="common-navR">
         <!-- 下拉框 -->
-        <div class="common-navR-select" v-if="header.show && header.showSelector">
+        <div class="common-navR-select" v-if="header.show && header.selector.show">
           <a-select
             style="width: 140px"
             size="small"
@@ -16,7 +16,7 @@
             @change="selectHandler"
           />
         </div>
-        <div v-if="header.show && header.showSlot">
+        <div v-if="header.show && header.slot.show">
           {{ getFormattedText(selectedDevice, header.slot.value) }}
         </div>
         <!-- 日期组件 -->
@@ -49,31 +49,35 @@
 
 <script setup lang="ts">
   import Content from './content.vue';
-  import { defineProps, defineEmits, computed, onMounted, onUnmounted } from 'vue';
-  import { ModuleData, ShowStyle } from '../../../deviceManager/configurationTable/types';
-  import { useInitDevicesBD } from '../hooks/useInit';
-  import { getFormattedText } from '../../../deviceManager/configurationTable/adapters';
+  import { defineProps, defineEmits, computed, watch } from 'vue';
+  import { useInitModule } from '../hooks/useInit';
+  import { getFormattedText } from '../hooks/helper';
   import { openWindow } from '/@/utils';
+  // import { ModuleProps } from '../types';
 
   const props = defineProps<{
-    moduleData: ModuleData;
-    showStyle: ShowStyle;
-    moduleName: string;
+    /** 配置的详细模块信息 */
+    moduleData: any;
+    /** 配置的详细样式信息 */
+    showStyle: any;
+    /** 该模块配置中的设备标识符 */
     deviceType: string;
+    /** api返回的数据 */
+    data: any;
+    moduleName: string;
     visible: boolean;
   }>();
   const emit = defineEmits(['close', 'select']);
 
   const { header } = props.moduleData;
 
-  const { selectedDeviceID, selectedDevice, options, fetchDevices } = useInitDevicesBD(props.deviceType, props.moduleData);
+  const { selectedDeviceID, selectedDevice, options, init } = useInitModule(props.deviceType, props.moduleData);
 
   const style = computed(() => {
     const size = props.showStyle.size;
     const position = props.showStyle.position;
     return size + position;
   });
-  let interval: any = null;
 
   // 根据配置里的定位判断应该使用哪个module组件
   const daneClass = computed(() => {
@@ -108,16 +112,17 @@
     openWindow(to);
   }
 
-  onMounted(() => {
-    fetchDevices({ init: true });
-    interval = setInterval(() => {
-      fetchDevices();
-    }, 60000);
-  });
-
-  onUnmounted(() => {
-    clearInterval(interval);
-  });
+  watch(
+    () => props.data,
+    (d) => {
+      console.log('debug data changed');
+      init(d);
+      selectedDeviceID.value = options.value[0]?.value;
+    },
+    {
+      immediate: true,
+    }
+  );
 </script>
 
 <style scoped lang="less">

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

@@ -13,7 +13,7 @@
 
       <div class="common-navR">
         <!-- 下拉框 -->
-        <div class="common-navR-select" v-if="index === 0 && headerA.show && headerA.showSelector">
+        <div class="common-navR-select" v-if="index === 0 && headerA.show && headerA.selector.show">
           <a-select
             style="width: 140px"
             size="small"
@@ -24,7 +24,7 @@
             @change="selectHandlerA"
           />
         </div>
-        <div class="common-navR-select" v-if="index === 1 && headerB.show && headerB.showSelector">
+        <div class="common-navR-select" v-if="index === 1 && headerB.show && headerB.selector.show">
           <a-select
             style="width: 140px"
             size="small"
@@ -66,9 +66,9 @@
 
 <script setup lang="ts">
   import Content from './content.vue';
-  import { defineProps, defineEmits, computed, onMounted, onUnmounted, ref } from 'vue';
+  import { defineProps, defineEmits, computed, ref, watch } from 'vue';
   import { ModuleData, ShowStyle } from '../../../deviceManager/configurationTable/types';
-  import { useInitDevicesBD } from '../hooks/useInit';
+  import { useInitModule } from '../hooks/useInit';
 
   const props = defineProps<{
     moduleDataA: ModuleData;
@@ -79,6 +79,7 @@
     deviceTypeB: string;
     showStyle: ShowStyle;
     visible: boolean;
+    data: any;
   }>();
   const emit = defineEmits(['close', 'select']);
 
@@ -91,21 +92,20 @@
     selectedDeviceID: selectedDeviceIDA,
     selectedDevice: selectedDeviceA,
     options: optionsA,
-    fetchDevices: fetchDevicesA,
-  } = useInitDevicesBD(props.deviceTypeA, props.moduleDataA);
+    init: initA,
+  } = useInitModule(props.deviceTypeA, props.moduleDataA);
   const {
     selectedDeviceID: selectedDeviceIDB,
     selectedDevice: selectedDeviceB,
     options: optionsB,
-    fetchDevices: fetchDevicesB,
-  } = useInitDevicesBD(props.deviceTypeB, props.moduleDataB);
+    init: initB,
+  } = useInitModule(props.deviceTypeB, props.moduleDataB);
 
   const style = computed(() => {
     const size = props.showStyle.size;
     const position = props.showStyle.position;
     return size + position;
   });
-  let interval: any = null;
 
   // 根据配置里的定位判断应该使用哪个module组件
   const daneClass = computed(() => {
@@ -138,18 +138,18 @@
     emit('select', selectedDeviceB);
   }
 
-  onMounted(() => {
-    fetchDevicesA({ init: true });
-    fetchDevicesB({ init: true });
-    interval = setInterval(() => {
-      fetchDevicesA();
-      fetchDevicesB();
-    }, 60000);
-  });
-
-  onUnmounted(() => {
-    clearInterval(interval);
-  });
+  watch(
+    () => props.data,
+    (d) => {
+      initA(d);
+      initB(d);
+      selectedDeviceIDA.value = optionsA.value[0]?.value;
+      selectedDeviceIDB.value = optionsB.value[0]?.value;
+    },
+    {
+      immediate: true,
+    }
+  );
 </script>
 
 <style scoped lang="less">

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

@@ -6,7 +6,7 @@
     </template>
     <template #container>
       <slot>
-        <Header :deviceType="deviceType" :moduleData="moduleData" @select="selectedData = $event" />
+        <Header :deviceType="deviceType" :moduleData="moduleData" :data="data" @select="selectedData = $event" />
         <Content :style="{ height: header.show ? 'calc(100% - 30px)' : '100%' }" :moduleData="moduleData" :data="selectedData" />
       </slot>
     </template>
@@ -18,15 +18,20 @@
   // import ModuleLeft from './original/moduleLeft.vue';
   // import ModuleBottom from './original/moduleBottom.vue';
   import { computed, ref } from 'vue';
-  import { ShowStyle, ModuleData } from '../../../deviceManager/configurationTable/types';
   import ventBox1 from '/@/components/vent/ventBox1.vue';
   import { openWindow } from '/@/utils';
+  // import { ModuleProps } from '../types';
 
   const props = defineProps<{
-    moduleData: ModuleData;
-    showStyle: ShowStyle;
-    moduleName: string;
+    /** 配置的详细模块信息 */
+    moduleData: any;
+    /** 配置的详细样式信息 */
+    showStyle: any;
+    /** 该模块配置中的设备标识符 */
     deviceType: string;
+    /** api返回的数据 */
+    data: any;
+    moduleName: string;
     visible: boolean;
   }>();
   defineEmits(['close', 'click']);

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

@@ -10,7 +10,7 @@
     @click="redirectTo"
   >
     <slot>
-      <Header :deviceType="deviceType" :moduleData="moduleData" @select="selectedData = $event" />
+      <Header :deviceType="deviceType" :moduleData="moduleData" :data="data" @select="selectedData = $event" />
       <Content :style="{ height: header.show ? 'calc(100% - 30px)' : '100%' }" :moduleData="moduleData" :data="selectedData" />
     </slot>
   </component>
@@ -22,14 +22,19 @@
   import ModuleRight from './enhanced/moduleRight.vue';
   import ModuleBottom from './enhanced/moduleBottom.vue';
   import { computed, ref } from 'vue';
-  import { ShowStyle, ModuleData } from '../../../deviceManager/configurationTable/types';
   import { openWindow } from '/@/utils';
+  // import { ModuleProps } from '../types';
 
   const props = defineProps<{
-    moduleData: ModuleData;
-    showStyle: ShowStyle;
-    moduleName: string;
+    /** 配置的详细模块信息 */
+    moduleData: any;
+    /** 配置的详细样式信息 */
+    showStyle: any;
+    /** 该模块配置中的设备标识符 */
     deviceType: string;
+    /** api返回的数据 */
+    data: any;
+    moduleName: string;
     visible: boolean;
   }>();
   defineEmits(['close', 'click']);

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

@@ -10,7 +10,7 @@
     @click="redirectTo"
   >
     <slot>
-      <Header :deviceType="deviceType" :moduleData="moduleData" @select="selectedData = $event" />
+      <Header :deviceType="deviceType" :moduleData="moduleData" :data="data" @select="selectedData = $event" />
       <Content :style="{ height: header.show ? 'calc(100% - 30px)' : '100%' }" :moduleData="moduleData" :data="selectedData" />
     </slot>
   </component>
@@ -21,14 +21,19 @@
   import ModuleLeft from './original/moduleLeft.vue';
   import ModuleBottom from './original/moduleBottom.vue';
   import { computed, ref } from 'vue';
-  import { ShowStyle, ModuleData } from '../../../deviceManager/configurationTable/types';
   import { openWindow } from '/@/utils';
+  // import { ModuleProps } from '../types';
 
   const props = defineProps<{
-    moduleData: ModuleData;
-    showStyle: ShowStyle;
-    moduleName: string;
+    /** 配置的详细模块信息 */
+    moduleData: any;
+    /** 配置的详细样式信息 */
+    showStyle: any;
+    /** 该模块配置中的设备标识符 */
     deviceType: string;
+    /** api返回的数据 */
+    data: any;
+    moduleName: string;
     visible: boolean;
   }>();
   defineEmits(['close', 'click']);

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

@@ -17,14 +17,10 @@
       <source :src="background.link" />
       Not Supportted Link Or Browser
     </video>
-    <div class="flex w-full h-full" :style="{ flexDirection: slice.direction }">
-      <div
-        v-for="(config, i) in layoutConfig"
-        :key="config.key"
-        :style="{ flexBasis: slice.basis[i], overflow: slice.ignoreOverflow ? 'none' : 'auto' }"
-      >
+    <div class="flex w-full h-full" :style="{ flexDirection: layout.direction }">
+      <div v-for="config in layoutConfig" :key="config.name" :style="{ flexBasis: config.basis, overflow: config.overflow ? 'auto' : 'none' }">
         <!-- 告示板部分 -->
-        <template v-if="config.key === 'board'">
+        <template v-if="config.name === 'board'">
           <div class="content__module flex flex-justify-around flex-items-center flex-wrap pt-10px pb-10px">
             <MiniBoard
               v-for="item in config.items"
@@ -37,11 +33,11 @@
           </div>
         </template>
         <!-- 图表部分，这部分通常需要填充，有告示板、Header等内容需要填充父级 -->
-        <template v-if="config.key === 'chart'">
+        <template v-if="config.name === 'chart'">
           <CustomChart class="content__module" :chart-config="config.config" :chart-data="config.data" />
         </template>
         <!-- 通常列表部分 -->
-        <template v-if="config.key === 'list'">
+        <template v-if="config.name === 'list'">
           <template v-if="config.type === 'timeline'">
             <TimelineList class="content__module" :list-config="config.items" />
           </template>
@@ -50,25 +46,25 @@
           </template>
         </template>
         <!-- 画廊部分 -->
-        <template v-if="config.key === 'gallery'">
+        <template v-if="config.name === 'gallery'">
           <CustomGallery class="content__module" :type="config.type" :gallery-config="config.items" />
         </template>
         <!-- 复杂列表部分 -->
-        <template v-if="config.key === 'gallery_list'">
+        <template v-if="config.name === 'gallery_list'">
           <GalleryList class="content__module" :type="config.type" :list-config="config.items" :gallery-config="config.galleryItems" />
         </template>
         <!-- 复杂列表部分 -->
-        <template v-if="config.key === 'complex_list'">
+        <template v-if="config.name === 'complex_list'">
           <ComplexList class="content__module" :type="config.type" :list-config="config.items" />
         </template>
         <!-- 表格部分，这部分通常是占一整个模块的 -->
-        <template v-if="config.key === 'table'">
+        <template v-if="config.name === 'table'">
           <CustomTable class="content__module text-center overflow-auto" :type="config.type" :columns="config.columns" :data="config.data" />
         </template>
-        <template v-if="config.key === 'blast_delta'">
+        <template v-if="config.name === 'blast_delta'">
           <BlastDelta class="content__module" :pos-monitor="config.data" :canvasSize="{ width: 250, height: 200 }" />
         </template>
-        <template v-if="config.key === 'measure_detail'">
+        <template v-if="config.name === 'measure_detail'">
           <MeasureDetail
             class="content__module"
             :show-title="false"
@@ -90,6 +86,7 @@
 <script lang="ts" setup>
   import { computed } from 'vue';
   import {
+    CommonItem,
     Config,
     // ModuleDataBoard,
     // ModuleDataChart,
@@ -105,8 +102,8 @@
   import GalleryList from './detail/GalleryList.vue';
   import CustomTable from './detail/CustomTable.vue';
   import CustomChart from './detail/CustomChart.vue';
-  import { get, clone } from 'lodash-es';
-  import { getFormattedText } from '../../../deviceManager/configurationTable/adapters';
+  import { clone } from 'lodash-es';
+  import { getData, getFormattedText } from '../hooks/helper';
   import BlastDelta from '../../../monitorManager/deviceMonitor/components/device/modal/blastDelta.vue';
   import MeasureDetail from './preset/MeasureDetail.vue';
   // import FIreWarn from './preset/FIreWarn.vue';
@@ -117,15 +114,32 @@
     moduleData: Config['moduleData'];
   }>();
 
-  const { background, layout, slice } = props.moduleData;
+  const { background, layout } = props.moduleData;
 
-  // 额外的 header 相关的变量
+  // 获取当原始配置带 items 项时的最终 items 配置
+  function getItems(raw, items: CommonItem[]) {
+    return items.map((i) => {
+      return {
+        ...i,
+        label: getFormattedText(raw, i.label, i.trans),
+        value: getFormattedText(raw, i.value, i.trans),
+      };
+    });
+  }
 
-  function getData(raw, readFrom) {
-    if (readFrom) {
-      return get(raw, readFrom);
+  // 获取当 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 raw;
+    return getItems(raw, items);
   }
 
   /** 根据配置里的layout将配置格式化为带 key 的具体配置，例如：[{ key: 'list', value: any, ...ModuleDataList }] */
@@ -140,80 +154,66 @@
     const table = clone(props.moduleData.table) || [];
     const preset = clone(props.moduleData.preset) || [];
 
-    return layout.reduce((arr: any[], key) => {
-      switch (key) {
+    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);
+          const data = getData(refData, cfg.readFrom, cfg.parser);
 
           arr.push({
+            overflow: true,
+            ...item,
             ...cfg,
-            key,
-            items: cfg.items.map((i) => {
-              return {
-                ...i,
-                label: getFormattedText(data, i.label),
-                value: getFormattedText(data, i.value),
-              };
-            }),
+            items: getItems(data, cfg.items),
           });
           break;
         }
         case 'list': {
           const cfg = list.shift();
           if (!cfg) break;
-          const data = getData(refData, cfg.readFrom);
+          const data = getData(refData, cfg.readFrom, cfg.parser);
 
           arr.push({
+            overflow: true,
+            ...item,
             ...cfg,
-            key,
-            items: cfg.items.map((i) => {
-              return {
-                ...i,
-                label: getFormattedText(data, i.label),
-                value: getFormattedText(data, i.value),
-              };
-            }),
+            items: getListItems(data, cfg.items, cfg.mapFromData),
           });
           break;
         }
         case 'gallery': {
           const cfg = gallery.shift();
           if (!cfg) break;
-          const data = getData(refData, cfg.readFrom);
+          const data = getData(refData, cfg.readFrom, cfg.parser);
 
           arr.push({
+            overflow: true,
+            ...item,
             ...cfg,
-            key,
-            items: cfg.items.map((i) => {
-              return {
-                ...i,
-                label: getFormattedText(data, i.label),
-                value: getFormattedText(data, i.value),
-              };
-            }),
+            items: getItems(data, cfg.items),
           });
           break;
         }
         case 'complex_list': {
           const cfg = complex_list.shift();
           if (!cfg) break;
-          const data = getData(refData, cfg.readFrom);
+          const data = getData(refData, cfg.readFrom, cfg.parser);
 
           if (cfg.mapFromData) {
-            const item = cfg.items[0];
+            const firstListItem = cfg.items[0];
             arr.push({
+              overflow: true,
+              ...item,
               ...cfg,
-              key,
               items: (data || []).map((d) => {
                 return {
-                  title: getFormattedText(d, item.title),
-                  contents: item.contents.map((e) => {
+                  title: getFormattedText(d, firstListItem.title),
+                  contents: firstListItem.contents.map((e) => {
                     return {
                       ...e,
-                      label: getFormattedText(d, e.label),
-                      value: getFormattedText(d, e.value),
+                      label: getFormattedText(d, e.label, e.trans),
+                      value: getFormattedText(d, e.value, e.trans),
                     };
                   }),
                 };
@@ -221,16 +221,17 @@
             });
           } else {
             arr.push({
+              overflow: true,
+              ...item,
               ...cfg,
-              key,
               items: cfg.items.map((i) => {
                 return {
                   title: getFormattedText(data, i.title),
                   contents: i.contents.map((e) => {
                     return {
                       ...e,
-                      label: getFormattedText(data, e.label),
-                      value: getFormattedText(data, e.value),
+                      label: getFormattedText(data, e.label, e.trans),
+                      value: getFormattedText(data, e.value, e.trans),
                     };
                   }),
                 };
@@ -242,35 +243,24 @@
         case 'gallery_list': {
           const cfg = gallery_list.shift();
           if (!cfg) break;
-          const data = getData(refData, cfg.readFrom);
+          const data = getData(refData, cfg.readFrom, cfg.parser);
 
           arr.push({
+            overflow: true,
+            ...item,
             ...cfg,
-            key,
-            items: cfg.items.map((i) => {
-              return {
-                ...i,
-                label: getFormattedText(data, i.label),
-                value: getFormattedText(data, i.value),
-              };
-            }),
-            galleryItems: cfg.galleryItems.map((i) => {
-              return {
-                ...i,
-                label: getFormattedText(data, i.label),
-                value: getFormattedText(data, i.value),
-              };
-            }),
+            items: getItems(data, cfg.items),
+            galleryItems: getItems(data, cfg.galleryItems),
           });
           break;
         }
         case 'chart': {
           const cfg = chart.shift();
           if (!cfg) break;
-          const data = getData(refData, cfg.readFrom);
+          const data = getData(refData, cfg.readFrom, cfg.parser);
 
           arr.push({
-            key,
+            ...item,
             config: cfg,
             data,
           });
@@ -279,11 +269,11 @@
         case 'table': {
           const cfg = table.shift();
           if (!cfg) break;
-          const data = getData(refData, cfg.readFrom);
+          const data = getData(refData, cfg.readFrom, cfg.parser);
 
           arr.push({
             ...cfg,
-            key,
+            ...item,
             columns: cfg.columns,
             data,
           });
@@ -292,10 +282,10 @@
         default: {
           const cfg = preset.shift();
           if (!cfg) break;
-          const data = getData(refData, cfg.readFrom);
+          const data = getData(refData, cfg.readFrom, cfg.parser);
 
           arr.push({
-            key,
+            ...item,
             data,
             config: cfg,
           });

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

@@ -5,14 +5,14 @@
   import { ref, Ref, watch } from 'vue';
   import { useECharts } from '/@/hooks/web/useECharts';
   import { get } from 'lodash-es';
-  import { Config } from '/@/views/vent/deviceManager/configurationTable/types';
+  import { ModuleDataChart } from '/@/views/vent/deviceManager/configurationTable/types';
   import { EChartsOption, graphic } from 'echarts';
-  import { getFormattedText } from '../../../../deviceManager/configurationTable/adapters';
+  import { getData, getFormattedText } from '../../hooks/helper';
 
   const props = withDefaults(
     defineProps<{
       chartData: Record<string, any>[] | Record<string, any>;
-      chartConfig: Config['moduleData']['chart']['0'];
+      chartConfig: ModuleDataChart;
       height?: string;
       width?: string;
     }>(),
@@ -25,12 +25,6 @@
 
   const chartRef = ref<HTMLDivElement | null>(null);
   const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
-  function getData(raw, readFrom) {
-    if (readFrom) {
-      return get(raw, readFrom);
-    }
-    return raw;
-  }
 
   // 核心方法，生成适用与 echart 的选项，这个方法需要适配 chart 类型的每种子类型
   const genChartOption = () => {

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

@@ -4,7 +4,7 @@
   <div v-if="headerConfig.show" class="w-100% flex costume-header">
     <!-- 选择下拉框，自动填充剩余空间，这种实现是因为 Select 不支持 suffix -->
     <Dropdown
-      v-if="headerConfig.showSelector"
+      v-if="headerConfig.selector.show"
       class="flex-grow-1 costume-header_left"
       :trigger="['click']"
       :bordered="false"
@@ -26,7 +26,7 @@
         </Menu>
       </template>
     </Dropdown>
-    <template v-if="headerConfig.showSlot">
+    <template v-if="headerConfig.slot.show">
       <div class="flex-basis-50% flex flex-items-center flex-grow-1 costume-header_right">
         <SwapOutlined class="w-30px" />
         <div class="flex-grow-1">
@@ -37,44 +37,43 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { onMounted, onUnmounted, ref } from 'vue';
+  import { ref, watch } from 'vue';
   import { Config } from '../../../deviceManager/configurationTable/types';
-  import { useInitDevices } from '../hooks/useInit';
+  import { useInitModule } from '../hooks/useInit';
   import { MenuItem, Menu, Dropdown } from 'ant-design-vue';
   import { SwapOutlined, CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons-vue';
 
   const props = defineProps<{
     moduleData: Config['moduleData'];
     deviceType: Config['deviceType'];
+    data: any;
   }>();
 
   const emit = defineEmits(['select']);
 
   const visible = ref(false);
   const headerConfig = props.moduleData.header;
-  const { selectedDeviceID, selectedDevice, selectedDeviceSlot, selectedDeviceLabel, options, fetchDevices } = useInitDevices(
+  const { selectedDeviceID, selectedDevice, selectedDeviceSlot, selectedDeviceLabel, options, init } = useInitModule(
     props.deviceType,
     props.moduleData
   );
-  let interval: any = null;
 
   function selectHandler({ key }) {
     selectedDeviceID.value = key;
     emit('select', selectedDevice.value);
   }
 
-  onMounted(() => {
-    fetchDevices({ init: true }).then(() => {
-      selectHandler({ key: selectedDeviceID.value });
-    });
-    interval = setInterval(() => {
-      fetchDevices();
-    }, 60000);
-  });
-
-  onUnmounted(() => {
-    clearInterval(interval);
-  });
+  watch(
+    () => props.data,
+    (d) => {
+      console.log('debug changed');
+      init(d);
+      selectHandler({ key: options.value[0]?.value });
+    },
+    {
+      immediate: true,
+    }
+  );
 </script>
 <style scoped>
   .costume-header {

src/views/vent/home/configurable/components/preset/FIreControl.vue

@@ -3,7 +3,7 @@
   <div class="w-100% h-100% flex justify-around">
     <div v-for="(item, i) in listAConfig" :key="`hccfc${i}`" class="board">
       <div class="text-center mb-20px">{{ item.title }}</div>
-      <div v-for="stuff in item.list" :key="stuff.prop" class="board-item flex justify-between">
+      <div v-for="stuff in item.list" :key="stuff.formatter" class="board-item flex justify-between">
         <div>{{ stuff.label }}</div>
         <div :class="`board-item__value_${stuff.color}`">{{ stuff.value }}</div>
       </div>
@@ -19,7 +19,7 @@
   //   import MiniBoard from './MiniBoard.vue';
   //   import TimelineList from './TimelineList.vue';
   //   import CustomList from './CustomList.vue';
-  import { getFormattedText } from '../../../../deviceManager/configurationTable/adapters';
+  import { getFormattedText } from '../../hooks/helper';
   //   import CustomChart from './CustomChart.vue';
   //   import { get } from 'lodash-es';
   //   import CommonTable from '../../billboard/components/CommonTable.vue';
@@ -31,20 +31,19 @@
       title: '防火注浆',
       list: [
         {
-          prop: 'a',
+          formatter: '${a}',
           label: '注浆流量',
           color: 'white',
         },
         {
-          prop: 'b',
+          formatter: '${b}',
           label: '注浆压力',
           color: 'blue',
         },
         {
-          prop: 'c',
+          formatter: '${c}',
           label: '启停状态',
           color: 'blue',
-          formatter: '${}',
         },
       ],
       //   color: 'yellow',
@@ -53,20 +52,19 @@
       title: '防火注氮',
       list: [
         {
-          prop: 'a',
+          formatter: '${a}',
           label: '注浆流量',
           color: 'white',
         },
         {
-          prop: 'b',
+          formatter: '${b}',
           label: '注浆压力',
           color: 'blue',
         },
         {
-          prop: 'c',
+          formatter: '${c}',
           label: '启停状态',
           color: 'blue',
-          formatter: '${}',
         },
       ],
       //   color: 'yellow',
@@ -86,7 +84,7 @@
         list: b.list.map((e) => {
           return {
             ...e,
-            value: getFormattedText(data, e.prop, e.formatter),
+            value: getFormattedText(data, e.formatter),
           };
         }),
       };

src/views/vent/home/configurable/components/preset/FIreWarn.vue

@@ -21,7 +21,7 @@
   //   import MiniBoard from './MiniBoard.vue';
   //   import TimelineList from './TimelineList.vue';
   import CustomList from '../detail/CustomList.vue';
-  import { getFormattedText } from '../../../../deviceManager/configurationTable/adapters';
+  import { getFormattedText } from '../../hooks/helper';
   //   import CustomChart from './CustomChart.vue';
   //   import { get } from 'lodash-es';
   //   import CommonTable from '../../billboard/components/CommonTable.vue';

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

@@ -132,18 +132,19 @@ export const BDdustMock = {
 };
 export const testConfigBDDust: Config[] = [
   {
-    deviceType: '',
+    deviceType: 'dustManageInfo',
     moduleName: '工作面风险监测',
     pageType: '',
     moduleData: {
       header: {
         show: false,
-        showSelector: false,
-        showSlot: false,
+        readFrom: '',
         selector: {
+          show: false,
           value: '',
         },
         slot: {
+          show: false,
           value: '',
         },
       },
@@ -152,11 +153,19 @@ export const testConfigBDDust: Config[] = [
         type: 'video',
         link: '',
       },
-      slice: {
+      layout: {
         direction: 'column',
-        basis: ['20%', '80%'],
+        items: [
+          {
+            name: 'gallery',
+            basis: '20%',
+          },
+          {
+            name: 'complex_list',
+            basis: '80%',
+          },
+        ],
       },
-      layout: ['gallery', 'complex_list'],
       board: [],
       chart: [],
       gallery: [
@@ -237,12 +246,13 @@ export const testConfigBDDust: Config[] = [
     moduleData: {
       header: {
         show: true,
-        showSelector: true,
-        showSlot: false,
+        readFrom: '',
         selector: {
+          show: true,
           value: '${strinstallpos}',
         },
         slot: {
+          show: false,
           value: '',
         },
       },
@@ -251,11 +261,15 @@ export const testConfigBDDust: Config[] = [
         type: 'video',
         link: '',
       },
-      slice: {
+      layout: {
         direction: 'row',
-        basis: ['100%'],
+        items: [
+          {
+            name: 'chart',
+            basis: '100%',
+          },
+        ],
       },
-      layout: ['chart'],
       board: [],
       chart: [
         {
@@ -280,6 +294,7 @@ export const testConfigBDDust: Config[] = [
       list: [],
       complex_list: [],
       preset: [],
+      // mock: BDdustMock,
     },
     showStyle: {
       size: 'width:1000px;height:280px;',
@@ -288,18 +303,19 @@ export const testConfigBDDust: Config[] = [
     },
   },
   {
-    deviceType: '',
+    deviceType: 'atomObj',
     moduleName: '智能喷雾降尘装置',
     pageType: '',
     moduleData: {
       header: {
         show: false,
-        showSelector: false,
-        showSlot: false,
+        readFrom: '',
         selector: {
+          show: false,
           value: '',
         },
         slot: {
+          show: false,
           value: '',
         },
       },
@@ -308,11 +324,15 @@ export const testConfigBDDust: Config[] = [
         type: 'video',
         link: '',
       },
-      slice: {
+      layout: {
         direction: 'row',
-        basis: ['100%'],
+        items: [
+          {
+            name: 'gallery',
+            basis: '100%',
+          },
+        ],
       },
-      layout: ['gallery'],
       board: [],
       chart: [],
       gallery: [
@@ -358,18 +378,19 @@ export const testConfigBDDust: Config[] = [
     },
   },
   {
-    deviceType: '',
+    deviceType: 'devGbsb',
     moduleName: '隔爆设施管理台账',
     pageType: '',
     moduleData: {
       header: {
         show: false,
-        showSelector: false,
-        showSlot: false,
+        readFrom: '',
         selector: {
+          show: false,
           value: '',
         },
         slot: {
+          show: false,
           value: '',
         },
       },
@@ -378,11 +399,15 @@ export const testConfigBDDust: Config[] = [
         type: 'video',
         link: '',
       },
-      slice: {
+      layout: {
         direction: 'row',
-        basis: ['100%'],
+        items: [
+          {
+            name: 'table',
+            basis: '100%',
+          },
+        ],
       },
-      layout: ['table'],
       board: [],
       chart: [],
       gallery: [],
@@ -425,12 +450,13 @@ export const testConfigBDDust: Config[] = [
     moduleData: {
       header: {
         show: false,
-        showSelector: false,
-        showSlot: false,
+        readFrom: '',
         selector: {
+          show: false,
           value: '${name}',
         },
         slot: {
+          show: false,
           value: '',
         },
       },
@@ -439,11 +465,15 @@ export const testConfigBDDust: Config[] = [
         type: 'video',
         link: '',
       },
-      slice: {
+      layout: {
         direction: 'row',
-        basis: ['100%'],
+        items: [
+          {
+            name: 'board',
+            basis: '100%',
+          },
+        ],
       },
-      layout: ['board'],
       board: [
         {
           type: 'E',
@@ -5445,18 +5475,19 @@ export const BDfireMock = {
 };
 export const testConfigBDFire: Config[] = [
   {
-    deviceType: '',
+    deviceType: 'fireManageInfo',
     moduleName: '重点区域风险监测',
     pageType: '',
     moduleData: {
       header: {
         show: false,
-        showSelector: false,
-        showSlot: false,
+        readFrom: '',
         selector: {
+          show: false,
           value: '',
         },
         slot: {
+          show: false,
           value: '',
         },
       },
@@ -5465,11 +5496,19 @@ export const testConfigBDFire: Config[] = [
         type: 'video',
         link: '',
       },
-      slice: {
+      layout: {
         direction: 'column',
-        basis: ['50%', '50%'],
+        items: [
+          {
+            name: 'board',
+            basis: '50%',
+          },
+          {
+            name: 'complex_list',
+            basis: '50%',
+          },
+        ],
       },
-      layout: ['board', 'complex_list'],
       board: [
         {
           type: 'A',
@@ -5534,12 +5573,13 @@ export const testConfigBDFire: Config[] = [
     moduleData: {
       header: {
         show: false,
-        showSelector: false,
-        showSlot: false,
+        readFrom: '',
         selector: {
-          value: '${systemname}',
+          show: false,
+          value: '',
         },
         slot: {
+          show: false,
           value: '',
         },
       },
@@ -5548,11 +5588,15 @@ export const testConfigBDFire: Config[] = [
         type: 'video',
         link: '',
       },
-      slice: {
-        direction: 'column',
-        basis: ['100%'],
+      layout: {
+        direction: 'row',
+        items: [
+          {
+            name: 'table',
+            basis: '100%',
+          },
+        ],
       },
-      layout: ['table'],
       board: [],
       chart: [],
       gallery: [],
@@ -5608,12 +5652,13 @@ export const testConfigBDFire: Config[] = [
     moduleData: {
       header: {
         show: true,
-        showSelector: true,
-        showSlot: false,
+        readFrom: '',
         selector: {
-          value: '${systemname}',
+          show: true,
+          value: '${strinstallpos}',
         },
         slot: {
+          show: false,
           value: '',
         },
       },
@@ -5622,12 +5667,19 @@ export const testConfigBDFire: Config[] = [
         type: 'video',
         link: '',
       },
-      slice: {
+      layout: {
         direction: 'column',
-        ignoreOverflow: true,
-        basis: ['30%', '70%'],
+        items: [
+          {
+            name: 'board',
+            basis: '30%',
+          },
+          {
+            name: 'chart',
+            basis: '70%',
+          },
+        ],
       },
-      layout: ['board', 'chart'],
       board: [
         {
           type: 'F',
@@ -5681,18 +5733,19 @@ export const testConfigBDFire: Config[] = [
     },
   },
   {
-    deviceType: 'sgGxObj.devSgjc',
+    deviceType: 'sgGxObj',
     moduleName: '工作面束管监测',
     pageType: '',
     moduleData: {
       header: {
         show: true,
-        showSelector: true,
-        showSlot: false,
+        readFrom: 'devSgjc',
         selector: {
+          show: true,
           value: '${strinstallpos}',
         },
         slot: {
+          show: false,
           value: '',
         },
       },
@@ -5701,11 +5754,19 @@ export const testConfigBDFire: Config[] = [
         type: 'video',
         link: '',
       },
-      slice: {
+      layout: {
         direction: 'row',
-        basis: ['65%', '35%'],
+        items: [
+          {
+            name: 'list',
+            basis: '65%',
+          },
+          {
+            name: 'blast_delta',
+            basis: '35%',
+          },
+        ],
       },
-      layout: ['list', 'blast_delta'],
       board: [],
       chart: [],
       gallery: [],
@@ -5784,18 +5845,19 @@ export const testConfigBDFire: Config[] = [
     },
   },
   {
-    deviceType: 'sgGxObj.devGxcw',
+    deviceType: 'sgGxObj',
     moduleName: '工作面光纤监测',
     pageType: '',
     moduleData: {
       header: {
         show: true,
-        showSelector: true,
-        showSlot: false,
+        readFrom: 'devGxcw',
         selector: {
+          show: true,
           value: '${strinstallpos}',
         },
         slot: {
+          show: false,
           value: '',
         },
       },
@@ -5804,11 +5866,15 @@ export const testConfigBDFire: Config[] = [
         type: 'video',
         link: '',
       },
-      slice: {
+      layout: {
         direction: 'row',
-        basis: ['100%'],
+        items: [
+          {
+            name: 'chart',
+            basis: '100%',
+          },
+        ],
       },
-      layout: ['chart'],
       board: [],
       chart: [
         {
@@ -5842,18 +5908,19 @@ export const testConfigBDFire: Config[] = [
     },
   },
   {
-    deviceType: 'obfObj.arrayDev',
+    deviceType: 'obfObj',
     moduleName: '密闭采空区监测区域',
     pageType: '',
     moduleData: {
       header: {
         show: true,
-        showSelector: true,
-        showSlot: false,
+        readFrom: 'arrayDev',
         selector: {
+          show: true,
           value: '${strinstallpos}',
         },
         slot: {
+          show: false,
           value: '',
         },
       },
@@ -5862,11 +5929,15 @@ export const testConfigBDFire: Config[] = [
         type: 'video',
         link: '',
       },
-      slice: {
+      layout: {
         direction: 'row',
-        basis: ['100%'],
+        items: [
+          {
+            name: 'board',
+            basis: '100%',
+          },
+        ],
       },
-      layout: ['board'],
       board: [
         {
           type: 'G',
@@ -5930,12 +6001,13 @@ export const testConfigBDFire: Config[] = [
     moduleData: {
       header: {
         show: true,
-        showSelector: true,
-        showSlot: false,
+        readFrom: '',
         selector: {
+          show: true,
           value: '${systemname}',
         },
         slot: {
+          show: false,
           value: '',
         },
       },
@@ -5944,11 +6016,15 @@ export const testConfigBDFire: Config[] = [
         type: 'video',
         link: '',
       },
-      slice: {
+      layout: {
         direction: 'row',
-        basis: ['100%'],
+        items: [
+          {
+            name: 'list',
+            basis: '100%',
+          },
+        ],
       },
-      layout: ['list'],
       board: [],
       chart: [],
       // chart: [
@@ -6022,18 +6098,19 @@ export const testConfigBDFire: Config[] = [
     },
   },
   {
-    deviceType: '',
+    deviceType: 'aqjkArray',
     moduleName: '安全监控系统',
     pageType: '',
     moduleData: {
       header: {
         show: false,
-        showSelector: false,
-        showSlot: false,
+        readFrom: '',
         selector: {
+          show: false,
           value: '',
         },
         slot: {
+          show: false,
           value: '',
         },
       },
@@ -6042,11 +6119,15 @@ export const testConfigBDFire: Config[] = [
         type: 'video',
         link: '',
       },
-      slice: {
+      layout: {
         direction: 'row',
-        basis: ['100%'],
+        items: [
+          {
+            name: 'table',
+            basis: '100%',
+          },
+        ],
       },
-      layout: ['table'],
       board: [],
       chart: [],
       gallery: [],
@@ -6089,642 +6170,642 @@ export const testConfigBDFire: Config[] = [
 ];
 
 export const testConfigBDNew: Config[] = [
-  {
-    deviceType: '',
-    moduleName: '束管监测',
-    pageType: '',
-    moduleData: {
-      header: {
-        show: true,
-        showSelector: true,
-        showSlot: false,
-        selector: {
-          value: '',
-        },
-        slot: {
-          value: '',
-        },
-      },
-      background: {
-        show: false,
-        type: 'video',
-        link: '',
-      },
-      slice: {
-        direction: 'row',
-        ignoreOverflow: true,
-        basis: ['65%', '35%'],
-      },
-      layout: ['list', 'blast_delta'],
-      board: [],
-      chart: [],
-      gallery: [],
-      gallery_list: [],
-      table: [],
-      list: [
-        {
-          type: 'G',
-          readFrom: 'obfObj',
-          items: [
-            {
-              label: 'CO',
-              value: '${maxCo}',
-              color: 'blue',
-              info: '一氧化碳',
-            },
-            {
-              label: 'CO₂',
-              value: '--',
-              color: 'blue',
-              info: '--',
-            },
-            {
-              label: 'CH₄',
-              value: '--',
-              color: 'blue',
-              info: '--',
-            },
-            {
-              label: 'C₂H₂',
-              value: '--',
-              color: 'blue',
-              info: '--',
-            },
-            {
-              label: 'C₂H₄',
-              value: '--',
-              color: 'blue',
-              info: '--',
-            },
-            {
-              label: 'O₂',
-              value: '--',
-              color: 'blue',
-              info: '--',
-            },
-            // {
-            //   label: '温度',
-            //   value: '--',
-            //   color: 'blue',
-            //   info: '--',
-            // },
-            // {
-            //   label: '风险',
-            //   value: '--',
-            //   color: 'blue',
-            //   info: '--',
-            // },
-          ],
-        },
-      ],
-      complex_list: [],
-      preset: [
-        {
-          readFrom: '',
-        },
-      ],
-      // mock: BDfireMock,
-    },
-    // showStyle: {
-    //   size: 'width:450px;height:760px;',
-    //   version: '保德',
-    //   position: 'top:160px;left:0;',
-    // },
-    showStyle: {
-      size: 'width:1000px;height:280px;',
-      version: '新版',
-      position: 'top:350px;left:460px;',
-    },
-  },
-  {
-    deviceType: '',
-    moduleName: '束管监测',
-    pageType: '',
-    moduleData: {
-      header: {
-        show: true,
-        showSelector: true,
-        showSlot: false,
-        selector: {
-          value: '',
-        },
-        slot: {
-          value: '',
-        },
-      },
-      background: {
-        show: false,
-        type: 'video',
-        link: '',
-      },
-      slice: {
-        direction: 'column',
-        basis: ['65%', '35%'],
-      },
-      layout: ['list', 'blast_delta'],
-      board: [],
-      chart: [],
-      gallery: [],
-      gallery_list: [],
-      table: [],
-      list: [
-        {
-          type: 'G',
-          readFrom: 'dsArray',
-          items: [
-            {
-              label: 'CO',
-              value: '--',
-              color: 'blue',
-              info: '--',
-            },
-            {
-              label: 'CO₂',
-              value: '--',
-              color: 'blue',
-              info: '--',
-            },
-            {
-              label: 'CH₄',
-              value: '--',
-              color: 'blue',
-              info: '--',
-            },
-            {
-              label: 'C₂H₂',
-              value: '--',
-              color: 'blue',
-              info: '--',
-            },
-            {
-              label: 'C₂H₄',
-              value: '--',
-              color: 'blue',
-              info: '--',
-            },
-            {
-              label: 'O₂',
-              value: '--',
-              color: 'blue',
-              info: '--',
-            },
-            {
-              label: '温度',
-              value: '--',
-              color: 'blue',
-              info: '--',
-            },
-            {
-              label: '风险',
-              value: '--',
-              color: 'blue',
-              info: '--',
-            },
-          ],
-        },
-      ],
-      complex_list: [],
-      preset: [
-        {
-          readFrom: '',
-        },
-      ],
-      // mock: BDfireMock,
-    },
-    showStyle: {
-      size: 'width:450px;height:760px;',
-      version: '保德',
-      position: 'top:160px;left:0;',
-    },
-  },
-  {
-    deviceType: 'btArray',
-    moduleName: '工作面束管监测',
-    pageType: '',
-    moduleData: {
-      header: {
-        show: false,
-        showSelector: false,
-        showSlot: false,
-        selector: {
-          value: '${systemname}',
-        },
-        slot: {
-          value: '',
-        },
-      },
-      background: {
-        show: false,
-        type: 'video',
-        link: '',
-      },
-      slice: {
-        direction: 'row',
-        basis: ['100%'],
-      },
-      layout: ['chart'],
-      board: [],
-      chart: [
-        {
-          type: 'bar_stack',
-          readFrom: 'chartMock',
-          legend: { show: true },
-          xAxis: [{ show: true }],
-          yAxis: [{ show: true, name: '温度（℃）', position: 'left' }],
-          series: [
-            {
-              label: '${name1}',
-              readFrom: 'data1',
-              xprop: 'pos',
-              yprop: 'val',
-            },
-            {
-              label: '${name2}',
-              readFrom: 'data2',
-              xprop: 'pos',
-              yprop: 'val',
-            },
-          ],
-        },
-      ],
-      gallery: [],
-      gallery_list: [],
-      table: [],
-      list: [],
-      complex_list: [
-        {
-          type: 'B',
-          readFrom: 'devList',
-          mapFromData: false,
-          items: [
-            {
-              title: 'CO',
-              contents: [
-                {
-                  label: '最大浓度',
-                  value: '${[0].val}ppm',
-                  color: 'blue',
-                  info: '',
-                },
-                {
-                  label: '位置',
-                  value: '${[0].strinstallpos}',
-                  color: 'blue',
-                  info: '',
-                },
-                {
-                  label: '时间',
-                  value: '${[0].time}',
-                  color: 'blue',
-                  info: '',
-                },
-              ],
-            },
-            {
-              title: 'CO₂',
-              contents: [
-                {
-                  label: '最大浓度',
-                  value: '${[1].val}ppm',
-                  color: 'blue',
-                  info: '',
-                },
-                {
-                  label: '位置',
-                  value: '${[1].strinstallpos}',
-                  color: 'blue',
-                  info: '',
-                },
-                {
-                  label: '时间',
-                  value: '${[1].time}',
-                  color: 'blue',
-                  info: '',
-                },
-              ],
-            },
-            {
-              title: 'CH₄',
-              contents: [
-                {
-                  label: '最大浓度',
-                  value: '${[2].val}ppm',
-                  color: 'blue',
-                  info: '',
-                },
-                {
-                  label: '位置',
-                  value: '${[2].strinstallpos}',
-                  color: 'blue',
-                  info: '',
-                },
-                {
-                  label: '时间',
-                  value: '${[2].time}',
-                  color: 'blue',
-                  info: '',
-                },
-              ],
-            },
-            {
-              title: 'C₂H₂',
-              contents: [
-                {
-                  label: '最大浓度',
-                  value: '${[3].val}ppm',
-                  color: 'blue',
-                  info: '',
-                },
-                {
-                  label: '位置',
-                  value: '${[3].strinstallpos}',
-                  color: 'blue',
-                  info: '',
-                },
-                {
-                  label: '时间',
-                  value: '${[3].time}',
-                  color: 'blue',
-                  info: '',
-                },
-              ],
-            },
-            {
-              title: 'C₂H₄',
-              contents: [
-                {
-                  label: '最大浓度',
-                  value: '${[4].val}ppm',
-                  color: 'blue',
-                  info: '',
-                },
-                {
-                  label: '位置',
-                  value: '${[4].strinstallpos}',
-                  color: 'blue',
-                  info: '',
-                },
-                {
-                  label: '时间',
-                  value: '${[4].time}',
-                  color: 'blue',
-                  info: '',
-                },
-              ],
-            },
-            {
-              title: 'O₂',
-              contents: [
-                {
-                  label: '最大浓度',
-                  value: '${[5].val}ppm',
-                  color: 'blue',
-                  info: '',
-                },
-                {
-                  label: '位置',
-                  value: '${[5].strinstallpos}',
-                  color: 'blue',
-                  info: '',
-                },
-                {
-                  label: '时间',
-                  value: '${[5].time}',
-                  color: 'blue',
-                  info: '',
-                },
-              ],
-            },
-          ],
-        },
-      ],
-      preset: [],
-      mock: {
-        chartMock: {
-          name1: 'A',
-          data1: [
-            { val: 1, pos: '1' },
-            { val: 2, pos: '2' },
-            { val: 3, pos: '3' },
-            { val: 4, pos: '4' },
-          ],
-          name2: 'B',
-          data2: [
-            { val: 4, pos: '4' },
-            { val: 3, pos: '3' },
-            { val: 2, pos: '2' },
-            { val: 1, pos: '1' },
-          ],
-        },
-      },
-    },
-    showStyle: {
-      size: 'width:1000px;height:280px;',
-      version: '保德',
-      position: 'top:640px;left:460px;',
-    },
-  },
-  {
-    deviceType: 'mockPath',
-    moduleName: '测试右上',
-    pageType: '',
-    moduleData: {
-      header: {
-        show: true,
-        showSelector: true,
-        showSlot: false,
-        selector: {
-          value: '${orgname}',
-        },
-        slot: {
-          value: '',
-        },
-      },
-      background: {
-        show: false,
-        type: 'video',
-        link: '',
-      },
-      slice: {
-        direction: 'row',
-        basis: ['100%'],
-      },
-      layout: ['measure_detail'],
-      board: [],
-      chart: [],
-      gallery: [],
-      gallery_list: [],
-      table: [],
-      list: [],
-      complex_list: [],
-      preset: [
-        {
-          readFrom: 'dust_data',
-        },
-      ],
-      mock: {
-        mockPath: [
-          {
-            orgname: '布尔台煤矿',
-            orgcode: 'sdmtjtbetmk',
-            dust_data: [
-              {
-                devicePos: '布尔台煤矿掘进工作面',
-                dustType: '煤',
-                fireLen: '',
-                isBlast: '无',
-                airQuantity: '1208.00',
-                dustCon: '8.00',
-                respirableDustCon: '3.90',
-                SiO2Content: '28.00',
-                respirableDustRatio: '68.00',
-              },
-              {
-                devicePos: '布尔台煤矿综放工作面',
-                dustType: '煤',
-                fireLen: '',
-                isBlast: '无',
-                airQuantity: '708.00',
-                dustCon: '3.17',
-                respirableDustCon: '1.65',
-                SiO2Content: '18.00',
-                respirableDustRatio: '48.00',
-              },
-            ],
-          },
-          {
-            orgname: '大柳塔井',
-            orgcode: 'sdmtjtdltmk',
-            dust_data: [
-              {
-                devicePos: '22煤主运大巷掘进工作面',
-                dustType: '煤',
-                fireLen: '',
-                isBlast: '无',
-                airQuantity: '',
-                dustCon: '8.00',
-                respirableDustCon: '3.90',
-                SiO2Content: '28.00',
-                respirableDustRatio: '68.00',
-              },
-              {
-                devicePos: '42205综放工作面',
-                dustType: '煤',
-                fireLen: '',
-                isBlast: '无',
-                airQuantity: '',
-                dustCon: '3.17',
-                respirableDustCon: '1.65',
-                SiO2Content: '18.00',
-                respirableDustRatio: '48.00',
-              },
-            ],
-          },
-        ],
-      },
-    },
-    showStyle: {
-      size: 'width:450px;height:570px;',
-      version: '新版',
-      position: 'top:60px;right:0;',
-    },
-  },
-  {
-    deviceType: '',
-    moduleName: '测试用的',
-    pageType: '',
-    moduleData: {
-      header: {
-        show: false,
-        showSelector: false,
-        showSlot: false,
-        selector: {
-          value: '',
-        },
-        slot: {
-          value: '',
-        },
-      },
-      background: {
-        show: false,
-        type: 'video',
-        link: '',
-      },
-      slice: {
-        direction: 'row',
-        basis: ['100%'],
-      },
-      // layout: ['table'],
-      layout: ['gallery'],
-      board: [],
-      chart: [],
-      gallery: [
-        {
-          type: 'H',
-          readFrom: '',
-          items: [
-            {
-              label: '一氧化碳',
-              value: '${coVal}',
-              color: 'blue',
-            },
-            {
-              label: '二氧化碳',
-              value: '${co2Val}',
-              color: 'blue',
-            },
-            {
-              label: '氧气',
-              value: '${o2Val}',
-              color: 'blue',
-            },
-            {
-              label: '温度',
-              value: '${tempVal}',
-              color: 'blue',
-            },
-            {
-              label: '乙烯',
-              value: '${c2h4Val}',
-              color: 'blue',
-            },
-          ],
-        },
-      ],
-      gallery_list: [],
-      table: [
-        {
-          type: 'A',
-          readFrom: 'aqjkArray',
-          columns: [
-            {
-              name: '测点位置',
-              prop: 'strinstallpos',
-            },
-            {
-              name: '温度',
-              prop: 'nowVal',
-            },
-            {
-              name: '预警级别',
-              prop: 'warnLevel',
-            },
-            // {
-            //   name: '时间',
-            //   prop: 'time',
-            // },
-          ],
-        },
-      ],
-      list: [],
-      complex_list: [],
-      preset: [],
-      // mock: BDfireMock,
-    },
-    showStyle: {
-      size: 'width:450px;height:280px;',
-      version: '保德',
-      position: 'top:640px;right:0;',
-    },
-  },
+  // {
+  //   deviceType: '',
+  //   moduleName: '束管监测',
+  //   pageType: '',
+  //   moduleData: {
+  //     header: {
+  //       show: true,
+  //       showSelector: true,
+  //       showSlot: false,
+  //       selector: {
+  //         value: '',
+  //       },
+  //       slot: {
+  //         value: '',
+  //       },
+  //     },
+  //     background: {
+  //       show: false,
+  //       type: 'video',
+  //       link: '',
+  //     },
+  //     slice: {
+  //       direction: 'row',
+  //       ignoreOverflow: true,
+  //       basis: ['65%', '35%'],
+  //     },
+  //     layout: ['list', 'blast_delta'],
+  //     board: [],
+  //     chart: [],
+  //     gallery: [],
+  //     gallery_list: [],
+  //     table: [],
+  //     list: [
+  //       {
+  //         type: 'G',
+  //         readFrom: 'obfObj',
+  //         items: [
+  //           {
+  //             label: 'CO',
+  //             value: '${maxCo}',
+  //             color: 'blue',
+  //             info: '一氧化碳',
+  //           },
+  //           {
+  //             label: 'CO₂',
+  //             value: '--',
+  //             color: 'blue',
+  //             info: '--',
+  //           },
+  //           {
+  //             label: 'CH₄',
+  //             value: '--',
+  //             color: 'blue',
+  //             info: '--',
+  //           },
+  //           {
+  //             label: 'C₂H₂',
+  //             value: '--',
+  //             color: 'blue',
+  //             info: '--',
+  //           },
+  //           {
+  //             label: 'C₂H₄',
+  //             value: '--',
+  //             color: 'blue',
+  //             info: '--',
+  //           },
+  //           {
+  //             label: 'O₂',
+  //             value: '--',
+  //             color: 'blue',
+  //             info: '--',
+  //           },
+  //           // {
+  //           //   label: '温度',
+  //           //   value: '--',
+  //           //   color: 'blue',
+  //           //   info: '--',
+  //           // },
+  //           // {
+  //           //   label: '风险',
+  //           //   value: '--',
+  //           //   color: 'blue',
+  //           //   info: '--',
+  //           // },
+  //         ],
+  //       },
+  //     ],
+  //     complex_list: [],
+  //     preset: [
+  //       {
+  //         readFrom: '',
+  //       },
+  //     ],
+  //     // mock: BDfireMock,
+  //   },
+  //   // showStyle: {
+  //   //   size: 'width:450px;height:760px;',
+  //   //   version: '保德',
+  //   //   position: 'top:160px;left:0;',
+  //   // },
+  //   showStyle: {
+  //     size: 'width:1000px;height:280px;',
+  //     version: '新版',
+  //     position: 'top:350px;left:460px;',
+  //   },
+  // },
+  // {
+  //   deviceType: '',
+  //   moduleName: '束管监测',
+  //   pageType: '',
+  //   moduleData: {
+  //     header: {
+  //       show: true,
+  //       showSelector: true,
+  //       showSlot: false,
+  //       selector: {
+  //         value: '',
+  //       },
+  //       slot: {
+  //         value: '',
+  //       },
+  //     },
+  //     background: {
+  //       show: false,
+  //       type: 'video',
+  //       link: '',
+  //     },
+  //     slice: {
+  //       direction: 'column',
+  //       basis: ['65%', '35%'],
+  //     },
+  //     layout: ['list', 'blast_delta'],
+  //     board: [],
+  //     chart: [],
+  //     gallery: [],
+  //     gallery_list: [],
+  //     table: [],
+  //     list: [
+  //       {
+  //         type: 'G',
+  //         readFrom: 'dsArray',
+  //         items: [
+  //           {
+  //             label: 'CO',
+  //             value: '--',
+  //             color: 'blue',
+  //             info: '--',
+  //           },
+  //           {
+  //             label: 'CO₂',
+  //             value: '--',
+  //             color: 'blue',
+  //             info: '--',
+  //           },
+  //           {
+  //             label: 'CH₄',
+  //             value: '--',
+  //             color: 'blue',
+  //             info: '--',
+  //           },
+  //           {
+  //             label: 'C₂H₂',
+  //             value: '--',
+  //             color: 'blue',
+  //             info: '--',
+  //           },
+  //           {
+  //             label: 'C₂H₄',
+  //             value: '--',
+  //             color: 'blue',
+  //             info: '--',
+  //           },
+  //           {
+  //             label: 'O₂',
+  //             value: '--',
+  //             color: 'blue',
+  //             info: '--',
+  //           },
+  //           {
+  //             label: '温度',
+  //             value: '--',
+  //             color: 'blue',
+  //             info: '--',
+  //           },
+  //           {
+  //             label: '风险',
+  //             value: '--',
+  //             color: 'blue',
+  //             info: '--',
+  //           },
+  //         ],
+  //       },
+  //     ],
+  //     complex_list: [],
+  //     preset: [
+  //       {
+  //         readFrom: '',
+  //       },
+  //     ],
+  //     // mock: BDfireMock,
+  //   },
+  //   showStyle: {
+  //     size: 'width:450px;height:760px;',
+  //     version: '保德',
+  //     position: 'top:160px;left:0;',
+  //   },
+  // },
+  // {
+  //   deviceType: 'btArray',
+  //   moduleName: '工作面束管监测',
+  //   pageType: '',
+  //   moduleData: {
+  //     header: {
+  //       show: false,
+  //       showSelector: false,
+  //       showSlot: false,
+  //       selector: {
+  //         value: '${systemname}',
+  //       },
+  //       slot: {
+  //         value: '',
+  //       },
+  //     },
+  //     background: {
+  //       show: false,
+  //       type: 'video',
+  //       link: '',
+  //     },
+  //     slice: {
+  //       direction: 'row',
+  //       basis: ['100%'],
+  //     },
+  //     layout: ['chart'],
+  //     board: [],
+  //     chart: [
+  //       {
+  //         type: 'bar_stack',
+  //         readFrom: 'chartMock',
+  //         legend: { show: true },
+  //         xAxis: [{ show: true }],
+  //         yAxis: [{ show: true, name: '温度（℃）', position: 'left' }],
+  //         series: [
+  //           {
+  //             label: '${name1}',
+  //             readFrom: 'data1',
+  //             xprop: 'pos',
+  //             yprop: 'val',
+  //           },
+  //           {
+  //             label: '${name2}',
+  //             readFrom: 'data2',
+  //             xprop: 'pos',
+  //             yprop: 'val',
+  //           },
+  //         ],
+  //       },
+  //     ],
+  //     gallery: [],
+  //     gallery_list: [],
+  //     table: [],
+  //     list: [],
+  //     complex_list: [
+  //       {
+  //         type: 'B',
+  //         readFrom: 'devList',
+  //         mapFromData: false,
+  //         items: [
+  //           {
+  //             title: 'CO',
+  //             contents: [
+  //               {
+  //                 label: '最大浓度',
+  //                 value: '${[0].val}ppm',
+  //                 color: 'blue',
+  //                 info: '',
+  //               },
+  //               {
+  //                 label: '位置',
+  //                 value: '${[0].strinstallpos}',
+  //                 color: 'blue',
+  //                 info: '',
+  //               },
+  //               {
+  //                 label: '时间',
+  //                 value: '${[0].time}',
+  //                 color: 'blue',
+  //                 info: '',
+  //               },
+  //             ],
+  //           },
+  //           {
+  //             title: 'CO₂',
+  //             contents: [
+  //               {
+  //                 label: '最大浓度',
+  //                 value: '${[1].val}ppm',
+  //                 color: 'blue',
+  //                 info: '',
+  //               },
+  //               {
+  //                 label: '位置',
+  //                 value: '${[1].strinstallpos}',
+  //                 color: 'blue',
+  //                 info: '',
+  //               },
+  //               {
+  //                 label: '时间',
+  //                 value: '${[1].time}',
+  //                 color: 'blue',
+  //                 info: '',
+  //               },
+  //             ],
+  //           },
+  //           {
+  //             title: 'CH₄',
+  //             contents: [
+  //               {
+  //                 label: '最大浓度',
+  //                 value: '${[2].val}ppm',
+  //                 color: 'blue',
+  //                 info: '',
+  //               },
+  //               {
+  //                 label: '位置',
+  //                 value: '${[2].strinstallpos}',
+  //                 color: 'blue',
+  //                 info: '',
+  //               },
+  //               {
+  //                 label: '时间',
+  //                 value: '${[2].time}',
+  //                 color: 'blue',
+  //                 info: '',
+  //               },
+  //             ],
+  //           },
+  //           {
+  //             title: 'C₂H₂',
+  //             contents: [
+  //               {
+  //                 label: '最大浓度',
+  //                 value: '${[3].val}ppm',
+  //                 color: 'blue',
+  //                 info: '',
+  //               },
+  //               {
+  //                 label: '位置',
+  //                 value: '${[3].strinstallpos}',
+  //                 color: 'blue',
+  //                 info: '',
+  //               },
+  //               {
+  //                 label: '时间',
+  //                 value: '${[3].time}',
+  //                 color: 'blue',
+  //                 info: '',
+  //               },
+  //             ],
+  //           },
+  //           {
+  //             title: 'C₂H₄',
+  //             contents: [
+  //               {
+  //                 label: '最大浓度',
+  //                 value: '${[4].val}ppm',
+  //                 color: 'blue',
+  //                 info: '',
+  //               },
+  //               {
+  //                 label: '位置',
+  //                 value: '${[4].strinstallpos}',
+  //                 color: 'blue',
+  //                 info: '',
+  //               },
+  //               {
+  //                 label: '时间',
+  //                 value: '${[4].time}',
+  //                 color: 'blue',
+  //                 info: '',
+  //               },
+  //             ],
+  //           },
+  //           {
+  //             title: 'O₂',
+  //             contents: [
+  //               {
+  //                 label: '最大浓度',
+  //                 value: '${[5].val}ppm',
+  //                 color: 'blue',
+  //                 info: '',
+  //               },
+  //               {
+  //                 label: '位置',
+  //                 value: '${[5].strinstallpos}',
+  //                 color: 'blue',
+  //                 info: '',
+  //               },
+  //               {
+  //                 label: '时间',
+  //                 value: '${[5].time}',
+  //                 color: 'blue',
+  //                 info: '',
+  //               },
+  //             ],
+  //           },
+  //         ],
+  //       },
+  //     ],
+  //     preset: [],
+  //     mock: {
+  //       chartMock: {
+  //         name1: 'A',
+  //         data1: [
+  //           { val: 1, pos: '1' },
+  //           { val: 2, pos: '2' },
+  //           { val: 3, pos: '3' },
+  //           { val: 4, pos: '4' },
+  //         ],
+  //         name2: 'B',
+  //         data2: [
+  //           { val: 4, pos: '4' },
+  //           { val: 3, pos: '3' },
+  //           { val: 2, pos: '2' },
+  //           { val: 1, pos: '1' },
+  //         ],
+  //       },
+  //     },
+  //   },
+  //   showStyle: {
+  //     size: 'width:1000px;height:280px;',
+  //     version: '保德',
+  //     position: 'top:640px;left:460px;',
+  //   },
+  // },
+  // {
+  //   deviceType: 'mockPath',
+  //   moduleName: '测试右上',
+  //   pageType: '',
+  //   moduleData: {
+  //     header: {
+  //       show: true,
+  //       showSelector: true,
+  //       showSlot: false,
+  //       selector: {
+  //         value: '${orgname}',
+  //       },
+  //       slot: {
+  //         value: '',
+  //       },
+  //     },
+  //     background: {
+  //       show: false,
+  //       type: 'video',
+  //       link: '',
+  //     },
+  //     slice: {
+  //       direction: 'row',
+  //       basis: ['100%'],
+  //     },
+  //     layout: ['measure_detail'],
+  //     board: [],
+  //     chart: [],
+  //     gallery: [],
+  //     gallery_list: [],
+  //     table: [],
+  //     list: [],
+  //     complex_list: [],
+  //     preset: [
+  //       {
+  //         readFrom: 'dust_data',
+  //       },
+  //     ],
+  //     mock: {
+  //       mockPath: [
+  //         {
+  //           orgname: '布尔台煤矿',
+  //           orgcode: 'sdmtjtbetmk',
+  //           dust_data: [
+  //             {
+  //               devicePos: '布尔台煤矿掘进工作面',
+  //               dustType: '煤',
+  //               fireLen: '',
+  //               isBlast: '无',
+  //               airQuantity: '1208.00',
+  //               dustCon: '8.00',
+  //               respirableDustCon: '3.90',
+  //               SiO2Content: '28.00',
+  //               respirableDustRatio: '68.00',
+  //             },
+  //             {
+  //               devicePos: '布尔台煤矿综放工作面',
+  //               dustType: '煤',
+  //               fireLen: '',
+  //               isBlast: '无',
+  //               airQuantity: '708.00',
+  //               dustCon: '3.17',
+  //               respirableDustCon: '1.65',
+  //               SiO2Content: '18.00',
+  //               respirableDustRatio: '48.00',
+  //             },
+  //           ],
+  //         },
+  //         {
+  //           orgname: '大柳塔井',
+  //           orgcode: 'sdmtjtdltmk',
+  //           dust_data: [
+  //             {
+  //               devicePos: '22煤主运大巷掘进工作面',
+  //               dustType: '煤',
+  //               fireLen: '',
+  //               isBlast: '无',
+  //               airQuantity: '',
+  //               dustCon: '8.00',
+  //               respirableDustCon: '3.90',
+  //               SiO2Content: '28.00',
+  //               respirableDustRatio: '68.00',
+  //             },
+  //             {
+  //               devicePos: '42205综放工作面',
+  //               dustType: '煤',
+  //               fireLen: '',
+  //               isBlast: '无',
+  //               airQuantity: '',
+  //               dustCon: '3.17',
+  //               respirableDustCon: '1.65',
+  //               SiO2Content: '18.00',
+  //               respirableDustRatio: '48.00',
+  //             },
+  //           ],
+  //         },
+  //       ],
+  //     },
+  //   },
+  //   showStyle: {
+  //     size: 'width:450px;height:570px;',
+  //     version: '新版',
+  //     position: 'top:60px;right:0;',
+  //   },
+  // },
+  // {
+  //   deviceType: '',
+  //   moduleName: '测试用的',
+  //   pageType: '',
+  //   moduleData: {
+  //     header: {
+  //       show: false,
+  //       showSelector: false,
+  //       showSlot: false,
+  //       selector: {
+  //         value: '',
+  //       },
+  //       slot: {
+  //         value: '',
+  //       },
+  //     },
+  //     background: {
+  //       show: false,
+  //       type: 'video',
+  //       link: '',
+  //     },
+  //     slice: {
+  //       direction: 'row',
+  //       basis: ['100%'],
+  //     },
+  //     // layout: ['table'],
+  //     layout: ['gallery'],
+  //     board: [],
+  //     chart: [],
+  //     gallery: [
+  //       {
+  //         type: 'H',
+  //         readFrom: '',
+  //         items: [
+  //           {
+  //             label: '一氧化碳',
+  //             value: '${coVal}',
+  //             color: 'blue',
+  //           },
+  //           {
+  //             label: '二氧化碳',
+  //             value: '${co2Val}',
+  //             color: 'blue',
+  //           },
+  //           {
+  //             label: '氧气',
+  //             value: '${o2Val}',
+  //             color: 'blue',
+  //           },
+  //           {
+  //             label: '温度',
+  //             value: '${tempVal}',
+  //             color: 'blue',
+  //           },
+  //           {
+  //             label: '乙烯',
+  //             value: '${c2h4Val}',
+  //             color: 'blue',
+  //           },
+  //         ],
+  //       },
+  //     ],
+  //     gallery_list: [],
+  //     table: [
+  //       {
+  //         type: 'A',
+  //         readFrom: 'aqjkArray',
+  //         columns: [
+  //           {
+  //             name: '测点位置',
+  //             prop: 'strinstallpos',
+  //           },
+  //           {
+  //             name: '温度',
+  //             prop: 'nowVal',
+  //           },
+  //           {
+  //             name: '预警级别',
+  //             prop: 'warnLevel',
+  //           },
+  //           // {
+  //           //   name: '时间',
+  //           //   prop: 'time',
+  //           // },
+  //         ],
+  //       },
+  //     ],
+  //     list: [],
+  //     complex_list: [],
+  //     preset: [],
+  //     // mock: BDfireMock,
+  //   },
+  //   showStyle: {
+  //     size: 'width:450px;height:280px;',
+  //     version: '保德',
+  //     position: 'top:640px;right:0;',
+  //   },
+  // },
 ];

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

@@ -9,13 +9,18 @@ export const testConfigVent: Config[] = [
     moduleData: {
       header: {
         show: true,
-        showSelector: true,
-        showSlot: true,
+        readFrom: '',
         selector: {
+          show: true,
           value: '${strinstallpos}',
         },
         slot: {
-          value: '运行风机：${current}',
+          show: true,
+          value: '运行风机：${readData.Fan1StartStatus}',
+          trans: {
+            '1': '一号',
+            '0': '二号',
+          },
         },
       },
       background: {
@@ -23,11 +28,15 @@ export const testConfigVent: Config[] = [
         type: 'video',
         link: '/video/mainFan.mp4',
       },
-      slice: {
+      layout: {
         direction: 'column',
-        basis: ['40%'],
+        items: [
+          {
+            name: 'board',
+            basis: '40%',
+          },
+        ],
       },
-      layout: ['board'],
       board: [
         {
           type: 'A',
@@ -40,7 +49,11 @@ export const testConfigVent: Config[] = [
             },
             {
               label: '负压(Pa)',
-              value: '${FanFreqHz}',
+              value: '${Fan1StartStatus}',
+              trans: {
+                '1': '${Fan1FreqHz}',
+                '0': '${Fan1FreqHz}',
+              },
             },
             {
               label: '频率(Hz)',
@@ -70,13 +83,18 @@ export const testConfigVent: Config[] = [
     moduleData: {
       header: {
         show: true,
-        showSelector: true,
-        showSlot: true,
+        readFrom: '',
         selector: {
+          show: true,
           value: '${strinstallpos}',
         },
         slot: {
-          value: '运行风机：${current}',
+          show: true,
+          value: '运行风机：${readData.Fan1StartStatus}',
+          trans: {
+            '1': '一号',
+            '0': '二号',
+          },
         },
       },
       background: {
@@ -84,11 +102,15 @@ export const testConfigVent: Config[] = [
         type: 'video',
         link: '/video/fanLocal.mp4',
       },
-      slice: {
+      layout: {
         direction: 'column',
-        basis: ['40%'],
+        items: [
+          {
+            name: 'board',
+            basis: '40%',
+          },
+        ],
       },
-      layout: ['board'],
       board: [
         {
           type: 'A',
@@ -105,7 +127,11 @@ export const testConfigVent: Config[] = [
             },
             {
               label: '频率(Hz)',
-              value: '${FanfHz}',
+              value: '${Fan1StartStatus}',
+              trans: {
+                '1': '${Fan1fHz}',
+                '0': '${Fan2fHz}',
+              },
             },
           ],
         },
@@ -131,13 +157,14 @@ export const testConfigVent: Config[] = [
     moduleData: {
       header: {
         show: false,
-        showSelector: false,
-        showSlot: false,
+        readFrom: '',
         selector: {
-          value: '${strinstallpos}',
+          show: false,
+          value: '',
         },
         slot: {
-          value: '${strinstallpos}',
+          show: false,
+          value: '',
         },
       },
       background: {
@@ -145,11 +172,10 @@ export const testConfigVent: Config[] = [
         type: 'video',
         link: '/video/gate.mp4',
       },
-      slice: {
-        direction: 'column',
-        basis: [],
+      layout: {
+        direction: 'row',
+        items: [],
       },
-      layout: [],
       board: [],
       list: [],
       chart: [],
@@ -166,19 +192,20 @@ export const testConfigVent: Config[] = [
     },
   },
   {
-    deviceType: '',
+    deviceType: 'sys_wind',
     moduleName: '风量监测',
     pageType: '',
     moduleData: {
       header: {
         show: false,
-        showSelector: false,
-        showSlot: false,
+        readFrom: '',
         selector: {
-          value: '${strinstallpos}',
+          show: false,
+          value: '',
         },
         slot: {
-          value: '${strinstallpos}',
+          show: false,
+          value: '',
         },
       },
       background: {
@@ -186,11 +213,15 @@ export const testConfigVent: Config[] = [
         type: 'video',
         link: '',
       },
-      slice: {
-        direction: 'column',
-        basis: ['100%'],
+      layout: {
+        direction: 'row',
+        items: [
+          {
+            name: 'chart',
+            basis: '100%',
+          },
+        ],
       },
-      layout: ['chart'],
       board: [],
       list: [],
       table: [],
@@ -228,13 +259,14 @@ export const testConfigVent: Config[] = [
     moduleData: {
       header: {
         show: true,
-        showSelector: true,
-        showSlot: false,
+        readFrom: '',
         selector: {
+          show: true,
           value: '${devicePos}',
         },
         slot: {
-          value: '${devicePos}',
+          show: false,
+          value: '',
         },
       },
       background: {
@@ -242,11 +274,19 @@ export const testConfigVent: Config[] = [
         type: 'video',
         link: '',
       },
-      slice: {
+      layout: {
         direction: 'column',
-        basis: ['60%', '40%'],
+        items: [
+          {
+            name: 'chart',
+            basis: '60%',
+          },
+          {
+            name: 'board',
+            basis: '40%',
+          },
+        ],
       },
-      layout: ['chart', 'board'],
       board: [
         {
           type: 'D',
@@ -298,13 +338,14 @@ export const testConfigVent: Config[] = [
     moduleData: {
       header: {
         show: true,
-        showSelector: true,
-        showSlot: false,
+        readFrom: '',
         selector: {
+          show: true,
           value: '${devicePos}',
         },
         slot: {
-          value: '${devicePos}',
+          show: false,
+          value: '',
         },
       },
       background: {
@@ -312,11 +353,19 @@ export const testConfigVent: Config[] = [
         type: 'video',
         link: '',
       },
-      slice: {
+      layout: {
         direction: 'column',
-        basis: ['65%', '35%'],
+        items: [
+          {
+            name: 'chart',
+            basis: '65%',
+          },
+          {
+            name: 'board',
+            basis: '35%',
+          },
+        ],
       },
-      layout: ['chart', 'board'],
       board: [
         {
           type: 'B',
@@ -365,18 +414,19 @@ export const testConfigVent: Config[] = [
     },
   },
   {
-    deviceType: '',
+    deviceType: 'warn',
     moduleName: '预警监测',
     pageType: '',
     moduleData: {
       header: {
         show: true,
-        showSelector: false,
-        showSlot: true,
+        readFrom: '',
         selector: {
+          show: false,
           value: '',
         },
         slot: {
+          show: true,
           value: '网络异常：${warn[0].netstatus.val}',
         },
       },
@@ -385,11 +435,15 @@ export const testConfigVent: Config[] = [
         type: 'video',
         link: '',
       },
-      slice: {
-        direction: 'column',
-        basis: ['100%'],
+      layout: {
+        direction: 'row',
+        items: [
+          {
+            name: 'list',
+            basis: '100%',
+          },
+        ],
       },
-      layout: ['list'],
       board: [],
       list: [
         {
@@ -452,12 +506,13 @@ export const testConfigDust: Config[] = [
     moduleData: {
       header: {
         show: false,
-        showSelector: false,
-        showSlot: false,
+        readFrom: '',
         selector: {
+          show: false,
           value: '',
         },
         slot: {
+          show: false,
           value: '',
         },
       },
@@ -466,11 +521,19 @@ export const testConfigDust: Config[] = [
         type: 'video',
         link: '',
       },
-      slice: {
+      layout: {
         direction: 'column',
-        basis: ['20%', '80%'],
+        items: [
+          {
+            name: 'gallery',
+            basis: '20%',
+          },
+          {
+            name: 'complex_list',
+            basis: '80%',
+          },
+        ],
       },
-      layout: ['gallery', 'complex_list'],
       board: [],
       chart: [],
       gallery: [
@@ -508,7 +571,19 @@ export const testConfigDust: Config[] = [
       ],
       gallery_list: [],
       table: [],
-      list: [],
+      list: [
+        {
+          type: 'A',
+          readFrom: '',
+          mapFromData: false,
+          items: [
+            {
+              label: '',
+              value: '',
+            },
+          ],
+        },
+      ],
       complex_list: [
         {
           type: 'C',
@@ -551,12 +626,13 @@ export const testConfigDust: Config[] = [
     moduleData: {
       header: {
         show: true,
-        showSelector: true,
-        showSlot: false,
+        readFrom: '',
         selector: {
+          show: true,
           value: '${strinstallpos}',
         },
         slot: {
+          show: false,
           value: '',
         },
       },
@@ -565,11 +641,15 @@ export const testConfigDust: Config[] = [
         type: 'video',
         link: '',
       },
-      slice: {
+      layout: {
         direction: 'row',
-        basis: ['100%'],
+        items: [
+          {
+            name: 'chart',
+            basis: '100%',
+          },
+        ],
       },
-      layout: ['chart'],
       board: [],
       chart: [
         {
@@ -609,12 +689,13 @@ export const testConfigDust: Config[] = [
     moduleData: {
       header: {
         show: false,
-        showSelector: false,
-        showSlot: false,
+        readFrom: '',
         selector: {
+          show: false,
           value: '',
         },
         slot: {
+          show: false,
           value: '',
         },
       },
@@ -623,11 +704,15 @@ export const testConfigDust: Config[] = [
         type: 'video',
         link: '',
       },
-      slice: {
+      layout: {
         direction: 'row',
-        basis: ['100%'],
+        items: [
+          {
+            name: 'gallery',
+            basis: '100%',
+          },
+        ],
       },
-      layout: ['gallery'],
       board: [],
       chart: [],
       gallery: [
@@ -679,12 +764,13 @@ export const testConfigDust: Config[] = [
     moduleData: {
       header: {
         show: false,
-        showSelector: false,
-        showSlot: false,
+        readFrom: '',
         selector: {
+          show: false,
           value: '',
         },
         slot: {
+          show: false,
           value: '',
         },
       },
@@ -693,11 +779,15 @@ export const testConfigDust: Config[] = [
         type: 'video',
         link: '',
       },
-      slice: {
+      layout: {
         direction: 'row',
-        basis: ['100%'],
+        items: [
+          {
+            name: 'table',
+            basis: '100%',
+          },
+        ],
       },
-      layout: ['table'],
       board: [],
       chart: [],
       gallery: [],
@@ -740,12 +830,13 @@ export const testConfigDust: Config[] = [
     moduleData: {
       header: {
         show: false,
-        showSelector: false,
-        showSlot: false,
+        readFrom: '',
         selector: {
-          value: '${name}',
+          show: false,
+          value: '',
         },
         slot: {
+          show: false,
           value: '',
         },
       },
@@ -754,11 +845,15 @@ export const testConfigDust: Config[] = [
         type: 'video',
         link: '',
       },
-      slice: {
+      layout: {
         direction: 'row',
-        basis: ['100%'],
+        items: [
+          {
+            name: 'board',
+            basis: '100%',
+          },
+        ],
       },
-      layout: ['board'],
       board: [
         {
           type: 'E',
@@ -799,18 +894,19 @@ export const testConfigDust: Config[] = [
 
 export const testConfigFire: Config[] = [
   {
-    deviceType: '',
+    deviceType: 'fireManageInfo',
     moduleName: '重点区域风险监测',
     pageType: '',
     moduleData: {
       header: {
         show: false,
-        showSelector: false,
-        showSlot: false,
+        readFrom: '',
         selector: {
+          show: false,
           value: '',
         },
         slot: {
+          show: false,
           value: '',
         },
       },
@@ -819,11 +915,19 @@ export const testConfigFire: Config[] = [
         type: 'video',
         link: '',
       },
-      slice: {
+      layout: {
         direction: 'column',
-        basis: ['35%', '65%'],
+        items: [
+          {
+            name: 'board',
+            basis: '35%',
+          },
+          {
+            name: 'complex_list',
+            basis: '65%',
+          },
+        ],
       },
-      layout: ['board', 'complex_list'],
       board: [
         {
           type: 'A',
@@ -881,80 +985,6 @@ export const testConfigFire: Config[] = [
       position: 'top:60px;left:0;',
     },
   },
-  // {
-  //   deviceType: '',
-  //   moduleName: '开采煤层自燃发火特性',
-  //   pageType: '',
-  //   moduleData: {
-  //     header: {
-  //       show: false,
-  //       showSelector: false,
-  //       showSlot: false,
-  //       selector: {
-  //         value: '${systemname}',
-  //       },
-  //       slot: {
-  //         value: '',
-  //       },
-  //     },
-  //     background: {
-  //       show: false,
-  //       type: 'video',
-  //       link: '',
-  //     },
-  //     slice: {
-  //       direction: 'column',
-  //       basis: ['100%'],
-  //     },
-  //     layout: ['table'],
-  //     board: [],
-  //     chart: [],
-  //     gallery: [],
-  //     gallery_list: [],
-  //     table: [
-  //       {
-  //         type: 'A',
-  //         readFrom: 'mockTable',
-  //         columns: [
-  //           {
-  //             name: '煤层',
-  //             prop: 'a',
-  //           },
-  //           {
-  //             name: '自燃倾向性',
-  //             prop: 'b',
-  //           },
-  //           {
-  //             name: '最短发火期',
-  //             prop: 'c',
-  //           },
-  //           {
-  //             name: '最小推进速度',
-  //             prop: 'd',
-  //           },
-  //         ],
-  //       },
-  //     ],
-  //     list: [],
-  //     complex_list: [],
-  //     preset: [],
-  //     mock: {
-  //       mockTable: [
-  //         {
-  //           a: '8煤',
-  //           b: '自燃',
-  //           c: '123天',
-  //           d: '0.87md',
-  //         },
-  //       ],
-  //     },
-  //   },
-  //   showStyle: {
-  //     size: 'width:450px;height:280px;',
-  //     version: '新版',
-  //     position: 'top:350px;left:0;',
-  //   },
-  // },
   {
     deviceType: 'pdArray',
     moduleName: '带式输送机防灭火监控系统',
@@ -962,12 +992,13 @@ export const testConfigFire: Config[] = [
     moduleData: {
       header: {
         show: true,
-        showSelector: true,
-        showSlot: false,
+        readFrom: '',
         selector: {
+          show: true,
           value: '${systemname}',
         },
         slot: {
+          show: false,
           value: '',
         },
       },
@@ -976,12 +1007,19 @@ export const testConfigFire: Config[] = [
         type: 'video',
         link: '',
       },
-      slice: {
+      layout: {
         direction: 'column',
-        ignoreOverflow: true,
-        basis: ['30%', '70%'],
+        items: [
+          {
+            name: 'board',
+            basis: '30%',
+          },
+          {
+            name: 'chart',
+            basis: '70%',
+          },
+        ],
       },
-      layout: ['board', 'chart'],
       board: [
         {
           type: 'F',
@@ -1035,18 +1073,19 @@ export const testConfigFire: Config[] = [
     },
   },
   {
-    deviceType: 'sgGxObj.devGxcw',
+    deviceType: 'sgGxObj',
     moduleName: '工作面光纤监测',
     pageType: '',
     moduleData: {
       header: {
         show: true,
-        showSelector: true,
-        showSlot: false,
+        readFrom: 'devGxcw',
         selector: {
+          show: true,
           value: '${strinstallpos}',
         },
         slot: {
+          show: false,
           value: '',
         },
       },
@@ -1055,11 +1094,15 @@ export const testConfigFire: Config[] = [
         type: 'video',
         link: '',
       },
-      slice: {
+      layout: {
         direction: 'row',
-        basis: ['100%'],
+        items: [
+          {
+            name: 'chart',
+            basis: '100%',
+          },
+        ],
       },
-      layout: ['chart'],
       board: [],
       chart: [
         {
@@ -1093,18 +1136,19 @@ export const testConfigFire: Config[] = [
     },
   },
   {
-    deviceType: 'sgGxObj.devSgjc',
+    deviceType: 'sgGxObj',
     moduleName: '工作面束管监测',
     pageType: '',
     moduleData: {
       header: {
         show: true,
-        showSelector: true,
-        showSlot: false,
+        readFrom: 'devSgjc',
         selector: {
+          show: true,
           value: '${strinstallpos}',
         },
         slot: {
+          show: false,
           value: '',
         },
       },
@@ -1113,12 +1157,20 @@ export const testConfigFire: Config[] = [
         type: 'video',
         link: '',
       },
-      slice: {
+      layout: {
         direction: 'column',
-        basis: ['40%', '52%'],
-        ignoreOverflow: true,
+        items: [
+          {
+            name: 'gallery_list',
+            basis: '40%',
+          },
+          {
+            name: 'blast_delta',
+            basis: '52%',
+            overflow: false,
+          },
+        ],
       },
-      layout: ['gallery_list', 'blast_delta'],
       board: [],
       chart: [],
       // chart: [
@@ -1276,18 +1328,19 @@ export const testConfigFire: Config[] = [
     },
   },
   {
-    deviceType: '',
+    deviceType: 'aqjkArray',
     moduleName: '安全监控系统',
     pageType: '',
     moduleData: {
       header: {
         show: false,
-        showSelector: false,
-        showSlot: false,
+        readFrom: '',
         selector: {
+          show: false,
           value: '',
         },
         slot: {
+          show: false,
           value: '',
         },
       },
@@ -1296,11 +1349,15 @@ export const testConfigFire: Config[] = [
         type: 'video',
         link: '',
       },
-      slice: {
+      layout: {
         direction: 'row',
-        basis: ['100%'],
+        items: [
+          {
+            name: 'table',
+            basis: '100%',
+          },
+        ],
       },
-      layout: ['table'],
       board: [],
       chart: [],
       gallery: [],

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

@@ -728,12 +728,13 @@ export const testConfigWZFire: Config[] = [
     moduleData: {
       header: {
         show: false,
-        showSelector: false,
-        showSlot: false,
+        readFrom: '',
         selector: {
+          show: false,
           value: '',
         },
         slot: {
+          show: false,
           value: '',
         },
       },
@@ -742,11 +743,19 @@ export const testConfigWZFire: Config[] = [
         type: 'video',
         link: '',
       },
-      slice: {
+      layout: {
         direction: 'column',
-        basis: ['50%', '50%'],
+        items: [
+          {
+            name: 'board',
+            basis: '50%',
+          },
+          {
+            name: 'complex_list',
+            basis: '50%',
+          },
+        ],
       },
-      layout: ['board', 'complex_list'],
       board: [
         {
           type: 'A',
@@ -810,13 +819,14 @@ export const testConfigWZFire: Config[] = [
     pageType: '',
     moduleData: {
       header: {
-        show: true,
-        showSelector: true,
-        showSlot: false,
+        show: false,
+        readFrom: '',
         selector: {
+          show: true,
           value: '${systemname}',
         },
         slot: {
+          show: false,
           value: '',
         },
       },
@@ -825,12 +835,20 @@ export const testConfigWZFire: Config[] = [
         type: 'video',
         link: '',
       },
-      slice: {
+      layout: {
         direction: 'column',
-        ignoreOverflow: true,
-        basis: ['30%', '70%'],
+        items: [
+          {
+            name: 'board',
+            basis: '30%',
+          },
+          {
+            name: 'chart',
+            basis: '70%',
+            overflow: false,
+          },
+        ],
       },
-      layout: ['board', 'chart'],
       board: [
         {
           type: 'F',
@@ -884,18 +902,19 @@ export const testConfigWZFire: Config[] = [
     },
   },
   {
-    deviceType: 'sgGxObj.devGxcw',
+    deviceType: 'sgGxObj',
     moduleName: '工作面光纤监测',
     pageType: '',
     moduleData: {
       header: {
         show: true,
-        showSelector: true,
-        showSlot: false,
+        readFrom: 'devGxcw',
         selector: {
+          show: true,
           value: '${strinstallpos}',
         },
         slot: {
+          show: false,
           value: '',
         },
       },
@@ -904,11 +923,15 @@ export const testConfigWZFire: Config[] = [
         type: 'video',
         link: '',
       },
-      slice: {
+      layout: {
         direction: 'row',
-        basis: ['100%'],
+        items: [
+          {
+            name: 'chart',
+            basis: '100%',
+          },
+        ],
       },
-      layout: ['chart'],
       board: [],
       chart: [
         {
@@ -942,18 +965,19 @@ export const testConfigWZFire: Config[] = [
     },
   },
   {
-    deviceType: '',
+    deviceType: 'sensorArray',
     moduleName: '传感器监测',
     pageType: '',
     moduleData: {
       header: {
         show: false,
-        showSelector: false,
-        showSlot: false,
+        readFrom: '',
         selector: {
+          show: false,
           value: '',
         },
         slot: {
+          show: false,
           value: '',
         },
       },
@@ -962,11 +986,15 @@ export const testConfigWZFire: Config[] = [
         type: 'video',
         link: '',
       },
-      slice: {
+      layout: {
         direction: 'row',
-        basis: ['100%'],
+        items: [
+          {
+            name: 'table',
+            basis: '100%',
+          },
+        ],
       },
-      layout: ['table'],
       board: [],
       chart: [],
       gallery: [],
@@ -1013,12 +1041,13 @@ export const testConfigWZFire: Config[] = [
     moduleData: {
       header: {
         show: true,
-        showSelector: true,
-        showSlot: false,
+        readFrom: '',
         selector: {
+          show: true,
           value: '${systemname}',
         },
         slot: {
+          show: false,
           value: '',
         },
       },
@@ -1027,11 +1056,15 @@ export const testConfigWZFire: Config[] = [
         type: 'video',
         link: '',
       },
-      slice: {
+      layout: {
         direction: 'row',
-        basis: ['100%'],
+        items: [
+          {
+            name: 'list',
+            basis: '100%',
+          },
+        ],
       },
-      layout: ['list'],
       board: [],
       chart: [],
       // chart: [
@@ -1105,18 +1138,19 @@ export const testConfigWZFire: Config[] = [
     },
   },
   {
-    deviceType: '',
+    deviceType: 'aqjkArray',
     moduleName: '安全监控系统',
     pageType: '',
     moduleData: {
       header: {
         show: false,
-        showSelector: false,
-        showSlot: false,
+        readFrom: '',
         selector: {
+          show: false,
           value: '',
         },
         slot: {
+          show: false,
           value: '',
         },
       },
@@ -1125,11 +1159,15 @@ export const testConfigWZFire: Config[] = [
         type: 'video',
         link: '',
       },
-      slice: {
+      layout: {
         direction: 'row',
-        basis: ['100%'],
+        items: [
+          {
+            name: 'table',
+            basis: '100%',
+          },
+        ],
       },
-      layout: ['table'],
       board: [],
       chart: [],
       gallery: [],

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

@@ -23,6 +23,7 @@
         :module-data="cfg.moduleData"
         :module-name="cfg.moduleName"
         :device-type="cfg.deviceType"
+        :data="data"
         :visible="true"
       />
     </template>
@@ -34,6 +35,7 @@
         :module-data="cfg.moduleData"
         :module-name="cfg.moduleName"
         :device-type="cfg.deviceType"
+        :data="data"
         :visible="true"
       />
     </template>
@@ -47,6 +49,7 @@
         :module-data="cfg.moduleData"
         :module-name="cfg.moduleName"
         :device-type="cfg.deviceType"
+        :data="data"
         @close="cfg.visible = false"
       />
       <!-- 下面是用于呼出已隐藏的模块的按钮 -->
@@ -62,42 +65,36 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { computed, onMounted, ref } from 'vue';
+  import { onMounted, onUnmounted } from 'vue';
   // import { CaretDownOutlined } from '@ant-design/icons-vue';
   // import MonitorCenter from './components/MonitorCenter.vue';
-  import { useInitConfigs } from './hooks/useInit';
-  import { Config } from '../../deviceManager/configurationTable/types';
+  import { useInitConfigs, useInitPage } from './hooks/useInit';
   import ModuleEnhanced from './components/ModuleEnhanced.vue';
   import ModuleOriginal from './components/ModuleOriginal.vue';
   import ModuleCommon from './components/ModuleCommon.vue';
-  // import { testConfigBuErTai } from './configurable.data';
   // import { useRoute } from 'vue-router';
   import VentModal from '/@/components/vent/micro/ventModal.vue';
+  import { getHomeData } from './configurable.api';
+  // import { testConfigDust } from './configurable.data';
 
-  interface EnhancedConfig extends Config {
-    visible: boolean;
-  }
-
-  const mainTitle = ref('智能粉尘管控系统');
-
-  // const moduleCodes = ['fanlocal', 'fanmain' /** 'vc', 'ar', 'va', 'ws', 'dw' */];
-
-  const hiddenList = computed(() => {
-    return enhancedConfigs.value.filter((e) => e.visible === false);
-  });
   const { configs, isOriginal, isCommon, fetchConfigs } = useInitConfigs();
-  const enhancedConfigs = ref<EnhancedConfig[]>([]);
+  const { mainTitle, enhancedConfigs, hiddenList, data, updateData, updateEnhancedConfigs } = useInitPage('智能粉尘管控系统');
+  let interval: number | undefined;
 
   onMounted(() => {
-    // configs.value = testConfigB;
     fetchConfigs('dust').then(() => {
-      enhancedConfigs.value = configs.value.map((c) => {
-        return {
-          visible: true,
-          ...c,
-        };
-      });
+      // configs.value = testConfigDust;
+      updateEnhancedConfigs(configs.value);
+
+      getHomeData({}).then(updateData);
     });
+    setInterval(() => {
+      getHomeData({}).then(updateData);
+    }, 60000);
+  });
+
+  onUnmounted(() => {
+    clearInterval(interval);
   });
 </script>
 <style lang="less" scoped>

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

@@ -23,7 +23,7 @@
         </div>
         <div class="tcontent-c">
           <div style="margin-bottom: 15px; color: #009bff; font-size: 24px; font-weight: bolder; letter-spacing: 10px">
-            {{ homedata.dustAllMineWarn }}
+            {{ data.dustAllMineWarn }}
           </div>
           <!-- <div style="color: #fff; font-size: 12px">自燃倾向性等级 : 容易自燃</div> -->
         </div>
@@ -50,6 +50,7 @@
       :module-data="cfg.moduleData"
       :module-name="cfg.moduleName"
       :device-type="cfg.deviceType"
+      :data="data"
       :visible="true"
     />
     <div style="width: 1000px; height: 570px; position: absolute; left: calc(50% - 500px); top: 60px">
@@ -58,40 +59,46 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { onMounted, ref } from 'vue';
+  import { onMounted, onUnmounted } from 'vue';
   // import { CaretDownOutlined } from '@ant-design/icons-vue';
   // import MonitorCenter from './components/MonitorCenter.vue';
-  import { useInitConfigs } from './hooks/useInit';
+  import { useInitConfigs, useInitPage } from './hooks/useInit';
   import ModuleBD from './components/ModuleBD.vue';
   import VentModal from '/@/components/vent/micro/ventModal.vue';
   import { getDisHome } from './configurable.api';
   // import { getToken } from '/@/utils/auth';
 
-  // const iframeUrl = ref(
-  //   `${location.protocol}//${location.hostname}:8091/dashboard/analysis?type=empty&deviceType=empty&showid=1&token=${getToken()}`
-  // );
-  // const loading = ref(true);
-  const mainTitle = ref('保德煤矿粉尘灾害预警系统');
-  const pageType = 'BD_dust';
-
-  // const moduleCodes = ['fanlocal', 'fanmain' /** 'vc', 'ar', 'va', 'ws', 'dw' */];
-
   const { configs, fetchConfigs } = useInitConfigs();
-  const homedata = ref<any>({});
+  const { mainTitle, data, updateData, updateEnhancedConfigs } = useInitPage('保德煤矿粉尘灾害预警系统');
+  let interval: number | undefined;
   // function hideLoading() {
   //   loading.value = false;
   // }
   onMounted(() => {
-    // configs.value = testConfigB;
-    getDisHome({ dataList: 'dustAllMineWarn' }).then((r) => {
-      homedata.value = r;
+    fetchConfigs('BD_dust').then(() => {
+      // configs.value = testConfigVent;
+      updateEnhancedConfigs(configs.value);
+
+      getDisHome({
+        dataList: configs.value
+          .map((e) => e.deviceType)
+          .concat('dustAllMineWarn')
+          .join(','),
+      }).then(updateData);
     });
-    fetchConfigs(pageType);
+    setInterval(() => {
+      getDisHome({
+        dataList: configs.value
+          .map((e) => e.deviceType)
+          .concat('dustAllMineWarn')
+          .join(','),
+      }).then(updateData);
+    }, 60000);
   });
 
-  // function redirectTo(url) {
-  //   window.open(url);
-  // }
+  onUnmounted(() => {
+    clearInterval(interval);
+  });
 </script>
 <style lang="less" scoped>
   @font-face {

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

@@ -23,6 +23,7 @@
         :module-data="cfg.moduleData"
         :module-name="cfg.moduleName"
         :device-type="cfg.deviceType"
+        :data="data"
         :visible="true"
       />
     </template>
@@ -34,6 +35,7 @@
         :module-data="cfg.moduleData"
         :module-name="cfg.moduleName"
         :device-type="cfg.deviceType"
+        :data="data"
         :visible="true"
       />
     </template>
@@ -47,6 +49,7 @@
         :module-data="cfg.moduleData"
         :module-name="cfg.moduleName"
         :device-type="cfg.deviceType"
+        :data="data"
         @close="cfg.visible = false"
       />
       <!-- 下面是用于呼出已隐藏的模块的按钮 -->
@@ -62,42 +65,36 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { computed, onMounted, ref } from 'vue';
+  import { onMounted, onUnmounted } from 'vue';
   // import { CaretDownOutlined } from '@ant-design/icons-vue';
   // import MonitorCenter from './components/MonitorCenter.vue';
-  import { useInitConfigs } from './hooks/useInit';
-  import { Config } from '../../deviceManager/configurationTable/types';
+  import { useInitConfigs, useInitPage } from './hooks/useInit';
   import ModuleEnhanced from './components/ModuleEnhanced.vue';
   import ModuleOriginal from './components/ModuleOriginal.vue';
   import ModuleCommon from './components/ModuleCommon.vue';
-  // import { testConfigBuErTai } from './configurable.data';
   // import { useRoute } from 'vue-router';
   import VentModal from '/@/components/vent/micro/ventModal.vue';
+  import { getHomeData } from './configurable.api';
+  // import { testConfigFire } from './configurable.data';
 
-  interface EnhancedConfig extends Config {
-    visible: boolean;
-  }
-
-  const mainTitle = ref('智能防灭火管控系统');
-
-  // const moduleCodes = ['fanlocal', 'fanmain' /** 'vc', 'ar', 'va', 'ws', 'dw' */];
-
-  const hiddenList = computed(() => {
-    return enhancedConfigs.value.filter((e) => e.visible === false);
-  });
   const { configs, isOriginal, isCommon, fetchConfigs } = useInitConfigs();
-  const enhancedConfigs = ref<EnhancedConfig[]>([]);
+  const { mainTitle, enhancedConfigs, hiddenList, data, updateData, updateEnhancedConfigs } = useInitPage('智能防灭火管控系统');
+  let interval: number | undefined;
 
   onMounted(() => {
-    // configs.value = testConfigB;
     fetchConfigs('fire').then(() => {
-      enhancedConfigs.value = configs.value.map((c) => {
-        return {
-          visible: true,
-          ...c,
-        };
-      });
+      // configs.value = testConfigFire;
+      updateEnhancedConfigs(configs.value);
+
+      getHomeData({}).then(updateData);
     });
+    setInterval(() => {
+      getHomeData({}).then(updateData);
+    }, 60000);
+  });
+
+  onUnmounted(() => {
+    clearInterval(interval);
   });
 </script>
 <style lang="less" scoped>

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

@@ -23,7 +23,7 @@
         </div>
         <div class="tcontent-c">
           <div style="margin-bottom: 15px; color: #009bff; font-size: 24px; font-weight: bolder; letter-spacing: 10px">
-            {{ homedata.fireAllMineWarn }}
+            {{ data.fireAllMineWarn }}
           </div>
           <div style="color: #fff; font-size: 12px">自燃倾向性等级 : 自燃</div>
         </div>
@@ -44,25 +44,25 @@
       </div>
     </div>
     <ModuleBD
-      v-for="cfg in configs"
+      v-for="cfg in cfgs"
       :key="cfg.deviceType"
       :show-style="cfg.showStyle"
       :module-data="cfg.moduleData"
       :module-name="cfg.moduleName"
       :device-type="cfg.deviceType"
+      :data="data"
       :visible="true"
-      :page-type="pageType"
     />
     <ModuleBDDual
-      :show-style="configA.showStyle"
-      :module-data-a="configA.moduleData"
-      :module-name-a="configA.moduleName"
-      :device-type-a="configA.deviceType"
-      :module-data-b="configB.moduleData"
-      :module-name-b="configB.moduleName"
-      :device-type-b="configB.deviceType"
+      :show-style="cfgA.showStyle"
+      :module-data-a="cfgA.moduleData"
+      :module-name-a="cfgA.moduleName"
+      :device-type-a="cfgA.deviceType"
+      :module-data-b="cfgB.moduleData"
+      :module-name-b="cfgB.moduleName"
+      :device-type-b="cfgB.deviceType"
+      :data="data"
       :visible="true"
-      :page-type="pageType"
     />
     <div style="width: 1000px; height: 550px; position: absolute; left: calc(50% - 500px); top: 60px">
       <VentModal />
@@ -70,10 +70,10 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { computed, onMounted, ref } from 'vue';
+  import { computed, onMounted, onUnmounted } from 'vue';
   // import { CaretDownOutlined } from '@ant-design/icons-vue';
   // import MonitorCenter from './components/MonitorCenter.vue';
-  import { useInitConfigs } from './hooks/useInit';
+  import { useInitConfigs, useInitPage } from './hooks/useInit';
   import ModuleBD from './components/ModuleBD.vue';
   import ModuleBDDual from './components/ModuleBDDual.vue';
   // import { testConfigBDFire } from './configurable.data';
@@ -81,43 +81,51 @@
   import { getDisHome } from './configurable.api';
   // import { getToken } from '/@/utils/auth';
 
-  // import FramePage from '/@/views/sys/iframe/index.vue';
-  // const frameRef = ref();
-  const mainTitle = ref('保德煤矿火灾预警系统');
-  const pageType = 'BD_fire';
-  // const loading = ref(true);
-
-  // const url = ref('http://localhost:8088/');
-  // const moduleCodes = ['fanlocal', 'fanmain' /** 'vc', 'ar', 'va', 'ws', 'dw' */];
-
-  const configs = computed(() =>
-    cfgs.value.filter((_, index) => {
+  const cfgs = computed(() =>
+    configs.value.filter((_, index) => {
       return index !== 4 && index !== 3;
     })
   );
-  const configA = computed<any>(() =>
-    cfgs.value.find((_, index) => {
+  const cfgA = computed<any>(() =>
+    configs.value.find((_, index) => {
       return index === 3;
     })
   );
-  const configB = computed<any>(() =>
-    cfgs.value.find((_, index) => {
+  const cfgB = computed<any>(() =>
+    configs.value.find((_, index) => {
       return index === 4;
     })
   );
-  const { configs: cfgs, fetchConfigs } = useInitConfigs();
+  const { configs, fetchConfigs } = useInitConfigs();
+  const { mainTitle, data, updateData, updateEnhancedConfigs } = useInitPage('保德煤矿火灾预警系统');
+  let interval: number | undefined;
   // function hideLoading() {
   //   loading.value = false;
   // }
-  const homedata = ref<any>({});
-
   onMounted(() => {
-    // configs.value = testConfigB;
+    fetchConfigs('BD_fire').then(() => {
+      // configs.value = testConfigVent;
+      updateEnhancedConfigs(configs.value);
 
-    getDisHome({ dataList: 'fireAllMineWarn' }).then((r) => {
-      homedata.value = r;
+      getDisHome({
+        dataList: configs.value
+          .map((e) => e.deviceType)
+          .concat('fireAllMineWarn')
+          .join(','),
+      }).then(updateData);
     });
-    fetchConfigs(pageType);
+    setInterval(() => {
+      getDisHome({
+        dataList: configs.value
+          .map((e) => e.deviceType)
+          .concat('fireAllMineWarn')
+          .join(','),
+      }).then(updateData);
+    }, 60000);
+  });
+
+  onUnmounted(() => {
+    clearInterval(interval);
   });
 
   function redirectTo(url) {

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

@@ -23,9 +23,9 @@
         </div>
         <div class="tcontent-c">
           <div style="margin-bottom: 15px; color: #009bff; font-size: 24px; font-weight: bolder; letter-spacing: 10px">
-            {{ homedata.allMineWarn }}
+            {{ data.fireAllMineWarn }}
           </div>
-          <div style="color: #fff; font-size: 12px">自燃倾向性等级 : 自燃</div>
+          <!-- <div style="color: #fff; font-size: 12px">自燃倾向性等级 : 容易自燃</div> -->
         </div>
         <div class="tcontent-r">
           <div>火灾</div>
@@ -33,16 +33,16 @@
         </div>
       </div>
     </div>
-    <div class="right-t">
-      <div class="tcontent-l" @click="redirectTo('/grout-home')">
+    <!-- <div class="right-t">
+      <div class="tcontent-l" @click="redirectTo('https://bing.cn')">
         <div>智能</div>
-        <div>注浆系统</div>
+        <div>灌浆系统</div>
       </div>
-      <div class="tcontent-r" @click="redirectTo('/nitrogen-home')">
+      <div class="tcontent-r" @click="redirectTo('https://bing.cn')">
         <div>智能</div>
-        <div>注氮系统</div>
+        <div>注氟系统</div>
       </div>
-    </div>
+    </div> -->
     <ModuleBD
       v-for="cfg in configs"
       :key="cfg.deviceType"
@@ -50,54 +50,56 @@
       :module-data="cfg.moduleData"
       :module-name="cfg.moduleName"
       :device-type="cfg.deviceType"
+      :data="data"
       :visible="true"
-      :page-type="pageType"
     />
-    <div style="width: 1000px; height: 550px; position: absolute; left: calc(50% - 500px); top: 60px">
+    <div style="width: 1000px; height: 570px; position: absolute; left: calc(50% - 500px); top: 60px">
       <VentModal />
     </div>
   </div>
 </template>
 <script lang="ts" setup>
-  import { onMounted, ref } from 'vue';
+  import { onMounted, onUnmounted } from 'vue';
   // import { CaretDownOutlined } from '@ant-design/icons-vue';
   // import MonitorCenter from './components/MonitorCenter.vue';
-  // import { useInitConfigs } from './hooks/useInit';
+  import { useInitConfigs, useInitPage } from './hooks/useInit';
   import ModuleBD from './components/ModuleBD.vue';
-  import ModuleBDDual from './components/ModuleBDDual.vue';
-  import { testConfigWZFire } from './configurable.data.wz';
   import VentModal from '/@/components/vent/micro/ventModal.vue';
-  import { getBDFireData } from './configurable.api';
-  import { getToken } from '/@/utils/auth';
-
-  // import FramePage from '/@/views/sys/iframe/index.vue';
-  const frameRef = ref();
-  const mainTitle = ref('王庄煤矿火灾智能监测系统');
-  const pageType = 'BD_fire';
-  const loading = ref(true);
-
-  // const url = ref('http://localhost:8088/');
-  // const moduleCodes = ['fanlocal', 'fanmain' /** 'vc', 'ar', 'va', 'ws', 'dw' */];
-
-  const configs = ref(testConfigWZFire);
-  // const { configs, fetchConfigs } = useInitConfigs();
-  function hideLoading() {
-    loading.value = false;
-  }
-  const homedata = ref<any>({});
+  import { getDisHome } from './configurable.api';
+  import { testConfigWZFire } from './configurable.data.wz';
+  // import { getToken } from '/@/utils/auth';
 
+  const { configs } = useInitConfigs();
+  const { mainTitle, data, updateData, updateEnhancedConfigs } = useInitPage('王庄煤矿火灾智能监测系统');
+  let interval: number | undefined;
+  // function hideLoading() {
+  //   loading.value = false;
+  // }
   onMounted(() => {
-    // configs.value = testConfigB;
+    // fetchConfigs('WZ_fire').then(() => {
+    configs.value = testConfigWZFire;
+    updateEnhancedConfigs(configs.value);
 
-    getBDFireData({}).then((r) => {
-      homedata.value = r;
-    });
-    // fetchConfigs(pageType);
+    getDisHome({
+      dataList: configs.value
+        .map((e) => e.deviceType)
+        .concat('fireAllMineWarn')
+        .join(','),
+    }).then(updateData);
+    // });
+    setInterval(() => {
+      getDisHome({
+        dataList: configs.value
+          .map((e) => e.deviceType)
+          .concat('fireAllMineWarn')
+          .join(','),
+      }).then(updateData);
+    }, 60000);
   });
 
-  function redirectTo(url) {
-    window.open(url);
-  }
+  onUnmounted(() => {
+    clearInterval(interval);
+  });
 </script>
 <style lang="less" scoped>
   @font-face {
@@ -175,7 +177,7 @@
   .left-t {
     position: absolute;
     height: 115px;
-    top: 40px;
+    top: 50px;
     width: 450px;
     background-image: url('/@/assets/images/home-container/configurable/firehome/qkjaq.png');
     background-color: #000723;
@@ -234,8 +236,7 @@
   }
   .right-t {
     position: absolute;
-    // height: 160px;
-    height: 115px;
+    height: 160px;
     right: 0;
     top: 50px;
     width: 450px;
@@ -247,12 +248,11 @@
     display: flex;
     align-items: center;
     justify-content: space-around;
-    z-index: 1;
 
     .tcontent-l {
       flex: 1;
-      height: 100%;
-      font-size: 16px;
+      height: 70%;
+      font-size: 20px;
       font-weight: bold;
       background-image: url(/@/assets/images/home-container/configurable/firehome/img-5.png),
         url(/@/assets/images/home-container/configurable/firehome/ggxt.png);
@@ -264,13 +264,14 @@
         center,
         center top;
       text-align: center;
-      padding-top: 35px;
-      line-height: 40px;
+      padding-top: 40px;
+      line-height: 50px;
+      cursor: pointer;
     }
     .tcontent-r {
       flex: 1;
-      height: 100%;
-      font-size: 16px;
+      height: 70%;
+      font-size: 20px;
       font-weight: bold;
       background-image: url(/@/assets/images/home-container/configurable/firehome/img-5.png),
         url(/@/assets/images/home-container/configurable/firehome/zjxt.png);
@@ -282,8 +283,9 @@
         center,
         center top;
       text-align: center;
-      padding-top: 35px;
-      line-height: 40px;
+      padding-top: 40px;
+      line-height: 50px;
+      cursor: pointer;
     }
   }
 

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

@@ -0,0 +1,48 @@
+import { get, isNil } from 'lodash-es';
+
+/** 根据配置中的 formatter 将文本格式并返回 */
+export function getFormattedText(data: any, formatter: string, trans?: Record<string, 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);
+
+  // 如果 formatter 中没有需要动态获取的值则直接返回
+  if (!res) return formatter;
+
+  const [__, prop] = res;
+  const val = defaultValue === undefined ? '-' : defaultValue;
+  const txt = get(data, prop);
+
+  // 如果指明了需要进行翻译，那么根据 txt 的值查找翻译内容，必要时进行二次翻译
+  if (trans) {
+    const translated = get(trans, txt, trans.default);
+    // 如果查不出翻译内容则返回原本的值
+    if (translated === undefined) return txt;
+    const result = getFormattedText(data, translated);
+    return formatter.replace(exp, isNil(result) ? val : result);
+  }
+  return formatter.replace(exp, isNil(txt) ? val : txt);
+}
+
+/** 获取 formatter 需要取的源 prop，用于在一些不支持 formatter 的组件中使用 */
+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;
+}
+
+// 获取模块所依赖的数据的方法
+export function getData(raw, readFrom, parser?) {
+  const result = readFrom ? get(raw, readFrom) : raw;
+
+  switch (parser) {
+    case 'json':
+      return JSON.parse(result);
+    default:
+      return result;
+  }
+}

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

@@ -2,9 +2,13 @@ import { computed, ref } from 'vue';
 import { list as cfgList } from '@/views/vent/deviceManager/configurationTable/configuration.api';
 // import { list } from '@/views/vent/deviceManager/deviceTable/device.api';
 import { Config } from '@/views/vent/deviceManager/configurationTable/types';
-import { getDisHome, getHomeData } from '../configurable.api';
-import { getFormattedText } from '../../../deviceManager/configurationTable/adapters';
+import { getData, getFormattedText } from './helper';
 import { get } from 'lodash-es';
+
+interface EnhancedConfig extends Config {
+  visible: boolean;
+}
+
 // import mapComponent from './components/3Dmap/index.vue';
 
 // export function useInitConfig(deviceType: string) {
@@ -59,8 +63,150 @@ export function useInitConfigs() {
 }
 
 /** 初始化设备信息，包含了适配了 header config 的下拉框选项、已选择设备的各个详细子项等，如果模块不需要展示 header 那么会将全部信息提供给已选择设备以供消费 */
-export function useInitDevices(devicekind: string, config: Config['moduleData']) {
-  const { header, mock } = config;
+// export function useInitDevices(devicekind: string, config: Config['moduleData']) {
+//   const { header, mock } = config;
+//   const devices = ref<Record<string, any>[]>([]);
+//   const options = ref<{ label: string; value: string }[]>([]);
+//   const selectedDeviceID = ref<string>('');
+
+//   const selectedDevice = computed(() => {
+//     return (
+//       devices.value.find((e) => {
+//         return e.id === selectedDeviceID.value;
+//       }) || {}
+//     );
+//   });
+//   const selectedDeviceLabel = computed(() => {
+//     const res = options.value.find((e) => {
+//       return e.value === selectedDeviceID.value;
+//     });
+//     return res ? res.label : '';
+//   });
+//   const selectedDeviceSlot = computed(() => {
+//     return getFormattedText(selectedDevice.value, header.slot.value);
+//   });
+
+//   // 获取设备数据，赋值并以选项格式返回给 Header 消费
+//   function fetchDevices({ init = false } = {}) {
+//     const { value } = header.selector;
+//     const promise = mock ? Promise.resolve(mock) : getHomeData({});
+//     return promise.then((result) => {
+//       if (header.show && header.showSelector) {
+//         // 如果配置里指明需要 header，检验后初始化设备信息
+//         const records: Record<string, any>[] = get(result, devicekind, []);
+//         devices.value = records.map((e, i) => {
+//           return {
+//             id: i,
+//             ...e,
+//           };
+//         });
+//         options.value = devices.value.map((e) => {
+//           return {
+//             label: getFormattedText(e, value),
+//             value: e.id,
+//           };
+//         });
+//         if (init) {
+//           selectedDeviceID.value = options.value[0]?.value;
+//         }
+//       } else {
+//         // 没有的话按默认的，将返回结果直接作为一整个设备信息供模块使用
+//         const record = {
+//           ...result,
+//           id: '00000000',
+//         };
+//         devices.value = [record];
+//         selectedDeviceID.value = record.id;
+//       }
+//     });
+//   }
+
+//   return {
+//     fetchDevices,
+//     selectedDevice,
+//     selectedDeviceID,
+//     selectedDeviceSlot,
+//     selectedDeviceLabel,
+//     options,
+//   };
+// }
+
+/** 保德专用-初始化设备信息，包含了适配了 header config 的下拉框选项、已选择设备的各个详细子项等，如果模块不需要展示 header 那么会将全部信息提供给已选择设备以供消费 */
+// export function useInitDevicesBD(devicekind: string, config: Config['moduleData']) {
+//   const { header, mock } = config;
+//   const devices = ref<Record<string, any>[]>([]);
+//   const options = ref<{ label: string; value: string }[]>([]);
+//   const selectedDeviceID = ref<string>('');
+
+//   const selectedDevice = computed(() => {
+//     return (
+//       devices.value.find((e) => {
+//         return e.id === selectedDeviceID.value;
+//       }) || {}
+//     );
+//   });
+//   const selectedDeviceLabel = computed(() => {
+//     const res = options.value.find((e) => {
+//       return e.value === selectedDeviceID.value;
+//     });
+//     return res ? res.label : '';
+//   });
+//   const selectedDeviceSlot = computed(() => {
+//     return getFormattedText(selectedDevice.value, header.slot.value);
+//   });
+
+//   // 获取设备数据，赋值并以选项格式返回给 Header 消费
+//   function fetchDevices({ init = false } = {}) {
+//     const { value } = header.selector;
+//     const promise = mock ? Promise.resolve(mock) : getDisHome({ dataList: devicekind.split('.')[0] });
+//     return promise.then((result) => {
+//       if (header.show && header.showSelector) {
+//         // 如果配置里指明需要 header，检验后初始化设备信息
+//         const records: Record<string, any>[] = get(result, devicekind, []);
+//         devices.value = records.map((e, i) => {
+//           return {
+//             id: i,
+//             ...e,
+//           };
+//         });
+//         options.value = devices.value.map((e) => {
+//           return {
+//             label: getFormattedText(e, value),
+//             value: e.id,
+//           };
+//         });
+//         if (init) {
+//           selectedDeviceID.value = options.value[0]?.value;
+//         }
+//       } else {
+//         // 没有的话按默认的，将返回结果直接作为一整个设备信息供模块使用
+//         const record = {
+//           ...result,
+//           id: '00000000',
+//         };
+//         devices.value = [record];
+//         selectedDeviceID.value = record.id;
+//       }
+//     });
+//   }
+
+//   return {
+//     fetchDevices,
+//     selectedDevice,
+//     selectedDeviceID,
+//     selectedDeviceSlot,
+//     selectedDeviceLabel,
+//     options,
+//   };
+// }
+
+/**
+ * 根据模块的配置初始化基准 Module 组件需要的数据，包括选择框、设备等信息
+ * @param data api 返回的数据
+ * @param config 本模块的配置
+ */
+export function useInitModule(deviceType: string, moduleData: Config['moduleData']) {
+  const { header, mock } = moduleData;
   const devices = ref<Record<string, any>[]>([]);
   const options = ref<{ label: string; value: string }[]>([]);
   const selectedDeviceID = ref<string>('');
@@ -79,46 +225,44 @@ export function useInitDevices(devicekind: string, config: Config['moduleData'])
     return res ? res.label : '';
   });
   const selectedDeviceSlot = computed(() => {
-    return getFormattedText(selectedDevice.value, header.slot.value);
+    return getFormattedText(selectedDevice.value, header.slot.value, header.slot.trans);
   });
 
-  // 获取设备数据，赋值并以选项格式返回给 Header 消费
-  function fetchDevices({ init = false } = {}) {
-    const { value } = header.selector;
-    const promise = mock ? Promise.resolve(mock) : getHomeData({});
-    return promise.then((result) => {
-      if (header.show && header.showSelector) {
-        // 如果配置里指明需要 header，检验后初始化设备信息
-        const records: Record<string, any>[] = get(result, devicekind, []);
-        devices.value = records.map((e, i) => {
-          return {
-            id: i,
-            ...e,
-          };
-        });
-        options.value = devices.value.map((e) => {
-          return {
-            label: getFormattedText(e, value),
-            value: e.id,
-          };
-        });
-        if (init) {
-          selectedDeviceID.value = options.value[0]?.value;
-        }
-      } else {
-        // 没有的话按默认的，将返回结果直接作为一整个设备信息供模块使用
-        const record = {
-          ...result,
-          id: '00000000',
+  function init(data) {
+    const result = mock || data;
+    if (header.show && header.selector.show) {
+      // 如果配置里指明需要 header，检验后初始化设备信息
+      const records: Record<string, any>[] = getData(get(result, deviceType, []), header.readFrom) || [];
+      devices.value = records.map((e, i) => {
+        return {
+          id: i,
+          ...e,
         };
-        devices.value = [record];
-        selectedDeviceID.value = record.id;
-      }
-    });
+      });
+      options.value = devices.value.map((e) => {
+        return {
+          label: getFormattedText(e, header.selector.value),
+          value: e.id,
+        };
+      });
+    } else {
+      // 没有的话按默认的，将返回结果直接作为一整个设备信息供模块使用
+      const record = {
+        id: '00000000',
+        ...result,
+      };
+      devices.value = [record];
+      options.value = [
+        {
+          value: record.id,
+          label: '--',
+        },
+      ];
+    }
   }
 
   return {
-    fetchDevices,
+    init,
     selectedDevice,
     selectedDeviceID,
     selectedDeviceSlot,
@@ -127,101 +271,35 @@ export function useInitDevices(devicekind: string, config: Config['moduleData'])
   };
 }
 
-/** 保德专用-初始化设备信息，包含了适配了 header config 的下拉框选项、已选择设备的各个详细子项等，如果模块不需要展示 header 那么会将全部信息提供给已选择设备以供消费 */
-export function useInitDevicesBD(devicekind: string, config: Config['moduleData']) {
-  const { header, mock } = config;
-  const devices = ref<Record<string, any>[]>([]);
-  const options = ref<{ label: string; value: string }[]>([]);
-  const selectedDeviceID = ref<string>('');
+// 初始化各个基准首页的辅助字段
+export function useInitPage(title: string) {
+  const mainTitle = ref(title);
+  const enhancedConfigs = ref<EnhancedConfig[]>([]);
+  const data = ref<any>({});
 
-  const selectedDevice = computed(() => {
-    return (
-      devices.value.find((e) => {
-        return e.id === selectedDeviceID.value;
-      }) || {}
-    );
-  });
-  const selectedDeviceLabel = computed(() => {
-    const res = options.value.find((e) => {
-      return e.value === selectedDeviceID.value;
-    });
-    return res ? res.label : '';
-  });
-  const selectedDeviceSlot = computed(() => {
-    return getFormattedText(selectedDevice.value, header.slot.value);
+  const hiddenList = computed(() => {
+    return enhancedConfigs.value.filter((e) => e.visible === false);
   });
 
-  // 获取设备数据，赋值并以选项格式返回给 Header 消费
-  function fetchDevices({ init = false } = {}) {
-    const { value } = header.selector;
-    const promise = mock ? Promise.resolve(mock) : getDisHome({ dataList: devicekind.split('.')[0] });
-    return promise.then((result) => {
-      if (header.show && header.showSelector) {
-        // 如果配置里指明需要 header，检验后初始化设备信息
-        const records: Record<string, any>[] = get(result, devicekind, []);
-        devices.value = records.map((e, i) => {
-          return {
-            id: i,
-            ...e,
-          };
-        });
-        options.value = devices.value.map((e) => {
-          return {
-            label: getFormattedText(e, value),
-            value: e.id,
-          };
-        });
-        if (init) {
-          selectedDeviceID.value = options.value[0]?.value;
-        }
-      } else {
-        // 没有的话按默认的，将返回结果直接作为一整个设备信息供模块使用
-        const record = {
-          ...result,
-          id: '00000000',
-        };
-        devices.value = [record];
-        selectedDeviceID.value = record.id;
-      }
+  function updateEnhancedConfigs(configs: Config[]) {
+    enhancedConfigs.value = configs.map((c) => {
+      return {
+        visible: true,
+        ...c,
+      };
     });
   }
 
+  function updateData(d: any) {
+    data.value = d;
+  }
+
   return {
-    fetchDevices,
-    selectedDevice,
-    selectedDeviceID,
-    selectedDeviceSlot,
-    selectedDeviceLabel,
-    options,
+    mainTitle,
+    data,
+    enhancedConfigs,
+    hiddenList,
+    updateEnhancedConfigs,
+    updateData,
   };
 }
-
-/**
- * 根据模块的配置初始化基准 Module 组件需要的数据，包括选择框、设备等信息
- * @param apidata api 返回的数据
- * @param config 本模块的配置
- */
-// export function useInitModule(moduleData: Config['moduleData'], apidata?: any) {
-//   const { header, mock } = moduleData;
-//   const data = mock || apidata;
-//   const devices = ref<Record<string, any>[]>([]);
-//   const options = ref<{ label: string; value: string }[]>([]);
-//   const selectedDeviceID = ref<string>('');
-
-//   const selectedDevice = computed(() => {
-//     return (
-//       devices.value.find((e) => {
-//         return e.id === selectedDeviceID.value;
-//       }) || {}
-//     );
-//   });
-//   const selectedDeviceLabel = computed(() => {
-//     const res = options.value.find((e) => {
-//       return e.value === selectedDeviceID.value;
-//     });
-//     return res ? res.label : '';
-//   });
-//   const selectedDeviceSlot = computed(() => {
-//     return getFormattedText(selectedDevice.value, header.slot.value);
-//   });
-// }

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

@@ -23,6 +23,7 @@
         :module-data="cfg.moduleData"
         :module-name="cfg.moduleName"
         :device-type="cfg.deviceType"
+        :data="data"
         :visible="true"
       />
     </template>
@@ -34,6 +35,7 @@
         :module-data="cfg.moduleData"
         :module-name="cfg.moduleName"
         :device-type="cfg.deviceType"
+        :data="data"
         :visible="true"
       />
     </template>
@@ -47,6 +49,7 @@
         :module-data="cfg.moduleData"
         :module-name="cfg.moduleName"
         :device-type="cfg.deviceType"
+        :data="data"
         @close="cfg.visible = false"
       />
       <!-- 下面是用于呼出已隐藏的模块的按钮 -->
@@ -62,42 +65,36 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { computed, onMounted, ref } from 'vue';
+  import { onMounted, onUnmounted } from 'vue';
   // import { CaretDownOutlined } from '@ant-design/icons-vue';
   // import MonitorCenter from './components/MonitorCenter.vue';
-  import { useInitConfigs } from './hooks/useInit';
-  import { Config } from '../../deviceManager/configurationTable/types';
+  import { useInitConfigs, useInitPage } from './hooks/useInit';
   import ModuleEnhanced from './components/ModuleEnhanced.vue';
   import ModuleOriginal from './components/ModuleOriginal.vue';
   import ModuleCommon from './components/ModuleCommon.vue';
-  // import { testConfigBuErTai } from './configurable.data';
   // import { useRoute } from 'vue-router';
   import VentModal from '/@/components/vent/micro/ventModal.vue';
+  import { getHomeData } from './configurable.api';
+  import { testConfigVent } from './configurable.data';
 
-  interface EnhancedConfig extends Config {
-    visible: boolean;
-  }
-
-  const mainTitle = ref('智能通风管控系统');
+  const { configs, isOriginal, isCommon, fetchConfigs } = useInitConfigs();
+  const { mainTitle, enhancedConfigs, hiddenList, data, updateData, updateEnhancedConfigs } = useInitPage('智能通风管控系统');
+  let interval: number | undefined;
 
-  // const moduleCodes = ['fanlocal', 'fanmain' /** 'vc', 'ar', 'va', 'ws', 'dw' */];
+  onMounted(() => {
+    // fetchConfigs('vent').then(() => {
+    configs.value = testConfigVent;
+    updateEnhancedConfigs(configs.value);
 
-  const hiddenList = computed(() => {
-    return enhancedConfigs.value.filter((e) => e.visible === false);
+    getHomeData({}).then(updateData);
+    // });
+    setInterval(() => {
+      getHomeData({}).then(updateData);
+    }, 6000);
   });
-  const { configs, isOriginal, isCommon, fetchConfigs } = useInitConfigs();
-  const enhancedConfigs = ref<EnhancedConfig[]>([]);
 
-  onMounted(() => {
-    // configs.value = testConfigB;
-    fetchConfigs('vent').then(() => {
-      enhancedConfigs.value = configs.value.map((c) => {
-        return {
-          visible: true,
-          ...c,
-        };
-      });
-    });
+  onUnmounted(() => {
+    clearInterval(interval);
   });
 </script>
 <style lang="less" scoped>

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

@@ -23,6 +23,7 @@
         :module-data="cfg.moduleData"
         :module-name="cfg.moduleName"
         :device-type="cfg.deviceType"
+        :data="data"
         :visible="true"
       />
     </template>
@@ -34,6 +35,7 @@
         :module-data="cfg.moduleData"
         :module-name="cfg.moduleName"
         :device-type="cfg.deviceType"
+        :data="data"
         :visible="true"
       />
     </template>
@@ -47,6 +49,7 @@
         :module-data="cfg.moduleData"
         :module-name="cfg.moduleName"
         :device-type="cfg.deviceType"
+        :data="data"
         @close="cfg.visible = false"
       />
       <!-- 下面是用于呼出已隐藏的模块的按钮 -->
@@ -62,42 +65,36 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { computed, onMounted, ref } from 'vue';
+  import { onMounted, onUnmounted } from 'vue';
   // import { CaretDownOutlined } from '@ant-design/icons-vue';
   // import MonitorCenter from './components/MonitorCenter.vue';
-  import { useInitConfigs } from './hooks/useInit';
-  import { Config } from '../../deviceManager/configurationTable/types';
+  import { useInitConfigs, useInitPage } from './hooks/useInit';
   import ModuleEnhanced from './components/ModuleEnhanced.vue';
   import ModuleOriginal from './components/ModuleOriginal.vue';
   import ModuleCommon from './components/ModuleCommon.vue';
-  // import { testConfigBuErTai } from './configurable.data';
   // import { useRoute } from 'vue-router';
   import VentModal from '/@/components/vent/micro/ventModal.vue';
+  import { getHomeData } from './configurable.api';
+  // import { testConfigVent } from './configurable.data';
 
-  interface EnhancedConfig extends Config {
-    visible: boolean;
-  }
-
-  const mainTitle = ref('智能通风管控系统');
-
-  // const moduleCodes = ['fanlocal', 'fanmain' /** 'vc', 'ar', 'va', 'ws', 'dw' */];
-
-  const hiddenList = computed(() => {
-    return enhancedConfigs.value.filter((e) => e.visible === false);
-  });
   const { configs, isOriginal, isCommon, fetchConfigs } = useInitConfigs();
-  const enhancedConfigs = ref<EnhancedConfig[]>([]);
+  const { mainTitle, enhancedConfigs, hiddenList, data, updateData, updateEnhancedConfigs } = useInitPage('智能通风管控系统');
+  let interval: number | undefined;
 
   onMounted(() => {
-    // configs.value = testConfigB;
     fetchConfigs('vent').then(() => {
-      enhancedConfigs.value = configs.value.map((c) => {
-        return {
-          visible: true,
-          ...c,
-        };
-      });
+      // configs.value = testConfigVent;
+      updateEnhancedConfigs(configs.value);
+
+      getHomeData({}).then(updateData);
     });
+    setInterval(() => {
+      getHomeData({}).then(updateData);
+    }, 60000);
+  });
+
+  onUnmounted(() => {
+    clearInterval(interval);
   });
 </script>
 <style lang="less" scoped>