front/src/views/questioncenter/AnswerDetails.vue

<template>
  <div style="padding: 20px">
    <!-- 头部 -->
    <el-card>
      <div class="header">
        <div class="header_tit">
          <span>答题情况</span>
          <span class="more" @click="onShowJuYiFanSan" v-if="knowledgeId"
            >举一反三</span
          >
        </div>
        <!-- 基本信息 -->
        <table class="basic_info">
          <tr>
            <th>科目</th>
            <th>正确</th>
            <th>错误</th>
            <th>正确率</th>
            <th>用时</th>
            <th>日期</th>
          </tr>
          <tbody>
            <td>{{ topInfo.coursename || "" }}</td>
            <td>{{ topInfo.rights || 0 }}</td>
            <td>{{ topInfo.wrongs || 0 }}</td>
            <td>{{ topInfo.rate || 0 }}</td>
            <td>{{ topInfo.seconds || 0 }} 秒</td>
            <td>{{ topInfo.day || "0000-00-00" }}</td>
          </tbody>
        </table>
      </div>
    </el-card>
    <!-- 做题详情 -->
    <el-card class="info" id="question_list">
      <el-table
        ref="expandstable"
        :data="items"
        style="width: 100%"
        align="center"
        @expand-change="expandChange"
      >
        <el-table-column type="index" label="序号" width="150px">
        </el-table-column>
        <el-table-column
          label="章节"
          width="500"
        ><template>
          {{topInfo.chapterName}}
        </template></el-table-column>
        <el-table-column prop="detail.answer" label="你的答案">
        </el-table-column>
        <el-table-column prop="detail.correct" label="正确答案">
        </el-table-column>
        <el-table-column label="对错">
          <template slot-scope="scope">
            <img
              v-if="scope.row.detail.answer == scope.row.detail.correct"
              src="@/assets/images/icon_right.png"
            />
            <img v-else src="@/assets/images/icon_wrong.png" />
          </template>
        </el-table-column>
        <el-table-column type="expand" label="操作">
          <template slot-scope="scope">
            <!-- 题目解析 -->
            <div class="que_info">
              <div class="collect">
                <img src="" alt="" />
              </div>
              <div class="info_right">
                <div class="que_tit">
                  <div>【题文】</div>
                  <div class="center" v-html="scope.row.title"></div>
                  <div class="fix">
                    <span>正确答案</span>
                    <span>{{ scope.row.answer1 }}</span>
                  </div>
                </div>
                <div class="option-list">
                  <div class="option-item">
                    <span class="option-symbol">A</span>
                    <span v-html="scope.row.optionA"></span>
                  </div>
                  <div class="option-item">
                    <span class="option-symbol">B</span>
                    <span v-html="scope.row.optionB"></span>
                  </div>
                  <div class="option-item">
                    <span class="option-symbol">C</span>
                    <span v-html="scope.row.optionC"></span>
                  </div>
                  <div class="option-item">
                    <span class="option-symbol">D</span>
                    <span v-html="scope.row.optionD"></span>
                  </div>
                </div>
                <div class="que_options"></div>
                <div class="prase">
                  <div class="jiexi">解析</div>
                  <div v-html="scope.row.parse"></div>
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
        <template slot="empty">
          <div class="empty-box">
            <img src="@/assets/images/icon_data.png" />
            <span>没有信息</span>
          </div>
        </template>
      </el-table>
    </el-card>
    <div class="btn">
      <span @click="backPractice">返回练习 </span>
    </div>
    <!-- 弹出警告 -->
    <el-dialog title="举一反三" :visible.sync="isShowJuYiFanSan" width="80%">
      <div class="paper_questions" id="question_simulate">
        <div class="que_item" v-for="(item, index) in queList" :key="item.id">
          <!-- 题目 -->
          <div class="que_content" style="display: flex">
            <div>{{ index + 1 }}.</div>
            <span v-html="item.title"></span>
          </div>
          <!-- 选项 -->
          <div class="options">
            <el-radio-group
              text-color="#ccc"
              v-model="item['group']"
              @change="onOptionClick(item)"
            >
              <div class="option" v-if="item.optionA">
                <el-radio label="A">
                  <span class="option-symbol">A</span>
                  <span v-html="item.optionA"></span>
                </el-radio>
              </div>
              <div class="option" v-if="item.optionB">
                <el-radio label="B">
                  <span class="option-symbol">B</span>
                  <span v-html="item.optionB"></span>
                </el-radio>
              </div>
              <div class="option" v-if="item.optionC">
                <el-radio label="C">
                  <span class="option-symbol">C</span>
                  <span v-html="item.optionC"></span>
                </el-radio>
              </div>
              <div class="option" v-if="item.optionD">
                <el-radio label="D">
                  <span class="option-symbol">D</span>
                  <span v-html="item.optionD"></span>
                </el-radio>
              </div>
            </el-radio-group>
          </div>
          <!-- :class="item['group'][0]==item.answer1?'success':'error'" -->
          <div class="is-correct" v-if="item['group'].length > 0">
            <div class="correct-text" :class="item['group'][0]==item.answer1?'success':'error'">正确答案:{{ item.answer1 }}</div>
            <div class="prase">
              <div class="jiexi">解析</div>
              <div v-html="item.parse"></div>
            </div>
          </div>
        </div>
        <el-button @click="onShowJuYiFanSan">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  diagnosticRecordsDetail,
  getQuestionsByIds,
  drawInferences,
} from "@/api/webApi/webQue.js";
export default {
  data() {
    return {
      topInfo: {},
      subjectName: "",
      wrongNum: 0,
      seconds: 0,
      isShowJuYiFanSan: false,
      date: "",
      correctPercent: "",
      correctNum: 0,
      items: [],
      chapterName: "",
      batchno: 0,
      knowledgeId: 0,
      recordsDetail: {},
      queList: [],
      answerForm: [],
    };
  },

  created() {
    let query = this.$route.query;
    let info = query.info;
    if (query.hasOwnProperty("knowledgeId")) {
      this.knowledgeId = query.knowledgeId;
    }
    if (query.hasOwnProperty("batchno")) {
      this.batchno = query.batchno;
    }
    if (query.hasOwnProperty("type") && query.type == 1) {
      this.formatData(JSON.parse(decodeURIComponent(info)));
      return;
    } else {
      this.topInfo = JSON.parse(decodeURIComponent(info));
      if (this.topInfo.hasOwnProperty("rate")) {
        this.topInfo["rate"] = this.topInfo["rate"] + "%";
      }
      console.log("topInfo", this.topInfo);
      this.httpDiagnosticRecordsDetail();
    }
  },
  methods: {
    onShowJuYiFanSan() {
      this.isShowJuYiFanSan = !this.isShowJuYiFanSan;
      if (this.isShowJuYiFanSan) {
        this.httpDrawInferences();
        this.$nextTick(_=>this.mxGlobal.MathQueue('question_simulate'))
      }
    },
    httpDiagnosticRecordsDetail() {
      diagnosticRecordsDetail({
        batchno: this.batchno,
      }).then((res) => {
        this.getQuestionIds(res.rows);
      });
    },
    httpDrawInferences() {
      drawInferences({
        knowledgeId: this.knowledgeId,
      }).then((res) => {
        this.queList = this.formatQueData(res.data);
        console.log(res);
      });
    },
    formatQueData(data) {
      let len = data.length;
      for (let i = 0; i < len; i++) {
        data[i]["group"] = [];
      }
      return data;
    },
    onOptionClick(res, row) {
      console.log(res);
      console.log(row);
    },
    formatData(data) {
      data["coursename"] = data["subjectName"];
      data["rights"] = data["correctNum"];
      data["wrongs"] = data["wrongNum"];
      data["rate"] = data["correctPercent"];
      data["day"] = data["date"];
      let list = data.items;
      let len = list.length;
      let qList = [];
      for (let i = 0; i < len; i++) {
        let data = list[i]["question"];
        data["detail"] = list[i]["question"];
        data["detail"]["answer"] = list[i]["yourAnswer"];
        data["detail"]["correct"] = list[i]["correctAnswer"];
        qList.push(data);
      }
      this.items = qList;
      this.topInfo = data;
    },
    getQuestionIds(data) {
      let len = data.length;
      let ids = [];
      for (let i = 0; i < len; i++) {
        let id = data[i]["questionid"];
        ids.push(id);
        this.recordsDetail[id] = data[i];
      }
      getQuestionsByIds({
        ids: ids.toString(),
      }).then((res) => {
        this.formatQusestion(res.data);
      });
    },
    formatQusestion(questionList) {
      let len = questionList.length;
      for (let i = 0; i < len; i++) {
        let qid = questionList[i]["id"];
        if (this.recordsDetail[qid]) {
          questionList[i]["detail"] = this.recordsDetail[qid];
        }
      }
      console.log(questionList);
      this.items = questionList;
      this.$nextTick(_=>this.mxGlobal.MathQueue('question_list'))
    },
    expandChange(item, rows) {
      this.$nextTick(_=>this.mxGlobal.MathQueue('question_list'))
      console.log(item);
    },
    expandsHandle(row) {
      console.log(row);
      this.$refs.expandstable.toggleRowExpansion(row, true);
      this.$nextTick(_=>this.mxGlobal.MathQueue('question_list'))
    },
    backPractice() {
      this.$router.push({
        path: "/question-center/smartExercise",
      });
    },
  },
};
</script>
<style scoped>
.header_tit {
  padding: 16px 32px 16px 20px;
  border-bottom: 1px solid #b7b7b7;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 500;
  color: #343434;
}
.more {
  color: white;
  background: #47c6a2;
  right: 32px;
  padding: 6px 16px;
  border-radius: 16px;
}
.basic_info {
  width: 100%;
  text-align: left;
  padding: 36px 21px;
}
.basic_info tr {
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #717171;
  line-height: 17px;
}
.basic_info td {
  font-size: 21px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #343434;
  line-height: 29px;
}
.info {
  margin-top: 16px;
  padding: 0;
}
.view {
  cursor: pointer;
  color: #47c6a2;
  display: flex;
  align-items: center;
}
.view img {
  margin-right: 5px;
  height: 100%;
}
.prase {
  border: 2px solid #47c6a2;
  display: flex;
  margin-top: 24px;
}
.prase .jiexi {
  background: #47c6a2;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 22px;
  color: white;
}
.prase div:last-child {
  padding: 10px;
}
.empty-box {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.que_tit {
  display: flex;
  position: relative;
}
.que_tit .fix {
  position: absolute;
  right: 0;
}
.que_tit .fix > span:first-child {
  background: #47c6a2;
  color: white;
  padding: 4px;
  border-radius: 3px;
  margin-right: 28px;
}
.btn {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}
.btn span {
  padding: 14px 29px;
  color: white;
  background: #47c6a2;
  border-radius: 4px;
  cursor: pointer;
}
.center {
  width: 1000px;
}
.option-list {
  margin-top: 10px;
}
.option-item {
  line-height: 30px;
}
.option-symbol {
  margin-right: 10px;
}

.que_item {
  border-radius: 1px;
  border: 1px solid #dedede;
  margin-bottom: 8px;
}
.que_content {
  padding: 12px 24px 0 33px;
  font-size: 14px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #4c4c4c;
  line-height: 27px;
  margin-bottom: 40px;
}
.options {
  padding-left: 36px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #4c4c4c;
  line-height: 27px;
}
.options .option {
  margin-bottom: 10px;
}
.paper_questions {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.que_item {
  width: 100%;
}
.is-correct {
  padding: 10px 36px;
}
.correct-text.success {
  color: #47c6a2;
}
.correct-text.error {
  color: crimson;
}
</style>