baoman / Ezquiz_Platform

  <template>
    <div ref="main" class="page-container">
      <back-box>
        <template slot="title">
          <span>即时测-已归档数据报表</span>
        </template>
      </back-box>
      <div class="answer-header">
        <div class="sel-box">

          <el-select class="sel" v-model="query.classId" placeholder="选择班级" @change="changeclass">
            <el-option 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" 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" 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 class="table-box">

        <!-- <el-radio-group

          v-model="tabIndex"
          @change="changeTab"
          style="margin-bottom: 20px"
        >
          <template v-for="(item, index) in tabList">
            <el-radio-button
              v-if="index == 0 || query.startDay != query.endDay"
              :key="index"
              :label="index + 1"
              >{{ item }}</el-radio-button
            >
          </template>

        </el-radio-group> -->

        <div v-show="tabIndex == 1" v-loading="loading">
          <el-table :data="tableData" border style="width: 100%">

            <el-table-column prop="title" label="试卷名称" fixed align="center"></el-table-column>
            <el-table-column prop="examPaperScore" label="卷面分" align="center" width="68"></el-table-column>
            <el-table-column 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="100" 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="操作" align="center">
              <template slot-scope="scoped">
                <el-tooltip 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>
            </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"></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"
                    :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"></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>
  </template>
  
  <script>
  import { formatDate, downloadFile, tablePrint } from "utils";
  import BusEvent from "@/utils/busEvent";
  export default {
    data() {
      return {
        exportLoading: false,
        tableMaxHeight: 300,
        role: "",
        loading: false,
        loadingDown: false,
        url: "/api_html/teaching/importSubjectiveScore",
        examId: "",
        form: {
          id: "",
          title: "",
          examPaperScore: "",
        },
        date: "", //今天-昨天-本周
        query: {
          //搜索条件
          classId: "",
          subjectNames: "",
          startDay: "",
          endDay: "",
          day: "",
        },
        tabList: ["单卷测练报表", "阶段测练报表"],
        classList: [], //班级
        subjectList: [], //科目
        tabIndex: 1, //选项卡
        tableData: [],
        answerList: [], //设置多卷内容供tableStage表格数据用
        page: 1,
        size: 20,
        total: 0,
      };
    },
    async created() {
      this.role =
        this.$store.getters.info.showRole ||
        this.$store.getters.info.permissions[0].role;
      await this._QueryClassList();
      if (!this.query.classId) {
        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();
      }
    },

    methods: {
      print() {

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

      },
      changeSub(val) {
        //科目改变触发事件
        let sub;
        if (val && val.length) {
          let leng = val.length - 1;
          sub = val[leng];
        }

        this.query.subjectNames = val.filter((item) => {
          return sub != "全部" ? item != "全部" : item == "全部";
        });
      },
      linkTo(obj) {
        //去详情
        this.$router.push({
          path: "/testAnalysis",
          query: {
            id: obj.id,
            title: obj.title,
            score: obj.examPaperScore,
            status: 1,

            type: 1, //试卷类型
            subjectName: obj.subjectName,

            classIds: obj.classId,

            params: JSON.stringify({
              ...this.query,
              subjectNames: [this.query.subjectNames],
            }),
            examType: obj.examPaperId == 0 ? 1 : 2,

          },
        });
      },
  
      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();
      },
      changeTab() {
        this.tableMaxHeight = this.$refs.main.offsetHeight;
        this.page = 1;
        this._QueryData();
      },
  
      async changeclass() {
        await this._QuerySubjectList();
        this.page = 1;
        this._QueryData();
      },
      async changClazz() {
        this.page = 1;
        await this._QuerySubjectList();
        await this._QueryData();
      },
      async _QueryClassList() {
        const fetchClassList =
          this.role == "ROLE_BANZHUREN"
            ? this.$request.cTClassList
            : this.$request.tClassList;
        const { data, status, info } = await fetchClassList({ status: 1 });
        if (status === 0) {
          this.classList = data.list.map((item) => {
            return {
              value: item.classId,
              label: item.className,
            };
          });
          this.query.classId = this.classList[0]?.value;
        } else {
          this.$message.error(info);
        }
      },
      async _QuerySubjectList() {
        const fetchSubjectList =
          this.role == "ROLE_BANZHUREN"
            ? this.$request.cTSubjectList
            : this.$request.tSubjectList;
  
        const { data, status, info } = await fetchSubjectList({
          classId: this.query.classId,
          status: 1,
        });
        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.push(this.subjectList[0]?.value);
          } else {
            this.query.subjectNames = this.subjectList[0]?.value;
          }
        } else {
          this.$message.error(info);
        }
      },
      async _QueryData() {
        this.tableData = [];

        if (!this.query.classId) {
          return;
        }

        if (this.tabIndex == 1) {
          this.examReportList();
        } else {
          this.phaseExamReport();
        }
      },
      //单卷测练
      async examReportList() {
        this.loading = true;
        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;
          }
        }
        const { data, status, info } = await this.$request.examReportList({
          ...query,
          page: this.page,
          size: this.size,

          status: 1,

        });
        this.loading = false;
        if (status === 0) {
          this.tableData = (data?.list && [...data?.list]) || [];
          this.total = data?.count || 0;
        } 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 if (key == "classId") {
              query.classIds = [query.classId];

            } 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();
          }
        }
        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);
                }
              });
            });

            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;
          }
        }
        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);
        }
      },
    },
  };
  </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;

    :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;
  }
  </style>