From 9e50046f723cc851ba97c2a4a8edabe85ec2030b Mon Sep 17 00:00:00 2001
From: yyy <2605810609@qq.com>
Date: Fri, 28 Feb 2025 10:19:15 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B5=8B=E5=9B=9E=E9=87=8D=E5=81=9Abug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/mapPage/realTimeMap/editMap.vue |  47 ++++---
 src/views/mapPage/realTimeMap/test.vue    | 161 +++++++++-------------
 2 files changed, 92 insertions(+), 116 deletions(-)

diff --git a/src/views/mapPage/realTimeMap/editMap.vue b/src/views/mapPage/realTimeMap/editMap.vue
index 7c5b4520..c854927b 100644
--- a/src/views/mapPage/realTimeMap/editMap.vue
+++ b/src/views/mapPage/realTimeMap/editMap.vue
@@ -770,32 +770,31 @@ const deactivatedHandle = () => {}
 //添加历史记录
 const addEditHistory = () => {
   //要判断是不是在最新的记录上修改 如果不是 要把currentIndex之后的记录都删掉 保持当前修改是最新的
-  if (state.currentIndex !== state.allHistoryList.length - 1) {
-    state.allHistoryList = state.allHistoryList.splice(0, state.currentIndex)
-    state.currentIndex = state.allHistoryList.length
-    state.allHistoryList.push({
-      allMapPointInfo: JSON.parse(JSON.stringify(state.allMapPointInfo)),
-      mapRouteList: JSON.parse(JSON.stringify(state.mapRouteList))
-    })
-  } else {
-    state.allHistoryList.push({
-      allMapPointInfo: JSON.parse(JSON.stringify(state.allMapPointInfo)),
-      mapRouteList: JSON.parse(JSON.stringify(state.mapRouteList))
-    })
-    state.currentIndex++
+  if (state.currentIndex < state.allHistoryList.length - 1) {
+    state.allHistoryList.splice(state.currentIndex + 1)
   }
+  state.allHistoryList.push({
+    allMapPointInfo: JSON.parse(JSON.stringify(state.allMapPointInfo)),
+    mapRouteList: JSON.parse(JSON.stringify(state.mapRouteList))
+  })
+  state.currentIndex = state.allHistoryList.length - 1
   interfaceRefreshed.value = true
 }
 
 //上一步
 const backPreviousStep = () => {
-  console.log(state.currentIndex)
-  console.log(state.allMapPointInfo)
-  console.log(state.allHistoryList)
   if (state.currentIndex > 0) {
     state.currentIndex--
-    state.allMapPointInfo = state.allHistoryList[state.currentIndex]?.allMapPointInfo || []
-    state.mapRouteList = state.allHistoryList[state.currentIndex]?.mapRouteList || []
+    state.allMapPointInfo.splice(
+      0,
+      state.allMapPointInfo.length,
+      ...JSON.parse(JSON.stringify(state.allHistoryList[state.currentIndex]?.allMapPointInfo))
+    )
+    state.mapRouteList.splice(
+      0,
+      state.mapRouteList.length,
+      ...JSON.parse(JSON.stringify(state.allHistoryList[state.currentIndex]?.mapRouteList))
+    )
   } else {
     message.warning('没了老铁')
   }
@@ -804,8 +803,16 @@ const backPreviousStep = () => {
 const backNextStep = () => {
   if (state.currentIndex < state.allHistoryList.length - 1) {
     state.currentIndex++
-    state.allMapPointInfo = state.allHistoryList[state.currentIndex]?.allMapPointInfo || []
-    state.mapRouteList = state.allHistoryList[state.currentIndex]?.mapRouteList || []
+    state.allMapPointInfo.splice(
+      0,
+      state.allMapPointInfo.length,
+      ...JSON.parse(JSON.stringify(state.allHistoryList[state.currentIndex]?.allMapPointInfo))
+    )
+    state.mapRouteList.splice(
+      0,
+      state.mapRouteList.length,
+      ...JSON.parse(JSON.stringify(state.allHistoryList[state.currentIndex]?.mapRouteList))
+    )
   } else {
     message.warning('没了老铁')
   }
diff --git a/src/views/mapPage/realTimeMap/test.vue b/src/views/mapPage/realTimeMap/test.vue
index 8c7afb5b..1aa08b6a 100644
--- a/src/views/mapPage/realTimeMap/test.vue
+++ b/src/views/mapPage/realTimeMap/test.vue
@@ -1,110 +1,79 @@
 <template>
   <div>
-    <!-- 选择单向或双向箭头 -->
-    <select v-model="isDoubleArrow">
-      <option value="false">单向箭头</option>
-      <option value="true">双向箭头</option>
-    </select>
-    <svg width="500" height="500">
-      <!-- 定义箭头样式 -->
-      <defs>
-        <!-- 正向箭头 -->
-        <marker
-          id="forward-arrow"
-          viewBox="0 0 10 10"
-          refX="10"
-          refY="5"
-          markerWidth="8"
-          markerHeight="8"
-          orient="auto"
-        >
-          <path d="M 0 0 L 10 5 L 0 10 z" fill="black" />
-        </marker>
-        <!-- 反向箭头 -->
-        <marker
-          id="backward-arrow"
-          viewBox="0 0 10 10"
-          refX="0"
-          refY="5"
-          markerWidth="8"
-          markerHeight="8"
-          orient="auto"
-        >
-          <path d="M 10 0 L 0 5 L 10 10 z" fill="black" />
-        </marker>
-      </defs>
-
-      <!-- 带有中间箭头的直线 -->
-      <line :x1="startX" :y1="startY" :x2="endX" :y2="endY" stroke="black" stroke-width="2" />
-      <path
-        :d="getLineMidArrowPath()"
-        stroke="none"
-        fill="black"
-        :marker-start="isDoubleArrow === 'true' ? 'url(#backward-arrow)' : ''"
-        :marker-end="isDoubleArrow === 'true' ? 'url(#forward-arrow)' : 'url(#forward-arrow)'"
-      />
-
-      <!-- 带有中间箭头的贝塞尔曲线 -->
-      <path :d="bezierPath" stroke="black" stroke-width="2" fill="none" />
-      <path
-        :d="getBezierMidArrowPath()"
-        stroke="none"
-        fill="black"
-        :marker-start="isDoubleArrow === 'true' ? 'url(#backward-arrow)' : ''"
-        :marker-end="isDoubleArrow === 'true' ? 'url(#forward-arrow)' : 'url(#forward-arrow)'"
-      />
-    </svg>
+    <ul>
+      <li v-for="(point, index) in points" :key="index">
+        点位 {{ index + 1 }}: ({{ point.x }}, {{ point.y }})
+        <button @click="movePoint(index)">移动</button>
+        <button @click="deletePoint(index)">删除</button>
+      </li>
+    </ul>
+    <button @click="addPoint">新增点位</button>
+    <button @click="undo" :disabled="historyIndex === 0">撤回</button>
+    <button @click="redo" :disabled="historyIndex === history.length - 1">重做</button>
   </div>
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { reactive, ref } from 'vue'
 
-// 直线的起点和终点坐标
-const startX = ref(50)
-const startY = ref(50)
-const endX = ref(200)
-const endY = ref(50)
+// 初始化点位数据
+const points = reactive([
+  { x: 10, y: 20 },
+  { x: 30, y: 40 }
+])
 
-// 贝塞尔曲线的路径
-const bezierPath = ref('M 50 200 C 100 250 200 250 200 200')
+// 操作历史记录
+const history = reactive([[...points]])
+// 历史记录指针
+const historyIndex = ref(0)
 
-// 控制箭头是单向还是双向
-const isDoubleArrow = ref('false')
-
-// 计算直线中间箭头的路径
-const getLineMidArrowPath = () => {
-  const midX = (startX.value + endX.value) / 2
-  const midY = (startY.value + endY.value) / 2
-
-  let dx = endX.value - startX.value
-  let dy = endY.value - startY.value
-  let length = Math.sqrt(dx * dx + dy * dy)
-
-  if (length === 0) {
-    return `M ${midX} ${midY} L ${midX} ${midY}`
-  }
-
-  const unitDx = dx / length
-  const unitDy = dy / length
-
-  const arrowLength = 1
-  const startXArrow = midX - unitDx * arrowLength
-  const startYArrow = midY - unitDy * arrowLength
-  const endXArrow = midX
-  const endYArrow = midY
-
-  return `M ${startXArrow} ${startYArrow} L ${endXArrow} ${endYArrow}`
+// 新增点位方法
+const addPoint = () => {
+  const newPoint = { x: Math.random() * 100, y: Math.random() * 100 }
+  points.push(newPoint)
+  updateHistory()
 }
 
-// 计算贝塞尔曲线中间箭头的路径
-const getBezierMidArrowPath = () => {
-  const path = document.createElementNS('http://www.w3.org/2000/svg', 'path')
-  path.setAttribute('d', bezierPath.value)
-  const length = path.getTotalLength()
-  const midPoint = path.getPointAtLength(length / 2)
-  const prevPoint = path.getPointAtLength(length / 2 - 1)
+// 移动点位方法
+const movePoint = (index) => {
+  points[index].x = Math.random() * 100
+  points[index].y = Math.random() * 100
+  updateHistory()
+}
 
-  return `M ${prevPoint.x} ${prevPoint.y} L ${midPoint.x} ${midPoint.y}`
+// 删除点位方法
+const deletePoint = (index) => {
+  points.splice(index, 1)
+  updateHistory()
+}
+
+// 更新历史记录
+const updateHistory = () => {
+  // 如果已经进行了撤回操作，移除撤回之后的历史记录
+  if (historyIndex.value < history.length - 1) {
+    history.splice(historyIndex.value + 1)
+  }
+  // 保存当前状态到历史记录
+  history.push([...points])
+  // 更新历史记录指针
+  historyIndex.value++
+}
+
+// 撤回操作
+const undo = () => {
+  if (historyIndex.value > 0) {
+    historyIndex.value--
+    // 恢复到上一个状态
+    points.splice(0, points.length, ...history[historyIndex.value])
+  }
+}
+
+// 重做操作
+const redo = () => {
+  if (historyIndex.value < history.length - 1) {
+    historyIndex.value++
+    // 恢复到下一个状态
+    points.splice(0, points.length, ...history[historyIndex.value])
+  }
 }
 </script>