<template>
  <!-- 完成率组件 -->
  <div class="percentageComplete">
    <div class="view">
      <div class="pending"><i></i><span>待处理</span><span class="pendingNum">{{ data.pendingNum ?data.pendingNum:'0' }}</span></div>
      <div class="beingProcessed"><i></i><span>处理中</span><span class="beingProcessedNum">{{ data.beingProcessedNum?data.beingProcessedNum:'0' }}</span></div>
      <div class="completed"><i></i><span>已完成</span><span class="completedNum">{{ data.completedNum?data.completedNum:'0' }}</span></div>
      <div class="completedEcharts"></div>
      <div class="percentText">完成率</div>
    </div>
    <div class="data">
      <ul>
        <li><span>昨日工单</span><span class="day">{{ data.day }}</span><span>日环比</span>
          <div v-show="data.daysFrom != '0%'" :class="data.daysFrom.startsWith('-') ?'yellowArrows':'blueArrows'"></div>
          <span :class="data.daysFrom.startsWith('-') ?'lower':'increase'">{{ data.daysFrom.startsWith('-') ? data.daysFrom.substring(1) : data.daysFrom }}</span>
        </li>
        <li><span>月度工单量</span><span class="month">{{ data.month }}</span><span>月环比</span>
          <div v-show="data.onAMonthlyBasis != '0%'":class="data.onAMonthlyBasis.startsWith('-') ?'yellowArrows':'blueArrows'"></div>
          <span :class="data.onAMonthlyBasis.startsWith('-') ?'lower':'increase'">{{ data.onAMonthlyBasis.startsWith('-') ?data.onAMonthlyBasis.substring(1) : data.onAMonthlyBasis }}</span>
        </li>
        <li><span>年度工单量</span><span class="year">{{ data.year }}</span><span>同比</span>
          <div v-show="data.yoy != '0%'" :class="data.yoy.startsWith('-') ?'yellowArrows':'blueArrows'"></div>
          <span :class="data.yoy.startsWith('-') ?'lower':'increase'">{{ data.yoy.startsWith('-') ? data.yoy.substring(1) : data.yoy}}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import {HttpResetClass} from "vue-client";
import * as Util from '../../../util'

