From 2b5a47170ce539de6cd749be50e23b8490a45e99 Mon Sep 17 00:00:00 2001
From: chendingwei <1170506816@qq.com>
Date: Fri, 6 Jan 2023 08:45:43 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A7=A3=E9=99=A4=E6=A0=87=E7=AD=BEsetTimeout?=
 =?UTF-8?q?=E6=B3=A8=E9=87=8A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/page/cameraCenter.vue | 187 ++++++++++++++++----------------
 1 file changed, 92 insertions(+), 95 deletions(-)

diff --git a/src/views/page/cameraCenter.vue b/src/views/page/cameraCenter.vue
index 3d0c70b..53e3c08 100644
--- a/src/views/page/cameraCenter.vue
+++ b/src/views/page/cameraCenter.vue
@@ -6,10 +6,13 @@
             @mousedown="mouseDownVideo">
         </video> -->
         <div id="videoPlayer" @mousedown="mouseDownVideo"></div>
-        <div v-for="item in labelList" :class="`labels ${item.groupName == '视频标签' ? 'lavels-video' : 'lavels-build'}`"
-            :key="item.id" :id="item.id"
-            :style="`top:${canvasHeight * item.canvasTopRatio}px;left:${canvasWidth * item.canvasLeftRatio}px`"
-            @click="itemClick(item)">
+        <div v-for="item in labelList"
+             :class="`labels ${item.groupName == '视频标签' ? 'lavels-video' : 'lavels-build'}`"
+             :key="item.id"
+             :id="item.id"
+             :style="`top:${canvasHeight * item.canvasTopRatio}px;left:${canvasWidth * item.canvasLeftRatio}px`"
+             @click="itemClick(item)"
+        >
             <a-dropdown :trigger="['contextmenu']">
                 <div class="labels-item" v-if="item.groupName == '视频标签'">
                     <!-- <div class="labels-item" v-if="item.inFlag"> -->
@@ -32,22 +35,9 @@
                     </a-menu>
                 </template>
             </a-dropdown>
-            <a-popconfirm 
-                placement="bottomRight" 
-                ok-text="Yes" 
-                cancel-text="No"  
-                :visible="item.windowVisible"
-                @cancel="windowCancel(item)"
-            >
-               <template #title>
-                   <cameraWindow :itemData="item"></cameraWindow>
-               </template>
-               <!-- <a-button>TL</a-button> -->
-            </a-popconfirm>
         </div>
         <div class="labels lavels-build" v-if="addLabel.isAddLabel && addLabel.labelType == '建筑标签'"
-            :style="` pointer-events: none;top:${addLabelTop}px;left:${addLabelLeft}px`">
-
+             :style="` pointer-events: none;top:${addLabelTop}px;left:${addLabelLeft}px`">
             <div class="labels-item" alt="">
                 <img src="@/assets/images/buildLabelLine.png">
                 <div>
@@ -57,7 +47,7 @@
             </div>
         </div>
         <div class="labels lavels-video" v-if="addLabel.isAddLabel && addLabel.labelType == '视频标签'"
-            :style="`top:${addLabelTop}px;left:${addLabelLeft}px`">
+             :style="`top:${addLabelTop}px;left:${addLabelLeft}px`">
             <div class="labels-item">
                 <!-- <div class="labels-item" v-if="item.inFlag"> -->
                 <div>
@@ -66,7 +56,7 @@
                 </div>
             </div>
         </div>
-    
+
         <CameraLeftMenu></CameraLeftMenu>
         <CameraRightMenu></CameraRightMenu>
         <!-- 云台控制 -->
@@ -76,15 +66,15 @@
 
 <script setup lang='ts'>
 ////@ts-nocheck
-import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
-import { Modal } from 'ant-design-vue';
-import { ref, h, onMounted, getCurrentInstance, ComponentInternalInstance, onUnmounted, watch, createVNode } from "vue";
+import {ExclamationCircleOutlined} from '@ant-design/icons-vue';
+import {Modal} from 'ant-design-vue';
+import {ref, h, onMounted, getCurrentInstance, ComponentInternalInstance, onUnmounted, watch, createVNode} from "vue";
 import * as markLabelApi from '@/axios/cameraMark/markLabelApi';
 import * as markSearchApi from '@/axios/core/markSearchApi';
 import * as zlmApi from '@/axios/core/zlmApi';
