From 317ceacf23e2ca5c1a09b5bb0416033f9db3aa93 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=82=93=E6=B4=81?= <209192278@qq.com>
Date: Wed, 3 Jan 2024 15:24:34 +0800
Subject: [PATCH] =?UTF-8?q?=E9=82=93=E6=B4=81:=20=E9=A6=96=E5=B1=8F?=
 =?UTF-8?q?=E9=9D=A2=E6=9D=BF=E7=9A=84loading?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/styles/index.scss                  | 22 +++++-----
 src/components/content/airInfo/AirInfo.vue    |  6 ++-
 .../content/badGasInfo/BadGasInfo.vue         |  6 ++-
 src/components/content/fanInfo/FanInfo.vue    | 13 ++++--
 .../content/windPressure/WindPressureList.vue |  6 ++-
 src/views/tunnel/index.vue                    | 42 ++++++++++++++++---
 6 files changed, 69 insertions(+), 26 deletions(-)

diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss
index ddb1749..5cefbde 100644
--- a/src/assets/styles/index.scss
+++ b/src/assets/styles/index.scss
@@ -675,9 +675,11 @@ input[type="number"] {
   font-size:35px;
   min-height: 350px;
   display: flex;
+  flex-direction: column;
   justify-content: center;
   align-items: center;
   color: #2fb0df;
+  letter-spacing: 3px;
 }
 //loading
 .loading-block{
@@ -689,18 +691,16 @@ input[type="number"] {
   font-size: 55px;
   color: #38CAFB;
   letter-spacing: 3px;
-  .loading {
-    margin-bottom: 20px;
-    width: 100px;
-    height: 100px;
-    border: 2px solid #38CAFB;
-    border-top-color: transparent;
-    border-radius: 100%;
-    animation: circle infinite 0.75s linear;
-  }
-
 }
-
+.loading {
+  margin-bottom: 20px;
+  width: 100px;
+  height: 100px;
+  border: 2px solid #38CAFB;
+  border-top-color: transparent;
+  border-radius: 100%;
+  animation: circle infinite 0.75s linear;
+}
 // 转转转动画
 @keyframes circle {
   0% {
diff --git a/src/components/content/airInfo/AirInfo.vue b/src/components/content/airInfo/AirInfo.vue
index 1bdb540..25090bb 100644
--- a/src/components/content/airInfo/AirInfo.vue
+++ b/src/components/content/airInfo/AirInfo.vue
@@ -192,8 +192,10 @@ const getAirInfo = (now) => {
       windSpeed.value = item.value
     }
   })
-  airArr.push(airArr.shift())
-  airList.value = airArr
+  if(airArr.length!==0){
+    airArr.push(airArr.shift())
+      airList.value = airArr
+  }
 }
 const initChart = (type, values) => {
   //3.初始化container容器
diff --git a/src/components/content/badGasInfo/BadGasInfo.vue b/src/components/content/badGasInfo/BadGasInfo.vue
index 48e6b66..2a18979 100644
--- a/src/components/content/badGasInfo/BadGasInfo.vue
+++ b/src/components/content/badGasInfo/BadGasInfo.vue
@@ -4,7 +4,8 @@
       :style="{ backgroundImage: 'url(' + getImageUrl(bgImage) + ')' }">
     <div class="title">有害气体</div>
     <div v-if="badGasList==null||badGasList.length===0" class="showNull">
-      暂无数据~
+      <div class="loading" v-if="loading===0"></div>
+      {{loading===0?'加载中...':'暂无数据~'}}
     </div>
     <div v-else class="info-list">
       <gas-info-item
@@ -55,7 +56,8 @@ import {getBadGasEchartsInfo} from "@/api/largeScreen";
 const props = defineProps({
   list: Array,
   badGasData: Array,
-  tunnelId: Number
+  tunnelId: Number,
+  loading: Number,
 });
 const timeList = ref(["年", "月", "日"]);
 const selectTimeButton = ref(2);
diff --git a/src/components/content/fanInfo/FanInfo.vue b/src/components/content/fanInfo/FanInfo.vue
index 9f9c3c1..d662acd 100644
--- a/src/components/content/fanInfo/FanInfo.vue
+++ b/src/components/content/fanInfo/FanInfo.vue
@@ -1,8 +1,9 @@
 <template>
   <div id="fan_info">
     <div class="title">风机</div>
-    <div v-if="socketData==null||socketData.length===0" class="showNull">
-      暂无数据~
+    <div v-if="socketData==null||socketData.length===0" class="showNull ">
+      <div class="loading" v-if="loading===0"></div>
+      {{loading===0?'加载中...':'暂无数据~'}}
     </div>
     <div v-else class="fans">
       <div class="fan-item" v-for="(item,index) in socketData" :key="item.equipmentId">
@@ -72,6 +73,7 @@
         </div>
       </div>
     </div>
+
     <div class="digital-tunnel">
       <el-dialog :close-on-click-modal="false" v-model="isVisited" :title="changeNum(fanIndex)+'号风机电流监控数据'" width="2175px"
                  :modal="false">
@@ -107,7 +109,8 @@ import {getFanEchartsInfo} from "../../../api/largeScreen";
 const props = defineProps({
   list: Array,
   fanData: Array,
-  transducerData: Array
+  transducerData: Array,
+  loading: Number,
 });
 const socketData = ref()
 let Echarts_info1 = null;
@@ -121,7 +124,9 @@ const isVisited = ref(false)
 const showLoading = ref(false)
 const fanIndex = ref(0)
 let myEcharts = reactive({});
-
+watch(() => props.loading, (now) => {
+  props.loading=now
+}, {deep: true});
 watch(() => props.transducerData, (now) => {
   getTransData(now.frequencyChangerList)
 }, {deep: true});
diff --git a/src/components/content/windPressure/WindPressureList.vue b/src/components/content/windPressure/WindPressureList.vue
index 5bee122..ef39eff 100644
--- a/src/components/content/windPressure/WindPressureList.vue
+++ b/src/components/content/windPressure/WindPressureList.vue
@@ -2,7 +2,8 @@
   <div id="wind-pressure">
     <div class="name">风压</div>
     <div v-if="wpList==null||wpList.length===0" class="showNull">
-      暂无数据~
+      <div class="loading" v-if="loading===0"></div>
+      {{loading===0?'加载中...':'暂无数据~'}}
     </div>
     <div v-else class="list">
       <wind-pressure-item v-for="(item,index) in wpList" :key="item.equipmentId" :wp="item"
@@ -43,7 +44,8 @@ import {getEchartsInfo} from "@/api/largeScreen";
 
 const props = defineProps({
   list: Array,
-  winData: Array
+  winData: Array,
+  loading: Number,
 });
 const windSort = ref(1)
 const timeList = ref(["年", "月", "日"]);
diff --git a/src/views/tunnel/index.vue b/src/views/tunnel/index.vue
index 75de1f3..c02826e 100644
--- a/src/views/tunnel/index.vue
+++ b/src/views/tunnel/index.vue
@@ -38,8 +38,7 @@
       <el-drawer v-model="drawerLeft" direction="ltr" modal-class="modal-box" :modal="false" :show-close="false"
                  :close-on-click-modal="false" :close-on-press-escape="false">
         <fan-info v-if="showFan" :list="socketData.leftData" :fan-data="largeScreenData"
-                  :transducer-data="largeScreenData"/>
-        <!--        <transducer-list v-if="showFan" :list="socketData.leftData" :transducer-data="largeScreenData" />-->
+                  :transducer-data="largeScreenData" :loading="showFanLoading"/>
         <used-ele v-if="showFan" :list="socketData.leftData" :ele-data="largeScreenData"/>
       </el-drawer>
       <div v-if="drawerLeft" class="left-arrow" @click="closeLeft"></div>
@@ -48,9 +47,9 @@
     <div class="right">
       <el-drawer v-model="drawerRight" direction="rtl" modal-class="modal-box" :modal="false" :show-close="false"
                  :close-on-click-modal="false" :close-on-press-escape="false">
-        <wind-pressure-list v-if="showFan" :list="socketData.windPressure" :win-data="largeScreenData"/>
-        <air-info v-if="showFan" :list="socketData.sensor" :air-data="largeScreenData"/>
-        <bad-gas-info v-if="showFan" :list="socketData.sensor" :bad-gas-data="largeScreenData" :tunnelId="tunnelId"/>
+        <wind-pressure-list v-if="showFan" :list="socketData.windPressure" :win-data="largeScreenData" :loading="showWindLoading"/>
+        <air-info v-if="showFan" :list="socketData.sensor" :air-data="largeScreenData" />
+        <bad-gas-info v-if="showFan" :list="socketData.sensor" :bad-gas-data="largeScreenData" :tunnelId="tunnelId" :loading="showBadLoading"/>
       </el-drawer>
       <div v-if="drawerRight" class="right-arrow" @click="closeRight"></div>
       <div v-else class="shrink-right" @click="closeRight"></div>
@@ -89,6 +88,9 @@ const router = useRouter();
 const selectIndex = ref(-1);
 const showFan = ref(false);
 const drawerLeft = ref(true);
+const showFanLoading = ref(0)
+const showWindLoading = ref(0)
+const showBadLoading = ref(0)
 const drawerRight = ref(true);
 const showMenu = ref(false);
 const currentSiteId = ref(0);
@@ -196,6 +198,36 @@ const getScreenInfo = (id) => {
     tunnelId.value = id
     getLargeScreen(id).then((res) => {
       if (res?.code === 1000) {
+        console.log('res',res.data)
+        if(res.data.frequencyChangerList.length!==0){
+          showFanLoading.value=0
+        }else {
+          showFanLoading.value=1
+        }
+        if(res.data.windPressureSensorList.length!==0){
+          showWindLoading.value=0
+        }else {
+          showWindLoading.value=1
+        }
+
+        if(res.data.sensorList.length!==0){
+          res.data.sensorList.forEach((item,index)=>{
+            if (
+                item.equipmentType === "carbonDioxide" ||
+                item.equipmentType === "carbonMonoxide" ||
+                item.equipmentType === "hydrogenSulfide" ||
+                item.equipmentType === "sulfurDioxide" ||
+                item.equipmentType === "sulfurMonoxide" ||
+                item.equipmentType === "nitrogenDioxide"
+            ) {
+              showBadLoading.value=0
+            }else {
+              showBadLoading.value=1
+            }
+          })
+        }else {
+          showBadLoading.value=1
+        }
         largeScreenData.value = res.data;
       } else {
         ElMessage.warning(res.msg)