编辑路线
This commit is contained in:
yyy
parent
899c04371c
commit
06ede04e13
@ -1,189 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- SVG 画布 -->
|
||||
<svg
|
||||
ref="svgRef"
|
||||
width="500"
|
||||
height="300"
|
||||
@mousedown="handleMouseDown"
|
||||
@mousemove="handleMouseMove"
|
||||
@mouseup="handleMouseUp"
|
||||
>
|
||||
<!-- 绘制所有曲线 -->
|
||||
<path
|
||||
v-for="(curve, index) in curveList"
|
||||
:key="index"
|
||||
:d="getCurvePath(curve)"
|
||||
stroke="#000"
|
||||
fill="none"
|
||||
stroke-width="2"
|
||||
:class="{ selected: selectedCurve === curve }"
|
||||
@click="svgClick(curve)"
|
||||
/>
|
||||
<!-- 绘制控制点和连线 -->
|
||||
<line
|
||||
v-if="selectedCurve"
|
||||
:x1="selectedCurve.start.x"
|
||||
:y1="selectedCurve.start.y"
|
||||
:x2="selectedCurve.control1.x"
|
||||
:y2="selectedCurve.control1.y"
|
||||
stroke="gray"
|
||||
stroke-dasharray="2"
|
||||
/>
|
||||
<line
|
||||
v-if="selectedCurve"
|
||||
:x1="selectedCurve.end.x"
|
||||
:y1="selectedCurve.end.y"
|
||||
:x2="selectedCurve.control2.x"
|
||||
:y2="selectedCurve.control2.y"
|
||||
stroke="gray"
|
||||
stroke-dasharray="2"
|
||||
/>
|
||||
<!-- 绘制起点、终点和控制点 -->
|
||||
<circle
|
||||
v-for="(curve, index) in curveList"
|
||||
:key="'start' + index"
|
||||
:cx="curve.start.x"
|
||||
:cy="curve.start.y"
|
||||
r="5"
|
||||
fill="red"
|
||||
@mousedown="startDrag($event, curve, 'start')"
|
||||
/>
|
||||
<circle
|
||||
v-for="(curve, index) in curveList"
|
||||
:key="'end' + index"
|
||||
:cx="curve.end.x"
|
||||
:cy="curve.end.y"
|
||||
r="5"
|
||||
fill="red"
|
||||
@mousedown="startDrag($event, curve, 'end')"
|
||||
/>
|
||||
<circle
|
||||
v-if="selectedCurve"
|
||||
:cx="selectedCurve.control1.x"
|
||||
:cy="selectedCurve.control1.y"
|
||||
r="5"
|
||||
fill="green"
|
||||
@mousedown="startDrag($event, selectedCurve, 'control1')"
|
||||
/>
|
||||
<circle
|
||||
v-if="selectedCurve"
|
||||
:cx="selectedCurve.control2.x"
|
||||
:cy="selectedCurve.control2.y"
|
||||
r="5"
|
||||
fill="green"
|
||||
@mousedown="startDrag($event, selectedCurve, 'control2')"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<!-- 显示控制点坐标 -->
|
||||
<div class="points" v-if="selectedCurve">
|
||||
<p>起点: ({{ selectedCurve.start.x }}, {{ selectedCurve.start.y }})</p>
|
||||
<p>控制点 1: ({{ selectedCurve.control1.x }}, {{ selectedCurve.control1.y }})</p>
|
||||
<p>控制点 2: ({{ selectedCurve.control2.x }}, {{ selectedCurve.control2.y }})</p>
|
||||
<p>终点: ({{ selectedCurve.end.x }}, {{ selectedCurve.end.y }})</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
mapRouteList: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
})
|
||||
|
||||
const svgRef = ref(null) // SVG 元素的引用
|
||||
|
||||
const curveList = computed(() => props.mapRouteList) // 存储所有曲线
|
||||
const selectedCurve = ref(null) // 当前选中的曲线
|
||||
const isDragging = ref(false) // 是否正在拖拽
|
||||
const dragTarget = ref(null) // 当前拖拽的目标（起点、终点、控制点）
|
||||
|
||||
// 获取鼠标位置
|
||||
const getMousePos = (event) => {
|
||||
const rect = svgRef.value.getBoundingClientRect()
|
||||
return {
|
||||
x: event.clientX - rect.left,
|
||||
y: event.clientY - rect.top
|
||||
}
|
||||
}
|
||||
|
||||
// 开始拖拽
|
||||
const startDrag = (event, curve, target) => {
|
||||
event.preventDefault()
|
||||
isDragging.value = true
|
||||
selectedCurve.value = curve
|
||||
dragTarget.value = target
|
||||
}
|
||||
|
||||
// 鼠标按下事件
|
||||
const handleMouseDown = (event) => {
|
||||
const mousePos = getMousePos(event)
|
||||
|
||||
// 如果没有选中任何点，则创建一条新的直线
|
||||
if (!isDragging.value && curveList.value.length === 0) {
|
||||
const newCurve = {
|
||||
start: mousePos,
|
||||
end: mousePos,
|
||||
control1: { x: mousePos.x + 50, y: mousePos.y - 50 },
|
||||
control2: { x: mousePos.x + 100, y: mousePos.y - 50 }
|
||||
}
|
||||
curveList.value.push(newCurve)
|
||||
selectedCurve.value = newCurve
|
||||
dragTarget.value = 'end'
|
||||
isDragging.value = true
|
||||
}
|
||||
}
|
||||
|
||||
// 鼠标移动事件
|
||||
const handleMouseMove = (event) => {
|
||||
if (!isDragging.value || !selectedCurve.value) return
|
||||
|
||||
const mousePos = getMousePos(event)
|
||||
|
||||
// 更新拖拽的目标点
|
||||
if (dragTarget.value === 'start') {
|
||||
selectedCurve.value.start = mousePos
|
||||
} else if (dragTarget.value === 'end') {
|
||||
selectedCurve.value.end = mousePos
|
||||
} else if (dragTarget.value === 'control1') {
|
||||
selectedCurve.value.control1 = mousePos
|
||||
} else if (dragTarget.value === 'control2') {
|
||||
selectedCurve.value.control2 = mousePos
|
||||
}
|
||||
}
|
||||
|
||||
// 鼠标松开事件
|
||||
const handleMouseUp = () => {
|
||||
isDragging.value = false
|
||||
dragTarget.value = null
|
||||
}
|
||||
|
||||
// 获取曲线的路径
|
||||
const getCurvePath = (curve) => {
|
||||
return `M ${curve.startPointX} ${curve.startPointY} C ${curve.beginControlX} ${curve.beginControlX}, ${curve.control2.x} ${curve.control2.y}, ${curve.endPointX} ${curve.endPointY}`
|
||||
}
|
||||
const svgClick = (item) => {
|
||||
console.log(item)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
svg {
|
||||
border: 1px solid #000;
|
||||
cursor: crosshair;
|
||||
}
|
||||
|
||||
path.selected {
|
||||
stroke: blue;
|
||||
}
|
||||
|
||||
.points {
|
||||
margin-top: 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,247 @@
|
||||
<template>
|
||||
<!-- 新增设备 -->
|
||||
<Dialog v-model="dialogFormVisible" title="编辑路线" width="750" class="map-edit-route-dialog">
|
||||
<el-form :model="form" label-width="120" ref="ruleFormRef">
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="开始点位x轴" prop="startPointX" required>
|
||||
<el-input v-model="form.startPointX" placeholder="请输入开始点位x轴" type="number" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="开始点位y轴" prop="startPointY" required>
|
||||
<el-input v-model="form.startPointY" placeholder="请输入开始点位y轴" type="number" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="结束点位x轴" prop="endPointX" required>
|
||||
<el-input v-model="form.endPointX" placeholder="请输入结束点位x轴" type="number" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="结束点位y轴" prop="endPointY" required>
|
||||
<el-input v-model="form.endPointY" placeholder="请输入结束点位y轴" type="number" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="开始控制点x轴" prop="beginControlX" required>
|
||||
<el-input v-model="form.beginControlX" type="number" :disabled="true" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="开始控制点y轴" prop="beginControlY" required>
|
||||
<el-input v-model="form.beginControlY" type="number" :disabled="true" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="结束控制点x轴" prop="endControlX" required>
|
||||
<el-input v-model="form.endControlX" type="number" :disabled="true" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label=" 结束控制点y轴" prop="endControlY" required>
|
||||
<el-input v-model="form.endControlY" type="number" :disabled="true" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="行走方法" prop="method" required>
|
||||
<el-select v-model="form.method" placeholder="请选择行走方法" @change="methodChange">
|
||||
<el-option label="直线" :value="0" />
|
||||
<el-option label="曲线" :value="1" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="方向" prop="direction" required>
|
||||
<el-select v-model="form.direction" placeholder="请选择方向">
|
||||
<el-option label="单向" :value="1" />
|
||||
<el-option label="双向" :value="2" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="膨胀区域前" prop="expansionZoneFront" required>
|
||||
<div>
|
||||
<el-input-number
|
||||
v-model="form.expansionZoneFront"
|
||||
placeholder="请输入膨胀区域前"
|
||||
:precision="2"
|
||||
class="!w-170px"
|
||||
/>
|
||||
<span class="ml-3">米</span>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="膨胀区域后" prop="expansionZoneAfter" required>
|
||||
<div>
|
||||
<el-input-number
|
||||
v-model="form.expansionZoneAfter"
|
||||
placeholder="请输入膨胀区域后"
|
||||
:precision="2"
|
||||
class="!w-170px"
|
||||
/>
|
||||
<span class="ml-3">米</span>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="膨胀区域左" prop="expansionZoneLeft" required>
|
||||
<div>
|
||||
<el-input-number
|
||||
v-model="form.expansionZoneLeft"
|
||||
placeholder="请输入膨胀区域左"
|
||||
:precision="2"
|
||||
class="!w-170px"
|
||||
/>
|
||||
<span class="ml-3">米</span>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="膨胀区域右" prop="expansionZoneRight" required>
|
||||
<div>
|
||||
<el-input-number
|
||||
v-model="form.expansionZoneRight"
|
||||
placeholder="请输入膨胀区域右"
|
||||
:precision="2"
|
||||
class="!w-170px"
|
||||
/>
|
||||
<span class="ml-3">米</span>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="正向限速" prop="forwardSpeedLimit" required>
|
||||
<el-input
|
||||
v-model="form.forwardSpeedLimit"
|
||||
type="number"
|
||||
placeholder="请输入正向限速"
|
||||
/> </el-form-item
|
||||
></el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="反向限速" prop="reverseSpeedLimit" required>
|
||||
<el-input
|
||||
v-model="form.reverseSpeedLimit"
|
||||
type="number"
|
||||
placeholder="请输入反向限速"
|
||||
/> </el-form-item
|
||||
></el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="车头朝向" prop="toward" required>
|
||||
<el-select v-model="form.toward" placeholder="请选择车头朝向">
|
||||
<el-option label="正正" :value="0" />
|
||||
<el-option label="正反" :value="1" />
|
||||
<el-option label="反正" :value="2" />
|
||||
<el-option label="反反" :value="3" />
|
||||
</el-select> </el-form-item
|
||||
></el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="dialogFormVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="submitForm(ruleFormRef)"> 确定 </el-button>
|
||||
</div>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref } from 'vue'
|
||||
import * as MapApi from '@/api/map/map'
|
||||
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
|
||||
|
||||
const message = useMessage() // 消息弹窗
|
||||
const props = defineProps({
|
||||
positionMapId: {
|
||||
type: String,
|
||||
default: () => ''
|
||||
}
|
||||
})
|
||||
|
||||
const ruleFormRef = ref()
|
||||
const dialogFormVisible = ref(false) //列表的
|
||||
|
||||
const rules = reactive({
|
||||
skuInfo: [{ required: true, message: '请输入物料区域名称', trigger: 'blur' }],
|
||||
areaName: [{ required: true, message: '请输入物料名称', trigger: 'blur' }]
|
||||
})
|
||||
|
||||
//新增
|
||||
const form = ref({
|
||||
positionMapId: '',
|
||||
startPointX: '', // 开始点位x轴
|
||||
startPointY: '', // 开始点位y轴
|
||||
endPointX: '', // 结束点位x轴
|
||||
endPointY: '', // 结束点位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, // 反向限速
|
||||
toward: 0 //车头朝向 0:正正 1:正反 2:反正 3:反反
|
||||
})
|
||||
|
||||
const open = (item) => {
|
||||
dialogFormVisible.value = true
|
||||
form.value = item
|
||||
}
|
||||
|
||||
const emit = defineEmits(['editMapRouteDialogSubmit'])
|
||||
const submitForm = async (formEl) => {
|
||||
if (!formEl) return
|
||||
await formEl.validate(async (valid, fields) => {
|
||||
if (valid) {
|
||||
emit('editMapRouteDialogSubmit', form.value)
|
||||
dialogFormVisible.value = false
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const methodChange = (e) => {
|
||||
if (e === 0) {
|
||||
form.value.beginControlX = 0
|
||||
form.value.beginControlY = 0
|
||||
form.value.endControlX = 0
|
||||
form.value.endControlY = 0
|
||||
} else {
|
||||
form.value.beginControlX = form.value.startPointX + 50 //开始控制点x轴
|
||||
form.value.beginControlY = form.value.startPointY + 50 //开始控制点y轴
|
||||
form.value.endControlX = form.value.endPointX - 50 //结束控制点x轴
|
||||
form.value.endControlY = form.value.endPointY - 50 //结束控制点y轴
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.map-edit-route-dialog {
|
||||
padding: 0px;
|
||||
|
||||
.el-dialog__footer {
|
||||
padding: 0px 20px 20px 0;
|
||||
border-top: none !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -46,15 +46,6 @@
|
||||
<el-button size="small" color="#00329F" @click="rotationFormSubmit">确认</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
<!-- 字体 -->
|
||||
<el-form :model="state.rotationForm" v-if="item.switchType === 'text'">
|
||||
<el-form-item label="角度">
|
||||
<el-input v-model="state.rotationForm.angle" placeholder="请输入" />
|
||||
</el-form-item>
|
||||
<div style="text-align: right">
|
||||
<el-button size="small" color="#00329F" @click="rotationFormSubmit">确认</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</el-popover>
|
||||
|
||||
<div
|
||||
@ -251,56 +242,62 @@
|
||||
:height="imgBgObj.height"
|
||||
style="position: absolute; top: 0; left: 0; z-index: 9"
|
||||
>
|
||||
<path
|
||||
v-for="(curve, index) in state.mapRouteList"
|
||||
:key="index"
|
||||
:d="getCurvePath(curve)"
|
||||
:stroke="curve.isSelected ? '#f48924' : '#00329F'"
|
||||
stroke-width="3"
|
||||
fill="none"
|
||||
@click="handleEditRoute(curve, index)"
|
||||
/>
|
||||
<line
|
||||
v-for="(curve, index) in state.mapRouteList"
|
||||
:key="'start-' + index"
|
||||
:x1="curve.startPointX"
|
||||
:y1="curve.startPointY"
|
||||
:x2="curve.beginControlX"
|
||||
:y2="curve.beginControlY"
|
||||
:stroke="curve.isSelected ? '#f48924' : '#00329F'"
|
||||
stroke-dasharray="4"
|
||||
stroke-width="2"
|
||||
/>
|
||||
<!-- 第二条控制线 -->
|
||||
<line
|
||||
v-for="(curve, index) in state.mapRouteList"
|
||||
:key="'end-' + index"
|
||||
:x1="curve.endPointX"
|
||||
:y1="curve.endPointY"
|
||||
:x2="curve.endControlX"
|
||||
:y2="curve.endControlY"
|
||||
:stroke="curve.isSelected ? '#f48924' : '#00329F'"
|
||||
stroke-dasharray="4"
|
||||
stroke-width="2"
|
||||
/>
|
||||
<circle
|
||||
v-for="(curve, index) in state.mapRouteList"
|
||||
:key="'start-' + index"
|
||||
:cx="curve.beginControlX"
|
||||
:cy="curve.beginControlY"
|
||||
r="5"
|
||||
:fill="curve.isSelected ? '#f48924' : '#00329F'"
|
||||
@mousedown="startDrag(curve, index, 'start')"
|
||||
/>
|
||||
<circle
|
||||
v-for="(curve, index) in state.mapRouteList"
|
||||
:key="'end-' + index"
|
||||
:cx="curve.endControlX"
|
||||
:cy="curve.endControlY"
|
||||
r="5"
|
||||
:fill="curve.isSelected ? '#f48924' : '#00329F'"
|
||||
@mousedown="startDrag(curve, index, 'end')"
|
||||
/>
|
||||
<template v-for="(curve, index) in state.mapRouteList" :key="index">
|
||||
<!-- 直线 -->
|
||||
<line
|
||||
v-if="curve.method === 0"
|
||||
:x1="curve.startPointX"
|
||||
:y1="curve.startPointY"
|
||||
:x2="curve.endPointX"
|
||||
:y2="curve.endPointY"
|
||||
:stroke="curve.isSelected ? '#f48924' : '#00329F'"
|
||||
stroke-width="4"
|
||||
@click="handleEditRoute(curve, index)"
|
||||
/>
|
||||
|
||||
<template v-else>
|
||||
<path
|
||||
:d="getCurvePath(curve)"
|
||||
:stroke="curve.isSelected ? '#f48924' : '#00329F'"
|
||||
stroke-width="4"
|
||||
fill="none"
|
||||
@click="handleEditRoute(curve, index)"
|
||||
/>
|
||||
<line
|
||||
:x1="curve.startPointX"
|
||||
:y1="curve.startPointY"
|
||||
:x2="curve.beginControlX"
|
||||
:y2="curve.beginControlY"
|
||||
:stroke="curve.isSelected ? '#f48924' : '#00329F'"
|
||||
stroke-dasharray="4"
|
||||
stroke-width="2"
|
||||
/>
|
||||
<!-- 第二条控制线 -->
|
||||
<line
|
||||
:x1="curve.endPointX"
|
||||
:y1="curve.endPointY"
|
||||
:x2="curve.endControlX"
|
||||
:y2="curve.endControlY"
|
||||
:stroke="curve.isSelected ? '#f48924' : '#00329F'"
|
||||
stroke-dasharray="4"
|
||||
stroke-width="2"
|
||||
/>
|
||||
<circle
|
||||
:cx="curve.beginControlX"
|
||||
:cy="curve.beginControlY"
|
||||
r="5"
|
||||
:fill="curve.isSelected ? '#f48924' : '#00329F'"
|
||||
@mousedown="startDrag(curve, index, 'start')"
|
||||
/>
|
||||
<circle
|
||||
:cx="curve.endControlX"
|
||||
:cy="curve.endControlY"
|
||||
r="5"
|
||||
:fill="curve.isSelected ? '#f48924' : '#00329F'"
|
||||
@mousedown="startDrag(curve, index, 'end')"
|
||||
/>
|
||||
</template>
|
||||
</template>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
@ -416,6 +413,11 @@
|
||||
ref="lineLibrarySettingDialogRef"
|
||||
:positionMapId="imgBgObj.positionMapId"
|
||||
/>
|
||||
<!-- 编辑地图路线 -->
|
||||
<editMapRouteDialog
|
||||
ref="editMapRouteDialogRef"
|
||||
@editMapRouteDialogSubmit="editMapRouteDialogSubmit"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
@ -438,6 +440,7 @@ const lineLibrarySettingDialogRef = ref() //线库设置
|
||||
const itemAreaSettingDialogRef = ref() //物料区域设置
|
||||
const equipmentToolDialogRef = ref() //设备弹窗
|
||||
const textFormToolDialogRef = ref() //文字输入弹窗
|
||||
const editMapRouteDialogRef = ref() //编辑地图路线的弹窗
|
||||
const mapBackgroundRef = ref()
|
||||
const inputBoxRef = ref() //文字输入框
|
||||
|
||||
@ -1154,10 +1157,10 @@ 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, //结束点
|
||||
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轴
|
||||
beginControlX: 0, //开始控制点x轴
|
||||
beginControlY: 0, //开始控制点y轴
|
||||
endControlX: 0, //结束控制点x轴
|
||||
endControlY: 0, //结束控制点y轴
|
||||
expansionZoneFront: 0, //膨胀区域前
|
||||
expansionZoneAfter: 0, //膨胀区域后
|
||||
expansionZoneLeft: 0, // 膨胀区域左
|
||||
@ -1213,7 +1216,6 @@ const isStraightLine = (binLocation) => {
|
||||
//三阶贝塞尔曲线
|
||||
// 开始拖拽
|
||||
const startDrag = (item, index, type) => {
|
||||
handleEditRoute(item, index)
|
||||
state.currentDragTarget = { index, type }
|
||||
window.addEventListener('mousemove', handleDrag)
|
||||
window.addEventListener('mouseup', endDrag)
|
||||
@ -1249,8 +1251,13 @@ const handleEditRoute = (item, index) => {
|
||||
state.mapRouteList.forEach((curve, i) => {
|
||||
curve.isSelected = i === index
|
||||
})
|
||||
state.currentDragTarget.index = index
|
||||
state.selectedCurve = item
|
||||
console.log('选中路线', item)
|
||||
editMapRouteDialogRef.value.open(JSON.parse(JSON.stringify(item)))
|
||||
}
|
||||
//编辑路线成功
|
||||
const editMapRouteDialogSubmit = (item) => {
|
||||
state.mapRouteList[state.currentDragTarget.index] = item
|
||||
}
|
||||
|
||||
//测距相关
|
||||
|
||||
Loading…
Reference in New Issue
Block a user