[Wip 0000] 瓦斯首页-抽采泵站监测页面开发

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

@@ -5,17 +5,47 @@
         <template #title>
           <div>抽采泵信息</div>
         </template>
-        <template #container> </template>
+        <template #container>
+          <div class="pump__tabs w-100% flex text-center">
+            <div
+              v-for="tab in tabs"
+              :key="tab.id"
+              class="flex-1 cursor-pointer pt-5px pb-5px"
+              :class="{ pump__tabs_pane_actived: activedTab === tab.id }"
+              @click="activedTab = tab.id"
+            >
+              {{ tab.name }}
+            </div>
+          </div>
+          <ListItem class="w-100% mb-5px" :value="activedPump.name" label="电压" />
+          <ListItem class="w-100% mb-5px" :value="activedPump.name" label="电流" />
+          <ListItem class="w-100% mb-5px" :value="activedPump.name" label="电机前轴温度" />
+          <ListItem class="w-100% mb-5px" :value="activedPump.name" label="电机后轴温度" />
+          <ListItem class="w-100% mb-5px" :value="activedPump.name" label="泵前轴温度" />
+          <ListItem class="w-100% mb-5px" :value="activedPump.name" label="泵后轴温度" />
+          <ListItem class="w-100% mb-5px" :value="activedPump.name" label="垂直振幅" />
+          <ListItem class="w-100% mb-5px" :value="activedPump.name" label="水平振幅" />
+          <ListItem class="w-100%" :value="activedPump.name" label="运行时间" />
+        </template>
       </ventBox1>
       <ventBox1 class="vent-margin-t-10">
         <template #title>
           <div>泵站环境</div>
         </template>
-        <template #container> </template>
+        <template #container>
+          <ListItem class="w-100% mb-5px" :value="activedPump.name" label="高位水池液位" />
+          <ListItem class="w-100% mb-5px" :value="activedPump.name" label="高位水池液温" />
+          <ListItem class="w-100% mb-5px" :value="activedPump.name" label="低位水池液位" />
+          <ListItem class="w-100% mb-5px" :value="activedPump.name" label="低位水池液温" />
+          <ListItem class="w-100% mb-5px" :value="activedPump.name" label="环境甲烷浓度" />
+          <ListItem class="w-100% mb-5px" :value="activedPump.name" label="泵站室内温度" />
+        </template>
       </ventBox1>
     </div>
     <div class="lr right-box">
       <div class="item-box sensor-container">
+        <CustomBoard label="累积抽采量" :value="cumulativeExtraction" />
+        <CustomBoard label="累积抽采时间" :value="cumulativeExtractionTime" />
         <ventBox1>
           <template #title>
             <div>自动模式</div>
@@ -28,8 +58,13 @@
 </template>
 
 <script setup lang="ts" name="gas-pump-monitor">
-  import { ref, onMounted, defineProps } from 'vue';
+  import { ref, onMounted, defineProps, computed } from 'vue';
   import ventBox1 from '/@/components/vent/ventBox1.vue';
+  import { Tabs, TabPane } from 'ant-design-vue';
+  import ListItem from './listItem.vue';
+  import CustomBoard from './customBoard.vue';
+  import { string } from 'vue-types';
+  import { PumpCtrlItems } from '../../../monitorManager/gasPumpMonitor/gasPump.data';
 
   const props = defineProps({
     deviceId: {
@@ -38,10 +73,58 @@
     },
   });
 
-  onMounted(async () => {});
+  // 抽放泵相关
+  const pumps = ref<any[]>([]);
+
+  function fetchPumps() {
+    const fakePPS = [
+      { name: 't1', id: 1 },
+      { name: 't2', id: 2 },
+      { name: 't3', id: 3 },
+      { name: 't4', id: 4 },
+    ];
+    pumps.value = fakePPS;
+    activedTab.value = fakePPS[0].id;
+  }
+
+  // 抽放泵模块的Tab相关
+  const tabs = computed(() => {
+    return pumps.value;
+  });
+  const activedTab = ref(0);
+
+  // 已选中的具体的抽放泵
+  const activedPump = computed(() => {
+    return pumps.value.find((e) => e.id === activedTab.value) || {};
+  });
+
+  // 告示板相关字段
+  // 累积抽采量
+  const cumulativeExtraction = ref(121345);
+  // 累积抽采时间
+  const cumulativeExtractionTime = ref(345121);
+
+  onMounted(async () => {
+    fetchPumps();
+  });
 </script>
 
 <style lang="less" scoped>
   @import '@/views/vent/monitorManager/comment/less/workFace.less';
   @ventSpace: zxm;
+  @tab-bg: darkcyan;
+  @tab-pane-bg: blue;
+  @tab-pane-border: lightblue;
+
+  .pump__tabs {
+    font-weight: bold;
+    background-color: @tab-bg;
+    border-radius: 5px 5px 0 0;
+  }
+
+  .pump__tabs_pane_actived {
+    background-color: @tab-pane-bg;
+    border-radius: 5px 5px 0 0;
+    border-bottom: 4px solid @tab-pane-border;
+  }
 </style>