大屏问题部分修改

src/components/screenDisplay.vue

@@ -456,7 +456,10 @@ import AMapLoader from "@amap/amap-jsapi-loader";
         </div>
         <div class="thirdLeftLayer_one">
           <div class="titleStyleTwo"><p>电气柜监视</p></div>
-          <div class="carousel_content" v-if="alarmsImgList.length > 0">
+          <div v-if="alarmsLoading===true"  class="loading-overlay21">
+            <div class="loader"></div>
+          </div>
+          <div class="carousel_content" v-else-if="alarmsImgList.length > 0">
             <el-carousel>
               <el-carousel-item v-for="(item,index) in alarmsImgList" :key="index">
                 <div class="eventTime_class">报警时间:{{item.eventTime}}</div>
@@ -467,14 +470,19 @@ import AMapLoader from "@amap/amap-jsapi-loader";
           <div v-else class="noVideoData">暂无电气柜信息......</div>
         </div>
         <div class="thirdLeftLayer_two">
-          <div v-loading="loading">
-            <div class="title_row">
-              <div class="titleStyleTwoVideo"><p>循环泵听诊</p></div>
-              <div class="moreInfo" v-show="hasAudio"  @click="PreviousAudio()">上一个</div>
-              <div class="moreInfo" v-show="hasAudio" @click="nextAudio()">下一个</div>
-              <!--            <div class="moreInfo" v-show="hasVideo" @click="moreVideo()">更多》</div>-->
+          <div class="title_row">
+            <div class="titleStyleTwoVideo"><p>循环泵听诊</p></div>
+            <div class="btn_row">
+            <div class="moreInfo" v-show="hasAudio"  @click="PreviousAudio()">上一个</div>
+            <div class="moreInfo" v-show="hasAudio" @click="nextAudio()">下一个</div>
             </div>
-            <div v-if="showAudio === true">
+            <!--            <div class="moreInfo" v-show="hasVideo" @click="moreVideo()">更多》</div>-->
+          </div>
+          <div v-if="audioLoading===true"  class="loading-overlay25">
+            <div class="loader"></div>
+          </div>
+          <div v-else-if="showAudio === true" class="audio_content">
+            <div>
             <div>
               <div class="audio_title">{{audioTitle}}</div>
               <div ref="waveform" style="width: 800px; height: 140px;"></div>
@@ -489,14 +497,17 @@ import AMapLoader from "@amap/amap-jsapi-loader";
               <button @click="stopPlayAudioRegion">暂停播放区域</button>
             </div>
             </div>
-            <div v-else class="noVideoData">暂无循环泵听诊信息......</div>
           </div>
+          <div v-else class="noVideoData">暂无循环泵听诊信息......</div>
         </div>
       </div>
       <div class="thirdRightLayer">
         <div class="thirdLeftLayer_one">
           <div class="titleStyleTwo"><p>当日实时能耗数据</p></div>
-          <div class="secondLeftLayer_fourContent">
+          <div v-if="energyLoading===true"  class="loading-overlay24">
+            <div class="loader"></div>
+          </div>
+          <div v-else class="secondLeftLayer_fourContent">
             <div class="fourRow">
               <div class="fourRow_title">{{stationName}}</div>
             </div>
@@ -523,12 +534,18 @@ import AMapLoader from "@amap/amap-jsapi-loader";
           <div class="fourRow">
             <div class="fourRow_title2">{{stationName}}</div>
           </div>
-          <div v-if="temStatisList.length > 0" class="secondLeftLayerP2" id="secondLeftLayerP2"></div>
-          <div v-else class="noVideoData">暂无管道光纤测漏温度信息......</div>
+          <div v-if="temLoading===true"  class="loading-overlay23">
+            <div class="loader"></div>
+          </div>
+          <div v-else-if="!temStatisList || temStatisList.length < 1" class="noVideoData">暂无管道光纤测漏温度信息......</div>
+          <div  class="secondLeftLayerP2" id="secondLeftLayerP2"></div>
         </div>
         <div class="thirdLeftLayer_one">
           <div class="titleStyleTwo"><p>灭火器仪表监视</p></div>
-          <div v-if="fireList.length > 0" class="carousel_content">
+          <div v-if="fireLoading===true"  class="loading-overlay22">
+            <div class="loader"></div>
+          </div>
+          <div v-else-if="fireList.length > 0" class="carousel_content">
             <el-carousel>
               <el-carousel-item v-for="(item,index) in fireList" :key="index">
                 <img :src="item.picUrl" class="carousel_img">
