增加线上加点功能 在已有路线上新增节点 前端自动分成两条路线

src/api/map/map.ts

@@ -173,3 +173,17 @@ export const getByMapItemId = async (mapId, mapItemId) => {
     url: `/system/ware/house-location/getByMapItemId?mapItemId=${mapItemId}&mapId=${mapId}`
   })
 }
+
+//线上加点保存点位
+export const lineAddItem = async (data) => {
+  return await request.post({
+    url: `/system/position-map-item/lineAddItem`,
+    data
+  })
+}
+//获取id
+export const getNodeId = async () => {
+  return await request.get({
+    url: `/system/position-map-item/getUUid`
+  })
+}

src/views/mapPage/realTimeMap/editMap.vue

@@ -578,7 +578,7 @@
                       :y2="Number(curve.endPointY)"
                       :stroke="curve.isSelected ? '#f48924' : '#2d72d9'"
                       :stroke-width="state.routeWidthForm.routeWidth"
-                      @click="handleChooseRoute(curve, index, 'line')"
+                      @click="(e) => handleChooseRoute(curve, index, 'line', e)"
                     />
                     <text
                       style="user-select: none"
@@ -588,7 +588,7 @@
                       text-anchor="middle"
                       fill="black"
                       v-if="curve.isSelected"
-                      @click="handleChooseRoute(curve, index, 'line')"
+                      @click="(e) => handleChooseRoute(curve, index, 'line', e)"
                     >
                       {{ calculateRouteLength(curve, 'line') }}米
                     </text>
@@ -601,7 +601,7 @@
                       :stroke="curve.isSelected ? '#f48924' : '#2d72d9'"
                       :stroke-width="state.routeWidthForm.routeWidth"
                       fill="none"
-                      @click="handleChooseRoute(curve, index, 'curve')"
+                      @click="handleChooseRoute(curve, index)"
                     />
                     <text
                       style="user-select: none"
@@ -611,7 +611,7 @@
                       text-anchor="middle"
                       fill="black"
                       v-if="curve.isSelected"
-                      @click="handleChooseRoute(curve, index, 'curve')"
+                      @click="handleChooseRoute(curve, index)"
                     >
                       {{ calculateRouteLength(curve, 'curve') }}米
                     </text>
@@ -730,10 +730,10 @@
       <!-- </map-scale-tool> -->
     </div>
 
-    <!-- <div class="actual-location" v-if="state.actualLocation.x && state.actualLocation.y">
+    <div class="actual-location" v-if="state.actualLocation.x && state.actualLocation.y">
       <div>X：{{ state.actualLocation.x }}</div>
       <div>Y：{{ state.actualLocation.y }}</div>
-    </div> -->
+    </div>
 
     <!-- 节点编辑 -->
     <editNodeProperties
