<template>
<div class="salePersonManagement">
<!--<treeselect
:multiple="true"
:options="options"
:sort-value-by="sortValueBy"
v-model="value"
/>-->
<div class="searchNav">
<ul>
<li>
<span>{{$t('Operation.Op_belongDepartment')}}</span>
<treeselect class='w200 fl'
:options="departmentList"
v-model="DepartmentId"
:placeholder="$t('pub.unlimitedSel')"
:normalizer="normalizer"
/>
</li>
<li><span>{{$t('system.query_name')}}</span><el-input v-model='msg.EmName' class='w200'></el-input></li>
<li style="float: right!important;margin-right: 15px; text-align: right!important;">
<input type="button" class="normalBtn" value="查找" @click="getList();tPageIndex()"/></li>
</li>
</ul>
</div>
<div class="salePersonList">
<div class="ListItem" v-for="(item,index) in dataList">
<div class="divOne">
<div class="name">
<img v-if='!item.EmPhoto' src="../../assets/img/litheader.png"/>
<img v-if='item.EmPhoto' :onerror="defaultImg" :src='item.EmPhoto'/>
{{item.EmName}}
</div>
<div class="depatment">
<i class="iconfont icon-bumen"></i>
{{item.DepartmentName}}
</div>
</div>
<div class="divThree"></div>
<div class="divTwo">
<div class="mvp">
<span>MVP</span>
{{item.MVPCount}}{{$t('pub.Ci')}}
</div>
<div class="mup">
<span>MUP</span>
{{item.MUPCount}}{{$t('pub.Ci')}}
</div>
<div class="task">
{{$t('salesModule.NowTask')}}
<el-popover placement="bottom" :width="260" trigger="hover">
<div class="saleTaskpopover">
<p style="font-size: 14px;font-weight: bold; color: #333; margin: 10px 0px 20px 0px;">{{$t('salesModule.NowTask')}}</p>
<p v-if='item.TaskCount==0'>{{$t('objFill.v101.Rest.zhanwurenwu')}}</p>
<div v-for="i in item.SellTaskExtendList">
<p style="margin: 0px 0px 10px 0px;">{{i.TaskName}}<span class="fr">{{i.DepartmentFinishNum==null?0:i.DepartmentFinishNum}}/{{i.DepartmentTaskNum}}</span></p>
<p style="margin: 0px 0px 30px 0px;" v-if='(i.DepartmentFinishNum/i.DepartmentTaskNum)<1'><el-progress :stroke-width='ba' :percentage="(i.DepartmentFinishNum/i.DepartmentTaskNum)*100" color='#2AAEF2' :show-text='false'></el-progress></p>
<p style="margin: 0px 0px 30px 0px;" v-if='(i.DepartmentFinishNum/i.DepartmentTaskNum)>=1'> <el-progress :stroke-width='ba' :percentage="(i.DepartmentFinishNum/i.DepartmentTaskNum)*100" color='#47BF8C' :show-text='false'></el-progress></p>
</div>
</div>
<span style="font-size: 16px; font-weight: bold; color: #47BF8C; cursor: pointer;" slot="reference">{{item.TaskCount}}</span>
</el-popover>
</div>
<div class="power">
<span>{{$t('objFill.v101.champion.zonghenl')}}</span>
<el-progress type="circle" :stroke-width="w8" :width='60' :percentage="item.SynthesizeCapacity" color="#2AAEF2"></el-progress>
</div>
</div>
<div class="divThree"></div>
<div class="divFour">
<!--<input type="button" class="hollowFixedBtn" value="鹰眼" @click="goUrl('yingyanMap')"/>
-->
<input type="button" class="hollowFixedBtn" :value="$t('fnc.chakan')" @click="getEmployeePower(item);getDetail(item);getTaskList(item)"/>
</div>
</div>
</div>
<div>
<el-pagination
background
@current-change="handleCurrentChange"
:current-page.sync="currentPage"
layout="total,prev, pager, next, jumper"
:page-size=msg.pageSize
:total=total>
</el-pagination>
</div>
<div class="salePersonDetailLayer" v-show="outerVisible" @click="outerVisible=false">
<div class="salePersonLayer" @click.stop>
<p class="name">{{employeeMsg.EmName}} {{$t('objFill.v101.Rest.ziliaokai')}}</p>
<div class="detail">
<div class="dOne">
<img v-if='!employeeMsg.EmPhoto' src="../../assets/img/litheader.png"/>
<img v-if='employeeMsg.EmPhoto' :onerror="defaultImg" :src='employeeMsg.EmPhoto'/>
<p style="font-size: 18px">{{employeeMsg.EmName}}</p>
<p style="margin: 12px 0 25px;"><span class="rank">
{{employeeMsg.Ranking}}</span></p>
<p class="oneItem"><span>{{$t('salesModule.Age')}}</span>{{employeeMsg.ageStr}}</p>
<p class="oneItem"><span>{{$t('objFill.ruzhi')}}</span>{{employeeMsg.EmEntry}}</p>
<p class="oneItem"><span>{{$t('admin.admin_Post')}}</span>{{employeeMsg.PostName}}</p>
</div>
<div class="dSplit"></div>
<div class="dTwo">
<div v-for="i in employeeMsg.SellEmployeeCapacityList">
<p>【{{i.TaskTypeStr}}{{$t('objFill.v101.Rest.nengli')}}】</p>
<p>{{i.Capacity}}</p>
</div>
</div>
<div class="dSplit"></div>
<div class="dFour">
<div id="mychart0"></div>
<div id="mychart1"></div>
<div id="mychart2"></div>
<div id="mychart3"></div>
<div id="mychart4"></div>
</div>
<div class="dSplit"></div>
<div class="dThree">
<p style="margin-bottom: 15px;">【{{$t('objFill.v101.champion.zonghenl')}}】</p>
<el-progress type="circle" :width='120' :percentage="employeeMsg.SynthesizeCapacity==null?0:employeeMsg.SynthesizeCapacity" color="#f90"></el-progress>
<div>
<p>
<span class="mvp">MVP</span>
<br/>
{{employeeMsg.MVPCount==null?0:employeeMsg.MVPCount}}
</p>
<p>
<span class="mup">MUP</span>
<br/>
{{employeeMsg.MUPCount==null?0:employeeMsg.MUPCount}}
</p>
<p>
<span class="ts">{{$t('salesModule.Complaints')}}</span>
<br/>
{{employeeMsg.ComplaintCount==null?0:employeeMsg.ComplaintCount}}
</p>
</div>
</div>
</div>
<div class="listTitle">
<span>{{$t('ground.yuefen')}}</span>
<span>{{$t('objFill.v101.Rest.lakeshu')}}</span>
<span>{{$t('sm.salemoney')}}</span>
<span>{{$t('objFill.v101.Rest.huiyuanbf')}}</span>
<span>{{$t('objFill.v101.Rest.huiyuanlaxin')}}</span>
<span>{{$t('objFill.v101.Rest.xunqiutanx')}}</span>
</div>
<div class="listCont" id="listCont">
<p style="text-align: center; padding: 20px 0; font-size: 16px; letter-spacing: 1px;" v-if='monthTaskList.length<1'>{{$t('system.content_noData')}}</p>
<li v-for="item in monthTaskList">
<span>{{item.sTime}}</span>
<span><i class="iconfont icon-bumen"></i>{{item.taskNum1}}</span>
<span><i class="iconfont icon-jinrixiaoshoue"></i>{{item.taskNum2}}</span>
<span><i class="iconfont icon-banben"></i>{{item.taskNum3}}</span>
<span><i class="iconfont icon-xinzengkehu-copy"></i>{{item.taskNum4}}</span>
<span><i class="iconfont icon-img_xlgl"></i>{{item.taskNum5}}</span>
</li>
</div>
<div class="total">
<span>{{$t('objFill.v101.Rest.jilei')}}</span>
<span v-for="item in employeeMsg.SellEmployeeCapacityList">
{{item.TotalCapacity}}
</span>
</div>
</div>
</div>
</div>
</template>
<script>
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
components: { Treeselect },
data(){
return{
sortValueBy: 'ORDER_SELECTED',
normalizer(node) {
return {
id: node.DepartmentId,
label: node.DepartmentName,
children: node.ChildList,
}
},
w8:2,
ba:8,
currentPage: 1,
outerVisible:false,
DepartmentId:null,
msg:{
RB_Department_Id:-1,
EmName:'',
pageIndex:1,
pageSize:5
},
monthMsg:{
ID:'-1',
pageIndex:1,
pageSize:20,
},
defaultImg: 'this.src="' + require("../../assets/img/litheader.png") + '"',
total:0,
//返回数据
dataList:[],
monthTaskList:[],
EmployeePowerList:[],
departmentList:[],
employeeMsg:{},
}
},
methods:{
getDepartment(){
this.apipost('Advertising_get_GetNowDepartmentAndSubordinate',{},res=>{
if(res.data.resultCode==1){
this.departmentList=res.data.data
}else{
this.$message.error(res.data.message)
}
},err=>{})
},
getDetail(obj){
this.monthTaskList=[]
this.apipost("TaskManagemnet_get_GetEmpSellBaseCapacity",{ID:obj.EmployeeId},res=>{
if(res.data.resultCode==1){
this.outerVisible=true
this.employeeMsg=res.data.data
}else{
this.$message.error(res.data.message)
}
},err=>{})
},
getEmployeePower(obj){
this.apipost('TaskManagemnet_post_GetEmployeeExecutiveForce',{ID:obj.EmployeeId},res=>{
if(res.data.resultCode==1){
this.EmployeePowerList=res.data.data
this.EmployeePowerList.forEach((i,index)=>{
let insideColor
let outsideColor
if(i.rate==0){
insideColor='#999999'
outsideColor='#999999'
}else if(i.rate<50&&i.rate>0){
insideColor='#E85252'
outsideColor='#FFDDDD'
}else if(50<=i.rate&&i.rate<80){
insideColor='#FFBA1F'
outsideColor='#FFE09B'
}else if(80<=i.rate&&i.rate<100){
insideColor='#2AAEF2'
outsideColor='#BDE9FF'
}else if(i.rate==100){
insideColor='#47BF8C'
outsideColor='#47BF8C'
}
// setTimeout( this.$chartsUtils.saleTaskDepartment('mychart'+index,i.taskTypeStr,i.rate,insideColor,outsideColor) ,3000)
this.$nextTick(()=>{
this.$chartsUtils.saleTaskDepartment('mychart'+index,i.taskTypeStr,i.rate,insideColor,outsideColor)
})
})
}
},err=>{})
},
getTaskList(obj){
this.monthMsg.ID=obj.EmployeeId
this.apipost('TaskManagemnet_get_GetMonthStatistics',this.monthMsg,res=>{
if(res.data.resultCode==1){
this.$nextTick(()=>{
this.monthTaskList=this.monthTaskList.concat(res.data.data.pageData)
})
}
},err=>{})
},
getList(){
if( this.DepartmentId==null){
this.msg.RB_Department_Id='-1'
}
else{
this.msg.RB_Department_Id=this.DepartmentId
}
this.apipost('TaskManagemnet_get_GetEmpByDepartmentIds',this.msg,res=>{
if(res.data.resultCode==1){
this.dataList=res.data.data.pageData
this.total = res.data.data.count;
}
},err=>{})
},
tPageIndex() {//查询初始化页码
this.msg.pageIndex = 1;
this.currentPage = 1
},
handleCurrentChange(val) {//翻页功能按钮
this.msg.pageIndex = val;
this.getList();
},
goUrl (path,id) {
this.$router.push({ name: path})
},
},
mounted(){
this.getList()
this.getDepartment()
let that=this
document.getElementById('listCont').addEventListener('scroll',function(){ //部门新任务
if(this.scrollHeight-this.scrollTop===this.clientHeight){
that.monthMsg.pageIndex=Math.ceil(that.monthTaskList.length/20)+1
that.getTaskList()
}
})
},
}
</script>
<style>
.salePersonManagement .searchNav{width:100%;height:40px;line-height: 40px; margin-top: 20px;}
.salePersonManagement .searchNav li{float:left; width:350px;font-size:14px}
.salePersonManagement .searchNav li>span{float: left; width: 120px; height: 40px; line-height: 40px; text-align: right; padding-right: 10px;}
.salePersonList .ListItem{width:1660px; height: 100px; margin-top: 20px; font-size: 14px; color: #333;}
.salePersonList .ListItem:hover{box-shadow: 2px 2px 5px rgba(0,0,0,.1);}
.salePersonList .ListItem>div{float: left; background: #fff; height: 100px;}
.salePersonList .ListItem .divOne{width: 350px; border-radius: 4px 8px 8px 4px; padding:30px 20px; line-height: 20px;}
.salePersonList .ListItem .divOne>div{float: left;}
.salePersonList .ListItem .divOne .name{width: 150px; line-height: 40px;}
.salePersonList .ListItem .divOne .name>img{width: 40px; height: 40px; border-radius: 20px; float: left; margin-right: 10px;}
.salePersonList .ListItem .divOne .depatment{width: 150px; line-height: 40px;}
.salePersonList .ListItem .divTwo{width: 1000px; border-radius:8px; line-height: 40px;}
.salePersonList .ListItem .divTwo>div{float: left;width: 240px; padding:30px 20px;}
.salePersonList .ListItem .divTwo .mvp>span{background:#FAA915; color: #fff; padding: 0 3px; border-radius: 4px;margin-right: 3px;}
.salePersonList .ListItem .divTwo .mup>span{background:#cccccc; color: #fff; padding: 0 3px; border-radius: 4px; margin-right: 3px;}
.salePersonList .ListItem .divTwo .power{padding: 10px 0;}
.salePersonList .ListItem .divTwo .power>span{float: left;margin: 20px 10px 0 0;}
.salePersonList .ListItem .divTwo .power>div{margin-top: 10px;}
.salePersonList .ListItem .divThree{ height:84px; margin-top: 8px; width: 1px; border-left: 1px dashed #DCDFE6;}
.salePersonList .ListItem .divFour{width: 308px; border-radius:8px; padding:30px;text-align: center;}
.notitle .el-dialog__header{display: none!important}
.notitle .el-dialog__body{padding: 0!important; max-height: 632px!important;}
.salePersonDetailLayer{position: fixed;width: 100%; height: 100%; z-index: 9999; background: rgba(0,0,0,.6); left: 0; top: 0;}
.salePersonLayer{width:1006px; left: 50%; top: 50%; position: absolute; margin-left: -503px; margin-top: -316px; height:632px; padding: 20px 23px 20px 0; background: url(../../assets/img/saleTaskLayerBg.png)no-repeat center center; color: #fff;}
.salePersonLayer>p.name{border-left: 3px solid #fff; margin-left: 23px; text-indent: 10px; height: 14px; line-height: 14px; margin-bottom: 20px;}
.salePersonLayer .detail{overflow: hidden;}
.salePersonLayer .detail>div{float: left; height: 310px;}
.salePersonLayer .detail .dOne{width: 163px; text-align: center;}
.salePersonLayer .detail .dOne>img{width: 80px; height: 80px; border-radius: 40px; margin: 10px 0 10px 0; clear: both;}
.salePersonLayer .detail .dOne .rank{width: 60px;height: 20px; text-align: center; line-height: 20px; font-size: 14px; display:inline-block; background: #E95252; border-radius: 10px;}
.salePersonLayer .detail .dOne .oneItem{width: 120px; text-align: left; margin-left: 23px; height: 24px; line-height: 24px; border-radius: 12px; margin-top: 12px; background: rgba(255,255,255,.2); font-size: 12px; text-indent: 10px;}
.salePersonLayer .detail .dOne .oneItem>span{color: #999; margin-right: 10px;}
.salePersonLayer .detail .dTwo{width: 290px;}
.salePersonLayer .detail .dTwo>div{float: left; width: 145px; height: 110px; text-align: center;}
.salePersonLayer .detail .dTwo>div>p:last-child{font-size: 48px; color: #2AAEF2; margin-top: 20px;}
.salePersonLayer .detail .dThree{width: 230px; text-align: center; float: right;}
.salePersonLayer .detail .dThree>div>p{float: left; width:76px; text-align: center; font-size: 30px;margin-top: 40px;}
.salePersonLayer .detail .dThree>div>p>span{display: inline-block;width: 40px;margin: 0 0 10px 8px; height: 16px; font-size: 12px; border-radius: 8px; color: #fff; line-height: 16px; text-align: center;}
.salePersonLayer .detail .dThree .mvp{background:#FAA915}
.salePersonLayer .detail .dThree .mup{background:#ccc}
.salePersonLayer .detail .dThree .ts{background:#E95252}
.salePersonLayer .detail .dSplit{width: 1px; border-left: 1px dashed #B3B3B3;}
.salePersonLayer .detail .dFour{width: 290px;}
.salePersonLayer .detail .dFour>div{float: left; width: 120px; height:110px; text-align: center;margin-left: 15px;}
.salePersonLayer .listTitle{width: 960px; margin-left: 23px; height: 38px; line-height: 38px; background:#0042AF; text-indent: 30px; margin-top: 30px; border-radius: 4px 4px 0 0;}
.salePersonLayer .listTitle>span{float: left; width: 160px;}
.salePersonLayer .total{width: 960px; margin-left: 23px; height: 38px; line-height: 38px; background: rgba(255,255,255,.2); text-indent: 30px; border-radius:0 0 4px 4px}
.salePersonLayer .total>span{float: left; width: 160px; font-weight: bold; color: #FAA915;}
.salePersonLayer .total>span:first-child{color: #fff;}
.salePersonLayer .listCont{width: 960px; margin-left: 23px;height: 114px; overflow-y: auto;}
.salePersonLayer .listCont li{height: 38px; line-height: 38px;}
.salePersonLayer .listCont li:nth-child(2n+1){background: transparent;}
.salePersonLayer .listCont li:nth-child(2n){background: rgba(255,255,255,.2);}
.salePersonLayer .listCont li:hover{background: #fff;color: #333;}
.salePersonLayer .listCont li>span{float: left; width: 160px;text-indent: 30px;}
.salePersonLayer .listCont li>span:last-child{width: 156px;}
.salePersonLayer .listCont li>span>i{margin-right: 3px;}
.listCont::-webkit-scrollbar{width: 4px;height: 1px;}
.listCont::-webkit-scrollbar-thumb{box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);border-radius: 4px;background: #999;}
</style>