teachcloud-print-web/src/modules/mark/components/report/ReportSummary.vue

<template>
  <div class="report-summary">
    <report-box title="总览">
      <h1 class="report-title">
        {{ baseinfo.semesterName }}{{ baseinfo.examName }}
      </h1>
      <h1 class="report-sub-title">{{ baseinfo.courseName }} | 成绩报告</h1>
      <h2 class="page-title-2 mb-15">考试概况</h2>
      <table class="report-table report-table-border mb-15">
        <tr>
          <th>总考生数</th>
          <th>实考</th>
          <th>缺考</th>
          <th>违纪</th>
          <th>平均分</th>
          <th>最高分</th>
          <th>最低分</th>
          <th>及格人数</th>
          <th>及格率(%)</th>
          <th>优秀人数</th>
          <th>优秀率(%)</th>
        </tr>
        <tr>
          <td>{{ overview.studentCount }}</td>
          <td>{{ overview.actualCount }}</td>
          <td>{{ overview.absentCount }}</td>
          <td>{{ overview.breachCount }}</td>
          <td>{{ overview.avgScore }}</td>
          <td>{{ overview.maxScore }}</td>
          <td>{{ overview.minScore }}</td>
          <td>{{ overview.passCount }}</td>
          <td>{{ overview.passRate }}</td>
          <td>{{ overview.excellentCount }}</td>
          <td>{{ overview.excellentRate }}</td>
        </tr>
      </table>
      <h2 class="page-title-2 mb-15">成绩分数段分析</h2>
      <div class="summary-chart mb-15">
        <v-chart
          v-if="scoreRangeChart"
          :option="scoreRangeChart"
          :init-options="initOption"
        ></v-chart>
      </div>
      <p>说明：10-分数段表示10-20分，包含10分，不包含20分</p>
      <table class="report-table report-table-border">
        <tr>
          <th>分数段</th>
          <th>分数段人数</th>
          <th>占比(%)</th>
        </tr>
        <tr v-for="(item, ind) in scoreRange" :key="ind">
          <td>{{ item.minScore }}-</td>
          <td>{{ item.studentCount }}</td>
          <td>{{ item.rate }}</td>
        </tr>
      </table>
    </report-box>
  </div>
</template>

<script>
import { mapState } from "vuex";
import ReportBox from "./ReportBox.vue";
import { getScoreBarOptions, initOption } from "./chart";

export default {
  name: "report-summary",
  components: { ReportBox },
  data() {
    return {
      scoreRangeChart: null,
      initOption,
    };
  },
  computed: {
    ...mapState("report", ["overview", "scoreRange", "baseinfo"]),
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      this.scoreRangeChart = getScoreBarOptions(this.scoreRange);
    },
  },
};
</script>