路径编辑
This commit is contained in:
yyy
parent
06ede04e13
commit
8a7518777a
@ -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 方法，用于打开弹窗
|
||||
</script>
|
||||
|
||||
|
||||
@ -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)"
|
||||
/>
|
||||
|
||||
<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 = {
|
||||
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 () => {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user