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

<template>
  <div class="page" style="box-sizing: border-box;position: relative;">
    <more title="常住人员" reload @reload="reload"></more>

    <div style="position: absolute;right: 40px;bottom: 6px;z-index: 999;" v-show="!loading">
      <el-pagination @current-change="currentChange" small layout="prev, pager, next" :page-count="page.pages">
      </el-pagination>
    </div>

    <div class="card-box">
      <div class="card-list animate__animated animate__faster animate__fadeInLeft"
        style="display: flex;justify-content: space-between;min-height: 304px;" v-loading="loading">
        <div @click="showDetail(item)" class="card" v-for="(item,index) in list" :key="index">
          <div class="img">
            <el-image style="width: 100%;height: 100%;" :src="item.faceUrl">
              <img style="width: 100%;height: 100%;" slot="error" src="/img/icon/open.png">
            </el-image>
          </div>
          <div class="data">
            <div class="left">
              <div class="name">{{item.userName}}</div>
              <div class="temperature" v-if="item.temperature">
                <div>{{item.temperature}} ℃</div>
                <div v-if="item.temperature>37.6" class="center" style="margin-top: 0.125rem;"><i
                    class="el-icon-warning dot"></i></div>
              </div>
            </div>
            <div class="right">
              <div style="display: flex;" v-if="item.isOut === 1">
                <img src="/img/icon/enter.png" style="width: 16px;height: 16px;margin-right: 0.2rem;" />
                {{item.openTime | formatDate}}
              </div>
              <div style="display: flex;margin-top: 0.2rem;" v-if="item.isOut === 2">
                <img src="/img/icon/outer.png" style="width: 16px;height: 16px;margin-right: 0.2rem;" />
                {{item.openTime | formatDate}}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import more from "@/components/more.vue";
  import {
    getList
  } from "@/api/estate/accessrecord";
  import dateTime from "@/util/dateTime.js"
  export default {
    components: {
      more
    },
    inject: ['index'],
    data() {
      return {
        loading: true,
        page: {
          current: 1,
          size: 6,
          total: 0,
          pages: 0
        },
        list: []
      };
    },
    created() {
      this.loadStaffRecord();
    },
    filters: {
      formatDate(date) {
        return dateTime.format(new Date(date), 'mm-dd HH:MM:SS')
      }
    },
    methods: {
      async reload(){
        this.page.current = 1
        await this.loadStaffRecord()
        this.$message.success('刷新成功')
      },
      currentChange(current) {
        let oldCurrent = this.page.current
        if (current > oldCurrent) {
          this.$animateCss('.card-list', 'animate__slideInRight')
        } else {
          this.$animateCss('.card-list', 'animate__slideInLeft')
        }
        this.page.current = current
        this.loadStaffRecord()
      },
      showDetail(item) {
        let params = {
          style: 'height: 58%;width: 38%;',
          title: '常住人员',
          type: 'visitor',
          content: item,
          time: item.createTime
        }
        this.index.$refs.myDialog.open(params)
      },
      async loadStaffRecord() {
        //userType:2-员工，4-访客
        let params = {
          "userType": 2
        }
        let data = (await getList(this.page.current, this.page.size, params)).data.data
        this.list = data.records;
        this.page.total = data.total;
        this.page.pages = data.pages
        this.loading = false
      },
      change(item) {
        if (item == 'Left') {
          if (this.page.current > 1) {
            this.page.current = this.page.current - 1
          } else {
            this.page.current = this.page.pages
          }
        }

        if (item == 'Right') {
          if ((this.page.current + 1) <= this.page.pages) {
            this.page.current = this.page.current + 1
          } else {
            this.page.current = 1
          }
        }
        this.loadStaffRecord()
        this.$animateCss('.card-list', 'animate__slideIn' + item)
      },
    }
  };
</script>

<style lang="scss" scoped>
  .page {
    margin-top: 0.625rem;
    padding: 1.25rem;
    background-color: #FFFFFF;
  }

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


  .card-box {
    overflow: hidden;
    position: relative;
  }

  .changeIcon {
    position: absolute;
    bottom: calc(50% - 15px);
  }

  .card {
    background-color: #F5F5F5;
    margin: 20px 4px 10px;
    display: flex;
    flex-direction: column;
    width: calc(16.7% - 5px);
    height: 16.5rem;

    .img {
      width: 100%;
      height: 13rem;
    }

    .data {
      padding: 0 0.625rem;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;


      .left,
      .right {
        color: #999999;
        font-size: 0.8rem;
        display: flex;
        flex-direction: column;
      }

      .left {
        .name {
          font-size: 0.95rem;
          font-weight: 800;
          color: #333;
        }

        .temperature {
          display: flex;
          font-weight: 400;
          margin-top: 0.2rem;

          .dot {
            margin-left: 0.375rem;
            color: #E35E4B;
          }
        }
      }

      .right {

        .icon {
          width: 0.9rem;
          height: 0.9rem;
          border-radius: 50%;
          color: #FFFFFF;
          font-size: 0.5rem;
          margin-right: 0.26rem;
        }
      }



    }
  }
</style>