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

<!--
 * @Author: WangQiBiao
 * @Date: 2019-09-25 10:20:36
 * @LastEditors: MoZhuangRu
 * @LastEditTime: 2019-11-21 10:22:52
 * @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">
      <vueSeamless :data="faceData.list" :class-option="optionScroll" 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>
      </vueSeamless>
    </div>
  </div>
</template>
<script>
import TitleCom from '@/components/title'
import TagCom from '@/components/tag'
import { api } from '@/api'
import vueSeamless from 'vue-seamless-scroll'
import config from '@/config'

export default {
  computed: {
    optionScroll () {
      return {
        step: 0.5
      }
    }
  },
  data () {
    return {
      faceData: {}
    }
  },
  components: {
    TitleCom,
    TagCom,
    vueSeamless
  },
  mounted () {
    this.init()
    setInterval(() => {
      this.init()
    }, 30000)
  },
  methods: {
    init () {
      api.getFacePassRecord({
        pageSize: 30,
        pageNum: 1,
        version: config.version
      }).then(res => {
        this.faceData = res.data.data
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import './index.scss';
</style>