[Wip 2590] 瓦斯抽采管控系统页面、抽采泵站监测页面、评判参数页面开发

src/assets/icons/gas-pump.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="12.537" height="12.534" viewBox="0 0 12.537 12.534">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#3df6ff"/>
+      <stop offset="1" stop-color="#b3fff5"/>
+    </linearGradient>
+  </defs>
+  <g id="组_14891" data-name="组 14891" transform="translate(0 -0.341)">
+    <path id="路径_56065" data-name="路径 56065" d="M12.535,766.98v1.794H0V766.98a1.307,1.307,0,0,1,1.233-1.369H4.656a1.671,1.671,0,0,0,2.182,1.158,1.816,1.816,0,0,0,1.044-1.158H11.3a1.307,1.307,0,0,1,1.231,1.369Z" transform="translate(0 -755.9)" fill="url(#linear-gradient)"/>
+    <path id="路径_56066" data-name="路径 56066" d="M98,5.992a1.547,1.547,0,1,1-3.069,0,.45.45,0,0,1,.418-.477.44.44,0,0,1,.418.418V6a.748.748,0,0,0,.7.79.737.737,0,0,0,.693-.708V.815a.449.449,0,0,1,.418-.474.441.441,0,0,1,.418.41V5.993Zm4.184,0a1.544,1.544,0,1,0,3.062,0,.448.448,0,0,0-.423-.469.441.441,0,0,0-.409.406v.063a.749.749,0,0,1-.693.795.731.731,0,0,1-.7-.713V.815A.449.449,0,0,0,102.6.341a.442.442,0,0,0-.418.41V5.993ZM100.04,1.345a.439.439,0,0,1,.418.41V6.881a.449.449,0,0,1-.418.474.439.439,0,0,1-.418-.41V1.822a.449.449,0,0,1,.418-.477Z" transform="translate(-93.765)" fill="url(#linear-gradient)"/>
+  </g>
+</svg>

src/assets/icons/pump.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="12.736" height="14.569" viewBox="0 0 12.736 14.569">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#3df6ff"/>
+      <stop offset="1" stop-color="#b3fff5"/>
+    </linearGradient>
+  </defs>
+  <path id="路径_56062" data-name="路径 56062" d="M148.3,56a4.931,4.931,0,0,1-1.492,4.545l2.436,4.221h-11l2.248-3.9a4.935,4.935,0,1,1,6.931-6.882V51.553h-.793V51.2H149v.353h-.7Zm-.8.746a4.045,4.045,0,0,0-.17-1v0q-.02-.063-.041-.126l-.017-.049q-.021-.058-.043-.115l-.023-.057q-.023-.055-.047-.109l-.026-.058c-.016-.036-.033-.071-.051-.106l-.028-.055c-.018-.035-.037-.071-.056-.106l-.027-.047a4.071,4.071,0,0,0-.228-.355l-.029-.041-.068-.089-.043-.055-.068-.081-.05-.058-.069-.076-.055-.058-.071-.072-.06-.057-.072-.067-.066-.058-.071-.061q-.066-.055-.135-.106l-.067-.049-.082-.058-.072-.047-.083-.053-.074-.044-.086-.05q-.082-.046-.166-.087l-.073-.036-.1-.045-.068-.03-.131-.051-.042-.016q-.086-.032-.175-.059l-.058-.017-.123-.035-.071-.018-.114-.026-.075-.015-.113-.02q-.1-.016-.195-.027l-.074-.008-.13-.01-.064,0q-.1,0-.2,0a4.054,4.054,0,1,0,4.052,4.053c0-.06,0-.12,0-.18Zm-4.048,1.943a1.763,1.763,0,1,1,1.762-1.763,1.763,1.763,0,0,1-1.762,1.763Z" transform="translate(-137.374 -50.7)" stroke="rgba(0,0,0,0)" stroke-width="1" fill="url(#linear-gradient)"/>
+</svg>

