编辑地图
This commit is contained in:
yyy
parent
a23543522b
commit
ad59ca88b6
@ -4,7 +4,7 @@ NODE_ENV=development
|
||||
VITE_DEV=true
|
||||
|
||||
# 请求路径
|
||||
VITE_BASE_URL='http://192.168.0.66:48080'
|
||||
VITE_BASE_URL='http://192.168.0.172:48080'
|
||||
# VITE_BASE_URL='http://192.168.0.189:48080'
|
||||
|
||||
# 文件上传类型：server - 后端上传， client - 前端直连上传，仅支持 S3 服务
|
||||
|
||||
@ -229,10 +229,10 @@ const open = (item, list) => {
|
||||
console.log(item)
|
||||
form.value = item
|
||||
form.value.layersNumber = item.dataList.length || ''
|
||||
form.value.deviceId = item.deviceId || item.dataObj.id || ''
|
||||
form.value.deviceId = item?.deviceId || item?.dataObj?.id || ''
|
||||
form.value.positionMapId = props.positionMapId
|
||||
equipmentList.value = list
|
||||
if (item.dataObj.deviceType) {
|
||||
if (item?.dataObj?.deviceType) {
|
||||
deviceInfo.value.deviceType = item.dataObj.deviceType || ''
|
||||
getDeviceList()
|
||||
} else {
|
||||
|
||||
@ -334,6 +334,7 @@
|
||||
:width="imgBgObj.width"
|
||||
:height="imgBgObj.height"
|
||||
style="position: absolute; top: 0; left: 0; z-index: 9"
|
||||
id="svgId"
|
||||
>
|
||||
<template v-for="(curve, index) in state.mapRouteList" :key="index">
|
||||
<!-- 直线 -->
|
||||
@ -379,6 +380,7 @@
|
||||
stroke-width="2"
|
||||
/>
|
||||
<circle
|
||||
id="startCircle"
|
||||
:cx="curve.beginControlX"
|
||||
:cy="curve.beginControlY"
|
||||
r="5"
|
||||
@ -386,6 +388,7 @@
|
||||
@mousedown="startDrag(curve, index, 'start')"
|
||||
/>
|
||||
<circle
|
||||
id="endCircle"
|
||||
:cx="curve.endControlX"
|
||||
:cy="curve.endControlY"
|
||||
r="5"
|
||||
@ -1484,11 +1487,16 @@ const startDrag = (item, index, type) => {
|
||||
}
|
||||
// 处理拖动事件
|
||||
const handleDrag = (event) => {
|
||||
const x = disposeEventPoints(event).x
|
||||
const y = disposeEventPoints(event).y
|
||||
let x = disposeEventPoints(event).x
|
||||
let y = disposeEventPoints(event).y
|
||||
|
||||
if (state.currentDragTarget.index !== null) {
|
||||
const curve = state.mapRouteList[state.currentDragTarget.index]
|
||||
|
||||
// 确保控制点不超出盒子范围
|
||||
x = Math.max(0, Math.min(x, imgBgObj.width))
|
||||
y = Math.max(0, Math.min(y, imgBgObj.height))
|
||||
|
||||
if (state.currentDragTarget.type === 'start') {
|
||||
curve.beginControlX = x
|
||||
curve.beginControlY = y
|
||||
@ -1499,27 +1507,16 @@ const handleDrag = (event) => {
|
||||
}
|
||||
}
|
||||
// 结束拖动
|
||||
const endDrag = () => {
|
||||
let actualBeginControl = disposeEventPoint(
|
||||
state.mapRouteList[state.currentDragTarget.index].beginControlX,
|
||||
state.mapRouteList[state.currentDragTarget.index].beginControlY
|
||||
)
|
||||
let actualEndControl = disposeEventPoint(
|
||||
state.mapRouteList[state.currentDragTarget.index].endControlX,
|
||||
state.mapRouteList[state.currentDragTarget.index].endControlY
|
||||
)
|
||||
const endDrag = (event) => {
|
||||
const curve = state.mapRouteList[state.currentDragTarget.index]
|
||||
let actualBeginControl = disposeEventPoint(curve.beginControlX, curve.beginControlY)
|
||||
let actualEndControl = disposeEventPoint(curve.endControlX, curve.endControlY)
|
||||
|
||||
state.mapRouteList[state.currentDragTarget.index].actualBeginControlX =
|
||||
actualBeginControl.actualLocationX
|
||||
state.mapRouteList[state.currentDragTarget.index].actualBeginControlY =
|
||||
actualBeginControl.actualLocationY
|
||||
curve.actualBeginControlX = actualBeginControl.actualLocationX
|
||||
curve.actualBeginControlY = actualBeginControl.actualLocationY
|
||||
|
||||
state.mapRouteList[state.currentDragTarget.index].actualEndControlX =
|
||||
actualEndControl.actualLocationX
|
||||
state.mapRouteList[state.currentDragTarget.index].actualEndControlY =
|
||||
actualEndControl.actualLocationY
|
||||
|
||||
console.log(state.mapRouteList[state.currentDragTarget.index])
|
||||
curve.actualEndControlX = actualEndControl.actualLocationX
|
||||
curve.actualEndControlY = actualEndControl.actualLocationY
|
||||
|
||||
state.currentDragTarget = { index: null, type: null }
|
||||
window.removeEventListener('mousemove', handleDrag)
|
||||
@ -1545,7 +1542,6 @@ const handleEditRoute = (item, index) => {
|
||||
}
|
||||
//单击 选中
|
||||
const handleChooseRoute = (item, index) => {
|
||||
console.log(item)
|
||||
state.mapRouteList.forEach((curve, i) => {
|
||||
curve.isSelected = i === index
|
||||
})
|
||||
@ -1699,6 +1695,8 @@ const getAllNodeList = async () => {
|
||||
positionMapId: imgBgObj.positionMapId
|
||||
})
|
||||
allMapPointInfo.value = []
|
||||
allHistoryList.value = []
|
||||
currentIndex.value = 0
|
||||
list.forEach((item) => {
|
||||
item.layerSelectionShow = true //用于图层
|
||||
item.locationX = Number(item.locationX)
|
||||
@ -1816,7 +1814,6 @@ const saveNodeList = async () => {
|
||||
const saveMapRoute = async () => {
|
||||
await MapApi.createOrEditOrDelPositionMapLine(imgBgObj.positionMapId, state.mapRouteList)
|
||||
}
|
||||
|
||||
//筛选图层
|
||||
const layerSelectionSuccess = (typeList) => {
|
||||
allHistoryList.value[currentIndex.value].forEach((item) => {
|
||||
@ -1828,13 +1825,13 @@ const layerSelectionSuccess = (typeList) => {
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
//处理数据
|
||||
const disposeEventPoints = (event) => {
|
||||
const rect = mapBackgroundRef.value.getBoundingClientRect()
|
||||
const scrollLeft = mapBackgroundRef.value.scrollLeft // 水平滚动条偏移量
|
||||
const scrollTop = mapBackgroundRef.value.scrollTop // 垂直滚动条偏移量
|
||||
const devicePixelRatio = window.devicePixelRatio || 1
|
||||
// const devicePixelRatio = window.devicePixelRatio || 1 //浏览器缩放
|
||||
const devicePixelRatio = 1
|
||||
|
||||
// 计算页面坐标（考虑设备像素比和滚动条偏移量）
|
||||
const x = (event.clientX - rect.left + scrollLeft) / state.imageChangeMultiple / devicePixelRatio
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div>
|
||||
<svg width="800" height="600">
|
||||
<div class="box">
|
||||
<svg :width="boxWidth" :height="boxHeight">
|
||||
<path
|
||||
v-for="(curve, index) in curves"
|
||||
:key="index"
|
||||
@ -13,8 +13,8 @@
|
||||
<circle
|
||||
v-for="(curve, index) in curves"
|
||||
:key="'start-' + index"
|
||||
:cx="curve.beginControlX"
|
||||
:cy="curve.beginControlY"
|
||||
:cx="curve.startControlX"
|
||||
:cy="curve.startControlY"
|
||||
r="5"
|
||||
fill="green"
|
||||
@mousedown="startDrag(index, 'start')"
|
||||
@ -35,28 +35,32 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
// 盒子的宽度和高度
|
||||
const boxWidth = ref(800)
|
||||
const boxHeight = ref(600)
|
||||
|
||||
// 初始点位数据
|
||||
const curves = ref([
|
||||
{
|
||||
startPointX: 100,
|
||||
startPointY: 100,
|
||||
endPointX: 300,
|
||||
endPointY: 100,
|
||||
beginControlX: 100,
|
||||
beginControlY: 100,
|
||||
startX: 100,
|
||||
startY: 100,
|
||||
endX: 300,
|
||||
endY: 100,
|
||||
startControlX: 100,
|
||||
startControlY: 100,
|
||||
endControlX: 300,
|
||||
endControlY: 100,
|
||||
isSelected: false
|
||||
},
|
||||
{
|
||||
startPointX: 200,
|
||||
startPointY: 200,
|
||||
endPointX: 400,
|
||||
endPointY: 200,
|
||||
beginControlX: 200,
|
||||
beginControlY: 200,
|
||||
startX: 200,
|
||||
startY: 200,
|
||||
endX: 400,
|
||||
endY: 200,
|
||||
startControlX: 200,
|
||||
startControlY: 200,
|
||||
endControlX: 400,
|
||||
endControlY: 200,
|
||||
endControlY: 400,
|
||||
isSelected: false
|
||||
}
|
||||
])
|
||||
@ -69,7 +73,7 @@ const dragging = ref({
|
||||
|
||||
// 获取曲线的路径字符串
|
||||
const getCurvePath = (curve) => {
|
||||
return `M${curve.startPointX},${curve.startPointY} C${curve.beginControlX},${curve.beginControlY} ${curve.endControlX},${curve.endControlY} ${curve.endPointX},${curve.endPointY}`
|
||||
return `M${curve.startX},${curve.startY} C${curve.startControlX},${curve.startControlY} ${curve.endControlX},${curve.endControlY} ${curve.endX},${curve.endY}`
|
||||
}
|
||||
|
||||
// 选中曲线
|
||||
@ -91,12 +95,19 @@ const startDrag = (index, type) => {
|
||||
const handleDrag = (event) => {
|
||||
if (dragging.value.index !== null) {
|
||||
const curve = curves.value[dragging.value.index]
|
||||
let newX = event.offsetX
|
||||
let newY = event.offsetY
|
||||
|
||||
// 确保控制点不超出盒子范围
|
||||
newX = Math.max(0, Math.min(newX, boxWidth.value))
|
||||
newY = Math.max(0, Math.min(newY, boxHeight.value))
|
||||
|
||||
if (dragging.value.type === 'start') {
|
||||
curve.beginControlX = event.offsetX
|
||||
curve.beginControlY = event.offsetY
|
||||
curve.startControlX = newX
|
||||
curve.startControlY = newY
|
||||
} else {
|
||||
curve.endControlX = event.offsetX
|
||||
curve.endControlY = event.offsetY
|
||||
curve.endControlX = newX
|
||||
curve.endControlY = newY
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -108,3 +119,9 @@ const endDrag = () => {
|
||||
window.removeEventListener('mouseup', endDrag)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.box {
|
||||
border: 1px solid black;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user