陆运委托调度添加轨迹回放

src/components/trackPlayback.vue

@@ -0,0 +1,157 @@
+<template>
+  <el-dialog
+      title="车辆轨迹"
+      append-to-body
+      custom-class="dialog_two"
+      :visible.sync="dialogVisible"
+      lock-scroll
+      width="80%">
+    <div id="container" v-if="dialogVisible"></div>
+    <div class="input-card" style="right: 10.3%;bottom: 10.3%" v-if="this.lineArr.length>0">
+      <h4>轨迹回放控制</h4>
+      <div class="input-item">
+        <input type="button" class="btn" value="开始动画" id="start" @click="startAnimation()"/>
+        <input type="button" class="btn" value="暂停动画" id="pause" @click="pauseAnimation()"/>
+      </div>
+      <div class="input-item">
+        <input type="button" class="btn" value="继续动画" id="resume" @click="resumeAnimation()"/>
+        <input type="button" class="btn" value="停止动画" id="stop" @click="stopAnimation()"/>
+      </div>
+    </div>
+    <div class="input-card" style="right: 10.3%;bottom: 10.3%" v-else>
+      <span style="color: red">暂无该车辆轨迹信息</span>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  name: "trackPlayback",
+  props: {
+    dialogVisible: {
+      type: Boolean
+    },
+    lineArr:Object,
+  },
+  data(){
+    return{
+      map: null,
+      marker: null
+    }
+  },
+  beforeDestroy() {
+    this.map && this.map.destroy();
+  },
+  methods:{
+    initMap() {
+      this.map = new AMap.Map("container", {
+        resizeEnable: true,
+        center: this.lineArr.length >0 ?this.lineArr[this.lineArr.length - 1]:[120.382891,36.066460],
+        zoom: 17
+      });
+      let icon = new AMap.Icon({
+        size: new AMap.Size(52, 26), // 图标尺寸
+        image: 'https://webapi.amap.com/images/car.png',
+        imageSize: new AMap.Size(52, 26), // 根据所设置的大小拉伸或压缩图片
+      });
+      this.marker = new AMap.Marker({
+        map: this.map,
+        position: this.lineArr.length >0 ?this.lineArr[this.lineArr.length - 1]:[120.382891,36.066460],
+        // icon: "https://webapi.amap.com/images/car.png",
+        icon: icon,
+        markerMeta: new AMap.Size(28, 28),
+        offset: new AMap.Pixel(-26, -15),
+        autoRotation: true,
+        angle: -15
+      });
+      // 绘制轨迹
+      let polyline = new AMap.Polyline({
+        map: this.map,
+        path: this.lineArr,
+        showDir: true,
+        strokeColor: "#28F", //线颜色
+        // strokeOpacity: 1,     //线透明度
+        strokeWeight: 6 //线宽
+        // strokeStyle: "solid"  //线样式
+      });
+      let passedPolyline = new AMap.Polyline({
+        map: this.map,
+        path: this.lineArr,
+        strokeColor: "#AF5", //线颜色
+        // strokeOpacity: 1,     //线透明度
+        strokeWeight: 6 //线宽
+        // strokeStyle: "solid"  //线样式
+      });
+
+      this.marker.on("moving", function (e) {
+        passedPolyline.setPath(e.passedPath);
+      });
+
+      this.map.setFitView();
+    },
+    startAnimation() {
+      this.marker.moveAlong(this.lineArr, 100000);
+    },
+    pauseAnimation() {
+      this.marker.pauseMove();
+    },
+    resumeAnimation() {
+      this.marker.resumeMove();
+    },
+    stopAnimation() {
+      this.marker.stopMove();
+    },
+  }
+}
+</script>
+
+<style scoped src="../styles/demo-center.css"></style>
+<style scoped>
+#container {
+  height: 80vh;
+  width: 100%;
+}
+
+.input-card .btn {
+  margin-right: 1.2rem;
+  width: 9rem;
+}
+
+.input-card .btn:last-child {
+  margin-right: 0;
+}
+</style>
+<style lang="scss" scoped>
+.home-container {
+  padding: 0px 5px 5px 0px;
+  box-sizing: border-box;
+  height: 100%;
+
+  ::v-deep .el-card__body {
+    padding: 10px 15px;
+    font-size: 14px;
+  }
+
+  &__card {
+    width: 100%;
+    height: 100%;
+  }
+
+  .title {
+    display: flex;
+    justify-content: space-between;
+  }
+}
+
+.content {
+}
+
+::v-deep .el-dialog {
+  margin-top: 5vh !important;
+  margin-bottom: 0 !important;
+}
+
+::v-deep .el-dialog__body {
+  padding: 0 20px 10px 20px !important;
+}
+</style>

src/main.js

@@ -30,6 +30,9 @@ import {
 } from '@/api/system/dictbiz'
 import { checkLock, onLock, unLock } from "@/api/lock/lock"
 import './util/directives.js'
+
+//地图回放
+import trackPlayback from "@/components/trackPlayback"
 //客户选择组件
 import selectComponent from '@/components/selectComponent/customerSelect';
 // 仓库选择组件
@@ -71,6 +74,7 @@ import '@/assets/css/form.css'
 import {corpAddr} from "@/components/function/corpAddrSelect"
 //获取浏览器指纹并生成ID
 import Fingerprint2 from 'fingerprintjs2'
