标签分类

src/store/index.ts

@@ -10,8 +10,9 @@ export const useStore = defineStore('Index', {
             audioCount: 0,
             audioCurrentCount: 0,
             editType: 0,
-            addLabel: {cmMarkGroupId:0,labelType:"",isAddLabel: false},
-            curTreeKey:""
+            addLabel: { cmMarkGroupId: 0, labelType: "", isAddLabel: false },
+            curTreeKey: "",
+            labelGroupList: []
         }
     },
 
@@ -21,7 +22,7 @@ export const useStore = defineStore('Index', {
         addCameraMap(list: any) {
             this.treeData = []
             for (let item of list) {
-                this.cameraMap.set(item.id+'', item);
+                this.cameraMap.set(item.id + '', item);
                 this.treeData.push({ title: item.ip, key: item.id });
             }
             return this.cameraMap
@@ -38,8 +39,11 @@ export const useStore = defineStore('Index', {
         updateaudioCount(num: number) {
             this.audioCount = num
         },
-        updateIsAddLabel(obj:any){
-            this.addLabel=obj
+        updateIsAddLabel(obj: any) {
+            this.addLabel = obj
+        },
+        updateLabelGroupList(arr: any) {
+            this.labelGroupList = arr
         }
     },
 })

src/views/page/Aside/cameraRightMenu.vue

@@ -83,6 +83,7 @@ function init() {
         let result = res.data
         if (result.code == 200) {
             labelList.value=result.data
+            piniaStore.updateLabelGroupList(result.data)
         }
     })
 }
@@ -99,7 +100,7 @@ onMounted(() => {
     width: 80px;
 }
 .labelList{
-    cursor: pointer;
+    cursor: pointer !important;
 }
 @keyframes rounte {
     from {

src/views/page/cameraCenter.vue

@@ -7,16 +7,24 @@
             @loadedmetadata="changeVideoCanvasSize" @mouseover="mouseOverVideo" @mouseout="mouseOutVideo"
             @mousedown="mouseDownVideo">
         </video>
-        <div v-for="item in labelList" class="labels" :key="item.id"
+        <div v-for="item in labelList" :class="`labels ${item.groupName == '视频标签' ? 'lavels-video' : 'lavels-build'}`"
+            :key="item.id"
             :style="`top:${canvasHeight * item.canvasTopRatio}px;left:${canvasWidth * item.canvasLeftRatio}px`">
             <a-dropdown :trigger="['contextmenu']">
-                <div class="labels-item">
+                <div class="labels-item" v-if="item.groupName == '视频标签'">
                     <!-- <div class="labels-item" v-if="item.inFlag"> -->
                     <div>
                         <img src="@/assets/images/dialog.png" alt="">
                         <div class="label-content">{{ item.name }}</div>
                     </div>
                 </div>
+                <div class="labels-item" alt="" v-else>
+                    <img src="@/assets/images/buildLabelLine.png">
+                    <div>
+                        <img src="@/assets/images/buildLabelBg.png">
+                        <div class="label-content">{{ item.name  }}</div>
+                    </div>
+                </div>
                 <template #overlay>
                     <a-menu @click="({ key: menuKey }) => onContextMenuClick(item.id, menuKey)">
                         <a-menu-item key="edit">编辑</a-menu-item>
@@ -25,8 +33,8 @@
                 </template>
             </a-dropdown>
         </div>
-        <div class="labels" v-if="addLabel.isAddLabel && addLabel.labelType == '建筑标签'"
-            :style="`pointer-events: none;transform: translate(-10px,-10px);position: fixed;top:${addLabelTop}px;left:${addLabelLeft}px`">
+        <div class="labels lavels-build" v-if="addLabel.isAddLabel && addLabel.labelType == '建筑标签'"
+            :style="` pointer-events: none;top:${addLabelTop}px;left:${addLabelLeft}px`">
 
             <div class="labels-item" alt="">
                 <img src="@/assets/images/buildLabelLine.png">
@@ -36,8 +44,8 @@
                 </div>
             </div>
         </div>
-        <div class="labels" v-if="addLabel.isAddLabel && addLabel.labelType == '视频标签'"
-            :style="`position: fixed;transform: translate(-50%,-100%);top:${addLabelTop}px;left:${addLabelLeft}px`">
+        <div class="labels lavels-video" v-if="addLabel.isAddLabel && addLabel.labelType == '视频标签'"
+            :style="`top:${addLabelTop}px;left:${addLabelLeft}px`">
             <div class="labels-item">
                 <!-- <div class="labels-item" v-if="item.inFlag"> -->
                 <div>
@@ -102,7 +110,6 @@ watch(curSelectKey, (newVal, oldVal) => {
     switchCamera(newVal)
 })
 watch(addLabel, (newVal, oldVal) => {
-    console.log(newVal);
     if (newVal.isAddLabel) {
         isActiveChoose.value = true
         document.body.onmousemove = (e) => {
@@ -218,7 +225,7 @@ function mouseDownVideo(e: MouseEvent) {
             VideoHeight: videoHeight,
             CanvasLeftRatio: canvasLeftRatio,
             CanvasTopRatio: canvasTopRatio,
-            CmMarkGroupId:addLabel.value.cmMarkGroupId
+            CmMarkGroupId: addLabel.value.cmMarkGroupId
         }
         markLabelApi.AddReturnId({
             'entity': entity
@@ -245,17 +252,18 @@ function mouseDownVideo(e: MouseEvent) {
                         isDelete: false,
                         inFlag: true,
                         name: name,
+                        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 })
     }
 }
 
@@ -317,12 +325,22 @@ function getRtspUrl(cameraObj: any): string {
     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) => {
-        console.log(res, 'resmarkLabelApi');
+    let str = JSON.stringify({ cbCameraId })
+    markLabelApi.GetList({ queryJson: str }).then((res: any) => {
         if (res.data.code == 200) {
             console.log(res, 'res');
             labelList.value = res.data.data
+            labelList.value = labelList.value.map((item: any) => {
+                let labelGroupList = piniaStore.labelGroupList
+                labelGroupList.forEach((element: any) => {
+                    if (element.id == item.cmMarkGroupId) {
+                        item.groupName = element.name
+                    }
+                });
+                return item
+            })
+            console.log(labelList.value, 'labelList.value');
+
         }
     })
 }
@@ -437,7 +455,16 @@ onUnmounted(() => {
         }
     }
 
+    .lavels-video {
+        position: fixed;
+        transform: translate(-50%, -100%);
+    }
+
+    .lavels-build {
        
+        transform: translate(-10px, -10px);
+        position: fixed;
+    }
 
 }