<template>
  <!-- 来电模块 -->
  <div class="incoming-telegram">
    <p><i></i><span>来电数量统计</span></p>
    <i></i><i></i>
    <div class="incoming-telegram-div">
      <span>{{ data.netAppointment}}</span><br>
      <span>日统计来电数量</span>
    </div>
    <div class="incoming-telegram-div">
      <span>{{ data.hotLine }}</span><br>
      <span>月统计来电数量</span>
    </div>
<!--    <span class="text1">接通率</span>-->
<!--    <span class="text2">接通率</span>-->
<!--    <div class="blueLadder"></div>-->
<!--    <div class="yellowLadder"></div>-->


  </div>
</template>

<script>
import echarts from "echarts";
import {HttpResetClass} from "vue-client";
export default {
  name: "IncomingTelegram",

  data(){
    return{
      data:{
        netAppointment:'', //日统计
        hotLine:'' //月统计


      }
    }
  },
  methods:{
    getrecords(){
      let http = new HttpResetClass()
      http.load('post','rs/logic/RecordQuantity',{
        data: {
        }
      },{rejectMsg:null,resolveMsg:null}).then((ress)=>{
        console.log("完成"+JSON.stringify(ress.data))
        this.data.netAppointment = ress.data.data.rishuliang||0
        this.data.hotLine = ress.data.data.yueshuliang||0
      })
    }
  },
  ready(){
    this.getrecords()
    setInterval(() => {
      this.getrecords()
    }, 5000*60)
  }


}
</script>

<style scoped>

/* 来电统计样式 */
.incoming-telegram {
  width: 23.4375vw;
  height: 51.667vh;
  background: rgba(255, 255, 255, .04);
  position: absolute;
  top: 12.315vh;
  right: 1.198vw;
}

.incoming-telegram p i {
  width: 1.458vw;
  height: 2.593vh;
  background-image: url('../../../../static/images/zhongyi/chart-2@2x.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 0 0;
  position: absolute;
  top: 2.315vh;
  left: 1.51vw;
}

.incoming-telegram i {
  width: 22.8125vw;
  height: 0.093vh;
  background-image: url('../../../../static/images/zhongyi/blueLine.png');
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  top: 6.852vh;
  left: 1.09375vw;
}

.incoming-telegram i:nth-of-type(2) {
  top: 6.667vh;
}

.incoming-telegram p span {
  font-size: 2.5vh;
  color: #FFFFFF;
  position: absolute;
  top: 1.852vh;
  left: 3.698vw;
}


.incoming-telegram-div {
  position: absolute;
  top: 13vh;
  left: 8.042vw;
  height: 13.889vh;
}

.incoming-telegram div:nth-of-type(2) {
  top: 34.185vh;
}

.incoming-telegram div span:nth-of-type(1) {
  font-size: 5vh;
  font-weight: bold;
  color: #FFCD00;
  display: block;
  text-align: center;
  margin-bottom: -2.222vh;
}

.incoming-telegram div:nth-of-type(2) span:nth-of-type(1) {
  color: #00FFEA;
}

.incoming-telegram div span:nth-of-type(2) {
  font-size: 2.037vh;
  /* font-weight: bold; */
  color: #FFFEFE;
}

.rate-top{
  width: 45%;
  height: 30% !important;
  margin: 0.093vh 0.052vw 0.093vh 11.458vw;
}
.rate-bottom{
  width: 45%;
  height: 30% !important;
  margin: 22.222vh 0.052vw 0.093vh 11.458vw;
}

.text1 {
  font-size: 2.037vh;
  font-weight: bold;
  color: #FFFEFE;
  position: absolute;
  top: 20.722vh;
  right: 3.59375vw;
}
.text2 {
  font-size: 2.037vh;
  font-weight: bold;
  color: #FFFEFE;
  position: absolute;
  top: 42.185vh;
  right: 3.59375vw;
}
.blueLadder{
  width: 4.948vw;
  height: 0.37vh;
  background: url('../../../../static/images/zhongyi/blueLadder.png') no-repeat;
  background-size: cover;
  position: absolute;
  top: 45.556vh;
  right: 2.76vw;
}
.yellowLadder{
  width: 4.948vw;
  height: 0.37vh;
  background: url('../../../../static/images/zhongyi/yellowLadder.png') no-repeat;
  background-size: cover;
  position: absolute;
  top: 24.167vh;
  right: 2.76vw;
}
/* 来电统计样式结束 */
</style>
