添加标签

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

@@ -2,12 +2,15 @@ import { defineStore } from 'pinia';
 export const useStore = defineStore('Index', {
     state: () => {
         return {
+            //当前相机id
             curSelectKey: "",
+            //存放相机数组
             cameraMap: new Map<string, any>(),
             treeData: <any[]>[],
             audioCount: 0,
             audioCurrentCount: 0,
-        editType:0
+            editType: 0,
+            addLabel: {labelType:"",isAddLabel: false}
         }
     },
 
@@ -31,5 +34,8 @@ export const useStore = defineStore('Index', {
         updateaudioCount(num: number) {
             this.audioCount = num
         },
+        updateIsAddLabel(obj:any){
+            this.addLabel=obj
+        }
     },
 })

src/views/page/cameraCenter.vue

@@ -3,17 +3,24 @@
     <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" @click="test(item.id)" @contextmenu.prevent="mouseRightFn">
                 <!-- <div class="labels-item" v-if="item.inFlag"> -->
                 <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>
 </template>
 
@@ -37,6 +44,9 @@ let cameraMap = storeToRefs(piniaStore).cameraMap
 let webRtcServer: any = ref()
 let isActiveChoose = ref(false)
 let labelList = ref<any[]>([])
+let addLabel = storeToRefs(piniaStore).addLabel
+let addLabelLeft = ref(0);
+let addLabelTop = ref(0);
 onMounted(() => {
     {
         player = <HTMLVideoElement>document.querySelector('#videoPlayer');
@@ -50,8 +60,18 @@ onMounted(() => {
 watch(curSelectKey, (newVal, oldVal) => {
     switchCamera(newVal)
 })
+watch(addLabel, (newVal, oldVal) => {
+    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) {
-    console.log(id,"id++++++++++++");
 
     markLabelApi.Delete({ id }).then((res: any) => {
         console.log(res.data);
@@ -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})
+            }
         });
     })
 }
@@ -216,18 +260,18 @@ function loadMarkLabels(cameraObj: any) {
         'cameraId': cameraObj.id
     }).then((res: any) => {
         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) {
                     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,15 +321,20 @@ onUnmounted(() => {
         height: 100%;
         width: 100%;
         object-fit: fill;
+
     }
+
     .labels {
         position: absolute;
         top: 0;
         left: 0;
-        transform: translate(-50%,-50%);
+        transform: translate(-50%,-100%);
         z-index: 2;
+
         .labels-item {
             position: relative;
+            cursor: pointer;
+
             span {
                 position: absolute;
                 top: 50%;