+Vue.component('trackPlayback', trackPlayback);
 Vue.component('selectComponent', selectComponent);
 Vue.component('warehouseSelect', warehouseSelect);
 Vue.component('goodsSelect', goodsSelect);

src/views/landTransportation/dispatchingCars/detailPage.vue

@@ -200,6 +200,10 @@
                      :disabled="selectionList.length === 0">批量调度
           </el-button>
         </template>
+        <template slot="plateNo" slot-scope="{row}">
+                <span class="el-button--text" style="cursor: pointer"
+                      @click="openTrack(row)">{{ row.plateNo }}</span>
+        </template>
         <template slot-scope="{row}" slot="fleetId">
           <crop-select
               v-if="row.$cellEdit"
@@ -551,6 +555,7 @@
           <el-button type="primary" @click="saveAnnex" size="small">保 存</el-button>
         </span>
     </el-dialog>
+    <track-playback :dialogVisible="dialogVisibleTwo" :lineArr="lineArr" ref="playback"></track-playback>
   </div>
 </template>
 
@@ -572,6 +577,7 @@ import {
 import website from "@/config/website";
 import {getDeptTree} from "@/api/system/dept";
 import {customerList} from "@/api/basicData/basicFeesDesc";
+import {gaude, location} from "@/api/gaude";
 
 export default {
   props: {
@@ -586,6 +592,8 @@ export default {
     return {
       formData: {},
       enclosure: false,
+      dialogVisibleTwo:false,
+      lineArr: [],
       formAnnex: {},
       key: 0,
       formDataList: {},
@@ -1557,6 +1565,20 @@ export default {
     }
   },
   methods: {
+    openTrack(row){
+      gaude({itemId: row.id,plateNo:row.plateNo,tenantId:'234557'}).then(res => {
+        this.lineArr = res.data.data
+        this.dialogVisibleTwo = true
+        let this_=this
+        setTimeout(function(){
+          this_.$refs.playback.initMap();
+        },100)
+      })
+      // location({itemId: row.id,plateNo:'陕YH0008'}).then(res => {
+      //   // console.log(res.data.data)
+      //   // console.log(this.lineArr[this.lineArr.length - 1])
+      // })
+    },
     //自定义列保存
     async saveColumnBoxTwo() {
       /**

src/views/landTransportation/placeAnOrder/detailPage.vue

@@ -359,6 +359,10 @@
           @resetColumn="resetColumnContact"
           @saveColumn="saveColumnContact"
           :option="vehicleOption">
+        <template slot="plateNo" slot-scope="{row}">
+                <span class="el-button--text" style="cursor: pointer"
+                      @click="openTrack(row)">{{ row.plateNo }}</span>
+        </template>
       </avue-crud>
     </basic-container>
     <containerTitle title="杂费明细"></containerTitle>
@@ -515,6 +519,7 @@
           <el-button @click="enclosure = false" size="small">取 消</el-button>
         </span>
     </el-dialog>
+    <track-playback :dialogVisible="dialogVisible" :lineArr="lineArr" ref="playback"></track-playback>
   </div>
 </template>
 
@@ -529,8 +534,13 @@ import {
 } from "@/api/landTransportation";
 import {getDeptTree} from "@/api/system/dept";
 import website from "@/config/website";
-
+import {gaude, location} from "@/api/gaude";
+//地图回放
+import trackPlayback from "@/components/trackPlayback"
 export default {
+  comments:{
+    trackPlayback
+  },
   props: {
     id: {
       type: String
@@ -541,6 +551,8 @@ export default {
   },
   data() {
     return {
+      dialogVisible:false,
+      lineArr:[],
       activeIndex: '1',
       KeyBox: 0,
       KeyBoxTwo: 0,
@@ -1508,6 +1520,20 @@ export default {
     this.$refs.other.show = false
   },
   methods: {
+    openTrack(row){
+      gaude({itemId: row.id,plateNo:row.plateNo,tenantId:'234557'}).then(res => {
+        this.lineArr = res.data.data
+        this.dialogVisible = true
+        let this_=this
+        setTimeout(function(){
+          this_.$refs.playback.initMap();
+        },100)
+      })
+      // location({itemId: row.id,plateNo:'陕YH0008'}).then(res => {
+      //   // console.log(res.data.data)
+      //   // console.log(this.lineArr[this.lineArr.length - 1])
+      // })
+    },
     changeSelect(val) {
       for (let item of this.salesmanList) {
         if (item.id == val) {

src/views/wel/home/landTransportation/components/sales-trend.vue

@@ -278,7 +278,7 @@ export default {
           query: {id:row.orderId},
         });
       }else {
-        gaude({itemId: row.id,plateNo:row.plateNo}).then(res => {
+        gaude({itemId: row.id,plateNo:row.plateNo,tenantId:'234557'}).then(res => {
           this.lineArr = res.data.data
           this.dialogVisible = true
           let this_=this
@@ -286,10 +286,10 @@ export default {
             this_.initMap();
           },100)
         })
-        location({itemId: row.id,plateNo:'陕YH0008'}).then(res => {
-          // console.log(res.data.data)
-          // console.log(this.lineArr[this.lineArr.length - 1])
-        })
+        // location({itemId: row.id,plateNo:'陕YH0008'}).then(res => {
+        //   // console.log(res.data.data)
+        //   // console.log(this.lineArr[this.lineArr.length - 1])
+        // })
       }
     },
     initMap() {