Skip to content

W
web-project
Commit 2be5f514 authored by 张伯涛's avatar 张伯涛
Browse files
Options

大屏修改

parent f1f743a5
Hide whitespace changes
Inline Side-by-side
Showing with 89 additions and 83 deletions
src/components/screenDisplay.vue
View file @ 2be5f514
......@@ -473,8 +473,8 @@ import AMapLoader from "@amap/amap-jsapi-loader";
<div class="title_row">
<div class="titleStyleTwoVideo"><p>循环泵听诊</p></div>
<div class="btn_row">
<div class="moreInfo" v-show="hasAudio" @click="PreviousAudio()">上一个</div>
<div class="moreInfo" v-show="hasAudio" @click="nextAudio()">下一个</div>
<div class="moreInfo" v-show="hasAudio" @click="PreviousAudio()">上一个</div>
<div class="moreInfo" v-show="hasAudio" @click="nextAudio()">下一个</div>
</div>
<!-- <div class="moreInfo" v-show="hasVideo" @click="moreVideo()">更多》</div>-->
</div>
......@@ -483,20 +483,20 @@ import AMapLoader from "@amap/amap-jsapi-loader";
</div>
<div v-else-if="showAudio === true" class="audio_content">
<div>
<div>
<div class="audio_title">{{audioTitle}}</div>
<div ref="waveform" style="width: 800px; height: 140px;"></div>
<!-- 时间轴容器 -->
<div ref="timeline" style="width: 100%; height: 25px;"></div>
</div>
<div class="details-item">
<span>音频:</span>
<audio ref="audioPlayer" controls></audio>
<!-- <button @click="playAudio">获取音频</button>-->
<button @click="playAudioRegion">播放区域</button>
<button @click="stopPlayAudioRegion">暂停播放区域</button>
<button @click="handleDetails">最大化</button>
</div>
<div>
<div class="audio_title">{{audioTitle}}</div>
<div ref="waveform" style="width: 800px; height: 140px;"></div>
<!-- 时间轴容器 -->
<div ref="timeline" style="width: 100%; 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>
</div>
</div>
<div v-else class="noVideoData2">暂无循环泵听诊信息......</div>
......@@ -538,8 +538,8 @@ import AMapLoader from "@amap/amap-jsapi-loader";
<div v-if="temLoading===true" class="loading-overlay23">
<div class="loader"></div>
</div>
<div v-else-if="!temStatisList || temStatisList.length < 1" class="noVideoData">暂无管道光纤测漏温度信息......</div>
<div class="secondLeftLayerP2" id="secondLeftLayerP2"></div>
<div v-else-if="!temStatisList || temStatisList.length < 1" class="noVideoData">暂无管道光纤测漏温度信息......</div>
<div class="secondLeftLayerP2" id="secondLeftLayerP2"></div>
</div>
<div class="thirdLeftLayer_one">
<div class="titleStyleTwo"><p>灭火器仪表监视</p></div>
......@@ -3327,71 +3327,71 @@ export default defineComponent({
}
this.audioStatus = true
this.waveformLoading = true
// 如果有波形图，则摧毁现有波形图，渲染新的波形图
console.log('wavesurfer.value',this.wavesurfer)
if (this.wavesurfer) {
this.wavesurfer.destroy();
}
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;
// 创建 WaveSurfer 实例
this.wavesurfer = WaveSurfer.create({
container: this.$refs.waveform,
// 未播放波形的颜色
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,
// 如果有波形图，则摧毁现有波形图，渲染新的波形图
console.log('wavesurfer.value',this.wavesurfer)
if (this.wavesurfer) {
this.wavesurfer.destroy();
}
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;
// 创建 WaveSurfer 实例
this.wavesurfer = WaveSurfer.create({
container: this.$refs.waveform,
// 未播放波形的颜色
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
}
}
],
// 拖动选择
dragSelection: {
slop: 5
}
}
),
// 时间轴插件
TimelinePlugin.create({
container: this.$refs.timeline,
fontSize: 14,
//主要时间标签颜色
primaryColor: "#9191a5",
//主要时间文字颜色
primaryFontColor: "#9191a5",
//次要时间标签颜色
secondaryColor: "#9191a5",
//次要时间文字颜色
secondaryFontColor: "#9191a5",
})
]
});
// 使用 WaveSurfer 加载音频流
this.wavesurfer.load(audioSrc);
this.audioStatus = false
this.waveformLoading = false
})
},
),
// 时间轴插件
TimelinePlugin.create({
container: this.$refs.timeline,
fontSize: 14,
//主要时间标签颜色
primaryColor: "#9191a5",
//主要时间文字颜色
primaryFontColor: "#9191a5",
//次要时间标签颜色
secondaryColor: "#9191a5",
//次要时间文字颜色
secondaryFontColor: "#9191a5",
})
]
});
// 使用 WaveSurfer 加载音频流
this.wavesurfer.load(audioSrc);
this.audioStatus = false
this.waveformLoading = false
})
},
/** 播放区域*/
playAudioRegion() {
let region = Object.values(this.wavesurfer.regions.list)[0];
......@@ -3400,7 +3400,7 @@ export default defineComponent({
/** 停止播放区域*/
stopPlayAudioRegion() {
this.wavesurfer.pause();
},
},
/** 最大化*/
handleDetails() {
this.queryParams = ''
......@@ -3416,7 +3416,7 @@ export default defineComponent({
this.queryParams = JSON.stringify(videoList)
this.videoLoading = true
},
// 查询管道光纤测漏温度曲线统计图
// 查询管道光纤测漏温度曲线统计图
getTemperatureStatistics() {
this.temLoading = true
const params = {
......@@ -3442,6 +3442,12 @@ export default defineComponent({
myChart.dispose()
this.echartInitPiping();
}
}else {
if (document.querySelector("#secondLeftLayerP2")) {
var chartDom = document.getElementById("secondLeftLayerP2");
var myChart = echarts.init(chartDom);
myChart.dispose()
}
}
}
})
......
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