cyzh-park/src/views/dashboard/smartoperationcenter/comps/access_records.vue

<template>
  <div class="page_access animate__animated animate__faster animate__fadeInUp">
    <more title="通行统计" reload @reload="loadRecords(true)"></more>
    <div class="area">
      <div class="area1">日期</div>
      <div class="area2">常驻人员</div>
      <div class="area3">访客</div>
      <div class="area4">车辆</div>
    </div>

    <div v-for="(item,index) in list" :key="index" class="area" style="background-color: #f5f5f5;margin-top: 0.8rem;">
      <div class="area1">{{item.date}}</div>
      <div class="area2">{{item.staffCnt}}</div>
      <div class="area4">{{item.guestCnt}}</div>
      <div class="area4">{{item.carCnt}}</div>
    </div>
  </div>
</template>

<script>
  import more from "@/components/more.vue"
  import {
    listByDate
  } from "@/api/estate/accessstatistics"
  export default {
    components: {
      more
    },
    data() {
      return {
        list: [],
      };
    },
    created() {
      this.loadRecords()
    },
    methods: {
      async loadRecords(toast = false) {
        let res = await listByDate()
        const data = res.data.data
        this.list = data.records
        if (toast) {
          this.$message.success('刷新成功')
        }
      }
    }
  };
</script>

<style lang="scss" scoped>
  .page_access {
    background-color: #FFFFFF;
    padding: 1.25rem;
    height: 28rem;
  }


  .area {
    padding: 0.5rem 0;
    display: flex;
    font-size: 0.875rem;
    color: #666666;
    margin-top: 1rem;
    text-align: center;

    .area1,
    .area2,
    .area3,
    .area4 {
      width: 25%;
    }
  }
</style>