[Wip 0000] 可配置首页开发

src/design/vent/color.less

@@ -25,5 +25,5 @@
 @vent-gas-primary-trasparent-bg: #0091ff12;
 // vent/gas 模块下的客制ListItem组件背景色
 @vent-gas-list-item-bg-img: linear-gradient(to right, #39a3ff55, #3977e500);
-@vent-configurable-home-bg-img: linear-gradient(to top, #39a3ff55, #0091ff55);
+@vent-configurable-home-bg-img: linear-gradient(to top, #39a3ff00, #0091ff99);
 @vent-configurable-home-light-border: #3df6ff;

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

@@ -21,7 +21,7 @@
       { valueA: 3, valueB: 1, x: 4 },
       { valueA: 1, valueB: 1, x: 4 },
     ]"
-    height="250px"
+    height="220px"
   />
   <!-- <div class="flex justify-around mt-10px">
     <MiniBoard v-for="item in configs" :key="item.prop" :label="item.label" :value="selectedDevice[item.prop]" />

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

@@ -95,7 +95,7 @@
   @import '@/design/vent/color.less';
 
   .timeline-item {
-    height: 60px;
+    height: 50px;
   }
   .timeline-item__icon_red {
     background-image: url('@/assets/images/home-container/warn-icon.png');

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

@@ -1,47 +1,83 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <template>
-  <div class="monitor-center">
+  <div class="monitor-center pt-10px pl-2px pr-2px pb-10px">
     <div class="flex">
-      <div class="w-50% text-center">
-        <span>总供风量</span>
-        <p class="monitor-center__primary_text">123123</p>
-
-        <Pie
-          :option="chartOption"
-          :chart-data="[
-            {
-              value: 70,
-              name: 'A',
-            },
-            {
-              value: 30,
-              name: 'B',
-            },
-          ]"
-          height="100px"
-        />
+      <div class="monitor-center__item_A">
+        <span>吨煤通风费用（元）</span>
+        <span class="color-green">32</span>
       </div>
-      <div class="w-50% text-center">
-        <span>总需风量</span>
-        <p class="monitor-center__primary_text">123123</p>
-
-        <Pie
-          :option="chartOption"
-          :chart-data="[
-            {
-              value: 70,
-              name: 'A',
-            },
-            {
-              value: 30,
-              name: 'B',
-            },
-          ]"
-          height="100px"
-        />
+      <div class="monitor-center__item_B flex flex-items-center">
+        <span>吨煤通风费用（元）</span>
+        <span class="color-yellow">32</span>
+      </div>
+    </div>
+    <div class="flex">
+      <div class="ml-7px text-center">
+        <span>总风量</span>
+        <div class="number_grid">
+          <span>1</span>
+          <span>2</span>
+          <span>.</span>
+          <span>3</span>
+          <span>4</span>
+        </div>
+      </div>
+      <div class="ml-7px text-center">
+        <span>吨煤通风</span>
+        <div class="number_grid">
+          <span>1</span>
+          <span>2</span>
+          <span>.</span>
+          <span>3</span>
+          <span>4</span>
+        </div>
+      </div>
+      <div class="ml-7px text-center">
+        <span>吨煤通风</span>
+        <div class="number_grid">
+          <span>1</span>
+          <span>2</span>
+          <span>.</span>
+          <span>3</span>
+          <span>4</span>
+        </div>
       </div>
     </div>
   </div>
+  <!-- <div class="justify-end monitor-center w-300px">
+    <div class="flex">
+      <Pie
+        class="w-50% text-center"
+        :option="chartOption"
+        :chart-data="[
+          {
+            value: 70,
+            name: 'A',
+          },
+          {
+            value: 30,
+            name: 'B',
+          },
+        ]"
+        height="100px"
+      />
+      <Pie
+        class="w-50% text-center"
+        :option="chartOption"
+        :chart-data="[
+          {
+            value: 70,
+            name: 'A',
+          },
+          {
+            value: 30,
+            name: 'B',
+          },
+        ]"
+        height="100px"
+      />
+    </div>
+  </div> -->
 </template>
 <script lang="ts" setup>
   import { onMounted, ref } from 'vue';
@@ -128,9 +164,36 @@
   }
 
   .monitor-center {
-    width: 200px;
     background-image: @vent-configurable-home-bg-img;
     border-top: 2px solid @vent-configurable-home-light-border;
     color: @white;
   }
