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"; ...@@ -473,8 +473,8 @@ import AMapLoader from "@amap/amap-jsapi-loader";
<div class="title_row"> <div class="title_row">
<div class="titleStyleTwoVideo"><p>循环泵听诊</p></div> <div class="titleStyleTwoVideo"><p>循环泵听诊</p></div>
<div class="btn_row"> <div class="btn_row">
<div class="moreInfo" v-show="hasAudio" @click="PreviousAudio()">上一个</div> <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="nextAudio()">下一个</div>
</div> </div>
<!-- <div class="moreInfo" v-show="hasVideo" @click="moreVideo()">更多》</div>--> <!-- <div class="moreInfo" v-show="hasVideo" @click="moreVideo()">更多》</div>-->
</div> </div>
...@@ -483,20 +483,20 @@ import AMapLoader from "@amap/amap-jsapi-loader"; ...@@ -483,20 +483,20 @@ import AMapLoader from "@amap/amap-jsapi-loader";
</div> </div>
<div v-else-if="showAudio === true" class="audio_content"> <div v-else-if="showAudio === true" class="audio_content">
<div> <div>
<div> <div>
<div class="audio_title">{{audioTitle}}</div> <div class="audio_title">{{audioTitle}}</div>
<div ref="waveform" style="width: 800px; height: 140px;"></div> <div ref="waveform" style="width: 800px; height: 140px;"></div>
<!-- 时间轴容器 --> <!-- 时间轴容器 -->
<div ref="timeline" style="width: 100%; height: 25px;"></div> <div ref="timeline" style="width: 100%; height: 25px;"></div>
</div> </div>
<div class="details-item"> <div class="details-item" v-show="waveformLoading === false">
<span>音频:</span> <span>音频:</span>
<audio ref="audioPlayer" controls></audio> <audio ref="audioPlayer" controls></audio>
<!-- <button @click="playAudio">获取音频</button>--> <!-- <button @click="playAudio">获取音频</button>-->
<button @click="playAudioRegion">播放区域</button> <button @click="playAudioRegion">播放区域</button>
<button @click="stopPlayAudioRegion">暂停播放区域</button> <button @click="stopPlayAudioRegion">暂停播放区域</button>
<button @click="handleDetails">最大化</button> <button @click="handleDetails">最大化</button>
</div> </div>
</div> </div>
</div> </div>
<div v-else class="noVideoData2">暂无循环泵听诊信息......</div> <div v-else class="noVideoData2">暂无循环泵听诊信息......</div>
...@@ -538,8 +538,8 @@ import AMapLoader from "@amap/amap-jsapi-loader"; ...@@ -538,8 +538,8 @@ import AMapLoader from "@amap/amap-jsapi-loader";
<div v-if="temLoading===true" class="loading-overlay23"> <div v-if="temLoading===true" class="loading-overlay23">
<div class="loader"></div> <div class="loader"></div>
</div> </div>
<div v-else-if="!temStatisList || temStatisList.length < 1" class="noVideoData">暂无管道光纤测漏温度信息......</div> <div v-else-if="!temStatisList || temStatisList.length < 1" class="noVideoData">暂无管道光纤测漏温度信息......</div>
<div class="secondLeftLayerP2" id="secondLeftLayerP2"></div> <div class="secondLeftLayerP2" id="secondLeftLayerP2"></div>
</div> </div>
<div class="thirdLeftLayer_one"> <div class="thirdLeftLayer_one">
<div class="titleStyleTwo"><p>灭火器仪表监视</p></div> <div class="titleStyleTwo"><p>灭火器仪表监视</p></div>
...@@ -3327,71 +3327,71 @@ export default defineComponent({ ...@@ -3327,71 +3327,71 @@ export default defineComponent({
} }
this.audioStatus = true this.audioStatus = true
this.waveformLoading = true this.waveformLoading = true
// 如果有波形图，则摧毁现有波形图，渲染新的波形图 // 如果有波形图，则摧毁现有波形图，渲染新的波形图
console.log('wavesurfer.value',this.wavesurfer) console.log('wavesurfer.value',this.wavesurfer)
if (this.wavesurfer) { if (this.wavesurfer) {
this.wavesurfer.destroy(); this.wavesurfer.destroy();
} }
getAudio(id).then(async res => { getAudio(id).then(async res => {
this.audioTitle = this.audioList.find(item => item.businessId === id).deviceName this.audioTitle = this.audioList.find(item => item.businessId === id).deviceName
const audioSrc = URL.createObjectURL(new Blob([res])); const audioSrc = URL.createObjectURL(new Blob([res]));
// 播放器和波形图赋值 // 播放器和波形图赋值
this.$refs.audioPlayer.src = audioSrc; this.$refs.audioPlayer.src = audioSrc;
// 创建 WaveSurfer 实例 // 创建 WaveSurfer 实例
this.wavesurfer = WaveSurfer.create({ this.wavesurfer = WaveSurfer.create({
container: this.$refs.waveform, container: this.$refs.waveform,
// 未播放波形的颜色 // 未播放波形的颜色
waveColor: 'violet', waveColor: 'violet',
// 已播放波形的颜色 // 已播放波形的颜色
progressColor: 'purple', progressColor: 'purple',
// 波形图的高度，单位为px // 波形图的高度，单位为px
height: 150, height: 150,
// 波形条的宽度 // 波形条的宽度
barWidth: 2, barWidth: 2,
responsive: true, responsive: true,
normalize: true, normalize: true,
plugins: [ plugins: [
// 区域选择插件 // 区域选择插件
RegionsPlugin.create( RegionsPlugin.create(
{ {
regionsMinLength: 2, regionsMinLength: 2,
regions: [ regions: [
{ {
start: 5, start: 5,
end: 15, end: 15,
loop: false, loop: false,
color: 'hsla(200, 50%, 70%, 0.4)', color: 'hsla(200, 50%, 70%, 0.4)',
minLength: 1, minLength: 1,
}
],
// 拖动选择
dragSelection: {
slop: 5
}
} }
], ),
// 拖动选择 // 时间轴插件
dragSelection: { TimelinePlugin.create({
slop: 5 container: this.$refs.timeline,
} fontSize: 14,
} //主要时间标签颜色
), primaryColor: "#9191a5",
// 时间轴插件 //主要时间文字颜色
TimelinePlugin.create({ primaryFontColor: "#9191a5",
container: this.$refs.timeline, //次要时间标签颜色
fontSize: 14, secondaryColor: "#9191a5",
//主要时间标签颜色 //次要时间文字颜色
primaryColor: "#9191a5", secondaryFontColor: "#9191a5",
//主要时间文字颜色 })
primaryFontColor: "#9191a5", ]
//次要时间标签颜色 });
secondaryColor: "#9191a5", // 使用 WaveSurfer 加载音频流
//次要时间文字颜色 this.wavesurfer.load(audioSrc);
secondaryFontColor: "#9191a5", this.audioStatus = false
}) this.waveformLoading = false
] })
}); },
// 使用 WaveSurfer 加载音频流
this.wavesurfer.load(audioSrc);
this.audioStatus = false
this.waveformLoading = false
})
},
/** 播放区域*/ /** 播放区域*/
playAudioRegion() { playAudioRegion() {
let region = Object.values(this.wavesurfer.regions.list)[0]; let region = Object.values(this.wavesurfer.regions.list)[0];
...@@ -3400,7 +3400,7 @@ export default defineComponent({ ...@@ -3400,7 +3400,7 @@ export default defineComponent({
/** 停止播放区域*/ /** 停止播放区域*/
stopPlayAudioRegion() { stopPlayAudioRegion() {
this.wavesurfer.pause(); this.wavesurfer.pause();
}, },
/** 最大化*/ /** 最大化*/
handleDetails() { handleDetails() {
this.queryParams = '' this.queryParams = ''
...@@ -3416,7 +3416,7 @@ export default defineComponent({ ...@@ -3416,7 +3416,7 @@ export default defineComponent({
this.queryParams = JSON.stringify(videoList) this.queryParams = JSON.stringify(videoList)
this.videoLoading = true this.videoLoading = true
}, },
// 查询管道光纤测漏温度曲线统计图 // 查询管道光纤测漏温度曲线统计图
getTemperatureStatistics() { getTemperatureStatistics() {
this.temLoading = true this.temLoading = true
const params = { const params = {
...@@ -3442,6 +3442,12 @@ export default defineComponent({ ...@@ -3442,6 +3442,12 @@ export default defineComponent({
myChart.dispose() myChart.dispose()
this.echartInitPiping(); 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