数据重置功能、修改点位数据功能

README.md

@@ -59,6 +59,10 @@ history最大条数
 
 默认值去掉 check
 
-恢复初始按钮
+复原功能 check
 
-选中这个点了，可以修改他的weight和z值
+选中这个点了，可以修改他的weight和z值 check
+
+hover后显示周围点的位置和坐标
+
+y轴反转

src/App.vue

@@ -4,9 +4,9 @@
       class="form1"
       label-position="left"
     >
-      <el-form-item label="场景名或完整url">
+      <el-form-item label="场景码">
         <el-input
-          v-model="sceneNameOrUrl"
+          v-model="formData.sceneCode"
           autofocus
         />
       </el-form-item>
@@ -179,13 +179,21 @@
             确定
           </el-button>
         </div>
-        <el-button
-          type="primary"
-          :disabled="rawWholeDataHistory.currentIdx < 0"
-          @click="uploadAddPointResult"
-        >
-          上传补点结果
-        </el-button>
+        <div class="btn-group">
+          <el-button
+            :disabled="rawWholeDataHistory.currentIdx < 0"
+            @click="restoreRawWholeData"
+          >
+            复原
+          </el-button>
+          <el-button
+            type="primary"
+            :disabled="rawWholeDataHistory.currentIdx < 0"
+            @click="uploadAddPointResult"
+          >
+            保存
+          </el-button>
+        </div>
         <!-- <div>{{ rawWholeDataHistory.history.length }}</div>
         <div>{{ rawWholeDataHistory.currentIdx }}</div>
         <div
@@ -196,15 +204,23 @@
         </div> -->
       </el-form>
     </div>
+
+    <PointEditor
+      v-if="isEditingPoint"
+      :initial-point-data="pointDataForEditor"
+      @cancel="isEditingPoint = false"
+      @confirm="onPointEditorConfirm"
+    />
   </div>
 </template>
 
 <script>
 import * as d3 from "d3";
-import { getWholeData, uploadWholeData } from "./api.js";
+import { getWholeData, uploadWholeData, resetWholeData } from "./api.js";
 import { ElLoading, ElMessage } from 'element-plus'
 import {getDistance2D, computePointDistanceAndRowSlope, getNeighbourLocations} from '@/utils.js'
 import deepClone from 'lodash/cloneDeep'
+import PointEditor from '@/components/PointEditor.vue'
 
 // 视口尺寸
 let svgWidth = document.documentElement.clientWidth - 200
