[Feat 0000] 可配置首页配置优化即组件适配，注释添加

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

@@ -13,7 +13,7 @@ export function parseFormDataToParams(formData: Record<string, number | string |
   return params;
 }
 
-/** 将 api.list 返回的数据格式化，格式化之后可以支持对应的表单以用，该方法会修改源数据 */
+/** 将 api.list 返回的数据格式化，格式化之后可以支持对应的表单使用，该方法会修改源数据 */
 export function parseModuleData(listData: { moduleData: ModuleData; showStyle: ShowStyle }) {
   _.forEach(listData.showStyle, (v, k) => {
     listData[`showStyle.${k}`] = _.get(
@@ -29,43 +29,6 @@ export function parseModuleData(listData: { moduleData: ModuleData; showStyle: S
   return listData;
 }
 
-// export function parseModuleDataToConfig(moduleData: ModuleData): {
-//   chart: { label: string; prop: string }[];
-//   list: { label: string; prop: string }[];
-// };
-// export function parseModuleDataToConfig(
-//   moduleData: ModuleData,
-//   data: any
-// ): {
-//   chart: { label: string; value: string }[];
-//   list: { label: string; value: string }[];
-// };
-
-/** 将 api.list 返回的 moduleData 格式化为配置对象，如果传入了 data，那么会返回带数据的配置，否则返回默认配置，这些配置通常可用于页面展示 */
-// export function parseModuleDataToConfig(moduleData: ModuleData): {
-//   chart: { label: string; prop: string }[];
-//   list: { label: string; prop: string }[];
-// } {
-//   // if (data) {
-//   //   return {
-//   //     chart: _.map(_.get(moduleData, 'chart', []), (label, prop) => {
-//   //       return { label, value: _.get(data, prop, '/') };
-//   //     }),
-//   //     list: _.map(_.get(moduleData, 'list', []), (label, prop) => {
-//   //       return { label, value: _.get(data, prop, '/') };
-//   //     }),
-//   //   };
-//   // }
-//   return {
-//     chart: _.map(_.get(moduleData, 'chart', []), (label, prop) => {
-//       return { label, prop };
-//     }),
-//     list: _.map(_.get(moduleData, 'list', []), (label, prop) => {
-//       return { label, prop };
-//     }),
-//   };
-// }
-
 /** 根据配置中的 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']
@@ -78,6 +41,7 @@ export function getFormattedText(data: any, formatter: string, defaultValue?: an
   return formatter.replace(exp, _.get(data, prop, val));
 }
 
+/** 获取 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;

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

@@ -8,11 +8,14 @@ export const ModuleSizeMap = {
   'width:1000px;height:280px;': '横向拉伸(1000*280)',
   'width:1920px;height:280px;': '横向填充(1920*280)',
 };
+
+/** 默认的模块宽高选项 */
 export const ModuleSizeOptions = _.map(ModuleSizeMap, (v, k) => ({
   value: k,
   label: v,
 }));
 
+/** 默认的模块版本选项，即外边框样式 */
 export const ModuleVersionOptions = _.map(['原版', '新版'], (k) => ({
   value: k,
   label: k,
@@ -28,11 +31,14 @@ export const ModulePositionMap = {
   'top:640px;right:0;': '右下',
   'top:640px;left:460px;': '中下',
 };
+
+/** 默认的模块定位选项 */
 export const ModulePositionOptions = _.map(ModulePositionMap, (v, k) => ({
   value: k,
   label: v,
 }));
 
+/** 默认的模块预设选项，每个预设对应着一种写好的配置 */
 export const ModulePresetOptions = _.map(
   [
     '告示版（1*1）',
@@ -50,6 +56,8 @@ export const ModulePresetOptions = _.map(
     label: k,
   })
 );
+
+/** 默认的模块预设表 */
 export const ModulePresetMap: Record<
   string,
   {
@@ -64,10 +72,10 @@ export const ModulePresetMap: Record<
         showSelector: true,
         showSlot: true,
         selector: {
-          prop: '${strinstallpos}',
+          value: '${strinstallpos}',
         },
         slot: {
-          prop: '${strinstallpos}',
+          value: '${strinstallpos}',
         },
       },
       background: {
@@ -83,11 +91,11 @@ export const ModulePresetMap: Record<
           readFrom: 'readData',
           items: [
             {
-              prop: '${Fan1StartStatus_str}',
+              value: '${Fan1StartStatus_str}',
               label: '一号机状态',
             },
             {
-              prop: '${Fan2StartStatus_str}',
+              value: '${Fan2StartStatus_str}',
               label: '二号机状态',
             },
           ],
@@ -111,10 +119,10 @@ export const ModulePresetMap: Record<
         showSelector: true,
         showSlot: true,
         selector: {
-          prop: '${strinstallpos}',
+          value: '${strinstallpos}',
         },
         slot: {
-          prop: '${strinstallpos}',
+          value: '${strinstallpos}',
         },
       },
       background: {
@@ -129,15 +137,15 @@ export const ModulePresetMap: Record<
         {
           type: 'line',
           readFrom: 'majorpath.paths',
-          xAxis: [{ prop: '${name}' }],
+          xAxis: [{ label: '${name}' }],
           yAxis: [
             { label: 'Drag', align: 'left' },
             { label: 'M3', align: 'right' },
           ],
           series: [
-            { label: 'Drag', prop: '${drag}' },
-            { label: 'M3', prop: '${m3}' },
-            // { label: '回2', prop: '${hui2}' },
+            { label: 'Drag', value: '${drag}' },
+            { label: 'M3', value: '${m3}' },
+            // { label: '回2', value: '${hui2}' },
           ],
         },
       ],
@@ -157,10 +165,10 @@ export const ModulePresetMap: Record<
         showSelector: true,
         showSlot: true,
         selector: {
-          prop: '${strinstallpos}',
+          value: '${strinstallpos}',
         },
         slot: {
-          prop: '${strinstallpos}',
+          value: '${strinstallpos}',
         },
       },
       background: {
@@ -175,15 +183,15 @@ export const ModulePresetMap: Record<
         {
           type: 'line_area',
           readFrom: 'majorpath.paths',
-          xAxis: [{ prop: '${name}' }],
+          xAxis: [{ label: '${name}' }],
           yAxis: [
             { label: 'Drag', align: 'left' },
             { label: 'M3', align: 'right' },
           ],
           series: [
-            { label: 'Drag', prop: '${drag}' },
-            { label: 'M3', prop: '${m3}' },
-            // { label: '回2', prop: '${hui2}' },
+            { label: 'Drag', value: '${drag}' },
+            { label: 'M3', value: '${m3}' },
+            // { label: '回2', value: '${hui2}' },
           ],
         },
       ],
@@ -201,10 +209,10 @@ export const ModulePresetMap: Record<
         showSelector: true,
         showSlot: true,
         selector: {
-          prop: '${strinstallpos}',
+          value: '${strinstallpos}',
         },
         slot: {
-          prop: '${strinstallpos}',
+          value: '${strinstallpos}',
         },
       },
       background: {
@@ -222,9 +230,9 @@ export const ModulePresetMap: Record<
           xAxis: [],
           yAxis: [],
           series: [
-            { label: 'Drag', prop: '${drag}' },
-            { label: 'M3', prop: '${m3}' },
-            // { label: '回2', prop: '${hui2}' },
+            { label: 'Drag', value: '${drag}' },
+            { label: 'M3', value: '${m3}' },
+            // { label: '回2', value: '${hui2}' },
           ],
         },
       ],
@@ -242,10 +250,10 @@ export const ModulePresetMap: Record<
         showSelector: false,
         showSlot: false,
         selector: {
-          prop: '${strinstallpos}',
+          value: '${strinstallpos}',
         },
         slot: {
-          prop: '${strinstallpos}',
+          value: '${strinstallpos}',
         },
       },
       background: {
@@ -264,9 +272,9 @@ export const ModulePresetMap: Record<
         {
           type: 'bar',
           readFrom: 'sysdata.history',
-          xAxis: [{ prop: '${time}' }],
+          xAxis: [{ label: '${time}' }],
           yAxis: [{ label: '回1', align: 'left' }],
-          series: [{ label: '回1', prop: '${hui1}' }],
+          series: [{ label: '回1', value: '${hui1}' }],
         },
       ],
     },
@@ -279,10 +287,10 @@ export const ModulePresetMap: Record<
         showSelector: false,
         showSlot: false,
         selector: {
-          prop: '${devicePos}',
+          value: '${devicePos}',
         },
         slot: {
-          prop: '${devicePos}',
+          value: '${devicePos}',
         },
       },
       background: {
@@ -298,25 +306,25 @@ export const ModulePresetMap: Record<
           readFrom: 'device',
           items: [
             {
-              prop: '${gate}',
+              value: '${gate}',
               label: '风门',
               // label: '光纤预警',
               color: 'blue',
             },
             {
-              prop: '${window}',
+              value: '${window}',
               label: '风窗',
               // label: '喷雾开启数',
               color: 'blue',
             },
             {
-              prop: '${windrect}',
+              value: '${windrect}',
               label: '测风',
               // label: '联网数量',
               color: 'blue',
             },
             {
-              prop: '${stationtype}',
+              value: '${stationtype}',
               label: '空位',
               // label: '断网数量',
               color: 'blue',
@@ -339,10 +347,10 @@ export const ModulePresetMap: Record<
         showSelector: false,
         showSlot: true,
         selector: {
-          prop: '${strinstallpos}',
+          value: '${strinstallpos}',
         },
         slot: {
-          prop: '${网络异常：}${netstatus.val} 台',
+          value: '${网络异常：}${netstatus.val} 台',
         },
       },
       background: {
@@ -364,31 +372,31 @@ export const ModulePresetMap: Record<
           items: [
             {
               label: '正常',
-              prop: '${blue}.val',
+              value: '${blue}.val',
               color: 'blue',
               info: '',
             },
             {
               label: '告警',
-              prop: '${orange}.val',
+              value: '${orange}.val',
               color: 'orange',
               info: '',
             },
             {
               label: '报警',
-              prop: '${yellow}.val',
+              value: '${yellow}.val',
               color: 'yellow',
               info: '',
             },
             {
               label: '危险',
-              prop: '${red}.val',
+              value: '${red}.val',
               color: 'red',
               info: '',
             },
             {
               label: '错误',
-              prop: '${alarm}.val',
+              value: '${alarm}.val',
               color: 'green',
               info: '',
             },
@@ -405,10 +413,10 @@ export const ModulePresetMap: Record<
         showSelector: true,
         showSlot: true,
         selector: {
-          prop: '${devicePos}',
+          value: '${devicePos}',
         },
         slot: {
-          prop: '${devicePos}',
+          value: '${devicePos}',
         },
       },
       background: {
@@ -428,19 +436,19 @@ export const ModulePresetMap: Record<
           readFrom: 'history',
           columns: [
             {
-              prop: '${cate}',
+              prop: 'cate',
               label: '类别',
             },
             {
-              prop: '${temp}',
+              prop: 'temp',
               label: '温度',
             },
             {
-              prop: '${wspd}',
+              prop: 'wspd',
               label: '风速',
             },
             {
-              prop: '${spst}',
+              prop: 'spst',
               label: '喷雾状态',
             },
           ],
@@ -457,10 +465,10 @@ export const ModulePresetMap: Record<
         showSelector: true,
         showSlot: false,
         selector: {
-          prop: '${strinstallpos}',
+          value: '${strinstallpos}',
         },
         slot: {
-          prop: '${strinstallpos}',
+          value: '${strinstallpos}',
         },
       },
       background: {
@@ -486,10 +494,10 @@ export const ModulePresetMap: Record<
         showSelector: false,
         showSlot: true,
         selector: {
-          prop: '${strinstallpos}',
+          value: '${strinstallpos}',
         },
         slot: {
-          prop: '${网络异常：}${netstatus.val} 台',
+          value: '${网络异常：}${netstatus.val} 台',
         },
       },
       background: {
@@ -510,13 +518,13 @@ export const ModulePresetMap: Record<
           items: [
             {
               label: '堵塞状态',
-              prop: '${fsectarea}',
+              value: '${fsectarea}',
               color: 'yellow',
               info: '',
             },
             {
               label: '甲烷浓度',
-              prop: '${stationname}',
+              value: '${stationname}',
               color: 'yellow',
               info: '',
             },
@@ -530,37 +538,37 @@ export const ModulePresetMap: Record<
           items: [
             {
               label: '火情状态',
-              prop: '${fsectarea}',
+              value: '${fsectarea}',
               color: 'yellow',
               info: '',
             },
             {
               label: '回采位置',
-              prop: '${stationname}',
+              value: '${stationname}',
               color: 'white',
               info: '',
             },
             {
               label: '硐室火情',
-              prop: '${stationtype}',
+              value: '${stationtype}',
               color: 'blue',
               info: '',
             },
             {
               label: '联动设备状态',
-              prop: '${typeName}',
+              value: '${typeName}',
               color: 'blue',
               info: '',
             },
           ],
           galleryItems: [
             {
-              prop: '${低风险}',
+              value: '${低风险}',
               label: '',
               color: 'white',
             },
             {
-              prop: '${CO}',
+              value: '${CO}',
               label: '',
               color: 'white',
             },
@@ -580,10 +588,10 @@ export const ModulePresetMap: Record<
         showSelector: true,
         showSlot: true,
         selector: {
-          prop: '${devicePos}',
+          value: '${devicePos}',
         },
         slot: {
-          prop: '${devicePos}',
+          value: '${devicePos}',
         },
       },
       background: {
@@ -601,73 +609,73 @@ export const ModulePresetMap: Record<
           items: [
             {
               label: '火情状态',
-              prop: '${fsectarea}',
+              value: '${fsectarea}',
               color: 'yellow',
               info: '',
             },
             {
               label: '回采位置',
-              prop: '${stationname}',
+              value: '${stationname}',
               color: 'white',
               info: '',
             },
             {
               label: '硐室火情',
-              prop: '${stationtype}',
+              value: '${stationtype}',
               color: 'blue',
               info: '',
             },
             {
               label: '联动设备状态',
-              prop: '${typeName}',
+              value: '${typeName}',
               color: 'blue',
               info: '',
             },
             {
               label: '火情状态',
-              prop: '${fsectarea}',
+              value: '${fsectarea}',
               color: 'yellow',
               info: '',
             },
             {
               label: '回采位置',
-              prop: '${stationname}',
+              value: '${stationname}',
               color: 'white',
               info: '',
             },
             {
               label: '硐室火情',
-              prop: '${stationtype}',
+              value: '${stationtype}',
               color: 'blue',
               info: '',
             },
             {
               label: '联动设备状态',
-              prop: '${typeName}',
+              value: '${typeName}',
               color: 'blue',
               info: '',
             },
             // {
             //   label: '火情状态',
-            //   prop: '${fsectarea}',
+            //   value: '${fsectarea}',
             //   color: 'yellow',
             //   info: '',
             // },
             // {
             //   label: '回采位置',
-            //   prop: '${stationname}',
+            //   value: '${stationname}',
             //   color: 'white',
             //   info: '',
             // },
             // {
             //   label: '硐室火情',
-            //   prop: '${stationtype}',
+            //   value: '${stationtype}',
             //   color: 'blue',
             //   info: '',
             // },
             // {
             //   label: '联动设备状态',
-            //   prop: '${typeName}',
+            //   value: '${typeName}',
             //   color: 'blue',
             //   info: '',
             // },
@@ -684,32 +692,32 @@ export const ModulePresetMap: Record<
           items: [
             {
               label: '火情状态',
-              prop: '${fsectarea}',
+              value: '${fsectarea}',
               color: 'yellow',
               info: '',
             },
             {
               label: '回采位置',
-              prop: '${stationname}',
+              value: '${stationname}',
               color: 'white',
               info: '',
             },
             {
               label: '硐室火情',
-              prop: '${stationtype}',
+              value: '${stationtype}',
               color: 'blue',
               info: '',
             },
             {
               label: '联动设备状态',
-              prop: '${typeName}',
+              value: '${typeName}',
               color: 'blue',
               info: '',
             },
           ],
           galleryItems: [
             {
-              prop: '${低风险}',
+              value: '${低风险}',
               label: '风险等级',
               color: 'white',
             },

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

@@ -3,109 +3,138 @@ import { ModulePositionMap, ModuleSizeMap } from './options';
 export interface Config {
   /** 模块的名称 */
   moduleName: string;
-  /** 所属页面 */
+  /** 所属页面，用于在有多个可配置首页时划分归类 */
   pageType: string;
-  /** 设备类型，但目前不重要了 */
+  /** 设备类型，在模块设置了 header 后作为取数据依赖的 prop */
   deviceType: string;
   /** 模块配置，核心之一 */
   moduleData: ModuleData;
   /** 模块样式，核心之一 */
   showStyle: ShowStyle;
-  /** 模块描述，可用于存储其他信息 */
+  /** 模块描述，可用于存储其他信息，目前用于原始预设信息存储 */
   desc?: string;
 }
 
 export interface ModuleDataBoard {
   /** 展示牌预设的背景类型 */
   type: 'A' | 'B' | 'C' | 'D';
-  /** 展示牌布局，决定是哪部分内容在上方 */
+  /** 展示牌布局，决定是 label 部分在上方或是 value 在上方 */
   layout: 'val-top' | 'label-top';
-  /** 读取数据时的基础路径 */
+  /** 读取数据时的基础路径，如果配置了 header，应接着 Config.deviceType 配取值路径，反之应配置详尽路径 */
   readFrom: string;
+  /** 核心配置，每个展示牌对应一项 */
   items: {
-    /** 展示牌说明内容 */
+    /** 展示牌说明内容，formatter 格式 */
     label: string;
-    prop: string;
+    /** 展示牌值内容，formatter 格式 */
+    value: string;
   }[];
 }
+
 export interface ModuleDataList {
-  /** 列表项预设的背景类型 */
+  /** 列表预设的背景类型 */
   type: 'timeline' | 'A' | 'B' | 'C' | 'D' | 'E';
-  /** 读取数据时的基础路径 */
+  /** 读取数据时的基础路径，如果配置了 header，应接着 Config.deviceType 配取值路径，反之应配置详尽路径 */
   readFrom: string;
+  /** 核心配置，每个列表项对应一项 */
   items: {
-    /** 列表项说明内容 */
+    /** 列表项说明内容，formatter 格式 */
     label: string;
-    prop: string;
-    color: string;
-    /** 针对列表项说明的额外信息 */
+    /** 列表项值内容，formatter 格式 */
+    value: string;
+    /** 列表项指定颜色，根据类型不同会有各自的样式 */
+    color: 'red' | 'orange' | 'yellow' | 'green' | 'blue' | 'white';
+    /** 针对列表项说明的额外信息，部分类型的列表项会使用 */
     info: string;
   }[];
-  /** 列表左侧展示的图片路径 */
-  image?: string;
 }
+
 export interface ModuleDataGallery {
-  /** 列表项预设的背景类型 */
+  /** 画廊预设的背景类型 */
   type: 'A' | 'B';
-  /** 读取数据时的基础路径 */
+  /** 读取数据时的基础路径，如果配置了 header，应接着 Config.deviceType 配取值路径，反之应配置详尽路径 */
   readFrom: string;
+  /** 核心配置，每个画廊项对应一项 */
   items: {
-    /** 列表项说明内容 */
+    /** 画廊项说明内容，formatter 格式 */
     label: string;
-    prop: string;
-    color: string;
+    /** 画廊项值内容，formatter 格式 */
+    value: string;
+    /** 画廊项指定颜色，根据类型不同会有各自的样式 */
+    color: 'red' | 'orange' | 'yellow' | 'green' | 'blue' | 'white';
   }[];
 }
+
 export interface ModuleDataComplexList {
-  /** 列表项预设的背景类型 */
+  /** 复杂列表预设的背景类型 */
   type: 'A' | 'B';
-  /** 读取数据时的基础路径 */
+  /** 读取数据时的基础路径，如果配置了 header，应接着 Config.deviceType 配取值路径，反之应配置详尽路径 */
   readFrom: string;
+  /** 核心配置，每个复杂列表的列表项对应一项 */
   items: {
-    /** 列表项说明内容 */
+    /** 列表项说明内容，formatter 格式 */
     label: string;
-    prop: string;
-    color: string;
-    /** 针对列表项说明的额外信息 */
+    /** 列表项值内容，formatter 格式 */
+    value: string;
+    /** 列表项指定颜色，根据类型不同会有各自的样式 */
+    color: 'red' | 'orange' | 'yellow' | 'green' | 'blue' | 'white';
+    /** 针对列表项说明的额外信息，部分类型的列表项会使用 */
     info: string;
   }[];
+  /** 核心配置，每个复杂列表的画廊项对应一项 */
   galleryItems: {
-    /** 列表项说明内容 */
+    /** 画廊项说明内容，formatter 格式 */
     label: string;
-    prop: string;
-    color: string;
+    /** 画廊项值内容，formatter 格式 */
+    value: string;
+    /** 画廊项指定颜色，根据类型不同会有各自的样式 */
+    color: 'red' | 'orange' | 'yellow' | 'green' | 'blue' | 'white';
   }[];
 }
 export interface ModuleDataChart {
-  /** 图表通用类型，一个类型对应一种图表预设 */
+  /** 图表类型，一个类型对应一种图表预设 */
   type: 'pie' | 'bar' | 'line' | 'line_area';
-  /** 读取数据时的基础路径，例如如果图表依赖一个数组，那么该项应设置能读取到该数组的路径。例如：readData.history */
+  /** 读取数据时的基础路径，如果配置了 header，应接着 Config.deviceType 配取值路径，反之应配置详尽路径。特别的是，pie 类型的图表应将路径指到对象上，其他的图表应该指到数组上 */
   readFrom: string;
-  /** 排序依据，该项应配置为`readFrom`指向的数据中的可读项。例如：createTime */
+  /** 排序依据，该项应配置将配合 readFrom 使用 */
   sortBy?: string;
   /** 排序规则，desc降序，asc升序 */
   order?: 'desc' | 'asc';
-  /** 图表x轴配置（若有），例如：{ prop: 'strInstallPos' } */
+  /** 图表x轴配置（若有），支持多个 */
   xAxis: {
-    prop: string;
+    /** x轴内容，formatter 格式 */
+    label: string;
   }[];
-  /** 图表y轴配置（若有），例如：['风量', '风速'] */
+  /** 图表y轴配置（若有），支持多个 */
   yAxis: {
+    /** y轴内容，formatter 格式 */
     label: string;
+    /** y轴的对齐方式 */
     align: 'left' | 'right';
   }[];
-  /** 图表各系列配置，一个系列应对应一个数据维度，例如：[{ label: '风量', prop: 'f1Val' }] */
-  series: { label: string; prop: string }[];
+  /** 核心配置，一个系列应对应一个数据维度，例如：[{ label: '风量', prop: '${f1Val}' }] */
+  series: {
+    /** 数据说明，formatter 格式 */
+    label: string;
+    /** 取值 prop，注意该项不支持 formatter 格式 */
+    prop: string;
+  }[];
 }
 export interface ModuleDataTable {
   /** 表格的预设样式 */
   type: 'A' | 'B';
-  /** 读取数据时的基础路径 */
+  /** 读取数据时的基础路径，如果配置了 header，应接着 Config.deviceType 配取值路径，反之应配置详尽路径 */
   readFrom: string;
-  columns: { label: string; prop: string }[];
+  /** 核心配置，每个表格列对应一项 */
+  columns: {
+    /** 数据说明，formatter 格式 */
+    label: string;
+    /** 取值 prop，注意该项不支持 formatter 格式 */
+    prop: string;
+  }[];
 }
 export interface ModuleDataPreset {
-  /** 表格的预设样式 */
+  /** 表格的预设样式，由各个预设单独使用，没有固定类型 */
   [key: string]: any;
 }
 
@@ -114,17 +143,18 @@ export interface ModuleDataPreset {
  *
  * 该配置将描述本模块的基础样式，应该展示哪些内容，应该如何排布主要元素
  *
- * 配置中有几项常用的配置，以下是其说明：
+ * 配置中有几项常用的配置，以下是部分说明：
  *
- * 假设模块依赖的数据为：`{ f1Val: 2555 }`
+ * 假设模块依赖的数据为：`{ f1Val: 2555 }`；
  *
- * `formatter`该配置是用于自定义展示文本的，应配合`prop`使用。
+ * 配置中有许多 value、lable 都是遵循 formatter 格式的，formatter 格式可以用于自定义展示文本
  *
- * 使用示例：formatter:`前缀${}后缀`; prop:`f1Val`。则对应的文本将是`前缀f1Val后缀`
+ * 使用示例：`f1的值为：${f1Val}呀！`。则对应的文本将是`f1的值为：2555呀！`
  *
  */
 export interface ModuleData {
   header: {
+    /** 是否展示 header，header 的展示与否影响各个模块的 readFrom 实现，详细请阅读各模块的详细介绍 */
     show: boolean;
     /** 是否展示左侧的选择框 */
     showSelector: boolean;
@@ -132,25 +162,23 @@ export interface ModuleData {
     showSlot: boolean;
     /** 左侧选择框的配置 */
     selector: {
-      /** 图标，具体支持的输入种类请联系技术人员 */
-      icon?: string;
-      prop: string;
+      /** 展示的内容，formatter 格式 */
+      value: string;
     };
     /** 右侧插槽的配置 */
     slot: {
-      /** 图标，具体支持的输入种类请联系技术人员 */
-      icon?: string;
-      prop: string;
+      /** 展示的内容，formatter 格式 */
+      value: string;
     };
   };
   background: {
+    /** 是否展示背景 */
     show: boolean;
     /** 背景资源的类型 */
     type: 'image' | 'video';
     /** 背景资源的链接 */
     link: string;
   };
-  // layout: (ModuleDataBoard | ModuleDataChart | ModuleDataList | ModuleDataTable | ModuleDataPreset)[];
   /** 模块的布局，使用规定的枚举组合为一个数组，代表着从上到下所应展示的元素 */
   layout: ('board' | 'list' | 'chart' | 'table' | 'gallery' | 'complex_list' | 'blast_delta' | 'fire_control' | 'fire_warn')[];
   preset: ModuleDataPreset[];
@@ -162,12 +190,14 @@ export interface ModuleData {
   complex_list: ModuleDataComplexList[];
   /** 如果目前没有数据可以对接，可使用模拟数据先行展示 */
   mock?: any[];
+  /** 如果模块需要跳转，可以在这里配置，formatter 格式，取值时和 readFrom 执行同一规则 */
+  to?: string;
 }
 export interface ShowStyle {
-  /** 模块的宽高，一般来说是选好不动即可。特殊情况下可以自定义宽高 */
+  /** 模块的宽高，特殊情况下可以自定义宽高 */
   size: keyof typeof ModuleSizeMap;
-  /** 模块的版本，分新版及旧版，只要有一个模块指定为旧版，那么整个页面风格将变更为旧版 */
+  /** 模块的版本，除了新版，只要有一个模块指定为旧版或其他版本，那么整个页面风格将变更为对应版本，优先级 旧版 > 普通版 > 新版 */
   version: '原版' | '新版' | '普通版';
-  /** 模块的位置，即定位 */
+  /** 模块的位置，即定位，特殊情况下可以自定义定位 */
   position: keyof typeof ModulePositionMap;
 }

src/views/vent/home/configurable/README.md

@@ -10,4 +10,4 @@
 
 将上述两个组件配置到菜单中之后：
 
-点开配置表格，对各个设备进行配置，配置好的点表/字段/样式等将用于在首页展示。如有多个需要配置的首页。首页各个模块都有其对应的设备，例如：左上角对应主通风机
+点开配置表格，对各个设备进行配置，配置好的点表/字段/样式等将用于在首页展示。

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

@@ -88,7 +88,7 @@
           return {
             type: 'category',
             data: sorttedData.map((d) => {
-              return getFormattedText(d, e.prop);
+              return getFormattedText(d, e.label);
             }),
           };
         }),
@@ -172,7 +172,7 @@
           return {
             type: 'category',
             data: sorttedData.map((d) => {
-              return getFormattedText(d, e.prop);
+              return getFormattedText(d, e.label);
             }),
           };
         }),
@@ -225,7 +225,7 @@
             type: 'category',
             boundaryGap: false,
             data: sorttedData.map((d) => {
-              return getFormattedText(d, e.prop);
+              return getFormattedText(d, e.label);
             }),
           };
         }),

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

@@ -162,4 +162,7 @@
   .gallery-item__value_blue {
     color: lightblue;
   }
+  .gallery-item__value_white {
+    color: white;
+  }
 </style>

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

@@ -75,9 +75,11 @@
           <CustomList class="content__module" :type="config.type" :list-config="config.items" />
         </template>
       </template>
+      <!-- 画廊部分 -->
       <template v-if="config.key === 'gallery'">
         <CustomGallery class="content__module" :type="config.type" :gallery-config="config.items" />
       </template>
+      <!-- 复杂列表部分 -->
       <template v-if="config.key === 'complex_list'">
         <ComplexList class="content__module" :type="config.type" :list-config="config.items" :gallery-config="config.galleryItems" />
       </template>
@@ -86,14 +88,14 @@
         <CommonTable
           v-if="config.type === 'A'"
           :columns="config.columns"
-          :data="tableData"
+          :data="config.data"
           class="content__module text-center flex-grow overflow-auto"
         />
         <CustomTable
           v-else
           :type="config.type"
           :columns="config.columns"
-          :data="tableData"
+          :data="config.data"
           class="content__module text-center flex-grow overflow-auto"
         />
       </template>
@@ -128,7 +130,7 @@
   import CustomGallery from './CustomGallery.vue';
   import ComplexList from './ComplexList.vue';
   import CustomTable from './CustomTable.vue';
-  import { getFormattedText, getRawProp } from '../../../deviceManager/configurationTable/adapters';
+  import { getFormattedText } from '../../../deviceManager/configurationTable/adapters';
   import CustomChart from './CustomChart.vue';
   import { get, clone } from 'lodash-es';
   import CommonTable from '../../billboard/components/CommonTable.vue';
@@ -145,6 +147,19 @@
 
   const { header: headerConfig, background, layout, mock } = props.moduleData;
 
+  // 额外的 header 相关的变量
+  const headerVisible = ref(false);
+  function headerSelectHandler({ key }) {
+    selectedDeviceID.value = key;
+  }
+
+  const blastDeltaData = ref();
+
+  const { selectedDeviceID, selectedDevice, selectedDeviceSlot, selectedDeviceLabel, options, fetchDevices } = useInitDevices(
+    props.deviceType,
+    headerConfig
+  );
+
   /** 根据配置里的layout将配置格式化为带 key 的具体配置，例如：[{ key: 'list', value: any, ...ModuleDataList }] */
   const layoutConfig = computed(() => {
     const refData = selectedDevice.value;
@@ -170,7 +185,7 @@
               return {
                 ...i,
                 label: getFormattedText(data, i.label),
-                value: getFormattedText(data, i.prop),
+                value: getFormattedText(data, i.value),
               };
             }),
           });
@@ -187,7 +202,7 @@
               return {
                 ...i,
                 label: getFormattedText(data, i.label),
-                value: getFormattedText(data, i.prop),
+                value: getFormattedText(data, i.value),
               };
             }),
           });
