修复测距、框选 在定位元素内部的bug

src/views/mapPage/realTimeMap/editMap.vue

@@ -118,7 +118,6 @@
   <div class="map-box" ref="imgWrap" :style="{ cursor: state.cursorStyle }">
     <div
       class="map-box-inner"
-      ref="image"
       @mousedown.stop="startDrawSelection"
       @mousemove.stop="updateDrawSelection"
       @mouseup.stop="endDrawSelection"
@@ -132,6 +131,7 @@
         id="mapBg"
       />
       <div
+        ref="mapBackgroundRef"
         class="map-box-inner-dot"
         @click="mapClick"
         :class="state.isShowGrid ? 'grid-show' : ''"
@@ -243,7 +243,6 @@
       </div>
 
       <!-- 框选区域 -->
-      <template>
       <div
         v-for="(box, index) in state.allDrawSelectionAreaBox"
         :key="index"
@@ -269,12 +268,11 @@
           height: `${state.drawSelectionAreaBox.height}px`,
           border: '2px dashed #007bff',
           backgroundColor: 'rgba(0, 123, 255, 0.1)',
-            zIndex: 999
+          zIndex: 9999
         }"
       ></div>
-      </template>
 
-      <!-- 绘制点和连线 -->
+      <!-- 测距 绘制点和连线 -->
       <template v-if="state.measureDistancesPoints.length > 0">
         <div
           v-for="(point, index) in state.measureDistancesPoints"
@@ -375,6 +373,7 @@ const lineLibrarySettingDialogRef = ref() //线库设置
 const itemAreaSettingDialogRef = ref() //物料区域设置
 const equipmentToolDialogRef = ref() //设备弹窗
 const textFormToolDialogRef = ref() //文字输入弹窗
+const mapBackgroundRef = ref()
 const inputBoxRef = ref() //文字输入框
 
 const message = useMessage() // 消息弹窗
