仪表盘显示调整

2025-09-15 17:18:22 +08:00 · 2025-09-15 17:18:04 +08:00
3 changed files with 114 additions and 96 deletions
--- a/src/utils/api.js
+++ b/src/utils/api.js
@@ -182,6 +182,9 @@ const api = {
        getCommissionDistribution: () => request.get("/agent/commission-distribution"),
        getRecentUsers: () => request.get("/agent/recent-users"),
        getRecentCommissions: () => request.get("/agent/recent-commissions"),
+
+
+        getStatsAgentDirectly: () => request.get('/agent/stats_agent_directly'),
    },

    // 佣金管理
--- a/src/views/DashboardAgent.vue
+++ b/src/views/DashboardAgent.vue
@@ -18,12 +18,8 @@
        <div class="header-right">
          <div class="header-stats">
            <div class="quick-stat">
-              <span class="stat-value">{{ statsData.users.total_users }}</span>
-              <span class="stat-label">总用户数</span>
-            </div>
-            <div class="quick-stat">
-              <span class="stat-value">{{ statsData.commissions.total_commission }}</span>
-              <span class="stat-label">总收入</span>
+              <span class="stat-value">{{ statsData.users.today_new_users }}</span>
+              <span class="stat-label">今日新增用户</span>
            </div>
          </div>
          <div class="header-actions">
@@ -37,8 +33,12 @@

    <!-- 统计卡片 -->
    <div class="stats-section">
-      <el-row :gutter="24" class="stats-row">
-        <el-col :xs="24" :sm="12" :md="6" :lg="6" v-for="stat in stats" :key="stat.key">
+      <el-row :gutter="20" class="stats-row">
+        <el-col 
+          v-for="stat in stats" 
+          :key="stat.key"
+          class="stat-col"
+        >
          <div class="stat-card" :class="stat.class" @click="handleStatClick(stat.key)">
            <div class="stat-background"></div>
            <div class="stat-content">
@@ -50,10 +50,10 @@
              <div class="stat-info">
                <div class="stat-number" :data-value="stat.value">{{ stat.value }}</div>
                <div class="stat-label">{{ stat.label }}</div>
-                <!--                <div class="stat-change" :class="stat.changeClass">-->
-                <!--                  <el-icon><component :is="stat.changeIcon" /></el-icon>-->
-                <!--                  {{ stat.change }}-->
-                <!--                </div>-->
+                  <div class="stat-change" :class="stat.changeClass">
+                    <el-icon><component :is="stat.changeIcon" /></el-icon>
+                    {{ stat.change }}
+                  </div>
              </div>
            </div>
            <div class="stat-decoration"></div>
@@ -69,7 +69,7 @@
        <el-card class="chart-card" shadow="hover">
          <template #header>
            <div class="card-header">
-              <span class="card-title">用户增长趋势</span>
+              <span class="card-title">直推用户增长趋势</span>
              <el-select v-model="userChartPeriod" size="small" style="width: 100px" @change="loadUserChart">
                <el-option label="7天" value="7"/>
                <el-option label="30天" value="30"/>
@@ -177,12 +177,12 @@
        </el-card>
      </el-col>

-      <!-- 最新佣金 -->
+      <!-- 最新营收 -->
      <el-col :xs="24" :lg="12">
        <el-card class="activity-card" shadow="hover">
          <template #header>
            <div class="card-header">
-              <span class="card-title">最新佣金</span>
+              <span class="card-title">最新营收</span>
              <el-link type="primary" @click="$router.push('/commissions')">查看全部</el-link>
            </div>
          </template>
@@ -272,22 +272,12 @@ const userChartPeriod = ref('30')
 const statsData = ref({
  users: {
    total_users: 0,
-    total_balance: 0,
    today_new_users: 0,
    active_users: 0,
-    today_shared_users: 0,
-    shared_users: 0
  },
  commissions: {
    total_commission: 0,
-    paid_commission: 0,
-    pending_commission: 0
-  },
-  transfers: {
-    total_transfers: 0,
-    today_transfers: 0,
-    total_amount: 0,
-    today_amount: 0
+    monthly_commission: 0
  }
 })

