import React, { useEffect, useState } from 'react';
|
import { Row, Col, Card, Statistic, Button, Table, List, Avatar, Tag, message, Modal } from 'antd';
|
import { useNavigate } from 'react-router-dom';
|
import {
|
UserOutlined,
|
GiftOutlined,
|
CalendarOutlined,
|
TeamOutlined,
|
PlusOutlined,
|
EyeOutlined,
|
EditOutlined,
|
} from '@ant-design/icons';
|
import ReactECharts from 'echarts-for-react';
|
import { statisticsAPI, dashboardAPI } from '../services/api';
|
import dayjs from 'dayjs';
|
|
const Dashboard = () => {
|
const navigate = useNavigate();
|
const [loading, setLoading] = useState(false);
|
const [overviewData, setOverviewData] = useState({
|
totalVolunteers: 0,
|
totalPoints: 0,
|
totalActivities: 0,
|
totalRegistrations: 0,
|
});
|
const [recentActivities, setRecentActivities] = useState([]);
|
const [recentVolunteers, setRecentVolunteers] = useState([]);
|
const [pointsTrendData, setPointsTrendData] = useState({
|
categories: [],
|
totalPoints: [],
|
});
|
const [activityParticipationData, setActivityParticipationData] = useState([]);
|
const [viewModalVisible, setViewModalVisible] = useState(false);
|
const [viewingActivity, setViewingActivity] = useState(null);
|
|
// 获取数据概览
|
const fetchOverviewData = async () => {
|
try {
|
const response = await statisticsAPI.getOverview();
|
if (response.code === 0) {
|
setOverviewData(response.data);
|
}
|
} catch (error) {
|
console.error('获取概览数据失败:', error);
|
message.error('获取概览数据失败');
|
}
|
};
|
|
// 获取最新活动列表
|
const fetchRecentActivities = async () => {
|
try {
|
const response = await dashboardAPI.getRecentActivities(5);
|
if (response.code === 0) {
|
setRecentActivities(response.data);
|
}
|
} catch (error) {
|
console.error('获取最新活动失败:', error);
|
message.error('获取最新活动失败');
|
}
|
};
|
|
// 获取最新志愿者列表
|
const fetchRecentVolunteers = async () => {
|
try {
|
const response = await dashboardAPI.getRecentVolunteers(5);
|
if (response.code === 0) {
|
setRecentVolunteers(response.data);
|
}
|
} catch (error) {
|
console.error('获取最新志愿者失败:', error);
|
message.error('获取最新志愿者失败');
|
}
|
};
|
|
// 获取积分趋势数据
|
const fetchPointsTrend = async () => {
|
try {
|
const response = await statisticsAPI.getPointsTrend('month');
|
if (response.code === 0) {
|
setPointsTrendData(response.data);
|
}
|
} catch (error) {
|
console.error('获取积分趋势失败:', error);
|
message.error('获取积分趋势失败');
|
}
|
};
|
|
// 获取活动参与度数据
|
const fetchActivityParticipation = async () => {
|
try {
|
const response = await statisticsAPI.getActivityParticipation();
|
if (response.code === 0) {
|
setActivityParticipationData(response.data);
|
}
|
} catch (error) {
|
console.error('获取活动参与度失败:', error);
|
message.error('获取活动参与度失败');
|
}
|
};
|
|
// 页面初始化加载数据
|
useEffect(() => {
|
const loadData = async () => {
|
setLoading(true);
|
try {
|
await Promise.all([
|
fetchOverviewData(),
|
fetchRecentActivities(),
|
fetchRecentVolunteers(),
|
fetchPointsTrend(),
|
fetchActivityParticipation(),
|
]);
|
} finally {
|
setLoading(false);
|
}
|
};
|
|
loadData();
|
}, []);
|
|
// 积分趋势图表配置
|
const pointsTrendOption = {
|
title: {
|
text: '积分趋势',
|
left: 'center',
|
},
|
tooltip: {
|
trigger: 'axis',
|
},
|
xAxis: {
|
type: 'category',
|
data: pointsTrendData.categories,
|
},
|
yAxis: {
|
type: 'value',
|
},
|
series: [
|
{
|
name: '积分总数',
|
type: 'line',
|
data: pointsTrendData.totalPoints,
|
smooth: true,
|
itemStyle: {
|
color: '#1890ff',
|
},
|
},
|
],
|
};
|
|
// 活动参与度图表配置
|
const activityParticipationOption = {
|
title: {
|
text: '活动参与度',
|
left: 'center',
|
},
|
tooltip: {
|
trigger: 'item',
|
},
|
series: [
|
{
|
name: '参与情况',
|
type: 'pie',
|
radius: '50%',
|
data: activityParticipationData,
|
emphasis: {
|
itemStyle: {
|
shadowBlur: 10,
|
shadowOffsetX: 0,
|
shadowColor: 'rgba(0, 0, 0, 0.5)',
|
},
|
},
|
},
|
],
|
};
|
|
// 查看活动详情
|
const handleViewActivity = (activity) => {
|
setViewingActivity(activity);
|
setViewModalVisible(true);
|
};
|
|
const handleModalCancel = () => {
|
setViewModalVisible(false);
|
setViewingActivity(null);
|
};
|
|
// 活动状态转换函数
|
const getActivityStatusText = (status) => {
|
switch (status) {
|
case '1':
|
return '未开始';
|
case '2':
|
return '进行中';
|
case '3':
|
return '已结束';
|
default:
|
return status; // 如果不是数字状态码，直接返回原值
|
}
|
};
|
|
const getStatusColor = (status) => {
|
switch (status) {
|
case '1':
|
case '未开始':
|
return 'default';
|
case '2':
|
case '进行中':
|
return 'processing';
|
case '3':
|
case '已结束':
|
return 'default';
|
case '报名中':
|
return 'warning';
|
case '活跃':
|
return 'success';
|
default:
|
return 'default';
|
}
|
};
|
|
const quickActions = [
|
{
|
title: '发布活动',
|
icon: <PlusOutlined />,
|
color: '#1890ff',
|
onClick: () => navigate('/activities/create'),
|
},
|
{
|
title: '查看志愿者',
|
icon: <TeamOutlined />,
|
color: '#52c41a',
|
onClick: () => navigate('/volunteers'),
|
},
|
{
|
title: '积分查询',
|
icon: <GiftOutlined />,
|
color: '#faad14',
|
onClick: () => navigate('/volunteers/points'),
|
},
|
{
|
title: '数据统计',
|
icon: <CalendarOutlined />,
|
color: '#722ed1',
|
onClick: () => navigate('/statistics/overview'),
|
},
|
];
|
|
return (
|
<div>
|
<div className="page-header">
|
<h1 className="page-title">主控制台</h1>
|
<p className="page-description">欢迎使用志愿者服务后台管理系统</p>
|
</div>
|
|
{/* 数据概览 */}
|
<Row gutter={[16, 16]} style={{ marginBottom: 24 }}>
|
<Col xs={24} sm={12} lg={6}>
|
<Card>
|
<Statistic
|
title="志愿者总数"
|
value={overviewData.totalVolunteers}
|
prefix={<UserOutlined />}
|
valueStyle={{ color: '#1890ff' }}
|
/>
|
</Card>
|
</Col>
|
<Col xs={24} sm={12} lg={6}>
|
<Card>
|
<Statistic
|
title="积分总数"
|
value={overviewData.totalPoints}
|
prefix={<GiftOutlined />}
|
valueStyle={{ color: '#52c41a' }}
|
/>
|
</Card>
|
</Col>
|
<Col xs={24} sm={12} lg={6}>
|
<Card>
|
<Statistic
|
title="活动总数"
|
value={overviewData.totalActivities}
|
prefix={<CalendarOutlined />}
|
valueStyle={{ color: '#faad14' }}
|
/>
|
</Card>
|
</Col>
|
<Col xs={24} sm={12} lg={6}>
|
<Card>
|
<Statistic
|
title="报名总数"
|
value={overviewData.totalRegistrations}
|
prefix={<TeamOutlined />}
|
valueStyle={{ color: '#722ed1' }}
|
/>
|
</Card>
|
</Col>
|
</Row>
|
|
{/* 快捷操作 */}
|
<Row gutter={[16, 16]} style={{ marginBottom: 24 }}>
|
<Col span={24}>
|
<Card title="快捷操作">
|
<Row gutter={[16, 16]}>
|
{quickActions.map((action, index) => (
|
<Col xs={12} sm={6} key={index}>
|
<Button
|
type="dashed"
|
size="large"
|
icon={action.icon}
|
onClick={action.onClick}
|
style={{
|
width: '100%',
|
height: 80,
|
borderColor: action.color,
|
color: action.color,
|
}}
|
>
|
{action.title}
|
</Button>
|
</Col>
|
))}
|
</Row>
|
</Card>
|
</Col>
|
</Row>
|
|
{/* 图表区域 */}
|
<Row gutter={[16, 16]} style={{ marginBottom: 24 }}>
|
<Col xs={24} lg={12}>
|
<Card>
|
<ReactECharts option={pointsTrendOption} style={{ height: 300 }} />
|
</Card>
|
</Col>
|
<Col xs={24} lg={12}>
|
<Card>
|
<ReactECharts option={activityParticipationOption} style={{ height: 300 }} />
|
</Card>
|
</Col>
|
</Row>
|
|
{/* 最新活动和志愿者 */}
|
<Row gutter={[16, 16]}>
|
<Col xs={24} lg={12}>
|
<Card
|
title="最新活动"
|
extra={<Button type="link" onClick={() => navigate('/activities')}>查看全部</Button>}
|
>
|
<List
|
dataSource={recentActivities}
|
renderItem={(item) => (
|
<List.Item
|
actions={[
|
<Button type="link" icon={<EyeOutlined />} onClick={() => handleViewActivity(item)}>
|
查看
|
</Button>
|
]}
|
>
|
<List.Item.Meta
|
title={item.title}
|
description={`${dayjs(item.date).format('YYYY-MM-DD HH:mm')} | 参与人数: ${item.participants}`}
|
/>
|
<Tag color={getStatusColor(item.status)}>{getActivityStatusText(item.status)}</Tag>
|
</List.Item>
|
)}
|
/>
|
</Card>
|
</Col>
|
<Col xs={24} lg={12}>
|
<Card
|
title="最新志愿者"
|
extra={<Button type="link" onClick={() => navigate('/volunteers')}>查看全部</Button>}
|
>
|
<List
|
dataSource={recentVolunteers}
|
renderItem={(item) => (
|
<List.Item
|
actions={[
|
<Button type="link" icon={<EyeOutlined />} onClick={() => navigate(`/volunteers/${item.id}`)}>
|
查看
|
</Button>
|
]}
|
>
|
<List.Item.Meta
|
avatar={<Avatar icon={<UserOutlined />} />}
|
title={item.name}
|
description={`加入时间: ${dayjs(item.joinDate).format('YYYY-MM-DD HH:mm')} | 积分: ${item.points}`}
|
/>
|
<Tag color={getStatusColor(item.status)}>{item.status}</Tag>
|
</List.Item>
|
)}
|
/>
|
</Card>
|
</Col>
|
</Row>
|
|
{/* 查看活动详情弹窗 */}
|
<Modal
|
title="查看活动详情"
|
open={viewModalVisible}
|
onCancel={handleModalCancel}
|
footer={[
|
<Button key="close" onClick={handleModalCancel}>
|
关闭
|
</Button>
|
]}
|
width={800}
|
>
|
{viewingActivity && (
|
<div>
|
<Row gutter={[24, 16]}>
|
<Col span={12}>
|
<div><strong>活动名称：</strong>{viewingActivity.title}</div>
|
</Col>
|
<Col span={12}>
|
<div><strong>活动分类：</strong>{viewingActivity.categoryDesc || '未分类'}</div>
|
</Col>
|
</Row>
|
<Row gutter={[24, 16]}>
|
<Col span={12}>
|
<div><strong>活动开始时间：</strong>{dayjs(viewingActivity.startTime || viewingActivity.date).format('YYYY-MM-DD HH:mm')}</div>
|
</Col>
|
<Col span={12}>
|
<div><strong>活动结束时间：</strong>{dayjs(viewingActivity.endTime).format('YYYY-MM-DD HH:mm')}</div>
|
</Col>
|
</Row>
|
<Row gutter={[24, 16]}>
|
<Col span={12}>
|
<div><strong>活动地点：</strong>{viewingActivity.location || '未设置'}</div>
|
</Col>
|
<Col span={12}>
|
<div><strong>报名截止时间：</strong>{dayjs(viewingActivity.deadline).format('YYYY-MM-DD HH:mm')}</div>
|
</Col>
|
</Row>
|
<Row gutter={[24, 16]}>
|
<Col span={8}>
|
<div><strong>最大志愿者人数：</strong>{viewingActivity.maxParticipants || '未设置'}</div>
|
</Col>
|
<Col span={8}>
|
<div><strong>活动积分：</strong>{viewingActivity.points || 0}</div>
|
</Col>
|
<Col span={8}>
|
<div><strong>状态：</strong>{getActivityStatusText(viewingActivity.status)}</div>
|
</Col>
|
</Row>
|
<Row gutter={[24, 16]}>
|
<Col span={12}>
|
<div><strong>创建时间：</strong>{dayjs(viewingActivity.createTime).format('YYYY-MM-DD HH:mm')}</div>
|
</Col>
|
<Col span={12}>
|
<div><strong>参与人数：</strong>{viewingActivity.participants || 0}</div>
|
</Col>
|
</Row>
|
{viewingActivity.content && (
|
<Row gutter={[24, 16]}>
|
<Col span={24}>
|
<div><strong>活动内容：</strong></div>
|
<div style={{ marginTop: '8px', padding: '12px', backgroundColor: '#f5f5f5', borderRadius: '4px' }}>
|
{viewingActivity.content}
|
</div>
|
</Col>
|
</Row>
|
)}
|
{viewingActivity.cover && (
|
<Row gutter={[24, 16]}>
|
<Col span={24}>
|
<div><strong>活动封面：</strong></div>
|
<div style={{ marginTop: '8px' }}>
|
<img src={viewingActivity.cover} alt="活动封面" style={{ maxWidth: '200px', borderRadius: '4px' }} />
|
</div>
|
</Col>
|
</Row>
|
)}
|
</div>
|
)}
|
</Modal>
|
</div>
|
);
|
};
|
|
export default Dashboard;
|
