fix: 主页配置方案二

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

@@ -14,7 +14,7 @@
           @transformend="handleTransformEnd"
         >
           <v-image :config="getPointConfig(item)" />
-          <v-image :config="getRectConfig(item)" />
+          <!-- <v-image :config="getRectConfig(item)" /> -->
         </v-group>
         <v-transformer ref="transformerRef" />
       </v-layer>
@@ -61,7 +61,7 @@
     return {
       x: shop.x,
       y: shop.y,
-      id: shop.id,
+      id: shop.id + '',
       draggable: true,
       name: 'group',
     };
@@ -69,8 +69,8 @@
 
   const getPointConfig = (shop: MapWorkShopInfoItem) => {
     return {
-      width: 32,
-      height: 39,
+      width: 213,
+      height: 44,
       image: shop.pointSvg,
       name: 'pointSvg',
     };
@@ -104,10 +104,7 @@
       selectedShape = e.target.parent.id();
       console.log(selectedShape);
 
-      const transformerNode = transformerRef.value!.getNode();
-      (transformerNode as Konva.Transformer).nodes([e.target.parent!]);
-
-      // updateTransformer();
+      updateTransformer();
     }
   };
 

src/views/page-config/stores/useMapEditor.ts

@@ -92,9 +92,6 @@ export const useMapEditor = defineStore('home-map-ediotr', () => {
   };
 
   const getSvgImages = (shop: MapWorkShopInfoItem): MapWorkShopInfoItem => {
-    let hasPoint = false;
-    let hasRect = false;
-
     const tempDiv = document.createElement('div') as HTMLDivElement;
     tempDiv.setAttribute('style', `position: absolute; left: -3000px; top: 0px;`);
     const parentEl = document.getElementById('shopEditContainer') as HTMLDivElement;
@@ -102,39 +99,18 @@ export const useMapEditor = defineStore('home-map-ediotr', () => {
 
     const svgImg = new Image();
     svgImg.onload = () => {
-      hasPoint = true;
-      if (hasRect) {
-        // tempDiv?.remove();
-      }
+      tempDiv?.remove();
       addedShops.value.find((item) => item.id === shop.id)!.pointSvg = svgImg;
       showShops.value.find((item) => item.id === shop.id)!.pointSvg = svgImg;
     };
     const pointSvg = h(LabelPoint, {
-      color: shop.bgColor,
+      shop,
       getSvg: (url: string) => {
         svgImg.src = url;
       },
     });
     render(pointSvg, tempDiv);
 
-    const rectImg = new Image();
-    rectImg.onload = () => {
-      hasRect = true;
-      if (hasPoint) {
-        // tempDiv?.remove();
-      }
-      addedShops.value.find((item) => item.id === shop.id)!.rectSvg = rectImg;
-      showShops.value.find((item) => item.id === shop.id)!.rectSvg = rectImg;
-    };
-    shop.name = 'ARJ21部装车间';
-    const rectSvg = h(LabelRect, {
-      shop,
-      getSvg: (url: string) => {
-        rectImg.src = url;
-      },
-    });
-    render(rectSvg, tempDiv);
-
     return { ...shop };
   };