src/assets/icons/water-pump.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="14.822" height="10.78" viewBox="0 0 14.822 10.78">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#3df6ff"/>
+      <stop offset="1" stop-color="#b3fff5"/>
+    </linearGradient>
+  </defs>
+  <g id="组_14889" data-name="组 14889" transform="translate(-42.667 -170.667)">
+    <path id="路径_56063" data-name="路径 56063" d="M56.983,170.667a.518.518,0,0,0-.505.505v.168h-6.4a4.73,4.73,0,0,0-4.716,4.716,4.669,4.669,0,0,0,.3,1.684H43.677v-.168a.505.505,0,0,0-1.011,0v3.369a.505.505,0,0,0,1.011,0v-.168h6.4a4.73,4.73,0,0,0,4.716-4.716,4.669,4.669,0,0,0-.3-1.684h1.987v.168a.505.505,0,0,0,1.011,0v-3.369A.518.518,0,0,0,56.983,170.667Zm-6.906,8.085a2.695,2.695,0,1,1,2.695-2.695A2.7,2.7,0,0,1,50.078,178.751Z" fill="url(#linear-gradient)"/>
+    <path id="路径_56064" data-name="路径 56064" d="M448.876,409.143a9.659,9.659,0,0,0-.876,2.223,1.011,1.011,0,1,0,2.021,0,9.662,9.662,0,0,0-.876-2.223A.158.158,0,0,0,448.876,409.143Z" transform="translate(-398.933 -234.636)" fill="url(#linear-gradient)"/>
+  </g>
+</svg>

src/components/vent/customHeader.vue

@@ -113,22 +113,24 @@
       }
     }
     .container-title {
-      width: 398px;
+      width: 380px;
       height: 34px;
       top: 60px;
-      background: url('/@/assets/images/vent/new-home/container-title-bg.png') no-repeat;
+      // background: url('/@/assets/images/vent/new-home/container-title-bg.png') no-repeat;
+      background: url('/@/assets/images/vent/home/select-bg.png') no-repeat;
       background-size: contain;
-      padding: 0 0 0 180px;
+      padding: 0 0 0 40px;
+      // padding: 0 0 0 180px;
       font-size: 20px;
       pointer-events: auto;
       position: relative;
       z-index: 9999;
       .title-select {
-        width: 228px;
+        width: 340px;
         position: absolute;
 
         top: 0;
-        left: 160px;
+        // left: 160px;
       }
     }
   }

src/views/vent/gas/gasHome/components/customHeader.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="custom-header flex justify-around">
+    <div
+      v-for="(item, i) in items"
+      :key="`gashome-comp-custom-header-${i}`"
+      class="custom-header__badge"
+      :style="{ backgroundImage: `url(${item.bgSrc})` }"
+    >
+      <div class="custom-header__badge_title"> {{ badges[i].title }}</div>
+      <div class="custom-header__badge_desc"> {{ badges[i].desc }}</div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import Badge01Src from '@/assets/images/vent/home/badge01.png';
+  import Badge02Src from '@/assets/images/vent/home/badge02.png';
+  import Badge03Src from '@/assets/images/vent/home/badge03.png';
+  import Badge04Src from '@/assets/images/vent/home/badge04.png';
+  import Badge05Src from '@/assets/images/vent/home/badge05.png';
+  import Badge06Src from '@/assets/images/vent/home/badge06.png';
+
+  // @TODO 对组件的颜色、背景等样式进行修改，符合全局规范
+
+  defineProps<{
+    /** 描述 Header 中各个徽章的数组，要求6条 */
+    badges: { desc: string; title: string }[];
+  }>();
+
+  const items = [
+    {
+      bgSrc: Badge06Src,
+      color: '#d9e6ec',
+    },
+    {
+      bgSrc: Badge02Src,
+      color: '#aacacd',
+    },
+    {
+      bgSrc: Badge03Src,
+      color: '#9ea890',
+    },
+    {
+      bgSrc: Badge05Src,
+      color: '#d7deea',
+    },
+    {
+      bgSrc: Badge01Src,
+      color: '#dbe0d7',
+    },
+    {
+      bgSrc: Badge04Src,
+      color: '#d8d5e4',
+    },
+  ];
+</script>
+
+<style lang="less" scoped>
+  @light-blue: aqua;
+
+  .custom-header {
+    background-image: url('@/assets/images/vent/home/badge-bg.png');
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: 100% auto;
+    height: 140px;
+    padding: 35px 0;
+    color: @white;
+  }
+
+  .custom-header__badge {
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: 100% auto;
+    width: 185px;
+    height: 70px;
+    padding-left: 80px;
+  }
+
+  .custom-header__badge_title {
+    font-size: 20px;
+  }
+  .custom-header__badge_desc {
+    font-size: 12px;
+  }
+</style>

