完善循环泵的波形图

src/views/AIStation/RecyclePumpPage/RecyclePumpHistoryPage.vue

@@ -32,15 +32,17 @@ const handleCurrentChange = (val) => {
   Page.page = val;
   getDataByParams()
 };
-
+const audioUrl = ref();
 const selectedRow = ref({});
 const selectedRowIndex = ref();
 
+// 高亮行
 function selectRow(row) {
   const index = RecyclePumpData.value.indexOf(row)
   selectedRow.value = row;
   selectedRowIndex.value = index;
-  playAudio()
+  audioUrl.value = row.businessId
+  playAudio(audioUrl.value)
 }
 
 const audioPlayer = ref(null);
@@ -79,13 +81,13 @@ function zoom(zoomLevel) {
   }
 }
 /** 获取音频*/
-function playAudio() {
+function playAudio(item) {
   loading.value = true
   // 如果有波形图，则摧毁现有波形图，渲染新的波形图
   if (wavesurfer.value) {
     wavesurfer.value.destroy();
   }
-  getAudio().then(async res => {
+  getAudio(item).then(async res => {
     const audioSrc = URL.createObjectURL(new Blob([res]));
     // 播放器和波形图赋值
     audioPlayer.value.src = audioSrc;
@@ -282,6 +284,113 @@ const handleSortChange = (data) => {
   })
 };
 
+const audioPlayerTwo = ref(null);
+const waveformTwo = ref(null);
+const timelineTwo = ref(null);
+const wavesurferTwo = ref(null);
+
+/** 播放区域*/
+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(); // 播放新的音频段
+
+  }
+}
+/** 获取音频*/
+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
+  })
+}
+const detailOpen = ref(false)
+function handleDetails(){
+  detailOpen.value = true
+  playAudioTwo(audioUrl.value)
+}
 defineExpose({
   getData,
   playAudio
@@ -369,13 +478,38 @@ defineExpose({
 <!--          <button @click="playAudio">获取音频</button>-->
           <button @click="playAudioRegion">播放区域</button>
           <button @click="stopPlayAudioRegion">暂停播放区域</button>
-          <button @click="zoom(200)">放大</button>
+          <button @click="zoom(100)">放大</button>
           <button @click="zoom(1)">还原</button>
-<!--          <span>{{ selectedRow.audioUrl }}</span>-->
+          <button @click="handleDetails">最大化</button>
         </div>
       </div>
     </div>
   </div>
+  <div class="dialog-Pump">
+    <el-dialog title="查看波形图"
+               v-model="detailOpen"
+               width="95%"
+               :close-on-click-modal="false"
+               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>
+  </div>
 </template>
 
 <style scoped>

src/views/AIStation/RecyclePumpPage/RecyclePumpNewDataPage.vue

@@ -51,6 +51,10 @@ const audioPlayer = ref(null);
 const waveform = ref(null);
 const timeline = ref(null);
 const wavesurfer = ref(null);
+const audioPlayerTwo = ref(null);
+const waveformTwo = ref(null);
+const timelineTwo = ref(null);
+const wavesurferTwo = ref(null);
 /** 播放区域*/
 function playAudioRegion() {
   let region = Object.values(wavesurfer.value.regions.list)[0];
@@ -160,6 +164,106 @@ watch(
       }
     }
 )
+
+
+/** 播放区域*/
+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(); // 播放新的音频段
+
+  }
+}
+/** 获取音频*/
+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
+  })
+}
+
 //子组件接收父组件传递过来的值
 const props = defineProps({
   queryParams: {
@@ -287,6 +391,12 @@ const handleSortChange = (data) => {
     Page.total = res.total
   })
 };
+const detailOpen = ref(false)
+function handleDetails(){
+  detailOpen.value = true
+  playAudioTwo(audioUrl.value)
+}
+
 // 暴露方法名
 defineExpose({
   getData,
@@ -375,12 +485,38 @@ defineExpose({
 <!--          <button @click="playAudio">获取音频</button>-->
           <button @click="playAudioRegion">播放区域</button>
           <button @click="stopPlayAudioRegion">暂停播放区域</button>
-          <button @click="zoom(400)">放大</button>
+          <button @click="zoom(100)">放大</button>
           <button @click="zoom(1)">还原</button>
+          <button @click="handleDetails">最大化</button>
           <!--          <span>{{ selectedRow.audioUrl }}</span>-->
         </div>
       </div>
     </div>
+    <div class="dialog-Pump">
+        <el-dialog title="查看波形图"
+                   v-model="detailOpen"
+                   width="95%"
+                   :close-on-click-modal="false"
+                   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>
+    </div>
   </div>
 </template>