Commit ab32f647 authored by 吴春's avatar 吴春
parents f1019607 8eaa929e
<template>
<div id="CustomerA" v-loading="loading">
<div class="firstDiv">
<div class="list">
<div class="Item" style="padding-top:0">
<div class="userImg">
<img v-if="datainfo.HousePhotos" :src="datainfo.HousePhotos" alt="">
<img v-else src="../../assets/img/default.png" alt="">
</div>
<div>
<p>{{datainfo.CustomerName}}</p>
<p style="color:#7F8593;font-size:14px;padding:6px 0">{{datainfo.Contact}}</p>
</div>
</div>
</div>
<div class="list">
<div class="Item moneyItem">
<p>交易累计额</p>
<div class="des">
<div class="Img"><img style="width:30px;height:36px" src="../../assets/img/saleRank/jye.png" alt=""></div>
<div>
<p style="color:#5D78FF;font-size:28px"><span style="font-size:14px"></span>{{datainfo.TotalPrice}}</p>
</div>
</div>
<div class="firstDiv">
<div class="list">
<div class="Item" style="padding-top:0">
<div class="userImg">
<img v-if="datainfo.HousePhotos" :src="datainfo.HousePhotos" alt="">
<img v-else src="../../assets/img/default.png" alt="">
</div>
<div>
<p>{{datainfo.CustomerName}}</p>
<p style="color:#7F8593;font-size:14px;padding:6px 0">{{datainfo.Contact}}</p>
</div>
<div class="list">
<div class="Item moneyItem">
<p>交易人头数</p>
<div class="des">
<div class="Img"><img style="width:31px;height:36px" src="../../assets/img/saleRank/rt.png" alt=""></div>
<div>
<p style="color:#34BFA3;font-size:24px"><span style="font-size:28px;font-weight:600" @click="getUrl()">{{datainfo.TotalGuestNum}}</span></p>
</div>
</div>
</div>
</div>
<div class="list">
<div class="Item moneyItem">
<p>交易累计额</p>
<div class="des">
<div class="Img"><img style="width:30px;height:36px" src="../../assets/img/saleRank/jye.png" alt=""></div>
<div>
<p style="color:#5D78FF;font-size:28px"><span style="font-size:14px"></span>{{datainfo.TotalPrice}}</p>
</div>
</div>
</div>
</div>
<div class="list">
<div class="Item moneyItem">
<p>交易人头数</p>
<div class="des">
<div class="Img"><img style="width:31px;height:36px" src="../../assets/img/saleRank/rt.png" alt=""></div>
<div>
<el-tooltip class="item" effect="dark" content="点击查看详情" placement="top">
<p style="color:#34BFA3;font-size:24px"><span style="font-size:28px;font-weight:600"
@click="getUrl()">{{datainfo.TotalGuestNum}}</span></p>
</el-tooltip>
</div>
</div>
<div class="list">
<div class="Item moneyItem">
<p>积分</p>
<div class="des">
<div class="Img"><img style="width:36px;height:36px" src="../../assets/img/saleRank/jf.png" alt=""></div>
<div>
<p style="color:#FD3995;font-size:24px"><span style="font-size:28px;font-weight:600">{{datainfo.Integral}}</span></p>
</div>
</div>
</div>
</div>
<div class="list">
<div class="Item moneyItem">
<p>积分</p>
<div class="des">
<div class="Img"><img style="width:36px;height:36px" src="../../assets/img/saleRank/jf.png" alt=""></div>
<div>
<p style="color:#FD3995;font-size:24px"><span
style="font-size:28px;font-weight:600">{{datainfo.Integral}}</span></p>
</div>
</div>
</div>
</div>
<div class="list">
<div class="Item moneyItem">
<p>幸福存折余额</p>
<div class="des">
<div class="Img">
<img style="width:36px;height:28px" src="../../assets/img/saleRank/cz.png" alt="">
</div>
<div>
<p style="color:#FFB822;font-size:28px"><span style="font-size:24px"></span>{{datainfo.Client_Balance}}
</p>
</div>
</div>
<div class="list">
<div class="Item moneyItem">
<p>幸福存折余额</p>
<div class="des">
<div class="Img">
<img style="width:36px;height:28px" src="../../assets/img/saleRank/cz.png" alt="">
</div>
<div>
<p style="color:#FFB822;font-size:28px"><span style="font-size:24px"></span>{{datainfo.Client_Balance}}</p>
</div>
</div>
</div>
</div>
<div @click="goCoupons(datainfo.CustomerAccountId)" class="list">
<div class="Item moneyItem">
<p>优惠券</p>
<div class="des">
<div class="Img">
<span style="font-size:36px;color: #e95252;position: relative;top: -10px;"
class="iconfont icon-shouru"></span>
</div>
<div>
<p style="color:#e95252;font-size:28px;"><span
style="text-decoration: underline;">{{datainfo.CouponNum}}</span></p>
</div>
</div>
</div>
</div>
</div>
<div class="second" style="padding:0 10px;margin-top:10px">
<el-row :gutter="23" justify="space-between">
<el-col :span="16">
<div id="chartsMap" class="bgDiv" style="height:400px;width:100%;padding:20px 10px"></div>
</el-col>
<el-col :span="8">
<div class="bgDiv" style="padding:20px 30px;height:400px;overflow:auto">
<p style="color:#2C3343;margin-bottom:30px">价格区间占比</p>
<div v-for="(item,index) in datainfo.priceList" :key="index" class="perceItem">
<el-row :gutter="22">
<el-col style="color:#9D9FA6;font-size:12px;margin-top: 2px;" :span="5"><span>{{item.TypeName}}</span>
</el-col>
<el-col :span="14" style="margin-top:4px">
<el-progress :show-text="false" :stroke-width="14" :percentage="Number(item.Total)"></el-progress>
</el-col>
<el-col :span="5"><span
style="color:#2C3343;font-size:14px">{{Number(item.Total)}}%,{{item.TotalGuestNum}}</span></el-col>
</el-row>
</div>
</div>
<div @click="goCoupons(datainfo.CustomerAccountId)" class="list">
<div class="Item moneyItem">
<p>优惠券</p>
<div class="des">
<div class="Img">
<span style="font-size:36px;color: #e95252;position: relative;top: -10px;" class="iconfont icon-shouru"></span>
</div>
</el-col>
</el-row>
</div>
<div class="third" style="padding:0 10px;margin:20px 0 40px 0">
<el-row :gutter="23" justify="space-between">
<el-col :span="8">
<div class="bgDiv" style="padding:20px 30px;height:320px;overflow:auto">
<p style="color:#2C3343;margin-bottom:30px">返利红包预期收益</p>
<el-row>
<el-col :span="6">
<div>
<p style="color:#e95252;font-size:28px;"><span style="text-decoration: underline;">{{datainfo.CouponNum}}</span></p>
</div>
</div>
</div>
</div>
</div>
<div class="second" style="padding:0 10px;margin-top:10px">
<el-row :gutter="23" justify="space-between">
<el-col :span="16"><div id="chartsMap" class="bgDiv" style="height:400px;width:100%;padding:20px 10px"></div> </el-col>
<el-col :span="8">
<div class="bgDiv" style="padding:20px 30px;height:400px;overflow:auto">
<p style="color:#2C3343;margin-bottom:30px">价格区间占比</p>
<div v-for="(item,index) in datainfo.priceList" :key="index" class="perceItem">
<el-row :gutter="22">
<el-col style="color:#9D9FA6;font-size:12px;margin-top: 2px;" :span="5"><span>{{item.TypeName}}</span></el-col>
<el-col :span="14" style="margin-top:4px"><el-progress :show-text="false" :stroke-width="14" :percentage="Number(item.Total)"></el-progress></el-col>
<el-col :span="5"><span style="color:#2C3343;font-size:14px">{{Number(item.Total)}}%,{{item.TotalGuestNum}}</span></el-col>
</el-row>
</div>
</div>
<p style="color:#5D78FF"><span style="font-size:14px"></span><span
style="font-size:28px">{{datainfo.yearTotalPrice}}</span></p>
<p style="color:#93959A;font-size:10px">本年预计收益</p>
</div>
<div style="margin-top:20px">
<p style="color:#2C3343"><span style="font-size:14px"></span><span
style="font-size:20px">{{datainfo.allianceTotalYearPrice}}</span></p>
<p style="color:#93959A;font-size:10px">本年交易金额</p>
</div>
<div style="margin-top:20px">
<p style="color:#93959A"><span style="font-size:14px"></span><span
style="font-size:20px">{{datainfo.yeayGoTotalPrice}}</span></p>
<p style="color:#93959A;font-size:10px">去年收益</p>
</div>
</el-col>
</el-row>
</div>
<div class="third" style="padding:0 10px;margin:20px 0 40px 0">
<el-row :gutter="23" justify="space-between">
<el-col :span="8">
<div class="bgDiv" style="padding:20px 30px;height:320px;overflow:auto">
<p style="color:#2C3343;margin-bottom:30px">返利红包预期收益</p>
<el-row>
<el-col :span="6">
<div>
<p style="color:#5D78FF"><span style="font-size:14px"></span><span style="font-size:28px">{{datainfo.yearTotalPrice}}</span></p>
<p style="color:#93959A;font-size:10px">本年预计收益</p>
</div>
<div style="margin-top:20px">
<p style="color:#2C3343"><span style="font-size:14px"></span><span style="font-size:20px">{{datainfo.allianceTotalYearPrice}}</span></p>
<p style="color:#93959A;font-size:10px">本年交易金额</p>
</div>
<div style="margin-top:20px">
<p style="color:#93959A"><span style="font-size:14px"></span><span style="font-size:20px">{{datainfo.yeayGoTotalPrice}}</span></p>
<p style="color:#93959A;font-size:10px">去年收益</p>
</div>
</el-col>
<el-col :span="18">
<div style="margin-bottom:20px" v-for="(item,index) in datainfo.list" :key="index+500">
<div>
<p style="color:#7F8593;font-size:12px">年交易额达<span style="color:#7F8593">{{item.Money}}</span>{{item.Ratio}}</p>
</div>
<div>
<el-row :gutter="23" justify="space-between">
<el-col :span="16">
<p style="margin-top:6px">
<!-- 数据是:{{datainfo.totalYearPrice/item.Money>1?100:(datainfo.totalYearPrice/item.Money)*100}} -->
<el-progress :color="colorMethod(item)" :show-text="false" :stroke-width="12" :percentage="datainfo.totalYearPrice/item.Money>1?100:(datainfo.totalYearPrice/item.Money)*100"></el-progress>
</p>
</el-col>
<el-col :span="8">
<span v-if="item.ActivateState==2"><img style="width:20px;height:20px" src="../../assets/img/saleRank/gou.png" alt=""></span>
<span style="font-size:14px;font-weight:bold;color:#2C3343" v-if="item.ActivateState==0">未开启</span>
<span style="font-size:14px;font-weight:bold;color:#2C3343" v-if="item.ActivateState==1">还差 ¥{{item.PriceSpread}}满足</span>
</el-col>
</el-row>
</div>
</div>
</el-col>
<el-col :span="18">
<div style="margin-bottom:20px" v-for="(item,index) in datainfo.list" :key="index+500">
<div>
<p style="color:#7F8593;font-size:12px">年交易额达<span style="color:#7F8593">{{item.Money}}</span>
{{item.Ratio}}</p>
</div>
<div>
<el-row :gutter="23" justify="space-between">
<el-col :span="16">
<p style="margin-top:6px">
<el-progress :color="colorMethod(item)" :show-text="false" :stroke-width="12"
:percentage="datainfo.totalYearPrice/item.Money>1?100:(datainfo.totalYearPrice/item.Money)*100">
</el-progress>
</p>
</el-col>
<el-col :span="8">
<span v-if="item.ActivateState==2"><img style="width:20px;height:20px"
src="../../assets/img/saleRank/gou.png" alt=""></span>
<span style="font-size:14px;font-weight:bold;color:#2C3343"
v-if="item.ActivateState==0">未开启</span>
<span style="font-size:14px;font-weight:bold;color:#2C3343" v-if="item.ActivateState==1">还差
¥{{item.PriceSpread}}满足</span>
</el-col>
</el-row>
</div>
</div>
</el-col>
<el-col :span="16">
<div class="bgDiv" style="padding:20px 30px;height:320px;overflow:auto">
<p style="color:#2C3343;margin-bottom:30px">交客线路占比</p>
<div v-for="(item,index) in datainfo.LineIdList" :key="index+100" class="circleItem">
<div style="height:126px;position:relative">
<div class="Linetext">
<p style="font-size:34px">{{Number(item.Total)}}<span style="font-size:14px">%</span></p>
<p style="font-size:14px">{{item.TypeName}}</p>
</div>
<el-progress :color="item.color" :show-text="false" type="circle" :stroke-width="16" :percentage="Number(item.Total)"></el-progress>
</div>
<div style="font-size:12px;color:#7F8593;margin-top:20px">收客{{item.TotalGuestNum}}</div>
</div>
</el-col>
</el-row>
</div>
</el-col>
<el-col :span="16">
<div class="bgDiv" style="padding:20px 30px;height:320px;overflow:auto">
<p style="color:#2C3343;margin-bottom:30px">交客线路占比</p>
<div v-for="(item,index) in datainfo.LineIdList" :key="index+100" class="circleItem">
<div style="height:126px;position:relative">
<div class="Linetext">
<p style="font-size:34px">{{Number(item.Total)}}<span style="font-size:14px">%</span></p>
<p style="font-size:14px">{{item.TypeName}}</p>
</div>
</el-col>
</el-row>
</div>
<el-progress :color="item.color" :show-text="false" type="circle" :stroke-width="16"
:percentage="Number(item.Total)"></el-progress>
</div>
<div style="font-size:12px;color:#7F8593;margin-top:20px">收客{{item.TotalGuestNum}}</div>
</div>
</div>
</el-col>
</el-row>
</div>
</div>
</template>
<script>
export default {
data () {
return {
percentage:20,
customerId:"",
loading:false,
datainfo:{},
colorList:["#FFB822","#FD3995","#5D78FF","#59C5F8","#34BFA3"],
date:[],
datedata:[],
}
},
created() {
if(this.$route.query.customerId){
this.customerId=Number(this.$route.query.customerId);
export default {
data() {
return {
percentage: 20,
customerId: "",
loading: false,
datainfo: {},
colorList: ["#FFB822", "#FD3995", "#5D78FF", "#59C5F8", "#34BFA3"],
date: [],
datedata: [],
}
},
mounted() {
},
created() {
if (this.$route.query.customerId) {
this.customerId = Number(this.$route.query.customerId);
}
},
mounted() {
this.getData();
},
methods: {
getUrl() {
},
methods: {
getUrl() {
this.$router.push({
name: "enrollTotal",
query: {
"CustomerId": this.customerId,
"CustomerName":this.datainfo.Contact,
"CustomerName": this.datainfo.Contact,
blank: 'y'
}
})
},
goCoupons(id){
this.$router.push({
name: 'CouponsList',
query: {
blank: "y",
"customerId": id,
tab:'优惠券列表'
}
});
},
colorMethod(item){
if(item.ActivateState==2){
return '#34BFA3';
}
if(item.ActivateState==1){
return '#FFB822';
}else{
return '#ebeef5';
goCoupons(id) {
this.$router.push({
name: 'CouponsList',
query: {
blank: "y",
"customerId": id,
tab: '优惠券列表'
}
});
},
colorMethod(item) {
if (item.ActivateState == 2) {
return '#34BFA3';
}
if (item.ActivateState == 1) {
return '#FFB822';
} else {
return '#ebeef5';
}
},
getData(){
this.loading=true;
this.apipost('app_customer_GetCustomerOrderInfo', {customerId:this.customerId}, res => {
this.loading=false;
getData() {
this.loading = true;
this.apipost('app_customer_GetCustomerOrderInfo', {
customerId: this.customerId
}, res => {
this.loading = false;
if (res.data.resultCode == 1) {
res.data.data.LineIdList.forEach(item => {
this.colorList.forEach(color=>{
item.color=color;
})
this.colorList.forEach(color => {
item.color = color;
})
});
this.datainfo = res.data.data;
res.data.data.yearMonthList.forEach(item=>{
this.date.push(item.TypeName.substr(2,8));
this.datedata.push(item.Total);
res.data.data.yearMonthList.forEach(item => {
this.date.push(item.TypeName.substr(2, 8));
this.datedata.push(item.Total);
})
this.LineChart();
} else {
}
}, err => {
})
} else {}
}, err => {})
},
LineChart(){
LineChart() {
var that = this;
var myChart = this.$echarts.init(document.getElementById('chartsMap'));
var option={
title: {
text: '近12月交易走势',
color:"#2C3343"
},
xAxis: {
type: 'category',
boundaryGap: false,
data: this.date
var option = {
title: {
text: '近12月交易走势',
color: "#2C3343"
},
xAxis: {
type: 'category',
boundaryGap: false,
data: this.date
},
yAxis: {
type: 'value',
splitLine: {
show: true,
lineStyle: {
type: 'dashed'
}
}
},
series: [{
data: that.datedata,
type: 'line',
smooth: true,
areaStyle: {
normal: {
color: '#DBE1FF' //改变区域颜色
},
},
yAxis: {
type: 'value',
splitLine:{
show:true,
lineStyle:{
type:'dashed'
}
symbolSize: 0,
itemStyle: {
normal: {
color: '#fff', //改变折线点的颜色
lineStyle: {
color: '#5D78FF' //改变折线颜色
}
},
series: [{
data: that.datedata,
type: 'line',
smooth: true,
areaStyle: {
normal: {
color: '#DBE1FF' //改变区域颜色
},
},
symbolSize: 0,
itemStyle : {
normal : {
color:'#fff', //改变折线点的颜色
lineStyle:{
color:'#5D78FF' //改变折线颜色
}
}
}
}]
}
}
}]
};
myChart.setOption(option);
},
},
}
},
}
</script>
<style>
#CustomerA .third .circleItem .Linetext{
#CustomerA .third .circleItem .Linetext {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin:auto;
color:#2C3343;
margin: auto;
color: #2C3343;
width: 100px;
height:70px;
}
#CustomerA .third .circleItem{
height: 70px;
}
#CustomerA .third .circleItem {
width: 20%;
text-align:center;
text-align: center;
display: inline-block;
}
#CustomerA .third .perRow{
}
#CustomerA .third .perRow {
display: flex;
align-items: center;
}
#CustomerA .second .el-progress-bar__inner{
}
#CustomerA .second .el-progress-bar__inner {
background-color: #34BFA3;
}
#CustomerA .second .perceItem{
}
#CustomerA .second .perceItem {
margin-bottom: 25px;
}
#CustomerA .bgDiv{
background:rgba(255,255,255,1);
box-shadow:0px 3px 14px 0px rgba(193,198,221,1);
border-radius:6px;
}
#CustomerA .firstDiv .moneyItem p{
}
#CustomerA .bgDiv {
background: rgba(255, 255, 255, 1);
box-shadow: 0px 3px 14px 0px rgba(193, 198, 221, 1);
border-radius: 6px;
}
#CustomerA .firstDiv .moneyItem p {
width: 100%;
text-align: left;
font-size: 14px;
}
#CustomerA .firstDiv .moneyItem .des>div{
}
#CustomerA .firstDiv .moneyItem .des>div {
display: inline-block;
}
#CustomerA .firstDiv .moneyItem .des{
display:flex;
}
#CustomerA .firstDiv .moneyItem .des {
display: flex;
justify-content: space-between;
margin-top:35px;
margin-top: 35px;
width: 100%;
}
#CustomerA .firstDiv .moneyItem{
}
#CustomerA .firstDiv .moneyItem {
flex-direction: column;
}
#CustomerA .firstDiv .Item .userImg img{
}
#CustomerA .firstDiv .Item .userImg img {
width: 100%;
height: 100%;
border-radius: 50%;
}
#CustomerA .firstDiv .Item .userImg{
width: 70px;height: 70px;
margin-right:10px;
}
#CustomerA .firstDiv .list{
}
#CustomerA .firstDiv .Item .userImg {
width: 70px;
height: 70px;
margin-right: 10px;
}
#CustomerA .firstDiv .list {
width: 16.66%;
padding: 10px;
box-sizing: border-box;
display: inline-block;
cursor: pointer;
}
#CustomerA .firstDiv .Item{
}
#CustomerA .firstDiv .Item {
width: 100%;
height: 154px;
margin-right: 10px;
......@@ -375,17 +387,17 @@ export default {
padding: 0 25px;
box-sizing: border-box;
float: left;
padding-top:20px;
}
#CustomerA .firstDiv {
padding-top: 20px;
}
#CustomerA .firstDiv {
display: flex;
justify-content: space-between;
}
}
#CustomerA{
padding:10px;
#CustomerA {
padding: 10px;
background: #F2F3F8;
}
}
</style>
......@@ -6,9 +6,8 @@
<span>
<em>{{$t('visaT.sale')}}</em>
</span>
<!-- <el-select filterable v-model="msg.CreateBy"> -->
<el-select v-model="msg.CreateBy" class="w150" filterable remote reserve-keyword :placeholder="$t('pub.PleaseKeyWords')"
:remote-method="GetClientAccountListByKeyWord">
<el-select v-model="msg.CreateBy" class="w150" filterable remote reserve-keyword
:placeholder="$t('pub.PleaseKeyWords')" :remote-method="GetClientAccountListByKeyWord">
<el-option :label="$t('pub.unlimitedSel')" value="-1"></el-option>
<el-option v-for="item in employeeList" :label="item.name" :value="item.empId" :key="item.empId">
<div>
......@@ -20,8 +19,6 @@
</el-option>
</el-select>
</li>
<li>
<span>
<em>{{$t('salesModule.keyWords')}}</em>
......@@ -59,39 +56,36 @@
<el-option label="已审核" :value="2"></el-option>
<el-option label="已拒绝" :value="3"></el-option>
<el-option label="黑名单" :value="4"></el-option>
</el-select>
</li>
<li>
<span>
<em>是否异常</em>
</span>
<el-select filterable class='multiple_input' v-model='msg.ExceptionCount '
:placeholder="$t('pub.pleaseSel')">
<el-select filterable class='multiple_input' v-model='msg.ExceptionCount' :placeholder="$t('pub.pleaseSel')">
<el-option :label="$t('pub.unlimitedSel')" :value="0"></el-option>
<el-option label="是" :value="1"></el-option>
<el-option label="否" :value="2"></el-option>
</el-select>
</li>
<li>
<span class="fl mt10">
<em>{{$t('admin.admin_Department')}}</em>
<li >
<span >
<em class="fl" style="margin-top: 10px !important">{{$t('admin.admin_Department')}}</em>
<treeselect class="w200 fl" :options="departmentList" @select="getEmployeeList" v-model="DepartmentId"
:placeholder="$t('pub.unlimitedSel')" :normalizer="normalizer" />
</span>
<treeselect class="w200 fl" :options="departmentList" @select="getEmployeeList" v-model="DepartmentId"
:placeholder="$t('pub.unlimitedSel')" :normalizer="normalizer" />
</li>
<li>
<span class="fl mt10">
<em><el-switch
style="display: block"
v-model="msg.fanYong"
active-text="特惠专案客户"
inactive-text=""
active-value="1"
inactive-value="0">
</el-switch></em>
<span>
<em>
特惠专案客户
</em>
</span>
<el-select filterable class='multiple_input' v-model='msg.fanYong' :placeholder="$t('pub.pleaseSel')">
<el-option :label="$t('pub.unlimitedSel')" :value="-1"></el-option>
<el-option label="是" :value="1"></el-option>
<el-option label="否" :value="2"></el-option>
</el-select>
</li>
<li style="float:right;padding-top:10px;color:#111111">{{$t('salesModule.JYETJ')}}{{datainfo.sumMoney}}</li>
<li>
......@@ -458,7 +452,7 @@
rtsSort: '',
orderBy: 'TradeMoney desc',
ExceptionCount: 0,
fanYong:0,
fanYong: -1,
},
RecipientMsg: {
CustomerIdArr: [],
......
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