+
+  .monitor-center__item_A {
+    width: 201px;
+    height: 36px;
+    background-image: url('@/assets/images/home-container/configurable/list_item_green.png');
+    padding-left: 45px;
+    line-height: 36px;
+  }
+  .monitor-center__item_B {
+    width: 201px;
+    height: 36px;
+    background-image: url('@/assets/images/home-container/configurable/list_item_yellow.png');
+    padding-left: 45px;
+    line-height: 36px;
+  }
+  .number_grid {
+    width: 125px;
+    height: 37px;
+    background-image: url('@/assets/images/home-container/configurable/number_grid.png');
+    line-height: 37px;
+    display: flex;
+    justify-content: flex-start;
+    padding: 0 2px 0 2px;
+
+    span {
+      flex-basis: 20%;
+    }
+  }
 </style>

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

@@ -20,7 +20,7 @@
         name: 'B',
       },
     ]"
-    height="170px"
+    height="140px"
   />
   <div class="flex justify-around mt-10px">
     <MiniBoard v-for="item in configs" :key="item.prop" :label="item.label" :value="selectedDevice[item.prop]" layout="label-top" type="D" />

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

@@ -25,9 +25,9 @@
       { valueA: 2, valueB: 1, x: 6 },
       { valueA: 1, valueB: 2, x: 7 },
     ]"
-    height="170px"
+    height="140px"
   />
-  <div class="flex justify-around mt-10px">
+  <div class="flex justify-around">
     <MiniBoard v-for="item in configs" :key="item.prop" :label="item.label" :value="selectedDevice[item.prop]" layout="label-top" type="B" />
   </div>
 </template>
@@ -94,7 +94,7 @@
     },
     grid: {
       top: 40,
-      height: '60%',
+      height: 70,
     },
     yAxis: {
       type: 'value',

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

@@ -12,27 +12,33 @@
         <MonitorCenter />
       </template>
     </a-dropdown>
-    <ModuleLeft class="module-left top-70px" title="局部通风机监测">
-      <SubVentilate />
-    </ModuleLeft>
-    <ModuleLeft class="module-left top-410px" title="主通风机监测">
-      <Ventilate />
-    </ModuleLeft>
-    <ModuleLeft class="module-left top-750px" title="通风设施远程控制">
-      <VentilateControl />
-    </ModuleLeft>
-    <ModuleBottom class="module-bottom left-460px" title="矿井风量实时监测">
-      <AirVolumeMonitor />
-    </ModuleBottom>
-    <ModuleRight class="module-right top-70px" title="通风系统监测与分析">
-      <VentilateAnalysis />
-    </ModuleRight>
-    <ModuleRight class="module-right top-410px" title="采煤工作面智能管控">
-      <WorkSurface />
-    </ModuleRight>
-    <ModuleRight class="module-right top-750px" title="设备告警">
-      <DeviceWarning />
-    </ModuleRight>
+    <div class="module-left-wrapper">
+      <ModuleLeft class="module-left" title="局部通风机监测">
+        <SubVentilate />
+      </ModuleLeft>
+      <ModuleLeft class="module-left" title="主通风机监测">
+        <Ventilate />
+      </ModuleLeft>
+      <ModuleLeft class="module-left" title="通风设施远程控制">
+        <VentilateControl />
+      </ModuleLeft>
+    </div>
+    <div class="module-bottom-wrapper">
+      <ModuleBottom class="module-bottom" title="矿井风量实时监测">
+        <AirVolumeMonitor />
+      </ModuleBottom>
+    </div>
+    <div class="module-right-wrapper">
+      <ModuleRight class="module-right" title="通风系统监测与分析">
+        <VentilateAnalysis />
+      </ModuleRight>
+      <ModuleRight class="module-right" title="采煤工作面智能管控">
+        <WorkSurface />
+      </ModuleRight>
+      <ModuleRight class="module-right" title="设备告警">
+        <DeviceWarning />
+      </ModuleRight>
+    </div>
   </div>
 </template>
 <script lang="ts" setup>
@@ -82,23 +88,38 @@
       }
     }
 
-    .module-left {
+    .module-left-wrapper {
       position: absolute;
-      width: 450px;
-      height: 320px;
+      top: 50px;
       left: 0;
+
+      .module-left {
+        width: 450px;
+        height: 280px;
+        margin-top: 10px;
+      }
     }
-    .module-right {
+    .module-right-wrapper {
       position: absolute;
-      width: 450px;
-      height: 320px;
+      top: 50px;
       right: 0;
+
+      .module-right {
+        width: 450px;
+        height: 280px;
+        margin-top: 10px;
+      }
     }
-    .module-bottom {
+
+    .module-bottom-wrapper {
       position: absolute;
-      width: 1000px;
-      height: 320px;
       bottom: 10px;
+      left: 460px;
+
+      .module-bottom {
+        width: 1000px;
+        height: 280px;
+      }
     }
     .module-dropdown {
       padding: 10px;