Jelajahi Sumber

fix(设备区域配置): 修正雷达图标尺寸和坐标计算逻辑

更新雷达图标尺寸为20x20像素,并重构getOriginPosition函数以正确计算基于范围的坐标位置
添加调试日志辅助排查坐标计算问题
liujia 1 bulan lalu
induk
melakukan
4060772ca7

TEMPAT SAMPAH
src/assets/furnitures/radar copy.png


TEMPAT SAMPAH
src/assets/furnitures/radar.png


+ 2 - 2
src/const/furniture.ts

@@ -173,7 +173,7 @@ export const furnitureIconSizeMap = {
     height: 80,
   },
   radar: {
-    width: 40,
-    height: 40,
+    width: 20,
+    height: 20,
   },
 }

+ 46 - 38
src/views/device/detail/components/deviceAreaConfig/index.vue

@@ -17,7 +17,7 @@
         <div>
           <div class="viewer-header-title">家具配置</div>
           <div class="viewer-header-subtitle">
-            <span>检测范围 {{ areaWidth }} x {{ areaHeight }} cm</span>
+            <span>检测范围 {{ areaWidth }} x {{ areaHeight }} cm {{ props.ranges }}</span>
           </div>
         </div>
         <div class="viewer-header-extra">
@@ -168,7 +168,9 @@
       <div class="viewer-header">
         <div>
           <div class="viewer-header-title">屏蔽子区域配置</div>
-          <div class="viewer-header-subtitle">检测范围 {{ areaWidth }} x {{ areaHeight }} cm</div>
+          <div class="viewer-header-subtitle"
+            >检测范围 {{ areaWidth }} x {{ areaHeight }} cm {{ props.ranges }}</div
+          >
         </div>
         <div class="viewer-header-extra">
           <a-space>
@@ -531,6 +533,14 @@ const addHnadler = (icon: FurnitureIconType) => {
   }
 
   const { originOffsetX, originOffsetY } = getOriginPosition()
+  console.log(
+    'originOffsetX',
+    originOffsetX,
+    'originOffsetY',
+    originOffsetY,
+    'data',
+    getOriginPosition()
+  )
   // 家具原始宽高
   const originWidth = furnitureIconSizeMap[icon].width || 30
   const originHeight = furnitureIconSizeMap[icon].height || 30
@@ -966,58 +976,55 @@ const selectBlock = (block: BlockItem) => {
 
 /**
  * 获取坐标位置
- * @returns
- * * width: 容器宽度
- * * heigt: 容器高度
- * * originX: 原点X坐标
- * * originY: 原点Y坐标
- * * offsetX: 元素基于父容器的偏移量 X坐标
- * * offsetY: 元素基于父容器的偏移量 Y坐标
- * * originOffsetX: 元素基于原点的偏移量 X坐标
- * * originOffsetY: 元素基于原点的偏移量 Y坐标
- * * radarX: 雷达X坐标
- * * radarY: 雷达Y坐标
+ * @param offsetLeft 元素基于父容器的X坐标
+ * @param offsetTop 元素基于父容器的Y坐标
  */
-const getOriginPosition = () => {
-  // 地图尺寸
-  const containerWidth = areaWidth.value
-  const containerHeight = areaHeight.value
-
-  // 地图原点坐标
-  const originX = containerWidth / 2
-  const originY = containerHeight / 2
+const getOriginPosition = (
+  [offsetLeft, offsetTop]: number[] = [
+    currentDragItem.value?.left as number,
+    currentDragItem.value?.top as number,
+  ]
+) => {
+  const [xstart, xend, ystart, yend] = props.ranges
+
+  // 容器宽高
+  const containerWidth = Math.abs(xstart) + Math.abs(xend)
+  const containerHeight = Math.abs(ystart) + Math.abs(yend)
+
+  // 原点在容器中的坐标
+  const originX = Math.abs(xstart)
+  const originY = Math.abs(yend)
 
   // 元素基于父容器的偏移量
-  const offsetX = (currentDragItem.value && currentDragItem.value?.left) || 0
-  const offsetY = (currentDragItem.value && currentDragItem.value?.top) || 0
+  const offsetX = offsetLeft ?? 0
+  const offsetY = offsetTop ?? 0
 
   // 元素基于原点的偏移量
   const originOffsetX = offsetX - originX
   const originOffsetY = originY - offsetY
 
   // 雷达尺寸
-  const radarWidth = furnitureIconSizeMap['radar']?.width || 0
-  const radarHeight = furnitureIconSizeMap['radar']?.height || 0
+  const radarWidth = furnitureIconSizeMap['radar']?.width ?? 0
+  const radarHeight = furnitureIconSizeMap['radar']?.height ?? 0
 
   // 雷达基于原点的偏移量
   const radarX = Math.round(originX - radarWidth / 2)
   const radarY = Math.round(originY - radarHeight / 2)
 
   const data = {
-    width: containerWidth,
-    height: containerHeight,
-    originX: Math.round(originX),
-    originY: Math.round(originY),
-    offsetX: Math.round(offsetX),
-    offsetY: Math.round(offsetY),
-    originOffsetX: Math.round(originOffsetX),
-    originOffsetY: Math.round(originOffsetY),
-    radarX,
-    radarY,
-    radarWidth,
-    radarHeight,
+    width: containerWidth, // 容器宽度
+    height: containerHeight, // 容器高度
+    originX: Math.round(originX), // 原点X坐标
+    originY: Math.round(originY), // 原点Y坐标
+    offsetX: Math.round(offsetX), // 元素基于父容器的偏移量 X坐标
+    offsetY: Math.round(offsetY), // 元素基于父容器的偏移量 Y坐标
+    originOffsetX: Math.round(originOffsetX), // 元素基于原点的偏移量 X坐标
+    originOffsetY: Math.round(originOffsetY), // 元素基于原点的偏移量 Y坐标
+    radarX, // 雷达X坐标
+    radarY, // 雷达Y坐标
+    radarWidth, // 雷达宽度
+    radarHeight, // 雷达高度
   }
-  console.log('getOriginPosition', data)
 
   return data
 }
@@ -1026,6 +1033,7 @@ const getOriginPosition = () => {
 const initRadarIcon = () => {
   console.log('initRadarIcon', mapCanvasList.value, furnitureItems.value)
   const { radarX, radarY, originOffsetX, originOffsetY } = getOriginPosition()
+  console.log(11111111, getOriginPosition())
   // 在家具地图添加雷达图标
   mapCanvasList.value.push({
     name: '雷达',