车辆导航

src/axios/api.js

@@ -65,3 +65,4 @@ export const chooseKCZC = '/api/tRealTimeOrder/chooseKCZC'; //铲车界面点击
 export const completeZC = '/api/tRealTimeOrder/completeZC'; //卡车界面点击完成装车
 export const crossDB = '/api/tRealTimeOrder/crossDB'; //卡车界面点击到达卸点
 export const completeXC = '/api/tRealTimeOrder/completeXC'; //卡车界面点击完成装车
+export const navigationRoute = '/api/navigationRoute'; //获取导航路径

src/views/MLargeScreen/components/startOrderReceiving/index.vue

@@ -7,7 +7,7 @@
         style="color: #00ffff; font-size: 28px"
       ></span>
       <span v-show="orderObj.status!==3" style="color: #00ffff">请您前往：
-        <span style="color: #e47e1b; font-weight: 600">{{ orderObj.status<3?orderObj.zcArea||'':orderObj.xcArea||'' }}</span>
+        <span style="color: #e47e1b; font-weight: 600">{{ orderObj.mdd }}</span>
       </span>
       <span v-show="orderObj.status===3" style="color: #00ffff">挖机牌号：
         <span style="color: #e47e1b; font-weight: 600">{{ orderObj.ccCarNumber }}</span>
