515 lines
20 KiB
Vue
515 lines
20 KiB
Vue
<template>
|
||
<el-row style="height: 100%;">
|
||
<el-card style="width: 100%;border-radius: 12px;height: 100%;">
|
||
<div style="display: flex;width: 100%;justify-content: flex-end;align-items: center;padding-bottom: 15px;">
|
||
<TitleComponent title="实时视频监控" subtitle="查看所有已完成的巡检记录，跟进巡检报告" />
|
||
<span style="color: rgba(24, 109, 245, 1);display: flex;align-items: center; cursor: pointer;">
|
||
<span>
|
||
2025/06/30 12:00
|
||
刷新数据
|
||
</span>
|
||
<el-icon>
|
||
<Refresh />
|
||
</el-icon>
|
||
</span>
|
||
</div>
|
||
<div class="video-container">
|
||
<el-row :gutter="20">
|
||
<!-- 扩展布局：左侧大视频 + 右侧小视频列 -->
|
||
<template v-if="isExpanded">
|
||
<!-- 左侧大视频（占 16 列） -->
|
||
<el-col :span="16" class="video-wrapper">
|
||
<div class="item large" @click="() => { isExpanded = false; }" ref="bigVideoRef"
|
||
:id="`bigVideo`">
|
||
<div class="title" v-if="isExpanded"
|
||
style="display: flex;justify-content: space-between;">
|
||
<!-- <div class="text">
|
||
{{ videoList[activeIndex].name }}
|
||
</div>
|
||
<div class="tools">
|
||
<img src="/assets/svg/huanyuan.svg" alt=""></img>
|
||
<img src="/assets/svg/quanpin.svg" alt=""></img>
|
||
<img src="/assets/svg/jietu.svg" alt="">
|
||
</div> -->
|
||
</div>
|
||
</div>
|
||
<!-- 大视频的切换视图按钮 -->
|
||
<div class="video-action-btn">
|
||
<el-button type="primary" @click.stop="() => {
|
||
isExpanded = false;
|
||
}">切换视图</el-button>
|
||
</div>
|
||
</el-col>
|
||
<!-- 右侧小视频列（占 8 列） -->
|
||
<el-col :span="8">
|
||
<el-row :gutter="20">
|
||
<el-col :span="24" v-for="i in 3" :key="i" class="video-wrapper">
|
||
<div class="item small" @click="() => {
|
||
// 计算要显示的视频索引 - 按照当前视频后面三个排序
|
||
const displayIndex = (activeIndex + i) % videoList.length;
|
||
activeIndex = displayIndex;
|
||
}" :id="`smallVideo-expanded-${i}`">
|
||
<!-- <div class="title">{{ videoList[(activeIndex + i) % videoList.length].name }}
|
||
</div> -->
|
||
</div>
|
||
<!-- 小视频的两个按钮：切换视图和查看视频 -->
|
||
<div class="video-action-btn expanded">
|
||
|
||
<el-button type="success" size="small" @click.stop="() => {
|
||
const displayIndex = (activeIndex + i) % videoList.length;
|
||
activeIndex = displayIndex;
|
||
// 不需要改变isExpanded，因为已经在扩展布局
|
||
}">查看视频</el-button>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</el-col>
|
||
</template>
|
||
|
||
<!-- 普通布局：所有视频均匀排列 -->
|
||
<template v-else>
|
||
<el-col :span="8" v-for="(item, index) in videoList" :key="index" class="video-wrapper">
|
||
<!-- 视频容器 -->
|
||
<div class="item" :id="`smallVideo-${index + 1}`" :ref="el => smallVideoRefs[index] = el">
|
||
<!-- <div class="title">{{ item.name }}</div> -->
|
||
</div>
|
||
<!-- 按钮放在最外层，与视频容器同级 -->
|
||
<div class="video-action-btn">
|
||
<el-button type="primary" @click.stop="() => {
|
||
activeIndex = index;
|
||
isExpanded = true;
|
||
}">切换视图</el-button>
|
||
</div>
|
||
</el-col>
|
||
</template>
|
||
</el-row>
|
||
<el-row v-if="!isExpanded">
|
||
<div class="pagination" v-if="activeTab !== 'record'">
|
||
<el-pagination layout="prev, pager, next, jumper" :total="totalRecords"
|
||
v-model:current-page="pageStart" v-model:page-size="pageSize" :page-sizes="[20, 50, 100]"
|
||
@current-change="handlePageChange" @size-change="handleSizeChange"></el-pagination>
|
||
</div>
|
||
</el-row>
|
||
</div>
|
||
</el-card>
|
||
</el-row>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { Refresh } from '@element-plus/icons-vue';
|
||
import EZUIKit from 'ezuikit-js';
|
||
// import TitleComponent from '@/components/TitleComponent';
|
||
import { getToken, getMonitoringList } from '@/api/securitySurveillance/index.js';
|
||
import { ref, onMounted, watch, nextTick, onUnmounted } from 'vue';
|
||
import { useUserStore } from '@/store/modules/user';
|
||
const activeIndex = ref(0); // 初始选中第一个视频
|
||
const isExpanded = ref(true); // 初始为扩展
|
||
const accessToken = ref('')
|
||
const pageStart = ref(1);
|
||
const pageSize = ref(4); // 默认请求4个视频（扩展布局）
|
||
const totalRecords = ref(0);
|
||
const activeTab = ref('live');
|
||
const bigVideoRef = ref<HTMLDivElement>(null);
|
||
const smallVideoRefs = ref<Array<HTMLDivElement | null>>([]); // 使用数组存储多个视频容器引用
|
||
const currentProject = computed(() => useUserStore().selectedProject);
|
||
|
||
const videoList = ref([]);
|
||
// 存储第二页的数据，用于处理扩展视图右边视频不足的情况
|
||
const nextPageVideoList = ref([]);
|
||
// 标记是否已经使用了下一页的数据
|
||
const hasUsedNextPageData = ref(false);
|
||
|
||
const StructureEZUIKitPlayer = (item: any, index: number, isBig = false) => {
|
||
// 添加输入参数的安全检查
|
||
if (!item || typeof item !== 'object') {
|
||
console.error('无效的视频项数据:', item);
|
||
return;
|
||
}
|
||
|
||
const containerId = isBig ? 'bigVideo' : isExpanded.value ? `smallVideo-expanded-${index + 1}` : `smallVideo-${index + 1}`;
|
||
const container = document.getElementById(containerId);
|
||
|
||
// 先销毁旧的播放器实例（如果存在）
|
||
if (item.player) {
|
||
try {
|
||
// 添加安全检查，确保destroy方法存在
|
||
if (typeof item.player.destroy === 'function') {
|
||
// 尝试移除所有事件监听器
|
||
if (item.player.off) {
|
||
item.player.off('*');
|
||
}
|
||
item.player.destroy();
|
||
}
|
||
}
|
||
catch (error) {
|
||
console.error('销毁播放器失败:', error);
|
||
}
|
||
item.player = null;
|
||
}
|
||
|
||
if (container && accessToken.value && item.deviceSerial) {
|
||
try {
|
||
item.player = new EZUIKit.EZUIKitPlayer({
|
||
audio: '0',
|
||
id: containerId,
|
||
accessToken: accessToken.value,
|
||
url: `ezopen://open.ys7.com/${item.deviceSerial}/1.hd.live`,
|
||
template: "pcLive",
|
||
width: container.clientWidth,
|
||
height: container.clientHeight,
|
||
plugin: ['talk']
|
||
});
|
||
} catch (error) {
|
||
console.error('创建播放器失败:', error);
|
||
item.player = null;
|
||
}
|
||
} else {
|
||
console.error(`创建播放器失败，缺少必要条件: container=${!!container}, accessToken=${!!accessToken.value}, deviceSerial=${!!item.deviceSerial}`);
|
||
}
|
||
};
|
||
|
||
// 获取萤石云Token
|
||
const getTokenData = async () => {
|
||
const { data } = await getToken()
|
||
accessToken.value = data
|
||
}
|
||
// 获取摄像头列表
|
||
const getMonitoringListData = async () => {
|
||
// 根据当前视图类型设置请求数量
|
||
const currentPageSize = isExpanded.value ? 4 : 9;
|
||
const { data: { object, sum }, } = await getMonitoringList({
|
||
pageStart: pageStart.value,
|
||
pageSize: currentPageSize,
|
||
isflow: true,
|
||
projectId: currentProject.value?.id,
|
||
})
|
||
totalRecords.value = Number(sum)
|
||
// 确保object是数组，如果不是则使用空数组
|
||
videoList.value = Array.isArray(object) ? object : []
|
||
}
|
||
|
||
// 获取下一页视频数据
|
||
const getNextPageData = async () => {
|
||
const { data: { object, sum } } = await getMonitoringList({
|
||
pageStart: pageStart.value + 1,
|
||
isflow: true,
|
||
pageSize: 3 // 只需要3个视频
|
||
})
|
||
// 确保object是数组，如果不是则使用空数组
|
||
nextPageVideoList.value = Array.isArray(object) ? object : [];
|
||
// 标记已经使用了下一页的数据
|
||
hasUsedNextPageData.value = true;
|
||
}
|
||
|
||
const getData = async () => {
|
||
// 先清理所有播放器
|
||
cleanupPlayers();
|
||
// 不再每次都获取token，token只在组件挂载时获取一次
|
||
await getMonitoringListData()
|
||
// 不再重置activeIndex，保留用户之前选择的视频索引
|
||
// 等待DOM更新后初始化视频
|
||
await nextTick();
|
||
initVideo()
|
||
}
|
||
|
||
const initVideo = async () => {
|
||
// 先清理所有视频容器的内容，避免残留
|
||
if (bigVideoRef.value) {
|
||
bigVideoRef.value.innerHTML = '';
|
||
}
|
||
|
||
// 清理所有小视频容器的内容
|
||
smallVideoRefs.value.forEach(ref => {
|
||
if (ref) {
|
||
ref.innerHTML = '';
|
||
}
|
||
});
|
||
|
||
// 确保videoList是数组，如果不是则使用空数组
|
||
const safeVideoList = Array.isArray(videoList.value) ? videoList.value : [];
|
||
// 确保nextPageVideoList是数组，如果不是则使用空数组
|
||
const safeNextPageVideoList = Array.isArray(nextPageVideoList.value) ? nextPageVideoList.value : [];
|
||
|
||
if (isExpanded.value) {
|
||
// 扩展布局：初始化大视频和右侧3个小视频
|
||
// 安全检查：确保activeIndex在有效范围内
|
||
const safeActiveIndex = Math.min(Math.max(activeIndex.value, 0), safeVideoList.length - 1);
|
||
if (safeVideoList.length > 0 && safeVideoList[safeActiveIndex] && typeof safeVideoList[safeActiveIndex] === 'object') {
|
||
StructureEZUIKitPlayer(safeVideoList[safeActiveIndex], 0, true);
|
||
}
|
||
|
||
// 检查当前视频后面是否有足够的视频
|
||
const remainingVideos = safeVideoList.length - safeActiveIndex - 1;
|
||
|
||
if (remainingVideos >= 3) {
|
||
// 当前页后面有足够的视频，直接使用当前页的数据
|
||
for (let i = 0; i < 3; i++) {
|
||
const videoIndex = safeActiveIndex + 1 + i;
|
||
if (safeVideoList[videoIndex] && typeof safeVideoList[videoIndex] === 'object') {
|
||
// 修复索引：使用i而不是i+1，确保正确对应smallVideo-expanded-1, 2, 3
|
||
StructureEZUIKitPlayer(safeVideoList[videoIndex], i);
|
||
}
|
||
}
|
||
} else {
|
||
// 当前页后面视频不足3个，需要获取下一页的数据
|
||
await getNextPageData();
|
||
// 重新获取安全的视频列表
|
||
const updatedSafeNextPageVideoList = Array.isArray(nextPageVideoList.value) ? nextPageVideoList.value : [];
|
||
// 使用当前页后面的视频和下一页的前几个视频
|
||
let displayCount = 0;
|
||
|
||
// 先显示当前页后面的视频
|
||
for (let i = safeActiveIndex + 1; i < safeVideoList.length && displayCount < 3; i++) {
|
||
if (safeVideoList[i] && typeof safeVideoList[i] === 'object') {
|
||
// 修复索引：使用displayCount而不是displayCount+1
|
||
StructureEZUIKitPlayer(safeVideoList[i], displayCount);
|
||
displayCount++;
|
||
}
|
||
}
|
||
|
||
// 再显示下一页的视频补充到3个
|
||
for (let i = 0; i < updatedSafeNextPageVideoList.length && displayCount < 3; i++) {
|
||
if (updatedSafeNextPageVideoList[i] && typeof updatedSafeNextPageVideoList[i] === 'object') {
|
||
// 修复索引：使用displayCount而不是displayCount+1
|
||
StructureEZUIKitPlayer(updatedSafeNextPageVideoList[i], displayCount);
|
||
displayCount++;
|
||
}
|
||
}
|
||
}
|
||
} else {
|
||
// 普通布局：如果之前在扩展视图中使用了下一页数据，现在需要更新页码
|
||
if (hasUsedNextPageData.value) {
|
||
pageStart.value += 1;
|
||
// 重新获取第二页的9个视频数据
|
||
await getMonitoringListData();
|
||
hasUsedNextPageData.value = false;
|
||
}
|
||
// 初始化所有视频，添加更严格的类型检查
|
||
safeVideoList.forEach((item, index) => {
|
||
if (item && typeof item === 'object') {
|
||
StructureEZUIKitPlayer(item, index);
|
||
} else {
|
||
console.warn(`跳过无效的视频项: ${index}`);
|
||
}
|
||
});
|
||
}
|
||
}
|
||
|
||
const handlePageChange = (page: number) => {
|
||
pageStart.value = page;
|
||
// 这里可以添加分页逻辑
|
||
getData()
|
||
}
|
||
|
||
const handleSizeChange = (size: number) => {
|
||
// 根据当前视图类型设置合适的页面大小
|
||
// 扩展视图固定为4，普通视图固定为9
|
||
pageSize.value = isExpanded.value ? 4 : 9;
|
||
pageStart.value = 1;
|
||
getData()
|
||
}
|
||
|
||
// 清理所有播放器实例
|
||
const cleanupPlayers = () => {
|
||
// 清理当前页视频的播放器
|
||
videoList.value.forEach(item => {
|
||
if (item && item.player && typeof item.player.destroy === 'function') {
|
||
try {
|
||
// 尝试移除所有事件监听器
|
||
if (item.player.off) {
|
||
item.player.off('*');
|
||
}
|
||
// 销毁播放器实例
|
||
item.player.destroy();
|
||
}
|
||
catch (error) {
|
||
console.error('销毁播放器失败:', error);
|
||
}
|
||
// 确保播放器引用被清除
|
||
item.player = null;
|
||
}
|
||
});
|
||
|
||
// 清理下一页视频的播放器
|
||
nextPageVideoList.value.forEach(item => {
|
||
if (item && item.player && typeof item.player.destroy === 'function') {
|
||
try {
|
||
// 尝试移除所有事件监听器
|
||
if (item.player.off) {
|
||
item.player.off('*');
|
||
}
|
||
// 销毁播放器实例
|
||
item.player.destroy();
|
||
}
|
||
catch (error) {
|
||
console.error('销毁下一页视频播放器失败:', error);
|
||
}
|
||
// 确保播放器引用被清除
|
||
item.player = null;
|
||
}
|
||
});
|
||
}
|
||
|
||
// 监听isExpanded变化，根据不同情况处理数据请求
|
||
watch(isExpanded, async (newValue, oldValue) => {
|
||
// 保存当前activeIndex的值
|
||
const currentActiveIndex = activeIndex.value;
|
||
|
||
// 从扩展视图切换到普通视图，需要重新请求9个视频
|
||
if (newValue === false && oldValue === true) {
|
||
// 同步更新页面大小为9
|
||
pageSize.value = 9;
|
||
// 清理所有播放器实例
|
||
cleanupPlayers();
|
||
// 等待DOM更新
|
||
await nextTick();
|
||
// 重新请求9个视频数据
|
||
await getMonitoringListData();
|
||
// 再次等待DOM更新
|
||
await nextTick();
|
||
// 初始化视频
|
||
initVideo();
|
||
// 恢复保存的activeIndex值
|
||
activeIndex.value = currentActiveIndex;
|
||
}
|
||
// 从普通视图切换到扩展视图，不需要重新请求数据
|
||
else if (newValue === true && oldValue === false) {
|
||
// 同步更新页面大小为4
|
||
pageSize.value = 4;
|
||
// 清理所有播放器实例
|
||
cleanupPlayers();
|
||
// 等待DOM更新完成后再初始化视频
|
||
await nextTick();
|
||
// 再次等待，确保DOM完全渲染
|
||
await new Promise(resolve => setTimeout(resolve, 100));
|
||
// 初始化视频
|
||
initVideo();
|
||
}
|
||
});
|
||
|
||
watch(activeIndex, (newIndex) => {
|
||
if (isExpanded.value) {
|
||
// 当activeIndex变化时，重新初始化扩展布局中的视频
|
||
initVideo();
|
||
}
|
||
});
|
||
|
||
onMounted(() => {
|
||
// 组件挂载时获取一次token
|
||
getTokenData().then(() => {
|
||
// token获取成功后，获取视频数据
|
||
getData();
|
||
}).catch(error => {
|
||
console.error('获取token失败:', error);
|
||
});
|
||
});
|
||
|
||
// 组件卸载时销毁所有播放器
|
||
onUnmounted(() => {
|
||
cleanupPlayers();
|
||
});
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.el-col {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
// 视频包装器样式
|
||
.video-wrapper {
|
||
position: relative;
|
||
// 确保按钮在视频容器上方
|
||
}
|
||
|
||
.video-container {
|
||
.item {
|
||
height: 220px;
|
||
margin-bottom: 20px;
|
||
position: relative;
|
||
border: 2px solid rgba(45, 119, 249, 1);
|
||
cursor: pointer;
|
||
// 确保子元素正确定位
|
||
overflow: hidden;
|
||
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: block;
|
||
}
|
||
|
||
.title {
|
||
position: absolute;
|
||
padding: 5px 0;
|
||
padding-left: 10px;
|
||
font-size: 14px;
|
||
border-radius: 8px 8px 0px 0px;
|
||
background: linear-gradient(180deg, rgba(0, 0, 0, 0.73) 0%, rgba(0, 0, 0, 0.33) 100%);
|
||
width: 100%;
|
||
bottom: 0;
|
||
color: #fff;
|
||
z-index: 15;
|
||
}
|
||
}
|
||
|
||
// 视频动作按钮样式（放在最外层）
|
||
.video-action-btn {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
opacity: 0;
|
||
transition: opacity 0.3s ease;
|
||
z-index: 20;
|
||
pointer-events: none; // 防止按钮阻止鼠标悬停事件
|
||
}
|
||
|
||
// 右侧小视频的按钮容器样式
|
||
.video-action-btn.expanded {
|
||
display: flex;
|
||
gap: 10px;
|
||
}
|
||
|
||
// 鼠标悬停在视频包装器上时显示按钮
|
||
.video-wrapper:hover .video-action-btn {
|
||
opacity: 1;
|
||
}
|
||
|
||
// 鼠标悬停在视频上时添加半透明背景效果
|
||
.video-wrapper:hover .item::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: rgba(0, 0, 0, 0.2);
|
||
z-index: 5;
|
||
}
|
||
|
||
// 按钮本身需要有点击事件
|
||
.video-action-btn button {
|
||
pointer-events: auto;
|
||
}
|
||
|
||
// 大视频样式（高度与右侧三个小视频总高度对齐，考虑间距）
|
||
.large {
|
||
height: calc(220px * 3 + 20px * 2 + 40px); // 高度为3个小视频高度加上2个间距
|
||
|
||
.tools {
|
||
display: flex;
|
||
|
||
img {
|
||
width: 20px;
|
||
height: 20px;
|
||
display: block;
|
||
margin: 0 10px;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 小视频样式（保持原高度，适配右侧单列）
|
||
.small {
|
||
height: 235px;
|
||
}
|
||
}
|
||
</style> |