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 = [];
      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({
        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] = 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({
        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.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>