标签分类

src/store/index.ts

@@ -11,7 +11,8 @@ export const useStore = defineStore('Index', {
             audioCurrentCount: 0,
             editType: 0,
             addLabel: { cmMarkGroupId: 0, labelType: "", isAddLabel: false },
-            curTreeKey:""
+            curTreeKey: "",
+            labelGroupList: []
         }
     },
 
@@ -40,6 +41,9 @@ export const useStore = defineStore('Index', {
         },
         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) => {
@@ -245,6 +252,7 @@ function mouseDownVideo(e: MouseEvent) {
                         isDelete: false,
                         inFlag: true,
                         name: name,
+                        groupName:name
                     }
                     labelList.value.push(obj)
                     isActiveChoose.value = false
@@ -319,10 +327,20 @@ function getRtspUrl(cameraObj: any): string {
 function getLabel(cbCameraId: string | number) {
     let str = JSON.stringify({ cbCameraId })
     markLabelApi.GetList({ queryJson: str }).then((res: any) => {
-        console.log(res, 'resmarkLabelApi');
         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;
+    }
 
 }