fix: 文件梳理

src/views/map-config/mini-map/MapBase/CameraGroup-bak.ts

@@ -1,71 +0,0 @@
-import { fabric } from 'fabric';
-import cameraActiveImg from '@/assets/camera/camera-active.png';
-import cameraImg from '@/assets/camera/camera.png';
-import favoritesImg from '@/assets/camera/favorites.png';
-import { getRandomPosition } from './utils';
-import { CameraImage } from './types';
-
-class CameraGroup extends fabric.Group {
-  g: fabric.Group | null = null;
-  cameraImg: CameraImage | null = null;
-  favImg: CameraImage | null = null;
-  cameraId = '';
-
-  constructor() {
-    super();
-    fabric.Image.fromURL(cameraActiveImg, (cImg) => {
-      cImg.set({
-        left: 0,
-        top: 0,
-      });
-      this.cameraImg = cImg;
-      fabric.Image.fromURL(favoritesImg, (favImg) => {
-        favImg.set({
-          left: 50,
-          top: 0,
-        });
-        this.favImg = favImg as CameraImage;
-        this.g = new fabric.Group([cImg, favImg]);
-      });
-    });
-  }
-
-  init() {}
-
-  /** 提供copy功能，每次新建的时候执行copy就行了 */
-  clone(): Promise<CameraGroup> {
-    console.log('clone');
-    return new Promise((resolve) => {
-      this.g?.clone((e) => {
-        console.log('clone', e);
-        resolve(e as CameraGroup);
-      });
-    });
-  }
-
-  setSelected() {
-    this.cameraImg?.setSrc(cameraActiveImg);
-  }
-
-  setUnSelected() {
-    this.cameraImg?.setSrc(cameraImg);
-  }
-  /** 设为默认摄像头 */
-  setDefault() {
-    this.favImg?.set('visible', true);
-  }
-  /** 取消默认摄像头 */
-  cancelDefault() {
-    this.favImg?.set('visible', false);
-  }
-
-  setAttr(attr: { cameraId: string; left: number; top: number }) {
-    if (attr.cameraId) {
-      this.cameraId = attr.cameraId;
-    }
-    this.g?.set(attr);
-    return this.g;
-  }
-}
-
-export default CameraGroup;

src/views/map-config/mini-map/MapBase/CameraGroup.ts

@@ -1,88 +0,0 @@
-import { fabric } from 'fabric';
-import cameraActiveImg from '@/assets/camera/camera-active.png';
-import cameraImg from '@/assets/camera/camera.png';
-import favoritesImg from '@/assets/camera/favorites.png';
-import { CameraImage } from './types';
-
-class CameraGroup extends fabric.Group {
-  g: fabric.Group;
-  cameraImg: CameraImage | null = null;
-  favImg: CameraImage | null = null;
-  cameraId = '';
-
-  constructor() {
-    super();
-    this.init();
-  }
-
-  init() {
-    fabric.Image.fromURL(cameraActiveImg, (cImg) => {
-      cImg.set({
-        left: 0,
-        top: 0,
-        width: 100,
-        height: 100,
-        imageName: 'cameraImage',
-      });
-      console.log('cameraActiveImg', cImg);
-      this.cameraImg = cImg;
-      fabric.Image.fromURL(favoritesImg, (favImg) => {
-        favImg.set({
-          width: 50,
-          height: 50,
-          left: 50,
-          top: 0,
-          imageName: 'favImage',
-        });
-        this.favImg = favImg as CameraImage;
-        this.g = new fabric.Group([cImg, favImg]);
-      });
-    });
-  }
-
-  /** 提供copy功能，每次新建的时候执行copy就行了 */
-  clone(): Promise<CameraGroup> {
-    console.log('clone');
-    console.log('this', this);
-    return new Promise((resolve) => {
-      this.g.clone((e) => {
-        console.log('clone', e);
-        const newG = e as fabric.Group;
-        const newGroup = new CameraGroup();
-        const cameraImg = newG.getObjects().find((x) => x.imageName === 'cameraImage');
-        const favImage = newG.getObjects().find((x) => x.imageName === 'favImage');
-        newGroup.cameraImg =                            ;
-        newGroup.favImg = favImage;
-        newGroup.g = e;
-        resolve(newGroup as CameraGroup);
-      });
-    });
-  }
-
-  setSelected() {
-    
-    this.cameraImg?.setSrc(cameraActiveImg);
-  }
-
-  setUnSelected() {
-    this.cameraImg?.setSrc(cameraImg);
-  }
-  /** 设为默认摄像头 */
-  setDefault() {
-    this.favImg?.set('visible', true);
-  }
-  /** 取消默认摄像头 */
-  cancelDefault() {
-    this.favImg?.set('visible', false);
-  }
-
-  setAttr(attr: { cameraId: string; left: number; top: number }) {
-    if (attr.cameraId) {
-      this.cameraId = attr.cameraId;
-    }
-    this.g?.set(attr);
-    return this.g;
-  }
-}
-
-export default new CameraGroup();

src/views/map-config/mini-map/MapBase/CameraMapBak.ts

