SaaS-DataScreen/src/views/index/components/entrance-guard/index.vue

<!--
 * @Author: WangQiBiao
 * @Date: 2019-09-25 10:20:36
 * @LastEditors: mozhuangru
 * @LastEditTime: 2019-10-09 11:43:35
 * @Description: 智能门禁
 -->
<template>
  <div class="entrance-guard">
    <TitleCom>智能门禁</TitleCom>
    <div class="tips">
      <img class="tips-logo" src="./images/zhnmj@3x.png" alt="">
      <div class="tips-desc">
        <span class="tips-desc-txt">{{faceData.total | numberFormat}}</span>
        <span class="tips-desc-unit"> 人次</span>
      </div>
    </div>
    <div class="list">
      <div class="list-item" v-for="(item, idx) in faceData.list" :key="idx">
        <div class="list-item-lf">
          <TagCom type="time">{{item.createAt}}</TagCom>
          <span class="list-item-txt">{{item.content}}</span>
        </div>
        <div class="list-item-lr">
          <TagCom type="house">{{item.label}}</TagCom>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import TitleCom from '@/components/title'
import TagCom from '@/components/tag'
import { api } from '@/api'
export default {
  data () {
    return {
      faceData: {}
    }
  },
  components: {
    TitleCom,
    TagCom
  },
  mounted () {
    api.getFacePassRecord({
      pageSize: 30,
      pageNum: 1
    }).then(res => {
      this.faceData = res.data.data
    })
  }
}
</script>
<style lang="scss" scoped>
@import './index.scss';
</style>