physical_distribution/src/views/components/carWarn.vue

<template>
  <div class="mile_warp">
    <table class="table_box">
      <colgroup>
        <col width="40%" />
        <col width="30%" />
        <col width="30%" />
      </colgroup>
      <thead>
        <tr>
          <td>时间</td>
          <td>车牌号</td>
          <td>报警信息</td>
        </tr>
      </thead>
    </table>
    <div style="width:100%;height:1.5rem;overflow-y:auto;">
      <table class="table_box">
        <colgroup>
          <col width="40%" />
          <col width="30%" />
          <col width="30%" />
        </colgroup>
        <tbody>
          <tr v-for="(item, index) in carWarn" :key="'car' + index">
            <td>{{ item.TimeStamp }}</td>
            <td>{{ item.carNo }}</td>
            <td :title="item.MESSCONTENT">{{ item.MESSTYPE }}</td>
          </tr>
          <tr v-if="carWarn.length == 0">
            <td colspan="3" style="padding-top:0.8rem;">暂无报警信息</td>
          </tr>
        </tbody>
      </table>
    </div>
  </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 yesterDay2 = now.setDate(now.getDate() - 1);
      let param = {
        "StartTime": dateFormat(new Date(yesterDay2), 'yyyy-MM-dd'),
        "EndTime": dateFormat(new Date(yesterDay1), 'yyyy-MM-dd')
      }
      this.carList.map(item => {
        param.Imei = item.deviceId;
        lunzApi.getMessInfoByMessType(key, param).then(res => {
          let resData = res.Data;
          let arr = [];
          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(item.TimeStamp), 'yyyy-MM-dd hh:mm:ss')
            arr.push(item);
          })
          this.carWarn = this.carWarn.concat(arr);
        })
      })

    },
  },
}
</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;
        }
      }
    }
  }
}
</style>