@@ -1,216 +0,0 @@
-import { fabric } from 'fabric';
-import { ref } from 'vue';
-import cameraActiveImg from '@/assets/camera/camera-active.png';
-import cameraImg from '@/assets/camera/camera.png';
-import favoritesImg from '@/assets/camera/favorites.png';
-import { CameraImage, MapData, OnMoving, OnRightClick, OnSelect, isCanvas } from './types';
-import { fabricSetting } from './fabricSetting';
-import { getRandomPosition } from './utils';
-// import templateGroup from './CameraGroup';
-import { createGroup, toggleGroupSelected, toggleCameraDefault } from './CameraStarGroup';
-
-fabricSetting();
-
-class CameraMap {
-  public canvas = ref<fabric.Canvas | null>();
-  private onSelect: OnSelect;
-  private onRightClick: OnRightClick;
-  private onMoving: OnMoving;
-
-  constructor(param: {
-    canvasId: string;
-    onSelect: OnSelect;
-    onRightClick: OnRightClick;
-    onMoving: OnMoving;
-  }) {
-    this.canvas.value = new fabric.Canvas(param.canvasId, {
-      fireRightClick: true, // 启用右键，button的数字为3
-      stopContextMenu: true, // 禁止默认右键菜单
-    });
-    this.addListener();
-    this.onSelect = param.onSelect;
-    this.onRightClick = param.onRightClick;
-    this.onMoving = param.onMoving;
-    window.canvas = this.canvas.value;
-  }
-
-  /** 监听点击事件 */
-  private addListener() {
-    const canvas = this.canvas.value;
-    if (!isCanvas(canvas)) return;
-
-    canvas.on('mouse:down', (options) => {
-      const target = options.target as CameraImage;
-      const cameraId = target?.cameraId;
-      // console.log('当前选中的id是', cameraId);
-      console.log('mouse:down');
-      console.log(options);
-
-      // 判断：右键，且在元素上右键
-      // opt.button: 1-左键；2-中键；3-右键
-      // 在画布上点击：opt.target 为 null
-      if (options.button === 3 && options.target) {
-        this.onRightClick(options);
-        return;
-      }
-
-      this.setAllGroupsUnselected();
-      if (!cameraId || !target) {
-        this.onSelect(null);
-        return;
-      }
-      toggleGroupSelected(target, true).then(() => {
-        canvas.renderAll();
-      });
-      this.onSelect(target);
-    });
-  }
-
-  private setAllGroupsUnselected() {
-    const canvas = this.canvas;
-    if (!isCanvas(canvas)) return;
-    canvas.getObjects('group').forEach((object) => {
-      // if (object === options.target) return;
-      toggleGroupSelected(object, false).then((res) => {
-        canvas.renderAll();
-      });
-    });
-  }
-
-  /** 上传背景图 */
-  public uploadBg(imgUrl: string) {
-    const canvas = this.canvas.value;
-    if (!isCanvas(canvas)) return;
-    fabric.Image.fromURL(imgUrl, (img) => {
-      console.log('image', img);
-      canvas!.setWidth(img.width!);
-      canvas!.setHeight(img.height!);
-      img.lockScalingX = true;
-      img.lockScalingY = true;
-      // 设置背景图
-      canvas.setBackgroundImage(img, this.canvas.value!.renderAll.bind(this.canvas));
-    });
-  }
-
-  /** 将所有的摄像头都设置为非激活状态 */
-  private setAllCameraUnActive() {
-    const canvas = this.canvas.value;
-    if (!isCanvas(canvas)) return;
-    canvas.forEachObject((object) => {
-      (object as fabric.Image).setSrc(cameraImg, () => {
-        canvas.renderAll();
-      });
-    });
-  }
-
-  /** 增加一个摄像头 */
-  public addCamera(cameraId: string): Promise<CameraImage> {
-    const canvas = this.canvas.value;
-    if (!isCanvas(canvas)) return Promise.reject();
-    // eslint-disable-next-line @typescript-eslint/no-this-alias
-    const that = this;
-    return new Promise((resolve) => {
-      fabric.Image.fromURL(cameraActiveImg, (cImg) => {
-        const cameraImg = ref(cImg as unknown as CameraImage);
-        this.setAllCameraUnActive();
-        cameraImg.value.set({
-          left: getRandomPosition(),
-          top: getRandomPosition(),
-          cameraId,
-        });
-        cameraImg.value.lockScalingX = true;
-        cameraImg.value.lockScalingY = true;
-        canvas.add(cameraImg.value);
-        cameraImg.value.on('moving', function (e) {
-          console.log('move', e);
-          that.onMoving(e);
-        });
-        resolve(cameraImg);
-      });
-    });
-  }
-
-  /** 删除一个摄像头 */
-  public removeCamera(cameraImage: CameraImage) {
-    const canvas = this.canvas.value;
-    if (!isCanvas(canvas)) return;
-    console.log('removeCamera', cameraImage);
-    canvas.remove(cameraImage);
-  }
-
-  /** 导出JSON格式 */
-  public toJSON() {
-    const canvas = this.canvas.value;
-    if (!isCanvas(canvas)) return;
-    const initialJSON = canvas.toJSON(['cameraId']);
-    /** toJSON返回值的类型它写错了，应该是有backgroundImage的 */
-    const { src, type, version, width, height, left, top, angle } =
-      (initialJSON as any).backgroundImage || {};
-
-    const newObjects = initialJSON.objects.map((item) => {
-      return {
-        type: item.type,
-        width: item.width,
-        height: item.height,
-        left: item.left,
-        top: item.top,
-        angle: item.angle,
-        cameraId: (item as CameraImage).cameraId,
-      };
-    });
-    const newJson = {
-      version: initialJSON.version,
-      backgroundImage: { src, type, version, width, height, left, top, angle },
-      objects: newObjects,
-    };
-    return newJson;
-  }
-
-  /** 从json中加载 */
-  public loadFromJSON(json: MapData): Promise<void> {
-    const canvas = this.canvas.value;
-    if (!isCanvas(canvas)) return Promise.reject();
-    return new Promise((resolve) => {
-      const { width, height } = json.backgroundImage;
-      canvas.setWidth(width);
-      canvas.setHeight(height);
-      const objects = json.objects.map((item) => {
-        return {
-          ...item,
-          src: cameraImg,
-        };
-      });
-      canvas.loadFromJSON({ ...json, objects }, () => {
-        resolve();
-      });
-    });
-  }
-
-  /** 更新摄像头的渲染 */
-  public renderCamera() {
-    const canvas = this.canvas.value;
-    if (!isCanvas(canvas)) return;
-    canvas.renderAll();
-  }
-
-  public clear() {
-    this.canvas.value?.clear();
-  }
-
-  /** 是否已经存在这个cameraId */
-  public hasCamera(cameraId: string) {
-    const canvas = this.canvas.value;
-    if (!isCanvas(canvas)) return;
-    const cameraIds = canvas
-      .toJSON(['cameraId'])
-      .objects.map((item) => (item as CameraImage).cameraId);
-    return cameraIds.includes(cameraId);
-  }
-
-  /** 根据cameraId查找某个元素 */
-  public getCameraById(cameraId: string) {
-    return this.canvas.value?.getObjects().find((x) => (x as CameraImage).cameraId === cameraId);
-  }
-}
-
-export default CameraMap;

src/views/map-config/mini-map/MapBase/CameraPreview.vue

@@ -1,73 +0,0 @@
-<template>
-  <div>
-    <div style="overflow: auto; position: relative">
-      <canvas width="400" height="400" ref="canvasRef" style="border: 1px solid #ccc"></canvas>
-      <DefaultCameraIcon :position="favPosition" />
-    </div>
-  </div>
-</template>
-<script lang="ts" setup>
-  import { fabric } from 'fabric';
-  import { onMounted, ref, watch } from 'vue';
-  import cameraImg from '@/assets/camera/camera.png';
-  import { CameraImage, MapData } from './types';
-  import DefaultCameraIcon from './DefaultCameraIcon.vue';
-  import { getFavPositionByCamera } from './utils';
-
-  const props = defineProps<{ json: MapData }>();
-
-  let canvas;
-  const canvasRef = ref<HTMLCanvasElement>();
-
-  const favPosition = ref<{ left: number; top: number } | null>(null);
-
-  const createMap = () => {
-    if (!canvasRef.value) return;
-    canvas = new fabric.Canvas(canvasRef.value, {
-      fireRightClick: true, // 启用右键，button的数字为3
-      stopContextMenu: true, // 禁止默认右键菜单
-    });
-    canvas.selectable = false;
-    // window.cvs = canvas;
-  };
-
-  onMounted(() => {
-    createMap();
-  });
-
-  watch(
-    () => props.json,
-    () => {
-      const json = props.json;
-      console.log('props.json', props.json);
-      if (json) {
-        const { width, height } = json.backgroundImage;
-        canvas?.setWidth(width);
-        canvas?.setHeight(height);
-        const objects = json.objects.map((item) => {
-          return {
-            ...item,
-            src: cameraImg,
-            selectable: false,
-            hasControls: false,
-            hasBoards: false,
-          };
-        });
-        canvas?.loadFromJSON({ ...json, objects }, () => {
-          const defaultCamera = getCameraById(json.defaultCameraId);
-          if (defaultCamera) {
-            favPosition.value = getFavPositionByCamera(defaultCamera);
-          }
-        });
-      }
-    },
-    { deep: true },
-  );
-
-  const getCameraById = (cameraId: string) => {
-    return canvas
-      ?.getObjects()
-      .find((x) => (x as CameraImage).cameraId === cameraId) as CameraImage;
-  };
-</script>
-<style scoped></style>

src/views/map-config/mini-map/MapBase/CameraStarGroup.ts

@@ -1,68 +0,0 @@
-import { fabric } from 'fabric';
-import cameraActiveImg from '@/assets/camera/camera-active.png';
-import cameraImg from '@/assets/camera/camera.png';
-import favoritesImg from '@/assets/camera/favorites.png';
-import { CameraImage } from './types';
-
-const cameraImageName = 'cameraImage';
-const favImageName = 'favImageImage';
-
-const cameraInfo = { width: 60, height: 40 };
-const favInfo = { width: 10, height: 10 };
-
-export function createGroup(): Promise<fabric.Group> {
-  return new Promise((resolve) => {
-    fabric.Image.fromURL(cameraActiveImg, (cImg) => {
-      cImg.set({
-        left: 0,
-        top: 0,
-        width: cameraInfo.width,
-        height: cameraInfo.height,
-        imageName: cameraImageName,
-      });
-      console.log('cameraActiveImg', cImg);
-
-      fabric.Image.fromURL(favoritesImg, (favImg) => {
-        favImg.set({
-          width: favInfo.width,
-          height: favInfo.height,
-          left: 40,
-          top: -10,
-          visible: false,
-          imageName: favImageName,
-        });
-        resolve(
-          new fabric.Group([cImg, favImg], {
-            width: cameraInfo.width,
-            height: cameraInfo.height,
-            // 不要缓存，否则无法修改图片地址
-            objectCaching: false,
-          }),
-        );
-      });
-    });
-  });
-}
-
-/** 设置是否是选中后的效果 */
-export function toggleGroupSelected(group: fabric.Group, isSelected: boolean) {
-  return new Promise((resolve, reject) => {
-    const groupCamera = group.getObjects()[0] as fabric.Image;
-    // .find((item) => item.imageName === cameraImageName) as fabric.Image;
-    if (!groupCamera) {
-      reject();
-      return;
-    }
-    const src = isSelected ? cameraActiveImg : cameraImg;
-    groupCamera.setSrc(src, () => {
-      resolve();
-    });
-  });
-}
-
-/** 设置是否为默认摄像头 */
-export function toggleCameraDefault(group: fabric.Group, visible: boolean) {
-  const star = group.getObjects()[1];
-  if (!star) return;
-  star.set({ visible });
-}

