From c32c8d5e4ff6261da30390f4f7281586cd32e3cc Mon Sep 17 00:00:00 2001 From: Shu Guang <61069967+shuguangnet@users.noreply.github.com> Date: Fri, 16 May 2025 00:54:01 +0800 Subject: [PATCH] =?UTF-8?q?fear:=20=E9=A6=96=E9=A1=B5=E6=8E=A5=E5=8F=A3?= =?UTF-8?q?=E5=AF=B9=E6=8E=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/HomePage/index.tsx | 96 +++++++++++++++++++++++++++++++----- 1 file changed, 83 insertions(+), 13 deletions(-) diff --git a/src/pages/HomePage/index.tsx b/src/pages/HomePage/index.tsx index 2ad0db7..b865c6f 100644 --- a/src/pages/HomePage/index.tsx +++ b/src/pages/HomePage/index.tsx @@ -12,10 +12,29 @@ import { ClockCircleOutlined, TeamOutlined, } from '@ant-design/icons'; +import { getWeekChartSuccessCountUsingGet, getTodayChartCountUsingGet, countChartsUsingGet } from '@/services/hebi/chartController'; +import { countUsersUsingGet } from '@/services/hebi/userController'; +import { getChartGenerationStatsUsingGet } from '@/services/hebi/chartController'; // 新增 const HomePage: React.FC = () => { const [loading, setLoading] = useState(true); + // 新增:总图表数 + const [totalCharts, setTotalCharts] = useState(0); + + // 新增:今日生成数量 + const [todayGenerated, setTodayGenerated] = useState(0); + + // 新增:本周折线图数据 + const [weekChartData, setWeekChartData] = useState([0, 0, 0, 0, 0, 0, 0]); + + // 新增:总用户数 + const [totalUsers, setTotalUsers] = useState(0); + + const [successRate, setSuccessRate] = useState(0); + + const [avgGenerationTime, setAvgGenerationTime] = useState(0); + // 统计数据 const [statisticsData] = useState({ totalCharts: 126, @@ -37,6 +56,51 @@ const HomePage: React.FC = () => { // ECharts准备的数据 const chartTypesForEcharts = chartTypes.map(({ value, name }) => ({ value, name })); + // 拉取本周数据 + useEffect(() => { + getWeekChartSuccessCountUsingGet().then(res => { + if (res && res.code === 0 ) { + setWeekChartData(res?.data); + } + }); + getTodayChartCountUsingGet().then(res => { + if (res && res.code === 0 ) { + setTodayGenerated(res?.data); + } + }); + // 获取总图表数 + countChartsUsingGet().then(res => { + if (res && res.code === 0 ) { + setTotalCharts(res?.data); + } + }); + // 获取总用户数 + countUsersUsingGet().then(res => { + if (res && res.code === 0 ) { + console.log(res.data); + setTotalUsers(res?.data); + } + }); + // 获取成功率 + getChartGenerationStatsUsingGet().then(res => { + if (res && res.code === 0) { + console.log(res.data); + // 计算成功率(百分比,保留两位小数) + const successCount = Number(res.data.successRate) || 0; + const totalCount = Number(res.data.totalCount) || 0; + let rate = 0; + if (totalCount > 0) { + // rate = ((totalCharts-successCount) / totalCount) * 100; + rate = ((totalCount-successCount) / totalCount) * 100; + } + setSuccessRate(Number(rate.toFixed(2))); + } + }); + setTimeout(() => { + setLoading(false); + }, 1000); + }, []); + const chartOptions = { title: { text: '近期图表生成趋势', @@ -79,7 +143,7 @@ const HomePage: React.FC = () => { name: '生成数量', type: 'line', smooth: true, - data: [15, 22, 18, 25, 20, 30, 28], + data: weekChartData, // 修改为动态数据 areaStyle: { opacity: 0.1, }, @@ -139,8 +203,14 @@ const HomePage: React.FC = () => { useEffect(() => { // 模拟数据加载 setTimeout(() => { - setLoading(false); - }, 1000); + // 随机生成0~60秒的平均生成时间 + const randomTime = Math.floor(Math.random() * 61); + setAvgGenerationTime(randomTime); + + setTimeout(() => { + setLoading(false); + }, 1000); + }, []); }, []); return ( @@ -155,7 +225,7 @@ const HomePage: React.FC = () => { 总图表数 } - value={statisticsData.totalCharts} + value={totalCharts} valueStyle={{ color: '#1890ff' }} /> { 生成成功率 } - value={statisticsData.successRate} + value={successRate} suffix="%" precision={2} valueStyle={{ color: '#52c41a' }} /> { 今日生成 } - value={statisticsData.todayGenerated} + value={todayGenerated} valueStyle={{ color: '#faad14' }} /> { 总用户数 } - value={statisticsData.totalUsers} + value={totalUsers} valueStyle={{ color: '#722ed1' }} /> { title="图表生成趋势" extra={ - 周环比 +12% - 日环比 +5% + {/* 周环比 +12% + 日环比 +5% */} } > @@ -273,7 +343,7 @@ const HomePage: React.FC = () => { } /> { `${percent}% 优化空间`} />