[Wip 2590] 瓦斯抽采泵模块开发

src/views/vent/gas/components/board/categoryBoard.vue

@@ -0,0 +1,80 @@
+<template>
+  <div class="board">
+    <div class="h-50% flex justify-between items-center pl-30px pr-30px">
+      <div class="board__image_top"></div>
+      <div v-for="(item, i) in categoryTop" :key="`vent-gas-category-board-${i}`" class="text-left">
+        <div class="board__category_content">{{ item.value }}</div>
+        <span class="board__category_title">{{ item.label }}</span>
+      </div>
+    </div>
+    <div class="h-50% flex justify-between items-center pl-30px pr-30px">
+      <div class="board__image_buttom"></div>
+      <div v-for="(item, i) in categoryButtom" :key="`vent-gas-category-board-${i}`" class="text-left">
+        <div class="board__category_content">{{ item.value }}</div>
+        <span class="board__category_title">{{ item.label }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  // @TODO 对组件的颜色、背景等样式进行修改，符合全局规范
+
+  withDefaults(
+    defineProps<{
+      /** categoryTop（即右侧）内容，长度需固定为，可用slot */
+      categoryTop?: { label: string; value: string }[];
+      /** categoryButtom（即右侧）内容，长度需固定为，可用slot */
+      categoryButtom?: { label: string; value: string }[];
+    }>(),
+    {
+      prefixImageTop: '',
+      prefixImageButtom: '',
+      categoryTop: () => [],
+      categoryButtom: () => [],
+    }
+  );
+</script>
+
+<style lang="less" scoped>
+  @import '@/design/vent/color.less';
+
+  .board {
+    background-image: url('@/assets/images/vent/gas/category-board-bg.png');
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: auto 100%;
+    padding: 30px;
+    width: 1048px;
+    height: 231px;
+    text-align: center;
+    color: @white;
+  }
+
+  .board__image_top {
+    background-image: url('@/assets/images/vent/gas/category-board-img2.png');
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: auto 100%;
+    flex-basis: 82px;
+    width: 82px;
+    height: 56px;
+  }
+  .board__image_buttom {
+    background-image: url('@/assets/images/vent/gas/category-board-img1.png');
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: auto 100%;
+    flex-basis: 82px;
+    width: 82px;
+    height: 56px;
+  }
+  .board__category_content {
+    font-size: 24px;
+    color: @vent-gas-primary-text;
+    font-weight: bold;
+  }
+  .board__category_title {
+    color: @white;
+  }
+</style>

src/views/vent/gas/gasPumpMonitor/components/monitor.vue

@@ -21,10 +21,9 @@
         </template>
       </ventBox1>
     </div>
+    <CategoryBoard v-bind="pumpCategoryProp" />
     <div class="lr right-box">
       <div class="item-box sensor-container">
-        <!-- <CustomBoard label="累积抽采量" :value="cumulativeExtraction" /> -->
-        <!-- <CustomBoard label="累积抽采时间" :value="cumulativeExtractionTime" /> -->
         <ventBox1>
           <template #title>
             <div>自动模式</div>
@@ -51,7 +50,7 @@
   import List from '@/views/vent/gas/components/list/index.vue';
   import BaseTab from '@/views/vent/gas/components/tab/baseTab.vue';
   import Button from '@/views/vent/gas/components/form/button.vue';
-  import CustomBoard from '@/views/vent/gas/components/board/baseBoard.vue';
+  import CategoryBoard from '@/views/vent/gas/components/board/categoryBoard.vue';
   import {
     pumpListConfig,
     pumpStationListConfig,
@@ -60,6 +59,8 @@
     HPumpStationListItems,
     LPumpStationListItems,
     statusConfig,
+    HPumpCategoryConfig,
+    LPumpCategoryConfig,
   } from '../gasPumpMonitor.data';
 
   const props = defineProps({
@@ -80,7 +81,7 @@
 
   const pump = ref({});
   // 将列表配置项转换为列表可用的prop
-  function mapListConfigToProp(config) {
+  function transConfigToProp(config) {
     return config.map((c) => {
       return {
         ...c,
@@ -93,44 +94,46 @@
   // 各个模块的配置项
   const pumpListProp = computed(() => {
     return {
-      items: mapListConfigToProp(pumpListConfig),
+      items: transConfigToProp(pumpListConfig),
     };
   });
   const pumpStationListProp = computed(() => {
     return {
-      items: mapListConfigToProp(pumpStationListConfig),
+      items: transConfigToProp(pumpStationListConfig),
     };
   });
   const pumpStatusProp = computed(() => {
     return {
       status: statusConfig as any,
-      items: mapListConfigToProp(pumpStatusConfig),
+      items: transConfigToProp(pumpStatusConfig),
     };
   });
   const waterPumpStatusProp = computed(() => {
     return {
       status: statusConfig as any,
-      items: mapListConfigToProp(waterPumpStatusConfig),
+      items: transConfigToProp(waterPumpStatusConfig),
     };
   });
   const HPumpStatusProp = computed(() => {
     return {
       status: statusConfig as any,
-      items: mapListConfigToProp(HPumpStationListItems),
+      items: transConfigToProp(HPumpStationListItems),
     };
   });
   const LPumpStatusProp = computed(() => {
     return {
       status: statusConfig as any,
-      items: mapListConfigToProp(LPumpStationListItems),
+      items: transConfigToProp(LPumpStationListItems),
     };
   });
 
   // 告示板相关字段
-  // 累积抽采量
-  const cumulativeExtraction = ref(121345);
-  // 累积抽采时间
-  const cumulativeExtractionTime = ref(345121);
+  const pumpCategoryProp = computed(() => {
+    return {
+      categoryTop: transConfigToProp(HPumpCategoryConfig),
+      categoryButtom: transConfigToProp(LPumpCategoryConfig),
+    };
+  });
 
   onMounted(async () => {});
 </script>

src/views/vent/gas/gasPumpMonitor/gasPumpMonitor.data.ts

@@ -335,3 +335,20 @@ export const LPumpStationListItems = [
   { prop: 'activedPump', label: '3#进气阀' },
   { prop: 'activedPump', label: '4#进气阀' },
 ];
+
+/** 高负压泵监测类别配置项 */
+export const HPumpCategoryConfig = [
+  { prop: 'activedPump', label: '累积抽采率' },
+  { prop: 'activedPump', label: 'CO浓度' },
+  { prop: 'activedPump', label: '高负压浓度' },
+  { prop: 'activedPump', label: '瞬时流量' },
+  { prop: 'activedPump', label: '累计抽采时间' },
+];
+/** 低负压泵监测类别配置项 */
+export const LPumpCategoryConfig = [
+  { prop: 'activedPump', label: '累积抽采率' },
+  { prop: 'activedPump', label: 'CO浓度' },
+  { prop: 'activedPump', label: '低负压浓度' },
+  { prop: 'activedPump', label: '瞬时流量' },
+  { prop: 'activedPump', label: '累计抽采时间' },
+];