主页配置背景图

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

@@ -18,12 +18,19 @@
         @mouseleave="hideDeleteIcon(item)"
         @click="handleClick(item)"
       >
-        <div class="pic-box"
-          ><img
+        <div class="pic-box">
+          <!-- <img
             :src="globSetting.imgUrl! +(item.layout as any).bgInfo.img"
             alt="图片"
             class="content-pic"
-        /></div>
+          /> -->
+          <MapContainerSmall
+            ref="mapContainerRef"
+            :bg-image-url="(item.layout as any).bgInfo.img"
+            :show-shops="(item.layout as any).shopList"
+            class="content-pic"
+          />
+        </div>
 
         <div class="pic-word">
           <img src="~@/assets/icons/file.png" alt="" />
@@ -45,6 +52,7 @@
   import { useGlobSetting } from '@/hooks/setting';
   import { Plus } from '@element-plus/icons-vue';
   import { getCompanyLayoutList, delCompanyLayout } from '@/api/scene/scene';
+  import MapContainerSmall from './mapContainer/MapContainerSmall.vue';
 
   const globSetting = useGlobSetting();
   interface companyLayoutType {

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

@@ -0,0 +1,154 @@
+<template>
+  <div>
+    <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)">
+          <LabelItem :shop="item" />
+        </v-group>
+        <!-- <v-transformer ref="transformerRef" :config="transformerConfig" /> -->
+      </v-layer>
+    </v-stage>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { computed, 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 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 getGroupConfig = (shop: MapWorkShopInfoItem) => {
+    return {
+      x: shop.x,
+      y: shop.y,
+      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 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 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 handleClick = () => {
+  //   // emit('onOpen');
+  // };
+
+  // watch(activeShopId, () => {
+  //   nextTick(() => {
+  //     updateTransformer();
+  //   });
+  // });
+
+  // const getLayout = () => {
+  //   const json = stageRef.value?.getStage().toJSON();
+
+  //   return json;
+  // };
+
+  // defineExpose({ getLayout, updateLayoutTransformer });
+</script>
+
+<style scoped></style>