Merge branch 'mapConfig' of ssh://172.16.23.188:9022/tian-group/skyeye-admin-fe into mapConfig

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

@@ -0,0 +1,71 @@
+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

@@ -0,0 +1,88 @@
+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

@@ -54,24 +54,29 @@ class CameraMap {
         return;
       }
 
-      canvas.forEachObject((object) => {
-        if (object === options.target) return;
-        (object as CameraImage).setSrc(cameraImg, () => {
-          canvas.renderAll();
-        });
-      });
+      this.setAllGroupsUnselected();
       if (!cameraId || !target) {
         this.onSelect(null);
         return;
       }
-      target.setSrc(cameraActiveImg, () => {
+      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;

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

@@ -0,0 +1,68 @@
+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/MiniMapConfig.vue

@@ -98,12 +98,12 @@
   import { storeToRefs } from 'pinia';
   import { ElMessage, ElInput } from 'element-plus';
   import urlJoin from 'url-join';
-  import { onMounted, ref, toRaw } from 'vue';
+  import { onMounted, ref } from 'vue';
   import useCameraMap from './MapBase/useCameraMap';
   import { updateMinMapViewLayoutApi } from '@/api/scene/scene';
   import { onUnmounted, watchEffect } from 'vue';
   import { useGlobSetting } from '@/hooks/setting';
-  import { computed, watch } from 'vue';
+  import { computed } from 'vue';
   import { Search } from '@element-plus/icons-vue';
   import ContextMenu from './MapBase/ContextMenu.vue';
   import DefaultCameraIcon from './MapBase/DefaultCameraIcon.vue';
@@ -279,6 +279,7 @@
     const cameraId = rightSelectedCamera.value?.cameraId;
     if (!cameraId) return;
     defaultCamera.value = rightSelectedCamera.value;
+
     /** 选择完成后隐藏 */
     menuVisible.value = false;
   };