增加门禁可视化页面
This commit is contained in:
0
apps/web-antd/src/views/sis/acAdmin/data.ts
Normal file
0
apps/web-antd/src/views/sis/acAdmin/data.ts
Normal file
200
apps/web-antd/src/views/sis/acAdmin/dp-tree.vue
Normal file
200
apps/web-antd/src/views/sis/acAdmin/dp-tree.vue
Normal file
@@ -0,0 +1,200 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref, toRaw } from 'vue';
|
||||
import { SyncOutlined } from '@ant-design/icons-vue';
|
||||
import { InputSearch, message, Skeleton, Tree } from 'ant-design-vue';
|
||||
import { queryTree } from '#/api/sis/accessControl';
|
||||
import type { TreeNode } from '#/api/common';
|
||||
|
||||
defineOptions({ inheritAttrs: false });
|
||||
|
||||
withDefaults(defineProps<{ showSearch?: boolean }>(), { showSearch: true });
|
||||
|
||||
const emit = defineEmits<{
|
||||
checked: [];
|
||||
/**
|
||||
* 点击节点的事件
|
||||
*/
|
||||
reload: [];
|
||||
select: [];
|
||||
}>();
|
||||
|
||||
const searchValue = defineModel('searchValue', {
|
||||
type: String,
|
||||
default: '',
|
||||
});
|
||||
|
||||
/** 通道数据源 */
|
||||
const channelTree = ref<TreeNode[]>([]);
|
||||
/** 骨架屏加载 */
|
||||
const showTreeSkeleton = ref<boolean>(true);
|
||||
|
||||
async function loadChannelTree() {
|
||||
showTreeSkeleton.value = true;
|
||||
searchValue.value = '';
|
||||
const ret = await queryTree();
|
||||
handleNode(ret, 3);
|
||||
channelTree.value = ret;
|
||||
showTreeSkeleton.value = false;
|
||||
}
|
||||
|
||||
function handleNode(nodes: any[], level: number) {
|
||||
nodes.forEach((node) => {
|
||||
if (node.level < level) {
|
||||
node.disabled = true;
|
||||
}
|
||||
if (node.children) {
|
||||
handleNode(node.children, level);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async function handleReload() {
|
||||
await loadChannelTree();
|
||||
emit('reload');
|
||||
}
|
||||
|
||||
function open() {
|
||||
const acArr = checkNodeData();
|
||||
if (acArr) {
|
||||
console.log(acArr);
|
||||
}
|
||||
}
|
||||
|
||||
function close() {
|
||||
const acArr = checkNodeData();
|
||||
if (acArr) {
|
||||
console.log(acArr);
|
||||
}
|
||||
}
|
||||
|
||||
function alwaysOpen() {
|
||||
const acArr = checkNodeData();
|
||||
if (acArr) {
|
||||
console.log(acArr);
|
||||
}
|
||||
}
|
||||
|
||||
function reSet() {
|
||||
const acArr = checkNodeData();
|
||||
if (acArr) {
|
||||
console.log(acArr);
|
||||
}
|
||||
}
|
||||
|
||||
function checkNodeData() {
|
||||
const arr = Object.keys(checkData);
|
||||
if (!arr || arr.length === 0) {
|
||||
message.error('请先选择门禁');
|
||||
return false;
|
||||
}
|
||||
|
||||
const acArr: any = [];
|
||||
arr.forEach((item) => {
|
||||
const node: any = checkData[item];
|
||||
if (node.level == 5) {
|
||||
acArr.push(node);
|
||||
}
|
||||
});
|
||||
if (!acArr || acArr.length === 0) {
|
||||
message.error('请先选择门禁');
|
||||
return false;
|
||||
}
|
||||
return acArr;
|
||||
}
|
||||
|
||||
const checkData: any = {};
|
||||
|
||||
function onTreeCheck(_keys: any, nodes: any) {
|
||||
const { checked, checkedNodes } = nodes;
|
||||
// 找到需要播放的视频节点
|
||||
checkedNodes.forEach((node: any) => {
|
||||
const nodeData = toRaw(node);
|
||||
const id = nodeData.id;
|
||||
if (checked) {
|
||||
checkData[id] = nodeData;
|
||||
} else {
|
||||
delete checkData[id];
|
||||
}
|
||||
});
|
||||
const nodes = toRaw(checkedNodes);
|
||||
emit('checked', nodes);
|
||||
}
|
||||
|
||||
onMounted(loadChannelTree);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div :class="$attrs.class">
|
||||
<Skeleton
|
||||
:loading="showTreeSkeleton"
|
||||
:paragraph="{ rows: 8 }"
|
||||
active
|
||||
class="p-[8px]"
|
||||
>
|
||||
<div
|
||||
class="bg-background flex h-full flex-col overflow-y-auto rounded-lg pt-[5px]"
|
||||
>
|
||||
<div class="btn-gp">
|
||||
<a-button size="small" @click="open" type="primary">开门</a-button>
|
||||
<a-button size="small" @click="close" type="primary">关门</a-button>
|
||||
<a-button size="small" @click="alwaysOpen" type="primary"
|
||||
>常开
|
||||
</a-button>
|
||||
<a-button size="small" @click="reSet" type="primary"
|
||||
>恢复正常
|
||||
</a-button>
|
||||
</div>
|
||||
<!-- 固定在顶部 必须加上bg-background背景色 否则会产生'穿透'效果 -->
|
||||
<div
|
||||
v-if="showSearch"
|
||||
class="bg-background z-100 sticky left-0 top-0 p-[8px]"
|
||||
>
|
||||
<InputSearch
|
||||
v-model:value="searchValue"
|
||||
:placeholder="$t('pages.common.search')"
|
||||
size="small"
|
||||
>
|
||||
<template #enterButton>
|
||||
<a-button @click="handleReload">
|
||||
<SyncOutlined class="text-primary" />
|
||||
</a-button>
|
||||
</template>
|
||||
</InputSearch>
|
||||
</div>
|
||||
<div class="h-full overflow-x-hidden px-[8px]">
|
||||
<Tree
|
||||
v-bind="$attrs"
|
||||
v-if="channelTree.length > 0"
|
||||
:class="$attrs.class"
|
||||
:show-line="{ showLeafIcon: false }"
|
||||
:tree-data="channelTree"
|
||||
:virtual="false"
|
||||
checkable
|
||||
multiple
|
||||
@select="$emit('select')"
|
||||
@check="onTreeCheck"
|
||||
>
|
||||
<template #title="{ label }">
|
||||
<span v-if="label.indexOf(searchValue) > -1">
|
||||
{{ label.substring(0, label.indexOf(searchValue)) }}
|
||||
<span style="color: #f50">{{ searchValue }}</span>
|
||||
{{
|
||||
label.substring(
|
||||
label.indexOf(searchValue) + searchValue.length,
|
||||
)
|
||||
}}
|
||||
</span>
|
||||
<span v-else>{{ label }}</span>
|
||||
</template>
|
||||
</Tree>
|
||||
</div>
|
||||
</div>
|
||||
</Skeleton>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped>
|
||||
.btn-gp {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
</style>
|
||||
223
apps/web-antd/src/views/sis/acAdmin/index.vue
Normal file
223
apps/web-antd/src/views/sis/acAdmin/index.vue
Normal file
@@ -0,0 +1,223 @@
|
||||
<template>
|
||||
<Page :auto-content-height="true">
|
||||
<div class="flex h-full gap-[8px]">
|
||||
<DpTree class="h-[87vh] w-[300px]" @check="onNodeChecked" />
|
||||
<div class="bg-background flex-1">
|
||||
<div class="video-play-area flex h-full flex-wrap">
|
||||
<div
|
||||
v-for="i in playerNum"
|
||||
:style="playerStyle"
|
||||
class="player"
|
||||
:class="`layer-${i} ${currentSelectPlayerIndex == i ? selected : ''}`"
|
||||
@click="playerSelect(i)"
|
||||
>
|
||||
<video
|
||||
style="width: 100%; height: 100%"
|
||||
:ref="setItemRef"
|
||||
muted
|
||||
autoplay
|
||||
></video>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Page>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import DpTree from './dp-tree.vue';
|
||||
import { Page } from '@vben/common-ui';
|
||||
import { ref } from 'vue';
|
||||
import mpegts from "mpegts.js";
|
||||
import {addStreamProxy} from "#/api/sis/stream";
|
||||
import {message} from "ant-design-vue";
|
||||
|
||||
/**
|
||||
* 屏幕播放器数量
|
||||
*/
|
||||
const selected = 'selected';
|
||||
const playerNum = ref(4);
|
||||
/**
|
||||
* 屏幕播放器样式
|
||||
*/
|
||||
const playerStyle = ref({
|
||||
width: '50%',
|
||||
height: '50%',
|
||||
});
|
||||
const currentSelectPlayerIndex = ref(-1);
|
||||
|
||||
function playerSelect(index: number) {
|
||||
if (index === currentSelectPlayerIndex.value) {
|
||||
currentSelectPlayerIndex.value = -1;
|
||||
return;
|
||||
}
|
||||
currentSelectPlayerIndex.value = index;
|
||||
}
|
||||
|
||||
const itemRefs = ref<HTMLVideoElement[]>([]);
|
||||
const setItemRef = (el: any) => {
|
||||
if (el) {
|
||||
itemRefs.value.push(el);
|
||||
}
|
||||
};
|
||||
|
||||
function onNodeChecked(nodes: any[]) {
|
||||
console.log(nodes);
|
||||
}
|
||||
|
||||
// 播放器数据, 每一个位置代表页面上行的一个矩形
|
||||
const playerList: any[] = [];
|
||||
|
||||
|
||||
/**
|
||||
* 开始播放视频流
|
||||
* @param nodeData 播放的节点数据
|
||||
* @param index 播放器的索引信息
|
||||
*/
|
||||
function doPlayer(nodeData: any, index: number = 0) {
|
||||
console.log('index=', index);
|
||||
if (mpegts.isSupported()) {
|
||||
let params = {};
|
||||
// if (nodeData.nvrIp) {
|
||||
// params = {
|
||||
// videoIp: nodeData.nvrIp,
|
||||
// videoPort: nodeData.nvrPort,
|
||||
// factoryNo: nodeData.nvrFactoryNo,
|
||||
// account: nodeData.nvrAccount,
|
||||
// pwd: nodeData.nvrPwd,
|
||||
// channelId: nodeData.nvrChannelNo,
|
||||
// };
|
||||
// } else {
|
||||
params = {
|
||||
videoIp: nodeData.deviceIp,
|
||||
videoPort: nodeData.devicePort,
|
||||
factoryNo: nodeData.factoryNo,
|
||||
account: nodeData.deviceAccount,
|
||||
pwd: nodeData.devicePwd,
|
||||
channelId: nodeData.channelNo,
|
||||
};
|
||||
// }
|
||||
addStreamProxy(params).then((res) => {
|
||||
const url = res.wsFlv;
|
||||
// 将url 绑定到 nodeData
|
||||
nodeData.url = url;
|
||||
closePlayer(index);
|
||||
const videoConfig = {
|
||||
type: 'flv',
|
||||
url: url,
|
||||
isLive: true,
|
||||
hasAudio: false,
|
||||
hasVideo: true,
|
||||
enableWorker: true, // 启用分离的线程进行转码
|
||||
enableStashBuffer: false, // 关闭IO隐藏缓冲区
|
||||
stashInitialSize: 256, // 减少首帧显示等待时长
|
||||
};
|
||||
const playerConfig = {
|
||||
enableErrorRecover: true, // 启用错误恢复
|
||||
autoCleanupMaxBackwardDuration: 30,
|
||||
autoCleanupMinBackwardDuration: 10,
|
||||
};
|
||||
const player = mpegts.createPlayer(videoConfig, playerConfig);
|
||||
const videoElement = itemRefs.value[index];
|
||||
if (videoElement) {
|
||||
player.attachMediaElement(videoElement);
|
||||
player.load();
|
||||
player.play();
|
||||
playerList[index] = {
|
||||
player,
|
||||
data: nodeData,
|
||||
};
|
||||
} else {
|
||||
console.log('视频播放元素获取异常');
|
||||
}
|
||||
});
|
||||
} else {
|
||||
message.error('浏览器不支持播放');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function changeElPlayer(playerInfo: any, index: number) {
|
||||
const playerData = playerInfo.data;
|
||||
const oldPlayer = playerInfo.player;
|
||||
if (oldPlayer) {
|
||||
closePlayVieo(oldPlayer);
|
||||
}
|
||||
const videoConfig = {
|
||||
type: 'flv',
|
||||
url: playerData.url,
|
||||
isLive: true,
|
||||
hasAudio: false,
|
||||
hasVideo: true,
|
||||
enableWorker: true, // 启用分离的线程进行转码
|
||||
enableStashBuffer: false, // 关闭IO隐藏缓冲区
|
||||
stashInitialSize: 256, // 减少首帧显示等待时长
|
||||
};
|
||||
const playerConfig = {
|
||||
enableErrorRecover: true, // 启用错误恢复
|
||||
autoCleanupMaxBackwardDuration: 30,
|
||||
autoCleanupMinBackwardDuration: 10,
|
||||
};
|
||||
const player = mpegts.createPlayer(videoConfig, playerConfig);
|
||||
const videoElement = itemRefs.value[index];
|
||||
if (videoElement) {
|
||||
player.attachMediaElement(videoElement);
|
||||
player.load();
|
||||
player.play();
|
||||
playerList[index] = {
|
||||
player,
|
||||
data: playerData,
|
||||
};
|
||||
} else {
|
||||
console.log('视频播放元素获取异常');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function closePlayVieo(plInfo: any) {
|
||||
if (plInfo) {
|
||||
try {
|
||||
plInfo.pause(); // 暂停
|
||||
plInfo.unload(); // 卸载
|
||||
plInfo.destroy(); // 销毁
|
||||
} catch (e) {
|
||||
console.log('播放器关闭失败，e=', e);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function closePlayer(index: number) {
|
||||
// 如果播放器存在，尝试关闭
|
||||
const pData = playerList[index];
|
||||
if (pData) {
|
||||
try {
|
||||
const player = pData.player;
|
||||
player.pause(); // 暂停
|
||||
player.unload(); // 卸载
|
||||
player.destroy(); // 销毁
|
||||
playerList[index] = null;
|
||||
} catch (e) {
|
||||
console.log('播放器关闭失败，e=', e);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
<style>
|
||||
.player {
|
||||
border: 1px solid #e4e4e7;
|
||||
cursor: pointer;
|
||||
|
||||
video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: fill;
|
||||
}
|
||||
}
|
||||
|
||||
.player.selected {
|
||||
border: 2px solid deepskyblue;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user