邓洁: 站点接口及修改细节

src/components/content/badGasInfo/BadGasInfo.vue

@@ -1,23 +1,24 @@
 <template>
   <div
-    id="bad-gas-info"
-    :style="{ backgroundImage: 'url(' + getImageUrl(bgImage) + ')' }">
+      id="bad-gas-info"
+      :style="{ backgroundImage: 'url(' + getImageUrl(bgImage) + ')' }">
     <div class="title">有害气体</div>
     <div class="info-list">
       <gas-info-item
-        v-for="item in badGasList"
-        :key="item.equipmentId"
-        :gasInfo="item"
-        @click="handleOpenChart"
+          v-for="item in badGasList"
+          :key="item.equipmentId"
+          :gasInfo="item"
+          @click="handleOpenChart"
       />
     </div>
 
     <div class="digital-tunnel">
       <el-dialog
-        v-model="isBadGasVisited"
-        title="有害气体监控数据"
-        width="2175px"
-        :modal="false"
+          :close-on-click-modal="false"
+          v-model="isBadGasVisited"
+          title="有害气体监控数据"
+          width="2175px"
+          :modal="false"
       >
         <div class="left-top-icon"></div>
         <div class="right-top-icon"></div>
@@ -27,9 +28,9 @@
         </div>
         <div class="time-select">
           <time-range-btn
-            :buttonList="timeList"
-            v-model="selectTimeButton"
-            @select="timeSelect"
+              :buttonList="timeList"
+              v-model="selectTimeButton"
+              @select="timeSelect"
           />
         </div>
         <div class="left-bottom-icon"></div>
@@ -48,7 +49,7 @@ import {getBadGasEchartsInfo} from "@/api/largeScreen";
 const props = defineProps({
   list: Array,
   badGasData: Array,
-  tunnelId:Number
+  tunnelId: Number
 });
 const timeList = ref(["年", "月", "日"]);
 const selectTimeButton = ref(2);