@@ -306,43 +296,38 @@ const stats = computed(() => [
  {
    key: 'users',
    label: '直推用户数量',
-    value: statsData.value.users.active_users,
+    value: statsData.value.users.total_users,
    icon: User,
    class: 'stat-users',
-    change: `${statsData.value.users.today_new_users > 0 ? '+' : ''}${statsData.value.users.today_new_users}`,
-    changeClass: statsData.value.users.today_new_users >= 0 ? 'positive' : 'negative',
-    changeIcon: statsData.value.users.today_new_users >= 0 ? 'ArrowUp' : 'ArrowDown'
  },
  {
-    key: 'shared_users',
+    key: 'active_users',
    label: '分享用户数量',
-    value: statsData.value.users.shared_users,
-    icon: User,
-    class: 'stat-users',
-    change: `${statsData.value.users.today_shared_users > 0 ? '+' : ''}${statsData.value.users.today_shared_users}`,
-    changeClass: statsData.value.users.today_shared_users >= 0 ? 'positive' : 'negative',
-    changeIcon: statsData.value.users.today_shared_users >= 0 ? 'ArrowUp' : 'ArrowDown'
+    value: statsData.value.users.active_users || 0,
+    icon: TrendCharts,
+    class: 'stat-users'
  },
  {
    key: 'commission',
-    label: '佣金',
+    label: '营收',
    value: `¥${statsData.value.commissions.total_commission}`,
    icon: Money,
-    class: 'stat-commission',
-    change: '+8.2%',
-    changeClass: 'positive',
-    changeIcon: ArrowUp
+    class: 'stat-commission'
  },
  {
    key: 'pending',
-    label: '本月佣金',
-    value: `¥${statsData.value.commissions.pending_commission}`,
+    label: '本月营收',
+    value: `¥${statsData.value.commissions.monthly_commission}`,
    icon: Clock,
-    class: 'stat-pending',
-    change: '-2.1%',
-    changeClass: 'negative',
-    changeIcon: ArrowDown
-  }
+    class: 'stat-pending'
+  },
+  // {
+  //   key: 'nature_users',
+  //   label: '自然用户',
+  //   value: `${statsData.value.users.nature_users || 0}`,
+  //   icon: Clock,
+  //   class: 'stat-pending'
+  // }
 ])

 // 用户增长图表配置
@@ -615,7 +600,7 @@ const loadRecentUsersData = async () => {
  }
 }

