Skip to content

W
web-project
Commit 0a975ffd authored by hubaoshan's avatar hubaoshan
Browse files
Options

完善循环泵的波形图

parent 7e92b577
Show whitespace changes
Inline Side-by-side
Showing with 277 additions and 7 deletions
src/views/AIStation/RecyclePumpPage/RecyclePumpHistoryPage.vue
View file @ 0a975ffd
......@@ -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,12 +478,37 @@ 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>
......
src/views/AIStation/RecyclePumpPage/RecyclePumpNewDataPage.vue
View file @ 0a975ffd
......@@ -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>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment