feat：完成分组移动后保存位置信息

src/views/cameras/algo-params-setting/components/CameraViewSetting/CameraViewSetting.vue

@@ -142,31 +142,6 @@
     }
   };
 
-  const newFencePoints = ref([
-    {
-      id: 1,
-      label: 'fence2',
-      name: '电子围栏2',
-      polygon: [
-        [906, 568],
-        [648, 706],
-        [848, 830],
-        [1002, 688],
-      ],
-    },
-    {
-      id: 2,
-      label: 'fence3',
-      name: '电子围栏3',
-      polygon: [
-        [806, 568],
-        [548, 206],
-        [748, 830],
-        [1002, 288],
-      ],
-    },
-  ]);
-
   const valiateFenceDependence = () => {
     const cameraId = cameraDetailStore.cameraId;
     if (!cameraId) {

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

@@ -18,9 +18,10 @@
           <FenceItem
             :fenceGroups="fenceGroups"
             :draggable="!drawingGroupId"
-            @select-group="handleSelectGroup"
             :is-edit="isEdit"
             :current-group-id="currentGroupId"
+            @select-group="handleSelectGroup"
+            @group-end-move="handleGroupEndMove"
           />
         </v-layer>
       </v-stage>
@@ -31,7 +32,7 @@
   import Konva from 'konva';
   import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
   import FenceItem from './FenceItem.vue';
-  import { createCircleConfigItem, createGroupConfig, polygonPoint1ToPoint2 } from './utils';
+  import { createCircleConfigItem, createGroupConfig, polygonPoint1ToPoint2, stageGroupToPoint2 } from './utils';
   import { FenceGroup, FencePolygonPoints, SingleFence } from './types';
   import { ElMessage } from 'element-plus';
   import { GROUP_NAME } from './constants';
@@ -228,12 +229,26 @@
     const fenceGroups = stage?.find('.' + GROUP_NAME);
     const gropuPoints = fenceGroups
       ?.map((item) => {
-        return polygonPoint1ToPoint2(item);
+        return stageGroupToPoint2(item);
       })
       .filter(Boolean);
     return gropuPoints;
   };
 
+  // 分组移动后保存位置信息
+  const handleGroupEndMove = (groupId: string) => {
+    const stage = stageRef.value.getStage();
+    const stageGroups = stage?.find('.' + GROUP_NAME);
+    const group = stageGroups?.find((item) => {
+      return item.attrs.groupId === groupId;
+    });
+    if (!group) {
+      console.error('未匹配到groupId', groupId);
+    }
+    const points = stageGroupToPoint2(group);
+    emits('save', { fenceId: group.attrs.fenceId, polygon: points! });
+  };
+
   /** 退出编辑模式 */
   const exitEditMode = () => {
     currentGroupId.value = '';

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

@@ -4,9 +4,12 @@
     v-for="group in props.fenceGroups"
     :key="group.uid"
     :groupId="group.uid"
+    :fenceId="group.fenceId"
     :draggable="props.draggable && props.isEdit"
     :name="group.name"
     @mouse-down="handleGroupMouseDown"
+    @mouse-up="handleGroupMouseUp"
+    @drag-move="handleGroupMove"
   >
     <v-line :config="group.lineConfig" />
     <v-circle
@@ -20,6 +23,7 @@
   </v-group>
 </template>
 <script lang="ts" setup>
+  import { ref } from 'vue';
   import { FenceCircleConfig, FenceGroup } from './types';
 
   const props = defineProps<{
@@ -30,7 +34,13 @@
     currentGroupId: string;
   }>();
 
-  const emits = defineEmits<{ (e: 'selectGroup', groupId: string): unknown }>();
+  const emits = defineEmits<{
+    (e: 'selectGroup', groupId: string): unknown;
+    (e: 'groupEndMove', groupId: string): unknown;
+  }>();
+
+  /** 当前移动的group id */
+  const moveGroupId = ref('');
 
   const handleCircleDragMove = (circleConfig: FenceCircleConfig, e) => {
     console.log('circle move', e);
@@ -50,8 +60,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 = '';
+    // 分组停止移动
+    emits('groupEndMove', currentGroupId);
+  };
+
+  const handleGroupMove = (e) => {
+    // console.log('groupMove', e);
+    moveGroupId.value = e.target.attrs.groupId;
+  };
 </script>
 <style scoped></style>

src/views/cameras/algo-params-setting/components/FenceEditorV2/utils.ts

@@ -43,8 +43,8 @@ export const createGroupConfig = (data: { points: number[]; scale: number; fence
   };
 };
 
-/** 一个多边形一维点转化为二维的点 */
-export const polygonToPoint2 = (fenceGroup: Konva.Group): [number, number][] | null => {
+/** 将stage中的多边形转化为二维点坐标 */
+export const stageGroupToPoint2 = (fenceGroup: Konva.Group): [number, number][] | null => {
   const groupX = fenceGroup.x();
   const groupY = fenceGroup.y();