[Feat 0000] 拟对接瓦斯相关的模块

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

@@ -6,12 +6,12 @@
           <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="平均煤厚" />
+          <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="平均煤厚" />
         </template>
       </ventBox1>
       <ventBox1 class="vent-margin-t-10">
@@ -19,11 +19,11 @@
           <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="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="抽放泵运行数量" />
         </template>
       </ventBox1>
     </div>
@@ -34,12 +34,12 @@
             <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="采空区位置" />
+            <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="采空区位置" />
           </template>
         </ventBox1>
       </div>
@@ -48,28 +48,27 @@
 </template>
 
 <script setup lang="ts" name="gas-pump-monitor">
-  import { ref, onMounted, defineProps } from 'vue';
+  import { onMounted, defineProps } from 'vue';
   import ventBox1 from '/@/components/vent/ventBox1.vue';
   import ListItem from '@/views/vent/gas/components/list/listItem.vue';
 
-  const props = defineProps({
-    deviceId: {
-      type: String,
+  defineProps({
+    device: {
+      type: Object,
+      default: () => {},
       require: true,
     },
   });
 
   // 抽放泵相关
-  const activedPump = ref<any>({});
+  // const activedPump = ref<any>({});
 
-  function fetchPump() {
-    const fakePP = { name: 't4', id: 4 };
-    activedPump.value = fakePP;
-  }
+  // function fetchPump() {
+  //   const fakePP = { name: 't4', id: 4 };
+  //   activedPump.value = fakePP;
+  // }
 
-  onMounted(async () => {
-    fetchPump();
-  });
+  onMounted(async () => {});
 </script>
 
 <style lang="less" scoped>

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

@@ -5,7 +5,7 @@
     <CustomHeader class="w-1710px ml-100px mt-20px" :badges="headerBadges" />
     <template v-if="activeKey === 'gasHome'">
       <CustomBadges class="w-1710px ml-100px mt-50px" :badges="headerBadges" />
-      <GasMonitor :deviceId="optionValue" />
+      <GasMonitor :device="deviceValue" />
     </template>
     <BottomMenu :navList="navList" @change="changeActive" />
   </div>
@@ -20,7 +20,7 @@
   import GasMonitor from './components/gasMonitor.vue';
 
   const activeKey = ref('gasHome');
-  const { options, optionValue, getSelectRow, getSysDataSource } = useSystemSelect('sys_surface_caimei'); // 参数为场景类型（设备类型管理中可以查询到）
+  const { options, optionValue, deviceValue, getSelectRow, getSysDataSource } = useSystemSelect('sys_surface_caimei'); // 参数为场景类型（设备类型管理中可以查询到）
 
   function changeActive(activeValue) {
     activeKey.value = activeValue;

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

@@ -54,7 +54,7 @@
 </template>
 
 <script setup lang="ts" name="gas-pump-monitor">
-  import _ from 'lodash';
+  import _ from 'lodash-es';
   import { ref, defineProps, computed } from 'vue';
   import ventBox1 from '/@/components/vent/ventBox1.vue';
   import List from '@/views/vent/gas/components/list/index.vue';

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

@@ -1,28 +1,16 @@
 <template>
   <div class="monitor-chart">
     <Row :gutter="[40, 40]">
-      <Col :span="12">
+      <Col v-for="(chart, i) in monitorCharts" :key="`monitor-chart-${i}`" :span="12">
         <div class="h-400px monitor-chart__wrapper p-20px">
-          <FormTitle class="monitor-chart__title" icon="gas-monitor-extract" title="累积抽采量" />
-          <BarMulti :propTypeArr="chartSeriesMap" xAxisPropType="date" :chartData="testChartData.items" height="350px" />
-        </div>
-      </Col>
-      <Col :span="12">
-        <div class="h-400px monitor-chart__wrapper p-20px">
-          <FormTitle class="monitor-chart__title" icon="gas-monitor-co" title="CO浓度" />
-          <BarMulti :propTypeArr="chartSeriesMap" xAxisPropType="date" :chartData="testChartData.items" height="350px" />
-        </div>
-      </Col>
-      <Col :span="12">
-        <div class="h-400px monitor-chart__wrapper p-20px">
-          <FormTitle class="monitor-chart__title" icon="gas-monitor-np" title="负压浓度" />
-          <BarMulti :propTypeArr="chartSeriesMap" xAxisPropType="date" :chartData="testChartData.items" height="350px" />
-        </div>
-      </Col>
-      <Col :span="12">
-        <div class="h-400px monitor-chart__wrapper p-20px">
-          <FormTitle class="monitor-chart__title" icon="gas-monitor-flow" title="瞬时流量" />
-          <LineMulti :propTypeArr="chartSeriesMap" xAxisPropType="date" :chartData="testChartData.items" height="350px" />
+          <FormTitle class="monitor-chart__title" icon="gas-monitor-extract" :title="chart.title" />
+          <components
+            :is="componentMap[chart.type]"
+            :propTypeArr="chart.seriesMap"
+            :xAxisPropType="chart.dateProp"
+            :chartData="chartData.items"
+            height="350px"
+          />
         </div>
       </Col>
     </Row>
@@ -36,28 +24,41 @@
   import { Row, Col } from 'ant-design-vue';
   import { LimitedArray } from '/@/utils/limitedArray';
   import { onMounted, onUnmounted, ref } from 'vue';
-  defineProps({
+  import { monitorCharts } from '../gasPumpMonitor.data';
+  import _ from 'lodash-es';
+
+  const props = defineProps({
     device: {
       type: Object,
       require: true,
     },
   });
 
-  const testChartData = ref(new LimitedArray(10));
-  const chartSeriesMap = new Map([
-    ['valueA', '值A'],
-    ['valueB', '值B'],
-  ]);
+  const chartData = ref(new LimitedArray(10));
+  const componentMap = {
+    line: LineMulti,
+    bar: BarMulti,
+  };
+  // const testChartData = ref(new LimitedArray(10));
+  // const chartSeriesMap = new Map([
+  //   ['valueA', '值A'],
+  //   ['valueB', '值B'],
+  // ]);
   let timer: any = null;
 
   onMounted(() => {
     timer = setInterval(() => {
-      const testobj = {
-        valueA: Math.floor(Math.random() * 10),
-        valueB: Math.floor(Math.random() * 10),
+      const data = Object.assign({ ...props.device }, _.get(props.device, 'datalist[0]'));
+      chartData.value.push({
+        ...data,
         date: new Date().getSeconds().toString(),
-      };
-      testChartData.value.push(testobj);
+      });
+      // const testobj = {
+      //   valueA: Math.floor(Math.random() * 10),
+      //   valueB: Math.floor(Math.random() * 10),
+      //   date: new Date().getSeconds().toString(),
+      // };
+      // testChartData.value.push(testobj);
     }, 2000);
   });
   onUnmounted(() => {

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

@@ -99,47 +99,41 @@ export const LPumpCategoryConfig = [
   { prop: 'activedPump', label: '累计抽采时间' },
 ];
 
-/** 累积抽采量图表配置项 */
-export const cumulativeExtractionChart = [
+export const monitorCharts = [
   {
-    name: '高负压',
-    prop: 'HPressure',
+    title: '累积抽采量',
+    seriesMap: new Map([
+      ['valueA', '高负压'],
+      ['valueB', '低负压'],
+    ]),
+    dateProp: 'date',
+    type: 'bar',
   },
   {
-    name: '低负压',
-    prop: 'LPressure',
+    title: 'CO浓度',
+    seriesMap: new Map([
+      ['valueA', '高负压'],
+      ['valueB', '低负压'],
+    ]),
+    dateProp: 'date',
+    type: 'bar',
   },
-];
-/** CO浓度图表配置项 */
-export const coChart = [
-  {
-    name: '高负压',
-    prop: 'HPressure',
-  },
-  {
-    name: '低负压',
-    prop: 'LPressure',
-  },
-];
-/** 负压浓度图表配置项 */
-export const negativePressureChart = [
-  {
-    name: '高负压',
-    prop: 'HPressure',
-  },
-  {
-    name: '低负压',
-    prop: 'LPressure',
-  },
-];
-/** 瞬时流量图表配置项 */
-export const instantaneousFlowChart = [
   {
-    name: '高负压',
-    prop: 'HPressure',
+    title: '负压浓度',
+    seriesMap: new Map([
+      ['valueA', '高负压'],
+      ['valueB', '低负压'],
+    ]),
+    dateProp: 'date',
+    type: 'bar',
   },
   {
-    name: '低负压',
-    prop: 'LPressure',
+    title: '瞬时流量',
+    seriesMap: new Map([
+      ['valueA', '高负压'],
+      ['valueB', '低负压'],
+    ]),
+    dateProp: 'date',
+    type: 'line',
   },
 ];