<template>
|
<div class="home" v-loading="loading">
|
<div class="d-b-c">
|
<div class="operation-wrap">
|
<el-row :gutter="14">
|
<el-col :span="col_span" class="d-c-c">
|
<div class="grid-content pr bg01">
|
<div class="info">
|
<h3>{{top_data.total_activity}}</h3>
|
<p>活动总数</p>
|
</div>
|
<i class="el-icon-s-flag"></i>
|
</div>
|
</el-col>
|
<el-col :span="col_span" class="d-c-c">
|
<div class="grid-content pr bg02">
|
<div class="info">
|
<h3>{{top_data.total_member}}</h3>
|
<p>会员总数</p>
|
</div>
|
<i class="el-icon-s-custom"></i>
|
</div>
|
</el-col>
|
<el-col :span="col_span" class="d-c-c">
|
<div class="grid-content pr bg03 ">
|
<div class="info">
|
<h3>{{top_data.total_points}}</h3>
|
<p>连盟币总数</p>
|
</div>
|
<i class="el-icon-s-grid"></i>
|
</div>
|
</el-col>
|
<el-col :span="col_span" class="d-c-c">
|
<div class="grid-content pr bg04">
|
<div class="info">
|
<h3>{{top_data.total_money}}</h3>
|
<p>资金总数</p>
|
</div>
|
<i class="el-icon-s-finance"></i>
|
</div>
|
</el-col>
|
<el-col :span="4" class="d-c-c" v-if="baseInfo.user.branch_type == 10">
|
<div class="grid-content pr bg05">
|
<div class="info">
|
<h3>{{top_data.total_branch}}</h3>
|
<p>分会总数</p>
|
</div>
|
<i class="el-icon-s-shop"></i>
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
</div>
|
<div class="home-index pt16">
|
<!--main-index-->
|
<div class="main-index">
|
<div class="bg-white p20">
|
<div class="common-form" style="font-size: 18px;">
|
今日概况
|
</div>
|
<el-row class="today-box">
|
<el-col :span="6">
|
<div class="grid-content">
|
<div class="info">
|
<p class="des">新增会员数</p>
|
<h3>{{branch_data.total_new_member.tday}}</h3>
|
<p class="yesterday">昨日：{{branch_data.total_new_member.ytd}}</p>
|
</div>
|
</div>
|
</el-col>
|
<el-col :span="6">
|
<div class="grid-content">
|
<div class="info">
|
<p class="des">新增活动数</p>
|
<h3>{{branch_data.total_new_activity.tday}}</h3>
|
<p class="yesterday">昨日：{{branch_data.total_new_activity.ytd}}</p>
|
</div>
|
</div>
|
</el-col>
|
<el-col :span="6">
|
<div class="grid-content">
|
<div class="info">
|
<p class="des">新增报名人数</p>
|
<h3>{{branch_data.total_activity_user.tday}}</h3>
|
<p class="yesterday">昨日：{{branch_data.total_activity_user.ytd}}</p>
|
</div>
|
</div>
|
</el-col>
|
<el-col :span="6">
|
<div class="grid-content">
|
<div class="info">
|
<p class="des">新增报名费(元)</p>
|
<h3>{{branch_data.total_price.tday}}</h3>
|
<p class="yesterday">昨日：{{branch_data.total_price.ytd}}</p>
|
</div>
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
<div class="pt16">
|
<!--会员数据-->
|
<div class="bg-white p20">
|
<MemberLineChart></MemberLineChart>
|
</div>
|
</div>
|
<div class="pt16">
|
<!--活动数据-->
|
<div class="bg-white p20">
|
<ActivityLineChart></ActivityLineChart>
|
</div>
|
</div>
|
</div>
|
<div class="matters-wrap pl16">
|
<!--活跃分会-->
|
<div class="bg-white p20" v-if="baseInfo.user.branch_type == 10">
|
<BranchRanking></BranchRanking>
|
</div>
|
<!--活跃会员-->
|
<div class="bg-white p20 mt16">
|
<MemberRanking></MemberRanking>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import IndexApi from '@/api/index.js';
|
import Transaction from '@/views/home/part/Transaction.vue';
|
import BranchRanking from './part/branch/Ranking.vue';
|
import MemberRanking from './part/member/Ranking.vue';
|
import MemberLineChart from './part/member/LineChart.vue';
|
import ActivityLineChart from './part/activity/LineChart.vue';
|
export default {
|
components: {
|
Transaction,
|
BranchRanking,
|
MemberRanking,
|
MemberLineChart,
|
ActivityLineChart
|
},
|
data() {
|
return {
|
/*是否加载完成*/
|
loading: true,
|
/*头部数据*/
|
top_data: [],
|
branch_data: {
|
total_price: [],
|
total_activity_user: [],
|
total_new_member: [],
|
total_new_activity: [],
|
fav_user_total: []
|
},
|
/*待办事项*/
|
wait_data: {
|
order: [],
|
product: [],
|
stock: [],
|
},
|
col_span: 5,
|
};
|
},
|
inject: ['baseInfo'],
|
created() {
|
/*获取数据*/
|
setTimeout(() => {
|
this.initData();
|
this.getData();
|
}, 500);
|
|
},
|
methods: {
|
/*获取数据*/
|
getData() {
|
let self = this;
|
IndexApi.getCount(true).then(data => {
|
self.loading = false;
|
self.top_data = data.data.data.top_data;
|
self.branch_data = data.data.data.branch_data;
|
self.wait_data = data.data.data.wait_data;
|
}).catch(error => {
|
|
});
|
},
|
|
initData() {
|
this.col_span = this.baseInfo.user.branch_type == 10 ? 5 : 6;
|
},
|
}
|
};
|
</script>
|
|
<style lang="scss">
|
|
.ranking-box {
|
.grid-title {
|
font-size: 14px;
|
font-weight: 700;
|
padding: 10px 0 20px;
|
border-bottom: 1px solid #eee;
|
}
|
.grid-list-content {
|
background: #fff;
|
min-height: 400px;
|
overflow: hidden;
|
.el-row {
|
margin-bottom: 6px;
|
border-bottom: 1px solid #EBEEF5;
|
&:last-child {
|
margin-bottom: 0;
|
}
|
}
|
.grid-list {
|
padding: 13px 0;
|
&:first-child {
|
span {
|
display: block;
|
width: 18px;
|
line-height: 18px;
|
text-align: center;
|
color: #fff;
|
border-radius: 100%;
|
-webkit-border-radius: 100%;
|
font-size: 12px;
|
&.navy-blue {
|
background: #D0D0D0;
|
}
|
&.gray0 {
|
background: #EBCA80;
|
}
|
&.gray1 {
|
background: #ABB4C7;
|
}
|
&.gray2 {
|
background: #CCB3A0;
|
}
|
}
|
}
|
&:nth-child(2) {
|
position: relative;
|
/* padding-left: 50px; */
|
span {
|
display: inline-block;
|
white-space: nowrap;
|
width: 100%;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
font-size: 14px;
|
}
|
img {
|
width: 30px;
|
height: 30px;
|
border-radius: 2px;
|
}
|
}
|
&:last-child {
|
font-size: 13px;
|
color: #000000;
|
}
|
}
|
}
|
}
|
|
</style>
|
<style lang="scss" scoped>
|
.right-content-box {
|
padding-top: 16px;
|
}
|
.subject-wrap {
|
padding: 0;
|
background: transparent;
|
}
|
.operation-wrap {
|
width: 100%;
|
// height: 164px;
|
// border-radius: 8px;
|
-webkit-box-pack: center;
|
-ms-flex-pack: center;
|
justify-content: center;
|
-webkit-box-orient: vertical;
|
-webkit-box-direction: normal;
|
-ms-flex-direction: column;
|
flex-direction: column;
|
overflow: hidden;
|
// background: #fff;
|
background-size: 100% 100%;
|
color: #FFFFFF;
|
// margin-right: 15px;
|
}
|
|
.home .operation-wrap .grid-content {
|
width: 100%;
|
height: 150px;
|
justify-content: flex-start;
|
align-items: center;
|
padding-left: 23px;
|
background: #fff;
|
}
|
|
.operation-wrap .grid-content h3 {
|
font-size: 36px;
|
line-height: 40px;
|
}
|
|
.operation-wrap .grid-content .info h3 {
|
font-size: 40px;
|
line-height: 40px;
|
color: #FFFFFF;
|
text-align: left;
|
margin-bottom: 20px;
|
}
|
|
.home .operation-wrap .grid-content .info {
|
margin-left: 10px;
|
text-align: left;
|
font-size: 14px;
|
color: #FFFFFF;
|
}
|
|
.operation-wrap .grid-content .svg-icon {
|
color: #FFFFFF;
|
}
|
|
.home-index {
|
display: -ms-flexbox;
|
display: flex;
|
-webkit-box-orient: horizontal;
|
-webkit-box-direction: normal;
|
-ms-flex-direction: row;
|
flex-direction: row;
|
-webkit-box-pack: justify;
|
-ms-flex-pack: justify;
|
justify-content: space-between;
|
min-width: 1000px;
|
overflow-x: auto;
|
}
|
|
.operation-wrap.branch {
|
width: 360px;
|
}
|
|
.operation-wrap .grid-content.bg01 {
|
background: linear-gradient(to right,#F17070, #FFA2A3);
|
}
|
|
.operation-wrap .grid-content.bg02 {
|
background: linear-gradient(to right,#7CAAEF, #A0BDFF);
|
}
|
|
.operation-wrap .grid-content.bg03 {
|
background: linear-gradient(to right,#F0A56E, #F2C078);
|
}
|
|
.operation-wrap .grid-content.bg04 {
|
background: linear-gradient(to right,#28BDCB, #73D0EE);
|
}
|
|
.operation-wrap .grid-content.bg05 {
|
background: linear-gradient(to right,#90C51B, #AFD924);
|
}
|
|
.operation-wrap .grid-content i {
|
position: absolute;
|
font-size: 130px;
|
right: 10px;
|
bottom: -20px;
|
opacity: .2;
|
}
|
|
.today-box .grid-content {
|
border-left: 1px solid #eee;
|
}
|
|
.today-box {
|
border-right: 1px solid #eee;
|
}
|
|
.operation-wrap .grid-content .info h3 {
|
font-size: 40px;
|
line-height: 40px;
|
color: #FFFFFF;
|
text-align: left;
|
margin-bottom: 20px;
|
}
|
|
.operation-wrap .grid-content .info {
|
margin-left: 10px;
|
text-align: center;
|
font-size: 14px;
|
color: #FFFFFF;
|
}
|
|
.operation-wrap .grid-content .svg-icon {
|
color: rgba(255, 255, 255, .3);
|
font-size: 300%;
|
}
|
|
.main-index {
|
flex: 1;
|
}
|
|
.main-index .grid-content,
|
.operation-wrap .grid-content {
|
|
display: -ms-flexbox;
|
display: flex;
|
-webkit-box-direction: row;
|
-ms-flex-direction: row;
|
flex-direction: row;
|
justify-content: center;
|
align-items: center;
|
}
|
|
.main-index .grid-content {
|
height: 120px;
|
}
|
|
.main-index .grid-content .pic {
|
margin-right: 10px;
|
}
|
|
.main-index .grid-content h3 {
|
font-size: 24px;
|
font-weight: normal;
|
}
|
|
.main-index .grid-content .yesterday {
|
color: #8c8c8c;
|
}
|
|
.main-index .grid-content .svg-icon {
|
color: #3a8ee6;
|
}
|
|
.matters-wrap {
|
padding-bottom: 15px;
|
width: 40%;
|
}
|
|
.matters .box {
|
width: 100%;
|
}
|
|
.grid-content .info h3 {
|
font-weight: bold;
|
color: #5d75e3;
|
text-align: center;
|
}
|
|
.grid-content .info .des {
|
font-size: 16px;
|
margin-bottom: 6px;
|
}
|
|
.grid-content .info .yesterday {
|
font-size: 13px;
|
text-align: center;
|
}
|
|
</style>
|
