tire-platform-ui/src/components/trackPlayback.vue

<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
    },
    parkingPoint: {
      type: Boolean
    },
    lineArr:Object,
  },
  data(){
    return{
      map: null,
      marker: null,
      infoWindow: 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://trade.tubaosoft.com/file/bladex/000000/1123598821738675201/che.png',
        imageSize: new AMap.Size(52, 26), // 根据所设置的大小拉伸或压缩图片
      });
      // 绘制轨迹
      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"  //线样式
      });
      if (this.parkingPoint.length>0){
        this.infoWindow = new AMap.InfoWindow({
          offset: new AMap.Pixel(0, -30)
        });
        for (let i = 0; i < this.parkingPoint.length; i++) {
          this.marker = new AMap.Marker({
            position: this.parkingPoint[i].location,
            map: this.map
          });
          let fun = this.fun(this.parkingPoint[i].bte, this.parkingPoint[i].ete)==='获取失败'?'':this.fun(this.parkingPoint[i].bte, this.parkingPoint[i].ete)
          this.marker.content = '<div style="width: 300px;">'
              + '<p style="font-size: 22px;font-weight: bold;background-color: #2d8cf0;color: #fff;">' + fun + '</p>'
              + '<p style="padding: 5px 0"><span style="color: #a0a0a0">停车时间:</span>' + (new Date(Number(this.parkingPoint[i].bte) + 8 * 60 * 60 * 1000).toJSON().split('T').join(' ').substr(0, 19)).slice(5,19)+'至'+ (new Date(Number(this.parkingPoint[i].ete) + 8 * 60 * 60 * 1000).toJSON().split('T').join(' ').substr(0, 19)).slice(5,19)+ '</p>'
              + '<p><span style="color: #a0a0a0">当前位置:</span>' +this.parkingPoint[i].address + '</p>'
              + '</div>'
          this.marker.on('click', this.markerClick);
          this.marker.emit('click', {target: this.marker});
        }
      }
      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
      });
      this.map.setFitView();
    },
    fun(startTime,endTime) {
      let usedTime = endTime - startTime; // 相差的毫秒数
      let days = Math.floor(usedTime / (24 * 3600 * 1000)); // 计算出天数
      let leavel = usedTime % (24 * 3600 * 1000); // 计算天数后剩余的时间
      let hours = Math.floor(leavel / (3600 * 1000)); // 计算剩余的小时数
      let leavel2 = leavel % (3600 * 1000); // 计算剩余小时后剩余的毫秒数
      let minutes = Math.floor(leavel2 / (60 * 1000)); // 计算剩余的分钟数
      if (startTime && endTime){
        return  days + '天' + hours + '时' + minutes + '分'
      }else {
        return '获取失败'
      }
    },
    markerClick(e) {
      this.infoWindow.setContent(e.target.content);
      this.infoWindow.open(this.map, e.target.getPosition());
    },
    startAnimation() {
      this.marker.moveAlong(this.lineArr, 10000);
    },
    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;
}

::v-deep .amap-info-close{
  right: 10px!important;
  top: 12px !important;
}
::v-deep .amap-info-content{
  padding: 5px 5px 5px 5px !important;
}
</style>