1. 对接瓦斯综合系统接口，并调整页面

src/utils/ventutil.ts

@@ -1,5 +1,6 @@
 import { render, h, nextTick } from 'vue';
 import LivePlayer from '@liveqing/liveplayer-v3';
+import _ from 'lodash-es';
 
 export function toEchartsData(list, option) {
   option.legend['data'] = [];
@@ -269,3 +270,10 @@ export function deviceCameraInit(cameraAddrs, player: HTMLElement, webRtcServerL
     return { webRtcServerList: webRtcServer, playerDoms };
   });
 }
+/**
+ * 功能类似 lodash.get 但是当取值为 null 时也直接返回默认值
+ */
+export const get: typeof _.get = (o, p, defaultValue = '-') => {
+  const d = _.get(o, p, defaultValue);
+  return d === null ? defaultValue : d;
+};

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

@@ -6,12 +6,7 @@
           <div>矿井概况</div>
         </template>
         <template #container>
-          <ListItem class="w-100% mb-5px" :value="device.name" label="矿井名称" />
-          <ListItem class="w-100% mb-5px" :value="device.name" label="矿井产量" />
-          <ListItem class="w-100% mb-5px" :value="device.name" label="矿井瓦斯等级" />
-          <ListItem class="w-100% mb-5px" :value="device.name" label="煤炭储量" />
-          <ListItem class="w-100% mb-5px" :value="device.name" label="主采煤层" />
-          <ListItem class="w-100% mb-5px" :value="device.name" label="平均煤厚" />
+          <ListItem v-for="(item, index) in sysInfo" :key="index" class="w-100% mb-5px" :value="get(dataSource, item.code)" :label="item.title" />
         </template>
       </ventBox1>
       <ventBox1 class="vent-margin-t-10">
@@ -19,11 +14,7 @@
           <div>瓦斯抽采泵站概况</div>
         </template>
         <template #container>
-          <ListItem class="w-100% mb-5px" :value="device.name" label="地面泵站数量" />
-          <ListItem class="w-100% mb-5px" :value="device.name" label="移动泵站数量" />
-          <ListItem class="w-100% mb-5px" :value="device.name" label="抽放泵型号" />
-          <ListItem class="w-100% mb-5px" :value="device.name" label="抽采管路" />
-          <ListItem class="w-100% mb-5px" :value="device.name" label="抽放泵运行数量" />
+          <ListItem v-for="(item, index) in gasPump" :key="index" class="w-100% mb-5px" :value="get(dataSource, item.code)" :label="item.title" />
         </template>
       </ventBox1>
     </div>
@@ -34,12 +25,7 @@
             <div>井下抽采区域</div>
           </template>
           <template #container>
-            <ListItem class="w-100% mb-5px" :value="device.name" label="回采工作面数量" />
-            <ListItem class="w-100% mb-5px" :value="device.name" label="掘进工作面数量" />
-            <ListItem class="w-100% mb-5px" :value="device.name" label="回采工作面位置" />
-            <ListItem class="w-100% mb-5px" :value="device.name" label="掘进工作面位置" />
-            <ListItem class="w-100% mb-5px" :value="device.name" label="采空区数量" />
-            <ListItem class="w-100% mb-5px" :value="device.name" label="采空区位置" />
+            <ListItem v-for="(item, index) in caikongqu" :key="index" class="w-100% mb-5px" :value="get(dataSource, item.code)" :label="item.title" />
           </template>
         </ventBox1>
       </div>
@@ -48,18 +34,20 @@
 </template>
 
 <script setup lang="ts" name="gas-pump-monitor">
-  import { onMounted, defineProps } from 'vue';
+  import { onMounted, defineProps, computed } from 'vue';
   import ventBox1 from '/@/components/vent/ventBox1.vue';
   import ListItem from '@/views/vent/gas/components/list/listItem.vue';
+  import { sysInfo, gasPump, caikongqu } from '../gasHome.data';
+  import { get } from '@/utils/ventutil';
 