@@ -93,22 +93,27 @@ export default {
             this.navStu=0;
             this.orderStuText='正在前往';
             this.orderObj = res.data;
-            if(this.orderObj.zcArea.length>5){
-              this.orderObj.zcArea = this.orderObj.zcArea.substr(0,5)+'...'
-            }
-            if(this.orderObj.xcArea.length>5){
-              this.orderObj.xcArea = this.orderObj.xcArea.substr(0,5)+'...'
+            this.orderObj.mdd = this.orderObj.status<3?this.orderObj.zcArea||'':this.orderObj.xcArea||'';
+            if(this.orderObj.mdd.length>5){
+              this.orderObj.mdd = this.orderObj.mdd.substr(0,5)+'...'
             }
+            // if(this.orderObj.xcArea.length>5){
+            //   this.orderObj.xcArea = this.orderObj.xcArea.substr(0,5)+'...'
+            // }
             this.audioPlayByUrl(xdd);
           } else {
             if (res.data.id !== this.orderObj) {
               this.orderObj = res.data;
-              if(this.orderObj.zcArea.length>6){
-                this.orderObj.zcArea = this.orderObj.zcArea.substr(0,5)+'...'
-              }
-              if(this.orderObj.xcArea.length>6){
-                this.orderObj.xcArea = this.orderObj.xcArea.substr(0,5)+'...'
+              this.orderObj.mdd = this.orderObj.status<3?this.orderObj.zcArea||'':this.orderObj.xcArea||'';
+              if(this.orderObj.mdd.length>6){
+                this.orderObj.mdd = this.orderObj.mdd.substr(0,5)+'...'
               }
+              // if(this.orderObj.zcArea.length>6){
+              //   this.orderObj.zcArea = this.orderObj.zcArea.substr(0,5)+'...'
+              // }
+              // if(this.orderObj.xcArea.length>6){
+              //   this.orderObj.xcArea = this.orderObj.xcArea.substr(0,5)+'...'
+              // }
             }
             this.orderObj.status = res.data.status;
             if (this.orderObj.status === 6) {
@@ -142,7 +147,7 @@ export default {
     },
     //点击导航
     navigation() {
-      // this.$parent.zhixinglujing(true, this.carnumber, this.carDestination);
+      this.$parent.drawNavigation(this.orderObj.status<3?this.orderObj.zcArea:this.orderObj.xcArea,this.carNumber);
       this.navStu = 1;
     },
     //点击到达采点
@@ -154,6 +159,7 @@ export default {
             if (this.$parent.carclass != "铲车") {
               this.audioPlayByUrl(ddcd);
             }
+            this.$parent.clearNavigation();
             this.queryOrder();
           }else{
             this.$notify({
@@ -218,6 +224,7 @@ export default {
               dangerouslyUseHTMLString: true,
             });
             this.queryOrder();
+            this.$parent.clearNavigation();
             this.audioPlayByUrl(gdb);
           } else {
             this.$notify({

src/views/MLargeScreen/index.vue

@@ -138,6 +138,7 @@ import {
   faultMonthAdd,
   faultYearAdd,
   crossingFence,
+  navigationRoute,
 } from "@/axios/api.js";
 import axios from "axios";
 import startOrderReceiving from "./components/startOrderReceiving/index.vue"; //接受派单
@@ -161,6 +162,7 @@ import wajueji from "@/assets/wajueji.png";
 import zhuangcheIcon from "@/assets/images/truckTuPian/zhuangchedian1.png";
 import xiecheIcon from "@/assets/images/truckTuPian/xiechedian1.png";
 import luzhangtubiao from "@/assets/images/truckTuPian/luzhang.png";
+import pattern from "@/assets/pattern.png";
 
 import 'maptalks/dist/maptalks.css';
 import * as maptalks from 'maptalks';
@@ -241,6 +243,7 @@ export default {
       areaTimer: null,
       kcListView: false,
       localName: null,
+      trailLine: null,//导航开启后的行驶轨迹
     };
   },
   mounted() {
@@ -371,7 +374,10 @@ export default {
           }),
           new maptalks.VectorLayer("markerLayer", {
             enableAltitude: false,
-          })
+          }),
+          new maptalks.VectorLayer("navigationLayer", {
+            enableAltitude: false,
+          }),
         ]
       });
       this.mapDom.on('movestart', (e) => {
@@ -423,6 +429,7 @@ export default {
       this.posTimer = setInterval(() => {
         this.getAllOnlineCarPosition();
       }, 2000);
+      this.drawNavigation();
     },
     getRoadblockInformation() {
       httpGet(failureDeclarationAdd,{fault: "路障申报", createTime: this.currentTimeFn()}).then((res) => {
@@ -454,6 +461,49 @@ export default {
         }
       });
     },
+    drawNavigation(point,carNumber) {
+      const layer = this.mapDom.getLayer('navigationLayer');
+      layer.clear();
+      httpGet(navigationRoute, {
+        point: point,
+        carNumber: carNumber
+      }).then((res) => {
+        if (res.code == 200) {
+          let line = new maptalks.LineString(res.data||[],
+              {
+                symbol: {
+                  'linePatternFile': pattern,
+                  'linePatternDx': 0,
+                  'lineWidth': 16
+                }
+              }
+          ).addTo(layer);
+          line.animate({
+            symbol: {
+              linePatternDx: 16
+            }
+          }, {
+            repeat: true
+          });
+          this.trailLine = new maptalks.LineString([],
+              {
+                symbol: {
+                  'lineColor': '#1bbc9b',
+                  'lineWidth': 3
+                }
+              }
+          ).addTo(layer);
+        }
+      });
+    },
+    clearNavigation() {
+      const layer = this.mapDom.getLayer('navigationLayer');
+      layer.clear();
+      if(this.trailLine){
+        this.trailLine.remove();
+        this.trailLine = null;
+      }
+    },
     getAreaInformation() {
       httpGet(posAreaInformation,{carNumber: this.carnumber}).then((res) => {
         if (res.code === 200  && res.data.length!==this.areaNum) {
@@ -969,6 +1019,11 @@ export default {
       LoaObj1.time = new Date().getTime();
       //上传坐标
       httpPostForJson(carRealTimeLocationQuery2, JSON.stringify(LoaObj1)).then((res2) => {
+        if(this.trailLine) {//如果开启导航画出行驶轨迹
+          let arr = this.trailLine.getCoordinates();
+          arr.push([coord.x,coord.y]);
+          this.trailLine.setCoordinates(arr);
+        }
       });
     },
     //安全检查