export default {
  name: "PercentageComplete",
  data(){
    return{
      f_orgid: '',
      data:{
        //待处理
        pendingNum:'',
        // 处理中
        beingProcessedNum:'',
        //已完成
        completedNum:'',
        //昨日工单
        day:'',
        //月度工单量
        month:'',
        //年度工单量
        year:'',
        //日环比、月环比、同比第一个参数，0为降，1为增长
        //日环比
        daysFrom:'',
        //月环比
        onAMonthlyBasis:'',
        //同比
        yoy:''
      }
    }
  },
  props:['filialeId'],
  methods:{
    //获取完成
    getWorkorder(){
      let http = new HttpResetClass()
      http.load('post','api/af-revenue/logic/WorkorderCompletionInformation',{
        data: {
          f_orgid: this.filialeId?this.filialeId:23145 // 分公司id
        }
      },{rejectMsg:null,resolveMsg:null}).then((ress)=>{
        console.log("完成"+JSON.stringify(ress.data))
        this.data.completedNum = ress.data.data.yiwancheng||0
        this.data.pendingNum = ress.data.data.daichuli||0
        this.data.beingProcessedNum = ress.data.data.chulizhong||0
        console.log(" this.data"+JSON.stringify(this.data))
        this.$emit('wanchenglv',ress.data.data.wanchenglv)
      })
    },
    //获取环比
    gettongyu(){
      let http = new HttpResetClass()
      http.load('post','api/af-revenue/logic/AnnulusStatistics',{
        data: {
          f_orgid: this.filialeId?this.filialeId:23145 // 分公司id
        }
      },{rejectMsg:null,resolveMsg:null}).then((res)=>{
        console.log("gettongyu"+JSON.stringify(res.data))
        this.data.daysFrom = res.data.data[0].rihuanbi||0
        this.data.onAMonthlyBasis = res.data.data[0].yuehuanbi||0
        this.data.yoy = res.data.data[0].nianhuanbi||0
      })
    },
    //获取月工单数量环
    getmonthworkoreder(){
      let http = new HttpResetClass()
      http.load('post','api/af-revenue/logic/Monthlyworkorderstatistics',{
        data: {
          f_orgid: this.filialeId?this.filialeId:23145 // 分公司id
        }
      },{rejectMsg:null,resolveMsg:null}).then((res)=>{
        console.log("getmonthworkoreder"+JSON.stringify(res.data))
        this.data.month = res.data.data[0].monthsum||0
      })
    },
    //获取天工单数量环
    getdayworkoreder(){
      let http = new HttpResetClass()
      http.load('post','api/af-revenue/logic/Dayworkorderstatistics',{
        data: {
          f_orgid: this.filialeId?this.filialeId:23145 // 分公司id
        }
      },{rejectMsg:null,resolveMsg:null}).then((res)=>{
        console.log("getdayworkoreder"+JSON.stringify(res.data))
        this.data.day = res.data.data[0].daysum||0
      })
    },
    //获取年度工单数量环
    getyearworkoreder(){
      let http = new HttpResetClass()
      http.load('post','api/af-revenue/logic/Yearworkorderstatistics',{
        data: {
          f_orgid: this.filialeId?this.filialeId:23145 // 分公司id
        }
      },{rejectMsg:null,resolveMsg:null}).then((res)=>{
        console.log("year"+JSON.stringify(res.data))
        this.data.year = res.data.data[0].yearsum||0
      })
    }
  },
  ready(){
    this.getWorkorder()
    this.gettongyu()
    this.getmonthworkoreder()
    this.getdayworkoreder()
    this.getyearworkoreder()
    setInterval(() => {
    this.getWorkorder()
    this.gettongyu()
    this.getmonthworkoreder()
    this.getdayworkoreder()
    this.getyearworkoreder()
    }, 300000)
  },
  watch: {
    'filialeId'(val){
      console.log("filialeId>>>=====",val)
      this.getWorkorder()
      this.gettongyu()
      this.getmonthworkoreder()
      this.getdayworkoreder()
      this.getyearworkoreder()
    }
  }
}
</script>

<style scoped>
/* 完成率组件样式 */
.percentageComplete {
  width: 24.198vw;
  height: 42.852vh;
  position: absolute;
  top: 53.241vh;
  left: 1.146vw;
  background: #0f136c;
}

.pending {
  width: 4.948vw;
  height: 13.981vh;
  position: absolute;
  top: 4.63vh;
  left: 0.573vw;
  border: 0.093vh dashed #fff;
}

.pending i {
  width: 93%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: 0 -0.365vw;
  background-size: cover;
  position: absolute;
  background-image: url("../../../../static/images/zhongyi/exclamationPoint.png");
  margin-left: 0.15625vw;
}

.pending span:nth-of-type(1) {
  font-size: 2.037vh;
  color: #FFFFFF;
  position: absolute;
  bottom: 9.259vh;
  left: 0.885vw;
}

.pending span:nth-of-type(2) {
  font-size: 2.963vh;
  font-weight: bold;
  color: #FF7E00;
  position: absolute;
  bottom: 12.222vh;
  left: 1.5625vw;
}

.beingProcessed {
  width: 4.948vw;
  height: 13.981vh;
  position: absolute;
  top: 4.63vh;
  left: 5.417vw;
  border: 0.093vh dashed #fff;
}

.beingProcessed i {
  width: 93%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: 0 -0.365vw;
  background-size: cover;
  position: absolute;
  background-image: url("../../../../static/images/zhongyi/refresh.png");
  margin-left: 0.15625vw;
}

.beingProcessed span:nth-of-type(1) {
  font-size: 2.037vh;
  color: #FFFFFF;
  position: absolute;
  bottom: 9.259vh;
  left: 0.885vw;
}

.beingProcessed span:nth-of-type(2) {
  font-size: 2.963vh;
  font-weight: bold;
  color: #FFCC0F;
  position: absolute;
  bottom: 12.222vh;
  left: 1.5625vw;
}

