From 6b16fce685ab36c3d554972872565dbff0761a66 Mon Sep 17 00:00:00 2001
From: chendingwei <1170506816@qq.com>
Date: Tue, 3 Jan 2023 16:21:41 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=B7=A6=E4=BE=A7=E5=8F=B3?=
 =?UTF-8?q?=E9=94=AE=E8=8F=9C=E5=8D=95=E6=89=93=E5=BC=80=E7=9B=91=E6=8E=A7?=
 =?UTF-8?q?=E5=85=B3=E9=97=AD=E7=9B=91=E6=8E=A7=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components.d.ts                         |  2 -
 src/views/page/aside/cameraLeftMenu.vue | 13 ++---
 src/views/page/cameraCenter.vue         | 66 +++++++------------------
 3 files changed, 25 insertions(+), 56 deletions(-)

diff --git a/components.d.ts b/components.d.ts
index abccb00..94eb12f 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -8,7 +8,6 @@ export {}
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     AButton: typeof import('ant-design-vue/es')['Button']
-    ADirectoryTree: typeof import('ant-design-vue/es')['DirectoryTree']
     ADropdown: typeof import('ant-design-vue/es')['Dropdown']
     AForm: typeof import('ant-design-vue/es')['Form']
     AFormItem: typeof import('ant-design-vue/es')['FormItem']
