student-client/src/features/OnlinePractice/OnlinePracticeRecordDetail.vue

<template>
  <main-layout>
    <Breadcrumb style="text-align: left; padding-left: 20px; height: 40px; line-height: 40px; background-color: #fafafa;">
      当前所在位置：
      <BreadcrumbItem>在线练习</BreadcrumbItem>
      <BreadcrumbItem>练习详情</BreadcrumbItem>
      <BreadcrumbItem>成绩报告</BreadcrumbItem>
    </Breadcrumb>

    <div class="home">
      <div class="qm-title-text">练习情况概率(科目：{{examRecordResult.courseName}})</div>

      <div style="display: grid; grid-template-columns: repeat(4, 1fr); margin-bottom: 20px; text-align: left">
        <div>答题正确率: <span>{{examRecordResult.objectiveAccuracy}}%</span></div>
      </div>

      <div class="list">
        <table>
          <tbody class="list-row">
            <tr class="list-header qm-primary-strong-text">
              <td>题目分类</td>
              <td>题量</td>
              <td>正确</td>
              <td>错误</td>
              <td>未答</td>
            </tr>

            <tr v-for="record in examRecordResult.paperStructInfos" :key="record.index">
              <td>{{ record.title }}</td>
              <td>{{ record.questionCount }}</td>
              <td>{{ record.succQuestionNum }}</td>
              <td>{{ record.failQuestionNum }}</td>
              <td>{{ record.notAnsweredCount }}</td>
            </tr>
          </tbody>
        </table>

        <div class="info-text">
          <h4 class="font-thin text-primary-lt m-t">报告提示:</h4>
          <div class="scroll-y wrapper-sm" style="min-height: 80px;">
            <p class="m-b-sm">1、若本练习卷中包含部分主观题型，则报告统计数据仅供参考，因为部分题型需考生根据参考答案判断正确和错误，报告仅对可统计的题型进行统计。</p>
            <p class="m-b-sm">2、若单题存在多处作答，只要有一处出错，该题就判为错题。</p>
          </div>
        </div>
      </div>
    </div>

    <ExamPaper :examId="examId" :examRecordDataId="examRecordDataId" />
  </main-layout>
</template>

<script>
// import { createNamespacedHelpers } from "vuex";
import moment from "moment";
// import { mapState as globalMapState } from "vuex";
// const { mapMutations } = createNamespacedHelpers("examHomeModule");
import ExamPaper from "../OnlineExam/Examing/ExamPaper.vue";

export default {
  name: "OnlinePracticeRecordDetail",
  data() {
    return { examRecordResult: [] };
  },
  async created() {
    try {
      const res = await this.$http.get(
        "/api/ecs_oe_student/practice/getPracticeDetailInfo?examRecordDataId=" +
          this.$route.query.examRecordDataId
      );
      this.examRecordResult = res.data || [];
    } catch (error) {
      this.$Message.error("查询练习试卷详情出错！");
    }
  },
  methods: {
    async enterPracticeRecord(course) {
      this.$router.push(
        `/online-practice/exam/${course.examId}/detail?examStudentId=${
          course.examStudentId
        }`
      );
    },
    formatTime(ms) {
      return moment.utc(ms).format("HH:mm:ss") || "";
    }
  },
  computed: {
    examRecordDataId() {
      return this.$route.query.examRecordDataId - 0;
    },
    examId() {
      return this.$route.params.examId - 0;
    }
  },
  components: {
    ExamPaper
  }
};
</script>

<style scoped>
.home {
  margin: 20px;
}

.list {
  border: 1px solid #eeeeee;
  border-radius: 6px;
}

.list table {
  width: 100%;
  border-collapse: collapse !important;
  border-spacing: 0;
}
.list td {
  border: 1px solid #eeeeee;
  border-radius: 6px;
  border-collapse: separate !important;
  padding: 10px;
}

.list .info-text {
  text-align: left;
  padding: 5px;
}
</style>