.completed {
  width: 4.948vw;
  height: 13.981vh;
  position: absolute;
  top: 4.63vh;
  left: 10.208vw;
  border: 0.093vh dashed #fff;
}

.completed i {
  width: 93%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: 0 -0.365vw;
  background-size: cover;
  position: absolute;
  background-image: url("../../../../static/images/zhongyi/Pigeon.png");
  margin-left: 0.15625vw;
}

.completed span:nth-of-type(1) {
  font-size: 2.037vh;
  color: #FFFFFF;
  position: absolute;
  bottom: 9.259vh;
  left: 0.885vw;
}

.completed span:nth-of-type(2) {
  font-size: 2.963vh;
  font-weight: bold;
  color: #01F7E6;
  position: absolute;
  bottom: 12.222vh;
  left: 1.5625vw;
}

.completedEcharts {
  width: 7.24vw;
  height: 12.87vh;
  opacity: 0.08;
  border-radius: 50%;
  position: absolute;
  top: 4.352vh;
  right: 1.146vw;
  /*background-color: #00F6FF;*/
}
.data{
  height: 1vh;
}

.data li {
  width: 22.8125vw;
  height: 4.537vh;
  position: absolute;
  /* position: relative; */
  left: 1.09375vw;
  list-style: none;
  display: inline-block;
}

.data li:nth-of-type(1) {
  width: 22.8125vw;
  height: 4.537vh;
  background-image: url('../../../../static/images/zhongyi/bluebg.png');
  background-repeat: no-repeat;
  background-size: cover;
  bottom: 16.389vh;
  border: 0.093vh dashed #fff;
}

.data li:nth-of-type(2) {
  width: 22.8125vw;
  height: 4.537vh;
  background-image: url('../../../../static/images/zhongyi/yellowbg.png');
  background-repeat: no-repeat;
  background-size: cover;
  bottom: 9.259vh;
  border: 0.093vh dashed #fff;
}

.data li:nth-of-type(3) {
  width: 22.8125vw;
  height: 4.537vh;
  background-image: url('../../../../static/images/zhongyi/bulebg2.png');
  background-repeat: no-repeat;
  background-size: cover;
  bottom: 2.037vh;
  border: 0.093vh dashed #fff;
}

.data li span:nth-of-type(1) {
  font-size: 2.037vh;
  color: #FFFFFF;
  position: relative;
  top: 0.833vh;
  left: 0.625vw;
}
.data li span:nth-of-type(2) {
  font-size: 2.5vh;
  position: absolute;
  font-weight: bold;
  top: 0.556vh;
  left: 6.823vw;
}
.day{
  color: #00D2FF;
}
.month{
  color: #FFCD00;
}
.year{
  color: #01F7E6;
}
/*.data li{*/
/*  position: relative;*/
/*}*/
.data li span:nth-of-type(3) {
  font-size: 2.037vh;
  color: #FFFFFF;
  position: absolute;
  top: 0.833vh;
  right: 7.292vw;
}
.data li span:nth-of-type(4) {
  font-size: 2.037vh;
  position: absolute;
  font-weight: bold;
  top: 0.833vh;
  right: 0.833vw;
}

.increase{
  color: #01F7E6;
}
.lower{
  color: #FF7E00;
}
.view{
  position: relative;
}
.percentText{
  width: 3.4375vw;
  height: 2.037vh;
  font-size: 2.037vh;
  font-weight: bold;
  color: #FFFFFF;
  position: absolute;
  top: 12vh;
  right: 2.917vw;
}
.blueArrows{
  width: 1.146vw;
  height: 2.037vh;
  background: url('../../../../static/images/zhongyi/blueArrows.png') no-repeat;
  background-size: cover;
  position: absolute;
  right: 5.365vw;
  top: 1.389vh;
}
.yellowArrows{
  width: 1.146vw;
  height: 2.037vh;
  background: url('../../../../static/images/zhongyi/yellowArrows.png') no-repeat;
  background-size: cover;
  position: absolute;
  right: 5.365vw;
  top: 1.389vh;
}
/* 完成率组件样式结束 */
</style>
