From 0532c3c1614cd63357590c70082bf1ca49442a77 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=AC=94=E8=AE=B0=E6=9C=AC=E9=87=8C=E7=9A=84=E6=B0=B8?=
 =?UTF-8?q?=E5=B9=B3?= <fsmecx@gmail.com>
Date: Fri, 18 Jul 2025 22:41:41 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9C=AC=E6=AC=A1=E6=8F=90=E4=BA=A4?=
 =?UTF-8?q?=E6=9B=B4=E6=96=B0=E5=86=85=E5=AE=B9=E5=A6=82=E4=B8=8B=20?=
 =?UTF-8?q?=E9=A6=96=E9=A1=B5=E6=9E=84=E5=BB=BA=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 nkebao/src/pages/home/index.module.scss |   1 -
 nkebao/src/pages/home/index.tsx         | 103 ++++++++++++++----------
 2 files changed, 60 insertions(+), 44 deletions(-)

diff --git a/nkebao/src/pages/home/index.module.scss b/nkebao/src/pages/home/index.module.scss
index 0d92815b..9aa1cc1a 100644
--- a/nkebao/src/pages/home/index.module.scss
+++ b/nkebao/src/pages/home/index.module.scss
@@ -1,7 +1,6 @@
 .home-page {
   padding: 12px;
   background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
-  min-height: 100vh;
 }
 
 // 导航栏样式
diff --git a/nkebao/src/pages/home/index.tsx b/nkebao/src/pages/home/index.tsx
index ce27e61f..fd95fce7 100644
--- a/nkebao/src/pages/home/index.tsx
+++ b/nkebao/src/pages/home/index.tsx
@@ -1,61 +1,75 @@
 import React, { useEffect, useState } from "react";
-import { Card, NavBar, TabBar, Grid } from "antd-mobile";
+import { NavBar } from "antd-mobile";
 import {
   AppOutline,
   UserOutline,
-  PieOutline,
-  ShopbagOutline,
-  FileOutline,
-  StarOutline,
-  StopOutline,
-  TeamOutline,
+  LoopOutline,
+  TravelOutline,
+  ClockCircleOutline,
 } from "antd-mobile-icons";
 import MeauMobile from "@/components/MeauMobile/MeauMoible";
 import Layout from "@/components/Layout/Layout";
 import style from "./index.module.scss";
 import LineChart from "@/components/LineChart";
-import { getPlanStats } from "./api";
-
-const todayStats = [
-  {
-    label: "朋友圈",
-    value: 12,
-    icon: <FileOutline style={{ fontSize: 16, color: "#ff6b35" }} />,
-    color: "#ff6b35",
-  },
-  {
-    label: "群发",
-    value: 8,
-    icon: <StarOutline style={{ fontSize: 16, color: "#ffd700" }} />,
-    color: "#ffd700",
-  },
-  {
-    label: "转化率",
-    value: "85%",
-    icon: <StopOutline style={{ fontSize: 16, color: "#4caf50" }} />,
-    color: "#4caf50",
-  },
-  {
-    label: "活跃度",
-    value: "98%",
-    icon: <TeamOutline style={{ fontSize: 16, color: "#2196f3" }} />,
-    color: "#2196f3",
-  },
-];
+import {
+  getPlanStats,
+  getSevenDayStats,
+  getTodayStats,
+  getDashboard,
+} from "./api";
 
 const Home: React.FC = () => {
   const [sceneStats, setSceneStats] = useState<any[]>([]);
+  const [todayStats, setTodayStats] = useState<any[]>([]);
+  const [dashboard, setDashboard] = useState<any>({});
+  const [sevenDayStats, setSevenDayStats] = useState<any>({});
   useEffect(() => {
+    getDashboard().then((res: any) => {
+      setDashboard(res);
+    });
     getPlanStats({ num: 4 }).then((res: any) => {
-      // console.log(res);
       setSceneStats(res);
     });
+    getSevenDayStats().then((res: any) => {
+      setSevenDayStats(res);
+    });
+    getTodayStats().then((res: any) => {
+      const todayStatsData = [
+        {
+          label: "朋友圈",
+          value: res.momentsNum,
+          icon: <LoopOutline style={{ fontSize: 16, color: "#ff6b35" }} />,
+          color: "#ff6b35",
+        },
+        {
+          label: "群发",
+          value: res.groupPushNum,
+          icon: <TravelOutline style={{ fontSize: 16, color: "#ffd700" }} />,
+          color: "#ffd700",
+        },
+        {
+          label: "转化率",
+          value: res.passRate,
+          icon: <LoopOutline style={{ fontSize: 16, color: "#4caf50" }} />,
+          color: "#4caf50",
+        },
+        {
+          label: "活跃度",
+          value: res.sysActive,
+          icon: (
+            <ClockCircleOutline style={{ fontSize: 16, color: "#2196f3" }} />
+          ),
+          color: "#2196f3",
+        },
+      ];
+      setTodayStats(todayStatsData);
+    });
   }, []);
 
   return (
     <Layout
       header={
-        <NavBar back={null} style={{ background: "transparent" }}>
+        <NavBar back={null} style={{ background: "#fff" }}>
           <div className={style["nav-title"]}>
             <span className={style["nav-text"]}>存客宝</span>
           </div>
@@ -73,8 +87,9 @@ const Home: React.FC = () => {
               />
             </div>
             <div className={style["stat-content"]}>
-              <div className={style["stat-value"]}>0</div>
               <div className={style["stat-label"]}>设备数量</div>
+
+              <div className={style["stat-value"]}>{dashboard.deviceNum}</div>
             </div>
           </div>
           <div className={style["stat-card"]}>
@@ -84,19 +99,21 @@ const Home: React.FC = () => {
               />
             </div>
             <div className={style["stat-content"]}>
-              <div className={style["stat-value"]}>0</div>
               <div className={style["stat-label"]}>微信号</div>
+              <div className={style["stat-value"]}>{dashboard.wechatNum}</div>
             </div>
           </div>
           <div className={style["stat-card"]}>
             <div className={style["stat-icon"]}>
-              <TeamOutline
+              <ClockCircleOutline
                 style={{ fontSize: 18, color: "var(--primary-color)" }}
               />
             </div>
             <div className={style["stat-content"]}>
-              <div className={style["stat-value"]}>0</div>
               <div className={style["stat-label"]}>在线</div>
+              <div className={style["stat-value"]}>
+                {dashboard.aliveWechatNum}
+              </div>
             </div>
           </div>
         </div>
@@ -151,8 +168,8 @@ const Home: React.FC = () => {
           </div>
           <div className={style["chart-container"]}>
             <LineChart
-              xData={["周一", "周二", "周三", "周四", "周五", "周六", "周日"]}
-              yData={[120, 150, 180, 200, 230, 210, 190]}
+              xData={sevenDayStats.date}
+              yData={sevenDayStats.allNum}
             />
           </div>
         </div>