路径编辑

src/views/mapPage/realTimeMap/components-tool/editMapRouteDialog.vue

@@ -170,9 +170,9 @@ import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 
 const message = useMessage() // 消息弹窗
 const props = defineProps({
-  positionMapId: {
+  imgBgObj: {
-    type: String,
+    type: Object,
-    default: () => ''
+    default: () => {}
   }
 })
 
@@ -212,6 +212,34 @@ const submitForm = async (formEl) => {
   if (!formEl) return
   await formEl.validate(async (valid, fields) => {
     if (valid) {
+      let actualStartPoint = disposeEventPoint(form.value.startPointX, form.value.startPointY)
+      let actualEndPoint = disposeEventPoint(form.value.endPointX, form.value.endPointY)
+      form.value.actualStartPointX = actualStartPoint.actualLocationX //实际开始点位x轴
+      form.value.actualStartPointY = actualStartPoint.actualLocationY //实际开始点位y轴
+      form.value.actualEndPointX = actualEndPoint.actualLocationX //实际结束点位x轴
+      form.value.actualEndPointY = actualEndPoint.actualLocationY //实际结束点位y轴
+
+      if (form.value.method === 1) {
+        let actualBeginControl = disposeEventPoint(
+          form.value.beginControlX,
+          form.value.beginControlY
+        )
+        let actualEndControl = disposeEventPoint(form.value.endControlX, form.value.endControlY)
+        form.value.actualBeginControlX = actualBeginControl.actualLocationX //实际开始控制点x轴
+        form.value.actualBeginControlY = actualBeginControl.actualLocationX //实际开始控制点y轴
+        form.value.actualEndControlX = actualEndControl.actualLocationX //实际结束控制点x轴
+        form.value.actualEndControlY = actualEndControl.actualLocationX //实际结束控制点y轴
+      } else {
+        form.value.beginControlX = 0
+        form.value.beginControlY = 0
+        form.value.endControlX = 0
+        form.value.endControlY = 0
+        form.value.actualBeginControlX = 0
+        form.value.actualBeginControlY = 0
+        form.value.actualEndControlX = 0
+        form.value.actualEndControlY = 0
+      }
+
       emit('editMapRouteDialogSubmit', form.value)
       dialogFormVisible.value = false
     }
@@ -232,6 +260,20 @@ const methodChange = (e) => {
   }
 }
 
+//传入x y轴坐标
+const disposeEventPoint = (x, y) => {
+  const actualLocationX =
+    Number(props.imgBgObj.origin[0]) + Number(x) * Number(props.imgBgObj.resolution)
+  const actualLocationY =
+    Number(props.imgBgObj.origin[1]) +
+    (Number(props.imgBgObj.height) - Number(y)) * Number(props.imgBgObj.resolution)
+
+  return {
+    actualLocationX,
+    actualLocationY
+  }
+}
+
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 </script>
 

src/views/mapPage/realTimeMap/editMap.vue

@@ -161,9 +161,8 @@
             :style="{
               width: item.locationWide + 'px',
               height: item.locationDeep + 'px',
-              border: ' 1px dashed #000',
+              backgroundColor: currentItemIndex === index ? '#f48924' : '#000',
               borderRadius: '50%',
-              backgroundColor: '#000',
               zIndex: 999
             }"
           >
@@ -251,17 +250,19 @@
                 :x2="curve.endPointX"
                 :y2="curve.endPointY"
                 :stroke="curve.isSelected ? '#f48924' : '#00329F'"
-                stroke-width="4"
+                stroke-width="5"
-                @click="handleEditRoute(curve, index)"
+                @click="handleChooseRoute(curve, index)"
+                @dblclick="handleEditRoute(curve, index)"
               />
 
               <template v-else>
                 <path
                   :d="getCurvePath(curve)"
                   :stroke="curve.isSelected ? '#f48924' : '#00329F'"
-                  stroke-width="4"
+                  stroke-width="5"
                   fill="none"
-                  @click="handleEditRoute(curve, index)"
+                  @click="handleChooseRoute(curve, index)"
+                  @dblclick="handleEditRoute(curve, index)"
                 />
                 <line
                   :x1="curve.startPointX"
@@ -417,6 +418,7 @@
   <editMapRouteDialog
     ref="editMapRouteDialogRef"
     @editMapRouteDialogSubmit="editMapRouteDialogSubmit"
+    :imgBgObj="imgBgObj"
   />
 </template>
 
@@ -530,6 +532,9 @@ const backNextStep = () => {
 const mapClick = (e) => {
   const x = disposeEventPoints(e).x
   const y = disposeEventPoints(e).y
+  const actualLocationX = disposeEventPoints(e).actualLocationX
+  const actualLocationY = disposeEventPoints(e).actualLocationY
+
   //绘制节点
   if (toolbarSwitchType.value === 'drawNodes') {
     allMapPointInfo.value.push({
@@ -537,6 +542,8 @@ const mapClick = (e) => {
       layerSelectionShow: true,
       locationX: x,
       locationY: y,
+      actualLocationX: actualLocationX,
+      actualLocationY: actualLocationY,
       locationDeep: 10,
       locationWide: 10,
       angle: 0,
@@ -556,6 +563,8 @@ const mapClick = (e) => {
     state.showInputBox = true
     state.inputBoxStyle.locationX = x
     state.inputBoxStyle.locationY = y
+    state.inputBoxStyle.actualLocationX = actualLocationX
+    state.inputBoxStyle.actualLocationY = actualLocationY
 
     // 聚焦输入框
     setTimeout(() => {
@@ -569,11 +578,9 @@ const mapClick = (e) => {
 }
 //输入文字样式改变
 const textFormSuccess = (form) => {
-  state.inputBoxStyle = {
+  state.inputBoxStyle.fontSize = `${form.fontSize}`
-    fontSize: `${form.fontSize}`,
+  state.inputBoxStyle.fontFamily = `${form.fontFamily}`
-    fontFamily: `${form.fontFamily}`,
+  state.inputBoxStyle.fontColor = `${form.fontColor}`
-    fontColor: `${form.fontColor}`
-  }
 }
 //输入结束
 const handleInputEnd = () => {
@@ -584,6 +591,8 @@ const handleInputEnd = () => {
       positionMapId: imgBgObj.positionMapId, //地图的id
       locationX: state.inputBoxStyle.locationX, //x
       locationY: state.inputBoxStyle.locationY, //y
+      actualLocationX: state.inputBoxStyle.actualLocationX,
+      actualLocationY: state.inputBoxStyle.actualLocationY,
       locationDeep: '', //h
       locationWide: '', //w
       angle: 0, //旋转角度
@@ -795,7 +804,9 @@ const state = reactive({
     fontSize: '14',
     fontColor: '#000000',
     locationX: 0,
-    locationY: 0
+    locationY: 0,
+    actualLocationX: 0,
+    actualLocationY: 0
   }, //输入框的样式
   inputBoxValue: '', //输入的值
   isShowLayer: false, //图层显示
@@ -1119,7 +1130,12 @@ const clickDrawSelectionArea = () => {
   //只要库位的
   let binLocation = state.drawSelectionPointList.filter((item) => item.type === 2)
   //只要路径点的
-  let routeList = state.drawSelectionPointList.filter((item) => item.type === 1)
+  // let routeList = state.drawSelectionPointList.filter((item) => item.type === 1)
+  let routeList = state.drawSelectionPointList
+
+  let isHaveId = binLocation.every((item) => {
+    item.id
+  })
 
   if (toolbarSwitchType.value === 'lineLibrary') {
     //线库
@@ -1131,24 +1147,44 @@ const clickDrawSelectionArea = () => {
       message.warning('您选择的库位不在一条直线上')
       return
     }
+    let isHaveId = binLocation.every((item) => {
+      return item.id
+    })
+    if (!isHaveId) {
+      message.warning('您选择的库位存在未保存的')
+      return
+    }
     lineLibrarySettingDialogRef.value.open(binLocation)
   }
+  //区域
   if (toolbarSwitchType.value === 'region') {
-    //区域
     if (binLocation.length < 1) {
       message.warning('至少选择两个库位')
-    } else {
+      return
-      itemAreaSettingDialogRef.value.open(binLocation)
     }
+    let isHaveId = binLocation.every((item) => {
+      return item.id
+    })
+    if (!isHaveId) {
+      message.warning('您选择的库位存在未保存的')
+      return
+    }
+    itemAreaSettingDialogRef.value.open(binLocation)
   }
 
   if (toolbarSwitchType.value === 'drawRoute') {
-    //先判断是不是两个库位
     if (routeList.length !== 2) {
       message.warning('只能选择两个路径点')
       return
     }
-
+    let isHaveId = routeList.every((item) => {
+      return item.id
+    })
+    if (!isHaveId) {
+      message.warning('您选择的路径点存在未保存的')
+      return
+    }
+    console.log(routeList)
     let curve = {
       isSelected: false, //是否选中
       startingPointId: routeList[0].id,
@@ -1157,6 +1193,14 @@ const clickDrawSelectionArea = () => {
       startPointY: routeList[0].locationY + routeList[0].locationDeep / 2, //开始点
       endPointX: routeList[1].locationX + routeList[1].locationWide / 2, //结束点
       endPointY: routeList[1].locationY + routeList[1].locationWide / 2, //结束点
+      actualStartPointX: routeList[0].actualLocationX, //实际开始点位x轴
+      actualStartPointY: routeList[0].actualLocationY, //实际开始点位y轴
+      actualEndPointX: routeList[1].actualLocationX, //实际结束点位x轴
+      actualEndPointY: routeList[1].actualLocationY, //实际结束点位y轴
+      actualBeginControlX: '', //实际开始控制点x轴
+      actualBeginControlY: '', //实际开始控制点y轴
+      actualEndControlX: '', //实际结束控制点x轴
+      actualEndControlY: '', //实际结束控制点y轴
       beginControlX: 0, //开始控制点x轴
       beginControlY: 0, //开始控制点y轴
       endControlX: 0, //结束控制点x轴
@@ -1246,7 +1290,7 @@ const endDrag = () => {
 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, index) => {
   state.mapRouteList.forEach((curve, i) => {
     curve.isSelected = i === index
@@ -1255,6 +1299,14 @@ const handleEditRoute = (item, index) => {
   state.selectedCurve = item
   editMapRouteDialogRef.value.open(JSON.parse(JSON.stringify(item)))
 }
+//单击 选中
+const handleChooseRoute = (item, index) => {
+  state.mapRouteList.forEach((curve, i) => {
+    curve.isSelected = i === index
+  })
+  state.selectedCurve = item
+  state.currentDragTarget.index = index
+}
 //编辑路线成功
 const editMapRouteDialogSubmit = (item) => {
   state.mapRouteList[state.currentDragTarget.index] = item
@@ -1435,14 +1487,20 @@ const saveMap = async () => {
     text: '保存中',
     background: 'rgba(255, 255, 255, 0.7)'
   })
-  //节点的保存
+  try {
-  await saveNodeList()
+    //节点的保存
-  //路线的保存
+    await saveNodeList()
-  await saveMapRoute()
+    //路线的保存
-  //关闭loading
+    await saveMapRoute()
-  loading.close()
+    //获取新的数据
-  message.success('保存成功')
+    await getAllNodeList()
-  await getAllNodeList()
+    await getAllMapRoute()
+    //关闭loading
+    loading.close()
+    message.success('保存成功')
+  } catch (error) {
+    loading.close()
+  }
 }
 //节点的保存
 const saveNodeList = async () => {