baoman / Ezquiz_Platform

  <template>

    <div ref="main" class="page-container">

      <back-box>
        <template slot="title">
          <span>即时测-数据报表</span>
        </template>

        <template slot="btns">

          <el-tooltip v-if="!code && gdClass" effect="dark" content="已归档试卷" placement="bottom">
            <el-button type="primary" icon="fa fa-archive" size="mini" plain circle @click="toArchiving"></el-button>

          </el-tooltip>

        </template>

      </back-box>
      <div class="answer-header">
        <div class="sel-box">

          <el-select class="sel" v-model="query.classIds" placeholder="选择班级" @change="changeclass" multiple collapse-tags>

            <p class="select-all">

              <el-checkbox v-model="classAll" @change="selectAll">全选</el-checkbox>

            </p>

            <el-option :disabled="query.classIds.length == 1 && query.classIds[0] == item.value
              " v-for="item in classList" :key="item.value" :label="item.label" :value="item.value">

            </el-option>
          </el-select>

          <el-select v-if="role == 'ROLE_BANZHUREN'" class="sel sel2" multiple v-model="query.subjectNames"
            placeholder="选择科目" @change="changeSub">
            <el-option v-for="item in subjectList" :key="item.value" :label="item.label" :value="item.value">

            </el-option>
          </el-select>

          <el-select v-else class="sel sel2" v-model="query.subjectNames" placeholder="选择科目">
            <el-option v-for="item in subjectList" :key="item.value" :label="item.label" :value="item.value">

            </el-option>
          </el-select>
          <div class="d1">

            <el-date-picker v-model="query.startDay" type="date" @change="handleChangeTimeStart" placeholder="选择日期时间"
              value-format="yyyy-MM-dd">

            </el-date-picker>
            ~

            <el-date-picker v-model="query.endDay" type="date" placeholder="选择日期时间" @change="handleChangeTimeEnd"
              value-format="yyyy-MM-dd">

            </el-date-picker>
          </div>
          <p class="p1">

            <span @click="setDate(1)" :class="[date == 1 ? 'active' : '', 's1']">今天</span>
            <span @click="setDate(2)" :class="[date == 2 ? 'active' : '', 's1']">本周</span>
            <span @click="setDate(3)" :class="[date == 3 ? 'active' : '', 's1']">本月</span>
            <span @click="setDate(4)" :class="[date == 4 ? 'active' : '', 's1']">本季度</span>

          </p>
          <el-button type="primary" round @click="_QueryData()">筛选</el-button>
        </div>
      </div>

      <div v-show="query.classIds.length == 1" class="table-box">

        <el-radio-group v-if="query.startDay != query.endDay" v-model="tabIndex" @change="changeTab"
          style="margin-bottom: 20px">

          <template v-for="(item, index) in tabList">

            <el-radio-button :label="index + 1">{{ item }}</el-radio-button>

          </template>

        </el-radio-group>

        <div class="head-box" v-else>
          <div class="tit">
            <p class="txt">已考试卷信息</p>
          </div>
        </div>

        <div v-show="tabIndex == 1" v-loading="loading">

          <el-table :data="tableData" border style="width: 100%">

            <el-table-column prop="subjectName" label="科目" align="center" width="100"></el-table-column>
            <el-table-column prop="title" label="试卷名称" align="center"></el-table-column>
            <el-table-column prop="className" label="考试班级" align="center" width="100"></el-table-column>
            <el-table-column prop="examPaperScore" label="卷面分" align="center" width="68"></el-table-column>
            <el-table-column width="80" prop="answeredNum" label="测验人数" align="center"><template slot-scope="scoped">{{
              `${scoped.row.answeredNum}/${scoped.row.classPersonNum}`
            }}</template></el-table-column>
            <el-table-column prop="examStartTime" label="测验开始时间" width="160" align="center"></el-table-column>
            <el-table-column prop="examEndTime" label="测验结束时间" width="160" align="center"></el-table-column>

            <!-- 添加对比删除 -->
            <!-- <el-table-column prop="avgScore" label="班平均分" align="center"

              ><template slot-scope="scoped">{{

                (scoped.row.subjectiveScore == scoped.row.examPaperScore ||
                  scoped.row.answerNum == 0) &&

                scoped.row.recordStatus == 0

                  ? "-"

                  : scoped.row.avgScore
              }}</template></el-table-column
            >
            <el-table-column prop="highestScore" label="班最高分" align="center"
              ><template slot-scope="scoped">{{

                (scoped.row.subjectiveScore == scoped.row.examPaperScore ||
                  scoped.row.answerNum == 0) &&

                scoped.row.recordStatus == 0

                  ? "-"

                  : scoped.row.highestScore
              }}</template></el-table-column
            >
            <el-table-column prop="lowestScore" label="班最低分" align="center"
              ><template slot-scope="scoped">{{

                (scoped.row.subjectiveScore == scoped.row.examPaperScore ||
                  scoped.row.answerNum == 0) &&

                scoped.row.recordStatus == 0

                  ? "-"

                  : scoped.row.lowestScore
              }}</template></el-table-column
            >

            <el-table-column

              prop="excellenRate"

              label="优秀数(率)"

              sortable
              align="center"

              width="110"
              class-name="p0"
              ><template slot-scope="scoped">
                <p
                  v-if="
                    (scoped.row.subjectiveScore == scoped.row.examPaperScore ||
                      scoped.row.answerNum == 0) &&
                    scoped.row.arecordStatus == 0
                  "
                >
                  "-"
                </p>
                <template v-else>
                  <p>{{ scoped.row.excellenNum }}</p>
                  <p v-if="scoped.row.excellenNum">
                    {{ `（${scoped.row.excellenRate}%）` }}
                  </p>
                </template>
              </template></el-table-column

            >
            <el-table-column

              prop="goodRate"

              label="良好数(率)"

              sortable
              align="center"

              width="110"
              class-name="p0"
              ><template slot-scope="scoped">
                <p
                  v-if="
                    (scoped.row.subjectiveScore == scoped.row.examPaperScore ||
                      scoped.row.answerNum == 0) &&
                    scoped.row.arecordStatus == 0
                  "
                >
                  "-"
                </p>
                <template v-else>
                  <p>{{ scoped.row.goodNum }}</p>
                  <p v-if="scoped.row.goodNum">
                    {{ `（${scoped.row.goodRate}%）` }}
                  </p>
                </template>

              </template></el-table-column

            >
            <el-table-column

              prop="passRate"

              label="及格数(率)"

              sortable
              align="center"

              width="110"
              class-name="p0"
              ><template slot-scope="scoped">
                <p
                  v-if="
                    (scoped.row.subjectiveScore == scoped.row.examPaperScore ||
                      scoped.row.answerNum == 0) &&
                    scoped.row.arecordStatus == 0
                  "
                >
                  "-"
                </p>
                <template v-else>
                  <p>{{ scoped.row.passNum }}</p>
                  <p v-if="scoped.row.passNum">
                    {{ `（${scoped.row.passRate}%）` }}
                  </p>
                </template>

              </template></el-table-column

            >
            <el-table-column

              prop="failedRate"

              label="不及格数(率)"

              sortable
              align="center"

              width="130"
              class-name="p0"
              ><template slot-scope="scoped">
                <p
                  v-if="
                    (scoped.row.subjectiveScore == scoped.row.examPaperScore ||
                      scoped.row.answerNum == 0) &&
                    scoped.row.arecordStatus == 0
                  "
                >
                  "-"
                </p>
                <template v-else>
                  <p>{{ scoped.row.failedNum }}</p>
                  <p v-if="scoped.row.failedNum">
                    {{ `（${scoped.row.failedRate}%）` }}
                  </p>
                </template>
              </template></el-table-column

            > -->
            <el-table-column label="操作" width="100" align="center">

              <template slot-scope="scoped">

                <el-tooltip v-if="scoped.row.answerNum != 0 ||

                    (scoped.row.recordStatus != 0 &&
                      scoped.row.subjectiveScore == scoped.row.examPaperScore)

                    " effect="dark" content="详情" placement="top">
                  <el-button type="primary" circle size="mini" icon="fa fa-arrow-right"
                    @click="linkTo(scoped.row)"></el-button>

                </el-tooltip>

                <template v-if="scoped.row.answerNum == 0 &&
                  scoped.row.subjectiveScore != scoped.row.examPaperScore
                  ">
                  <el-tooltip v-if="role == 'ROLE_JIAOSHI'" effect="dark" content="设置答案" placement="top">
                    <el-button type="primary" circle size="mini" icon="fa fa-file-text"
                      @click="edit(scoped.row)"></el-button>

                  </el-tooltip>
                  <template v-else>未设置答案</template>
                </template>

                <el-tooltip v-if="scoped.row.subjectiveScore == scoped.row.examPaperScore &&
                  scoped.row.recordStatus == 0
                  " effect="dark" content="导入主观题" placement="top">
                  <el-button type="primary" circle size="mini" icon="fa fa-cloud" @click="uploadSJ(scoped.row)"></el-button>

                </el-tooltip>

                <el-popconfirm v-if="role != 'ROLE_BANZHUREN'" title="确定删除吗？"
                  @confirm="removeReport(scoped.row, scoped.$index)">
                  <el-button class="remove-test" slot="reference" type="danger" circle size="mini" icon="el-icon-delete"
                    :loading="scoped.row.loading"></el-button>

                </el-popconfirm>

              </template>
            </el-table-column>
          </el-table>

          <div class="pagination-box">

            <el-pagination small="" layout="total,prev, pager, next" :hide-on-single-page="true" :total="total"
              @current-change="changePage" :current-page="page" :page-size="size">

            </el-pagination>
          </div>

        </div>

        <div v-show="tabIndex == 2" v-loading="loading">

          <el-empty :image-size="100" v-if="!tableData.length && loading == false" description="没有更多数据"></el-empty>

          <template v-if="tableData.length && loading == false">

            <div id="print-content">

              <el-table :max-height="tableMaxHeight" v-if="role == 'ROLE_JIAOSHI'" :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' : ''">

                    <template slot-scope="scoped">
                      {{ Number(scoped.row["score" + index]) }}

                    </template></el-table-column>
                  <el-table-column :prop="'classRank' + index" label="班名" align="center"
                    :class-name="index % 2 == 0 ? 'bg' : ''"></el-table-column>

                </el-table-column>
              </el-table>

              <el-table v-else :data="tableData" :max-height="tableMaxHeight" 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">
                  <el-table-column :prop="'examCount' + item" label="测练数" align="center"
                    :class-name="index % 2 == 0 ? 'bg' : ''"></el-table-column>
                  <el-table-column :prop="'participationCount' + item" label="参与数" align="center"
                    :class-name="index % 2 == 0 ? 'bg' : ''"></el-table-column>
                  <el-table-column :prop="'score' + item" label="总分" align="center"
                    :class-name="index % 2 == 0 ? 'bg' : ''"></el-table-column>
                  <el-table-column :prop="'classRank' + item" label="班名" align="center"
                    :class-name="index % 2 == 0 ? 'bg' : ''"></el-table-column>

                </el-table-column>
              </el-table>
            </div>

          </template>

        </div>

        <p class="down" v-if="tabIndex == 2 && tableData.length">

          <el-button type="primary" plain round icon="fa fa-cloud-download" @click="downExl">导出报表</el-button>
          <el-button v-if="!this.$store.getters.code" @click="print" type="primary" plain round
            icon="el-icon-printer">打印</el-button>

        </p>
      </div>

      <div v-show="query.classIds.length > 1" class="table-box" v-loading="loading">

        <div class="head-box">

          <div class="tit">

            <p class="txt">
              已考试卷信息

              <em class="red">(相同报表名称后的数字代表同一份试卷的考试次数，例如：模拟卷_1指模拟卷第1次考试成绩，模拟卷_2指模拟卷第2次考试成绩）</em>

            </p>

            <p>

              共筛选出{{ classTable.length }}个班级的已考试卷，<em class="red">不同班级请选择同一份试卷进行对比</em>

            </p>
          </div>

          <el-input placeholder="输入试卷名称" v-model="examReportName" class="input-with-select"
            @keyup.enter.native="examReportList(examReportName)">
            <el-button slot="append" icon="el-icon-search" @click="examReportList(examReportName)"></el-button>

          </el-input>
        </div>

        <el-empty :imag-size="48" v-if="total === 0 && !loading" description="暂无数据"></el-empty>
        <ul class="tab-ul" v-if="classTable.length" v-masonry transition-duration="0.5s" gutter="0" item-selector=".tab-li">

          <template v-for="(item, index) in classTable">

            <li class="tab-li">
              <p class="tab-tit">
                {{

                  `${item[0].className} ${item.length ? "(" + item.length + "份已考试卷)" : ""
                    }`

                }}
              </p>

              <el-table :data="item" border style="width: 100%" v-if="item.length">

                <el-table-column label="选择" align="center" width="60">
                  <template slot-scope="scope">

                    <el-checkbox v-model="multipleSelection" :label="scope.row.id" :disabled="checkboxDisabled(scope.row)">
                      {{ ` ` }}</el-checkbox>

                  </template>
                </el-table-column>

                <el-table-column prop="title" label="报表名称" align="center"></el-table-column>

                <el-table-column label="测验人数" align="center" width="80">
                  <template slot-scope="scope">{{
                    `${scope.row.answeredNum}/${scope.row.classPersonNum}`
                  }}</template>
                </el-table-column>

                <el-table-column prop="examStartTime" label="测验开始时间" width="120" align="center"></el-table-column>

                <el-table-column label="测验时长" align="center" width="80">

                  <template slot-scope="scope">{{

                    `${Math.floor(scope.row.duration / 60)}分${scope.row.duration % 60
                      }`

                  }}</template>
                </el-table-column>
              </el-table>

              <el-empty v-else :imag-size="32" description="暂无数据"></el-empty>

            </li>
          </template>
        </ul>

        <p class="btn-box" v-if="classTable.length">

          <el-button @click="linkToContrast">生成对比报表</el-button>
        </p>
      </div>

      <el-dialog :close-on-click-modal="false" title="导入主观题分数" :visible.sync="diaUp" width="600">
        <up-load :url="url" :examId="examId" @upSuccess="upSuccess" fileName="主观题分数" v-loading="loadingDown">

          <template slot="down">
            <p class="down-txt">
              第一步：下载模板并编辑完成学生分数
              <el-link type="danger" @click="downExcel">模板下载</el-link> 。
            </p>
            <p class="down-txt">第二步：上传完成编辑的模板文件并导入。</p>
          </template>
        </up-load>
        <div class="dialog-footer" slot="footer">
          <el-button @click="diaUp = false">取 消</el-button>
        </div>
      </el-dialog>

    </div>
  </template>
  
  <script>

  import { formatDate, downloadFile, tablePrint } from "utils";

  import BusEvent from "@/utils/busEvent";

  export default {

    data() {
      return {

        code: "",

        gdClass: 0, //已归档班级数量

        exportLoading: false,

        tableMaxHeight: 300,

        role: "",
        loading: false,

        diaUp: false,

        loadingDown: false,

        url: "/api_html/teaching/importSubjectiveScore",
        examId: "",

        form: {
          id: "",
          title: "",
          examPaperScore: "",

        },

        date: "", //今天-昨天-本周
        query: {
          //搜索条件

          classIds: [],

          subjectNames: "",

          startDay: "",
          endDay: "",
          day: "",
        },

        examReportName: "", //试卷名称
        tabList: ["已考试卷信息", "阶段测练报表"],

        classList: [], //班级
        subjectList: [], //科目
        tabIndex: 1, //选项卡

        tableData: [],
        answerList: [], //设置多卷内容供tableStage表格数据用
        page: 1,
        size: 20,

        total: null,

        multipleSelection: [], //选中的试卷ID

        classTable: [], //多班级数据

        classAll: false, //搜索条件多班全选

      };
    },

    async created() {

      this.code = localStorage.getItem("csCode") || "";

      this.role =
        this.$store.getters.info.showRole ||
        this.$store.getters.info.permissions[0].role;

      this._QueryClassList2();

      await this._QueryClassList();

      if (!this.query.classIds.length) {

        return;
      }

      await this._QuerySubjectList();

      await this.setDate(1);

      let startDay = this.query?.startDay;
      if (!startDay) {
        this.query.startDay = new Date();
        this.query.endDay = new Date();
      }
    },

    activated() {
      const that = this;
      BusEvent.$on("keepAlive", async function () {

        // if (that.$route.path == "/test") {

        that.query.subjectNames = that.role == "ROLE_BANZHUREN" ? [] : "";
        that._QueryClassList2();
        await that._QueryClassList();

        if (!that.query.classIds.length) {

          return;
        }
        await that._QuerySubjectList();
        await that.setDate(1);
        let startDay = that.query?.startDay;
        if (!startDay) {
          that.query.startDay = new Date();
          that.query.endDay = new Date();
        }

        // }

      });
    },

    methods: {

      //搜索条件多班全选
      selectAll(val) {
        this.query.classIds = [];
        if (val) {
          this.classList.forEach((item) => {
            this.query.classIds.push(item.value);
          });
        } else {
          this.query.classIds.push(this.classList[0].value);
        }

        this.changeclass(this.query.classIds);

      },

      // 多班级选择同一试卷
      checkboxDisabled(obj) {
        let id = this.multipleSelection[0] || "";
        if (id) {
          let examPaperId;
          for (let i = 0; i < this.tableData.length; i++) {
            if (this.tableData[i].id == id) {
              examPaperId = this.tableData[i].examPaperId;
              break;
            }
          }
          return obj.examPaperId == examPaperId ? false : true;
        } else {
          return false;
        }
      },

      print() {

        tablePrint("print-content", "即时测-" + this.tabList[this.tabIndex - 1]);

      },

      //科目改变触发事件

      changeSub(val) {

        let sub;
        if (val && val.length) {
          let leng = val.length - 1;
          sub = val[leng];
        }

        console.log(val);

        this.query.subjectNames = val.filter((item) => {
          return sub != "全部" ? item != "全部" : item == "全部";
        });
      },

      toArchiving() {
        this.$router.push({
          path: "/testArchiving",
        });
      },

      //去详情

      linkTo(obj) {

        this.$router.push({
          path: "/testAnalysis",
          query: {
            id: obj.id,

            title: obj.title,
            score: obj.examPaperScore,

            classId: obj.classId,
            subjectName: obj.subjectName,
          },
        });
      },
      //去报表对比
      linkToContrast() {
        if (this.multipleSelection.length < 2) {
          this.$message.warning("请选择同一份试卷多个班级进行对比！");
          return;
        }

        let examPaperScore
        console.log(this.multipleSelection[0])
        this.tableData.map(item => {
          console.log(item.id)
          if (item.id == this.multipleSelection[0]) {
            examPaperScore = item.examPaperScore
          }
        })
        console.log(examPaperScore)

        this.$router.push({
          path: "/testContrast",
          query: {
            ids: this.multipleSelection,
            subjectNames: this.query.subjectNames,

            examPaperScore: examPaperScore

          },
        });
      },

      //暂时不上线

      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,

          },
        });
      },

      //导入开关

      uploadSJ(obj) {

        this.examId = obj.id;
        this.diaUp = true;
      },

      //删除即时测考试
      async removeReport(obj, index) {

        this.tableData[index].loading = true;

        const { data, status, info } = await this.$request.deleteReport({
          id: obj.id,
        });

        if (status === 0) {

          this.$message.success("删除成功！");

          this.tableData.splice(index, 1);

        } else {
          this.$message.error(info);
        }
      },

      setDate(index) {
        const that = this;
        this.date = index == this.date ? "" : index;
        let aYear = new Date().getFullYear();
        let aMonth = new Date().getMonth() + 1;
        that.query.day = "";
        that.query.startDay = "";
        that.query.endDay = "";
        switch (index) {
          case 1:
            that.query.day = formatDate(new Date(), "yyyy-MM-dd");
            that.query.startDay = that.query.day;
            that.query.endDay = that.query.day;

            that.tabIndex = 1;

            break;
          case 2:
            let day = new Date().getDay();
            if (day == 0) {
              //中国式星期天是一周的最后一天
              day = 7;
            }

            day--;

            let aTime = new Date().getTime() - 24 * 60 * 60 * 1000 * day;
            that.query.startDay = formatDate(new Date(aTime), "yyyy-MM-dd");
            that.query.endDay = formatDate(new Date(), "yyyy-MM-dd");
            break;
          case 3:
            aMonth = aMonth < 10 ? "0" + aMonth : aMonth;
            that.query.startDay = `${aYear}-${aMonth}-01`;
            that.query.endDay = formatDate(new Date(), "yyyy-MM-dd");
            break;
          case 4:

            if (aMonth > 0 && aMonth < 4) {

              aMonth = "1";

            } else if (aMonth > 3 && aMonth < 7) {

              aMonth = "4";

            } else if (aMonth > 6 && aMonth < 10) {

              aMonth = "7";

            } else {
              aMonth = "10";
            }
  
            aMonth = aMonth < 10 ? "0" + aMonth : aMonth;
            that.query.startDay = `${aYear}-${aMonth}-01`;
            that.query.endDay = formatDate(new Date(), "yyyy-MM-dd");
            break;
        }
        this.page = 1;
        this._QueryData();
      },
      handleChangeTimeStart(val) {
        this.query.day = "";
        this.date = "";
        if (this.query.endDay) {
          if (new Date(val).getTime() > new Date(this.query.endDay).getTime()) {
            this.$message.error("任务结束时间不能任务开始时间前面，请重新设置");
            this.query.startDay = "";
          }
        }
      },
      handleChangeTimeEnd(val) {
        this.query.day = "";
        this.date = "";
        if (this.query.startDay) {
          if (new Date(val).getTime() < new Date(this.query.startDay).getTime()) {
            this.$message.error("任务结束时间不能任务开始时间前面，请重新设置");
            this.query.endDay = "";
          }
        }
      },

      changePage(page) {
        this.page = page;
        this._QueryData();

      },

      edit(item) {

        this.$router.push({
          path: "/examinationPaperEdit",
          query: {
            paperId: item.id,
            title: item.title,
            type: 2,
          },
        });

      },

      changeTab() {

        this.tableMaxHeight = this.$refs.main.offsetHeight;

        this.page = 1;
        this._QueryData();

      },

      //导入成功

      upSuccess(res) {

        this.$message.success("导入成功");

        this.diaUp = false;

        this._QueryData();
      },

      //切换班级

      async changeclass(list) {
        if (list.length == this.classList.length) {
          this.classAll = true;
        } else {
          this.classAll = false;
        }

        if (this.query.classIds.length == 0) {
          this.$message.warning("请至少选择一个班级！");
        }
        if (this.query.classIds != 1) {
          this.tabIndex = 1;
        }

        await this._QuerySubjectList();
        this.page = 1;
        this._QueryData();

      },

      async _QueryClassList2() {

        if (this.code) return;

        const fetchClassList =
          this.role == "ROLE_BANZHUREN"
            ? this.$request.cTClassList
            : this.$request.tClassList;
        const { data, status, info } = await fetchClassList({ status: 1 });
        if (status === 0) {
          this.gdClass = data?.list?.length || 0;
        } else {
          this.$message.error(info);
        }
      },

      async _QueryClassList() {

        const fetchClassList =
          this.role == "ROLE_BANZHUREN"
            ? this.$request.cTClassList
            : this.$request.tClassList;
        const { data, status, info } = await fetchClassList();

        this.query.classIds = [];

        if (status === 0) {
          this.classList = data.list.map((item) => {
            return {
              value: item.classId,

              label: item.className,

            };
          });

          this.query.classIds.push(this.classList[0]?.value);

        } else {
          this.$message.error(info);
        }
      },
      async _QuerySubjectList() {

        let query = {};
        if (!this.query.classIds.length) return;
        if (this.query.classIds.length == 1) {
          query.classId = this.query.classIds[0];
        } else {
          query.classIds = this.query.classIds;
        }

        const fetchSubjectList =
          this.role == "ROLE_BANZHUREN"
            ? this.$request.cTSubjectList
            : this.$request.tSubjectList;
  

        const { data, status, info } = await fetchSubjectList({ ...query });

        if (status === 0) {
          this.subjectList =

            data.subjectNames?.map((item) => {

              return {

                value: item,
                label: item,

              };
            }) || [];

          if (this.role == "ROLE_BANZHUREN") {

            this.subjectList.unshift({

              value: "全部",

              label: "全部",
            });

            this.query.subjectNames = [this.subjectList[0]?.value];

          } else {

            this.query.subjectNames = this.subjectList[0]?.value;

          }

        } else {
          this.$message.error(info);
        }
      },
      async _QueryData() {

        this.examReportName = "";
        if (!this.query.classIds.length) return;

        this.tableData = [];
        if (this.tabIndex == 1) {
          this.examReportList();
        } else {
          this.phaseExamReport();
        }
      },
      //单卷测练

      async examReportList(msg) {

        let query = {};
        for (let key in this.query) {
          if (this.query[key] != "") {
            query[key] = this.query[key];
          }
        }

        if (this.role != "ROLE_BANZHUREN") {
          query.subjectNames = [query.subjectNames];
        } else {
          if (

            query["subjectNames"] &&

            query["subjectNames"].length == 1 &&
            query["subjectNames"][0] == "全部"
          ) {
            query["subjectNames"] = this.subjectList.map((item) => {
              return item.value;
            });
            query["subjectNames"].shift();

          }

          if (!query["subjectNames"]) {

            this.$message.warning("请选择科目");
            return;

          }
        }

        this.classTable = [];
        this.multipleSelection = [];
        this.loading = true;

        if (this.query.classIds.length == 1) {
          query.classId = query.classIds[0];
          query.page = this.page;
          query.size = this.size;
          delete query.classIds;
        }
        if (msg) {
          query.title = msg;
        }

        const { data, status, info } = await this.$request.examReportList({

          ...query,

        });
        this.loading = false;
        if (status === 0) {

          this.tableData =

            data?.list?.map((item) => {

              item.loading = false;
              return item;
            }) || [];

          this.total = data?.count || 0;
          if (!query.classId) {

            //多班级
            this.classTable = [];

            let classIds = [];

            let tableData = [];

            data?.list?.map((item) => {

              if (!classIds.includes(item.classId)) {
                classIds.push(item.classId);

              }
              let idx = classIds.indexOf(item.classId);

              if (tableData[idx]) {
                tableData[idx].push(item);
              } else {
                tableData[idx] = [item];
              }
            });
            this.classTable = [...tableData];
          }

        } else {
          this.$message.error(info);
        }
      },
      //多卷测练
      async phaseExamReport() {
        this.loading = true;
        let query = {};
        for (let key in this.query) {
          if (this.query[key] != "") {
            if (key == "subjectNames" && this.role != "ROLE_BANZHUREN") {
              query["subjectName"] = this.query[key];
            } else {
              query[key] = this.query[key];
            }
          }
        }
        if (this.role == "ROLE_BANZHUREN") {
          if (

            query["subjectNames"] &&
            query["subjectNames"]?.length == 1 &&

            query["subjectNames"][0] == "全部"
          ) {
            query["subjectNames"] = this.subjectList.map((item) => {
              return item.value;
            });

            query["subjectNames"]?.shift();

          }
        }

        if (this.query.classIds.length == 1) {
          query.classId = query.classIds[0];
          delete query.classIds;
        }

        const phaseExamReport =
          this.role == "ROLE_BANZHUREN"
            ? this.$request.cTPhaseExamReport
            : this.$request.phaseExamReport;
        const { data, status, info } = await phaseExamReport({
          ...query,
        });
        this.loading = false;
        if (status === 0) {
          this.total = data.count;

          if (this.role == "ROLE_BANZHUREN") {
            let subjectName = [];
            this.tableData = data?.list.map((item) => {
              let params = {};
              item.dataList.map((items, index) => {
                if (!subjectName.includes(items.subjectName)) {
                  subjectName.push(items.subjectName);
                }
                params["examCount" + items.subjectName] = items.examCount;
                params["participationCount" + items.subjectName] =
                  items.participationCount;
                params["score" + items.subjectName] = items.score;
                params["classRank" + items.subjectName] = items.classRank;
              });
              return {
                ...item,
                ...params,
              };
            });
            this.answerList = [...subjectName];
          } else {
            let dataIdsList = [],
              dataList = [];
            data?.list.map((item) => {
              item.examList.map((items) => {

                if (!dataIdsList.includes(items.title)) {
                  dataIdsList.push(items.title);
                  dataList.push(items);
                }

              });

            });

            console.log(dataList);
            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;
          }

        } else {
          this.$message.error(info);
        }
      },

      //报表导出

      async downExl() {

        if (this.exportLoading == true) return;

        let query = {};
        for (let key in this.query) {
          if (this.query[key] != "") {
            if (key == "subjectNames" && this.role != "ROLE_BANZHUREN") {
              query["subjectName"] = this.query[key];
            } else {
              query[key] = this.query[key];
            }
          }
        }
        if (this.role == "ROLE_BANZHUREN") {
          if (
            query["subjectNames"] &&
            query["subjectNames"].length == 1 &&
            query["subjectNames"][0] == "全部"
          ) {
            query["subjectNames"] = this.subjectList.map((item) => {
              return item.value;
            });
            query["subjectNames"].shift();
          }
          if (!query["subjectNames"]) {
            this.$message.warning("请选择科目");
            return;
          }
        }

        query.classId = query.classIds[0];
        delete query.classIds;

        const exportPhaseExamReport =
          this.role == "ROLE_BANZHUREN"
            ? this.$request.cTExportPhaseExamReport
            : this.$request.exportPhaseExamReport;

        this.exportLoading = true;

        const data = await exportPhaseExamReport({ ...query });

        this.exportLoading = false;

        if (data && !data.code) {

          let blob = new Blob([data], {
            type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
          });

          downloadFile("即时测-阶段测练报表.xlsx", blob);

        } else {

          this.$message.error(data.info);

        }

      },

      //模板下载

      async downExcel() {

        this.loadingDown = true;
        let data = await this.$request.subjectiveScoreTemplate({
          examId: this.examId,
        });
        this.loadingDown = false;
        if (data && !data.code) {
          let blob = new Blob([data], {
            type: "application/vnd.ms-excel;charset=utf-8",
          });
          downloadFile(`主观题模版.xlsx`, blob);
        } else {
          this.$message.error(data.info);
        }
      },

    },
  };

  </script>
  

  <style>
  div::-webkit-scrollbar {
    width: 3px;
    height: 10px;
  }

  div::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #ccc;
  }
  </style>

  <style lang="scss" scoped>

  .page-container {
    position: relative;

    height: 100%;

    &.active {

      overflow: hidden;
    }
  }

  .table-box {
    margin: 0 20px;
    padding: 16px;
    background: #f8f8f8;
    border-radius: 5px;

    min-height: 300px;

    :deep(.fa-arrow-right) {
      padding-left: 2px;
    }

    :deep(.fa-file-text) {
      padding-left: 2px;
    }
  }

  .down {
    padding-top: 16px;
  }

  .click-b {
    cursor: pointer;

    color: #409eff;

    text-decoration: underline;

  }

  .head-box {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #999;

    .txt {
      font-size: 16px;
      color: #333;
      line-height: 20px;
      position: relative;
      margin-bottom: 6px;

      &:after {
        content: "";
        position: absolute;
        top: 0;
        left: -16px;
        width: 4px;
        height: 100%;
        background: #409eff;
      }
    }

    .red {
      font-style: normal;

      font-size: 12px;

      color: #f30;
    }

    .sel {
      width: 200px;

      :deep(.el-input__inner) {
        border-radius: 20px;
      }
    }
  }

  .tab-ul {
    display: flex;
    flex-wrap: wrap;

    .tab-li {

      width: calc(50% - 12px);

      margin: 0 12px 12px 0;

      &:nth-child(2n) {
        margin-right: 0;
      }

      .tab-tit {

        font-size: 15px;

        line-height: 40px;
        border: 1px solid #ebeef5;

        padding-left: 12px;

      }
    }
  }

  .btn-box {
    padding-top: 12px;
    text-align: right;
  }

  .remove-test {
    margin-left: 10px;
  }

  .input-with-select {
    width: 200px;
    height: 36px;
    margin-right: 50px;
    border-radius: 20px;
    border: 1px solid #e2e2e2;
    box-sizing: border-box;
    background: #fff;

    :deep(.el-input__inner) {
      border-radius: 20px;
      border: none;
      height: 34px;
      line-height: 34px;
      padding-right: 0;
    }

    :deep(.el-button) {
      padding: 12px;
    }
  
    :deep(.el-input-group__append),
    :deep(.el-input-group__prepend) {
      border: none;
      background: transparent;
    }
  }

  .select-all {
    padding-left: 16px;

    padding-bottom: 10px;
    border-bottom: 1px solid #e2e2e2;

  }

  </style>