Merge branch 'all-v4-chauncey' into 'all-v4'

fix: 修改入口文案 更改布局小卡片样式 切换租户退回布局页面

See merge request skyeye/skyeye_frontend/skyeye-admin!288

src/layout/components/Header/SwitchTenant.vue

@@ -19,6 +19,11 @@ import { useUserStore } from '@/store/modules/user';
 import { queryListTenant } from '@/api/tenant';
 import { useTargetTenantIdSetting } from '@/utils/useTargetTenantIdSetting';
 import { replaceParams } from '@/utils/helper/treeHelper';
+import { useRoute } from 'vue-router';
+import useMiniMap from '@/views/map-config/mini-map/use-mini-map.ts'
+import router from '@/router';
+const miniMap = useMiniMap();
+const  {isInConfigEditor}  = miniMap;
 
 interface TenantOption {
   label: string;
@@ -40,11 +45,17 @@ onMounted(() => {
     options.value = replaceParams(res || [], 'tenantName', 'id')
   });
 });
-
+const route = useRoute();
 const handleChange = (targetTenantId: string) => {
   setValue(targetTenantId);
   currentTenant.value = Number(targetTenantId);
   window.location.reload();
+  /**
+   * 如果处于小地图编辑状态，切换租户时候，返回布局列表
+   */
+  if (isInConfigEditor(route.name)) {
+    router.back();
+  }
   sessionStorage.removeItem('selectCompanyId'); //切换租户的时候，下拉公司列表清空
 };
 </script>

src/views/map-config/mini-map/use-mini-map.ts

@@ -28,6 +28,15 @@ export const useMiniMap = defineStore('mini-map', () => {
   //   return flattenedWorkshops.value.find((space) => space.code === code);
   // };
   const bgImgUrl = ref('');
+  /**
+   * 切换租户管理的时候需要判断是否在布局编辑器里面
+   */
+  const isInConfigEditor = ((routerName)=>{
+    if (routerName.includes('LayoutSceneConfig') || routerName.includes('LayoutCameraConfig')) {
+      return true;
+    }
+    return false;
+  })
 
   // const shopCameraList = ref<ShopMapCamera[]>([]);
 
@@ -68,6 +77,7 @@ export const useMiniMap = defineStore('mini-map', () => {
     scenesTree,
     // shopCameraList,
     getScenesTree,
+    isInConfigEditor,
     // getShowCameras,
     // getMapLayout,
     // selectedShopCode,

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

@@ -8,7 +8,7 @@
         <section class="card__right">
           <span class="span__card--title"> PC端{{ titleDefault }} </span>
           <span class="span__card--describe"> {{ describeDefault }}PC端{{ props.layoutType === LayoutConfigType.scene
-            ? '生效' : '车间页面' }} </span>
+            ? '平台首页' : '车间页面' }} </span>
         </section>
       </div>
       <div class="card--default" @click="toLayout('Phone')">
@@ -18,7 +18,7 @@
         <section class="card__right">
           <span class="span__card--title"> 手机端{{ titleDefault }} </span>
           <span class="span__card--describe"> {{ describeDefault }}手机端{{ props.layoutType === LayoutConfigType.scene
-            ? '生效' : '车间页面' }} </span>
+            ? '平台首页' : '车间页面' }} </span>
         </section>
       </div>
     </main>
