baoman / Ezquiz_Platform

  <template>

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

      <div class="tips" v-if="paperModifyLog.modifiedTime && !status">
        <p class="tips-p">
          <i class="fa fa-bell-o"></i>
          {{

        `${paperModifyLog.modifiedTime} ${paperModifyLog.realName}`
      }}修改了答案，是否重新记分？

        </p>
        <div class="btn-box">

          <el-button type="danger" round @click="_ReScore" size="mini">重新计分</el-button>
          <el-button type="danger" round plain size="mini" @click="paperModifyLog.modifiedTime = ''">暂时不计</el-button>

        </div>
      </div>

      <div class="content-header">
        <div class="tab-box">

          <span v-for="(item, index) in tabList" :key="item" class="tab-item" :class="type == index ? 'active' : ''"
            @click="setType(index)">{{ item }}</span>

        </div>

        <el-button v-if="!status && role != 'ROLE_BANZHUREN'" class="setMinScore" @click="diaMinScore = true" round
          size="small">设置低分值</el-button>

      </div>
      <div id="print-content" v-loading="loading">
        <div class="table-box">

          <el-table :max-height="tableMaxHeight" v-show="type == 0" :data="tableData" border style="width: 100%">
            <el-table-column prop="questionIndex" label="题号" align="center" fixed width="60"></el-table-column>
            <el-table-column prop="questionType" label="题型" align="center" fixed width="100"><template
                slot-scope="scope">{{
        setSubPro(scope.row.questionType)
      }}</template></el-table-column>
            <el-table-column prop="score" width="100" label="满分值" sortable align="center"></el-table-column>
            <el-table-column width="110" prop="highestScore" label="班最高分" sortable align="center"></el-table-column>
            <el-table-column width="110" prop="lowestScore" label="班最低分" sortable align="center"></el-table-column>
            <el-table-column width="110" prop="avgScore" label="班平均分" sortable align="center"></el-table-column>
            <el-table-column prop="classScoringRate" width="120" sortable label="班级得分率" align="center"><template
                slot-scope="scoped">{{ scoped.row.classScoringRate }}%</template></el-table-column>
            <el-table-column prop="correctAnswer" label="答案" align="center"><template slot-scope="scoped">{{
        scoped.row.correctAnswer == 1
          ? "✓"
          : scoped.row.correctAnswer == 2
            ? "✗"
            : scoped.row.correctAnswer
      }}</template>

            </el-table-column>

            <el-table-column v-for="(item, index) in optionsList" :key="index" :label="item.title" :prop="'count' + index"
              align="center" width="120"><template slot-scope="scope">

                <p class="persent">
                  {{

        scope.row.questionType == "5"
          ? ""
          : scope.row["option" + index]
            ? `${scope.row["option" + index]}(${scope.row["persent" + index]
            })`
            : ""
      }}

                </p>
              </template>
            </el-table-column>
          </el-table>
          <div id="print-table">
            <table class="hide">
              <thead>
                <tr>
                  <th>题号</th>
                  <th>题型</th>
                  <th>满分值</th>
                  <th>班最高分</th>
                  <th>班最低分</th>
                  <th>班平均分</th>
                  <th>班级得分率</th>
                  <th>答案</th>
                  <th>选项1</th>
                  <th>选项2</th>
                  <th>选项3</th>
                  <th>选项4</th>
                  <th>未答</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(tr, index) in tableData">
                  <td width="60">{{ index + 1 }}</td>
                  <td width="100">{{ setSubPro(tr.questionType) }}</td>
                  <td width="100">{{ tr.sortable }}</td>
                  <td width="110">{{ tr.highestScore }}</td>
                  <td width="110">{{ tr.lowestScore }}</td>
                  <td width="110">{{ tr.avgScore }}</td>
                  <td width="120">{{ tr.classScoringRate }}%</td>
                  <td>

                    {{

        tr.correctAnswer == 1
          ? "✓"
          : tr.correctAnswer == 2
            ? "✗"
            : tr.correctAnswer
      }}

                  </td>

                  <td v-for="(item, index) in optionsList" :key="index" width="120">

                    <p class="persent">

                      {{

        tr.questionType == "5"
          ? ""
          : tr["option" + index]
            ? `${tr["option" + index]}(${tr["persent" + index]})`
            : ""
      }}

                    </p>
                  </td>
                </tr>
              </tbody>
            </table>
            <div class="hui-box" v-show="type == 0">
              <span class="s-txt">汇总</span>
              <ul class="hui-ul">
                <li class="hui-li">
                  <span class="hui-s s1">主观题</span>
                  <span class="hui-s s1">{{ examReport.subjectiveScore }}</span>
                  <span class="hui-s s2">{{

        examReport.subjectiveHighestScore
      }}</span>

                  <span class="hui-s s2">{{

          examReport.subjectiveLowestScore
        }}</span>

                  <span class="hui-s s2">{{

          examReport.subjectiveAvgScore
        }}</span>
                  <span class="hui-s s3">{{ examReport.subjectiveClassScoringRate }}%</span>

                </li>
                <li class="hui-li">
                  <span class="hui-s s1">客观题</span>
                  <span class="hui-s s1">{{ examReport.objectiveScore }}</span>
                  <span class="hui-s s2">{{

        examReport.objectiveHighestScore
      }}</span>

                  <span class="hui-s s2">{{

          examReport.objectiveLowestScore
        }}</span>

                  <span class="hui-s s2">{{ examReport.objectiveAvgScore }}</span>

                  <span class="hui-s s3">{{ examReport.objectiveClassScoringRate }}%</span>

                </li>
                <li class="hui-li">
                  <span class="hui-s s1">整卷</span>
                  <span class="hui-s s1">{{ examReport.examPaperScore }}</span>
                  <span class="hui-s s2">{{ examReport.highestScore }}</span>
                  <span class="hui-s s2">{{ examReport.lowestScore }}</span>
                  <span class="hui-s s2">{{ examReport.avgScore }}</span>
                  <span class="hui-s s3">{{ examReport.classScoringRate }}%</span>
                </li>
              </ul>

            </div>

          </div>

          <el-table v-show="type == 1" :max-height="tableMaxHeight" :data="tableData2" border style="width: 100%"
            :default-sort="{ prop: 'dadui', order: 'descending' }">
            <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 prop="examScore" label="总分" sortable align="center"></el-table-column>
            <el-table-column prop="scoringRate" label="得分率" sortable align="center"><template slot-scope="scope">{{
        scope.row.scoringRate }}%</template></el-table-column>
            <el-table-column prop="classRank" label="班名" sortable align="center"></el-table-column>

            <el-table-column label="客观题" align="center">

              <el-table-column prop="objectiveExamScore" label="得分" align="center"></el-table-column>
              <el-table-column prop="objectiveScoringRate" label="得分率" align="center"><template slot-scope="scope">{{
        scope.row.objectiveScoringRate }}%</template></el-table-column>

            </el-table-column>
            <el-table-column label="主观题" align="center">

              <el-table-column prop="subjectiveExamScore" label="得分" align="center"></el-table-column>
              <el-table-column prop="subjectiveScoringRate" label="得分率" align="center"><template slot-scope="scope">{{
        scope.row.subjectiveScoringRate }}%</template></el-table-column>

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

          <el-table v-show="type == 2" :max-height="tableMaxHeight" :data="tableData2" border style="width: 100%"
            :default-sort="{ prop: '', order: 'descending' }">
            <el-table-column prop="studentCode" label="学号" fixed align="center" width="120"></el-table-column>
            <el-table-column prop="studentName" label="姓名" fixed align="center"></el-table-column>
            <el-table-column prop="examScore" label="总分" sortable align="center"></el-table-column>

            <el-table-column label="分数组成" align="center">

              <el-table-column prop="objectiveExamScore" label="客观题分" align="center"></el-table-column>
              <el-table-column prop="subjectiveExamScore" label="主观题分" align="center"></el-table-column>

            </el-table-column>

            <el-table-column align="center" v-for="(item, index) in questionList" :key="index" :label="'Q' + item.id"
              :prop="'score' + item.id">

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

          <el-table :max-height="tableMaxHeight" v-show="type == 3" :data="tableData2" border style="width: 100%"
            :default-sort="{ prop: '', order: 'descending' }">
            <el-table-column prop="studentCode" label="学号" fixed align="center"></el-table-column>
            <el-table-column prop="studentName" label="姓名" fixed align="center"></el-table-column>
            <el-table-column prop="className" label="班级" align="center"></el-table-column>
            <el-table-column prop="examScore" label="总分" sortable align="center"></el-table-column>
            <el-table-column align="center" v-for="(item, index) in questionList" :key="index" :label="'Q' + item.id">

              <template slot-scope="scope">
                <span v-if="tableData[index]?.questionType == 5">*</span>

                <span v-else-if="scope.row['answer' + item.id]" :class="scope.row['isRight' + item.id] ? '' : 'error'">

                  {{ scope.row["answer" + item.id] }}
                </span>

                <span v-else :class="scope.row['questionType' + item.id] == 5 ? '' : 'error'">-</span>

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

        </div>

      </div>
      <div class="down">
        <div>

          <el-button @click="exportData" 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>

        <div v-if="!status && role != 'ROLE_BANZHUREN' && examReport.examPaperId != 0
        ">
          <el-button class="score-set" v-if="this.showSelect == false" type="primary" round
            @click="openScoreSet(2)">答卷录分</el-button>

          <el-popover v-else placement="bottom" width="194" ref="popoverRef">

            <div style="display: flex">

              <el-button size="mini" @click="openScoreSet(1)">录入总得分</el-button>
              <el-button type="primary" size="mini" @click="openScoreSet(2)">录入小题分</el-button>

            </div>

            <el-button class="score-set" slot="reference" type="primary" round>答卷录分</el-button>

          </el-popover>
  

          <template v-if="examReport.subjectiveScore != examReport.examPaperScore">
            <el-button @click="edit" type="primary" round>查看题目</el-button></template>

        </div>

      </div>

      <ScoreSet v-show="diaScoreSet" :role="role" :id="id" :title="title" :examScore="score"
        :showAllSetScore="showAllSetScore" :showSetScore="showSetScore" :diaScoreSet="diaScoreSet"
        @closeScoreSet="closeScoreSet" @SuccessScoreSet="SuccessScoreSet" />
      <el-dialog :append-to-body="true" :close-on-click-modal="false" title="低分区间设置" :visible.sync="diaMinScore"
        width="480px" @closed="closeDiaMinScore">

        <el-form>
          <el-form-item label="低分设置模式:">
            <el-select v-model="lowRange.type" @change="changeScore">
              <el-option label="按分数设置" :value="0"></el-option>
              <el-option label="按已考人数比例" :value="1"></el-option>
              <el-option label="按分数比例设置(按题目)" :value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="低分区间:">

            <el-input class="score-ipt" type="number" v-model="lowRange.range[0]" :min="0" :max="100"

              @input="lowRange.range[1] > 100 ? (lowRange.range[1] = 100) : ''"

              @keydown.native="keydownRange($event)"></el-input>{{ lowRange.type != 0 ? "%" : "分" }}(含)
            <el-input class="score-ipt" type="number" v-model="lowRange.range[1]" :min="0" :max="100"

              @input="lowRange.range[1] > 100 ? (lowRange.range[1] = 100) : ''"

              @keydown.native="keydownRange($event)"></el-input>{{ lowRange.type != 0 ? "%" : "分" }}(含)

          </el-form-item>
        </el-form>
  

        <div class="dialog-footer" slot="footer" align="center" v-loading="loadingTange">

          <el-button type="danger" @click="_SavelowRange">保存</el-button>
          <el-button @click="diaMinScore = false">取 消</el-button>
        </div>
      </el-dialog>

    </div>
  </template>
  <script>

  import ScoreSet from "./scoreSet.vue";

  import { downloadFile, tablePrint } from "@/utils";
  export default {
    components: {

      ScoreSet,

    },
    props: {
      role: "",
      id: "",
      title: String,

      classIds: Array,

      subjectName: String,

      examType: Number,

      score: {
        type: Number,

        default: 0,

      },
    },
    data() {
      return {

        status: 0, // 1:已归档试卷

        tableMaxHeight: 600,
        loading: false,
        exportLoading: false,
        tabList: ["试题分析", "成绩排名", "小题分报表", "作答明细表"],
        type: 0,

        paperModifyLog: {
          //修改信息

          realName: "",
          modifiedTime: "",
        },
        examReport: {
          subjectiveScore: 0,
          subjectiveHighestScore: "",
          subjectiveLowestScore: "",
          subjectiveAvgScore: "",
          subjectiveClassScoringRate: "",
          objectiveScore: "",
          objectiveHighestScore: "",
          objectiveLowestScore: "",
          objectiveAvgScore: "",
          objectiveClassScoringRate: "",
          examPaperScore: "",
          highestScore: "",
          lowestScore: "",
          avgScore: "",
          classScoringRate: "",
        },
        tableData: [],
        optionsList: [],
        tableData2: [],
        questionList: [],
        page: 1,
        size: 20,
        total: 0,
        // 设置低分值
        loadingTange: false,
        diaMinScore: false,
        lowRange: {
          type: 0,
          range: [60, 0],
        },
        defaultLowRange: {
          type: 0,
          range: [],
        },
        //答题录分

        diaScoreSet: false,
  

        //导出相关
        diaShow: false,

        exportStudent: [],

  
        showSelect: true, //是否显示录总分
        showAllSetScore: false, //当前操作试卷可录总分分状态
        showSetScore: false, //当前操作试卷可录小题分状态

      };
    },
    created() {
      this.status = this.$route.query.status ? this.$route.query.status : 0;
      this._QueryData();
    },
    methods: {
      print() {
        if (this.type == 0) {
          tablePrint("print-table", this.title + this.tabList[this.type], true);
        } else {
          tablePrint("print-content", this.title + this.tabList[this.type]);
        }
      },
      //打开答卷录分

      openScoreSet(type) {

        this.$refs.main.click();

        this.diaScoreSet = true;

        this.showAllSetScore = type == 1 ? true : false;
        this.showSetScore = type == 2 ? true : false;

      },
      //关闭设置分数
      closeScoreSet() {

        this.diaScoreSet = false;

      },
      //修改分数成功
      SuccessScoreSet() {

        this._QueryData();

        this.closeScoreSet();

      },
      setType(type) {
        this.tableMaxHeight = this.$refs.main.offsetHeight;
        this.type = type;
      },
      setSubPro(type) {
        let tit;
        switch (type) {
          case 2:
            tit = "单选题";
            break;
          case 3:
            tit = "多选题";
            break;
          case 4:
            tit = "判断题";
            break;
          case 5:
            tit = "主观题";
            break;
        }
        return tit;
      },
      edit() {
        this.$router.push({
          path: "/examinationPaperEdit",
          query: {
            paperId: this.id,
            title: this.title,
            type: 2,

            examType: this.examType,

          },
        });
      },
      changePage(page) {
        this.page = page;
        this.examQuestionReport();
      },
      // 切换低分设置类型设置默认分值
      changeScore() {
        this.lowRange.range = [...this.defaultLowRange.range];
      },
      // 禁止输入负数
      keydownRange(event) {
        if (event.key == "-" || event.key == "e") {
          event.returnValue = "";
        }
      },
      // 关闭低分设置
      closeDiaMinScore() {
        this.lowRange.type = this.defaultLowRange.type;
        this.lowRange.range = [...this.defaultLowRange.range];
      },
      // 保存低分设置
      async _SavelowRange() {

        if (
          this.lowRange.range[0].trim() == "" ||
          this.lowRange.range[1].trim() == ""
        ) {

          this.$message.warning("请补全低分设置！");

          return;

        }
        this.loadingTange = true;
        let { data, status, info } = await this.$request.setLowRange({

          classId: this.classIds[0],

          subjectName: this.subjectName,
          ...this.lowRange,
        });
        this.loadingTange = false;
        if (status === 0) {
          this.$message.success(info);
          this.diaMinScore = false;
          this.examDetail();
        } else {
          this.$message.error(info);
        }
      },
      async _QueryData() {
        this.examDetail();
        this.examStudentReport();
        this.examQuestionReport();
      },
      async examDetail() {
        //详情
        this.loading = true;

        const examDetail =
          this.role == "ROLE_PERSONAL"
            ? this.$request.pExamDetail
            : this.$request.examDetail;

  
        let { data, info, status } = await examDetail({
          examId: this.id,
        });
        this.loading = false;
        if (status === 0) {
          if (data.paperModifyLog) {
            this.paperModifyLog = { ...data?.paperModifyLog };
          }
          this.examReport = { ...data?.examReport };
          this.defaultLowRange = data.lowRange || {
            type: 1,
            range: [60, 0],
          };
          this.lowRange.type = this.defaultLowRange.type;
          this.lowRange.range = [...this.defaultLowRange.range];
        } else {
          this.$message.error(info);
        }
      },
      async _ReScore() {
        //重新记分
        this.loading = true;
        let { data, info, status } = await this.$request.reScore({
          examId: this.id,
        });
        this.loading = false;
        if (status === 0) {

          this.$store.commit("setRefreshTestList", true);

          this.$message.success(info);
          this._QueryData();
          this.paperModifyLog.modifiedTime = "";
          this.paperModifyLog.realName = "";
        } else {
          this.$message.error(info);
        }
      },
      async examStudentReport() {
        //成绩排名-小题分-作答明细
        this.loading = true;

        const examStudentReport =
          this.role == "ROLE_PERSONAL"
            ? this.$request.pExamStudentReport
            : this.$request.examStudentReport;

        let { data, info, status } = await examStudentReport({
          examId: this.id,
        });
        this.loading = false;
        if (status === 0) {
          let optionsList = [];
          this.tableData2 = data?.list.map((item) => {
            let params = {};
  
            const detail = JSON.parse(item.detail);

            if (detail.length) {
              this.showSelect = false;
            }

            if (detail.length > optionsList.length) {
              optionsList = [...detail];
            }
            detail.map((items, index) => {
              params["que" + items.id] = items.id;
              params["score" + items.id] = String(items.score).includes(".")
                ? Number(items.score)
                : items.score;
              params["answer" + items.id] =
                items.answer == 1 ? "✓" : items.answer == 2 ? "✗" : items.answer;
              params["isRight" + items.id] = items.isRight;
              params["questionType" + items.id] = items.questionType;
            });
            return {
              ...item,
              ...params,
            };
          });

          this.questionList = optionsList.sort((a, b) => {
            return a.id - b.id;
          });

          this.exportStudent = [...this.tableData2];

        } else {
          this.$message.error(info);
        }
      },
      async examQuestionReport() {
        //试题分析
        this.loading = true;

        const examQuestionReport =
          this.role == "ROLE_PERSONAL"
            ? this.$request.pExamQuestionReport
            : this.$request.examQuestionReport;

  
        let { data, info, status } = await examQuestionReport({
          examId: this.id,
          page: this.page,
          // size: this.size,
          size: 9999,
        });
        this.loading = false;
        if (status === 0) {
          let optionsList = [{}, {}, {}, {}, {}];

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

            let params = {};
            const detail = JSON.parse(item.detail);
            let lastOPtion = detail?.find((item) => {
              return item.option == "未答";
            });
            let defaultArr = detail?.filter((item) => {
              return item.option != "未答";
            });
  
            optionsList.map((items, index) => {
              if (index != 4) {
                params["count" + index] =
                  defaultArr[index]?.option != "未答"
                    ? defaultArr[index]?.count
                    : "";
                params["persent" + index] =
                  defaultArr[index]?.option != "未答"
                    ? defaultArr[index]?.persent
                    : "";
                params["option" + index] =
                  defaultArr[index]?.option != "未答"
                    ? defaultArr[index]?.option == 1
                      ? "✓"
                      : defaultArr[index]?.option == 2

                        ? "✗"
                        : defaultArr[index]?.option

                    : "";
                items["title"] = "选项" + (index + 1);
              } else {
                items["title"] = "未答";
                params["count" + index] = lastOPtion.count;
                params["persent" + index] = lastOPtion.persent;
                params["option" + index] = "?";
              }
            });
            return {
              ...item,
              ...params,
            };
          });

          this.tableData = tableData?.sort((a, b) => {

            return a.questionIndex - b.questionIndex;
          });
          this.optionsList = [...optionsList];
          this.total = data.count;
          this.setType(0);
        } else {
          this.$message.error(info);
        }
      },

      async exportData() {

        if (this.exportLoading == true) return;
        this.exportLoading = true;

        const exportExamReport =
          this.role == "ROLE_PERSONAL"
            ? this.$request.pExportExamReport
            : this.$request.exportExamReport;

  
        const data = await exportExamReport({

          examId: this.id,

        });
        this.exportLoading = false;

        if (!data.status) {

          let blob = new Blob([data], {
            type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
          });
          downloadFile(
            this.status
              ? "即时测-已归档单卷测练报表.xlsx"
              : "即时测-单卷测练报表.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-content {
    padding: 20px 20px 0;
    height: calc(100% - 60px);
    box-sizing: border-box;
    overflow: auto;

    position: relative;

  }

  .hide {
    display: none;

  }
  
  .persent {
    white-space: nowrap;
  }
  
  .error {
    color: #f30;
  }
  

  .tips {
    height: 48px;
    box-sizing: border-box;
    line-height: 48px;
    padding: 0 16px;
    border: 1px solid #fac7cc;
    border-radius: 5px;
    background-color: #ffebec;
    font-size: 14px;
    color: #fd9795;

    margin: 0 20px 10px 20px;

    display: flex;
  
    &-p {
      flex: 1;
    }
  
    .fa-bell-o {
      font-size: 18px;
      margin-right: 5px;
    }
  }
  
  .tab-box {
    width: 800px;
    margin: 0 auto 12px;
    background: #f8f8f8;
    border-radius: 20px;
    display: flex;
    user-select: none;
  
    .tab-item {
      flex: 1;
      height: 40px;
      line-height: 40px;
      text-align: center;
      font-size: 16px;
      color: #666;
      font-weight: 500;
      background: transparent;
      border-radius: 20px;
      cursor: pointer;
  
      &.active {
        background: #667ffd;
        color: #fff;
      }
    }
  }
  
  .down {
    padding-top: 20px;
    width: 100%;
    display: flex;
    justify-content: space-between;
  }

  .score-set {
    margin-right: 10px;
  }

  
  .hui-box {
    display: flex;
    text-align: center;
  
    .s-txt {
      width: 61px;
      line-height: 144px;
      background: #e2e2e2;
      font-size: 16px;
      color: #fff;
      font-weight: 700;
    }
  
    .hui-ul {
      border-top: 1px solid #e2e2e2;
    }
  
    .hui-li {
      display: flex;
  
      .hui-s {
        height: 48px;
        line-height: 48px;
        border-right: 1px solid #e2e2e2;
        border-bottom: 1px solid #e2e2e2;
        box-sizing: border-box;
      }
  
      .s1 {
        width: 100px;
      }
  
      .s2 {
        width: 110px;
      }
  
      .s3 {
        width: 120px;
      }
    }
  }
  
  // 设置低分值
  .content-header {
    width: 100%;
    position: relative;
  
    .setMinScore {
      position: absolute;
      bottom: 0;
      right: 0px;
    }
  }
  
  .score-ipt {
    width: 80px;
    margin: 0 5px;
  }
  </style>