[Feat 0000] 修改配置，为label添加formatter类似的功能

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

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

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

@@ -64,10 +64,10 @@ export const ModulePresetMap: Record<
         showSelector: true,
         showSlot: true,
         selector: {
-          prop: 'strinstallpos',
+          prop: '${strinstallpos}',
         },
         slot: {
-          prop: 'strinstallpos',
+          prop: '${strinstallpos}',
         },
       },
       background: {
@@ -83,11 +83,11 @@ export const ModulePresetMap: Record<
           readFrom: 'readData',
           items: [
             {
-              prop: 'Fan1StartStatus_str',
+              prop: '${Fan1StartStatus_str}',
               label: '一号机状态',
             },
             {
-              prop: 'Fan2StartStatus_str',
+              prop: '${Fan2StartStatus_str}',
               label: '二号机状态',
             },
           ],
@@ -111,10 +111,10 @@ export const ModulePresetMap: Record<
         showSelector: true,
         showSlot: true,
         selector: {
-          prop: 'strinstallpos',
+          prop: '${strinstallpos}',
         },
         slot: {
-          prop: 'strinstallpos',
+          prop: '${strinstallpos}',
         },
       },
       background: {
@@ -129,15 +129,15 @@ export const ModulePresetMap: Record<
         {
           type: 'line',
           readFrom: 'majorpath.paths',
-          xAxis: [{ prop: 'name' }],
+          xAxis: [{ prop: '${name}' }],
           yAxis: [
             { label: 'Drag', align: 'left' },
             { label: 'M3', align: 'right' },
           ],
           series: [
-            { label: 'Drag', prop: 'drag' },
-            { label: 'M3', prop: 'm3' },
-            // { label: '回2', prop: 'hui2' },
+            { label: 'Drag', prop: '${drag}' },
+            { label: 'M3', prop: '${m3}' },
+            // { label: '回2', prop: '${hui2}' },
           ],
         },
       ],
@@ -157,10 +157,10 @@ export const ModulePresetMap: Record<
         showSelector: true,
         showSlot: true,
         selector: {
-          prop: 'strinstallpos',
+          prop: '${strinstallpos}',
         },
         slot: {
-          prop: 'strinstallpos',
+          prop: '${strinstallpos}',
         },
       },
       background: {
@@ -175,15 +175,15 @@ export const ModulePresetMap: Record<
         {
           type: 'line_area',
           readFrom: 'majorpath.paths',
-          xAxis: [{ prop: 'name' }],
+          xAxis: [{ prop: '${name}' }],
           yAxis: [
             { label: 'Drag', align: 'left' },
             { label: 'M3', align: 'right' },
           ],
           series: [
-            { label: 'Drag', prop: 'drag' },
-            { label: 'M3', prop: 'm3' },
-            // { label: '回2', prop: 'hui2' },
+            { label: 'Drag', prop: '${drag}' },
+            { label: 'M3', prop: '${m3}' },
+            // { label: '回2', prop: '${hui2}' },
           ],
         },
       ],
@@ -201,10 +201,10 @@ export const ModulePresetMap: Record<
         showSelector: true,
         showSlot: true,
         selector: {
-          prop: 'strinstallpos',
+          prop: '${strinstallpos}',
         },
         slot: {
-          prop: 'strinstallpos',
+          prop: '${strinstallpos}',
         },
       },
       background: {
@@ -222,9 +222,9 @@ export const ModulePresetMap: Record<
           xAxis: [],
           yAxis: [],
           series: [
-            { label: 'Drag', prop: 'drag' },
-            { label: 'M3', prop: 'm3' },
-            // { label: '回2', prop: 'hui2' },
+            { label: 'Drag', prop: '${drag}' },
+            { label: 'M3', prop: '${m3}' },
+            // { label: '回2', prop: '${hui2}' },
           ],
         },
       ],
@@ -242,10 +242,10 @@ export const ModulePresetMap: Record<
         showSelector: false,
         showSlot: false,
         selector: {
-          prop: 'strinstallpos',
+          prop: '${strinstallpos}',
         },
         slot: {
-          prop: 'strinstallpos',
+          prop: '${strinstallpos}',
         },
       },
       background: {
@@ -264,9 +264,9 @@ export const ModulePresetMap: Record<
         {
           type: 'bar',
           readFrom: 'sysdata.history',
-          xAxis: [{ prop: 'time' }],
+          xAxis: [{ prop: '${time}' }],
           yAxis: [{ label: '回1', align: 'left' }],
-          series: [{ label: '回1', prop: 'hui1' }],
+          series: [{ label: '回1', prop: '${hui1}' }],
         },
       ],
     },
