msyj-admin-local/src/modules/grading/components/GradeAnalysis.vue

<template>
  <div class="grade-analysis">
    <div class="part-box">
      <div class="part-box-top">
        <Button type="success" icon="md-download" @click="toExport"
          >导出</Button
        >
      </div>
      <Table
        ref="TableList"
        :columns="columns"
        :data="levelData"
        :span-method="handleSpan"
        disabled-hover
        border
        v-if="levelData.length"
      ></Table>
    </div>
    <div class="part-box">
      <echart-render
        :chart-data="lineChartData"
        chart-type="line"
        chart-title="档位分布图"
        v-if="lineChartData"
      ></echart-render>
    </div>
  </div>
</template>

<script>
import { gradingStatData } from "@/api";
import EchartRender from "@/components/EchartRender";

export default {
  name: "grade-analysis",
  components: { EchartRender },
  props: {
    questionId: {
      type: Number,
      required: true
    },
    subjectId: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      levelData: [],
      lineChartData: null,
      columns: [
        {
          title: "科目",
          key: "subjectName"
        },
        {
          title: "档位",
          key: "code"
        },
        {
          title: "范围",
          render: (h, param) => {
            return h("div", `${param.row.minScore}~${param.row.maxScore}`);
          }
        },
        {
          title: "数量",
          key: "levelCount"
        },
        {
          title: "占比",
          key: "levelProp",
          render: (h, param) => {
            return h("div", `${param.row.levelProp}%`);
          }
        },
        {
          title: "预设占比",
          key: "examLevelProp",
          render: (h, param) => {
            return h("div", `${param.row.examLevelProp}%`);
          }
        },
        {
          title: "差值",
          key: "diffProp",
          render: (h, param) => {
            return h("div", `${param.row.diffProp}%`);
          }
        },
        {
          title: "累计数量",
          key: "cumulateCount"
        },
        {
          title: "累计占比",
          key: "cumulateProp",
          render: (h, param) => {
            return h("div", `${param.row.cumulateProp}%`);
          }
        },
        {
          title: "调整",
          key: "adjustmentCount"
        }
      ]
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    async initData() {
      const subs = this.subjectId.split("-");
      this.levelData = await gradingStatData({
        questionId: this.questionId,
        workId: subs[0],
        subject: subs[1]
      });

      this.lineChartData = this.levelData.map(item => {
        return {
          name: item.code,
          value: item.levelProp
        };
      });
    },
    handleSpan({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0 && columnIndex === 0) {
        return { rowspan: this.levelData.length, colspan: 1 };
      } else if (rowIndex > 0 && columnIndex === 0) {
        return { rowspan: 0, colspan: 0 };
      }
    },
    toExport() {}
  }
};
</script>