航线信息-修复

aidex-controller/src/main/java/com/aidex/web/controller/system/SysRouteController.java

@@ -11,8 +11,6 @@ import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.validation.annotation.Validated;
 import org.springframework.web.bind.annotation.*;
 
-import java.util.concurrent.TimeUnit;
-
 /**
  * 航线保存查询-Redis
  * @author ChenSir
@@ -48,7 +46,19 @@ public class SysRouteController extends BaseController {
     }
 
 
+    /**
+     * 删除航线管理
+     */
+    @Log(title = "航线管理", businessType = BusinessType.DELETE)
+    @DeleteMapping("/delRouteLine")
+    public R remove() {
+        if (redisCache.hasKey(Constants.ROUTE_STORE_PREFIX)){
+            return R.status(redisCache.deleteKey(Constants.ROUTE_STORE_PREFIX));
+        } else {
+            return R.status(true);
+        }
 
+    }
 
 
 

aidex-ui/src/api/system/line.js

@@ -16,3 +16,11 @@ export function addRouteLine (data) {
     data: data
   })
 }
+
+// 删除航线
+export function delRouteLine () {
+  return request({
+    url: '/system/sysRouter/delRouteLine',
+    method: 'DELETE'
+  })
+}

aidex-ui/src/views/system/line/index.vue

@@ -17,28 +17,34 @@
       <div style="height: 80vh; width: 100%" id="container"></div>
       <div id="toolControl">
         <!--                <div class="toolItem" id="markers" title="开始" @click="beginMove"></div>-->
-        <div class="toolItem active" id="marker" title="点标记" @click="selectDragType('marker')"></div>
+<!--        <div class="toolItem active" id="marker" title="点标记" @click="selectDragType('marker')"></div>-->
         <div class="toolItem" id="polyline" title="折线" @click="selectDragType('polyline')"></div>
-        <div class="toolItem" id="polygon" title="多边形" @click="selectDragType('polygon')"></div>
+<!--        <div class="toolItem" id="polygon" title="多边形" @click="selectDragType('polygon')"></div>
         <div class="toolItem" id="circle" title="圆形" @click="selectDragType('circle')"></div>
         <div class="toolItem" id="rectangle" title="矩形" @click="selectDragType('rectangle')"></div>
-        <div class="toolItem" id="ellipse" title="椭圆" @click="selectDragType('ellipse')"></div>
+        <div class="toolItem" id="ellipse" title="椭圆" @click="selectDragType('ellipse')"></div>-->
       </div>
       <div class="control">
+        <button @click="changeDirection" class="beginMove"><a-icon type="swap" />方向转换</button>
+        <button @click="saveMapData" class="stopMove"><a-icon type="save" />保存</button>
+        <button @click="resetMapData" class="resumeMove"><a-icon type="radius-setting" />重置</button>
+      </div>
+<!--      <div class="control">
         <button @click="beginMove" class="beginMove" :disabled="moved">航线模拟</button>
         <button @click="stopMove" class="stopMove">终止模拟</button>
         <button @click="pauseMove" class="pauseMove">暂停模拟</button>
         <button @click="resumeMove" class="resumeMove">恢复模拟</button>
         <button @click="resetMap" class="resumeMove">重置</button>
-      </div>
+      </div>-->
+
     </a-card>
   </div>
 </template>
 
 <script>
 /* eslint-disable */
