小地图

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

@@ -15,20 +15,17 @@
           @dragstart="handleDragStart()"
         >
           <v-image :config="camera.config" />
-          <!-- <v-image :config="defaultIconConfig2" /> -->
           <v-image v-if="camera.isDefault" ref="defaultIcon" :config="defaultIconConfig" />
         </v-group>
-        <!-- <v-image ref="defaultIcon" :config="defaultIconConfig" /> -->
         <v-transformer :config="transformerConfig" ref="transformer" />
       </v-layer>
     </v-stage>
-    <!-- <OptBar :disabled="defaultShow" /> -->
     <div
       @click="setDefaultCamera"
       v-show="defaultShow"
       class="opt-container"
       :style="{ position: 'absolute', left: posX + 'px', top: posY + 'px' }"
-      ><div class="opt-item">设为默认相机</div></div
+      ><div class="opt-item" :class="{ disabled: disabledSet }">设为默认相机</div></div
     >
     <DefaultTip
       v-show="tipShow"
@@ -50,7 +47,7 @@
 
   const globSetting = useGlobSetting();
 
-  const emit = defineEmits(['changeDefaultCarema', 'delete']);
+  const emit = defineEmits(['changeDefaultCamera', 'sendCameraId']);
 
   interface caremasImgType {
     x?: number;
@@ -97,6 +94,7 @@
   //默认相机id
   const defaultCameraId = ref('');
   const tipShow = ref(false);
+  const disabledSet = ref(false);
 
   //标签
   const layer = ref();
@@ -141,7 +139,6 @@
       const stage = transformer.value.getNode().getStage();
       const defaultNode = stage.findOne('#defaultIcon');
       const tipPosition = defaultNode.absolutePosition();
-
       posTipX.value = Number(tipPosition?.x.toFixed(2)) || 0;
       posTipY.value = Number(tipPosition?.y.toFixed(2)) || 0;
       const angle = group.rotation() >= 0 ? group.rotation() : group.rotation() + 360;
@@ -163,7 +160,6 @@
         posTipY.value -= 61;
         posTipX.value -= 43;
       }
-      // createDefaultTip(x, y, pos);
     }
   };
   const handleMouseLeave = () => {
@@ -179,6 +175,7 @@
 
   const handleStageClick = (e: any) => {
     defaultShow.value = false;
+    disabledSet.value = false;
     document.oncontextmenu = () => {
       return false;
     };
@@ -190,7 +187,8 @@
         lastClickedGroupId.value = parent.id();
         posX.value = e.evt.offsetX + 20;
         posY.value = e.evt.offsetY;
-        defaultShow.value = defaultCameraId.value !== parent.id();
+        disabledSet.value = defaultCameraId.value === parent.id();
+        defaultShow.value = true;
       }
     } else {
       lastClickedGroupId.value = null;
@@ -205,7 +203,6 @@
     const transformerNode = transformer.value.getNode();
     const stage = transformerNode.getStage();
     const cameraNode = stage.findOne('#' + camera.id);
-
     // 将变换器附加到点击的相机
     transformerNode.nodes([cameraNode]);
     transformerNode.moveToTop();
@@ -236,7 +233,6 @@
       isDefault: false,
     };
     cameras.value.push(cameraDetail);
-
     //当只有一个相机时，自动设置默认相机
     if (cameras.value.length === 1) {
       cameras.value[0].isDefault = true;
@@ -257,6 +253,22 @@
     defaultShow.value = false;
   };
 
+  watch(
+    lastClickedGroupId,
+    () => {
+      emit('changeDefaultCamera', lastClickedGroupId.value);
+    },
+    { immediate: true },
+  );
+
+  watch(
+    () => cameras,
+    () => {
+      emit('sendCameraId', cameras.value);
+    },
+    { immediate: true, deep: true },
+  );
+
   const addBg = (imgBg) => {
     bgImgUrl.value = imgBg;
     bgImg.src = urlJoin(globSetting.imgUrl!, imgBg) as string;
@@ -301,6 +313,8 @@
       }
       const index = cameras.value.findIndex((item) => item.id === lastClickedGroupId.value);
       index >= 0 && cameras.value.splice(index, 1);
