Skip to content

S
SuperMan
Commit ac3de38d authored by 黄媛媛's avatar 黄媛媛
Browse files
Options

update

parent 821dedcf
Hide whitespace changes
Inline Side-by-side
Showing with 743 additions and 0 deletions
src/components/activity/PerCompetition.vue 0 → 100644
View file @ ac3de38d
<style>
.PerCompetition{
background: rgb(16,25,53);
padding:20px;
box-sizing: border-box;
width: calc(100% + 40px);
margin: 0 -20px;
}
.PerCompetition .head{
height: 88px;
width: 100%;
background: url('../../assets/img/competion/top.png');
background-size:100% 100%;
}
.PerCompetition .monthcol{
padding-top: 36px;
}
.PerCompetition .monthcol span{
background: url('../../assets/img/competion/monthb.png');
background-size:100% 100%;
display: inline-block;
width: 114px;
height: 55px;
text-align: center;
margin-right: 20px;
font-size:30px;
font-family:PangMenZhengDao;
font-weight:400;
color:rgba(73,89,125,1);
cursor: pointer;
}
.PerCompetition .monthcol .active{
background: url('../../assets/img/competion/montha.png')!important;
background-size:100% 100%!important;
}
.PerCompetition .Pingbi{
height: 482px;
background: url('../../assets/img/competion/Pingbi.png');
background-size:100% 100%;
}
.PerCompetition .Pingbi .personNum{
display: inline-block;
border:1px solid rgba(2, 60, 160, 1);
border-radius:17px;
padding: 6px 22px;
}
.PerCompetition .Pingbi .rankDiv{
height: 390px;
width: 90%;
margin:0 auto;
margin-top: 10px;
background: url('../../assets/img/competion/phtoprank.png') bottom no-repeat;
background-size:contain;
position: relative;
}
.PerCompetition .Pingbi .rankDiv .imgDiv1{
width: 198px;
height: 198px;
background: url('../../assets/img/competion/quan1.png')no-repeat;
background-size:100% 100%;
position: relative;
margin-top:35px;
}
.PerCompetition .Pingbi .rankDiv .imgDiv2{
width: 240px;
height: 240px;
background: url('../../assets/img/competion/quan2.png')no-repeat;
background-size:100% 100%;
position: relative;
}
.PerCompetition .Pingbi .rankDiv .imgDiv3{
width: 198px;
height: 198px;
background: url('../../assets/img/competion/quan3.png')no-repeat;
background-size:100% 100%;
position: relative;
margin-top:35px;
}
.PerCompetition .Pingbi .rankDiv .imgDiv{
color:#121534;
display: flex;
align-items: center;
justify-content: center;
}
.PerCompetition .Pingbi .rankDiv .imgDiv img{
width: 68%;
height: 68%;
margin-top: 4%;
border-radius: 50%;
box-shadow: 0 0 5px 0 #fff;
}
.PerCompetition .Pingbi .rankDiv .imgDiv .desDiv{
text-align: center;
position: absolute;
bottom: -20px;
width: 100%;
}
.PerCompetition .Pingbi .rankDiv .imgDiv .desSpan{
display: inline-block;
padding: 2px 10px;
border-radius: 20px;
}
.PerCompetition .Pingbi .rankDiv .imgDiv .desSpan1{
background: #fff;
box-shadow: 0 0 5px 0 #fff;
}
.PerCompetition .Pingbi .rankDiv .imgDiv .desSpan2{
background: #FFF029;
box-shadow: 0 0 5px 0 #FFF029;
}
.PerCompetition .Pingbi .rankDiv .imgDiv .desSpan3{
background: #F5DBC0;
box-shadow: 0 0 5px 0 #F5DBC0;
}
.PerCompetition .zousi{
height: 482px;
background: url('../../assets/img/competion/zousi.png');
background-size:100% 100%;
}
.PerCompetition .zousi .colorSpan{
display: inline-block;
width:10px;
height:10px;
}
.PerCompetition .zousi .zouTitle0 .colorSpan{
background:rgba(242,67,133,1);
}
.PerCompetition .zousi .zouTitle1 .colorSpan{
background:rgb(255, 163, 154);
}
.PerCompetition .zousi .zouTitle2 .colorSpan{
background:rgb(2, 60, 160);
}
.PerCompetition .grPingbi{
/* height: 482px; */
background: url('../../assets/img/competion/grpingbi.png');
background-size:100% 100%;
padding: 20px 0;
box-sizing: border-box;
}
.PerCompetition .grPingbi .grDiv{
background: url('../../assets/img/competion/grdiv.png');
background-size:100% 100%;
width: 95%;
margin:10px auto;
padding: 20px 0;
}
.PerCompetition .grPingbi .grItem{
width: 200px;
display: inline-block;
text-align: center;
margin: 15px 0;
}
.PerCompetition .grPingbi .grItem .imgbg{
width: 125px;
height: 125px;
display: inline-block;
position: relative;
}
.PerCompetition .grPingbi .grItem .imgbg .imgDiv{
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
top: 0;
left: 0;
padding: 8px;
box-sizing: border-box;
}
.PerCompetition .grPingbi .grItem .imgbg .imgDiv img{
width: 100%;
height: 100%;
border-radius: 50%;
}
.PerCompetition .el-progress /deep/ path:first-child {
stroke: #1B386D;
}
.PerCompetition .grPingbi .grItem .imgbg .imgnum{
position: absolute;
width: 36px;
height: 36px;
top: -19px;
left: 5px;
}
.PerCompetition .xinren{
background: url('../../assets/img/competion/xinren.png');
background-size:100% 100%;
}
.PerCompetition .xinren .xinrenItem{
background: url('../../assets/img/competion/xrItem.png');
background-size:100% 100%;
height: 232px;
}
.PerCompetition .xinren .xinrenItem .imgDiv{
height: 133px;
width: 184px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.PerCompetition .xinren .xinrenItem .imgDiv1{
background: url('../../assets/img/competion/xr1.png');
background-size:100% 100%;
}
.PerCompetition .xinren .xinrenItem .imgDiv2{
background: url('../../assets/img/competion/xr2.png');
background-size:100% 100%;
}
.PerCompetition .xinren .xinrenItem .imgDiv3{
background: url('../../assets/img/competion/xr3.png');
background-size:100% 100%;
}
.PerCompetition .xinren .xinrenItem .imgDiv img{
width: 110px;
height: 110px;
border-radius: 50%;
margin-top: 57px;
}
.PerCompetition .xinren .info p{
color:#fff;
margin-top:19px;
}
.PerCompetition .xinren .info p span:nth-child(1){
font-size:16px;
font-family:Microsoft YaHei;
font-weight:400;
color:#EDEDED;
display: inline-block;
width: 58px;
}
.PerCompetition .monthbg{
background: url('../../assets/img/competion/monthbg.png');
background-size:100% 100%;
}
</style>
<template>
<div class="PerCompetition" v-loading="loading">
<el-row class="head">
<el-col class="monthcol" :span="8">
<span @click="ChangeMoth(9)" :class="monthactive==9?'active':''">9月</span>
<span @click="ChangeMoth(10)" :class="monthactive==10?'active':''">10月</span>
<span @click="ChangeMoth(11)" :class="monthactive==11?'active':''">11月</span>
</el-col>
<el-col :span="8" style="color:#fff;text-align:center">
<p style="font-size:34px;padding-top:10px">2019印象集团杯业绩竞赛</p>
<p style="font-size:14px">Performance Competition</p>
</el-col>
</el-row>
<!-- A组 -->
<el-row style="margin-top:20px">
<el-col class="Pingbi" :span="11">
<el-row style="padding-top:15px">
<el-col :span="8" style="margin-top:10px">
<img style="width:51px;height:23px;margin-left:10px" src="../../assets/img/competion/row.png" alt="">
<span style="color:#fff;font-size:26px">团体月冠亚季评比</span>
</el-col>
<el-col :span="8">
<p style="color:#FA9801;font-size:26px;text-align:center">A组</p>
</el-col>
</el-row>
<el-row class="rankDiv">
<el-col :span="7">
<div v-for="(item,index) in depAList" :key="index" v-if="index==1" class="imgDiv imgDiv1">
<img style="margin-top:10%" :src="item.Photo" alt="" :onerror="defaultImg">
<div class="desDiv">
<span class="desSpan desSpan1">
<p style="font-weight:700;font-size:14px">NO.2 {{item.DepName}}</p>
<p style="font-size:12px">收客数：{{item.TotalNum}}</p>
</span>
</div>
</div>
</el-col>
<el-col :span="1">&nbsp;</el-col>
<el-col :span="8">
<div v-for="(item,index) in depAList" :key="index" v-if="index==0" class="imgDiv imgDiv2">
<img :src="item.Photo" alt="" :onerror="defaultImg">
<div class="desDiv" style="bottom:-8px">
<span class="desSpan desSpan2">
<p style="font-weight:700;font-size:14px">NO.1 {{item.DepName}}</p>
<p style="font-size:12px">收客数：{{item.TotalNum}}</p>
</span>
</div>
</div>
</el-col>
<el-col :span="1">&nbsp;</el-col>
<el-col :span="7">
<div v-for="(item,index) in depAList" :key="index" v-if="index==2" class="imgDiv imgDiv3">
<img style="margin-top:7%" :src="item.Photo" alt="" :onerror="defaultImg">
<div class="desDiv">
<span class="desSpan desSpan3">
<p style="font-weight:700;font-size:14px">NO.3 {{item.DepName}}</p>
<p style="font-size:12px">收客数：{{item.TotalNum}}</p>
</span>
</div>
</div>
</el-col>
</el-row>
</el-col>
<el-col :span="1">&nbsp;</el-col>
<el-col class="zousi" :span="12">
<el-row style="padding-top:15px">
<el-col :span="8" style="margin-top:10px">
<img style="width:51px;height:23px;margin-left:10px" src="../../assets/img/competion/row.png" alt="">
<span style="color:#fff;font-size:26px">团体业绩走势</span>
</el-col>
<el-col :span="16" style="margin-top: 18px;">
<span :class="`zouTitle${index}`" v-for="(item,index) in depATrendList" :key="index+50" style="color:#fff;font-size:12px;margin-right:15px">
<span class="colorSpan"></span>
<span>{{item.DepName}}：总收客</span>
<span style="color:#FA9801;">{{item.TotalNum}}</span>
</span>
</el-col>
</el-row>
<div id="chartsMap" class="bgDiv" style="height:400px;width:100%;padding:20px 10px"></div>
</el-col>
</el-row>
<!-- B组 -->
<el-row style="margin-top:20px">
<el-col class="Pingbi" :span="11">
<el-row style="padding-top:15px">
<el-col :span="8" style="margin-top:10px">
<img style="width:51px;height:23px;margin-left:10px" src="../../assets/img/competion/row.png" alt="">
<span style="color:#fff;font-size:26px">团体月冠亚季评比</span>
</el-col>
<el-col :span="8">
<p style="color:#FA9801;font-size:26px;text-align:center">B组</p>
</el-col>
</el-row>
<el-row class="rankDiv">
<el-col :span="7">
<div v-for="(item,index) in depBList" :key="index" v-if="index==1" class="imgDiv imgDiv1">
<img style="margin-top:10%" :src="item.Photo" alt="" :onerror="defaultImg">
<div class="desDiv">
<span class="desSpan desSpan1">
<p style="font-weight:700;font-size:14px">NO.2 {{item.DepName}}</p>
<p style="font-size:12px">收客数：{{item.TotalNum}}</p>
</span>
</div>
</div>
</el-col>
<el-col :span="1">&nbsp;</el-col>
<el-col :span="8">
<div v-for="(item,index) in depBList" :key="index" v-if="index==0" class="imgDiv imgDiv2">
<img :src="item.Photo" alt="" :onerror="defaultImg">
<div class="desDiv" style="bottom:-8px">
<span class="desSpan desSpan2">
<p style="font-weight:700;font-size:14px">NO.1 {{item.DepName}}</p>
<p style="font-size:12px">收客数：{{item.TotalNum}}</p>
</span>
</div>
</div>
</el-col>
<el-col :span="1">&nbsp;</el-col>
<el-col :span="7">
<div v-for="(item,index) in depBList" :key="index" v-if="index==2" class="imgDiv imgDiv3">
<img style="margin-top:7%" :src="item.Photo" alt="" :onerror="defaultImg">
<div class="desDiv">
<span class="desSpan desSpan3">
<p style="font-weight:700;font-size:14px">NO.3 {{item.DepName}}</p>
<p style="font-size:12px">收客数：{{item.TotalNum}}</p>
</span>
</div>
</div>
</el-col>
</el-row>
</el-col>
<el-col :span="1">&nbsp;</el-col>
<el-col class="zousi" :span="12">
<el-row style="padding-top:15px">
<el-col :span="8" style="margin-top:10px">
<img style="width:51px;height:23px;margin-left:10px" src="../../assets/img/competion/row.png" alt="">
<span style="color:#fff;font-size:26px">团体业绩走势</span>
</el-col>
<el-col :span="16" style="margin-top: 18px;">
<span :class="`zouTitle${index}`" v-for="(item,index) in depBTrendList" :key="index+50" style="color:#fff;font-size:12px;margin-right:15px">
<span class="colorSpan"></span>
<span>{{item.DepName}}：总收客</span>
<span style="color:#FA9801;">{{item.TotalNum}}</span>
</span>
</el-col>
</el-row>
<div id="chartsMap2" class="bgDiv" style="height:400px;width:100%;padding:20px 10px"></div>
</el-col>
</el-row>
<!-- 个人评比 -->
<div class="grPingbi" style="margin-top:20px">
<div style="margin-top:10px">
<img style="width:51px;height:23px;margin-left:10px" src="../../assets/img/competion/row.png" alt="">
<span style="color:#fff;font-size:26px">个人评比</span>
</div>
<div class="grDiv">
<div v-if="index==0" v-for="(item,index) in GRList" :key="index+500" class="grItem">
<div class="imgbg">
<img class="imgnum" src="../../assets/img/competion/num1.png" alt="">
<el-progress :show-text="false" color="#FA9801" :stroke-width="10" type="circle" :percentage="item.Avg"></el-progress>
<div class="imgDiv">
<img :rc="item.Photo" alt="">
</div>
</div>
<p style="color:#FA9801;font-size:18px;font-weight:600">团队NO.1</p>
<p style="color:#46C3F1;font-size:12px">收客{{item.TotalNum}}人 | {{item.EmpName}}</p>
</div>
<div v-if="index==1" v-for="(item,index) in GRList" :key="index+500" class="grItem">
<div class="imgbg">
<img class="imgnum" src="../../assets/img/competion/num2.png" alt="">
<el-progress :show-text="false" color="#FAFAFB" :stroke-width="10" type="circle" :percentage="item.Avg"></el-progress>
<div class="imgDiv">
<img :rc="item.Photo" alt="" :onerror="defaultImg">
</div>
</div>
<p style="color:#FA9801;font-size:18px;font-weight:600">团队NO.2</p>
<p style="color:#46C3F1;font-size:12px">收客{{item.TotalNum}}人 | {{item.EmpName}}</p>
</div>
<div v-if="index==2" v-for="(item,index) in GRList" :key="index+500" class="grItem">
<div class="imgbg">
<img class="imgnum" src="../../assets/img/competion/num3.png" alt="">
<el-progress :show-text="false" color="#F5DBC0" :stroke-width="10" type="circle" :percentage="item.Avg"></el-progress>
<div class="imgDiv">
<img :rc="item.Photo" alt="" :onerror="defaultImg">
</div>
</div>
<p style="color:#FA9801;font-size:18px;font-weight:600">团队NO.3</p>
<p style="color:#46C3F1;font-size:12px">收客{{item.TotalNum}}人 | {{item.EmpName}}</p>
</div>
<div v-if="index>2" v-for="(item,index) in GRList" :key="index+500" class="grItem">
<div class="imgbg">
<el-progress :show-text="false" color="#023CA0" :stroke-width="10" type="circle" :percentage="item.Avg"></el-progress>
<div class="imgDiv">
<img :rc="item.Photo" alt="" :onerror="defaultImg">
</div>
</div>
<p style="color:#FA9801;font-size:18px;font-weight:600">团队NO.{{index+1}}</p>
<p style="color:#46C3F1;font-size:12px">收客{{item.TotalNum}}人 | {{item.EmpName}}</p>
</div>
</div>
</div>
<!--新人评比 -->
<el-row style="margin-top:20px">
<el-col class="xinren" :span="17" style="height:372px">
<div style="margin-top:30px">
<img style="width:51px;height:23px;margin-left:10px" src="../../assets/img/competion/row.png" alt="">
<span style="color:#fff;font-size:26px">新人月冠亚季评比</span>
</div>
<el-row style="padding:0 30px;box-sizing:border-box">
<el-col v-for="(item,index) in XRList" v-if="index<3" :key="index+10000" style="padding:15px;box-sizing:border-box" :span="8">
<div class="xinrenItem">
<p style="font-size:22px;font-weight:600;color:#fff;text-align:center;padding-top: 13px;">NO.{{item.Rank}}</p>
<el-row style="margin-top: 20px;">
<el-col :span="12" style="padding-left:10px">
<div class="imgDiv" :class="`imgDiv${index+1}`">
<img :src="item.Photo" alt="" :onerror="defaultImg">
</div>
</el-col>
<el-col class="info" :span="12">
<p>
<span>公司</span>
<span>{{item.BName}}</span>
</p>
<p>
<span>姓名</span>
<span>{{item.EmpName}}</span>
</p>
<p>
<span>收客数</span>
<span>总计{{item.TotalNum}}</span>
</p>
</el-col>
</el-row>
</div>
</el-col>
</el-row>
</el-col>
<el-col :span="1">&nbsp;</el-col>
<el-col class="monthbg" :span="6" style="height:372px">
<div style="margin-top:30px">
<img style="width:51px;height:23px;margin-left:10px" src="../../assets/img/competion/row.png" alt="">
<span style="color:#fff;font-size:26px">月度对比</span>
</div>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
data() {
return {
defaultImg: 'this.src="' + require('../../assets/img/litheader.png') + '"',
loading:false,
Month:'2019-09',
depAList:[],
depBList:[],
depATrendList:[],
depAXser:[],
depAYser:[],
depBTrendList:[],
depBXser:[],
depBYser:[],
GRList:[],
XRList:[],
monthactive:9,
};
},
mounted() {
this.GetData();
},
filters: {
},
methods: {
ChangeMoth(num){
if(num==9){
this.Month='2019-09';
}
if(num==10){
this.Month='2019-10';
}
if(num==11){
this.Month='2019-11';
}
this.monthactive=num;
this.GetData();
},
GetData(){
this.loading=true;
this.apipost('sellorder_get_GetCompanyTrophyCompetitionRank', {Month:this.Month}, res => {
console.log("res.data",res.data)
this.loading=false;
if (res.data.resultCode == 1) {
this.depAList=res.data.data.depAList;
this.depBList=res.data.data.depAList;
this.depATrendList=res.data.data.depATrendList;
this.depBTrendList=res.data.data.depBTrendList;
this.GRList=res.data.data.GRList;
this.XRList=res.data.data.XRList;
if(this.depATrendList.length>0){
this.depAXser=[];
this.depAYser=[];
this.depATrendList[0].MonthList.forEach(item=>{
this.depAXser.push(item.Day);
})
this.depATrendList.forEach(item=>{
let obj={
name:item.DepName,
type:'line',
stack: '总量',
data:[],
};
item.MonthList.forEach(val=>{
obj.data.push(val.Num);
})
this.depAYser.push(obj)
})
}
if(this.depBTrendList.length>0){
this.depBXser=[];
this.depBYser=[];
this.depBTrendList[0].MonthList.forEach(item=>{
this.depBXser.push(item.Day);
})
this.depBTrendList.forEach(item=>{
let obj={
name:item.DepName,
type:'line',
stack: '总量',
data:[],
};
item.MonthList.forEach(val=>{
obj.data.push(val.Num);
})
this.depBYser.push(obj)
})
}
this.LineChart();
this.LineChart2();
} else {
}
}, err => {
})
},
LineChart(){
var that = this;
var myChart = this.$echarts.init(document.getElementById('chartsMap'));
var option={
title: {
color:"#2C3343"
},
// 提示框
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
boundaryGap: false,
axisLine: {
lineStyle: {
// 设置x轴颜色
color: '#DADADA'
}
},
data:that.depAXser
},
yAxis: {
type: 'value',
axisLine: {
lineStyle: {
// 设置y轴颜色
color: '#DADADA',
}
},
splitLine:{
show:true,
lineStyle:{
type:'dashed',
color:'#023CA0',
}
}
},
series:that.depAYser,
color: ['#023CA0', '#F24385','#FFA39A']
// series: [{
// data: that.datedata1,
// type: 'line',
// smooth: true,
// areaStyle: {
// normal: {
// color: '#DBE1FF' //改变区域颜色
// },
// },
// symbolSize: 0,
// itemStyle : {
// normal : {
// color:'#fff', //改变折线点的颜色
// lineStyle:{
// color:'#5D78FF' //改变折线颜色
// }
// }
// }
// }]
};
myChart.setOption(option);
},
LineChart2(){
var that = this;
var myChart = this.$echarts.init(document.getElementById('chartsMap2'));
var option={
title: {
color:"#2C3343"
},
// 提示框
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
boundaryGap: false,
axisLine: {
lineStyle: {
// 设置x轴颜色
color: '#DADADA'
}
},
data:that.depBXser
},
yAxis: {
type: 'value',
axisLine: {
lineStyle: {
// 设置y轴颜色
color: '#DADADA',
}
},
splitLine:{
show:true,
lineStyle:{
type:'dashed',
color:'#023CA0',
}
}
},
series:that.depBYser,
color: ['#023CA0', '#F24385','#FFA39A']
};
myChart.setOption(option);
},
}
};
</script>
\ No newline at end of file
src/router/config.js
View file @ ac3de38d
...@@ -3819,6 +3819,15 @@ export default { ...@@ -3819,6 +3819,15 @@ export default {
title: '人员管理' title: '人员管理'
} }
}, },
{
path: '/PerCompetition',
name: 'PerCompetition',
component: resolve => require(['@/components/activity/PerCompetition'], resolve),
meta: {
title: '业绩竞赛'
}
},
{ {
path: '/BmenuManagement', path: '/BmenuManagement',
name: 'BmenuManagement', name: 'BmenuManagement',
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment