src/views/mapPage/realTimeMap/components-tool/editNodeProperties.vue

@@ -375,7 +375,6 @@ const MathPI = ref(Math.PI)
 
 const equipmentList = ref([]) //用过的设备列表
 const open = (item, list) => {
-  console.log(item)
   form.value = item
   form.value.layersNumber = item.dataList?.length || ''
   form.value.positionMapId = props.positionMapId

src/views/mapPage/realTimeMap/editMap.vue

@@ -1314,11 +1314,8 @@ const handleInputEnd = () => {
 }
 //编辑节点成功
 const submitNodeSuccess = (form) => {
-  let actualPoint = disposeEventPoint(form.locationX, form.locationY)
   form.locationDeepPx = Number(form.locationDeep) / 100 / imgBgObj.resolution
   form.locationWidePx = Number(form.locationWide) / 100 / imgBgObj.resolution
-  form.actualLocationX = actualPoint.actualLocationX
-  form.actualLocationY = actualPoint.actualLocationY
   state.allMapPointInfo[state.currentItemIndex] = form
 
   //节点位置改变 通知路径里面的节点也改变
@@ -2020,40 +2017,9 @@ const pasteNode = () => {
 }
 //移动工具表单提交
 const moveFormSubmit = async () => {
-  if (state.moveForm.locationX && state.moveForm.locationY) {
+  state.allMapPointInfo[state.currentItemIndex].locationX = Number(state.moveForm.locationX)
-    let x = Number(state.moveForm.locationX)
+  state.allMapPointInfo[state.currentItemIndex].locationY = Number(state.moveForm.locationY)
-    let y = Number(state.moveForm.locationY)
-    let item = state.allMapPointInfo[state.currentItemIndex]
-
-    if (x === item.locationX && y === item.locationY) return
-    let actualPoint = disposeEventPoint(x, y)
-    item.locationX = x
-    item.locationY = y
-    item.actualLocationX = actualPoint.actualLocationX
-    item.actualLocationY = actualPoint.actualLocationY
-    //更改路线里的
-    state.mapRouteList.forEach((route) => {
-      if (item.id === route.startingPointId) {
-        route.startPointX = x
-        route.startPointY = y
-        route.beginHigh = Number(item.locationDeepPx)
-        route.beginWidth = Number(item.locationWidePx)
-        route.actualStartPointX = actualPoint.actualLocationX
-        route.actualStartPointY = actualPoint.actualLocationY
-      }
-      if (item.id === route.endPointId) {
-        route.endPointX = x
-        route.endPointY = y
-        route.endHigh = Number(item.locationDeepPx)
-        route.endWidth = Number(item.locationWidePx)
-        route.actualEndPointX = actualPoint.actualLocationX
-        route.actualEndPointY = actualPoint.actualLocationY
-      }
-    })
   addEditHistory()
-  } else {
-    message.warning('请输入x和y')
-  }
 }
 //旋转工具表单提交
 const rotationFormSubmit = () => {
@@ -2252,19 +2218,7 @@ const resetDrawState = () => {
   state.currentDrawY = 0
 }
 
-// 节流函数
+//开始框选绘制
-const throttle = (fn, delay) => {
-  let lastTime = 0
-  return function (...args) {
-    const now = Date.now()
-    if (now - lastTime >= delay) {
-      lastTime = now
-      return fn.apply(this, args)
-    }
-  }
-}
-
-// 优化后的框选相关函数
 const startDrawSelection = (event) => {
   if (
     toolbarSwitchType.value === 'createLineLibrary' ||
@@ -2273,20 +2227,20 @@ const startDrawSelection = (event) => {
     toolbarSwitchType.value == 'generateLine' ||
     toolbarSwitchType.value === 'bulkDelete'
   ) {
-    const { x, y } = disposeEventPoints(event)
+    const x = disposeEventPoints(event).x
+    const y = disposeEventPoints(event).y
 
     // 确保点击在背景区域内
     if (x >= 0 && x <= imgBgObj.width && y >= 0 && y <= imgBgObj.height) {
       state.drawSelectionAreaShow = true
-      state.drawSelectionStartPoint = { x, y }
+      state.drawSelectionStartPoint = { x: x, y: y }
-      state.drawSelectionAreaBox = { x, y, width: 0, height: 0 }
+      state.drawSelectionAreaBox = { x: x, y: y, width: 0, height: 0 }
     }
-    event.preventDefault()
+    event.preventDefault() // 阻止默认行为（避免选中图片或文本）
   }
 }
-
+// 更新框选区域
-// 使用节流优化更新框选区域
+const updateDrawSelection = (event) => {
-const updateDrawSelection = throttle((event) => {
   if (
     toolbarSwitchType.value === 'createLineLibrary' ||
     toolbarSwitchType.value === 'createRegion' ||
@@ -2295,36 +2249,31 @@ const updateDrawSelection = throttle((event) => {
     toolbarSwitchType.value === 'bulkDelete'
   ) {
     if (state.drawSelectionAreaShow) {
-      const { x, y } = disposeEventPoints(event)
+      const x = disposeEventPoints(event).x
+      const y = disposeEventPoints(event).y
 
-      // 使用 requestAnimationFrame 优化渲染
-      requestAnimationFrame(() => {
       state.drawSelectionAreaBox = {
         x: Math.min(state.drawSelectionStartPoint.x, x),
         y: Math.min(state.drawSelectionStartPoint.y, y),
-          width: Math.abs(x - state.drawSelectionStartPoint.x),
+        width: Math.abs(Number(x) - Number(state.drawSelectionStartPoint.x)),
-          height: Math.abs(y - state.drawSelectionStartPoint.y)
+        height: Math.abs(Number(y) - Number(state.drawSelectionStartPoint.y))
       }
-      })
     }
-    event.preventDefault()
+    event.preventDefault() // 阻止默认行为（避免选中图片或文本）
   }
-
   if (toolbarSwitchType.value === 'clickDrawRoute') {
+    // 实时绘制
     if (state.isDrawing) {
-      const { x, y } = disposeEventPoints(event)
+      const x = disposeEventPoints(event).x
+      const y = disposeEventPoints(event).y
 
-      // 使用 requestAnimationFrame 优化渲染
-      requestAnimationFrame(() => {
       state.currentDrawX = x
       state.currentDrawY = y
-      })
     }
-    event.preventDefault()
+    event.preventDefault() // 阻止默认行为（避免选中图片或文本）
   }
-}, 16) // 约60fps的更新频率
+}
-
+//结束框选绘制
-// 优化结束框选
 const endDrawSelection = (event) => {
   if (toolbarSwitchType.value === 'clickDrawRoute') {
     if (state.isDrawing) {
@@ -2382,11 +2331,8 @@ const endDrawSelection = (event) => {
             endPointSortNum: endPoint.sortNum
           }
 
-          // 使用 requestAnimationFrame 优化渲染
-          requestAnimationFrame(() => {
           state.mapRouteList.push(newRoute)
           addEditHistory()
-          })
         }
       }
       resetDrawState()
@@ -2394,7 +2340,6 @@ const endDrawSelection = (event) => {
     event.preventDefault()
     return
   }
-
   if (
     toolbarSwitchType.value === 'createLineLibrary' ||
     toolbarSwitchType.value === 'createRegion' ||
@@ -2402,18 +2347,45 @@ const endDrawSelection = (event) => {
     toolbarSwitchType.value === 'generateLine' ||
     toolbarSwitchType.value === 'bulkDelete'
   ) {
-    // 使用 requestAnimationFrame 优化渲染
-    requestAnimationFrame(() => {
     state.drawSelectionAreaShow = false
-      if (state.drawSelectionAreaBox.width > 0 && state.drawSelectionAreaBox.height > 0) {
     state.allDrawSelectionAreaBox.push({ ...state.drawSelectionAreaBox })
-      }
     state.drawSelectionAreaBox = { x: 0, y: 0, width: 0, height: 0 }
-    })
+    event.preventDefault() // 阻止默认行为（避免选中图片或文本）
-    event.preventDefault()
+    return
   }
 }
+// 找到最近的点
+const findClosestPoint = (x, y) => {
+  const list = state.allMapPointInfo
+  if (!Array.isArray(list) || list.length === 0) return null
 
+  const searchRadius = 100
+  let minDistance = Infinity
+  let closestIndex = null
+
+  // 使用空间分区优化：先进行粗略筛选
+  const potentialPoints = list.filter((point, index) => {
+    if (!point?.locationX || !point?.locationY) return false
+    const dx = Math.abs(point.locationX - x)
+    const dy = Math.abs(point.locationY - y)
+    return dx <= searchRadius && dy <= searchRadius
+  })
+
+  // 在筛选后的点中找最近的
+  potentialPoints.forEach((point, i) => {
+    const dx = point.locationX - x
+    const dy = point.locationY - y
+    const distance = Math.sqrt(dx * dx + dy * dy)
+    const captureRadius = point.locationWide || 10
+
+    if (distance < minDistance && distance < captureRadius) {
+      minDistance = distance
+      closestIndex = list.findIndex((p) => p.id === point.id)
+    }
+  })
+
+  return closestIndex
+}
 //点击区域
 const clickDrawSelectionArea = () => {
   let points = state.allMapPointInfo
@@ -2580,61 +2552,47 @@ const clickDrawSelectionArea = () => {
 }
 //生成直线 选择完成开始点和结束点
 const GenerateStraightLinesSubmit = (pointList, form) => {
-  // 使用 requestAnimationFrame 优化渲染
-  requestAnimationFrame(() => {
   const list = mapPointsToLine(pointList, form.startPointId, form.endPointId)
-    const idNameMap = new Map(list.map((item) => [item.id, item]))
+  const idNameMap = {}
-
+  list.forEach((item) => {
-    // 批量更新点位
+    idNameMap[item.id] = item
-    const updatedPoints = state.allMapPointInfo.map((item) => {
-      if (idNameMap.has(item.id)) {
-        const newPoint = idNameMap.get(item.id)
-        const actualPoint = disposeEventPoint(newPoint.locationX, newPoint.locationY)
-        return {
-          ...item,
-          locationX: newPoint.locationX,
-          locationY: newPoint.locationY,
-          actualLocationX: actualPoint.actualLocationX,
-          actualLocationY: actualPoint.actualLocationY
-        }
-      }
-      return item
   })
-
+  // 遍历第二个数组，更新 name
-    // 批量更新路线
+  state.allMapPointInfo.forEach((item) => {
-    const updatedRoutes = state.mapRouteList.map((item) => {
+    if (idNameMap[item.id]) {
-      const startPoint = idNameMap.get(item.startingPointId)
+      let actualPoint = disposeEventPoint(
-      const endPoint = idNameMap.get(item.endPointId)
+        idNameMap[item.id].locationX,
-
+        idNameMap[item.id].locationY
-      if (startPoint || endPoint) {
+      )
-        const result = { ...item }
+      item.locationX = idNameMap[item.id].locationX
-
+      item.locationY = idNameMap[item.id].locationY
-        if (startPoint) {
+      item.actualLocationX = actualPoint.actualLocationX
-          const actualStartPoint = disposeEventPoint(startPoint.locationX, startPoint.locationY)
+      item.actualLocationY = actualPoint.actualLocationY
-          result.startPointX = startPoint.locationX
+    }
-          result.startPointY = startPoint.locationY
+  })
-          result.actualStartPointX = actualStartPoint.actualLocationX
+  state.mapRouteList.forEach((item) => {
-          result.actualStartPointY = actualStartPoint.actualLocationY
+    if (idNameMap[item.startingPointId]) {
+      let actualPoint = disposeEventPoint(
+        idNameMap[item.startingPointId].locationX,
+        idNameMap[item.startingPointId].locationY
+      )
+      item.startPointX = idNameMap[item.startingPointId].locationX
+      item.startPointY = idNameMap[item.startingPointId].locationY
+      item.actualStartPointX = actualPoint.actualLocationX
+      item.actualStartPointY = actualPoint.actualLocationY
+    }
+    if (idNameMap[item.endPointId]) {
+      let actualPoint = disposeEventPoint(
+        idNameMap[item.endPointId].locationX,
+        idNameMap[item.endPointId].locationY
+      )
+      item.endPointX = idNameMap[item.endPointId].locationX
+      item.endPointY = idNameMap[item.endPointId].locationY
+      item.actualEndPointX = actualPoint.actualLocationX
+      item.actualEndPointY = actualPoint.actualLocationY
     }
-
-        if (endPoint) {
-          const actualEndPoint = disposeEventPoint(endPoint.locationX, endPoint.locationY)
-          result.endPointX = endPoint.locationX
-          result.endPointY = endPoint.locationY
-          result.actualEndPointX = actualEndPoint.actualLocationX
-          result.actualEndPointY = actualEndPoint.actualLocationY
-        }
-
-        return result
-      }
-      return item
   })
-
-    // 批量更新状态
-    state.allMapPointInfo = updatedPoints
-    state.mapRouteList = updatedRoutes
   addEditHistory()
-  })
 }
 //去重
 const deduplicateArrayById = (arr) => {
@@ -3737,81 +3695,6 @@ const checkRouteDuplicate = (startPoint, endPoint, routeList) => {
       (route.startingPointId === endPoint.id && route.endPointId === startPoint.id)
   )
 }
-
-// 空间分区优化
-const GRID_SIZE = 200 // 网格大小
-const gridMap = new Map() // 网格映射
-
-// 获取点所在的网格坐标
-const getGridKey = (x, y) => {
-  const gridX = Math.floor(x / GRID_SIZE)
-  const gridY = Math.floor(y / GRID_SIZE)
-  return `${gridX},${gridY}`
-}
-
-// 更新网格数据
-const updateGridMap = (points) => {
-  gridMap.clear()
-  points.forEach((point, index) => {
-    if (!point?.locationX || !point?.locationY) return
-    const key = getGridKey(point.locationX, point.locationY)
-    if (!gridMap.has(key)) {
-      gridMap.set(key, [])
-    }
-    gridMap.get(key).push({ point, index })
-  })
-}
-
-// 获取指定网格及其相邻网格中的点
-const getNearbyPoints = (x, y) => {
-  const centerKey = getGridKey(x, y)
-  const [centerX, centerY] = centerKey.split(',').map(Number)
-  const nearbyPoints = []
-
-  // 检查中心网格及其相邻网格
-  for (let dx = -1; dx <= 1; dx++) {
-    for (let dy = -1; dy <= 1; dy++) {
-      const key = `${centerX + dx},${centerY + dy}`
-      const points = gridMap.get(key)
-      if (points) {
-        nearbyPoints.push(...points)
-      }
-    }
-  }
-
-  return nearbyPoints
-}
-
-// 优化后的findClosestPoint函数
-const findClosestPoint = (x, y) => {
-  const list = state.allMapPointInfo
-  if (!Array.isArray(list) || list.length === 0) return null
-
-  // 更新网格数据
-  updateGridMap(list)
-
-  const searchRadius = 100
-  let minDistance = Infinity
-  let closestIndex = null
-
-  // 获取附近的点
-  const nearbyPoints = getNearbyPoints(x, y)
-
-  // 在附近的点中找最近的
-  for (const { point, index } of nearbyPoints) {
-    const dx = point.locationX - x
-    const dy = point.locationY - y
-    const distance = Math.sqrt(dx * dx + dy * dy)
-    const captureRadius = point.locationWide || 10
-
-    if (distance < minDistance && distance < captureRadius) {
-      minDistance = distance
-      closestIndex = index
-    }
-  }
-
-  return closestIndex
-}
 </script>
 
 <style lang="scss" scoped>

src/views/mapPage/realTimeMap/格式.md

@@ -1,91 +0,0 @@
-<!-- ```
-{
-  labelType: 'wayPoint', //类型 路径点wayPoint 库位点locationPoint 设备点devicePoint 停车点parkingPoint 区域变更点areaPoint 等待点waitPoint 文字text
-  mapId: '', //地图id
-  x: 100, //left
-  y: 100, //top
-  h: 100, //高
-  w: 100, //宽
-  angle: 13, //旋转角度
-  draggable: true, //是否可以拖动
-  resizable: true, //是否可以调整大小
-  rotatable: true, //是否可以旋转
-  lockAspectRatio: true, //是否保持横纵比
-  img: 'https://sys.znkjfw.com/imgs/process/%E8%AF%B7%E5%81%87.png',
-  text: '', //文字
-  fontColor: '', //文字颜色
-  fontType: '', //文字类型
-  fontFamily: '' //字体类型
-}
-```
-
-```
-
-1.普通节点	dataJson 不传数据
-
-
-2.库位点 	dataJson 数据格式:
-[
-	{
-	"id": 1881176241622024200,			//库位id - 编辑的时候会有需要传过来 新增的时候没有则不传
-	"laneId": 1881177420829642800,		//线库id - 编辑的时候有就传过来 	新增的时候没有就不传
-	"laneName": "测试33",				//线库名称 - 编辑的时候有就传过来 	新增的时候没有就不传
-	"locationX": "2",					//库位坐标x轴 - 编辑的时候有就传过来	 新增的时候不用传
-	"locationY": "7",					//库位坐标y轴 - 编辑的时候有就传过来	 新增的时候不用传
-	"locationWide": 10,					//宽度 - 编辑的时候有就传过来	新增的时候需要传
-	"locationDeep": 10,					//高度 - 编辑的时候有就传过来	新增的时候需要传
-	"direction": 1,						//库位方向（1：单向、2：双向、3：三向、4：四向） 编辑的时候有就传过来	新增的时候需要传
-	"inDirection": 1,					//进入方向（0：尾入、1：头入） 编辑的时候有就传过来	新增的时候需要传
-	"outDirection": 1,					//离开方向（0：尾出、1：头出） 编辑的时候有就传过来	新增的时候需要传
-	"locationStorey": 3,				//层数 编辑的时候有就传过来	新增的时候需要传
-	"mapId": 1,							//地图id 编辑的时候有就传过来 新增的时候不需要传
-	"mapItemId": 1881176241622024200	//地图子表id 编辑的时候有就传过来 新增的时候不需要传
-	},
-	{
-	"id": 1881176241622024200,
-	"laneId": 1881177420829642800,
-	"laneName": "测试33",
-	"locationX": "2",
-	"locationY": "7",
-	"locationWide": 10,
-	"locationDeep": 10,
-	"direction": 1,
-	"inDirection": 1,
-	"outDirection": 1,
-	"locationStorey": 3,
-	"mapId": 1,
-	"mapItemId": 1881176241622024200
-	}
-]
-
-3.设备点 dataJson 数据格式:
-	{
-	"id": 1881176241622024200,			//设备id - 新增编辑都需要传 - 根据选择的设备获取到
-	"locationX": "2",					//库位坐标x轴 - 编辑的时候有就传过来	 新增的时候不用传
-	"locationY": "7",					//库位坐标y轴 - 编辑的时候有就传过来	 新增的时候不用传
-	"locationWide": 10,					//宽度 - 编辑的时候有就传过来	新增的时候需要传
-	"locationDeep": 10,					//高度 - 编辑的时候有就传过来	新增的时候需要传
-	"mapId": 1,							//地图id 编辑的时候有就传过来 新增的时候不需要传
-	"mapItemId": 1881176241622024200	//地图子表id 编辑的时候有就传过来 新增的时候不需要传
-	}
-4.停车点 dataJson 数据格式:
-
-	{
-	"id": 1881176241622024200,			//停车点id - 编辑的时候会有需要传过来 新增的时候没有则不传
-	"locationX": "2",					//库位坐标x轴 - 编辑的时候有就传过来	 新增的时候不用传
-	"locationY": "7",					//库位坐标y轴 - 编辑的时候有就传过来	 新增的时候不用传
-	"locationWide": 10,					//宽度 - 编辑的时候有就传过来	新增的时候需要传
-	"locationDeep": 10,					//高度 - 编辑的时候有就传过来	新增的时候需要传
-	"direction": 1,						//库位方向（1：单向、2：双向、3：三向、4：四向） 编辑的时候有就传过来	新增的时候需要传
-	"inDirection": 1,					//进入方向（0：尾入、1：头入） 编辑的时候有就传过来	新增的时候需要传
-	"outDirection": 1,					//离开方向（0：尾出、1：头出） 编辑的时候有就传过来	新增的时候需要传
-	"mapId": 1,							//地图id 编辑的时候有就传过来 新增的时候不需要传
-	"mapItemId": 1881176241622024200	//地图子表id 编辑的时候有就传过来 新增的时候不需要传
-	},
-
-5.路径点	dataJson 不传数据
-
-6.等待点 dataJson 不传数据
-
-
-``` -->