邓洁 : 弹窗雏形

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([])
+const isVisited = ref(true);
-watch(() => props.list, (now, old) => {
+const badGasList = ref([])
-  badGasList.value.forEach(item=>{
+const option = reactive({
-    now.forEach(newItem=>{
+  //图例
-      if(item.equipmentId === newItem.equipmentId){
+  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);

src/components/content/badGasInfo/childComps/GasInfoItem.vue

@@ -122,7 +122,6 @@ function setPoint() {
 #gas-info-item {
   width: 231px;
   text-align: center;
-
   //旋转定位阈值位于的刻度
   .point {
     width: 200px;