src/views/vent/gas/gasHome/components/gasMonitor.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="monitor-container" style="margin-top: 20px">
+    <div class="lr left-box" style="margin-top: 0">
+      <ventBox1>
+        <template #title>
+          <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% mb-5px" :value="activedPump.name" label="平均煤厚" />
+        </template>
+      </ventBox1>
+      <ventBox1 class="vent-margin-t-10">
+        <template #title>
+          <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="抽放泵运行数量" />
+        </template>
+      </ventBox1>
+    </div>
+    <div class="lr right-box" style="margin-top: 0">
+      <div class="item-box sensor-container">
+        <ventBox1>
+          <template #title>
+            <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% mb-5px" :value="activedPump.name" label="采空区位置" />
+          </template>
+        </ventBox1>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts" name="gas-pump-monitor">
+  import { ref, onMounted, defineProps } from 'vue';
+  import ventBox1 from '/@/components/vent/ventBox1.vue';
+  import ListItem from '@/views/vent/gas/gasPumpMonitor/components/listItem.vue';
+
+  const props = defineProps({
+    deviceId: {
+      type: String,
+      require: true,
+    },
+  });
+
+  // 抽放泵相关
+  const activedPump = ref<any>({});
+
+  function fetchPump() {
+    const fakePP = { name: 't4', id: 4 };
+    activedPump.value = fakePP;
+  }
+
+  onMounted(async () => {
+    fetchPump();
+  });
+</script>
+
+<style lang="less" scoped>
+  @import '@/views/vent/monitorManager/comment/less/workFace.less';
+  @ventSpace: zxm;
+</style>

src/views/vent/gas/gasHome/index.vue

@@ -1,22 +1,26 @@
 <template>
   <div class="scene-box">
-    <customHeader
+    <!-- <customHeader
       :fieldNames="{ label: 'systemname', value: 'id', options: 'children' }"
       :options="options"
       @change="getSelectRow"
       :optionValue="optionValue"
       >瓦斯抽采综合管控系统</customHeader
-    >
-    <div class="center-container"> </div>
+    > -->
+    <CustomHeader class="w-1710px ml-100px mt-20px" :badges="headerBadges" />
+    <template v-if="activeKey === 'gasHome'">
+      <GasMonitor :deviceId="optionValue" />
+    </template>
     <BottomMenu :navList="navList" @change="changeActive" />
   </div>
 </template>
 <script lang="ts" setup>
   import { ref, onMounted } from 'vue';
-  import customHeader from '/@/components/vent/customHeader.vue';
+  import CustomHeader from './components/customHeader.vue';
   import BottomMenu from '/@/views/vent/comment/components/bottomMenu.vue';
   import { useSystemSelect } from '/@/hooks/vent/useSystemSelect';
   import { navList } from './gasHome.data';
+  import GasMonitor from './components/gasMonitor.vue';
 
   const activeKey = ref('gasHome');
   const { options, optionValue, getSelectRow, getSysDataSource } = useSystemSelect('sys_surface_caimei'); // 参数为场景类型（设备类型管理中可以查询到）
@@ -25,6 +29,33 @@
     activeKey.value = activeValue;
   }
 
+  const headerBadges = ref([
+    {
+      title: 'T1',
+      desc: '累积瓦斯抽采量',
+    },
+    {
+      title: 'T2',
+      desc: '平均瓦斯抽采率',
+    },
+    {
+      title: 'T3',
+      desc: '抽采达标工作面数量',
+    },
+    {
+      title: 'T4',
+      desc: '抽采钻孔类型',
+    },
+    {
+      title: 'T5',
+      desc: '回采中工作面数量',
+    },
+    {
+      title: 'T6',
+      desc: '抽采钻孔总进尺',
+    },
+  ]);
+
   onMounted(async () => {
     await getSysDataSource();
   });

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

@@ -0,0 +1,40 @@
+<template>
+  <div class="custom-title">
+    <span class="custom-title__icon">
+      <slot name="icon"> </slot>
+    </span>
+    <span class="custom-title__title ml-5px">
+      <slot name="title">
+        {{ title }}
+      </slot>
+    </span>
+  </div>
+</template>
+
+<script setup lang="ts">
+  // @TODO 对组件的颜色、背景等样式进行修改，符合全局规范
+
+  withDefaults(
+    defineProps<{
+      /** 可用 slot */
+      title?: string | number;
+    }>(),
+    {
+      title: '',
+    }
+  );
+</script>
+
+<style lang="less" scoped>
+  @light-blue: aqua;
+
+  .custom-title {
+    background-image: url('@/assets/images/vent/home/tab3.png');
+    background-repeat: no-repeat;
+    background-position: left bottom;
+    background-size: 100% auto;
+    height: 30px;
+    width: 100%;
+    color: @white;
+  }
+</style>

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

