[Feat 0000] 可配置首页配置更新及适配

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

@@ -55,7 +55,14 @@ export interface ModuleData {
     link: string;
   };
   /** 模块的布局，使用规定的枚举组合为一个数组，代表着从上到下所应展示的元素 */
-  layout: ('board' | 'list' | 'chart' | 'table' | 'gallery' | 'complex_list' | 'gallery_list' | 'blast_delta' | 'fire_control' | 'fire_warn')[];
+  layout: ('board' | 'list' | 'chart' | 'table' | 'gallery' | 'complex_list' | 'gallery_list' | 'blast_delta')[];
+  /** 模块内容的分区 */
+  slice: {
+    /** 分区方向 */
+    direction: 'column' | 'row';
+    /** 分区大小，该数组的数量应该和 layout 数量一致 */
+    basis: string[];
+  };
   preset: ModuleDataPreset[];
   board: ModuleDataBoard[];
   chart: ModuleDataChart[];

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

@@ -15,57 +15,61 @@
       <source :src="background.link" />
       Not Supportted Link Or Browser
     </video>
-    <template v-for="config in layoutConfig" :key="config.key">
-      <!-- 告示板部分 -->
-      <div v-if="config.key === 'board'" class="content__module flex flex-justify-around pt-10px pb-10px">
-        <MiniBoard
-          v-for="item in config.items"
-          :key="item.prop"
-          :label="item.label"
-          :value="item.value"
-          :type="config.type"
-          :layout="config.layout"
-        />
-      </div>
-      <!-- 图表部分，这部分通常需要填充，有告示板、Header等内容需要填充父级 -->
-      <template v-if="config.key === 'chart'">
-        <CustomChart class="content__module flex-grow" :chart-config="config.config" :chart-data="config.data" />
-      </template>
-      <!-- 通常列表部分 -->
-      <template v-if="config.key === 'list'">
-        <template v-if="config.type === 'timeline'">
-          <TimelineList class="content__module" :list-config="config.items" />
+    <div class="flex flex-wrap w-full h-full" :style="{ flexDirection: slice.direction }">
+      <div v-for="(config, i) in layoutConfig" :key="config.key" :style="{ flexBasis: slice.basis[i] }">
+        <!-- 告示板部分 -->
+        <template v-if="config.key === 'board'">
+          <div class="content__module flex flex-justify-around pt-10px pb-10px">
+            <MiniBoard
+              v-for="item in config.items"
+              :key="item.prop"
+              :label="item.label"
+              :value="item.value"
+              :type="config.type"
+              :layout="config.layout"
+            />
+          </div>
         </template>
-        <template v-else>
-          <CustomList class="content__module" :type="config.type" :list-config="config.items" />
+        <!-- 图表部分，这部分通常需要填充，有告示板、Header等内容需要填充父级 -->
+        <template v-if="config.key === 'chart'">
+          <CustomChart class="content__module" :chart-config="config.config" :chart-data="config.data" />
         </template>
-      </template>
-      <!-- 画廊部分 -->
-      <template v-if="config.key === 'gallery'">
-        <CustomGallery class="content__module" :type="config.type" :gallery-config="config.items" />
-      </template>
-      <!-- 复杂列表部分 -->
-      <template v-if="config.key === 'gallery_list'">
-        <GalleryList class="content__module" :type="config.type" :list-config="config.items" :gallery-config="config.galleryItems" />
-      </template>
-      <!-- 复杂列表部分 -->
-      <template v-if="config.key === 'complex_list'">
-        <ComplexList class="content__module" :type="config.type" :list-config="config.items" />
-      </template>
-      <!-- 表格部分，这部分通常是占一整个模块的 -->
-      <template v-if="config.key === 'table'">
-        <CustomTable :type="config.type" :columns="config.columns" :data="config.data" class="content__module text-center flex-grow overflow-auto" />
-      </template>
-      <template v-if="config.key === 'blast_delta'">
-        <BlastDelta class="content__module" :pos-monitor="config.config.mock" :canvas-size="{ width: 250, height: 137 }" />
-      </template>
-      <template v-if="config.key === 'fire_control'">
+        <!-- 通常列表部分 -->
+        <template v-if="config.key === 'list'">
+          <template v-if="config.type === 'timeline'">
+            <TimelineList class="content__module" :list-config="config.items" />
+          </template>
+          <template v-else>
+            <CustomList class="content__module" :type="config.type" :list-config="config.items" />
+          </template>
+        </template>
+        <!-- 画廊部分 -->
+        <template v-if="config.key === 'gallery'">
+          <CustomGallery class="content__module" :type="config.type" :gallery-config="config.items" />
+        </template>
+        <!-- 复杂列表部分 -->
+        <template v-if="config.key === 'gallery_list'">
+          <GalleryList class="content__module" :type="config.type" :list-config="config.items" :gallery-config="config.galleryItems" />
+        </template>
+        <!-- 复杂列表部分 -->
+        <template v-if="config.key === 'complex_list'">
+          <ComplexList class="content__module" :type="config.type" :list-config="config.items" />
+        </template>
+        <!-- 表格部分，这部分通常是占一整个模块的 -->
+        <template v-if="config.key === 'table'">
+          <CustomTable class="content__module text-center overflow-auto" :type="config.type" :columns="config.columns" :data="config.data" />
+        </template>
+        <template v-if="config.key === 'blast_delta'">
+          <BlastDelta class="content__module" :pos-monitor="config.config.mock" :canvas-size="{ width: 250, height: 137 }" />
+        </template>
+        <!-- <template v-if="config.key === 'fire_control'">
         <FIreControl class="content__module" />
       </template>
       <template v-if="config.key === 'fire_warn'">
         <FIreWarn class="content__module" />