src/views/map-config/mini-map/MapBase/DefaultCameraIcon.vue

@@ -1,21 +0,0 @@
-<template>
-  <!-- 默认选中图片的icon -->
-  <img
-    v-if="props.position"
-    :src="favIcon"
-    class="defaultCameraImg"
-    :style="{ left: props.position?.left + 'px', top: props.position?.top + 'px' }"
-  />
-</template>
-<script lang="ts" setup>
-  import favIcon from '@/assets/camera/favorites.png';
-
-  const props = defineProps<{ position: { left: number; top: number } | null }>();
-</script>
-<style scoped>
-  .defaultCameraImg {
-    position: absolute;
-    width: 15px;
-    /* height: 50px; */
-  }
-</style>

src/views/map-config/mini-map/MapBase/KonvaMap.vue

@@ -6,8 +6,6 @@
         <v-group
           v-for="camera in cameras"
           :key="camera.id"
-          :id="camera.id"
-          :attrs="camera"
           :config="camera.groupConfig"
           @click="handleCameraClick(camera)"
           @mouseover="(e) => handleMouseOver(e)"
@@ -43,32 +41,13 @@
   import urlJoin from 'url-join';
   import cameraImgSrc from '@/assets/camera/cameraImg.png';
   import favoritesImgSrc from '@/assets/camera/favorites.png';
-  import { TipPositionEnum } from '../type';
+  import { TipPositionEnum, camerasGroupType } from '../type';
 
   const globSetting = useGlobSetting();
 
   const emit = defineEmits(['changeDefaultCamera', 'sendCameraId']);
 
