补点操作的上传、撤销、重做功能

README.md

@@ -53,6 +53,4 @@ for 每个当前点
 )
 
 # todo
-save
-
-undo, redo
+save

src/App.vue

@@ -161,11 +161,13 @@
         </el-form-item>
         <div class="btn-group">
           <el-button
+            :disabled="rawWholeDataHistory.currentIdx <= 0"
             @click="onAddPointUndo"
           >
             undo
           </el-button>
           <el-button
+            :disabled="rawWholeDataHistory.currentIdx === rawWholeDataHistory.history.length - 1"
             @click="onAddPointRedo"
           >
             redo
@@ -177,6 +179,21 @@
             确定
           </el-button>
         </div>
+        <el-button
+          type="primary"
+          :disabled="rawWholeDataHistory.currentIdx < 0"
+          @click="uploadAddPointResult"
+        >
+          上传补点结果
+        </el-button>
+        <!-- <div>{{ rawWholeDataHistory.history.length }}</div>
+        <div>{{ rawWholeDataHistory.currentIdx }}</div>
+        <div
+          v-for="(item, idx) in rawWholeDataHistory.history"
+          :key="idx"
+        >
+          {{ item.length }}
+        </div> -->
       </el-form>
     </div>
   </div>
@@ -184,9 +201,10 @@
 
 <script>
 import * as d3 from "d3";
-import { getWholeData } from "./api.js";
-import { ElLoading } from 'element-plus'
+import { getWholeData, uploadWholeData } from "./api.js";
+import { ElLoading, ElMessage } from 'element-plus'
 import {getDistance2D, computePointDistanceAndRowSlope, getNeighbourLocations} from '@/utils.js'
+import deepClone from 'lodash/cloneDeep'
 
 // 视口尺寸
 let svgWidth = document.documentElement.clientWidth - 200
@@ -195,7 +213,6 @@ let svgRatio = svgWidth / svgHeight
 
 // 全体点位数据
 let rawWholeData = []
-let wholeDataForRender = []
 
 // 用户输入的起点终点
 let startPoint = null
@@ -228,7 +245,6 @@ function resetGlobalVars() {
 
   // 全体点位数据
   rawWholeData = []
-  wholeDataForRender = []
 
   // 由原始数据算出的几何信息
   pxPerUnitLength = 0 // 原始数据1单位长度对应的像素数
@@ -281,7 +297,11 @@ export default {
         isAddingPoint: false,
         connectionMaxHeightGap: 1,
         addPointHeight: -1.3,
-      }
+      },
+      rawWholeDataHistory: {
+        history: [],
+        currentIdx: -1,
+      },
     }
   },
   computed: {
@@ -400,8 +420,14 @@ export default {
       
 
       getWholeData(this.sceneNameOrUrl).then((res) => {
+        this.rawWholeDataHistory.history = []
+        this.rawWholeDataHistory.currentIdx = -1
+
         rawWholeData = res
         this.renderWholePoints()
+        
+        this.rawWholeDataHistory.history.push(deepClone(rawWholeData))
+        this.rawWholeDataHistory.currentIdx++
       }).finally(() => {
         this.loadingHandler.close()
       })
@@ -447,7 +473,7 @@ export default {
       })
 
       // 组合成最终数据用来渲染
-      wholeDataForRender = []
+      let wholeDataForRender = []
       for (let index = 0; index < rawWholeData.length; index++) {
         console.assert(rawWholeData[index].id === (index + 1), '数据点id和数据点在数组中的位置不相符！')
         wholeDataForRender.push([
@@ -690,10 +716,22 @@ export default {
       })
     },
     onAddPointUndo() {
-
+      if (this.rawWholeDataHistory.currentIdx > 0) {
+        this.rawWholeDataHistory.currentIdx--
+        rawWholeData = deepClone(this.rawWholeDataHistory.history[this.rawWholeDataHistory.currentIdx])
+        
+        gNode.selectAll('rect').remove()
+        this.renderWholePoints()
+      }
     },
     onAddPointRedo() {
-
+      if (this.rawWholeDataHistory.currentIdx < this.rawWholeDataHistory.history.length - 1) {
+        this.rawWholeDataHistory.currentIdx++
+        rawWholeData = deepClone(this.rawWholeDataHistory.history[this.rawWholeDataHistory.currentIdx])
+        
+        gNode.selectAll('rect').remove()
+        this.renderWholePoints()
+      }
     },
     onAddPoint() {
       // 解析svg的transform信息
@@ -778,6 +816,7 @@ export default {
         return
       }
       
+      // 开始补点
       let activePointIdx = 0
       let newPointId = rawWholeData[rawWholeData.length - 1].id
       // 位于框选区域内的所有点位构成稀疏图模型，用邻接表表示，依次处理其顶点表中各顶点。
@@ -934,8 +973,29 @@ export default {
         }
       }
 
+      // 渲染
       this.renderWholePoints()
+
+      // 存入历史记录
+      if (this.rawWholeDataHistory.currentIdx < this.rawWholeDataHistory.history.length - 1) {
+        this.rawWholeDataHistory.history = this.rawWholeDataHistory.history.slice(0, this.rawWholeDataHistory.currentIdx + 1)
+      }
+      this.rawWholeDataHistory.history.push(deepClone(rawWholeData))
+      this.rawWholeDataHistory.currentIdx++
     }, // end of method addPoint
+    uploadAddPointResult() {
+      uploadWholeData(this.sceneNameOrUrl, rawWholeData).then((res) => {
+        ElMessage({
+          message: res,
+          type: 'success',
+        })
+      }).catch((err) => {
+        ElMessage({
+          message: err,
+          type: 'error',
+        })
+      })
+    },
   },
 }
 </script>
