fix: 修改label样式

src/directives/moveable.ts

@@ -39,9 +39,11 @@ export const bindMoveTool = (el: HTMLElement, binding) => {
       e.preventDefault();
       calcTransOrigin(e.clientX, e.clientY);
       if (e.wheelDelta > 0) {
-        transInfo.zoom += 0.2;
+        const newZoom = transInfo.zoom + 0.2;
+        transInfo.zoom = newZoom > 10 ? 10 : newZoom;
       } else if (e.wheelDelta < 0) {
-        transInfo.zoom -= 0.2;
+        const newZoom = transInfo.zoom - 0.2;
+        transInfo.zoom = newZoom < 0.2 ? 0.2 : newZoom;
       }
       setBgStyle();
     }

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

@@ -20,7 +20,7 @@
           <!-- <el-button @click="mapEditor.toJson">tojson</el-button> -->
           <el-upload
             class="avatar-uploader flex justify-center items-center"
-            action="/api/layout/uploadPicture"
+            action="/skyeye-admin-api/layout/uploadPicture"
             :show-file-list="false"
             :on-success="handleAvatarSuccess"
             :with-credentials="true"
@@ -87,7 +87,7 @@
         <el-upload
           v-if="!hasBg"
           class="upload-icon flex justify-center items-center"
-          action="/api/layout/uploadPicture"
+          action="/skyeye-admin-api/layout/uploadPicture"
           :show-file-list="false"
           :before-upload="handleBeforeUpload"
           :on-success="handleAvatarSuccess"

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

@@ -14,6 +14,7 @@ export function useMapEditor() {
   // 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激活的相机
@@ -32,8 +33,11 @@ export function useMapEditor() {
     // 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();
   };
 
@@ -334,7 +338,11 @@ export function useMapEditor() {
         };
       });
     const layout = {
-      bgImg: bgImgUrl.value,
+      bgInfo: {
+        bgImg: bgImgUrl.value,
+        width: layer?.find('#bgImg')[0].width(),
+        height: layer?.find('#bgImg')[0].height(),
+      },
       defaultCameraId: defaultCameraId.value,
       cameraList: cameras,
     };
@@ -345,7 +353,7 @@ export function useMapEditor() {
   /** 导入布局json */
   const createMap = (layout) => {
     // const layout = JSON.parse(json);
-    bgImgUrl.value = layout.bgImg;
+    bgImgUrl.value = layout.bgInfo.bgImg;
     addBg();
     layout.cameraList.forEach((camera) => {
       const group = new Konva.Group({
@@ -373,6 +381,7 @@ export function useMapEditor() {
 
         if (camera.cameraId === layout.defaultCameraId) {
           setDefaultCamera(group);
+          defaultIcon?.show();
         }
 
         if (addedCameras.value.length === layout.cameraList.length) {
@@ -384,7 +393,10 @@ export function useMapEditor() {
   };
 
   const resetMap = () => {
+    defaultIcon?.moveTo(copyLayer);
     layer?.clear();
+    layer?.removeChildren();
+    defaultIcon?.moveTo(layer);
     addedCameras.value = [];
     activeGroup.value = null;
     defaultCameraId.value = '';

src/views/page-config/ConfigEdit.vue

@@ -43,7 +43,7 @@
           <!-- <el-button @click="toJson">tojson</el-button> -->
           <el-upload
             class="avatar-uploader flex justify-center items-center"
-            action="/api/homepageConfig/updateCompanyPicture"
+            action="/skyeye-admin-api/homepageConfig/updateCompanyPicture"
             :show-file-list="false"
             :on-success="handleAvatarSuccess"
             :with-credentials="true"
@@ -102,7 +102,7 @@
         <el-upload
           v-if="!hasBg"
           class="upload-icon flex justify-center items-center"
-          action="/api/homepageConfig/uploadCompanyPicture"
+          action="/skyeye-admin-api/homepageConfig/uploadCompanyPicture"
           :show-file-list="false"
           :before-upload="handleBeforeUpload"
           :on-success="handleAvatarSuccess"

src/views/page-config/component/mapContainer/LabelItem.vue

@@ -36,9 +36,9 @@
   }
 
   .test-icon {
-    width: 26.762px;
-    height: 32px;
-    margin-right: 10px;
+    width: 40.2px;
+    height: 48px;
+    margin-right: 15px;
   }
 
   .hover-img {
@@ -53,8 +53,8 @@
 
   .pos-rect {
     position: relative;
-    width: 161px;
-    height: 37px;
+    width: 241.5px;
+    height: 55.5px;
     display: flex;
     justify-content: center;
     align-items: center;

src/views/page-config/component/mapContainer/Transformer.vue

@@ -2,8 +2,8 @@
   <div
     class="transformer-box flex"
     :style="{
-      left: `${transformShop.x - 2}px`,
-      top: `${transformShop.y - 2}px`,
+      left: `${transformShop.x - 4}px`,
+      top: `${transformShop.y - 4}px`,
     }"
     @click="activeShop = transformShop"
   >
@@ -214,14 +214,14 @@
 <style scoped lang="scss">
   .transformer-box {
     position: absolute;
-    padding: 2px;
+    padding: 4px;
   }
 
   .baffle {
     position: absolute;
     width: 100%;
     height: 100%;
-    border: 1px solid black;
+    border: 2px solid #4573bd;
     top: 0;
     left: 0;
     cursor: move;
@@ -230,10 +230,10 @@
 
   .corner {
     position: absolute;
-    width: 8px;
-    height: 8px;
+    width: 12px;
+    height: 12px;
     background-color: #ffffff;
-    border: 1px solid black;
+    border: 2px solid #4573bd;
     cursor: crosshair;
 
     &.left-top {