src/views/test/analysis.vue

<template>
  <div ref="main" class="page-container" :class="dialogVisible ? 'active' : ''">
    <back-box>
      <template slot="title">
        <span>单卷分析</span>
      </template>
    </back-box>
    <div class="tips" v-if="paperModifyLog.modifiedTime">
      <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="page-content">
      <div class="tab-box">
        <span
          class="tab-item"
          :class="type == 1 ? 'active' : ''"
          @click="setType(1)"
          >试题分析</span
        >
        <span
          class="tab-item"
          :class="type == 2 ? 'active' : ''"
          @click="setType(2)"
          >成绩排名</span
        >
        <span
          class="tab-item"
          :class="type == 3 ? 'active' : ''"
          @click="setType(3)"
          >小题分报表</span
        >
        <span
          class="tab-item"
          :class="type == 4 ? 'active' : ''"
          @click="setType(4)"
          >作答明细表</span
        >
      </div>
      <el-table :max-height="tableMaxHeight" v-show="type == 1" :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="'选项' + (index + 1)"
          :prop="'count' + index"
          align="center"
        >
        </el-table-column>
      </el-table>
      <div class="hui-box" v-show="type == 1">
        <span class="s-txt">汇总</span>
        <ul class="hui-ul">
          <li class="hui-li">
            <span class="hui-s s1">主观题</span>
            <span class="hui-s s1">{{ paperModifyLog.subjectiveScore }}</span>
            <span class="hui-s s2">{{
              paperModifyLog.subjectiveHighestScore
            }}</span>
            <span class="hui-s s2">{{
              paperModifyLog.subjectiveLowestScore
            }}</span>
            <span class="hui-s s2">{{
              paperModifyLog.subjectiveAvgScore
            }}</span>
            <span class="hui-s s3"
              >{{ paperModifyLog.subjectiveClassScoringRate }}%</span
            >
          </li>
          <li class="hui-li">
            <span class="hui-s s1">客观题</span>
            <span class="hui-s s1">{{ paperModifyLog.objectiveScore }}</span>
            <span class="hui-s s2">{{
              paperModifyLog.objectiveHighestScore
            }}</span>
            <span class="hui-s s2">{{
              paperModifyLog.objectiveLowestScore
            }}</span>
            <span class="hui-s s2">{{ paperModifyLog.objectiveAvgScore }}</span>
            <span class="hui-s s3"
              >{{ paperModifyLog.objectiveClassScoringRate }}%</span
            >
          </li>
          <li class="hui-li">
            <span class="hui-s s1">整卷</span>
            <span class="hui-s s1">{{ paperModifyLog.examPaperScore }}</span>
            <span class="hui-s s2">{{ paperModifyLog.highestScore }}</span>
            <span class="hui-s s2">{{ paperModifyLog.lowestScore }}</span>
            <span class="hui-s s2">{{ paperModifyLog.avgScore }}</span>
            <span class="hui-s s3">{{ paperModifyLog.classScoringRate }}%</span>
          </li>
        </ul>
      </div>
      <el-table
        v-show="type == 2"
        :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 == 3"
        :max-height="tableMaxHeight"
        :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="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="'题目' + item.id"
          :prop="'score' + item.id"
        >
        </el-table-column>
      </el-table>
      <el-table
      :max-height="tableMaxHeight"
        v-show="type == 4"
        :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="'题目' + item.id"
        >
          <template slot-scope="scope">
            <span
              v-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'"
            >
              {{ scope.row["questionType" + item.id] == 5 ? "*" : "-" }}
            </span>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-box" v-show="type == 1">
        <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 class="down">
        <el-button
          @click="exportData"
          type="info"
          plain
          round
          icon="fa fa-cloud-download"
          >导出报表</el-button
        >
        <div>
          <el-button
            v-if="paperModifyLog.subjectiveScore != 0"
            @click="diaUp = true"
            type="primary"
            round
            v-loading="exportLoading"
            >导入主观题分数</el-button
          >
          <el-button @click="edit" type="primary" round>修改答案</el-button>
        </div>
      </div>
      <div class="edit-dia" v-show="dialogVisible" height="100%">
        <editAnswer
          ref="editAnswer"
          :title="title"
          :score="score"
          @cancel="cancel"
          @saveSuccess="saveSuccess"
        />
      </div>
      <el-dialog title="导入主观题分数" :visible.sync="diaUp" width="600">
        <up-load :url="url" :examId="id" fileName="教师名单">
          <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>
  </div>
