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

<template>
  <div class="home-container">
    <el-card class="home-container__card">
      <div>
        <div class="title">
          <span>
            运行车辆
          </span>
          <span>
            <i
                class="el-icon-refresh-right"
                style="cursor: pointer;font-size:20px"
                @click="refresh"
            ></i>
          </span>
        </div>
        <div class="content" v-loading="loading">
          <el-table
              :data="tableData"
              stripe
              size="mini"
              height="420"
              style="width: 100%;">
            <el-table-column
                align="center"
                prop="billNo">
              <template slot-scope="{row}">
                <span class="el-button--text" style="cursor: pointer"
                      @click="openTrack(row)">{{ row.billNo }}</span>
              </template>
            </el-table-column>
            <el-table-column
                width="120"
                align="center"
                prop="plateNo">
              <template slot-scope="{row}">
                <span class="el-button--text" style="cursor: pointer"
                      @click="openTrack(row)">{{ row.plateNo }}</span>
              </template>
            </el-table-column>
            <el-table-column
                width="100"
                prop="status">
              <template slot-scope="{row}">
                <span v-if="row.status == 0" style="color: #E45656;">未调度</span>
                <span v-if="row.status == 1" style="color: #F56C6C;">未派车</span>
                <span v-if="row.status == 2" style="color: #F1A532;">未受理</span>
                <span v-if="row.status == 3" style="color: #53C21D;">未完工</span>
                <span v-if="row.status == 5" style="color: #F56C6C;">未到厂</span>
                <span v-if="row.status == 4" style="color: #3C9CFF;">工单关闭</span>
                <span v-if="row.status == 6" style="color: #3C9CFF;">已提箱</span>
              </template>
            </el-table-column>
            <el-table-column
                show-overflow-tooltip
                prop="corpName">
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-card>
    <el-dialog
        title="车辆轨迹"
        append-to-body
        :visible.sync="dialogVisible"
        fullscreen
        width="80%">
      <div id="container"></div>
      <div class="input-card" 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" v-else>
        <span style="color: red">暂无该车辆轨迹信息</span>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {active} from "@/api/wel";
import {gaude} from "@/api/gaude";
export default {
  name: "basicContainer",
  props: {
    sysType: Number
  },
  data() {
    return {
      dialogVisible: false,
      loading: false,
      tableData: [],
      map: null,
      marker: null,
      lineArr: []
    };
  },
  mounted() {
    this.init();
  },
  beforeDestroy() {
    this.map && this.map.destroy();
  },
  methods: {
    openTrack(row){
      this.dialogVisible = true
      gaude({itemId: row.id}).then(res => {
        console.log(res.data.data)
        this.lineArr = res.data.data
        this.initMap();
      })
    },
    initMap() {
      this.map = new AMap.Map("container", {
        resizeEnable: true,
        center: [116.397428, 39.90923],
        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();
    },
    init() {
      this.getsalesTrend();
    },
    getsalesTrend() {
      this.loading = true;
      active().then(res => {
        this.tableData = res.data.data
        this.tableData = this.tableData.concat(res.data.data)
        this.tableData = this.tableData.concat(res.data.data)
        this.tableData = this.tableData.concat(res.data.data)
        this.tableData = this.tableData.concat(res.data.data)
        this.tableData = this.tableData.concat(res.data.data)
        this.tableData = this.tableData.concat(res.data.data)
        this.tableData = this.tableData.concat(res.data.data)
        this.loading = false;
      })
    },
    refresh() {
      this.init()
    }
  }
};
</script>

<style scoped Lang="less">
@import url('https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css');
#container {
  height: 93vh;
  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: 0vh !important;
}

::v-deep .el-dialog__body {
  padding: 0 20px 10px 20px !important;
}
</style>