大屏问题修改

src/components/audioDialog.vue

@@ -14,13 +14,26 @@
       <!-- 时间轴容器 -->
       <div ref="timelineTwo" style="width: 100%; height: 30px;"></div>
     </div>
-    <div class="details-item">
-      <span>音频:</span>
-      <audio ref="audioPlayerTwo" controls></audio>
-      <button @click="playAudioRegionTwo">播放区域</button>
-      <button @click="stopPlayAudioRegionTwo">暂停播放区域</button>
-      <button @click="zoomTwo(100)">放大</button>
-      <button @click="zoomTwo(1)">还原</button>
+    <div class="details-item2">
+      <audio ref="audioPlayerTwo" @play="handlePlay" controls></audio>
+      <div class="audio_btnRow">
+        <div class="audio_btn" :title="'播放区域'" @click="playAudioRegionTwo">
+          <el-icon><VideoPlay /></el-icon>
+        </div>
+        <div class="audio_btn" :title="'暂停播放区域'" @click="stopPlayAudioRegionTwo">
+          <el-icon><VideoPause /></el-icon>
+        </div>
+        <div class="audio_btn":title="'放大'" @click="zoomTwo(100)">
+          <el-icon><Plus /></el-icon>
+        </div>
+        <div class="audio_btn":title="'还原'" @click="zoomTwo(1)">
+          <el-icon><Minus /></el-icon>
+        </div>
+      </div>
+<!--      <button @click="playAudioRegionTwo">播放区域</button>-->
+<!--      <button @click="stopPlayAudioRegionTwo">暂停播放区域</button>-->
+<!--      <button @click="zoomTwo(100)">放大</button>-->
+<!--      <button @click="zoomTwo(1)">还原</button>-->
     </div>
   </el-dialog>
 </template>
@@ -133,8 +146,13 @@ function playAudioTwo(item) {
     status.value = false
   })
 }
+function handlePlay() {
+  stopPlayAudioRegionTwo()
+}
 /** 播放区域*/
 function playAudioRegionTwo() {
+  const audio = audioPlayerTwo.value;
+  audio.pause();  // 停止播放音频
   let region = Object.values(wavesurferTwo.value.regions.list)[0];
   region.play();
 }
@@ -173,6 +191,23 @@ function zoomTwo(zoomLevel) {
   margin-bottom: 20px;
   font-size: 16px;
 }
