lbw
fe7128dd4e
- 在admid页面和class页面包裹el-container，插入Sidebar侧边栏组件 - 在LearningPlan和PlanTTS页面同样新增侧边栏布局 - 重构Header组件样式，采用fluent风格透明卡片和按钮样式 - 增加main.css中panel-shell的样式定义以支持新布局视觉效果 - 优化部分按钮及菜单交互样式，提升整体一致性与视觉体验
124 lines
5.4 KiB
Vue
124 lines
5.4 KiB
Vue
<template>
|
|
<div class="common-layout">
|
|
<el-container>
|
|
<el-header>
|
|
<Header></Header>
|
|
</el-header>
|
|
|
|
<el-container>
|
|
<el-aside width="200px" class="pt-4">
|
|
<Sidebar />
|
|
</el-aside>
|
|
<el-main class="p-4">
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6" v-loading="loading">
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
|
|
<div class="text-lg font-semibold mb-4">学生详情</div>
|
|
<template v-if="detail">
|
|
<el-descriptions :column="1" border>
|
|
<el-descriptions-item label="ID">{{ detail.id }}</el-descriptions-item>
|
|
<el-descriptions-item label="姓名">{{ detail.name }}</el-descriptions-item>
|
|
<el-descriptions-item label="班级">{{ detail.className }}</el-descriptions-item>
|
|
<el-descriptions-item label="年级">{{ detail.gradeName }}</el-descriptions-item>
|
|
<el-descriptions-item label="学生实际水平年级">{{ detail.actualGrade
|
|
}}</el-descriptions-item>
|
|
</el-descriptions>
|
|
</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-lg font-semibold mb-4">学生词汇统计</div>
|
|
<template v-if="wordStat">
|
|
<el-descriptions :column="1" border>
|
|
<el-descriptions-item label="已掌握">{{ wordStat.masteredWordCount
|
|
}}</el-descriptions-item>
|
|
<el-descriptions-item label="未掌握">{{ wordStat.unmasteredWordCount
|
|
}}</el-descriptions-item>
|
|
<el-descriptions-item label="待复习">{{ wordStat.pendingReviewWordCount
|
|
}}</el-descriptions-item>
|
|
</el-descriptions>
|
|
</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 class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
|
|
<div class="text-md font-semibold mb-3">学生学案记录</div>
|
|
<PlanHistoryChart :student-id="route.params.id" />
|
|
</div>
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
|
|
<div class="text-md font-semibold mb-3">词汇掌握热力图</div>
|
|
<WordMasteryHeatmap :student-id="route.params.id" :columns="50" />
|
|
</div>
|
|
<StudyAnalysis :student-id="route.params.id" />
|
|
</div>
|
|
</el-main>
|
|
</el-container>
|
|
</el-container>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import Header from '@/layouts/components/Header.vue'
|
|
import { ref, onMounted, computed } from 'vue'
|
|
import { useRoute } from 'vue-router'
|
|
import { getStudentDetail } from '@/api/student'
|
|
import { getStudentExamHistory } from '@/api/exam'
|
|
import { getWordStudentDetail } from '@/api/words'
|
|
import ExamHistoryChart from '@/layouts/components/student/ExamHistoryChart.vue'
|
|
import PlanHistoryChart from '@/layouts/components/student/PlanHistoryChart.vue'
|
|
import WordMasteryHeatmap from '@/layouts/components/student/WordMasteryHeatmap.vue'
|
|
import StudyAnalysis from '@/layouts/components/student/StudyAnalysis.vue'
|
|
import Sidebar from '@/layouts/components/Sidebar.vue'
|
|
|
|
const loading = ref(false)
|
|
const detail = ref(null)
|
|
const route = useRoute()
|
|
const history = ref([])
|
|
const wordStat = ref(null)
|
|
|
|
async function fetchDetail() {
|
|
const id = route.params.id
|
|
if (!id) return
|
|
loading.value = true
|
|
try {
|
|
const res = await getStudentDetail(id)
|
|
const d = res.data
|
|
detail.value = d?.data || null
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
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()
|
|
}) : []
|
|
}
|
|
|
|
async function fetchWordStat() {
|
|
const id = route.params.id
|
|
if (!id) return
|
|
const res = await getWordStudentDetail(Number(id))
|
|
const d = res.data
|
|
wordStat.value = d?.data || null
|
|
}
|
|
|
|
onMounted(() => {
|
|
fetchDetail()
|
|
fetchExamHistory()
|
|
fetchWordStat()
|
|
})
|
|
</script>
|