Skip to content

S
SuperMan
Commit 40727e38 authored by huangyuanyuan's avatar huangyuanyuan
Browse files
Options

update

parent 0509a6c2
Hide whitespace changes
Inline Side-by-side
Showing with 583 additions and 0 deletions
src/components/SalesModule/CustomerAnalysis.vue 0 → 100644
View file @ 40727e38
<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.Contact}}</p>
<p style="color:#7F8593;font-size:14px">{{datainfo.CustomerName}}</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>
</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">{{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: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>
</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;">
<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>
</el-col>
</el-row>
</div>
<div class="third" style="padding:0 10px;margin-top:20px">
<el-row :gutter="23" justify="space-between">
<el-col :span="8">
<div class="bgDiv" style="padding:20px 30px;height:320px;">
<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.totalYearPrice}}</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="18">
<p style="margin-top:6px">
<el-progress :color="colorMethod(item)" :show-text="false" :stroke-width="12" :percentage="datainfo.totalYearPrice"></el-progress>
</p>
</el-col>
<el-col :span="6">
<span><img v-if="item.ActivateState==2" style="width:20px;height:20px" src="../../assets/img/saleRank/gou.png" alt=""></span>
</el-col>
</el-row>
</div>
</div>
</el-col>
</el-row>
</div>
</el-col>
<el-col :span="16">
<div class="bgDiv" style="padding:20px 30px;height:320px;">
<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>
</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);
}
},
mounted() {
this.getData();
},
methods: {
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;
if (res.data.resultCode == 1) {
res.data.data.LineIdList.forEach(item => {
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);
})
// console.log("datainfo",this.datainfo);
// console.log("date",this.date);
// console.log("datedata",this.datedata);
this.LineChart();
} else {
}
}, err => {
})
},
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
},
yAxis: {
type: 'value',
splitLine:{
show:true,
lineStyle:{
type:'dashed'
}
}
},
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{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin:auto;
color:#2C3343;
width: 100px;
height:70px;
}
#CustomerA .third .circleItem{
width: 20%;
text-align:center;
display: inline-block;
}
#CustomerA .third .perRow{
display: flex;
align-items: center;
}
#CustomerA .second .el-progress-bar__inner{
background-color: #34BFA3;
}
#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{
width: 100%;
text-align: left;
font-size: 14px;
}
#CustomerA .firstDiv .moneyItem .des>div{
display: inline-block;
}
#CustomerA .firstDiv .moneyItem .des{
display:flex;
justify-content: space-between;
margin-top:35px;
width: 100%;
}
#CustomerA .firstDiv .moneyItem{
flex-direction: column;
}
#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{
width: 20%;
padding: 10px;
box-sizing: border-box;
display: inline-block;
}
#CustomerA .firstDiv .Item{
width: 100%;
height: 154px;
margin-right: 10px;
background: #fff;
display: inline-flex;
align-items: center;
padding: 0 25px;
box-sizing: border-box;
float: left;
padding-top:20px;
}
#CustomerA .firstDiv {
display: flex;
justify-content: space-between;
}
#CustomerA{
padding:10px;
background: #F2F3F8;
}
</style>
src/components/SalesModule/HappyPassbook.vue 0 → 100644
View file @ 40727e38
<style scoped>
.departmentTreeStyleCont {
padding-top: 20px;
display: flex;
height: 100%;
}
.departmentTreeStyleCont .departmentTreeStyle {
background: #fff;
padding: 20px;
flex: 0 1 400px;
min-height: 800px;
}
.departmentTreeStyleCont .departmentTreeStyle > p {
font-size: 14px;
margin-bottom: 15px;
color: #333;
font-weight: bold;
height: 14px;
line-height: 14px;
border-left: 3px solid #E95252;
text-indent: 20px;
}
.departmentTreeStyleCont .departmentTreeStyle .spanIcon {
padding-left: 20px;
display: none
}
.departmentTreeStyleCont .departmentTreeStyle .el-tree-node__content {
height: 32px;
line-height: 32px;
font-size: 12px
}
.TreeSpan img {
width: 24px;
height: 24px;
border-radius: 12px;
vertical-align: sub;
margin-right: 3px;
}
.departmentTreeStyleCont .departmentTreeStyle .el-tree-node__content:hover .spanIcon {
display: inline-block
}
.departmentTreeStyleCont .departmentTreeStyle .el-tree-node__content:hover .spanIcon i {
font-size: 14px !important;
color: #999;
margin-right: 2px;
}
.departmentTreeStyleCont .departmentTreeStyle .el-tree-node__content:hover .spanIcon i:hover {
color: #E95252;
}
.departmentTreeStyleCont .departmentTreeLayer > p {
font-size: 14px;
margin-bottom: 15px;
color: #333;
font-weight: bold;
height: 14px;
line-height: 14px;
border-left: 3px solid #E95252;
text-indent: 20px;
}
.departmentTreeStyleCont .departmentTreeLayer {
background: #fff;
min-height: 300px;
padding: 20px;
margin-left: 20px;
flex: auto
}
.departmentTreeStyleCont .el-date-editor.el-input,
.departmentTreeStyleCont .el-date-editor.el-input__inner {
width: auto !important;
}
</style>
<template>
<div class="flexOne">
<div class="query-box">
<ul>
<li>
<span><em>客户</em>
<el-input v-model='msg.CustomerName'
placeholder="请输入"></el-input>
</span>
</li>
<li>
<span><em>订单ID</em><el-input v-model='msg.SourceId'
placeholder="请输入"></el-input></span>
</li>
<!-- <li>
<span><em>来源</em>
<el-select filterable v-model='msg.OrderSource' placeholder="请选择">
<el-option label="不限" value='-1'></el-option>
<el-option label='1·1' value=''></el-option>
</el-select>
</span>
</li> -->
<li>
<span><em>类型</em>
<el-select filterable v-model='msg.Type' placeholder="请选择">
<el-option label="不限" value='0'></el-option>
<el-option label='收入' value='1'></el-option>
<el-option label='折扣' value='2'></el-option>
</el-select>
</span>
</li>
<li>
<span><em>日期</em>
<el-date-picker
v-model="dateList"
type="daterange"
range-separator="至"
value-format="yyyy-MM-dd"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
</span>
</li>
<li>
<input type="button" class="hollowFixedBtn" :value="$t('pub.searchBtn')" @click="resetPageIndex(),getList()"/>
</li>
</ul>
</div>
<table class="singeRowTable" border="0" cellspacing="0" cellpadding="0" v-loading='loading'>
<tr>
<th>金额</th>
<th>类型</th>
<th>描述</th>
<th>时间</th>
<th>历史余额</th>
</tr>
<tr v-for="(item,index) in DataList" :key="index+500">
<td>{{item.Money}}</td>
<td>
<span>{{item.Type==1?"收入":"折扣"}}</span>
</td>
<td>{{item.Description}}</td>
<td>{{item.UpdateTime}}</td>
<td>{{item.AccountMoney}}</td>
</tr>
<tr v-if='DataList.length==0'>
<td colspan="5" align="center">暂无数据</td>
</tr>
</table>
<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>
</template>
<script>
export default {
data() {
return {
loading: true,
//分页
total: 0,
pageSize: '',
msg: {
pageIndex: 1,
pageSize: 15,
Type: "0",
CustomerName:"",
SourceId:"",
OrderSource:"",
StartTime:"",
EndTime:"",
},
currentPage:1,
DataList:[],
dateList:[],
}
},
created(){
if(this.$route.query.CustomerId){
this.msg.CustomerId=this.$route.query.CustomerId;
}
},
mounted() {
let userInfo = this.getLocalStorage();
this.getList();
},
methods: {
getList() { //获取数据
if(this.dateList){
this.msg.StartTime=this.dateList[0];
this.msg.EndTime=this.dateList[1];
}else{
this.msg.StartTime="";
this.msg.EndTime="";
}
this.loading = true;
this.apipost('customer_post_GetC_BigRedEnvelopeInfoList', this.msg, res => {
this.loading = false
if (res.data.resultCode == 1) {
this.DataList = res.data.data.pageData;
this.total = res.data.data.count;
} else {
}
}, err => {
})
},
handleCurrentChange(val) {
this.msg.pageIndex = val;
this.getList();
},
resetPageIndex() {
this.msg.pageIndex = 1;
this.currentPage = 1
},
}
}
</script>
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