<!-- 人员设备安全 -->
<template>
  <div class="userEquipmentComponents">
    <title-page-img-components :propsData="propsData"></title-page-img-components>
    <div class="userEquipment-max-big-box">
      <div class="userEquipment-big-box">
        <div class="userEquipment-title-box">
          <p>学院单位</p>
          <p>实验人数</p>
          <p>值日人数</p>
          <p>检查项数</p>
          <p>超期设备</p>
        </div>
        <div class="userEquipment-for-max-box" ref="scrollDiv" @mouseleave="tableTimerFun" @mouseenter="tableTimerOff">
          <div class="userEquipment-for-box" v-for="(item,index) in dataList" :key="index">
            <p>{{item.deptSortName}}</p>
            <p>{{item.labCount}}</p>
            <p>{{item.dutyCount}}</p>
            <p>{{item.checkCount}}</p>
            <p>{{item.overdueDevice}}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import {
    reportReportBigDataPersonDeviceSafety,
  } from "@/api/index";
  import titlePageImgComponents from '@/components/titlePageImgComponents.vue'
  export default {
    name: 'userEquipmentComponents',
    components: {
      titlePageImgComponents
    },
    data () {
      return {
        propsData:{
          title:'人员设备安全',
          checkType:'userEquipmentComponents',
        },
        dataList:[],
        tableTimer:null,
        eChartsTimer:null,
      }
    },
    created () {

    },
    mounted () {
      this.timedRefresh();
    },
    methods: {
      timedRefresh(){
        let self = this;
        self.getData();
        //定时动画
        window.clearInterval(self.eChartsTimer);
        self.eChartsTimer = setInterval(function(){
          window.clearInterval(self.tableTimer)
          self.getData();
        },1000*30);
      },
      getData(){
        reportReportBigDataPersonDeviceSafety().then( response => {
          this.$set(this,'dataList',response.data);
          this.tableTimerFun();
        });
      },
      //开始滚动
      tableTimerFun() {
        this.tableTimer = window.setInterval(() => {
          let csrollTop = this.$refs.scrollDiv.scrollTop
          let maxHeight = this.$refs.scrollDiv.scrollHeight - this.$refs.scrollDiv.offsetHeight
          if (csrollTop == 100) {
            this.$refs.scrollDiv.scrollTop = 0;
            this.dataList.push(this.dataList[0]);
            this.dataList.push(this.dataList[1]);
            this.dataList.shift();
            this.dataList.shift();
          } else {
            this.$refs.scrollDiv.scrollTop += 1;
          }
        }, 30);
      },
      //停止滚动
      tableTimerOff(){
        window.clearInterval(this.tableTimer)
      },
    },
    beforeDestroy() {
      //清除定时器
      window.clearInterval(this.tableTimer);
      window.clearInterval(this.eChartsTimer);
    },
    destroyed() {
      //清除定时器
      window.clearInterval(this.tableTimer);
      window.clearInterval(this.eChartsTimer);
    }
  }
</script>
<style scoped lang="scss">
  .userEquipmentComponents{
    width:800px;
    height:415px;
    .userEquipment-max-big-box{
      overflow: hidden;
      height:330px;
      background: linear-gradient(180deg, rgba(4, 117, 129, 0.2) 0%, rgba(0, 15, 22, 0) 100%);
      .userEquipment-big-box{
        width:760px;
        height:300px;
        margin:20px 20px;
        overflow: hidden;
        .userEquipment-title-box{
          display: flex;
          background-color: #002d32;
          p{
            color:#00FFFF;
            font-size:24px;
            line-height:50px;
            display:block;
            overflow:hidden;
            text-overflow:ellipsis;
            white-space:nowrap;
          }
          p:nth-child(1){
            width:221px;
            text-indent:40px;
          }
          p:nth-child(2){
            width:109px;
            text-align: center;
          }
          p:nth-child(3){
            width:158px;
            text-align: center;
          }
          p:nth-child(4){
            width:108px;
            text-align: center;
          }
          p:nth-child(5){
            width:144px;
            text-align: center;
          }
        }
        .userEquipment-for-max-box{
          overflow-y: scroll;
          height:250px;
          .userEquipment-for-box{
            display: flex;
            p{
              color:#ffffff;
              font-size:18px;
              line-height:50px;
              display:block;
              overflow:hidden;
              text-overflow:ellipsis;
              white-space:nowrap;
            }
            p:nth-child(1){
              width:221px;
              text-indent:20px;
            }
            p:nth-child(2){
              width:109px;
              text-align: center;
            }
            p:nth-child(3){
              width:158px;
              text-align: center;
            }
            p:nth-child(4){
              width:108px;
              text-align: center;
            }
            p:nth-child(5){
              width:144px;
              text-align: center;
            }
          }
          .userEquipment-for-box:nth-child(odd){
            background-color: #002d32;
          }
          .userEquipment-for-box:nth-child(even){
            background-color: #012127;
          }
        }
        .userEquipment-for-max-box::-webkit-scrollbar {
          display: none;
        }
        .userEquipment-for-max-box::-webkit-scrollbar-thumb {
          display: none;
        }
        .userEquipment-for-max-box::-webkit-scrollbar-track {
          display: none;
        }
      }
    }
  }
</style>
