Jelajahi Sumber

Merge branch 'all-v4-fjc' into 'all-v4'

fix: 布局管理-场景布局 增加未上传背景图和添加标签时点保存的提示  &&  调整删除菜单的大小

See merge request skyeye/skyeye_frontend/skyeye-admin!292
Fei Liu 1 tahun lalu
induk
melakukan
8bae6c7aa7

+ 12 - 2
src/views/page-config/ConfigEdit.vue

@@ -66,7 +66,7 @@
       </div>
       <div ref="drawContainer" id="drawContainer" class="draw-container">
         <div id="shopEditContainer" v-moveable:1 class="shop-edit-container">
-          <MapContainer ref="mapContainerRef" :is-mobile-view="isMobileView" />
+          <MapContainer ref="mapContainerRef" :is-mobile-view="isMobileView" :scale="scale" />
         </div>
         <el-upload
           v-if="!hasBg"
@@ -301,8 +301,18 @@
   };
 
   const handleSave = () => {
+    if (hasBg.value === false) {
+      ElMessage.error('请添加背景图片');
+      return;
+    }
+
+    if (addedShops.value.length === 0) {
+      ElMessage.error('请至少添加1个车间标签后发布');
+      return;
+    }
+
     const { json } = mapContainerRef.value?.getLayout();
-    const layout = hasBg.value === false ? '' : calcLayout(json);
+    const layout = calcLayout(json);
     const param = {
       layout,
       targetId: companyId.value || 2,

+ 28 - 8
src/views/page-config/component/mapContainer/MapContainer.vue

@@ -50,6 +50,7 @@
   const props = defineProps<{
     isMobileView: boolean;
     // moduleCode: string;
+    scale: number;
   }>();
 
   const stageRef = ref<Konva.Stage>();
@@ -81,6 +82,10 @@
   });
 
   const getGroupConfig = (shop: MapWorkShopInfoItem) => {
+    const labelActivityRange =
+      shop.posType === 'top'
+        ? { configWidth: 165, configHeight: 80 }
+        : { configWidth: 215, configHeight: 40 };
     return {
       x: shop.x,
       y: shop.y,
@@ -89,9 +94,24 @@
       id: shop.id + '',
       draggable: true,
       name: 'group',
+      dragBoundFunc: dynamicDragBoundFunc(
+        labelActivityRange.configWidth,
+        labelActivityRange.configHeight,
+      ),
     };
   };
 
+  function dynamicDragBoundFunc(configWidth: number, configHeight: number) {
+    return (pos: { x: number; y: number }) => {
+      const RestrictedX = Math.max(0, Math.min(bgConfig.value.width - configWidth, pos.x));
+      const RestrictedY = Math.max(0, Math.min(bgConfig.value.height - configHeight, pos.y));
+      return {
+        x: RestrictedX,
+        y: RestrictedY,
+      };
+    };
+  }
+
   const transformerConfig = ref({
     keepRatio: true,
     rotateEnabled: false,
@@ -214,21 +234,21 @@
 
 <style scoped>
   .opt-container {
-    width: 160px;
-    padding: 10px;
-    border-radius: 5px;
+    width: calc(160px / v-bind(scale));
+    padding: calc(10px / v-bind(scale));
+    border-radius: calc(5px / v-bind(scale));
     background-color: #ffffff;
   }
 
   .opt-item {
-    height: 30px;
-    font-size: 14px;
+    height: calc(30px / v-bind(scale));
+    font-size: calc(16px / v-bind(scale));
     color: #404040;
     display: flex;
-    justify-content: flex-start;
+    justify-content: left;
     align-items: center;
-    padding-left: 8px;
-    border-radius: 3px;
+    padding-left: calc(8px / v-bind(scale));
+    border-radius: calc(3px / v-bind(scale));
     cursor: pointer;
 
     &:hover {