103 lines
3.2 KiB
JavaScript
103 lines
3.2 KiB
JavaScript
import { useState, useEffect } from "react";
|
|
import StartClass from "./components/StartClass";
|
|
import QuickAccess from "./components/QuickAccess";
|
|
import CalendarTaskModule from "./components/CalendarTaskModule";
|
|
import StudyStatus from "./components/StudyStatus";
|
|
import ClassRank from "@/components/ClassRank";
|
|
import StageProgress from "@/components/StageProgress";
|
|
import TaskList from "./components/TaskList";
|
|
import { getDashboardStatistics } from "@/services";
|
|
import "./index.css";
|
|
|
|
const Dashboard = () => {
|
|
const [dashboardData, setDashboardData] = useState(null);
|
|
const [loading, setLoading] = useState(true);
|
|
const [selectedDate, setSelectedDate] = useState(new Date());
|
|
|
|
useEffect(() => {
|
|
fetchDashboardData();
|
|
}, []);
|
|
|
|
// 获取仪表板完整数据
|
|
const fetchDashboardData = async () => {
|
|
try {
|
|
setLoading(true);
|
|
const response = await getDashboardStatistics();
|
|
if (response && response.success) {
|
|
setDashboardData(response.data);
|
|
} else if (response) {
|
|
// 兼容直接返回数据的情况
|
|
setDashboardData(response);
|
|
}
|
|
} catch (error) {
|
|
console.error("Failed to fetch dashboard data:", error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
// 根据选中日期筛选任务
|
|
const getTasksForDate = (date) => {
|
|
if (!dashboardData?.tasks?.allTasks) return [];
|
|
// Check if date is valid before calling getTime
|
|
if (!date || isNaN(date.getTime())) {
|
|
console.warn("Invalid date provided to getTasksForDate:", date);
|
|
return [];
|
|
}
|
|
// 使用本地日期格式，避免时区问题
|
|
const year = date.getFullYear();
|
|
const month = String(date.getMonth() + 1).padStart(2, '0');
|
|
const day = String(date.getDate()).padStart(2, '0');
|
|
const dateStr = `${year}-${month}-${day}`;
|
|
|
|
console.log("Looking for tasks on date:", dateStr);
|
|
const tasks = dashboardData.tasks.allTasks.filter((task) => task.date === dateStr);
|
|
console.log("Found tasks:", tasks);
|
|
|
|
return tasks;
|
|
};
|
|
|
|
return (
|
|
<div className="dashboard">
|
|
<StageProgress showBlockageAlert={true} />
|
|
|
|
<div className="dashboard-wrapper">
|
|
<div className="dashboard-left-content">
|
|
<StartClass
|
|
courses={dashboardData?.courses}
|
|
tasks={dashboardData?.tasks}
|
|
loading={loading}
|
|
/>
|
|
<QuickAccess />
|
|
<div className="status-rank-wrapper">
|
|
<StudyStatus
|
|
progress={dashboardData?.overview?.overallProgress}
|
|
loading={loading}
|
|
/>
|
|
<ClassRank
|
|
className="class-rank-wrapper"
|
|
data={
|
|
dashboardData?.ranking
|
|
? {
|
|
rankings: dashboardData.ranking.topStudents,
|
|
}
|
|
: null
|
|
}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="dashboard-right-content">
|
|
<CalendarTaskModule
|
|
tasks={dashboardData?.tasks?.allTasks}
|
|
selectedDate={selectedDate}
|
|
onDateChange={setSelectedDate}
|
|
/>
|
|
<TaskList tasks={getTasksForDate(selectedDate)} loading={loading} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Dashboard;
|