[Feat 0000] 添加一个新的列表预设

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

@@ -22,13 +22,15 @@ export interface ModuleDataBoard {
 }
 export interface ModuleDataList {
   /** 列表项预设的背景类型 */
-  type: 'timeline' | 'A' | 'B';
+  type: 'timeline' | 'A' | 'B' | 'C';
   items: {
     /** 列表项说明内容 */
     label: string;
     formatter?: string;
     prop: string;
     color: string;
+    /** 针对列表项说明的额外信息 */
+    info: string;
   }[];
 }
 export interface ModuleDataChart {

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

@@ -1,16 +1,19 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <template>
-  <div class="list flex items-center" :class="`list__${type}`">
+  <!-- 基准的列表模块，通过不同的 type 展示不同的样式 -->
+  <div class="list flex items-center" :class="`list_${type}`">
     <!-- 部分类型的列表需要加一张图片 -->
-    <div :class="`list-item__image__${type}`"></div>
+    <div :class="`list-item__image_${type}`"></div>
+    <!-- 剩下的部分填充剩余宽度 -->
     <div class="flex-grow">
       <div v-for="item in listConfig" :key="item.prop" class="flex items-center list-item">
-        <div :class="`list-item__icon__${type}`"></div>
-        <div class="flex-grow" :class="`list-item__content__${type}`">
+        <!-- 列表项前面的图标 -->
+        <div :class="`list-item__icon_${type}`"></div>
+        <!-- 列表项的具体内容填充剩余宽度 -->
+        <div class="flex-grow" :class="`list-item__content_${type}`">
           <div class="list-item__label">{{ item.label }}</div>
-          <div :class="`list-item__value_${item.color}`">
-            {{ item.value }}
-          </div>
+          <div :class="`list-item__info_${item.color}`">{{ item.info }}</div>
+          <div :class="`list-item__value_${item.color}`">{{ item.value }}</div>
         </div>
       </div>
     </div>
@@ -24,6 +27,7 @@
         color: string;
         label: string;
         prop: string;
+        info: string;
       }[];
       type: string;
     }>(),
@@ -42,24 +46,35 @@
   .list-item {
     height: 20%;
   }
-  .list__A {
+
+  .list {
+    padding: 5px 20px;
+    position: relative;
+    background-repeat: no-repeat;
+    width: 100%;
+    height: 100%;
+    background-size: auto 100%;
+    background-image: url(/@/assets/images/home-container/configurable/list_bg_default.png);
+  }
+
+  .list_A {
     padding-left: 5px;
   }
-  .list-item__content__A {
+  .list-item__content_A {
     background-repeat: no-repeat;
     background-image: @vent-gas-list-item-bg-img;
     padding: 5px 10px;
     display: flex;
     justify-content: space-between;
   }
-  .list-item__icon__A {
+  .list-item__icon_A {
     background-repeat: no-repeat;
     width: 25px;
     height: 29px;
     background-image: url(/@/assets/images/home-container/configurable/triangle_icon.png);
   }
 
-  .list-item__content__B {
+  .list-item__content_B {
     background-repeat: no-repeat;
     padding: 5px 10px 10px 10px;
     display: flex;
@@ -68,7 +83,7 @@
     background-size: 100% auto;
     background-image: url(/@/assets/images/home-container/configurable/list_bg_b.png);
   }
-  .list-item__image__B {
+  .list-item__image_B {
     width: 77px;
     height: 77px;
     background-repeat: no-repeat;
@@ -76,6 +91,25 @@
     background-size: auto;
     margin-right: 20px;
   }
+
+  .list_C {
+    background: none;
+  }
+
+  .list-item__content_C {
+    height: 60px;
+    background-repeat: no-repeat;
+    padding: 25px 50px 0 50px;
+    display: flex;
+    background-position: center;
+    background-size: 100% 100%;
+    background-image: url(/@/assets/images/home-container/configurable/list_bg_c.png);
+    margin-bottom: 10px;
+    text-align: center;
+  }
+  .list-item__content_C > div {
+    flex-basis: 33.3%;
+  }
   // .list-item__icon_red {
   //   background-image: url('@/assets/images/home-container/configurable/warn_icon_5.png');
   // }
@@ -133,14 +167,4 @@
   .list-item__value_blue {
     color: lightblue;
   }
-
-  .list {
-    padding: 5px 20px;
-    position: relative;
-    background-repeat: no-repeat;
-    width: 100%;
-    height: 100%;
-    background-size: auto 100%;
-    background-image: url(/@/assets/images/home-container/configurable/list_bg_default.png);
-  }
 </style>

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

@@ -74,7 +74,8 @@
       }
     }
     .table__content_label_B {
-      background-image: linear-gradient(to bottom, #04698c, #04698c00);
+      // border: 1px solid @vent-gas-tab-border;
+      background-image: linear-gradient(to top, #04698c, #04698c00);
       background-size: 100% 100%;
       background-repeat: no-repeat;
       color: #31b9ef;

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

@@ -637,7 +637,7 @@ export const testConfigA: Config[] = [
     pageType: '',
     moduleData: {
       header: {
-        show: false,
+        show: true,
         showSelector: true,
         showSlot: true,
         selector: {
@@ -713,28 +713,31 @@ export const testConfigA: Config[] = [
       board: [],
       list: [
         {
-          type: 'A',
+          type: 'C',
           items: [
             {
               prop: 'total',
-              label: '设备总数',
+              label: '光纤预警',
               color: 'blue',
+              info: '个',
             },
             {
               prop: 'pwkqs',
               label: '喷雾开启数',
               color: 'blue',
+              info: '个',
             },
             {
               prop: 'online',
               label: '联网数量',
               color: 'blue',
+              info: '个',
             },
-            {
-              prop: 'offline',
-              label: '断网数量',
-              color: 'blue',
-            },
+            // {
+            //   prop: 'offline',
+            //   label: '断网数量',
+            //   color: 'blue',
+            // },
           ],
         },
       ],