From ad59ca88b668c4efa057748b4767be30d6377764 Mon Sep 17 00:00:00 2001
From: yyy <2605810609@qq.com>
Date: Fri, 21 Feb 2025 17:36:25 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BC=96=E8=BE=91=E5=9C=B0=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.local                                    |  2 +-
 .../components-tool/editNodeProperties.vue    |  4 +-
 src/views/mapPage/realTimeMap/editMap.vue     | 47 +++++++-------
 src/views/mapPage/realTimeMap/test.vue        | 61 ++++++++++++-------
 4 files changed, 64 insertions(+), 50 deletions(-)

diff --git a/.env.local b/.env.local
index f0650411..c22b406f 100644
--- a/.env.local
+++ b/.env.local
@@ -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 服务
diff --git a/src/views/mapPage/realTimeMap/components-tool/editNodeProperties.vue b/src/views/mapPage/realTimeMap/components-tool/editNodeProperties.vue
index c99936d2..16d96d21 100644
--- a/src/views/mapPage/realTimeMap/components-tool/editNodeProperties.vue
+++ b/src/views/mapPage/realTimeMap/components-tool/editNodeProperties.vue
@@ -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 {
diff --git a/src/views/mapPage/realTimeMap/editMap.vue b/src/views/mapPage/realTimeMap/editMap.vue
index ce1f501f..538bd3b1 100644
--- a/src/views/mapPage/realTimeMap/editMap.vue
+++ b/src/views/mapPage/realTimeMap/editMap.vue
@@ -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
diff --git a/src/views/mapPage/realTimeMap/test.vue b/src/views/mapPage/realTimeMap/test.vue
index 04f44d6c..3b3651d0 100644
--- a/src/views/mapPage/realTimeMap/test.vue
+++ b/src/views/mapPage/realTimeMap/test.vue
@@ -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>