视频监控页面修改

This commit is contained in:
lxj
2025-07-25 21:31:43 +08:00
parent 85e021b5ac
commit 241bf03b1a
3 changed files with 40 additions and 9 deletions

View File

@@ -14,6 +14,7 @@
<!-- 由 vite 注入 VITE_APP_TITLE 变量,在 .env 文件内配置 -->
<title><%= VITE_APP_TITLE %></title>
<link rel="icon" href="/favicon.ico" />
<script type="text/javascript" src="/EasyPlayer-element.min.js"></script>
</head>
<body>
<div id="app"></div>

View File

@@ -2,11 +2,11 @@
<Page class="h-full w-full">
<!-- 设备分组区域 -->
<div class="flex h-full gap-[8px]">
<ChannelTree class="w-[260px]" @check="onNodeChecked" />
<ChannelTree class="h-[83vh] w-[260px]" @check="onNodeChecked" />
<!-- 设备分组区域 -->
<div class="bg-background flex-1">
<div class="video-play-area flex h-[calc(100%-40px)] flex-wrap">
<div class="video-play-area flex h-[calc(100%-30px)] flex-wrap">
<div
v-for="i in playerNum"
:style="playerStyle"
@@ -22,11 +22,19 @@
></video>
</div>
</div>
<div class="player-area flex h-[40px] gap-[5px]">
<div @click="onPlayerNumChanged(1)" class="h-[40px] w-[40px]">1</div>
<div @click="onPlayerNumChanged(2)" class="h-[40px] w-[40px]">2</div>
<div @click="onPlayerNumChanged(3)" class="h-[40px] w-[40px]">3</div>
<div @click="onPlayerNumChanged(4)" class="h-[40px] w-[40px]">4</div>
<div class="player-area flex h-[30px] gap-[5px]">
<div @click="onPlayerNumChanged(1)" class="h-[20px] w-[20px]">
<Svg1FrameIcon style="width: 100%; height: 100%" />
</div>
<div @click="onPlayerNumChanged(2)" class="h-[20px] w-[20px]">
<Svg4FrameIcon style="width: 100%; height: 100%" />
</div>
<div @click="onPlayerNumChanged(3)" class="h-[20px] w-[20px]">
<Svg9FrameIcon style="width: 100%; height: 100%" />
</div>
<div @click="onPlayerNumChanged(4)" class="h-[20px] w-[20px]">
<Svg16FrameIcon style="width: 100%; height: 100%" />
</div>
</div>
</div>
</div>
@@ -40,6 +48,12 @@ import ChannelTree from './channel-tree.vue';
import mpegts from 'mpegts.js';
import { message } from 'ant-design-vue';
import { addStreamProxy } from '#/api/sis/stream';
import {
Svg16FrameIcon,
Svg1FrameIcon,
Svg4FrameIcon,
Svg9FrameIcon,
} from '@vben/icons';
const selected = 'selected';
@@ -112,7 +126,6 @@ function onPlayerNumChanged(val: number) {
playerNum.value = changeNum;
// 缩小布局
if (changeBeforeNum > changeNum) {
debugger;
const playerArr = [];
for (let i = 0; i < playerList.length; i++) {
const playerBox = playerList[i];
@@ -176,7 +189,6 @@ function onNodeChecked(
/**
* 如果当前页面有选择播放未知,并且播放视频只有一个,则播放到制定位置
*/
debugger;
if (currentSelectPlayerIndex.value !== -1 && checkNode.length == 1) {
doPlayer(checkNode[0], currentSelectPlayerIndex.value - 1);
}
@@ -360,4 +372,10 @@ onUnmounted(() => {
.player.selected {
border: 2px solid deepskyblue;
}
.player-area {
display: flex;
align-items: center;
cursor: pointer;
}
</style>