+      lastClickedGroupId.value = '';
+
       //取消transformer
       const transformerNode = transformer.value.getNode();
       transformerNode.nodes([]);
@@ -330,8 +344,6 @@
     cameras.value = layout.cameraList;
   };
 
-  watch();
-
   defineExpose({ addBg, createMap, resetMap, addCamera, resizeContainer, saveLayout });
 
   onMounted(() => {
@@ -369,4 +381,10 @@
       background-color: #f1f2f5;
     }
   }
+
+  .disabled {
+    background-color: #f1f2f5;
+    color: #bcbdc0;
+    cursor: not-allowed;
+  }
 </style>

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

@@ -84,7 +84,12 @@
       </div>
       <!-- <div ref="drawContainer" id="drawContainer" class="draw-container"> -->
       <div ref="drawContainer" class="draw-container">
-        <KonvaMap ref="konvaMap" v-moveable:1 />
+        <KonvaMap
+          ref="konvaMap"
+          @change-default-camera="changeDefault"
+          @send-camera-id="sendCameras"
+          v-moveable:1
+        />
         <div id="editContainer" v-moveable:1></div>
         <el-upload
           v-if="!hasBg"
@@ -141,6 +146,12 @@
       return false;
     }
   };
+  const sendCameras = (camerasList) => {
+    camerasAdded.value = camerasList.map((item) => {
+      return item.id;
+    });
+    console.log('camerasAdded.value', camerasAdded.value);
+  };
 
   /** 判断相机是否已经添加 */
   const isAddedCamera = (cameraId: string) => {
@@ -149,14 +160,14 @@
     return index >= 0;
   };
 
+  const changeDefault = (defaultCameraId) => {
+    caremaActiveId.value = defaultCameraId;
+  };
+
   const handleAvatarSuccess = (e) => {
-    // bgImgUrl.value = e.data;
     //自己的
     imgUrlBg.value = e.data;
-    console.log('imgUrlBg.value1', imgUrlBg.value);
     konvaMap.value.addBg(imgUrlBg.value);
-    // konvaMap.value.addBg();
-    // mapEditor.addBg();
     hasBg.value = true;
   };
 
@@ -168,21 +179,13 @@
   };
 
   const getShopContent = (code: string) => {
-    console.log('getcode', code);
-
     getShowCameras(code);
     getMapLayout(code).then((res) => {
       if (!res) {
         return;
       }
       hasBg.value = true;
-      console.log('res.bgInfo.bgImg', res);
       konvaMap.value.createMap(res);
-
-      // imgUrlBg.value = res.bgInfo.bgImg;
-      // console.log();
-
-      // mapEditor.createMap(res);
     });
   };
 
@@ -194,14 +197,6 @@
 
   onMounted(() => {
     getScenesTree({ level: 2, valueKey: 'code', labelKey: 'name', disabled: true });
-    // mapEditor.initContainer({
-    //   container: 'editContainer',
-    //   width: drawContainer.value!.clientWidth,
-    //   height: drawContainer.value!.clientHeight,
-    // });
-    // console.log('drawContainer.value!.clientWidth', drawContainer.value!.clientWidth);
-    // console.log('drawContainer.value!.clientHeight', drawContainer.value!.clientHeight);
-
     konvaMap.value.resizeContainer(
       drawContainer.value!.clientWidth,
       drawContainer.value!.clientHeight,
@@ -218,8 +213,6 @@
   });
 
   const handleAddCamera = (cameraId: string) => {
-    console.log('cameraId', cameraId);
-
     if (!hasBg.value) {
       ElMessage.warning({
         message: '请先添加背景图片',