Skip to content

C
CRM
Commit 1a6ee19f authored by 华国豪's avatar 华国豪 🙄
Browse files
Options

Merge branch 'master' of http://gitlab.oytour.com/huaguohao/crm

parents 0add10fa 815a51dc
Hide whitespace changes
Inline Side-by-side
Showing with 314 additions and 293 deletions
src/components/Home.vue
View file @ 1a6ee19f
......@@ -7,116 +7,128 @@
<span>客户简报</span>
</div>
<div class="shang-list">
<div class="shang-list-item">
<div class="icon">
<i class="iconfont iconVerifiedcustomername"></i>
</div>
<div class="title">新建客户</div>
<div class="result">{{Briefing.customerNum}}</div>
<div class="eq">
<el-row gutter="5">
<el-col :span="12">
<div class="shang-list-item">
<div class="icon">
<i class="iconfont iconVerifiedcustomername"></i>
</div>
<div class="title">新建客户</div>
<div class="result">{{Briefing.customerNum}}</div>
<!-- <div class="eq">
较上月
<i class="iconfont iconzujiantubiaokupx_- red" v-if="Briefing.customerRate > 0"></i>
<i class="iconfont iconic_trending_down_px green" v-if="Briefing.customerRate < 0"></i>
<i class="iconfont iconchiping" v-else></i>
<span class="val" :class="{'red': Briefing.customerRate > 0, 'green': Briefing.customerRate < 0}">{{Briefing.customerRate}}%</span>
</div>
</div>
<div class="shang-list-item">
<div class="icon orange">
<i class="iconfont iconlianxiren"></i>
</div>
<div class="title">新建联系人</div>
<div class="result">{{Briefing.contactNum}}</div>
<div class="eq">
</div>-->
</div>
<div class="shang-list-item">
<div class="icon orange">
<i class="iconfont iconlianxiren"></i>
</div>
<div class="title">新建联系人</div>
<div class="result">{{Briefing.contactNum}}</div>
<!-- <div class="eq">
较上月
<i class="iconfont iconzujiantubiaokupx_- red" v-if="Briefing.contactRate > 0"></i>
<i class="iconfont iconic_trending_down_px green" v-if="Briefing.contactRate < 0"></i>
<i class="iconfont iconchiping" v-else></i>
<span class="val" :class="{'red': Briefing.contactRate > 0, 'green': Briefing.contactRate < 0}">{{Briefing.contactRate}}%</span>
</div>
</div>
<div class="shang-list-item">
<div class="icon green">
<i class="iconfont iconshangji-"></i>
</div>
<div class="title">新建商机</div>
<div class="result">{{Briefing.businessNum}}</div>
<div class="eq">
</div>-->
</div>
<div class="shang-list-item">
<div class="icon green">
<i class="iconfont iconshangji-"></i>
</div>
<div class="title">新建商机</div>
<div class="result">{{Briefing.businessNum}}</div>
<!-- <div class="eq">
较上月
<i class="iconfont iconzujiantubiaokupx_- red" v-if="Briefing.businessRate > 0"></i>
<i class="iconfont iconic_trending_down_px green" v-if="Briefing.businessRate < 0"></i>
<i class="iconfont iconchiping" v-else></i>
<span class="val" :class="{'red': Briefing.businessRate > 0, 'green': Briefing.businessRate < 0}">{{Briefing.businessRate}}</span>
</div>
</div>
<div class="shang-list-item">
<div class="icon blue">
<i class="iconfont icondingdan"></i>
</div>
<div class="title">新建订单</div>
<div class="result">{{Briefing.orderNum}}</div>
<div class="eq">
</div>-->
</div>
<div class="shang-list-item">
<div class="icon grey">
<i class="iconfont icongenjin"></i>
</div>
<div class="title">新建跟进</div>
<div class="result">0</div>
<!-- <div class="eq">
较上月
<i class="iconfont iconzujiantubiaokupx_- red"></i>
<span class="val red">40%</span>
</div> -->
</div>
</el-col>
<el-col :span="12">
<div class="shang-list-item">
<div class="icon blue">
<i class="iconfont icondingdan"></i>
</div>
<div class="title">新建订单</div>
<div class="result">{{Briefing.orderNum}}</div>
<!-- <div class="eq">
较上月
<i class="iconfont iconzujiantubiaokupx_- red" v-if="Briefing.orderRate > 0"></i>
<i class="iconfont iconic_trending_down_px green" v-if="Briefing.orderRate < 0"></i>
<i class="iconfont iconchiping" v-else></i>
<span class="val" :class="{'red': Briefing.orderRate > 0, 'green': Briefing.orderRate < 0}">{{Briefing.orderRate}}%</span>
</div>
</div>
<div class="shang-list-item">
<div class="icon red">
<i class="iconfont iconjine"></i>
</div>
<div class="title">订单金额</div>
<div class="result">{{Briefing.orderPriceNum}}</div>
<div class="eq">
</div>-->
</div>
<div class="shang-list-item">
<div class="icon red">
<i class="iconfont iconjine"></i>
</div>
<div class="title">订单金额</div>
<div class="result">{{Briefing.orderPriceNum}}</div>
<!-- <div class="eq">
较上月
<i class="iconfont iconzujiantubiaokupx_- red" v-if="Briefing.orderPriceRate > 0"></i>
<i class="iconfont iconic_trending_down_px green" v-if="Briefing.orderPriceRate < 0"></i>
<i class="iconfont iconchiping" v-else></i>
<span class="val" :class="{'red': Briefing.orderPriceRate > 0, 'green': Briefing.orderPriceRate < 0}">{{Briefing.orderPriceRate}}%</span>
</div>
</div>
<div class="shang-list-item">
<div class="icon zi">
<i class="iconfont iconmoney"></i>
</div>
<div class="title">新建收款</div>
<div class="result">{{Briefing.financePriceNum}}</div>
<div class="eq">
</div>-->
</div>
<div class="shang-list-item">
<div class="icon zi">
<i class="iconfont iconmoney"></i>
</div>
<div class="title">新建收款</div>
<div class="result">{{Briefing.financePriceNum}}</div>
<!-- <div class="eq">
较上月
<i class="iconfont iconzujiantubiaokupx_- red" v-if="Briefing.financePriceRate > 0"></i>
<i class="iconfont iconic_trending_down_px green" v-else-if="Briefing.financePriceRate < 0"></i>
<i class="iconfont iconchiping" v-else></i>
<span class="val" :class="{'red': Briefing.financePriceRate > 0, 'green': Briefing.financePriceRate < 0}">{{Briefing.financePriceRate}}%</span>
</div>
</div>
<!-- <div class="shang-list-item">
<div class="icon yellow">
<i class="iconfont iconbaifang"></i>
</div>
<div class="title">新建拜访</div>
<div class="result">9</div>
<div class="eq">
较上月
<i class="iconfont iconzujiantubiaokupx_- red" v-if="Briefing.financePriceRate > 0"></i>
<i class="iconfont iconic_trending_down_px green" v-if="Briefing.financePriceRate < 0"></i>
<i class="iconfont iconchiping" v-else></i>
<span class="val red">100%</span>
</div>
</div>
<div class="shang-list-item">
<div class="icon grey">
<i class="iconfont icongenjin"></i>
</div>
<div class="title">新建跟进</div>
<div class="result">30</div>
<div class="eq">
较上月
<i class="iconfont iconzujiantubiaokupx_- red"></i>
<span class="val red">40%</span>
</div>
</div> -->
</div>-->
</div>
<div class="shang-list-item">
<div class="icon yellow">
<i class="iconfont iconbaifang"></i>
</div>
<div class="title">新建拜访</div>
<div class="result">0</div>
<!-- <div class="eq">
较上月
<i class="iconfont iconzujiantubiaokupx_- red" v-if="Briefing.financePriceRate > 0"></i>
<i class="iconfont iconic_trending_down_px green" v-if="Briefing.financePriceRate < 0"></i>
<i class="iconfont iconchiping" v-else></i>
<span class="val red">100%</span>
</div> -->
</div>
</el-col>
</el-row>
</div>
</el-card>
<el-card shadow="never" style="margin-top:25px;">
<div slot="header" class="clearfix">
<span>能力评级</span>
</div>
</el-card>
</el-col>
......@@ -137,7 +149,7 @@
</el-row>
</div>
<div class="tic-chart" v-if="Briefing.sixMonthCommissionList">
<ticheng :MYdata="Briefing.sixMonthCommissionList"/>
<ticheng :MYdata="Briefing.sixMonthCommissionList" />
</div>
</el-card>
<el-card class="zhou-card" shadow="never">
......@@ -151,17 +163,15 @@
<el-row>
<el-col :span="24">
<span class="zhou-head">
<img
:src="Briefing.model.EmployeeImg"
alt
/>
<img :src="Briefing.model.EmployeeImg" alt />
</span>
</el-col>
</el-row>
<div class="zhou-name">{{Briefing.model.EmployeeName}}</div>
<div class="zhou-depart">
{{Briefing.model.BranchName}}
<b>·</b>{{Briefing.model.DeptName}}
<b>·</b>
{{Briefing.model.DeptName}}
</div>
</el-card>
</el-col>
......@@ -234,10 +244,11 @@
<el-card class="notinmoney-card" shadow="never">
<div class="title">待收款汇总</div>
<div class="money">
<small>￥</small>{{Briefing.DueInMoney}}
<small>￥</small>
{{Briefing.DueInMoney}}
</div>
<div class="charts-box" v-if="Briefing.sixOrderList">
<notincome :MYdata='Briefing.sixOrderList'/>
<notincome :MYdata="Briefing.sixOrderList" />
</div>
</el-card>
</el-col>
......@@ -301,8 +312,14 @@
<el-col :span="12">
<span>排行榜</span>
</el-col>
<el-col :span="12" class="option-item" style="">
<el-select v-model="rankType" size="mini" style="width:120px;" placeholder="请选择" @change="GetRankingList">
<el-col :span="12" class="option-item" style>
<el-select
v-model="rankType"
size="mini"
style="width:120px;"
placeholder="请选择"
@change="GetRankingList"
>
<el-option label="销售额排名" :value="1"></el-option>
<el-option label="新建客户排名" :value="2"></el-option>
<el-option label="新建商机排名" :value="3"></el-option>
......@@ -312,15 +329,15 @@
</div>
<div class="rank-list">
<div class="rank-list-item" v-for="(item, index) in RankingList" :key="index">
<div class="rank red">NO.{{item.RankNum}}</div>
<div class="head">
<el-avatar :size="40" :src="item.EmpPhoto"></el-avatar>
</div>
<div class="rank-name">
<div class="rn">{{item.EmpName}}</div>
<div>{{item.DeptName}}</div>
</div>
<div class="score">{{item.TotalNum}}</div>
<div class="rank red">NO.{{item.RankNum}}</div>
<div class="head">
<el-avatar :size="40" :src="item.EmpPhoto"></el-avatar>
</div>
<div class="rank-name">
<div class="rn">{{item.EmpName}}</div>
<div>{{item.DeptName}}</div>
</div>
<div class="score">{{item.TotalNum}}</div>
</div>
<div v-if="RankingList.length < 1" class="nodata font-color-info">
<p>暂无数据</p>
......@@ -335,7 +352,7 @@
<el-col :span="12">
<span>销售漏斗</span>
</el-col>
<el-col :span="12" class="option-item" style="">
<el-col :span="12" class="option-item" style>
<el-select v-model="rankType2" size="mini" style="width:120px;" placeholder="请选择">
<el-option label="商机漏斗图" value="1"></el-option>
</el-select>
......@@ -357,7 +374,7 @@
<script>
import ticheng from "./chart/ticheng";
import notincome from "./chart/noincome";
import sjld from './chart/shangjiloudou'
import sjld from "./chart/shangjiloudou";
export default {
components: {
ticheng,
......@@ -367,29 +384,33 @@ export default {
data() {
return {
rankType: 1,
rankType2: '1',
rankType2: "1",
RankingList: [],
Briefing: {model: {TotalPrice: 0}}
Briefing: { model: { TotalPrice: 0 } }
};
},
mounted() {
this.GetRankingList()
this.GetBriefing()
this.GetRankingList();
this.GetBriefing();
},
methods: {
GetBriefing(){
this.apipost('/api/CustomerDashboard/GetBriefing', {}, res=>{
GetBriefing() {
this.apipost("/api/CustomerDashboard/GetBriefing", {}, res => {
if (res.data.resultCode == 1) {
this.Briefing = res.data.data
this.Briefing = res.data.data;
}
})
});
},
GetRankingList(){
this.apipost('/api/CustomerDashboard/GetRankingList', {rankType: this.rankType}, res=>{
if (res.data.resultCode == 1) {
this.RankingList = res.data.data
GetRankingList() {
this.apipost(
"/api/CustomerDashboard/GetRankingList",
{ rankType: this.rankType },
res => {
if (res.data.resultCode == 1) {
this.RankingList = res.data.data;
}
}
})
);
}
}
};
......@@ -423,9 +444,12 @@ export default {
padding: 0px 20px !important;
margin-top: 20px;
}
.box-card .el-card__body:hover,
.box-card .el-card__body{
height: 237px;
}
/* .box-card .el-card__body:hover, */
.sum-card .el-card__body:hover,
.rank-card .el-card__body:hover{
.rank-card .el-card__body:hover {
overflow-y: auto;
padding-right: 16px !important;
}
......@@ -449,8 +473,9 @@ export default {
font-size: 14px;
color: #333333;
width: 80px;
/* font-weight: bold;
font-family: perfectFont; */
padding-top:18px;
font-weight: bold;
font-family: perfectFont;
}
.box-card .shang-list .shang-list-item .result {
flex: 1;
......@@ -459,6 +484,8 @@ export default {
font-family: perfectFont;
color: #000;
font-weight: bold;
text-align: right;
padding-right:25px;
}
.box-card .shang-list .shang-list-item .eq {
width: 200px;
......@@ -699,77 +726,77 @@ export default {
cursor: default;
user-select: none;
}
.rank-list .rank-list-item:hover{
background: #F4F5F9;
.rank-list .rank-list-item:hover {
background: #f4f5f9;
}
.rank-list .rank-list-item .rank{
width: 200px;
font-size: 18px;
color:#999;
font-family: perfectFont !important;
font-weight: bold;
.rank-list .rank-list-item .rank {
width: 200px;
font-size: 18px;
color: #999;
font-family: perfectFont !important;
font-weight: bold;
}
.rank-list .rank-list-item .rank.blue{
color:#0D2481;
.rank-list .rank-list-item .rank.blue {
color: #0d2481;
}
.rank-list .rank-list-item .rank.red{
color:rgb(195, 0, 82);
.rank-list .rank-list-item .rank.red {
color: rgb(195, 0, 82);
}
.rank-list .rank-list-item .rank.zi{
color:rgb(136, 23, 152);
.rank-list .rank-list-item .rank.zi {
color: rgb(136, 23, 152);
}
.rank-list .rank-list-item .head{
width: 70px;
.rank-list .rank-list-item .head {
width: 70px;
}
.rank-list .rank-list-item .rank-name{
width: 200px;
font-size: 12px;
color: #666;
.rank-list .rank-list-item .rank-name {
width: 200px;
font-size: 12px;
color: #666;
}
.rank-list .rank-list-item .rank-name .rn{
font-family: perfectFont !important;
font-weight: bold;
color: #333;
font-size: 16px;
.rank-list .rank-list-item .rank-name .rn {
font-family: perfectFont !important;
font-weight: bold;
color: #333;
font-size: 16px;
}
.rank-list .rank-list-item .score{
font-size: 22px;
font-family: perfectFont !important;
font-weight: bold;
color: #333;
text-align: right;
flex: 1;
.rank-list .rank-list-item .score {
font-size: 22px;
font-family: perfectFont !important;
font-weight: bold;
color: #333;
text-align: right;
flex: 1;
}
.option-item{
text-align:right;
.option-item {
text-align: right;
}
.option-item .el-select>.el-input {
display: block;
background: #0d2481;
border-radius: 0;
.option-item .el-select > .el-input {
display: block;
background: #0d2481;
border-radius: 0;
}
.option-item .el-input--mini .el-input__inner {
height: 28px;
line-height: 28px;
background: #0d2481;
border-radius: 0;
color: #F1f1f1;
height: 28px;
line-height: 28px;
background: #0d2481;
border-radius: 0;
color: #f1f1f1;
}
.option-item .el-select .el-input.is-focus .el-input__inner {
border-color: #0d2481;
border-color: #0d2481;
}
.el-select-dropdown{
border-radius: 0px !important;
.el-select-dropdown {
border-radius: 0px !important;
}
.el-select-dropdown__item.selected{
font-family: perfectFont !important;
color: #0d2481 !important;
.el-select-dropdown__item.selected {
font-family: perfectFont !important;
color: #0d2481 !important;
}
.el-select-dropdown__item{
/* font-family: perfectFont !important; */
font-size: 12px !important;
.el-select-dropdown__item {
/* font-family: perfectFont !important; */
font-size: 12px !important;
}
.loudou-card .el-card__header{
border: none;
.loudou-card .el-card__header {
border: none;
}
</style>
\ No newline at end of file
src/components/statistics/model/discussBox.vue
View file @ 1a6ee19f
......@@ -60,6 +60,7 @@
.discussBox .list .list-item .content{
padding-left: 33px;
line-height: 1.6;
font-size: 12px;
}
.discussBox .list .list-item .footer{
padding-left: 33px;
......@@ -121,24 +122,24 @@
<template>
<div class="discussBox">
<div class="discussBox-tit">
<div class="num">368 条评论</div>
<div class="cp change" @click="sort = !sort"><i class="el-icon-sort"></i>切换为{{sort === true ? '时间' : '默认'}}排序</div>
<div class="num">1 条评论</div>
<div class="cp change" @click="sort = !sort"><i class="el-icon-sort"></i>切换为{{sort === true ? '时间' : '点赞'}}排序</div>
</div>
<ul class="list">
<li class="list-item" v-for="(item, index) in 6" :key="index">
<li class="list-item" v-for="(item, index) in 1" :key="index">
<div>
<div class="list-item-tit">
<div>
<img width="24" height="24" src="https://pic4.zhimg.com/v2-d3f573f46ce86a124f4d92e4383fceab_is.jpg" alt="">
<span>王二</span>
<img width="24" height="24" src="http://imgfile.oytour.com/New/Upload/User/20191018150051176.png" alt="">
<span style="font-size:14px;font-family:perfectFont;font-weight:700;">罗超</span>
</div>
<span class="font-color-info">2 天前</span>
<span class="font-color-info">21:03</span>
</div>
<div class="content">
<p>高反为0？...在郎木寺那里青旅住好几个人高反了</p>
<p>根据对客户性别的统计可以，更好的了解不同性别的客人的喜好，消费能力的判读，从而快速的推荐团队给客人等等等</p>
</div>
<div class="footer">
<span class="cp like"><i class="iconfont iconzan"></i>赞</span>
<span class="cp like"><i class="iconfont iconzan"></i>赞（20）</span>
<span class="cp" @click="msgBoxShow = !msgBoxShow"><i class="iconfont iconhuifu"></i>{{msgBoxShow ? '取消' : ''}}回复</span>
</div>
<div class="msg-box" v-if="msgBoxShow">
......@@ -148,7 +149,7 @@
</el-input>
</div>
</div>
<div class="next"></div>
<!-- <div class="next"></div>
<div class="level2">
<div class="list-item-tit">
<div>
......@@ -231,7 +232,7 @@
</el-input>
</div>
</div>
</div>
</div> -->
</div>
</li>
</ul>
......
src/components/statistics/model/sexChart.vue
View file @ 1a6ee19f
......@@ -31,7 +31,7 @@ export default {
let myChart = this.$echarts.init(this.$refs.sexChart);
let option = {
grid: {
left: '5%',
left: '50',
right: '3%'
},
xAxis: {
......
src/components/statistics/old.vue
View file @ 1a6ee19f
......@@ -39,88 +39,7 @@
</div>
</div>
<!-- <div class="title">报名统计</div>
<div class="t-item">
<div class="first">
<div class="t">婴儿（0-6岁）</div>
<div class="v">报名人数：935，占比2.19%</div>
</div>
<div class="second">
<div class="chosen" :style="{'width':2.19+'%'}">
<i class="iconfont icon-yinger" v-for="item in 60" :key="`yr_${item}`"></i>
</div>
</div>
</div>
<div class="t-item">
<div class="first">
<div class="t">儿童（7-12岁）</div>
<div class="v">报名人数：2018，占比4.73%</div>
</div>
<div class="second et">
<div class="chosen" :style="{'width':4.73+'%'}">
<i class="iconfont icon-ertong" v-for="item in 60" :key="`et_${item}`"></i>
</div>
</div>
</div>
<div class="t-item">
<div class="first">
<div class="t">少年（13-18岁）</div>
<div class="v">报名人数：1899，占比4.45%</div>
</div>
<div class="second sn">
<div class="chosen" :style="{'width':4.45+'%'}">
<i class="iconfont icon-paobu" v-for="item in 60" :key="`sn_${item}`"></i>
</div>
</div>
</div>
<div class="t-item">
<div class="first">
<div class="t">青年（19-35岁）</div>
<div class="v">报名人数：12123，占比28.45%</div>
</div>
<div class="second qn">
<div class="chosen" :style="{'width':28.45+'%'}">
<i class="iconfont icon-lingdao" v-for="item in 60" :key="`qn_${item}`"></i>
</div>
</div>
</div>
<div class="t-item">
<div class="first">
<div class="t">壮年（36-45岁）</div>
<div class="v">报名人数：7550，占比17.72%</div>
</div>
<div class="second zn">
<div class="chosen" :style="{'width':17.72+'%'}">
<i class="iconfont icon-shangban" v-for="item in 60" :key="`zn_${item}`"></i>
</div>
</div>
</div>
<div class="t-item">
<div class="first">
<div class="t">壮年（46-69岁）</div>
<div class="v">报名人数：16136，占比37.87%</div>
</div>
<div class="second zhn">
<div class="chosen" :style="{'width':37.87+'%'}">
<i class="iconfont icon-zhongnian" v-for="item in 60" :key="`zhn_${item}`"></i>
</div>
</div>
</div>
<div class="t-item">
<div class="first">
<div class="t">老年（70岁以上）</div>
<div class="v">报名人数：1938，占比4.54%</div>
</div>
<div class="second ln">
<div class="chosen" :style="{'width':4.54+'%'}">
<i
class="iconfont icon-laonianrenmianfeiyimiao"
v-for="item in 60"
:key="`lr_${item}`"
></i>
</div>
</div>
</div>-->
</el-col>
<el-col :span="12" style="height:100%;">
<div class="left-content">
......@@ -146,10 +65,10 @@
</div>
<div class="situ">
<div class="c">根据对客户年龄段的统计可以，更好的了解不同年龄段客人的喜好，消费能力的判读，从而快速的推荐团队给客人等等等</div>
<!-- <div class="bot" @click="drawer = true">
查看更多，参与讨论(19)
<div class="bot" @click="drawer = true">
查看更多，参与讨论(1)
<i class="el-icon-d-arrow-right"></i>
</div> -->
</div>
</div>
</el-card>
</div>
......
src/components/statistics/tourType.vue
View file @ 1a6ee19f
......@@ -66,6 +66,9 @@
.tourType .sjsm>div .left{
display: flex;
align-items: center;
font-size: 14px;
font-family: 'perfectFont';
font-weight: 900;
}
.tourType .sjsm>div .left img{
padding-right: 10px;
......@@ -97,7 +100,7 @@
<div style="margin-bottom: 10px;">
<img src="../../assets/img/tongji/qinzi.png" alt="">
</div>
<p>亲子出游</p>
<!-- <p>亲子出游</p> -->
</div>
</el-col>
<el-col :span="14" style="height: 100%;">
......@@ -122,15 +125,54 @@
<span>数据说明</span>
</div>
<div class="sjsm">
<div v-for="(item, index) in 9" :key="index">
<div>
<div class="left">
<img src="../../assets/img/tongji/qinzhi.png" alt="">
<p>{{strArr[0]}}</p>
</div>
<div class="right">
<p>累计报名<span class="hight-font">6800</span>人，关联购物金额<span class="hight-font">57952.67</span>万，报名均价为<span class="hight-font">8152.69</span>元</p>
<p>最喜爱产品<span class="hight-font">《椿山庄假期》</span></p>
</div>
</div>
<div>
<div class="left">
<img src='../../assets/img/tongji/miyue.png' alt="">
<p>{{strArr[1]}}</p>
</div>
<div class="right">
<p>累计报名<span class="hight-font">6800</span>人，关联购物金额<span class="hight-font">57952.67</span>万，报名均价为<span class="hight-font">8152.69</span>元</p>
<p>最喜爱产品<span class="hight-font">《椿山庄假期》</span></p>
</div>
</div>
<div>
<div class="left">
<img src='../../assets/img/tongji/xiyang.png' alt="">
<p>{{strArr[2]}}</p>
</div>
<div class="right">
<p>累计报名<span class="hight-font">6800</span>人，关联购物金额<span class="hight-font">57952.67</span>万，报名均价为<span class="hight-font">8152.69</span>元</p>
<p>最喜爱产品<span class="hight-font">《椿山庄假期》</span></p>
</div>
</div>
<div>
<div class="left">
<img src="../../assets/img/tongji/shujia.png" alt="">
<p>{{strArr[3]}}</p>
</div>
<div class="right">
<p>累计报名<span class="hight-font">6800</span>人，关联购物金额<span class="hight-font">57952.67</span>万，报名均价为<span class="hight-font">8152.69</span>元</p>
<p>最喜爱产品<span class="hight-font">《椿山庄假期》</span></p>
</div>
</div>
<div>
<div class="left">
<img v-if="item.Sex === 1" src="../../assets/img/tongji/man1.png" alt="">
<img v-else src="../../assets/img/tongji/woman1.png" alt="">
<span class="font-size-12">{{item.SexStr}}士</span>
<img src='../../assets/img/tongji/hanjia.png' alt="">
<p>{{strArr[4]}}</p>
</div>
<div class="right">
<p>累计报名<span class="hight-font">{{item.SexCount}}</span>人，关联购物金额<span class="hight-font">{{item.ShopMoney}}</span>万，报名均价为<span class="hight-font">{{item.Unit_Price}}</span>元</p>
<p>最喜爱产品<span class="hight-font">《{{item.LtName}}》</span></p>
<p>累计报名<span class="hight-font">6800</span>人，关联购物金额<span class="hight-font">57952.67</span>万，报名均价为<span class="hight-font">8152.69</span>元</p>
<p>最喜爱产品<span class="hight-font">《椿山庄假期》</span></p>
</div>
</div>
</div>
......@@ -151,7 +193,7 @@
<div class="situ">
<div class="c">根据对客户年龄段的统计可以，更好的了解不同年龄段客人的喜好，消费能力的判读，从而快速的推荐团队给客人等等等</div>
<div class="bot" @click="drawer = true">
查看更多，参与讨论(19)
查看更多，参与讨论(1)
<i class="el-icon-d-arrow-right"></i>
</div>
</div>
......@@ -182,11 +224,42 @@ export default {
return {
discussID: 0,
drawer: false,
chartData: [50, 30, 20, 10, 60],
shopChartData: [],
SexOrder: [],
chartData: [17,5,20,37,21],
shopChartData: [{
text:'亲子',
num:17,
color:'#0D2481'
},{
text:'蜜月',
num:5,
color:'#FFA97C'
},{
text:'夕阳红',
num:20,
color:'#98BD7B'
},{
text:'暑期',
num:37,
color:'#D2C9F1'
},{
text:'寒假',
num:21,
color:'#6EBCE2'
}],
SexOrder: [17,5,20,37,21],
loading: false,
strArr: ['亲子', '蜜月', '夕阳红', '暑期', '寒假']
strArr: ['亲子', '蜜月', '夕阳红', '暑期', '寒假'],
imgs:[{
url:require('../../assets/img/tongji/qinzhi.png')
},{
url:require('../../assets/img/tongji/miyue.png')
},{
url:require('../../assets/img/tongji/xiyang.png')
},{
url:require('../../assets/img/tongji/shujia.png')
},{
url:require('../../assets/img/tongji/hanjia.png')
}]
};
},watch:{
......@@ -202,20 +275,21 @@ export default {
let contShop = res.data.data[0].ShopMoney + res.data.data[1].ShopMoney, man = res.data.data[0].ShopMoney, woman = res.data.data[1].ShopMoney,
contNum = res.data.data[0].SexCount + res.data.data[1].SexCount, manN = res.data.data[0].SexCount, womanN = res.data.data[1].SexCount;
let chartData = [], shopChartData = [];
chartData.push(
((manN/contNum)*100).toFixed(2)
)
chartData.push(
((womanN/contNum)*100).toFixed(2)
)
shopChartData.push(
Number(((man/contShop)*100).toFixed(0))
)
shopChartData.push(
Number(((woman/contShop)*100).toFixed(0))
)
// chartData.push(
// ((manN/contNum)*100).toFixed(2)
// )
// chartData.push(
// ((womanN/contNum)*100).toFixed(2)
// )
// shopChartData.push(
// Number(((man/contShop)*100).toFixed(0))
// )
// shopChartData.push(
// Number(((woman/contShop)*100).toFixed(0))
// )
this.chartData = chartData
this.shopChartData = shopChartData
//this.shopChartData = shopChartData
this.chartData.
this.loading = false
});
}
......
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