Skip to content

C
CRM
Commit 815a51dc authored by 罗超's avatar 罗超
Browse files
Options

临时提交

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