From ff2bfbcd9376a6bcbd8b59eff19d904b30d7a5f8 Mon Sep 17 00:00:00 2001
From: songjie <bestsongj@163.com>
Date: Fri, 23 Jan 2026 13:40:25 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AF=B9=E6=8E=A5=E6=95=B0=E6=8D=AE=E6=A6=82?=
 =?UTF-8?q?=E8=A7=88=E6=8E=A5=E5=8F=A3=E5=AE=8C=E6=88=90=EF=BC=9B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/platformData.js                 | 19 +++++++++
 src/views/PlatformData/UserOverview.vue | 73 +++++++++++++++++++++++++++------
 2 files changed, 79 insertions(+), 13 deletions(-)
 create mode 100644 src/api/platformData.js

diff --git a/src/api/platformData.js b/src/api/platformData.js
new file mode 100644
index 0000000..5107b8d
--- /dev/null
+++ b/src/api/platformData.js
@@ -0,0 +1,19 @@
+import request from '../utils/myAxios'
+
+// 获取用户数据概览列表
+export function getUserOverviewList() {
+  const formData = new FormData();
+  formData.append('token', localStorage.getItem('token'));
+
+  return request({
+    url: 'http://280e5e98.r7.cpolar.top/admin/user/overview/list',
+    method: 'post',
+    headers: {
+      'token': localStorage.getItem('token'),
+      'client': 'ios',
+      'version': '1',
+      'Content-Type': 'multipart/form-data'
+    },
+    data: formData
+  })
+}
diff --git a/src/views/PlatformData/UserOverview.vue b/src/views/PlatformData/UserOverview.vue
index c1a8d7b..0d5ae3f 100644
--- a/src/views/PlatformData/UserOverview.vue
+++ b/src/views/PlatformData/UserOverview.vue
@@ -26,9 +26,9 @@
             <el-icon><UserFilled /></el-icon> 用户总数
           </div>
           <div class="big-card-content">
-            <div class="card-value">154,838</div>
-            <div class="card-tag up">
-              较昨日增加↑ 5.22%
+            <div class="card-value">{{ overviewData.total }}</div>
+            <div class="card-tag" :class="getGrowthClass(overviewData.total_growth)">
+              {{ getGrowthText(overviewData.total_growth) }}
             </div>
           </div>
         </div>
@@ -40,10 +40,12 @@
               <div class="card-title">
                 <el-icon><Trophy /></el-icon> 会员总数
               </div>
-              <div class="card-value-small">154,838</div>
+              <div class="card-value-small">{{ overviewData.member }}</div>
             </div>
             <div class="card-tag-wrapper">
-              <div class="card-tag up">较昨日增加↑ 15.22%</div>
+              <div class="card-tag" :class="getGrowthClass(overviewData.member_growth)">
+                {{ getGrowthText(overviewData.member_growth) }}
+              </div>
             </div>
           </div>
           
@@ -53,10 +55,12 @@
               <div class="card-title">
                 <el-icon><User /></el-icon> 非会员总数
               </div>
-              <div class="card-value-small">154,838</div>
+              <div class="card-value-small">{{ overviewData.normal }}</div>
             </div>
             <div class="card-tag-wrapper">
-               <div class="card-tag down">较昨日减少↓ 1.22%</div>
+               <div class="card-tag" :class="getGrowthClass(overviewData.normal_growth)">
+                 {{ getGrowthText(overviewData.normal_growth) }}
+               </div>
             </div>
           </div>
         </div>
@@ -177,6 +181,7 @@
 import { ref, onMounted, nextTick, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import * as echarts from 'echarts';
+import { getUserOverviewList } from '../../api/platformData';
 
 const route = useRoute();
 const router = useRouter();
@@ -188,6 +193,48 @@ const chartMemberRef = ref(null);
 const chartNewOldRef = ref(null);
 const chartBarRef = ref(null);
 
+const overviewData = ref({
+  total: 0,
+  total_growth: '0%',
+  member: 0,
+  member_growth: '0%',
+  normal: 0,
+  normal_growth: '0%',
+  new_normal: 0,
+  old_normal: 0
+});
+
+// 获取增长率的样式类
+const getGrowthClass = (growthStr) => {
+  if (!growthStr) return '';
+  return growthStr.startsWith('-') ? 'down' : 'up';
+};
+
+// 获取增长率的显示文本（添加箭头）
+const getGrowthText = (growthStr) => {
+  if (!growthStr) return '';
+  const isDown = growthStr.startsWith('-');
+  const arrow = isDown ? '↓' : '↑';
+  const prefix = isDown ? '较昨日减少' : '较昨日增加';
+  // 移除可能存在的负号，因为箭头已经表示了方向
+  const value = growthStr.replace('-', '');
+  return `${prefix}${arrow} ${value}`;
+};
+
+const fetchData = async () => {
+  try {
+    const res = await getUserOverviewList();
+    console.log("获取用户概览数据响应完成：",res.list);
+    // 根据用户反馈，响应拦截器直接返回data部分，不再包含code
+    if (res && res.list) {
+      overviewData.value = res.list;
+      initCharts();
+    }
+  } catch (error) {
+    console.error('获取用户概览数据失败:', error);
+  }
+};
+
 // 表格数据
 const tableData1 = [
   { type: '用户总数', total: '154,832', dailyNew: '+3.44', weeklyNew: '+21,379', monthlyNew: '+21,379', periodNew: '' },
@@ -238,8 +285,8 @@ const initCharts = () => {
                         avoidLabelOverlap: false,
                         label: { show: false },
                         data: [
-                            { value: 112265, name: '非会员用户' },
-                            { value: 42567, name: '会员用户' }
+                            { value: overviewData.value.normal, name: '非会员用户' },
+                            { value: overviewData.value.member, name: '会员用户' }
                         ]
                     }
                 ]
@@ -262,9 +309,9 @@ const initCharts = () => {
                         avoidLabelOverlap: false,
                         label: { show: false },
                         data: [
-                            { value: 300, name: '新非网数量' },
-                            { value: 500, name: '会员用户' },
-                            { value: 400, name: '老非网数量' }
+                            { value: overviewData.value.new_normal, name: '新非网数量' },
+                            { value: overviewData.value.member, name: '会员用户' },
+                            { value: overviewData.value.old_normal, name: '老非网数量' }
                         ]
                     }
                 ]
@@ -332,7 +379,7 @@ watch(activeTab, (newVal) => {
 });
 
 onMounted(() => {
-    initCharts();
+    fetchData();
 });
 
 </script>