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