添加左侧右键菜单打开监控关闭监控功能

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']

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) {
+    // if (treeKeyArr.length != 0) {
-        console.log(treeKeyArr);
+    //     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]);
 
         }
     })

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[]>([])
@@ -97,7 +95,6 @@ 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,11 +315,9 @@ function switchCamera(cameraId: string) {
 
         return;
     }
-    jessibuca.value.destroy();
+    destroyVideo()
-    create()
-    labelList.value = []
     console.log('connect webrtc-steamer.');
-    jessibuca.value.play("ws://192.168.1.119:8080/jessica/live/test.flv")
+    jessibuca.value.play("ws://192.168.1.117:8080/jessica/live/test.flv")
     curVideoKey.value = cameraId
     // step4, active camera searcher.
     markSearchApi.IsExistsSearcher({
@@ -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%;