大屏问题修改

src/components/audioDialog.vue

+<template>
+  <el-dialog title="查看波形图"
+             v-model="dialogOpen"
+             width="95%"
+             :close-on-click-modal="false"
+             :before-close="onSureClick"
+             append-to-body>
+    <div v-loading="loading">
+      <div class="details-item" >
+        <span>波形图:</span>
+      </div>
+
+      <div ref="waveformTwo" style="width: 100%; height: 150px;"></div>
+      <!-- 时间轴容器 -->
+      <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>
+  </el-dialog>
+</template>
+
+<script setup>
+//子组件接收父组件传递过来的值
+import {defineEmits, ref, watch} from "vue";
+import {getAudio} from "@/api/AIStation/RecyclePump.js";
+import WaveSurfer from "wavesurfer.js";
+import RegionsPlugin from "wavesurfer.js/dist/plugin/wavesurfer.regions.js";
+import TimelinePlugin from "wavesurfer.js/dist/plugin/wavesurfer.timeline.js";
+
+const emits = defineEmits(['onChangeDialog']);
+const dialogOpen = ref(false)
+const audioPlayerTwo = ref(null);
+const waveformTwo = ref(null);
+const timelineTwo = ref(null);
+const wavesurferTwo = ref(null);
+const loading = ref(false);
+const pProps = defineProps({
+  detailOpen: {
+    type: Boolean,
+    default: false,
+    required: true,
+  },
+  audioId: {
+    type: Number,
+    required: true,
+  }
+});
+watch(
+    () => pProps.detailOpen,
+    async (newData) => {
+      console.log('pProps.detailOpen', pProps.detailOpen)
+      console.log('pProps.audioId', pProps.audioId)
+      dialogOpen.value = pProps.detailOpen
+      if(pProps.detailOpen === true) {
+        playAudioTwo(pProps.audioId)
+      }
+    }
+)
+const onSureClick = (val) =>{
+  dialogOpen.value = false;
+  emits('onChangeDialog', dialogOpen.value);
+}
+/** 获取音频*/
+function playAudioTwo(item) {
+  loading.value = true
+  // 如果有波形图，则摧毁现有波形图，渲染新的波形图
+  console.log('wavesurfer.value',wavesurferTwo.value)
+  if (wavesurferTwo.value) {
+    wavesurferTwo.value.destroy();
+  }
+  getAudio(item).then(async res => {
+    const audioSrc = URL.createObjectURL(new Blob([res]));
+    // 播放器和波形图赋值
+    audioPlayerTwo.value.src = audioSrc;
+    // 创建 WaveSurfer 实例
+    wavesurferTwo.value = WaveSurfer.create({
+      container: waveformTwo.value,
+      // 未播放波形的颜色
+      waveColor: 'violet',
+      // 已播放波形的颜色
+      progressColor: 'purple',
+      // 波形图的高度，单位为px
+      height: 150,
+      // 波形条的宽度
+      barWidth: 2,
+      responsive: true,
+      normalize: true,
+      plugins: [
+        // 区域选择插件
+        RegionsPlugin.create(
+            {
+              regionsMinLength: 2,
+              regions: [
+                {
+                  start: 5,
+                  end: 15,
+                  loop: false,
+                  color: 'hsla(200, 50%, 70%, 0.4)',
+                  minLength: 1,
+
+                }
+              ],
+              // 拖动选择
+              dragSelection: {
+                slop: 5
+              }
+            }
+        ),
+        // 时间轴插件
+        TimelinePlugin.create({
+          container: timelineTwo.value,
+          fontSize: 14,
+          //主要时间标签颜色
+          primaryColor: "#9191a5",
+          //主要时间文字颜色
+          primaryFontColor: "#9191a5",
+          //次要时间标签颜色
+          secondaryColor: "#9191a5",
+          //次要时间文字颜色
+          secondaryFontColor: "#9191a5",
+        })
+      ]
+    });
+    // 使用 WaveSurfer 加载音频流
+    wavesurferTwo.value.load(audioSrc);
+    loading.value = false
+    status.value = false
+  })
+}
+/** 播放区域*/
+function playAudioRegionTwo() {
+  let region = Object.values(wavesurferTwo.value.regions.list)[0];
+  region.play();
+}
+/** 停止播放区域*/
+function stopPlayAudioRegionTwo() {
+  wavesurferTwo.value.pause();
+}
+/** 放大*/
+function zoomTwo(zoomLevel) {
+  loading.value = true
+  console.log('111111')
+  let region = Object.values(wavesurferTwo.value.regions.list)[0];
+  if (region) {
+    const start = region.start; // 区域开始时间
+    const end = region.end;     // 区域结束时间
+
+    // const zoomLevel = 400; // 设置放大级别（可以根据需求调整）
+
+    // 加载后进行缩放
+    setTimeout(function () {
+      wavesurferTwo.value.seekTo(start / wavesurferTwo.value.getDuration()); // 移动到开始时间
+      wavesurferTwo.value.zoom(zoomLevel); // 设置缩放级别
+      loading.value = false
+    }, 2000)
+
+    // wavesurfer.value.play(); // 播放新的音频段
+
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.details-item {
+  display: flex;
+  align-items: center;
+  margin-bottom: 20px;
+  font-size: 16px;
+}
+
+.details-item span:first-child {
+  font-weight: bold;
+  margin-right: 5px;
+}
+</style>

src/components/screenDisplay.vue

@@ -495,10 +495,11 @@ import AMapLoader from "@amap/amap-jsapi-loader";
               <!--          <button @click="playAudio">获取音频</button>-->
               <button @click="playAudioRegion">播放区域</button>
               <button @click="stopPlayAudioRegion">暂停播放区域</button>
+              <button @click="handleDetails">最大化</button>
             </div>
             </div>
           </div>
-          <div v-else class="noVideoData">暂无循环泵听诊信息......</div>
+          <div v-else class="noVideoData2">暂无循环泵听诊信息......</div>
         </div>
       </div>
       <div class="thirdRightLayer">
@@ -584,6 +585,7 @@ import AMapLoader from "@amap/amap-jsapi-loader";
         </div>
       </div>
     </div>
+    <audio-dialog :detailOpen="detailOpen" :audioId="audioId" @onChangeDialog="handChangeDialog"/>
     <div class="alarmInfo" v-if="open">
       <div class="alarmInfo_header">
         <div class="alarmInfo_title">报警信息轮播</div>
@@ -622,6 +624,7 @@ import { ElMessage } from "element-plus";
 const m = detectZoom();
 import videoComponents from './videoComponents.vue'
 import videoComponentsTwo from './videoComponentsTwo.vue'
+import audioDialog from './audioDialog.vue'
 import {vue3ScrollSeamless} from "vue3-scroll-seamless";
 import {
   postServicCenterList,
@@ -658,6 +661,7 @@ export default defineComponent({
   components: {
     videoComponents,
     videoComponentsTwo,
+    audioDialog,
     vue3ScrollSeamless
   },
   watch: {
@@ -797,10 +801,13 @@ export default defineComponent({
       energyLoading: false,
       wavesurfer: null,
       audioLoading: false,
+      waveformLoading: false,
       audioNum: 0,
       hasAudio: false,
       audioTitle: '',
       showAudio: false,
+      detailOpen: false,
+      audioId: '',
       AudioUrlIdList: [],
       audioList: [],
       mapBackPostion: [{ lan: "38.854713", lon: "117.481685" }],
@@ -3319,6 +3326,7 @@ export default defineComponent({
         return
       }
       this.audioStatus = true
+      this.waveformLoading = true
   // 如果有波形图，则摧毁现有波形图，渲染新的波形图
   console.log('wavesurfer.value',this.wavesurfer)
   if (this.wavesurfer) {
@@ -3381,6 +3389,7 @@ export default defineComponent({
     // 使用 WaveSurfer 加载音频流
     this.wavesurfer.load(audioSrc);
     this.audioStatus = false
+    this.waveformLoading = false
   })
 },
     /** 播放区域*/
@@ -3392,6 +3401,21 @@ export default defineComponent({
     stopPlayAudioRegion() {
       this.wavesurfer.pause();
       },
+    /** 最大化*/
+    handleDetails() {
+      this.queryParams = ''
+      this.stopParams += 1
+      this.detailOpen = true
+      this.audioId = this.AudioUrlIdList[this.audioNum]
+    },
+    handChangeDialog() {
+      this.detailOpen = false
+      const videoList = []
+      videoList.push(this.VideoInfo.playVideoList[this.videoNum])
+      this.getDivWidth()
+      this.queryParams = JSON.stringify(videoList)
+      this.videoLoading = true
+    },
       // 查询管道光纤测漏温度曲线统计图
     getTemperatureStatistics() {
       this.temLoading = true
@@ -4310,7 +4334,7 @@ export default defineComponent({
   font-weight: bold;
 }
 .details-item {
-  width: 600px;
+  width: 700px;
   display: flex;
   align-items: center;
   font-size: 16px;
@@ -4740,6 +4764,12 @@ export default defineComponent({
   margin-top: 18%;
   font-size: 20px;
 }
+.noVideoData2{
+  color: white;
+  text-align: center;
+  margin-top: 28%;
+  font-size: 20px;
+}
 .thirdLeftLayer_two{
   overflow-x: auto;
   width: 100%;