邓洁: 切换隧道,数据渲染

src/components/content/airInfo/AirInfo.vue

@@ -4,20 +4,18 @@
       <img src="@/assets/images/airInfo/fan-v-icon.png" alt=""/>
       <div class="fan-info" @click="handleOpenChart">
         <div class="input-fan"><span>风速</span><span>进风：{{ windSpeed }}m/s</span></div>
-        <div class="output-fan"><span>出风：{{windSpeed}}m/s</span></div>
+        <div class="output-fan"><span>出风：{{ windSpeed }}m/s</span></div>
       </div>
     </div>
-    <div v-if="airList.length!==0">
+    <item-info
-      <item-info
+        v-for="item in airList"
-          v-for="item in airList"
+        :key="item.equipmentId"
-          :key="item.equipmentId"
+        :wp="item"
-          :wp="item"
+        :icon="item.icon"
-          :icon="item.icon"
+        :name="item.name"
-          :name="item.name"
+        :unit="item.unit"
-          :unit="item.unit"
+        @click="handleOpenAirChart(item)"
-          @click="handleOpenAirChart(item)"
+    />
-      />
-    </div>
     <div class="digital-tunnel">
       <el-dialog v-model="isWindSpeedVisited" :title="'风速监控数据'" width="2175px" :modal="false">
         <div class="left-top-icon"></div>
@@ -64,30 +62,35 @@
 import ItemInfo from "./childComps/ItemInfo.vue";
 import TimeRangeBtn from "@/components/timeRangeBtn/index.vue"
 import * as echarts from 'echarts';
+
 let myEcharts = reactive({});
 let myAirEcharts = reactive({});
 const props = defineProps({
   list: Array,
   airData: Array
 });
-const windSpeed=ref('')
+const windSpeed = ref('')
-const airTitle=ref('')
+const airTitle = ref('')
 const airList = ref([])
 const timeList = ref(["年", "月", "日"]);
 const selectTimeButton = ref(2);
 const isWindSpeedVisited = ref(false);
 const isAirVisited = ref(false);
 watch(() => props.list, (now) => {
-  airList.value.forEach(item=>{
+  airList.value?.forEach(item => {
-    now.forEach(newItem=>{
+    now.forEach(newItem => {
-      if(item.equipmentId === newItem.equipmentId){
+      if (item.equipmentId === newItem.equipmentId) {
         item.value = newItem.value
       }
     })
   })
 }, {deep: true});
 watch(() => props.airData, (now) => {
-  getAirInfo(now.sensorList)
+  if(now.sensorList===null){
+    airList.value=[]
+  }else {
+    getAirInfo(now.sensorList)
+  }
 }, {deep: true});
 const handleOpenChart = () => {
   isWindSpeedVisited.value = true
@@ -97,18 +100,18 @@ const handleOpenChart = () => {
 }
 const handleOpenAirChart = (item) => {
   isAirVisited.value = true
-  airTitle.value=item.name
+  airTitle.value = item.name
   nextTick(() => {
     initAirChart()
   })
 }
 const timeSelect = (index) => {
   console.log('选择时间', index)
-  if(index===0){
+  if (index === 0) {
     console.log('--年')
-  }else if(index===1){
+  } else if (index === 1) {
     console.log('--月')
-  }else if(index===2){
+  } else if (index === 2) {
     console.log('--日')
   }
 };
@@ -136,13 +139,14 @@ const changeIcon = (type) => {
   }
 }
 const getAirInfo = (now) => {
+  if (now === null) return;
   let airObj = {}
   let airArr = []
   now?.map(item => {
     if (item.equipmentType === "dust" || item.equipmentType === "oxygen" || item.equipmentType === "temperature" || item.equipmentType === "humidness") {
       airObj = changeData(item)
       airArr.push(airObj)
-    }else if(item.equipmentType === "windDirection"){
+    } else if (item.equipmentType === "windDirection") {
       windSpeed.value = item.value
     }
   })
@@ -162,7 +166,7 @@ const initChart = () => {
         fontSize: 40
       },
       itemWidth: 70,
-      itemHeight:5,
+      itemHeight: 5,
       icon: "rect",
     },
     //离容器四侧的距离
@@ -208,7 +212,7 @@ const initChart = () => {
     //X轴
     xAxis: {
       type: 'category',
-      data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00','07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00','19:00', '20:00', '21:00', '22:00', '23:00','24:00'],
+      data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '24:00'],
       axisLabel: {
         textStyle: {
           fontSize: 45,
@@ -229,7 +233,7 @@ const initChart = () => {
     //配置项
     series: [
       {
-        name:'进风口',
+        name: '进风口',
         data: [56, 12, 89, 34, 71, 43, 67, 20, 98, 72, 19, 61, 3, 85, 47, 92, 17, 76, 69, 25, 31, 49, 81, 63],
         type: 'line',
         smooth: true,
@@ -239,8 +243,8 @@ const initChart = () => {
         }
       },
       {
-        name:'出风口',
+        name: '出风口',
-        data: [3, 85, 47, 92, 17, 76, 69, 25,56, 12, 89, 34, 71, 43, 67, 20, 98, 72, 19, 61,  31, 49, 81, 63],
+        data: [3, 85, 47, 92, 17, 76, 69, 25, 56, 12, 89, 34, 71, 43, 67, 20, 98, 72, 19, 61, 31, 49, 81, 63],
         type: 'line',
         smooth: true,
         symbolSize: 24,
@@ -311,7 +315,7 @@ const initAirChart = () => {
     //X轴
     xAxis: {
       type: 'category',
-      data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00','07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00','19:00', '20:00', '21:00', '22:00', '23:00','24:00'],
+      data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '24:00'],
       axisLabel: {
         textStyle: {
           fontSize: 45,

src/components/content/badGasInfo/BadGasInfo.vue

@@ -58,7 +58,7 @@ const bgImage = computed(() => (isVisited.value ? "sp_active.png" : "bg.png"));
 watch(
   () => props.list,
   (now) => {
-    badGasList.value.forEach((item) => {
+    badGasList.value?.forEach((item) => {
       now.forEach((newItem) => {
         if (item.equipmentId === newItem.equipmentId) {
           item.value = newItem.value;
@@ -72,7 +72,11 @@ watch(
 watch(
   () => props.badGasData,
   (now) => {
-    getBadGasInfo(now.sensorList);
+    if(now.sensorList===null){
+      badGasList.value=[]
+    }else {
+      getBadGasInfo(now.sensorList);
+    }
   },
   { deep: true }
 );
@@ -87,6 +91,7 @@ const timeSelect = (index) => {
   }
 };
 const getBadGasInfo = (now) => {
+  if(now===null)return;
   let windPressureObj = {};
   let windPressureArr = [];
   now?.map((item) => {

src/components/content/fanInfo/FanInfo.vue

@@ -82,13 +82,6 @@ watch(() => props.list, (now) => {
   handleOnMounted()
 }, {deep: true});
 
-onMounted(() => {
-  setTimeout(() => {
-    nextTick(() => {
-      handleOnMounted()
-    })
-  }, 100);
-});
 const getImage = (type) => {
   switch (type) {
     case false:
@@ -121,6 +114,9 @@ const getBasicData = (data) => {
     tranArr.push(tranObj)
   })
   socketData.value = tranArr
+  nextTick(() => {
+    handleOnMounted()
+  })
 }
 
 const handleOnMounted = () => {