feat(exam): 添加学生考试历史结果查看功能

- 新增接口获取指定学生的历史考试结果列表
- 数据库层新增根据学生ID查询历史考试记录的查询方法
- 服务层新增获取学生历史考试结果列表的实现
- 前端api新增调用学生考试历史接口的方法
- 学生详情页增加考试历史记录图表展示板块
- 新增考试历史折线图组件，展示正确词数和错误词数的时间变化
- 使用echarts实现折线图并支持点击显示详情
- 更新项目依赖，新增echarts库用于图表展示

enlish-service/src/main/java/com/yinlihupo/enlish/service/controller/ExamWordsController.java

@@ -141,4 +141,22 @@ public class ExamWordsController {
 
         return Response.success(examWordsDetailResultRspVO);
     }
+
+    @PostMapping("student/history")
+    @ApiOperationLog(description = "获取学生历史考试结果")
+    Response<List<FindStudentExamWordsResultListRspVO>> getStudentExamWordsResultList(@RequestBody FindStudentExamWordsResultReqVO findStudentExamWordsResultReqVO) {
+        Integer studentId = findStudentExamWordsResultReqVO.getStudentId();
+        List<FindStudentExamWordsResultListRspVO> list = examWordsJudgeService.getStudentExamWordsResultList(studentId).stream().map(examWordsJudgeResultDO -> FindStudentExamWordsResultListRspVO.builder()
+                .id(examWordsJudgeResultDO.getId())
+                .studentId(examWordsJudgeResultDO.getStudentId())
+                .examWordsId(examWordsJudgeResultDO.getExamWordsId())
+                .correctWordCount(examWordsJudgeResultDO.getCorrectWordCount())
+                .wrongWordCount(examWordsJudgeResultDO.getWrongWordCount())
+                .startDate(examWordsJudgeResultDO.getStartDate())
+                .accuracy((double)examWordsJudgeResultDO.getCorrectWordCount() / (examWordsJudgeResultDO.getCorrectWordCount() + examWordsJudgeResultDO.getWrongWordCount()))
+                .build()
+        ).toList();
+
+        return Response.success(list);
+    }
 }

enlish-service/src/main/java/com/yinlihupo/enlish/service/domain/mapper/ExamWordsJudgeResultDOMapper.java

@@ -20,4 +20,6 @@ public interface ExamWordsJudgeResultDOMapper {
     Integer selectCount();
 
     ExamWordsJudgeResultDO selectDetailById(@Param("id") Integer id);
+
+    List<ExamWordsJudgeResultDO> selectByStudentId(@Param("studentId") Integer studentId);
 }

enlish-service/src/main/java/com/yinlihupo/enlish/service/model/vo/exam/FindStudentExamWordsResultListRspVO.java

@@ -0,0 +1,29 @@
+package com.yinlihupo.enlish.service.model.vo.exam;
+
+import lombok.AllArgsConstructor;
+import lombok.Builder;
+import lombok.Data;
+import lombok.NoArgsConstructor;
+
+import java.time.LocalDateTime;
+
+@AllArgsConstructor
+@NoArgsConstructor
+@Data
+@Builder
+public class FindStudentExamWordsResultListRspVO {
+
+    private Integer id;
+
+    private Integer studentId;
+
+    private Integer examWordsId;
+
+    private Integer correctWordCount;
+
+    private Integer wrongWordCount;
+
+    private Double accuracy;
+
+    private LocalDateTime startDate;
+}

enlish-service/src/main/java/com/yinlihupo/enlish/service/model/vo/exam/FindStudentExamWordsResultReqVO.java

@@ -0,0 +1,15 @@
+package com.yinlihupo.enlish.service.model.vo.exam;
+
+import lombok.AllArgsConstructor;
+import lombok.Builder;
+import lombok.Data;
+import lombok.NoArgsConstructor;
+
+@AllArgsConstructor
+@NoArgsConstructor
+@Data
+@Builder
+public class FindStudentExamWordsResultReqVO {
+
+    private Integer studentId;
+}

