feat: 本次提交更新内容如下
首页构建完成
This commit is contained in:
@@ -1,7 +1,6 @@
|
|||||||
.home-page {
|
.home-page {
|
||||||
padding: 12px;
|
padding: 12px;
|
||||||
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
|
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
|
||||||
min-height: 100vh;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 导航栏样式
|
// 导航栏样式
|
||||||
|
|||||||
@@ -1,61 +1,75 @@
|
|||||||
import React, { useEffect, useState } from "react";
|
import React, { useEffect, useState } from "react";
|
||||||
import { Card, NavBar, TabBar, Grid } from "antd-mobile";
|
import { NavBar } from "antd-mobile";
|
||||||
import {
|
import {
|
||||||
AppOutline,
|
AppOutline,
|
||||||
UserOutline,
|
UserOutline,
|
||||||
PieOutline,
|
LoopOutline,
|
||||||
ShopbagOutline,
|
TravelOutline,
|
||||||
FileOutline,
|
ClockCircleOutline,
|
||||||
StarOutline,
|
|
||||||
StopOutline,
|
|
||||||
TeamOutline,
|
|
||||||
} from "antd-mobile-icons";
|
} from "antd-mobile-icons";
|
||||||
import MeauMobile from "@/components/MeauMobile/MeauMoible";
|
import MeauMobile from "@/components/MeauMobile/MeauMoible";
|
||||||
import Layout from "@/components/Layout/Layout";
|
import Layout from "@/components/Layout/Layout";
|
||||||
import style from "./index.module.scss";
|
import style from "./index.module.scss";
|
||||||
import LineChart from "@/components/LineChart";
|
import LineChart from "@/components/LineChart";
|
||||||
import { getPlanStats } from "./api";
|
import {
|
||||||
|
getPlanStats,
|
||||||
const todayStats = [
|
getSevenDayStats,
|
||||||
{
|
getTodayStats,
|
||||||
label: "朋友圈",
|
getDashboard,
|
||||||
value: 12,
|
} from "./api";
|
||||||
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",
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
const Home: React.FC = () => {
|
const Home: React.FC = () => {
|
||||||
const [sceneStats, setSceneStats] = useState<any[]>([]);
|
const [sceneStats, setSceneStats] = useState<any[]>([]);
|
||||||
|
const [todayStats, setTodayStats] = useState<any[]>([]);
|
||||||
|
const [dashboard, setDashboard] = useState<any>({});
|
||||||
|
const [sevenDayStats, setSevenDayStats] = useState<any>({});
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
getDashboard().then((res: any) => {
|
||||||
|
setDashboard(res);
|
||||||
|
});
|
||||||
getPlanStats({ num: 4 }).then((res: any) => {
|
getPlanStats({ num: 4 }).then((res: any) => {
|
||||||
// console.log(res);
|
|
||||||
setSceneStats(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 (
|
return (
|
||||||
<Layout
|
<Layout
|
||||||
header={
|
header={
|
||||||
<NavBar back={null} style={{ background: "transparent" }}>
|
<NavBar back={null} style={{ background: "#fff" }}>
|
||||||
<div className={style["nav-title"]}>
|
<div className={style["nav-title"]}>
|
||||||
<span className={style["nav-text"]}>存客宝</span>
|
<span className={style["nav-text"]}>存客宝</span>
|
||||||
</div>
|
</div>
|
||||||
@@ -73,8 +87,9 @@ const Home: React.FC = () => {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className={style["stat-content"]}>
|
<div className={style["stat-content"]}>
|
||||||
<div className={style["stat-value"]}>0</div>
|
|
||||||
<div className={style["stat-label"]}>设备数量</div>
|
<div className={style["stat-label"]}>设备数量</div>
|
||||||
|
|
||||||
|
<div className={style["stat-value"]}>{dashboard.deviceNum}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className={style["stat-card"]}>
|
<div className={style["stat-card"]}>
|
||||||
@@ -84,19 +99,21 @@ const Home: React.FC = () => {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className={style["stat-content"]}>
|
<div className={style["stat-content"]}>
|
||||||
<div className={style["stat-value"]}>0</div>
|
|
||||||
<div className={style["stat-label"]}>微信号</div>
|
<div className={style["stat-label"]}>微信号</div>
|
||||||
|
<div className={style["stat-value"]}>{dashboard.wechatNum}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className={style["stat-card"]}>
|
<div className={style["stat-card"]}>
|
||||||
<div className={style["stat-icon"]}>
|
<div className={style["stat-icon"]}>
|
||||||
<TeamOutline
|
<ClockCircleOutline
|
||||||
style={{ fontSize: 18, color: "var(--primary-color)" }}
|
style={{ fontSize: 18, color: "var(--primary-color)" }}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className={style["stat-content"]}>
|
<div className={style["stat-content"]}>
|
||||||
<div className={style["stat-value"]}>0</div>
|
|
||||||
<div className={style["stat-label"]}>在线</div>
|
<div className={style["stat-label"]}>在线</div>
|
||||||
|
<div className={style["stat-value"]}>
|
||||||
|
{dashboard.aliveWechatNum}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -151,8 +168,8 @@ const Home: React.FC = () => {
|
|||||||
</div>
|
</div>
|
||||||
<div className={style["chart-container"]}>
|
<div className={style["chart-container"]}>
|
||||||
<LineChart
|
<LineChart
|
||||||
xData={["周一", "周二", "周三", "周四", "周五", "周六", "周日"]}
|
xData={sevenDayStats.date}
|
||||||
yData={[120, 150, 180, 200, 230, 210, 190]}
|
yData={sevenDayStats.allNum}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user