Merge branch 'master' of http://182.92.126.35:3000/hrx/mky-vent-base

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

@@ -0,0 +1,54 @@
+<template>
+  <div class="board">
+    <div class="board__label">
+      <slot name="label">
+        {{ label }}
+      </slot>
+    </div>
+    <div class="board__value">
+      <slot name="value">
+        <div class="board__value_txt">
+          {{ value }}
+        </div>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  // @TODO 对组件的颜色、背景等样式进行修改，符合全局规范
+
+  withDefaults(
+    defineProps<{
+      /** label（即上侧）内容，可用slot */
+      label?: string;
+      /** value（即下侧）内容，可用slot */
+      value?: string | number;
+    }>(),
+    {
+      label: '',
+      value: '',
+    }
+  );
+</script>
+
+<style lang="less" scoped>
+  @light-blue: aqua;
+
+  .board {
+    background-image: url('../../../../../assets/images/vent/custom-board.png');
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: 100% auto;
+    width: 100%;
+    padding: 30px;
+    text-align: center;
+    color: @white;
+  }
+
+  .board__value_txt {
+    font-size: 24px;
+    color: @light-blue;
+    font-style: italic;
+  }
+</style>

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

@@ -0,0 +1,117 @@
+<template>
+  <div class="list-item" :class="{ 'list-item__background': hasBackground }">
+    <div class="list-item__label">
+      <slot name="label">
+        {{ label }}
+      </slot>
+    </div>
+    <div class="list-item__value" :class="{ 'list-item__border': hasBorder }">
+      <slot name="value">
+        <div v-if="statusMode" :class="{ 'list-item__actived': matchedStatus.actived, 'list-item__deactived': !matchedStatus.actived }">
+          {{ matchedStatus.label }}
+        </div>
+        <div v-else-if="inputMode">
+          <Input :bordered="false" :value="value" @update:value="$emit('update:value', $event)" />
+        </div>
+        <div v-else class="text-right list-item__text_blue">
+          {{ value }}
+        </div>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  // @TODO 对组件的颜色、背景等样式进行修改，符合全局规范
+  import { Input } from 'ant-design-vue';
+  import { computed } from 'vue';
+
+  const props = withDefaults(
+    defineProps<{
+      /** value（即右侧）部分是否有边框 */
+      hasBorder?: boolean;
+      /** 是否有背景 */
+      hasBackground?: boolean;
+      /** label（即左侧）内容，可用slot */
+      label?: string;
+      /** value（即右侧）内容，可用slot */
+      value?: string;
+      /** 是否是状态灯模式，配合statusConfig使用 */
+      statusMode?: boolean;
+      /** 是否是输入框模式，不与状态灯模式兼容 */
+      inputMode?: boolean;
+      /** 状态灯配置，状态灯模式下，成功匹配的条目将按照配置显示 */
+      statusConfig?: { label: string; value: any; actived: boolean }[];
+    }>(),
+    {
+      hasBorder: false,
+      hasBackground: true,
+      label: '',
+      value: '',
+    }
+  );
+  defineEmits(['update:value']);
+
+  const defaultStatusConfig = {
+    value: undefined,
+    label: '未知',
+    actived: false,
+  };
+  const matchedStatus = computed(() => {
+    if (!props.statusConfig) return defaultStatusConfig;
+    return (
+      props.statusConfig.find((cfg) => {
+        return cfg.value === props.value;
+      }) || defaultStatusConfig
+    );
+  });
+</script>
+
+<style lang="less" scoped>
+  @light-blue: aqua;
+
+  .list-item {
+    height: 40px;
+    line-height: 40px;
+    padding: 0 10px;
+    display: flex;
+  }
+  .list-item__label {
+    flex-grow: 1;
+  }
+  .list-item__value {
+    flex-basis: 150px;
+    padding: 0 10px;
+  }
+
+  .list-item__background {
+    background-image: linear-gradient(to right, #0f73bbd8, #0f73bb62);
+  }
+
+  .list-item__text_blue {
+    color: @light-blue;
+  }
+
+  .list-item__border {
+    border: 1px solid @light-blue;
+    border-radius: 5px;
+  }
+
+  .list-item__actived {
+    padding-left: 35px;
+    background-image: url('../../../../../assets/images/company/home/select-bg.png');
+    background-repeat: no-repeat;
+    background-position: left center;
+  }
+
+  .list-item__deactived {
+    padding-left: 35px;
+    background-image: url('../../../../../assets/images/company/home/unselect-bg.png');
+    background-repeat: no-repeat;
+    background-position: left center;
+  }
+
+  ::v-deep(.zxm-input) {
+    color: @white;
+  }
+</style>

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>