From d5fe81953d5f6091a3d53611bf281c2943e28865 Mon Sep 17 00:00:00 2001 From: yyy <2605810609@qq.com> Date: Mon, 17 Feb 2025 16:07:07 +0800 Subject: [PATCH] =?UTF-8?q?=E7=BB=98=E5=88=B6=E8=B7=AF=E7=BA=BF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components-tool/editMapRoute.vue | 189 ++++++++++++++ .../components-tool/editNodeProperties.vue | 10 + .../realTimeMap/components/indexPage.vue | 70 +++--- src/views/mapPage/realTimeMap/editMap.vue | 234 ++++++++++++++++-- src/views/mapPage/realTimeMap/test.vue | 200 +++++++++------ 5 files changed, 583 insertions(+), 120 deletions(-) create mode 100644 src/views/mapPage/realTimeMap/components-tool/editMapRoute.vue diff --git a/src/views/mapPage/realTimeMap/components-tool/editMapRoute.vue b/src/views/mapPage/realTimeMap/components-tool/editMapRoute.vue new file mode 100644 index 00000000..7253e4f2 --- /dev/null +++ b/src/views/mapPage/realTimeMap/components-tool/editMapRoute.vue @@ -0,0 +1,189 @@ + + + + + diff --git a/src/views/mapPage/realTimeMap/components-tool/editNodeProperties.vue b/src/views/mapPage/realTimeMap/components-tool/editNodeProperties.vue index 79bafc63..57eb872a 100644 --- a/src/views/mapPage/realTimeMap/components-tool/editNodeProperties.vue +++ b/src/views/mapPage/realTimeMap/components-tool/editNodeProperties.vue @@ -246,6 +246,16 @@ const typeChange = () => { form.value.inDirection = undefined form.value.outDirection = undefined } + + if (form.value.type === 1) { + form.value.locationDeep = 10 + form.value.locationWide = 10 + } + + if (form.value.type === 5 || form.value.type === 6) { + form.value.locationDeep = 30 + form.value.locationWide = 30 + } } //方向改变 const directionChange = (e) => { diff --git a/src/views/mapPage/realTimeMap/components/indexPage.vue b/src/views/mapPage/realTimeMap/components/indexPage.vue index 2ae1c640..9e939e3a 100644 --- a/src/views/mapPage/realTimeMap/components/indexPage.vue +++ b/src/views/mapPage/realTimeMap/components/indexPage.vue @@ -47,38 +47,48 @@ }" >
- +
-
+
- 库位名： + 库位名： +
+
+ {{ item.showData.locationNo || '' }} +
-
- {{ item.showData.locationNo || '' }} -
-
-
+
- 所属线库： + 所属线库： +
+
+ {{ item.showData.laneName || '' }} +
-
- {{ item.showData.laneName || '' }} -
-
-
+
- 所属区域： -
-
- {{ item.showData.areaName || '' }} -
+ 所属区域： +
+
+ {{ item.showData.areaName || '' }} +
+
+ + + + + + + + + + + + + + + + + + + + + +
+

起点: ({{ state.selectedCurve.startPointX }}, {{ state.selectedCurve.startPointY }})

+

控制点 1: ({{ state.selectedCurve.beginControlX }}, + {{ state.selectedCurve.beginControlY }})

+

控制点 2: ({{ state.selectedCurve.endControlX }}, + {{ state.selectedCurve.endControlY }})

+

终点: ({{ state.selectedCurve.endPointX }}, {{ state.selectedCurve.endPointY }})

