[Wip 0000] 可配置首页与配置表对接

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

@@ -91,12 +91,16 @@
   const saveOrUpdateHandler = async (params) => {
     // 如果是新增或者选择了覆盖配置选项的则初始化配置
     if (!isUpdate.value || params.allowCover) {
-      merge(params, ModulePresetMap[params.desc]);
+      params = {
+        ...ModulePresetMap[params.desc],
+        ...params,
+      };
     }
     try {
       await saveOrUpdate(params, isUpdate.value);
       closeModal();
       reload();
+      message.success('保存成功');
     } catch (error) {
       message.error('保存失败，请联系管理员');
     }
@@ -141,9 +145,16 @@
     saveOrUpdateHandler({
       ...formData,
       moduleData: JSON.parse(configJSON.value),
-    }).finally(() => {
-      configModalCtx.closeModal();
-    });
+    })
+      .then(() => {
+        message.success('保存成功');
+      })
+      .catch(() => {
+        message.error('保存失败，请联系管理员');
+      })
+      .finally(() => {
+        configModalCtx.closeModal();
+      });
   }
 </script>
 

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

@@ -1,4 +1,5 @@
 import _ from 'lodash-es';
+import { Config } from './types';
 
 export const ModuleSizeMap = {
   '标准尺寸(450*280)': 'width:450px;height:280px;',
@@ -32,12 +33,31 @@ export const ModulePositionOptions = _.map(ModulePositionMap, (_, k) => ({
   label: k,
 }));
 
-export const ModulePresetOptions = _.map(['局扇预设（1*1）', '传感器预设（1*2）'], (k) => ({
-  value: k,
-  label: k,
-}));
-export const ModulePresetMap = {
-  '局扇预设（1*1）': {
+export const ModulePresetOptions = _.map(
+  [
+    '告示版（1*1）',
+    '折线图（1*1）',
+    '面积图（1*1）',
+    '饼状图（1*1）',
+    '柱状图（2*1）',
+    '画廊（1*1）',
+    '列表（1*1）',
+    '表格（1*1）',
+    '爆炸三角形（1*1）',
+  ],
+  (k) => ({
+    value: k,
+    label: k,
+  })
+);
+export const ModulePresetMap: Record<
+  string,
+  {
+    moduleData: Config['moduleData'];
+    showStyle: Partial<Config['showStyle']>;
+  }
+> = {
+  '告示版（1*1）': {
     moduleData: {
       header: {
         show: true,
@@ -51,9 +71,9 @@ export const ModulePresetMap = {
         },
       },
       background: {
-        show: true,
-        type: 'video',
-        link: '/src/assets/vedio/fanLocal.mp4',
+        show: false,
+        type: 'image',
+        link: '',
       },
       layout: ['board'],
       board: [
@@ -80,22 +100,150 @@ export const ModulePresetMap = {
     },
     showStyle: {
       size: '标准尺寸(450*280)',
-      version: 'enhanced',
-      position: '左上',
     },
   },
-  '传感器预设（1*2）': {
+  '折线图（1*1）': {
+    moduleData: {
+      header: {
+        show: false,
+        showSelector: true,
+        showSlot: true,
+        selector: {
+          prop: 'strinstallpos',
+        },
+        slot: {
+          prop: 'strinstallpos',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      layout: ['chart'],
+      board: [],
+      list: [],
+      chart: [
+        {
+          type: 'line',
+          readFrom: 'majorpath.paths',
+          xAxis: [{ prop: 'name' }],
+          yAxis: [
+            { label: 'Drag', align: 'left' },
+            { label: 'M3', align: 'right' },
+          ],
+          series: [
+            { label: 'Drag', prop: 'drag' },
+            { label: 'M3', prop: 'm3' },
+            // { label: '回2', prop: 'hui2' },
+          ],
+        },
+      ],
+      gallery: [],
+      table: [],
+      preset: [],
+    },
+    showStyle: {
+      size: '标准尺寸(450*280)',
+    },
+  },
+  '面积图（1*1）': {
+    moduleData: {
+      header: {
+        show: false,
+        showSelector: true,
+        showSlot: true,
+        selector: {
+          prop: 'strinstallpos',
+        },
+        slot: {
+          prop: 'strinstallpos',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      layout: ['chart'],
+      board: [],
+      list: [],
+      chart: [
+        {
+          type: 'line_area',
+          readFrom: 'majorpath.paths',
+          xAxis: [{ prop: 'name' }],
+          yAxis: [
+            { label: 'Drag', align: 'left' },
+            { label: 'M3', align: 'right' },
+          ],
+          series: [
+            { label: 'Drag', prop: 'drag' },
+            { label: 'M3', prop: 'm3' },
+            // { label: '回2', prop: 'hui2' },
+          ],
+        },
+      ],
+      gallery: [],
+      table: [],
+      preset: [],
+    },
+    showStyle: {
+      size: '标准尺寸(450*280)',
+    },
+  },
+  '饼状图（1*1）': {
+    moduleData: {
+      header: {
+        show: false,
+        showSelector: true,
+        showSlot: true,
+        selector: {
+          prop: 'strinstallpos',
+        },
+        slot: {
+          prop: 'strinstallpos',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      layout: ['chart'],
+      board: [],
+      list: [],
+      chart: [
+        {
+          type: 'pie',
+          readFrom: 'history',
+          xAxis: [],
+          yAxis: [],
+          series: [
+            { label: 'Drag', prop: 'drag' },
+            { label: 'M3', prop: 'm3' },
+            // { label: '回2', prop: 'hui2' },
+          ],
+        },
+      ],
+      gallery: [],
+      table: [],
+      preset: [],
+    },
+    showStyle: {
+      size: '标准尺寸(450*280)',
+    },
+  },
+  '柱状图（2*1）': {
     moduleData: {
       header: {
         show: false,
         showSelector: false,
         showSlot: false,
         selector: {
-          icon: 'SwapOutlined',
           prop: 'strinstallpos',
         },
         slot: {
-          icon: 'SwapOutlined',
           prop: 'strinstallpos',
         },
       },
@@ -115,21 +263,223 @@ export const ModulePresetMap = {
           type: 'bar',
           readFrom: 'sysdata.history',
           xAxis: [{ prop: 'time' }],
-          yAxis: [
-            { label: '回1', align: 'left' },
-            // { label: '回2', align: 'right' },
+          yAxis: [{ label: '回1', align: 'left' }],
+          series: [{ label: '回1', prop: 'hui1' }],
+        },
+      ],
+    },
+    showStyle: {
+      size: '横向拉伸(1000*280)',
+    },
+  },
+  '画廊（1*1）': {
+    moduleData: {
+      header: {
+        show: false,
+        showSelector: true,
+        showSlot: true,
+        selector: {
+          prop: 'devicePos',
+        },
+        slot: {
+          prop: 'devicePos',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      layout: ['gallery'],
+      board: [],
+      gallery: [
+        {
+          type: 'A',
+          items: [
+            {
+              prop: 'total',
+              label: 'CO2',
+              // label: '光纤预警',
+              color: 'blue',
+            },
+            {
+              prop: 'pwkqs',
+              label: 'CO',
+              // label: '喷雾开启数',
+              color: 'blue',
+            },
+            {
+              prop: 'online',
+              label: 'O2',
+              // label: '联网数量',
+              color: 'blue',
+            },
+            {
+              prop: 'offline',
+              label: 'Na',
+              // label: '断网数量',
+              color: 'blue',
+            },
           ],
-          series: [
-            { label: '回1', prop: 'hui1' },
-            // { label: '回2', prop: 'hui2' },
+        },
+      ],
+      list: [],
+      table: [],
+      chart: [],
+      preset: [],
+    },
+    showStyle: {
+      size: '标准尺寸(450*280)',
+    },
+  },
+  '列表（1*1）': {
+    moduleData: {
+      header: {
+        show: false,
+        showSelector: false,
+        showSlot: true,
+        selector: {
+          prop: 'strinstallpos',
+        },
+        slot: {
+          prop: 'netstatus.val',
+          formatter: '网络异常：${} 台',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      layout: ['list'],
+      board: [],
+      chart: [],
+      table: [],
+      preset: [],
+      gallery: [],
+      list: [
+        {
+          type: 'timeline',
+          items: [
+            {
+              label: '正常',
+              prop: 'blue.val',
+              color: 'blue',
+              info: '',
+            },
+            {
+              label: '告警',
+              prop: 'orange.val',
+              color: 'orange',
+              info: '',
+            },
+            {
+              label: '报警',
+              prop: 'yellow.val',
+              color: 'yellow',
+              info: '',
+            },
+            {
+              label: '危险',
+              prop: 'red.val',
+              color: 'red',
+              info: '',
+            },
+            {
+              label: '错误',
+              prop: 'alarm.val',
+              color: 'green',
+              info: '',
+            },
           ],
         },
       ],
     },
     showStyle: {
-      size: '横向拉伸(1000*280)',
-      version: 'enhanced',
-      position: '中下',
+      size: '标准尺寸(450*280)',
+    },
+  },
+  '表格（1*1）': {
+    moduleData: {
+      header: {
+        show: false,
+        showSelector: true,
+        showSlot: true,
+        selector: {
+          prop: 'devicePos',
+        },
+        slot: {
+          prop: 'devicePos',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      layout: ['table'],
+      board: [],
+      list: [],
+      preset: [],
+      gallery: [],
+      table: [
+        {
+          type: 'B',
+          readFrom: 'history',
+          columns: [
+            {
+              prop: 'cate',
+              label: '类别',
+            },
+            {
+              prop: 'temp',
+              label: '温度',
+            },
+            {
+              prop: 'wspd',
+              label: '风速',
+            },
+            {
+              prop: 'spst',
+              label: '喷雾状态',
+            },
+          ],
+        },
+      ],
+      chart: [],
+    },
+    showStyle: {
+      size: '标准尺寸(450*280)',
+    },
+  },
+  '爆炸三角形（1*1）': {
+    moduleData: {
+      header: {
+        show: false,
+        showSelector: true,
+        showSlot: false,
+        selector: {
+          prop: 'strinstallpos',
+        },
+        slot: {
+          prop: 'strinstallpos',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      layout: ['blast_delta'],
+      board: [],
+      gallery: [],
+      list: [],
+      table: [],
+      chart: [],
+      preset: [{}],
+    },
+    showStyle: {
+      size: '标准尺寸(450*280)',
     },
   },
 };

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

@@ -326,106 +326,106 @@ export const posMonitorData = {
 };
 
 export const testConfigA: Config[] = [
-  {
-    deviceType: 'fanlocal',
-    moduleName: 'fanlocal-左上',
-    pageType: '',
-    moduleData: {
-      header: {
-        show: true,
-        showSelector: true,
-        showSlot: true,
-        selector: {
-          prop: 'strinstallpos',
-        },
-        slot: {
-          prop: 'strinstallpos',
-        },
-      },
-      background: {
-        show: true,
-        type: 'video',
-        link: '/src/assets/vedio/fanLocal.mp4',
-      },
-      layout: ['board'],
-      board: [
-        {
-          type: 'A',
-          layout: 'val-top',
-          items: [
-            {
-              prop: 'readData.windSpeed1',
-              label: '风速1',
-            },
-            {
-              label: '风速2',
-              prop: 'readData.windSpeed2',
-            },
-          ],
-        },
-      ],
-      list: [],
-      chart: [],
-      table: [],
-      gallery: [],
-      preset: [],
-    },
-    showStyle: {
-      size: '标准尺寸(450*280)',
-      version: 'enhanced',
-      position: '左上',
-    },
-  },
-  {
-    deviceType: 'sys_majorpath',
-    moduleName: 'sys_majorpath-左中',
-    pageType: '',
-    moduleData: {
-      header: {
-        show: true,
-        showSelector: true,
-        showSlot: true,
-        selector: {
-          prop: 'strinstallpos',
-        },
-        slot: {
-          prop: 'strinstallpos',
-        },
-      },
-      background: {
-        show: false,
-        type: 'video',
-        link: '',
-      },
-      layout: ['chart'],
-      board: [],
-      list: [],
-      chart: [
-        {
-          type: 'line_area',
-          readFrom: 'majorpath.paths',
-          xAxis: [{ prop: 'name' }],
-          yAxis: [
-            { label: 'Drag', align: 'left' },
-            { label: 'M3', align: 'right' },
-          ],
-          series: [
-            { label: 'Drag', prop: 'drag' },
-            { label: 'M3', prop: 'm3' },
-            // { label: '回2', prop: 'hui2' },
-          ],
-        },
-      ],
-      gallery: [],
-      table: [],
-      preset: [],
-    },
-    showStyle: {
-      size: '标准尺寸(450*280)',
-      version: 'enhanced',
-      position: '左中',
-    },
-  },
+  // {
+  //   deviceType: 'fanlocal',
+  //   moduleName: 'fanlocal-左上',
+  //   pageType: '',
+  //   moduleData: {
+  //     header: {
+  //       show: true,
+  //       showSelector: true,
+  //       showSlot: true,
+  //       selector: {
+  //         prop: 'strinstallpos',
+  //       },
+  //       slot: {
+  //         prop: 'strinstallpos',
+  //       },
+  //     },
+  //     background: {
+  //       show: true,
+  //       type: 'video',
+  //       link: '/src/assets/vedio/fanLocal.mp4',
+  //     },
+  //     layout: ['board'],
+  //     board: [
+  //       {
+  //         type: 'A',
+  //         layout: 'val-top',
+  //         items: [
+  //           {
+  //             prop: 'readData.windSpeed1',
+  //             label: '风速1',
+  //           },
+  //           {
+  //             label: '风速2',
+  //             prop: 'readData.windSpeed2',
+  //           },
+  //         ],
+  //       },
+  //     ],
+  //     list: [],
+  //     chart: [],
+  //     table: [],
+  //     gallery: [],
+  //     preset: [],
+  //   },
+  //   showStyle: {
+  //     size: '标准尺寸(450*280)',
+  //     version: 'enhanced',
+  //     position: '左上',
+  //   },
+  // },
+  // {
+  //   deviceType: 'fanmain',
+  //   moduleName: 'fanmain-左中',
+  //   pageType: '',
+  //   moduleData: {
+  //     header: {
+  //       show: true,
+  //       showSelector: true,
+  //       showSlot: true,
+  //       selector: {
+  //         prop: 'strinstallpos',
+  //       },
+  //       slot: {
+  //         prop: 'strinstallpos',
+  //       },
+  //     },
+  //     background: {
+  //       show: false,
+  //       type: 'video',
+  //       link: '',
+  //     },
+  //     layout: ['chart'],
+  //     board: [],
+  //     list: [],
+  //     chart: [
+  //       {
+  //         type: 'line_area',
+  //         readFrom: 'majorpath.paths',
+  //         xAxis: [{ prop: 'name' }],
+  //         yAxis: [
+  //           { label: 'Drag', align: 'left' },
+  //           { label: 'M3', align: 'right' },
+  //         ],
+  //         series: [
+  //           { label: 'Drag', prop: 'drag' },
+  //           { label: 'M3', prop: 'm3' },
+  //           // { label: '回2', prop: 'hui2' },
+  //         ],
+  //       },
+  //     ],
+  //     gallery: [],
+  //     table: [],
+  //     preset: [],
+  //   },
+  //   showStyle: {
+  //     size: '标准尺寸(450*280)',
+  //     version: 'enhanced',
+  //     position: '左中',
+  //   },
+  // },
   {
     deviceType: 'warn',
     moduleName: 'fire_warn-左下预设类',

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

@@ -31,7 +31,7 @@ export function useInitConfigs() {
   });
 
   function fetchConfigs() {
-    cfgList({}).then(({ records }) => {
+    return cfgList({}).then(({ records }) => {
       configs.value = records;
     });
   }

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

@@ -51,7 +51,7 @@
   // import WorkSurface from './components/WorkSurface.vue';
   // import DeviceWarning from './components/DeviceWarning.vue';
   import MonitorCenter from './components/MonitorCenter.vue';
-  // import { useInitConfigs } from './hooks/useInit';
+  import { useInitConfigs } from './hooks/useInit';
   import { Config } from '../../deviceManager/configurationTable/types';
   import ModuleEnhanced from './components/ModuleEnhanced.vue';
   import ModuleOriginal from './components/ModuleOriginal.vue';
@@ -67,27 +67,24 @@
 
   // const moduleCodes = ['fanlocal', 'fanmain' /** 'vc', 'ar', 'va', 'ws', 'dw' */];
 
-  const configs = ref<Config[]>([]);
   const enhancedConfigs = ref<EnhancedConfig[]>([]);
 
-  // const isOriginal = true;
-  const isOriginal = false;
-
   const hiddenList = computed(() => {
     return enhancedConfigs.value.filter((e) => e.visible === false);
   });
-  // const { configs, isOriginal, fetchConfigs } = useInitConfigs();
+  const { configs, isOriginal, fetchConfigs } = useInitConfigs();
 
   onMounted(() => {
     // configs.value = testConfigB;
-    configs.value = testConfigA;
-    enhancedConfigs.value = configs.value.map((c) => {
-      return {
-        visible: true,
-        ...c,
-      };
+    fetchConfigs().then(() => {
+      configs.value.push(...testConfigA);
+      enhancedConfigs.value = configs.value.map((c) => {
+        return {
+          visible: true,
+          ...c,
+        };
+      });
     });
-    // fetchConfigs();
   });
 </script>
 <style lang="less" scoped>