</template>
<script>
import { downloadFile } from "@/utils";
import editAnswer from "./editAnswer.vue";
export default {
  components: { editAnswer },
  data() {
    return {
      tableMaxHeight:300,
      loading: false,
      exportLoading: false,
      diaUp: false,
      dialogVisible: false,
      url: "/api_html/teaching/importSubjectiveScore",
      id: "",
      title: "",
      score: "",
      type: 1,
      paperModifyLog: {
        realName: "",
        modifiedTime: "",
        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,
    };
  },
  created() {
    this.id = this.$route.query.id;
    this.title = this.$route.query.title || "";
    this.score = this.$route.query.score || "";
    this._QueryData();
  },
  methods: {
    setType(type){
      this.tableMaxHeight = this.$refs.main.offsetHeight-120
      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.$refs.editAnswer.edit(this.id);
      this.dialogVisible = true;
    },
    cancel() {
      this.dialogVisible = false;
    },
    saveSuccess() {
      this.dialogVisible = false;
      this._QueryData();
    },
    changePage(page) {
      this.page = page;
      this.examQuestionReport();
    },
    async downExcel() {
      let data = await this.$request.subjectiveScoreTemplate({
        examId: this.id,
      });
      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.message);
      }
    },
    async _QueryData() {
      this.examDetail();
      this.examStudentReport();
      this.examQuestionReport();
    },
    async examDetail() {
      //详情
      this.loading = true;
      let { data, info, status } = await this.$request.examDetail({
        examId: this.id,
      });
      this.loading = false;
      if (status === 0) {
        if (data.examReport) {
          this.paperModifyLog = { ...data.examReport };
        }
      } 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.$message.success(info);
        this._QueryData();
        this.paperModifyLog.modifiedTime = "";
        this.paperModifyLog.realName = "";
      } else {
        this.$message.error(info);
      }
    },
    async examStudentReport() {
      //成绩排名-小题分-作答明细
      this.loading = true;
      let { data, info, status } = await this.$request.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 > optionsList.length) {
            optionsList = [...detail];
          }
          console.log(detail);
          detail.map((items, index) => {
            params["que" + items.id] = items.id;
            params["score" + items.id] = Number(items.score).toFixed(2);
            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];
      } else {
        this.$message.error(info);
      }
    },
    async examQuestionReport() {
      //试题分析
      this.loading = true;
      let { data, info, status } = await this.$request.examQuestionReport({
        examId: this.id,
        page: this.page,
        size: this.size,
      });
      this.loading = false;
      if (status === 0) {
        let optionsList = [];
        this.tableData = data?.list.map((item) => {
          let params = {};
          const detail = JSON.parse(item.detail);
          if (detail.length > optionsList.length) {
            optionsList = [...detail];
          }
          console.log(detail);
          detail.map((items, index) => {
            params["count" + index] = items.count;
            params["option" + index] =
              items.option == 1 ? "✓" : items.option == 2 ? "✗" : items.option;
          });
          return {
            ...item,
            ...params,
          };
        });
        this.optionsList = [...optionsList];
        this.total = data.count;
      } else {
        this.$message.error(info);
      }
    },
    //导出
    async exportData() {
      if ((this.exportLoading = true)) return;
      this.exportLoading = true;
      const { data, status, info } = await this.$request.exportData();
      this.exportLoading = false;
      if (data) {
        downloadFile(this.title + "报表", data);
      } 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;
  min-height: 100%;
  &.active {
    overflow: hidden;
  }
  .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;
  }
}
.error {
  color: #f30;
}
.page-content {
  padding: 20px 20px 0;
}
.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: 10px 20px 20px 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;
}
.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;
    }
  }
}
</style>