From 50928d9d33216ddefdcb3b6713c9621ef013797c Mon Sep 17 00:00:00 2001
From: lxj <15683799673@163.com>
Date: Mon, 8 Sep 2025 02:04:27 +0800
Subject: [PATCH 1/6] =?UTF-8?q?=E5=A4=84=E7=90=86=E6=A0=87=E7=AD=BE?=
 =?UTF-8?q?=E5=88=87=E6=8D=A2=E8=A7=86=E9=A2=91=E6=9A=82=E5=81=9C=E7=9A=84?=
 =?UTF-8?q?BUG?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web-antd/src/views/sis/video/index.vue | 45 +++++++++++++++++----
 1 file changed, 37 insertions(+), 8 deletions(-)

diff --git a/apps/web-antd/src/views/sis/video/index.vue b/apps/web-antd/src/views/sis/video/index.vue
index 82f64f8b..b7247a16 100644
--- a/apps/web-antd/src/views/sis/video/index.vue
+++ b/apps/web-antd/src/views/sis/video/index.vue
@@ -64,7 +64,14 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted, ref, toRaw } from 'vue';
+import {
+  onActivated,
+  onDeactivated,
+  onMounted,
+  onUnmounted,
+  ref,
+  toRaw,
+} from 'vue';
 import { Loading, Page } from '@vben/common-ui';
 import ChannelTree from './channel-tree.vue';
 import mpegts from 'mpegts.js';
