Merge branch 'staffNoFix' into 'master'

主页布局背景图

See merge request tian-group/skyeye-admin-fe!36

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

@@ -199,13 +199,14 @@
   };
 
   //添加相机
-  const addCamera = (id: string) => {
+  const addCamera = (id: string, streamIp: string) => {
     const existingCamera = cameras.value.find((camera) => camera.id === id);
     if (existingCamera) return;
     const config = {
       width: 52,
       height: 37,
       image: camImg,
+      pushstreamIp: streamIp,
       name: 'image',
       id: id,
     };
@@ -288,13 +289,15 @@
     const stage = transformer.value.getNode().getStage();
     const groups = stage.find('.group');
     const tempList = cloneDeep(cameras.value);
+    console.log('cameras.value', cameras.value);
+
     const camerasLists = tempList.map((item, index) => {
       item.groupConfig.x = groups[index].attrs.x;
       item.groupConfig.y = groups[index].attrs.y;
       item.groupConfig.rotation = groups[index].attrs.rotation || 0;
       item.groupConfig.scaleX = groups[index].attrs.scaleX || 1;
       item.groupConfig.scaleY = groups[index].attrs.scaleY || 1;
-      item.config.url = cameraImgSrc;
+      // item.config.url = cameraImgSrc;
       return item;
     });
     const layout = {

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

@@ -63,7 +63,7 @@
               isAdded: isAddedCamera(item.code),
               isActive: item.code === caremaActiveId,
             }"
-            @click="handleAddCamera(item.code)"
+            @click="handleAddCamera(item.code, item.pushstreamIp)"
           >
             <span class="camera-id">{{ item.name }}</span>
             <el-popover
@@ -194,14 +194,14 @@
     return shopCameraList.value.filter((x) => x.code?.includes(k) || x.workSpaceName?.includes(k));
   });
 
-  const handleAddCamera = (cameraId: string) => {
+  const handleAddCamera = (cameraId: string, streamIp: string) => {
     if (!hasBg.value) {
       ElMessage.warning({
         message: '请先添加背景图片',
       });
       return;
     }
-    konvaMap.value.addCamera(cameraId);
+    konvaMap.value.addCamera(cameraId, streamIp);
   };
 
   const handleSave = () => {

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

@@ -17,14 +17,15 @@
         :class="{ 'content-active': item.id === IconId }"
         @mouseover="showDeleteIcon(item)"
         @mouseleave="hideDeleteIcon(item)"
-        @click="handleClick(item)"
       >
-        <div class="pic-box"
-          ><img
-            :src="globSetting.imgUrl! +(item.layout as any).bgInfo.img"
-            alt="图片"
+        <div class="pic-box" @click="handleClick(item)">
+          <MapContainerSmall
+            ref="mapContainerRef"
+            :bg-image-url="(item.layout as any).bgInfo.img"
+            :show-shops="(item.layout as any).shopList"
             class="content-pic"
-        /></div>
+          />
+        </div>
 
         <div class="pic-word">
           <img src="~@/assets/icons/file.png" alt="" />
@@ -43,11 +44,10 @@
 <script lang="ts" setup>
   import { ref, onMounted } from 'vue';
   import { useRouter } from 'vue-router';
-  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 {
     createdAt: string;
     id: number;
@@ -70,6 +70,7 @@
         item.layout = JSON.parse(item.layout);
         return item;
       });
+      console.log('companyLayoutList.value', companyLayoutList.value);
     });
   });
 
@@ -139,7 +140,6 @@
     background: rgba(255, 255, 255, 0.04);
     border-radius: 5px;
     border: 1px dashed rgba(0, 0, 0, 0.15);
-    // text-align: center;
     margin-left: 56px;
     margin-top: 43px;
   }

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

@@ -0,0 +1,107 @@
+<template>
+  <div>
+    <v-stage ref="stageRef" :config="stageSize">
+      <v-layer ref="layerRef">
+        <v-image :config="bgConfig" />
+        <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" /> -->
+      </v-layer>
+    </v-stage>
+  </div>
+</template>
+
+<script setup lang="ts">
+  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 stageRef = ref<Konva.Stage>();
+  const layerRef = ref<Konva.Layer>();
+
+  const stageSize = ref({
+    width: 182,
+    height: 114,
+  });
+
+  const bgConfig = ref({
+    width: 1920,
+    height: 1080,
+    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 + '',
+      name: 'group',
+    };
+  };
+
+  const addBg = () => {
+    return new Promise((resolve) => {
+      const imgUrl = urlJoin(globSetting.imgUrl!, props.bgImageUrl);
+      console.log('imgUrlPromise', imgUrl);
+
+      const tempImg = new Image();
+      tempImg.src = imgUrl;
+      tempImg.onload = () => {
+        bgConfig.value.image = tempImg;
+      };
+      resolve(null);
+    });
+  };
+
+  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();
+  };
+
+  watch(
+    () => props.bgImageUrl,
+    () => {
+      addBg().then(() => {
+        zoomOut();
+      });
+    },
+    { immediate: true },
+  );
+</script>
+
+<style scoped></style>