angelo
/
web-base-admin
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(dashboard): 展示字段调整

This commit is contained in:
woody 2025-05-13 15:35:39 +08:00
parent 1921133de7
commit 442f51996a
1 changed files with 40 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
src/views/dashboard/dashboard.vue
View File

@ -12,21 +12,21 @@
<div class="dashboard-card-group"> <div class="dashboard-card-group">
<div class="dashboard-card-title">会员数据</div> <div class="dashboard-card-title">会员数据</div>
<div class="dashboard-card-list"> <div class="dashboard-card-list">
<div class="dashboard-card"> <!-- <div class="dashboard-card">
<div class="dashboard-card-label">会员总数</div> <div class="dashboard-card-label">会员总数</div>
<div class="dashboard-card-value">{{ memberSummary.memberTotal || 0 }}</div> <div class="dashboard-card-value">{{ memberSummary.memberTotal || 0 }}</div>
</div> </div> -->
<div class="dashboard-card"> <div class="dashboard-card">
<div class="dashboard-card-label">今日新增会员</div> <div class="dashboard-card-label">当月新增会员</div>
<div class="dashboard-card-value">{{ memberSummary.memberToday || 0 }}</div> <div class="dashboard-card-value">{{ memberSummary.memberMonth || 0 }}</div>
</div> </div>
<div class="dashboard-card"> <div class="dashboard-card">
<div class="dashboard-card-label">昨日新增会员</div> <div class="dashboard-card-label">昨日新增会员</div>
<div class="dashboard-card-value">{{ memberSummary.memberYesterday || 0 }}</div> <div class="dashboard-card-value">{{ memberSummary.memberYesterday || 0 }}</div>
</div> </div>
<div class="dashboard-card"> <div class="dashboard-card">
<div class="dashboard-card-label">当月新增会员</div> <div class="dashboard-card-label">今日新增会员</div>
<div class="dashboard-card-value">{{ memberSummary.memberMonth || 0 }}</div> <div class="dashboard-card-value">{{ memberSummary.memberToday || 0 }}</div>
</div> </div>
</div> </div>
</div> </div>
@ -38,28 +38,29 @@
<div class="dashboard-card-label">首购金额</div> <div class="dashboard-card-label">首购金额</div>
<div class="dashboard-card-value dashboard-card-value--today">{{ dailyPerformance.today && dailyPerformance.today.firstAmount || '0.00' }}</div> <div class="dashboard-card-value dashboard-card-value--today">{{ dailyPerformance.today && dailyPerformance.today.firstAmount || '0.00' }}</div>
</div> </div>
<div class="dashboard-card dashboard-card--performance dashboard-card--today"> <!-- <div class="dashboard-card dashboard-card--performance dashboard-card--today">
<div class="dashboard-card-label">首购业绩</div> <div class="dashboard-card-label">首购业绩</div>
<div class="dashboard-card-value dashboard-card-value--today">{{ dailyPerformance.today && dailyPerformance.today.firstAchieve || '0.00' }}</div> <div class="dashboard-card-value dashboard-card-value--today">{{ dailyPerformance.today && dailyPerformance.today.firstAchieve || '0.00' }}</div>
</div> </div> -->
<div class="dashboard-card dashboard-card--performance dashboard-card--today"> <div class="dashboard-card dashboard-card--performance dashboard-card--today">
<div class="dashboard-card-label">复购金额</div> <div class="dashboard-card-label">复购金额</div>
<div class="dashboard-card-value dashboard-card-value--today">{{ dailyPerformance.today && dailyPerformance.today.repAmount || '0.00' }}</div> <div class="dashboard-card-value dashboard-card-value--today">{{ dailyPerformance.today && dailyPerformance.today.repAmount || '0.00' }}</div>
</div> </div>
<div class="dashboard-card dashboard-card--performance dashboard-card--today"> <!-- <div class="dashboard-card dashboard-card--performance dashboard-card--today">
<div class="dashboard-card-label">复购业绩</div> <div class="dashboard-card-label">复购业绩</div>
<div class="dashboard-card-value dashboard-card-value--today">{{ dailyPerformance.today && dailyPerformance.today.repAchieve || '0.00' }}</div> <div class="dashboard-card-value dashboard-card-value--today">{{ dailyPerformance.today && dailyPerformance.today.repAchieve || '0.00' }}</div>
</div> -->
<div class="dashboard-card dashboard-card--performance dashboard-card--today dashboard-card--total-amount">
<div class="dashboard-card-label">总金额</div>
<div class="dashboard-card-value dashboard-card-value--today">{{ getSum(dailyPerformance.today && dailyPerformance.today.firstAmount, dailyPerformance.today && dailyPerformance.today.repAmount) }}</div>
</div> </div>
<div class="dashboard-total-row"> <!-- <div class="dashboard-total-row">
<div class="dashboard-card dashboard-card--performance dashboard-card--today dashboard-card--total-amount">
<div class="dashboard-card-label">总金额</div>
<div class="dashboard-card-value dashboard-card-value--today">{{ getSum(dailyPerformance.today && dailyPerformance.today.firstAmount, dailyPerformance.today && dailyPerformance.today.repAmount) }}</div>
</div>
<div class="dashboard-card dashboard-card--performance dashboard-card--today dashboard-card--total-achievement"> <div class="dashboard-card dashboard-card--performance dashboard-card--today dashboard-card--total-achievement">
<div class="dashboard-card-label">总业绩</div> <div class="dashboard-card-label">总业绩</div>
<div class="dashboard-card-value dashboard-card-value--today">{{ getSum(dailyPerformance.today && dailyPerformance.today.firstAchieve, dailyPerformance.today && dailyPerformance.today.repAchieve) }}</div> <div class="dashboard-card-value dashboard-card-value--today">{{ getSum(dailyPerformance.today && dailyPerformance.today.firstAchieve, dailyPerformance.today && dailyPerformance.today.repAchieve) }}</div>
</div> </div>
</div> </div> -->
</div> </div>
</div> </div>
<div class="dashboard-card-group dashboard-card-group--yesterday"> <div class="dashboard-card-group dashboard-card-group--yesterday">
@ -69,28 +70,29 @@
<div class="dashboard-card-label">首购金额</div> <div class="dashboard-card-label">首购金额</div>
<div class="dashboard-card-value">{{ dailyPerformance.yesterday && dailyPerformance.yesterday.firstAmount || '0.00' }}</div> <div class="dashboard-card-value">{{ dailyPerformance.yesterday && dailyPerformance.yesterday.firstAmount || '0.00' }}</div>
</div> </div>
<div class="dashboard-card dashboard-card--performance dashboard-card--yesterday"> <!-- <div class="dashboard-card dashboard-card--performance dashboard-card--yesterday">
<div class="dashboard-card-label">首购业绩</div> <div class="dashboard-card-label">首购业绩</div>
<div class="dashboard-card-value">{{ dailyPerformance.yesterday && dailyPerformance.yesterday.firstAchieve || '0.00' }}</div> <div class="dashboard-card-value">{{ dailyPerformance.yesterday && dailyPerformance.yesterday.firstAchieve || '0.00' }}</div>
</div> </div> -->
<div class="dashboard-card dashboard-card--performance dashboard-card--yesterday"> <div class="dashboard-card dashboard-card--performance dashboard-card--yesterday">
<div class="dashboard-card-label">复购金额</div> <div class="dashboard-card-label">复购金额</div>
<div class="dashboard-card-value">{{ dailyPerformance.yesterday && dailyPerformance.yesterday.repAmount || '0.00' }}</div> <div class="dashboard-card-value">{{ dailyPerformance.yesterday && dailyPerformance.yesterday.repAmount || '0.00' }}</div>
</div> </div>
<div class="dashboard-card dashboard-card--performance dashboard-card--yesterday"> <!-- <div class="dashboard-card dashboard-card--performance dashboard-card--yesterday">
<div class="dashboard-card-label">复购业绩</div> <div class="dashboard-card-label">复购业绩</div>
<div class="dashboard-card-value">{{ dailyPerformance.yesterday && dailyPerformance.yesterday.repAchieve || '0.00' }}</div> <div class="dashboard-card-value">{{ dailyPerformance.yesterday && dailyPerformance.yesterday.repAchieve || '0.00' }}</div>
</div> -->
<div class="dashboard-card dashboard-card--performance dashboard-card--yesterday dashboard-card--total-amount">
<div class="dashboard-card-label">总金额</div>
<div class="dashboard-card-value">{{ getSum(dailyPerformance.yesterday && dailyPerformance.yesterday.firstAmount, dailyPerformance.yesterday && dailyPerformance.yesterday.repAmount) }}</div>
</div> </div>
<div class="dashboard-total-row"> <!-- <div class="dashboard-total-row">
<div class="dashboard-card dashboard-card--performance dashboard-card--yesterday dashboard-card--total-amount">
<div class="dashboard-card-label">总金额</div>
<div class="dashboard-card-value">{{ getSum(dailyPerformance.yesterday && dailyPerformance.yesterday.firstAmount, dailyPerformance.yesterday && dailyPerformance.yesterday.repAmount) }}</div>
</div>
<div class="dashboard-card dashboard-card--performance dashboard-card--yesterday dashboard-card--total-achievement"> <div class="dashboard-card dashboard-card--performance dashboard-card--yesterday dashboard-card--total-achievement">
<div class="dashboard-card-label">总业绩</div> <div class="dashboard-card-label">总业绩</div>
<div class="dashboard-card-value">{{ getSum(dailyPerformance.yesterday && dailyPerformance.yesterday.firstAchieve, dailyPerformance.yesterday && dailyPerformance.yesterday.repAchieve) }}</div> <div class="dashboard-card-value dashboard-card-value--today">{{ getSum(dailyPerformance.yesterday && dailyPerformance.yesterday.firstAchieve, dailyPerformance.yesterday && dailyPerformance.yesterday.repAchieve) }}</div>
</div> </div>
</div> </div> -->
</div> </div>
</div> </div>
<div class="dashboard-card-group dashboard-card-group--month"> <div class="dashboard-card-group dashboard-card-group--month">
@ -100,19 +102,23 @@
<div class="dashboard-card-label">首购金额</div> <div class="dashboard-card-label">首购金额</div>
<div class="dashboard-card-value">{{ monthlyPerformance.firstAmount || '0.00' }}</div> <div class="dashboard-card-value">{{ monthlyPerformance.firstAmount || '0.00' }}</div>
</div> </div>
<div class="dashboard-card dashboard-card--performance dashboard-card--month"> <!-- <div class="dashboard-card dashboard-card--performance dashboard-card--month">
<div class="dashboard-card-label">首购业绩</div> <div class="dashboard-card-label">首购业绩</div>
<div class="dashboard-card-value">{{ monthlyPerformance.firstAchieve || '0.00' }}</div> <div class="dashboard-card-value">{{ monthlyPerformance.firstAchieve || '0.00' }}</div>
</div> </div> -->
<div class="dashboard-card dashboard-card--performance dashboard-card--month"> <div class="dashboard-card dashboard-card--performance dashboard-card--month">
<div class="dashboard-card-label">复购金额</div> <div class="dashboard-card-label">复购金额</div>
<div class="dashboard-card-value">{{ monthlyPerformance.repAmount || '0.00' }}</div> <div class="dashboard-card-value">{{ monthlyPerformance.repAmount || '0.00' }}</div>
</div> </div>
<div class="dashboard-card dashboard-card--performance dashboard-card--month"> <!-- <div class="dashboard-card dashboard-card--performance dashboard-card--month">
<div class="dashboard-card-label">复购业绩</div> <div class="dashboard-card-label">复购业绩</div>
<div class="dashboard-card-value">{{ monthlyPerformance.repAchieve || '0.00' }}</div> <div class="dashboard-card-value">{{ monthlyPerformance.repAchieve || '0.00' }}</div>
</div> -->
<div class="dashboard-card dashboard-card--performance dashboard-card--month dashboard-card--total-amount">
<div class="dashboard-card-label">总金额</div>
<div class="dashboard-card-value">{{ getSum(monthlyPerformance.firstAmount, monthlyPerformance.repAmount) }}</div>
</div> </div>
<div class="dashboard-total-row"> <!-- <div class="dashboard-total-row">
<div class="dashboard-card dashboard-card--performance dashboard-card--month dashboard-card--total-amount"> <div class="dashboard-card dashboard-card--performance dashboard-card--month dashboard-card--total-amount">
<div class="dashboard-card-label">总金额</div> <div class="dashboard-card-label">总金额</div>
<div class="dashboard-card-value">{{ getSum(monthlyPerformance.firstAmount, monthlyPerformance.repAmount) }}</div> <div class="dashboard-card-value">{{ getSum(monthlyPerformance.firstAmount, monthlyPerformance.repAmount) }}</div>
@ -121,7 +127,7 @@
<div class="dashboard-card-label">总业绩</div> <div class="dashboard-card-label">总业绩</div>
<div class="dashboard-card-value">{{ getSum(monthlyPerformance.firstAchieve, monthlyPerformance.repAchieve) }}</div> <div class="dashboard-card-value">{{ getSum(monthlyPerformance.firstAchieve, monthlyPerformance.repAchieve) }}</div>
</div> </div>
</div> </div> -->
</div> </div>
</div> </div>
</div> </div>
@ -306,8 +312,8 @@ export default {
} }
.dashboard-card { .dashboard-card {
flex: 1 1 180px; flex: 1 1 240px;
min-width: 180px; min-width: 220px;
background: linear-gradient(135deg, #f6d365 0%, #fda085 100%); background: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
border-radius: 10px; border-radius: 10px;
box-shadow: 0 1px 6px 0 rgba(253,160,133,0.12); box-shadow: 0 1px 6px 0 rgba(253,160,133,0.12);
@ -340,8 +346,8 @@ export default {
border: 1px solid #e5e7eb; border: 1px solid #e5e7eb;
border-radius: 8px; border-radius: 8px;
padding: 20px; padding: 20px;
flex: 1 1 200px; flex: 1 1 240px;
min-width: 180px; min-width: 220px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;