taoge_xiaodi/maintenance_system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(视频监控): 新增摄像头预置位管理和视频监控功能

Browse Source 
新增摄像头预置位管理功能，包括添加、修改、删除和调用预置位
实现视频监控页面，支持扩展视图和普通视图切换
添加获取摄像头列表接口，优化视频播放器初始化逻辑
完善分页功能，根据视图类型动态调整请求数量
This commit is contained in:
tcy
2025-09-23 20:37:04 +08:00
parent f79eecd247
commit 4163b11d3d
6 changed files with 959 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

203
src/views/securitySurveillance/components/spjk.vue
View File

@ -23,14 +23,14 @@
:id="`bigVideo`">
<div class="title" v-if="isExpanded"
style="display: flex;justify-content: space-between;">
<div class="text">
<!-- <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>
<!-- 大视频的切换视图按钮 -->
@ -49,8 +49,8 @@
const displayIndex = (activeIndex + i) % videoList.length;
activeIndex = displayIndex;
}" :id="`smallVideo-expanded-${i}`">
<div class="title">{{ videoList[(activeIndex + i) % videoList.length].name }}
</div>
<!-- <div class="title">{{ videoList[(activeIndex + i) % videoList.length].name }}
</div> -->
</div>
<!-- 小视频的两个按钮：切换视图和查看视频 -->
<div class="video-action-btn expanded">
@ -71,7 +71,7 @@
<el-col :span="8" v-for="(item, index) in videoList" :key="index" class="video-wrapper">
<!-- 视频容器 -->
<div class="item" :id="`smallVideo-${index + 1}`" ref="smallVideoRef">
<div class="title">{{ item.name }}</div>
<!-- <div class="title">{{ item.name }}</div> -->
</div>
<!-- 按钮放在最外层，与视频容器同级 -->
<div class="video-action-btn">
@ -86,7 +86,7 @@
<el-row v-if="!isExpanded">
<div class="pagination" v-if="activeTab !== 'record'">
<el-pagination layout="prev, pager, next, jumper, sizes" :total="totalRecords"
v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[20, 50, 100]"
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>
@ -96,59 +96,27 @@
</template>
<script setup lang="ts">
import { ref, onMounted, watch, nextTick, onUnmounted } from 'vue';
import { Refresh } from '@element-plus/icons-vue';
import EZUIKit from 'ezuikit-js';
import TitleComponent from '@/components/TitleComponent';
import { getToken } from '@/api/securitySurveillance/index.js';
// import TitleComponent from '@/components/TitleComponent';
import { getToken, getMonitoringList } from '@/api/securitySurveillance/index.js';
import { ref, onMounted, watch, nextTick, onUnmounted } from 'vue';
const activeIndex = ref(0); // 初始选中第一个视频
const isExpanded = ref(true); // 初始为普通布局
const pageSize = ref(20);
const totalRecords = ref(100);
const isExpanded = ref(true); // 初始为扩展
const accessToken = ref('')
const currentPage = ref(1);
const pageStart = ref(1);
const pageSize = ref(4); // 默认请求4个视频（扩展布局）
const totalRecords = ref(0);
const activeTab = ref('live');
const bigVideoRef = ref<HTMLDivElement>(null);
const smallVideoRef = ref<HTMLDivElement>(null);
const videoList = ref([
{
name: 'A区d厂',
url: 'https://img.js.design/assets/img/68c144e8ba276a0e8a4a55c2.jpeg#bab7e2e06aae943525cacb13bd63e30d'
},
{
name: 'A区d厂',
url: 'https://img.js.design/assets/img/68c144efb5e8b987e5ca6462.jpeg#5523cf094b2f8c3a79ea4eb330c99a30'
},
{
name: 'A区d厂',
url: 'https://img.js.design/assets/img/68c144fbbad414f81995e90c.webp#230d8ca5ca39982518439db26e0ea899'
},
{
name: 'A区d厂',
url: 'https://img.js.design/assets/img/68c1450640d5d2a02e2540b2.webp#adad2379a0b04d6968364e4fb1133f77'
},
{
name: 'A区d厂',
url: 'https://img.js.design/assets/img/68c14543d56431f9d6f6808e.webp#16f0a0d8fab4f8ff3b39b04bfabac054'
},
{
name: 'A区d厂',
url: 'https://img.js.design/assets/img/68c14578d56431f9d6f68981.jpg#e77150417f28a971be4846eb0be90373'
},
{
name: 'A区d厂',
url: 'https://img.js.design/assets/img/68c145e03f22157da619a7ce.png#546ff44289a22bf175e1eca1f69cd8f9'
},
{
name: 'A区d厂',
url: 'https://img.js.design/assets/img/68c1461fb5e8b987e5caa293.jpeg#870e4d2b88b487ecb8f2f0b956c45c08'
},
{
name: 'A区d厂',
url: 'https://img.js.design/assets/img/68c1462dcbf9ed2271880b95.webp#ae7ae94ca84ce980e2d2281869335f06'
}
]);
const videoList = ref([]);
// 存储第二页的数据，用于处理扩展视图右边视频不足的情况
const nextPageVideoList = ref([]);
// 标记是否已经使用了下一页的数据
const hasUsedNextPageData = ref(false);
const StructureEZUIKitPlayer = (item: any, index: number, isBig = false) => {
const containerId = isBig ? 'bigVideo' : isExpanded.value ? `smallVideo-expanded-${index + 1}` : `smallVideo-${index + 1}`;
@ -158,7 +126,8 @@ const StructureEZUIKitPlayer = (item: any, index: number, isBig = false) => {
if (item.player) {
try {
item.player.destroy();
} catch (error) {
}
catch (error) {
console.error('销毁播放器失败:', error);
}
item.player = null;
@ -169,12 +138,13 @@ const StructureEZUIKitPlayer = (item: any, index: number, isBig = false) => {
audio: '0',
id: containerId,
accessToken: accessToken.value,
url: "ezopen://open.ys7.com/GA1044316/1.hd.live",
url: `ezopen://open.ys7.com/${item.deviceSerial}/1.hd.live`,
template: "pcLive",
width: container.clientWidth,
height: container.clientHeight,
plugin: ['talk']
});
}
};
@ -182,14 +152,42 @@ const StructureEZUIKitPlayer = (item: any, index: number, isBig = false) => {
const getTokenData = async () => {
const { data } = await getToken()
accessToken.value = data
initVideo()
}
// 获取摄像头列表
const getMonitoringListData = async () => {
// 根据当前视图类型设置请求数量
const currentPageSize = isExpanded.value ? 4 : 9;
const { data } = await getMonitoringList({
pageStart: pageStart.value,
pageSize: currentPageSize
})
// totalRecords.value = data.total
videoList.value = data
}
// 获取下一页视频数据
const getNextPageData = async () => {
const { data } = await getMonitoringList({
pageStart: pageStart.value + 1,
pageSize: 3 // 只需要3个视频
})
nextPageVideoList.value = data;
// 标记已经使用了下一页的数据
hasUsedNextPageData.value = true;
}
const getData = async () => {
await getTokenData()
// 先清理所有播放器
cleanupPlayers();
// 不再每次都获取token，token只在组件挂载时获取一次
await getMonitoringListData()
// 不再重置activeIndex，保留用户之前选择的视频索引
// 等待DOM更新后初始化视频
await nextTick();
initVideo()
}
const initVideo = () => {
const initVideo = async () => {
// 先清理所有视频容器的内容，避免残留
if (bigVideoRef.value) {
bigVideoRef.value.innerHTML = '';
@ -198,12 +196,45 @@ const initVideo = () => {
if (isExpanded.value) {
// 扩展布局：初始化大视频和右侧3个小视频
StructureEZUIKitPlayer(videoList.value[activeIndex.value], 0, true);
for (let i = 0; i < 3; i++) {
const displayIndex = (activeIndex.value + i + 1) % videoList.value.length;
StructureEZUIKitPlayer(videoList.value[displayIndex], i);
// 检查当前视频后面是否有足够的视频
const remainingVideos = videoList.value.length - activeIndex.value - 1;
if (remainingVideos >= 3) {
// 当前页后面有足够的视频，直接使用当前页的数据
for (let i = 0; i < 3; i++) {
const displayIndex = activeIndex.value + i + 1;
StructureEZUIKitPlayer(videoList.value[displayIndex], i);
}
// 重置已使用下一页数据的标记
hasUsedNextPageData.value = false;
} else {
// 当前页后面视频不足3个，需要获取下一页的数据
await getNextPageData();
// 使用当前页后面的视频和下一页的前几个视频
let displayCount = 0;
// 先显示当前页后面的视频
for (let i = activeIndex.value + 1; i < videoList.value.length && displayCount < 3; i++) {
StructureEZUIKitPlayer(videoList.value[i], displayCount);
displayCount++;
}
// 再显示下一页的视频补充到3个
for (let i = 0; i < nextPageVideoList.value.length && displayCount < 3; i++) {
StructureEZUIKitPlayer(nextPageVideoList.value[i], displayCount);
displayCount++;
}
}
} else {
// 普通布局：初始化所有视频
// 普通布局：如果之前在扩展视图中使用了下一页数据，现在需要更新页码
if (hasUsedNextPageData.value) {
pageStart.value += 1;
// 重新获取第二页的9个视频数据
await getMonitoringListData();
hasUsedNextPageData.value = false;
}
// 初始化所有视频
videoList.value.forEach((item, index) => {
StructureEZUIKitPlayer(item, index);
});
@ -211,38 +242,62 @@ const initVideo = () => {
}
const handlePageChange = (page: number) => {
currentPage.value = page;
pageStart.value = page;
// 这里可以添加分页逻辑
}
const handleSizeChange = (size: number) => {
pageSize.value = size;
currentPage.value = 1;
pageStart.value = 1;
// 这里可以添加分页逻辑
}
// 清理所有播放器实例
const cleanupPlayers = () => {
videoList.value.forEach(item => {
console.log(item);
if (item.player) {
try {
item.player.destroy();
} catch (error) {
}
catch (error) {
console.error('销毁播放器失败:', error);
}
item.player = null;
}
});
// 清理下一页视频的播放器
nextPageVideoList.value.forEach(item => {
if (item.player) {
try {
item.player.destroy();
}
catch (error) {
console.error('销毁下一页视频播放器失败:', error);
}
item.player = null;
}
});
}
// 监听isExpanded变化，重新初始化视频
// 监听isExpanded变化，根据不同情况处理数据请求
watch(isExpanded, async (newValue, oldValue) => {
// 确保DOM已经更新
await nextTick();
// 重新初始化视频，确保在切换布局时正确显示
initVideo();
// 保存当前activeIndex的值
const currentActiveIndex = activeIndex.value;
// 从扩展视图切换到普通视图，需要重新请求9个视频
if (newValue === false && oldValue === true) {
// 重新请求9个视频数据
await getData();
// 恢复保存的activeIndex值
activeIndex.value = currentActiveIndex;
}
// 从普通视图切换到扩展视图，不需要重新请求数据
else if (newValue === true && oldValue === false) {
// 但是需要重新初始化视频布局
await nextTick();
initVideo();
}
});
watch(activeIndex, (newIndex) => {
@ -253,7 +308,13 @@ watch(activeIndex, (newIndex) => {
});
onMounted(() => {
getData()
// 组件挂载时获取一次token
getTokenData().then(() => {
// token获取成功后，获取视频数据
getData();
}).catch(error => {
console.error('获取token失败:', error);
});
});
// 组件卸载时销毁所有播放器