-  interface caremasImgType {
-    x?: number;
-    y?: number;
-    width?: number;
-    height?: number;
-    draggable?: boolean;
-    rotation?: number;
-    scaleX?: number;
-    scaleY?: number;
-    image?: HTMLImageElement;
-    name?: string;
-    url?: string;
-  }
-
-  interface caremasGroupType {
-    id?: string;
-    groupConfig: caremasImgType;
-    config: caremasImgType;
-    isDefault?: boolean;
-  }
+  const camImg = new Image();
 
   const stageConfig = ref({
     width: 800,
@@ -90,7 +69,7 @@
   const lastClickedGroupId = ref<string | null>(null);
 
   const bgImgUrl = ref<string | null>('');
-  const cameras = ref<caremasGroupType[]>([]);
+  const cameras = ref<camerasGroupType[]>([]);
   //默认相机id
   const defaultCameraId = ref('');
   const tipShow = ref(false);
@@ -216,8 +195,8 @@
   const addCamera = (id: string) => {
     const existingCamera = cameras.value.find((camera) => camera.id === id);
     if (existingCamera) return;
-    const camImg = new Image();
-    camImg.src = cameraImgSrc;
+    // const camImg = new Image();
+    // camImg.src = cameraImgSrc;
     const config = {
       width: 52,
       height: 37,
@@ -268,7 +247,7 @@
   );
 
   watch(
-    () => cameras,
+    () => cameras.value,
     () => {
       emit('sendCameraId', cameras.value);
     },
@@ -278,6 +257,10 @@
   //添加背景
   const addBg = (imgBg) => {
     bgImgUrl.value = imgBg;
+    if (!bgImgUrl.value) {
+      bgImg.src = null as any as string;
+      return;
+    }
     bgImg.src = urlJoin(globSetting.imgUrl!, imgBg) as string;
     bgImg.onload = () => {
       bgConfig.value.width = bgImg.width;
@@ -342,8 +325,8 @@
   const createMap = (layout) => {
     addBg(layout.bgImgUrl);
     stageConfig.value = layout.stageConfig;
-    const camImg = new Image();
-    camImg.src = cameraImgSrc;
+    // const camImg = new Image();
+    // camImg.src = cameraImgSrc;
     defaultCameraId.value = layout.defaultCameraId;
     layout.cameraList = layout.cameraList?.map((item) => {
       item.config.image = camImg;
@@ -356,6 +339,7 @@
 
   onMounted(() => {
     window.addEventListener('keydown', handleKeyDown);
+    camImg.src = cameraImgSrc;
   });
 
   onBeforeUnmount(() => {
@@ -363,10 +347,7 @@
   });
 </script>
 
-<style scoped>
-  .drawContainer {
-    position: relative;
-  }
+<style scoped lang="scss">
   .opt-container {
     width: 160px;
     padding: 10px;

src/views/map-config/mini-map/MapBase/fabricSetting.ts

@@ -1,58 +0,0 @@
-import { fabric } from 'fabric';
-// import favoritesImg from '@/assets/camera/favorites.png';
-
-export function fabricSetting() {
-  fabric.Object.prototype.padding = 10;
-
-  // 修改控制点的形状，默认为`rect`矩形，可选的值还有`circle`圆形
-  // fabric.Object.prototype.cornerStyle = 'circle';
-
-  // 修改控制点的大小为10px
-  fabric.Object.prototype.cornerSize = 8;
-
-  fabric.Object.prototype.controls.mtr.withConnection = true;
-  // 单独修改旋转控制点距离主体的纵向距离为-20px
-  fabric.Object.prototype.controls.mtr.offsetY = -20;
-
-  // 单独修改旋转控制点，光标移动到该点上时的样式为`pointer`，一个手的形状
-  fabric.Object.prototype.controls.mtr.cursorStyle = 'pointer';
-  /** 边框颜色 */
-  fabric.Object.prototype.borderColor = '#5687f1';
-  // 修改控制点的填充色为白色
-  fabric.Object.prototype.cornerColor = '#5687f1';
-
-  /** 隐藏x y轴的变形，只能等比例变形 */
-  fabric.Object.prototype.controls.mr.visible = false;
-  fabric.Object.prototype.controls.ml.visible = false;
-  fabric.Object.prototype.controls.mt.visible = false;
-  fabric.Object.prototype.controls.mb.visible = false;
-
-  window.fabric = fabric;
-}
-
-// // 渲染元素的icon按钮
-// function renderIcon(icon) {
-//   return function (ctx, left, top, styleOverride, fabricObject) {
-//     const size = this.cornerSize;
-//     ctx.save();
-//     ctx.translate(left, top);
-//     ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle));
-//     ctx.drawImage(icon, -size / 2, -size / 2, size, size);
-//     ctx.restore();
-//   };
-// }
-// function setControlIcon() {
-//   const favImg = document.createElement('img');
-//   favImg.src = favoritesImg;
-//   // 删除按钮控件
-//   fabric.Object.prototype.controls.favIcon = new fabric.Control({
-//     x: 0.5,
-//     y: -0.5,
-//     offsetY: -16,
-//     offsetX: 26,
-//     cursorStyle: 'pointer',
-//     // mouseUpHandler: deleteObject,
-//     render: renderIcon(favImg),
-//     cornerSize: 24,
-//   });
-// }

src/views/map-config/mini-map/MapBase/mapData.json

@@ -1,42 +0,0 @@
-{
-  "version": "5.3.0",
-  "backgroundImage": {
-    "src": "http://127.0.0.1:5174/src/assets/img/canvasBg.png?t=1700735801636",
-    "type": "image",
-    "version": "5.3.0",
-    "width": 800,
-    "height": 409,
-    "left": 0,
-    "top": 0,
-    "angle": 0
-  },
-  "objects": [
-    {
-      "type": "image",
-      "width": 30,
-      "height": 19,
-      "left": 34.77,
-      "top": 15.88,
-      "angle": 37.64,
-      "cameraId": "1"
-    },
-    {
-      "type": "image",
-      "width": 30,
-      "height": 19,
-      "left": 18.52,
-      "top": 362.26,
-      "angle": 331.41,
-      "cameraId": "2"
-    },
-    {
-      "type": "image",
-      "width": 30,
-      "height": 20,
-      "left": 339.99,
-      "top": 368.21,
-      "angle": 317.8,
-      "cameraId": "3"
-    }
-  ]
-}

src/views/map-config/mini-map/MapBase/types.ts

@@ -1,40 +0,0 @@
-export interface MapData {
-  version: string;
-  backgroundImage: {
-    src: string;
-    type: string;
-    width: number;
-    height: number;
-    left: number;
-    top: number;
-    angle: number;
-  };
-  objects: CameraImgObject[];
-  defaultCameraId: string;
-}
-
-export interface CameraImgObject {
-  type: string;
-  width: number;
-  height: number;
-  left: number;
-  top: number;
-  angle: number;
-  cameraId: string;
-}
-
-export interface CameraImage extends fabric.Image {
-  cameraId?: string;
-}
-
-export type Canvas = fabric.Canvas;
-
-export const isCanvas = (canvas: Canvas | null | undefined): canvas is Canvas => {
-  return Boolean(canvas);
-};
-
-export type OnSelect = (image: CameraImage | null) => unknown;
-export type OnRightClick = (e: fabric.IEvent<MouseEvent>) => unknown;
-export type OnMoving = (e: fabric.IEvent<MouseEvent>) => unknown;
-export type OnRotating = (e: fabric.IEvent<MouseEvent>) => unknown;
-export type SetSelectedCamera = (e: CameraImage | null) => unknown;

src/views/map-config/mini-map/MapBase/useCameraMap.ts

@@ -1,249 +0,0 @@
-import { fabric } from 'fabric';
-import { ref } from 'vue';
-import cameraImg from '@/assets/camera/camera.png';
-import {
-  CameraImage,
-  MapData,
-  OnMoving,
-  OnRightClick,
-  OnSelect,
-  isCanvas,
-  OnRotating,
-  SetSelectedCamera,
-} from './types';
-import { fabricSetting } from './fabricSetting';
-import { getRandomPosition } from './utils';
-
-fabricSetting();
-
-interface Props {
-  onSelect: OnSelect;
-  onRightClick: OnRightClick;
-  onMoving: OnMoving;
-  onRotating: OnRotating;
-  setSelectedCamera: SetSelectedCamera;
-  onObjectsAdded: () => unknown;
-}
-
-function useCameraMap(props: Props) {
-  let canvas;
-
-  const createMap = (canvasId: string) => {
-    canvas = new fabric.Canvas(canvasId, {
-      fireRightClick: true, // 启用右键，button的数字为3
-      stopContextMenu: true, // 禁止默认右键菜单
-    });
-    addListener();
-    // window.canvas = canvas;
-  };
-
-  /** 监听点击事件 */
-  const addListener = () => {
-    if (!isCanvas(canvas)) return;
-
-    canvas.on('mouse:down', (options) => {
-      if (!canvas) return;
-      const target = options.target as CameraImage;
-      const cameraId = target?.cameraId;
-      // console.log('当前选中的id是', cameraId);
-      console.log('mouse:down');
-      console.log(options);
-
-      // 判断：右键，且在元素上右键
-      // opt.button: 1-左键；2-中键；3-右键
-      // 在画布上点击：opt.target 为 null
-      if (options.button === 3 && options.target) {
-        props.onRightClick(options);
-        return;
-      }
-
-      if (!cameraId || !target) {
-        props.onSelect(null);
-        return;
-      }
-
-      props.onSelect(target);
-    });
-
-    canvas.on('object:moving', (e) => {
-      // console.log('object moving', e);
-      props.onMoving(e);
-    });
-    canvas.on('object:rotating', function (e) {
-      props.onRotating(e);
-    });
-
-    /** 监听点击选中的时候 */
-    canvas.on('selection:created', function (e) {
-      console.log('selection created', e);
-      props.setSelectedCamera((e.selected?.[0] as CameraImage) || null);
-    });
-    /** 监听有选中更新的时候 */
-    canvas.on('selection:updated', function (e) {
-      console.log('selection updated', e);
-      props.setSelectedCamera((e.selected?.[0] as CameraImage) || null);
-    });
-    /** 监听选中取消的时候 */
-    canvas.on('selection:cleared', function (e) {
-      console.log('selection cleared', e);
-      props.setSelectedCamera(null);
-    });
-    /** 监听object增加的时候 */
-    canvas.on('object:added', function (e) {
-      console.log('object add', e);
-      props.onObjectsAdded();
-    });
-    /** 监听object删除的时候 */
-    canvas.on('object:removed', function (e) {
-      console.log('object removed', e);
-      props.onObjectsAdded();
-    });
-  };
-
-  /**  上传背景图 */
-  const uploadBg = (imgUrl: string) => {
-    if (!isCanvas(canvas)) return;
-    fabric.Image.fromURL(imgUrl, (img) => {
-      const refImg = ref(img);
-      console.log('image', img);
-      canvas!.setWidth(img.width!);
-      canvas!.setHeight(img.height!);
-      refImg.value.lockScalingX = true;
-      refImg.value.lockScalingY = true;
-      // 设置背景图
-      canvas?.setBackgroundImage(refImg.value, canvas!.renderAll.bind(canvas));
-    });
-  };
-
-  /**  增加一个摄像头 */
-  const addCamera = (cameraId: string): Promise<CameraImage> => {
-    if (!isCanvas(canvas)) return Promise.reject();
-    // eslint-disable-next-line @typescript-eslint/no-this-alias
-    return new Promise((resolve) => {
-      fabric.Image.fromURL(cameraImg, (img) => {
-        const cImg = ref(img as unknown as CameraImage);
-        cImg.value.set({
-          left: getRandomPosition(),
-          top: getRandomPosition(),
-          cameraId,
-        });
-        cImg.value.lockScalingX = true;
-        cImg.value.lockScalingY = true;
-
-        canvas?.add(cImg.value);
-        canvas?.setActiveObject(cImg.value);
-        // cImg.value.on('moving', function (e) {
-        //   props.onMoving(e);
-        // });
-        // cImg.value.on('rotating', function (e) {
-        //   props.onRotating(e);
-        // });
-
-        resolve(cImg.value);
-      });
-    });
-  };
-
-  /**  删除一个摄像头 */
-  const removeActiveCamera = () => {
-    if (!isCanvas(canvas)) return;
-    const activeObject = canvas?.getActiveObject();
-    if (!activeObject) return;
-    canvas.remove(activeObject);
-  };
-
-  /** 导出JSON格式 */
-  const toJSON = () => {
-    if (!isCanvas(canvas)) return;
-    const initialJSON = canvas.toJSON(['cameraId']);
-    /** toJSON返回值的类型它写错了，应该是有backgroundImage的 */
-    const { src, type, version, width, height, left, top, angle } =
-      (initialJSON as any).backgroundImage || {};
-
-    const newObjects = initialJSON.objects.map((item) => {
-      return {
-        type: item.type,
-        width: item.width,
-        height: item.height,
-        left: item.left,
-        top: item.top,
-        angle: item.angle,
-        cameraId: (item as CameraImage).cameraId,
-      };
-    });
-    const newJson = {
-      version: initialJSON.version,
-      backgroundImage: { src, type, version, width, height, left, top, angle },
-      objects: newObjects,
-    };
-    return newJson;
-  };
-
-  /**  从json中加载 */
-  const loadFromJSON = (json: MapData): Promise<void> => {
-    if (!isCanvas(canvas)) return Promise.reject();
-    canvas.clear();
-    return new Promise((resolve) => {
-      const { width, height } = json.backgroundImage;
-      canvas?.setWidth(width);
-      canvas?.setHeight(height);
-      const objects = json.objects.map((item) => {
-        return {
-          ...item,
-          src: cameraImg,
-        };
-      });
-      canvas?.loadFromJSON({ ...json, objects }, () => {
-        resolve();
-      });
-    });
-  };
-
-  /**  更新摄像头的渲染 */
-  const renderCamera = () => {
-    canvas?.renderAll();
-  };
-  /**  */
-  const clear = () => {
-    canvas?.clear();
-  };
-
-  /**  是否已经存在这个cameraId */
-  const hasCamera = (cameraId: string) => {
-    const cameraIds =
-      canvas?.toJSON(['cameraId']).objects.map((item) => (item as CameraImage).cameraId) || [];
-    return cameraIds.includes(cameraId);
-  };
-
-  const getObjects = () => {
-    return canvas?.getObjects() as CameraImage[];
-  };
-  const getActiveObject = () => {
-    return canvas?.getActiveObject() as CameraImage;
-  };
-
-  /**  根据cameraId查找某个元素 */
-  const getCameraById = (cameraId: string) => {
-    return canvas
-      ?.getObjects()
-      .find((x) => (x as CameraImage).cameraId === cameraId) as CameraImage;
-  };
-
-  return {
-    canvas,
-    createMap,
-    uploadBg,
-    addCamera,
-    removeActiveCamera,
-    toJSON,
-    loadFromJSON,
-    renderCamera,
-    clear,
-    hasCamera,
-    getCameraById,
-    getObjects,
-    getActiveObject,
-  };
-}
-
-export default useCameraMap;

src/views/map-config/mini-map/MapBase/utils.ts

@@ -1,22 +0,0 @@
-import { fabric } from 'fabric';
-export function getRandomPosition() {
-  return 100 + Math.floor(Math.random() * 30);
-}
-
-/** 根据camera位置得到fav icon的位置 */
-export function getFavPositionByCamera(target?: fabric.Object | null) {
-  if (!target || !target.oCoords) return null;
-  return { left: target.oCoords?.tr.x, top: target.oCoords?.tr.y };
-}
-
-export function createSelectedPositionHash(target) {
-  if (!target) return '';
-  return (
-    target.cameraId +
-    String(target.oCoords.tr.x) +
-    '_' +
-    String(target.oCoords.tr.y) +
-    '_' +
-    String(target.angle)
-  );
-}

src/views/map-config/mini-map/MiniMapConfig copy.vue

@@ -1,319 +0,0 @@
-<template>
-  <div class="page" @click="handleWholeClick">
-    <div class="page-head flex items-center">
-      <el-icon size="20"><ArrowLeft /></el-icon>
-      <div class="head-opt flex-1 flex justify-between items-center">
-        <div>
-          <span>场景：</span>
-          <el-tree-select
-            v-model="selectedShopCode"
-            :data="scenesTree"
-            accordion
-            :render-after-expand="false"
-            :default-expand-all="true"
-            :teleported="false"
-            placeholder="请选择相关场景"
-            @change="changeShop"
-          />
-        </div>
-        <div class="flex">
-          <!-- <el-button @click="mapEditor.toJson">tojson</el-button> -->
-          <el-upload
-            class="avatar-uploader flex justify-center items-center"
-            action="/skyeye-admin-api/layout/uploadPicture"
-            :show-file-list="false"
-            :on-success="handleAvatarSuccess"
-            :with-credentials="true"
-            name="file"
-            :data="{ workshopId: selectedShopDetail?.id }"
-          >
-            <el-button style="font-size: 12px" :icon="Refresh" :disabled="!hasBg">
-              替换照片
-            </el-button>
-          </el-upload>
-
-          <el-button
-            @click="handleSave"
-            style="margin-left: 40px"
-            type="primary"
-            :disabled="!selectedShopCode"
-            >保存为布局
-          </el-button>
-        </div>
-      </div>
-    </div>
-    <div class="paint-tool flex">
-      <div class="camera-list">
-        <div>
-          <span class="label-text flex">相机列表：</span>
-          <ElInput
-            class="search-put"
-            style="margin: 10px 0; width: 230px"
-            placeholder="请输入搜索内容"
-            v-model="searchKey"
-            :suffix-icon="Search"
-          />
-        </div>
-        <span v-if="filterShopCameraList.length == 0" class="ml-1" style="color: #3f3f3f">
-          提示：请先选择相应场景和图片
-        </span>
-        <el-scrollbar v-else style="position: relative; height: calc(100% - 90px)">
-          <div
-            v-for="item in filterShopCameraList"
-            :key="item.code"
-            class="camera-item flex justify-start items-center"
-            :class="{
-              isAdded: isAddedCamera(item.code),
-              isActive: item.code === activeCameraId,
-            }"
-            @click="handleAddCamera(item.code)"
-          >
-            <span class="camera-id">{{ item.name }}</span>
-            <el-popover
-              placement="bottom-start"
-              trigger="hover"
-              :content="item.name"
-              :teleported="false"
-            >
-              <template #reference>
-                <span class="space-name">{{ item.workSpaceName }}</span>
-              </template>
-            </el-popover>
-          </div>
-        </el-scrollbar>
-      </div>
-      <div ref="drawContainer" id="drawContainer" class="draw-container">
-        <div id="editContainer" v-moveable:1></div>
-        <el-upload
-          v-if="!hasBg"
-          class="upload-icon flex justify-center items-center"
-          action="/skyeye-admin-api/layout/uploadPicture"
-          :show-file-list="false"
-          :before-upload="handleBeforeUpload"
-          :on-success="handleAvatarSuccess"
-          :with-credentials="true"
-          name="file"
-          :data="{ workshopId: selectedShopDetail?.id }"
-        >
-          <img src="~@/assets/images/img-upload.png" />
-        </el-upload>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-  import useMiniMap from './use-mini-map';
-  import { storeToRefs } from 'pinia';
-  import { ElMessage, ElInput } from 'element-plus';
-  import { onMounted, ref } from 'vue';
-  import { updateMinMapViewLayoutApi } from '@/api/scene/scene';
-  import { computed } from 'vue';
-  import { Search, Refresh } from '@element-plus/icons-vue';
-  import useMapEditor from './hooks/useMapEditor';
-
-  const mapEditor = useMapEditor();
-  const { activeCameraId, addedCameras, bgImgUrl } = mapEditor;
-  const miniMap = useMiniMap();
-  const { scenesTree, shopCameraList, selectedShopCode, selectedShopDetail } = storeToRefs(miniMap);
-  const { getScenesTree, getShowCameras, getMapLayout } = miniMap;
-
-  const drawContainer = ref<HTMLDivElement>();
-
-  const searchKey = ref('');
-  // 是否已有背景图
-  const hasBg = ref(false);
-
-  const handleBeforeUpload = () => {
-    if (!selectedShopCode.value) {
-      ElMessage.error({
-        message: '请先选择车间',
-      });
-      return false;
-    }
-  };
-
-  /** 判断相机是否已经添加 */
-  const isAddedCamera = (cameraId: string) => {
-    const index = addedCameras.value.findIndex((item) => item === cameraId);
-    return index >= 0;
-  };
-
-  const handleAvatarSuccess = (e) => {
-    bgImgUrl.value = e.data;
-    mapEditor.addBg();
-    hasBg.value = true;
-  };
-
-  const changeShop = (code: string) => {
-    mapEditor.resetMap();
-    getShopContent(code);
-    hasBg.value = false;
-  };
-
-  const getShopContent = (code: string) => {
-    getShowCameras(code);
-    getMapLayout(code).then((res) => {
-      if (!res) {
-        return;
-      }
-      hasBg.value = true;
-      mapEditor.createMap(res);
-    });
-  };
-
-  const handleWholeClick = (e) => {
-    if (e.button === 0) {
-      mapEditor.destoryOptBlock();
-    }
-  };
-
-  onMounted(() => {
-    getScenesTree({ level: 2, valueKey: 'code', labelKey: 'name', disabled: true });
-    mapEditor.initContainer({
-      container: 'editContainer',
-      width: drawContainer.value!.clientWidth,
-      height: drawContainer.value!.clientHeight,
-    });
-    if (selectedShopCode.value) {
-      getShopContent(selectedShopCode.value);
-    }
-  });
-
-  const filterShopCameraList = computed(() => {
-    const k = searchKey.value.trim();
-    if (!k) return shopCameraList.value;
-    return shopCameraList.value.filter((x) => x.code?.includes(k) || x.workSpaceName?.includes(k));
-  });
-
-  const handleAddCamera = (cameraId: string) => {
-    console.log('cameraId', cameraId);
-
-    if (!hasBg.value) {
-      ElMessage.warning({
-        message: '请先添加背景图片',
-      });
-      return;
-    }
-    mapEditor.addCamera(cameraId);
-  };
-
-  const handleSave = () => {
-    const layout = mapEditor.toJson();
-    updateMinMapViewLayoutApi({ layout, targetId: String(selectedShopDetail.value?.id) }).then(
-      (res) => {
-        console.log('updateMinMapViewLayoutApi', res);
-        ElMessage.success('保存成功');
-      },
-    );
-  };
-</script>
-
-<style scoped lang="scss">
-  .page {
-  }
-  .page-head {
-    height: 54px;
-    padding-left: 15px;
-    background-color: #ffffff;
-  }
-  .head-opt {
-    margin-left: 20px;
-    padding-right: 15px;
-    font-size: 14px;
-    color: #3f3f3f;
-  }
-
-  .avatar-uploader {
-    /* width: 120px; */
-    /* height: 30px; */
-    /* border: 1px solid #eee; */
-    border-radius: 4px;
-    margin-left: 30px;
-  }
-  .upload-icon {
-    position: absolute;
-    top: 0;
-    right: 0;
-    left: 0;
-    bottom: 0;
-    margin: auto;
-  }
-
-  .paint-tool {
-    position: relative;
-    height: calc(100vh - 138px);
-    margin-top: 2px;
-  }
-
-  .camera-list {
-    width: 250px;
-    padding: 0 10px;
-    background-color: #ffffff;
-  }
-  .label-text {
-    font-size: 14px;
-    font-weight: 600;
-    margin: 10px 0 5px 10px;
-  }
-  .camera-item {
-    height: 32px;
-    font-size: 14px;
-    padding-left: 8px;
-    font-weight: 400;
-    color: #404040;
-    line-height: 14px;
-    cursor: pointer;
-
-    &:hover {
-      background-color: #e6f7ff;
-      color: #1890ff;
-    }
-  }
-  .isAdded {
-    color: #1890ff;
-    cursor: not-allowed;
-  }
-  .isActive {
-    background-color: #e6f7ff;
-    color: #1890ff;
-  }
-  .camera-item-disabled {
-    color: #c6c6c6;
-  }
-  .camera-id {
-    width: 110px;
-  }
-  .space-name {
-    width: 120px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .draw-container {
-    position: relative;
-    width: calc(100% - 300px);
-    margin: 20px;
-    overflow: hidden;
-  }
-
-  :deep(.search-put .el-input__wrapper) {
-    background-color: #f0f2f5;
-  }
-  :deep(.el-popper__arrow) {
-    display: none;
-  }
-  :deep(.el-tree-node__content:hover) {
-    background: #e6f4ff;
-  }
-  :deep(.el-button--primary) {
-    --el-button-disabled-bg-color: #bfbfbf;
-  }
-  :deep(.el-popover) {
-    width: unset !important;
-    min-width: 110px;
-    text-align: center;
-    font-weight: 400;
-  }
-</style>

src/views/map-config/mini-map/MiniMapConfig.vue

@@ -17,7 +17,6 @@
           />
         </div>
         <div class="flex">
-          <!-- <el-button @click="mapEditor.toJson">tojson</el-button> -->
           <el-upload
             class="avatar-uploader flex justify-center items-center"
             action="/skyeye-admin-api/layout/uploadPicture"
@@ -82,7 +81,6 @@
           </div>
         </el-scrollbar>
       </div>
-      <!-- <div ref="drawContainer" id="drawContainer" class="draw-container"> -->
       <div ref="drawContainer" class="draw-container">
         <KonvaMap
           ref="konvaMap"
@@ -113,16 +111,12 @@
   import useMiniMap from './use-mini-map';
   import { storeToRefs } from 'pinia';
   import { ElMessage, ElInput } from 'element-plus';
-  import { onMounted, ref, nextTick } from 'vue';
+  import { onMounted, ref } from 'vue';
   import { updateMinMapViewLayoutApi } from '@/api/scene/scene';
   import { computed } from 'vue';
-  import { Search, Refresh } from '@element-plus/icons-vue';
-  // import useMapEditor from './hooks/useMapEditor';
+  import { Search, Refresh, ArrowLeft } from '@element-plus/icons-vue';
   import KonvaMap from './MapBase/KonvaMap.vue';
-  // import { nextTick } from 'process';
 
-  // const mapEditor = useMapEditor();
-  // const { activeCameraId, addedCameras, bgImgUrl } = mapEditor;
   const miniMap = useMiniMap();
   const { scenesTree, shopCameraList, selectedShopCode, selectedShopDetail } = storeToRefs(miniMap);
   const { getScenesTree, getShowCameras, getMapLayout } = miniMap;
@@ -150,12 +144,11 @@
     camerasAdded.value = camerasList.map((item) => {
       return item.id;
     });
-    console.log('camerasAdded.value', camerasAdded.value);
+    // console.log('camerasAdded.value', camerasAdded.value);
   };
 
   /** 判断相机是否已经添加 */
   const isAddedCamera = (cameraId: string) => {
-    // const index = addedCameras.value.findIndex((item) => item === cameraId);
     const index = camerasAdded.value.findIndex((item) => item === cameraId);
     return index >= 0;
   };
@@ -172,7 +165,6 @@
   };
 
   const changeShop = (code: string) => {
-    // mapEditor.resetMap();
     konvaMap.value.resetMap();
     getShopContent(code);
     hasBg.value = false;

src/views/map-config/mini-map/components/CameraOptBar.vue

@@ -1,52 +0,0 @@
-<template>
-  <div class="opt-container">
-    <div class="opt-item" :class="{ disabled: props.disabled }" @click="setCamera">
-      <span>设为默认相机</span>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-  const props = defineProps({
-    disabled: { type: Boolean, default: () => true },
-    onSetDefault: { type: Function },
-  });
-
-  const setCamera = () => {
-    if (!props.disabled) {
-      props.onSetDefault!();
-    }
-  };
-</script>
-
-<style scoped lang="scss">
-  .opt-container {
-    width: 160px;
-    padding: 10px;
-    border-radius: 5px;
-    background-color: #ffffff;
-    box-shadow: 5px 5px 5px #a3a5a5;
-  }
-
-  .opt-item {
-    height: 30px;
-    font-size: 14px;
-    color: #404040;
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    padding-left: 8px;
-    border-radius: 3px;
-    cursor: pointer;
-
-    &:hover {
-      background-color: #f1f2f5;
-    }
-  }
-
-  .disabled {
-    background-color: #f1f2f5;
-    color: #bcbdc0;
-    cursor: not-allowed;
-  }
-</style>

src/views/map-config/mini-map/components/EditDimension.vue

@@ -1,33 +0,0 @@
-<template>
-  <span style="padding-left: 10px">
-    <span>{{ props.label }}: </span>
-    <ElInput
-      style="width: 50px"
-      size="small"
-      @input="handleChange"
-      v-model="val"
-      :disabled="props.disabled"
-    />
-  </span>
-</template>
-<script lang="ts" setup>
-  import { ref, watch } from 'vue';
-  import { ElInput } from 'element-plus';
-  const props = defineProps<{ label: string; modelValue: number; disabled?: boolean }>();
-
-  const val = ref();
-  watch(
-    () => props.modelValue,
-    () => {
-      val.value = Math.floor(props.modelValue);
-    },
-    { immediate: true },
-  );
-
-  const emits = defineEmits<{ (e: 'update:modelValue', val: number): unknown }>();
-
-  const handleChange = (e) => {
-    emits('update:modelValue', Number(e));
-  };
-</script>
-<style scoped></style>

src/views/map-config/mini-map/components/SelectedCameraToolbar.vue

@@ -1,52 +0,0 @@
-<template>
-  <div>
-    已选中相机<span>: {{ selectedCamera?.cameraId }}</span>
-    <span
-      ><EditDimension
-        v-model="selectedCamera.width"
-        label="width"
-        @update:model-value="renderMap"
-        disabled
-    /></span>
-    <span
-      ><EditDimension
-        v-model="selectedCamera.height"
-        label="height"
-        @update:model-value="renderMap"
-        disabled
-    /></span>
-    <span
-      ><EditDimension v-model="selectedCamera.left" label="left" @update:model-value="renderMap"
-    /></span>
-    <span
-      ><EditDimension v-model="selectedCamera.top" label="top" @update:model-value="renderMap"
-    /></span>
-    <span
-      ><EditDimension v-model="selectedCamera.angle" label="angle" @update:model-value="renderMap"
-    /></span>
-  </div>
-</template>
-<script lang="ts" setup>
-  import { ref } from 'vue';
-  import EditDimension from './EditDimension.vue';
-
-  const props = defineProps<{
-    selectedCamera: {
-      cameraId: string;
-      width: number;
-      height: number;
-      left: number;
-      top: number;
-      angle: number;
-    };
-  }>();
-
-  const selectedCamera = ref(props.selectedCamera);
-
-  const emits = defineEmits<{ (e: 'renderMap'): unknown }>();
-
-  const renderMap = () => {
-    emits('renderMap');
-  };
-</script>
-<style scoped></style>

src/views/map-config/mini-map/hooks/useMapEditor.ts

@@ -1,436 +0,0 @@
-import { computed, h, onBeforeUnmount, onMounted, ref, render } from 'vue';
-import Konva from 'konva';
-import cameraImg from '@/assets/camera/cameraImg.png';
-import favoritesImg from '@/assets/camera/favorites.png';
-import OptBar from '../components/CameraOptBar.vue';
-import DefaultTip from '../components/DefaultTip.vue';
-import { TipPositionEnum } from '../type';
-import { ElMessage } from 'element-plus';
-import { useGlobSetting } from '@/hooks/setting';
-import urlJoin from 'url-join';
-import useMiniMap from '../use-mini-map';
-import { storeToRefs } from 'pinia';
-
-export function useMapEditor() {
-  const miniMap = useMiniMap();
-  const { shopCameraList } = storeToRefs(miniMap);
-
-  // let initWidth; // 默认宽度
-  // let initHeight; // 默认高度
-  let stage: Konva.Stage | null = null;
-  let layer: Konva.Layer | null = null;
-  let copyLayer: Konva.Layer | null = null;
-  let defaultIcon: Konva.Image | null = null; // 默认相机的图标shape
-  const addedCameras = ref<string[]>([]); // 已添加相机列表
-  const activeGroup = ref<Konva.Group | null>(null); // transformer激活的相机
-  const defaultCameraId = ref(''); // 默认相机的ID
-  let optBlock: HTMLDivElement | null = null; // 鼠标右击弹出的选项组
-  let defaultTip: HTMLDivElement | null = null; // 默认相机悬浮tip
-  let isTransform = false; // 是否再变换中
-  const activeCameraId = computed(() => activeGroup.value?.id()); // 当前选中相机ID
-  const bgImgUrl = ref<string>('');
-
-  const globSetting = useGlobSetting();
-
-  /** 容器初始化 */
-  const initContainer = (opt: Konva.StageConfig) => {
-    // initWidth = opt.width || 0;
-    // initHeight = opt.height || 0;
-    stage = new Konva.Stage(opt);
-    stage.on('click tap', handleStageClick);
-    window.stage = stage;
-    layer = new Konva.Layer();
-    copyLayer = new Konva.Layer();
-    stage.add(layer);
-    stage.add(copyLayer);
-    addDefaultIcon();
-  };
-
-  /** 初始生成默认相机的图标shape，但不可见 */
-  const addDefaultIcon = () => {
-    const favImg = new Image();
-    favImg.onload = () => {
-      defaultIcon = new Konva.Image({
-        x: 18,
-        y: -16,
-        width: 16,
-        height: 16,
-        image: favImg,
-        id: 'defaultIcon',
-        visible: false,
-        rotation: 0,
-      });
-      bindBaseEvt(defaultIcon);
-      layer?.add(defaultIcon);
-      layer?.batchDraw();
-    };
-    favImg.src = favoritesImg;
-  };
-
-  /** 更换背景图时根据图片大小重置容器宽高 */
-  const resizeContainer = (width, height) => {
-    // const newWidth = width > initWidth ? width : initWidth;
-    // const newHeight = height > initHeight ? height : initHeight;
-    // stage?.width(newWidth);
-    // stage?.height(newHeight);
-    stage?.width(width);
-    stage?.height(height);
-  };
-
-  /** 添加背景 */
-  const addBg = () => {
-    const imgUrl = urlJoin(globSetting.imgUrl!, bgImgUrl.value);
-    const bgNode = layer?.find('#bgImg')[0] as Konva.Image;
-    const bgImg = new Image();
-    bgImg.onload = () => {
-      // 判断是否已有背景
-      if (!bgNode) {
-        const mapBg = new Konva.Image({
-          x: 0,
-          y: 0,
-          image: bgImg,
-          width: bgImg.width,
-          height: bgImg.height,
-          id: 'bgImg',
-        });
-        layer?.add(mapBg);
-        mapBg.moveToBottom();
-      } else {
-        bgNode.width(bgImg.width);
-        bgNode.height(bgImg.height);
-        bgNode.image(bgImg);
-      }
-      resizeContainer(bgImg.width, bgImg.height);
-      layer?.batchDraw();
-    };
-    bgImg.src = imgUrl;
-  };
-
-  /** 变更需要激活transform的相机 */
-  const attachTransformer = (group: Konva.Group): Konva.Transformer => {
-    activeGroup.value?.draggable(false);
-    activeGroup.value = group;
-    group.draggable(true);
-    stage?.find?.('Transformer')[0]?.destroy(); // 清除现有transformer
-    const id = group.id();
-    const tr = new Konva.Transformer({
-      keepRatio: true,
-      rotateAnchorOffset: 30,
-      rotationSnaps: [0, 45, 90, 135, 180, 225, 270, 315],
-      enabledAnchors: ['top-left', 'top-right', 'bottom-left', 'bottom-right'],
-      id: 'tr_' + id,
-    });
-    tr.nodes([group]);
-    layer?.add(tr);
-    layer?.draw();
-
-    group.on('dragstart', handleDragStart);
-    group.on('dragstart', handleDragEnd);
-
-    return tr;
-  };
-
-  /** 添加相机 */
-  const addCamera = (id: string) => {
-    const group = new Konva.Group({
-      x: 50,
-      y: 50,
-      id,
-      draggable: true,
-      name: 'group',
-    });
-    const camImg = new Image();
-    camImg.onload = () => {
-      const cameraIcon = new Konva.Image({
-        width: 52,
-        height: 37,
-        image: camImg,
-        name: 'image',
-      });
-      group.add(cameraIcon);
-      layer?.add(group);
-      bindBaseEvt(cameraIcon);
-      const tr = attachTransformer(group); // 添加的相机默认激活transformer
-
-      addedCameras.value.push(id);
-      // 如果是唯一相机，设置为默认相机
-      if (addedCameras.value.length === 1) {
-        defaultIcon?.show();
-        setDefaultCamera(group, tr);
-        tr.forceUpdate();
-      }
-    };
-    camImg.src = cameraImg;
-  };
-
-  /** 变更默认相机 */
-  const setDefaultCamera = (node: Konva.Group, tr?: Konva.Transformer) => {
-    defaultIcon?.moveTo(node);
-    tr?.forceUpdate();
-    defaultCameraId.value = node.id();
-  };
-
-  /** 创建右键选项组 */
-  const createOptBlock = (node: Konva.Group, x: number, y: number) => {
-    const id = node.id();
-    optBlock = document.createElement('div') as HTMLDivElement;
-    optBlock.setAttribute('style', `position: absolute; left: ${x}px; top: ${y}px;`);
-    const optBar = h(OptBar, {
-      disabled: id === defaultCameraId.value,
-      onSetDefault: () => {
-        const tr = layer?.find(`#tr_${id}`)[0] as Konva.Transformer;
-        setDefaultCamera(node, tr);
-        destoryOptBlock();
-      },
-    });
-    render(optBar, optBlock);
-    const parentEl = document.getElementById('drawContainer') as HTMLDivElement;
-    parentEl.append(optBlock);
-  };
-
-  /** 删除右键选项组 */
-  const destoryOptBlock = () => {
-    optBlock?.remove();
-    optBlock = null;
-  };
-
-  /** 创建默认tip */
-  const createDefaultTip = (x: number, y: number, pos: TipPositionEnum) => {
-    if (isTransform) {
-      return;
-    }
-    defaultTip = document.createElement('div') as HTMLDivElement;
-    defaultTip.setAttribute('style', `position: absolute; left: ${x}px; top: ${y}px;`);
-    const tipInstance = h(DefaultTip, { position: pos });
-    render(tipInstance, defaultTip);
-    const parentEl = document.getElementById('drawContainer') as HTMLDivElement;
-    parentEl.append(defaultTip);
-  };
-
-  /** 删除默认tip */
-  const destoryDefaultTip = () => {
-    defaultTip?.remove();
-    defaultTip = null;
-  };
-
-  /** 删除相机 */
-  const deleteCamera = () => {
-    // 判断是否为默认相机，默认相机不允许删除
-    if (activeGroup.value?.id() === defaultCameraId.value) {
-      ElMessage.error({
-        message: '无法删除默认相机',
-      });
-      return;
-    }
-    const index = addedCameras.value.findIndex((item) => item === activeGroup.value?.id());
-    index >= 0 && addedCameras.value.splice(index, 1);
-    activeGroup.value?.destroy();
-    stage!.find('Transformer')[0]?.destroy();
-    layer?.draw();
-  };
-
-  /** 鼠标悬浮事件 */
-  const handleMouseOver = (e) => {
-    // 禁用浏览器默认鼠标事件
-    document.oncontextmenu = () => {
-      return false;
-    };
-    const group = e.target.parent;
-    // 如果悬浮的相机是默认相机，弹出默认tip
-    if (group.id() === defaultCameraId.value) {
-      let pos = TipPositionEnum.TOP;
-      const tipPosition = defaultIcon?.absolutePosition();
-      let x = Number(tipPosition?.x.toFixed(2)) || 0;
-      let y = Number(tipPosition?.y.toFixed(2)) || 0;
-      const angle = group.rotation() >= 0 ? group.rotation() : group.rotation() + 360;
-      if (angle >= 30) {
-        if (angle <= 150) {
-          pos = TipPositionEnum.RIGHT;
-          x += 26;
-          y -= 17;
-        } else if (angle <= 210) {
-          pos = TipPositionEnum.BOTTOM;
-          y += 26;
-          x -= 50;
-        } else {
-          pos = TipPositionEnum.LEFT;
-          x -= 121;
-          y -= 25;
-        }
-      } else {
-        y -= 61;
-        x -= 43;
-      }
-      createDefaultTip(x, y, pos);
-    }
-  };
-
-  /** 鼠标离开事件 */
-  const handleMouseLeave = () => {
-    // 恢复浏览器默认事件
-    document.oncontextmenu = () => {
-      return true;
-    };
-    defaultTip && destoryDefaultTip();
-  };
-
-  /** 开始拖拽事件 */
-  const handleDragStart = () => {
-    isTransform = true;
-    destoryDefaultTip();
-    destoryOptBlock();
-  };
-
-  /** 结束拖拽事件 */
-  const handleDragEnd = () => {
-    isTransform = false;
-  };
-
-  /** 全局点击事件 */
-  const handleStageClick = (e) => {
-    // 点击舞台取消现有激活的transformer
-    if (e.target === stage) {
-      stage!.find('Transformer')[0].destroy();
-      layer!.draw();
-      return;
-    }
-
-    // 判断点击对象是否为相机
-    if (!e.target.hasName('image')) {
-      return;
-    }
-    const parent = e.target.parent;
-    if (!parent.hasName('group')) {
-      return;
-    }
-    const group = e.target.parent;
-    attachTransformer(group);
-    // 判断是否为右键点击
-    if (e.evt.button === 2) {
-      createOptBlock(group, e.evt.offsetX + 20, e.evt.offsetY);
-    }
-  };
-
-  /** 键盘点击事件 */
-  const handleKeyDown = (e) => {
-    // 删除键
-    if (e.keyCode === 46 || e.code === 'Delete') {
-      deleteCamera();
-    }
-  };
-
-  // 基础监听事件绑定
-  const bindBaseEvt = (node: Konva.Node) => {
-    // node.on('transform', handleDragStart);
-    // node.on('transformend', handleDragEnd);
-    node.on('mouseover', handleMouseOver);
-    node.on('mouseleave', handleMouseLeave);
-  };
-
-  /** 输出布局json */
-  const toJson = () => {
-    const json = stage!.toJSON();
-    const cameras = JSON.parse(json)
-      .children[0].children.filter((node) => node.className === 'Group')
-      .map((item) => {
-        return {
-          cameraId: item.attrs.id,
-          rotation: Number((item.attrs.rotation | 0).toFixed(2)),
-          x: Math.round(item.attrs.x | 0),
-          y: Math.round(item.attrs.y | 0),
-          scaleX: Number((item.attrs.scaleX | 1).toFixed(1)),
-          scaleY: Number((item.attrs.scaleY | 1).toFixed(1)),
-          url: shopCameraList.value.find((cam) => cam.code === item.attrs.id)?.pushstreamIp || '',
-        };
-      });
-    const layout = {
-      bgInfo: {
-        bgImg: bgImgUrl.value,
-        width: layer?.find('#bgImg')[0].width(),
-        height: layer?.find('#bgImg')[0].height(),
-      },
-      defaultCameraId: defaultCameraId.value,
-      cameraList: cameras,
-    };
-
-    return JSON.stringify(layout);
-  };
-
-  /** 导入布局json */
-  const createMap = (layout) => {
-    // const layout = JSON.parse(json);
-    bgImgUrl.value = layout.bgInfo.bgImg;
-    addBg();
-    layout.cameraList.forEach((camera) => {
-      const group = new Konva.Group({
-        x: camera.x,
-        y: camera.y,
-        id: camera.cameraId,
-        rotation: camera.rotation,
-        scaleX: camera.scaleX,
-        scaleY: camera.scaleY,
-        draggable: false,
-        name: 'group',
-      });
-      const camImg = new Image();
-      camImg.onload = () => {
-        const cameraIcon = new Konva.Image({
-          width: 52,
-          height: 37,
-          image: camImg,
-          name: 'image',
-        });
-        group.add(cameraIcon);
-        layer?.add(group);
-        bindBaseEvt(cameraIcon);
-        addedCameras.value.push(camera.cameraId);
-
-        if (camera.cameraId === layout.defaultCameraId) {
-          setDefaultCamera(group);
-          defaultIcon?.show();
-        }
-
-        if (addedCameras.value.length === layout.cameraList.length) {
-          layer?.batchDraw();
-        }
-      };
-      camImg.src = cameraImg;
-    });
-  };
-
-  const resetMap = () => {
-    defaultIcon?.moveTo(copyLayer);
-    layer?.clear();
-    layer?.removeChildren();
-    defaultIcon?.moveTo(layer);
-    addedCameras.value = [];
-    activeGroup.value = null;
-    defaultCameraId.value = '';
-    isTransform = false;
-    bgImgUrl.value = '';
-  };
-
-  onMounted(() => {
-    window.addEventListener('keydown', handleKeyDown);
-  });
-
-  onBeforeUnmount(() => {
-    window.removeEventListener('keydown', handleKeyDown);
-  });
-
-  return {
-    defaultCameraId,
-    activeCameraId,
-    addedCameras,
-    bgImgUrl,
-    initContainer,
-    addBg,
-    addCamera,
-    destoryOptBlock,
-    toJson,
-    createMap,
-    resetMap,
-  };
-}
-
-export default useMapEditor;

src/views/map-config/mini-map/type.ts

@@ -4,3 +4,24 @@ export enum TipPositionEnum {
   BOTTOM = 'bottom',
   LEFT = 'left',
 }
+
+export interface camerasImgType {
+  x?: number;
+  y?: number;
+  width?: number;
+  height?: number;
+  draggable?: boolean;
+  rotation?: number;
+  scaleX?: number;
+  scaleY?: number;
+  image?: HTMLImageElement;
+  name?: string;
+  url?: string;
+}
+
+export interface camerasGroupType {
+  id?: string;
+  groupConfig: camerasImgType;
+  config: camerasImgType;
+  isDefault?: boolean;
+}