<template>
<div class="saleTaskList">
<ul>
<li>
<p>{{$t('salesModule.MyNewTasks')}}</p>
<div class="itemCont" id='deparmentTask'>
<div class="noDataNotice" v-if='departmetTaskList.length==0'>
<i class="iconfont icon-kong"></i>
<p>{{$t('salesModule.NoTasks')}}</p>
</div>
<div class="contTypeOne" v-for="(item,index) in departmetTaskList">
<p>
<el-popover placement="bottom" width="260" trigger="hover">
<div class="saleTaskpopover">
<p style="font-size: 14px;font-weight: bold; color: #333; margin: 10px 0;">{{item.TaskName}}</p>
<table class="saleTaskpopoverTable" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="80"><i class="iconfont icon-img-ren"></i>{{$t('salesModule.IssuedPeople')}} </td>
<td>{{item.CreateBy}}</td>
</tr>
<tr>
<td><i class="iconfont icon-ico-time"></i>{{$t('salesModule.IssuedTime')}}</td>
<td>{{item.CreateDate}}</td>
</tr>
<tr>
<td><i class="iconfont icon-ico-renwuyaoqiu"></i>{{$t('salesModule.TaskYaoQiu')}}</td>
<td><span style="color: #257BF1;">{{item.TaskNum}}{{$t('hotel.hotel_people')}}</span></td>
</tr>
<tr>
<td><i class="iconfont icon-ico-shijianfanwei"></i>{{$t('salesModule.TimeRange')}}</td>
<td>{{item.StartTime}}{{$t('restaurant.res_To')}}{{item.EndTime}}</td>
</tr>
<tr>
<td><i class="iconfont icon-ico-beizhu"></i>{{$t('salesModule.TaskRemark')}}</td>
<td>{{item.Remarks}}</td>
</tr>
</table>
</div>
<span style="font-size: 16px; color: #333; cursor: pointer;" slot="reference">{{item.TaskName}}</span>
</el-popover>
<em>{{item.CreateBy}}</em></p>
<p><el-progress :stroke-width="w12" :percentage="0" :show-text='false'></el-progress></p>
<p class="smallfont">0/{{item.TaskNum}}{{item.Unit}}</p>
</div>
</div>
</li>
<li>
<p>{{$t('salesModule.NowTask')}}</p>
<div class="itemCont width530" id='nowTask'>
<div class="noDataNotice" v-if='nowTaskList.length==0'>
<i class="iconfont icon-kong"></i>
<p>{{$t('salesModule.NoTaskIn')}}</p>
</div>
<div class="contTypeTwo" v-for="(item,index) in nowTaskList">
<el-progress type="circle" width='88' stroke-width='7' :percentage="item.rate" :color="item.color"></el-progress>
<p class="goSaleTaskDetail" @click="goUrl('saleTaskDetail',item.id,'任务详情')">{{item.taskName}}</p>
<p class="nowgo"><span @click="goNowUrl(item.taskType)">{{$t('salesModule.LijiActive')}}</span></p>
</div>
</div>
</li>
<li>
<p>{{$t('salesModule.MyZhiXing')}}<span @click="goUrl('saleTaskHistory',0,'历史任务')">{{$t('salesModule.HistoryTask')}}</span></p>
<div class="itemCont width590 myChatList">
<div id="mychart0" style="width: 130px; height: 130px;"></div>
<div id="mychart1" style="width: 130px; height: 130px;"></div>
<div id="mychart2" style="width: 130px; height: 130px;"></div>
<div id="mychart3" style="width: 130px; height: 130px;"></div>
<div id="mychart4" style="width: 130px; height: 130px;"></div>
</div>
</li>
</ul>
</div>
</template>
<script>
export default {
data(){
return{
w12:12,
w2:2,
defaultImg: 'this.src="' + require("../../assets/img/litheader.png") + '"',
allocatingTaskId:'',
isAllocatingTask:false,
isOK:false,
isDisabled:false,
membersArr:[],
membersArrCopy:[],
addTask:false,
addMsg1:{},
departmetTaskMsg:{
pageIndex:1,
pageSize:5
},
nowTaskMsg:{
pageIndex:1,
pageSize:15
},
myTaskMsg:{
pageIndex:1,
pageSize:5
},
todayTaskMsg:{
pageIndex:1,
pageSize:10,
Id:0
},
todayTaskMsgNew:{
Id:0
},
addTaskMsg:{
TaskName:'',
StartTime:'',
EndTime:'',
TaskNum:'',
TaskType:1,
Remarks:'',
UserTaskList:[],
taskTime:'',
},
addTaskTableList:[],
//返回数据
departmetTaskList:[],
nowTaskList:[],
todayTaskList:[],
todayTaskListNew:[],
departmentPowerList:[],
myTaskList:[],
taskTypeList:[],
taskMembers:{}
}
},
mounted() {
this.getDepartmetTask()
this.getNowTask()
this.getDepartmentPower()
let that=this
document.getElementById('deparmentTask').addEventListener('scroll',function(){ //部门新任务
if(this.scrollHeight-this.scrollTop===this.clientHeight){
that.departmetTaskMsg.pageIndex=Math.ceil(that.departmetTaskList.length/5)+1
that.getDepartmetTask()
}
})
document.getElementById('nowTask').addEventListener('scroll',function(){ //当前
if(this.scrollHeight-this.scrollTop===this.clientHeight){
that.nowTaskMsg.pageIndex=Math.ceil(that.nowTaskList.length/15)+1
that.getNowTask()
}
})
},
methods: {
getDepartmetTask(){
this.apipost('TaskManagemnet_get_GetSellMyTaskList',this.departmetTaskMsg,res=>{
if(res.data.resultCode==1){
this.departmetTaskList=this.departmetTaskList.concat(res.data.data.pageData)
}
},err=>{})
},
getNowTask(){
this.apipost('TaskManagemnet_post_GetEmployeeNowTask',this.nowTaskMsg,res=>{
if(res.data.resultCode==1){
this.nowTaskList=this.nowTaskList.concat(res.data.data.pageData)
}
},err=>{})
},
getDepartmentPower(){
this.apipost('TaskManagemnet_post_GetEmployeeExecutiveForce',{ID:0},res=>{
if(res.data.resultCode==1){
this.departmentPowerList=res.data.data
this.departmentPowerList.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'
}
this.$nextTick(()=>{
this.$chartsUtils.saleTaskDepartment('mychart'+index,i.taskTypeStr,i.rate,insideColor,outsideColor)
})
})
}
},err=>{})
},
goUrl (path,id,title) {
this.$router.push({ name: path,query:{"id":id,"PersonOrDepartment":1,blank:'y',tab:title} })
},
goNowUrl (type) {
// 1收客 24销售额 3会员拜访 4会员拉新 5.需求探询
if(type==1){
//this.$router.push({ name: "VisitPlan"})
}
else if(type==2){}
else if(type==3){this.$router.push({ name: "VisitPlan"}) }
else if(type==4){this.$router.push({ name: "MyCustomer"}) }
else if(type==5){this.$router.push({ name: "demandInquiry"}) }
}
}
}
</script>
<style>
.saleTaskList .noDataNotice{ text-align: center; padding-top: 80px; color: #999; font-size: 14px; }
.saleTaskList .noDataNotice>i{font-size: 120px; color: #ccc;}
.saleTaskList .noDataNotice>p{margin-top: 10px;}
.saleTaskList{position: absolute; left: 20px; top:35px; bottom: 0;}
.saleTaskList .goSaleTaskDetail{cursor: pointer;}
.saleTaskList .goSaleTaskDetail:hover{color: #E95252;}
.saleTaskList ul li{float: left; margin:10px 30px 0 0;}
.saleTaskList .itemCont::-webkit-scrollbar{width: 4px;height: 1px;}
.saleTaskList .itemCont::-webkit-scrollbar-thumb{box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);border-radius: 4px;background: #eee;}
.saleTaskList ul li .itemCont{width: 460px; height: 360px; border:1px solid #e5e5e5; background: #fff; border-radius: 4px; overflow-y: auto; padding:10px 20px;}
.saleTaskList ul li .width530{width: 530px!important;}
.saleTaskList ul li .width590{width: 590px!important;}
.saleTaskList .myChatList>div{float: left;margin:20px 25px 19px;}
.saleTaskList .itemCont .contTypeOne .el-progress__text{font-size: 14px!important;}
.saleTaskList ul li>p{height: 14px; line-height: 14px; border-left:3px solid #E95252; font-size: 14px; color: #333; margin: 20px 0; text-indent: 10px;}
.saleTaskList .addTaskTitle{height: 14px; line-height: 14px; border-left:3px solid #E95252; font-size: 14px; color: #333; margin: 20px 0; text-indent: 10px;}
.saleTaskList .contTypeOne {margin-bottom:15px ;}
.saleTaskList .contTypeOne p{font-size: 16px; color: #333;}
.saleTaskList .contTypeOne p.smallfont{font-size: 14px; color: #666;}
.saleTaskList .contTypeOne p{line-height:40px;}
.saleTaskList .contTypeOne p i{color: #E95252; cursor: pointer;}
.saleTaskList .contTypeOne p>em{color: #fff; background: #2C6ED5; font-size: 12px; font-style: normal; padding:0 2px; border-radius: 4px; margin-left:8px;}
.saleTaskList .contTypeOne p>span{font-size: 12px; color: #47BF8C;}
.saleTaskList .contTypeTwo {float: left; width: 126px; height: 156px; text-align: center; margin: 10px;}
.saleTaskList .contTypeTwo>p{font-size: 14px; color: #666;margin-top: 10px;}
.saleTaskList .itemCont .contTypeTwo .el-progress__text{font-size: 20px!important;}
.saleTaskList ul li>p>span{float: right; color: #E95252; cursor:pointer;}
.saleTaskList .itemCont .contTypeThree{margin:20px 0; overflow: hidden;line-height: 30px; height: 30px}
.saleTaskList .itemCont .contTypeThree>div{float: left; font-size: 14px;}
.saleTaskList .itemCont .contTypeThree .name{width: 100px;}
.saleTaskList .itemCont .contTypeThree .name>img{width: 24px; height: 24px; border-radius: 12px; vertical-align:middle}
.saleTaskList .itemCont .contTypeThree .department{width: 110px;}
.saleTaskList .itemCont .contTypeThree .message{width:200px;}
.saleTaskList .itemCont .contTypeThree .message>p{float: left;}
.saleTaskList .itemCont .contTypeThree .message>p>span{color:#47BF8C;}
.saleTaskList .itemCont .contTypeThree .message p.msg{max-width: 120px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap}
.saleTaskList .itemCont .contTypeThree .time{float: right; text-align: right; color: #999;}
.saleTaskpopover{padding:0 10px 10px; font-size: 12px;}
.saleTaskpopoverTable{margin: 10px 0 20px 0;}
.saleTaskpopoverTable tr{height: 34px; }
.saleTaskpopoverTable td{font-size: 12px!important; color: #666;}
.saleTaskpopoverTable td>i{margin-right: 3px; color: #d9d9d9;}
.saleTaskList .addTaskLayer{position:absolute; padding:0 20px 20px; left: 0; bottom: 0; border-bottom:1px soild #D2D2D2; width: 100%; height:520px; z-index: 5; background: #ffffff; border-top: 1px solid #D2D2D2;}
.saleTaskList .addTaskLayer .addMsg{width: 100%; height: 435px;}
.saleTaskList .addTaskLayer .addMsg>div{float: left; min-height: 300px; max-height: 435px; font-size: 12px; padding:0 13px; margin-right: 30px;}
.saleTaskList .addTaskLayer .addMsg>div>p{margin: 15px 0;}
.addTaskLayer .el-form-item__label{font-size: 12px!important;}
.addTaskLayer .el-date-editor.el-range-editor.el-input__inner.el-date-editor--daterange{border-radius: 17px;}
.el-select .el-input {border-radius: 17px;height: 34px;}
.h34 .el-range__icon,.h34 .el-range-separator{line-height: 29px;}
.addTaskLayerTable{background: #EDEDED;}
.addTaskLayerTable td{padding: 10px; background: #FFF; text-align: center;}
.addTaskLayerTable th{background: #EDEDED; padding:10px;}
.addTaskLayerTableDiv{overflow: hidden;}
.addTaskLayerTableDiv>p{display:inline-block;margin-bottom: 10px;}
.addTaskLayerTableDiv .finish{width: 56px; text-align:left;}
.addTaskLayerTableDiv .finishH{height: 30px;}
.finishNumTips{height: 12px;}
.finishNum{width: 40px;}
.nowgo{width:90px;height:30px;background:rgba(255,255,255,1);border:1px solid rgba(233,82,82,1);border-radius:15px;display: inline-block;}
.nowgo span{width:56px;height:12px;font-size:14px;font-family:MicrosoftYaHei;font-weight:400;color:rgba(233,82,82,1);cursor:pointer;display: inline-block; vertical-align: middle;text-align: center; }
</style>