diff --git a/src/views/mapPage/realTimeMap/editMap.vue b/src/views/mapPage/realTimeMap/editMap.vue
index 36dd60cf..5022232e 100644
--- a/src/views/mapPage/realTimeMap/editMap.vue
+++ b/src/views/mapPage/realTimeMap/editMap.vue
@@ -497,6 +497,7 @@
@@ -700,6 +701,7 @@
:stroke="curve.isSelected ? '#f48924' : '#2d72d9'"
:stroke-width="state.routeWidthForm.routeWidth"
@click="(e) => handleChooseRoute(curve, index, 'line', e)"
+ @contextmenu="handleCurveContextMenu(curve, index, $event)"
/>
-
+
-
+
+
+
@@ -1742,6 +1768,13 @@ const state = reactive({
y: 0, // 菜单y坐标
currentItem: null, // 当前右击的库位信息
currentIndex: -1 // 当前右击的库位索引
+ },
+ curveContextMenu: {
+ visible: false,
+ x: 0,
+ y: 0,
+ currentCurve: null,
+ currentIndex: -1
}
})
@@ -2120,6 +2153,7 @@ const handleContextMenu = (item, index, event) => {
state.contextMenu.y = event.clientY
state.contextMenu.currentItem = item
state.contextMenu.currentIndex = index
+ state.currentItemIndex = index
}
// 隐藏右击菜单
@@ -4347,6 +4381,129 @@ const findClosestPoint = (x, y) => {
return closestIndex
}
+
+// 曲线右击事件
+const handleCurveContextMenu = (curve, index, event) => {
+ event.preventDefault()
+ state.curveContextMenu.visible = true
+ state.curveContextMenu.x = event.clientX
+ state.curveContextMenu.y = event.clientY
+ state.curveContextMenu.currentCurve = curve
+ state.curveContextMenu.currentIndex = index
+ state.currentDragTarget.index = index
+}
+
+// 隐藏曲线右击菜单
+const hideCurveContextMenu = () => {
+ state.curveContextMenu.visible = false
+ state.curveContextMenu.currentIndex = -1
+}
+
+// 曲线删除(仅UI,逻辑留空)
+const deleteCurveRoute = () => {
+ if (state.currentDragTarget.index !== null) {
+ state.mapRouteList.splice(state.currentDragTarget.index, 1)
+ state.currentDragTarget.index = null
+ }
+ addEditHistory()
+ hideCurveContextMenu()
+}
+
+// 点击空白处关闭曲线菜单
+window.addEventListener('click', (e) => {
+ if (state.curveContextMenu.visible) {
+ const menu = document.querySelector('.context-menu')
+ if (menu && !menu.contains(e.target)) {
+ hideCurveContextMenu()
+ }
+ }
+})
+
+// 直角拐角控制点计算
+function getRightAngleControlPoints(direction, start, end, offset = 0) {
+ let corner
+ if (direction === 'leftTop') {
+ corner = { x: Math.min(start.x, end.x), y: Math.min(start.y, end.y) }
+ } else if (direction === 'rightBottom') {
+ corner = { x: Math.max(start.x, end.x), y: Math.max(start.y, end.y) }
+ } else if (direction === 'leftBottom') {
+ corner = { x: Math.min(start.x, end.x), y: Math.max(start.y, end.y) }
+ } else if (direction === 'rightTop') {
+ corner = { x: Math.max(start.x, end.x), y: Math.min(start.y, end.y) }
+ } else {
+ corner = { x: end.x, y: start.y }
+ }
+ // 计算单位向量
+ const getUnit = (from, to) => {
+ const dx = from.x - to.x
+ const dy = from.y - to.y
+ const len = Math.sqrt(dx * dx + dy * dy) || 1
+ return { x: dx / len, y: dy / len }
+ }
+ // 控制点分别在拐点往起点/终点方向各偏移offset像素
+ const u1 = getUnit(corner, start)
+ const u2 = getUnit(corner, end)
+ const beginControl = { x: corner.x + u1.x * offset, y: corner.y + u1.y * offset }
+ const endControl = { x: corner.x + u2.x * offset, y: corner.y + u2.y * offset }
+ return { beginControl, endControl }
+}
+// 设置曲线为直角拐角
+function setCurveRightAngle(direction) {
+ const curve = state.curveContextMenu.currentCurve
+ if (!curve) return
+ const start = { x: curve.startPointX, y: curve.startPointY }
+ const end = { x: curve.endPointX, y: curve.endPointY }
+ const { beginControl, endControl } = getRightAngleControlPoints(direction, start, end)
+ curve.beginControlX = beginControl.x
+ curve.beginControlY = beginControl.y
+ curve.endControlX = endControl.x
+ curve.endControlY = endControl.y
+ curve.method = 1
+ hideCurveContextMenu()
+}
+
+// 动态判断可用直角拐角方向
+function getAvailableRightAngleDirections(curve) {
+ if (!curve) return []
+ const sx = curve.startPointX,
+ sy = curve.startPointY,
+ ex = curve.endPointX,
+ ey = curve.endPointY
+ const dx = ex - sx
+ const dy = ey - sy
+ if (dx === 0 || dy === 0) return []
+ if (dx * dy > 0) return ['leftBottom', 'rightTop']
+ if (dx * dy < 0) return ['leftTop', 'rightBottom']
+ return []
+}
+// 方向label
+function rightAngleDirectionLabel(dir) {
+ switch (dir) {
+ case 'rightTop':
+ return '右上直角拐角'
+ case 'rightBottom':
+ return '右下直角拐角'
+ case 'leftTop':
+ return '左上直角拐角'
+ case 'leftBottom':
+ return '左下直角拐角'
+ default:
+ return ''
+ }
+}
+
+//右击编辑路线
+const contextMenuEditRoute = () => {
+ removeEventListener() //移除监听
+ let item = state.mapRouteList[state.currentDragTarget.index]
+ editMapRouteDialogRef.value.open(JSON.parse(JSON.stringify(item)))
+}
+
+// 新增:处理节点点击,显示节点locationX/locationY
+function handleNodeClick(item) {
+ state.actualLocation.x = item.actualLocationX ? Number(item.actualLocationX).toFixed(3) : ''
+ state.actualLocation.y = item.actualLocationY ? Number(item.actualLocationY).toFixed(3) : ''
+}