From 2bb619ddf7ec51255f54e2a09a31c802e9937b77 Mon Sep 17 00:00:00 2001 From: mzl92 Date: Fri, 13 Feb 2026 13:16:51 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=89=8D=E7=AB=AF=E5=AF=B9=E6=8E=A5?= =?UTF-8?q?=E9=94=80=E5=94=AE=E6=95=B0=E6=8D=AEAPI?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - TopData组件对接/api/sales/year-data获取年度数据 - GroupRanking组件对接/api/sales/group-ranking获取小组排名 - PersonRanking组件对接/api/sales/person-ranking获取个人排名 - 添加.env配置文件，设置API_BASE_URL 🤖 Generated with Claude Code https://claude.com/claude-code --- react-app/.env | 1 + react-app/src/components/GroupRanking.jsx | 38 +++++++++++++++++++--- react-app/src/components/PersonRanking.jsx | 38 +++++++++++++++++++--- react-app/src/components/TopData.jsx | 17 +++++++--- 4 files changed, 80 insertions(+), 14 deletions(-) create mode 100644 react-app/.env diff --git a/react-app/.env b/react-app/.env new file mode 100644 index 0000000..e3b0e79 --- /dev/null +++ b/react-app/.env @@ -0,0 +1 @@ +VITE_API_BASE_URL=http://localhost:8000/api diff --git a/react-app/src/components/GroupRanking.jsx b/react-app/src/components/GroupRanking.jsx index 9da788c..2184b6c 100644 --- a/react-app/src/components/GroupRanking.jsx +++ b/react-app/src/components/GroupRanking.jsx @@ -1,4 +1,4 @@ -import { useEffect, useRef } from 'react' +import { useEffect, useRef, useState } from 'react' import * as echarts from 'echarts' function GroupRanking() { @@ -7,14 +7,36 @@ function GroupRanking() { const MOBILE_BREAKPOINT = 768 - // 小组数据 - const groupData = [ + // 小组数据（从 API 获取） + const [groupData, setGroupData] = useState([ { name: '华东一组', target: 50000000000, actual: 62000000000 }, { name: '华南二组', target: 45000000000, actual: 51000000000 }, { name: '华北三组', target: 40000000000, actual: 43500000000 }, { name: '西南四组', target: 35000000000, actual: 28000000000 }, { name: '东北五组', target: 30000000000, actual: 26500000000 } - ] + ]) + + // 获取小组排名数据 + const fetchGroupRanking = async () => { + try { + const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || 'http://localhost:8000/api' + const response = await fetch(`${API_BASE_URL}/sales/group-ranking?year=2024`) + const result = await response.json() + console.log('小组排名 API 响应:', result) + + // 转换单位：API 返回的是万元，需要转换为元 + const rankings = result.rankings.map(item => ({ + name: item.name, + target: item.target * 10000, // 万元转元 + actual: item.actual * 10000 + })) + + setGroupData(rankings) + } catch (error) { + console.error('获取小组排名失败:', error) + // 保持默认数据 + } + } // 格式化数字（万元） const formatNumber = (num) => { @@ -203,6 +225,12 @@ function GroupRanking() { chartInstance.current.setOption(option) } + // 初始加载数据 + useEffect(() => { + fetchGroupRanking() + }, []) + + // 数据变化时重新渲染图表 useEffect(() => { const timer = setTimeout(() => { renderChart() @@ -226,7 +254,7 @@ function GroupRanking() { chartInstance.current.dispose() } } - }, []) + }, [groupData]) return (
diff --git a/react-app/src/components/PersonRanking.jsx b/react-app/src/components/PersonRanking.jsx index b276f21..5f91856 100644 --- a/react-app/src/components/PersonRanking.jsx +++ b/react-app/src/components/PersonRanking.jsx @@ -1,4 +1,4 @@ -import { useEffect, useRef } from 'react' +import { useEffect, useRef, useState } from 'react' import * as echarts from 'echarts' function PersonRanking() { @@ -7,8 +7,8 @@ function PersonRanking() { const MOBILE_BREAKPOINT = 768 - // 个人数据 - const personData = [ + // 个人数据（从 API 获取） + const [personData, setPersonData] = useState([ { name: '张伟', target: 5000000000, actual: 7200000000 }, { name: '李娜', target: 4500000000, actual: 5800000000 }, { name: '王强', target: 4000000000, actual: 4900000000 }, @@ -16,7 +16,29 @@ function PersonRanking() { { name: '陈静', target: 3500000000, actual: 3600000000 }, { name: '杨明', target: 3200000000, actual: 2800000000 }, { name: '赵丽', target: 3000000000, actual: 2500000000 } - ] + ]) + + // 获取个人排名数据 + const fetchPersonRanking = async () => { + try { + const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || 'http://localhost:8000/api' + const response = await fetch(`${API_BASE_URL}/sales/person-ranking?year=2024`) + const result = await response.json() + console.log('个人排名 API 响应:', result) + + // 转换单位：API 返回的是万元，需要转换为元 + const rankings = result.rankings.map(item => ({ + name: item.name, + target: item.target * 10000, // 万元转元 + actual: item.actual * 10000 + })) + + setPersonData(rankings) + } catch (error) { + console.error('获取个人排名失败:', error) + // 保持默认数据 + } + } // 格式化数字（万元） const formatNumber = (num) => { @@ -202,6 +224,12 @@ function PersonRanking() { chartInstance.current.setOption(option) } + // 初始加载数据 + useEffect(() => { + fetchPersonRanking() + }, []) + + // 数据变化时重新渲染图表 useEffect(() => { const timer = setTimeout(() => { renderChart() @@ -225,7 +253,7 @@ function PersonRanking() { chartInstance.current.dispose() } } - }, []) + }, [personData]) return (
diff --git a/react-app/src/components/TopData.jsx b/react-app/src/components/TopData.jsx index 49cfad3..87918ae 100644 --- a/react-app/src/components/TopData.jsx +++ b/react-app/src/components/TopData.jsx @@ -28,10 +28,19 @@ function TopData({ onProgressRate }) { // 获取年度数据 const fetchYearData = async () => { console.log('正在获取年度数据...') - // TODO: 替换为实际的API调用 - return { - target: 3500, - actual: 2750 + try { + const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || 'http://localhost:8000/api' + const response = await fetch(`${API_BASE_URL}/sales/year-data?year=2024`) + const result = await response.json() + console.log('API 响应:', result) + return result + } catch (error) { + console.error('获取年度数据失败:', error) + // 返回默认数据 + return { + target: 3500, + actual: 2750 + } } }