feat(student): 添加学习分析功能组件及相关交互
- 在班级页面列表操作栏增加“学情分析”按钮,点击弹出学情分析对话框 - 新增StudyAnalysis组件,封装学习分析生成与展示逻辑 - 学生详情页替换原有学习分析区域,统一使用StudyAnalysis组件 - 移除学生页原有学习分析相关状态管理和接口调用,简化代码 - 通过定时器模拟加载进度条,提升生成学习分析时的用户体验
This commit is contained in:
79
enlish-vue/src/layouts/components/student/StudyAnalysis.vue
Normal file
79
enlish-vue/src/layouts/components/student/StudyAnalysis.vue
Normal file
@@ -0,0 +1,79 @@
|
||||
<template>
|
||||
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<div class="text-md font-semibold">学习分析</div>
|
||||
<el-button type="primary" size="small" :loading="analyzeLoading" @click="fetchStudyAnalyze">
|
||||
生成学习分析
|
||||
</el-button>
|
||||
</div>
|
||||
<template v-if="analyzeLoading">
|
||||
<div class="space-y-2">
|
||||
<el-progress :percentage="analyzeProgress" :stroke-width="10" />
|
||||
<div class="text-sm text-gray-500 dark:text-gray-400">正在生成学习分析,请稍候…</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="analysisHtml">
|
||||
<div class="leading-7 text-gray-700 dark:text-gray-200" v-html="analysisHtml"></div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<el-empty description="点击右上按钮生成学习分析" />
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
import MarkdownIt from 'markdown-it'
|
||||
import { getStudentStudyAnalyze } from '@/api/student'
|
||||
|
||||
const props = defineProps({
|
||||
studentId: {
|
||||
type: [String, Number],
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const analyzeLoading = ref(false)
|
||||
const analyzeProgress = ref(0)
|
||||
let analyzeTimer = null
|
||||
const analysisText = ref('')
|
||||
const md = new MarkdownIt({
|
||||
html: false,
|
||||
linkify: true,
|
||||
breaks: true
|
||||
})
|
||||
const analysisHtml = computed(() => {
|
||||
return analysisText.value ? md.render(analysisText.value) : ''
|
||||
})
|
||||
|
||||
async function fetchStudyAnalyze() {
|
||||
const id = props.studentId
|
||||
if (!id) return
|
||||
analyzeLoading.value = true
|
||||
analyzeProgress.value = 0
|
||||
if (analyzeTimer) {
|
||||
clearInterval(analyzeTimer)
|
||||
analyzeTimer = null
|
||||
}
|
||||
analyzeTimer = setInterval(() => {
|
||||
const inc = Math.floor(Math.random() * 8) + 3
|
||||
const next = analyzeProgress.value + inc
|
||||
analyzeProgress.value = next >= 90 ? 90 : next
|
||||
}, 300)
|
||||
try {
|
||||
const res = await getStudentStudyAnalyze({
|
||||
studentId: Number(id)
|
||||
})
|
||||
const d = res.data
|
||||
const raw = typeof d?.data === 'string' ? d.data : ''
|
||||
analysisText.value = raw.replace(/\\n/g, '\n')
|
||||
} finally {
|
||||
analyzeProgress.value = 100
|
||||
if (analyzeTimer) {
|
||||
clearInterval(analyzeTimer)
|
||||
analyzeTimer = null
|
||||
}
|
||||
analyzeLoading.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -73,8 +73,10 @@
|
||||
</template>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="180" fixed="right">
|
||||
<el-table-column label="操作" width="240" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<!-- 学情分析 -->
|
||||
<el-button type="info" size="small" @click.stop="onShowAnalysis(row)">学情分析</el-button>
|
||||
<el-button type="primary" size="small" @click.stop="onViewStudent(row)">详情</el-button>
|
||||
<el-button type="danger" size="small" @click.stop="onDeleteStudent(row)">删除</el-button>
|
||||
</template>
|
||||
@@ -105,6 +107,9 @@
|
||||
v-model="showPlanListDialog"
|
||||
:student-id="planStudentId"
|
||||
/>
|
||||
<el-dialog v-model="showAnalysisDialog" title="学情分析" width="60%">
|
||||
<StudyAnalysis v-if="showAnalysisDialog" :student-id="analysisStudentId" />
|
||||
</el-dialog>
|
||||
</div>
|
||||
|
||||
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6" v-loading="gradeLoading">
|
||||
@@ -139,6 +144,7 @@ import AddGradeDialog from '@/layouts/components/AddGradeDialog.vue'
|
||||
import AddStudentDialog from '@/layouts/components/AddStudentDialog.vue'
|
||||
import LessonPlanDialog from '@/layouts/components/LessonPlanDialog.vue'
|
||||
import StudentPlanListDialog from '@/layouts/components/StudentPlanListDialog.vue'
|
||||
import StudyAnalysis from '@/layouts/components/student/StudyAnalysis.vue'
|
||||
import { getUnitList, deleteUnit } from '@/api/unit'
|
||||
import AddUnitDialog from '@/layouts/components/AddUnitDialog.vue'
|
||||
import { useRouter, onBeforeRouteLeave } from 'vue-router'
|
||||
@@ -180,6 +186,8 @@ const generatingPercents = ref({})
|
||||
const pollingTimers = {}
|
||||
const showPlanListDialog = ref(false)
|
||||
const planStudentId = ref(null)
|
||||
const showAnalysisDialog = ref(false)
|
||||
const analysisStudentId = ref(null)
|
||||
|
||||
const units = ref([])
|
||||
const unitPageNo = ref(1)
|
||||
@@ -275,6 +283,10 @@ function onStudentSelectionChange(rows) {
|
||||
function onViewStudent(row) {
|
||||
router.push(`/student/${row.id}`)
|
||||
}
|
||||
function onShowAnalysis(row) {
|
||||
analysisStudentId.value = row.id
|
||||
showAnalysisDialog.value = true
|
||||
}
|
||||
function onClassRowClick(row) {
|
||||
selectedClassId.value = row.id
|
||||
selectedClassTitle.value = row.title
|
||||
|
||||
@@ -49,26 +49,7 @@
|
||||
<div class="text-md font-semibold mb-3">词汇掌握热力图</div>
|
||||
<WordMasteryHeatmap :student-id="route.params.id" :columns="50" />
|
||||
</div>
|
||||
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<div class="text-md font-semibold">学习分析</div>
|
||||
<el-button type="primary" size="small" :loading="analyzeLoading" @click="fetchStudyAnalyze">
|
||||
生成学习分析
|
||||
</el-button>
|
||||
</div>
|
||||
<template v-if="analyzeLoading">
|
||||
<div class="space-y-2">
|
||||
<el-progress :percentage="analyzeProgress" :stroke-width="10" />
|
||||
<div class="text-sm text-gray-500 dark:text-gray-400">正在生成学习分析,请稍候…</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="analysisHtml">
|
||||
<div class="leading-7 text-gray-700 dark:text-gray-200" v-html="analysisHtml"></div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<el-empty description="点击右上按钮生成学习分析" />
|
||||
</template>
|
||||
</div>
|
||||
<StudyAnalysis :student-id="route.params.id" />
|
||||
</div>
|
||||
</el-main>
|
||||
|
||||
@@ -80,31 +61,19 @@
|
||||
import Header from '@/layouts/components/Header.vue'
|
||||
import { ref, onMounted, computed } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { getStudentDetail, getStudentStudyAnalyze } from '@/api/student'
|
||||
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 MarkdownIt from 'markdown-it'
|
||||
import StudyAnalysis from '@/layouts/components/student/StudyAnalysis.vue'
|
||||
|
||||
const loading = ref(false)
|
||||
const detail = ref(null)
|
||||
const route = useRoute()
|
||||
const history = ref([])
|
||||
const analyzeLoading = ref(false)
|
||||
const analyzeProgress = ref(0)
|
||||
let analyzeTimer = null
|
||||
const analysisText = ref('')
|
||||
const wordStat = ref(null)
|
||||
const md = new MarkdownIt({
|
||||
html: false,
|
||||
linkify: true,
|
||||
breaks: true
|
||||
})
|
||||
const analysisHtml = computed(() => {
|
||||
return analysisText.value ? md.render(analysisText.value) : ''
|
||||
})
|
||||
|
||||
async function fetchDetail() {
|
||||
const id = route.params.id
|
||||
@@ -129,37 +98,6 @@ async function fetchExamHistory() {
|
||||
}) : []
|
||||
}
|
||||
|
||||
async function fetchStudyAnalyze() {
|
||||
const id = route.params.id
|
||||
if (!id) return
|
||||
analyzeLoading.value = true
|
||||
analyzeProgress.value = 0
|
||||
if (analyzeTimer) {
|
||||
clearInterval(analyzeTimer)
|
||||
analyzeTimer = null
|
||||
}
|
||||
analyzeTimer = setInterval(() => {
|
||||
const inc = Math.floor(Math.random() * 8) + 3
|
||||
const next = analyzeProgress.value + inc
|
||||
analyzeProgress.value = next >= 90 ? 90 : next
|
||||
}, 300)
|
||||
try {
|
||||
const res = await getStudentStudyAnalyze({
|
||||
studentId: Number(id)
|
||||
})
|
||||
const d = res.data
|
||||
const raw = typeof d?.data === 'string' ? d.data : ''
|
||||
analysisText.value = raw.replace(/\\n/g, '\n')
|
||||
} finally {
|
||||
analyzeProgress.value = 100
|
||||
if (analyzeTimer) {
|
||||
clearInterval(analyzeTimer)
|
||||
analyzeTimer = null
|
||||
}
|
||||
analyzeLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchWordStat() {
|
||||
const id = route.params.id
|
||||
if (!id) return
|
||||
|
||||
Reference in New Issue
Block a user