@@ -774,8 +791,12 @@ export default defineComponent({
       temList:[],
       alarmsImgList: [],
       audioStatus: false,
+      alarmsLoading: false,
+      temLoading: false,
+      fireLoading: false,
+      energyLoading: false,
       wavesurfer: null,
-      loading: false,
+      audioLoading: false,
       audioNum: 0,
       hasAudio: false,
       audioTitle: '',
@@ -3232,34 +3253,40 @@ export default defineComponent({
     },
     // 获取港益换热站实时能耗数据
     handleGetGYTransferRealData() {
+      this.energyLoading = true
       const params = {
         id: this.markerThree.stationId
       }
       getGYTransferRealData(params).then(res => {
         this.thirdDayEnergyForm = res.data[0]
+        this.energyLoading = false
       })
     },
     // 查询换热站灭火器卡片机照片轮
     getFireExtinguisher() {
+      this.fireLoading = true
       const params = {
         stationId: this.markerThree.stationId
       }
       getFireExtinguisherApi(params).then(res => {
         this.fireList = res.data
+        this.fireLoading = false
       })
     },
     // 查询换电气柜监视数据
     getElectricalCabinet() {
+      this.alarmsLoading = true
       const params = {
         stationId: this.markerThree.stationId
       }
       queryAlarmsImgList(params).then(res => {
         this.alarmsImgList = res.data
+        this.alarmsLoading = false
       })
     },
     // 查询循环泵听诊数据
     queryAudioUrlList() {
-      this.loading = false
+      this.audioLoading = true
       const params = {
         stationId: this.markerThree.stationId
       }
@@ -3274,9 +3301,11 @@ export default defineComponent({
           }else {
             this.hasAudio = false
           }
+          this.audioLoading = false
           this.playAudio(this.AudioUrlIdList[this.audioNum])
         }else {
           this.showAudio = false
+          this.audioLoading = false
         }
 
       })
@@ -3290,7 +3319,6 @@ export default defineComponent({
         return
       }
       this.audioStatus = true
-      this.loading = true
   // 如果有波形图，则摧毁现有波形图，渲染新的波形图
   console.log('wavesurfer.value',this.wavesurfer)
   if (this.wavesurfer) {
@@ -3352,7 +3380,6 @@ export default defineComponent({
     });
     // 使用 WaveSurfer 加载音频流
     this.wavesurfer.load(audioSrc);
-      this.loading = false
     this.audioStatus = false
   })
 },
@@ -3367,11 +3394,13 @@ export default defineComponent({
       },
       // 查询管道光纤测漏温度曲线统计图
     getTemperatureStatistics() {
+      this.temLoading = true
       const params = {
         stationId: this.markerThree.stationId
       }
       getTemperatureStatisticsApi(params).then(res => {
         if(res.code === 200){
+          this.temLoading = false
           this.temStatisList = res.data
           if(this.temStatisList && this.temStatisList.length > 0) {
             this.temStaX = this.temStatisList[0].map(item => item.hour + '时')
@@ -3384,6 +3413,7 @@ export default defineComponent({
               this.temList.push({name: name, data: data})
             })
             console.log('this.temList',this.temList)
+            console.log('444444444444444444444',document.querySelector("#secondLeftLayerP2"))
             if (document.querySelector("#secondLeftLayerP2")) {
               var chartDom = document.getElementById("secondLeftLayerP2");
               var myChart = echarts.init(chartDom);
@@ -3681,6 +3711,7 @@ export default defineComponent({
       var chartDom = document.getElementById("secondLeftLayerP2");
       var myChart = echarts.init(chartDom);
       var option;
+      console.log('333333333333333333333333333333',this.temList)
       option = {
         tooltip: {
           trigger: "axis",
@@ -4314,6 +4345,51 @@ export default defineComponent({
   align-items: center;
   z-index: 9999; /* 确保覆盖其他内容 */
 }
+.loading-overlay21 {
+  position: fixed;
+  top: 45%;
+  left: 9%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 9999; /* 确保覆盖其他内容 */
+}
+.loading-overlay22 {
+  position: fixed;
+  top: 81%;
+  left: 88%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 9999; /* 确保覆盖其他内容 */
+}
+.loading-overlay23 {
+  position: fixed;
+  top: 47%;
+  left: 88%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 9999; /* 确保覆盖其他内容 */
+}
+.loading-overlay24 {
+  position: fixed;
+  top: 13%;
+  left: 88%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 9999; /* 确保覆盖其他内容 */
+}
+.loading-overlay25 {
+  position: fixed;
+  top: 81%;
+  left: 9%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 9999; /* 确保覆盖其他内容 */
+}
 .loading-overlay3 {
   position: fixed;
   top: 72%;
@@ -4661,6 +4737,19 @@ export default defineComponent({
   border: rgba(129, 210, 230, 0.5) solid 1px;
   //padding: 0 0 0 10px;
   background: linear-gradient(318deg, rgba(29, 70, 128, 0.8) 0%, rgba(13, 23, 76, 0.8) 100%);
+  .title_row{
+    position: absolute;
+    width: 100%;
+    .btn_row{
+      display: flex;
+      justify-content: space-between;
+      padding-right: 10px;
+      width: 110px;
+    }
+  }
+  .audio_content{
+    padding-top: 35px;
+  }
 }
 .thirdLeftLayer_one{
   width: 100%;