<template>
|
<view v-loading="loading">
|
<view class="home-container p20">
|
<!-- 头部分会信息 -->
|
<view class="d-b-c">
|
<view class="branch-name f28 fb">{{branch.name}}</view>
|
<view @click="">退出管理</view>
|
</view>
|
<!-- 头部数据统计 -->
|
<view class="top-box d-b-c p20 mt30 radius24">
|
<view>
|
<view class="f24">活动总数</view>
|
<view class="f32 fb pt10">{{top_data.total_activity}}</view>
|
</view>
|
<view>
|
<view class="f24">会员总数</view>
|
<view class="f32 fb pt10">{{top_data.total_member}}</view>
|
</view>
|
<view>
|
<view class="f24">{{points_name()}}总数</view>
|
<view class="f32 fb pt10">{{top_data.total_points}}</view>
|
</view>
|
<view>
|
<view class="f24">资金总数</view>
|
<view class="f32 fb pt10">{{top_data.total_money}}</view>
|
</view>
|
<!-- 如果是总会，显示分会数量 -->
|
<view v-if="branch.parent_branch_id==0">
|
<view class="f24">分会总数</view>
|
<view class="f32 fb pt10">{{top_data.total_branch}}</view>
|
</view>
|
</view>
|
<!-- 今日概况 -->
|
<view class="item-section bg-white radius24 p20 mt20">
|
<view class="d-b-c pb20">
|
<view class="f28 fb">今日概况</view>
|
</view>
|
<view class="d-b-c">
|
<view>
|
<view class="f24">新增活动</view>
|
<view class="f32 fb pt10">{{branch_data.total_new_activity.tday}}</view>
|
<view class="f24 gray9 pt10">昨日：{{branch_data.total_new_activity.ytd}}</view>
|
</view>
|
<view>
|
<view class="f24">新增会员</view>
|
<view class="f32 fb pt10">{{branch_data.total_new_member.tday}}</view>
|
<view class="f24 gray9 pt10">昨日：{{branch_data.total_new_member.ytd}}</view>
|
</view>
|
<view>
|
<view class="f24">新增报名</view>
|
<view class="f32 fb pt10">{{branch_data.total_activity_user.tday}}</view>
|
<view class="f24 gray9 pt10">昨日：{{branch_data.total_activity_user.ytd}}</view>
|
</view>
|
<view>
|
<view class="f24">新增报名费(元)</view>
|
<view class="f32 fb pt10">{{branch_data.total_price.tday}}</view>
|
<view class="f24 gray9 pt10">昨日：{{branch_data.total_price.ytd}}</view>
|
</view>
|
</view>
|
</view>
|
<!-- 功能菜单 -->
|
<view class="item-section home-menu-box f28 mt20 d-b-c">
|
<view class="menu-item bg-white radius24 p20 d-c-c flex-1 mr20" @click="gotoPage('pages/branch/admin/branch/index')" v-if="branch.parent_branch_id==0">
|
<text class="iconfont icon-dianpu1"></text>
|
<text class="name">分会管理</text>
|
</view>
|
<view class="menu-item bg-white radius24 p20 d-c-c flex-1 mr20" @click="gotoPage('pages/branch/admin/activity/index')">
|
<text class="iconfont icon-yuyue"></text>
|
<text class="name">活动管理</text>
|
</view>
|
<view class="menu-item bg-white radius24 p20 d-c-c flex-1" @click="gotoPage('pages/branch/admin/member/index')">
|
<text class="iconfont icon-tuandui"></text>
|
<text class="name">会员管理</text>
|
</view>
|
</view>
|
<!-- 会员数据 -->
|
<!-- <view class="item-section chart-box bg-white radius24 p20 mt20">
|
<view class="d-b-c pb20">
|
<view class="f28 fb">会员数据</view>
|
<view class="d-s-c time-box">
|
<view class="time-item" :class="{'active':memberLineTime==item.value}" v-for="item in timeList" :key="item.value" @click="changeMemberLineTime(item.value)">{{ item.label }}</view>
|
</view>
|
</view>
|
<view class="chart-body">
|
<l-echart ref="memberChart"></l-echart>
|
</view>
|
</view> -->
|
<!-- 活跃分会排行榜 -->
|
<view class="item-section ranking-box bg-white radius24 p20 mt20" v-if="branch.parent_branch_id==0">
|
<view class="d-b-c pb20">
|
<view class="f28 fb">活跃分会排行榜</view>
|
<view class="d-s-c time-box">
|
<view class="time-item" :class="{'active':branchRankingTime==item.value}" v-for="item in timeList" :key="item.value" @click="changeBranchRankingTime(item.value)">{{ item.label }}</view>
|
</view>
|
</view>
|
<view class="ranking-body table-container">
|
<view class="table-header d-b-c fb">
|
<view class="table-cell">排名</view>
|
<view class="table-cell">名称</view>
|
<view class="table-cell flex-1 tr">组织活动数</view>
|
</view>
|
<view class="table-body">
|
<view class="table-row d-b-c pt20" v-for="(item, index) in branchRankingData" :key="index">
|
<view class="table-cell ranking-num">
|
<text :class="'gray'+index">{{ index+1 }}</text>
|
</view>
|
<view class="table-cell">{{item.branch_name}}
|
</view>
|
<view class="table-cell flex-1 tr">{{ item.total }}</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
<!-- 活跃会员排行榜 -->
|
<view class="item-section ranking-box bg-white radius24 p20 mt20">
|
<view class="d-b-c pb20">
|
<view class="f28 fb">活跃会员排行榜</view>
|
<view class="d-s-c time-box">
|
<view class="time-item" :class="{'active':memberRankingTime==item.value}" v-for="item in timeList" :key="item.value" @click="changeMemberRankingTime(item.value)">{{ item.label }}</view>
|
</view>
|
</view>
|
<view class="ranking-body table-container">
|
<view class="table-header d-b-c fb">
|
<view class="table-cell">排名</view>
|
<view class="table-cell">会员</view>
|
<view class="table-cell flex-1 tr">参与活动数</view>
|
</view>
|
<view class="table-body">
|
<view class="table-row d-b-c pt20" v-for="(item, index) in memberRankingData" :key="index">
|
<view class="table-cell ranking-num">
|
<text :class="'gray'+index">{{ index+1 }}</text>
|
</view>
|
<view class="table-cell d-s-c">
|
<image class="user-avatar mr10" :src="item.avatarUrl"></image><text>{{item.nickName}}</text>
|
</view>
|
<view class="table-cell flex-1 tr">{{ item.total }}</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
// import * as echarts from '@/uni_modules/lime-echart/static/echarts.min';
|
export default {
|
data() {
|
return {
|
loading: true,
|
/*头部数据*/
|
top_data: [],
|
branch_data: {
|
total_price: [],
|
total_activity_user: [],
|
total_new_member: [],
|
total_new_activity: [],
|
fav_user_total: []
|
},
|
branch: {},
|
memberLineTime: 'year',
|
memberRankingTime: 'year',
|
branchRankingTime: 'year',
|
timeList: [
|
{ value: 'lately7', label: '近7天' },
|
{ value: 'lately30', label: '近30天' },
|
{ value: 'month', label: '本月' },
|
{ value: 'year', label: '本年' }
|
],
|
memberLineData: [], // 会员曲线数据
|
memberRankingData: [], // 会员活跃数据
|
branchRankingData: [], // 分会活跃数据
|
/*会员图表数据*/
|
memberOption: {
|
title: {
|
|
},
|
grid: {
|
left: '3%',
|
right: '4%',
|
bottom: '3%',
|
containLabel: true
|
},
|
tooltip: {
|
trigger: 'axis'
|
},
|
yAxis: {}
|
},
|
mChart: null,
|
};
|
},
|
onLoad() {
|
this.getData();
|
this.getMemberRankingData(); // 活跃会员数据
|
},
|
methods: {
|
getData() {
|
let self = this;
|
uni.showLoading({
|
title: '加载中...'
|
});
|
self._get('branch.admin.index/index',{
|
|
}, res => {
|
self.top_data = res.data.data.top_data;
|
self.branch_data = res.data.data.branch_data;
|
self.branch = res.data.branch;
|
// 活跃分会
|
if (this.branch.parent_branch_id == 0) {
|
this.getBranchRankingData();
|
}
|
self.loading = false;
|
});
|
},
|
|
// 会员数据时间
|
changeMemberLineTime(e) {
|
this.memberRankingTime = e;
|
this.getMemberLineData();
|
},
|
|
// 会员数据
|
getMemberLineData() {
|
let self = this;
|
self._get('branch.admin.member/newMember',{
|
date: self.memberLineTime
|
}, res => {
|
self.memberLineData = res.data;
|
self.createMemberOption();
|
});
|
},
|
|
// 活跃会员时间
|
changeMemberRankingTime(e) {
|
this.memberRankingTime = e;
|
this.getMemberRankingData();
|
},
|
|
// 活跃会员数据
|
getMemberRankingData() {
|
let self = this;
|
self._get('branch.admin.member/ranking', {
|
date: self.memberRankingTime
|
}, res => {
|
self.memberRankingData = res.data.list;
|
});
|
},
|
|
// 活跃分会时间
|
changeBranchRankingTime(e) {
|
this.branchRankingTime = e;
|
this.getBranchRankingData();
|
},
|
|
// 活跃分会数据
|
getBranchRankingData() {
|
let self = this;
|
self._get('branch.admin.branch/ranking', {
|
date: self.branchRankingTime
|
}, res => {
|
self.branchRankingData = res.data.list;
|
});
|
},
|
|
// 会员数据图表数据
|
createMemberOption() {
|
let names = [];
|
let xAxis = this.memberLineData.days;
|
let series1 = [];
|
this.memberLineData.data.forEach(item => {
|
series1.push(item.total);
|
});
|
names = ['新增会员数'];
|
|
// 指定图表的配置项和数据
|
this.memberOption.xAxis = {
|
type: 'category',
|
boundaryGap: false,
|
data: xAxis
|
};
|
this.memberOption.color=["#5b8ff9", "#409EFF"];
|
|
this.memberOption.legend = {
|
data: [{ name: names[0], color: '#ccc' }]
|
};
|
this.memberOption.series = [
|
{
|
name: names[0],
|
type: 'line',
|
data: series1,
|
lineStyle: {
|
color: '#5b8ff9'
|
}
|
}
|
];
|
// this.$refs.memberChart.init(echarts, chart=> {
|
// chart.setOption(this.memberOption);
|
// });
|
this.mChart = echarts.init(this.$refs.memberChart);
|
this.mChart.setOption(this.memberOption);
|
},
|
},
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.home-container {
|
.top-box {
|
background: linear-gradient(145deg, #E6DFFF, #F9E3EF);
|
}
|
|
.item-section {
|
|
.time-box {
|
border: 1rpx solid #dddddd;
|
border-radius: 12rpx;
|
font-size: 24rpx;
|
overflow: hidden;
|
|
.time-item {
|
padding: 6rpx 12rpx;
|
border-right: 1rpx solid #dddddd;
|
|
&:last-child {
|
border-right: 0;
|
}
|
}
|
|
.active {
|
background-color: #409EFF;
|
color: #ffffff;
|
}
|
}
|
|
.chart-body {
|
height: 400rpx;
|
}
|
|
}
|
|
.table-container {
|
.table-cell {
|
width: 260rpx;
|
|
&:first-child {
|
width: 120rpx;
|
}
|
|
.user-avatar {
|
width: 50rpx;
|
height: 50rpx;
|
border-radius: 50rpx;
|
}
|
|
}
|
|
.ranking-num {
|
|
text {
|
display: inline-block;
|
width: 40rpx;
|
height: 40rpx;
|
border-radius: 40rpx;
|
text-align: center;
|
line-height: 40rpx;
|
font-size: 22rpx;
|
}
|
|
.gray0 {
|
background: #EBCA80;
|
}
|
.gray1 {
|
background: #ABB4C7;
|
}
|
.gray2 {
|
background: #CCB3A0;
|
}
|
}
|
}
|
|
.home-menu-box {
|
|
.menu-item {
|
padding-top: 30rpx;
|
padding-bottom: 30rpx;
|
color: #ffffff;
|
background: linear-gradient(90deg, #f17070, #ffa2a3);
|
|
+.menu-item {
|
background: linear-gradient(90deg, #7caaef, #a0bdff);
|
|
+.menu-item {
|
background: linear-gradient(90deg, #f0a56e, #f2c078);
|
}
|
}
|
}
|
|
.iconfont {
|
color: #ffffff;
|
font-size: 36rpx;
|
margin-right: 10rpx;
|
}
|
}
|
}
|
|
</style>
|