@@ -363,7 +370,7 @@ function doPlayer(nodeData: any, index: number = 0) {
     streamProxy(nodeData, (res: AddStreamProxyResult) => {
       const host = window.location.host;
       const url = `ws://${host}/${res.app}/${res.streamId}.live.flv`;
-      // const url = `ws://183.230.235.66:11010/${res.app}/${res.streamId}.live.flv`;
+      // const url = `ws://192.168.24.101:28080/${res.app}/${res.streamId}.live.flv`;
       // 将url 绑定到 nodeData
       nodeData.url = url;
       closePlayer(index);
@@ -402,13 +409,13 @@ function doPlayer(nodeData: any, index: number = 0) {
   }
 }
 
-function closePlayVieo(plInfo: any) {
-  if (plInfo) {
+function closePlayVieo(player: any) {
+  if (player) {
     try {
-      plInfo.pause(); // 暂停
-      plInfo.unload(); // 卸载
-      plInfo.detachMediaElement();
-      plInfo.destroy(); // 销毁
+      player.pause(); // 暂停
+      player.unload(); // 卸载
+      player.detachMediaElement();
+      player.destroy(); // 销毁
       treeSelectHandle();
     } catch (e) {
       console.log('播放器关闭失败，e=', e);
@@ -448,6 +455,28 @@ onUnmounted(() => {
   }
 });
 
+onActivated(() => {
+  if (cachePlayerData.length != 0) {
+    cachePlayerData.forEach((v, k) => {
+      doPlayer(v, k);
+    });
+  }
+  cachePlayerData = [];
+});
+
+let cachePlayerData: any[] = [];
+// 离开页面触发
+onDeactivated(() => {
+  // 为了避免浪费带宽和性能，离开页面的时候默认关闭当前播放的视频
+  playerList.forEach((playerInfo) => {
+    if (playerInfo) {
+      const { data, player } = playerInfo;
+      cachePlayerData.push(data);
+      closePlayer(player);
+    }
+  });
+});
+
 function catchUp() {
   playerList.forEach((playerData) => {
     if (playerData) {

From cf40beb817171bf3710122b5f8fbec18b4d6d7af Mon Sep 17 00:00:00 2001
From: dev_ljl <2590379346@qq.com>
Date: Mon, 8 Sep 2025 17:00:51 +0800
Subject: [PATCH 2/6]  .

---
 apps/web-antd/src/views/dashboard/analytics/index.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/apps/web-antd/src/views/dashboard/analytics/index.vue b/apps/web-antd/src/views/dashboard/analytics/index.vue
index a0c9d5ab..71f79cce 100644
--- a/apps/web-antd/src/views/dashboard/analytics/index.vue
+++ b/apps/web-antd/src/views/dashboard/analytics/index.vue
@@ -123,8 +123,7 @@ async function getCarCount() {
   endDate.setHours(23, 59, 59, 999);
   // 转换为正确的 ISO 格式，考虑时区偏移
   const toLocalISOString = (date: Date) => {
-    const timezoneOffset = date.getTimezoneOffset() * 60000; // 转换为毫秒
-    const localTime = new Date(date.getTime() - timezoneOffset);
+    const localTime = new Date(date.getTime());
     return localTime.toISOString().slice(0, -1) + 'Z';
   };
   const response = await fetch(

From ea896175abd7f6fb98aebb2ff7063b8521ae4662 Mon Sep 17 00:00:00 2001
From: lxj <15683799673@163.com>
Date: Mon, 8 Sep 2025 17:50:44 +0800
Subject: [PATCH 3/6] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E4=BA=8B=E4=BB=B6BUG?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web-antd/src/api/sis/stream/index.ts     |  10 +-
 apps/web-antd/src/api/sis/stream/model.d.ts   |   4 +
 .../src/views/sis/video/playback/index.vue    |  68 ++-
 .../views/sis/video/realtime/channel-tree.vue | 139 +++++
 .../src/views/sis/video/realtime/data.ts      |   4 +
 .../src/views/sis/video/realtime/index.vue    | 495 ++++++++++++++++++
 .../videoWarning/videoWarningHasDone/data.ts  |  19 +-
 .../videoWarningHasDone/warning-detail.vue    |   2 +-
 .../videoWarningProcessing/data.ts            |  28 +-
 .../videoWarningProcessing/warning-detail.vue |   2 +-
 .../videoWarning/videoWarningToDone/data.ts   |  29 +-
 .../videoWarning/videoWarningToDone/index.vue |   2 +-
 .../videoWarningToDone/warning-detail.vue     |  19 +-
 13 files changed, 763 insertions(+), 58 deletions(-)
 create mode 100644 apps/web-antd/src/views/sis/video/realtime/channel-tree.vue
 create mode 100644 apps/web-antd/src/views/sis/video/realtime/data.ts
 create mode 100644 apps/web-antd/src/views/sis/video/realtime/index.vue

diff --git a/apps/web-antd/src/api/sis/stream/index.ts b/apps/web-antd/src/api/sis/stream/index.ts
index 87e18d94..5d77780d 100644
--- a/apps/web-antd/src/api/sis/stream/index.ts
+++ b/apps/web-antd/src/api/sis/stream/index.ts
@@ -1,4 +1,4 @@
-import type { AddStreamProxyResult } from './model';
+import type {AddStreamProxyResult, SdkPlayBack} from './model';
 import { requestClient } from '#/api/request';
 
 /**
@@ -30,3 +30,11 @@ export function addFFmpegMediaStreamProxy(params?: any) {
     params,
   );
 }
+
+/**
+ * sdk回放
+ * @param params
+ */
+export function playBack(params?: any) {
+  return requestClient.post<SdkPlayBack>('sis/stream/sdk/plackBack', params);
+}
diff --git a/apps/web-antd/src/api/sis/stream/model.d.ts b/apps/web-antd/src/api/sis/stream/model.d.ts
index dde8e896..7e2be7f4 100644
--- a/apps/web-antd/src/api/sis/stream/model.d.ts
+++ b/apps/web-antd/src/api/sis/stream/model.d.ts
@@ -22,3 +22,7 @@ export interface AddStreamProxyQuery {
   stream:string;
 
 }
+
+export interface SdkPlayBack {
+  wsUrl:string;
+}
diff --git a/apps/web-antd/src/views/sis/video/playback/index.vue b/apps/web-antd/src/views/sis/video/playback/index.vue
index 56f66a49..d7eb6656 100644
--- a/apps/web-antd/src/views/sis/video/playback/index.vue
+++ b/apps/web-antd/src/views/sis/video/playback/index.vue
@@ -43,8 +43,8 @@
           <!--    视频回放操作栏      -->
           <div class="play-option flex h-[40px] w-full gap-10">
             <div class="left flex-1"></div>
-            <div class="mid flex flex-1 items-center content-center gap-5">
-              <div class="playing-time h-full w-[120px] flex items-center">
+            <div class="mid flex flex-1 content-center items-center gap-5">
+              <div class="playing-time flex h-full w-[120px] items-center">
                 <DatePicker v-model:value="playDate" :allow-clear="false" />
               </div>
 
@@ -85,9 +85,8 @@ import ChannelTree from './channel-tree.vue';
 import Process from './process.vue';
 import mpegts from 'mpegts.js';
 import { DatePicker, message } from 'ant-design-vue';
-import { addStreamProxy } from '#/api/sis/stream';
+import { addStreamProxy, playBack } from '#/api/sis/stream';
 import { checkHEVCSupport } from '#/utils/video';
-import type { AddStreamProxyResult } from '#/api/sis/stream/model';
 import { CaretRightOutlined, PauseCircleOutlined } from '@ant-design/icons-vue';
 import type { Dayjs } from 'dayjs';
 import dayjs from 'dayjs';
@@ -224,15 +223,6 @@ function onTreeSelect(_key: any, selectNode: any) {
     if (selected) {
       doPlayer(data, currentSelectPlayerIndex.value);
     }
-    // 取消播放
-    else {
-      for (let i = 0; i < playerNum.value; i++) {
-        const player = playerList[i];
-        if (player && player.data.id === data.id) {
-          closePlayer(i);
-        }
-      }
-    }
   } else {
     message.error('请选择摄像头');
   }
@@ -379,7 +369,53 @@ function streamProxy(nodeData: any, cb: Function) {
 function doPlayer(nodeData: any, index: number = 0) {
   console.log('index=', index);
   if (mpegts.isSupported()) {
-    streamProxy(nodeData, (res: AddStreamProxyResult) => {
+    const params = {
+      deviceIp: nodeData.nvrIp,
+      factoryNo: nodeData.nvrFactoryNo,
+      channelNo: nodeData.nvrChannelNo,
+      startTime: dayjs('2025-09-07 00:00:00'),
+      endTime: dayjs('2025-09-07 01:00:00'),
+    };
+    if (!params.deviceIp || !params.channelNo) {
+      message.error('未配置录像机');
+      return;
+    }
+    playBack(params).then((res) => {
+      const url = res.wsUrl;
+      nodeData.url = url;
+      closePlayer(index);
+      const videoConfig = {
+        type: 'm2ts',
+        url: url,
+        isLive: true,
+        hasAudio: false,
+        hasVideo: true,
+        enableWorker: true, // 启用分离的线程进行转码
+        enableStashBuffer: false, // 关闭IO隐藏缓冲区
+        stashInitialSize: 256, // 减少首帧显示等待时长
+      };
+      // 开启loading
+      // loading(index);
+      const player = mpegts.createPlayer(videoConfig, playerConfig);
+      addPlayerListener(index, player);
+      const videoElement = itemRefs[index];
+      if (videoElement) {
+        player.attachMediaElement(videoElement);
+        player.load();
+        player.play();
+        playerList[index] = {
+          player,
+          key: nodeData.id,
+          data: nodeData,
+        };
+        // 播放完成后， 需要处理树组件的状态
+        treeSelectHandle();
+      } else {
+        console.log('视频播放元素获取异常');
+      }
+    });
+
+    /*streamProxy(nodeData, (res: AddStreamProxyResult) => {
       const host = window.location.host;
       const url = `ws://${host}/${res.app}/${res.streamId}.live.flv`;
       // const url = `ws://183.230.235.66:11010/${res.app}/${res.streamId}.live.flv`;
@@ -415,7 +451,7 @@ function doPlayer(nodeData: any, index: number = 0) {
       } else {
         console.log('视频播放元素获取异常');
       }
-    });
+    });*/
   } else {
     message.error('浏览器不支持播放');
   }
@@ -501,7 +537,5 @@ onUnmounted(() => {
   .play-option {
     background-color: #606060;
   }
-
-
 }
 </style>
diff --git a/apps/web-antd/src/views/sis/video/realtime/channel-tree.vue b/apps/web-antd/src/views/sis/video/realtime/channel-tree.vue
new file mode 100644
index 00000000..47203245
--- /dev/null
+++ b/apps/web-antd/src/views/sis/video/realtime/channel-tree.vue
@@ -0,0 +1,139 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+import { SyncOutlined } from '@ant-design/icons-vue';
+import { InputSearch, Skeleton, Tree } from 'ant-design-vue';
+import { treeList } from '#/api/sis/deviceChannel';
+import type { TreeNode } from '#/api/common';
+
+defineOptions({ inheritAttrs: false });
+
+withDefaults(
+  defineProps<{
+    showSearch?: boolean;
+    currentSelectKey?: string;
+    selectKeys?: string[];
+  }>(),
+  {
+    showSearch: true,
+    currentSelectKey: '',
+    selectKeys: [],
+  },
+);
+
+const emit = defineEmits(['selected', 'reload', 'checked']);
+
+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 treeList();
+  channelTree.value = ret;
+  showTreeSkeleton.value = false;
+}
+
+function onSelect(key: any, selectNode: any) {
+  emit('selected', key, selectNode);
+}
+
+async function handleReload() {
+  await loadChannelTree();
+  emit('reload');
+}
+
+onMounted(loadChannelTree);
+</script>
+
+<template>
+  <div :class="$attrs.class">
+    <Skeleton :loading="showTreeSkeleton" :paragraph="{ rows: 8 }" active>
+      <div class="h-full">
+        <!-- 固定在顶部 必须加上bg-background背景色 否则会产生'穿透'效果 -->
+        <div v-if="showSearch" class="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-[calc(100%-40px)] overflow-y-auto overflow-x-hidden px-[8px]"
+        >
+          <Tree
+            v-bind="$attrs"
+            v-if="channelTree.length > 0"
+            :tree-data="channelTree"
+            :virtual="false"
+            default-expand-all
+            @check="$emit('checked')"
+            @select="onSelect"
+          >
+            <template #title="{ label, level, key }">
+              <div class="flex">
+                <div v-if="level == 2" class="tree-icon">
+                  <div
+                    v-if="selectKeys.indexOf(key) > -1"
+                    class="icon playing"
+                  ></div>
+                  <div v-else class="icon unplay"></div>
+                </div>
+                <span :style="currentSelectKey == key?'color:blue':''">
+                  <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>
+                  <span>{{ label }}</span>
+                </span>
+                </span>
+              </div>
+            </template>
+          </Tree>
+        </div>
+      </div>
+    </Skeleton>
+  </div>
+</template>
+
+<style scoped>
+.tree-icon {
+  display: inline-block;
+  height: 20px;
+  width: 20px;
+
+  .unplay {
+    width: 100%;
+    height: 100%;
+    background: url('/src/assets/tree/unplayer.png') no-repeat;
+    background-size: 100% 100%;
+  }
+
+  .playing {
+    width: 100%;
+    height: 100%;
+    background: url('/src/assets/tree/playering.png') no-repeat;
+    background-size: 100% 100%;
+  }
+}
+</style>
diff --git a/apps/web-antd/src/views/sis/video/realtime/data.ts b/apps/web-antd/src/views/sis/video/realtime/data.ts
new file mode 100644
index 00000000..15201e48
--- /dev/null
+++ b/apps/web-antd/src/views/sis/video/realtime/data.ts
@@ -0,0 +1,4 @@
+export interface CacheNode {
+  player: any; // 播放器控制对象
+  data: any; // 播放节点参数
+}
diff --git a/apps/web-antd/src/views/sis/video/realtime/index.vue b/apps/web-antd/src/views/sis/video/realtime/index.vue
new file mode 100644
index 00000000..82f64f8b
--- /dev/null
+++ b/apps/web-antd/src/views/sis/video/realtime/index.vue
@@ -0,0 +1,495 @@
+<template>
+  <Page style="height: calc(100vh - 88px)" class="video-page h-full w-full">
+    <!--  设备分组区域  -->
+    <div class="flex h-full gap-[8px]">
+      <div class="c-tree bg-background h-full overflow-hidden pb-[5px]">
+        <ChannelTree
+          class="h-full w-[300px]"
+          :currentSelectKey="currentSelectKey"
+          :selectKeys="selectKeys"
+          @check="onNodeChecked"
+          @select="onTreeSelect"
+        />
+      </div>
+
+      <!--  设备分组区域  -->
+      <div class="bg-background flex-1">
+        <div class="video-play-area flex h-[calc(100%-30px)] flex-wrap">
+          <div
+            v-for="i in playerNum"
+            :style="playerStyle"
+            class="player"
+            :class="`layer-${i - 1} ${currentSelectPlayerIndex == i - 1 ? selected : ''}`"
+            @click="playerSelect(i - 1)"
+          >
+            <Loading
+              :spinning="playerLoading[i - 1]"
+              text="加载中..."
+              class="flex h-full w-full items-center justify-center"
+            >
+              <video
+                style="width: 100%; height: 100%"
+                :ref="(el) => setItemRef(i - 1, el)"
+                muted
+                autoplay
+              ></video>
+            </Loading>
+          </div>
+        </div>
+        <div class="player-area flex h-[30px] gap-[5px]">
+          <div
+            v-for="key in 4"
+            @click="onPlayerNumChanged(key)"
+            :class="playerSelectItemIndex == key ? selected : ''"
+            class="btn-item h-[20px] w-[20px]"
+          >
+            <Svg1FrameIcon v-if="key == 1" style="width: 100%; height: 100%" />
+            <Svg4FrameIcon
+              v-else-if="key == 2"
+              style="width: 100%; height: 100%"
+            />
+            <Svg9FrameIcon
+              v-else-if="key == 3"
+              style="width: 100%; height: 100%"
+            />
+            <Svg16FrameIcon
+              v-else-if="key == 4"
+              style="width: 100%; height: 100%"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </Page>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, onUnmounted, ref, toRaw } from 'vue';
+import { Loading, Page } from '@vben/common-ui';
+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';
+import { checkHEVCSupport } from '#/utils/video';
+import type { AddStreamProxyResult } from '#/api/sis/stream/model';
+
+const selected = 'selected';
+
+const itemRefs: any[] = [];
+const setItemRef = (index: number, el: any) => {
+  itemRefs[index] = el;
+};
+
+//屏幕播放器样式
+const playerStyle = ref({
+  width: '100%',
+  height: '100%',
+});
+// 播放器配置
+const playerConfig = {
+  enableErrorRecover: true, // 启用错误恢复
+  autoCleanupMaxBackwardDuration: 30,
+  autoCleanupMinBackwardDuration: 10,
+};
+//屏幕播放器数量
+const playerNum = ref(1);
+// 播放器数量控制按钮组索引
+const playerSelectItemIndex = ref(1);
+// 当前选择的播放器索引,默认选中第一个
+const currentSelectPlayerIndex = ref(0);
+// 播放器数据, 每一个位置代表页面上行的一个矩形
+const playerList: any[] = [];
+// 播放器loading
+const playerLoading = ref<boolean[]>([]);
+
+// 当前选择播放器的key
+const currentSelectKey = ref('');
+// 当前所有的播放设备key
+const selectKeys = ref<string[]>([]);
+
+function playerSelect(index: number) {
+  currentSelectPlayerIndex.value = index;
+  const player = playerList[index];
+  if (player) {
+    currentSelectKey.value = player.key;
+  } else {
+    currentSelectKey.value = '';
+  }
+}
+
+/**
+ * 播放器数量
+ * @param val
+ */
+function onPlayerNumChanged(val: number) {
+  // 1个屏幕
+  let changeNum = 1;
+  playerSelectItemIndex.value = val;
+  if (val === 1) {
+    playerStyle.value = {
+      width: '100%',
+      height: '100%',
+    };
+  }
+  // 4个屏幕 2*2
+  else if (val === 2) {
+    playerStyle.value = {
+      width: '50%',
+      height: '50%',
+    };
+    changeNum = 4;
+  }
+  // 9个屏幕 3*3
+  else if (val === 3) {
+    playerStyle.value = {
+      width: '33.33%',
+      height: '33.33%',
+    };
+    changeNum = 9;
+  }
+  // 16个屏幕 4*4
+  else {
+    playerStyle.value = {
+      width: '25%',
+      height: '25%',
+    };
+    changeNum = 16;
+  }
+  playerNum.value = changeNum;
+  // 缩小布局,超过当前播放器的都关闭
+  for (let i = 0; i < playerList.length; i++) {
+    const playInfo = playerList[i];
+    if (i >= changeNum) {
+      if (playInfo) {
+        closePlayVieo(playInfo.player);
+      }
+    }
+  }
+
+  // 处理树节点状态
+  treeSelectHandle();
+}
+
+/**
+ * 处理带有子节点的数据
+ * @param node
+ * @param newNode
+ */
+function handleParentNoe(node: any, newNode: any[] = []) {
+  if (node.children && node.children.length >= 1) {
+    node.children.forEach((item: any) => {
+      if (item.level === 2) {
+        newNode.push(toRaw(item.data));
+      }
+      if (item.children && item.children.length >= 1) {
+        handleParentNoe(item.children, newNode);
+      }
+    });
+  }
+}
+
+function onTreeSelect(_key: any, selectNode: any) {
+  const {
+    selected,
+    node: { level, data },
+  } = selectNode;
+  // 代表点击的是摄像头
+  if (level === 2) {
+    // 播放
+    if (selected) {
+      doPlayer(data, currentSelectPlayerIndex.value);
+    }
+    // 取消播放
+    else {
+      for (let i = 0; i < playerNum.value; i++) {
+        const player = playerList[i];
+        if (player && player.data.id === data.id) {
+          closePlayer(i);
+        }
+      }
+    }
+  } else {
+    message.error('请选择摄像头');
+  }
+}
+
+function treeSelectHandle() {
+  // 此处player可能已经释放所以不可能在取到只
+  const player = playerList[currentSelectPlayerIndex.value];
+  currentSelectKey.value = player ? player.key : '';
+  const arr: string[] = [];
+  playerList.forEach((item: any) => {
+    if (item && item.key) {
+      arr.push(item.key);
+    }
+  });
+  selectKeys.value = arr;
+}
+
+/**
+ * 节点选中时间处理
+ * @param _val 选中节点id
+ * @param checked 是否选中
+ * @param node 节点数据
+ */
+function onNodeChecked(
+  _val: any,
+  { checked, node }: { checked: boolean; node: any },
+) {
+  // 此次操作需要新增或者删除节点
+  let checkNode: any = [];
+  if (node.level === 1) {
+    handleParentNoe(node, checkNode);
+  } else {
+    checkNode.push(toRaw(node.data));
+  }
+  // 新增
+  if (checked) {
+    /**
+     * 如果当前页面有选择播放未知，并且播放视频只有一个，则播放到制定位置
+     */
+    if (currentSelectPlayerIndex.value !== -1 && checkNode.length == 1) {
+      doPlayer(checkNode[0], currentSelectPlayerIndex.value);
+    }
+    // 批量播放 currentSelectPlayerIndex 将不再生效
+    else {
+      // 如果此次播放数量小于当前播能播放
+      const freeArr: number[] = []; // 空闲播放器数量
+      for (let i = 0; i < playerNum.value; i++) {
+        const playerData = playerList[i];
+        if (!playerData) {
+          freeArr.push(i);
+        }
+      }
+      // 要播放的视频数量，小于等于空闲播放器数量，则填充空闲即可
+      if (checkNode.length <= freeArr.length) {
+        for (let j = 0; j < checkNode.length; j++) {
+          doPlayer(checkNode[j], freeArr[j]);
+        }
+      }
+      // 直接覆盖原有的播放视频
+      else {
+        for (let i = 0; i < playerNum.value; i++) {
+          doPlayer(checkNode[i], i);
+        }
+      }
+    }
+  }
+  // 删除
+  else {
+    checkNode.forEach((item: any) => {
+      for (let i = 0; i < playerNum.value; i++) {
+        const player = playerList[i];
+        if (player && player.data.id === item.id) {
+          closePlayer(i);
+        }
+      }
+    });
+  }
+}
+
+/**
+ * 添加媒体播放器事件监听
+ * @param index 媒体索引
+ * @param player 播放器对象
+ */
+function addPlayerListener(index: number, player: any) {
+  // 播放结束。
+  player.on(mpegts.Events.LOADING_COMPLETE, (...args: any[]) => {
+    console.log('LOADING_COMPLETE', args);
+  });
+  // 播放媒体数据
+  player.on(mpegts.Events.MEDIA_INFO, (...args: any[]) => {
+    console.log('MEDIA_INFO', args);
+    loading(index, 1);
+  });
+  // 播放媒体元数据到到达
+  player.on(mpegts.Events.METADATA_ARRIVED, (...args: any[]) => {
+    console.log('METADATA_ARRIVED', args);
+  });
+  // 统计播放数据
+  // player.on(mpegts.Events.STATISTICS_INFO, (...args: any[]) => {
+  // console.log('STATISTICS_INFO', args);
+  // });
+  // 播放异常
+  player.on(mpegts.Events.ERROR, (...args: any[]) => {
+    console.log('ERROR', args);
+  });
+}
+
+function streamProxy(nodeData: any, cb: Function) {
+  let params = {};
+  if (nodeData.nvrIp) {
+    params = {
+      videoIp: nodeData.nvrIp,
+      videoPort: 554,
+      factoryNo: nodeData.nvrFactoryNo,
+      account: nodeData.nvrAccount,
+      pwd: nodeData.nvrPwd,
+      channelId: nodeData.nvrChannelNo,
+    };
+  } else {
+    params = {
+      videoIp: nodeData.deviceIp,
+      videoPort: 554,
+      factoryNo: nodeData.factoryNo,
+      account: nodeData.deviceAccount,
+      pwd: nodeData.devicePwd,
+      channelId: nodeData.channelNo,
+    };
+  }
+  if (isSupportH265) {
+    addStreamProxy(params).then((res) => cb(res));
+  } else {
+    // addFFmpegStreamProxy(params).then((res) => cb(res));
+    addStreamProxy(params).then((res) => cb(res));
+  }
+}
+
+/**
+ * 开始播放视频流
+ * @param nodeData 播放的节点数据
+ * @param index 播放器的索引信息
+ */
+function doPlayer(nodeData: any, index: number = 0) {
+  console.log('index=', index);
+  if (mpegts.isSupported()) {
+    streamProxy(nodeData, (res: AddStreamProxyResult) => {
+      const host = window.location.host;
+      const url = `ws://${host}/${res.app}/${res.streamId}.live.flv`;
+      // const url = `ws://183.230.235.66:11010/${res.app}/${res.streamId}.live.flv`;
+      // 将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, // 减少首帧显示等待时长
+      };
+      // 开启loading
+      loading(index);
+      const player = mpegts.createPlayer(videoConfig, playerConfig);
+      addPlayerListener(index, player);
+      const videoElement = itemRefs[index];
+      if (videoElement) {
+        player.attachMediaElement(videoElement);
+        player.load();
+        player.play();
+        playerList[index] = {
+          player,
+          key: nodeData.id,
+          data: nodeData,
+        };
+        // 播放完成后， 需要处理树组件的状态
+        treeSelectHandle();
+      } else {
+        console.log('视频播放元素获取异常');
+      }
+    });
+  } else {
+    message.error('浏览器不支持播放');
+  }
+}
+
+function closePlayVieo(plInfo: any) {
+  if (plInfo) {
+    try {
+      plInfo.pause(); // 暂停
+      plInfo.unload(); // 卸载
+      plInfo.detachMediaElement();
+      plInfo.destroy(); // 销毁
+      treeSelectHandle();
+    } catch (e) {
+      console.log('播放器关闭失败，e=', e);
+    }
+  }
+}
+
+function closePlayer(index: number) {
+  // 如果播放器存在，尝试关闭
+  const pData = playerList[index];
+  if (pData) {
+    closePlayVieo(pData.player);
+  }
+}
+
+/**
+ * 开启或关闭播放器loading
+ * @param index 播放器索引
+ * @param cmd 0:开启，1:关闭
+ */
+function loading(index: number, cmd: Number = 0) {
+  const loadinArr = [...playerLoading.value];
+  loadinArr[index] = cmd === 0;
+  playerLoading.value = loadinArr;
+}
+
+let isSupportH265 = false;
+onMounted(() => {
+  // 检测浏览器是否支持h265
+  isSupportH265 = checkHEVCSupport();
+  setInterval(catchUp, 120000);
+});
+
+onUnmounted(() => {
+  for (let i = 0; i < playerList.length; i++) {
+    closePlayer(i);
+  }
+});
+
+function catchUp() {
+  playerList.forEach((playerData) => {
+    if (playerData) {
+      const { player, el } = playerData;
+      const end = player.buffered.end(player.buffered.length - 1);
+      const diff = end - el.currentTime;
+      if (diff > 2) {
+        // 如果延迟超过2秒
+        el.currentTime = end - 0.5; // 跳转到接近直播点
+      }
+    }
+  });
+}
+</script>
+
+<style scoped>
+.player {
+  border: 1px solid #e4e4e7;
+  cursor: pointer;
+
+  video {
+    width: 100%;
+    height: 100%;
+    object-fit: fill;
+  }
+}
+
+.c-tree {
+  font-size: 12px;
+}
+
+.player.selected {
+  border: 2px solid deepskyblue;
+}
+
+.player-area {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+
+  .btn-item.selected {
+    color: #00a8ff;
+  }
+}
+</style>
diff --git a/apps/web-antd/src/views/videoSystem/videoWarning/videoWarningHasDone/data.ts b/apps/web-antd/src/views/videoSystem/videoWarning/videoWarningHasDone/data.ts
index e939bf2b..66e0939f 100644
--- a/apps/web-antd/src/views/videoSystem/videoWarning/videoWarningHasDone/data.ts
+++ b/apps/web-antd/src/views/videoSystem/videoWarning/videoWarningHasDone/data.ts
@@ -5,14 +5,25 @@ import { getPopupContainer } from '@vben/utils';
 import { getDictOptions } from '#/utils/dict';
 import { DictEnum } from '@vben/constants';
 
-export const fallImg =
-  'data:image/png;base64,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';
-
 export const querySchema: FormSchemaGetter = () => [
+  {
+    component: 'Input',
+    fieldName: 'deviceName',
+    label: '设备名称',
+  },
+  {
+    component: 'DatePicker',
+    fieldName: 'reportTime',
+    label: '预警时间',
+    componentProps: {
+      format: 'YYYY-MM-DD',
+      valueFormat: 'YYYY-MM-DD HH:mm:ss',
+    },
+  },
   {
     component: 'Input',
     fieldName: 'alarmType',
-    label: '视频预警类型',
+    label: '预警类型',
   },
   {
     component: 'Select',
diff --git a/apps/web-antd/src/views/videoSystem/videoWarning/videoWarningHasDone/warning-detail.vue b/apps/web-antd/src/views/videoSystem/videoWarning/videoWarningHasDone/warning-detail.vue
index 2e0dd845..444bf001 100644
--- a/apps/web-antd/src/views/videoSystem/videoWarning/videoWarningHasDone/warning-detail.vue
+++ b/apps/web-antd/src/views/videoSystem/videoWarning/videoWarningHasDone/warning-detail.vue
@@ -4,7 +4,7 @@ import { useVbenModal } from '@vben/common-ui';
 import { Descriptions, DescriptionsItem, Image, Tag,Divider } from 'ant-design-vue';
 import { queryAlarmEventAttachmentsList } from '#/api/sis/alarmEventAttachments';
 import type { AlarmEventAttachmentsVO } from '#/api/sis/alarmEventAttachments/model';
-import { fallImg } from './data';
+import { fallImg } from '../../common';
 import {alarmEventProcessList, queryResult} from '#/api/sis/alarmEventProcess';
 import type { AlarmEventProcessVO } from '#/api/sis/alarmEventProcess/model';
 
diff --git a/apps/web-antd/src/views/videoSystem/videoWarning/videoWarningProcessing/data.ts b/apps/web-antd/src/views/videoSystem/videoWarning/videoWarningProcessing/data.ts
index e939bf2b..6299b0b6 100644
--- a/apps/web-antd/src/views/videoSystem/videoWarning/videoWarningProcessing/data.ts
+++ b/apps/web-antd/src/views/videoSystem/videoWarning/videoWarningProcessing/data.ts
@@ -5,14 +5,25 @@ import { getPopupContainer } from '@vben/utils';
 import { getDictOptions } from '#/utils/dict';
 import { DictEnum } from '@vben/constants';
 
-export const fallImg =
-  'data:image/png;base64,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';
-
 export const querySchema: FormSchemaGetter = () => [
+  {
+    component: 'Input',
+    fieldName: 'deviceName',
+    label: '设备名称',
+  },
+  {
+    component: 'DatePicker',
+    fieldName: 'reportTime',
+    label: '预警时间',
+    componentProps: {
+      format: 'YYYY-MM-DD',
+      valueFormat: 'YYYY-MM-DD HH:mm:ss',
+    },
+  },
   {
     component: 'Input',
     fieldName: 'alarmType',
-    label: '视频预警类型',
+    label: '预警类型',
   },
   {
     component: 'Select',
@@ -23,15 +34,6 @@ export const querySchema: FormSchemaGetter = () => [
     fieldName: 'level',
     label: '预警级别',
   },
-  /*{
-    component: 'Select',
-    componentProps: {
-      getPopupContainer,
-      options: getDictOptions(DictEnum.alarm_state, true),
-    },
-    fieldName: 'state',
-    label: '处理状态',
-  },*/
 ];
 
 export const columns: VxeGridProps['columns'] = [
diff --git a/apps/web-antd/src/views/videoSystem/videoWarning/videoWarningProcessing/warning-detail.vue b/apps/web-antd/src/views/videoSystem/videoWarning/videoWarningProcessing/warning-detail.vue
index fea8dd66..543490bb 100644
--- a/apps/web-antd/src/views/videoSystem/videoWarning/videoWarningProcessing/warning-detail.vue
+++ b/apps/web-antd/src/views/videoSystem/videoWarning/videoWarningProcessing/warning-detail.vue
@@ -4,7 +4,7 @@ import { useVbenModal } from '@vben/common-ui';
 import { Descriptions, DescriptionsItem, Image, Tag } from 'ant-design-vue';
 import { queryAlarmEventAttachmentsList } from '#/api/sis/alarmEventAttachments';
 import type { AlarmEventAttachmentsVO } from '#/api/sis/alarmEventAttachments/model';
-import { fallImg } from './data';
+import { fallImg } from '../../common';
 import { alarmEventProcessList } from '#/api/sis/alarmEventProcess';
 import type { AlarmEventProcessVO } from '#/api/sis/alarmEventProcess/model';
 
diff --git a/apps/web-antd/src/views/videoSystem/videoWarning/videoWarningToDone/data.ts b/apps/web-antd/src/views/videoSystem/videoWarning/videoWarningToDone/data.ts
index b6513a58..0e4fa93d 100644
--- a/apps/web-antd/src/views/videoSystem/videoWarning/videoWarningToDone/data.ts
+++ b/apps/web-antd/src/views/videoSystem/videoWarning/videoWarningToDone/data.ts
@@ -6,14 +6,25 @@ import { getDictOptions } from '#/utils/dict';
 import { DictEnum } from '@vben/constants';
 import { uploadApi } from '#/api';
 
-export const fallImg =
-  'data:image/png;base64,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';
-
 export const querySchema: FormSchemaGetter = () => [
+  {
+    component: 'Input',
+    fieldName: 'deviceName',
+    label: '设备名称',
+  },
+  {
+    component: 'DatePicker',
+    fieldName: 'reportTime',
+    label: '预警时间',
+    componentProps: {
+      format: 'YYYY-MM-DD',
+      valueFormat: 'YYYY-MM-DD HH:mm:ss',
+    },
+  },
   {
     component: 'Input',
     fieldName: 'alarmType',
-    label: '视频预警类型',
+    label: '预警类型',
   },
   {
     component: 'Select',
@@ -24,15 +35,6 @@ export const querySchema: FormSchemaGetter = () => [
     fieldName: 'level',
     label: '预警级别',
   },
-  /*{
-    component: 'Select',
-    componentProps: {
-      getPopupContainer,
-      options: getDictOptions(DictEnum.alarm_state, true),
-    },
-    fieldName: 'state',
-    label: '处理状态',
-  },*/
 ];
 
 export const columns: VxeGridProps['columns'] = [
@@ -196,7 +198,6 @@ export const modalSchema: FormSchemaGetter = () => [
     },
   },
 
-
   // 插入分割线
   {
     component: 'Divider',
diff --git a/apps/web-antd/src/views/videoSystem/videoWarning/videoWarningToDone/index.vue b/apps/web-antd/src/views/videoSystem/videoWarning/videoWarningToDone/index.vue
index 68a8a6aa..621acb28 100644
--- a/apps/web-antd/src/views/videoSystem/videoWarning/videoWarningToDone/index.vue
+++ b/apps/web-antd/src/views/videoSystem/videoWarning/videoWarningToDone/index.vue
@@ -12,7 +12,7 @@ import {
 import { columns, querySchema } from './data';
 import warningModal from './warning-modal.vue';
 import warningDetail from './warning-detail.vue';
-import {alarmEventsList, alarmEventsListCurr, alarmEventsRemove} from '#/api/sis/alarmEvents';
+import { alarmEventsListCurr, alarmEventsRemove } from '#/api/sis/alarmEvents';
 import type { AlarmEventsForm } from '#/api/sis/alarmEvents/model';
 
 /* 搜索栏配置 */
diff --git a/apps/web-antd/src/views/videoSystem/videoWarning/videoWarningToDone/warning-detail.vue b/apps/web-antd/src/views/videoSystem/videoWarning/videoWarningToDone/warning-detail.vue
index 112bd749..97376165 100644
--- a/apps/web-antd/src/views/videoSystem/videoWarning/videoWarningToDone/warning-detail.vue
+++ b/apps/web-antd/src/views/videoSystem/videoWarning/videoWarningToDone/warning-detail.vue
@@ -1,10 +1,16 @@
 <script setup lang="ts">
 import { ref, shallowRef } from 'vue';
 import { useVbenModal } from '@vben/common-ui';
-import {Descriptions, DescriptionsItem, Divider, Image, Tag} from 'ant-design-vue';
+import {
+  Descriptions,
+  DescriptionsItem,
+  Divider,
+  Image,
+  Tag,
+} from 'ant-design-vue';
 import { queryAlarmEventAttachmentsList } from '#/api/sis/alarmEventAttachments';
 import type { AlarmEventAttachmentsVO } from '#/api/sis/alarmEventAttachments/model';
-import { fallImg } from './data';
+import { fallImg } from '../../common';
 import { alarmEventProcessList } from '#/api/sis/alarmEventProcess';
 import type { AlarmEventProcessVO } from '#/api/sis/alarmEventProcess/model';
 
@@ -77,11 +83,11 @@ function loadProcessList() {
         {{ warningDetail.bigTypeName + ' - ' + warningDetail.smallTypeName }}
       </DescriptionsItem>
       <DescriptionsItem label="设备IP"
-      >{{ warningDetail.deviceIp }}
+        >{{ warningDetail.deviceIp }}
       </DescriptionsItem>
 
       <DescriptionsItem label="设备名称"
-      >{{ warningDetail.deviceName }}
+        >{{ warningDetail.deviceName }}
       </DescriptionsItem>
       <DescriptionsItem label="预警位置" :span="2">
         {{ warningDetail.deviceName }}
@@ -105,7 +111,7 @@ function loadProcessList() {
       <DescriptionsItem label="预警描述" :span="2">
         {{ warningDetail.description }}
       </DescriptionsItem>
-      <DescriptionsItem label="相关图片"  :span="2">
+      <DescriptionsItem label="相关图片" :span="2">
         <div class="file-box">
           <div class="img-box" v-for="item in currFiles">
             <Image
@@ -126,7 +132,8 @@ function loadProcessList() {
       :column="2"
       bordered
       :labelStyle="{ width: '120px' }"
-      style="margin-bottom: 30px">
+      style="margin-bottom: 30px"
+    >
       <DescriptionsItem label="处理状态" :span="2">
         <Tag>
           {{ warningDetail.stateName }}

From e005f771768213ab4abd39898032ff8b76e2c736 Mon Sep 17 00:00:00 2001
From: lxj <15683799673@163.com>
Date: Tue, 9 Sep 2025 05:15:48 +0800
Subject: [PATCH 4/6] 1

---
 .../views/sis/video/realtime/channel-tree.vue | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/apps/web-antd/src/views/sis/video/realtime/channel-tree.vue b/apps/web-antd/src/views/sis/video/realtime/channel-tree.vue
index 47203245..0e72017d 100644
--- a/apps/web-antd/src/views/sis/video/realtime/channel-tree.vue
+++ b/apps/web-antd/src/views/sis/video/realtime/channel-tree.vue
@@ -85,27 +85,30 @@ onMounted(loadChannelTree);
           >
             <template #title="{ label, level, key }">
               <div class="flex">
+                <!--       通道节点显示图标         -->
                 <div v-if="level == 2" class="tree-icon">
+                  <!--                  -->
                   <div
                     v-if="selectKeys.indexOf(key) > -1"
                     class="icon playing"
                   ></div>
                   <div v-else class="icon unplay"></div>
                 </div>
-                <span :style="currentSelectKey == key?'color:blue':''">
+
+                <span :style="currentSelectKey == key ? 'color:blue' : ''">
                   <span v-if="label.indexOf(searchValue) > -1">
-                  {{ label.substring(0, label.indexOf(searchValue)) }}
-                  <span style="color: #f50">{{ searchValue }}</span>
-                  {{
+                    {{ label.substring(0, label.indexOf(searchValue)) }}
+                    <span style="color: #f50">{{ searchValue }}</span>
+                    {{
                       label.substring(
                         label.indexOf(searchValue) + searchValue.length,
                       )
                     }}
-                </span>
+                  </span>
 
-                <span v-else>
-                  <span>{{ label }}</span>
-                </span>
+                  <span v-else>
+                    <span>{{ label }}</span>
+                  </span>
                 </span>
               </div>
             </template>

From 9aefed746d7b51807edbd341eb1eeed427ed1403 Mon Sep 17 00:00:00 2001
From: 15683799673 <liao@1234567>
Date: Tue, 9 Sep 2025 06:15:02 +0800
Subject: [PATCH 5/6] =?UTF-8?q?=E8=AE=BE=E5=A4=87=E6=A0=91=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E8=AE=BE=E5=A4=87=E7=8A=B6=E6=80=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/sis/video/realtime/channel-tree.vue | 61 +++++++++++++------
 apps/web-antd/vite.config.mts                 |  2 +-
 2 files changed, 44 insertions(+), 19 deletions(-)

diff --git a/apps/web-antd/src/views/sis/video/realtime/channel-tree.vue b/apps/web-antd/src/views/sis/video/realtime/channel-tree.vue
index 0e72017d..efdf5cad 100644
--- a/apps/web-antd/src/views/sis/video/realtime/channel-tree.vue
+++ b/apps/web-antd/src/views/sis/video/realtime/channel-tree.vue
@@ -83,33 +83,51 @@ onMounted(loadChannelTree);
             @check="$emit('checked')"
             @select="onSelect"
           >
-            <template #title="{ label, level, key }">
+            <template #title="{ label, level, key, data: { data } }">
               <div class="flex">
                 <!--       通道节点显示图标         -->
                 <div v-if="level == 2" class="tree-icon">
-                  <!--                  -->
+                  <!--       在线图标           -->
                   <div
-                    v-if="selectKeys.indexOf(key) > -1"
-                    class="icon playing"
-                  ></div>
-                  <div v-else class="icon unplay"></div>
+                    v-if="data && data.channelState == 1"
+                    class="h-full w-full"
+                  >
+                    <!--       播放中的设备           -->
+                    <div
+                      v-if="selectKeys.indexOf(key) > -1"
+                      class="icon playing"
+                    ></div>
+                    <!--       未播放的设备           -->
+                    <div v-else class="icon unplay"></div>
+                  </div>
+                  <!--       离线的设备           -->
+                  <div v-else class="icon offLine"></div>
                 </div>
 
-                <span :style="currentSelectKey == key ? 'color:blue' : ''">
-                  <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,
-                      )
-                    }}
+                <div>
+                  <span v-if="data && data.channelState == 0">
+                    <span style="color: red">{{ label }}</span>
                   </span>
 
-                  <span v-else>
-                    <span>{{ label }}</span>
+                  <span
+                    v-else
+                    :style="currentSelectKey == key ? 'color:blue' : ''"
+                  >
+                    <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>
+                      <span>{{ data }}</span>
+                    </span>
                   </span>
-                </span>
+                </div>
               </div>
             </template>
           </Tree>
@@ -138,5 +156,12 @@ onMounted(loadChannelTree);
     background: url('/src/assets/tree/playering.png') no-repeat;
     background-size: 100% 100%;
   }
+
+  .offLine {
+    width: 100%;
+    height: 100%;
+    background: url('/src/assets/tree/player-err.png') no-repeat;
+    background-size: 100% 100%;
+  }
 }
 </style>
diff --git a/apps/web-antd/vite.config.mts b/apps/web-antd/vite.config.mts
index 7e884500..1d6a92d6 100644
--- a/apps/web-antd/vite.config.mts
+++ b/apps/web-antd/vite.config.mts
@@ -27,7 +27,7 @@ export default defineConfig(async () => {
             changeOrigin: true,
             rewrite: (path) => path.replace(/^\/api/, ''),
             // mock代理目标地址
-            target: 'http://localhost:8080',
+            target: 'http://183.230.235.66:11010/api',
             ws: true,
           },
         },

From e479f3851c303c97db18303b2d80cc5458368241 Mon Sep 17 00:00:00 2001
From: dev_ljl <2590379346@qq.com>
Date: Tue, 9 Sep 2025 17:49:34 +0800
Subject: [PATCH 6/6] =?UTF-8?q?feat:=E4=B8=8D=E5=B1=95=E7=A4=BA=E6=96=87?=
 =?UTF-8?q?=E6=A1=A3=E3=80=81=E5=B1=95=E7=A4=BA=E8=A7=92=E8=89=B2=E5=90=8D?=
 =?UTF-8?q?=E7=A7=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web-antd/src/layouts/basic.vue | 20 ++++++++++----------
 apps/web-antd/src/store/auth.ts     |  1 +
 packages/stores/src/modules/user.ts |  2 ++
 3 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/apps/web-antd/src/layouts/basic.vue b/apps/web-antd/src/layouts/basic.vue
index 61256dab..eaa9997b 100644
--- a/apps/web-antd/src/layouts/basic.vue
+++ b/apps/web-antd/src/layouts/basic.vue
@@ -41,15 +41,15 @@ const { destroyWatermark, updateWatermark } = useWatermark();
 const tenantStore = useTenantStore();
 const menus = computed(() => {
   const defaultMenus = [
-    {
-      handler: () => {
-        openWindow(VBEN_DOC_URL, {
-          target: '_blank',
-        });
-      },
-      icon: BookOpenText,
-      text: $t('ui.widgets.document'),
-    },
+    // {
+    //   handler: () => {
+    //     openWindow(VBEN_DOC_URL, {
+    //       target: '_blank',
+    //     });
+    //   },
+    //   icon: BookOpenText,
+    //   text: $t('ui.widgets.document'),
+    // },
     {
       handler: () => {
         router.push('/profile');
@@ -146,7 +146,7 @@ watch(
         :avatar
         :menus
         :text="userStore.userInfo?.realName"
-        :description="userStore.userInfo?.roles[0]"
+        :description="userStore.userInfo?.roleName"
         tag-text="Pro"
         @logout="handleLogout"
       />
diff --git a/apps/web-antd/src/store/auth.ts b/apps/web-antd/src/store/auth.ts
index 2160ba05..db3637c4 100644
--- a/apps/web-antd/src/store/auth.ts
+++ b/apps/web-antd/src/store/auth.ts
@@ -116,6 +116,7 @@ export const useAuthStore = defineStore('auth', () => {
       roles,
       userId: user.userId,
       username: user.userName,
+      roleName:user.roles[0]?.roleName,
     }
     userStore.setUserInfo(userInfo)
 
diff --git a/packages/stores/src/modules/user.ts b/packages/stores/src/modules/user.ts
index 56810b4f..9a426040 100644
--- a/packages/stores/src/modules/user.ts
+++ b/packages/stores/src/modules/user.ts
@@ -18,6 +18,8 @@ interface BasicUserInfo {
    * 用户角色
    */
   roles: string[];
+
+  roleName: string;
   /**
    * 用户id
    */