src/views/basic/test/components/multipleTest.vue

<template>
  <div class="table-box" ref="main" v-loading="loading">
    <div id="print-content">
      <el-table :max-height="tableMaxHeight" :data="tableData" border style="width: 100%">
        <el-table-column prop="studentCode" label="学号" align="center" fixed></el-table-column>
        <el-table-column prop="studentName" label="姓名" fixed align="center">
          <template slot-scope="scoped">
            {{ scoped.row.studentName }}
          </template></el-table-column>
        <el-table-column align="center" v-for="(item, index) in answerList" :key="index" :label="item.title">
          <el-table-column :prop="'score' + index" :label="index == 0 ? '总分' : '成绩'" align="center"
            :class-name="index % 2 == 0 ? 'bg' : ''">
            <template slot-scope="scoped">{{
    scoped.row["score" + index] ||
      Number(scoped.row["score" + index]) === 0
      ? scoped.row["score" + index]
      : "-"
  }}</template>
          </el-table-column>
          <el-table-column :prop="'classRank' + index" label="班名" align="center" sortable
            :class-name="index % 2 == 0 ? 'bg' : ''">
            <template slot-scope="scoped">{{
    scoped.row["classRank" + index] ||
      Number(scoped.row["classRank" + index]) === 0
      ? scoped.row["classRank" + index]
      : "-"
  }}</template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="查看折线图" align="center">
          <template slot-scope="scoped">
            <el-button @click="openChart(scoped.row)" type="primary" size="mini" circle
              icon="el-icon-arrow-right"></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="down">
      <el-button @click="openDown" type="primary" plain round icon="fa fa-cloud-download">导出报表</el-button>
      <el-button v-if="!this.$store.getters.code" @click="print" type="primary" plain round
        icon="el-icon-printer">打印</el-button>
    </div>
    <el-dialog :append-to-body="true" class="chart-dia" :visible.sync="chartDia" :title="chartTitle" width="800">
      <div class="chart-box">
        <LineChart id="lineChart" :params="chartData" :xAxis="xAxis" :formatterYAxis="false" />
      </div>
    </el-dialog>
    <ExportDia :exportStudent="exportStudent" :diaShow="diaShow" @cancel="cancel" @exportData="exportData"
      lastLabel="总分" />
  </div>
  <!-- 单科多卷 -->
</template>
<script>
import LineChart from "@/components/charts/lineChart";
import { downloadFile, tablePrint } from "@/utils";
export default {
  components: { LineChart },
  props: {
    role: "",
    ids: Array,
    classIds: Array,
    subjectName: String,
  },
  data() {
    return {
      tableMaxHeight: null,
      answerList: [], //设置多卷内容供tableStage表格数据用
      tableData: [],
      loading: false,
      exportLoading: false,
      chartDia: false,
      studentName: "",
      xAxis: [],
      chartData: [],
      //导出相关
      diaShow: false,
      exportStudent: [],
    };
  },
  computed: {
    chartTitle: function () {
      return `${this.studentName}-${this.subjectName}-多课时作答表现图`;
    },
  },
  created() {
    this.phaseExamReport();
  },
  mounted() {
    this.tableMaxHeight = this.$refs.main.offsetHeight;
  },
  methods: {
    print() {
      tablePrint({
        id: "print-content",
        title: this.subjectName + "汇总报表"
      }) 
    },
    //查看折线图
    openChart(obj) {
      this.studentName = obj.studentName;
      this.chartDia = true;
      let score = [];
      let classRank = [];
      let avgScore = [];
      const examList = obj.examList.slice(1, obj.examList.length);
      this.xAxis = examList.map((item) => {
        score.push(item.score);
        classRank.push(item.classRank);
        avgScore.push(item.avgScore);
        return item.title;
      });
      this.chartData = [
        {
          name: "班级排名",
          value: classRank,
        },
        {
          name: "班平均分",
          value: avgScore,
        },
        {
          name: "个人成绩",
          value: score,
        },
      ];
    },
    async phaseExamReport() {
      this.loading = true;
      const phaseExamReport =
        this.role == "ROLE_PERSONAL"
          ? this.$request.pPhaseExamReport
          : this.$request.phaseExamReport;
      const { data, status, info } = await phaseExamReport({
        classIds: this.classIds,
        examIds: this.ids,
        subjectName: this.subjectName,
      });
      this.loading = false;
      if (status === 0) {
        this.total = data.count;
        let dataIdsList = [],
          dataList = [];
        data?.list.map((item) => {
          item.examList.map((items) => {
            if (!dataIdsList.includes(items.title)) {
              dataIdsList.push(items.title);
              dataList.push(items);
            }
          });
        });
        this.tableData = data?.list.map((item) => {
          let params = {};
          dataIdsList.map((ids, index) => {
            params["score" + index] = "--";
            params["classRank" + index] = "--";
            item.examList.map((items) => {
              if (items.title == ids) {
                params["score" + index] = Number(items.score);
                params["classRank" + index] = items.classRank;
              }
            });
          });
          return {
            ...item,
            ...params,
          };
        });
        this.answerList = dataList;
        this.exportStudent = [...this.tableData];
      } else {
        this.$message.error(info);
      }
    },
    //导出
    openDown() {
      this.diaShow = true;
    },
    cancel() {
      this.diaShow = false;
    },
    async exportData(arr) {
      if (this.exportLoading == true) return;
      this.exportLoading = true;
      let studentIds = arr;
      let query = {};
      if (studentIds != null) {
        if (studentIds.length > 0) {
          query.studentIds = studentIds;
        } else {
          query.studentIds = [];
        }
      }
      const exportPhaseExamReport =
        this.role == "ROLE_PERSONAL"
          ? this.$request.pExportPhaseExamReport
          : this.$request.exportPhaseExamReport;
      const data = await exportPhaseExamReport({
        classIds: this.classIds,
        examIds: this.ids,
        ...query,
      });
      this.exportLoading = false;
      if (data) {
        let blob = new Blob([data], {
          type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
        });
        downloadFile("即时测-单科多卷报表.xlsx", blob);
        this.$message.success("下载成功");
        this.cancel();
      } else {
        this.$message.error("下载失败");
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.table-box {
  padding: 20px;
}
.down {
  padding-top: 20px;
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.chart-dia {
  .chart-box {
    width: 100%;
    height: 300px;
  }
  :deep(.el-dialog__body) {
    padding: 0 0 20px 0;
  }
}
</style>