-// 加载最新佣金
+// 加载最新营收
 const loadRecentCommissionsData = async () => {
  try {
    const response = await api.dashboard.getRecentCommissions()
@@ -746,6 +731,43 @@ onMounted(() => {
  margin-bottom: 24px;
 }

+.stats-row {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.stat-col {
+  flex: 1;
+  min-width: 200px; /* 根据需要调整最小宽度 */
+  max-width: 25%; /* 5个卡片就是 100% / 5 = 20% */
+  margin-bottom: 20px;
+}
+
+/* 响应式调整 */
+@media (max-width: 1200px) {
+  .stat-col {
+    max-width: 25%; /* 4个一行 */
+  }
+}
+
+@media (max-width: 992px) {
+  .stat-col {
+    max-width: 33.333%; /* 3个一行 */
+  }
+}
+
+@media (max-width: 768px) {
+  .stat-col {
+    max-width: 50%; /* 2个一行 */
+  }
+}
+
+@media (max-width: 480px) {
+  .stat-col {
+    max-width: 100%; /* 1个一行 */
+  }
+}
+
 .stat-card {
  background: white;
  border-radius: 12px;
--- a/src/views/DashboardDirectly.vue
+++ b/src/views/DashboardDirectly.vue
@@ -54,10 +54,10 @@
              <div class="stat-info">
                <div class="stat-number" :data-value="stat.value">{{ stat.value }}</div>
                <div class="stat-label">{{ stat.label }}</div>
-                <!--                <div class="stat-change" :class="stat.changeClass">-->
-                <!--                  <el-icon><component :is="stat.changeIcon" /></el-icon>-->
-                <!--                  {{ stat.change }}-->
-                <!--                </div>-->
+                  <div class="stat-change" :class="stat.changeClass">
+                    <el-icon><component :is="stat.changeIcon" /></el-icon>
+                    {{ stat.change }}
+                  </div>
              </div>
            </div>
            <div class="stat-decoration"></div>
@@ -276,23 +276,16 @@ const userChartPeriod = ref('30')
 const statsData = ref({
  users: {
    total_users: 0,
-    total_balance: 0,
-    today_new_users: 0,
-    active_users: 0,
+    total_operated: 0,
+    agent_share_users: 0,
+    operated_share_users: 0,
    total_directly_agents: 0,
-    total_new_users: 0,
+    directly_agents_income: 0,
+    active_users_income: 0,
  },
  commissions: {
    total_commission: 0,
    today_commission: 0,
-    paid_commission: 0,
-    pending_commission: 0
-  },
-  transfers: {
-    total_transfers: 0,
-    today_transfers: 0,
-    total_amount: 0,
-    today_amount: 0
  }
 })

@@ -310,53 +303,53 @@ const userActivityData = ref([])
 const stats = computed(() => [
  {
    key: 'users',
-    label: '直营代理总数',
+    label: '直销商户人数',
    value: statsData.value.users.total_directly_agents,
    icon: User,
    class: 'stat-users',
-    change: `${statsData.value.users.total_new_users > 0 ? '+' : ''}${statsData.value.users.total_new_users}`,
-    changeClass: statsData.value.users.total_new_users >= 0 ? 'positive' : 'negative',
-    changeIcon: statsData.value.users.total_new_users >= 0 ? 'ArrowUp' : 'ArrowDown'
+    change: `直销商户利润${statsData.value.users.directly_agents_income}`,
+    changeClass: statsData.value.users.directly_agents_income >= 0 ? 'positive' : 'negative',
+    changeIcon: statsData.value.users.directly_agents_income >= 0 ? 'ArrowUp' : 'ArrowDown'
  },
  {
    key: 'users',
-    label: '招募商户数量',
-    value: statsData.value.users.active_users,
+    label: '直销商户分享人数',
+    value: statsData.value.users.agent_share_users,
    icon: User,
    class: 'stat-users',
-    change: `${statsData.value.users.today_new_users > 0 ? '+' : ''}${statsData.value.users.today_new_users}`,
-    changeClass: statsData.value.users.today_new_users >= 0 ? 'positive' : 'negative',
-    changeIcon: statsData.value.users.today_new_users >= 0 ? 'ArrowUp' : 'ArrowDown'
+    change: `直销商户分享利润${statsData.value.users.active_users_income}`,
+    changeClass: statsData.value.users.active_users_income >= 0 ? 'positive' : 'negative',
+    changeIcon: statsData.value.users.active_users_income >= 0 ? 'ArrowUp' : 'ArrowDown'
  },
  {
-    key: 'commission',
-    label: '佣金',
-    value: `¥${statsData.value.commissions.total_commission}`,
+    key: 'users',
+    label: '直营人数',
+    value: `${statsData.value.users.total_operated}`,
    icon: Money,
    class: 'stat-commission',
-    change: '+8.2%',
-    changeClass: 'positive',
-    changeIcon: ArrowUp
+    change: `直营佣金${statsData.value.commissions.today_commission}`,
+    changeClass: statsData.value.commissions.today_commission >= 0 ? 'positive' : 'negative',
+    changeIcon: statsData.value.commissions.today_commission >= 0 ? 'ArrowUp' : 'ArrowDown'
  },
  {
-    key: 'today',
-    label: '已提现佣金',
-    value: `¥${statsData.value.commissions.today_commission}`,
+    key: 'users',
+    label: '直营商户人数',
+    value: `${statsData.value.users.active_users}`,
    icon: Coin,
    class: 'stat-today',
-    change: '+15.3%',
-    changeClass: 'positive',
-    changeIcon: ArrowUp
+    change: `已提现佣金${statsData.value.commissions.today_commission}`,
+    changeClass: statsData.value.commissions.today_commission >= 0 ? 'positive' : 'negative',
+    changeIcon: statsData.value.commissions.today_commission >= 0 ? 'ArrowUp' : 'ArrowDown'
  },
  {
-    key: 'pending',
-    label: '本月佣金',
-    value: `¥${statsData.value.commissions.pending_commission}`,
-    icon: Clock,
-    class: 'stat-pending',
-    change: '-2.1%',
-    changeClass: 'negative',
-    changeIcon: ArrowDown
+    key: 'users',
+    label: '直营商户分享人数',
+    value: `${statsData.value.commissions.operated_share_users}`,
+    icon: Coin,
+    class: 'stat-today',
+    change: `待提现佣金${statsData.value.commissions.today_commission}`,
+    changeClass: statsData.value.commissions.today_commission >= 0 ? 'positive' : 'negative',
+    changeIcon: statsData.value.commissions.today_commission >= 0 ? 'ArrowUp' : 'ArrowDown'
  }
 ])

@@ -552,7 +545,7 @@ const handleStatClick = (key) => {
 // 加载统计数据
 const loadStats = async () => {
  try {
-    const response = await api.dashboard.getStats()
+    const response = await api.dashboard.getStatsAgentDirectly()
    statsData.value = response.data.data
    console.log('statsData',statsData.value)
  } catch (error) {
Author	SHA1	Message	Date
dzl	f3645ce610	仪表盘显示调整	2025-09-15 17:18:22 +08:00
dzl	307f5be716	仪表盘显示调整	2025-09-15 17:18:04 +08:00