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;
+ }
+ }
+}