[Wip 0000] 保德可配置首页为两个首页配置其内容并调整样式

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

@@ -38,7 +38,7 @@
     </div>
     <div class="dane-content">
       <slot>
-        <Content class="h-full" :moduleData="moduleData" :data="selectedDevice" />
+        <Content style="height: 100%" :moduleData="moduleData" :data="selectedDevice" />
       </slot>
     </div>
   </div>
@@ -118,7 +118,7 @@
       justify-content: space-between;
       width: 100%;
       height: 34px;
-      padding: 0 30px 0 50px;
+      padding: 0 40px 0 50px;
 
       .common-navL {
         display: flex;
@@ -161,7 +161,8 @@
       border-width: 2px;
       border-style: solid;
       box-sizing: border-box;
-      background-image: linear-gradient(#00000000 94%, #1dabeb11);
+      border-top: none;
+      background-image: linear-gradient(#000723 94%, #1dabeb11);
     }
   }
 
@@ -181,15 +182,11 @@
   }
 
   .dane-w {
-    background: url('@/assets/images/home-container/configurable/firehome/common-border3.png') no-repeat;
-    background-size: 100% auto;
-    .dane-content {
-      background: none;
-      border: none;
-    }
+    background-image: url(/home/zekong/mky-vent-base/src/assets/images/home-container/configurable/firehome/module-title-long.png);
+    background-size: 100% 37px;
   }
 
