[Mod 0000] 修改瓦斯模块的组件样式及文件位置，封装部分新组件

src/design/vent/color.less

@@ -13,4 +13,15 @@
 @vent-table-hover: #0dc3ff22;
 @vent-table-no-hover: #00bfff10;
 @vent-form-item-boder: #3ad8ff77;
-@ventSpace: zxm;
+@ventSpace: zxm;
+// vent/gas 模块下重要文本的颜色
+@vent-gas-primary-text: #00c8d9;
+// vent/gas 模块下Tab相关的颜色
+@vent-gas-tab-bg: #10427a;
+@vent-gas-tab-bg-avtived: #166ab5;
+@vent-gas-tab-border: #2cb6ff;
+// vent/gas 各模块的基准背景色
+@vent-gas-primary-bg: #0091ff;
+@vent-gas-primary-trasparent-bg: #0091ff12;
+// vent/gas 模块下的客制ListItem组件背景色
+@vent-gas-list-item-bg-img: linear-gradient(to right, #39a3ff55, #3977e500);

src/views/vent/gas/gasPumpMonitor/components/customBoard.vue → src/views/vent/gas/components/board/baseBoard.vue

@@ -33,10 +33,10 @@
 </script>
 
 <style lang="less" scoped>
-  @light-blue: aqua;
+  @import '@/design/vent/color.less';
 
   .board {
-    background-image: url('../../../../../assets/images/vent/custom-board.png');
+    background-image: url('@/assets/images/vent/custom-board.png');
     background-repeat: no-repeat;
     background-position: center center;
     background-size: 100% auto;
@@ -48,7 +48,7 @@
 
   .board__value_txt {
     font-size: 24px;
-    color: @light-blue;
+    color: @vent-gas-primary-text;
     font-style: italic;
   }
 </style>

src/views/vent/gas/components/form/formTitle.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="form-title">
+    <span class="form-title__icon">
+      <slot name="icon">
+        <SvgIcon class="icon" size="18" :name="icon" />
+      </slot>
+    </span>
+    <span class="form-title__text ml-5px">
+      <slot name="title">
+        {{ title }}
+      </slot>
+    </span>
+  </div>
+</template>
+
+<script setup lang="ts">
+  // @TODO 对组件的颜色、背景等样式进行修改，符合全局规范
+  import { SvgIcon } from '/@/components/Icon';
+
+  withDefaults(
+    defineProps<{
+      /** 标题，可用 slot */
+      title?: string | number;
+      /** 标题前缀图标，用法参考 SvgIcon，可用 slot */
+      icon?: string;
+    }>(),
+    {
+      title: '',
+      icon: '',
+    }
+  );
+</script>
+
+<style lang="less" scoped>
+  .form-title {
+    background-image: url('@/assets/images/vent/home/form-title.png');
+    background-repeat: no-repeat;
+    background-position: left center;
+    background-size: auto 100%;
+    height: 40px;
+    line-height: 40px;
+    margin-bottom: 20px;
+  }
+
+  .form-title__text {
+    font-size: 18px;
+  }
+</style>

src/views/vent/gas/components/list/index.vue

@@ -0,0 +1,82 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <div class="list">
+    <slot v-if="title" name="list-title">
+      <ListTitle :title="title" :icon="icon" />
+    </slot>
+    <slot name="list-item">
+      <Row>
+        <Col v-for="(item, index) in items" :key="`vent-gas-list-item-${index}`" :span="item.span || defaultSpan">
+          <ListItem
+            class="mb-5px w-100%"
+            :backgrounded="item.backgrounded || backgrounded"
+            :bordered="item.bordered || bordered"
+            :type="item.type || type"
+            :label-width="item.labelWidth || labelWidth"
+            :status="item.status || status"
+            :label="item.label"
+            :value="item.value"
+          />
+        </Col>
+      </Row>
+    </slot>
+  </div>
+</template>
+
+<script setup lang="ts" name="gas-pump-monitor">
+  // 该组件主要用于常见布局、样式的整合，同时提供slot以供更灵活的使用
+  import { computed, defineProps } from 'vue';
+  import { Row, Col } from 'ant-design-vue';
+  import ListItem from './listItem.vue';
+  import ListTitle from './listTitle.vue';
+
+  const props = withDefaults(
+    defineProps<{
+      /** 布局 */
+      layout?: 'vertical' | 'double-columns';
+      /** 标题 */
+      title?: string | number;
+      /** 标题前缀图标，用法参考 SvgIcon */
+      icon?: string;
+      /** value（即右侧）部分是否有边框 */
+      bordered?: boolean;
+      /** 是否有背景 */
+      backgrounded?: boolean;
+      /** 条目类型 */
+      type?: 'input' | 'default' | 'status-light';
+      /** 输入框的固定宽度 */
+      labelWidth?: number | string;
+      /** 通用状态灯配置，第一项配置激活状态，第二项配置失活状态 */
+      status?: [{ label: string; value: any }, { label: string }];
+      items: {
+        /** value（即右侧）部分是否有边框 */
+        bordered?: boolean;
+        /** 是否有背景 */
+        backgrounded?: boolean;
+        /** label（即左侧）内容，可用slot */
+        label: string;
+        /** value（即右侧）内容，可用slot */
+        value: string;
+        /** 条目类型 */
+        type?: 'input' | 'default' | 'status-light';
+        /** 输入框的固定宽度 */
+        labelWidth?: number | string;
+        /** 状态灯配置，第一项配置激活状态，第二项配置失活状态 */
+        status?: [{ label: string; value: any }, { label: string }];
+        span?: number;
+      }[];
+    }>(),
+    {
+      layout: 'vertical',
+    }
+  );
+
+  const defaultSpan = computed(() => {
+    return {
+      vertical: 24,
+      'double-columns': 12,
+    }[props.layout];
+  });
+</script>
+
+<style lang="less" scoped></style>

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

@@ -1,19 +1,22 @@
 <template>
-  <div class="list-item" :class="{ 'list-item__background': hasBackground }">
-    <div class="list-item__label">
+  <div class="list-item" :class="{ 'list-item__background': backgrounded }">
+    <div class="list-item__label" :style="labelStyle">
       <slot name="label">
         {{ label }}
       </slot>
     </div>
-    <div class="list-item__value" :class="{ 'list-item__border': hasBorder }">
+    <div class="list-item__value" :class="{ 'list-item__border': bordered }">
       <slot name="value">
-        <div v-if="statusMode" :class="{ 'list-item__actived': matchedStatus.actived, 'list-item__deactived': !matchedStatus.actived }">
-          {{ matchedStatus.label }}
+        <!-- 状态灯 -->
+        <div v-if="type === 'status-light'" :class="statusLightConfig.class">
+          {{ statusLightConfig.label }}
         </div>
-        <div v-else-if="inputMode">
-          <Input :style="{ width: `${inputWidth}px` }" :bordered="false" :value="value" @update:value="$emit('update:value', $event)" />
+        <!-- 输入框 -->
+        <div v-if="type === 'input'">
+          <Input :bordered="false" :value="value" @update:value="$emit('update:value', $event)" />
         </div>
-        <div v-else class="text-right list-item__text_blue">
+        <!-- 默认 -->
+        <div v-if="type === 'default'" class="text-right list-item__text_blue">
           {{ value }}
         </div>
       </slot>
@@ -29,49 +32,51 @@
   const props = withDefaults(
     defineProps<{
       /** value（即右侧）部分是否有边框 */
-      hasBorder?: boolean;
+      bordered?: boolean;
       /** 是否有背景 */
-      hasBackground?: boolean;
+      backgrounded?: boolean;
       /** label（即左侧）内容，可用slot */
       label?: string;
       /** value（即右侧）内容，可用slot */
       value?: string;
-      /** 是否是状态灯模式，配合statusConfig使用 */
-      statusMode?: boolean;
-      /** 是否是输入框模式，不与状态灯模式兼容 */
-      inputMode?: boolean;
+      /** 条目类型 */
+      type?: 'input' | 'default' | 'status-light';
       /** 输入框的固定宽度 */
-      inputWidth?: number;
-      /** 状态灯配置，状态灯模式下，成功匹配的条目将按照配置显示 */
-      statusConfig?: { label: string; value: any; actived: boolean }[];
+      labelWidth?: number | string;
+      /** 状态灯配置，第一项配置激活状态，第二项配置失活状态 */
+      status?: [{ label: string; value: any }, { label: string }];
     }>(),
     {
-      hasBorder: false,
-      hasBackground: true,
+      bordered: false,
+      backgrounded: true,
+      type: 'default',
       label: '',
       value: '',
-      inputWidth: 100,
+      labelWidth: 100,
     }
   );
   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
-    );
+  // 状态灯相关的内容
+  const statusLightConfig = computed(() => {
+    if (!props.status) return { label: 'unknown', class: 'list-item__deactived' };
+    const actived = props.value === props.status[0].value;
+
+    return {
+      label: props.status[actived ? 0 : 1].label,
+      class: actived ? 'list-item__actived' : 'list-item__deactived',
+    };
+  });
+
+  const labelStyle = computed(() => {
+    const w = props.labelWidth;
+    const width = typeof w === 'string' ? w : `${w}px`;
+    return { width };
   });
 </script>
 
 <style lang="less" scoped>
-  @light-blue: #00c8d9;
+  @import '@/design/vent/color.less';
 
   .list-item {
     height: 36px;
@@ -81,23 +86,22 @@
     justify-content: space-between;
     color: @white;
   }
-  .list-item__label {
-    flex-grow: 1;
-  }
+  // .list-item__label {
+  // }
   .list-item__value {
-    padding: 0 10px;
+    flex-grow: 1;
   }
 
   .list-item__background {
-    background-image: linear-gradient(to right, #39a3ff55, #3977e500);
+    background-image: @vent-gas-list-item-bg-img;
   }
 
   .list-item__text_blue {
-    color: @light-blue;
+    color: @vent-gas-primary-text;
   }
 
   .list-item__border {
-    border: 1px solid @light-blue;
+    border: 1px solid @vent-gas-primary-text;
     border-radius: 5px;
   }
 
@@ -117,7 +121,7 @@
     background-size: 20px 20px;
   }
 
-  ::v-deep(.zxm-input) {
+  :v-deep(.zxm-input) {
     color: @white;
   }
 </style>

src/views/vent/gas/gasPumpMonitor/components/customTitle.vue → src/views/vent/gas/components/list/listTitle.vue

@@ -1,9 +1,11 @@
 <template>
-  <div class="custom-title">
-    <span class="custom-title__icon">
-      <slot name="icon"> </slot>
+  <div class="list-title">
+    <span class="list-title__icon">
+      <slot name="icon">
+        <SvgIcon class="icon" size="18" :name="icon" />
+      </slot>
     </span>
-    <span class="custom-title__title ml-5px">
+    <span class="list-title__title ml-5px">
       <slot name="title">
         {{ title }}
       </slot>
@@ -13,22 +15,24 @@
 
 <script setup lang="ts">
   // @TODO 对组件的颜色、背景等样式进行修改，符合全局规范
+  import { SvgIcon } from '/@/components/Icon';
 
   withDefaults(
     defineProps<{
-      /** 可用 slot */
+      /** 标题，可用 slot */
       title?: string | number;
+      /** 标题前缀图标，用法参考 SvgIcon，可用 slot */
+      icon?: string;
     }>(),
     {
       title: '',
+      icon: '',
     }
   );
 </script>
 
 <style lang="less" scoped>
-  @light-blue: aqua;
-
-  .custom-title {
+  .list-title {
     background-image: url('@/assets/images/vent/home/tab3.png');
     background-repeat: no-repeat;
     background-position: left bottom;

src/views/vent/gas/components/tab/baseTab.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="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="{ tabs_pane_actived: id === tab.id }"
+      @click="clickHandler(tab.id)"
+    >
+      <slot name="name">
+        {{ tab.name }}
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts" name="gas-pump-monitor">
+  import { defineProps } from 'vue';
+
+  defineProps<{
+    tabs: { name: string; id: string | number }[];
+    id: string | number;
+  }>();
+  const emit = defineEmits(['change', 'update:id']);
+
+  function clickHandler(id) {
+    emit('change', id);
+    emit('update:id', id);
+  }
+</script>
+
+<style lang="less" scoped>
+  @import '@/design/vent/color.less';
+
+  .tabs {
+    font-weight: bold;
+    background-color: @vent-gas-tab-bg;
+    border-radius: 5px 5px 0 0;
+  }
+
+  .tabs_pane_actived {
+    background-color: @vent-gas-tab-bg-avtived;
+    border-radius: 5px 5px 0 0;
+    border-bottom: 5px solid @vent-gas-tab-border;
+  }
+</style>

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

@@ -6,27 +6,8 @@
           <div>抽采泵信息</div>
         </template>
         <template #container>
-          <div class="pump__tabs w-100% flex text-center">
-            <!-- 抽采泵信息 Tab -->
-            <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="运行时间" />
+          <BaseTab :tabs="pumpSelection" v-model:id="activedPumpID" />
+          <List v-bind="pumpListProp" />
         </template>
       </ventBox1>
       <ventBox1 class="vent-margin-t-10">
@@ -34,12 +15,9 @@
           <div>泵站环境</div>
         </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%" :value="activedPump.name" label="泵站室内温度" />
+          <List v-bind="pumpStationListProp">
+            <template #title></template>
+          </List>
         </template>
       </ventBox1>
     </div>
@@ -52,52 +30,10 @@
             <div>自动模式</div>
           </template>
           <template #container>
-            <CustomTitle class="w-100%" title="抽放泵">
-              <template #icon>
-                <SvgIcon class="icon" size="18" name="pump" />
-              </template>
-            </CustomTitle>
-            <div class="flex flex-wrap">
-              <ListItem class="w-50% mb-5px" :value="activedPump.name" label="1#" status-mode :status-config="defaultStatusConfig" />
-              <ListItem class="w-50% mb-5px" :value="activedPump.name" label="2#" status-mode :status-config="defaultStatusConfig" />
-              <ListItem class="w-50% mb-5px" :value="activedPump.name" label="3#" status-mode :status-config="defaultStatusConfig" />
-              <ListItem class="w-50% mb-5px" :value="activedPump.name" label="4#" status-mode :status-config="defaultStatusConfig" />
-            </div>
-            <CustomTitle class="w-100%" title="水泵">
-              <template #icon>
-                <SvgIcon class="icon" size="18" name="water-pump" />
-              </template>
-            </CustomTitle>
-            <div class="flex flex-wrap">
-              <ListItem class="w-50% mb-5px" :value="activedPump.name" label="1#" status-mode :status-config="defaultStatusConfig" />
-              <ListItem class="w-50% mb-5px" :value="activedPump.name" label="2#" status-mode :status-config="defaultStatusConfig" />
-              <ListItem class="w-50% mb-5px" :value="activedPump.name" label="3#" status-mode :status-config="defaultStatusConfig" />
-              <ListItem class="w-50% mb-5px" :value="activedPump.name" label="4#" status-mode :status-config="defaultStatusConfig" />
-            </div>
-            <CustomTitle class="w-100%" title="高负压配气泵">
-              <template #icon>
-                <SvgIcon class="icon" size="18" name="gas-pump" />
-              </template>
-            </CustomTitle>
-            <div class="flex flex-wrap">
-              <ListItem class="w-100% mb-5px" :value="activedPump.name" label="开度" />
-              <ListItem class="w-50% mb-5px" :value="activedPump.name" label="1#进气阀" status-mode :status-config="defaultStatusConfig" />
-              <ListItem class="w-50% mb-5px" :value="activedPump.name" label="2#出气阀" status-mode :status-config="defaultStatusConfig" />
-              <ListItem class="w-50% mb-5px" :value="activedPump.name" label="3#进气阀" status-mode :status-config="defaultStatusConfig" />
-              <ListItem class="w-50% mb-5px" :value="activedPump.name" label="4#出气阀" status-mode :status-config="defaultStatusConfig" />
-            </div>
-            <CustomTitle class="w-100%" title="低负压配气泵">
-              <template #icon>
-                <SvgIcon class="icon" size="18" name="gas-pump" />
-              </template>
-            </CustomTitle>
-            <div class="flex flex-wrap">
-              <ListItem class="w-100% mb-5px" :value="activedPump.name" label="开度" />
-              <ListItem class="w-50% mb-5px" :value="activedPump.name" label="1#进气阀" status-mode :status-config="defaultStatusConfig" />
-              <ListItem class="w-50% mb-5px" :value="activedPump.name" label="2#出气阀" status-mode :status-config="defaultStatusConfig" />
-              <ListItem class="w-50% mb-5px" :value="activedPump.name" label="3#进气阀" status-mode :status-config="defaultStatusConfig" />
-              <ListItem class="w-50% mb-5px" :value="activedPump.name" label="4#出气阀" status-mode :status-config="defaultStatusConfig" />
-            </div>
+            <List icon="pump" title="抽放泵" layout="double-columns" type="status-light" :label-width="80" v-bind="pumpStatusProp" />
+            <List icon="water-pump" title="水泵" layout="double-columns" type="status-light" :label-width="80" v-bind="waterPumpStatusProp" />
+            <List icon="gas-pump" title="高负压配气泵" layout="double-columns" type="status-light" :label-width="80" v-bind="HPumpStatusProp" />
+            <List icon="gas-pump" title="低负压配气泵" layout="double-columns" type="status-light" :label-width="80" v-bind="LPumpStatusProp" />
           </template>
         </ventBox1>
       </div>
@@ -108,10 +44,18 @@
 <script setup lang="ts" name="gas-pump-monitor">
   import { ref, onMounted, defineProps, computed } from 'vue';
   import ventBox1 from '/@/components/vent/ventBox1.vue';
-  import ListItem from './listItem.vue';
-  import CustomBoard from './customBoard.vue';
-  import CustomTitle from './customTitle.vue';
-  import { SvgIcon } from '/@/components/Icon';
+  import List from '@/views/vent/gas/components/list/index.vue';
+  import BaseTab from '@/views/vent/gas/components/tab/baseTab.vue';
+  import CustomBoard from '@/views/vent/gas/components/board/baseBoard.vue';
+  import {
+    pumpListConfig,
+    pumpStationListConfig,
+    pumpStatusConfig,
+    waterPumpStatusConfig,
+    HPumpStationListItems,
+    LPumpStationListItems,
+    statusConfig,
+  } from '../gasPumpMonitor.data';
 
   const props = defineProps({
     deviceId: {
@@ -120,29 +64,61 @@
     },
   });
 
-  // 抽放泵相关
-  const pumps = ref<any[]>([]);
+  // 抽放泵模块的Tab相关
+  const pumpSelection = ref([
+    { name: 't1', id: 1 },
+    { name: 't2', id: 2 },
+    { name: 't3', id: 3 },
+    { name: 't4', id: 4 },
+  ]);
+  const activedPumpID = ref(1);
 
-  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;
+  const pump = ref({});
+  // 将列表配置项转换为列表可用的prop
+  function mapListConfigToProp(config) {
+    return config.map((c) => {
+      return {
+        ...c,
+        value: c.label,
+        label: c.label,
+      };
+    });
   }
 
-  // 抽放泵模块的Tab相关
-  const tabs = computed(() => {
-    return pumps.value;
+  // 各个模块的配置项
+  const pumpListProp = computed(() => {
+    return {
+      items: mapListConfigToProp(pumpListConfig),
+    };
   });
-  const activedTab = ref(0);
-
-  // 已选中的具体的抽放泵
-  const activedPump = computed(() => {
-    return pumps.value.find((e) => e.id === activedTab.value) || {};
+  const pumpStationListProp = computed(() => {
+    return {
+      items: mapListConfigToProp(pumpStationListConfig),
+    };
+  });
+  const pumpStatusProp = computed(() => {
+    return {
+      status: statusConfig as any,
+      items: mapListConfigToProp(pumpStatusConfig),
+    };
+  });
+  const waterPumpStatusProp = computed(() => {
+    return {
+      status: statusConfig as any,
+      items: mapListConfigToProp(waterPumpStatusConfig),
+    };
+  });
+  const HPumpStatusProp = computed(() => {
+    return {
+      status: statusConfig as any,
+      items: mapListConfigToProp(HPumpStationListItems),
+    };
+  });
+  const LPumpStatusProp = computed(() => {
+    return {
+      status: statusConfig as any,
+      items: mapListConfigToProp(LPumpStationListItems),
+    };
   });
 
   // 告示板相关字段
@@ -151,15 +127,7 @@
   // 累积抽采时间
   const cumulativeExtractionTime = ref(345121);
 
-  // 自动模式模块的状态信息配置
-  const defaultStatusConfig = [
-    { value: true, label: '开启', actived: true },
-    { value: false, label: '关闭', actived: false },
-  ];
-
-  onMounted(async () => {
-    fetchPumps();
-  });
+  onMounted(async () => {});
 </script>
 
 <style lang="less" scoped>

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

@@ -1,32 +1,23 @@
 <template>
   <div class="custom-form">
     <div class="custom-form__wrapper">
-      <div class="custom-form__header">
-        <SvgIcon class="icon" size="25" name="gas-pump" />
-        <span class="custom-form__header_title">工作面参数</span>
-      </div>
+      <FormTitle icon="gas-pump" title="工作面参数" />
       <BasicForm :schemas="workSurfaceFormSchema" @register="regWSForm" @submit="submitHandler">
         <template #input="{ model, field, schema }">
-          <ListItem class="w-100%" v-model:value="model[field]" input-mode :label="schema.label" has-border />
+          <ListItem class="w-100%" v-model:value="model[field]" type="input" :label="schema.label" bordered />
         </template>
       </BasicForm>
     </div>
     <div class="custom-form__wrapper">
-      <div class="custom-form__header">
-        <SvgIcon class="icon" size="25" name="pump" />
-        <span class="custom-form__header_title">抽采单元参数</span>
-      </div>
+      <FormTitle icon="pump" title="抽采单元参数" />
       <BasicForm :schemas="extractionUnitFormSchema" @register="regEUForm" @submit="submitHandler">
         <template #input="{ model, field, schema }">
-          <ListItem class="w-100%" v-model:value="model[field]" input-mode :label="schema.label" has-border />
+          <ListItem class="w-100%" v-model:value="model[field]" type="input" :label="schema.label" bordered />
         </template>
       </BasicForm>
     </div>
     <div class="custom-form__wrapper">
-      <div class="custom-form__header">
-        <SvgIcon class="icon" size="25" name="water-pump" />
-        <span class="custom-form__header_title">计算参数</span>
-      </div>
+      <FormTitle icon="water-pump" title="计算参数" />
       <BasicForm :schemas="calculationFormSchema" @register="regCCForm" @submit="submitHandler">
         <template #radio="{ model, field, schema }">
           <ListItem class="w-100%">
@@ -37,7 +28,7 @@
           </ListItem>
         </template>
         <template #input="{ model, field, schema }">
-          <ListItem class="w-100%" v-model:value="model[field]" input-mode :label="schema.label" has-border />
+          <ListItem class="w-100%" v-model:value="model[field]" type="input" :label="schema.label" bordered />
         </template>
       </BasicForm>
     </div>
@@ -51,8 +42,8 @@
 
 <script lang="ts" setup>
   import { Switch, Button } from 'ant-design-vue';
-  import ListItem from './listItem.vue';
-  import { SvgIcon } from '/@/components/Icon';
+  import ListItem from '@/views/vent/gas/components/list/listItem.vue';
+  import FormTitle from '@/views/vent/gas/components/form/formTitle.vue';
   import { useForm, BasicForm } from '/@/components/Form';
   import { workSurfaceFormSchema, extractionUnitFormSchema, calculationFormSchema } from '../gasPumpMonitor.data';
   import { ref } from 'vue';
@@ -94,33 +85,19 @@
 </script>
 
 <style lang="less" scoped>
-  @light-blue: #00c8d9;
+  @import '@/design/vent/color.less';
 
   .custom-form__wrapper {
     color: #fff;
-    border-top: 3px solid @light-blue;
+    border-top: 3px solid @vent-gas-primary-text;
     background-color: #0091ff12;
     padding: 20px 20px 0 20px;
     margin-bottom: 20px;
   }
-  .custom-form__header {
-    background-image: url('@/assets/images/vent/home/form-title.png');
-    background-repeat: no-repeat;
-    background-position: left center;
-    background-size: auto 100%;
-    height: 40px;
-    line-height: 40px;
-    margin-bottom: 20px;
-  }
-
-  .custom-form__header_title {
-    margin-left: 5px;
-    font-size: 18px;
-  }
 
   .custom-form__button {
-    color: @light-blue;
-    border-color: @light-blue;
+    color: @vent-gas-primary-text;
+    border-color: @vent-gas-primary-text;
     background-color: transparent !important;
   }
 </style>

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

@@ -276,3 +276,62 @@ export const extractionUnitFormSchema: FormSchema[] = [
     slot: 'input',
   },
 ];
+
+export const statusConfig = [{ value: true, label: '开启' }, { label: '关闭' }];
+
+/** 抽放泵列表配置项 */
+export const pumpListConfig = [
+  { prop: 'activedPump', label: '电压' },
+  { prop: 'activedPump', label: '电流' },
+  { prop: 'activedPump', label: '电机前轴温度' },
+  { prop: 'activedPump', label: '电机后轴温度' },
+  { prop: 'activedPump', label: '泵前轴温度' },
+  { prop: 'activedPump', label: '泵后轴温度' },
+  { prop: 'activedPump', label: '垂直振幅' },
+  { prop: 'activedPump', label: '水平振幅' },
+  { prop: 'activedPump', label: '运行时间' },
+];
+
+/** 泵站列表配置项 */
+export const pumpStationListConfig = [
+  { prop: 'activedPump', label: '高位水池液位' },
+  { prop: 'activedPump', label: '高位水池液温' },
+  { prop: 'activedPump', label: '低位水池液位' },
+  { prop: 'activedPump', label: '低位水池液温' },
+  { prop: 'activedPump', label: '环境甲烷浓度' },
+  { prop: 'activedPump', label: '泵站室内温度' },
+];
+
+/** 抽采泵状态列表配置项 */
+export const pumpStatusConfig = [
+  { prop: 'activedPump', label: '1#' },
+  { prop: 'activedPump', label: '2#' },
+  { prop: 'activedPump', label: '3#' },
+  { prop: 'activedPump', label: '4#' },
+];
+
+/** 水泵状态列表配置项 */
+export const waterPumpStatusConfig = [
+  { prop: 'activedPump', label: '1#' },
+  { prop: 'activedPump', label: '2#' },
+  { prop: 'activedPump', label: '3#' },
+  { prop: 'activedPump', label: '4#' },
+];
+
+/** 高负压泵状态列表配置项 */
+export const HPumpStationListItems = [
+  { prop: 'activedPump', label: '开度', span: 24, type: 'default' },
+  { prop: 'activedPump', label: '1#进气阀' },
+  { prop: 'activedPump', label: '2#进气阀' },
+  { prop: 'activedPump', label: '3#进气阀' },
+  { prop: 'activedPump', label: '4#进气阀' },
+];
+
+/** 低负压泵状态列表配置项 */
+export const LPumpStationListItems = [
+  { prop: 'activedPump', label: '开度', span: 24, type: 'default' },
+  { prop: 'activedPump', label: '1#进气阀' },
+  { prop: 'activedPump', label: '2#进气阀' },
+  { prop: 'activedPump', label: '3#进气阀' },
+  { prop: 'activedPump', label: '4#进气阀' },
+];