增加门禁可视化页面

apps/web-antd/src/views/sis/acAdmin/dp-tree.vue

@@ -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>

apps/web-antd/src/views/sis/acAdmin/index.vue

@@ -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>

apps/web-antd/src/views/sis/accessControl/device/accessControlModal.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed, ref } from 'vue';
 
-import { useVbenModal } from '@vben/common-ui'
+import { useVbenModal } from '@vben/common-ui';
-import { $t } from '@vben/locales'
+import { $t } from '@vben/locales';
-import { cloneDeep, getPopupContainer, handleNode } from '@vben/utils'
+import { cloneDeep, getPopupContainer, handleNode } from '@vben/utils';
 
-import { useVbenForm } from '#/adapter/form'
+import { useVbenForm } from '#/adapter/form';
 import {
   accessControlAdd,
   accessControlInfo,
@@ -14,15 +14,15 @@ import {
 import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
 import { communityTree } from '#/api/property/community';
 import { modalSchema } from './data';
-import type {DeviceManageQuery} from "#/api/sis/deviceManage/model";
+import type { DeviceManageQuery } from '#/api/sis/deviceManage/model';
-import {deviceManageList} from "#/api/sis/deviceManage";
+import { deviceManageList } from '#/api/sis/deviceManage';
 
-const emit = defineEmits<{ reload: [] }>()
+const emit = defineEmits<{ reload: [] }>();
 
-const isUpdate = ref(false)
+const isUpdate = ref(false);
 const title = computed(() => {
-  return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add')
+  return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
-})
+});
 
 const [BasicForm, formApi] = useVbenForm({
   commonConfig: {
@@ -38,14 +38,14 @@ const [BasicForm, formApi] = useVbenForm({
   schema: modalSchema(),
   showDefaultActions: false,
   wrapperClass: 'grid-cols-1',
-})
+});
 
 const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
   {
     initializedGetter: defaultFormValueGetter(formApi),
     currentGetter: defaultFormValueGetter(formApi),
   },
-)
+);
 
 const [BasicModal, modalApi] = useVbenModal({
   // 在这里更改宽度
@@ -56,58 +56,58 @@ const [BasicModal, modalApi] = useVbenModal({
   onConfirm: handleConfirm,
   onOpenChange: async (isOpen) => {
     if (!isOpen) {
-      return null
+      return null;
     }
-    modalApi.modalLoading(true)
+    modalApi.modalLoading(true);
-    setupCommunitySelect()
+    setupCommunitySelect();
-    const { id } = modalApi.getData() as { id?: number | string }
+    const { id } = modalApi.getData() as { id?: number | string };
-    isUpdate.value = !!id
+    isUpdate.value = !!id;
 
     if (isUpdate.value && id) {
-      const record = await accessControlInfo(id)
+      const record = await accessControlInfo(id);
-      await formApi.setValues(record)
+      await formApi.setValues(record);
     }
-    await markInitialized()
+    await markInitialized();
 
-    modalApi.modalLoading(false)
+    modalApi.modalLoading(false);
   },
-})
+});
 
 async function handleConfirm() {
   try {
-    modalApi.lock(true)
+    modalApi.lock(true);
-    const { valid } = await formApi.validate()
+    const { valid } = await formApi.validate();
     if (!valid) {
-      return
+      return;
     }
     // getValues获取为一个readonly的对象 需要修改必须先深拷贝一次
-    const data = cloneDeep(await formApi.getValues())
+    const data = cloneDeep(await formApi.getValues());
-    await (isUpdate.value ? accessControlUpdate(data) : accessControlAdd(data))
+    await (isUpdate.value ? accessControlUpdate(data) : accessControlAdd(data));
-    resetInitialized()
+    resetInitialized();
-    emit('reload')
+    emit('reload');
-    modalApi.close()
+    modalApi.close();
   } catch (error) {
-    console.error(error)
+    console.error(error);
   } finally {
-    modalApi.lock(false)
+    modalApi.lock(false);
   }
 }
 
 async function setupCommunitySelect() {
-  const areaList = await communityTree(3)
+  const areaList = await communityTree(3);
   // 选中后显示在输入框的值 即父节点 / 子节点
   // addFullName(areaList, 'areaName', ' / ');
-  const splitStr = '/'
+  const splitStr = '/';
   handleNode(areaList, 'label', splitStr, function (node: any) {
     if (node.level != 3) {
-      node.disabled = true
+      node.disabled = true;
     }
-  })
+  });
   // 加载监控
   const params: DeviceManageQuery = {
     pageNum: 1,
     pageSize: 500,
-    deviceType: 1
+    deviceType: 1,
   };
   const res = await deviceManageList(params);
   const arr = res.rows.map((item) => {
@@ -116,8 +116,8 @@ async function setupCommunitySelect() {
       value: item.id,
       deviceIp: item.deviceIp,
       deviceId: item.id,
-    }
+    };
-  })
+  });
   formApi.updateSchema([
     {
       componentProps: () => ({
@@ -158,8 +158,8 @@ async function setupCommunitySelect() {
 }
 
 async function handleClosed() {
-  await formApi.resetForm()
+  await formApi.resetForm();
-  resetInitialized()
+  resetInitialized();
 }
 </script>
 

apps/web-antd/vite.config.mts

@@ -29,7 +29,7 @@ export default defineConfig(async () => {
             // mock代理目标地址
             // target: 'http://192.168.43.169:8080',
             // target: 'https://by.missmoc.top/api/',
-            target: 'http://192.168.13.27:8080',
+            target: 'http://127.0.0.1:8080',
             // target: 'http://192.168.0.106:8080',
             // target: 'http://47.109.37.87:3010',
             ws: true,