physical_distribution/src/views/components/carMile.vue

<template>
  <div class="mile_warp">
    <div>车辆行驶里程</div>
    <table>
      <thead>
        <tr>
          <th>排名</th>
          <th>车牌号</th>
          <th>昨日里程(km/h)</th>
          <th>轨迹查询</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item,index) in carMile" :key="'car'+index">
          <td>{{index+1}}</td>
          <td>{{item.cardNo}}</td>
          <td>{{item.mile}}</td>
          <td><a :href="`https://lcrm3.lunz.cn/#/Equipment/LocatMonitor/Path/${item.key}`" target="_blank">查询</a></td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import { lunzApi, key, carList } from "@/api/data";
export default {
  data() {
    return {
      carList: carList,//车辆设备
      carMile:[],
    }
  },
  mounted() {
    this.queryYesterdayMile();
  },
  methods: {
    //昨日里程
    queryYesterdayMile() {
      lunzApi.getYesterdayMile(key).then(res => {
        let resData = res.Data;
        console.log(resData)
        this.carList.map(item => {
          let idx = resData.findIndex(item2 => item2.Imei == item.deviceId);
          item.mile = idx > -1 ? res.Data[idx].Mile : 0;
          this.carMile.push(item);
        })
        this.carMile.sort((a,b) => {
          return b.mile - a.mile;
        })
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.mile_warp {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-size: 12px;
}
</style>