ak/zn-admin-vue3-wcs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化标记功能，将窗口自动滚动到以标记成功的点为中心

Browse Source
This commit is contained in:
yyy 2025-07-15 11:50:19 +08:00
parent b5785e88e1
commit 6dcda7cdd4
1 changed files with 25 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/views/mapPage/realTimeMap/editMap.vue
View File

@ -2784,8 +2784,6 @@ const markFormSubmit = async () => {
message.warning('请选择车辆')
return
}
// 格式是 '{"area":"E区","batSoc":"80","floor":"3","robotNo":"100","x":"-1.720683217048645","y":"-14.308184623718262","yaw":"-3.0042707920074463"}'
let res = await MapApi.getAGVPointInformation(state.markForm.macAddress)
if (res) {
//点
@ -2828,7 +2826,10 @@ const markFormSubmit = async () => {
route.actualEndPointY = point.y
}
})
// 自动移动地图视图到标记点
scrollToPosition(pointPx.x, pointPx.y)
message.success('修改位置成功')
addEditHistory()
} else {
//新增一个节点
@ -2854,6 +2855,10 @@ const markFormSubmit = async () => {
dataObj: {}, //存 设备点 停车点 文字
locationYaw: point.yaw //弧度
})
// 自动移动地图视图到新添加的标记点
state.currentItemIndex = state.allMapPointInfo.length - 1
scrollToPosition(pointPx.x, pointPx.y)
message.success('标记成功')
addEditHistory()
}
@ -4675,28 +4680,39 @@ const toggleSelect = () => {
state.isSearchSelectVisible = !state.isSearchSelectVisible
state.searchSelectedOption = ''
}
const searchSelectChange = (sortNum) => {
const currentIndex = state.allMapPointInfo.findIndex((item) => item.sortNum === sortNum)
const currentItem = state.allMapPointInfo.find((item) => item.sortNum === sortNum)
// 计算并限制边界 滚动到指定位置
// 公共函数：滚动到指定位置
const scrollToPosition = (x, y) => {
const rect = mapContainerRef.value
if (!rect) return
// 计算并限制边界，滚动到指定位置
const maxScrollLeft = rect.scrollWidth - rect.clientWidth
const maxScrollTop = rect.scrollHeight - rect.clientHeight
const scrollToX = Math.max(
0,
Math.min(currentItem.locationX - rect.clientWidth / 2, maxScrollLeft)
Math.min(x * state.imageChangeMultiple - rect.clientWidth / 2, maxScrollLeft)
)
const scrollToY = Math.max(
0,
Math.min(currentItem.locationY - rect.clientHeight / 2, maxScrollTop)
Math.min(y * state.imageChangeMultiple - rect.clientHeight / 2, maxScrollTop)
)
// 平滑滚动到指定点
rect.scrollTo({
left: scrollToX,
top: scrollToY,
behavior: 'smooth'
})
}
const searchSelectChange = (sortNum) => {
const currentIndex = state.allMapPointInfo.findIndex((item) => item.sortNum === sortNum)
const currentItem = state.allMapPointInfo.find((item) => item.sortNum === sortNum)
// 使用公共滚动函数
if (currentItem) {
scrollToPosition(currentItem.locationX, currentItem.locationY)
}
state.currentItemIndex = currentIndex
}