-  defineProps({
-    device: {
+  const props = defineProps({
+    dataSource: {
       type: Object,
       default: () => {},
       require: true,
     },
   });
-
+  const dataSource = computed(() => props.dataSource);
   // 抽放泵相关
   // const activedPump = ref<any>({});
 

src/views/vent/gas/gasHome/gasHome.api.ts

@@ -11,4 +11,4 @@ enum Api {
 export const list = (params) => defHttp.post({ url: Api.list, params });
 
 /** 获取瓦斯系统数据 */
-export const gasSystem = (params) => defHttp.post({ url: Api.gasSystem, params });
+export const gasSystem = (params?) => defHttp.post({ url: Api.gasSystem, params });

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

@@ -16,3 +16,80 @@ export const navList = ref([
     isHover: false,
   },
 ]);
+
+export const sysInfo = [
+  {
+    title: '矿井名称',
+    code: 'sysInfo.strinstallpos',
+  },
+  {
+    title: '矿井产量',
+    code: 'sysInfo.coalProduction',
+  },
+  {
+    title: '矿井瓦斯等级',
+    code: 'sysInfo.gasLevel',
+  },
+  {
+    title: '煤炭储量',
+    code: 'sysInfo.coalReserves',
+  },
+  {
+    title: '主采煤层',
+    code: 'sysInfo.mainCoalseam',
+  },
+  {
+    title: '平均煤厚',
+    code: 'sysInfo.coalThickness',
+  },
+];
+
+export const gasPump = [
+  {
+    title: '地面泵站数量',
+    code: 'pump_over.num',
+  },
+  {
+    title: '移动泵站数量',
+    code: 'pump_under.num',
+  },
+  {
+    title: '抽放泵型号',
+    code: 'pump_under.runNum',
+  },
+  {
+    title: '抽采管路',
+    code: 'pump_under.runNum',
+  },
+  {
+    title: '抽放泵运行数量',
+    code: 'pump_under.runNum',
+  },
+];
+
+export const caikongqu = [
+  {
+    title: '回采工作面数量',
+    code: 'caimei.num',
+  },
+  {
+    title: '掘进工作面数量',
+    code: 'juejin.num',
+  },
+  {
+    title: '回采工作面位置(?)',
+    code: 'caikongqu.num',
+  },
+  {
+    title: '掘进工作面位置(?)',
+    code: 'caikongqu.num',
+  },
+  {
+    title: '采空区数量',
+    code: 'caikongqu.num',
+  },
+  {
+    title: '采空区位置(?)',
+    code: 'caikongqu.num',
+  },
+];

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

@@ -1,39 +1,21 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <template>
   <div class="scene-box">
-    <!-- <CustomHeader class="w-1710px ml-100px mt-20px" :badges="headerBadges" /> -->
-    <customHeader :options="options" @change="getSelectRow" :optionValue="optionValue"> 瓦斯抽采综合管控系统 </customHeader>
+    <customHeader> 瓦斯抽采综合管控系统 </customHeader>
     <CustomBadges class="w-1710px ml-100px mt-50px" :badges="headerBadges" />
-    <GasMonitor :device="deviceValue" />
-    <!-- <template v-if="activeKey === 'gasHome'">
-      
-    </template>
-    <template v-if="activeKey === 'gasPump'">
-      <gasPumpMonitor />
-    </template>
-    <template v-if="activeKey === 'gasStandard'">
-      <GasAssessmentHome />
-    </template>
-    <BottomMenu :navList="navList" @change="changeActive" /> -->
+    <GasMonitor v-if="dataSource" :dataSource="dataSource" />
   </div>
+  <VentModal style="z-index: 0" />
 </template>
 <script lang="ts" setup>
   import { ref, onMounted } from 'vue';
   import CustomHeader from '/@/components/vent/customHeader.vue';
   import CustomBadges from './components/customHeader.vue';
-  // import GasAssessmentHome from './components/gasAssessmentHome.vue';
-  // import gasPumpMonitor from '../gasPumpMonitor/index.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';
-
+  import VentModal from '/@/components/vent/micro/ventModal.vue';
+  import { gasSystem } from './gasHome.api';
   const activeKey = ref('gasHome');
-  const { options, optionValue, deviceValue, getSelectRow, getSysDataSource } = useSystemSelect('sys_surface_caimei'); // 参数为场景类型（设备类型管理中可以查询到）
-
-  function changeActive(activeValue) {
-    activeKey.value = activeValue;
-  }
+  const dataSource = ref<any | null>(null);
 
   const headerBadges = ref([
     {
@@ -63,7 +45,8 @@
   ]);
 
   onMounted(async () => {
-    await getSysDataSource();
+    debugger;
+    dataSource.value = await gasSystem();
   });
 </script>
 
@@ -74,4 +57,7 @@
     .right-box {
     }
   }
+  :deep(.vent-home-header) {
+    background-color: var(--vent-base-color) !important;
+  }
 </style>