<template>
  <div class="cageReservationComponent">
    <title-page-img-components :propsData="propsData"></title-page-img-components>
    <div class="eCharts-max-big-box">
      <!--笼位数量-->
      <div class="title-box">
        <p class="title-null-p"></p>
        <p class="title-p">笼位数 {{totalCageNum}}</p>
        <p class="title-p">预约数 {{totalAppointNum}}</p>
        <p class="title-p">空闲数 {{totalFreeNum}}</p>
        <p class="title-null-p"></p>
      </div>
      <!--楼栋数量-->
      <p class="left-num-p">总数 {{leftData.cageNum}}</p>
      <p class="right-num-p">总数 {{rightData.cageNum}}</p>
      <div class="left-name-box">
        <p v-for="(item,index) in leftData.buildName">{{item}}</p>
        <!--<p>养</p>-->
        <!--<p>殖</p>-->
        <!--<p>楼</p>-->
        <!--<p>A</p>-->
        <!--<p>座</p>-->
      </div>
      <div class="right-name-box">
        <p v-for="(item,index) in rightData.buildName">{{item}}</p>
        <!--<p>养</p>-->
        <!--<p>殖</p>-->
        <!--<p>楼</p>-->
        <!--<p>B</p>-->
        <!--<p>座</p>-->
      </div>
      <!--左侧浮球-->
      <div class="position-num-box-1 left-position-num-box-1">
        <div class="position-img rotate-position-img"></div>
        <p class="num-p">{{leftData.repairRate}}%</p>
        <p class="text-p">维修{{leftData.repairNum}}</p>
      </div>
      <div class="position-num-box-2 left-position-num-box-2">
        <div class="position-img rotate-position-img"></div>
        <p class="num-p">{{leftData.freeRate}}%</p>
        <p class="text-p">空余{{leftData.freeNum}}</p>
      </div>
      <div class="position-num-box-2 left-position-num-box-3">
        <div class="position-img rotate-position-img"></div>
        <p class="num-p">{{leftData.lockedRate}}%</p>
        <p class="text-p">锁定{{leftData.lockedNum}}</p>
      </div>
      <div class="position-num-box-1 left-position-num-box-4">
        <div class="position-img rotate-position-img"></div>
        <p class="num-p">{{leftData.killRate}}%</p>
        <p class="text-p">消杀{{leftData.killNum}}</p>
      </div>
      <div class="position-num-box-1 left-position-num-box-5">
        <div class="position-img rotate-position-img"></div>
        <p class="num-p">{{leftData.appointRate}}%</p>
        <p class="text-p">预约数{{leftData.appointNum}}</p>
      </div>
      <!--右侧浮球-->
      <div class="position-num-box-1 right-position-num-box-1">
        <div class="position-img rotate-position-img"></div>
        <p class="num-p">{{rightData.repairRate}}%</p>
        <p class="text-p">维修{{rightData.repairNum}}</p>
      </div>
      <div class="position-num-box-2 right-position-num-box-2">
        <div class="position-img rotate-position-img"></div>
        <p class="num-p">{{rightData.freeRate}}%</p>
        <p class="text-p">空余{{rightData.freeNum}}</p>
      </div>
      <div class="position-num-box-2 right-position-num-box-3">
        <div class="position-img rotate-position-img"></div>
        <p class="num-p">{{rightData.lockedRate}}%</p>
        <p class="text-p">锁定{{rightData.lockedNum}}</p>
      </div>
      <div class="position-num-box-1 right-position-num-box-4">
        <div class="position-img rotate-position-img"></div>
        <p class="num-p">{{rightData.killRate}}%</p>
        <p class="text-p">消杀{{rightData.killNum}}</p>
      </div>
      <div class="position-num-box-1 right-position-num-box-5">
        <div class="position-img rotate-position-img"></div>
        <p class="num-p">{{rightData.appointRate}}%</p>
        <p class="text-p">预约数{{rightData.appointNum}}</p>
      </div>
      <img class="position-back-img" src="@/assets/ZDimages/img_lwyy_ld@1x.png">
    </div>
  </div>
</template>
<script>
import {
  reportReportBsCageRateList,
} from "@/api/index";
  import titlePageImgComponents from '@/components/titlePageImgComponents.vue'
  export default {
    name: 'cageReservationComponent',
    components: {
      titlePageImgComponents
    },
    data () {
      return {
        propsData:{
          title:'笼位预约概览',
        },
        //eCharts定时器
        eChartsTimer:null,
        totalAppointNum:0,
        totalCageNum:0,
        totalFreeNum:0,
        leftData:{},
        rightData:{},
      }
    },
    created(){

    },
    mounted() {
      // this.eChartsMethod();
      this.timedRefresh();
    },
    methods: {
      timedRefresh(){
        let self = this;
        self.getData();
        //定时动画
        window.clearInterval(self.eChartsTimer);
        self.eChartsTimer = setInterval(function(){
          self.getData();
        },1000*30);
      },
      getData(){
        reportReportBsCageRateList().then(response => {
          this.$set(this,'totalCageNum',response.data.totalCageNum);
          this.$set(this,'totalAppointNum',response.data.totalAppointNum);
          this.$set(this,'totalFreeNum',response.data.totalFreeNum);
          this.$set(this,'leftData',response.data.reportBsCageRateList[1]);
          this.$set(this,'rightData',response.data.reportBsCageRateList[0]);
        })
      },
    },
    beforeDestroy() {
      //清除定时器
      window.clearInterval(this.eChartsTimer);
    },
    destroyed() {
      //清除定时器
      window.clearInterval(this.eChartsTimer);
    }
  }
