feat: 完成电子围栏拖动的保存

src/views/cameras/algo-params-setting/components/FenceEditorV2/FenceItem.vue

@@ -8,8 +8,7 @@
     :draggable="props.draggable && props.isEdit"
     :name="group.name"
     @mouse-down="handleGroupMouseDown"
-    @mouse-up="handleGroupMouseUp"
-    @drag-move="handleGroupMove"
+    @dragend="handleGroupDragEnd"
   >
     <v-line :config="group.lineConfig" />
     <v-circle
@@ -19,6 +18,7 @@
       :key="circleConfig"
       @mouse-down="handleCircleMouseDown"
       @drag-move="handleCircleDragMove(circleConfig, $event)"
+      @dragend="handleCircleDragEnd"
     />
   </v-group>
 </template>
@@ -39,12 +39,7 @@
     (e: 'groupEndMove', groupId: string): unknown;
   }>();
 
-  /** 当前移动的group id */
-  const moveGroupId = ref('');
-
   const handleCircleDragMove = (circleConfig: FenceCircleConfig, e) => {
-    console.log('circle move', e);
-    console.log('circle move circleConfig', circleConfig);
     const lineAttrs = e.target.parent.find('Line')[0].attrs;
     const { x, y, idx } = e.target.attrs;
     lineAttrs.points[idx * 2] = x;
@@ -60,24 +55,24 @@
 
   const handleGroupMouseDown = (e) => {
     if (!props.isEdit) return;
-    moveGroupId.value = '';
     e.target.parent.moveToTop();
     console.log('groupMouseDown', e);
     emits('selectGroup', e.target.parent.attrs.groupId);
   };
 
-  const handleGroupMouseUp = (e) => {
-    const currentGroupId = e.target.parent.attrs.groupId;
-    if (moveGroupId.value !== currentGroupId) return;
-    console.log('groupEndMove', currentGroupId);
-    moveGroupId.value = '';
+  const handleGroupDragEnd = (e) => {
+    const currentGroupId = e.target.attrs.groupId;
+    console.log('groupDragEnd', e);
     // 分组停止移动
     emits('groupEndMove', currentGroupId);
   };
 
-  const handleGroupMove = (e) => {
-    // console.log('groupMove', e);
-    moveGroupId.value = e.target.attrs.groupId;
+  const handleCircleDragEnd = (e) => {
+    // 阻止触发group的dragend事件
+    e.cancelBubble = true;
+    const groupId = e.target.parent.attrs.groupId;
+    console.log('circle drag end', e);
+    emits('groupEndMove', groupId);
   };
 </script>
 <style scoped></style>