修改查看视频

This commit is contained in:
limengnan 2026-02-04 16:34:25 +08:00
parent 641bc9e8a0
commit 6499926298
2 changed files with 95 additions and 24 deletions

View File

@ -422,45 +422,33 @@
</el-dialog>
<el-dialog v-model="isVideoDialog" title="查看视频" width="calc(100%)" class="videoDialogVisible">
<div style="height: calc(100vh - 80px);">
<!-- :src="video1" -->
<video v-if="isVideoDialog"
:src="screen_video ? BACKEND_URL+'/' + screen_video.replace(/\\/g, '/') : ''"
controls
width="100%" height="100%">您的浏览器不支持视频播放</video>
<!-- <img
src="@/assets/video1.png" alt=""
style="position: absolute;bottom: 120px;right: 160px;cursor: pointer;"
title="查看视频1" @click="playFeetVideo('foot1')">
<img
src="@/assets/video2.png" alt=""
style="position: absolute;bottom: 120px;right: 100px;cursor: pointer;"
title="查看视频2" @click="playFeetVideo('foot2')"> -->
<!-- -->
<div style="position: absolute;bottom: 120px;right: 100px;">
<img
src="@/assets/video1.png" alt=""
v-if="videoInfo.foot_video1!=null && videoInfo.foot_video1!='' "
style="cursor: pointer;"
title="查看视频1" @click="playFeetVideo('foot1')">
title="查看视频1" @click.stop="playFeetVideo('foot1')">
<img
src="@/assets/video2.png" alt=""
v-if="videoInfo.foot_video2!=null && videoInfo.foot_video2!='' "
style="cursor: pointer;margin-left: 20px;"
title="查看视频2" @click="playFeetVideo('foot2')">
title="查看视频2" @click.stop="playFeetVideo('foot2')">
</div>
</div>
</el-dialog>
<el-dialog v-model="isVideoFeetDialog" title="查看视频" width="calc(100% - 80px)" class="videofeetDialogVisible">
<el-dialog v-model="isVideoFeetDialog" :title="viewVideoTitle" width="calc(100% - 80px)" class="videofeetDialogVisible">
<div style="height: calc(100vh - 120px);">
<video v-if="isVideoFeetDialog" ref="videoPlayerRef"
:src="screen_video ? BACKEND_URL+'/' + screen_video.replace(/\\/g, '/') : ''"
:src="foot_video ? BACKEND_URL+'/' + foot_video.replace(/\\/g, '/') : ''"
controls width="100%" height="100%">您的浏览器不支持视频播放</video>
</div>
</el-dialog>
<div class="creat-patient-box" v-if="isCloseCreat">
<PatientCreate @closecreatbox="closecreatbox" :patienttype="'edit'"
:selectedPatient="selectedPatient" v-if="isCloseCreat"/>
@ -495,16 +483,19 @@ const isVideoFeetDialog = ref(false) // 是否显示视频弹窗 页脚视频
const screen_video = ref('') //
const foot_video = ref('') //
const videoInfo = ref({})
const viewVideoTitle = ref('')
function playVideo(item) { //
videoInfo.vue = item
videoInfo.value = item
screen_video.value = item.screen_video
isVideoDialog.value = true
}
function playFeetVideo(type) { //
if(type === 'foo1'){
foot_video.value = videoInfo.vue.foot_video1
if(type === 'foot1'){
viewVideoTitle.value = '查看视频1'
foot_video.value = videoInfo.value.foot_video1
}else{
foot_video.value = videoInfo.vue.foot_video2
viewVideoTitle.value = '查看视频2'
foot_video.value = videoInfo.value.foot_video2
}
isVideoFeetDialog.value = true

View File

@ -15,9 +15,18 @@
class="PhotoAlbum-imgbox">
<div class="PhotoAlbum-imgactive" >
<img v-if="item.type == 'data'" :src="BACKEND_URL+'/' + item.screen_image" alt="" style="width: 100%;height: 100%;" @click="clickImg(item,index)">
<video v-else-if="item.type == 'video'" :src="item.screen_video ? BACKEND_URL+'/' + item.screen_video.replace(/\\/g, '/') : ''" controls width="100%" height="100%">
您的浏览器不支持视频播放
</video>
<div v-else-if="item.type == 'video'" style="width: 100%;height: 100%;position: relative;">
<div @click="playVideo(item)"
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;
z-index: 1; cursor: pointer;">
</div>
<video :src="item.screen_video ? BACKEND_URL+'/' + item.screen_video.replace(/\\/g, '/') : ''" controls width="100%" height="100%">
您的浏览器不支持视频播放
</video>
</div>
</div>
<div class="PhotoAlbum-imgtextbox">
<el-checkbox
@ -53,6 +62,37 @@
</div>
</div>
</div>
<el-dialog v-model="isVideoDialog" title="查看视频" width="calc(100%)" class="videoDialogVisible">
<div style="height: calc(100vh - 80px);">
<video v-if="isVideoDialog"
:src="screen_video ? BACKEND_URL+'/' + screen_video.replace(/\\/g, '/') : ''"
controls
width="100%" height="100%">您的浏览器不支持视频播放</video>
<div style="position: absolute;bottom: 120px;right: 100px;">
<img
src="@/assets/video1.png" alt=""
v-if="videoInfo.foot_video1!=null && videoInfo.foot_video1!='' "
style="cursor: pointer;"
title="查看视频1" @click.stop="playFeetVideo('foot1')">
<img
src="@/assets/video2.png" alt=""
v-if="videoInfo.foot_video2!=null && videoInfo.foot_video2!='' "
style="cursor: pointer;margin-left: 20px;"
title="查看视频2" @click.stop="playFeetVideo('foot2')">
</div>
</div>
</el-dialog>
<el-dialog v-model="isVideoFeetDialog" :title="viewVideoTitle" width="calc(100% - 80px)" class="videofeetDialogVisible">
<div style="height: calc(100vh - 120px);">
<video v-if="isVideoFeetDialog" ref="videoPlayerRef"
:src="foot_video ? BACKEND_URL+'/' + foot_video.replace(/\\/g, '/') : ''"
controls width="100%" height="100%">您的浏览器不支持视频播放</video>
</div>
</el-dialog>
</div>
</template>
@ -180,6 +220,31 @@ function getDetectionData(){
onMounted(() => {
getDetectionData()
})
const isVideoDialog = ref(false) //
const isVideoFeetDialog = ref(false) //
const screen_video = ref('') //
const foot_video = ref('') //
const videoInfo = ref({})
const viewVideoTitle = ref('')
function playVideo(item) { //
videoInfo.value = item
screen_video.value = item.screen_video
isVideoDialog.value = true
}
function playFeetVideo(type) { //
if(type === 'foot1'){
viewVideoTitle.value = '查看视频1'
foot_video.value = videoInfo.value.foot_video1
}else{
viewVideoTitle.value = '查看视频2'
foot_video.value = videoInfo.value.foot_video2
}
isVideoFeetDialog.value = true
}
</script>
<style>
@ -436,4 +501,19 @@ onMounted(() => {
.PhotoAlbum-bg .el-checkbox__inner:hover{
border-color: #14aaff;
}
.videoDialogVisible.el-dialog{
margin-top:0px;
margin-bottom: 0px;
/* padding: 16px; */
}
.videofeetDialogVisible.el-dialog{
margin-top:20px;
margin-bottom: 0px;
}
.PhotoAlbum-bg .el-dialog__title {
color: #ffffff;
}
</style>