|
|
@@ -1,38 +1,36 @@
|
|
|
import { ref, computed, watch } from 'vue';
|
|
|
+import { getPlanStudyRecord } from '@/api/modules/study';
|
|
|
// @ts-ignore
|
|
|
import CalendarUtil from '@/uni_modules/uni-calendar/components/uni-calendar/util.js';
|
|
|
|
|
|
+export interface PracticeStatistics {
|
|
|
+ list: PracticeData[],
|
|
|
+ rate: number,
|
|
|
+ studyDays: number,
|
|
|
+ total: number,
|
|
|
+}
|
|
|
+
|
|
|
export interface PracticeData {
|
|
|
date: string;
|
|
|
info: number;
|
|
|
questionNum: number;
|
|
|
}
|
|
|
|
|
|
-export interface PracticeStatistics {
|
|
|
- totalQuestions: number; // 刷题总量
|
|
|
- averageAccuracy: number; // 平均正确率
|
|
|
- practiceDays: number; // 练习天数
|
|
|
- totalPracticeDays: number; // 累计刷题天数（所有打点数据的总长度）
|
|
|
-}
|
|
|
-
|
|
|
export function useCalendar() {
|
|
|
const calendarUtil = new CalendarUtil();
|
|
|
const globalStudentId = ref(0);
|
|
|
const selected = ref<PracticeData[]>([]);
|
|
|
const statistics = ref<PracticeStatistics>({
|
|
|
- totalQuestions: 0,
|
|
|
- averageAccuracy: 0,
|
|
|
- practiceDays: 0,
|
|
|
- totalPracticeDays: 0
|
|
|
+ list: [],
|
|
|
+ rate: 0,
|
|
|
+ studyDays: 0,
|
|
|
+ total: 0
|
|
|
});
|
|
|
const currentWeekNumber = ref(1); // 用于外部数据计算
|
|
|
const calendarWeekNumber = ref(1); // 专门用于日历组件显示
|
|
|
const currentDate = ref(new Date());
|
|
|
- const displayMode = ref<'year' | 'month' | 'week'>('year');
|
|
|
+ const displayMode = ref<'year' | 'month'>('year');
|
|
|
const loading = ref(false);
|
|
|
-
|
|
|
- // 配置变量：最早可访问的年份
|
|
|
- const EARLIEST_YEAR = 2020;
|
|
|
|
|
|
// 计算当前周范围
|
|
|
const currentWeekRange = computed(() => {
|
|
|
@@ -50,13 +48,10 @@ export function useCalendar() {
|
|
|
const current = currentDate.value;
|
|
|
|
|
|
if (displayMode.value === 'year') {
|
|
|
- return current.getFullYear() > EARLIEST_YEAR;
|
|
|
- } else if (displayMode.value === 'week') {
|
|
|
- // 周模式：支持跨年
|
|
|
- return currentWeekNumber.value > 1 || !(current.getFullYear() === EARLIEST_YEAR && current.getMonth() === 0);
|
|
|
+ return current.getFullYear() > EARLIEST_YEAR.value;
|
|
|
} else {
|
|
|
// 月份模式：支持跨年，只要不是最早年份1月就可以往前切换
|
|
|
- return !(current.getFullYear() === EARLIEST_YEAR && current.getMonth() === 0);
|
|
|
+ return !(current.getFullYear() === EARLIEST_YEAR.value && current.getMonth() === 0);
|
|
|
}
|
|
|
});
|
|
|
|
|
|
@@ -67,22 +62,6 @@ export function useCalendar() {
|
|
|
|
|
|
if (displayMode.value === 'year') {
|
|
|
return current.getFullYear() < today.getFullYear();
|
|
|
- } else if (displayMode.value === 'week') {
|
|
|
- // 检查是否已经到达当前日期
|
|
|
- const isCurrentMonth = current.getFullYear() === today.getFullYear() &&
|
|
|
- current.getMonth() === today.getMonth();
|
|
|
-
|
|
|
- if (isCurrentMonth) {
|
|
|
- // 当前月份，检查是否超过当前周
|
|
|
- const firstDayOfMonth = new Date(current.getFullYear(), current.getMonth(), 1);
|
|
|
- const firstWeekday = firstDayOfMonth.getDay() === 0 ? 7 : firstDayOfMonth.getDay();
|
|
|
- const currentWeekInMonth = Math.ceil((today.getDate() + firstWeekday - 1) / 7);
|
|
|
- return currentWeekNumber.value < currentWeekInMonth;
|
|
|
- } else {
|
|
|
- // 非当前月份，检查是否超过当前月份
|
|
|
- return current.getFullYear() < today.getFullYear() ||
|
|
|
- (current.getFullYear() === today.getFullYear() && current.getMonth() < today.getMonth());
|
|
|
- }
|
|
|
} else {
|
|
|
// 月份模式，不能超过当前月份
|
|
|
return current.getFullYear() < today.getFullYear() ||
|
|
|
@@ -90,186 +69,59 @@ export function useCalendar() {
|
|
|
}
|
|
|
});
|
|
|
|
|
|
- // 模拟接口请求打点数据
|
|
|
- // ==================== 真实接口对接说明 ====================
|
|
|
- // 当对接真实接口时，请替换以下部分：
|
|
|
- // 1. 删除模拟网络延迟：await new Promise(resolve => setTimeout(resolve, 300));
|
|
|
- // 2. 替换为真实API调用：
|
|
|
- // const response = await api.getPracticeData({ startDate, endDate });
|
|
|
- // return response.data;
|
|
|
// 3. 确保返回的数据格式符合 PracticeData[] 接口
|
|
|
// 4. 统计数据会从返回的练习数据中自动计算，无需额外处理
|
|
|
// ========================================================
|
|
|
- const fetchPracticeData = async (startDate: string, endDate: string): Promise<PracticeData[]> => {
|
|
|
- console.log('请求数据', startDate, endDate, globalStudentId.value)
|
|
|
- // ========== 模拟网络延迟 - 真实接口时删除此部分 ==========
|
|
|
- await new Promise(resolve => setTimeout(resolve, 300));
|
|
|
-
|
|
|
- // ========== 模拟数据生成逻辑 - 真实接口时替换为API调用 ==========
|
|
|
- // 生成日期范围内的随机几天数据
|
|
|
- const start = new Date(startDate);
|
|
|
- const end = new Date(endDate);
|
|
|
- const practiceData: PracticeData[] = [];
|
|
|
-
|
|
|
- // 计算总天数
|
|
|
- const totalDays = Math.ceil((end.getTime() - start.getTime()) / (1000 * 60 * 60 * 24)) + 1;
|
|
|
-
|
|
|
- // 根据时间范围决定练习天数
|
|
|
- let practiceDays: number;
|
|
|
- const today = new Date();
|
|
|
- const isCurrentPeriod = start <= today && end >= today;
|
|
|
- const isYearData = totalDays > 100; // 如果总天数超过100天，认为是年份数据
|
|
|
-
|
|
|
- if (isYearData) {
|
|
|
- // 年份数据，生成较多的练习天数
|
|
|
- practiceDays = Math.floor(Math.random() * 100) + 50; // 50-150天
|
|
|
- } else if (isCurrentPeriod) {
|
|
|
- // 当前时间段，练习天数较少
|
|
|
- practiceDays = Math.floor(Math.random() * 2) + 2; // 2-4天
|
|
|
- } else if (start < today) {
|
|
|
- // 过去时间段，练习天数较多
|
|
|
- practiceDays = Math.floor(Math.random() * 4) + 4; // 4-8天
|
|
|
- } else {
|
|
|
- // 未来时间段，没有练习数据
|
|
|
- return [];
|
|
|
- }
|
|
|
-
|
|
|
- // 确保不超过总天数
|
|
|
- practiceDays = Math.min(practiceDays, totalDays);
|
|
|
- const practiceDates = new Set<string>();
|
|
|
-
|
|
|
- // 随机选择练习日期
|
|
|
- while (practiceDates.size < practiceDays) {
|
|
|
- const randomDay = Math.floor(Math.random() * totalDays);
|
|
|
- const practiceDate = new Date(start);
|
|
|
- practiceDate.setDate(practiceDate.getDate() + randomDay);
|
|
|
- const dateStr = practiceDate.toISOString().split('T')[0];
|
|
|
- practiceDates.add(dateStr);
|
|
|
- }
|
|
|
-
|
|
|
- // 为每个练习日期生成数据
|
|
|
- practiceDates.forEach(dateStr => {
|
|
|
- const questionNum = Math.floor(Math.random() * 20) + 10; // 10-30题
|
|
|
- const correctRate = Math.random() * 0.4 + 0.6; // 0.6-1.0 的正确率
|
|
|
+ const fetchPracticeData = async (year: number, month: number): Promise<PracticeStatistics> => {
|
|
|
+ console.log('请求数据', year, month, globalStudentId.value)
|
|
|
+ let practiceData: PracticeStatistics = {
|
|
|
+ list: [],
|
|
|
+ rate: 0,
|
|
|
+ studyDays: 0,
|
|
|
+ total: 0
|
|
|
+ };
|
|
|
|
|
|
- practiceData.push({
|
|
|
- date: dateStr,
|
|
|
- info: Math.round(correctRate * 100) / 100, // 四舍五入到两位小数
|
|
|
- questionNum: questionNum
|
|
|
- });
|
|
|
+ const { data } = await getPlanStudyRecord({
|
|
|
+ year,
|
|
|
+ month
|
|
|
});
|
|
|
-
|
|
|
- return practiceData.sort((a, b) => a.date.localeCompare(b.date));
|
|
|
+ practiceData.list = data.list.map(item => ({
|
|
|
+ date: item.date,
|
|
|
+ info: item.rate ? Number(item.rate) : 0,
|
|
|
+ questionNum: item.study ? Number(item.study) : 0
|
|
|
+ })).sort((a, b) => a.date.localeCompare(b.date));
|
|
|
+ practiceData.rate = data.rate ? Number(data.rate) : 0;
|
|
|
+ practiceData.studyDays = data.studyDays ? Number(data.studyDays) : 0;
|
|
|
+ practiceData.total = data.total ? Number(data.total) : 0;
|
|
|
+ console.log('response', practiceData)
|
|
|
+ return practiceData;
|
|
|
};
|
|
|
|
|
|
|
|
|
// 更新日历数据 - 统一的数据更新方法
|
|
|
- const updateCalendarData = async (date?: Date, mode?: 'year' | 'month' | 'week', modeNumber?: number) => {
|
|
|
+ const updateCalendarData = async (year: number, month: number) => {
|
|
|
+ if (month !== 0) {
|
|
|
+ displayMode.value = 'month';
|
|
|
+ currentDate.value = new Date(year, month - 1, 1);
|
|
|
+ } else {
|
|
|
+ displayMode.value = 'year';
|
|
|
+ currentDate.value = new Date(year, month, 1);
|
|
|
+ }
|
|
|
+ console.log(year, month)
|
|
|
+
|
|
|
+ console.log('currentDate', currentDate.value)
|
|
|
loading.value = true;
|
|
|
try {
|
|
|
- // 使用传入的参数或当前状态
|
|
|
- const targetDate = date || currentDate.value;
|
|
|
- const targetMode = mode || displayMode.value;
|
|
|
- const targetModeNumber = modeNumber !== undefined ? modeNumber :
|
|
|
- (targetMode === 'week' ? currentWeekNumber.value :
|
|
|
- targetMode === 'month' ? (date ? date.getMonth() + 1 : currentDate.value.getMonth() + 1) :
|
|
|
- targetDate.getFullYear());
|
|
|
-
|
|
|
- // 计算数据范围
|
|
|
- let startDate: string, endDate: string;
|
|
|
-
|
|
|
- if (targetMode === 'year') {
|
|
|
- // 年份模式：从1月1日到12月31日
|
|
|
- const year = targetModeNumber;
|
|
|
- startDate = `${year}-01-01`;
|
|
|
- endDate = `${year}-12-31`;
|
|
|
- } else if (targetMode === 'week') {
|
|
|
- // 周模式：根据指定周数计算范围
|
|
|
- const range = calendarUtil.getCurrentWeekRange(targetDate, targetModeNumber);
|
|
|
- startDate = range.startDate;
|
|
|
- endDate = range.endDate;
|
|
|
- } else {
|
|
|
- // 月份模式：根据指定月份计算范围
|
|
|
- const year = targetDate.getFullYear();
|
|
|
- const month = targetModeNumber; // 使用传入的月份参数
|
|
|
- const start = new Date(year, month - 1, 1);
|
|
|
- const end = new Date(year, month, 0); // 获取该月最后一天
|
|
|
- startDate = start.getFullYear() + '-' + String(start.getMonth() + 1).padStart(2, '0') + '-' + String(start.getDate()).padStart(2, '0');
|
|
|
- endDate = end.getFullYear() + '-' + String(end.getMonth() + 1).padStart(2, '0') + '-' + String(end.getDate()).padStart(2, '0');
|
|
|
- }
|
|
|
-
|
|
|
// 请求数据
|
|
|
- const practiceData = await fetchPracticeData(startDate, endDate);
|
|
|
-
|
|
|
+ const practiceData = await fetchPracticeData(year, month);
|
|
|
// 更新状态
|
|
|
- currentDate.value = targetDate;
|
|
|
- displayMode.value = targetMode;
|
|
|
-
|
|
|
- if (targetMode === 'week') {
|
|
|
- currentWeekNumber.value = targetModeNumber;
|
|
|
- calendarWeekNumber.value = targetModeNumber;
|
|
|
- }
|
|
|
-
|
|
|
- selected.value = practiceData;
|
|
|
-
|
|
|
- // 计算统计数据
|
|
|
- const totalQuestions = practiceData.reduce((sum, item) => sum + item.questionNum, 0);
|
|
|
- const averageAccuracy = practiceData.length > 0
|
|
|
- ? practiceData.reduce((sum, item) => sum + item.info, 0) / practiceData.length
|
|
|
- : 0;
|
|
|
- const practiceDays = practiceData.length;
|
|
|
- const totalPracticeDays = practiceData.length; // 累计刷题天数就是打点数据的长度
|
|
|
-
|
|
|
- statistics.value = {
|
|
|
- totalQuestions,
|
|
|
- averageAccuracy: Math.round(averageAccuracy * 100) / 100,
|
|
|
- practiceDays,
|
|
|
- totalPracticeDays
|
|
|
- };
|
|
|
+ selected.value = practiceData.list
|
|
|
+ statistics.value = practiceData;
|
|
|
} finally {
|
|
|
loading.value = false;
|
|
|
}
|
|
|
};
|
|
|
|
|
|
-
|
|
|
- // 切换到上一周
|
|
|
- const goToPrevWeek = async () => {
|
|
|
- if (!canGoPrev.value) return;
|
|
|
-
|
|
|
- if (currentWeekNumber.value > 1) {
|
|
|
- await updateCalendarData(undefined, 'week', currentWeekNumber.value - 1);
|
|
|
- } else {
|
|
|
- // 切换到上个月的最后一周
|
|
|
- const currentMonth = currentDate.value.getMonth();
|
|
|
- const currentYear = currentDate.value.getFullYear();
|
|
|
-
|
|
|
- // 计算上个月的年月
|
|
|
- const prevYear = currentMonth === 0 ? currentYear - 1 : currentYear;
|
|
|
- const prevMonth = currentMonth === 0 ? 11 : currentMonth - 1;
|
|
|
-
|
|
|
- const preDate = new Date(prevYear, prevMonth, 1);
|
|
|
- calendarUtil.setDate(preDate);
|
|
|
- const range = calendarUtil.getCurrentWeekRange(preDate);
|
|
|
- await updateCalendarData(preDate, 'week', range.totalWeeks);
|
|
|
- }
|
|
|
- };
|
|
|
-
|
|
|
- // 切换到下一周
|
|
|
- const goToNextWeek = async () => {
|
|
|
- if (!canGoNext.value) return;
|
|
|
-
|
|
|
- const range = currentWeekRange.value;
|
|
|
- if (currentWeekNumber.value < range.totalWeeks) {
|
|
|
- await updateCalendarData(undefined, 'week', currentWeekNumber.value + 1);
|
|
|
- } else {
|
|
|
- // 切换到下个月的第一周
|
|
|
- const nextDate = new Date(currentDate.value);
|
|
|
- nextDate.setMonth(nextDate.getMonth() + 1);
|
|
|
- calendarUtil.setDate(nextDate);
|
|
|
- await updateCalendarData(nextDate, 'week', 1);
|
|
|
- }
|
|
|
- };
|
|
|
-
|
|
|
// 切换到上一个月
|
|
|
const goToPrevMonth = async () => {
|
|
|
if (!canGoPrev.value) return;
|
|
|
@@ -277,9 +129,9 @@ export function useCalendar() {
|
|
|
const currentMonth = currentDate.value.getMonth();
|
|
|
const targetMonth = currentMonth === 0 ? 12 : currentMonth; // 如果当前是1月，目标月份是12月
|
|
|
const targetYear = currentMonth === 0 ? currentDate.value.getFullYear() - 1 : currentDate.value.getFullYear();
|
|
|
-
|
|
|
- const preDate = new Date(targetYear, targetMonth - 1, 1);
|
|
|
- await updateCalendarData(preDate, 'month', targetMonth);
|
|
|
+ const prevDate = new Date(targetYear, targetMonth - 1, 1);
|
|
|
+ currentDate.value = prevDate;
|
|
|
+ await updateCalendarData(targetYear, targetMonth);
|
|
|
};
|
|
|
|
|
|
// 切换到下一个月
|
|
|
@@ -289,34 +141,42 @@ export function useCalendar() {
|
|
|
const currentMonth = currentDate.value.getMonth();
|
|
|
const targetMonth = currentMonth === 11 ? 1 : currentMonth + 2; // 如果当前是12月，目标月份是1月
|
|
|
const targetYear = currentMonth === 11 ? currentDate.value.getFullYear() + 1 : currentDate.value.getFullYear();
|
|
|
-
|
|
|
- const nextDate = new Date(targetYear, targetMonth - 1, 1);
|
|
|
- await updateCalendarData(nextDate, 'month', targetMonth);
|
|
|
- };
|
|
|
|
|
|
- // 设置显示模式
|
|
|
- const setDisplayMode = async (mode: 'year' | 'month' | 'week') => {
|
|
|
- await updateCalendarData(undefined, mode);
|
|
|
+ const nextDate = new Date(targetYear, targetMonth - 1, 1);
|
|
|
+ currentDate.value = nextDate;
|
|
|
+ await updateCalendarData(targetYear, targetMonth);
|
|
|
};
|
|
|
|
|
|
// 根据年份跳转
|
|
|
const goToYear = async (year: number) => {
|
|
|
- const targetDate = new Date(year, 0, 1); // 年初
|
|
|
- await updateCalendarData(targetDate, 'year', year);
|
|
|
+ await updateCalendarData(year, 0);
|
|
|
};
|
|
|
|
|
|
// 根据年份和月份跳转
|
|
|
const goToYearMonth = async (year: number, month: number) => {
|
|
|
- const targetDate = new Date(year, month - 1, 1);
|
|
|
- await updateCalendarData(targetDate, 'month', month);
|
|
|
+ await updateCalendarData(year, month);
|
|
|
};
|
|
|
|
|
|
- // 根据周数跳转
|
|
|
- const goToWeek = async (weekNumber: number) => {
|
|
|
- if (weekNumber >= 1 && weekNumber <= currentWeekRange.value.totalWeeks) {
|
|
|
- await updateCalendarData(undefined, 'week', weekNumber);
|
|
|
- }
|
|
|
- };
|
|
|
+ // 生成可以选择的年份列表，默认去年+今年
|
|
|
+ const yearList = computed(() => {
|
|
|
+ const today = new Date();
|
|
|
+ const currentYear = today.getFullYear();
|
|
|
+ return [
|
|
|
+ {
|
|
|
+ label: currentYear - 1,
|
|
|
+ value: currentYear - 1
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: currentYear,
|
|
|
+ value: currentYear
|
|
|
+ }
|
|
|
+ ];
|
|
|
+ })
|
|
|
+
|
|
|
+ // 配置变量：最早可访问的年份
|
|
|
+ const EARLIEST_YEAR = computed(() => {
|
|
|
+ return yearList.value[0].value;
|
|
|
+ });
|
|
|
|
|
|
// 获取当前年份
|
|
|
const currentYear = computed(() => currentDate.value.getFullYear());
|
|
|
@@ -332,7 +192,6 @@ export function useCalendar() {
|
|
|
return {
|
|
|
year: currentYearToday.toString(),
|
|
|
month: '', // 默认不选择月份
|
|
|
- week: '' // 默认不选择周
|
|
|
};
|
|
|
};
|
|
|
|
|
|
@@ -340,7 +199,7 @@ export function useCalendar() {
|
|
|
const init = async (studentId: number) => {
|
|
|
const today = new Date();
|
|
|
globalStudentId.value = studentId;
|
|
|
- await updateCalendarData(today, 'year', today.getFullYear());
|
|
|
+ await updateCalendarData(today.getFullYear(), 0);
|
|
|
};
|
|
|
|
|
|
return {
|
|
|
@@ -354,29 +213,26 @@ export function useCalendar() {
|
|
|
displayMode,
|
|
|
currentWeekRange,
|
|
|
currentMonthRange,
|
|
|
-
|
|
|
+
|
|
|
// 状态
|
|
|
canGoPrev,
|
|
|
canGoNext,
|
|
|
loading,
|
|
|
-
|
|
|
+
|
|
|
// 计算属性
|
|
|
currentYear,
|
|
|
currentMonth,
|
|
|
-
|
|
|
+
|
|
|
// 配置
|
|
|
EARLIEST_YEAR,
|
|
|
-
|
|
|
+ yearList,
|
|
|
+
|
|
|
// 方法
|
|
|
updateCalendarData,
|
|
|
- goToPrevWeek,
|
|
|
- goToNextWeek,
|
|
|
goToPrevMonth,
|
|
|
goToNextMonth,
|
|
|
goToYear,
|
|
|
goToYearMonth,
|
|
|
- goToWeek,
|
|
|
- setDisplayMode,
|
|
|
initializeFormData,
|
|
|
init
|
|
|
};
|