@@ -11,7 +11,7 @@
           {{ matchedStatus.label }}
         </div>
         <div v-else-if="inputMode">
-          <Input :bordered="false" :value="value" @update:value="$emit('update:value', $event)" />
+          <Input :style="{ width: `${inputWidth}px` }" :bordered="false" :value="value" @update:value="$emit('update:value', $event)" />
         </div>
         <div v-else class="text-right list-item__text_blue">
           {{ value }}
@@ -40,6 +40,8 @@
       statusMode?: boolean;
       /** 是否是输入框模式，不与状态灯模式兼容 */
       inputMode?: boolean;
+      /** 输入框的固定宽度 */
+      inputWidth?: number;
       /** 状态灯配置，状态灯模式下，成功匹配的条目将按照配置显示 */
       statusConfig?: { label: string; value: any; actived: boolean }[];
     }>(),
@@ -48,6 +50,7 @@
       hasBackground: true,
       label: '',
       value: '',
+      inputWidth: 100,
     }
   );
   defineEmits(['update:value']);
@@ -68,24 +71,25 @@
 </script>
 
 <style lang="less" scoped>
-  @light-blue: aqua;
+  @light-blue: #00c8d9;
 
   .list-item {
     height: 40px;
     line-height: 40px;
     padding: 0 10px;
     display: flex;
+    justify-content: space-between;
+    color: @white;
   }
   .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);
