<template>
  <div class="cointan">
    <div class="title1">
      <img src="../assets/index/title_icon.png" style="width:22px;height:22px;float: left;">
      <div style="margin-left:25px;line-height: 22px;">宿舍归寝率排行</div>
    </div>

    <div class="sushekuang">
      <div class="sushebg">100%
        <div style="transform: scale(0.6);font-weight: 400;color: rgba(255, 255, 255, 1);margin-top: -10px;line-height: 0px;">归宿率</div>
      </div>
      <div class="sushehao">{{qinshi[0]}}</div>
      <div class="sushezhuang">未归 0<span style="margin-left:7px;color:rgba(53, 245, 73, 1)">在寝 8</span></div>
    </div>
    <!-- 第二个 -->
    <div class="sushekuang" style="margin-left:176px">
      <div class="sushebg">100%
        <div style="transform: scale(0.6);font-weight: 400;color: rgba(255, 255, 255, 1);margin-top: -10px;line-height: 0px;">归宿率</div>
      </div>
      <div class="sushehao">{{qinshi[1]}}</div>
      <div class="sushezhuang">未归 0<span style="margin-left:7px;color:rgba(53, 245, 73, 1)">在寝 8</span></div>
    </div>
    <div class="sushekuang" style="margin-left:311px">
      <div class="sushebg">100%
        <div style="transform: scale(0.6);font-weight: 400;color: rgba(255, 255, 255, 1);margin-top: -10px;line-height: 0px;">归宿率</div>
      </div>
      <div class="sushehao">{{qinshi[2]}}</div>
      <div class="sushezhuang">未归 0<span style="margin-left:7px;color:rgba(53, 245, 73, 1)">在寝 8</span></div>
    </div>
    <!-- 第二层 -->
    <div class="sushekuang" style="margin-top:171px">
      <div class="sushebg">100%
        <div style="transform: scale(0.6);font-weight: 400;color: rgba(255, 255, 255, 1);margin-top: -10px;line-height: 0px;">归宿率</div>
      </div>
      <div class="sushehao">{{qinshi[3]}}</div>
      <div class="sushezhuang">未归 0<span style="margin-left:7px;color:rgba(53, 245, 73, 1)">在寝 8</span></div>
    </div>
    <div class="sushekuang" style="margin:171px 0 0 176px">
      <div class="sushebg">100%
        <div style="transform: scale(0.6);font-weight: 400;color: rgba(255, 255, 255, 1);margin-top: -10px;line-height: 0px;">归宿率</div>
      </div>
      <div class="sushehao">{{qinshi[4]}}</div>
      <div class="sushezhuang">未归 0<span style="margin-left:7px;color:rgba(53, 245, 73, 1)">在寝 8</span></div>
    </div>
    <div class="sushekuang" style="margin:171px 0 0 311px">
      <div class="sushebg">100%
        <div style="transform: scale(0.6);font-weight: 400;color: rgba(255, 255, 255, 1);margin-top: -10px;line-height: 0px;">归宿率</div>
      </div>
      <div class="sushehao">{{qinshi[5]}}</div>
      <div class="sushezhuang">未归 0<span style="margin-left:7px;color:rgba(53, 245, 73, 1)">在寝 8</span></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'righttop',
  data() {
    return {
      qinshi:[],
      build:'',//楼栋
      token:'',//请求头token
      build:'',//楼栋
      token:'',//请求头token
    }
  },
  props: {
    msg: String
  },
  created(){
    
  },
  mounted(){
    this.token=sessionStorage.getItem('token')
    this.build=sessionStorage.getItem('build')
    this.getGuiqin()
    this.t6 = setInterval(function() {
      this.getGuiqin()
    }, 43200000);
  },
  beforeDestroy() {
    // 页面关闭清除定时器
    clearInterval(this.t6)
  },
  methods:{
    //宿舍归寝率
    getGuiqin(){
      this.$axios.get('/auto/face-recognition/returning?build='+this.build.split(",")[0]+'栋&build='+this.build.split(",")[1]+'栋',
      {
        headers: {
        "token": this.token,
        },
      }
      ).then(res => {
        if (res.data.success) {
          // 横坐标时间
          res.data.data.forEach(data => {
            this.qinshi.push(data.dom)
          })
          // console.log(this.qinshi)
        }
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.cointan{
  width: 428px;
  height: 296px;
  background-image: url('../assets/rightTop/background.png');
  background-size: 100%;
}
.title1{
  position: absolute;
  margin: 9px 0 0 10px;
  font-size: 20px;
  font-family : '优设标题黑';
  color: rgba(255, 255, 255, 1);
  font-weight: 400;
}
.sushekuang{
  position: absolute;
  margin: 53px 0 0 40px;
  width: 80px;
  height: 106px;
}
.sushebg{
  position: absolute;
  width: 69px;
  height: 69px;
  background-image: url('../assets/rightTop/guisu.png');
  background-size: 100%;
  font-size: 14px;
  font-weight: 700;
  line-height: 55px;
  color: rgba(0, 224, 219, 1);
  text-align: center;
}
.sushehao{
  position: absolute;
  margin: 69px 0 0 0px;
  width: 67px;
  text-align: center;
  font-size: 12px;
  font-weight: 900;
  color: rgba(255, 255, 255, 1);
}
.sushezhuang{
  position: absolute;
  margin: 89px 0 0 -10px;
  font-size: 12px;
  font-weight: 900;
  color: rgba(245, 44, 44, 1);
  transform: scale(0.8); //12*0.8
}
</style>
