From 8a7518777a4d5e9b337ce824a12ea9b823d3842c Mon Sep 17 00:00:00 2001 From: yyy <2605810609@qq.com> Date: Tue, 18 Feb 2025 17:32:30 +0800 Subject: [PATCH] =?UTF-8?q?=E8=B7=AF=E5=BE=84=E7=BC=96=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components-tool/editMapRouteDialog.vue | 48 +++++++- src/views/mapPage/realTimeMap/editMap.vue | 112 +++++++++++++----- 2 files changed, 130 insertions(+), 30 deletions(-) diff --git a/src/views/mapPage/realTimeMap/components-tool/editMapRouteDialog.vue b/src/views/mapPage/realTimeMap/components-tool/editMapRouteDialog.vue index 6163364f..64aafc67 100644 --- a/src/views/mapPage/realTimeMap/components-tool/editMapRouteDialog.vue +++ b/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: { - type: String, - default: () => '' + imgBgObj: { + type: Object, + 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 方法，用于打开弹窗 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 () => {