<!-- 中央数据显示 -->
<template>
    <div class="centerNumData">
      <div class="centerNumData-page">
        <div class="num-max-big-box">
          <p class="num-title-p">今日实验人数</p>
          <dv-digital-flop :config="labOccupancyCount" class="dvDigitalFlop"/>
        </div>
        <div class="num-max-big-box">
          <p class="num-title-p">今日值日人数</p>
          <dv-digital-flop :config="dutyCount" class="dvDigitalFlop"/>
        </div>
        <div class="num-max-big-box">
          <p class="num-title-p">今日检查次数</p>
          <dv-digital-flop :config="checkCount" class="dvDigitalFlop"/>
        </div>
        <div class="num-max-big-box">
          <p class="num-title-p">今日整改次数</p>
          <dv-digital-flop :config="rectifyCount" class="dvDigitalFlop"/>
        </div>
      </div>
    </div>
</template>
<script>
  const configData1 = {
    content: '{nt}人',
    textAlign: 'center',
    style: {
      fill: '#fff',
      fontSize: 36,
      fontWeight: 220,
      fontFamily: 'YouSheBiaoTiHei',
      gradientColor: ['#047581', '#A9E9FF'],
      gradientType: 'linear',//'linear' | 'radial'
      gradientWith: 'fill',//'stroke' | 'fill'
      gradientParams: [0, 0, 0, 45]
    }
  }
  const configData2 = {
    content: '{nt}次',
    textAlign: 'center',
    style: {
      fill: '#fff',
      fontSize: 36,
      fontWeight: 220,
      fontFamily: 'YouSheBiaoTiHei',
      gradientColor: ['#047581', '#A9E9FF'],
      gradientType: 'linear',//'linear' | 'radial'
      gradientWith: 'fill',//'stroke' | 'fill'
      gradientParams: [0, 0, 0, 45]
    }
  }
  import {
    reportReportBigDataCountStatistics,
  } from "@/api/index";
  export default {
    name: 'centerNumData',
    data() {
      return {
        // 定时器
        echartsTimer:null,
        labOccupancyCount: {
          number: [0],
          content: configData1.content,
          textAlign: configData1.textAlign,
          style: configData1.style
        },
        dutyCount: {
          number: [0],
          content: configData1.content,
          textAlign: configData1.textAlign,
          style: configData1.style
        },
        checkCount: {
          number: [0],
          content: configData2.content,
          textAlign: configData2.textAlign,
          style: configData2.style
        },
        rectifyCount: {
          number: [0],
          content: configData2.content,
          textAlign: configData2.textAlign,
          style: configData2.style
        },
      }
    },
    created() {

    },
    mounted() {
      this.timeFunction()
      this.getList();
    },
    methods: {
      getList(){
        reportReportBigDataCountStatistics().then(response => {
          this.$set(this, 'labOccupancyCount', {
            number: [response.data.labOccupancyCount],
            content: configData1.content,
            textAlign: configData1.textAlign,
            style: configData1.style
          })
          this.$set(this, 'dutyCount', {
            number: [response.data.dutyCount],
            content: configData1.content,
            textAlign: configData1.textAlign,
            style: configData1.style
          })
          this.$set(this, 'checkCount', {
            number: [response.data.checkCount],
            content: configData2.content,
            textAlign: configData2.textAlign,
            style: configData2.style
          })
          this.$set(this, 'rectifyCount', {
            number: [response.data.rectifyCount],
            content: configData2.content,
            textAlign: configData2.textAlign,
            style: configData2.style
          })
        })
      },
      //时间定时器
      timeFunction(){
        let self = this;
        this.echartsTimer = window.setInterval(showTime, 180000);
        function showTime() {
          self.getList();
        }
      },
    },
    beforeDestroy() {
      //清除定时器
      window.clearInterval(this.echartsTimer);
    },
    destroyed() {
      //清除定时器
      window.clearInterval(this.echartsTimer);
    }
  }
</script>
<style scoped lang="scss">
    .centerNumData {
      width:1293px;
      position: absolute;
      bottom: 90px;
      .centerNumData-page{
        width:928px;
        margin:0 auto;
        display: flex;
        .num-max-big-box:nth-child(2){
          margin:0 16px;
        }
        .num-max-big-box:nth-child(3){
          margin-right:16px;
        }
        .num-max-big-box{
          width:220px;
          height:120px;
          background: url("../../../assets/ZDimages/img_bg_fwrs@1x.png");
          .num-title-p{
            margin-top:10px;
            line-height:32px;
            color:#fff;
            text-align: center;
            font-size:20px;
            font-family: SOURCEHANSANSCN;
          }
          .dvDigitalFlop{
            width:220px;
            line-height:77px;
            height:77px;
          }
        }
      }
    }
</style>