+    background-image: linear-gradient(to right, #39a3ff55, #3977e500);
   }
 
   .list-item__text_blue {
@@ -98,17 +102,19 @@
   }
 
   .list-item__actived {
-    padding-left: 35px;
-    background-image: url('../../../../../assets/images/company/home/select-bg.png');
+    padding-left: 20px;
+    background-image: url('@/assets/images/company/home/select-bg.png');
     background-repeat: no-repeat;
     background-position: left center;
+    background-size: 20px 20px;
   }
 
   .list-item__deactived {
-    padding-left: 35px;
-    background-image: url('../../../../../assets/images/company/home/unselect-bg.png');
+    padding-left: 20px;
+    background-image: url('@/assets/images/company/home/unselect-bg.png');
     background-repeat: no-repeat;
     background-position: left center;
+    background-size: 20px 20px;
   }
 
   ::v-deep(.zxm-input) {

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

@@ -7,6 +7,7 @@
         </template>
         <template #container>
           <div class="pump__tabs w-100% flex text-center">
+            <!-- 抽采泵信息 Tab -->
             <div
               v-for="tab in tabs"
               :key="tab.id"
@@ -38,7 +39,7 @@
           <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>
     </div>
@@ -50,7 +51,54 @@
           <template #title>
             <div>自动模式</div>
           </template>
-          <template #container> </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>
+          </template>
         </ventBox1>
       </div>
     </div>
@@ -60,11 +108,10 @@
 <script setup lang="ts" name="gas-pump-monitor">
   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';
+  import CustomTitle from './customTitle.vue';
+  import { SvgIcon } from '/@/components/Icon';
 
   const props = defineProps({
     deviceId: {
@@ -104,6 +151,12 @@
   // 累积抽采时间
   const cumulativeExtractionTime = ref(345121);
 
+  // 自动模式模块的状态信息配置
+  const defaultStatusConfig = [
+    { value: true, label: '开启', actived: true },
+    { value: false, label: '关闭', actived: false },
+  ];
+
   onMounted(async () => {
     fetchPumps();
   });
@@ -112,9 +165,9 @@
 <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;
+  @tab-bg: #10427a;
+  @tab-pane-bg: #166ab5;
+  @tab-pane-border: #2cb6ff;
 
   .pump__tabs {
     font-weight: bold;
@@ -125,6 +178,6 @@
   .pump__tabs_pane_actived {
     background-color: @tab-pane-bg;
     border-radius: 5px 5px 0 0;
-    border-bottom: 4px solid @tab-pane-border;
+    border-bottom: 5px solid @tab-pane-border;
   }
 </style>

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

@@ -0,0 +1,126 @@
+<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>
+      <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 />
+        </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>
+      <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 />
+        </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>
+      <BasicForm :schemas="calculationFormSchema" @register="regCCForm" @submit="submitHandler">
+        <template #radio="{ model, field, schema }">
+          <ListItem class="w-100%">
+            <template #label>
+              <Switch v-model:checked="model[field]" size="small" />
+              <span class="ml-10px">{{ schema.label }}</span>
+            </template>
+          </ListItem>
+        </template>
+        <template #input="{ model, field, schema }">
+          <ListItem class="w-100%" v-model:value="model[field]" input-mode :label="schema.label" has-border />
+        </template>
+      </BasicForm>
+    </div>
+    <div class="text-right">
+      <Button class="mr-10px custom-form__button" type="primary" ghost @click="cancel">取消</Button>
+      <Button class="mr-10px custom-form__button" type="primary" ghost @click="save">保存</Button>
+      <Button class="mr-10px custom-form__button" type="primary" ghost @click="submit">提交</Button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { Switch, Button } from 'ant-design-vue';
+  import ListItem from './listItem.vue';
+  import { SvgIcon } from '/@/components/Icon';
+  import { useForm, BasicForm } from '/@/components/Form';
+  import { workSurfaceFormSchema, extractionUnitFormSchema, calculationFormSchema } from '../gasPumpMonitor.data';
+  import { ref } from 'vue';
+
+  const emit = defineEmits(['submit', 'save', 'cancel']);
+
+  const defaultFormProp = {
+    //注册表单列
+    showActionButtonGroup: false,
+    labelCol: { span: 0 },
+    wrapperCol: { span: 24 },
+    baseColProps: {
+      flex: '20%',
+    },
+  };
+  const formData = ref<Record<string, string | boolean>>({});
+  const [regWSForm, { submit: submitWSForm }] = useForm(defaultFormProp);
+  const [regEUForm, { submit: submitEUForm }] = useForm(defaultFormProp);
+  const [regCCForm, { submit: submitCCForm }] = useForm(defaultFormProp);
+  function submitHandler(v) {
+    formData.value = {
+      ...formData.value,
+      ...v,
+    };
+  }
+
+  function cancel() {
+    emit('cancel');
+  }
+  function save() {
+    emit('save');
+  }
+
+  function submit() {
+    Promise.all([submitWSForm(), submitEUForm(), submitCCForm()]).then(() => {
+      emit('submit', formData.value);
+    });
+  }
+</script>
+
+<style lang="less" scoped>
+  @light-blue: #00c8d9;
+
+  .custom-form__wrapper {
+    color: #fff;
+    border-top: 3px solid @light-blue;
+    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;
+    background-color: transparent !important;
+  }
+</style>

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

@@ -1,4 +1,6 @@
 import { ref } from 'vue';
+import { FormSchema } from '@/components/Form';
+
 export const navList = ref([
   {
     title: '设备监测',
@@ -16,3 +18,261 @@ export const navList = ref([
     isHover: false,
   },
 ]);
+
+/** 工作面参数表单配置项 */
+export const workSurfaceFormSchema: FormSchema[] = [
+  {
+    label: '钻孔长度',
+    field: 'zkcd',
+    component: 'Input',
+    slot: 'input',
+  },
+  {
+    label: '钻孔方位角',
+    field: 'zkfwj',
+    component: 'Input',
+    slot: 'input',
+  },
+  {
+    label: '钻孔倾角',
+    field: 'zkqj',
+    component: 'Input',
+    slot: 'input',
+  },
+  {
+    label: '钻孔间距',
+    field: 'zkjj',
+    component: 'Input',
+    slot: 'input',
+  },
+  {
+    label: '抽采半径',
+    field: 'ccbj',
+    component: 'Input',
+    slot: 'input',
+  },
+  {
+    label: '管路直径',
+    field: 'glzj',
+    component: 'Input',
+    slot: 'input',
+  },
+  {
+    label: '残余可解吸瓦斯量',
+    field: 'cykjxwsl',
+    component: 'Input',
+    slot: 'input',
+  },
+  {
+    label: '工作面回采率',
+    field: 'gzmhcl',
+    component: 'Input',
+    slot: 'input',
+  },
+  {
+    label: '工作面长度',
+    field: 'gzmcd',
+    component: 'Input',
+    slot: 'input',
+  },
+  {
+    label: '巷道宽度',
+    field: 'hdkd',
+    component: 'Input',
+    slot: 'input',
+  },
+  {
+    label: '工作面采高',
+    field: 'gzmcg',
+    component: 'Input',
+    slot: 'input',
+  },
+  {
+    label: '最低允许风速',
+    field: 'zdyxfs',
+    component: 'Input',
+    slot: 'input',
+  },
+  {
+    label: '最大允许风速',
+    field: 'zdyxfs',
+    component: 'Input',
+    slot: 'input',
+  },
+  {
+    label: '回风流风速',
+    field: 'hflfs',
+    component: 'Input',
+    slot: 'input',
+  },
+  {
+    label: '单元钻孔抽采时间差异系数',
+    field: 'dyzkccsjcyxs',
+    component: 'Input',
+    slot: 'input',
+  },
+  {
+    label: '工作面日产量',
+    field: 'gzmrcl',
+    component: 'Input',
+    slot: 'input',
+  },
+  {
+    label: '取样深度',
+    field: 'qysd',
+    component: 'Input',
+    slot: 'input',
+  },
+];
+
+/** 计算参数表单配置项 */
+export const calculationFormSchema: FormSchema[] = [
+  {
+    label: '公式计算',
+    field: 'gsjs',
+    component: 'RadioGroup',
+    slot: 'radio',
+  },
+  {
+    label: '预抽瓦斯达标量',
+    field: 'ycwsdbl',
+    component: 'Input',
+    slot: 'input',
+  },
+  {
+    label: '割煤相对瓦斯涌出量',
+    field: 'gmxdwsycl',
+    component: 'Input',
+    slot: 'input',
+  },
+  {
+    label: '放煤相对瓦斯涌出量',
+    field: 'fmxdwsycl',
+    component: 'Input',
+    slot: 'input',
+  },
+  {
+    label: '采空区相对瓦斯涌出量',
+    field: 'ckqxdwsycl',
+    component: 'Input',
+    slot: 'input',
+  },
+  {
+    label: '邻近层相对瓦斯涌出量',
+    field: 'ljcxdwsycl',
+    component: 'Input',
+    slot: 'input',
+  },
+  {
+    label: '邻近层瓦斯排放量',
+    field: 'ljcwspfl',
+    component: 'Input',
+    slot: 'input',
+  },
+  {
+    label: '残余瓦斯压力',
+    field: 'cywsyl',
+    component: 'Input',
+    slot: 'input',
+  },
+  {
+    label: '残余瓦斯含量',
+    field: 'cywshl',
+    component: 'Input',
+    slot: 'input',
+  },
+  {
+    label: '单元钻孔抽采时间差异系数',
+    field: 'dyzkccsjcyxs',
+    component: 'Input',
+    slot: 'input',
+  },
+];
+
+/** 抽采单元参数表单配置项 */
+export const extractionUnitFormSchema: FormSchema[] = [
+  {
+    label: '评价单元煤炭储量',
+    field: 'pjdymtcl',
+    component: 'Input',
+    slot: 'input',
+  },
+  {
+    label: '工作面瓦斯储量',
+    field: 'gzmwscl',
+    component: 'Input',
+    slot: 'input',
+  },
+  {
+    label: '实时支管抽采负压',
+    field: 'sszgccfy',
+    component: 'Input',
+    slot: 'input',
+  },
+  {
+    label: '钻孔施工长度',
+    field: 'zksgcd',
+    component: 'Input',
+    slot: 'input',
+  },
+  {
+    label: '钻孔设计长度',
+    field: 'zksjcd',
+    component: 'Input',
+    slot: 'input',
+  },
+  {
+    label: '单元原始瓦斯含量',
+    field: 'dyyswshl',
+    component: 'Input',
+    slot: 'input',
+  },
+  {
+    label: '单元原始瓦斯压力',
+    field: 'dyyswsyl',
+    component: 'Input',
+    slot: 'input',
+  },
+  {
+    label: '煤层厚度',
+    field: 'mchd',
+    component: 'Input',
+    slot: 'input',
+  },
+  {
+    label: '工作面切眼长度',
+    field: 'gzmqycd',
+    component: 'Input',
+    slot: 'input',
+  },
+  {
+    label: '工作面走向长度',
+    field: 'gzmzxcd',
+    component: 'Input',
+    slot: 'input',
+  },
+  {
+    label: '个邻近层煤层厚度',
+    field: 'gljcmchd',
+    component: 'Input',
+    slot: 'input',
+  },
+  {
+    label: '工作面预测相对涌出量',
+    field: 'gzmycxdycl',
+    component: 'Input',
+    slot: 'input',
+  },
+  {
+    label: '工作面预测绝对涌出量',
+    field: 'gzmycjdycl',
+    component: 'Input',
+    slot: 'input',
+  },
+  {
+    label: '工作面有效配风量',
+    field: 'gzmyxpfl',
+    component: 'Input',
+    slot: 'input',
+  },
+];