@@ -39,7 +39,7 @@ const generateContentDefault = (layoutType: LayoutConfigType.scene | LayoutConfi
   switch (layoutType) {
     case LayoutConfigType.scene:
       titleDefault.value = '场景布局';
-      describeDefault.value = '编辑车间在业务场景中的布局，展示在';
+      describeDefault.value = '配置车间在业务场景中的布局，展示在';
       break;
     case LayoutConfigType.camera:
       titleDefault.value = '相机布局';

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

@@ -15,8 +15,7 @@
         <el-card v-for="layout in layoutList" :key="layout.id" shadow="hover" class="layout-cards">
           <div class="layout-card" @click="handleClickCompany(layout.id, layout.name)">
             <div v-if="layout.layout">
-              <MapContainerSmall ref="mapContainerRef" :bg-image-url="layout.layout" :show-shops="layout.shopList"
-                class="content-pic" />
+              <SmallMapContainer :bg-image-url="layout.layout" :show-shops="layout.shopList" />
             </div>
 
             <div v-else>
@@ -25,11 +24,12 @@
             </div>
           </div>
           <template #footer>
-            <span class="footer--default">{{ layout.name }}</span>
+            <el-tooltip popper-class="tooltip--custom" effect="dark" :content="layout.name" placement="bottom-start"
+              v-if="layout.name.length > 15">
+              <span class="footer--default footer-ellipsis">{{ layout.name }}</span>
+            </el-tooltip>
+            <span class="footer--default" v-else>{{ layout.name }}</span>
             <div class="icons">
-              <!-- <el-image v-if="layout.layout" :src="preview" :preview-src-list="[layout.layout]" hide-on-click-modal
-                fit="cover" /> -->
-
               <img :src="edit" @click="handleClickCompany(layout.id, layout.name)" />
             </div>
           </template>
@@ -52,7 +52,6 @@
 import rollback from '@/assets/rollback.png';
 import empty from '@/assets/images/table/table-empty.png';
 import noLayout from '@/assets/images/page-config/no-layout.png';
-import preview from '@/assets/images/table/table-preview.png';
 import edit from '@/assets/images/table/table-edit.png';
 import router from '@/router';
 import { CompanyInfoList, LayoutInfoList } from '@/types/scene-layout/type';
@@ -67,6 +66,10 @@ import {
 } from '@/api/scene/scene';
 import { computed, onMounted, ref } from 'vue';
 import MapContainerSmall from '@/views/page-config/component/mapContainer/MapContainerSmall.vue';
+import WorkShopMapSmall from './workshopMap/WorkShopMapSmall.vue';
+const SmallMapContainer = computed(()=>{
+  return props.layoutType === LayoutConfigType.scene ? MapContainerSmall : WorkShopMapSmall
+})
 const props = defineProps<{
   layoutType: LayoutConfigType.scene | LayoutConfigType.camera
 }>()
@@ -123,16 +126,20 @@ const getLayoutInfoImg = (layoutType: LayoutConfigType.scene | LayoutConfigType.
       scenePlatformApiMap[viewType]({ companyIds: idList }).then((res) => {
         res.map((companyWithLayout) => {
           let img
+          let shopList
           try {
-            img = JSON.parse(companyWithLayout.layout).bgInfo.img;
+            const layout = JSON.parse(companyWithLayout.layout)
+            img = layout.bgInfo.img;
+            shopList = layout.shopList;
           } catch {
-            img = ''
+            img = '';
+            shopList = ''
           }
           const curCompany = layoutList.value.find(
             (company) => company.id === companyWithLayout.targetId,
           );
           curCompany!.layout = img;
-          curCompany!.shopList = JSON.parse(companyWithLayout.layout).shopList;
+          curCompany!.shopList = shopList;
         });
       });
       break;
@@ -140,12 +147,18 @@ const getLayoutInfoImg = (layoutType: LayoutConfigType.scene | LayoutConfigType.
       cameraPlatformApiMap[viewType]({ workshopIdList: idList }).then((res) => {
         res.map((workshopWithLayout) => {
           let img
+          let shopList
           try {
-            img = JSON.parse(workshopWithLayout.layout).bgImgUrl;
+            const layout = JSON.parse(workshopWithLayout.layout)
+            img = layout.bgImgUrl;
+            shopList = layout.cameraList;
           } catch {
             img = ''
+            shopList = ''
           }
-          layoutList.value.find((workshop) => workshop.id === workshopWithLayout.targetId)!.layout = img
+          const curWorkshop = layoutList.value.find((workshop) => workshop.id === workshopWithLayout.targetId)
+          curWorkshop!.layout = img;
+          curWorkshop!.shopList = shopList;
         });
       });
       break;
@@ -155,7 +168,7 @@ const getLayoutInfoImg = (layoutType: LayoutConfigType.scene | LayoutConfigType.
 onMounted(async () => {
   viewType.value = Number(router.currentRoute.value.query.viewType);
   companyList.value = await getCompanyListApi();
-  if (!companyList.value) return;
+  if (!companyList.value || companyList.value.length === 0) return;
   const savedCompanyId = sessionStorage.getItem('selectCompanyId');
   selectCompany.value = savedCompanyId ? Number(savedCompanyId) : companyList.value[0].id;
   layoutList.value = await getLayoutInfoList(props.layoutType)
@@ -166,8 +179,14 @@ onMounted(async () => {
 
 <style lang="scss" scoped>
 .footer--default {
+  width: 160px;
   opacity: 0.45;
 }
+.footer-ellipsis{
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 
 .scene-layout {
   position: absolute;
@@ -291,3 +310,9 @@ onMounted(async () => {
   }
 }
 </style>
+<style>
+.tooltip--custom{
+  width: 200px;
+  opacity: 0.8;
+}
+</style>

src/views/page-config/component/workshopMap/WorkShopMapSmall.vue

@@ -0,0 +1,98 @@
+<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="item.groupConfig">
+                    <v-image :config="cameraConfig" />
+                </v-group>
+            </v-layer>
+        </v-stage>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+import Konva from 'konva';
+import { useGlobSetting } from '@/hooks/setting';
+import urlJoin from 'url-join';
+import cameraImgSrc from '@/assets/camera/cameraImg.png';
+
+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: 214,
+    height: 120,
+});
+
+const bgConfig = ref({
+    width: 0,
+    height: 0,
+    image: bgImage.value,
+    name: 'bg',
+});
+const camImg = new Image();
+const cameraIconSize = { width: 52, height: 52 };
+const cameraConfig = ref({
+    width: cameraIconSize.width,
+    height: cameraIconSize.height,
+    image: camImg,
+    name: 'image',
+});
+
+const addBg = () => {
+    return new Promise((resolve) => {
+        const imgUrl = props.bgImageUrl.includes('skyeye-file-upload')
+            ? props.bgImageUrl
+            : urlJoin(globSetting.imgUrl!, props.bgImageUrl);
+
+        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 = 214;
+    const targetHeight = 120;
+    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();
+};
+onMounted(() => {
+    camImg.src = cameraImgSrc;
+    addBg().then(() => {
+        zoomOut();
+    });
+});
+</script>
+
+<style scoped></style>