-import { useStore } from '@/store/index';
-import { apiUrl } from "@/axios";
-import { storeToRefs } from 'pinia';
+import {useStore} from '@/store/index';
+import {apiUrl} from "@/axios";
+import {storeToRefs} from 'pinia';
 import Msg from "@/utils/message";
 import CameraLeftMenu from '@/views/page/Aside/cameraLeftMenu.vue'
 import CameraRightMenu from '@/views/page/Aside/cameraRightMenu.vue'
@@ -92,7 +82,8 @@ import LabelEditModel from '@/views/page/Model/LabelEditModel.vue'
 import cameraWindow from '@/views/page/cameraWindow.vue'
 import popup from "@/utils/popup";
 import VideoControlSimple from './VideoControl/VideoControlSimple.vue';
-const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+
+const {proxy} = getCurrentInstance() as ComponentInternalInstance;
 let piniaStore = useStore();
 let player = <HTMLVideoElement>document.querySelector('#videoPlayer')
 let canvasWidth = ref(0)
@@ -103,7 +94,6 @@ let cameraMap = storeToRefs(piniaStore).cameraMap
 let isActiveChoose = ref(false)
 let labelList = ref<any[]>([])
 let addLabel = storeToRefs(piniaStore).addLabel
-let screenshot = storeToRefs(piniaStore).screenshot
 let addLabelLeft = ref(0);
 let addLabelTop = ref(0);
 var jessibuca = ref();
@@ -116,22 +106,6 @@ onMounted(() => {
     }
 })
 
-
-watch(screenshot, (newVal, oldVal) => {
-    if (newVal) {
-        console.log(123);
-        
-        //jessibuca.value.isPlaying() 判断是否正在播放
-        if (!jessibuca.value.isPlaying()) {
-            Msg.info("请先选择监控画面")
-            piniaStore.updateScreenshot(false)
-            return
-         }
-        jessibuca.value.screenshot("", "png", 1)
-        piniaStore.updateScreenshot(false)
-
-    }
-})
 watch(curSelectKey, (newVal, oldVal) => {
     switchCamera(newVal)
 })
