From 87bd656625d9108bf7b95d8d5079a6fec687e848 Mon Sep 17 00:00:00 2001 From: yyy <2605810609@qq.com> Date: Tue, 18 Feb 2025 11:36:00 +0800 Subject: [PATCH 1/3] =?UTF-8?q?=E5=88=9B=E5=BB=BA=E7=BC=96=E8=BE=91?= =?UTF-8?q?=E5=88=A0=E9=99=A4=E4=BB=93=E5=BA=93=E7=82=B9=E4=BD=8D=E5=9C=B0?= =?UTF-8?q?=E5=9B=BE=E8=BF=9E=E7=BA=BF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/map/binLocation.ts | 2 +- src/api/map/map.ts | 17 ++- src/views/mapPage/realTimeMap/editMap.vue | 168 +++++++++++----------- 3 files changed, 97 insertions(+), 90 deletions(-) diff --git a/src/api/map/binLocation.ts b/src/api/map/binLocation.ts index a609a5db..05ec2fb1 100644 --- a/src/api/map/binLocation.ts +++ b/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 }) } diff --git a/src/api/map/map.ts b/src/api/map/map.ts index d8a2ce76..c8a1f871 100644 --- a/src/api/map/map.ts +++ b/src/api/map/map.ts @@ -94,4 +94,19 @@ export const houseLocationGetByMapItemId = async (params) => { // 更新库位 export const updateHouseLocation = async (data) => { return await request.put({ url: `/system/ware/house-location/update`, data }) -} \ No newline at end of file +} +//创建编辑删除仓库点位地图连线 +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 }) +} diff --git a/src/views/mapPage/realTimeMap/editMap.vue b/src/views/mapPage/realTimeMap/editMap.vue index a1085eb4..d177e28e 100644 --- a/src/views/mapPage/realTimeMap/editMap.vue +++ b/src/views/mapPage/realTimeMap/editMap.vue @@ -249,33 +249,39 @@ @@ -414,6 +420,7 @@ - - diff --git a/src/views/mapPage/realTimeMap/components-tool/editMapRouteDialog.vue b/src/views/mapPage/realTimeMap/components-tool/editMapRouteDialog.vue new file mode 100644 index 00000000..6163364f --- /dev/null +++ b/src/views/mapPage/realTimeMap/components-tool/editMapRouteDialog.vue @@ -0,0 +1,247 @@ + + + + + diff --git a/src/views/mapPage/realTimeMap/editMap.vue b/src/views/mapPage/realTimeMap/editMap.vue index d177e28e..446c5875 100644 --- a/src/views/mapPage/realTimeMap/editMap.vue +++ b/src/views/mapPage/realTimeMap/editMap.vue @@ -46,15 +46,6 @@ 确认 - - - - - -
- 确认 -
-
- - - - - - +
@@ -416,6 +413,11 @@ ref="lineLibrarySettingDialogRef" :positionMapId="imgBgObj.positionMapId" /> + + diff --git a/src/views/mapPage/realTimeMap/editMap.vue b/src/views/mapPage/realTimeMap/editMap.vue index 446c5875..ab204f42 100644 --- a/src/views/mapPage/realTimeMap/editMap.vue +++ b/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" - @click="handleEditRoute(curve, index)" + stroke-width="5" + @click="handleChooseRoute(curve, index)" + @dblclick="handleEditRoute(curve, index)" /> @@ -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 = { - fontSize: `${form.fontSize}`, - fontFamily: `${form.fontFamily}`, - fontColor: `${form.fontColor}` - } + state.inputBoxStyle.fontSize = `${form.fontSize}` + state.inputBoxStyle.fontFamily = `${form.fontFamily}` + state.inputBoxStyle.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 { - itemAreaSettingDialogRef.value.open(binLocation) + return } + 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)' }) - //节点的保存 - await saveNodeList() - //路线的保存 - await saveMapRoute() - //关闭loading - loading.close() - message.success('保存成功') - await getAllNodeList() + try { + //节点的保存 + await saveNodeList() + //路线的保存 + await saveMapRoute() + //获取新的数据 + await getAllNodeList() + await getAllMapRoute() + //关闭loading + loading.close() + message.success('保存成功') + } catch (error) { + loading.close() + } } //节点的保存 const saveNodeList = async () => {