@@ -205,7 +220,7 @@
               return {
                 ...i,
                 label: getFormattedText(data, i.label),
-                value: getFormattedText(data, i.prop),
+                value: getFormattedText(data, i.value),
               };
             }),
           });
@@ -223,14 +238,14 @@
               return {
                 ...i,
                 label: getFormattedText(data, i.label),
-                value: getFormattedText(data, i.prop),
+                value: getFormattedText(data, i.value),
               };
             }),
             galleryItems: cfg.galleryItems.map((i) => {
               return {
                 ...i,
                 label: getFormattedText(data, i.label),
-                value: getFormattedText(data, i.prop),
+                value: getFormattedText(data, i.value),
               };
             }),
           });
@@ -256,12 +271,7 @@
           arr.push({
             ...cfg,
             key,
-            columns: (cfg.columns || []).map((e) => {
-              return {
-                name: e.label,
-                prop: getRawProp(e.prop),
-              };
-            }),
+            columns: cfg.columns,
             data: get(data, cfg.readFrom, []),
           });
           break;
@@ -283,105 +293,6 @@
     }, []);
   });
 
-  // 额外的 header 相关的变量
-  const headerVisible = ref(false);
-  function headerSelectHandler({ key }) {
-    selectedDeviceID.value = key;
-  }
-
-  // 额外的告示牌相关的变量
-  // const boardConfig = computed(() => {
-  //   const data = selectedDevice.value;
-  //   return (board || []).map((b) => {
-  //     return {
-  //       ...b.items,
-  //       value: getFormattedText(data, b.prop, b.formatter),
-  //     };
-  //   });
-  // });
-
-  // 额外的时间线列表相关的变量
-  // const listConfig = computed(() => {
-  //   const data = selectedDevice.value;
-  //   return (list || []).map((b) => {
-  //     return {
-  //       ...b,
-  //       value: getFormattedText(data, b.prop, b.formatter),
-  //     };
-  //   });
-  // });
-  // const listType = computed(() => {
-  //   return list[0]?.type || 'A';
-  // });
-
-  // const chartConfig = computed(() => {
-  //   return chart[0];
-  // });
-  // const chartData = computed(() => {
-  //   const data = selectedDevice.value;
-  //   return get(data, chart[0]?.readFrom, []);
-  // });
-
-  // const tableConfig = computed(() => {
-  //   return {
-  //     columns: (table[0]?.columns || []).map((e) => {
-  //       return {
-  //         name: e.label,
-  //         prop: e.prop,
-  //       };
-  //     }),
-  //   };
-  // });
-  const tableData = computed(() => {
-    // const data = selectedDevice.value;
-    return [
-      {
-        index: '1',
-        time: '2024/07/22 07:00',
-        warn: '未知',
-        cate: 'xxx综采工作面',
-        temp: '26',
-        wspd: '2',
-        spst: 'ON',
-      },
-      {
-        index: '2',
-        time: '2024/07/22 08:00',
-        warn: '未知',
-        cate: 'xxx综采工作面',
-        temp: '26',
-        wspd: '2',
-        spst: 'ON',
-      },
-      {
-        index: '3',
-        time: '2024/07/22 09:00',
-        warn: '未知',
-        cate: 'xxx综采工作面',
-        temp: '26',
-        wspd: '2',
-        spst: 'ON',
-      },
-      {
-        index: '4',
-        time: '2024/07/22 10:00',
-        warn: '未知',
-        cate: 'xxx综采工作面',
-        temp: '26',
-        wspd: '2',
-        spst: 'ON',
-      },
-    ];
-    // return get(data, table[0]?.readFrom, []);
-  });
-
-  const blastDeltaData = ref();
-
-  const { selectedDeviceID, selectedDevice, selectedDeviceSlot, selectedDeviceLabel, options, fetchDevices } = useInitDevices(
-    props.deviceType,
-    headerConfig
-  );
-
   onMounted(() => {
     blastDeltaData.value = posMonitorData;
     fetchDevices();

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

@@ -336,10 +336,10 @@ export const testConfigA: Config[] = [
   //       showSelector: true,
   //       showSlot: true,
   //       selector: {
-  //         prop: '${strinstallpos}',
+  //         value: '${strinstallpos}',
   //       },
   //       slot: {
-  //         prop: '${strinstallpos}',
+  //         value: '${strinstallpos}',
   //       },
   //     },
   //     background: {
@@ -354,12 +354,12 @@ export const testConfigA: Config[] = [
   //         layout: 'val-top',
   //         items: [
   //           {
-  //             prop: '${readData}.windSpeed1',
+  //             value: '${readData}.windSpeed1',
   //             label: '风速1',
   //           },
   //           {
   //             label: '风速2',
-  //             prop: '${readData}.windSpeed2',
+  //             value: '${readData}.windSpeed2',
   //           },
   //         ],
   //       },
@@ -386,10 +386,10 @@ export const testConfigA: Config[] = [
   //       showSelector: true,
   //       showSlot: true,
   //       selector: {
-  //         prop: '${strinstallpos}',
+  //         value: '${strinstallpos}',
   //       },
   //       slot: {
-  //         prop: '${strinstallpos}',
+  //         value: '${strinstallpos}',
   //       },
   //     },
   //     background: {
@@ -404,15 +404,15 @@ export const testConfigA: Config[] = [
   //       {
   //         type: 'line_area',
   //         readFrom: 'majorpath.paths',
-  //         xAxis: [{ prop: '${name}' }],
+  //         xAxis: [{ value: '${name}' }],
   //         yAxis: [
   //           { label: 'Drag', align: 'left' },
   //           { label: 'M3', align: 'right' },
   //         ],
   //         series: [
-  //           { label: 'Drag', prop: '${drag}' },
-  //           { label: 'M3', prop: '${m3}' },
-  //           // { label: '回2', prop: '${hui2}' },
+  //           { label: 'Drag', value: '${drag}' },
+  //           { label: 'M3', value: '${m3}' },
+  //           // { label: '回2', value: '${hui2}' },
   //         ],
   //       },
   //     ],
@@ -436,10 +436,10 @@ export const testConfigA: Config[] = [
         showSelector: false,
         showSlot: true,
         selector: {
-          prop: '${strinstallpos}',
+          value: '${strinstallpos}',
         },
         slot: {
-          prop: '网络异常：${netstatus.val} 台',
+          value: '网络异常：${netstatus.val} 台',
         },
       },
       background: {
@@ -460,13 +460,13 @@ export const testConfigA: Config[] = [
           items: [
             {
               label: '堵塞状态',
-              prop: '${fsectarea}',
+              value: '${fsectarea}',
               color: 'yellow',
               info: '',
             },
             {
               label: '甲烷浓度',
-              prop: '${stationname}',
+              value: '${stationname}',
               color: 'yellow',
               info: '',
             },
@@ -478,13 +478,13 @@ export const testConfigA: Config[] = [
           items: [
             {
               label: '堵塞状态',
-              prop: '${fsectarea}',
+              value: '${fsectarea}',
               color: 'yellow',
               info: '',
             },
             {
               label: '甲烷浓度',
-              prop: '${stationname}',
+              value: '${stationname}',
               color: 'yellow',
               info: '',
             },
@@ -498,37 +498,37 @@ export const testConfigA: Config[] = [
           items: [
             {
               label: '火情状态',
-              prop: '${fsectarea}',
+              value: '${fsectarea}',
               color: 'yellow',
               info: '',
             },
             {
               label: '回采位置',
-              prop: '${stationname}',
+              value: '${stationname}',
               color: 'white',
               info: '',
             },
             {
               label: '硐室火情',
-              prop: '${stationtype}',
+              value: '${stationtype}',
               color: 'blue',
               info: '',
             },
             {
               label: '联动设备状态',
-              prop: '${typeName}',
+              value: '${typeName}',
               color: 'blue',
               info: '',
             },
           ],
           galleryItems: [
             {
-              prop: '低风险',
+              value: '低风险',
               label: '',
               color: 'white',
             },
             {
-              prop: '${CO}',
+              value: '${CO}',
               label: '',
               color: 'white',
             },
@@ -553,12 +553,10 @@ export const testConfigA: Config[] = [
         showSelector: false,
         showSlot: false,
         selector: {
-          icon: 'SwapOutlined',
-          prop: '${strinstallpos}',
+          value: '${strinstallpos}',
         },
         slot: {
-          icon: 'SwapOutlined',
-          prop: '${strinstallpos}',
+          value: '${strinstallpos}',
         },
       },
       background: {
@@ -577,14 +575,14 @@ export const testConfigA: Config[] = [
         {
           type: 'bar',
           readFrom: 'sysdata.history',
-          xAxis: [{ prop: '${time}' }],
+          xAxis: [{ label: '${time}' }],
           yAxis: [
             { label: '回1', align: 'left' },
             // { label: '回2', align: 'right' },
           ],
           series: [
-            { label: '回1', prop: '${hui1}' },
-            // { label: '回2', prop: '${hui2}' },
+            { label: '回1', value: '${hui1}' },
+            // { label: '回2', value: '${hui2}' },
           ],
         },
       ],
@@ -605,10 +603,10 @@ export const testConfigA: Config[] = [
         showSelector: true,
         showSlot: false,
         selector: {
-          prop: '${strinstallpos}',
+          value: '${strinstallpos}',
         },
         slot: {
-          prop: '${strinstallpos}',
+          value: '${strinstallpos}',
         },
       },
       background: {
@@ -628,49 +626,49 @@ export const testConfigA: Config[] = [
           items: [
             {
               label: '面积',
-              prop: '${fsectarea}',
+              value: '${fsectarea}',
               color: 'blue',
               info: '',
             },
             {
               label: '分站名称',
-              prop: '${stationname}',
+              value: '${stationname}',
               color: 'blue',
               info: '',
             },
             {
               label: '分站类别',
-              prop: '${stationtype}',
+              value: '${stationtype}',
               color: 'blue',
               info: '',
             },
             {
               label: '分类',
-              prop: '${typeName}',
+              value: '${typeName}',
               color: 'blue',
               info: '',
             },
             {
               label: '告警标识',
-              prop: '${warnFlag}',
+              value: '${warnFlag}',
               color: 'blue',
               info: '',
             },
             {
               label: '告警等级',
-              prop: '${warnLevel}',
+              value: '${warnLevel}',
               color: 'blue',
               info: '',
             },
             {
               label: '告警描述',
-              prop: '${warnLevel_str}',
+              value: '${warnLevel_str}',
               color: 'blue',
               info: '',
             },
             {
               label: '错误记录',
-              prop: '${warnLogNotOkCount}',
+              value: '${warnLogNotOkCount}',
               color: 'blue',
               info: '',
             },
@@ -682,25 +680,25 @@ export const testConfigA: Config[] = [
           items: [
             {
               label: '面积',
-              prop: '${fsectarea}',
+              value: '${fsectarea}',
               color: 'blue',
               info: '',
             },
             {
               label: '分站名称',
-              prop: '${stationname}',
+              value: '${stationname}',
               color: 'blue',
               info: '',
             },
             {
               label: '分站类别',
-              prop: '${stationtype}',
+              value: '${stationtype}',
               color: 'blue',
               info: '',
             },
             {
               label: '分类',
-              prop: '${typeName}',
+              value: '${typeName}',
               color: 'blue',
               info: '',
             },
@@ -727,10 +725,10 @@ export const testConfigA: Config[] = [
   //       showSelector: true,
   //       showSlot: true,
   //       selector: {
-  //         prop: '${devicePos}',
+  //         value: '${devicePos}',
   //       },
   //       slot: {
-  //         prop: '${devicePos}',
+  //         value: '${devicePos}',
   //       },
   //     },
   //     background: {
@@ -748,15 +746,15 @@ export const testConfigA: Config[] = [
   //         readFrom: 'history',
   //         columns: [
   //           {
-  //             prop: '${index}',
+  //             value: '${index}',
   //             label: '编号',
   //           },
   //           {
-  //             prop: '${time}',
+  //             value: '${time}',
   //             label: '报警时间',
   //           },
   //           {
-  //             prop: '${warn}',
+  //             value: '${warn}',
   //             label: '报警内容',
   //           },
   //         ],
@@ -780,10 +778,10 @@ export const testConfigA: Config[] = [
   //       showSelector: true,
   //       showSlot: true,
   //       selector: {
-  //         prop: '${devicePos}',
+  //         value: '${devicePos}',
   //       },
   //       slot: {
-  //         prop: '${devicePos}',
+  //         value: '${devicePos}',
   //       },
   //     },
   //     background: {
@@ -814,10 +812,10 @@ export const testConfigA: Config[] = [
   //       showSelector: true,
   //       showSlot: true,
   //       selector: {
-  //         prop: '${devicePos}',
+  //         value: '${devicePos}',
   //       },
   //       slot: {
-  //         prop: '${devicePos}',
+  //         value: '${devicePos}',
   //       },
   //     },
   //     background: {
@@ -837,19 +835,19 @@ export const testConfigA: Config[] = [
   //         readFrom: 'history',
   //         columns: [
   //           {
-  //             prop: '${cate}',
+  //             value: '${cate}',
   //             label: '类别',
   //           },
   //           {
-  //             prop: '${temp}',
+  //             value: '${temp}',
   //             label: '温度',
   //           },
   //           {
-  //             prop: '${wspd}',
+  //             value: '${wspd}',
   //             label: '风速',
   //           },
   //           {
-  //             prop: '${spst}',
+  //             value: '${spst}',
   //             label: '喷雾状态',
   //           },
   //         ],
@@ -873,10 +871,10 @@ export const testConfigA: Config[] = [
         showSelector: true,
         showSlot: true,
         selector: {
-          prop: '${devicePos}',
+          value: '${devicePos}',
         },
         slot: {
-          prop: '${devicePos}',
+          value: '${devicePos}',
         },
       },
       background: {
@@ -894,73 +892,73 @@ export const testConfigA: Config[] = [
           items: [
             {
               label: '火情状态',
-              prop: '${fsectarea}',
+              value: '${fsectarea}',
               color: 'yellow',
               info: '',
             },
             {
               label: '回采位置',
-              prop: '${stationname}',
+              value: '${stationname}',
               color: 'white',
               info: '',
             },
             {
               label: '硐室火情',
-              prop: '${stationtype}',
+              value: '${stationtype}',
               color: 'blue',
               info: '',
             },
             {
               label: '联动设备状态',
-              prop: '${typeName}',
+              value: '${typeName}',
               color: 'blue',
               info: '',
             },
             {
               label: '火情状态',
-              prop: '${fsectarea}',
+              value: '${fsectarea}',
               color: 'yellow',
               info: '',
             },
             {
               label: '回采位置',
-              prop: '${stationname}',
+              value: '${stationname}',
               color: 'white',
               info: '',
             },
             {
               label: '硐室火情',
-              prop: '${stationtype}',
+              value: '${stationtype}',
               color: 'blue',
               info: '',
             },
             {
               label: '联动设备状态',
-              prop: '${typeName}',
+              value: '${typeName}',
               color: 'blue',
               info: '',
             },
             // {
             //   label: '火情状态',
-            //   prop: '${fsectarea}',
+            //   value: '${fsectarea}',
             //   color: 'yellow',
             //   info: '',
             // },
             // {
             //   label: '回采位置',
-            //   prop: '${stationname}',
+            //   value: '${stationname}',
             //   color: 'white',
             //   info: '',
             // },
             // {
             //   label: '硐室火情',
-            //   prop: '${stationtype}',
+            //   value: '${stationtype}',
             //   color: 'blue',
             //   info: '',
             // },
             // {
             //   label: '联动设备状态',
-            //   prop: '${typeName}',
+            //   value: '${typeName}',
             //   color: 'blue',
             //   info: '',
             // },
@@ -977,32 +975,32 @@ export const testConfigA: Config[] = [
           items: [
             {
               label: '火情状态',
-              prop: '${fsectarea}',
+              value: '${fsectarea}',
               color: 'yellow',
               info: '',
             },
             {
               label: '回采位置',
-              prop: '${stationname}',
+              value: '${stationname}',
               color: 'white',
               info: '',
             },
             {
               label: '硐室火情',
-              prop: '${stationtype}',
+              value: '${stationtype}',
               color: 'blue',
               info: '',
             },
             {
               label: '联动设备状态',
-              prop: '${typeName}',
+              value: '${typeName}',
               color: 'blue',
               info: '',
             },
           ],
           galleryItems: [
             {
-              prop: '低风险',
+              value: '低风险',
               label: '风险等级',
               color: 'white',
             },
@@ -1017,312 +1015,3 @@ export const testConfigA: Config[] = [
     },
   },
 ];
-
-export const testConfigB: Config[] = [
-  // {
-  //   deviceType: 'warn',
-  //   moduleName: 'warn-左上',
-  //   pageType: '',
-  //   moduleData: {
-  //     header: {
-  //       show: false,
-  //       showSelector: false,
-  //       showSlot: true,
-  //       selector: {
-  //         prop: '${strinstallpos}',
-  //       },
-  //       slot: {
-  //         prop: '${netstatus}.val',
-  //         formatter: '网络异常：${} 台',
-  //       },
-  //     },
-  //     background: {
-  //       show: false,
-  //       type: 'video',
-  //       link: '',
-  //     },
-  //     layout: ['list'],
-  //     board: [],
-  //     chart: [],
-  //     table: [],
-  //     list: [
-  //       {
-  //         label: '正常',
-  //         prop: '${blue}.val',
-  //         color: 'blue',
-  //         type: 'timeline',
-  //       },
-  //       {
-  //         label: '告警',
-  //         prop: '${orange}.val',
-  //         color: 'orange',
-  //         type: 'timeline',
-  //       },
-  //       {
-  //         label: '报警',
-  //         prop: '${yellow}.val',
-  //         color: 'yellow',
-  //         type: 'timeline',
-  //       },
-  //       {
-  //         label: '危险',
-  //         prop: '${red}.val',
-  //         color: 'red',
-  //         type: 'timeline',
-  //       },
-  //       {
-  //         label: '错误',
-  //         prop: '${alarm}.val',
-  //         color: 'green',
-  //         type: 'timeline',
-  //       },
-  //     ],
-  //   },
-  //   showStyle: {
-  //     size: 'width:450px;height:280px;',
-  //     version: 'enhanced',
-  //     position: 'top:60px;left:0;',
-  //   },
-  // },
-  // {
-  //   deviceType: 'sys_wind',
-  //   moduleName: 'sys_wind-左中',
-  //   pageType: '',
-  //   moduleData: {
-  //     header: {
-  //       show: false,
-  //       showSelector: true,
-  //       showSlot: false,
-  //       selector: {
-  //         prop: '${strinstallpos}',
-  //       },
-  //       slot: {
-  //         prop: '${strinstallpos}',
-  //       },
-  //     },
-  //     background: {
-  //       show: false,
-  //       type: 'video',
-  //       link: '',
-  //     },
-  //     layout: ['board', 'chart', 'table'],
-  //     board: [
-  //       {
-  //         label: 'F1',
-  //         type: 'C',
-  //         layout: 'val-top',
-  //         prop: '${f1Val}',
-  //       },
-  //       {
-  //         label: 'F2',
-  //         type: 'C',
-  //         layout: 'val-top',
-  //         prop: '${f2Val}',
-  //       },
-  //     ],
-  //     list: [],
-  //     table: [
-  //       {
-  //         readFrom: 'history',
-  //         columns: [
-  //           {
-  //             prop: '${index}',
-  //             label: '编号',
-  //           },
-  //           {
-  //             prop: '${time}',
-  //             label: '自定义字段A',
-  //           },
-  //           {
-  //             prop: '${warn}',
-  //             label: '自定义字段B',
-  //           },
-  //         ],
-  //       },
-  //     ],
-  //     chart: [
-  //       {
-  //         type: 'pie',
-  //         readFrom: 'readData',
-  //         xAxis: [{ prop: '${stationname}' }],
-  //         yAxis: [
-  //           { label: '风量1', align: 'left' },
-  //           // { label: '回2', align: 'right' },
-  //         ],
-  //         series: [
-  //           { label: '风量1', prop: '${va}' },
-  //           { label: '风量2', prop: '${va2}' },
-  //           // { label: '回2', prop: '${hui2}' },
-  //         ],
-  //       },
-  //     ],
-  //   },
-  //   showStyle: {
-  //     size: 'width:450px;height:570px;',
-  //     version: 'enhanced',
-  //     position: 'top:350px;left:0;',
-  //   },
-  // },
-  // {
-  //   deviceType: 'midinfo',
-  //   moduleName: 'midinfo-中间',
-  //   pageType: '',
-  //   moduleData: {
-  //     header: {
-  //       show: false,
-  //       showSelector: false,
-  //       showSlot: false,
-  //       selector: {
-  //         icon: 'SwapOutlined',
-  //         prop: '${strinstallpos}',
-  //       },
-  //       slot: {
-  //         icon: 'SwapOutlined',
-  //         prop: '${strinstallpos}',
-  //       },
-  //     },
-  //     background: {
-  //       show: false,
-  //       type: 'video',
-  //       link: '',
-  //     },
-  //     layout: ['chart'],
-  //     board: [],
-  //     list: [],
-  //     table: [],
-  //     chart: [
-  //       {
-  //         type: 'bar',
-  //         readFrom: 'sysdata.history',
-  //         xAxis: [{ prop: '${time}' }],
-  //         yAxis: [
-  //           { label: '回1', align: 'left' },
-  //           // { label: '回2', align: 'right' },
-  //         ],
-  //         series: [
-  //           { label: '回1', prop: '${hui1}' },
-  //           // { label: '回2', prop: '${hui2}' },
-  //         ],
-  //       },
-  //     ],
-  //   },
-  //   showStyle: {
-  //     size: 'width:1000px;height:280px;',
-  //     version: 'enhanced',
-  //     position: 'top:640px;left:460px;',
-  //   },
-  // },
-  // {
-  //   deviceType: 'sys_majorpath',
-  //   moduleName: 'sys_majorpath-右上',
-  //   pageType: '',
-  //   moduleData: {
-  //     header: {
-  //       show: true,
-  //       showSelector: true,
-  //       showSlot: true,
-  //       selector: {
-  //         prop: '${strinstallpos}',
-  //       },
-  //       slot: {
-  //         prop: '${strinstallpos}',
-  //       },
-  //     },
-  //     background: {
-  //       show: false,
-  //       type: 'video',
-  //       link: '',
-  //     },
-  //     layout: ['chart'],
-  //     board: [],
-  //     list: [],
-  //     chart: [
-  //       {
-  //         type: 'line',
-  //         readFrom: 'majorpath.paths',
-  //         xAxis: [{ prop: '${name}' }],
-  //         yAxis: [
-  //           { label: 'Drag', align: 'left' },
-  //           { label: 'M3', align: 'right' },
-  //         ],
-  //         series: [
-  //           { label: 'Drag', prop: '${drag}' },
-  //           { label: 'M3', prop: '${m3}' },
-  //           // { label: '回2', prop: '${hui2}' },
-  //         ],
-  //       },
-  //     ],
-  //     table: [],
-  //   },
-  //   showStyle: {
-  //     size: 'width:450px;height:280px;',
-  //     version: 'enhanced',
-  //     position: 'top:60px;right:0;',
-  //   },
-  // },
-  // {
-  //   deviceType: 'warn',
-  //   moduleName: 'warn-右中',
-  //   pageType: '',
-  //   moduleData: {
-  //     header: {
-  //       show: false,
-  //       showSelector: false,
-  //       showSlot: true,
-  //       selector: {
-  //         prop: '${strinstallpos}',
-  //       },
-  //       slot: {
-  //         prop: '${netstatus}.val',
-  //         formatter: '网络异常：${} 台',
-  //       },
-  //     },
-  //     background: {
-  //       show: false,
-  //       type: 'video',
-  //       link: '',
-  //     },
-  //     layout: ['list'],
-  //     board: [],
-  //     chart: [],
-  //     table: [],
-  //     list: [
-  //       {
-  //         label: '正常',
-  //         prop: '${blue}.val',
-  //         color: 'blue',
-  //         type: 'B',
-  //       },
-  //       {
-  //         label: '告警',
-  //         prop: '${orange}.val',
-  //         color: 'orange',
-  //         type: 'B',
-  //       },
-  //       {
-  //         label: '报警',
-  //         prop: '${yellow}.val',
-  //         color: 'yellow',
-  //         type: 'B',
-  //       },
-  //       {
-  //         label: '危险',
-  //         prop: '${red}.val',
-  //         color: 'red',
-  //         type: 'B',
-  //       },
-  //       {
-  //         label: '错误',
-  //         prop: '${alarm}.val',
-  //         color: 'green',
-  //         type: 'B',
-  //       },
-  //     ],
-  //   },
-  //   showStyle: {
-  //     size: 'width:450px;height:280px;',
-  //     version: 'enhanced',
-  //     position: 'top:350px;right:0;',
-  //   },
-  // },
-];

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

@@ -74,22 +74,25 @@ export function useInitDevices(devicekind: string, config: Config['moduleData'][
 
   // 获取设备数据，赋值并以选项格式返回给 Header 消费
   function fetchDevices() {
-    const { formatter, prop } = config.selector;
+    const { value } = config.selector;
     return getHomeData({}).then((result) => {
-      if (!result[devicekind]) return;
-
-      if (config.show && config.showSelector) {
+      if (config.show && config.showSelector && result[devicekind]) {
+        // 如果配置里指明需要 header，检验后初始化设备信息
         const records: { deviceID: string }[] = result[devicekind];
         devices.value = records;
         selectedDeviceID.value = records[0]?.deviceID;
         options.value = records.map((e) => {
           return {
-            label: getFormattedText(e, prop, formatter),
+            label: getFormattedText(e, value),
             value: e.deviceID,
           };
         });
       } else {
-        const record = result;
+        // 没有的话按默认的，将返回结果直接作为一整个设备信息供模块使用
+        const record = {
+          ...result,
+          deviceID: 'isthisthereallife',
+        };
         devices.value = [record];
         selectedDeviceID.value = record.deviceID;
       }

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

@@ -4,7 +4,7 @@
     <div class="top-bg">
       <div class="main-title">{{ mainTitle }}</div>
     </div>
-    <a-dropdown class="module-dropdown" :class="{ 'module-dropdown-original': isOriginal }" :trigger="['click']" placement="bottomRight">
+    <!-- <a-dropdown class="module-dropdown" :class="{ 'module-dropdown-original': isOriginal }" :trigger="['click']" placement="bottomRight">
       <a class="ant-dropdown-link" @click.prevent>
         全矿井通风检测
         <CaretDownOutlined />
@@ -12,7 +12,7 @@
       <template #overlay>
         <MonitorCenter />
       </template>
-    </a-dropdown>
+    </a-dropdown> -->
     <!-- 采用定位方式以避免出现各个模块隐藏时其他模块下移的问题 -->
     <template v-if="isOriginal">
       <ModuleOriginal v-for="cfg in configs" :key="cfg.deviceType" :show-style="cfg.showStyle" :module-name="cfg.moduleName" :visible="true">
@@ -47,15 +47,8 @@
 </template>
 <script lang="ts" setup>
   import { computed, onMounted, ref } from 'vue';
-  // import SubVentilate from './components/SubVentilate.vue';
-  // import Ventilate from './components/Ventilate.vue';
-  import { CaretDownOutlined } from '@ant-design/icons-vue';
-  // import VentilateControl from './components/VentilateControl.vue';
-  // import AirVolumeMonitor from './components/AirVolumeMonitor.vue';
-  // import VentilateAnalysis from './components/VentilateAnalysis.vue';
-  // import WorkSurface from './components/WorkSurface.vue';
-  // import DeviceWarning from './components/DeviceWarning.vue';
-  import MonitorCenter from './components/MonitorCenter.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 ModuleEnhanced from './components/ModuleEnhanced.vue';
@@ -63,7 +56,7 @@
   import ModuleCommon from './components/ModuleCommon.vue';
   import Content from './components/content.vue';
   import { testConfigA } from './configurable.data';
-  // import mapComponent from './components/3Dmap/index.vue';
+  import { useRoute } from 'vue-router';
 
   interface EnhancedConfig extends Config {
     visible: boolean;
@@ -81,6 +74,13 @@
   const { configs, isOriginal, isCommon, fetchConfigs } = useInitConfigs();
 
   onMounted(() => {
+    const query = useRoute().query;
+    if (query.fire) {
+      mainTitle.value = '智能火灾管控系统';
+    }
+    if (query.gas) {
+      mainTitle.value = '智能瓦斯管控系统';
+    }
     // configs.value = testConfigB;
     fetchConfigs().then(() => {
       configs.value.push(...testConfigA);