</script>
<style scoped lang="scss">
  .cageReservationComponent{
    height: 475px;
    width:680px;
    .eCharts-max-big-box {
      height:413px;
      background: linear-gradient(180deg, rgba(4, 117, 129, 0.2) 0%, rgba(0, 15, 22, 0) 100%);
      overflow: hidden;
      position: relative;
      .title-box{
        display: flex;
        margin-top:30px;
        .title-null-p{
          flex:1;
        }
        .title-p:nth-child(3){
          margin:0 40px 0;
        }
        .title-p{
          height:24px;
          line-height:24px;
          background: linear-gradient(0deg, rgba(15,255,242, 0.6) 0%, rgba(216,216,216, 0) 100%);
          padding:0 10px;
          color:#0FFFF2;
          font-size:18px;
        }
      }
      .left-num-p{
        z-index:5;
        position: absolute;
        top:145px;
        left:290px;
        color:#0FFFF2;
        font-size:18px;
      }
      .right-num-p{
        z-index:5;
        position: absolute;
        top:165px;
        left:360px;
        color:#0FFFF2;
        font-size:18px;
      }
      .left-name-box{
        z-index:5;
        position: absolute;
        top:214px;
        left:298px;
        color:#ffffff;
        font-size:18px;
        text-align: center;
        line-height:20px;
      }
      .right-name-box{
        z-index:5;
        position: absolute;
        top:232px;
        left:360px;
        color:#ffffff;
        font-size:18px;
        text-align: center;
        line-height:20px;
      }
      .position-num-box-1{
        z-index:5;
        width:77px;
        height:89px;
        position: absolute;
        .position-img{
          z-index:0;
          position: absolute;
          width:57px;
          height:57px;
          top:7px;
          left:10px;
          background: no-repeat;
          background-size: 100%;
          background-image: url("../../../assets/ZDimages/img_lwyy_wx@1x.png");
        }
        .num-p{
          position: absolute;
          z-index:5;
          top:28px;
          left:0;
          width:77px;
          height:18px;
          line-height:18px;
          font-size:18px;
          text-align: center;
          color:#fff;
        }
        .text-p{
          position: absolute;
          top:71px;
          left:0;
          width:77px;
          z-index:5;
          height:18px;
          line-height:18px;
          font-size:18px;
          text-align: center;
          color:#fff;
        }
      }
      .position-num-box-2{
        z-index:5;
        width:77px;
        height:89px;
        position: absolute;
        .position-img{
          z-index:0;
          position: absolute;
          width:49px;
          height:49px;
          top:11px;
          left:14px;
          background: no-repeat;
          background-size: 100%;
          background-image: url("../../../assets/ZDimages/img_lwyy_xyuan@1x.png");
        }
        .num-p{
          position: absolute;
          z-index:5;
          top:28px;
          left:0;
          width:77px;
          height:18px;
          line-height:18px;
          font-size:18px;
          text-align: center;
          color:#fff;
        }
        .text-p{
          position: absolute;
          top:71px;
          left:0;
          width:77px;
          z-index:5;
          height:18px;
          line-height:18px;
          font-size:18px;
          text-align: center;
          color:#fff;
        }
      }
      .left-position-num-box-1{
        top:76px;
        left:50px;
      }
      .left-position-num-box-2{
        top:70px;
        left:164px;
      }
      .left-position-num-box-3{
        top:200px;
        left:50px;
      }
      .left-position-num-box-4{
        top:174px;
        left:145px;
      }
      .left-position-num-box-5{
        top:276px;
        left:120px;
      }
      .right-position-num-box-1{
        top:80px;
        right:25px;
      }
      .right-position-num-box-2{
        top:70px;
        right:142px;
      }
      .right-position-num-box-3{
        top:196px;
        right:56px;
      }
      .right-position-num-box-4{
        top:176px;
        right:130px;
      }
      .right-position-num-box-5{
        top:290px;
        right:32px;
      }
      .position-back-img{
        position: absolute;
        top:110px;
        left:110px;
        width:459px;
        height:273px;
      }
      .rotate-position-img {
        animation: rotate 10s infinite linear;
      }
      @keyframes rotate {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(360deg);
        }
      }
    }
  }
</style>