@@ -981,7 +1041,7 @@ export default {
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  margin-bottom: 15px;
+  margin-bottom: 10px;
 }
 .map > .map-control-area > .panel > .btn {
   margin: 10px;
@@ -989,6 +1049,7 @@ export default {
 .map > .map-control-area > .panel {
   padding-left: 10px;
   padding-right: 10px;
+  padding-bottom: 10px;
 }
 .map > .map-control-area > .panel input{
   width: 80px;
@@ -996,6 +1057,8 @@ export default {
 .map > .map-control-area > .panel > .btn-group {
   display: flex;
   justify-content: space-between;
+}
+.map > .map-control-area > .add-point.panel > .btn-group {
   margin-bottom: 10px;
 }
 

src/api.js

@@ -17,14 +17,9 @@ switch (process.env.NODE_ENV) {
 }
 
 export function getWholeData(sceneNameOrUrl) {
-  // if (process.env.NODE_ENV === 'development') {
-  //   return Promise.resolve(mockData.data)
-  // }
-
   let url = sceneNameOrUrl.startsWith('http') ?
     sceneNameOrUrl :
     `${AJAX_ORIGIN}laser/route/${sceneNameOrUrl}/getRouteInfo`
-    // http://192.168.0.11:8080/laser/route/t-Y22JxCS7sP/getRouteInfo
   return axios
     .get(url)
     .then((res) => {
@@ -34,4 +29,20 @@ export function getWholeData(sceneNameOrUrl) {
         throw('getWholeData结果异常！')
       }
     })
+}
+
+export function uploadWholeData(sceneNameOrUrl, wholeData) {
+  let url = sceneNameOrUrl.startsWith('http') ?
+    sceneNameOrUrl :
+    `${AJAX_ORIGIN}laser/route/${sceneNameOrUrl}/editRouteInfo`
+  return axios
+    .post(url, {
+      list: wholeData,
+    }).then((res) => {
+      if (res?.data?.code === 200) {
+        return res?.data?.msg
+      } else {
+        throw(res?.data?.msg || '操作失败')
+      }
+    })
 }