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

<template>
  <main-layout>
    <Breadcrumb
      style="text-align: left; padding-left: 20px; height: 40px; line-height: 40px;
                       background-color: #fafafa;"
    >
      当前所在位置：
      <BreadcrumbItem :to="{ name: 'OnlinePracticeHome' }">
        在线练习
      </BreadcrumbItem>
      <BreadcrumbItem>练习详情</BreadcrumbItem>
    </Breadcrumb>

    <div class="home">
      <div
        style="display: grid; grid-template-columns: repeat(4, 1fr); margin-bottom: 20px; text-align: left"
      >
        <div>
          批次: <span>{{ examName }}</span>
        </div>
        <div>
          科目: <span>{{ courseName }}</span>
        </div>
        <div>
          平均正确率: <span>{{ aveAccuracy }}%</span>
        </div>
        <div>
          最高正确率: <span>{{ maxAccuracy }}%</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>
              <td>正确</td>
              <td>错误</td>
              <td>未答</td>
              <td>正确率</td>
              <td style="max-width: 200px">操作</td>
            </tr>

            <tr v-for="record in recordList" :key="record.examId">
              <td>{{ record.id }}</td>
              <td>{{ record.startTime }}</td>
              <td>{{ record.endTime }}</td>
              <td>{{ formatTime(record.usedExamTime) }}</td>
              <td>{{ record.totalQuestionCount }}</td>
              <td>{{ record.succQuestionNum }}</td>
              <td>{{ record.failQuestionNum }}</td>
              <td>{{ record.notAnsweredCount }}</td>
              <td>{{ record.objectiveAccuracy }}%</td>
              <td style="min-width: 120px">
                <i-button
                  class="qm-primary-button"
                  @click="() => enterPracticeRecordDetail(record)"
                >
                  查看成绩报告
                </i-button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </main-layout>
</template>

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

export default {
  name: "OnlinePracticeRecordList",
  data() {
    return { recordList: [] };
  },
  async created() {
    try {
      const res = await this.$http.get(
        "/api/ecs_oe_student/practice/queryPracticeRecordList?examStudentId=" +
          this.$route.query.examStudentId
      );
      this.recordList = (res.data || []).reverse();
    } catch (error) {
      this.$Message.error({
        content: "查询练习记录列表出错！",
        duration: 15,
        closable: true
      });
    }
  },
  methods: {
    async enterPracticeRecordDetail(course) {
      this.$router.push(
        `/online-practice/exam/${
          this.$route.params.examId
        }/detail?examRecordDataId=${course.id}`
      );
    },
    formatTime(ms) {
      return (ms && moment.utc(ms).format("HH:mm:ss")) || "";
    }
  },
  computed: {
    examName() {
      return this.$route.query.examName;
    },
    courseName() {
      return this.$route.query.courseName;
    },
    maxAccuracy() {
      if (this.recordList.length === 0) {
        return 0;
      }
      return Math.max(...this.recordList.map(v => v.objectiveAccuracy)).toFixed(
        2
      );
    },
    aveAccuracy() {
      if (this.recordList.length === 0) {
        return 0;
      }
      return (
        this.recordList.map(v => v.objectiveAccuracy).reduce((a, b) => a + b) /
        this.recordList.length
      ).toFixed(2);
    }
  }
};
</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;
}
</style>