右击菜单 库位生成检测点

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('恢复成功')
       })
     })

src/views/mapPage/realTimeMap/editMap.vue

@@ -540,7 +540,7 @@
                     </div>
                   </div>
                 </template>
-                <div>
+                <div @contextmenu="handleContextMenu(item, index, $event)">
                   <div
                     v-if="
                       item.type === 1 &&
@@ -957,6 +957,21 @@
       :imgBgObj="imgBgObj"
       @submit-batch-copying-form-success="submitBatchCopyingFormSuccess"
     />
+
+    <div
+      v-if="state.contextMenu.visible"
+      class="context-menu"
+      :style="{ left: state.contextMenu.x + 'px', top: state.contextMenu.y + 'px' }"
+      @click.stop
+    >
+      <div class="context-menu-item" @click="deleteSingleNode">删除</div>
+      <div
+        class="context-menu-item"
+        @click="generateDetectionPoint"
+        v-if="state.contextMenu.currentItem.type === 2"
+        >生成检测点</div
+      >
+    </div>
   </div>
 </template>
 
@@ -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;
+    }
+  }
+}
 </style>