@@ -141,7 +115,6 @@ watch(closeVideoKey, (newVal, oldVal) => {
         piniaStore.updateCloseVideoKey("")
         piniaStore.updateCurSelectKey("")
     }
-
 })
 watch(addLabel, (newVal, oldVal) => {
     if (newVal.isAddLabel) {
@@ -153,6 +126,7 @@ watch(addLabel, (newVal, oldVal) => {
         }
     }
 })
+
 function closeVideo() {
     jessibuca.value.close();
     labelList.value = []
@@ -160,53 +134,75 @@ function closeVideo() {
 
 //删除标签
 function deleteLabel(id: number) {
-
-    markLabelApi.Delete({ id }).then((res: any) => {
-        console.log(res.data);
-        if (res.data.code == 200) {
-            let msg = res.data.data == true ? "删除成功" : "删除失败"
-            if (res.data.data) {
-                labelList.value = labelList.value.filter((element: any) => {
-                    return element.id != id
-                });
-                Msg.success("删除成功")
-                return
-            }
+    markLabelApi.Delete({id}).then((res: any) => {
+        if (judgeResponse(res)) return;
+        let flag = res.data.data;
+        let msg = flag === true ? "删除成功" : "删除失败";
+        if (flag) {
+            labelList.value = labelList.value.filter((element: any) => {
+                return element.id != id;
+            });
+            Msg.success("删除成功");
+        } else {
+            Msg.error("删除失败");
         }
-        Msg.error("删除失败")
     })
 }
 
 //标签点击事件
 function itemClick(item: any) {
     // console.log("点击",item);
-    // popup("监控画面", [h(cameraWindow, { windowData: item })], "cameraWindow");
-    //打开小窗
-    item.windowVisible = true
+    popup("监控画面", [h(cameraWindow, {windowData: item})], "cameraWindow");
 }
-//小窗关闭
-function windowCancel(item: any){
-    item.windowVisible = false
-}
-
 
 function loadVideoPlayer() {
-    let elmId = 'videoPlayer';
-    let url = apiUrl.WebRtcUrl;
-    // webRtcServer.value = new WebRtcStreamer(elmId, url);
+    var showOperateBtns = false; // 是否显示按钮
+    var forceNoOffscreen = true;  //
+
+    jessibuca.value = new Jessibuca({
+        container: player,
+        videoBuffer: 0.2, // 缓存时长
+        isResize: false,
+        text: "",
+        loadingText: "",
+        autoWasm: true,
+        useMSE: false,
+        debug: false,
+        showBandwidth: showOperateBtns, // 显示网速
+        operateBtns: {
+            fullscreen: showOperateBtns,
+            screenshot: showOperateBtns,
+            play: showOperateBtns,
+            audio: false,
+            recorder: false
+        },
+        forceNoOffscreen: forceNoOffscreen,
+        hasAudio: false,
+        isNotMute: false,
+    },);
+
+    jessibuca.value.onLog = (msg: any) => console.error(msg);
+    jessibuca.value.onRecord = (status: any) => console.log('onRecord', status);
+    jessibuca.value.onPause = () => console.log('onPause');
+    jessibuca.value.onPlay = () => console.log('onPlay');
+    jessibuca.value.onFullscreen = (msg: any) => console.log('onFullscreen', msg);
+    jessibuca.value.onMute = (msg: any) => console.log('onMute', msg);
 }
+
 function loadVideoCanvas() {
     window.addEventListener('resize', () => {
         changeVideoCanvasSize();
     });
+    changeVideoCanvasSize();
 }
+
 const onContextMenuClick = (item: any, menuKey: string,) => {
     console.log(`labelId: ${item.id}, menuKey: ${menuKey}`);
     // console.log(`item: ${item}`);
     // console.log(item);
     //防止添加多个key值，再次点击不能关闭。数组去重
     if (menuKey == "edit") {
-        popup("编辑标签", [h(LabelEditModel, { modelData: item })], "editLabel");
+        popup("编辑标签", [h(LabelEditModel, {modelData: item})], "editLabel");
     } else if (menuKey == "delete") {
         Modal.confirm({
             zIndex: 10000,
@@ -215,11 +211,11 @@ const onContextMenuClick = (item: any, menuKey: string,) => {
             content: () =>
                 h(
                     "span",
-                    { style: { color: "black" } },
+                    {style: {color: "black"}},
                     "是否确认删除该标签？"
                 ),
             okText:
-                //  () => h('span', { style: { color: 'black' } }, '确定'),
+            //  () => h('span', { style: { color: 'black' } }, '确定'),
                 "确定",
             // okType: 'primary',
             cancelText: () => "取消",
@@ -240,6 +236,7 @@ const onContextMenuClick = (item: any, menuKey: string,) => {
     }
 
 };
+
 function changeVideoCanvasSize() {
     canvasWidth.value = player.clientWidth;
     canvasHeight.value = player.clientHeight;
@@ -247,7 +244,6 @@ function changeVideoCanvasSize() {
 
 function mouseDownVideo(e: MouseEvent) {
 
-
     if (!isActiveChoose.value) return;
     //鼠标左键 e.buttons == 1
     if (e.buttons == 1) {
@@ -276,7 +272,6 @@ function mouseDownVideo(e: MouseEvent) {
             if (judgeResponse(res)) return;
             let markLabelId: number = res.data.data;
             console.log(markLabelId);
-
             if (markLabelId <= 0) return;
             markSearchApi.ActivateMarkLabel({
                 'cameraId': cameraId,
@@ -284,7 +279,6 @@ function mouseDownVideo(e: MouseEvent) {
             }).then((res: any) => {
                 if (judgeResponse(res)) return;
                 let ret: boolean = res.data.data;
-                console.log(ret, 'ret');
                 if (ret) {
                     let obj = {
                         cbCameraId: cameraId,
@@ -296,20 +290,18 @@ function mouseDownVideo(e: MouseEvent) {
                         isDelete: false,
                         inFlag: true,
                         name: name,
-                        groupName: name,
-                        windowVisible: false //小窗开关状态
+                        groupName: name
                     }
                     labelList.value.push(obj)
                     isActiveChoose.value = false
-                    piniaStore.updateIsAddLabel({ cmMarkGroupId: 0, labelType: "", isAddLabel: false })
-
+                    piniaStore.updateIsAddLabel({cmMarkGroupId: 0, labelType: "", isAddLabel: false})
                 }
             });
         })
     } else {
         //右键取消
         isActiveChoose.value = false
-        piniaStore.updateIsAddLabel({ cmMarkGroupId: 0, labelType: "", isAddLabel: false })
+        piniaStore.updateIsAddLabel({cmMarkGroupId: 0, labelType: "", isAddLabel: false})
     }
 }
 
@@ -320,10 +312,8 @@ function switchCamera(cameraId: string) {
     console.log('get camera obj.', cameraMap.value);
     let cameraObj = cameraMap.value.get(cameraId);
     console.log(cameraObj, 'cameraObj');
-
     if (!cameraObj) {
         console.log('camera obj not found.');
-
         return;
     }
     curVideoKey.value = cameraId;
@@ -344,13 +334,16 @@ function switchCamera(cameraId: string) {
             jessibuca.value.play(wsStreamUrl);
         }
     );
-
+        console.log("step4, active camera searcher.");
+        
     // step4, active camera searcher.
     markSearchApi.IsExistsSearcher({
         'cameraId': cameraObj.id
     }).then((res: any) => {
         if (judgeResponse(res)) return;
         let flag: boolean = res.data.data;
+        console.log(flag, res,111111111111111111111111111111111111111111);
+        
         if (!flag) {
             console.log('not exist searcher.');
             markSearchApi.ActiveSearcher({
@@ -363,7 +356,6 @@ function switchCamera(cameraId: string) {
                     console.log('load camera labels');
                     getLabel(cameraObj.id);
                     loadMarkLabelsByLoop(cameraObj);
-
                 }
             });
         } else {
@@ -375,6 +367,7 @@ function switchCamera(cameraId: string) {
 
     // step5, load camera labels.
 }
+
 function getLabel(cbCameraId: string | number) {
     let str = JSON.stringify({cbCameraId})
     markLabelApi.GetList({queryJson: str}).then((res: any) => {
@@ -392,17 +385,23 @@ function getLabel(cbCameraId: string | number) {
         console.log(labelList.value, 'labelList.value');
     });
 }
+
 function loadMarkLabelsByLoop(cameraObj: any, ms: number = 1000) {
-    if (curSelectKey.value !== cameraObj.id) {
+    console.log(curSelectKey.value,cameraObj.id);
+    
+    if (curSelectKey.value != cameraObj.id) {
         console.log('load camera labels end.');
         return;
     }
     loadMarkLabels(cameraObj);
-    // let timer = setTimeout(() => {
-    //     loadMarkLabelsByLoop(cameraObj, ms);
-    //     clearTimeout(timer)
-    // }, ms);
+    let timer = setTimeout(() => {
+        loadMarkLabelsByLoop(cameraObj, ms);
+        clearTimeout(timer)
+        console.log(new Date());
+        
+    }, ms);
 }
+
 function loadMarkLabels(cameraObj: any) {
     markSearchApi.GetMarkLabelCalcResultList({
         'cameraId': cameraObj.id
@@ -410,7 +409,6 @@ function loadMarkLabels(cameraObj: any) {
         if (judgeResponse(res)) return;
         let list: Array<any> = res.data.data;
         console.log(list);
-
         list.forEach((element: any) => {
             labelList.value.forEach((item: any, index: number) => {
                 if (element.id == item.id) {
@@ -418,12 +416,11 @@ function loadMarkLabels(cameraObj: any) {
                     labelList.value[index].canvasTopRatio = element.canvasTopRatio
                     labelList.value[index].inFlag = element.inFlag
                 }
-
             });
         });
-
     });
 }
+
 function judgeResponse(res: any): boolean {
     let flag = false;
     if (flag) promptError();
@@ -433,6 +430,7 @@ function judgeResponse(res: any): boolean {
 function promptError() {
     // promptError
 }
+
 //刷新页面
 window.onbeforeunload = () => {
     jessibuca.value.destroy()
@@ -441,7 +439,7 @@ onUnmounted(() => {
     {
         jessibuca.value.destroy()
     }
-}) 
+})
 </script>
 
 <style scoped lang='less'>
@@ -471,7 +469,7 @@ onUnmounted(() => {
             justify-content: center;
             align-items: center;
 
-            >div {
+            > div {
                 position: relative;
             }
 
@@ -480,7 +478,6 @@ onUnmounted(() => {
                 top: 50%;
                 left: 50%;
                 transform: translate(-50%, -55%);
-                color: white;
             }
 
             img {