大屏循环泵听诊模块修改

src/api/AIStation/RecyclePump.js

@@ -30,6 +30,6 @@ export const exportRecyclePumpAlarmData = (item) => {
 // export const getAudio = () => {
 //     return httpTwo.get(`/busFireExtinguisher/test3`,'','',{responseType:'blob'})
 // }
-export const getAudio = (item) => {
-    return httpTwo.get(`/busFireExtinguisher/test4?audioUrl=${item}`,'','',{responseType:'blob'})
+export const getAudio = (id) => {
+    return httpTwo.get(`/busFireExtinguisher/test4?audioUrl=${id}`,'','',{responseType:'blob'})
 }

src/components/screenDisplay.vue

@@ -465,15 +465,20 @@ import AMapLoader from "@amap/amap-jsapi-loader";
           </div>
 <!--          <div class="noVideoData">暂无监控信息......</div>-->
         </div>
-        <div class="thirdLeftLayer_one">
-          <div class="titleStyleTwo"><p>循环泵听诊</p></div>
-          <div v-loading="loading">
-
-            <div ref="waveform" style="width: 800px; height: 149px;"></div>
+        <div v-loading="loading" class="thirdLeftLayer_one">
+          <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>
+          <div>
+            <div class="audio_title">{{audioTitle}}</div>
+            <div ref="waveform" style="width: 800px; height: 140px;"></div>
             <!-- 时间轴容器 -->
-            <div ref="timeline" style="width: 100%; height: 30px;"></div>
+            <div ref="timeline" style="width: 100%; height: 25px;"></div>
           </div>
-          <div class="details-item">
+          <div class="details-item" v-if="showAudio === true">
             <span>音频:</span>
             <audio ref="audioPlayer" controls></audio>
             <!--          <button @click="playAudio">获取音频</button>-->
@@ -762,6 +767,12 @@ export default defineComponent({
       audioStatus: false,
       wavesurfer: null,
       loading: false,
+      audioNum: 0,
+      hasAudio: false,
+      audioTitle: '',
+      showAudio: false,
+      AudioUrlIdList: [],
+      audioList: [],
       mapBackPostion: [{ lan: "38.854713", lon: "117.481685" }],
       fullscreenLoading: false,
     };
@@ -3179,6 +3190,24 @@ export default defineComponent({
       this.queryParams = JSON.stringify(videoList)
       this.videoLoading = true
     },
+    // 下一个波形图
+    nextAudio() {
+      const num = this.audioList.length - 1
+      this.audioNum += 1
+      if(this.audioNum > num) {
+        this.audioNum = 0
+      }
+      this.playAudio(this.AudioUrlIdList[this.audioNum])
+    },
+    // 上一个波形图
+    PreviousAudio() {
+      const num = this.audioList.length - 1
+      this.audioNum -= 1
+      if( this.audioNum  < 0) {
+        this.audioNum = num - 1
+      }
+      this.playAudio(this.AudioUrlIdList[this.audioNum])
+    },
     // 上一个视频
     PreviousVideo() {
       const num = this.VideoInfo.playVideoList.length - 1
@@ -3221,20 +3250,31 @@ export default defineComponent({
     },
     // 查询循环泵听诊数据
     queryAudioUrlList() {
+      this.loading = false
       const params = {
         stationId: this.markerThree.stationId
       }
       queryAudioUrlListApi(params).then(res => {
         if(res.code === 200 && res.data.length > 0){
+          this.showAudio = true
+          this.audioList = res.data
           this.AudioUrlIdList = res.data.map(item => item.businessId)
-          this.playAudio(this.AudioUrlIdList[0])
+          // 判断是否显示上一个，下一个按钮
+          if(this.AudioUrlIdList.length > 1){
+            this.hasAudio = true
+          }else {
+            this.hasAudio = false
+          }
+          this.playAudio(this.AudioUrlIdList[this.audioNum])
+        }else {
+          this.showAudio = false
         }
 
       })
 
     },
     /** 获取音频*/
-    playAudio(item) {
+    playAudio(id) {
       if(this.audioStatus !== false){
         console.log("当前播放的音频zt",this.audioStatus)
         console.log("-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-")
@@ -3247,7 +3287,8 @@ export default defineComponent({
   if (this.wavesurfer) {
     this.wavesurfer.destroy();
   }
-  getAudio(item).then(async res => {
+  getAudio(id).then(async res => {
+    this.audioTitle = this.audioList.find(item => item.businessId === id).deviceName
     const audioSrc = URL.createObjectURL(new Blob([res]));
     // 播放器和波形图赋值
     this.$refs.audioPlayer.src = audioSrc;
@@ -3302,7 +3343,7 @@ export default defineComponent({
     });
     // 使用 WaveSurfer 加载音频流
     this.wavesurfer.load(audioSrc);
-    this.loading = false
+      this.loading = false
     this.audioStatus = false
   })
 },
@@ -4212,11 +4253,15 @@ export default defineComponent({
 });
 </script>
 <style scoped lang="scss">
+.audio_title{
+  color: white;
+  font-size: 17px;
+  font-weight: bold;
+}
 .details-item {
   width: 600px;
   display: flex;
   align-items: center;
-  margin-bottom: 20px;
   font-size: 16px;
 }
 .carousel_content{