Skip to content

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

大屏问题修改

parent f04501f9
Hide whitespace changes
Inline Side-by-side
Showing with 81 additions and 29 deletions
src/components/audioDialog.vue
View file @ 52850b30
...@@ -14,13 +14,26 @@ ...@@ -14,13 +14,26 @@
<!-- 时间轴容器 --> <!-- 时间轴容器 -->
<div ref="timelineTwo" style="width: 100%; height: 30px;"></div> <div ref="timelineTwo" style="width: 100%; height: 30px;"></div>
</div> </div>
<div class="details-item"> <div class="details-item2">
<span>音频:</span> <audio ref="audioPlayerTwo" @play="handlePlay" controls></audio>
<audio ref="audioPlayerTwo" controls></audio> <div class="audio_btnRow">
<button @click="playAudioRegionTwo">播放区域</button> <div class="audio_btn" :title="'播放区域'" @click="playAudioRegionTwo">
<button @click="stopPlayAudioRegionTwo">暂停播放区域</button> <el-icon><VideoPlay /></el-icon>
<button @click="zoomTwo(100)">放大</button> </div>
<button @click="zoomTwo(1)">还原</button> <div class="audio_btn" :title="'暂停播放区域'" @click="stopPlayAudioRegionTwo">
<el-icon><VideoPause /></el-icon>
</div>
<div class="audio_btn":title="'放大'" @click="zoomTwo(100)">
<el-icon><Plus /></el-icon>
</div>
<div class="audio_btn":title="'还原'" @click="zoomTwo(1)">
<el-icon><Minus /></el-icon>
</div>
</div>
<!-- <button @click="playAudioRegionTwo">播放区域</button>-->
<!-- <button @click="stopPlayAudioRegionTwo">暂停播放区域</button>-->
<!-- <button @click="zoomTwo(100)">放大</button>-->
<!-- <button @click="zoomTwo(1)">还原</button>-->
</div> </div>
</el-dialog> </el-dialog>
</template> </template>
...@@ -133,8 +146,13 @@ function playAudioTwo(item) { ...@@ -133,8 +146,13 @@ function playAudioTwo(item) {
status.value = false status.value = false
}) })
} }
function handlePlay() {
stopPlayAudioRegionTwo()
}
/** 播放区域*/ /** 播放区域*/
function playAudioRegionTwo() { function playAudioRegionTwo() {
const audio = audioPlayerTwo.value;
audio.pause(); // 停止播放音频
let region = Object.values(wavesurferTwo.value.regions.list)[0]; let region = Object.values(wavesurferTwo.value.regions.list)[0];
region.play(); region.play();
} }
...@@ -173,6 +191,23 @@ function zoomTwo(zoomLevel) { ...@@ -173,6 +191,23 @@ function zoomTwo(zoomLevel) {
margin-bottom: 20px; margin-bottom: 20px;
font-size: 16px; font-size: 16px;
} }
.details-item2{
background-color: #F1F3F4;
border-radius: 30px;
width: 400px;
display: flex;
align-items: center;
margin-bottom: 20px;
font-size: 16px;
}
.audio_btnRow{
display: flex;
padding-top: 3px;
.audio_btn{
cursor: pointer;
margin-left: 3px;
}
}
.details-item span:first-child { .details-item span:first-child {
font-weight: bold; font-weight: bold;
......
src/components/screenDisplay.vue
View file @ 52850b30
...@@ -478,28 +478,32 @@ import AMapLoader from "@amap/amap-jsapi-loader"; ...@@ -478,28 +478,32 @@ import AMapLoader from "@amap/amap-jsapi-loader";
</div> </div>
<!-- <div class="moreInfo" v-show="hasVideo" @click="moreVideo()">更多》</div>--> <!-- <div class="moreInfo" v-show="hasVideo" @click="moreVideo()">更多》</div>-->
</div> </div>
<div v-if="audioLoading===true" class="loading-overlay25"> <div v-show="waveformLoading===true" class="loading-overlay25">
<div class="loader"></div> <div class="loader"></div>
</div> </div>
<div v-else-if="showAudio === true" class="audio_content"> <div class="wave_content" v-show="waveformLoading === false && this.audioList.length > 0">
<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: 400px; height: 140px;"></div>
<!-- 时间轴容器 --> <!-- 时间轴容器 -->
<div ref="timeline" style="width: 100%; height: 25px;"></div> <div ref="timeline" style="width: 400px; height: 25px;"></div>
</div> </div>
<div class="details-item" v-show="waveformLoading === false"> <div class="details-item">
<span>音频:</span> <audio ref="audioPlayer" @play="handlePlay" controls></audio>
<audio ref="audioPlayer" controls></audio> <div class="audio_btnRow">
<!-- <button @click="playAudio">获取音频</button>--> <div class="audio_btn" :title="'播放区域'" @click="playAudioRegion">
<button @click="playAudioRegion">播放区域</button> <el-icon><VideoPlay /></el-icon>
<button @click="stopPlayAudioRegion">暂停播放区域</button> </div>
<button @click="handleDetails">最大化</button> <div class="audio_btn" :title="'暂停播放区域'" @click="stopPlayAudioRegion">
<el-icon><VideoPause /></el-icon>
</div>
<div class="audio_btn":title="'最大化'" @click="handleDetails">
<el-icon><Search /></el-icon>
</div>
</div>
</div> </div>
</div> </div>
</div> <div v-if="!this.audioList || this.audioList.length < 1" class="noVideoData2">暂无循环泵听诊信息......</div>
<div v-else class="noVideoData2">暂无循环泵听诊信息......</div>
</div> </div>
</div> </div>
<div class="thirdRightLayer"> <div class="thirdRightLayer">
...@@ -620,7 +624,7 @@ import AMapLoader from "@amap/amap-jsapi-loader"; ...@@ -620,7 +624,7 @@ import AMapLoader from "@amap/amap-jsapi-loader";
<script> <script>
import { detectZoom } from "@/plugins/screen"; import { detectZoom } from "@/plugins/screen";
import { ElLoading } from "element-plus"; import { ElLoading } from "element-plus";
import { ElMessage } from "element-plus"; import { ElMessage,ElIcon } from "element-plus";
import jsCookie from"js-cookie"; import jsCookie from"js-cookie";
const m = detectZoom(); const m = detectZoom();
import videoComponents from './videoComponents.vue' import videoComponents from './videoComponents.vue'
...@@ -806,7 +810,6 @@ export default defineComponent({ ...@@ -806,7 +810,6 @@ export default defineComponent({
audioNum: 0, audioNum: 0,
hasAudio: false, hasAudio: false,
audioTitle: '', audioTitle: '',
showAudio: false,
detailOpen: false, detailOpen: false,
audioId: '', audioId: '',
AudioUrlIdList: [], AudioUrlIdList: [],
...@@ -844,6 +847,9 @@ export default defineComponent({ ...@@ -844,6 +847,9 @@ export default defineComponent({
}; };
}, },
methods: { methods: {
handlePlay() {
this.stopPlayAudioRegion()
},
async performActions() { async performActions() {
try { try {
await handleGetAIToken(); // 等待 handleGetAIToken 完成 await handleGetAIToken(); // 等待 handleGetAIToken 完成
...@@ -3304,7 +3310,6 @@ export default defineComponent({ ...@@ -3304,7 +3310,6 @@ export default defineComponent({
} }
queryAudioUrlListApi(params).then(res => { queryAudioUrlListApi(params).then(res => {
if(res.code === 200 && res.data.length > 0){ if(res.code === 200 && res.data.length > 0){
this.showAudio = true
this.audioList = res.data this.audioList = res.data
this.AudioUrlIdList = res.data.map(item => item.businessId) this.AudioUrlIdList = res.data.map(item => item.businessId)
// 判断是否显示上一个，下一个按钮 // 判断是否显示上一个，下一个按钮
...@@ -3316,7 +3321,6 @@ export default defineComponent({ ...@@ -3316,7 +3321,6 @@ export default defineComponent({
this.audioLoading = false this.audioLoading = false
this.playAudio(this.AudioUrlIdList[this.audioNum]) this.playAudio(this.AudioUrlIdList[this.audioNum])
}else { }else {
this.showAudio = false
this.audioLoading = false this.audioLoading = false
} }
...@@ -3363,7 +3367,7 @@ export default defineComponent({ ...@@ -3363,7 +3367,7 @@ export default defineComponent({
regions: [ regions: [
{ {
start: 5, start: 5,
end: 15, end: 25,
loop: false, loop: false,
color: 'hsla(200, 50%, 70%, 0.4)', color: 'hsla(200, 50%, 70%, 0.4)',
minLength: 1, minLength: 1,
...@@ -3399,6 +3403,8 @@ export default defineComponent({ ...@@ -3399,6 +3403,8 @@ export default defineComponent({
}, },
/** 播放区域*/ /** 播放区域*/
playAudioRegion() { playAudioRegion() {
const audio = this.$refs.audioPlayer;
audio.pause(); // 停止播放音频
let region = Object.values(this.wavesurfer.regions.list)[0]; let region = Object.values(this.wavesurfer.regions.list)[0];
region.play(); region.play();
}, },
...@@ -4344,15 +4350,26 @@ export default defineComponent({ ...@@ -4344,15 +4350,26 @@ export default defineComponent({
font-size: 17px; font-size: 17px;
font-weight: bold; font-weight: bold;
} }
.wave_content{
padding-top: 45px;
}
.details-item { .details-item {
width: 700px; background-color: #F1F3F4;
border-radius: 30px;
margin: 0 10px;
width: 94%;
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 16px; font-size: 16px;
button{ .audio_btnRow{
margin-left: 10px; display: flex;
padding-top: 3px;
.audio_btn{
cursor: pointer;
margin-left: 3px;
} }
} }
}
.eventTime_class{ .eventTime_class{
position: absolute; position: absolute;
padding: 10px; padding: 10px;
......
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