+.details-item2{
+  background-color: #F1F3F4;
+  border-radius: 30px;
+  width: 400px;
+  display: flex;
+  align-items: center;
+  margin-bottom: 20px;
+  font-size: 16px;
+}
+.audio_btnRow{
+  display: flex;
+  padding-top: 3px;
+  .audio_btn{
+    cursor: pointer;
+    margin-left: 3px;
+  }
+}
 
 .details-item span:first-child {
   font-weight: bold;

src/components/screenDisplay.vue

@@ -478,28 +478,32 @@ import AMapLoader from "@amap/amap-jsapi-loader";
             </div>
             <!--            <div class="moreInfo" v-show="hasVideo" @click="moreVideo()">更多》</div>-->
           </div>
-          <div v-if="audioLoading===true"  class="loading-overlay25">
+          <div v-show="waveformLoading===true"  class="loading-overlay25">
             <div class="loader"></div>
           </div>
-          <div v-else-if="showAudio === true" class="audio_content">
-            <div>
+            <div class="wave_content" v-show="waveformLoading === false && this.audioList.length > 0">
               <div>
                 <div class="audio_title">{{audioTitle}}</div>
-                <div ref="waveform" style="width: 800px; height: 140px;"></div>
+                <div ref="waveform" style="width: 400px; height: 140px;"></div>
                 <!-- 时间轴容器 -->
-                <div ref="timeline" style="width: 100%; height: 25px;"></div>
+                <div ref="timeline" style="width: 400px; height: 25px;"></div>
               </div>
-              <div class="details-item" v-show="waveformLoading === false">
-                <span>音频:</span>
-                <audio ref="audioPlayer" controls></audio>
-                <!--          <button @click="playAudio">获取音频</button>-->
-                <button @click="playAudioRegion">播放区域</button>
-                <button @click="stopPlayAudioRegion">暂停播放区域</button>
-                <button @click="handleDetails">最大化</button>
+              <div class="details-item">
+                <audio ref="audioPlayer"  @play="handlePlay" controls></audio>
+                <div class="audio_btnRow">
+                  <div class="audio_btn" :title="'播放区域'" @click="playAudioRegion">
+                    <el-icon><VideoPlay /></el-icon>
+                  </div>
+                  <div class="audio_btn" :title="'暂停播放区域'" @click="stopPlayAudioRegion">
+                    <el-icon><VideoPause /></el-icon>
+                  </div>
+                  <div class="audio_btn":title="'最大化'" @click="handleDetails">
+                    <el-icon><Search /></el-icon>
+                  </div>
+                </div>
               </div>
             </div>
-          </div>
-          <div v-else class="noVideoData2">暂无循环泵听诊信息......</div>
+          <div v-if="!this.audioList || this.audioList.length < 1" class="noVideoData2">暂无循环泵听诊信息......</div>
         </div>
       </div>
       <div class="thirdRightLayer">
@@ -620,7 +624,7 @@ import AMapLoader from "@amap/amap-jsapi-loader";
 <script>
 import { detectZoom } from "@/plugins/screen";
 import { ElLoading } from "element-plus";
-import { ElMessage } from "element-plus";
+import { ElMessage,ElIcon } from "element-plus";
 import jsCookie from"js-cookie";
 const m = detectZoom();
 import videoComponents from './videoComponents.vue'
@@ -806,7 +810,6 @@ export default defineComponent({
       audioNum: 0,
       hasAudio: false,
       audioTitle: '',
-      showAudio: false,
       detailOpen: false,
       audioId: '',
       AudioUrlIdList: [],
@@ -844,6 +847,9 @@ export default defineComponent({
     };
   },
   methods: {
+    handlePlay() {
+      this.stopPlayAudioRegion()
+    },
     async performActions() {
       try {
         await handleGetAIToken(); // 等待 handleGetAIToken 完成
@@ -3304,7 +3310,6 @@ export default defineComponent({
       }
       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)
           // 判断是否显示上一个，下一个按钮
@@ -3316,7 +3321,6 @@ export default defineComponent({
           this.audioLoading = false
           this.playAudio(this.AudioUrlIdList[this.audioNum])
         }else {
-          this.showAudio = false
           this.audioLoading = false
         }
 
@@ -3363,7 +3367,7 @@ export default defineComponent({
                   regions: [
                     {
                       start: 5,
-                      end: 15,
+                      end: 25,
                       loop: false,
                       color: 'hsla(200, 50%, 70%, 0.4)',
                       minLength: 1,
@@ -3399,6 +3403,8 @@ export default defineComponent({
     },
     /** 播放区域*/
     playAudioRegion() {
+      const audio = this.$refs.audioPlayer;
+      audio.pause();  // 停止播放音频
       let region = Object.values(this.wavesurfer.regions.list)[0];
       region.play();
     },
@@ -4344,15 +4350,26 @@ export default defineComponent({
   font-size: 17px;
   font-weight: bold;
 }
+.wave_content{
+  padding-top: 45px;
+}
 .details-item {
-  width: 700px;
+  background-color: #F1F3F4;
+  border-radius: 30px;
+  margin: 0 10px;
+  width: 94%;
   display: flex;
   align-items: center;
   font-size: 16px;
-  button{
-    margin-left: 10px;
+.audio_btnRow{
+  display: flex;
+  padding-top: 3px;
+  .audio_btn{
+    cursor: pointer;
+    margin-left: 3px;
   }
 }
+}
 .eventTime_class{
   position: absolute;
   padding: 10px;