@@ -281,13 +297,16 @@ function brushed(e) {
 
 export default {
   name: 'App',
+  components: {
+    PointEditor,
+  },
   data() {
     return {
-      // sceneNameOrUrl: 'SS-t-XkquhxxurM',
-      sceneNameOrUrl: 'SS-t-NZUICC2fRLi',
       infoText: '',
       loadingHandler: null,
       formData: {
+        // sceneCode: 'SS-t-XkquhxxurM',
+        sceneCode: 'SS-t-NZUICC2fRLi',
         path1: process.env.NODE_ENV === 'production' ? '' : '1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,47,76,101,125',
         path2: '',
         startPoint: process.env.NODE_ENV === 'production' ? '' : '-38.5, 10.8',
@@ -302,6 +321,8 @@ export default {
         history: [],
         currentIdx: -1,
       },
+      isEditingPoint: false,
+      pointDataForEditor: {},
     }
   },
   computed: {
@@ -404,8 +425,8 @@ export default {
       }
     },
     getWholeData() {
-      if (!this.sceneNameOrUrl.trim()) {
-        window.alert('场景名或完整url必填！')
+      if (!this.formData.sceneCode.trim()) {
+        window.alert('场景码必填！')
         return
       }
       this.loadingHandler = ElLoading.service({
@@ -419,7 +440,7 @@ export default {
       gNode.selectAll('circle').remove()
       
 
-      getWholeData(this.sceneNameOrUrl).then((res) => {
+      getWholeData(this.formData.sceneCode).then((res) => {
         this.rawWholeDataHistory.history = []
         this.rawWholeDataHistory.currentIdx = -1
 
@@ -509,6 +530,14 @@ export default {
         })
         that.infoText = ''
       })
+
+      gNode.selectAll('rect').on('click', function(e, d) {
+        // console.log(d)
+        const id = d[d.length - 1]
+        console.log(rawWholeData[id - 1])
+        that.isEditingPoint = true
+        that.pointDataForEditor = deepClone(rawWholeData[id - 1])
+      })
     },
     renderPath() {
       if (!this.formData.path1.trim()) {
@@ -519,7 +548,6 @@ export default {
       gNode.selectAll('circle.path1').remove()
       gNode.selectAll('circle.path2').remove()
       
-      
       let rawPathDataIndex = this.inputPathStringToArray(this.formData.path1)
       if (rawPathDataIndex === -1) {
         return
@@ -993,8 +1021,46 @@ export default {
       this.rawWholeDataHistory.history.push(deepClone(rawWholeData))
       this.rawWholeDataHistory.currentIdx++
     }, // end of method addPoint
+    restoreRawWholeData() {
+      if (!this.formData.sceneCode.trim()) {
+        window.alert('场景码必填！')
+        return
+      }
+
+      this.loadingHandler = ElLoading.service({
+        lock: true,
+        text: 'Loading',
+        background: 'rgba(0, 0, 0, 0.7)',
+      })
+
+      resetWholeData(this.formData.sceneCode).then((res) => {
+        ElMessage({
+          message: res,
+          type: 'success',
+        })
+        this.getWholeData()
+      }).catch((err) => {
+        ElMessage({
+          message: err,
+          type: 'error',
+        })
+      }).finally(() => {
+        this.loadingHandler.close()
+      })
+    },
     uploadAddPointResult() {
-      uploadWholeData(this.sceneNameOrUrl, rawWholeData).then((res) => {
+      if (!this.formData.sceneCode.trim()) {
+        window.alert('场景码必填！')
+        return
+      }
+
+      this.loadingHandler = ElLoading.service({
+        lock: true,
+        text: 'Loading',
+        background: 'rgba(0, 0, 0, 0.7)',
+      })
+
+      uploadWholeData(this.formData.sceneCode, rawWholeData).then((res) => {
         ElMessage({
           message: res,
           type: 'success',
@@ -1004,8 +1070,30 @@ export default {
           message: err,
           type: 'error',
         })
+      }).finally(() => {
+        this.loadingHandler.close()
       })
     },
+    onPointEditorConfirm(data) {
+      rawWholeData[data.id - 1].x = data.x
+      rawWholeData[data.id - 1].y = data.y
+      rawWholeData[data.id - 1].z = data.z
+      rawWholeData[data.id - 1].weight = data.weight
+      rawWholeData[data.id - 1].ids = data.ids
+
+      // 渲染
+      gNode.selectAll('rect').remove()
+      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++
+
+      this.isEditingPoint = false
+    }
   },
 }
 </script>

src/api.js

@@ -16,10 +16,8 @@ switch (process.env.NODE_ENV) {
     break;
 }
 
-export function getWholeData(sceneNameOrUrl) {
-  let url = sceneNameOrUrl.startsWith('http') ?
-    sceneNameOrUrl :
-    `${AJAX_ORIGIN}laser/route/${sceneNameOrUrl}/getRouteInfo`
+export function getWholeData(sceneCode) {
+  let url = `${AJAX_ORIGIN}laser/route/${sceneCode}/getRouteInfo`
   return axios
     .get(url)
     .then((res) => {
@@ -31,10 +29,8 @@ export function getWholeData(sceneNameOrUrl) {
     })
 }
 
-export function uploadWholeData(sceneNameOrUrl, wholeData) {
-  let url = sceneNameOrUrl.startsWith('http') ?
-    sceneNameOrUrl :
-    `${AJAX_ORIGIN}laser/route/${sceneNameOrUrl}/editRouteInfo`
+export function uploadWholeData(sceneCode, wholeData) {
+  let url = `${AJAX_ORIGIN}laser/route/${sceneCode}/editRouteInfo`
   return axios
     .post(url, {
       list: wholeData,
@@ -45,4 +41,16 @@ export function uploadWholeData(sceneNameOrUrl, wholeData) {
         throw(res?.data?.msg || '操作失败')
       }
     })
+}
+
+export function resetWholeData(sceneCode) {
+  let url = `${AJAX_ORIGIN}laser/route/resetRouteInfo/${sceneCode}`
+  return axios
+    .get(url).then((res) => {
+      if (res?.data?.code === 200) {
+        return res?.data?.msg
+      } else {
+        throw(res?.data?.msg || '操作失败')
+      }
+    })
 }

src/components/PointEditor.vue

@@ -0,0 +1,139 @@
+<template>
+  <div class="point-editor">
+    <div class="wrapper">
+      <h3>编辑点位数据</h3>
+      <p>点位id: {{ initialPointData.id }}</p>
+      <el-form
+        class="form"
+      >
+        <el-form-item
+          :label="'x'"
+        >
+          <el-input
+            v-model="x"
+            type="number"
+            step="any"
+          />
+        </el-form-item>
+        <el-form-item
+          :label="`y`"
+        >
+          <el-input
+            v-model="y"
+            type="number"
+            step="any"
+          />
+        </el-form-item>
+        <el-form-item
+          :label="`z`"
+        >
+          <el-input
+            v-model="z"
+            type="number"
+            step="any"
+          />
+        </el-form-item>
+        <el-form-item
+          :label="`weight`"
+        >
+          <el-input
+            v-model="weight"
+            type="number"
+            step="any"
+          />
+        </el-form-item>
+        <el-form-item
+          :label="`ids`"
+        >
+          <el-input
+            v-model="ids"
+          />
+        </el-form-item>
+        <div class="btn-group">
+          <el-button
+            @click="$emit('cancel')"
+          >
+            取消
+          </el-button>
+          <el-button
+            type="primary"
+            :disabled="!isDataValid"
+            @click="onClickConfirm"
+          >
+            确定
+          </el-button>
+        </div>
+      </el-form>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    initialPointData: {
+      type: Object,
+    },
+  },
+  data() {
+    return {
+      x: this.initialPointData.x,
+      y: this.initialPointData.y,
+      z: this.initialPointData.z,
+      weight: this.initialPointData.weight,
+      ids: this.initialPointData.ids.join(','),
+    }
+  },
+  computed: {
+    isDataValid() {
+      if (this.x === '' || this.y === '' || this.z === '' || this.weight === '') {
+        return false
+      }
+      const idsArray = this.ids.split(',')
+      if (idsArray.length !== 8) {
+        return false
+      }
+      for (const neighboorId of idsArray) {
+        if (!Number.isSafeInteger(Number(neighboorId))) {
+          return false
+        }
+      }
+      return true
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    onClickConfirm() {
+      this.$emit('confirm', {
+        id: this.initialPointData.id,
+        x: this.x,
+        y: this.y,
+        z: this.z,
+        weight: this.weight,
+        ids: this.ids.split(',')
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.point-editor{
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(10px);
+}
+.point-editor .wrapper{
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  background-color: #fff;
+  padding: 30px;
+}
+</style>