소스 검색

统计页面修改

wilhelm wong 2 달 전
부모
커밋
9357169274
2개의 변경된 파일218개의 추가작업 그리고 40개의 파일을 삭제
  1. 143 18
      src/views/DashboardView.vue
  2. 75 22
      src/views/DomainView.vue

+ 143 - 18
src/views/DashboardView.vue

@@ -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>

+ 75 - 22
src/views/DomainView.vue

@@ -196,7 +196,11 @@ const fetchDomainStatistics = async () => {
       todayResult.forEach((stat) => {
         todayStatsMap[stat.domain] = {
           todayNewUsers: stat.todayNewUsers || 0,
-          todayIncome: stat.todayIncome || 0
+          todayIncome: stat.todayIncome || 0,
+          todayActiveUsers: stat.todayActiveUsers || 0,  // 今日活跃用户
+          totalIncome: stat.totalIncome || 0,           // 历史总分润收入
+          totalSales: stat.totalSales || 0,             // 历史总销售额
+          todaySales: stat.todaySales || 0             // 今日销售额
         }
       })
     }
@@ -209,7 +213,11 @@ const fetchDomainStatistics = async () => {
       allResult.forEach((stat) => {
         allStatsMap[stat.domain] = {
           totalNewUsers: stat.totalNewUsers || 0,
-          totalIncome: stat.totalIncome || 0
+          totalIncome: stat.totalIncome || 0,
+          todayActiveUsers: stat.todayActiveUsers || 0,  // 今日活跃用户
+          todayIncome: stat.todayIncome || 0,           // 今日分润收入
+          totalSales: stat.totalSales || 0,             // 历史总销售额
+          todaySales: stat.todaySales || 0              // 今日销售额
         }
       })
     }
@@ -473,10 +481,22 @@ onMounted(() => {
                   <span class="stat-item">
                     <i class="pi pi-user text-xs"></i>
                     <span class="stat-text">{{ domainStatistics[domain.domain]?.todayNewUsers || 0 }}</span>
+                    <span class="stat-desc">新增</span>
+                  </span>
+                  <span class="stat-item">
+                    <i class="pi pi-users text-xs"></i>
+                    <span class="stat-text">{{ domainStatistics[domain.domain]?.todayActiveUsers || 0 }}</span>
+                    <span class="stat-desc">活跃</span>
                   </span>
                   <span class="stat-item">
                     <i class="pi pi-dollar text-xs"></i>
                     <span class="stat-text">{{ (domainStatistics[domain.domain]?.todayIncome || 0).toFixed(2) }}</span>
+                    <span class="stat-desc">分润</span>
+                  </span>
+                  <span class="stat-item">
+                    <i class="pi pi-shopping-cart text-xs"></i>
+                    <span class="stat-text">{{ (domainStatistics[domain.domain]?.todaySales || 0).toFixed(2) }}</span>
+                    <span class="stat-desc">销售</span>
                   </span>
                 </div>
                 <div class="domain-stats-row">
@@ -484,12 +504,19 @@ onMounted(() => {
                   <span class="stat-item">
                     <i class="pi pi-user text-xs"></i>
                     <span class="stat-text">{{ domainAllStatistics[domain.domain]?.totalNewUsers || 0 }}</span>
+                    <span class="stat-desc">用户</span>
                   </span>
                   <span class="stat-item">
                     <i class="pi pi-dollar text-xs"></i>
                     <span class="stat-text">{{
                       (domainAllStatistics[domain.domain]?.totalIncome || 0).toFixed(2)
                     }}</span>
+                    <span class="stat-desc">分润</span>
+                  </span>
+                  <span class="stat-item">
+                    <i class="pi pi-shopping-cart text-xs"></i>
+                    <span class="stat-text">{{ (domainAllStatistics[domain.domain]?.totalSales || 0).toFixed(2) }}</span>
+                    <span class="stat-desc">销售</span>
                   </span>
                 </div>
                 <div class="domain-actions">
@@ -648,7 +675,7 @@ onMounted(() => {
 .domains-grid {
   padding: 20px;
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
   gap: 16px;
 }
 
@@ -660,6 +687,7 @@ onMounted(() => {
   display: flex;
   flex-direction: column;
   transition: all 0.3s ease;
+  min-height: 200px;
 }
 
 .domain-card:hover {
@@ -733,50 +761,75 @@ onMounted(() => {
 
 .domain-stats-section {
   margin-top: 12px;
-  padding-top: 12px;
-  border-top: 1px solid #e2e8f0;
-  position: relative;
+  padding: 12px;
+  background: #f8fafc;
+  border-radius: 6px;
+  border: 1px solid #e2e8f0;
 }
 
 .domain-stats-row {
   display: flex;
-  gap: 12px;
+  gap: 8px;
   align-items: center;
-  margin-bottom: 6px;
+  margin-bottom: 8px;
+  flex-wrap: wrap;
 }
 
 .domain-stats-row:last-of-type {
-  margin-bottom: 12px;
+  margin-bottom: 0;
+}
+
+.stat-item {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 12px;
+  color: #64748b;
+  background: white;
+  padding: 4px 8px;
+  border-radius: 4px;
+  border: 1px solid #e2e8f0;
+  min-width: 60px;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.stat-item i {
+  color: #94a3b8;
 }
 
 .domain-actions {
-  position: absolute;
-  bottom: 0;
-  right: 0;
   display: flex;
   gap: 8px;
+  margin-top: 12px;
+  justify-content: flex-end;
 }
 
 .stat-label {
   font-size: 12px;
   color: #475569;
   font-weight: 600;
+  background: #e2e8f0;
+  padding: 4px 8px;
+  border-radius: 4px;
+  margin-right: 8px;
+  flex-shrink: 0;
 }
 
-.stat-item {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  font-size: 12px;
-  color: #64748b;
-}
+/* 移除重复的样式定义,已在上面统一定义 */
 
-.stat-item i {
-  color: #94a3b8;
+.stat-text {
+  font-weight: 500;
 }
 
-.stat-text {
+.stat-desc {
+  font-size: 10px;
+  color: #64748b;
+  margin-left: 4px;
   font-weight: 500;
+  background: #f1f5f9;
+  padding: 2px 4px;
+  border-radius: 3px;
 }
 
 .domain-actions-bottom .p-button {