@@ -1133,8 +1133,8 @@ const mapClick = (e) => {
   const actualLocationX = disposeEventPoints(e).actualLocationX
   const actualLocationY = disposeEventPoints(e).actualLocationY
 
-  // state.actualLocation.x = actualLocationX
+  state.actualLocation.x = actualLocationX
-  // state.actualLocation.y = actualLocationY
+  state.actualLocation.y = actualLocationY
 
   //新增节点
   if (toolbarSwitchType.value === 'drawNodes') {
@@ -2618,10 +2618,131 @@ const getCurvePath = (curve) => {
   return path
 }
 // 编辑路线
-const handleChooseRoute = (item, index, type) => {
+const handleChooseRoute = async (item, index, type, e) => {
   if (toolbarSwitchType.value === 'addPointOnline') {
+    //直线情况下 线上加点
     if (type === 'line') {
-    } else {
+      const id = await MapApi.getNodeId()
+      const pageX = disposeEventPoints(e).x
+      const pageY = disposeEventPoints(e).y
+      const x = mapPointToLineSegment(item, pageX, pageY).newX
+      const y = mapPointToLineSegment(item, pageX, pageY).newY
+      const actualLocationX = disposeEventPoint(x, y).actualLocationX
+      const actualLocationY = disposeEventPoint(x, y).actualLocationY
+
+      let newPoint = {
+        id: id,
+        positionMapId: imgBgObj.positionMapId, //地图的id
+        layerSelectionShow: true,
+        locationX: x,
+        locationY: y,
+        actualLocationX: actualLocationX,
+        actualLocationY: actualLocationY,
+        locationDeep: 40,
+        locationWide: 40,
+        locationDeepPx: 8,
+        locationWidePx: 8,
+        angle: 0,
+        draggable: true,
+        resizable: true,
+        rotatable: false,
+        lockAspectRatio: false, //横纵比
+        mapImageUrl: '',
+        locationYaw: 0, //弧度
+        type: 1, //默认类型1 路径节点
+        dataList: [], //存库位的
+        dataObj: {} //存 设备点 停车点 文字
+      }
+      let positionMapLineOne = {
+        isSelected: false, //是否选中
+        startingPointId: item.startingPointId,
+        endPointId: id,
+        startPointX: item.startPointX, //开始点
+        startPointY: item.startPointY, //开始点
+        endPointX: x, //结束点
+        endPointY: y, //结束点
+        actualStartPointX: item.actualStartPointX, //实际开始点位x轴
+        actualStartPointY: item.actualStartPointY, //实际开始点位y轴
+        actualEndPointX: actualLocationX, //实际结束点位x轴
+        actualEndPointY: actualLocationY, //实际结束点位y轴
+        actualBeginControlX: '', //实际开始控制点x轴
+        actualBeginControlY: '', //实际开始控制点y轴
+        actualEndControlX: '', //实际结束控制点x轴
+        actualEndControlY: '', //实际结束控制点y轴
+        beginControlX: 0, //开始控制点x轴
+        beginControlY: 0, //开始控制点y轴
+        endControlX: 0, //结束控制点x轴
+        endControlY: 0, //结束控制点y轴
+        expansionZoneFront: 0, //膨胀区域前
+        expansionZoneAfter: 0, //膨胀区域后
+        expansionZoneLeft: 0, //	膨胀区域左
+        expansionZoneRight: 0, //膨胀区域右
+        method: 0, //行走方法 0.直线 1.上左曲线2.上右曲线3.下左曲线 4.下右曲线
+        direction: 2, //方向 1.单向 2.双向,
+        forwardSpeedLimit: 1.5, //正向限速
+        reverseSpeedLimit: 0.4, //	反向限速
+        toward: 0, //	车头朝向( 0:正正 1:正反 2:反正 3:反反)
+        beginWidth: 8, //起点宽
+        beginHigh: 8, //	起点高
+        endWidth: 8, //	终点宽
+        endHigh: 8 //	终点高
+      }
+      let positionMapLineTwo = {
+        isSelected: false, //是否选中
+        startingPointId: id,
+        endPointId: item.endPointId,
+        startPointX: x, //开始点
+        startPointY: y, //开始点
+        endPointX: item.endPointX, //结束点
+        endPointY: item.endPointY, //结束点
+        actualStartPointX: actualLocationX, //实际开始点位x轴
+        actualStartPointY: actualLocationY, //实际开始点位y轴
+        actualEndPointX: item.actualEndPointX, //实际结束点位x轴
+        actualEndPointY: item.actualEndPointY, //实际结束点位y轴
+        actualBeginControlX: '', //实际开始控制点x轴
+        actualBeginControlY: '', //实际开始控制点y轴
+        actualEndControlX: '', //实际结束控制点x轴
+        actualEndControlY: '', //实际结束控制点y轴
+        beginControlX: 0, //开始控制点x轴
+        beginControlY: 0, //开始控制点y轴
+        endControlX: 0, //结束控制点x轴
+        endControlY: 0, //结束控制点y轴
+        expansionZoneFront: 0, //膨胀区域前
+        expansionZoneAfter: 0, //膨胀区域后
+        expansionZoneLeft: 0, //	膨胀区域左
+        expansionZoneRight: 0, //膨胀区域右
+        method: 0, //行走方法 0.直线 1.上左曲线2.上右曲线3.下左曲线 4.下右曲线
+        direction: 2, //方向 1.单向 2.双向,
+        forwardSpeedLimit: 1.5, //正向限速
+        reverseSpeedLimit: 0.4, //	反向限速
+        toward: 0, //	车头朝向( 0:正正 1:正反 2:反正 3:反反)
+        beginWidth: 8, //起点宽
+        beginHigh: 8, //	起点高
+        endWidth: 8, //	终点宽
+        endHigh: 8 //	终点高
+      }
+
+      try {
+        let res = await MapApi.lineAddItem([
+          {
+            ...newPoint,
+            oldLineId: id,
+            positionMapLines: [positionMapLineOne, positionMapLineTwo]
+          }
+        ])
+        state.allMapPointInfo.push(newPoint)
+        state.mapRouteList.push(positionMapLineOne)
+        state.mapRouteList.push(positionMapLineTwo)
+        state.mapRouteList.splice(index, 1)
+        state.allHistoryList[0] = {
+          allMapPointInfo: JSON.parse(JSON.stringify(state.allMapPointInfo)),
+          mapRouteList: JSON.parse(JSON.stringify(state.mapRouteList))
+        }
+        state.currentIndex = 0
+        message.success('添加成功')
+      } catch (e) {
+        message.error(e)
+      }
     }
   } else {
     state.mapRouteList.forEach((curve, i) => {
@@ -2638,6 +2759,25 @@ const handleChooseRoute = (item, index, type) => {
     }
   }
 }
+
+const mapPointToLineSegment = (linePoint, x, y) => {
+  const dx = Number(linePoint.endPointX) - Number(linePoint.startPointX)
+  const dy = Number(linePoint.endPointY) - Number(linePoint.startPointY)
+  const length = Math.sqrt(dx * dx + dy * dy)
+
+  const vx = x - Number(linePoint.startPointX)
+  const vy = y - Number(linePoint.startPointY)
+  const dotProduct = vx * dx + vy * dy
+  const projectionLength = dotProduct / length
+
+  const t = Math.max(0, Math.min(1, projectionLength / length))
+
+  const newX = Number(linePoint.startPointX) + t * dx
+  const newY = Number(linePoint.startPointY) + t * dy
+
+  return { newX, newY }
+}
+
 //编辑路线成功
 const editMapRouteDialogSubmit = (form) => {
   state.mapRouteList[state.currentDragTarget.index] = form