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

<template>
  <div class="report-college">
    <report-box title="学院成绩分析">
      <div
        v-if="(chart, cindex) in collegeCharts"
        :key="cindex"
        class="page-chart"
      >
        <v-chart :option="chart"></v-chart>
      </div>
      <table
        v-for="(tgroup, tindex) in collegeTables"
        :key="tindex"
        class="table table-border"
      >
        <tr>
          <th>学院</th>
          <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.name }}</td>
          <td>{{ item.avgScore }}</td>
          <td>{{ item.maxScore }}</td>
          <td>{{ item.minScore }}</td>
          <td>{{ item.passCount }}</td>
          <td>{{ item.passRate }}</td>
          <td>{{ item.excellentCount }}</td>
          <td>{{ item.excellentRate }}</td>
        </tr>
      </table>
    </report-box>
  </div>
</template>

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

export default {
  name: "report-college",
  components: { ReportBox },
  data() {
    return {
      collegeCharts: [],
      collegeTables: [],
    };
  },
  computed: {
    ...mapState("report", ["college"]),
  },
  methods: {
    initData() {
      const college = this.college.map((item) => {
        return {
          ...item,
          name: item.college,
        };
      });
      this.collegeCharts = sectionArr(college, 10).map((data) =>
        getBarsOptions(data)
      );
      this.collegeTables = sectionArr(college, 30);
    },
  },
};
</script>