+
+
@@ -469,16 +574,17 @@ const backNextStep = () => { //地图点击 const mapClick = (e) => { - //节点 + const x = disposeEventPoints(e).x + const y = disposeEventPoints(e).y + //绘制节点 if (toolbarSwitchType.value === 'drawNodes') { - //绘制节点 allMapPointInfo.value.push({ positionMapId: imgBgObj.positionMapId, //地图的id layerSelectionShow: true, - locationX: e.offsetX, - locationY: e.offsetY, - locationDeep: 16, - locationWide: 16, + locationX: x, + locationY: y, + locationDeep: 10, + locationWide: 10, angle: 0, draggable: true, resizable: false, @@ -495,8 +601,8 @@ const mapClick = (e) => { //文字输入 if (toolbarSwitchType.value === 'text') { state.showInputBox = true - state.inputBoxStyle.locationX = e.offsetX - state.inputBoxStyle.locationY = e.offsetY + state.inputBoxStyle.locationX = x + state.inputBoxStyle.locationY = y // 聚焦输入框 setTimeout(() => { @@ -507,7 +613,6 @@ const mapClick = (e) => { if (toolbarSwitchType.value === 'ranging') { measureDistancesClick(e) } - disposeEventPoints(e) } //输入文字样式改变 const textFormSuccess = (form) => { @@ -744,7 +849,11 @@ const state = reactive({ measureDistancesPoints: [], // 存储点击的点位 measureDistancesNum: 0, // 存储两点之间的距离 imageChangeMultiple: 1, //图片放大缩小的倍数 - prohibitedOperation: false //禁止操作 在框选测距等操作时，禁止所有拖动等操作 + prohibitedOperation: false, //禁止操作 在框选测距等操作时，禁止所有拖动等操作 + mapRouteList: [], //仓库点位地图连线 + isDragging: false, // 是否正在拖拽 + currentDragTarget: '', //当前拖拽的目标（起点、终点、控制点） + selectedCurve: '' // 当前选中的曲线 }) const toolbarClick = (item) => { let type = item.switchType @@ -1046,12 +1155,12 @@ const clickDrawSelectionArea = () => { }) }) - console.log(state.drawSelectionPointList, '选中的') - // 清空框选区域 state.allDrawSelectionAreaBox = [] //只要库位的 let binLocation = state.drawSelectionPointList.filter((item) => item.type === 2) + //只要路径点的 + let routeList = state.drawSelectionPointList.filter((item) => item.type === 1) if (toolbarSwitchType.value === 'lineLibrary') { //线库 @@ -1075,6 +1184,34 @@ const clickDrawSelectionArea = () => { } if (toolbarSwitchType.value === 'drawRoute') { + //先判断是不是两个库位 + if (routeList.length !== 2) { + message.warning('只能选择两个路径点') + return + } + + let curve = { + startPointX: routeList[0].locationX + routeList[0].locationWide / 2, //开始点 + startPointY: routeList[0].locationY + routeList[0].locationDeep / 2, //开始点 + endPointX: routeList[1].locationX + routeList[1].locationWide / 2, //结束点 + endPointY: routeList[1].locationY + routeList[1].locationWide / 2, //结束点 + beginControlX: routeList[0].locationX + routeList[0].locationWide / 2 + 50, //开始控制点x轴 + beginControlY: routeList[0].locationY + routeList[0].locationWide / 2 + 50, //开始控制点y轴 + endControlX: routeList[1].locationX + routeList[1].locationWide / 2 - 50, //结束控制点x轴 + endControlY: routeList[1].locationY + routeList[1].locationWide / 2 - 50, //结束控制点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' // 反向限速 + } + state.selectedCurve = curve + state.mapRouteList.push(curve) + state.currentDragTarget = 'end' + state.isDragging = true } } //计算是不是在同一条直线的 @@ -1115,6 +1252,51 @@ const isStraightLine = (binLocation) => { return Math.abs(currentSlope - slope) < Number.EPSILON // 处理浮点数精度问题 }) } +//三阶贝塞尔曲线 +// 开始拖拽 +const startDrag = (event, curve, target) => { + console.log(event, curve, target) + event.preventDefault() + state.isDragging = true + state.selectedCurve = curve + state.currentDragTarget = target +} + +// 鼠标按下事件 +const handleMouseDown = (event) => {} + +// 鼠标移动事件 +const handleMouseMove = (event) => { + console.log(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 = () => { + 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}` +} //测距相关 // 计算两点之间的距离 @@ -1229,8 +1411,17 @@ const getAllNodeList = async () => { if (item.type === 1 || item.type === 5 || item.type === 6) { item.dataObj = {} item.dataList = [] - item.locationDeep = 16 - item.locationWide = 16 + item.locationDeep = 10 + item.locationWide = 10 + item.draggable = true + item.resizable = false + item.rotatable = false + item.lockAspectRatio = true + } else if (item.type === 5 || item.type === 6) { + item.dataObj = {} + item.dataList = [] + item.locationDeep = 30 + item.locationWide = 30 item.draggable = true item.resizable = false item.rotatable = false @@ -1330,8 +1521,6 @@ const disposeEventPoints = (event) => { const actualLocationX = imgBgObj.origin[0] + x * imgBgObj.resolution const actualLocationY = imgBgObj.origin[1] + (imgBgObj.height - y) * imgBgObj.resolution - console.log(actualLocationX, actualLocationY, '实际坐标') - return { x, y, @@ -1468,4 +1657,17 @@ onMounted(() => { 10px 10px, 10px 10px; } + +svg { + cursor: crosshair; + + path.selected { + stroke: blue; + } + + .points { + margin-top: 10px; + font-size: 14px; + } +} diff --git a/src/views/mapPage/realTimeMap/test.vue b/src/views/mapPage/realTimeMap/test.vue index 78dd4c33..ecb13d24 100644 --- a/src/views/mapPage/realTimeMap/test.vue +++ b/src/views/mapPage/realTimeMap/test.vue @@ -1,95 +1,145 @@ +