|
|
@@ -8,13 +8,35 @@
|
|
|
<h3>团队总数</h3>
|
|
|
<p class="stat-value">{{ teamStats?.totalTeams || 0 }}</p>
|
|
|
</div>
|
|
|
- <div class="card">
|
|
|
- <h3>总收入</h3>
|
|
|
- <p class="stat-value">{{ formatAmount(teamStats?.totalRevenue) }}</p>
|
|
|
+ <div class="card revenue-card">
|
|
|
+ <h3>总分润收入</h3>
|
|
|
+ <p class="stat-value revenue-value">{{ formatAmount(teamStats?.totalRevenue) }}</p>
|
|
|
+ <p class="stat-label">实际收入</p>
|
|
|
</div>
|
|
|
- <div class="card">
|
|
|
- <h3>今日收入</h3>
|
|
|
- <p class="stat-value">{{ formatAmount(teamStats?.todayRevenue) }}</p>
|
|
|
+ <div class="card sales-card">
|
|
|
+ <h3>总售卖金额</h3>
|
|
|
+ <p class="stat-value sales-value">{{ formatAmount(teamStats?.totalSales) }}</p>
|
|
|
+ <p class="stat-label">订单金额</p>
|
|
|
+ </div>
|
|
|
+ <div class="card revenue-card">
|
|
|
+ <h3>今日分润收入</h3>
|
|
|
+ <p class="stat-value revenue-value">{{ formatAmount(teamStats?.todayRevenue) }}</p>
|
|
|
+ <p class="stat-label">今日实际收入</p>
|
|
|
+ </div>
|
|
|
+ <div class="card sales-card">
|
|
|
+ <h3>今日售卖金额</h3>
|
|
|
+ <p class="stat-value sales-value">{{ formatAmount(teamStats?.todaySales) }}</p>
|
|
|
+ <p class="stat-label">今日订单金额</p>
|
|
|
+ </div>
|
|
|
+ <div class="card user-card">
|
|
|
+ <h3>今日日活用户</h3>
|
|
|
+ <p class="stat-value user-value">{{ teamStats?.todayDAU || 0 }}</p>
|
|
|
+ <p class="stat-label">活跃用户数</p>
|
|
|
+ </div>
|
|
|
+ <div class="card new-user-card">
|
|
|
+ <h3>今日新增用户</h3>
|
|
|
+ <p class="stat-value new-user-value">{{ teamStats?.todayNewUsers || 0 }}</p>
|
|
|
+ <p class="stat-label">新注册用户</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
@@ -24,13 +46,35 @@
|
|
|
<h3>团队名称</h3>
|
|
|
<p class="stat-value">{{ teamStats?.name || '-' }}</p>
|
|
|
</div>
|
|
|
- <div class="card">
|
|
|
- <h3>总收入</h3>
|
|
|
- <p class="stat-value">{{ formatAmount(teamStats?.totalRevenue) }}</p>
|
|
|
+ <div class="card revenue-card">
|
|
|
+ <h3>总分润收入</h3>
|
|
|
+ <p class="stat-value revenue-value">{{ formatAmount(teamStats?.totalRevenue) }}</p>
|
|
|
+ <p class="stat-label">实际收入</p>
|
|
|
</div>
|
|
|
- <div class="card">
|
|
|
- <h3>今日收入</h3>
|
|
|
- <p class="stat-value">{{ formatAmount(teamStats?.todayRevenue) }}</p>
|
|
|
+ <div class="card sales-card">
|
|
|
+ <h3>总售卖金额</h3>
|
|
|
+ <p class="stat-value sales-value">{{ formatAmount(teamStats?.totalSales) }}</p>
|
|
|
+ <p class="stat-label">订单金额</p>
|
|
|
+ </div>
|
|
|
+ <div class="card revenue-card">
|
|
|
+ <h3>今日分润收入</h3>
|
|
|
+ <p class="stat-value revenue-value">{{ formatAmount(teamStats?.todayRevenue) }}</p>
|
|
|
+ <p class="stat-label">今日实际收入</p>
|
|
|
+ </div>
|
|
|
+ <div class="card sales-card">
|
|
|
+ <h3>今日售卖金额</h3>
|
|
|
+ <p class="stat-value sales-value">{{ formatAmount(teamStats?.todaySales) }}</p>
|
|
|
+ <p class="stat-label">今日订单金额</p>
|
|
|
+ </div>
|
|
|
+ <div class="card user-card">
|
|
|
+ <h3>今日日活用户</h3>
|
|
|
+ <p class="stat-value user-value">{{ teamStats?.todayDAU || 0 }}</p>
|
|
|
+ <p class="stat-label">活跃用户数</p>
|
|
|
+ </div>
|
|
|
+ <div class="card new-user-card">
|
|
|
+ <h3>今日新增用户</h3>
|
|
|
+ <p class="stat-value new-user-value">{{ teamStats?.todayNewUsers || 0 }}</p>
|
|
|
+ <p class="stat-label">新注册用户</p>
|
|
|
</div>
|
|
|
<div class="card">
|
|
|
<h3>佣金率</h3>
|
|
|
@@ -65,14 +109,34 @@
|
|
|
<DataTable :value="teams" stripedRows class="teams-table">
|
|
|
<Column field="id" header="ID" sortable></Column>
|
|
|
<Column field="name" header="团队名称" sortable></Column>
|
|
|
- <Column field="totalRevenue" header="总收入" sortable>
|
|
|
+ <Column field="totalRevenue" header="总分润收入" sortable>
|
|
|
+ <template #body="slotProps">
|
|
|
+ <span class="revenue-amount">{{ formatAmount(slotProps.data.totalRevenue) }}</span>
|
|
|
+ </template>
|
|
|
+ </Column>
|
|
|
+ <Column field="totalSales" header="总售卖金额" sortable>
|
|
|
<template #body="slotProps">
|
|
|
- {{ formatAmount(slotProps.data.totalRevenue) }}
|
|
|
+ <span class="sales-amount">{{ formatAmount(slotProps.data.totalSales) }}</span>
|
|
|
</template>
|
|
|
</Column>
|
|
|
- <Column field="todayRevenue" header="今日收入" sortable>
|
|
|
+ <Column field="todayRevenue" header="今日分润收入" sortable>
|
|
|
<template #body="slotProps">
|
|
|
- {{ formatAmount(slotProps.data.todayRevenue) }}
|
|
|
+ <span class="revenue-amount">{{ formatAmount(slotProps.data.todayRevenue) }}</span>
|
|
|
+ </template>
|
|
|
+ </Column>
|
|
|
+ <Column field="todaySales" header="今日售卖金额" sortable>
|
|
|
+ <template #body="slotProps">
|
|
|
+ <span class="sales-amount">{{ formatAmount(slotProps.data.todaySales) }}</span>
|
|
|
+ </template>
|
|
|
+ </Column>
|
|
|
+ <Column field="todayDAU" header="今日日活用户" sortable>
|
|
|
+ <template #body="slotProps">
|
|
|
+ <span class="user-amount">{{ slotProps.data.todayDAU || 0 }}</span>
|
|
|
+ </template>
|
|
|
+ </Column>
|
|
|
+ <Column field="todayNewUsers" header="今日新增用户" sortable>
|
|
|
+ <template #body="slotProps">
|
|
|
+ <span class="new-user-amount">{{ slotProps.data.todayNewUsers || 0 }}</span>
|
|
|
</template>
|
|
|
</Column>
|
|
|
</DataTable>
|
|
|
@@ -269,7 +333,9 @@ const loadIncomeStats = async () => {
|
|
|
dates: data?.dates || [],
|
|
|
total: data?.total?.map(v => Number(v) || 0) || [],
|
|
|
totalTip: data?.totalTip?.map(v => Number(v) || 0) || [],
|
|
|
- totalCommission: data?.totalCommission?.map(v => Number(v) || 0) || []
|
|
|
+ totalCommission: data?.totalCommission?.map(v => Number(v) || 0) || [],
|
|
|
+ totalSales: data?.totalSales?.map(v => Number(v) || 0) || []
|
|
|
+ // 注意:根据用户要求,图表中不展示日活和新增用户数据
|
|
|
}
|
|
|
|
|
|
// 渲染图表
|
|
|
@@ -321,7 +387,7 @@ const renderChart = () => {
|
|
|
}
|
|
|
|
|
|
// 准备数据
|
|
|
- const { dates, total, totalTip, totalCommission } = incomeStats.value
|
|
|
+ const { dates, total, totalTip, totalCommission, totalSales } = incomeStats.value
|
|
|
|
|
|
// 创建数据集
|
|
|
const datasets = [
|
|
|
@@ -348,6 +414,14 @@ const renderChart = () => {
|
|
|
backgroundColor: 'rgba(245, 158, 11, 0.05)',
|
|
|
fill: true,
|
|
|
tension: 0.3
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '售卖金额',
|
|
|
+ data: totalSales,
|
|
|
+ borderColor: '#f59e0b',
|
|
|
+ backgroundColor: 'rgba(245, 158, 11, 0.05)',
|
|
|
+ fill: true,
|
|
|
+ tension: 0.3
|
|
|
}
|
|
|
]
|
|
|
|
|
|
@@ -456,6 +530,37 @@ onUnmounted(() => {
|
|
|
line-height: 1.2;
|
|
|
}
|
|
|
|
|
|
+.stat-label {
|
|
|
+ font-size: 0.75rem;
|
|
|
+ color: #6b7280;
|
|
|
+ margin: 0.25rem 0 0 0;
|
|
|
+ font-weight: 500;
|
|
|
+}
|
|
|
+
|
|
|
+.revenue-value {
|
|
|
+ color: #2563eb;
|
|
|
+}
|
|
|
+
|
|
|
+.sales-value {
|
|
|
+ color: #f59e0b;
|
|
|
+}
|
|
|
+
|
|
|
+/* 取消左侧颜色边 */
|
|
|
+.revenue-card,
|
|
|
+.sales-card,
|
|
|
+.user-card,
|
|
|
+.new-user-card {
|
|
|
+ border-left: none;
|
|
|
+}
|
|
|
+
|
|
|
+.user-value {
|
|
|
+ color: #10b981;
|
|
|
+}
|
|
|
+
|
|
|
+.new-user-value {
|
|
|
+ color: #8b5cf6;
|
|
|
+}
|
|
|
+
|
|
|
.team-selector {
|
|
|
grid-column: 1 / -1;
|
|
|
margin-top: 1rem;
|
|
|
@@ -550,4 +655,24 @@ onUnmounted(() => {
|
|
|
padding: 0.75rem 1rem;
|
|
|
border-bottom: 1px solid #e5e7eb;
|
|
|
}
|
|
|
+
|
|
|
+.revenue-amount {
|
|
|
+ color: #2563eb;
|
|
|
+ font-weight: 600;
|
|
|
+}
|
|
|
+
|
|
|
+.sales-amount {
|
|
|
+ color: #f59e0b;
|
|
|
+ font-weight: 600;
|
|
|
+}
|
|
|
+
|
|
|
+.user-amount {
|
|
|
+ color: #10b981;
|
|
|
+ font-weight: 600;
|
|
|
+}
|
|
|
+
|
|
|
+.new-user-amount {
|
|
|
+ color: #8b5cf6;
|
|
|
+ font-weight: 600;
|
|
|
+}
|
|
|
</style>
|