<template>
  <!-- 工单模块 -->
  <div class="left-1">
    <p><i class="workOrder"></i><span>今日工单统计</span></p>
    <i class="blueLine"></i>
    <i class="blueLine blueLine2"></i>
    <ul>
      <li><span>工单量</span><span class="orderQuantity">{{ data.orderQuantity }}</span></li>
      <li><span>在线处理</span><span class="onLineProcessing">{{ data.onLineProcessing }}</span></li>
      <li><span>派单量</span><span class="sendOrders">{{ data.sendOrders }}</span></li>
      <li><span>电话派单量</span><span class="orderByTelephone">{{ data.orderByTelephone }}</span></li>
      <li><span>微信客服派单量</span><span class="orderByWechat">{{ data.orderByWechat }}</span></li>
    </ul>
  </div>
</template>


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

export default {
  name: "WorkOrderPage",
  data(){
    return{
      data:{
        orderQuantity:'',
        onLineProcessing:'',
        sendOrders:'',
        orderByTelephone:'',
        orderByWechat:'',
        orderByNetHall:'',
      },
    }
  },
  props:['filialeId'],
  methods:{
    //获取所有工单数量
    getOrderQuantity(){
      let http = new HttpResetClass()
      http.load('post','api/af-revenue/logic/TelenumberWorkorders',{
        data: {
          f_orgid: this.filialeId?this.filialeId:23145 // 分公司id
        }
      },{rejectMsg:null,resolveMsg:null}).then((res)=>{
        // console.log('获取所有工单数量TelenumberWorkorders',res.data.data[0].wordercont)
        console.log("所有工单数量"+JSON.stringify(res.data))
        this.data.orderQuantity = res.data.data[0].wordercont||0
      })
    },
    //获取在线处理
    getOnLineProcessing(){
      let http = new HttpResetClass()
      http.load('post','api/af-revenue/logic/Directlyprocessedworkorder',{
        data: {
          f_orgid: this.filialeId?this.filialeId:23145 // 分公司id
        }
      },{rejectMsg:null,resolveMsg:null}).then((res)=>{
        console.log("获取在线处理"+JSON.stringify(res.data))
        this.data.onLineProcessing = res.data.data[0].zaixian||0
      })
    },
    //获取所有下派工单
    getSendOrders(){
      let http = new HttpResetClass()
      http.load('post','api/af-revenue/logic/Quantityworkorder',{
        data: {
          f_orgid: this.filialeId?this.filialeId:23145 // 分公司id
        }
      },{rejectMsg:null,resolveMsg:null}).then((res)=>{
        console.log("下派工单"+JSON.stringify(res.data))
        if (res.data.data.length > 0){
          this.data.sendOrders = res.data.data[0].handlingsum||0
        }else {
          this.data.sendOrders=0
        }
      })
    },
    //获取电话派单量
    getOrderByTelephone(){
      let http = new HttpResetClass()
      http.load('post','api/af-revenue/logic/QuantityworkorderNoWeixin',{
        data: {
          f_orgid: this.filialeId?this.filialeId:23145 // 分公司id
        }
      },{rejectMsg:null,resolveMsg:null}).then((res)=>{
        console.log("电话派单量"+JSON.stringify(res.data))
        this.data.orderByTelephone = res.data.data[0].noweixinsums||0
      })
    },
    //获取微信客服派单量
    getOrderByWechat(){
      let http = new HttpResetClass()
      http.load('post','api/af-revenue/logic/QuantityworkorderWeixin',{
        data: {
          f_orgid: this.filialeId?this.filialeId:23145 // 分公司id
        }
      },{rejectMsg:null,resolveMsg:null}).then((res)=>{
        console.log("微信客服派单量"+JSON.stringify(res.data))
        this.data.orderByWechat = res.data.data[0].weixinsums||0
      })
    },
  },
  ready(){
    this.getOrderQuantity()
    this.getOnLineProcessing()
    this.getSendOrders()
    this.getOrderByTelephone()
    this.getOrderByWechat()
    setInterval(() => {
      this.getOrderQuantity()
      this.getOnLineProcessing()
      this.getSendOrders()
      this.getOrderByTelephone()
      this.getOrderByWechat()
    }, 5000*60)
  },
  computed:{

  },
  watch: {
    'filialeId'(val){
      this.getOrderQuantity()
      this.getOnLineProcessing()
      this.getSendOrders()
      this.getOrderByTelephone()
      this.getOrderByWechat()
    }
  },
}
</script>

<style scoped>
/* 工单组件样式 */
.left-1 {
  width: 23.984375vw;
  height: 39.815vh;
  position: relative;
  top: 6.667vw;
  left: 1.354vw;
  background: #0f136c;
}
.left-1 p {
  height: 8.333vh;
}
.workOrder {
  width: 1.51vw;
  height: 2.778vh;
  background-image: url("../../../../static/images/zhongyi/workOrder.png");
  position: absolute;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: cover;
  top: 2.5vh;
  left: 1.458vw;
}
.blueLine {
  width: 22.8125vw;
  height: 0.093vh;
  background-image: url("../../../../static/images/zhongyi/blueLine.png");
  position: absolute;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: cover;
  top: 6.667vh;
  left: 0.573vw;
}
.blueLine2 {
  top: 6.759vh;
}
.left-1 p span {
  font-size: 2.5vh;
  color: #fff;
  position: relative;
  top: 2.222vh;
  left: 3.59375vw;
}
.left-1 li {
  list-style: none;
  width: 22.76vw;
  height: 4.722vh;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: cover;
  position: relative;
  border: 0.093vh dashed #fff;
  left: 1.09375vw;
}
.left-1 li:nth-of-type(1) {
  background-image: url("../../../../static/images/zhongyi/telephone2.png");
}
.left-1 li:nth-of-type(2) {
  background-image: url("../../../../static/images/zhongyi/phone3.png");
}
.left-1 li:nth-of-type(3) {
  background-image: url("../../../../static/images/zhongyi/phone4.png");
}
.left-1 li:nth-of-type(4) {
  top: 0.926vh;
  background-image: url("../../../../static/images/zhongyi/phone5.png");
}
.left-1 li:nth-of-type(5) {
  top: 0.833vh;
  background-image: url("../../../../static/images/zhongyi/weChat.png");
}
.left-1 li:nth-of-type(6) {
  top: 0.926vh;
  background-image: url("../../../../static/images/zhongyi/netHall.png");
}
.left-1 li span:nth-of-type(1) {
  font-size: 2.037vh;
  color: #fff;
  position: relative;
  top: 1.019vh;
  left: 3.385vw;
}
.left-1 li span:nth-of-type(2) {
  position: absolute;
  top: 0.648vh;
  left: 16.5625vw;
}

.orderQuantity {
  color: #FFCD00;
  font-size: 2.963vh;
  font-weight: bold;
}

.onLineProcessing {
  font-size: 2.963vh;
  font-weight: bold;
  color: #FF7E00;
}

.sendOrders {
  font-size: 2.963vh;
  font-weight: bold;
  color: #00FFEA;
}

.orderByTelephone {
  font-size: 2.315vh;
  font-weight: bold;
  color: #FFCB0D;
}

.orderByWechat {
  font-size: 2.315vh;
  font-weight: bold;
  color: #FF7E00;
}

.orderByNetHall {
  font-size: 2.315vh;
  font-weight: bold;
  color: #00FFEA;
}

/* 工单模块样式结束 */
</style>
