src/views/test/index.vue

<template>
  <div class="page-container" :class="dialogVisible ? 'active' : ''">
    <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="changClazz"
        >
          <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="_QueryData"
        >
          <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="选择科目"
          @change="_QueryData"
        >
          <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"
      >
        <el-radio-button :label="1">单卷测练报表</el-radio-button>
        <el-radio-button :label="2">阶段测练报表</el-radio-button>
      </el-radio-group>
      <div v-if="tabIndex == 1" v-loading="loading">
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column
            prop="title"
            label="试卷名称"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="examPaperScore"
            label="卷面分"
            align="center"
            width="100"
          ></el-table-column>
          <el-table-column
            prop="answeredNum"
            label="测验人数"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="examStartTime"
            label="测验时间"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="avgScore"
            label="班平均分"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="highestScore"
            label="班最高分"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="lowestScore"
            label="班最低分"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="excellenRate"
            label="优秀数（率）"
            sortable
            align="center"
            ><template slot-scope="scoped"
              >{{ scoped.row.excellenRate }}%</template
            ></el-table-column
          >
          <el-table-column
            prop="goodRate"
            label="良好数（率）"
            sortable
            align="center"
            ><template slot-scope="scoped"
              >{{ scoped.row.goodRate }}%</template
            ></el-table-column
          >
          <el-table-column
            prop="passRate"
            label="及格数（率）"
            sortable
            align="center"
            ><template slot-scope="scoped"
              >{{ scoped.row.passRate }}%</template
            ></el-table-column
          >
          <el-table-column
            prop="failedRate"
            label="不及格数（率）"
            sortable
            align="center"
            ><template slot-scope="scoped"
              >{{ scoped.row.failedRate }}%</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>
              <el-tooltip 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>
          </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-if="tabIndex == 2" v-loading="loading">
        <el-table :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="总分/成绩"
              align="center"
            ></el-table-column>
            <el-table-column
              :prop="'classRank' + index"
              label="班名"
              align="center"
            ></el-table-column>
          </el-table-column>
        </el-table>
      </div>
      <p class="down" v-if="tabIndex == 2">
        <el-button type="info" plain round icon="fa fa-cloud-download"
          >导出报表</el-button
        >
      </p>
    </div>
    <div class="edit-dia" v-show="dialogVisible" height="100%">
      <editAnswer
        :id="form.id"
        :title="form.title"
        :score="form.examPaperScore"
        @cancel="cancel"
        @saveSuccess="saveSuccess"
      />
    </div>
  </div>
</template>
<script>
import { formatDate } from "utils";
import editAnswer from "./editAnswer.vue";
export default {
  components: { editAnswer },
  data() {
    return {
      role: "",
      loading: false,
      dialogVisible: false,
      form: {
        id: "",
        title: "",
        examPaperScore: "",
      },
      date: "", //今天-昨天-本周
      query: {
        //搜索条件
        classId: "",
        subjectNames: "",
        startDay: "",
        endDay: "",
        day: "",
      },
      classList: [], //班级
      subjectList: [], //科目
      tabIndex: 1, //选项卡
      tableData: [],
      answerList: [], //设置多卷内容供tableStage表格数据用
      page: 1,
      size: 20,
      total: 0,
    };
  },
  async created() {
    this.role = this.$store.getters.info.permissions.find(
      (item) => item.roleName == this.$store.getters.info.showRoleName
    )?.role;
    await this._QueryClassList();
    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: {
    linkTo(obj) {
      //去详情
      this.$router.push({
        path: "/testAnalysis",
        query: {
          id: obj.id,
          title: obj.title,
          score: obj.examPaperScore,
        },
      });
    },
    cancel() {
      this.dialogVisible = false;
    },
    saveSuccess() {
      this.dialogVisible = false;
      this._QueryData();
    },
    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;
          break;
        case 2:
          let day = new Date().getDay();
          if (day == 0) {
            //中国式星期天是一周的最后一天
            day = 7;
          }
          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 = "01";
          } else if (aMonth > 3 && aMonth < 7) {
            aMonth = "04";
          } else if (aMonth > 6 && aMonth < 10) {
            aMonth = "07";
          } 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.form = { ...item };
      this.dialogVisible = true;
    },
    changeTab() {
      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();
      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,
      });
      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.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"].length == 1 &&
          query["subjectNames"][0] == "全部"
        ) {
          query["subjectNames"] = this.subjectList.map((item) => {
            return item.value;
          });
          query["subjectNames"].shift();
        }
      }
      const { data, status, info } = await this.$request.examReportList({
        ...query,
        page: this.page,
        size: this.size,
      });
      this.loading = false;
      if (status === 0) {
        this.tableData = (data?.list && [...data?.list]) || [];
        this.total = data.count;
      } 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"].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;
        let dataIdsList = [],
          dataList = [];
        data?.list.map((item) => {
          item.examList.map((items) => {
            if (this.role == "ROLE_JITUAN") {
              // if (!dataIdsList.includes(items.grade)) {
              //   dataIdsList.push(items.grade);
              //   dataList.push(items);
              // }
            } else {
              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 (this.role == "ROLE_JITUAN") {
                if (items.title == ids) {
                }
              } else {
                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);
      }
    },
  },
};
</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;
  &.active {
    height: 100%;
    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;
}
.edit-dia {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: calc(100vh - 70px);
  background: #fff;
  overflow-y: auto;
  z-index: 10;
}
</style>