sl-sfy-safety/src/views/cameras/preview/components/FenceEditorV2/FenceItem.vue

<!-- eslint-disable vue/no-use-v-if-with-v-for -->
<template>
  <v-group
    v-for="group in props.fenceGroups"
    :key="group.uid"
    :groupId="group.uid"
    :draggable="props.draggable && props.isEdit"
    :name="group.name"
    @mouse-down="handleGroupMouseDown"
  >
    <v-line :config="group.lineConfig" />
    <v-circle
      v-if="props.isEdit && props.currentGroupId === group.uid"
      v-for="circleConfig in group.circleConfigs"
      :config="circleConfig"
      :key="circleConfig"
      @mouse-down="handleCircleMouseDown"
      @drag-move="handleCircleDragMove(circleConfig, $event)"
    />
  </v-group>
</template>
<script lang="ts" setup>
  import { FenceCircleConfig, FenceGroup } from './types';

  const props = defineProps<{
    fenceGroups: FenceGroup[];
    draggable: boolean;
    isEdit: boolean;
    /** 当前选中的分组 */
    currentGroupId: string;
  }>();

  const emits = defineEmits<{ (e: 'selectGroup', groupId: string): unknown }>();

  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;
    lineAttrs.points[idx * 2 + 1] = y;
    circleConfig.x = x;
    circleConfig.y = y;
  };

  const handleCircleMouseDown = (e: { cancelBubble: boolean }) => {
    /** 阻止冒泡 */
    e.cancelBubble = true;
  };

  const handleGroupMouseDown = (e) => {
    if (!props.isEdit) return;
    e.target.parent.moveToTop();
    emits('selectGroup', e.target.parent.attrs.groupId);
  };
</script>
<style scoped></style>