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-02-21 17:36:25 +08:00
parent a23543522b
commit ad59ca88b6
4 changed files with 64 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.env.local
View File

@ -4,7 +4,7 @@ NODE_ENV=development
VITE_DEV=true 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' # VITE_BASE_URL='http://192.168.0.189:48080'
# 文件上传类型：server - 后端上传， client - 前端直连上传，仅支持 S3 服务 # 文件上传类型：server - 后端上传， client - 前端直连上传，仅支持 S3 服务

4
src/views/mapPage/realTimeMap/components-tool/editNodeProperties.vue
View File

@ -229,10 +229,10 @@ const open = (item, list) => {
console.log(item) console.log(item)
form.value = item form.value = item
form.value.layersNumber = item.dataList.length || '' 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 form.value.positionMapId = props.positionMapId
equipmentList.value = list equipmentList.value = list
if (item.dataObj.deviceType) { if (item?.dataObj?.deviceType) {
deviceInfo.value.deviceType = item.dataObj.deviceType || '' deviceInfo.value.deviceType = item.dataObj.deviceType || ''
getDeviceList() getDeviceList()
} else { } else {

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

@ -334,6 +334,7 @@
:width="imgBgObj.width" :width="imgBgObj.width"
:height="imgBgObj.height" :height="imgBgObj.height"
style="position: absolute; top: 0; left: 0; z-index: 9" style="position: absolute; top: 0; left: 0; z-index: 9"
id="svgId"
> >
<template v-for="(curve, index) in state.mapRouteList" :key="index"> <template v-for="(curve, index) in state.mapRouteList" :key="index">
<!-- 直线 --> <!-- 直线 -->
@ -379,6 +380,7 @@
stroke-width="2" stroke-width="2"
/> />
<circle <circle
id="startCircle"
:cx="curve.beginControlX" :cx="curve.beginControlX"
:cy="curve.beginControlY" :cy="curve.beginControlY"
r="5" r="5"
@ -386,6 +388,7 @@
@mousedown="startDrag(curve, index, 'start')" @mousedown="startDrag(curve, index, 'start')"
/> />
<circle <circle
id="endCircle"
:cx="curve.endControlX" :cx="curve.endControlX"
:cy="curve.endControlY" :cy="curve.endControlY"
r="5" r="5"
@ -1484,11 +1487,16 @@ const startDrag = (item, index, type) => {
} }
// 处理拖动事件 // 处理拖动事件
const handleDrag = (event) => { const handleDrag = (event) => {
const x = disposeEventPoints(event).x let x = disposeEventPoints(event).x
const y = disposeEventPoints(event).y let y = disposeEventPoints(event).y
if (state.currentDragTarget.index !== null) { if (state.currentDragTarget.index !== null) {
const curve = state.mapRouteList[state.currentDragTarget.index] 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') { if (state.currentDragTarget.type === 'start') {
curve.beginControlX = x curve.beginControlX = x
curve.beginControlY = y curve.beginControlY = y
@ -1499,27 +1507,16 @@ const handleDrag = (event) => {
} }
} }
// 结束拖动 // 结束拖动
const endDrag = () => { const endDrag = (event) => {
let actualBeginControl = disposeEventPoint( const curve = state.mapRouteList[state.currentDragTarget.index]
state.mapRouteList[state.currentDragTarget.index].beginControlX, let actualBeginControl = disposeEventPoint(curve.beginControlX, curve.beginControlY)
state.mapRouteList[state.currentDragTarget.index].beginControlY let actualEndControl = disposeEventPoint(curve.endControlX, curve.endControlY)
)
let actualEndControl = disposeEventPoint(
state.mapRouteList[state.currentDragTarget.index].endControlX,
state.mapRouteList[state.currentDragTarget.index].endControlY
)
state.mapRouteList[state.currentDragTarget.index].actualBeginControlX = curve.actualBeginControlX = actualBeginControl.actualLocationX
actualBeginControl.actualLocationX curve.actualBeginControlY = actualBeginControl.actualLocationY
state.mapRouteList[state.currentDragTarget.index].actualBeginControlY =
actualBeginControl.actualLocationY
state.mapRouteList[state.currentDragTarget.index].actualEndControlX = curve.actualEndControlX = actualEndControl.actualLocationX
actualEndControl.actualLocationX curve.actualEndControlY = actualEndControl.actualLocationY
state.mapRouteList[state.currentDragTarget.index].actualEndControlY =
actualEndControl.actualLocationY
console.log(state.mapRouteList[state.currentDragTarget.index])
state.currentDragTarget = { index: null, type: null } state.currentDragTarget = { index: null, type: null }
window.removeEventListener('mousemove', handleDrag) window.removeEventListener('mousemove', handleDrag)
@ -1545,7 +1542,6 @@ const handleEditRoute = (item, index) => {
} }
//单击 选中 //单击 选中
const handleChooseRoute = (item, index) => { const handleChooseRoute = (item, index) => {
console.log(item)
state.mapRouteList.forEach((curve, i) => { state.mapRouteList.forEach((curve, i) => {
curve.isSelected = i === index curve.isSelected = i === index
}) })
@ -1699,6 +1695,8 @@ const getAllNodeList = async () => {
positionMapId: imgBgObj.positionMapId positionMapId: imgBgObj.positionMapId
}) })
allMapPointInfo.value = [] allMapPointInfo.value = []
allHistoryList.value = []
currentIndex.value = 0
list.forEach((item) => { list.forEach((item) => {
item.layerSelectionShow = true //用于图层 item.layerSelectionShow = true //用于图层
item.locationX = Number(item.locationX) item.locationX = Number(item.locationX)
@ -1816,7 +1814,6 @@ const saveNodeList = async () => {
const saveMapRoute = async () => { const saveMapRoute = async () => {
await MapApi.createOrEditOrDelPositionMapLine(imgBgObj.positionMapId, state.mapRouteList) await MapApi.createOrEditOrDelPositionMapLine(imgBgObj.positionMapId, state.mapRouteList)
} }
//筛选图层 //筛选图层
const layerSelectionSuccess = (typeList) => { const layerSelectionSuccess = (typeList) => {
allHistoryList.value[currentIndex.value].forEach((item) => { allHistoryList.value[currentIndex.value].forEach((item) => {
@ -1828,13 +1825,13 @@ const layerSelectionSuccess = (typeList) => {
} }
}) })
} }
//处理数据 //处理数据
const disposeEventPoints = (event) => { const disposeEventPoints = (event) => {
const rect = mapBackgroundRef.value.getBoundingClientRect() const rect = mapBackgroundRef.value.getBoundingClientRect()
const scrollLeft = mapBackgroundRef.value.scrollLeft // 水平滚动条偏移量 const scrollLeft = mapBackgroundRef.value.scrollLeft // 水平滚动条偏移量
const scrollTop = mapBackgroundRef.value.scrollTop // 垂直滚动条偏移量 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 const x = (event.clientX - rect.left + scrollLeft) / state.imageChangeMultiple / devicePixelRatio

61
src/views/mapPage/realTimeMap/test.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div> <div class="box">
<svg width="800" height="600"> <svg :width="boxWidth" :height="boxHeight">
<path <path
v-for="(curve, index) in curves" v-for="(curve, index) in curves"
:key="index" :key="index"
@ -13,8 +13,8 @@
<circle <circle
v-for="(curve, index) in curves" v-for="(curve, index) in curves"
:key="'start-' + index" :key="'start-' + index"
:cx="curve.beginControlX" :cx="curve.startControlX"
:cy="curve.beginControlY" :cy="curve.startControlY"
r="5" r="5"
fill="green" fill="green"
@mousedown="startDrag(index, 'start')" @mousedown="startDrag(index, 'start')"
@ -35,28 +35,32 @@
<script setup> <script setup>
import { ref } from 'vue' import { ref } from 'vue'
// 盒子的宽度和高度
const boxWidth = ref(800)
const boxHeight = ref(600)
// 初始点位数据 // 初始点位数据
const curves = ref([ const curves = ref([
{ {
startPointX: 100, startX: 100,
startPointY: 100, startY: 100,
endPointX: 300, endX: 300,
endPointY: 100, endY: 100,
beginControlX: 100, startControlX: 100,
beginControlY: 100, startControlY: 100,
endControlX: 300, endControlX: 300,
endControlY: 100, endControlY: 100,
isSelected: false isSelected: false
}, },
{ {
startPointX: 200, startX: 200,
startPointY: 200, startY: 200,
endPointX: 400, endX: 400,
endPointY: 200, endY: 200,
beginControlX: 200, startControlX: 200,
beginControlY: 200, startControlY: 200,
endControlX: 400, endControlX: 400,
endControlY: 200, endControlY: 400,
isSelected: false isSelected: false
} }
]) ])
@ -69,7 +73,7 @@ const dragging = ref({
// 获取曲线的路径字符串 // 获取曲线的路径字符串
const getCurvePath = (curve) => { 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) => { const handleDrag = (event) => {
if (dragging.value.index !== null) { if (dragging.value.index !== null) {
const curve = curves.value[dragging.value.index] 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') { if (dragging.value.type === 'start') {
curve.beginControlX = event.offsetX curve.startControlX = newX
curve.beginControlY = event.offsetY curve.startControlY = newY
} else { } else {
curve.endControlX = event.offsetX curve.endControlX = newX
curve.endControlY = event.offsetY curve.endControlY = newY
} }
} }
} }
@ -108,3 +119,9 @@ const endDrag = () => {
window.removeEventListener('mouseup', endDrag) window.removeEventListener('mouseup', endDrag)
} }
</script> </script>
<style scoped>
.box {
border: 1px solid black;
}
</style>