From d8ceb8e8e8cb24f50491d519fe801174e4081ad3 Mon Sep 17 00:00:00 2001
From: JiangQiming <291854119@qq.com>
Date: Sat, 4 Mar 2023 11:01:22 +0800
Subject: [PATCH] =?UTF-8?q?update:=20=E6=B7=BB=E5=8A=A0=E6=B3=A8=E9=87=8A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Player/ScreenPlayer.vue | 70 +++++++++++++++++++++-----
 src/views/media/SplitScreen/index.vue  |  9 ++++
 src/views/media/SplitScreen/tree.vue   | 17 ++++++-
 3 files changed, 81 insertions(+), 15 deletions(-)

diff --git a/src/components/Player/ScreenPlayer.vue b/src/components/Player/ScreenPlayer.vue
index 0045e535..1e8e38f4 100644
--- a/src/components/Player/ScreenPlayer.vue
+++ b/src/components/Player/ScreenPlayer.vue
@@ -186,25 +186,39 @@ const props = defineProps<ScreenProps>();
 
 const DEFAULT_SAVE_CODE = 'screen-save';
 
+// 分屏数量 1/4/9/0
 const screen = ref(1);
+// 视频窗口
 const players = ref<Player[]>([]);
+// 当前选中的窗口
 const playerActive = ref(0);
-const historyList = ref<any[]>([]);
-const visible = ref(false);
-const loading = ref(false);
-const fullscreenRef = ref(null);
+// 单个播放窗口宽高
 const screenWidth = ref('');
 const screenHeight = ref('');
-
-const { isFullscreen, enter, exit, toggle } = useFullscreen(
-    fullscreenRef.value,
-);
-
+// 历史记录
+const historyList = ref<any[]>([]);
+// 展示保存浮窗
+const visible = ref(false);
+const loading = ref(false);
+// 保存表单
 const formRef = ref();
 const formData = ref({
     name: '',
 });
 
+// 全屏元素
+const fullscreenRef = ref(null);
+const { isFullscreen, enter, exit, toggle } = useFullscreen(
+    fullscreenRef.value,
+);
+
+/**
+ * 刷新视频
+ * @param id
+ * @param channelId
+ * @param url
+ * @param index
+ */
 const reloadPlayer = (
     id: string,
     channelId: string,
@@ -233,6 +247,12 @@ const reloadPlayer = (
     }, 1000);
 };
 
+/**
+ * 视频链接变化, 更新播放内容
+ * @param id
+ * @param channelId
+ * @param url
+ */
 const replaceVideo = (id: string, channelId: string, url: string) => {
     const olPlayers = [...players.value];
     const newPlayer = {
@@ -258,6 +278,10 @@ const replaceVideo = (id: string, channelId: string, url: string) => {
     }
 };
 
+/**
+ * 点击分屏历史记录
+ * @param item
+ */
 const handleHistory = (item: any) => {
     if (props.historyHandle) {
         const log = JSON.parse(item.content || '{}');
@@ -283,12 +307,20 @@ const handleHistory = (item: any) => {
     }
 };
 
+/**
+ * 获取历史分屏
+ */
 const getHistory = async () => {
     const res = await getSearchHistory(DEFAULT_SAVE_CODE);
     if (res.success) {
         historyList.value = res.result;
     }
 };
+
+/**
+ * 删除历史分屏
+ * @param id
+ */
 const deleteHistory = async (id: string) => {
     const res = await deleteSearchHistory(DEFAULT_SAVE_CODE, id);
     if (res.success) {
@@ -297,6 +329,9 @@ const deleteHistory = async (id: string) => {
     }
 };
 
+/**
+ * 保存分屏
+ */
 const saveHistory = async () => {
     formRef.value
         .validate()
@@ -328,6 +363,9 @@ const saveHistory = async () => {
         });
 };
 
+/**
+ * 初始化
+ */
 const mediaInit = () => {
     const newArr = [];
     for (let i = 0; i < 9; i++) {
@@ -342,6 +380,10 @@ const mediaInit = () => {
     players.value = newArr;
 };
 
+/**
+ * 改变分屏数量
+ * @param e
+ */
 const handleScreenChange = (e: any) => {
     if (e.target.value) {
         screenChange(e.target.value);
@@ -368,6 +410,12 @@ const screenChange = (index: number) => {
     // }
 };
 
+/**
+ * 刷新
+ * @param e
+ * @param item
+ * @param index
+ */
 const handleRefresh = (e: any, item: any, index: number) => {
     e.stopPropagation();
     if (item.url) {
@@ -381,10 +429,6 @@ const handleRefresh = (e: any, item: any, index: number) => {
  */
 const handleMouseDown = (type: string) => {
     const { id, channelId } = players.value[playerActive.value];
-    console.log('players.value: ', players.value);
-    console.log('playerActive.value: ', playerActive.value);
-    console.log('id: ', id);
-    console.log('channelId: ', channelId);
     if (id && channelId && props.onMouseDown) {
         props.onMouseDown(id, channelId, type);
     }
diff --git a/src/views/media/SplitScreen/index.vue b/src/views/media/SplitScreen/index.vue
index 0c27f885..16a2d15c 100644
--- a/src/views/media/SplitScreen/index.vue
+++ b/src/views/media/SplitScreen/index.vue
@@ -30,10 +30,19 @@ const deviceId = ref('');
 const channelId = ref('');
 const player = ref();
 
+/**
+ * 获取视频链接
+ * @param dId 
+ * @param cId 
+ */
 const getMediaUrl = (dId: string, cId: string): string => {
     return channelApi.ptzStart(dId, cId, 'mp4');
 };
 
+/**
+ * 点击左侧摄像头, 播放对应视频
+ * @param e 
+ */
 const mediaStart = (e: { cId: string; dId: string }) => {
     channelId.value = e.cId;
     deviceId.value = e.dId;
diff --git a/src/views/media/SplitScreen/tree.vue b/src/views/media/SplitScreen/tree.vue
index 1bd9d534..79d84e52 100644
--- a/src/views/media/SplitScreen/tree.vue
+++ b/src/views/media/SplitScreen/tree.vue
@@ -41,8 +41,12 @@ interface DataNode {
     children?: DataNode[];
 }
 
+/**
+ * 点击节点
+ * @param _ 
+ * @param param1 
+ */
 const onSelect = (_: any, { node }: any) => {
-    console.log('node: ', node);
     emit('onSelect', { dId: node.deviceId, cId: node.channelId });
 };
 
@@ -76,6 +80,12 @@ const getDeviceList = async () => {
 };
 getDeviceList();
 
+/**
+ * 更新数据
+ * @param list 
+ * @param key 
+ * @param children 
+ */
 const updateTreeData = (
     list: DataNode[],
     key: any,
@@ -129,12 +139,15 @@ const getChildren = (key: any, params: any): Promise<any> => {
                     });
                 }, 50);
             }
-            console.log('treeData.value: ', treeData.value);
             resolve(res.result);
         }
     });
 };
 
+/**
+ * 异步加载子节点数据
+ * @param param0 
+ */
 const onLoadData = ({ key, children }: any): Promise<void> => {
     return new Promise(async (resolve) => {
         if (children) {