enlish-service/src/main/java/com/yinlihupo/enlish/service/service/ExamWordsJudgeService.java

@@ -2,6 +2,7 @@ package com.yinlihupo.enlish.service.service;
 
 import com.yinlihupo.enlish.service.domain.dataobject.ExamWordsJudgeResultDO;
 
+import java.util.Arrays;
 import java.util.List;
 
 public interface ExamWordsJudgeService {
@@ -13,4 +14,6 @@ public interface ExamWordsJudgeService {
     Integer getExamWordsJudgeResultCount();
 
     ExamWordsJudgeResultDO getExamWordsJudgeResultDOById(Integer id);
+
+    List<ExamWordsJudgeResultDO> getStudentExamWordsResultList(Integer studentId);
 }

enlish-service/src/main/java/com/yinlihupo/enlish/service/service/judge/ExamWordsJudgeServiceImpl.java

@@ -144,4 +144,9 @@ public class ExamWordsJudgeServiceImpl implements ExamWordsJudgeService {
     public ExamWordsJudgeResultDO getExamWordsJudgeResultDOById(Integer id) {
         return examWordsJudgeResultDOMapper.selectDetailById(id);
     }
+
+    @Override
+    public List<ExamWordsJudgeResultDO> getStudentExamWordsResultList(Integer studentId) {
+        return examWordsJudgeResultDOMapper.selectByStudentId(studentId);
+    }
 }

enlish-service/src/main/resources/mapper/ExamWordsJudgeResultDOMapper.xml

@@ -66,5 +66,12 @@
         from exam_words_judge_result
         where id = #{id}
     </select>
+    <select id="selectByStudentId" resultMap="BaseResultMap">
+        select *
+        from exam_words_judge_result
+        where student_id = #{studentId}
+        order by start_date desc
+        limit 500;
+    </select>
 
 </mapper>

enlish-vue/package-lock.json

@@ -9,6 +9,7 @@
             "version": "0.0.0",
             "dependencies": {
                 "axios": "^1.13.2",
+                "echarts": "^6.0.0",
                 "element-plus": "^2.12.0",
                 "flowbite": "^1.8.1",
                 "nprogress": "^0.2.0",
@@ -1647,6 +1648,16 @@
                 "node": ">= 0.4"
             }
         },
+        "node_modules/echarts": {
+            "version": "6.0.0",
+            "resolved": "https://registry.npmjs.org/echarts/-/echarts-6.0.0.tgz",
+            "integrity": "sha512-Tte/grDQRiETQP4xz3iZWSvoHrkCQtwqd6hs+mifXcjrCuo2iKWbajFObuLJVBlDIJlOzgQPd1hsaKt/3+OMkQ==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "tslib": "2.3.0",
+                "zrender": "6.0.0"
+            }
+        },
         "node_modules/electron-to-chromium": {
             "version": "1.5.267",
             "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.267.tgz",
@@ -3088,6 +3099,12 @@
             "dev": true,
             "license": "Apache-2.0"
         },
+        "node_modules/tslib": {
+            "version": "2.3.0",
+            "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+            "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
+            "license": "0BSD"
+        },
         "node_modules/ufo": {
             "version": "1.6.1",
             "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.6.1.tgz",
@@ -3420,6 +3437,15 @@
             "integrity": "sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==",
             "dev": true,
             "license": "MIT"
+        },
+        "node_modules/zrender": {
+            "version": "6.0.0",
+            "resolved": "https://registry.npmjs.org/zrender/-/zrender-6.0.0.tgz",
+            "integrity": "sha512-41dFXEEXuJpNecuUQq6JlbybmnHaqqpGlbH1yxnA5V9MMP4SbohSVZsJIwz+zdjQXSSlR1Vc34EgH1zxyTDvhg==",
+            "license": "BSD-3-Clause",
+            "dependencies": {
+                "tslib": "2.3.0"
+            }
         }
     }
 }

