From cd7547689331297ecbdf0b2320a93d92e8548273 Mon Sep 17 00:00:00 2001 From: yyy <2605810609@qq.com> Date: Thu, 26 Jun 2025 10:49:33 +0800 Subject: [PATCH] =?UTF-8?q?=E5=8F=B3=E5=87=BB=E8=8F=9C=E5=8D=95=20?= =?UTF-8?q?=E5=BA=93=E4=BD=8D=E7=94=9F=E6=88=90=E6=A3=80=E6=B5=8B=E7=82=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/board/carBoard/index.vue | 4 +- src/views/mapPage/realTimeMap/editMap.vue | 153 +++++++++++++++++++++- 2 files changed, 153 insertions(+), 4 deletions(-) diff --git a/src/views/board/carBoard/index.vue b/src/views/board/carBoard/index.vue index d6fc30ed..3deb30db 100644 --- a/src/views/board/carBoard/index.vue +++ b/src/views/board/carBoard/index.vue @@ -442,7 +442,7 @@ const clearCar = (robotNo) => { .then(() => { CarApi.cleanTrafficManagement({ robotNo }).then((res) => { getCarList() - getRobotInformationStatistics() + fetchData() message.success('清除成功') }) }) @@ -459,7 +459,7 @@ const recoveryTask = (robotNo) => { .then(() => { CarApi.doTaskContinue({ robotNo }).then((res) => { getCarList() - getRobotInformationStatistics() + fetchData() message.success('恢复成功') }) }) diff --git a/src/views/mapPage/realTimeMap/editMap.vue b/src/views/mapPage/realTimeMap/editMap.vue index 215fe3d5..1cab6dd2 100644 --- a/src/views/mapPage/realTimeMap/editMap.vue +++ b/src/views/mapPage/realTimeMap/editMap.vue @@ -540,7 +540,7 @@ -
+
+ +
+
删除
+
生成检测点
+
@@ -1716,7 +1731,15 @@ const state = reactive({ vLine: [], hLine: [], svgRouteZIndex: 9, - isCurveDisplay: true + isCurveDisplay: true, + // 右击菜单相关状态 + contextMenu: { + visible: false, // 菜单显示状态 + x: 0, // 菜单x坐标 + y: 0, // 菜单y坐标 + currentItem: null, // 当前右击的库位信息 + currentIndex: -1 // 当前右击的库位索引 + } }) const getRefLineParams = (params) => { @@ -2083,6 +2106,93 @@ const toolbarClick = async (item) => { } } +//鼠标右击 +const handleContextMenu = (item, index, event) => { + // 阻止默认的浏览器右击菜单 + event.preventDefault() + + // 设置菜单显示状态和位置 + state.contextMenu.visible = true + state.contextMenu.x = event.clientX + state.contextMenu.y = event.clientY + state.contextMenu.currentItem = item + state.contextMenu.currentIndex = index +} + +// 隐藏右击菜单 +const hideContextMenu = () => { + state.contextMenu.visible = false + state.contextMenu.currentIndex = -1 +} + +//删除 +const deleteSingleNode = () => { + if (state.contextMenu.currentIndex !== -1) { + let deleteId = state.allMapPointInfo[state.contextMenu.currentIndex].id + // 点删除之后 跟点相关的路线都要删除 + state.mapRouteList = state.mapRouteList.filter( + (item) => item.startingPointId !== deleteId && item.endPointId !== deleteId + ) + state.allMapPointInfo.splice(state.contextMenu.currentIndex, 1) + //恢复index + state.contextMenu.currentIndex = -1 + message.success('删除成功') + addEditHistory() + // 隐藏右击菜单 + hideContextMenu() + } +} + +//生成检测点 +const generateDetectionPoint = () => { + if (state.contextMenu.currentIndex === -1) return + + const { locationX, locationY } = state.contextMenu.currentItem + + const radian = 1.57 //弧度 + const distance = 1 / Number(imgBgObj.resolution) //距离米 + + // 将弧度转换为角度(用于理解,实际计算仍使用弧度) + const angle = radian * (180 / Math.PI) + + // 根据角度和距离计算新的坐标 + // 正东方向为0度,正北方向为90度,正西方向为180度,正南方向为-90度 + const newX = Number((Number(locationX) + distance * Math.cos(radian)).toFixed(2)) + const newY = Number((Number(locationY) - distance * Math.sin(radian)).toFixed(2)) + + let actualPoint = disposeEventPoint(newX, newY) + + let pointItem = { + positionMapId: imgBgObj.positionMapId, + layerSelectionShow: true, + locationX: newX, + locationY: newY, + actualLocationX: actualPoint.actualLocationX, + actualLocationY: actualPoint.actualLocationY, + locationDeep: 40, + locationWide: 40, + locationDeepPx: 8, + locationWidePx: 8, + angle: 0, + draggable: true, + resizable: true, + rotatable: false, + lockAspectRatio: false, + mapImageUrl: '', + locationYaw: 0, + type: 1, + dataList: [], + dataObj: {} + } + + // 将新创建的点添加到地图点列表中 + state.allMapPointInfo.push(pointItem) + + addEditHistory() + // 隐藏右击菜单 + hideContextMenu() +} + //复制 const replicationNode = () => { let copyMapItem = state.allMapPointInfo[state.currentItemIndex] @@ -3971,6 +4081,15 @@ const searchSelectChange = (sortNum) => { } document.onmousedown = function (e) { + // 点击外部隐藏右击菜单 + if (state.contextMenu.visible) { + // 检查点击的元素是否在右击菜单内 + const contextMenu = document.querySelector('.context-menu') + if (contextMenu && !contextMenu.contains(e.target)) { + state.contextMenu.visible = false + } + } + //右击 if (e.button == 2) { state.selectedCurve = '' @@ -4408,4 +4527,34 @@ const findClosestPoint = (x, y) => { .h-line { height: 1px; } + +// 右击菜单样式 +.context-menu { + position: fixed; + background: #fff; + border: 1px solid #e4e7ed; + border-radius: 4px; + box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); + z-index: 99999; + min-width: 120px; + padding: 4px 0; + + .context-menu-item { + z-index: 99999; + padding: 8px 16px; + cursor: pointer; + font-size: 14px; + color: #606266; + transition: background-color 0.2s; + + &:hover { + background-color: #f5f7fa; + color: #409eff; + } + + &:not(:last-child) { + border-bottom: 1px solid #f0f0f0; + } + } +}