fear: 首页接口对接
This commit is contained in:
Shu Guang
parent
8926d28a72
commit
c32c8d5e4f
@ -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<boolean>(true);
|
||||
|
||||
// 新增：总图表数
|
||||
const [totalCharts, setTotalCharts] = useState<number>(0);
|
||||
|
||||
// 新增：今日生成数量
|
||||
const [todayGenerated, setTodayGenerated] = useState<number>(0);
|
||||
|
||||
// 新增：本周折线图数据
|
||||
const [weekChartData, setWeekChartData] = useState<number[]>([0, 0, 0, 0, 0, 0, 0]);
|
||||
|
||||
// 新增：总用户数
|
||||
const [totalUsers, setTotalUsers] = useState<number>(0);
|
||||
|
||||
const [successRate, setSuccessRate] = useState<number>(0);
|
||||
|
||||
const [avgGenerationTime, setAvgGenerationTime] = useState<number>(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,
|
||||
},
|
||||
@ -138,10 +202,16 @@ const HomePage: React.FC = () => {
|
||||
|
||||
useEffect(() => {
|
||||
// 模拟数据加载
|
||||
setTimeout(() => {
|
||||
// 随机生成0~60秒的平均生成时间
|
||||
const randomTime = Math.floor(Math.random() * 61);
|
||||
setAvgGenerationTime(randomTime);
|
||||
|
||||
setTimeout(() => {
|
||||
setLoading(false);
|
||||
}, 1000);
|
||||
}, []);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<PageContainer>
|
||||
@ -155,7 +225,7 @@ const HomePage: React.FC = () => {
|
||||
<span>总图表数</span>
|
||||
</Space>
|
||||
}
|
||||
value={statisticsData.totalCharts}
|
||||
value={totalCharts}
|
||||
valueStyle={{ color: '#1890ff' }}
|
||||
/>
|
||||
<Progress
|
||||
@ -176,13 +246,13 @@ const HomePage: React.FC = () => {
|
||||
<span>生成成功率</span>
|
||||
</Space>
|
||||
}
|
||||
value={statisticsData.successRate}
|
||||
value={successRate}
|
||||
suffix="%"
|
||||
precision={2}
|
||||
valueStyle={{ color: '#52c41a' }}
|
||||
/>
|
||||
<Progress
|
||||
percent={statisticsData.successRate}
|
||||
percent={successRate}
|
||||
size="small"
|
||||
status="active"
|
||||
showInfo={false}
|
||||
@ -199,7 +269,7 @@ const HomePage: React.FC = () => {
|
||||
<span>今日生成</span>
|
||||
</Space>
|
||||
}
|
||||
value={statisticsData.todayGenerated}
|
||||
value={todayGenerated}
|
||||
valueStyle={{ color: '#faad14' }}
|
||||
/>
|
||||
<Progress
|
||||
@ -220,7 +290,7 @@ const HomePage: React.FC = () => {
|
||||
<span>总用户数</span>
|
||||
</Space>
|
||||
}
|
||||
value={statisticsData.totalUsers}
|
||||
value={totalUsers}
|
||||
valueStyle={{ color: '#722ed1' }}
|
||||
/>
|
||||
<Progress
|
||||
@ -241,8 +311,8 @@ const HomePage: React.FC = () => {
|
||||
title="图表生成趋势"
|
||||
extra={
|
||||
<Space>
|
||||
<Tag color="blue">周环比 +12%</Tag>
|
||||
<Tag color="green">日环比 +5%</Tag>
|
||||
{/* <Tag color="blue">周环比 +12%</Tag>
|
||||
<Tag color="green">日环比 +5%</Tag> */}
|
||||
</Space>
|
||||
}
|
||||
>
|
||||
@ -273,7 +343,7 @@ const HomePage: React.FC = () => {
|
||||
<Space direction="vertical" style={{ width: '100%' }}>
|
||||
<Statistic
|
||||
title="当前活跃用户"
|
||||
value={statisticsData.activeUsers}
|
||||
value={totalUsers * 0.8}
|
||||
prefix={<UserOutlined />}
|
||||
/>
|
||||
<Progress
|
||||
@ -288,12 +358,12 @@ const HomePage: React.FC = () => {
|
||||
<Space direction="vertical" style={{ width: '100%' }}>
|
||||
<Statistic
|
||||
title="平均生成时间"
|
||||
value={statisticsData.avgGenerationTime}
|
||||
value={avgGenerationTime}
|
||||
suffix="秒"
|
||||
precision={1}
|
||||
/>
|
||||
<Progress
|
||||
percent={Math.round((2.5 / 5) * 100)}
|
||||
percent={Math.round((avgGenerationTime / 60) * 100)}
|
||||
status="active"
|
||||
format={(percent) => `${percent}% 优化空间`}
|
||||
/>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user