-      </template>
-    </template>
+      </template> -->
+      </div>
+    </div>
   </div>
 </template>
 <script lang="ts" setup>
@@ -89,15 +93,15 @@
   import { get, clone } from 'lodash-es';
   import { getFormattedText } from '../../../deviceManager/configurationTable/adapters';
   import BlastDelta from '../../../monitorManager/deviceMonitor/components/device/modal/blastDelta.vue';
-  import FIreWarn from './preset/FIreWarn.vue';
-  import FIreControl from './preset/FIreControl.vue';
+  // import FIreWarn from './preset/FIreWarn.vue';
+  // import FIreControl from './preset/FIreControl.vue';
 
   const props = defineProps<{
     data: any;
     moduleData: Config['moduleData'];
   }>();
 
-  const { background, layout } = props.moduleData;
+  const { background, layout, slice } = props.moduleData;
 
   // 额外的 header 相关的变量
 
@@ -304,8 +308,10 @@
     object-fit: fill;
   }
   .content__module {
-    margin-top: 5px;
-    margin-bottom: 5px;
+    // margin-top: 5px;
+    // margin-bottom: 5px;
+    width: 100%;
+    height: 100%;
   }
   // .content__module:first-of-type {
   //   margin-top: 0;

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

@@ -236,9 +236,6 @@
 
   // .gallery-item_center_F {
   // }
-  .gallery_F {
-    height: 150px;
-  }
   .gallery > .gallery-item_F {
     width: 120px;
     height: 60px;
@@ -288,9 +285,6 @@
     padding-top: 5px;
   }
 
-  .gallery_G {
-    height: 300px;
-  }
   .gallery > .gallery-item_G {
     width: 120px;
     height: 120px;

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

@@ -1440,6 +1440,10 @@ export const testConfigBDDust: Config[] = [
         type: 'video',
         link: '',
       },
+      slice: {
+        direction: 'column',
+        basis: ['20%', '80%'],
+      },
       layout: ['gallery', 'complex_list'],
       board: [],
       chart: [],
@@ -1518,23 +1522,23 @@ export const testConfigBDDust: Config[] = [
                 },
               ],
             },
-            {
-              title: '${[2].sysNamme}',
-              contents: [
-                {
-                  label: '风险监测',
-                  value: '${[2].warnLevel}',
-                  color: 'blue',
-                  info: '',
-                },
-                {
-                  label: '最高粉尘浓度',
-                  value: '${[2].maxVal}',
-                  color: 'blue',
-                  info: '',
-                },
-              ],
-            },
+            // {
+            //   title: '${[2].sysNamme}',
+            //   contents: [
+            //     {
+            //       label: '风险监测',
+            //       value: '${[2].warnLevel}',
+            //       color: 'blue',
+            //       info: '',
+            //     },
+            //     {
+            //       label: '最高粉尘浓度',
+            //       value: '${[2].maxVal}',
+            //       color: 'blue',
+            //       info: '',
+            //     },
+            //   ],
+            // },
           ],
         },
       ],
@@ -1568,6 +1572,10 @@ export const testConfigBDDust: Config[] = [
         type: 'video',
         link: '',
       },
