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"><span class="click-b" @click="toPortrait(scoped.row)">
              {{ scoped.row.studentName }}
            </span></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' : ''"></el-table-column>
          <el-table-column :prop="'classRank' + index" label="班名" align="center" sortable
            :class-name="index % 2 == 0 ? 'bg' : ''"></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 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,
    classId: String,
    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("print-content", this.subjectName + '汇总报表');
    },
    toPortrait(obj) {
      //暂时不上线
      return;
      if (this.$store.getters.code) {
        return;
      }
      let subjectNames = [];
      subjectNames =
        this.role == "ROLE_BANZHUREN"
          ? [...this.query["subjectNames"]]
          : [this.query["subjectNames"]];
      if (
        this.query["subjectNames"] &&
        this.query["subjectNames"]?.length == 1 &&
        this.query["subjectNames"][0] == "全部"
      ) {
        subjectNames = this.subjectList.map((item) => {
          return item.value;
        });
        subjectNames?.shift();
      }
      //去学生画像
      this.$router.push({
        path: "/portraitDetail",
        query: {
          id: obj.studentId,
          classId: this.query.classId,
          subjectNames: subjectNames.join(","),
          studentName: obj.studentName,
          studentCode: obj.studentCode,
          startDay: this.query.startDay,
          endDay: this.query.endDay,
          date: this.date,
        },
      });
    },
    //查看折线图
    openChart(obj) {
      this.studentName = obj.studentName
      this.chartDia = true
      let score = []
      let classRank = []
      let avgScore = []
      this.xAxis = obj.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({
        classId: this.classId,
        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] = 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.length == this.exportStudent.length) {
        query.studentIds = []
      } else if (studentIds.length > 0) {
        query.studentIds = studentIds
      }
      const exportPhaseExamReport = this.role == "ROLE_PERSONAL"
        ? this.$request.pExportPhaseExamReport
        : this.$request.exportPhaseExamReport;
      const data = await exportPhaseExamReport({
        classId: this.classId,
        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.error("下载成功");
        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>