<template>
|
<!-- <div class="file-type-play">-->
|
<el-image-viewer
|
v-if="isShow"
|
ref="preview"
|
:url-list="playList"
|
:initial-index="currentActiveIndex"
|
@close="closeImageViewer"
|
@switch="onViewerSwitch"
|
teleported>
|
</el-image-viewer>
|
</template>
|
|
<script setup>
|
import { getShowImg } from '@/utils/util'
|
|
const currentActiveIndex = ref(0)
|
|
const isShow = defineModel('show', {
|
type: Boolean,
|
default: true,
|
})
|
|
const props = defineProps(['list','cIndex'])
|
|
const playList = ref([])
|
|
function getQJUrl(url) {
|
return `https://wrj.shuixiongit.com/dronePanorama/html/simple-index.html?path=${getShowImg(url)}`
|
}
|
|
function closeImageViewer() {
|
isShow.value = false
|
}
|
|
function onViewerSwitch (index) {
|
currentActiveIndex.value = index
|
videoImageSwitch()
|
}
|
|
const videoImageSwitch = () => {
|
nextTick(() => {
|
const viewerCanvas = document.querySelector('.el-image-viewer__canvas');
|
const viewerActions = document.querySelector('.el-image-viewer__actions');
|
const parentDOM = document.querySelector('.el-image-viewer__wrapper');
|
|
// const maskLayer = document.querySelector('.el-image-viewer__mask'); // 获取遮罩层
|
|
// 清理之前可能存在的视频或全景图元素
|
const existingVideo = parentDOM?.querySelector('.preview-video');
|
const existingIframe = parentDOM?.querySelector('.preview-panorama');
|
|
if (existingVideo) existingVideo.remove();
|
if (existingIframe) existingIframe.remove();
|
|
const item = props.list[currentActiveIndex.value];
|
|
if (item?.resultType === 1) {
|
// ========== 处理视频 ==========
|
// 隐藏图片查看器的UI
|
if (viewerActions) viewerActions.style.display = 'none';
|
if (viewerCanvas) viewerCanvas.style.display = 'none';
|
|
// 创建并添加视频元素
|
const videoDom = document.createElement('video');
|
videoDom.className = 'preview-video';
|
// videoDom.autoplay = true;
|
videoDom.muted = true;
|
videoDom.playsInline = true;
|
videoDom.loop = true;
|
videoDom.controls = true;
|
videoDom.preload = 'auto';
|
videoDom.src = item.object_key || item.showUrl;
|
|
videoDom.style.position = 'relative';
|
// 添加视频样式
|
videoDom.style.width = '100%';
|
videoDom.style.height = '100%';
|
videoDom.style.objectFit = 'contain';
|
|
// 添加事件监听器
|
videoDom.addEventListener('play', (event) => {
|
// 设置播放速度为 0.75
|
if (event.target.playbackRate !== 0.75) {
|
event.target.playbackRate = 0.75;
|
}
|
});
|
|
videoDom.addEventListener('ended', () => {
|
// 重置视频播放时间为 0 并重新加载
|
videoDom.currentTime = 0;
|
videoDom.load();
|
});
|
|
if (parentDOM) {
|
parentDOM.appendChild(videoDom);
|
}
|
} else if (item?.resultType === 5) {
|
// ========== 处理全景图 ==========
|
// 隐藏图片查看器的UI（如果全景图不需要查看器UI）
|
// if (maskLayer) maskLayer.style.display = 'none';
|
if (viewerActions) viewerActions.style.display = 'none';
|
if (viewerCanvas) viewerCanvas.style.display = 'none';
|
|
// 创建并添加iframe元素
|
const iframeDom = document.createElement('iframe');
|
iframeDom.className = 'preview-panorama';
|
iframeDom.src = getQJUrl(item?.link); // 使用你的全景图URL生成函数
|
iframeDom.frameBorder = '0'; // 注意：frameBorder 是 camelCase
|
iframeDom.allow = 'fullscreen'; // 允许全屏，如果需要
|
iframeDom.title = '全景图浏览';
|
|
// 添加iframe样式
|
// iframeDom.style.zIndex = '2000'; // 比遮罩层的 2000 高
|
iframeDom.style.position = 'relative';
|
iframeDom.style.width = '100%';
|
iframeDom.style.height = '100%';
|
iframeDom.style.border = 'none';
|
|
// 如果需要，可以设置iframe的加载策略
|
iframeDom.loading = 'eager';
|
|
if (parentDOM) {
|
parentDOM.appendChild(iframeDom);
|
}
|
} else {
|
// ========== 处理图片（或其他类型） ==========
|
// 显示图片查看器的UI
|
if (viewerCanvas) viewerCanvas.style.display = 'flex';
|
if (viewerActions) viewerActions.style.display = 'flex';
|
}
|
});
|
};
|
|
watch(isShow, async newVal => {
|
if (newVal) {
|
playList.value = props.list.map((item) => item.showUrl)
|
currentActiveIndex.value = props.cIndex
|
videoImageSwitch()
|
|
}
|
})
|
</script>
|
<style lang="scss">
|
.el-image-viewer__wrapper {
|
.el-image-viewer__canvas {
|
img {
|
height: 90%;
|
top: 5%;
|
}
|
}
|
|
.preview-video {
|
max-height: 96%;
|
}
|
}
|
|
</style>
|