+      slice: {
+        direction: 'row',
+        basis: ['100%'],
+      },
       layout: ['chart'],
       board: [],
       chart: [
@@ -1628,6 +1636,10 @@ export const testConfigBDDust: Config[] = [
         type: 'video',
         link: '',
       },
+      slice: {
+        direction: 'row',
+        basis: ['100%'],
+      },
       layout: ['gallery'],
       board: [],
       chart: [],
@@ -1693,6 +1705,10 @@ export const testConfigBDDust: Config[] = [
         type: 'video',
         link: '',
       },
+      slice: {
+        direction: 'row',
+        basis: ['100%'],
+      },
       layout: ['table'],
       board: [],
       chart: [],
@@ -1754,6 +1770,10 @@ export const testConfigBDDust: Config[] = [
         type: 'video',
         link: '',
       },
+      slice: {
+        direction: 'row',
+        basis: ['100%'],
+      },
       layout: ['board'],
       board: [
         {
@@ -1939,6 +1959,10 @@ export const testConfigBDFire: Config[] = [
         type: 'video',
         link: '',
       },
+      slice: {
+        direction: 'column',
+        basis: ['20%', '80%'],
+      },
       layout: ['gallery', 'complex_list'],
       board: [],
       chart: [],
@@ -2030,6 +2054,10 @@ export const testConfigBDFire: Config[] = [
         type: 'video',
         link: '',
       },
+      slice: {
+        direction: 'row',
+        basis: ['100%'],
+      },
       layout: ['gallery'],
       board: [],
       chart: [],
@@ -2110,6 +2138,10 @@ export const testConfigBDFire: Config[] = [
         type: 'video',
         link: '',
       },
+      slice: {
+        direction: 'row',
+        basis: ['100%'],
+      },
       layout: ['complex_list'],
       board: [],
       chart: [],
@@ -2293,6 +2325,10 @@ export const testConfigBDFire: Config[] = [
         type: 'video',
         link: '',
       },
+      slice: {
+        direction: 'row',
+        basis: ['100%'],
+      },
       layout: ['list'],
       board: [],
       chart: [],
@@ -2356,6 +2392,10 @@ export const testConfigBDFire: Config[] = [
         type: 'video',
         link: '',
       },
+      slice: {
+        direction: 'row',
+        basis: ['100%'],
+      },
       layout: ['list'],
       board: [],
       chart: [],
@@ -2450,6 +2490,10 @@ export const testConfigBDFire: Config[] = [
         type: 'video',
         link: '',
       },
+      slice: {
+        direction: 'row',
+        basis: ['100%'],
+      },
       layout: ['table'],
       board: [],
       chart: [],
@@ -2491,3 +2535,322 @@ export const testConfigBDFire: Config[] = [
     },
   },
 ];
+export const testConfigBDNew: Config[] = [
+  {
+    deviceType: '',
+    moduleName: '束管监测',
+    pageType: '',
+    moduleData: {
+      header: {
+        show: true,
+        showSelector: true,
+        showSlot: false,
+        selector: {
+          value: '',
+        },
+        slot: {
+          value: '',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      slice: {
+        direction: 'row',
+        basis: ['65%', '35%'],
+      },
+      layout: ['list', 'blast_delta'],
+      board: [],
+      chart: [],
+      gallery: [],
+      gallery_list: [],
+      table: [],
+      list: [
+        {
+          type: 'G',
+          readFrom: 'obfObj',
+          items: [
+            {
+              label: 'CO',
+              value: '${maxCo}',
+              color: 'blue',
+              info: '一氧化碳',
+            },
+            {
+              label: 'CO₂',
+              value: '--',
+              color: 'blue',
+              info: '--',
+            },
+            {
+              label: 'CH₄',
+              value: '--',
+              color: 'blue',
+              info: '--',
+            },
+            {
+              label: 'C₂H₂',
+              value: '--',
+              color: 'blue',
+              info: '--',
+            },
+            {
+              label: 'C₂H₄',
+              value: '--',
+              color: 'blue',
+              info: '--',
+            },
+            {
+              label: 'O₂',
+              value: '--',
+              color: 'blue',
+              info: '--',
+            },
+            // {
+            //   label: '温度',
+            //   value: '--',
+            //   color: 'blue',
+            //   info: '--',
+            // },
+            // {
+            //   label: '风险',
+            //   value: '--',
+            //   color: 'blue',
+            //   info: '--',
+            // },
+          ],
+        },
+      ],
+      complex_list: [],
+      preset: [
+        {
+          readFrom: '',
+        },
+      ],
+      mock: BDfireMock,
+    },
+    // showStyle: {
+    //   size: 'width:450px;height:760px;',
+    //   version: '保德',
+    //   position: 'top:160px;left:0;',
+    // },
+    showStyle: {
+      size: 'width:1000px;height:280px;',
+      version: '保德',
+      position: 'top:350px;left:460px',
+    },
+  },
+  {
+    deviceType: '',
+    moduleName: '束管监测',
+    pageType: '',
+    moduleData: {
+      header: {
+        show: true,
+        showSelector: true,
+        showSlot: false,
+        selector: {
+          value: '',
+        },
+        slot: {
+          value: '',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      slice: {
+        direction: 'column',
+        basis: ['65%', '35%'],
+      },
+      layout: ['list', 'blast_delta'],
+      board: [],
+      chart: [],
+      gallery: [],
+      gallery_list: [],
+      table: [],
+      list: [
+        {
+          type: 'G',
+          readFrom: 'dsArray',
+          items: [
+            {
+              label: 'CO',
+              value: '--',
+              color: 'blue',
+              info: '--',
+            },
+            {
+              label: 'CO₂',
+              value: '--',
+              color: 'blue',
+              info: '--',
+            },
+            {
+              label: 'CH₄',
+              value: '--',
+              color: 'blue',
+              info: '--',
+            },
+            {
+              label: 'C₂H₂',
+              value: '--',
+              color: 'blue',
+              info: '--',
+            },
+            {
+              label: 'C₂H₄',
+              value: '--',
+              color: 'blue',
+              info: '--',
+            },
+            {
+              label: 'O₂',
+              value: '--',
+              color: 'blue',
+              info: '--',
+            },
+            {
+              label: '温度',
+              value: '--',
+              color: 'blue',
+              info: '--',
+            },
+            {
+              label: '风险',
+              value: '--',
+              color: 'blue',
+              info: '--',
+            },
+          ],
+        },
+      ],
+      complex_list: [],
+      preset: [
+        {
+          readFrom: '',
+        },
+      ],
+      mock: BDfireMock,
+    },
+    showStyle: {
+      size: 'width:450px;height:760px;',
+      version: '保德',
+      position: 'top:160px;left:0;',
+    },
+  },
+  {
+    deviceType: '',
+    moduleName: '光纤测温',
+    pageType: '',
+    moduleData: {
+      header: {
+        show: true,
+        showSelector: true,
+        showSlot: false,
+        selector: {
+          value: '',
+        },
+        slot: {
+          value: '',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      slice: {
+        direction: 'row',
+        basis: ['50%', '50%'],
+      },
+      layout: ['list', 'chart'],
+      board: [],
+      chart: [
+        {
+          type: 'line',
+          readFrom: 'btArray',
+          xAxis: [{ label: '${strinstallpos}' }],
+          yAxis: [{ label: '值', align: 'left' }],
+          series: [{ prop: 'val', label: '值' }],
+        },
+      ],
+      gallery: [],
+      gallery_list: [],
+      table: [],
+      list: [
+        {
+          type: 'G',
+          readFrom: 'dsArray',
+          items: [
+            {
+              label: 'CO',
+              value: '--',
+              color: 'blue',
+              info: '--',
+            },
+            {
+              label: 'CO₂',
+              value: '--',
+              color: 'blue',
+              info: '--',
+            },
+            {
+              label: 'CH₄',
+              value: '--',
+              color: 'blue',
+              info: '--',
+            },
+            {
+              label: 'C₂H₂',
+              value: '--',
+              color: 'blue',
+              info: '--',
+            },
+            // {
+            //   label: 'C₂H₄',
+            //   value: '--',
+            //   color: 'blue',
+            //   info: '--',
+            // },
+            // {
+            //   label: 'O₂',
+            //   value: '--',
+            //   color: 'blue',
+            //   info: '--',
+            // },
+            // {
+            //   label: '温度',
+            //   value: '--',
+            //   color: 'blue',
+            //   info: '--',
+            // },
+            // {
+            //   label: '风险',
+            //   value: '--',
+            //   color: 'blue',
+            //   info: '--',
+            // },
+          ],
+        },
+      ],
+      complex_list: [],
+      preset: [],
+      mock: BDfireMock,
+    },
+    // showStyle: {
+    //   size: 'width:450px;height:760px;',
+    //   version: '保德',
+    //   position: 'top:160px;left:0;',
+    // },
+    showStyle: {
+      size: 'width:1000px;height:280px;',
+      version: '保德',
+      position: 'top:640px;left:460px',
+    },
+  },
+];

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

@@ -64,7 +64,7 @@
   // import MonitorCenter from './components/MonitorCenter.vue';
   // import { useInitConfigs } from './hooks/useInit';
   import ModuleBD from './components/ModuleBD.vue';
-  import { testConfigBDDust } from './configurable.data';
+  import { testConfigBDNew } from './configurable.data';
   import VentModal from '/@/components/vent/micro/ventModal.vue';
   import { getBDDustData } from './configurable.api';
 
@@ -73,7 +73,7 @@
 
   // const moduleCodes = ['fanlocal', 'fanmain' /** 'vc', 'ar', 'va', 'ws', 'dw' */];
 
-  const configs = ref(testConfigBDDust);
+  const configs = ref(testConfigBDNew);
   // const { configs, fetchConfigs } = useInitConfigs();
   const homedata = ref<any>({});