| 
					
				 | 
			
			
				@@ -0,0 +1,225 @@ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+<template> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  <CustomBadges class="w-1710px ml-100px mt-50px" :badges="headerBadges" /> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  <div class="monitor-container"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    <transition enter-active-class="animate__animated  animate__fadeInLeft" leave-active-class="animate__animated  animate__fadeOutLeft"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      <div class="lr left-box" v-if="loading"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        <template v-for="unitIndex in unitNum" :key="unitIndex"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          <ventBox1 v-if="unitIndex < 4" class="vent-margin-t-10"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            <template #title> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+              <div>抽采单元{{ unitIndex }}</div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            </template> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            <template #container> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+              <BarAndLine 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                xAxisPropType="time" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                :dataSource="get(mockGasUnitData, 'history')" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                height="205px" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                :chartsColumns="gasUnitOption" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                :option="echatsOption" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+              /> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            </template> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          </ventBox1> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        </template> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      </div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    </transition> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    <transition enter-active-class="animate__animated  animate__fadeInRight" leave-active-class="animate__animated  animate__fadeInRight"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      <div class="lr right-box" v-if="loading"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        <template v-for="unitIndex in unitNum" :key="unitIndex"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          <ventBox1 v-if="unitIndex >= 4" class="vent-margin-t-10"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            <template #title> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+              <div>抽采单元{{ unitIndex }}</div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            </template> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            <template #container> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+              <BarAndLine 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                xAxisPropType="time" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                :dataSource="get(mockGasUnitData, 'history')" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                height="205px" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                :chartsColumns="gasUnitOption" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                :option="echatsOption" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+              /> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            </template> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          </ventBox1> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        </template> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        <ventBox1 class="vent-margin-t-10"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          <template #title> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            <div>阀门调控</div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          </template> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          <template #container> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            <CustomChart :chart-config="gasUnitPieOption" :chart-data="mockPieData" height="200px" /> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          </template> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        </ventBox1> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      </div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    </transition> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  </div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+</template> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+<script setup lang="ts"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  import { ref, onMounted } from 'vue'; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  import ventBox1 from '/@/components/vent/ventBox1.vue'; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  import CustomBadges from './customHeader.vue'; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  import { gasUnitOption, headerBadges, mockGasUnitData, gasUnitBarOption, mockData, gasUnitPieOption, mockPieData } from '../gasAssessment.data'; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  import ListItem from '@/views/vent/gas/components/list/listItem.vue'; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  import { get } from '@/utils/ventutil'; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  import CustomChart from '@/views/vent/home/configurable/components/detail/CustomChart.vue'; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  import BarAndLine from '/@/components/chart/BarAndLine.vue'; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  const echatsOption = { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    grid: { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      top: '70px', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      left: '0px', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      right: '30px', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      bottom: '10px', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      containLabel: true, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    legend: { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      top: '5', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  }; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  const loading = ref(false); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  const dataSource = ref({}); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  const unitNum = ref(5); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  // // https获取监测数据 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  let timer: null | NodeJS.Timeout = null; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  function getMonitor(flag?) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    if (Object.prototype.toString.call(timer) === '[object Null]') { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      timer = setTimeout( 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        async () => { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          if (timer) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            timer = null; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          await getMonitor(); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          // loading.value = false; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        flag ? 0 : 1000 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      ); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  onMounted(async () => { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    timer = null; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    await getMonitor(true); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    loading.value = true; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  }); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+</script> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+<style lang="less" scoped> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  @ventSpace: zxm; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  @import '/@/design/vent/modal.less'; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  @import '@/views/vent/monitorManager/comment/less/workFace.less'; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  .monitor-container { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    height: 850px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    pointer-events: none; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  .modal-monitor { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    position: absolute; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    z-index: -1; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    flex-direction: row-reverse; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    .main-container { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      background-color: #00000078; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    .monitor-item { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      width: 180px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      display: flex; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      flex-direction: row; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      width: auto; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      margin-bottom: 3px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      .monitor-title { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        width: 120px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        color: #7af5ff; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        font-weight: 400; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        font-size: 13px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      .monitor-val { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        color: #ffb700; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        display: flex; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        width: auto; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        .val { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          width: 60px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          font-size: 13px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          text-align: center; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        .unit { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          color: #ffffffbb; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          font-size: 13px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    .title { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      text-align: center; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  .left-box, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  .right-box { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    width: 380px !important; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  .gas-pump-item { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    padding: 3px 0; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  .param-set { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    color: #45d3fd; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    cursor: pointer; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    &:hover { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      color: #38a6c8; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  .input-item { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    margin: 3px 0 !important; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    .value { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      width: 80px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      text-align: center; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  .data-group { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    display: flex; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    flex-wrap: wrap; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    justify-content: space-between; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    padding-bottom: 8px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    .data-item { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      width: calc(50% - 10px); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      display: flex; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      justify-content: space-between; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      line-height: 24px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      background-image: linear-gradient(to right, #39a3ff00, #39a3ff10, #39a3ff02); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      margin: 4px 0; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    .value { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      color: #00eefffe; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    .data-item1 { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      width: 100%; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      line-height: 24px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      background-image: linear-gradient(to right, #39a3ff00, #39a3ff10, #39a3ff02); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      margin: 4px 0; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  .base-title { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    line-height: 26px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    position: relative; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    padding-left: 15px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    color: #9bf2ff; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    &::after { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      content: ''; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      position: absolute; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      display: block; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      width: 4px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      height: 12px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      top: 8px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      left: 5px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      background: #45d3fd; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      border-radius: 4px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  .detail { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    border: 1px solid #9bf2ff88; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    padding: 0 5px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    background-color: #ffffff11; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    margin-right: 4px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    &:hover { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      background-color: #ffffff05; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+</style> 
			 |