dianshang-qianduan/src/views/test-report/index.vue

<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>