创建编辑删除仓库点位地图连线

src/api/map/binLocation.ts

@@ -1,6 +1,6 @@
 import request from '@/config/axios'
 
-//获得任务号
+//获得获得库位
 export const getHouseLocation = async (id: number) => {
   return await request.get({ url: `/system/ware/house-location/get?id=` + id })
 }

src/api/map/map.ts

@@ -95,3 +95,18 @@ export const houseLocationGetByMapItemId = async (params) => {
 export const updateHouseLocation = async (data) => {
   return await request.put({ url: `/system/ware/house-location/update`, data })
 }
+//创建编辑删除仓库点位地图连线
+export const createOrEditOrDelPositionMapLine = async (positionMapId, data) => {
+  return await request.post({
+    url: `/system/position-map-line/createOrEditOrDel?positionMapId=${positionMapId}`,
+    data
+  })
+}
+// 获得仓库点位地图连线
+export const getPositionMapLineById = async (id: number) => {
+  return await request.get({ url: `/system/position-map-line/get?id=` + id })
+}
+// 通过地图id获取连线列表
+export const getPositionMapLineByPositionMapId = async (positionMapId: number) => {
+  return await request.get({ url: `/system/position-map-line/list?positionMapId=` + positionMapId })
+}

src/views/mapPage/realTimeMap/editMap.vue

@@ -249,33 +249,39 @@
           <svg
             :width="imgBgObj.width"
             :height="imgBgObj.height"
-            style="position: absolute; top: 0; left: 0"
+            style="position: absolute; top: 0; left: 0; z-index: 9"
           >
             <path
               v-for="(curve, index) in state.mapRouteList"
               :key="index"
               :d="getCurvePath(curve)"
-              :stroke="curve.isSelected ? 'red' : 'blue'"
+              :stroke="curve.isSelected ? '#f48924' : '#00329F'"
-              stroke-width="2"
+              stroke-width="3"
               fill="none"
-              @mousedown="handleEditRoute(curve)"
+              @click="handleEditRoute(curve, index)"
             />
             <line
-              :x1="state.selectedCurve.startPointX"
+              v-for="(curve, index) in state.mapRouteList"
-              :y1="state.selectedCurve.startPointY"
+              :key="'start-' + index"
-              :x2="state.selectedCurve.beginControlX"
+              :x1="curve.startPointX"
-              :y2="state.selectedCurve.beginControlY"
+              :y1="curve.startPointY"
-              stroke="gray"
+              :x2="curve.beginControlX"
+              :y2="curve.beginControlY"
+              :stroke="curve.isSelected ? '#f48924' : '#00329F'"
               stroke-dasharray="4"
+              stroke-width="2"
             />
             <!-- 第二条控制线 -->
             <line
-              :x1="state.selectedCurve.endPointX"
+              v-for="(curve, index) in state.mapRouteList"
-              :y1="state.selectedCurve.endPointY"
+              :key="'end-' + index"
-              :x2="state.selectedCurve.endControlX"
+              :x1="curve.endPointX"
-              :y2="state.selectedCurve.endControlY"
+              :y1="curve.endPointY"
-              stroke="gray"
+              :x2="curve.endControlX"
+              :y2="curve.endControlY"
+              :stroke="curve.isSelected ? '#f48924' : '#00329F'"
               stroke-dasharray="4"
+              stroke-width="2"
             />
             <circle
               v-for="(curve, index) in state.mapRouteList"
@@ -283,8 +289,8 @@
               :cx="curve.beginControlX"
               :cy="curve.beginControlY"
               r="5"
-              fill="green"
+              :fill="curve.isSelected ? '#f48924' : '#00329F'"
-              @mousedown="startDrag(index, 'start')"
+              @mousedown="startDrag(curve, index, 'start')"
             />
             <circle
               v-for="(curve, index) in state.mapRouteList"
@@ -292,8 +298,8 @@
               :cx="curve.endControlX"
               :cy="curve.endControlY"
               r="5"
-              fill="green"
+              :fill="curve.isSelected ? '#f48924' : '#00329F'"
-              @mousedown="startDrag(index, 'end')"
+              @mousedown="startDrag(curve, index, 'end')"
             />
           </svg>
         </div>
@@ -414,6 +420,7 @@
 
 <script setup>
 import JSONBigInt from 'json-bigint'
+import { ElLoading } from 'element-plus'
 import { ref, defineComponent, reactive, nextTick, onMounted } from 'vue'
 import editNodeProperties from './components-tool/editNodeProperties.vue'
 import textFormToolDialog from './components-tool/textFormToolDialog.vue'
@@ -435,7 +442,6 @@ const mapBackgroundRef = ref()
 const inputBoxRef = ref() //文字输入框
 
 const message = useMessage() // 消息弹窗
-const formLoading = ref(false)
 
 const allHistoryList = ref([]) //全部的历史记录
 const currentIndex = ref(0) //用于记录是哪条历史记录的
@@ -457,7 +463,6 @@ const resizeEnd = (x, y, w, h, item, index) => {
 }
 // 拖拽停止
 const dragEnd = (x, y, item, index) => {
-  console.log('拖拽')
   if (x === item.locationX && y === item.locationY) return
   allMapPointInfo.value[index].locationX = x
   allMapPointInfo.value[index].locationY = y
@@ -497,7 +502,6 @@ const addEditHistory = () => {
     currentIndex.value++
   }
   interfaceRefreshed.value = true
-  console.log(allHistoryList.value, 'allHistoryList')
 }
 
 //上一步
@@ -505,7 +509,6 @@ const backPreviousStep = () => {
   if (currentIndex.value > 0) {
     currentIndex.value--
     allMapPointInfo.value = allHistoryList.value[currentIndex.value]
-    console.log('撤销', allHistoryList.value[currentIndex.value])
   } else {
     message.warning('没了老铁')
   }
@@ -515,7 +518,6 @@ const backNextStep = () => {
   if (currentIndex.value < allHistoryList.value.length - 1) {
     currentIndex.value++
     allMapPointInfo.value = allHistoryList.value[currentIndex.value]
-    console.log('重做', allHistoryList.value[currentIndex.value])
   } else {
     message.warning('没了老铁')
   }
@@ -544,8 +546,7 @@ const mapClick = (e) => {
       dataList: [], //存库位的
       dataObj: {} //存 设备点 停车点 文字
     })
-    currentIndex.value++
+    addEditHistory()
-    allHistoryList.value.push(JSON.parse(JSON.stringify(allMapPointInfo.value)))
   }
   //文字输入
   if (toolbarSwitchType.value === 'text') {
@@ -800,9 +801,12 @@ const state = reactive({
   imageChangeMultiple: 1, //图片放大缩小的倍数
   prohibitedOperation: false, //禁止操作 在框选测距等操作时，禁止所有拖动等操作
   mapRouteList: [], //仓库点位地图连线
-  isDragging: false, // 是否正在拖拽
+  currentDragTarget: {
-  currentDragTarget: '', //当前拖拽的目标（起点、终点、控制点）
+    index: null,
-  selectedCurve: '' // 当前选中的曲线
+    type: null
+  }, //当前拖拽的目标（起点、终点、控制点）
+  selectedCurve: '', // 当前选中的曲线
+  svgZIndex: 9999
 })
 const toolbarClick = (item) => {
   let type = item.switchType
@@ -1143,6 +1147,9 @@ const clickDrawSelectionArea = () => {
     }
 
     let curve = {
+      isSelected: false, //是否选中
+      startingPointId: routeList[0].id,
+      endPointId: routeList[1].id,
       startPointX: routeList[0].locationX + routeList[0].locationWide / 2, //开始点
       startPointY: routeList[0].locationY + routeList[0].locationDeep / 2, //开始点
       endPointX: routeList[1].locationX + routeList[1].locationWide / 2, //结束点
@@ -1157,13 +1164,12 @@ const clickDrawSelectionArea = () => {
       expansionZoneRight: 0, //膨胀区域右
       method: 0, //行走方法 0.直线 1.上左曲线2.上右曲线3.下左曲线 4.下右曲线
       direction: 2, //方向 1.单向 2.双向,
-      forwardSpeedLimit: '1.5', //正向限速
+      forwardSpeedLimit: 1.5, //正向限速
-      reverseSpeedLimit: '0.4' //	反向限速
+      reverseSpeedLimit: 0.4, //	反向限速
+      toward: 0
     }
     state.selectedCurve = curve
     state.mapRouteList.push(curve)
-    state.currentDragTarget = 'end'
-    state.isDragging = true
   }
 }
 //计算是不是在同一条直线的
@@ -1206,70 +1212,45 @@ const isStraightLine = (binLocation) => {
 }
 //三阶贝塞尔曲线
 // 开始拖拽
-const dragging = ref()
+const startDrag = (item, index, type) => {
-const startDrag = (index, type) => {
+  handleEditRoute(item, index)
-  dragging.value = { index, type }
+  state.currentDragTarget = { index, type }
   window.addEventListener('mousemove', handleDrag)
   window.addEventListener('mouseup', endDrag)
 }
 // 处理拖动事件
 const handleDrag = (event) => {
-  if (dragging.value.index !== null) {
+  const x = disposeEventPoints(event).x
-    const curve = state.mapRouteList[dragging.value.index]
+  const y = disposeEventPoints(event).y
-    if (dragging.value.type === 'start') {
-      curve.beginControlX = event.offsetX
-      curve.beginControlY = event.offsetY
-    } else {
-      curve.endControlX = event.offsetX
-      curve.endControlY = event.offsetY
-    }
-  }
-}
 
+  if (state.currentDragTarget.index !== null) {
+    const curve = state.mapRouteList[state.currentDragTarget.index]
+    if (state.currentDragTarget.type === 'start') {
+      curve.beginControlX = x
+      curve.beginControlY = y
+    } else {
+      curve.endControlX = x
+      curve.endControlY = y
+    }
+  }
+}
 // 结束拖动
 const endDrag = () => {
-  dragging.value = { index: null, type: null }
+  state.currentDragTarget = { index: null, type: null }
   window.removeEventListener('mousemove', handleDrag)
   window.removeEventListener('mouseup', endDrag)
 }
-
-// 鼠标按下事件
-const handleMouseDown = (event) => {}
-
-// 鼠标移动事件
-const handleMouseMove = (event) => {
-  if (!state.isDragging || !state.selectedCurve) return
-
-  const mousePos = disposeEventPoints(event)
-
-  // 更新拖拽的目标点
-  if (state.currentDragTarget === 'start') {
-    state.selectedCurve.startPointX = mousePos.x
-    state.selectedCurve.startPointY = mousePos.y
-  } else if (state.currentDragTarget === 'end') {
-    state.selectedCurve.endPointX = mousePos.x
-    state.selectedCurve.endPointY = mousePos.y
-  } else if (state.currentDragTarget === 'control1') {
-    state.selectedCurve.beginControlX = mousePos.x
-    state.selectedCurve.beginControlY = mousePos.y
-  } else if (state.currentDragTarget === 'control2') {
-    state.selectedCurve.endControlX = mousePos.x
-    state.selectedCurve.endControlY = mousePos.y
-  }
-}
-
-// 鼠标松开事件
-const handleMouseUp = (event) => {
-  state.isDragging = false
-  state.currentDragTarget = null
-}
 // 获取曲线的路径
 const getCurvePath = (curve) => {
   return `M ${curve.startPointX} ${curve.startPointY} C ${curve.beginControlX} ${curve.beginControlY}, ${curve.endControlX} ${curve.endControlY}, ${curve.endPointX} ${curve.endPointY}`
 }
 //编辑路线
-const handleEditRoute = (item) => {
+const handleEditRoute = (item, index) => {
-  console.log('Selected curve:', item)
+  state.mapRouteList.forEach((curve, i) => {
+    curve.isSelected = i === index
+  })
+  state.selectedCurve = item
+  console.log('选中路线', item)
 }
 
 //测距相关
@@ -1334,8 +1315,7 @@ const imgBgObj = reactive({
   floor: '',
   area: '',
   resolution: 0.05,
-  // origin: [-54.4, -34.2]
+  origin: [-54.4, -34.2]
-  origin: [-10.4, 9.1]
 })
 //接收参数
 const { query } = useRoute() // 查询参数
@@ -1366,6 +1346,7 @@ const getMapData = async (mapInfo) => {
     imgBgObj.height = img.naturalHeight
     console.log(img.naturalWidth, img.naturalHeight)
     getAllNodeList()
+    getAllMapRoute()
   }
   //加载图片失败
   img.onerror = () => {
@@ -1377,6 +1358,7 @@ const getAllNodeList = async () => {
   let list = await MapApi.getPositionMapItemList({
     positionMapId: imgBgObj.positionMapId
   })
+  allMapPointInfo.value = []
   list.forEach((item) => {
     item.layerSelectionShow = true //用于图层
     item.locationX = Number(item.locationX)
@@ -1434,18 +1416,30 @@ const getAllNodeList = async () => {
   })
   allHistoryList.value[0] = JSON.parse(JSON.stringify(allMapPointInfo.value))
 }
+//获取所有的路线
+const getAllMapRoute = async () => {
+  state.mapRouteList = await MapApi.getPositionMapLineByPositionMapId(imgBgObj.positionMapId)
+}
 
 //保存地图按钮
 const saveMap = async () => {
+  const loading = ElLoading.service({
+    lock: true,
+    text: '保存中',
+    background: 'rgba(255, 255, 255, 0.7)'
+  })
   //节点的保存
   await saveNodeList()
   //路线的保存
+  await saveMapRoute()
+  //关闭loading
+  loading.close()
+  message.success('保存成功')
+  await getAllNodeList()
 }
 //节点的保存
 const saveNodeList = async () => {
-  formLoading.value = true
   let list = allHistoryList.value[currentIndex.value]
-
   list.forEach((item) => {
     if (item.type === 7) {
       item.dataObj.positionMapId = imgBgObj.positionMapId
@@ -1459,13 +1453,11 @@ const saveNodeList = async () => {
       item.dataJson = JSON.stringify(item.dataObj)
     }
   })
-
-  try {
   await MapApi.batchSaveOrEditOrDelMapItem(imgBgObj.positionMapId, list)
-    message.success('创建成功')
-  } finally {
-    formLoading.value = false
 }
+//路线的保存
+const saveMapRoute = async () => {
+  await MapApi.createOrEditOrDelPositionMapLine(imgBgObj.positionMapId, state.mapRouteList)
 }
 
 //筛选图层