[Feat 0000] 修复配置表编辑时会覆盖原配置的问题，添加火灾粉尘配置

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

@@ -1,13 +1,12 @@
-import _ from 'lodash-es';
+import { get, forEach, set, isNil } from 'lodash-es';
 import { ModuleData, ShowStyle } from './types';
-import { ModulePositionMap, ModuleSizeMap } from './options';
 
 /** 将原本的 formData 格式化为 api.saveOrUpdate 需要的格式 */
 export function parseFormDataToParams(formData: Record<string, number | string | undefined>) {
   const params = {};
-  _.forEach(formData, (v: string | undefined, k) => {
+  forEach(formData, (v: string | undefined, k) => {
     if (!v) return;
-    return _.set(params, k, v);
+    return set(params, k, v);
   });
 
   return params;
@@ -15,15 +14,8 @@ export function parseFormDataToParams(formData: Record<string, number | string |
 
 /** 将 api.list 返回的数据格式化，格式化之后可以支持对应的表单使用，该方法会修改源数据 */
 export function parseModuleData(listData: { moduleData: ModuleData; showStyle: ShowStyle }) {
-  _.forEach(listData.showStyle, (v, k) => {
-    listData[`showStyle.${k}`] = _.get(
-      {
-        ...ModuleSizeMap,
-        ...ModulePositionMap,
-      },
-      v,
-      v
-    );
+  forEach(listData.showStyle, (v, k) => {
+    listData[`showStyle.${k}`] = v;
   });
 
   return listData;
@@ -38,8 +30,8 @@ export function getFormattedText(data: any, formatter: string, defaultValue?: an
 
   const [__, prop] = res;
   const val = defaultValue === undefined ? '-' : defaultValue;
-  const txt = _.get(data, prop);
-  return formatter.replace(exp, _.isNil(txt) ? val : txt);
+  const txt = get(data, prop);
+  return formatter.replace(exp, isNil(txt) ? val : txt);
 }
 
 /** 获取 formatter 需要取的源 prop，用于在一些不支持 formatter 的组件中使用 */

src/views/vent/deviceManager/configurationTable/configuration.api.ts

@@ -1,7 +1,7 @@
 import { parseFormDataToParams, parseModuleData } from './adapters';
 import { Config } from './types';
 import { defHttp } from '/@/utils/http/axios';
-import _ from 'lodash-es';
+import { omitBy, isNil } from 'lodash-es';
 
 enum Api {
   list = '/safety/configurationData/getConfigurationDataList',
@@ -15,7 +15,7 @@ enum Api {
  * @param params
  */
 export function list(params: any): Promise<{ records: Config[] }> {
-  return defHttp.post({ url: Api.list, params: _.omitBy(params, _.isNil) }, { joinParamsToUrl: true }).then((result) => {
+  return defHttp.post({ url: Api.list, params: omitBy(params, isNil) }, { joinParamsToUrl: true }).then((result) => {
     result.records.forEach((item) => {
       parseModuleData(item);
     });
@@ -58,5 +58,6 @@ export const deleteById = (params, handleSuccess) => {
 export const saveOrUpdate = (formData: Record<string, number | string | undefined>, isUpdate) => {
   const url = isUpdate ? Api.edit : Api.save;
   const params = parseFormDataToParams(formData);
-  return isUpdate ? defHttp.post({ url: url, params }) : defHttp.post({ url: url, params });
+  console.log('debug', params);
+  return defHttp.post({ url: url, params });
 };

src/views/vent/deviceManager/configurationTable/configuration.data.ts

@@ -2,7 +2,6 @@
 import { ModulePositionOptions, ModulePresetOptions, ModuleVersionOptions } from './options';
 import { BasicColumn } from '/@/components/Table';
 import { FormSchema } from '/@/components/Table';
-import _ from 'lodash-es';
 
 export const columns: BasicColumn[] = [
   {
@@ -21,10 +20,10 @@ export const columns: BasicColumn[] = [
     title: '原始预设名称',
     dataIndex: 'desc',
   },
-  // {
-  //   title: '模块尺寸',
-  //   dataIndex: 'showStyle.size',
-  // },
+  {
+    title: '模块尺寸',
+    dataIndex: 'showStyle.size',
+  },
   {
     title: '模块版本',
     dataIndex: 'showStyle.version',
@@ -66,6 +65,18 @@ export const formSchema: FormSchema[] = [
     show: false,
   },
   {
+    label: '',
+    field: 'showStyle',
+    component: 'InputNumber',
+    show: false,
+  },
+  {
+    label: '',
+    field: 'moduleData',
+    component: 'InputNumber',
+    show: false,
+  },
+  {
     label: '模块标题',
     field: 'moduleName',
     component: 'Input',

src/views/vent/deviceManager/configurationTable/index.vue

@@ -37,7 +37,7 @@
   import { BasicModal } from '/@/components/Modal';
   import CodeEditor from '/@/components/CodeEditor/src/CodeEditor.vue';
   import { ModulePresetMap } from './options';
-  import _ from 'lodash-es';
+  import _ from 'lodash';
   import helpContext from './types?raw';
 
   const formData = reactive<any>({});

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

@@ -41,14 +41,14 @@ export const ModulePositionOptions = _.map(ModulePositionMap, (v, k) => ({
 /** 默认的模块预设选项，每个预设对应着一种写好的配置 */
 export const ModulePresetOptions = _.map(
   [
-    '告示版（1*1）',
-    '折线图（1*1）',
-    '面积图（1*1）',
-    '饼状图（1*1）',
-    '柱状图（2*1）',
-    '画廊（1*1）',
-    '列表（1*1）',
-    '表格（1*1）',
+    // '告示版（1*1）',
+    // '折线图（1*1）',
+    // '面积图（1*1）',
+    // '饼状图（1*1）',
+    // '柱状图（2*1）',
+    // '画廊（1*1）',
+    // '列表（1*1）',
+    // '表格（1*1）',
     '爆炸三角形（1*1）',
   ],
   (k) => ({
@@ -65,399 +65,6 @@ export const ModulePresetMap: Record<
     showStyle: Partial<Config['showStyle']>;
   }
 > = {
-  '告示版（1*1）': {
-    moduleData: {
-      header: {
-        show: true,
-        showSelector: true,
-        showSlot: true,
-        selector: {
-          value: '${strinstallpos}',
-        },
-        slot: {
-          value: '${strinstallpos}',
-        },
-      },
-      background: {
-        show: false,
-        type: 'image',
-        link: '',
-      },
-      layout: ['board'],
-      board: [
-        {
-          type: 'A',
-          layout: 'val-top',
-          readFrom: 'readData',
-          items: [
-            {
-              value: '${Fan1StartStatus_str}',
-              label: '一号机状态',
-            },
-            {
-              value: '${Fan2StartStatus_str}',
-              label: '二号机状态',
-            },
-          ],
-        },
-      ],
-      list: [],
-      chart: [],
-      table: [],
-      gallery: [],
-      preset: [],
-      complex_list: [],
-    },
-    showStyle: {
-      size: 'width:450px;height:280px;',
-    },
-  },
-  '折线图（1*1）': {
-    moduleData: {
-      header: {
-        show: false,
-        showSelector: true,
-        showSlot: true,
-        selector: {
-          value: '${strinstallpos}',
-        },
-        slot: {
-          value: '${strinstallpos}',
-        },
-      },
-      background: {
-        show: false,
-        type: 'video',
-        link: '',
-      },
-      layout: ['chart'],
-      board: [],
-      list: [],
-      chart: [
-        {
-          type: 'line',
-          readFrom: 'majorpath.paths',
-          xAxis: [{ label: '${name}' }],
-          yAxis: [
-            { label: 'Drag', align: 'left' },
-            { label: 'M3', align: 'right' },
-          ],
-          series: [
-            { label: 'Drag', value: '${drag}' },
-            { label: 'M3', value: '${m3}' },
-            // { label: '回2', value: '${hui2}' },
-          ],
-        },
-      ],
-      gallery: [],
-      table: [],
-      preset: [],
-      complex_list: [],
-    },
-    showStyle: {
-      size: 'width:450px;height:280px;',
-    },
-  },
-  '面积图（1*1）': {
-    moduleData: {
-      header: {
-        show: false,
-        showSelector: true,
-        showSlot: true,
-        selector: {
-          value: '${strinstallpos}',
-        },
-        slot: {
-          value: '${strinstallpos}',
-        },
-      },
-      background: {
-        show: false,
-        type: 'video',
-        link: '',
-      },
-      layout: ['chart'],
-      board: [],
-      list: [],
-      chart: [
-        {
-          type: 'line_area',
-          readFrom: 'majorpath.paths',
-          xAxis: [{ label: '${name}' }],
-          yAxis: [
-            { label: 'Drag', align: 'left' },
-            { label: 'M3', align: 'right' },
-          ],
-          series: [
-            { label: 'Drag', value: '${drag}' },
-            { label: 'M3', value: '${m3}' },
-            // { label: '回2', value: '${hui2}' },
-          ],
-        },
-      ],
-      gallery: [],
-      table: [],
-      preset: [],
-      complex_list: [],
-    },
-    showStyle: { size: 'width:450px;height:280px;' },
-  },
-  '饼状图（1*1）': {
-    moduleData: {
-      header: {
-        show: false,
-        showSelector: true,
-        showSlot: true,
-        selector: {
-          value: '${strinstallpos}',
-        },
-        slot: {
-          value: '${strinstallpos}',
-        },
-      },
-      background: {
-        show: false,
-        type: 'video',
-        link: '',
-      },
-      layout: ['chart'],
-      board: [],
-      list: [],
-      chart: [
-        {
-          type: 'pie',
-          readFrom: 'history',
-          xAxis: [],
-          yAxis: [],
-          series: [
-            { label: 'Drag', value: '${drag}' },
-            { label: 'M3', value: '${m3}' },
-            // { label: '回2', value: '${hui2}' },
-          ],
-        },
-      ],
-      gallery: [],
-      table: [],
-      preset: [],
-      complex_list: [],
-    },
-    showStyle: { size: 'width:450px;height:280px;' },
-  },
-  '柱状图（2*1）': {
-    moduleData: {
-      header: {
-        show: false,
-        showSelector: false,
-        showSlot: false,
-        selector: {
-          value: '${strinstallpos}',
-        },
-        slot: {
-          value: '${strinstallpos}',
-        },
-      },
-      background: {
-        show: false,
-        type: 'video',
-        link: '',
-      },
-      layout: ['chart'],
-      board: [],
-      list: [],
-      table: [],
-      preset: [],
-      gallery: [],
-      complex_list: [],
-      chart: [
-        {
-          type: 'bar',
-          readFrom: 'sysdata.history',
-          xAxis: [{ label: '${time}' }],
-          yAxis: [{ label: '回1', align: 'left' }],
-          series: [{ label: '回1', value: '${hui1}' }],
-        },
-      ],
-    },
-    showStyle: { size: 'width:450px;height:280px;' },
-  },
-  '画廊（1*1）': {
-    moduleData: {
-      header: {
-        show: false,
-        showSelector: false,
-        showSlot: false,
-        selector: {
-          value: '${devicePos}',
-        },
-        slot: {
-          value: '${devicePos}',
-        },
-      },
-      background: {
-        show: false,
-        type: 'video',
-        link: '',
-      },
-      layout: ['gallery'],
-      board: [],
-      gallery: [
-        {
-          type: 'A',
-          readFrom: 'device',
-          items: [
-            {
-              value: '${gate}',
-              label: '风门',
-              // label: '光纤预警',
-              color: 'blue',
-            },
-            {
-              value: '${window}',
-              label: '风窗',
-              // label: '喷雾开启数',
-              color: 'blue',
-            },
-            {
-              value: '${windrect}',
-              label: '测风',
-              // label: '联网数量',
-              color: 'blue',
-            },
-            {
-              value: '${stationtype}',
-              label: '空位',
-              // label: '断网数量',
-              color: 'blue',
-            },
-          ],
-        },
-      ],
-      list: [],
-      table: [],
-      chart: [],
-      preset: [],
-      complex_list: [],
-    },
-    showStyle: { size: 'width:450px;height:280px;' },
-  },
-  '列表（1*1）': {
-    moduleData: {
-      header: {
-        show: false,
-        showSelector: false,
-        showSlot: true,
-        selector: {
-          value: '${strinstallpos}',
-        },
-        slot: {
-          value: '${网络异常：}${netstatus.val} 台',
-        },
-      },
-      background: {
-        show: false,
-        type: 'video',
-        link: '',
-      },
-      layout: ['list'],
-      board: [],
-      chart: [],
-      table: [],
-      preset: [],
-      complex_list: [],
-      gallery: [],
-      list: [
-        {
-          type: 'timeline',
-          readFrom: '',
-          items: [
-            {
-              label: '正常',
-              value: '${blue}.val',
-              color: 'blue',
-              info: '',
-            },
-            {
-              label: '告警',
-              value: '${orange}.val',
-              color: 'orange',
-              info: '',
-            },
-            {
-              label: '报警',
-              value: '${yellow}.val',
-              color: 'yellow',
-              info: '',
-            },
-            {
-              label: '危险',
-              value: '${red}.val',
-              color: 'red',
-              info: '',
-            },
-            {
-              label: '错误',
-              value: '${alarm}.val',
-              color: 'green',
-              info: '',
-            },
-          ],
-        },
-      ],
-    },
-    showStyle: { size: 'width:450px;height:280px;' },
-  },
-  '表格（1*1）': {
-    moduleData: {
-      header: {
-        show: false,
-        showSelector: true,
-        showSlot: true,
-        selector: {
-          value: '${devicePos}',
-        },
-        slot: {
-          value: '${devicePos}',
-        },
-      },
-      background: {
-        show: false,
-        type: 'video',
-        link: '',
-      },
-      layout: ['table'],
-      board: [],
-      list: [],
-      preset: [],
-      gallery: [],
-      complex_list: [],
-      table: [
-        {
-          type: 'B',
-          readFrom: 'history',
-          columns: [
-            {
-              prop: 'cate',
-              label: '类别',
-            },
-            {
-              prop: 'temp',
-              label: '温度',
-            },
-            {
-              prop: 'wspd',
-              label: '风速',
-            },
-            {
-              prop: 'spst',
-              label: '喷雾状态',
-            },
-          ],
-        },
-      ],
-      chart: [],
-    },
-    showStyle: { size: 'width:450px;height:280px;' },
-  },
   '爆炸三角形（1*1）': {
     moduleData: {
       header: {
@@ -487,256 +94,4 @@ export const ModulePresetMap: Record<
     },
     showStyle: { size: 'width:450px;height:280px;' },
   },
-  '采空区火情综合预警（1*1）': {
-    moduleData: {
-      header: {
-        show: false,
-        showSelector: false,
-        showSlot: true,
-        selector: {
-          value: '${strinstallpos}',
-        },
-        slot: {
-          value: '${网络异常：}${netstatus.val} 台',
-        },
-      },
-      background: {
-        show: false,
-        type: 'video',
-        link: '',
-      },
-      layout: ['complex_list', 'list'],
-      // layout: ['list'],
-      board: [],
-      chart: [],
-      gallery: [],
-      table: [],
-      list: [
-        {
-          type: 'B',
-          readFrom: '',
-          items: [
-            {
-              label: '堵塞状态',
-              value: '${fsectarea}',
-              color: 'yellow',
-              info: '',
-            },
-            {
-              label: '甲烷浓度',
-              value: '${stationname}',
-              color: 'yellow',
-              info: '',
-            },
-          ],
-        },
-      ],
-      complex_list: [
-        {
-          type: 'A',
-          readFrom: '',
-          items: [
-            {
-              label: '火情状态',
-              value: '${fsectarea}',
-              color: 'yellow',
-              info: '',
-            },
-            {
-              label: '回采位置',
-              value: '${stationname}',
-              color: 'white',
-              info: '',
-            },
-            {
-              label: '硐室火情',
-              value: '${stationtype}',
-              color: 'blue',
-              info: '',
-            },
-            {
-              label: '联动设备状态',
-              value: '${typeName}',
-              color: 'blue',
-              info: '',
-            },
-          ],
-          galleryItems: [
-            {
-              value: '${低风险}',
-              label: '',
-              color: 'white',
-            },
-            {
-              value: '${CO}',
-              label: '',
-              color: 'white',
-            },
-          ],
-        },
-      ],
-      preset: [],
-    },
-    showStyle: {
-      size: 'width:450px;height:280px;',
-    },
-  },
-  '重点区域实时火情（1*2）': {
-    moduleData: {
-      header: {
-        show: false,
-        showSelector: true,
-        showSlot: true,
-        selector: {
-          value: '${devicePos}',
-        },
-        slot: {
-          value: '${devicePos}',
-        },
-      },
-      background: {
-        show: false,
-        type: 'video',
-        link: '',
-      },
-      layout: ['complex_list', 'blast_delta', 'list'],
-      board: [],
-      gallery: [],
-      list: [
-        {
-          type: 'E',
-          readFrom: '',
-          items: [
-            {
-              label: '火情状态',
-              value: '${fsectarea}',
-              color: 'yellow',
-              info: '',
-            },
-            {
-              label: '回采位置',
-              value: '${stationname}',
-              color: 'white',
-              info: '',
-            },
-            {
-              label: '硐室火情',
-              value: '${stationtype}',
-              color: 'blue',
-              info: '',
-            },
-            {
-              label: '联动设备状态',
-              value: '${typeName}',
-              color: 'blue',
-              info: '',
-            },
-            {
-              label: '火情状态',
-              value: '${fsectarea}',
-              color: 'yellow',
-              info: '',
-            },
-            {
-              label: '回采位置',
-              value: '${stationname}',
-              color: 'white',
-              info: '',
-            },
-            {
-              label: '硐室火情',
-              value: '${stationtype}',
-              color: 'blue',
-              info: '',
-            },
-            {
-              label: '联动设备状态',
-              value: '${typeName}',
-              color: 'blue',
-              info: '',
-            },
-            // {
-            //   label: '火情状态',
-            //   value: '${fsectarea}',
-            //   color: 'yellow',
-            //   info: '',
-            // },
-            // {
-            //   label: '回采位置',
-            //   value: '${stationname}',
-            //   color: 'white',
-            //   info: '',
-            // },
-            // {
-            //   label: '硐室火情',
-            //   value: '${stationtype}',
-            //   color: 'blue',
-            //   info: '',
-            // },
-            // {
-            //   label: '联动设备状态',
-            //   value: '${typeName}',
-            //   color: 'blue',
-            //   info: '',
-            // },
-          ],
-        },
-      ],
-      table: [],
-      chart: [],
-      preset: [{}],
-      complex_list: [
-        {
-          type: 'B',
-          readFrom: '',
-          items: [
-            {
-              label: '火情状态',
-              value: '${fsectarea}',
-              color: 'yellow',
-              info: '',
-            },
-            {
-              label: '回采位置',
-              value: '${stationname}',
-              color: 'white',
-              info: '',
-            },
-            {
-              label: '硐室火情',
-              value: '${stationtype}',
-              color: 'blue',
-              info: '',
-            },
-            {
-              label: '联动设备状态',
-              value: '${typeName}',
-              color: 'blue',
-              info: '',
-            },
-          ],
-          galleryItems: [
-            {
-              value: '${低风险}',
-              label: '风险等级',
-              color: 'white',
-            },
-          ],
-        },
-      ],
-    },
-    showStyle: {
-      size: 'width:450px;height:570px;',
-    },
-  },
 };
-
-// export const ModuleChartTypeMap = {
-//   pie: '饼状图',
-//   bar: '柱状图',
-//   line: '折线图',
-// };
-// export const ModuleChartTypeOptions = _.map(ModuleChartTypeMap, (v, k) => ({
-//   value: k,
-//   label: v,
-// }));

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

@@ -1,7 +1,7 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <template>
   <!-- 基准的列表模块，通过不同的 type 展示不同的样式 -->
-  <div class="flex w-full">
+  <div class="flex w-full p-10px">
     <CustomGallery :class="`complex-list__gallery_${type}`" :type="complexTypeMap[type][0]" :gallery-config="galleryConfig" />
     <CustomList :class="`complex-list__list_${type}`" :type="complexTypeMap[type][1]" :list-config="listConfig" />
   </div>

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

@@ -69,7 +69,7 @@
     });
     interval = setInterval(() => {
       fetchDevices();
-    }, 600000);
+    }, 60000);
   });
 
   onUnmounted(() => {

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

@@ -1,7 +1,6 @@
 import { Config } from '../../deviceManager/configurationTable/types';
-import FanLocalVedio from '@/assets/vedio/fanLocal.mp4?url';
 
-export const testConfigBuErTai: Config[] = [
+export const testConfigVent: Config[] = [
   {
     deviceType: 'fanmain',
     moduleName: '主通风机系统',
@@ -59,7 +58,7 @@ export const testConfigBuErTai: Config[] = [
     },
     showStyle: {
       size: 'width:450px;height:280px;',
-      version: '新版',
+      version: '原版',
       position: 'top:60px;left:0;',
     },
   },
@@ -120,7 +119,7 @@ export const testConfigBuErTai: Config[] = [
     },
     showStyle: {
       size: 'width:450px;height:280px;',
-      version: '新版',
+      version: '原版',
       position: 'top:350px;left:0;',
     },
   },
@@ -161,7 +160,7 @@ export const testConfigBuErTai: Config[] = [
     },
     showStyle: {
       size: 'width:450px;height:280px;',
-      version: '新版',
+      version: '原版',
       position: 'top:640px;left:0;',
     },
   },
@@ -217,7 +216,7 @@ export const testConfigBuErTai: Config[] = [
     },
     showStyle: {
       size: 'width:1000px;height:280px;',
-      version: '新版',
+      version: '原版',
       position: 'top:640px;left:460px;',
     },
   },
@@ -287,7 +286,7 @@ export const testConfigBuErTai: Config[] = [
     },
     showStyle: {
       size: 'width:450px;height:280px;',
-      version: '新版',
+      version: '原版',
       position: 'top:60px;right:0;',
     },
   },
@@ -360,13 +359,13 @@ export const testConfigBuErTai: Config[] = [
     },
     showStyle: {
       size: 'width:450px;height:280px;',
-      version: '新版',
+      version: '原版',
       position: 'top:350px;right:0;',
     },
   },
   {
     deviceType: '',
-    moduleName: 'fire_control-右下预设类',
+    moduleName: '预警监测',
     pageType: '',
     moduleData: {
       header: {
@@ -438,7 +437,866 @@ export const testConfigBuErTai: Config[] = [
     },
     showStyle: {
       size: 'width:450px;height:280px;',
-      version: '新版',
+      version: '原版',
+      position: 'top:640px;right:0;',
+    },
+  },
+];
+
+export const testConfigDust: Config[] = [
+  {
+    deviceType: '',
+    moduleName: '工作面风险监测',
+    pageType: '',
+    moduleData: {
+      header: {
+        show: false,
+        showSelector: false,
+        showSlot: false,
+        selector: {
+          value: '',
+        },
+        slot: {
+          value: '',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      slice: {
+        direction: 'column',
+        basis: ['20%', '80%'],
+      },
+      layout: ['gallery', 'complex_list'],
+      board: [],
+      chart: [],
+      gallery: [
+        {
+          type: 'F',
+          readFrom: 'dustManageInfo',
+          items: [
+            {
+              label: '',
+              value: '${totalNum}',
+              color: 'blue',
+            },
+            {
+              label: '低风险',
+              value: '${dfxNum}',
+              color: 'blue',
+            },
+            {
+              label: '一般风险',
+              value: '${ybNum}',
+              color: 'blue',
+            },
+            {
+              label: '较大风险',
+              value: '${jdNum}',
+              color: 'blue',
+            },
+            {
+              label: '重大风险',
+              value: '${zdNum}',
+              color: 'blue',
+            },
+          ],
+        },
+      ],
+      gallery_list: [],
+      table: [],
+      list: [],
+      complex_list: [
+        {
+          type: 'A',
+          readFrom: 'dustManageInfo.sysList',
+          mapFromData: true,
+          items: [
+            {
+              title: '${sysNamme}',
+              contents: [
+                {
+                  label: '风险监测',
+                  value: '${warnLevel}',
+                  color: 'blue',
+                  info: '',
+                },
+                {
+                  label: '最高粉尘浓度',
+                  value: '${maxVal}',
+                  color: 'blue',
+                  info: '',
+                },
+              ],
+            },
+          ],
+        },
+      ],
+      preset: [],
+      // mock: BDdustMock,
+    },
+    showStyle: {
+      size: 'width:450px;height:750px;',
+      version: '保德',
+      position: 'top:170px;left:0;',
+    },
+  },
+  {
+    deviceType: 'dustDustGraph',
+    moduleName: '综放工作面粉尘浓度',
+    pageType: '',
+    moduleData: {
+      header: {
+        show: true,
+        showSelector: true,
+        showSlot: false,
+        selector: {
+          value: '${strinstallpos}',
+        },
+        slot: {
+          value: '',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      slice: {
+        direction: 'row',
+        basis: ['100%'],
+      },
+      layout: ['chart'],
+      board: [],
+      chart: [
+        {
+          type: 'line_area',
+          readFrom: '',
+          legend: { show: false },
+          xAxis: [{ show: true }],
+          yAxis: [{ show: true, name: '浓度', position: 'left' }],
+          series: [
+            {
+              label: '${strinstallpos}',
+              readFrom: 'historyList',
+              xprop: 'time',
+              yprop: 'dustval',
+            },
+          ],
+        },
+      ],
+      gallery: [],
+      gallery_list: [],
+      table: [],
+      list: [],
+      complex_list: [],
+      preset: [],
+    },
+    showStyle: {
+      size: 'width:1000px;height:280px;',
+      version: '原版',
+      position: 'top:640px;left:460px;',
+    },
+  },
+  {
+    deviceType: '',
+    moduleName: '智能喷雾降尘装置',
+    pageType: '',
+    moduleData: {
+      header: {
+        show: false,
+        showSelector: false,
+        showSlot: false,
+        selector: {
+          value: '',
+        },
+        slot: {
+          value: '',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      slice: {
+        direction: 'row',
+        basis: ['100%'],
+      },
+      layout: ['gallery'],
+      board: [],
+      chart: [],
+      gallery: [
+        {
+          type: 'E',
+          readFrom: 'atomObj',
+          items: [
+            {
+              label: '设备总数',
+              value: '${totalNum}',
+              color: 'blue',
+            },
+            {
+              label: '喷雾开启数',
+              value: '${atomOpenNum}',
+              color: 'blue',
+            },
+            {
+              label: '连网数量',
+              value: '${openNum}',
+              color: 'blue',
+            },
+            {
+              label: '断网数量',
+              value: '${breakNum}',
+              color: 'blue',
+            },
+          ],
+        },
+      ],
+      gallery_list: [],
+      table: [],
+      list: [],
+      complex_list: [],
+      preset: [],
+      to: 'http://10.248.210.154:8801',
+      // mock: BDdustMock,
+    },
+    showStyle: {
+      size: 'width:450px;height:280px;',
+      version: '原版',
+      position: 'top:60px;right:0;',
+    },
+  },
+  {
+    deviceType: '',
+    moduleName: '隔爆设施管理台账',
+    pageType: '',
+    moduleData: {
+      header: {
+        show: false,
+        showSelector: false,
+        showSlot: false,
+        selector: {
+          value: '',
+        },
+        slot: {
+          value: '',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      slice: {
+        direction: 'row',
+        basis: ['100%'],
+      },
+      layout: ['table'],
+      board: [],
+      chart: [],
+      gallery: [],
+      gallery_list: [],
+      table: [
+        {
+          type: 'C',
+          readFrom: 'devGbsb',
+          columns: [
+            {
+              name: '地点',
+              prop: 'strinstallpos',
+            },
+            {
+              name: '吊挂位置',
+              prop: 'addr',
+            },
+            {
+              name: '性质',
+              prop: 'kind',
+            },
+          ],
+        },
+      ],
+      list: [],
+      complex_list: [],
+      preset: [],
+      // mock: BDdustMock,
+    },
+    showStyle: {
+      size: 'width:450px;height:280px;',
+      version: '原版',
+      position: 'top:350px;right:0;',
+    },
+  },
+  {
+    deviceType: 'statics',
+    moduleName: '粉尘静态指标',
+    pageType: '',
+    moduleData: {
+      header: {
+        show: false,
+        showSelector: false,
+        showSlot: false,
+        selector: {
+          value: '${name}',
+        },
+        slot: {
+          value: '',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      slice: {
+        direction: 'row',
+        basis: ['100%'],
+      },
+      layout: ['board'],
+      board: [
+        {
+          type: 'E',
+          readFrom: '',
+          layout: 'label-top',
+          items: [
+            {
+              label: '火焰长度',
+              value: '>400mm',
+            },
+            {
+              label: '抑制煤层爆炸最低岩粉量',
+              value: '75%',
+            },
+            {
+              label: '鉴定结论',
+              value: '有煤层爆炸性',
+            },
+          ],
+        },
+      ],
+      chart: [],
+      gallery: [],
+      gallery_list: [],
+      table: [],
+      list: [],
+      complex_list: [],
+      preset: [],
+      // mock: BDdustMock,
+    },
+    showStyle: {
+      size: 'width:450px;height:280px;',
+      version: '原版',
+      position: 'top:640px;right:0;',
+    },
+  },
+];
+
+export const testConfigFire: Config[] = [
+  {
+    deviceType: '',
+    moduleName: '重点区域风险监测',
+    pageType: '',
+    moduleData: {
+      header: {
+        show: false,
+        showSelector: false,
+        showSlot: false,
+        selector: {
+          value: '',
+        },
+        slot: {
+          value: '',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      slice: {
+        direction: 'column',
+        basis: ['50%', '50%'],
+      },
+      layout: ['board', 'complex_list'],
+      board: [
+        {
+          type: 'A',
+          readFrom: 'fireManageInfo',
+          layout: 'label-top',
+          items: [
+            {
+              label: '内因风险等级',
+              value: '${nyWarnLevel}',
+            },
+            {
+              label: '外因风险等级',
+              value: '${wyWarnLevel}',
+            },
+          ],
+        },
+      ],
+      chart: [],
+      gallery: [],
+      gallery_list: [],
+      table: [],
+      list: [],
+      complex_list: [
+        {
+          type: 'D',
+          readFrom: 'fireManageInfo.sysList',
+          mapFromData: true,
+          items: [
+            {
+              title: '${sysNamme}',
+              contents: [
+                {
+                  label: '风险监测',
+                  value: '${warnLevel}',
+                  color: 'blue',
+                  info: '',
+                },
+                {
+                  label: '最高温度',
+                  value: '${maxVal}',
+                  color: 'blue',
+                  info: '',
+                },
+              ],
+            },
+          ],
+        },
+      ],
+      preset: [],
+      // mock: BDfireMock,
+    },
+    showStyle: {
+      size: 'width:450px;height:280px;',
+      version: '原版',
+      position: 'top:60px;left:0;',
+    },
+  },
+  {
+    deviceType: '',
+    moduleName: '开采煤层自燃发火特性',
+    pageType: '',
+    moduleData: {
+      header: {
+        show: false,
+        showSelector: false,
+        showSlot: false,
+        selector: {
+          value: '${systemname}',
+        },
+        slot: {
+          value: '',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      slice: {
+        direction: 'column',
+        basis: ['100%'],
+      },
+      layout: ['table'],
+      board: [],
+      chart: [],
+      gallery: [],
+      gallery_list: [],
+      table: [
+        {
+          type: 'A',
+          readFrom: 'mockTable',
+          columns: [
+            {
+              name: '煤层',
+              prop: 'a',
+            },
+            {
+              name: '自燃倾向性',
+              prop: 'b',
+            },
+            {
+              name: '最短发火期',
+              prop: 'c',
+            },
+            {
+              name: '最小推进速度',
+              prop: 'd',
+            },
+          ],
+        },
+      ],
+      list: [],
+      complex_list: [],
+      preset: [],
+      mock: {
+        mockTable: [
+          {
+            a: '8煤',
+            b: '自燃',
+            c: '123天',
+            d: '0.87md',
+          },
+        ],
+      },
+    },
+    showStyle: {
+      size: 'width:450px;height:280px;',
+      version: '原版',
+      position: 'top:350px;left:0;',
+    },
+  },
+  {
+    deviceType: 'obfObj.arrayDev',
+    moduleName: '矿井火情走势',
+    pageType: '',
+    moduleData: {
+      header: {
+        show: true,
+        showSelector: true,
+        showSlot: false,
+        selector: {
+          value: '${strinstallpos}',
+        },
+        slot: {
+          value: '',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      slice: {
+        direction: 'row',
+        basis: ['100%'],
+      },
+      layout: ['chart'],
+      board: [],
+      chart: [
+        {
+          type: 'line_area',
+          readFrom: '',
+          legend: { show: true },
+          xAxis: [{ show: true }],
+          yAxis: [{ show: true, name: '温度（℃）', position: 'left' }],
+          series: [
+            {
+              label: '${strinstallpos}',
+              readFrom: 'fibreTemperatureArr',
+              xprop: 'pos',
+              yprop: 'value',
+            },
+          ],
+        },
+      ],
+      gallery: [],
+      gallery_list: [],
+      table: [],
+      list: [],
+      complex_list: [],
+      preset: [],
+      // mock: BDfireMock,
+    },
+    showStyle: {
+      size: 'width:450px;height:280px;',
+      version: '原版',
+      position: 'top:640px;left:0;',
+    },
+  },
+  {
+    deviceType: 'sgGxObj.devGxcw',
+    moduleName: '工作面光纤监测',
+    pageType: '',
+    moduleData: {
+      header: {
+        show: true,
+        showSelector: true,
+        showSlot: false,
+        selector: {
+          value: '${strinstallpos}',
+        },
+        slot: {
+          value: '',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      slice: {
+        direction: 'row',
+        basis: ['100%'],
+      },
+      layout: ['chart'],
+      board: [],
+      chart: [
+        {
+          type: 'line_smooth',
+          readFrom: '',
+          legend: { show: true },
+          xAxis: [{ show: true }],
+          yAxis: [{ show: true, name: '温度（℃）', position: 'left' }],
+          series: [
+            {
+              label: '${strinstallpos}',
+              readFrom: 'fibreTemperatureArr',
+              xprop: 'pos',
+              yprop: 'value',
+            },
+          ],
+        },
+      ],
+      gallery: [],
+      gallery_list: [],
+      table: [],
+      list: [],
+      complex_list: [],
+      preset: [],
+      // mock: BDfireMock,
+    },
+    showStyle: {
+      size: 'width:1000px;height:280px;',
+      version: '原版',
+      position: 'top:640px;left:460px;',
+    },
+  },
+  {
+    deviceType: 'dsArray',
+    moduleName: '重点区域实时火情',
+    pageType: '',
+    moduleData: {
+      header: {
+        show: true,
+        showSelector: true,
+        showSlot: false,
+        selector: {
+          value: '${systemname}',
+        },
+        slot: {
+          value: '',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      slice: {
+        direction: 'column',
+        basis: ['40%', '60%'],
+      },
+      layout: ['gallery_list', 'list'],
+      board: [],
+      chart: [],
+      // chart: [
+      //   {
+      //     type: 'line_bar',
+      //     readFrom: 'dsArray',
+      //     xAxis: [
+      //       {
+      //         label: 'null',
+      //       },
+      //     ],
+      //     yAxis: [
+      //       {
+      //         label: 'A',
+      //         align: 'left',
+      //       },
+      //       {
+      //         label: 'A',
+      //         align: 'left',
+      //       },
+      //     ],
+      //     series: [
+      //       {
+      //         label: 'A',
+      //         prop: 'top',
+      //       },
+      //       {
+      //         label: 'B',
+      //         prop: 'bot',
+      //       },
+      //     ],
+      //   },
+      // ],
+      gallery: [],
+      gallery_list: [
+        {
+          type: 'B',
+          readFrom: '',
+          items: [
+            {
+              label: '区域名称',
+              value: '----',
+              color: 'blue',
+              info: '',
+            },
+            {
+              label: '火情状态',
+              value: '----',
+              color: 'yellow',
+              info: '',
+            },
+            {
+              label: '硐室火情',
+              value: '----',
+              color: 'blue',
+              info: '',
+            },
+            {
+              label: '回采位置',
+              value: '----',
+              color: 'yellow',
+              info: '',
+            },
+          ],
+          galleryItems: [
+            {
+              label: '风险等级',
+              value: '低风险',
+              color: 'blue',
+            },
+          ],
+        },
+      ],
+      table: [],
+      list: [
+        {
+          type: 'E',
+          readFrom: 'arrayCount',
+          items: [
+            {
+              label: '一氧化碳',
+              value: '${coVal}',
+              color: 'blue',
+              info: '',
+            },
+            {
+              label: '二氧化碳',
+              value: '${co2Val}',
+              color: 'blue',
+              info: '',
+            },
+            {
+              label: '氧气',
+              value: '${o2Val}',
+              color: 'blue',
+              info: '',
+            },
+            {
+              label: '温度',
+              value: '${tempVal}',
+              color: 'blue',
+              info: '',
+            },
+            {
+              label: '乙烯',
+              value: '${c2h4Val}',
+              color: 'blue',
+              info: '',
+            },
+            {
+              label: '甲烷',
+              value: '${ch4Val}',
+              color: 'blue',
+              info: '',
+            },
+            {
+              label: '乙炔',
+              value: '${c2h2Val}',
+              color: 'blue',
+              info: '',
+            },
+            {
+              label: '压差',
+              value: '${dpVal}',
+              color: 'blue',
+              info: '',
+            },
+          ],
+        },
+      ],
+      complex_list: [],
+      preset: [],
+      // mock: BDfireMock,
+    },
+    showStyle: {
+      size: 'width:450px;height:570px;',
+      version: '原版',
+      position: 'top:60px;right:0;',
+    },
+  },
+  {
+    deviceType: '',
+    moduleName: '安全监控系统',
+    pageType: '',
+    moduleData: {
+      header: {
+        show: false,
+        showSelector: false,
+        showSlot: false,
+        selector: {
+          value: '',
+        },
+        slot: {
+          value: '',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      slice: {
+        direction: 'row',
+        basis: ['100%'],
+      },
+      layout: ['table'],
+      board: [],
+      chart: [],
+      gallery: [],
+      gallery_list: [],
+      table: [
+        {
+          type: 'C',
+          readFrom: 'aqjkArray',
+          columns: [
+            {
+              name: '测点位置',
+              prop: 'strinstallpos',
+            },
+            {
+              name: '温度',
+              prop: 'nowVal',
+            },
+            {
+              name: '预警级别',
+              prop: 'warnLevel',
+            },
+            // {
+            //   name: '时间',
+            //   prop: 'time',
+            // },
+          ],
+        },
+      ],
+      list: [],
+      complex_list: [],
+      preset: [],
+      // mock: BDfireMock,
+    },
+    showStyle: {
+      size: 'width:450px;height:280px;',
+      version: '原版',
       position: 'top:640px;right:0;',
     },
   },

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

@@ -0,0 +1,179 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <div class="company-home">
+    <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 class="ant-dropdown-link" @click.prevent>
+        全矿井通风检测
+        <CaretDownOutlined />
+      </a>
+      <template #overlay>
+        <MonitorCenter />
+      </template>
+    </a-dropdown> -->
+    <!-- 采用定位方式以避免出现各个模块隐藏时其他模块下移的问题 -->
+
+    <template v-if="isOriginal">
+      <ModuleOriginal
+        v-for="cfg in configs"
+        :key="cfg.deviceType"
+        :show-style="cfg.showStyle"
+        :module-data="cfg.moduleData"
+        :module-name="cfg.moduleName"
+        :device-type="cfg.deviceType"
+        :visible="true"
+      />
+    </template>
+    <template v-else-if="isCommon">
+      <ModuleCommon
+        v-for="cfg in configs"
+        :key="cfg.deviceType"
+        :show-style="cfg.showStyle"
+        :module-data="cfg.moduleData"
+        :module-name="cfg.moduleName"
+        :device-type="cfg.deviceType"
+        :visible="true"
+      />
+    </template>
+    <template v-else>
+      <!-- 下面是正常展示的各新版模块 -->
+      <ModuleEnhanced
+        v-for="cfg in enhancedConfigs"
+        :key="cfg.deviceType"
+        :visible="cfg.visible"
+        :show-style="cfg.showStyle"
+        :module-data="cfg.moduleData"
+        :module-name="cfg.moduleName"
+        :device-type="cfg.deviceType"
+        @close="cfg.visible = false"
+      />
+      <!-- 下面是用于呼出已隐藏的模块的按钮 -->
+      <div class="pos-absolute top-70px left-460px">
+        <div v-for="(item, i) in hiddenList" :key="`vvhchg${i}`">
+          <AButton class="module-trigger-button" @click="item.visible = true">{{ item.moduleName }}</AButton>
+        </div>
+      </div>
+    </template>
+    <div style="width: 1000px; height: 570px; position: absolute; left: calc(50% - 500px); top: 60px">
+      <VentModal />
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { computed, onMounted, ref } from 'vue';
+  // import { CaretDownOutlined } from '@ant-design/icons-vue';
+  // import MonitorCenter from './components/MonitorCenter.vue';
+  import { useInitConfigs } from './hooks/useInit';
+  import { Config } from '../../deviceManager/configurationTable/types';
+  import ModuleEnhanced from './components/ModuleEnhanced.vue';
+  import ModuleOriginal from './components/ModuleOriginal.vue';
+  import ModuleCommon from './components/ModuleCommon.vue';
+  // import { testConfigBuErTai } from './configurable.data';
+  // import { useRoute } from 'vue-router';
+  import VentModal from '/@/components/vent/micro/ventModal.vue';
+
+  interface EnhancedConfig extends Config {
+    visible: boolean;
+  }
+
+  const mainTitle = ref('智能通风管控系统');
+
+  // const moduleCodes = ['fanlocal', 'fanmain' /** 'vc', 'ar', 'va', 'ws', 'dw' */];
+
+  const hiddenList = computed(() => {
+    return enhancedConfigs.value.filter((e) => e.visible === false);
+  });
+  const { configs, isOriginal, isCommon, fetchConfigs } = useInitConfigs();
+
+  const enhancedConfigs = computed<EnhancedConfig[]>(() => {
+    return configs.value.map((c) => {
+      return {
+        visible: true,
+        ...c,
+      };
+    });
+  });
+
+  onMounted(() => {
+    // configs.value = testConfigB;
+    fetchConfigs('vent');
+  });
+</script>
+<style lang="less" scoped>
+  @font-face {
+    font-family: 'douyuFont';
+    src: url('../../../../assets/font/douyuFont.otf');
+  }
+
+  .company-home {
+    width: 100%;
+    height: 100%;
+    color: @white;
+    position: relative;
+    // background: url('@/assets/images/home-container/configurable/firehome/bg.png') no-repeat center;
+
+    .top-bg {
+      width: 100%;
+      height: 56px;
+      background: url('@/assets/images/vent/home/modal-top.png') no-repeat center;
+      position: absolute;
+      z-index: 1;
+      .main-title {
+        height: 56px;
+        font-family: 'douyuFont';
+        font-size: 20px;
+        letter-spacing: 2px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+    }
+
+    // .module-left {
+    //   position: absolute;
+    //   width: 450px;
+    //   height: 280px;
+    //   left: 0;
+    // }
+    // .module-right {
+    //   position: absolute;
+    //   width: 450px;
+    //   height: 280px;
+    //   right: 0;
+    // }
+    // .module-bottom {
+    //   position: absolute;
+    //   width: 1000px;
+    //   height: 280px;
+    // }
+    .module-dropdown {
+      padding: 10px;
+      background-image: linear-gradient(to bottom, #036886, #072a40);
+      border-bottom: 2px solid #3df6ff;
+      color: #fff;
+      position: absolute;
+      top: 70px;
+      right: 460px;
+    }
+    .module-dropdown-original {
+      padding: 10px;
+      background-image: linear-gradient(to bottom, #036886, #072a40);
+      border-bottom: 2px solid #3df6ff;
+      color: #fff;
+      position: absolute;
+      top: 70px;
+      right: 460px;
+    }
+    .module-trigger-button {
+      color: #fff;
+      background-image: linear-gradient(to bottom, #036886, #072a40);
+      border: none;
+      border-bottom: 2px solid #3df6ff;
+    }
+  }
+  :deep(.loading-box) {
+    position: unset;
+  }
+</style>

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

@@ -0,0 +1,179 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <div class="company-home">
+    <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 class="ant-dropdown-link" @click.prevent>
+        全矿井通风检测
+        <CaretDownOutlined />
+      </a>
+      <template #overlay>
+        <MonitorCenter />
+      </template>
+    </a-dropdown> -->
+    <!-- 采用定位方式以避免出现各个模块隐藏时其他模块下移的问题 -->
+
+    <template v-if="isOriginal">
+      <ModuleOriginal
+        v-for="cfg in configs"
+        :key="cfg.deviceType"
+        :show-style="cfg.showStyle"
+        :module-data="cfg.moduleData"
+        :module-name="cfg.moduleName"
+        :device-type="cfg.deviceType"
+        :visible="true"
+      />
+    </template>
+    <template v-else-if="isCommon">
+      <ModuleCommon
+        v-for="cfg in configs"
+        :key="cfg.deviceType"
+        :show-style="cfg.showStyle"
+        :module-data="cfg.moduleData"
+        :module-name="cfg.moduleName"
+        :device-type="cfg.deviceType"
+        :visible="true"
+      />
+    </template>
+    <template v-else>
+      <!-- 下面是正常展示的各新版模块 -->
+      <ModuleEnhanced
+        v-for="cfg in enhancedConfigs"
+        :key="cfg.deviceType"
+        :visible="cfg.visible"
+        :show-style="cfg.showStyle"
+        :module-data="cfg.moduleData"
+        :module-name="cfg.moduleName"
+        :device-type="cfg.deviceType"
+        @close="cfg.visible = false"
+      />
+      <!-- 下面是用于呼出已隐藏的模块的按钮 -->
+      <div class="pos-absolute top-70px left-460px">
+        <div v-for="(item, i) in hiddenList" :key="`vvhchg${i}`">
+          <AButton class="module-trigger-button" @click="item.visible = true">{{ item.moduleName }}</AButton>
+        </div>
+      </div>
+    </template>
+    <div style="width: 1000px; height: 570px; position: absolute; left: calc(50% - 500px); top: 60px">
+      <VentModal />
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { computed, onMounted, ref } from 'vue';
+  // import { CaretDownOutlined } from '@ant-design/icons-vue';
+  // import MonitorCenter from './components/MonitorCenter.vue';
+  import { useInitConfigs } from './hooks/useInit';
+  import { Config } from '../../deviceManager/configurationTable/types';
+  import ModuleEnhanced from './components/ModuleEnhanced.vue';
+  import ModuleOriginal from './components/ModuleOriginal.vue';
+  import ModuleCommon from './components/ModuleCommon.vue';
+  // import { testConfigBuErTai } from './configurable.data';
+  // import { useRoute } from 'vue-router';
+  import VentModal from '/@/components/vent/micro/ventModal.vue';
+
+  interface EnhancedConfig extends Config {
+    visible: boolean;
+  }
+
+  const mainTitle = ref('智能通风管控系统');
+
+  // const moduleCodes = ['fanlocal', 'fanmain' /** 'vc', 'ar', 'va', 'ws', 'dw' */];
+
+  const hiddenList = computed(() => {
+    return enhancedConfigs.value.filter((e) => e.visible === false);
+  });
+  const { configs, isOriginal, isCommon, fetchConfigs } = useInitConfigs();
+
+  const enhancedConfigs = computed<EnhancedConfig[]>(() => {
+    return configs.value.map((c) => {
+      return {
+        visible: true,
+        ...c,
+      };
+    });
+  });
+
+  onMounted(() => {
+    // configs.value = testConfigB;
+    fetchConfigs('vent');
+  });
+</script>
+<style lang="less" scoped>
+  @font-face {
+    font-family: 'douyuFont';
+    src: url('../../../../assets/font/douyuFont.otf');
+  }
+
+  .company-home {
+    width: 100%;
+    height: 100%;
+    color: @white;
+    position: relative;
+    // background: url('@/assets/images/home-container/configurable/firehome/bg.png') no-repeat center;
+
+    .top-bg {
+      width: 100%;
+      height: 56px;
+      background: url('@/assets/images/vent/home/modal-top.png') no-repeat center;
+      position: absolute;
+      z-index: 1;
+      .main-title {
+        height: 56px;
+        font-family: 'douyuFont';
+        font-size: 20px;
+        letter-spacing: 2px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+    }
+
+    // .module-left {
+    //   position: absolute;
+    //   width: 450px;
+    //   height: 280px;
+    //   left: 0;
+    // }
+    // .module-right {
+    //   position: absolute;
+    //   width: 450px;
+    //   height: 280px;
+    //   right: 0;
+    // }
+    // .module-bottom {
+    //   position: absolute;
+    //   width: 1000px;
+    //   height: 280px;
+    // }
+    .module-dropdown {
+      padding: 10px;
+      background-image: linear-gradient(to bottom, #036886, #072a40);
+      border-bottom: 2px solid #3df6ff;
+      color: #fff;
+      position: absolute;
+      top: 70px;
+      right: 460px;
+    }
+    .module-dropdown-original {
+      padding: 10px;
+      background-image: linear-gradient(to bottom, #036886, #072a40);
+      border-bottom: 2px solid #3df6ff;
+      color: #fff;
+      position: absolute;
+      top: 70px;
+      right: 460px;
+    }
+    .module-trigger-button {
+      color: #fff;
+      background-image: linear-gradient(to bottom, #036886, #072a40);
+      border: none;
+      border-bottom: 2px solid #3df6ff;
+    }
+  }
+  :deep(.loading-box) {
+    position: unset;
+  }
+</style>

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

@@ -56,9 +56,9 @@
         </div>
       </div>
     </template>
-    <!-- <div style="width: 1000px; height: 570px; position: absolute; left: calc(50% - 500px); top: 60px">
+    <div style="width: 1000px; height: 570px; position: absolute; left: calc(50% - 500px); top: 60px">
       <VentModal />
-    </div> -->
+    </div>
   </div>
 </template>
 <script lang="ts" setup>
@@ -70,9 +70,9 @@
   import ModuleEnhanced from './components/ModuleEnhanced.vue';
   import ModuleOriginal from './components/ModuleOriginal.vue';
   import ModuleCommon from './components/ModuleCommon.vue';
-  import { testConfigBuErTai } from './configurable.data';
-  import { useRoute } from 'vue-router';
-  // import VentModal from '/@/components/vent/micro/ventModal.vue';
+  import { testConfigDust } from './configurable.data';
+  // import { useRoute } from 'vue-router';
+  import VentModal from '/@/components/vent/micro/ventModal.vue';
 
   interface EnhancedConfig extends Config {
     visible: boolean;
@@ -82,33 +82,24 @@
 
   // const moduleCodes = ['fanlocal', 'fanmain' /** 'vc', 'ar', 'va', 'ws', 'dw' */];
 
-  const enhancedConfigs = ref<EnhancedConfig[]>([]);
-
   const hiddenList = computed(() => {
     return enhancedConfigs.value.filter((e) => e.visible === false);
   });
   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('configurable_home').then(() => {
-      configs.value = testConfigBuErTai;
-      // configs.value.push(...testConfigBuErTai);
-      enhancedConfigs.value = configs.value.map((c) => {
-        return {
-          visible: true,
-          ...c,
-        };
-      });
+  const enhancedConfigs = computed<EnhancedConfig[]>(() => {
+    return configs.value.map((c) => {
+      return {
+        visible: true,
+        ...c,
+      };
     });
   });
+
+  onMounted(() => {
+    configs.value = testConfigDust;
+    // fetchConfigs('vent');
+  });
 </script>
 <style lang="less" scoped>
   @font-face {
@@ -182,4 +173,7 @@
       border-bottom: 2px solid #3df6ff;
     }
   }
+  :deep(.loading-box) {
+    position: unset;
+  }
 </style>

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

@@ -56,9 +56,9 @@
         </div>
       </div>
     </template>
-    <!-- <div style="width: 1000px; height: 570px; position: absolute; left: calc(50% - 500px); top: 60px">
+    <div style="width: 1000px; height: 570px; position: absolute; left: calc(50% - 500px); top: 60px">
       <VentModal />
-    </div> -->
+    </div>
   </div>
 </template>
 <script lang="ts" setup>
@@ -70,9 +70,9 @@
   import ModuleEnhanced from './components/ModuleEnhanced.vue';
   import ModuleOriginal from './components/ModuleOriginal.vue';
   import ModuleCommon from './components/ModuleCommon.vue';
-  import { testConfigBuErTai } from './configurable.data';
-  import { useRoute } from 'vue-router';
-  // import VentModal from '/@/components/vent/micro/ventModal.vue';
+  // import { testConfigBuErTai } from './configurable.data';
+  // import { useRoute } from 'vue-router';
+  import VentModal from '/@/components/vent/micro/ventModal.vue';
 
   interface EnhancedConfig extends Config {
     visible: boolean;
@@ -82,32 +82,23 @@
 
   // const moduleCodes = ['fanlocal', 'fanmain' /** 'vc', 'ar', 'va', 'ws', 'dw' */];
 
-  const enhancedConfigs = ref<EnhancedConfig[]>([]);
-
   const hiddenList = computed(() => {
     return enhancedConfigs.value.filter((e) => e.visible === false);
   });
   const { configs, isOriginal, isCommon, fetchConfigs } = useInitConfigs();
 
+  const enhancedConfigs = computed<EnhancedConfig[]>(() => {
+    return configs.value.map((c) => {
+      return {
+        visible: true,
+        ...c,
+      };
+    });
+  });
+
   onMounted(() => {
-    const query = useRoute().query;
-    if (query.fire) {
-      mainTitle.value = '智能火灾管控系统';
-    }
-    if (query.gas) {
-      mainTitle.value = '智能瓦斯管控系统';
-    }
     // configs.value = testConfigB;
-    fetchConfigs('configurable_home').then(() => {
-      configs.value = testConfigBuErTai;
-      // configs.value.push(...testConfigBuErTai);
-      enhancedConfigs.value = configs.value.map((c) => {
-        return {
-          visible: true,
-          ...c,
-        };
-      });
-    });
+    fetchConfigs('vent');
   });
 </script>
 <style lang="less" scoped>
@@ -182,4 +173,7 @@
       border-bottom: 2px solid #3df6ff;
     }
   }
+  :deep(.loading-box) {
+    position: unset;
+  }
 </style>