cyzh-park/src/views/dashboard/onefaceaccess/comps/today_visitor.vue

<template>
  <div class="page animate__animated animate__faster animate__fadeInRight" style="min-height: 56.3125rem;">
    <more title="今日访客"></more>

    <div v-loading="loading">
      <div v-if="list.length>0">
        <div class="card" v-for="(item,index) in list" :key="index">
          <div class="card-left">
            <div class="center">
              <img :src="item.faceUrl">
            </div>
            <div class="data">
              <div>{{item.userName}}</div>
              <div>体温 {{item.temperature}}℃</div>
            </div>
          </div>
          <div class="card-center">
            {{item.openTime}}
          </div>
<!--          <div class="card-right" v-if="false">-->
<!--            逗留:{{item.time}}-->
<!--          </div>-->
        </div>
      </div>

      <avue-empty v-else style="margin-top: 150px;"></avue-empty>

    </div>

  </div>
</template>

<script>
  import more from "@/components/more.vue";
  import {
    getList
  } from "@/api/estate/accessrecord";
  import {
    dateFormat
  } from "@/util/date";
  export default {
    components: {
      more
    },
    data() {
      return {
        loading: true,
        page: {
          current: 1,
          size: 5,
          total: 0
        },
        list: []
      };
    },
    created() {
      this.loadGuestRecord(1);
    },
    methods: {
      loadGuestRecord(current) {
        this.loading = true;
        let that = this;
        //userType:2-员工，4-访客
        let queryDate = dateFormat(new Date, "yyyy-MM-dd");
        getList(current, this.page.size, {
          "userType": 4,
          "queryDate": queryDate
        }).then(res => {
          let data = res.data.data;
          that.list = data.records;
          that.page.total = data.total;
          that.page.current = current;
          that.loading = false;
        })
      },
      /*change() {
        setInterval(() => {
          let list = this.list;
          list.push(list[0]);
          list.splice(0, 1);
          this.list = list;
        }, 1500)
      }*/
    },
    mounted() {

    },

  };
</script>

<style lang="scss" scoped>
  .page {
    background-color: #FFFFFF;
    padding: 1.2rem;
    box-sizing: border-box;
  }

  .center {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f5f5f5;
    padding: 0.68rem 1.4rem;
    margin-top: 1rem;

    .card-center,
    .card-right {
      color: #333333;
      font-size: 0.875rem;
    }

    .card-left {
      display: flex;

      img {
        width: 3rem;
        height: 3rem;
        border-radius: 50%;
        margin-right: 0.625rem;
      }

      .data {
        display: flex;
        align-items: flex-start;
        justify-content: center;
        flex-direction: column;
        text-align: left;

        div:first-child {
          color: #333333;
          font-weight: 800;
          font-size: 0.93rem;
        }

        div:last-child {
          margin-top: 0.16rem;
          color: #999999;
          font-weight: 400;
          font-size: 0.8rem;
        }
      }
    }
  }
</style>