@@ -57,37 +58,37 @@ const badGasList = ref([]);
 let myEcharts = reactive({});
 const bgImage = computed(() => (isBadGasVisited.value ? "sp_active.png" : "bg.png"));
 watch(
-  () => props.list,
-  (now) => {
-    badGasList.value?.forEach((item) => {
-      now.forEach((newItem) => {
-        if (item.equipmentId === newItem.equipmentId) {
-          item.value = newItem.value;
-        }
+    () => props.list,
+    (now) => {
+      badGasList.value?.forEach((item) => {
+        now.forEach((newItem) => {
+          if (item.equipmentId === newItem.equipmentId) {
+            item.value = newItem.value;
+          }
+        });
       });
-    });
-  },
-  { deep: true }
+    },
+    {deep: true}
 );
 
 watch(
-  () => props.badGasData,
-  (now) => {
-    if(now.sensorList===null){
-      badGasList.value=[]
-    }else {
-      getBadGasInfo(now.sensorList);
-    }
-  },
-  { deep: true }
+    () => props.badGasData,
+    (now) => {
+      if (now.sensorList === null) {
+        badGasList.value = []
+      } else {
+        getBadGasInfo(now.sensorList);
+      }
+    },
+    {deep: true}
 );
 
 watch(
     () => props.tunnelId,
     (now) => {
-      props.tunnelId=now
+      props.tunnelId = now
     },
-    { deep: true }
+    {deep: true}
 );
 const timeSelect = (index) => {
   console.log("选择时间", index);
@@ -100,17 +101,17 @@ const timeSelect = (index) => {
   }
 };
 const getBadGasInfo = (now) => {
-  if(now===null)return;
+  if (now === null) return;
   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"
+        item.equipmentType === "carbonDioxide" ||
+        item.equipmentType === "carbonMonoxide" ||
+        item.equipmentType === "hydrogenSulfide" ||
+        item.equipmentType === "sulfurDioxide" ||
+        item.equipmentType === "sulfurMonoxide" ||
+        item.equipmentType === "nitrogenDioxide"
     ) {
       windPressureObj = changeData(item);
       windPressureArr.push(windPressureObj);
@@ -129,7 +130,7 @@ const changeData = (item) => {
   };
 };
 const getBadGasChartInfo = () => {
-  let id =props.tunnelId
+  let id = props.tunnelId
   getBadGasEchartsInfo(id).then(res => {
     if (res?.code === 1000) {
       isBadGasVisited.value = true
@@ -144,7 +145,7 @@ const handleOpenChart = () => {
 };
 const getImageUrl = (name) => {
   return new URL(`../../../assets/images/badGasInfo/${name}`, import.meta.url)
-    .href;
+      .href;
 };
 /**
  * 初始化echarts实例方法
@@ -180,14 +181,14 @@ const initChart = (type, values) => {
       backgroundColor: "rgba(20,36,51,0.7)", // 设置背景颜色为透明
       borderColor: "#6087BA", // 设置边框颜色为透明
       padding: 0, // 设置内边距为0
-      borderWidth:2,
+      borderWidth: 2,
       textStyle: {
         fontSize: 40,
       },
-      formatter: (params)=> {
-        let res = ` <div style="font-size: 52px;font-family: PingFang SC-Regular, PingFang SC;font-weight: 400;color: #EFEEEE;margin-bottom: -30px">${params[0].name}</div>`  + '<br/>'
+      formatter: (params) => {
+        let res = ` <div style="font-size: 52px;font-family: PingFang SC-Regular, PingFang SC;font-weight: 400;color: #EFEEEE;margin-bottom: -30px">${params[0].name}</div>` + '<br/>'
         for (let i = 0; i < params.length; i++) {
-           res += `
+          res += `
               <div style="font-size: 52px;line-height: 48px;font-family: Bebas Neue-Regular, Bebas Neue;font-weight: 400;margin:0 20px 30px 20px;"><span style="color: #FFFFFF">${params[i].seriesName}: </span><span style="background: linear-gradient(180deg, #F5B85F 0%, #FFFFFF 100%);background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;">${params[i].value}</span></div>
              `;
         }
@@ -238,7 +239,7 @@ const initChart = (type, values) => {
       //   "23:00",
       //   "24:00",
       // ],
-      data:type,
+      data: type,
       axisLabel: {
         textStyle: {
           fontSize: 45,
@@ -264,7 +265,7 @@ const initChart = (type, values) => {
         //   56, 12, 89, 34, 71, 43, 67, 20, 98, 72, 19, 61, 3, 85, 47, 92, 17, 76,
         //   69, 25, 31, 49, 81, 63,
         // ],
-        data:values.carbonDioxideValues,
+        data: values.carbonDioxideValues,
         type: "line",
         smooth: true,
         symbolSize: 24,
@@ -278,7 +279,7 @@ const initChart = (type, values) => {
         //   96, 38, 75, 10, 62, 81, 41, 27, 69, 16, 33, 57, 73, 87, 22, 46, 11,
         //   79, 51, 29, 60, 48, 83, 15,
         // ],
-        data:values.carbonMonoxideValues,
+        data: values.carbonMonoxideValues,
         type: "line",
         smooth: true,
         symbolSize: 24,
@@ -292,7 +293,7 @@ const initChart = (type, values) => {
         //   53, 88, 10, 67, 92, 31, 74, 46, 20, 37, 85, 16, 63, 70, 41, 99, 25,
         //   77, 82, 13, 68, 49, 55, 7, 39,
         // ],
-        data:values.nitrogenDioxideValues,
+        data: values.nitrogenDioxideValues,
         type: "line",
         smooth: true,
         symbolSize: 24,
@@ -306,7 +307,7 @@ const initChart = (type, values) => {
         //   37, 19, 85, 62, 28, 91, 43, 76, 14, 68, 33, 52, 71, 26, 97, 49, 82,
         //   17, 66, 30, 78, 55, 23, 47,
         // ],
-        data:values.sulfurMonoxideValues,
+        data: values.sulfurMonoxideValues,
         type: "line",
         smooth: true,
         symbolSize: 24,
@@ -320,7 +321,7 @@ const initChart = (type, values) => {
         //   6, 30, 91, 77, 28, 51, 42, 83, 16, 65, 35, 72, 18, 96, 47, 79, 100,
         //   23, 80, 44, 62, 59, 13, 86,
         // ],
-        data:values.sulfurDioxideValues,
+        data: values.sulfurDioxideValues,
         type: "line",
         smooth: true,
         symbolSize: 24,
@@ -334,7 +335,7 @@ const initChart = (type, values) => {
         //   13, 27, 39, 51, 62, 73, 84, 95, 10, 20, 30, 40, 50, 60, 70, 80, 90,
         //   100, 11, 21, 31, 41, 51,
         // ],
-        data:values.hydrogenSulfideValues,
+        data: values.hydrogenSulfideValues,
         type: "line",
         smooth: true,
         symbolSize: 24,
@@ -344,7 +345,7 @@ const initChart = (type, values) => {
       },
     ],
   };
-  myEcharts.setOption(option,true);
+  myEcharts.setOption(option, true);
   //图表大小自适应窗口大小变化
   window.onresize = () => {
     myEcharts.resize();