@@ -279,10 +279,10 @@ export const ModulePresetMap: Record<
         showSelector: false,
         showSlot: false,
         selector: {
-          prop: 'devicePos',
+          prop: '${devicePos}',
         },
         slot: {
-          prop: 'devicePos',
+          prop: '${devicePos}',
         },
       },
       background: {
@@ -298,25 +298,25 @@ export const ModulePresetMap: Record<
           readFrom: 'device',
           items: [
             {
-              prop: 'gate',
+              prop: '${gate}',
               label: '风门',
               // label: '光纤预警',
               color: 'blue',
             },
             {
-              prop: 'window',
+              prop: '${window}',
               label: '风窗',
               // label: '喷雾开启数',
               color: 'blue',
             },
             {
-              prop: 'windrect',
+              prop: '${windrect}',
               label: '测风',
               // label: '联网数量',
               color: 'blue',
             },
             {
-              prop: 'stationtype',
+              prop: '${stationtype}',
               label: '空位',
               // label: '断网数量',
               color: 'blue',
@@ -339,11 +339,10 @@ export const ModulePresetMap: Record<
         showSelector: false,
         showSlot: true,
         selector: {
-          prop: 'strinstallpos',
+          prop: '${strinstallpos}',
         },
         slot: {
-          prop: 'netstatus.val',
-          formatter: '网络异常：${} 台',
+          prop: '${网络异常：}${netstatus.val} 台',
         },
       },
       background: {
@@ -365,31 +364,31 @@ export const ModulePresetMap: Record<
           items: [
             {
               label: '正常',
-              prop: 'blue.val',
+              prop: '${blue}.val',
               color: 'blue',
               info: '',
             },
             {
               label: '告警',
-              prop: 'orange.val',
+              prop: '${orange}.val',
               color: 'orange',
               info: '',
             },
             {
               label: '报警',
-              prop: 'yellow.val',
+              prop: '${yellow}.val',
               color: 'yellow',
               info: '',
             },
             {
               label: '危险',
-              prop: 'red.val',
+              prop: '${red}.val',
               color: 'red',
               info: '',
             },
             {
               label: '错误',
-              prop: 'alarm.val',
+              prop: '${alarm}.val',
               color: 'green',
               info: '',
             },
@@ -406,10 +405,10 @@ export const ModulePresetMap: Record<
         showSelector: true,
         showSlot: true,
         selector: {
-          prop: 'devicePos',
+          prop: '${devicePos}',
         },
         slot: {
-          prop: 'devicePos',
+          prop: '${devicePos}',
         },
       },
       background: {
@@ -429,19 +428,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: '喷雾状态',
             },
           ],
@@ -458,10 +457,10 @@ export const ModulePresetMap: Record<
         showSelector: true,
         showSlot: false,
         selector: {
-          prop: 'strinstallpos',
+          prop: '${strinstallpos}',
         },
         slot: {
-          prop: 'strinstallpos',
+          prop: '${strinstallpos}',
         },
       },
       background: {
@@ -487,11 +486,10 @@ export const ModulePresetMap: Record<
         showSelector: false,
         showSlot: true,
         selector: {
-          prop: 'strinstallpos',
+          prop: '${strinstallpos}',
         },
         slot: {
-          prop: 'netstatus.val',
-          formatter: '网络异常：${} 台',
+          prop: '${网络异常：}${netstatus.val} 台',
         },
       },
       background: {
@@ -512,13 +510,13 @@ export const ModulePresetMap: Record<
           items: [
             {
               label: '堵塞状态',
-              prop: 'fsectarea',
+              prop: '${fsectarea}',
               color: 'yellow',
               info: '',
             },
             {
               label: '甲烷浓度',
-              prop: 'stationname',
+              prop: '${stationname}',
               color: 'yellow',
               info: '',
             },
@@ -532,40 +530,38 @@ export const ModulePresetMap: Record<
           items: [
             {
               label: '火情状态',
-              prop: 'fsectarea',
+              prop: '${fsectarea}',
               color: 'yellow',
               info: '',
             },
             {
               label: '回采位置',
-              prop: 'stationname',
+              prop: '${stationname}',
               color: 'white',
               info: '',
             },
             {
               label: '硐室火情',
-              prop: 'stationtype',
+              prop: '${stationtype}',
               color: 'blue',
               info: '',
             },
             {
               label: '联动设备状态',
-              prop: 'typeName',
+              prop: '${typeName}',
               color: 'blue',
               info: '',
             },
           ],
           galleryItems: [
             {
-              prop: 'total',
+              prop: '${低风险}',
               label: '',
-              formatter: '低风险',
               color: 'white',
             },
             {
-              prop: 'total',
+              prop: '${CO}',
               label: '',
-              formatter: 'CO',
               color: 'white',
             },
           ],
@@ -584,10 +580,10 @@ export const ModulePresetMap: Record<
         showSelector: true,
         showSlot: true,
         selector: {
-          prop: 'devicePos',
+          prop: '${devicePos}',
         },
         slot: {
-          prop: 'devicePos',
+          prop: '${devicePos}',
         },
       },
       background: {
@@ -605,73 +601,73 @@ export const ModulePresetMap: Record<
           items: [
             {
               label: '火情状态',
-              prop: 'fsectarea',
+              prop: '${fsectarea}',
               color: 'yellow',
               info: '',
             },
             {
               label: '回采位置',
-              prop: 'stationname',
+              prop: '${stationname}',
               color: 'white',
               info: '',
             },
             {
               label: '硐室火情',
-              prop: 'stationtype',
+              prop: '${stationtype}',
               color: 'blue',
               info: '',
             },
             {
               label: '联动设备状态',
-              prop: 'typeName',
+              prop: '${typeName}',
               color: 'blue',
               info: '',
             },
             {
               label: '火情状态',
-              prop: 'fsectarea',
+              prop: '${fsectarea}',
               color: 'yellow',
               info: '',
             },
             {
               label: '回采位置',
-              prop: 'stationname',
+              prop: '${stationname}',
               color: 'white',
               info: '',
             },
             {
               label: '硐室火情',
-              prop: 'stationtype',
+              prop: '${stationtype}',
               color: 'blue',
               info: '',
             },
             {
               label: '联动设备状态',
-              prop: 'typeName',
+              prop: '${typeName}',
               color: 'blue',
               info: '',
             },
             // {
             //   label: '火情状态',
-            //   prop: 'fsectarea',
+            //   prop: '${fsectarea}',
             //   color: 'yellow',
             //   info: '',
             // },
             // {
             //   label: '回采位置',
-            //   prop: 'stationname',
+            //   prop: '${stationname}',
             //   color: 'white',
             //   info: '',
             // },
             // {
             //   label: '硐室火情',
-            //   prop: 'stationtype',
+            //   prop: '${stationtype}',
             //   color: 'blue',
             //   info: '',
             // },
             // {
             //   label: '联动设备状态',
-            //   prop: 'typeName',
+            //   prop: '${typeName}',
             //   color: 'blue',
             //   info: '',
             // },
@@ -688,34 +684,33 @@ export const ModulePresetMap: Record<
           items: [
             {
               label: '火情状态',
-              prop: 'fsectarea',
+              prop: '${fsectarea}',
               color: 'yellow',
               info: '',
             },
             {
               label: '回采位置',
-              prop: 'stationname',
+              prop: '${stationname}',
               color: 'white',
               info: '',
             },
             {
               label: '硐室火情',
-              prop: 'stationtype',
+              prop: '${stationtype}',
               color: 'blue',
               info: '',
             },
             {
               label: '联动设备状态',
-              prop: 'typeName',
+              prop: '${typeName}',
               color: 'blue',
               info: '',
             },
           ],
           galleryItems: [
             {
-              prop: 'total',
+              prop: '${低风险}',
               label: '风险等级',
-              formatter: '低风险',
               color: 'white',
             },
           ],

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

@@ -25,7 +25,6 @@ export interface ModuleDataBoard {
   items: {
     /** 展示牌说明内容 */
     label: string;
-    formatter?: string;
     prop: string;
   }[];
 }
@@ -37,7 +36,6 @@ export interface ModuleDataList {
   items: {
     /** 列表项说明内容 */
     label: string;
-    formatter?: string;
     prop: string;
     color: string;
     /** 针对列表项说明的额外信息 */
@@ -54,7 +52,6 @@ export interface ModuleDataGallery {
   items: {
     /** 列表项说明内容 */
     label: string;
-    formatter?: string;
     prop: string;
     color: string;
   }[];
@@ -67,7 +64,6 @@ export interface ModuleDataComplexList {
   items: {
     /** 列表项说明内容 */
     label: string;
-    formatter?: string;
     prop: string;
     color: string;
     /** 针对列表项说明的额外信息 */
@@ -76,7 +72,6 @@ export interface ModuleDataComplexList {
   galleryItems: {
     /** 列表项说明内容 */
     label: string;
-    formatter?: string;
     prop: string;
     color: string;
   }[];
@@ -92,7 +87,6 @@ export interface ModuleDataChart {
   order?: 'desc' | 'asc';
   /** 图表x轴配置（若有），例如：{ prop: 'strInstallPos' } */
   xAxis: {
-    formatter?: string;
     prop: string;
   }[];
   /** 图表y轴配置（若有），例如：['风量', '风速'] */
@@ -140,14 +134,12 @@ export interface ModuleData {
     selector: {
       /** 图标，具体支持的输入种类请联系技术人员 */
       icon?: string;
-      formatter?: string;
       prop: string;
     };
     /** 右侧插槽的配置 */
     slot: {
       /** 图标，具体支持的输入种类请联系技术人员 */
       icon?: string;
-      formatter?: string;
       prop: string;
     };
   };

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

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

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

@@ -128,7 +128,7 @@
   import CustomGallery from './CustomGallery.vue';
   import ComplexList from './ComplexList.vue';
   import CustomTable from './CustomTable.vue';
-  import { getFormattedText } from '../../../deviceManager/configurationTable/adapters';
+  import { getFormattedText, getRawProp } from '../../../deviceManager/configurationTable/adapters';
   import CustomChart from './CustomChart.vue';
   import { get, clone } from 'lodash-es';
   import CommonTable from '../../billboard/components/CommonTable.vue';
@@ -169,7 +169,8 @@
             items: cfg.items.map((i) => {
               return {
                 ...i,
-                value: getFormattedText(data, i.prop, i.formatter),
+                label: getFormattedText(data, i.label),
+                value: getFormattedText(data, i.prop),
               };
             }),
           });
@@ -185,7 +186,8 @@
             items: cfg.items.map((i) => {
               return {
                 ...i,
-                value: getFormattedText(data, i.prop, i.formatter),
+                label: getFormattedText(data, i.label),
+                value: getFormattedText(data, i.prop),
               };
             }),
           });
@@ -202,7 +204,8 @@
             items: cfg.items.map((i) => {
               return {
                 ...i,
-                value: getFormattedText(data, i.prop, i.formatter),
+                label: getFormattedText(data, i.label),
+                value: getFormattedText(data, i.prop),
               };
             }),
           });
@@ -219,13 +222,15 @@
             items: cfg.items.map((i) => {
               return {
                 ...i,
-                value: getFormattedText(data, i.prop, i.formatter),
+                label: getFormattedText(data, i.label),
+                value: getFormattedText(data, i.prop),
               };
             }),
             galleryItems: cfg.galleryItems.map((i) => {
               return {
                 ...i,
-                value: getFormattedText(data, i.prop, i.formatter),
+                label: getFormattedText(data, i.label),
+                value: getFormattedText(data, i.prop),
               };
             }),
           });
@@ -254,7 +259,7 @@
             columns: (cfg.columns || []).map((e) => {
               return {
                 name: e.label,
-                prop: e.prop,
+                prop: getRawProp(e.prop),
               };
             }),
             data: get(data, cfg.readFrom, []),

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

@@ -336,10 +336,10 @@ export const testConfigA: Config[] = [
   //       showSelector: true,
   //       showSlot: true,
   //       selector: {
-  //         prop: 'strinstallpos',
+  //         prop: '${strinstallpos}',
   //       },
   //       slot: {
-  //         prop: 'strinstallpos',
+  //         prop: '${strinstallpos}',
   //       },
   //     },
   //     background: {
@@ -354,12 +354,12 @@ export const testConfigA: Config[] = [
   //         layout: 'val-top',
   //         items: [
   //           {
-  //             prop: 'readData.windSpeed1',
+  //             prop: '${readData}.windSpeed1',
   //             label: '风速1',
   //           },
   //           {
   //             label: '风速2',
-  //             prop: 'readData.windSpeed2',
+  //             prop: '${readData}.windSpeed2',
   //           },
   //         ],
   //       },
@@ -386,10 +386,10 @@ export const testConfigA: Config[] = [
   //       showSelector: true,
   //       showSlot: true,
   //       selector: {
-  //         prop: 'strinstallpos',
+  //         prop: '${strinstallpos}',
   //       },
   //       slot: {
-  //         prop: 'strinstallpos',
+  //         prop: '${strinstallpos}',
   //       },
   //     },
   //     background: {
@@ -404,15 +404,15 @@ export const testConfigA: Config[] = [
   //       {
   //         type: 'line_area',
   //         readFrom: 'majorpath.paths',
-  //         xAxis: [{ prop: 'name' }],
+  //         xAxis: [{ prop: '${name}' }],
   //         yAxis: [
   //           { label: 'Drag', align: 'left' },
   //           { label: 'M3', align: 'right' },
   //         ],
   //         series: [
-  //           { label: 'Drag', prop: 'drag' },
-  //           { label: 'M3', prop: 'm3' },
-  //           // { label: '回2', prop: 'hui2' },
+  //           { label: 'Drag', prop: '${drag}' },
+  //           { label: 'M3', prop: '${m3}' },
+  //           // { label: '回2', prop: '${hui2}' },
   //         ],
   //       },
   //     ],
@@ -436,11 +436,10 @@ export const testConfigA: Config[] = [
         showSelector: false,
         showSlot: true,
         selector: {
-          prop: 'strinstallpos',
+          prop: '${strinstallpos}',
         },
         slot: {
-          prop: 'netstatus.val',
-          formatter: '网络异常：${} 台',
+          prop: '网络异常：${netstatus.val} 台',
         },
       },
       background: {
@@ -461,13 +460,13 @@ export const testConfigA: Config[] = [
           items: [
             {
               label: '堵塞状态',
-              prop: 'fsectarea',
+              prop: '${fsectarea}',
               color: 'yellow',
               info: '',
             },
             {
               label: '甲烷浓度',
-              prop: 'stationname',
+              prop: '${stationname}',
               color: 'yellow',
               info: '',
             },
@@ -479,13 +478,13 @@ export const testConfigA: Config[] = [
           items: [
             {
               label: '堵塞状态',
-              prop: 'fsectarea',
+              prop: '${fsectarea}',
               color: 'yellow',
               info: '',
             },
             {
               label: '甲烷浓度',
-              prop: 'stationname',
+              prop: '${stationname}',
               color: 'yellow',
               info: '',
             },
@@ -499,40 +498,38 @@ export const testConfigA: Config[] = [
           items: [
             {
               label: '火情状态',
-              prop: 'fsectarea',
+              prop: '${fsectarea}',
               color: 'yellow',
               info: '',
             },
             {
               label: '回采位置',
-              prop: 'stationname',
+              prop: '${stationname}',
               color: 'white',
               info: '',
             },
             {
               label: '硐室火情',
-              prop: 'stationtype',
+              prop: '${stationtype}',
               color: 'blue',
               info: '',
             },
             {
               label: '联动设备状态',
-              prop: 'typeName',
+              prop: '${typeName}',
               color: 'blue',
               info: '',
             },
           ],
           galleryItems: [
             {
-              prop: 'total',
+              prop: '低风险',
               label: '',
-              formatter: '低风险',
               color: 'white',
             },
             {
-              prop: 'total',
+              prop: '${CO}',
               label: '',
-              formatter: 'CO',
               color: 'white',
             },
           ],
@@ -557,11 +554,11 @@ export const testConfigA: Config[] = [
         showSlot: false,
         selector: {
           icon: 'SwapOutlined',
-          prop: 'strinstallpos',
+          prop: '${strinstallpos}',
         },
         slot: {
           icon: 'SwapOutlined',
-          prop: 'strinstallpos',
+          prop: '${strinstallpos}',
         },
       },
       background: {
@@ -580,14 +577,14 @@ export const testConfigA: Config[] = [
         {
           type: 'bar',
           readFrom: 'sysdata.history',
-          xAxis: [{ prop: 'time' }],
+          xAxis: [{ prop: '${time}' }],
           yAxis: [
             { label: '回1', align: 'left' },
             // { label: '回2', align: 'right' },
           ],
           series: [
-            { label: '回1', prop: 'hui1' },
-            // { label: '回2', prop: 'hui2' },
+            { label: '回1', prop: '${hui1}' },
+            // { label: '回2', prop: '${hui2}' },
           ],
         },
       ],
@@ -608,10 +605,10 @@ export const testConfigA: Config[] = [
         showSelector: true,
         showSlot: false,
         selector: {
-          prop: 'strinstallpos',
+          prop: '${strinstallpos}',
         },
         slot: {
-          prop: 'strinstallpos',
+          prop: '${strinstallpos}',
         },
       },
       background: {
@@ -631,49 +628,49 @@ export const testConfigA: Config[] = [
           items: [
             {
               label: '面积',
-              prop: 'fsectarea',
+              prop: '${fsectarea}',
               color: 'blue',
               info: '',
             },
             {
               label: '分站名称',
-              prop: 'stationname',
+              prop: '${stationname}',
               color: 'blue',
               info: '',
             },
             {
               label: '分站类别',
-              prop: 'stationtype',
+              prop: '${stationtype}',
               color: 'blue',
               info: '',
             },
             {
               label: '分类',
-              prop: 'typeName',
+              prop: '${typeName}',
               color: 'blue',
               info: '',
             },
             {
               label: '告警标识',
-              prop: 'warnFlag',
+              prop: '${warnFlag}',
               color: 'blue',
               info: '',
             },
             {
               label: '告警等级',
-              prop: 'warnLevel',
+              prop: '${warnLevel}',
               color: 'blue',
               info: '',
             },
             {
               label: '告警描述',
-              prop: 'warnLevel_str',
+              prop: '${warnLevel_str}',
               color: 'blue',
               info: '',
             },
             {
               label: '错误记录',
-              prop: 'warnLogNotOkCount',
+              prop: '${warnLogNotOkCount}',
               color: 'blue',
               info: '',
             },
@@ -685,25 +682,25 @@ export const testConfigA: Config[] = [
           items: [
             {
               label: '面积',
-              prop: 'fsectarea',
+              prop: '${fsectarea}',
               color: 'blue',
               info: '',
             },
             {
               label: '分站名称',
-              prop: 'stationname',
+              prop: '${stationname}',
               color: 'blue',
               info: '',
             },
             {
               label: '分站类别',
-              prop: 'stationtype',
+              prop: '${stationtype}',
               color: 'blue',
               info: '',
             },
             {
               label: '分类',
-              prop: 'typeName',
+              prop: '${typeName}',
               color: 'blue',
               info: '',
             },
@@ -730,10 +727,10 @@ export const testConfigA: Config[] = [
   //       showSelector: true,
   //       showSlot: true,
   //       selector: {
-  //         prop: 'devicePos',
+  //         prop: '${devicePos}',
   //       },
   //       slot: {
-  //         prop: 'devicePos',
+  //         prop: '${devicePos}',
   //       },
   //     },
   //     background: {
@@ -751,15 +748,15 @@ export const testConfigA: Config[] = [
   //         readFrom: 'history',
   //         columns: [
   //           {
-  //             prop: 'index',
+  //             prop: '${index}',
   //             label: '编号',
   //           },
   //           {
-  //             prop: 'time',
+  //             prop: '${time}',
   //             label: '报警时间',
   //           },
   //           {
-  //             prop: 'warn',
+  //             prop: '${warn}',
   //             label: '报警内容',
   //           },
   //         ],
@@ -783,10 +780,10 @@ export const testConfigA: Config[] = [
   //       showSelector: true,
   //       showSlot: true,
   //       selector: {
-  //         prop: 'devicePos',
+  //         prop: '${devicePos}',
   //       },
   //       slot: {
-  //         prop: 'devicePos',
+  //         prop: '${devicePos}',
   //       },
   //     },
   //     background: {
@@ -817,10 +814,10 @@ export const testConfigA: Config[] = [
   //       showSelector: true,
   //       showSlot: true,
   //       selector: {
-  //         prop: 'devicePos',
+  //         prop: '${devicePos}',
   //       },
   //       slot: {
-  //         prop: 'devicePos',
+  //         prop: '${devicePos}',
   //       },
   //     },
   //     background: {
@@ -840,19 +837,19 @@ export const testConfigA: Config[] = [
   //         readFrom: 'history',
   //         columns: [
   //           {
-  //             prop: 'cate',
+  //             prop: '${cate}',
   //             label: '类别',
   //           },
   //           {
-  //             prop: 'temp',
+  //             prop: '${temp}',
   //             label: '温度',
   //           },
   //           {
-  //             prop: 'wspd',
+  //             prop: '${wspd}',
   //             label: '风速',
   //           },
   //           {
-  //             prop: 'spst',
+  //             prop: '${spst}',
   //             label: '喷雾状态',
   //           },
   //         ],
@@ -876,10 +873,10 @@ export const testConfigA: Config[] = [
         showSelector: true,
         showSlot: true,
         selector: {
-          prop: 'devicePos',
+          prop: '${devicePos}',
         },
         slot: {
-          prop: 'devicePos',
+          prop: '${devicePos}',
         },
       },
       background: {
@@ -897,73 +894,73 @@ export const testConfigA: Config[] = [
           items: [
             {
               label: '火情状态',
-              prop: 'fsectarea',
+              prop: '${fsectarea}',
               color: 'yellow',
               info: '',
             },
             {
               label: '回采位置',
-              prop: 'stationname',
+              prop: '${stationname}',
               color: 'white',
               info: '',
             },
             {
               label: '硐室火情',
-              prop: 'stationtype',
+              prop: '${stationtype}',
               color: 'blue',
               info: '',
             },
             {
               label: '联动设备状态',
-              prop: 'typeName',
+              prop: '${typeName}',
               color: 'blue',
               info: '',
             },
             {
               label: '火情状态',
-              prop: 'fsectarea',
+              prop: '${fsectarea}',
               color: 'yellow',
               info: '',
             },
             {
               label: '回采位置',
-              prop: 'stationname',
+              prop: '${stationname}',
               color: 'white',
               info: '',
             },
             {
               label: '硐室火情',
-              prop: 'stationtype',
+              prop: '${stationtype}',
               color: 'blue',
               info: '',
             },
             {
               label: '联动设备状态',
-              prop: 'typeName',
+              prop: '${typeName}',
               color: 'blue',
               info: '',
             },
             // {
             //   label: '火情状态',
-            //   prop: 'fsectarea',
+            //   prop: '${fsectarea}',
             //   color: 'yellow',
             //   info: '',
             // },
             // {
             //   label: '回采位置',
-            //   prop: 'stationname',
+            //   prop: '${stationname}',
             //   color: 'white',
             //   info: '',
             // },
             // {
             //   label: '硐室火情',
-            //   prop: 'stationtype',
+            //   prop: '${stationtype}',
             //   color: 'blue',
             //   info: '',
             // },
             // {
             //   label: '联动设备状态',
-            //   prop: 'typeName',
+            //   prop: '${typeName}',
             //   color: 'blue',
             //   info: '',
             // },
@@ -980,34 +977,33 @@ export const testConfigA: Config[] = [
           items: [
             {
               label: '火情状态',
-              prop: 'fsectarea',
+              prop: '${fsectarea}',
               color: 'yellow',
               info: '',
             },
             {
               label: '回采位置',
-              prop: 'stationname',
+              prop: '${stationname}',
               color: 'white',
               info: '',
             },
             {
               label: '硐室火情',
-              prop: 'stationtype',
+              prop: '${stationtype}',
               color: 'blue',
               info: '',
             },
             {
               label: '联动设备状态',
-              prop: 'typeName',
+              prop: '${typeName}',
               color: 'blue',
               info: '',
             },
           ],
           galleryItems: [
             {
-              prop: 'total',
+              prop: '低风险',
               label: '风险等级',
-              formatter: '低风险',
               color: 'white',
             },
           ],
@@ -1033,10 +1029,10 @@ export const testConfigB: Config[] = [
   //       showSelector: false,
   //       showSlot: true,
   //       selector: {
-  //         prop: 'strinstallpos',
+  //         prop: '${strinstallpos}',
   //       },
   //       slot: {
-  //         prop: 'netstatus.val',
+  //         prop: '${netstatus}.val',
   //         formatter: '网络异常：${} 台',
   //       },
   //     },
@@ -1052,31 +1048,31 @@ export const testConfigB: Config[] = [
   //     list: [
   //       {
   //         label: '正常',
-  //         prop: 'blue.val',
+  //         prop: '${blue}.val',
   //         color: 'blue',
   //         type: 'timeline',
   //       },
   //       {
   //         label: '告警',
-  //         prop: 'orange.val',
+  //         prop: '${orange}.val',
   //         color: 'orange',
   //         type: 'timeline',
   //       },
   //       {
   //         label: '报警',
-  //         prop: 'yellow.val',
+  //         prop: '${yellow}.val',
   //         color: 'yellow',
   //         type: 'timeline',
   //       },
   //       {
   //         label: '危险',
-  //         prop: 'red.val',
+  //         prop: '${red}.val',
   //         color: 'red',
   //         type: 'timeline',
   //       },
   //       {
   //         label: '错误',
-  //         prop: 'alarm.val',
+  //         prop: '${alarm}.val',
   //         color: 'green',
   //         type: 'timeline',
   //       },
@@ -1098,10 +1094,10 @@ export const testConfigB: Config[] = [
   //       showSelector: true,
   //       showSlot: false,
   //       selector: {
-  //         prop: 'strinstallpos',
+  //         prop: '${strinstallpos}',
   //       },
   //       slot: {
-  //         prop: 'strinstallpos',
+  //         prop: '${strinstallpos}',
   //       },
   //     },
   //     background: {
@@ -1115,13 +1111,13 @@ export const testConfigB: Config[] = [
   //         label: 'F1',
   //         type: 'C',
   //         layout: 'val-top',
-  //         prop: 'f1Val',
+  //         prop: '${f1Val}',
   //       },
   //       {
   //         label: 'F2',
   //         type: 'C',
   //         layout: 'val-top',
-  //         prop: 'f2Val',
+  //         prop: '${f2Val}',
   //       },
   //     ],
   //     list: [],
@@ -1130,15 +1126,15 @@ export const testConfigB: Config[] = [
   //         readFrom: 'history',
   //         columns: [
   //           {
-  //             prop: 'index',
+  //             prop: '${index}',
   //             label: '编号',
   //           },
   //           {
-  //             prop: 'time',
+  //             prop: '${time}',
   //             label: '自定义字段A',
   //           },
   //           {
-  //             prop: 'warn',
+  //             prop: '${warn}',
   //             label: '自定义字段B',
   //           },
   //         ],
@@ -1148,15 +1144,15 @@ export const testConfigB: Config[] = [
   //       {
   //         type: 'pie',
   //         readFrom: 'readData',
-  //         xAxis: [{ prop: 'stationname' }],
+  //         xAxis: [{ prop: '${stationname}' }],
   //         yAxis: [
   //           { label: '风量1', align: 'left' },
   //           // { label: '回2', align: 'right' },
   //         ],
   //         series: [
-  //           { label: '风量1', prop: 'va' },
-  //           { label: '风量2', prop: 'va2' },
-  //           // { label: '回2', prop: 'hui2' },
+  //           { label: '风量1', prop: '${va}' },
+  //           { label: '风量2', prop: '${va2}' },
+  //           // { label: '回2', prop: '${hui2}' },
   //         ],
   //       },
   //     ],
@@ -1178,11 +1174,11 @@ export const testConfigB: Config[] = [
   //       showSlot: false,
   //       selector: {
   //         icon: 'SwapOutlined',
-  //         prop: 'strinstallpos',
+  //         prop: '${strinstallpos}',
   //       },
   //       slot: {
   //         icon: 'SwapOutlined',
-  //         prop: 'strinstallpos',
+  //         prop: '${strinstallpos}',
   //       },
   //     },
   //     background: {
@@ -1198,14 +1194,14 @@ export const testConfigB: Config[] = [
   //       {
   //         type: 'bar',
   //         readFrom: 'sysdata.history',
-  //         xAxis: [{ prop: 'time' }],
+  //         xAxis: [{ prop: '${time}' }],
   //         yAxis: [
   //           { label: '回1', align: 'left' },
   //           // { label: '回2', align: 'right' },
   //         ],
   //         series: [
-  //           { label: '回1', prop: 'hui1' },
-  //           // { label: '回2', prop: 'hui2' },
+  //           { label: '回1', prop: '${hui1}' },
+  //           // { label: '回2', prop: '${hui2}' },
   //         ],
   //       },
   //     ],
@@ -1226,10 +1222,10 @@ export const testConfigB: Config[] = [
   //       showSelector: true,
   //       showSlot: true,
   //       selector: {
-  //         prop: 'strinstallpos',
+  //         prop: '${strinstallpos}',
   //       },
   //       slot: {
-  //         prop: 'strinstallpos',
+  //         prop: '${strinstallpos}',
   //       },
   //     },
   //     background: {
@@ -1244,15 +1240,15 @@ export const testConfigB: Config[] = [
   //       {
   //         type: 'line',
   //         readFrom: 'majorpath.paths',
-  //         xAxis: [{ prop: 'name' }],
+  //         xAxis: [{ prop: '${name}' }],
   //         yAxis: [
   //           { label: 'Drag', align: 'left' },
   //           { label: 'M3', align: 'right' },
   //         ],
   //         series: [
-  //           { label: 'Drag', prop: 'drag' },
-  //           { label: 'M3', prop: 'm3' },
-  //           // { label: '回2', prop: 'hui2' },
+  //           { label: 'Drag', prop: '${drag}' },
+  //           { label: 'M3', prop: '${m3}' },
+  //           // { label: '回2', prop: '${hui2}' },
   //         ],
   //       },
   //     ],
@@ -1274,10 +1270,10 @@ export const testConfigB: Config[] = [
   //       showSelector: false,
   //       showSlot: true,
   //       selector: {
-  //         prop: 'strinstallpos',
+  //         prop: '${strinstallpos}',
   //       },
   //       slot: {
-  //         prop: 'netstatus.val',
+  //         prop: '${netstatus}.val',
   //         formatter: '网络异常：${} 台',
   //       },
   //     },
@@ -1293,31 +1289,31 @@ export const testConfigB: Config[] = [
   //     list: [
   //       {
   //         label: '正常',
-  //         prop: 'blue.val',
+  //         prop: '${blue}.val',
   //         color: 'blue',
   //         type: 'B',
   //       },
   //       {
   //         label: '告警',
-  //         prop: 'orange.val',
+  //         prop: '${orange}.val',
   //         color: 'orange',
   //         type: 'B',
   //       },
   //       {
   //         label: '报警',
-  //         prop: 'yellow.val',
+  //         prop: '${yellow}.val',
   //         color: 'yellow',
   //         type: 'B',
   //       },
   //       {
   //         label: '危险',
-  //         prop: 'red.val',
+  //         prop: '${red}.val',
   //         color: 'red',
   //         type: 'B',
   //       },
   //       {
   //         label: '错误',
-  //         prop: 'alarm.val',
+  //         prop: '${alarm}.val',
   //         color: 'green',
   //         type: 'B',
   //       },