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

<template>
  <div class="report-question">
    <report-box :title="title">
      <div
        v-if="(chart, cindex) in questionCharts"
        :key="cindex"
        class="page-chart"
      >
        <v-chart :option="chart"></v-chart>
      </div>
      <table
        v-for="(tgroup, tindex) in questionTables"
        :key="tindex"
        class="table table-border"
      >
        <tr>
          <th>题目名称</th>
          <th>大题号</th>
          <th>小题号</th>
          <th>单题分数</th>
          <th>单题平均分</th>
          <th>得分率(%)</th>
          <th>满分率(%)</th>
        </tr>
        <tr v-for="(item, ind) in tgroup" :key="ind">
          <td>{{ item.title }}</td>
          <td>{{ item.mainNumber }}</td>
          <td>{{ item.subNumber }}</td>
          <td>{{ item.score }}</td>
          <td>{{ item.avgScore }}</td>
          <td>{{ item.socreRate }}</td>
          <td>{{ item.fullScoreRate }}</td>
        </tr>
      </table>
    </report-box>
  </div>
</template>

<script>
import { mapState } from "vuex";
import ReportBox from "./ReportBox.vue";
import { sectionArr } from "./utils";
import { getBarPointTopicOptions } from "./chart";

export default {
  name: "report-question",
  components: { ReportBox },
  props: {
    type: String,
  },
  data() {
    return {
      questionCharts: [],
      questionTables: [],
    };
  },
  computed: {
    ...mapState("report", ["objective", "subjective"]),
    typeName() {
      return this.type === "subjective" ? "主观题" : "客观题";
    },
    title() {
      return `${this.typeName}成绩分析`;
    },
  },
  methods: {
    initData() {
      const question =
        this.type === "subjective" ? this.subjective : this.objective;
      this.questionCharts = sectionArr(question, 26).map((data) =>
        getBarPointTopicOptions(data)
      );
      this.questionTables = sectionArr(question, 32);
    },
  },
};
</script>