<!-- 人数统计 -->
<template>
  <div class="userNumComponents">
    <div class="userNum-max-box">
      <p class="userNum-title-p">今日访问人数</p>
      <div class="userNum-big-box">
        <span>{{userData.visitorCount}}</span>
        <span>人</span>
      </div>
    </div>
    <div class="userNum-max-box" style="margin:0 18px;">
      <p class="userNum-title-p">今日实验人数</p>
      <div class="userNum-big-box">
        <span>{{userData.labOccupancyCount}}</span>
        <span>人</span>
      </div>
    </div>
    <div class="userNum-max-box" style="margin-right:18px;">
      <p class="userNum-title-p">今日值日人数</p>
      <div class="userNum-big-box">
        <span>{{userData.dutyCount}}</span>
        <span>人</span>
      </div>
    </div>
    <div class="userNum-max-box">
      <p class="userNum-title-p">今日检查次数</p>
      <div class="userNum-big-box">
        <span>{{userData.checkCount}}</span>
        <span>次</span>
      </div>
    </div>
  </div>
</template>
<script>
import {
  reportReportBigDataCountStatistics,
} from "@/api/index";
  export default {
    name: 'userNumComponents',
    data () {
      return {
        //eCharts定时器
        eChartsTimer:null,
        userData:{},
      }
    },
    created () {

    },
    mounted () {
      this.timedRefresh();
    },
    methods: {
      timedRefresh(){
        let self = this;
        this.getData();
        //定时动画
        window.clearInterval(self.eChartsTimer);
        self.eChartsTimer = setInterval(function(){
          self.getData();
        },1000*30);
      },
      getData(){
        reportReportBigDataCountStatistics().then( response => {
          this.$set(this,'userData',response.data);
        });
      },
    },
    beforeDestroy() {
      //清除定时器
      window.clearInterval(this.eChartsTimer);
    },
    destroyed() {
      //清除定时器
      window.clearInterval(this.eChartsTimer);
    }
  }
</script>
<style scoped lang="scss">
  .userNumComponents{
    width:934px;
    margin:90px 30px 0;
    height:120px;
    display: flex;
    .userNum-max-box{
      width:220px;
      height:120px;
      background: no-repeat;
      background-size: 100%;
      background-image: url("../../../assets/ZDimages/img_bg_fwrs@1x.png");
      .userNum-title-p{
        line-height:46px;
        font-size:20px;
        text-align: center;
        color:#fff;
      }
      .userNum-big-box{
        text-align: center;
        margin-top:7px;
        line-height:47px;
        font-size:36px;
        font-weight: 700;
        background: -webkit-linear-gradient(0deg, #A9E9FF, #047581); /* Chrome, Safari */
        background: linear-gradient(0deg, #A9E9FF, #047581); /* 标准语法 */
        -webkit-background-clip: text; /* Chrome, Safari */
        background-clip: text;
        -webkit-text-fill-color: transparent; /* Chrome, Safari */
        color: transparent; /* 其他浏览器 */
        span:nth-child(1){
          font-family: 'alimmFonts', sans-serif;
        }
        span:nth-child(2){
          line-height:26px;
          font-size:20px;
          margin-left:5px;
        }
      }
    }
  }
</style>