-import {  getAllSysWharf } from '@/api/system/sysWharf'
-import { getRouteLine, addRouteLine } from '@/api/system/line'
+import { delSysWharf, getAllSysWharf } from '@/api/system/sysWharf'
+import { getRouteLine, addRouteLine, delRouteLine } from '@/api/system/line'
 export default {
   name: 'RouterLine',
   data() {
@@ -50,12 +56,14 @@ export default {
       center: null,
       map: null,
       editor: null,
-      activeType: 'marker',
+      activeType: 'polyline',
       sysWharfList: [],
       stepArr: [],
       markerLayer: null,
       customPath:[],
-      moved: true
+      moved: true,
+      polyLine: null,
+      startAndEndMarkerLayer: null
     }
   },
   filters: {
@@ -73,6 +81,69 @@ export default {
   created() {
   },
   methods: {
+    saveMapData() {
+      if (this.customPath.length <=0) {
+        this.$message.error('当前未获取到航线信息！')
+        return
+      }
+      var _this = this
+      this.$confirm({
+        title: '是否保存航线信息?',
+        zIndex:1003,
+        onOk () {
+          _this.addLine()
+        },
+        onCancel () {
+          console.log('取消保存航线')
+        }
+      })
+    },
+    resetMapData() {
+      var that = this
+      this.$confirm({
+        zIndex:1002,
+        title: '确认重置航线数据?',
+        onOk () {
+          return delRouteLine()
+            .then(() => {
+              that.map = null
+              that.editor = null
+              that.activeType = 'polyline'
+              that.markerLayer = null
+              that.customPath = []
+              if (that.polyLine) {
+                that.polyLine.setMap(null)
+              }
+              if (that.startAndEndMarkerLayer) {
+                that.startAndEndMarkerLayer.setMap(null)
+              }
+              that.polyLine = null
+              that.startAndEndMarkerLayer = null
+              that.initMap()
+              that.$message.success(
+                '重置成功',
+                3
+              )
+            })
+        },
+        onCancel () {}
+      })
+    },
+    changeDirection() {
+      if (this.stepArr.length > 0){
+        this.stepArr = this.stepArr.reverse()
+      }
+      if (this.polyLine){
+        this.polyLine.setMap(null)
+      }
+      if (this.startAndEndMarkerLayer){
+        this.polyLine.setMap(null)
+      }
+      if (this.path.length > 0){
+        this.path = this.path.reverse()
+        this.markRoutePath(this.path)
+      }
+    },
     addLine() {
       addRouteLine(this.customPath).then((response) => {
         this.customPath = []
@@ -187,7 +258,7 @@ export default {
       // 添加起点和终点 - 开始
       const startPosition = new window.TMap.LatLng(pathArr[0].lat, pathArr[0].lng) // 路线规划起点
       const endPosition = new window.TMap.LatLng(pathArr[pathArr.length -1].lat, pathArr[pathArr.length -1].lng) // 路线规划终点
-      new window.TMap.MultiMarker({
+      this.startAndEndMarkerLayer = new window.TMap.MultiMarker({
         // 创造MultiMarker显示起终点标记
         id: 'marker-layer',
         map: _this.map,
@@ -220,7 +291,7 @@ export default {
       })
       // 添加起点和终点 - 结束
       // 创建 MultiPolyline显示路径折线
-      new window.TMap.MultiPolyline({
+      this.polyLine =  new window.TMap.MultiPolyline({
         id: 'polyline-layer',
         map: _this.map,
         styles: {
@@ -242,7 +313,7 @@ export default {
         ]
       })
       // 创建 MultiPolyline显示路径折线 结束
-      this.model = new window.TMap.model.GLTFModel({
+      /*this.model = new window.TMap.model.GLTFModel({
         // url: 'http://127.0.0.1:18080/profile/upload/2024/03/16/scene.gltf',
         url: 'https://mapapi.qq.com/web/jsapi/jsapi-gl/assets/car.gltf',
         map: _this.map,
@@ -286,7 +357,7 @@ export default {
             duration: 300
           }
         )
-      })
+      })*/
     },
     initMap() {
       // 设置地图中心点
@@ -300,13 +371,13 @@ export default {
       this.map = new TMap.Map('container', myOptions)
 
       // 初始化几何图形及编辑器
-      const marker = new TMap.MultiMarker({
-        map: this.map
-      })
+      // const marker = new TMap.MultiMarker({
+      //   map: this.map
+      // })
       const polyline = new TMap.MultiPolyline({
         map: this.map
       })
-      const polygon = new TMap.MultiPolygon({
+      /*const polygon = new TMap.MultiPolygon({
         map: this.map
       })
       const circle = new TMap.MultiCircle({
@@ -317,40 +388,36 @@ export default {
       })
       const ellipse = new TMap.MultiEllipse({
         map: this.map
-      })
-
+      })*/
+      /*  ,
+        {
+          overlay: polygon,
+          id: 'polygon'
+        },
+        {
+          overlay: circle,
+          id: 'circle'
+        },
+        {
+          overlay: rectangle,
+          id: 'rectangle'
+        },
+        {
+          overlay: ellipse,
+          id: 'ellipse'
+        }*/
       this.editor = new TMap.tools.GeometryEditor({
         // TMap.tools.GeometryEditor 文档地址：https://lbs.qq.com/webApi/javascriptGL/glDoc/glDocEditor
         map: this.map, // 编辑器绑定的地图对象
         overlayList: [
           // 可编辑图层 文档地址：https://lbs.qq.com/webApi/javascriptGL/glDoc/glDocEditor#4
           {
-            overlay: marker,
-            id: 'marker'
-          },
-          {
             overlay: polyline,
             id: 'polyline'
-          },
-          {
-            overlay: polygon,
-            id: 'polygon'
-          },
-          {
-            overlay: circle,
-            id: 'circle'
-          },
-          {
-            overlay: rectangle,
-            id: 'rectangle'
-          },
-          {
-            overlay: ellipse,
-            id: 'ellipse'
           }
         ],
         actionMode: TMap.tools.constants.EDITOR_ACTION.DRAW, // 编辑器的工作模式
-        activeOverlayId: 'marker', // 激活图层
+        activeOverlayId: 'polyline', // 激活图层
         snappable: true // 开启吸附
       })
 
@@ -358,7 +425,7 @@ export default {
         // 判断当前处于编辑状态的图层id是否是overlayList中id为rectangle（矩形）图层
         // 判断当前处于编辑状态的图层id是否是overlayList中id为rectangle（矩形）图层
         const id = geometry.id
-        if (this.editor.getActiveOverlay().id === 'rectangle') {
+        /*if (this.editor.getActiveOverlay().id === 'rectangle') {
           // 获取矩形顶点坐标
           const geo = rectangle.geometries.filter(function (item) {
             return item.id === id
@@ -372,7 +439,7 @@ export default {
             return item.id === id
           })
           console.log('绘制的多边形坐标：', geo[0].paths)
-        }
+        }*/
         const _this = this
         if (this.editor.getActiveOverlay().id === 'polyline') {
           // 获取折线路径坐标
@@ -497,6 +564,6 @@ export default {
   background: #3876ff;
 }
 .control .stopMove {
-  background: #ff0000;
+  background: #3876ff;
 }
 </style>