@@ -21,7 +20,6 @@ declare module '@vue/runtime-core' {
     ARow: typeof import('ant-design-vue/es')['Row']
     ASelect: typeof import('ant-design-vue/es')['Select']
     ATree: typeof import('ant-design-vue/es')['Tree']
-    ATreeNode: typeof import('ant-design-vue/es')['TreeNode']
     Draggable: typeof import('./src/components/Draggable.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
diff --git a/src/views/page/aside/cameraLeftMenu.vue b/src/views/page/aside/cameraLeftMenu.vue
index b16baba..7e5f3cf 100644
--- a/src/views/page/aside/cameraLeftMenu.vue
+++ b/src/views/page/aside/cameraLeftMenu.vue
@@ -94,8 +94,9 @@ const onContextMenuClick = (treeKey: string, menuKey: string) => {
         arr.push(treeKey)
         arr = [...new Set(arr)]
         expandedKeys.value = arr
+        piniaStore.updateCurSelectKey(NodeTreeItem.value.cbCameraId.toString())
     } else if (menuKey == "close") {
-
+        piniaStore.updateCloseVideoKey(NodeTreeItem.value.cbCameraId.toString())
         expandedKeys.value = expandedKeys.value.filter((item: any) => {
             return item != treeKey
         })
@@ -103,14 +104,15 @@ const onContextMenuClick = (treeKey: string, menuKey: string) => {
 
     }
 
+
 };
 // 选中相机
 function selectCamera(treeKeyArr: any, item: any) {
-    if (treeKeyArr.length != 0) {
-        console.log(treeKeyArr);
+    // if (treeKeyArr.length != 0) {
+    //     console.log(treeKeyArr);
 
-        piniaStore.updateCurTreeKey(treeKeyArr[0].toString())
-    }
+    //     piniaStore.updateCurTreeKey(treeKeyArr[0].toString())
+    // }
     // if (!item.node.isGroup) {
     piniaStore.updateCurSelectKey(item.node.cbCameraId.toString())
     // }
@@ -145,7 +147,6 @@ function loadTreeData() {
         console.log(res);
         if (res.data.code == 200) {
             treeData.value = againTreeData(res.data.data)
-            console.log(treeData.value[0]);
 
         }
     })
diff --git a/src/views/page/cameraCenter.vue b/src/views/page/cameraCenter.vue
index 524d8a0..e313dd5 100644
--- a/src/views/page/cameraCenter.vue
+++ b/src/views/page/cameraCenter.vue
@@ -1,8 +1,6 @@
 <template>
 
     <div id="videoWrapper">
-        <canvas ref="videoCanvas" id="videoCanvas" :width="canvasWidth" :height="canvasHeight">
-        </canvas>
         <!-- <video ref="videoPlayer" id="videoPlayer" disablePictureInPicture autoplay muted
             @loadedmetadata="changeVideoCanvasSize" @mouseover="mouseOverVideo" @mouseout="mouseOutVideo"
             @mousedown="mouseDownVideo">
@@ -82,10 +80,10 @@ import VideoControlSimple from './VideoControl/VideoControlSimple.vue';
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 let piniaStore = useStore();
 let player = <HTMLVideoElement>document.querySelector('#videoPlayer')
-let canvas = <HTMLCanvasElement>document.querySelector('#videoCanvas')
 let canvasWidth = ref(0)
 let canvasHeight = ref(0)
 let curSelectKey = storeToRefs(piniaStore).curSelectKey
+let closeVideoKey = storeToRefs(piniaStore).closeVideoKey
 let cameraMap = storeToRefs(piniaStore).cameraMap
 let isActiveChoose = ref(false)
 let labelList = ref<any[]>([])
@@ -93,11 +91,10 @@ let addLabel = storeToRefs(piniaStore).addLabel
 let addLabelLeft = ref(0);
 let addLabelTop = ref(0);
 var jessibuca = ref();
-const curVideoKey=ref()
+const curVideoKey = ref()
 onMounted(() => {
     {
         player = <HTMLVideoElement>document.querySelector('#videoPlayer');
-        canvas = <HTMLCanvasElement>document.querySelector('#videoCanvas');
         loadVideoPlayer();
         loadVideoCanvas();
         changeVideoCanvasSize();
@@ -110,6 +107,14 @@ onMounted(() => {
 watch(curSelectKey, (newVal, oldVal) => {
     switchCamera(newVal)
 })
+watch(closeVideoKey, (newVal, oldVal) => {
+    if (curVideoKey.value == newVal) {
+        destroyVideo()
+        piniaStore.updateCloseVideoKey("")
+        piniaStore.updateCurSelectKey("")
+    }
+
+})
 watch(addLabel, (newVal, oldVal) => {
     if (newVal.isAddLabel) {
         isActiveChoose.value = true
@@ -120,6 +125,11 @@ watch(addLabel, (newVal, oldVal) => {
         }
     }
 })
+function destroyVideo() {
+    jessibuca.value.destroy();
+    create()
+    labelList.value = []
+}
 //创建流媒体
 function create() {
     var showOperateBtns = false; // 是否显示按钮
@@ -226,18 +236,7 @@ function changeVideoCanvasSize() {
     canvasWidth.value = player.clientWidth;
     canvasHeight.value = player.clientHeight;
 }
-function mouseOverVideo() {
-    // console.log("移入");
-
-    if (!isActiveChoose.value) return;
-    player.classList.add('activeChoose');
-}
-function mouseOutVideo() {
-    // console.log("移除");
 
-    if (!isActiveChoose) return;
-    player.classList.remove('activeChoose');
-}
 function mouseDownVideo(e: MouseEvent) {
 
     if (!isActiveChoose.value) return;
@@ -316,12 +315,10 @@ function switchCamera(cameraId: string) {
 
         return;
     }
-    jessibuca.value.destroy();
-    create()
-    labelList.value = []
+    destroyVideo()
     console.log('connect webrtc-steamer.');
-    jessibuca.value.play("ws://192.168.1.119:8080/jessica/live/test.flv")
-    curVideoKey.value=cameraId
+    jessibuca.value.play("ws://192.168.1.117:8080/jessica/live/test.flv")
+    curVideoKey.value = cameraId
     // step4, active camera searcher.
     markSearchApi.IsExistsSearcher({
         'cameraId': cameraObj.id
@@ -350,11 +347,6 @@ function switchCamera(cameraId: string) {
 
     // step5, load camera labels.
 }
-function getRtspUrl(cameraObj: any): string {
-    // 模拟 onvif
-    // return `rtsp://admin:hk123456@192.168.1.65:554/Streaming/Channels/101?transportmode=unicast&profile=Profile_1`;
-    return `rtsp://${cameraObj.userName}:${cameraObj.password}@${cameraObj.ip}:554/Streaming/Channels/101?transportmode=unicast&profile=Profile_1`;
-}
 function getLabel(cbCameraId: string | number) {
     let str = JSON.stringify({ cbCameraId })
     markLabelApi.GetList({ queryJson: str }).then((res: any) => {
@@ -404,27 +396,8 @@ function loadMarkLabels(cameraObj: any) {
             });
         });
 
-        drawMarkLabels(list);
     });
 }
-function drawMarkLabels(markLabels: Array<any>) {
-    let ctx = canvas.getContext('2d');
-    if (!ctx) return;
-    ctx.clearRect(0, 0, canvasWidth.value, canvasHeight.value);
-    for (let markLabel of markLabels) {
-        if (!markLabel.inFlag) continue;
-        let x = Math.round(canvasWidth.value * markLabel.canvasLeftRatio);
-        let y = Math.round(canvasHeight.value * markLabel.canvasTopRatio);
-        x = canvasWidth.value * markLabel.canvasLeftRatio;
-        y = canvasHeight.value * markLabel.canvasTopRatio;
-        // console.log(markLabel);
-        ctx.beginPath();
-        ctx.arc(x, y, 5, 0, 2 * Math.PI);
-        ctx.fillStyle = "red";
-        ctx.fill();
-        ctx.closePath();
-    }
-}
 //刷新页面
 window.onbeforeunload = () => {
     jessibuca.value.destroy()
@@ -442,9 +415,6 @@ onUnmounted(() => {
     position: relative;
     overflow: hidden;
 
-    #videoCanvas {
-        position: absolute;
-    }
 
     #videoPlayer {
         height: 100%;