physical_distribution/src/views/components/carWarn.vue

<template>
  <div class="mile_warp">
    <table class="table">
      <thead>
        <tr>
          <th>时间</th>
          <th>车牌号</th>
          <th>报警信息</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in carWarn" :key="'car' + index">
          <td>{{ item.TimeStamp }}</td>
          <td>{{ item.MESSTYPE }}</td>
          <td>{{ item.MESSCONTENT }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import { lunzApi, key, carList } from "@/api/data";
import { dateFormat } from "@/util/date";
export default {
  data() {
    return {
      carList: carList,//车辆设备
      carWarn: [],
    }
  },
  mounted() {
    this.queryYesterdayMile();
  },
  methods: {
    //报警信息
    queryYesterdayMile() {
      let now = new Date();
      let yesterDay1 = now.setDate(now.getDate() - 1);
      let param = {
        "StartTime": dateFormat(new Date(yesterDay1), 'yyyy-MM-dd'),
        "EndTime": dateFormat(new Date(), 'yyyy-MM-dd')
      }
      lunzApi.getMessInfoByMessType(key, param).then(res => {
        let resData = res.Data;
        resData.map(item => {
          let idx = this.carList.findIndex(item2 => item2.deviceId == item.Imei);
          item.carNo = idx > -1 ? this.carList[idx].cardNo : '-';
          item.TimeStamp = dateFormat(new Date(TimeStamp), 'yyyy-MM-dd hh:mm:ss')
          this.carWarn.push(item);
        })
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.mile_warp {
  width: 100%;
  height: 100%;
  overflow: hidden;

  .table {
    width: 100%;

    th,
    td {
      color: #fff;
      font-size: 0.16rem;
      padding: 0.03rem 0.05rem;
    }
  }
}
</style>