添加标签

src/axios/cameraMark/markLabelApi.ts

@@ -20,7 +20,7 @@ export const AddReturnId = (params?: any) => axios.post(CisApiUrl + Api.AddRetur
 
 export const Update = (params?: any) => axios.post(CisApiUrl + Api.Update, qs.stringify(params))
 
-export const Delete = (params?: any) => axios.post(CisApiUrl + Api.Delete+"?"+qs.stringify(params))
+export const Delete = (params?: any) => axios.post(CisApiUrl + Api.Delete,qs.stringify(params))
 
 export const Get = (params?: any) => axios.get(CisApiUrl + Api.Get, {params: params})
 

src/components/aside/leftMenu/index.vue

@@ -53,7 +53,7 @@
                 <template #tab>
                     <!-- <span class="icon iconfont icon-shezhi1 iconfontsize"></span> -->
                     <div class="menu-title">
-                        系统<br />功能
+                        系统<br />设置
                     </div>
                 </template>
                 <SytemComponent />

src/components/aside/leftMenu/leftMenuItem/basic.vue

@@ -53,6 +53,7 @@ function playAudio(): void {
 }
 //添加标签
 function addLabel(e: string) {
+    piniaStore.updateIsAddLabel({labelType:"",isAddLabel: true})
     playAudio();
 }
 

src/components/aside/leftMenu/leftMenuItem/sytemcomponent.vue

@@ -7,7 +7,7 @@
                         <span class="icon iconfont icon-moxing-miaobian"></span>
                     </i>
                 </a>
-                <div class="item-text">单体化列表</div>
+                <div class="item-text">用户管理</div>
             </a-col>
             <a-col class="content-item" @click="addhaplochromatization" title="单体化">
 
@@ -16,23 +16,7 @@
                         <span class="icon iconfont icon-sanweimoxing"></span>
                     </i>
                 </a>
-                <div class="item-text">单体化</div>
+                <div class="item-text">相机配置</div>
-            </a-col>
-            <a-col class="content-item" title="防区列表" @click="fenceListFn">
-                <a class="btn btnColor">
-                    <i class="fa">
-                        <span class="icon iconfont icon-liebiao2"></span>
-                    </i>
-                </a>
-                <div class="item-text">防区列表</div>
-            </a-col>
-            <a-col class="content-item" title="添加防区" @click="addDefenceArea">
-                <a class="btn btnColor">
-                    <i class="fa">
-                        <span class="icon iconfont icon-24gl-fence"></span>
-                    </i>
-                </a>
-                <div class="item-text">添加防区</div>
             </a-col>
         </a-row>
     </div>

src/store/index.ts

@@ -1,35 +1,41 @@
 import { defineStore } from 'pinia';
 export const useStore = defineStore('Index', {
-  state: () => {
+    state: () => {
-    return {
+        return {
-        curSelectKey:"",
+            //当前相机id
-        cameraMap:new Map<string, any>(),
+            curSelectKey: "",
-        treeData:<any[]>[],
+            //存放相机数组
-        audioCount: 0,
+            cameraMap: new Map<string, any>(),
-        audioCurrentCount: 0,
+            treeData: <any[]>[],
-        editType:0
+            audioCount: 0,
-    }
+            audioCurrentCount: 0,
-  },
+            editType: 0,
-
+            addLabel: {labelType:"",isAddLabel: false}
-  // 也可以定义为
-  // state: () => ({ count: 0 })
-  actions: {
-    addCameraMap(list:any){
-        this.treeData=[]
-        for (let item of list) {
-            this.cameraMap.set(item.id, item);
-            this.treeData.push({title: item.ip, key: item.id});
         }
-        return this.cameraMap
     },
-    updateCurSelectKey(key:string){
+
-        this.curSelectKey=key
+    // 也可以定义为
+    // state: () => ({ count: 0 })
+    actions: {
+        addCameraMap(list: any) {
+            this.treeData = []
+            for (let item of list) {
+                this.cameraMap.set(item.id, item);
+                this.treeData.push({ title: item.ip, key: item.id });
+            }
+            return this.cameraMap
+        },
+        updateCurSelectKey(key: string) {
+            this.curSelectKey = key
+        },
+        updateaudioCurrentCount(num: number) {
+            this.audioCurrentCount = num
+        },
+        updateaudioCount(num: number) {
+            this.audioCount = num
+        },
+        updateIsAddLabel(obj:any){
+            this.addLabel=obj
+        }
     },
-    updateaudioCurrentCount(num: number) {
-        this.audioCurrentCount = num
-      },
-      updateaudioCount(num: number) {
-        this.audioCount = num
-      },
-  },
 })

src/views/page/cameraCenter.vue

@@ -3,15 +3,22 @@
     <div id="videoWrapper">
         <canvas ref="videoCanvas" id="videoCanvas" :width="canvasWidth" :height="canvasHeight">
         </canvas>
-        <video ref="videoPlayer" id="videoPlayer"  autoplay muted
+        <video ref="videoPlayer" id="videoPlayer" autoplay muted @loadedmetadata="changeVideoCanvasSize"
-            @loadedmetadata="changeVideoCanvasSize" @mouseover="mouseOverVideo" @mouseout="mouseOutVideo"
+            @mouseover="mouseOverVideo" @mouseout="mouseOutVideo" @mousedown="mouseDownVideo">
-            @mousedown="mouseDownVideo">
         </video>
-        <div v-for="item in labelList" class="labels"  :key="item.id" :style="`top:${canvasHeight*item.canvasTopRatio}px;left:${canvasWidth*item.canvasLeftRatio}px`">
+        <div v-for="item in labelList" class="labels" :key="item.id"
-            <div class="labels-item"  @click="test(item.id)">
+            :style="`top:${canvasHeight * item.canvasTopRatio}px;left:${canvasWidth * item.canvasLeftRatio}px`">
-            <!-- <div class="labels-item" v-if="item.inFlag"> -->
+            <div class="labels-item" @click="test(item.id)" @contextmenu.prevent="mouseRightFn">
-            <img src="@/assets/images/dialog.png"  width="80" height="50"  alt="">
+                <!-- <div class="labels-item" v-if="item.inFlag"> -->
-            <span>{{item.name}}</span>
+                <img src="@/assets/images/dialog.png" width="80" height="50" alt="">
+                <span>{{ item.name }}</span>
+            </div>
+        </div>
+        <div class="labels" v-if="addLabel.isAddLabel"
+            :style="`position: fixed;transform: translate(-50%,-100%);top:${addLabelTop}px;left:${addLabelLeft}px`">
+            <div class="labels-item">
+                <img src="@/assets/images/dialog.png" width="80" height="50" alt="">
+                <span>1</span>
             </div>
         </div>
     </div>
@@ -19,12 +26,12 @@
 
 <script setup lang='ts'>
 ////@ts-nocheck
-import { ref, h, onMounted, getCurrentInstance, ComponentInternalInstance, onUnmounted,watch } from "vue";
+import { ref, h, onMounted, getCurrentInstance, ComponentInternalInstance, onUnmounted, watch } from "vue";
 import * as markLabelApi from '@/axios/cameraMark/markLabelApi';
 import * as markSearchApi from '@/axios/core/markSearchApi';
 import { useStore } from '@/store/index';
 import { apiUrl } from "@/axios";
-import {storeToRefs} from 'pinia';
+import { storeToRefs } from 'pinia';
 import Msg from "@/utils/message";
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 let piniaStore = useStore();
@@ -36,7 +43,10 @@ let curSelectKey = storeToRefs(piniaStore).curSelectKey
 let cameraMap = storeToRefs(piniaStore).cameraMap
 let webRtcServer: any = ref()
 let isActiveChoose = ref(false)
-let labelList=ref<any[]>([])
+let labelList = ref<any[]>([])
+let addLabel = storeToRefs(piniaStore).addLabel
+let addLabelLeft = ref(0);
+let addLabelTop = ref(0);
 onMounted(() => {
     {
         player = <HTMLVideoElement>document.querySelector('#videoPlayer');
@@ -47,19 +57,29 @@ onMounted(() => {
 
     }
 })
-watch(curSelectKey,(newVal,oldVal)=>{
+watch(curSelectKey, (newVal, oldVal) => {
     switchCamera(newVal)
 })
-function test(id:number){
+watch(addLabel, (newVal, oldVal) => {
-    console.log(id,"id++++++++++++");
+    console.log(newVal);
+    if (newVal.isAddLabel) {
+        isActiveChoose.value = true
+        document.body.onmousemove = (e) => {
+            addLabelTop.value = e.clientY
+            addLabelLeft.value = e.clientX
+        }
+    }
+})
+//测试删除标签
+function test(id: number) {
 
-    markLabelApi.Delete({id}).then((res:any)=>{
+    markLabelApi.Delete({ id }).then((res: any) => {
         console.log(res.data);
-        if(res.data.code==200){
+        if (res.data.code == 200) {
-            let msg=res.data.data==true?"删除成功":"删除失败"
+            let msg = res.data.data == true ? "删除成功" : "删除失败"
-            if(res.data.data){
+            if (res.data.data) {
-                labelList.value=labelList.value.filter((element:any) => {
+                labelList.value = labelList.value.filter((element: any) => {
-                    return element.id!=id
+                    return element.id != id
                 });
                 Msg.success("删除成功")
                 return
@@ -68,6 +88,10 @@ function test(id:number){
         Msg.error("删除失败")
     })
 }
+function mouseRightFn(e:any){
+    console.log(1111111111,e);
+    
+}
 function loadVideoPlayer() {
     let elmId = 'videoPlayer';
     let url = apiUrl.WebRtcUrl;
@@ -95,9 +119,11 @@ function mouseOutVideo() {
     player.classList.remove('activeChoose');
 }
 function mouseDownVideo(e: MouseEvent) {
+    console.log('mouseDownVideo');
+
     if (!isActiveChoose.value) return;
     let cameraId = cameraMap.value.get(curSelectKey.value).id;
-    let name = 'markLabel-' + Date.now();
+    let name = "1";
     let videoWidth = player.videoWidth | 1920;
     let videoHeight = player.videoHeight | 1080;
     let canvasWidth = player.clientWidth;
@@ -114,7 +140,6 @@ function mouseDownVideo(e: MouseEvent) {
         CanvasLeftRatio: canvasLeftRatio,
         CanvasTopRatio: canvasTopRatio
     }
-    console.log(entity);
     markLabelApi.AddReturnId({
         'entity': entity
     }).then((res: any) => {
@@ -126,7 +151,26 @@ function mouseDownVideo(e: MouseEvent) {
             'cameraId': cameraId,
             'markLabelId': markLabelId
         }).then((res: any) => {
+
             let ret: boolean = res.data.data;
+            console.log(ret, 'ret');
+            if(ret){
+                let obj = {
+                cbCameraId: cameraId,
+                videoWidth: videoWidth,
+                videoHeight: videoHeight,
+                canvasLeftRatio: canvasLeftRatio,
+                canvasTopRatio: canvasTopRatio,
+                id: markLabelId,
+                isDelete: false,
+                inFlag: true,
+                name:name,
+            }
+            labelList.value.push(obj)
+            console.log(obj,'obj111111111111111');
+            
+            piniaStore.updateIsAddLabel({labelType:"",isAddLabel: false})
+            }
         });
     })
 }
@@ -192,12 +236,12 @@ function getRtspUrl(cameraObj: any): string {
     // 模拟 onvif
     return "rtsp://admin:hk123456@192.168.1.65:554/Streaming/Channels/101?transportmode=unicast&profile=Profile_1";
 }
-function getLabel(cbCameraId:string|number){
+function getLabel(cbCameraId: string | number) {
-    markLabelApi.GetList({cbCameraId}).then((res:any)=>{
+    markLabelApi.GetList({ cbCameraId }).then((res: any) => {
 
-        if(res.data.code==200){
+        if (res.data.code == 200) {
-            console.log(res,'res');
+            console.log(res, 'res');
-            labelList.value=res.data.data
+            labelList.value = res.data.data
         }
     })
 }
@@ -216,18 +260,18 @@ function loadMarkLabels(cameraObj: any) {
         'cameraId': cameraObj.id
     }).then((res: any) => {
         let list: Array<any> = res.data.data;
-        list.forEach((element:any) => {
+            console.log(list);
-            labelList.value.forEach((item:any,index:number) => {
-                if(element.id==item.id){
-                labelList.value[index].canvasLeftRatio=element.canvasLeftRatio
-                labelList.value[index].canvasTopRatio=element.canvasTopRatio
-                labelList.value[index].inFlag=element.inFlag
             
+        list.forEach((element: any) => {
+            labelList.value.forEach((item: any, index: number) => {
+                if (element.id == item.id) {
+                    labelList.value[index].canvasLeftRatio = element.canvasLeftRatio
+                    labelList.value[index].canvasTopRatio = element.canvasTopRatio
+                    labelList.value[index].inFlag = element.inFlag
                 }
 
             });
         });
-        // console.log(labelList);
 
         // drawMarkLabels(list);
     });
@@ -268,6 +312,7 @@ onUnmounted(() => {
     height: 100vh;
     position: relative;
     overflow: hidden;
+
     #videoCanvas {
         position: absolute;
     }
@@ -276,20 +321,25 @@ onUnmounted(() => {
         height: 100%;
         width: 100%;
         object-fit: fill;
+
     }
-    .labels{
+
+    .labels {
         position: absolute;
         top: 0;
         left: 0;
-        transform: translate(-50%,-50%);
+        transform: translate(-50%,-100%);
         z-index: 2;
-        .labels-item{
+
+        .labels-item {
             position: relative;
-            span{
+            cursor: pointer;
+
+            span {
                 position: absolute;
                 top: 50%;
                 left: 50%;
-                transform: translate(-50%,-50%);
+                transform: translate(-50%, -50%);
             }
         }
     }