[Wip 0000] 为可配置首页添加表格、爆炸三角形等模块（部分未对接）

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

@@ -49,7 +49,7 @@ export interface ModuleData {
     link: string;
   };
   /** 模块的布局，使用规定的枚举组合为一个数组，代表着从上到下所应展示的元素 */
-  layout: ('board' | 'list' | 'chart')[];
+  layout: ('board' | 'list' | 'chart' | 'table' | 'blast_delta')[];
   /** 展示牌元素 */
   board: {
     /** 展示牌说明内容 */
@@ -92,6 +92,12 @@ export interface ModuleData {
     /** 图表各系列配置，一个系列应对应一个数据维度，例如：[{ label: '风量', prop: 'f1Val' }] */
     series: { label: string; prop: string }[];
   }[];
+  /** 表格元素，仅第一个配置项将生效 */
+  table: {
+    columns: { label: string; prop: string }[];
+    /** 读取数据时的基础路径，例如如果表格依赖一个数组，那么该项应设置能读取到该数组的路径。例如：readData.history */
+    readFrom: string;
+  }[];
 }
 export interface ShowStyle {
   /** 模块的宽高 */

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

@@ -63,6 +63,13 @@
       <template v-if="val === 'list'">
         <TimelineList :list-config="listConfig" />
       </template>
+      <!-- 表格部分，这部分通常是占一整个模块的 -->
+      <template v-if="val === 'table'">
+        <CommonTable :columns="tableConfig.columns" :data="tableData" class="mt-10px mb-10px" />
+      </template>
+      <template v-if="val === 'blast_delta'">
+        <BlastDelta class="mt-10px mb-10px" />
+      </template>
     </template>
   </div>
 </template>
@@ -77,6 +84,8 @@
   import { getFormattedText } from '../../../deviceManager/configurationTable/adapters';
   import CustomChart from './customChart.vue';
   import { get } from 'lodash-es';
+  import CommonTable from '../../billboard/components/CommonTable.vue';
+  import BlastDelta from '../../../monitorManager/deviceMonitor/components/device/modal/blastDelta.vue';
 
   const props = defineProps<{
     deviceType: Config['deviceType'];
@@ -84,7 +93,7 @@
     showStyle: Config['showStyle'];
   }>();
 
-  const { header: headerConfig, background, board, layout, list, chart } = props.moduleData;
+  const { header: headerConfig, background, board, layout, list, chart, table } = props.moduleData;
 
   // 额外的 header 相关的变量
   const headerVisible = ref(false);
@@ -119,10 +128,24 @@
   });
   const chartData = computed(() => {
     const data = selectedDevice.value;
-    console.log('debug', data, get(data, ''));
     return get(data, chart[0]?.readFrom, []);
   });
 
+  const tableConfig = computed(() => {
+    return {
+      columns: (table[0]?.columns || []).map((e) => {
+        return {
+          name: e.label,
+          prop: e.prop,
+        };
+      }),
+    };
+  });
+  const tableData = computed(() => {
+    const data = selectedDevice.value;
+    return get(data, table[0]?.readFrom, []);
+  });
+
   const { selectedDeviceID, selectedDevice, selectedDeviceSlot, selectedDeviceLabel, options, fetchDevices } = useInitDevices(
     props.deviceType,
     headerConfig

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

@@ -95,6 +95,7 @@
         ],
         list: [],
         chart: [],
+        table: [],
       },
       showStyle: {
         size: 'width:450px;height:280px;',
@@ -102,6 +103,54 @@
         position: 'top:60px;left:0;',
       },
     },
+    {
+      deviceType: 'sys_majorpath',
+      moduleName: '测试折线图',
+      pageType: '',
+      moduleData: {
+        header: {
+          show: true,
+          showSelector: true,
+          showSlot: true,
+          selector: {
+            prop: 'strinstallpos',
+          },
+          slot: {
+            prop: 'strinstallpos',
+          },
+        },
+        background: {
+          show: false,
+          type: 'video',
+          link: '',
+        },
+        layout: ['chart'],
+        board: [],
+        list: [],
+        chart: [
+          {
+            type: 'line',
+            readFrom: 'majorpath.paths',
+            xAxis: [{ prop: 'name' }],
+            yAxis: [
+              { label: 'Drag', align: 'left' },
+              { label: 'M3', align: 'right' },
+            ],
+            series: [
+              { label: 'Drag', prop: 'drag' },
+              { label: 'M3', prop: 'm3' },
+              // { label: '回2', prop: 'hui2' },
+            ],
+          },
+        ],
+        table: [],
+      },
+      showStyle: {
+        size: 'width:450px;height:280px;',
+        version: 'enhanced',
+        position: 'top:350px;left:0;',
+      },
+    },
     {
       deviceType: 'warn',
       moduleName: '测试报警',
@@ -127,6 +176,7 @@
         layout: ['list'],
         board: [],
         chart: [],
+        table: [],
         list: [
           {
             label: '正常',
@@ -187,6 +237,7 @@
         layout: ['chart'],
         board: [],
         list: [],
+        table: [],
         chart: [
           {
             type: 'bar',
@@ -215,7 +266,7 @@
       pageType: '',
       moduleData: {
         header: {
-          show: true,
+          show: false,
           showSelector: true,
           showSlot: false,
           selector: {
@@ -230,7 +281,7 @@
           type: 'video',
           link: '',
         },
-        layout: ['chart', 'board'],
+        layout: ['blast_delta'],
         board: [
           {
             label: '风量',
@@ -246,6 +297,7 @@
           },
         ],
         list: [],
+        table: [],
         chart: [
           {
             type: 'pie',
@@ -275,7 +327,7 @@
       pageType: '',
       moduleData: {
         header: {
-          show: true,
+          show: false,
           showSelector: true,
           showSlot: true,
           selector: {
@@ -290,38 +342,25 @@
           type: 'video',
           link: '',
         },
-        layout: ['chart', 'board'],
-        board: [
-          {
-            label: '风量',
-            type: 'D',
-            layout: 'label-top',
-            prop: 'f1Val',
-          },
-          {
-            label: '风速',
-            type: 'D',
-            layout: 'label-top',
-            prop: 'f2Val',
-          },
-        ],
+        layout: ['table'],
+        board: [],
         list: [],
-        chart: [
+        table: [
           {
-            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' },
+            readFrom: 'history',
+            columns: [
+              {
+                prop: 'A',
+                label: 'A列',
+              },
+              {
+                prop: 'B',
+                label: 'B列',
+              },
             ],
           },
         ],
+        chart: [],
       },
       showStyle: {
         size: 'width:450px;height:570px;',