主页布局背景图

src/views/page-config/component/PageMain.vue

@@ -16,9 +16,8 @@
         class="content-show"
         @mouseover="showDeleteIcon(item)"
         @mouseleave="hideDeleteIcon(item)"
-        @click="handleClick(item)"
       >
-        <div class="pic-box">
+        <div class="pic-box" @click="handleClick(item)">
           <!-- <img
             :src="globSetting.imgUrl! +(item.layout as any).bgInfo.img"
             alt="图片"
@@ -77,6 +76,7 @@
         item.layout = JSON.parse(item.layout);
         return item;
       });
+      console.log('companyLayoutList.value', companyLayoutList.value);
     });
   });
 

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

@@ -3,7 +3,7 @@
     <v-stage ref="stageRef" :config="stageSize">
       <v-layer ref="layerRef">
         <v-image :config="bgConfig" />
-        <v-group v-for="item in showShops" :key="item.id" :config="getGroupConfig(item)">
+        <v-group v-for="item in props.showShops" :key="item.id" :config="getGroupConfig(item)">
           <LabelItem :shop="item" />
         </v-group>
         <!-- <v-transformer ref="transformerRef" :config="transformerConfig" /> -->
@@ -13,66 +13,30 @@
 </template>
 
 <script setup lang="ts">
-  import { computed, ref, watch } from 'vue';
+  import { ref, watch } from 'vue';
   import LabelItem from './LabelItem.vue';
   // import { storeToRefs } from 'pinia';
   import { MapWorkShopInfoItem } from '../../stores/useMapEditor';
   import Konva from 'konva';
   import { useGlobSetting } from '@/hooks/setting';
   import urlJoin from 'url-join';
+
   const globSetting = useGlobSetting();
   const props = defineProps<{ showShops?; bgImageUrl? }>();
   const bgImage = ref<HTMLImageElement>(new Image());
-  // const mapEditor = useMapEditor();
-  // const { showShops, bgImage } = storeToRefs(mapEditor);
-
-  // const emit = defineEmits(['onOpen']);
-
   const stageRef = ref<Konva.Stage>();
   const layerRef = ref<Konva.Layer>();
-  // const transformerRef = ref<Konva.Transformer>();
 
-  const stageSize = computed(() => {
-    return {
-      // width: 1920,
-      // height: 1080,
-      width: 182,
-      height: 114,
-    };
+  const stageSize = ref({
+    width: 182,
+    height: 114,
   });
-  const addBg = () => {
-    return new Promise((resolve) => {
-      const imgUrl = urlJoin(globSetting.imgUrl!, props.bgImageUrl);
 
-      const tempImg = new Image();
-      tempImg.onload = () => {
-        // mapWidth.value = tempImg.width;
-        // mapHeight.value = tempImg.height;
-        bgImage.value = tempImg;
-      };
-      tempImg.src = imgUrl;
-      resolve(null);
-    });
-  };
-
-  watch(
-    () => props.bgImageUrl,
-    () => {
-      addBg();
-    },
-  );
-
-  const bgConfig = computed(() => {
-    // const imgUrl = urlJoin(globSetting.imgUrl!, props.bgImageUrl);
-    // addBg().then(()=>{})
-    return {
-      // width: 1920,
-      // height: 1080,
-      width: 182,
-      height: 114,
-      image: bgImage.value,
-      name: 'bg',
-    };
+  const bgConfig = ref({
+    width: 1920,
+    height: 1080,
+    image: bgImage.value,
+    name: 'bg',
   });
 
   const getGroupConfig = (shop: MapWorkShopInfoItem) => {
@@ -82,73 +46,62 @@
       scaleX: shop.scaleX,
       scaleY: shop.scaleY,
       id: shop.id + '',
-      // draggable: true,
       name: 'group',
     };
   };
 
-  //需要写一个整体缩放函数
-
-  // const transformerConfig = {
-  //   keepRatio: true,
-  //   rotateEnabled: false,
-  //   enabledAnchors: ['top-left', 'top-right', 'bottom-left', 'bottom-right'],
-  // };
-
-  const handleStageMouseDown = (_e) => {
-    // if (e.target.attrs.name === 'bg') {
-    //   activeShopId.value = -1;
-    //   updateTransformer();
-    // }
-    // if (e.target.parent.attrs.name === 'group') {
-    //   if (e.target.parent.id() === activeShopId.value) {
-    //     return;
-    //   }
-    //   activeShopId.value = e.target.parent.id();
-    //   updateTransformer();
-    // }
-  };
+  const addBg = () => {
+    return new Promise((resolve) => {
+      const imgUrl = urlJoin(globSetting.imgUrl!, props.bgImageUrl);
+      console.log('imgUrlPromise', imgUrl);
 
-  const updateTransformer = () => {
-    // const transformerNode = transformerRef.value!.getNode();
-    // const layer = layerRef.value!.getNode().getLayer();
-    // if (activeShopId.value! >= 0) {
-    //   const selectedNode = layer.findOne('#' + activeShopId.value);
-    //   (transformerNode as Konva.Transformer).nodes([selectedNode!]);
-    // } else {
-    //   (transformerNode as Konva.Transformer).nodes([]);
-    // }
+      const tempImg = new Image();
+      tempImg.src = imgUrl;
+      tempImg.onload = () => {
+        bgConfig.value.image = tempImg;
+      };
+      resolve(null);
+    });
   };
 
-  const updateLayoutTransformer = () => {
-    // const transformerNode = transformerRef.value!.getNode();
-    // const layer = layerRef.value!.getNode().getLayer();
-    // (transformerNode as Konva.Transformer).nodes([]);
-    // const selectedNode = layer.findOne('#' + activeShopId.value);
-    // if (selectedNode) {
-    //   nextTick(() => {
-    //     (transformerNode as Konva.Transformer)?.nodes([selectedNode!]);
-    //   });
-    // }
+  const zoomOut = () => {
+    const stage = stageRef.value!.getStage();
+    if (!stage) return;
+
+    const targetWidth = 182;
+    const targetHeight = 114;
+    const fixWidth = 1920;
+    const fixHeight = 1080;
+    //得到缩放比
+    const scaleX = targetWidth / fixWidth;
+    const scaleY = targetHeight / fixHeight;
+
+    //背景图片缩小
+    bgConfig.value.width = targetWidth;
+    bgConfig.value.height = targetHeight;
+
+    //缩小group
+    const children = stage.find('.group');
+    children.forEach((node) => {
+      const newScaleX = node.attrs.scaleX * scaleX;
+      const newScaleY = node.attrs.scaleY * scaleY;
+      node.attrs.scaleX = newScaleX;
+      node.attrs.scaleY = newScaleY;
+      node.x(node.x() * scaleX);
+      node.y(node.y() * scaleY);
+    });
+    stage.batchDraw();
   };
 
-  // const handleClick = () => {
-  //   // emit('onOpen');
-  // };
-
-  // watch(activeShopId, () => {
-  //   nextTick(() => {
-  //     updateTransformer();
-  //   });
-  // });
-
-  // const getLayout = () => {
-  //   const json = stageRef.value?.getStage().toJSON();
-
-  //   return json;
-  // };
-
-  // defineExpose({ getLayout, updateLayoutTransformer });
+  watch(
+    () => props.bgImageUrl,
+    () => {
+      addBg().then(() => {
+        zoomOut();
+      });
+    },
+    { immediate: true },
+  );
 </script>
 
 <style scoped></style>