@@ -962,9 +961,19 @@ const rotationFormSubmit = () => {
 //开始框选绘制
 const startDrawSelection = (event) => {
   if (toolbarSwitchType.value !== 'lineLibrary' && toolbarSwitchType.value !== 'region') return
+
+  const backgroundRect = mapBackgroundRef.value.getBoundingClientRect()
+
+  const x = Number(event.clientX) - backgroundRect.left
+  const y = event.clientY - backgroundRect.top
+
+  // 确保点击在背景区域内
+  if (x >= 0 && x <= backgroundRect.width && y >= 0 && y <= backgroundRect.height) {
     state.drawSelectionAreaShow = true
-  state.drawSelectionStartPoint = { x: event.offsetX, y: event.offsetY }
+    state.drawSelectionStartPoint = { x: x, y: y }
-  state.drawSelectionAreaBox = { x: event.offsetX, y: event.offsetY, width: 0, height: 0 }
+    state.drawSelectionAreaBox = { x: x, y: y, width: 0, height: 0 }
+  }
+
   // 阻止默认行为（避免选中图片或文本）
   event.preventDefault()
 }
@@ -972,8 +981,12 @@ const startDrawSelection = (event) => {
 const updateDrawSelection = (event) => {
   if (toolbarSwitchType.value !== 'lineLibrary' && toolbarSwitchType.value !== 'region') return
   if (state.drawSelectionAreaShow) {
-    state.drawSelectionAreaBox.width = event.offsetX - state.drawSelectionStartPoint.x
+    const backgroundRect = mapBackgroundRef.value.getBoundingClientRect()
-    state.drawSelectionAreaBox.height = event.offsetY - state.drawSelectionStartPoint.y
+    const x = event.clientX - backgroundRect.left
+    const y = event.clientY - backgroundRect.top
+
+    state.drawSelectionAreaBox.width = Number(x) - Number(state.drawSelectionStartPoint.x)
+    state.drawSelectionAreaBox.height = Number(y) - Number(state.drawSelectionStartPoint.y)
   }
   // 阻止默认行为（避免选中图片或文本）
   event.preventDefault()
@@ -1098,13 +1111,27 @@ const computedLineWidth = computed(() => {
 
 // 处理点击事件
 const measureDistancesClick = (event) => {
+  // 获取点击点相对于整个页面的坐标
+  const x = event.clientX
+  const y = event.clientY
+
+  // 检查点击是否发生在背景区域内
+  const backgroundRect = mapBackgroundRef.value.getBoundingClientRect()
+  if (
+    x >= backgroundRect.left &&
+    x <= backgroundRect.right &&
+    y >= backgroundRect.top &&
+    y <= backgroundRect.bottom
+  ) {
     if (state.measureDistancesPoints.length === 2) {
       // 如果已经有两个点，清空信息
       state.measureDistancesPoints = []
       state.measureDistancesNum = null
     } else {
-    // 记录点击的点位
+      // 记录点击的点位（相对于背景区域的坐标）
-    state.measureDistancesPoints.push({ x: event.offsetX, y: event.offsetY })
+      const offsetX = x - backgroundRect.left
+      const offsetY = y - backgroundRect.top
+      state.measureDistancesPoints.push({ x: offsetX, y: offsetY })
       if (state.measureDistancesPoints.length === 2) {
         // 计算两点之间的距离
         state.measureDistancesNum = calculateDistance(
@@ -1113,6 +1140,7 @@ const measureDistancesClick = (event) => {
         )
       }
     }
+  }
 }
 
 //获取扫描图  地图背景相关的信息

src/views/mapPage/realTimeMap/test.vue

@@ -1,12 +1,64 @@
 <template>
-  <div @click="handleClick" style="position: relative; width: 100vw; height: 100vh">
+  <div>
-    <!-- 显示测量结果 -->
+    <!-- 左侧菜单 -->
-    <div v-if="distance !== null" style="position: absolute; top: 20px; left: 20px">
+    <div
-      距离：{{ distance.toFixed(2) }} 像素
+      style="
+        position: fixed;
+        left: 0;
+        top: 0;
+        width: 200px;
+        height: 100vh;
+        background-color: #f0f0f0;
+      "
+    >
+      左侧菜单
     </div>
 
-    <!-- 绘制点和连线 -->
+    <!-- 背景区域 -->
-    <template v-if="points.length > 0">
+    <div
+      ref="background"
+      @mousedown="startSelection"
+      @mousemove="updateSelection"
+      @mouseup="endSelection"
+      style="margin-left: 200px; height: 100vh; position: relative; background-color: #fff"
+    >
+      <!-- 其他定位元素（如图片） -->
+      <img
+        src="https://sys.znkjfw.com/imgs/process/%E8%AF%B7%E5%81%87.png"
+        style="position: absolute; top: 100px; left: 300px; width: 150px; height: 150px"
+        alt="示例图片"
+      />
+
+      <!-- 绘制框选区域 -->
+      <div
+        v-for="(rect, index) in selectionRects"
+        :key="index"
+        :style="{
+          position: 'absolute',
+          left: `${rect.x}px`,
+          top: `${rect.y}px`,
+          width: `${rect.width}px`,
+          height: `${rect.height}px`,
+          border: '2px solid blue',
+          backgroundColor: 'rgba(0, 0, 255, 0.1)'
+        }"
+      ></div>
+
+      <!-- 当前框选区域 -->
+      <div
+        v-if="isSelecting"
+        :style="{
+          position: 'absolute',
+          left: `${selectionBox.x}px`,
+          top: `${selectionBox.y}px`,
+          width: `${selectionBox.width}px`,
+          height: `${selectionBox.height}px`,
+          border: '2px dashed red',
+          backgroundColor: 'rgba(255, 0, 0, 0.1)'
+        }"
+      ></div>
+
+      <!-- 绘制点位 -->
       <div
         v-for="(point, index) in points"
         :key="index"
@@ -16,85 +68,104 @@
           top: `${point.y}px`,
           width: '10px',
           height: '10px',
-          backgroundColor: '#00329F',
+          backgroundColor: isPointSelected(point) ? 'red' : 'black',
           borderRadius: '50%'
         }"
       ></div>
-      <div
+    </div>
-        v-if="points.length === 2"
+
-        :style="{
+    <!-- 确定按钮 -->
-          position: 'absolute',
+    <button @click="confirmSelection" style="position: fixed; top: 20px; left: 220px">
-          left: `${points[0].x + 5}px`,
+      确定
-          top: `${points[0].y + 5}px`,
+    </button>
-          width: `${lineWidth}px`,
-          height: '2px',
-          backgroundColor: '#00329F',
-          transform: `rotate(${lineAngle}deg)`,
-          transformOrigin: '0 0',
-          textAlign: 'center'
-        }"
-      >
-        距离：{{ distance.toFixed(2) }} 像素</div
-      >
-    </template>
   </div>
 </template>
 
 <script>
-import { ref, computed } from 'vue'
+import { ref, computed, onMounted } from 'vue'
 
 export default {
   setup() {
-    const points = ref([]) // 存储点击的点位
+    const background = ref(null) // 背景区域的 DOM 元素
-    const distance = ref(null) // 存储两点之间的距离
+    const points = ref([
+      { x: 10, y: 10 },
+      { x: 30, y: 100 },
+      { x: 40, y: 40 },
+      { x: 230, y: 400 },
+      { x: 750, y: 640 }
+    ]) // 点位数组
+    const isSelecting = ref(false) // 是否正在框选
+    const selectionBox = ref({ x: 0, y: 0, width: 0, height: 0 }) // 当前框选区域
+    const selectionRects = ref([]) // 所有框选区域
+    const startPos = ref({ x: 0, y: 0 }) // 框选起始位置
 
-    // 计算两点之间的距离
+    // 判断点位是否在框选区域内
-    const calculateDistance = (point1, point2) => {
+    const isPointInRect = (point, rect) => {
-      const dx = point2.x - point1.x
+      return (
-      const dy = point2.y - point1.y
+        point.x >= rect.x &&
-      return Math.sqrt(dx * dx + dy * dy)
+        point.x <= rect.x + rect.width &&
+        point.y >= rect.y &&
+        point.y <= rect.y + rect.height
+      )
     }
 
-    // 计算连线的角度
+    // 判断点位是否被选中
-    const lineAngle = computed(() => {
+    const isPointSelected = (point) => {
-      if (points.value.length === 2) {
+      return selectionRects.value.some((rect) => isPointInRect(point, rect))
-        const dx = points.value[1].x - points.value[0].x
-        const dy = points.value[1].y - points.value[0].y
-        return Math.atan2(dy, dx) * (180 / Math.PI)
     }
-      return 0
-    })
 
-    // 计算连线的长度
+    // 开始框选
-    const lineWidth = computed(() => {
+    const startSelection = (event) => {
-      if (points.value.length === 2) {
+      const backgroundRect = background.value.getBoundingClientRect()
-        return calculateDistance(points.value[0], points.value[1])
+      const x = event.clientX - backgroundRect.left
-      }
+      const y = event.clientY - backgroundRect.top
-      return 0
-    })
 
-    // 处理点击事件
+      // 确保点击在背景区域内
-    const handleClick = (event) => {
+      if (x >= 0 && x <= backgroundRect.width && y >= 0 && y <= backgroundRect.height) {
-      if (points.value.length === 2) {
+        isSelecting.value = true
-        // 如果已经有两个点，清空信息
+        startPos.value = { x, y }
-        points.value = []
+        selectionBox.value = { x, y, width: 0, height: 0 }
-        distance.value = null
-      } else {
-        // 记录点击的点位
-        points.value.push({ x: event.offsetX, y: event.offsetY })
-        if (points.value.length === 2) {
-          // 计算两点之间的距离
-          distance.value = calculateDistance(points.value[0], points.value[1])
       }
     }
+
+    // 更新框选区域
+    const updateSelection = (event) => {
+      if (isSelecting.value) {
+        const backgroundRect = background.value.getBoundingClientRect()
+        const x = event.clientX - backgroundRect.left
+        const y = event.clientY - backgroundRect.top
+
+        selectionBox.value.width = x - startPos.value.x
+        selectionBox.value.height = y - startPos.value.y
+      }
+    }
+
+    // 结束框选
+    const endSelection = () => {
+      if (isSelecting.value) {
+        isSelecting.value = false
+        selectionRects.value.push({ ...selectionBox.value })
+      }
+    }
+
+    // 点击确定按钮
+    const confirmSelection = () => {
+      const selectedPoints = points.value.filter((point) => isPointSelected(point))
+      console.log('选中的点位：', selectedPoints)
+      alert(`选中的点位：${JSON.stringify(selectedPoints)}`)
     }
 
     return {
+      background,
       points,
-      distance,
+      isSelecting,
-      lineAngle,
+      selectionBox,
-      lineWidth,
+      selectionRects,
-      handleClick
+      startSelection,
+      updateSelection,
+      endSelection,
+      confirmSelection,
+      isPointSelected
     }
   }
 }

src/views/mapPage/realTimeMap/测距.vue

@@ -0,0 +1,155 @@
+<template>
+  <div>
+    <!-- 左侧菜单 -->
+    <div
+      style="
+        position: fixed;
+        left: 0;
+        top: 0;
+        width: 200px;
+        height: 100vh;
+        background-color: #f0f0f0;
+      "
+    >
+      左侧菜单
+    </div>
+
+    <!-- 背景区域 -->
+    <div
+      ref="background"
+      style="margin-left: 200px; height: 100vh; position: relative; background-color: #fff"
+    >
+      <!-- 其他定位元素（如图片） -->
+      <img
+        src="https://sys.znkjfw.com/imgs/process/%E8%AF%B7%E5%81%87.png"
+        style="position: absolute; top: 100px; left: 300px; width: 150px; height: 150px"
+        alt="示例图片"
+      />
+
+      <!-- 显示测量结果 -->
+      <div v-if="distance !== null" style="position: absolute; top: 20px; left: 220px">
+        距离：{{ distance.toFixed(2) }} 像素
+      </div>
+
+      <!-- 绘制点和连线 -->
+      <template v-if="points.length > 0">
+        <div
+          v-for="(point, index) in points"
+          :key="index"
+          :style="{
+            position: 'absolute',
+            left: `${point.x}px`,
+            top: `${point.y}px`,
+            width: '10px',
+            height: '10px',
+            backgroundColor: 'red',
+            borderRadius: '50%'
+          }"
+        ></div>
+        <div
+          v-if="points.length === 2"
+          :style="{
+            position: 'absolute',
+            left: `${points[0].x}px`,
+            top: `${points[0].y}px`,
+            width: `${lineWidth}px`,
+            height: '2px',
+            backgroundColor: 'blue',
+            transform: `rotate(${lineAngle}deg)`,
+            transformOrigin: '0 0'
+          }"
+        ></div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+
+export default {
+  setup() {
+    const background = ref(null) // 背景区域的 DOM 元素
+    const points = ref([]) // 存储点击的点位
+    const distance = ref(null) // 存储两点之间的距离
+
+    // 计算两点之间的距离
+    const calculateDistance = (point1, point2) => {
+      const dx = point2.x - point1.x
+      const dy = point2.y - point1.y
+      return Math.sqrt(dx * dx + dy * dy)
+    }
+
+    // 计算连线的角度
+    const lineAngle = computed(() => {
+      if (points.value.length === 2) {
+        const dx = points.value[1].x - points.value[0].x
+        const dy = points.value[1].y - points.value[0].y
+        return Math.atan2(dy, dx) * (180 / Math.PI)
+      }
+      return 0
+    })
+
+    // 计算连线的长度
+    const lineWidth = computed(() => {
+      if (points.value.length === 2) {
+        return calculateDistance(points.value[0], points.value[1])
+      }
+      return 0
+    })
+
+    // 处理点击事件
+    const handleClick = (event) => {
+      // 获取点击点相对于整个页面的坐标
+      const x = event.clientX
+      const y = event.clientY
+
+      // 检查点击是否发生在背景区域内
+      const backgroundRect = background.value.getBoundingClientRect()
+      if (
+        x >= backgroundRect.left &&
+        x <= backgroundRect.right &&
+        y >= backgroundRect.top &&
+        y <= backgroundRect.bottom
+      ) {
+        if (points.value.length === 2) {
+          // 如果已经有两个点，清空信息
+          points.value = []
+          distance.value = null
+        } else {
+          // 记录点击的点位（相对于背景区域的坐标）
+          const offsetX = x - backgroundRect.left
+          const offsetY = y - backgroundRect.top
+          points.value.push({ x: offsetX, y: offsetY })
+          if (points.value.length === 2) {
+            // 计算两点之间的距离
+            distance.value = calculateDistance(points.value[0], points.value[1])
+          }
+        }
+      }
+    }
+
+    // 监听全局点击事件
+    onMounted(() => {
+      window.addEventListener('click', handleClick)
+    })
+
+    // 移除全局点击事件监听
+    onUnmounted(() => {
+      window.removeEventListener('click', handleClick)
+    })
+
+    return {
+      background,
+      points,
+      distance,
+      lineAngle,
+      lineWidth
+    }
+  }
+}
+</script>
+
+<style scoped>
+/* 样式可以根据需要调整 */
+</style>