[Feat 0000] 更新保德首页用到的gallery基本样式

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

@@ -219,6 +219,8 @@ export interface ModuleDataComplexList {
   type: 'A' | 'B';
   /** 读取数据时的基础路径，如果配置了 header，应接着 Config.deviceType 配取值路径，反之应配置详尽路径 */
   readFrom: string;
+  /** 是否需要根据数据来决定所展示的项目数量，需要确保 items 至少有一项，且 readFrom 指向数组 */
+  mapFromData: boolean;
   /** 核心配置，每个列表项对应一项 */
   items: {
     /** 列表项标题，formatter 格式 */

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

@@ -16,7 +16,7 @@
       Not Supportted Link Or Browser
     </video>
     <div class="flex w-full h-full" :style="{ flexDirection: slice.direction }">
-      <div v-for="(config, i) in layoutConfig" :key="config.key" :style="{ flexBasis: slice.basis[i] }">
+      <div v-for="(config, i) in layoutConfig" :key="config.key" :style="{ flexBasis: slice.basis[i], overflow: 'auto' }">
         <!-- 告示板部分 -->
         <template v-if="config.key === 'board'">
           <div class="content__module flex flex-justify-around pt-10px pb-10px">
@@ -185,22 +185,42 @@
           if (!cfg) break;
           const data = getData(refData, cfg.readFrom);
 
-          arr.push({
-            ...cfg,
-            key,
-            items: cfg.items.map((i) => {
-              return {
-                title: getFormattedText(data, i.title),
-                contents: i.contents.map((e) => {
-                  return {
-                    ...e,
-                    label: getFormattedText(data, e.label),
-                    value: getFormattedText(data, e.value),
-                  };
-                }),
-              };
-            }),
-          });
+          if (cfg.mapFromData) {
+            const item = cfg.items[0];
+            arr.push({
+              ...cfg,
+              key,
+              items: (data || []).map((d) => {
+                return {
+                  title: getFormattedText(d, item.title),
+                  contents: item.contents.map((e) => {
+                    return {
+                      ...e,
+                      label: getFormattedText(d, e.label),
+                      value: getFormattedText(d, e.value),
+                    };
+                  }),
+                };
+              }),
+            });
+          } else {
+            arr.push({
+              ...cfg,
+              key,
+              items: cfg.items.map((i) => {
+                return {
+                  title: getFormattedText(data, i.title),
+                  contents: i.contents.map((e) => {
+                    return {
+                      ...e,
+                      label: getFormattedText(data, e.label),
+                      value: getFormattedText(data, e.value),
+                    };
+                  }),
+                };
+              }),
+            });
+          }
           break;
         }
         case 'gallery_list': {

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

@@ -5,7 +5,7 @@
     <!-- 部分类型的列表需要加一张图片 -->
     <div :class="`list__image_${type}`"></div>
     <!-- 剩下的部分填充剩余宽度 -->
-    <div class="flex-grow" :class="`list__wrapper_${type}`">
+    <div class="flex-grow h-full" :class="`list__wrapper_${type}`">
       <div v-for="(item, i) in listConfig" :key="`vvhccdcl${i}`" :class="`list-item_${type}`">
         <!-- 列表项前面的图标 -->
         <div :class="`list-item__title_${type}`">{{ item.title }}</div>

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

@@ -35,8 +35,6 @@
 </script>
 <style lang="less" scoped>
   @import '@/design/vent/color.less';
-  /* Timeline 相关的样式 */
-
   .gallery {
     position: relative;
     width: 100%;
@@ -152,7 +150,6 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    height: 100px;
   }
   .gallery-item_center_D {
     background: url(/@/assets/images/home-container/configurable/firehome/img-2.png) no-repeat;
@@ -184,7 +181,7 @@
     width: 200px;
     height: 200px;
     left: calc(50% - 100px);
-    top: calc(50% - 110px);
+    top: calc(50% - 100px);
     position: absolute;
     background-size: 100% auto;
   }
@@ -206,29 +203,31 @@
     }
   }
   .gallery > .gallery-item_E:nth-child(2) {
-    top: 20px;
-    left: 80px;
+    top: calc(50% - 100px);
+    // top: 20px;
+    left: calc(50% - 150px);
+    // left: 80px;
     .gallery-item__label {
       background-image: url(/@/assets/images/home-container/configurable/dusthome/sbzs.png);
     }
   }
   .gallery > .gallery-item_E:nth-child(3) {
-    top: 20px;
-    right: 80px;
+    top: calc(50% - 100px);
+    right: calc(50% - 150px);
     .gallery-item__label {
       background-image: url(/@/assets/images/home-container/configurable/dusthome/pwkqs.png);
     }
   }
   .gallery > .gallery-item_E:nth-child(4) {
-    bottom: 20px;
-    left: 80px;
+    bottom: calc(50% - 100px);
+    left: calc(50% - 150px);
     .gallery-item__label {
       background-image: url(/@/assets/images/home-container/configurable/dusthome/lwsl.png);
     }
   }
   .gallery > .gallery-item_E:nth-child(5) {
-    bottom: 20px;
-    right: 80px;
+    bottom: calc(50% - 100px);
+    right: calc(50% - 150px);
     .gallery-item__label {
       background-image: url(/@/assets/images/home-container/configurable/dusthome/dwsl.png);
     }
@@ -242,6 +241,7 @@
     position: absolute;
     text-align: center;
     padding-left: 20px;
+    padding-top: 5px;
     background-size: 100% 100%;
     background-repeat: no-repeat;
     background-position: center;
@@ -252,11 +252,11 @@
     }
   }
   .gallery > .gallery-item_F:nth-child(2) {
-    top: 10px;
-    left: 30px;
-    width: 130px;
-    height: 130px;
-    line-height: 130px;
+    top: calc(50% - 60px);
+    left: calc(50% - 180px);
+    width: 120px;
+    height: 120px;
+    line-height: 120px;
     padding: 0;
     background-image: url(/@/assets/images/home-container/configurable/dusthome/img-7.png);
 
@@ -265,24 +265,20 @@
     }
   }
   .gallery > .gallery-item_F:nth-child(3) {
-    top: 15px;
-    left: 160px;
-    padding-top: 5px;
+    top: calc(50% - 62px);
+    left: calc(50% - 60px);
   }
   .gallery > .gallery-item_F:nth-child(4) {
-    top: 15px;
-    left: 280px;
-    padding-top: 5px;
+    top: calc(50% - 62px);
+    left: calc(50% + 60px);
   }
   .gallery > .gallery-item_F:nth-child(5) {
-    top: 80px;
-    left: 160px;
-    padding-top: 5px;
+    bottom: calc(50% - 62px);
+    left: calc(50% - 60px);
   }
   .gallery > .gallery-item_F:nth-child(6) {
-    top: 80px;
-    left: 280px;
-    padding-top: 5px;
+    bottom: calc(50% - 62px);
+    left: calc(50% + 60px);
   }
 
   .gallery > .gallery-item_G {
@@ -306,33 +302,33 @@
   }
   .gallery > .gallery-item_G:nth-child(3) {
     top: calc(50% - 60px);
-    left: 60px;
-    transform: scale(0.7);
+    left: calc(50% - 160px);
+    transform: scale(0.8);
   }
   .gallery > .gallery-item_G:nth-child(4) {
     top: calc(50% - 60px);
-    right: 60px;
-    transform: scale(0.7);
+    right: calc(50% - 160px);
+    transform: scale(0.8);
   }
   .gallery > .gallery-item_G:nth-child(5) {
-    top: 10px;
-    left: 0px;
-    transform: scale(0.5);
+    top: calc(50% - 110px);
+    left: calc(50% - 230px);
+    transform: scale(0.7);
   }
   .gallery > .gallery-item_G:nth-child(6) {
-    bottom: 10px;
-    left: 0px;
-    transform: scale(0.5);
+    bottom: calc(50% - 110px);
+    left: calc(50% - 230px);
+    transform: scale(0.7);
   }
   .gallery > .gallery-item_G:nth-child(7) {
-    top: 10px;
-    right: 0px;
-    transform: scale(0.5);
+    top: calc(50% - 110px);
+    right: calc(50% - 230px);
+    transform: scale(0.7);
   }
   .gallery > .gallery-item_G:nth-child(8) {
-    bottom: 10px;
-    right: 0px;
-    transform: scale(0.5);
+    bottom: calc(50% - 110px);
+    right: calc(50% - 230px);
+    transform: scale(0.7);
   }
 
   .gallery-item__value_red {

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

@@ -1361,13 +1361,28 @@ const BDdustMock = {
       {
         sysNamme: '工作面名称1', //工作面名称
         warnLevel: '低风险', //预警级别
-        maxVal: '1.88', //最高粉尘浓度
+        maxVal: 0.1, //最高粉尘浓度
       },
       {
         sysNamme: '工作面名称2', //工作面名称
         warnLevel: '低风险', //预警级别
         maxVal: '1.88', //最高粉尘浓度
       },
+      {
+        sysNamme: '工作面名称3', //工作面名称
+        warnLevel: '低风险', //预警级别
+        maxVal: 0, //最高粉尘浓度
+      },
+      {
+        sysNamme: '工作面名称4', //工作面名称
+        warnLevel: '低风险', //预警级别
+        maxVal: '1.88', //最高粉尘浓度
+      },
+      {
+        sysNamme: '工作面名称5', //工作面名称
+        warnLevel: '低风险', //预警级别
+        maxVal: '1.88', //最高粉尘浓度
+      },
     ],
   },
   dustDustGraph: [
@@ -1535,58 +1550,25 @@ export const testConfigBDDust: Config[] = [
         {
           type: 'A',
           readFrom: 'dustManageInfo.sysList',
+          mapFromData: true,
           items: [
             {
-              title: '${[0].sysNamme}',
+              title: '${sysNamme}',
               contents: [
                 {
                   label: '风险监测',
-                  value: '${[0].warnLevel}',
+                  value: '${warnLevel}',
                   color: 'blue',
                   info: '',
                 },
                 {
                   label: '最高粉尘浓度',
-                  value: '${[0].maxVal}',
+                  value: '${maxVal}',
                   color: 'blue',
                   info: '',
                 },
               ],
             },
-            {
-              title: '${[1].sysNamme}',
-              contents: [
-                {
-                  label: '风险监测',
-                  value: '${[1].warnLevel}',
-                  color: 'blue',
-                  info: '',
-                },
-                {
-                  label: '最高粉尘浓度',
-                  value: '${[1].maxVal}',
-                  color: 'blue',
-                  info: '',
-                },
-              ],
-            },
-            // {
-            //   title: '${[2].sysNamme}',
-            //   contents: [
-            //     {
-            //       label: '风险监测',
-            //       value: '${[2].warnLevel}',
-            //       color: 'blue',
-            //       info: '',
-            //     },
-            //     {
-            //       label: '最高粉尘浓度',
-            //       value: '${[2].maxVal}',
-            //       color: 'blue',
-            //       info: '',
-            //     },
-            //   ],
-            // },
           ],
         },
       ],
@@ -1655,7 +1637,6 @@ export const testConfigBDDust: Config[] = [
       list: [],
       complex_list: [],
       preset: [],
-      // mock: BDdustMock,
     },
     showStyle: {
       size: 'width:1000px;height:280px;',
@@ -2033,7 +2014,7 @@ export const testConfigBDFire: Config[] = [
       },
       slice: {
         direction: 'column',
-        basis: ['20%', '80%'],
+        basis: ['30%', '70%'],
       },
       layout: ['gallery', 'complex_list'],
       board: [],
@@ -2058,36 +2039,20 @@ export const testConfigBDFire: Config[] = [
         {
           type: 'A',
           readFrom: 'fireManageInfo.sysList',
+          mapFromData: true,
           items: [
             {
-              title: '${[0].sysNamme}',
+              title: '${sysNamme}',
               contents: [
                 {
                   label: '风险监测',
-                  value: '${[0].warnLevel}',
+                  value: '${warnLevel}',
                   color: 'blue',
                   info: '',
                 },
                 {
                   label: '最高温度',
-                  value: '${[0].maxVal}',
-                  color: 'blue',
-                  info: '',
-                },
-              ],
-            },
-            {
-              title: '${[1].sysNamme}',
-              contents: [
-                {
-                  label: '风险监测',
-                  value: '${[1].warnLevel}',
-                  color: 'blue',
-                  info: '',
-                },
-                {
-                  label: '最高温度',
-                  value: '${[1].maxVal}',
+                  value: '${maxVal}',
                   color: 'blue',
                   info: '',
                 },
@@ -2225,6 +2190,7 @@ export const testConfigBDFire: Config[] = [
         {
           type: 'B',
           readFrom: 'btArray',
+          mapFromData: false,
           items: [
             {
               title: 'CO',
@@ -2700,7 +2666,7 @@ export const testConfigBDNew: Config[] = [
           readFrom: '',
         },
       ],
-      mock: BDfireMock,
+      // mock: BDfireMock,
     },
     // showStyle: {
     //   size: 'width:450px;height:760px;',
@@ -2806,7 +2772,7 @@ export const testConfigBDNew: Config[] = [
           readFrom: '',
         },
       ],
-      mock: BDfireMock,
+      // mock: BDfireMock,
     },
     showStyle: {
       size: 'width:450px;height:760px;',
@@ -2911,7 +2877,7 @@ export const testConfigBDNew: Config[] = [
       ],
       complex_list: [],
       preset: [],
-      mock: BDfireMock,
+      // mock: BDfireMock,
     },
     // showStyle: {
     //   size: 'width:450px;height:760px;',