From f7c9ceb631b7982ff11d5b50f3de6f27536798e5 Mon Sep 17 00:00:00 2001
From: dengj <209192278@qq.com>
Date: Wed, 13 Dec 2023 17:39:31 +0800
Subject: [PATCH] =?UTF-8?q?=E9=82=93=E6=B4=81=20:=20=E5=BC=B9=E7=AA=97?=
 =?UTF-8?q?=E9=9B=8F=E5=BD=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/images/badGasInfo/sp_jz.png        | Bin 0 -> 585 bytes
 .../content/badGasInfo/BadGasInfo.vue         | 119 ++++++++++++++++--
 .../badGasInfo/childComps/GasInfoItem.vue     |   1 -
 3 files changed, 110 insertions(+), 10 deletions(-)
 create mode 100644 src/assets/images/badGasInfo/sp_jz.png

diff --git a/src/assets/images/badGasInfo/sp_jz.png b/src/assets/images/badGasInfo/sp_jz.png
new file mode 100644
index 0000000000000000000000000000000000000000..c1019e53dac0d6d13bd78d19f8130bd240824fee
GIT binary patch
literal 585
zcmeAS@N?(olHy`uVBq!ia0vp^njp-<1|(M`Fnj}2jKx9jP7LeL$-HD>U}E-kaSVxY
ze|ya^LpV|5*vJ3H)7J;ADG6{Ca6RbAel&7v_m!i4O##*&yE%64w6;hoe5KMc`#}iH
zRG|Waiwjpj3YhNK6yUP**`#Wfj3m8WmCSQbT6SB$|NOV&9q;|lK)K%zJjH>hEW3r9
z9v`qvV4ESOx~n?Onf>Nv#&t~HGb|P4tddVO9-R1X9@ibVyc2KaKh2p~XD3i}YTqQM
z&}SDsmcK3f@!q34zajNZ()=3cY@w}cdpaLF%bGRhdwh+ZwXOH7`z?2-H3@#-{Uq(&
zlPsIq?=Stj$KY>KncJ=7O_iK7=XknwowqW6pRn&=c8qns^(8xrGuaO^_zQeDgiOEJ
z%e~$B5+7sMjL(uCm2+HToNq~)ZzzphcCxEB{F$GBGr#bTzA1i8GaT7|^L!8!wleKb
zFWq6{nZOq5`8TFuBd<x0$q~&ZXFW}4+yrU~dlqW0Cd6&OWcg&avROR7_D(vbjai;c
zxLq0kIo&coSi`i;dVSOx^CedgDI`}b8fnW;i13e^9~1QYl=hLu3E_s@cTM;%{4!0k
zWWV65C3T83@)rjc?$or^6fwFX|8c%{z@wDds(6zpYH8bgy^iQynx3Q>Y~HwnThjkm
z+e=*!#nNZ-b6lieWY^B|oql4^Exp+~v(Kz<+*5RFE>6b3?zw+BvrgUC<NmJM4@?^j
Mp00i_>zopr0E`0xZ2$lO

literal 0
HcmV?d00001

diff --git a/src/components/content/badGasInfo/BadGasInfo.vue b/src/components/content/badGasInfo/BadGasInfo.vue
index db34edb..6087d8a 100644
--- a/src/components/content/badGasInfo/BadGasInfo.vue
+++ b/src/components/content/badGasInfo/BadGasInfo.vue
@@ -2,22 +2,74 @@
   <div id="bad-gas-info">
     <div class="title">有害气体</div>
     <div class="info-list">
-      <gas-info-item v-for="item in badGasList" :key="item.equipmentId" :gasInfo="item" />
+      <gas-info-item v-for="item in badGasList" :key="item.equipmentId" :gasInfo="item" @click="handleOpenChart"/>
     </div>
+    <el-dialog v-model="isVisited" title="1号有害气体监控数据" width="958px" :modal="false">
+      <div class="left-icon"></div>
+      <div class="right-icon"></div>
+
+    </el-dialog>
   </div>
 </template>
 
 <script setup>
 import GasInfoItem from "./childComps/GasInfoItem.vue";
+
 const props = defineProps({
   list: Array,
-  badGasData:Array
+  badGasData: Array
 });
-const badGasList=ref([])
-watch(() => props.list, (now, old) => {
-  badGasList.value.forEach(item=>{
-    now.forEach(newItem=>{
-      if(item.equipmentId === newItem.equipmentId){
+const isVisited = ref(true);
+const badGasList = ref([])
+const option = reactive({
+  //图例
+  legend: {
+    data: [],
+    selected: {},
+    selectedMode: false
+  },
+  //离容器四侧的距离
+  // grid: {
+  //   left: 40, // 左边距
+  //   right: 60, // 右边距
+  //   top: 40, // 顶边距
+  //   bottom: 20, // 底边距
+  //   // containLabel: true,
+  // },
+  //提示框组件
+  tooltip: {
+    show: true,
+    trigger: 'axis'
+  },
+  //X轴
+  xAxis: {
+    name: '',
+    type: 'category',
+    data: [],
+    axisLine: {
+      show: true
+    }
+  },
+  //Y轴
+  yAxis: {
+    name: '',
+    type: 'value',
+    data: [],
+    axisLine: {
+      show: true
+    }
+  },
+  radar: {
+    // shape: 'circle',
+  },
+  //配置项
+  series: []
+})
+
+watch(() => props.list, (now) => {
+  badGasList.value.forEach(item => {
+    now.forEach(newItem => {
+      if (item.equipmentId === newItem.equipmentId) {
         item.value = newItem.value
       }
     })
@@ -31,7 +83,7 @@ const getBadGasInfo = (now) => {
   let windPressureObj = {}
   let windPressureArr = []
   now.map(item => {
-    if (item.equipmentType === "carbonDioxide" || item.equipmentType === "carbonMonoxide" || item.equipmentType === "hydrogenSulfide" || item.equipmentType === "sulfurDioxide"|| item.equipmentType === "sulfurMonoxide"|| item.equipmentType === "nitrogenDioxide") {
+    if (item.equipmentType === "carbonDioxide" || item.equipmentType === "carbonMonoxide" || item.equipmentType === "hydrogenSulfide" || item.equipmentType === "sulfurDioxide" || item.equipmentType === "sulfurMonoxide" || item.equipmentType === "nitrogenDioxide") {
       windPressureObj = changeData(item)
       windPressureArr.push(windPressureObj)
     }
@@ -41,16 +93,44 @@ const getBadGasInfo = (now) => {
 const changeData = (item) => {
   return {
     equipmentId: item.equipmentId,
-    name: item.equipmentName.slice(0, item.equipmentName.length-2),
+    name: item.equipmentName.slice(0, item.equipmentName.length - 2),
     max: 120,
     value: item.value,
     point: item.valueThreshold,
     unit: item.unit
   }
 }
+const handleOpenChart = () => {
+  console.log('有害气体弹窗')
+  isVisited.value = true
+}
 </script>
 
 <style lang="scss" scoped>
+:deep(.el-dialog) {
+  border: 2px solid #0F82AF;
+  background: rgba(6, 34, 71, 0.78);
+  border-radius: 20px;
+  padding: 47px 20px;
+  box-sizing: border-box;
+  margin: 588px auto 0 auto;
+
+  .el-dialog__header {
+    padding: 0;
+    //display: none;
+    .el-dialog__title {
+      font-size: 32px;
+      font-weight: bold;
+      color: #D6F1FA;
+    }
+
+    .el-dialog__close {
+      color: #05FEFF;
+      font-size: 35px;
+    }
+  }
+}
+
 #bad-gas-info {
   position: absolute;
   z-index: 100;
@@ -59,6 +139,26 @@ const changeData = (item) => {
   top: 1441px;
   right: 72px;
   background-image: url(@/assets/images/badGasInfo/bg.png);
+
+  .left-icon {
+    position: absolute;
+    top: -3px;
+    left: -3px;
+    width: 41px;
+    height: 41px;
+    background-image: url(@/assets/images/badGasInfo/sp_jz.png);
+  }
+
+  .right-icon {
+    position: absolute;
+    top: -3px;
+    right: -3px;
+    width: 41px;
+    height: 41px;
+    background-image: url(@/assets/images/badGasInfo/sp_jz.png);
+    transform: rotate(90deg);
+  }
+
   .title {
     width: 128px;
     height: 45px;
@@ -69,6 +169,7 @@ const changeData = (item) => {
     line-height: 45px;
     margin: 22px 0px 0px 62px;
   }
+
   .info-list {
     width: 100%;
     height: calc(621px - 45px - 22px);
diff --git a/src/components/content/badGasInfo/childComps/GasInfoItem.vue b/src/components/content/badGasInfo/childComps/GasInfoItem.vue
index 979b7e4..8bf898e 100644
--- a/src/components/content/badGasInfo/childComps/GasInfoItem.vue
+++ b/src/components/content/badGasInfo/childComps/GasInfoItem.vue
@@ -122,7 +122,6 @@ function setPoint() {
 #gas-info-item {
   width: 231px;
   text-align: center;
-
   //旋转定位阈值位于的刻度
   .point {
     width: 200px;