by2025/admin-vben5
9
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

视频监控页面修改

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
apps/web-antd/index.html
View File

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

36
apps/web-antd/src/views/sis/video/index.vue
View File

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

12
packages/icons/src/svg/index.ts
View File

@ -16,8 +16,20 @@ const SvgTopiamIcon = createIconifyIcon('svg:topiam');
const SvgWechatIcon = createIconifyIcon('svg:wechat'); const SvgWechatIcon = createIconifyIcon('svg:wechat');
const SvgQQIcon = createIconifyIcon('svg:qq'); const SvgQQIcon = createIconifyIcon('svg:qq');
const SvgSnailJobIcon = createIconifyIcon('svg:snail-job'); const SvgSnailJobIcon = createIconifyIcon('svg:snail-job');
/*---------------------------------sis 使用的icon------------------------------------------*/
const Svg1FrameIcon = createIconifyIcon('svg:one-frame');
const Svg4FrameIcon = createIconifyIcon('svg:four-frame');
const Svg9FrameIcon = createIconifyIcon('svg:9-frame');
const Svg16FrameIcon = createIconifyIcon('svg:16-frame');
export { export {
Svg1FrameIcon,
Svg4FrameIcon,
Svg9FrameIcon,
Svg16FrameIcon,
SvgAntdvLogoIcon, SvgAntdvLogoIcon,
SvgAvatar1Icon, SvgAvatar1Icon,
SvgAvatar2Icon, SvgAvatar2Icon,