physical_distribution/src/views/components/carMile.vue

<template>
  <div class="mile_warp">
    <table class="table_box">
      <colgroup>
        <col width="20%" />
        <col width="30%" />
        <col width="25%" />
        <col width="25%" />
      </colgroup>
      <thead>
        <tr>
          <td>排名</td>
          <td>车牌号</td>
          <td>昨日里程<br />(km/h)</td>
          <td>轨迹查询</td>
        </tr>
      </thead>
    </table>
    <div style="width:100%;height:1.5rem;overflow-y:auto;">
      <table class="table_box">
        <colgroup>
          <col width="20%" />
          <col width="30%" />
          <col width="25%" />
          <col width="25%" />
        </colgroup>
        <tbody>
          <tr v-for="(item, index) in carMile" :key="'car' + index">
            <td>
              <div>{{ index+ 1}}</div>
            </td>
            <td title="点击定位到该车辆位置" @click="queryMap(item)">
              <div style="cursor:pointer;">{{ item.cardNo }}</div>
            </td>
            <td><div>{{ item.mile }}</div></td>
            <td><a class="btn_path" :href="`https://gatewayapi.lunz.cn/api/ApiPlat/LocatInfoAllPage?imei=${item.deviceId}&KEY=${locationKey}&messkey=1`"
                target="_blank">查询</a></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import { lunzApi, key, carList } from "@/api/data";
export default {
  data() {
    return {
      carList: carList,//车辆设备
      carMile: [],
      locationKey:key
    }
  },
  mounted() {
    this.queryYesterdayMile();
  },
  methods: {
    //定位
    queryMap(item) {
      this.$emit('doMap', item);
    },
    //昨日里程
    queryYesterdayMile() {
      lunzApi.getYesterdayMile(key).then(res => {
        let resData = res.Data;
        if (resData && resData != undefined) {
          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;

  .table_box {
    width: 100%;
    margin-top: 0.15rem;

    thead {
      font-style: italic;
      height: 0.38rem;
      background: url(~@/assets/img/tab_bg.png);
      background-size: 100% 100%;

      td {
        color: #fff;
        font-family: "FZSK";
        font-size: 0.16rem;
      }
    }

    tbody {

      tr {
        td {
          color: #fff;
          font-size: 0.14rem;
          padding: 0.08rem 0;
        }

        &:nth-child(1) {
          td {
            padding-top: 0;
          }

          background: url(~@/assets/img/tab1.png);
          background-size: 100% 100%;

          div {
            font-family: "FZSK";
            font-size: 0.18rem;
            letter-spacing: 0px;
            background-image: linear-gradient(to bottom,
                #fceece,
                #e39054);
            /* 线性渐变背景，方向向上 */
            -webkit-background-clip: text;
            /* 背景被裁剪成文字的前景色 */
            -webkit-text-fill-color: transparent;
            /* 文字填充颜色变透明 */
          }
        }

        &:nth-child(2) {
          background: url(~@/assets/img/tab2.png);
          background-size: 100% 100%;

          div {
            font-family: "FZSK";
            font-size: 0.18rem;
            letter-spacing: 0px;
            background-image: linear-gradient(to bottom,
                #cefce7,
                #16da85);
            /* 线性渐变背景，方向向上 */
            -webkit-background-clip: text;
            /* 背景被裁剪成文字的前景色 */
            -webkit-text-fill-color: transparent;
            /* 文字填充颜色变透明 */
          }
        }

        &:nth-child(3) {
          background: url(~@/assets/img/tab3.png);
          background-size: 100% 100%;

          div {
            font-family: "FZSK";
            font-size: 0.18rem;
            letter-spacing: 0px;
            background-image: linear-gradient(to bottom,
                #cef6fc,
                #1ca4f2);
            /* 线性渐变背景，方向向上 */
            -webkit-background-clip: text;
            /* 背景被裁剪成文字的前景色 */
            -webkit-text-fill-color: transparent;
            /* 文字填充颜色变透明 */
          }
        }
      }

      .btn_path {
        display: inline-block;
        width: 0.6rem;
        color: #ffffff;
        font-size: 0.14rem;
        font-style: italic;
        line-height: 0.2rem;
        text-align: center;
        border-radius: 0.1rem 0.08rem 0.1rem 0.08rem;
        text-decoration: none;
        background-color: #16da85;
      }
    }
  }
}
</style>