|
|
<template>
|
|
|
<div class="test-report app-container">
|
|
|
<span class="report-eyebrow">EXPERIMENT REPORT · 成绩中心</span>
|
|
|
<h2 class="report-title">实验报告</h2>
|
|
|
<el-row class="student-info"><el-col :span="6">姓名：{{ userInfo.name }}</el-col><el-col :span="6">学号：{{ userInfo.username }}</el-col><el-col :span="8">班级：{{ report.teachingClassName || userInfo.className }}</el-col></el-row>
|
|
|
<el-card><template #header><span>实训总成绩：<b class="score-value">{{ report.totalScore || 0 }} 分</b></span><span class="rank">班级排名：{{ report.rank || '-' }}</span></template>
|
|
|
<el-table :data="report.modules || []" border><el-table-column prop="moduleName" label="实训模块"/><el-table-column label="权重"><template #default="{row}">{{ percent(row.weight) }}</template></el-table-column><el-table-column prop="score" label="模块成绩"/><el-table-column label="任务完成"><template #default="{row}">{{ row.completedTaskCount }} / {{ row.totalTaskCount }}</template></el-table-column></el-table>
|
|
|
</el-card>
|
|
|
<el-card class="tasks"><template #header>实训任务明细</template>
|
|
|
<el-table :data="report.tasks || []" border><el-table-column prop="taskName" label="任务名称"/><el-table-column prop="moduleName" label="所属模块"/><el-table-column label="完成状态"><template #default="{row}">{{ progressStatusLabel(row.progressStatus) }}</template></el-table-column><el-table-column prop="aiAssessmentScore" label="AI 评分"><template #default="{row}">{{ row.aiAssessmentScore ?? '-' }}</template></el-table-column></el-table>
|
|
|
</el-card>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script setup>
|
|
|
import { getCurrentExperimentReport } from '@/api/index';
|
|
|
import useUserStore from '@/store/modules/user';
|
|
|
const userInfo=useUserStore().userInfo; const report=ref({modules:[],tasks:[]});
|
|
|
const percent=(weight)=>weight==null?'-':`${Number(weight)*100}%`;
|
|
|
const progressStatusLabel=(status)=>({ NOT_STARTED:'未开始', IN_PROGRESS:'进行中', COMPLETED:'已完成' })[status]||'未开始';
|
|
|
onMounted(async()=>{const res=await getCurrentExperimentReport(); report.value=res?.data||{modules:[],tasks:[]};});
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
/* 墨黑极简：纯白画布、墨黑标题、白卡片、纯白表格 */
|
|
|
.report-eyebrow {
|
|
|
display: block;
|
|
|
margin-bottom: 6px;
|
|
|
color: #2563eb;
|
|
|
font-size: 11px;
|
|
|
font-weight: 700;
|
|
|
letter-spacing: 0.12em;
|
|
|
}
|
|
|
|
|
|
.report-title {
|
|
|
margin: 0;
|
|
|
color: #1f2937;
|
|
|
font-size: 17px;
|
|
|
font-weight: 700;
|
|
|
line-height: 1.35;
|
|
|
text-shadow: none;
|
|
|
}
|
|
|
|
|
|
.student-info {
|
|
|
margin: 14px 0 18px;
|
|
|
color: #6b7280;
|
|
|
font-size: 13px;
|
|
|
line-height: 1.55;
|
|
|
}
|
|
|
|
|
|
.test-report :deep(.el-card) {
|
|
|
border: 1px solid #e5e7eb;
|
|
|
border-radius: 14px;
|
|
|
box-shadow: none;
|
|
|
}
|
|
|
|
|
|
.test-report :deep(.el-card__header) {
|
|
|
padding: 13px 18px;
|
|
|
border-bottom: 1px solid #e5e7eb;
|
|
|
color: #1f2937;
|
|
|
font-size: 14px;
|
|
|
font-weight: 700;
|
|
|
line-height: 1.4;
|
|
|
}
|
|
|
|
|
|
.test-report :deep(.el-card__body) {
|
|
|
padding: 16px 18px;
|
|
|
}
|
|
|
|
|
|
.score-value {
|
|
|
color: #1d4ed8;
|
|
|
font-family: "PingFang SC", "SF Mono", Consolas, monospace;
|
|
|
font-variant-numeric: tabular-nums;
|
|
|
font-weight: 700;
|
|
|
}
|
|
|
|
|
|
.rank {
|
|
|
margin-left: 24px;
|
|
|
color: #6b7280;
|
|
|
font-size: 13px;
|
|
|
font-weight: 400;
|
|
|
}
|
|
|
|
|
|
.tasks {
|
|
|
margin-top: 16px;
|
|
|
}
|
|
|
|
|
|
.test-report :deep(.el-table) {
|
|
|
--el-table-border-color: #e5e7eb;
|
|
|
--el-table-header-bg-color: #ffffff;
|
|
|
--el-table-header-text-color: #1f2937;
|
|
|
--el-table-row-hover-bg-color: #f9fafb;
|
|
|
--el-table-bg-color: #ffffff;
|
|
|
--el-table-tr-bg-color: #ffffff;
|
|
|
--el-table-text-color: #374151;
|
|
|
font-size: 13px;
|
|
|
}
|
|
|
|
|
|
.test-report :deep(.el-table th.el-table__cell) {
|
|
|
font-weight: 700;
|
|
|
}
|
|
|
|
|
|
@media (max-width: 900px) {
|
|
|
.test-report :deep(.student-info .el-col) {
|
|
|
flex: 0 0 100%;
|
|
|
max-width: 100%;
|
|
|
margin-bottom: 4px;
|
|
|
}
|
|
|
}
|
|
|
</style>
|
|
|
|
|
|
<style lang="scss">
|
|
|
</style>
|