enlish-vue/package.json

@@ -10,6 +10,7 @@
     },
     "dependencies": {
         "axios": "^1.13.2",
+        "echarts": "^6.0.0",
         "element-plus": "^2.12.0",
         "flowbite": "^1.8.1",
         "nprogress": "^0.2.0",

enlish-vue/src/api/exam.js

@@ -55,6 +55,12 @@ export function generateExamWords(data) {
     });
 }
 
+export function getStudentExamHistory(studentId) {
+    return axios.post('/exam/words/student/history', {
+        studentId: studentId
+    })
+}
+
 const resolveBlob = (res, fileName) => {
     // 创建 Blob 对象，可以指定 type，也可以让浏览器自动推断
     const blob = new Blob([res], { type: 'application/octet-stream' });

enlish-vue/src/layouts/components/student/ExamHistoryChart.vue

@@ -0,0 +1,155 @@
+<template>
+    <div style="width: 100%; height: 260px;">
+        <div ref="elRef" style="width: 100%; height: 100%;"></div>
+    </div>
+    <ExamWordsDetailCard v-model="detailVisible" :id="detailId" />
+</template>
+
+<script setup>
+import { defineProps, ref, onMounted, onUnmounted, watch } from 'vue'
+import ExamWordsDetailCard from '@/layouts/components/ExamWordsDetailCard.vue'
+
+const props = defineProps({
+    data: {
+        type: Array,
+        default: () => []
+    }
+})
+
+const elRef = ref(null)
+let chart = null
+let echartsLib = null
+const detailVisible = ref(false)
+const detailId = ref(null)
+
+function sortData(arr) {
+    return Array.isArray(arr)
+        ? arr.slice().sort((a, b) => new Date(a.startDate).getTime() - new Date(b.startDate).getTime())
+        : []
+}
+
+function toSource(arr) {
+    return sortData(arr).map(it => ({
+        startDate: it.startDate,
+        correctWordCount: Number(it.correctWordCount) || 0,
+        wrongWordCount: Number(it.wrongWordCount) || 0,
+        examWordsId: it.examWordsId ?? null,
+        id: it.id ?? null
+    }))
+}
+
+function buildOption(source) {
+    return {
+        dataset: [
+            {
+                id: 'dataset_history',
+                source: source
+            }
+        ],
+        tooltip: {
+            trigger: 'axis'
+        },
+        legend: {
+            top: 8
+        },
+        xAxis: {
+            type: 'category',
+            nameLocation: 'middle'
+        },
+        yAxis: {
+            name: 'Word Count',
+            min: 0
+        },
+        series: [
+            {
+                type: 'line',
+                datasetId: 'dataset_history',
+                showSymbol: false,
+                name: '正确词数',
+                encode: {
+                    x: 'startDate',
+                    y: 'correctWordCount',
+                    itemName: 'startDate',
+                    tooltip: ['correctWordCount']
+                }
+            },
+            {
+                type: 'line',
+                datasetId: 'dataset_history',
+                showSymbol: false,
+                name: '错误词数',
+                encode: {
+                    x: 'startDate',
+                    y: 'wrongWordCount',
+                    itemName: 'startDate',
+                    tooltip: ['wrongWordCount']
+                }
+            }
+        ]
+    }
+}
+
+function resize() {
+    if (chart) chart.resize()
+}
+
+async function ensureEcharts() {
+    try {
+        const mod = await import('echarts')
+        echartsLib = mod
+    } catch (e) {
+        if (window.echarts) {
+            echartsLib = window.echarts
+        } else {
+            await new Promise(resolve => {
+                const s = document.createElement('script')
+                s.src = 'https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js'
+                s.onload = resolve
+                document.head.appendChild(s)
+            })
+            echartsLib = window.echarts
+        }
+    }
+}
+
+async function render() {
+    if (!elRef.value) return
+    await ensureEcharts()
+    if (!echartsLib) return
+    if (!chart) {
+        chart = echartsLib.init(elRef.value)
+        chart.on('click', handlePointClick)
+        window.addEventListener('resize', resize)
+    }
+    const source = toSource(props.data)
+    const option = buildOption(source)
+    chart.setOption(option)
+}
+
+function handlePointClick(params) {
+    const row = params?.data
+    console.log(row)
+    const id = row?.id ?? null
+    if (id !== null && id !== undefined) {
+        detailId.value = id
+        detailVisible.value = true
+    }
+}
+
+onMounted(() => {
+    render()
+})
+
+onUnmounted(() => {
+    window.removeEventListener('resize', resize)
+    if (chart) {
+        chart.off('click', handlePointClick)
+        chart.dispose()
+        chart = null
+    }
+})
+
+watch(() => props.data, () => {
+    render()
+}, { deep: true })
+</script>

enlish-vue/src/pages/student.vue

@@ -6,19 +6,27 @@
             </el-header>
 
             <el-main class="p-4">
-                <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6" v-loading="loading">
+                <div class="grid grid-cols-1 lg:grid-cols-1 gap-6"
-                    <div class="text-lg font-semibold mb-4">学生详情</div>
+                    v-loading="loading">
-                    <template v-if="detail">
+                    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
-                        <el-descriptions :column="1" border>
+                        <div class="text-lg font-semibold mb-4">学生详情</div>
-                            <el-descriptions-item label="ID">{{ detail.id }}</el-descriptions-item>
+                        <template v-if="detail">
-                            <el-descriptions-item label="姓名">{{ detail.name }}</el-descriptions-item>
+                            <el-descriptions :column="1" border>
-                            <el-descriptions-item label="班级">{{ detail.className }}</el-descriptions-item>
+                                <el-descriptions-item label="ID">{{ detail.id }}</el-descriptions-item>
-                            <el-descriptions-item label="年级">{{ detail.gradeName }}</el-descriptions-item>
+                                <el-descriptions-item label="姓名">{{ detail.name }}</el-descriptions-item>
-                        </el-descriptions>
+                                <el-descriptions-item label="班级">{{ detail.className }}</el-descriptions-item>
-                    </template>
+                                <el-descriptions-item label="年级">{{ detail.gradeName }}</el-descriptions-item>
-                    <template v-else>
+                            </el-descriptions>
-                        <el-empty description="暂无数据" />
+                        </template>
-                    </template>
+                        <template v-else>
+                            <el-empty description="请从班级页跳转" />
+                        </template>
+                    </div>
+
+                    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
+                        <div class="text-md font-semibold mb-3">学生考试记录</div>
+                        <ExamHistoryChart :data="history" />
+                    </div>
                 </div>
             </el-main>
 
@@ -31,10 +39,13 @@ import Header from '@/layouts/components/Header.vue'
 import { ref, onMounted } from 'vue'
 import { useRoute } from 'vue-router'
 import { getStudentDetail } from '@/api/student'
+import { getStudentExamHistory } from '@/api/exam'
+import ExamHistoryChart from '@/layouts/components/student/ExamHistoryChart.vue'
 
 const loading = ref(false)
 const detail = ref(null)
 const route = useRoute()
+const history = ref([])
 
 async function fetchDetail() {
     const id = route.params.id
@@ -49,7 +60,18 @@ async function fetchDetail() {
     }
 }
 
+async function fetchExamHistory() {
+    const id = route.params.id
+    if (!id) return
+    const res = await getStudentExamHistory(id)
+    const d = res.data
+    history.value = Array.isArray(d?.data) ? d.data.slice().sort((a, b) => {
+        return new Date(a.startDate).getTime() - new Date(b.startDate).getTime()
+    }) : []
+}
+
 onMounted(() => {
     fetchDetail()
+    fetchExamHistory()
 })
 </script>