-  :deep(.vMonitor-select-selector) {
+  :deep(.zxm-select-selector) {
     height: 22px !important;
     border: none !important;
     // background-color: rgb(15 64 88) !important;
@@ -197,47 +194,51 @@
     color: #8087a1 !important;
   }
 
-  :deep(.vMonitor-select-selection-placeholder) {
+  :deep(.zxm-select-selection-placeholder) {
     color: #8087a1 !important;
   }
 
-  :deep(.vMonitor-select-arrow) {
+  :deep(.zxm-select-arrow) {
     color: #8087a1 !important;
   }
 
-  :deep(.vMonitor-picker) {
+  :deep(.zxm-picker) {
     border: none !important;
     background-color: rgb(15 64 88) !important;
     box-shadow: none;
     color: #a1dff8 !important;
   }
 
-  :deep(.vMonitor-picker-input > input) {
+  :deep(.zxm-picker-input > input) {
     color: #a1dff8 !important;
     text-align: center !important;
   }
 
-  :deep(.vMonitor-picker-separator) {
+  :deep(.zxm-picker-separator) {
     color: #a1dff8 !important;
   }
 
-  :deep(.vMonitor-picker-active-bar) {
+  :deep(.zxm-picker-active-bar) {
     display: none !important;
   }
 
-  :deep(.vMonitor-picker-suffix) {
+  :deep(.zxm-picker-suffix) {
     color: #a1dff8 !important;
   }
 
-  :deep(.vMonitor-switch) {
+  :deep(.zxm-switch) {
     min-width: 48px !important;
   }
 
-  :deep(.vMonitor-switch-checked) {
+  :deep(.zxm-switch-checked) {
     background-color: rgb(15 64 89) !important;
   }
 
-  :deep(.vMonitor-switch-handle::before) {
+  :deep(.zxm-switch-handle::before) {
     background-color: rgb(33 179 247) !important;
   }
+
+  :deep(.zxm-select-selection-item) {
+    color: #fff !important;
+  }
 </style>

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

@@ -54,19 +54,7 @@
       </template>
       <!-- 表格部分，这部分通常是占一整个模块的 -->
       <template v-if="config.key === 'table'">
-        <CommonTable
-          v-if="config.type === 'A'"
-          :columns="config.columns"
-          :data="config.data"
-          class="content__module text-center flex-grow overflow-auto"
-        />
-        <CustomTable
-          v-else
-          :type="config.type"
-          :columns="config.columns"
-          :data="config.data"
-          class="content__module text-center flex-grow overflow-auto"
-        />
+        <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 }" />
@@ -100,7 +88,6 @@
   import CustomChart from './detail/CustomChart.vue';
   import { get, clone } from 'lodash-es';
   import { getFormattedText } from '../../../deviceManager/configurationTable/adapters';
-  import CommonTable from '../../billboard/components/CommonTable.vue';
   import BlastDelta from '../../../monitorManager/deviceMonitor/components/device/modal/blastDelta.vue';
   import FIreWarn from './preset/FIreWarn.vue';
   import FIreControl from './preset/FIreControl.vue';

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

@@ -55,13 +55,15 @@
 
   .list-item_A {
     position: relative;
-    height: 155px;
+    height: 140px;
     background-repeat: no-repeat;
     background-image: url(/@/assets/images/home-container/configurable/firehome/img-3.png);
+    background-size: auto 100%;
+    background-position: center;
   }
   .list-item__title_A {
     position: absolute;
-    left: 35%;
+    left: 41%;
     font-size: 20px;
     top: 15px;
   }
@@ -75,13 +77,13 @@
   .list-item__content_A:nth-of-type(2) {
     position: absolute;
     top: 15px;
-    left: 5%;
+    left: 14%;
     width: 22%;
     text-align: center;
     display: block;
 
     .list-item__label {
-      font-size: 20px;
+      font-size: 18px;
       margin-bottom: 25px;
     }
     .list-item__info {
@@ -93,7 +95,7 @@
   }
   .list-item__content_A:nth-of-type(3) {
     position: absolute;
-    left: 35%;
+    left: 41%;
     top: 55px;
 
     .list-item__info {
@@ -105,7 +107,7 @@
   }
   .list-item__content_A:nth-of-type(4) {
     position: absolute;
-    left: 60%;
+    left: 66%;
     top: 55px;
 
     .list-item__info {
@@ -141,13 +143,19 @@
     align-items: center;
     justify-content: space-between;
     text-align: center;
-    padding-right: 20px;
-    margin-bottom: 10px;
+    padding-right: 50px;
+    margin-top: 15px;
+    height: 40px;
 
     .list-item__label {
-      font-size: 12px;
+      font-size: 11px;
+    }
+    .list-item__value {
+      font-size: 21px;
+      margin-left: 5px;
     }
     .list-item__content_B {
+      height: 100%;
       display: flex;
       align-items: center;
     }
@@ -181,7 +189,7 @@
     color: yellowgreen;
   }
   .list-item__value_blue {
-    color: lightblue;
+    color: #009bff;
   }
   .list-item__value_white {
     color: white;

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

@@ -284,29 +284,23 @@
           color: '#fff',
         },
         grid: {
-          left: 60,
+          left: 40,
           top: 50,
-          right: 60,
-          bottom: 50,
+          right: 40,
+          bottom: 10,
+          show: false,
         },
-        xAxis: xAxis.map((e) => {
+        xAxis: xAxis.map(() => {
           return {
             type: 'category',
-            data: sorttedData.map((d) => {
-              return getFormattedText(d, e.label);
-            }),
+            show: false,
           };
         }),
-        yAxis: yAxis.map((e) => {
+        yAxis: yAxis.map(() => {
           return {
-            name: e.label,
-            position: e.align,
-            splitLine: {
-              lineStyle: {
-                color: '#fff',
-                opacity: 0.3,
-              },
-            },
+            show: false,
+            // name: e.label,
+            // position: e.align,
           };
         }),
         series: series.map((serie, i) => {
@@ -314,6 +308,12 @@
             return {
               name: serie.label,
               value: get(d, serie.prop, 0),
+              label: {
+                show: true,
+                position: 'top',
+                borderWidth: 0,
+                color: '#fff',
+              },
               itemStyle: {
                 color: new graphic.LinearGradient(0, 0, 0, 1, [
                   { offset: 0, color: '#66ffff' },
@@ -326,6 +326,7 @@
 
           return {
             type: i % 2 ? 'line' : 'bar',
+            smooth: true,
             data,
             barWidth: 20,
           };

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

@@ -152,7 +152,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    height: auto;
+    height: 100px;
   }
   .gallery-item_center_D {
     background: url(/@/assets/images/home-container/configurable/firehome/img-2.png) no-repeat;
@@ -162,12 +162,13 @@
   }
   .gallery > .gallery-item_D {
     background-image: url(/@/assets/images/home-container/configurable/firehome/img-1.png);
-    background-size: auto 100%;
+    background-size: 100% auto;
     width: 213px;
     height: 87px;
-    align-items: center;
     text-align: center;
-    line-height: 35px;
+    // line-height: 35px;
+    padding-top: 17px;
+    padding-left: 40px;
     display: none;
 
     .gallery-item__value {
@@ -237,7 +238,7 @@
   // }
   .gallery > .gallery-item_F {
     width: 120px;
-    height: 65px;
+    height: 60px;
     position: absolute;
     text-align: center;
     padding-left: 20px;
@@ -252,10 +253,10 @@
   }
   .gallery > .gallery-item_F:nth-child(2) {
     top: 10px;
-    left: 10px;
-    width: 150px;
-    height: 150px;
-    line-height: 150px;
+    left: 30px;
+    width: 130px;
+    height: 130px;
+    line-height: 130px;
     padding: 0;
     background-image: url(/@/assets/images/home-container/configurable/dusthome/img-7.png);
 
@@ -264,22 +265,22 @@
     }
   }
   .gallery > .gallery-item_F:nth-child(3) {
-    top: 10px;
+    top: 15px;
     left: 160px;
     padding-top: 5px;
   }
   .gallery > .gallery-item_F:nth-child(4) {
-    top: 10px;
+    top: 15px;
     left: 280px;
     padding-top: 5px;
   }
   .gallery > .gallery-item_F:nth-child(5) {
-    top: 90px;
+    top: 80px;
     left: 160px;
     padding-top: 5px;
   }
   .gallery > .gallery-item_F:nth-child(6) {
-    top: 90px;
+    top: 80px;
     left: 280px;
     padding-top: 5px;
   }
@@ -317,23 +318,23 @@
     transform: scale(0.7);
   }
   .gallery > .gallery-item_G:nth-child(5) {
-    top: 15px;
-    left: 30px;
+    top: 10px;
+    left: 0px;
     transform: scale(0.5);
   }
   .gallery > .gallery-item_G:nth-child(6) {
-    bottom: 15px;
-    left: 30px;
+    bottom: 10px;
+    left: 0px;
     transform: scale(0.5);
   }
   .gallery > .gallery-item_G:nth-child(7) {
-    top: 15px;
-    right: 30px;
+    top: 10px;
+    right: 0px;
     transform: scale(0.5);
   }
   .gallery > .gallery-item_G:nth-child(8) {
-    bottom: 15px;
-    right: 30px;
+    bottom: 10px;
+    right: 0px;
     transform: scale(0.5);
   }
 
@@ -350,7 +351,7 @@
     color: yellowgreen;
   }
   .gallery-item__value_blue {
-    color: lightblue;
+    color: #009bff;
   }
   .gallery-item__value_white {
     color: white;

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

@@ -174,7 +174,7 @@
     background-position: center;
     background-size: 100% auto;
     background-image: url(/@/assets/images/home-container/configurable/firehome/list.png);
-    margin-bottom: 10px;
+    margin-top: 10px;
     text-align: center;
   }
   .list-item__content_F > div {
@@ -242,7 +242,7 @@
     color: yellowgreen;
   }
   .list-item__value_blue {
-    color: lightblue;
+    color: #009bff;
   }
   .list-item__value_white {
     color: white;

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

@@ -1,16 +1,14 @@
 <template>
-  <div class="table">
-    <div class="table__content">
-      <div class="table__content_label" :class="`table__content_label_${type}`">
-        <div class="label-t" v-for="(item, index) in columns" :key="`svvhbcth-${index}`" :style="{ flexBasis }">{{ item.name }}</div>
-      </div>
-      <div class="table__content_list" :class="`table__content_list_${type}`">
-        <div class="table__content_list_row" v-for="(item, index) in data" :key="`svvhbct-${index}`">
-          <div v-for="(t, i) in columns" :key="`svvhbctr-${i}`" :style="{ flexBasis }" :class="`table__content__list_item_${type}`">
-            <slot :name="t.prop" :scope="item">
-              <span>{{ get(item, t.prop) }}</span>
-            </slot>
-          </div>
+  <div class="table__content">
+    <div class="table__content_label" :class="`table__content_label_${type}`">
+      <div class="label-t" v-for="(item, index) in columns" :key="`svvhbcth-${index}`" :style="{ flexBasis }">{{ item.name }}</div>
+    </div>
+    <div class="table__content_list" :class="`table__content_list_${type}`">
+      <div class="table__content_list_row" v-for="(item, index) in data" :key="`svvhbct-${index}`">
+        <div v-for="(t, i) in columns" :key="`svvhbctr-${i}`" :style="{ flexBasis }" :class="`table__content__list_item_${type}`">
+          <slot :name="t.prop" :scope="item">
+            <span>{{ get(item, t.prop) }}</span>
+          </slot>
         </div>
       </div>
     </div>
@@ -60,6 +58,7 @@
     display: flex;
     flex-direction: column;
     align-items: center;
+    padding: 5px 0;
 
     .table__content_label {
       width: 400px;
@@ -74,6 +73,13 @@
         font-size: 14px;
       }
     }
+    .table__content_label_A {
+      // border: 1px solid @vent-gas-tab-border;
+      background-image: url(@/assets/images/company/content-label.png);
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
+      color: #31b9ef;
+    }
     .table__content_label_B {
       // border: 1px solid @vent-gas-tab-border;
       background-image: linear-gradient(to top, #04698c, #04698c00);
@@ -102,18 +108,14 @@
       width: 400px;
       display: flex;
       flex-direction: column;
-      // justify-content: space-around;
-      justify-content: flex-start;
-      padding: 5px 0px;
+      padding: 5px 0;
       box-sizing: border-box;
       overflow-y: auto;
       .table__content_list_row {
         width: 100%;
-        height: 28px;
         display: flex;
         justify-content: space-around;
-        align-items: flex-start;
-        // background: url('@/assets/images/company/content-text.png') no-repeat;
+        align-items: center;
         color: #fff;
         margin-bottom: 5px;
         span {
@@ -127,11 +129,21 @@
       // }
     }
 
+    .table__content_list_A {
+      .table__content_list_row {
+        // background-position: center;
+        background-size: 100% auto;
+        background-repeat: no-repeat;
+        background-position: center bottom;
+        background-image: url('@/assets/images/company/content-text.png');
+      }
+    }
     .table__content_list_C {
       .table__content_list_row {
         // background-position: center;
         background-size: 100% auto;
         background-repeat: no-repeat;
+        background-position: center bottom;
         background-image: url('@/assets/images/company/content-text.png');
       }
     }

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

@@ -23,7 +23,7 @@
         </div>
         <div class="tcontent-c">
           <div style="margin-bottom: 15px; color: #009bff; font-size: 24px; font-weight: bolder; letter-spacing: 10px">低风险</div>
-          <div style="color: #fff; font-size: 12px">自燃倾向性等级 : 容易自燃</div>
+          <!-- <div style="color: #fff; font-size: 12px">自燃倾向性等级 : 容易自燃</div> -->
         </div>
         <div class="tcontent-r">
           <div>火灾</div>