Jelajahi Sumber

1.ExamPaperPreview.vue 作为考试时的试卷页面
2.ExamResultPage.vue 作为阅卷时的试卷页面

reghao 1 tahun lalu
induk
melakukan
a198546604
3 mengubah file dengan 579 tambahan dan 263 penghapusan
  1. 1 1
      src/router/exam.js
  2. 16 8
      src/views/exam/ExamPaperPreview.vue
  3. 562 254
      src/views/exam/ExamResultPage.vue

+ 1 - 1
src/router/exam.js

@@ -47,7 +47,7 @@ export default {
       meta: { needAuth: true }
     },
     {
-      path: '/exam/result/:examId',
+      path: '/exam/result/:resultId',
       name: 'ExamResultPage',
       component: ExamResultPage,
       meta: { needAuth: true }

+ 16 - 8
src/views/exam/ExamPaperPreview.vue

@@ -56,8 +56,8 @@
                           v-model="singleChecks[ans.questionId]"
                           @change="singleCheckChange(child)"
                         >
-                          <el-radio :label="ans_index">
-                            <span>{{ optionName[ans_index] + '、' + ans.answer }}</span>
+                          <el-radio :label="ans.pos">
+                            <span>{{ optionName[ans.pos-1] + '、' + ans.answer }}</span>
                           </el-radio>
                         </el-radio-group>
                       </div>
@@ -73,8 +73,12 @@
                           v-model="multipleChecked[item[1].pos]"
                           @change="multipleCheckChange(child)"
                         >
-                          <el-checkbox :label="ans_index">
-                            <span>{{ optionName[ans_index] + '、' + ans.answer }}</span>
+                          <el-checkbox
+                            :label="ans.pos"
+                            border
+                            style="margin-top: 20px"
+                          >
+                            <span>{{ optionName[ans.pos-1] + '、' + ans.answer }}</span>
                           </el-checkbox>
                         </el-checkbox-group>
                       </div>
@@ -106,8 +110,8 @@
                     v-model="singleChecks[ans.questionId]"
                     @change="singleCheckChange(item[1])"
                   >
-                    <el-radio :label="ans_index">
-                      <span>{{ optionName[ans_index] + '、' + ans.answer }}</span>
+                    <el-radio :label="ans.pos">
+                      <span>{{ optionName[ans.pos-1] + '、' + ans.answer }}</span>
                     </el-radio>
                   </el-radio-group>
                 </div>
@@ -123,8 +127,12 @@
                     v-model="multipleChecked[item[1].pos]"
                     @change="multipleCheckChange(item[1])"
                   >
-                    <el-checkbox :label="ans_index">
-                      <span>{{ optionName[ans_index] + '、' + ans.answer }}</span>
+                    <el-checkbox
+                      :label="ans.pos"
+                      border
+                      style="margin-top: 20px;"
+                    >
+                      <span>{{ optionName[ans.pos-1] + '、' + ans.answer }}</span>
                     </el-checkbox>
                   </el-checkbox-group>
                 </div>

+ 562 - 254
src/views/exam/ExamResultPage.vue

@@ -1,192 +1,489 @@
 <template>
-  <el-container>
-    <el-header height="150">
-      <el-card style="height: 150px">
-        <span class="examName">{{ examRecord.examName }}</span>
-        <span class="examTime">{{ examRecord.examTime }}</span>
-        <el-row style="margin-top: 55px;">
-          <el-tooltip class="item" effect="dark" content="包括选择题和判断题" placement="top-start">
-            <span style="font-weight: 800;font-size: 17px">
-              客观题得分: {{ examRecord.logicScore }}分</span>
-          </el-tooltip>
-          <el-tooltip class="item" effect="dark" content="简答题与逻辑题" placement="top-start">
-            <span style="float: right;font-weight: 800;font-size: 17px">
-              试卷总分: {{ examRecord.totalScore }}分</span>
-          </el-tooltip>
-        </el-row>
-      </el-card>
+  <el-container v-if="showPaper">
+    <el-header>
+      <el-row>
+        <el-col style="border-bottom: 1px solid #f5f5f5">
+          <span class="startExam">试卷名字:</span>
+          <span style="color: red;font-size: 18px;">{{ examInfo.examName }}</span>
+          <span class="examTitle">考试时间:</span>
+          <span style="color: red;font-size: 18px;">{{ examInfo.examTime }}</span>
+          <el-button
+            type="warning"
+            round
+            style="background-color: #ffd550;float: right;color: black;font-weight: 800"
+            @click="uploadExamToAdmin"
+          >提交阅卷
+          </el-button>
+        </el-col>
+      </el-row>
     </el-header>
 
     <el-main>
-      <el-card>
-        <!--题目信息-->
-        <div v-for="(item,index) in questionInfo" :key="index" style="margin-top: 15px">
-          <div>
-            <i class="num">{{ index + 1 }}</i>
-            <span style="color: red;font-style: italic;font-weight: 400;">&nbsp;{{
-              item.score
-            }}分</span>
-            <span v-if="item.questionType === 1">【单选题】</span>
-            <span v-else-if="item.questionType === 2">【多选题】</span>
-            <span v-else-if="item.questionType === 3">【不定项选择题】</span>
-            <span v-else-if="item.questionType === 4">【判断题】</span>
-            <span v-else-if="item.questionType === 5">【填空题】</span>
-            <span v-else-if="item.questionType === 6">【问答题】</span>
-            <span v-else-if="item.questionType === 7">【理解题】</span>
-            <span v-else>【综合题】</span>
-            <span v-html="item.questionContent" />
-          </div>
-          <!--题目中的配图-->
-          <img
-            v-for="url in item.images"
-            :src="url"
-            title="点击查看大图"
-            alt="题目图片"
-            style="width: 100px;height: 100px;cursor: pointer"
-            @click="showBigImg(url)"
-          >
+      <el-row>
+        <el-col :span="16">
+          <el-row v-for="(item, index) in questionResults" :key="index">
+            <el-row class="card-style">
+              <el-card>
+                <!-- 题目信息 -->
+                <div>
+                  <span v-if="item.questionInfo.questionType === 1">【单选题】</span>
+                  <span v-else-if="item.questionInfo.questionType === 2">【多选题】</span>
+                  <span v-else-if="item.questionInfo.questionType === 3">【不定项选择题】</span>
+                  <span v-else-if="item.questionInfo.questionType === 4">【判断题】</span>
+                  <span v-else-if="item.questionInfo.questionType === 5">【填空题】</span>
+                  <span v-else-if="item.questionInfo.questionType === 6">【问答题】</span>
+                  <span v-else-if="item.questionInfo.questionType === 7">【理解题】</span>
+                  <span v-else>【综合题】</span>
+                  <br>
+                  <br>
+                  <i class="num">{{ item.questionInfo.pos }}</i>
+                  <span style="color: red">
+                    ({{ item.questionInfo.score }} 分)
+                  </span>
+                  <span v-html="item.questionInfo.questionContent" />
+                  <span v-if="item.questionInfo.questionType !== 8" style="color: green">
+                    (得分: {{ item.questionInfo.score }} 分)
+                  </span>
+                  <div v-if="item.questionInfo.questionType === 8">
+                    <div v-for="(child, childIndex) in item.children" :key="childIndex">
+                      <div>
+                        <span style="color: red">
+                          ({{ child.questionInfo.score }} 分)
+                        </span>
+                        <span v-html="child.questionInfo.questionContent" />
+                        <span style="color: green">
+                          (得分: {{ child.questionInfo.score }} 分)
+                        </span>
+                      </div>
+                      <!-- 单选和判断题候选答案列表 -->
+                      <div
+                        v-show="child.questionInfo.questionType === 1 || child.questionInfo.questionType === 4"
+                        style="margin-top: 25px"
+                      >
+                        <el-radio-group
+                          v-for="(ans,ans_index) in child.questionInfo.answer"
+                          :key="ans_index"
+                          v-model="child.userAnswer"
+                          text-color="green"
+                        >
+                          <el-radio-button
+                            :label="ans.pos"
+                            disabled
+                          >
+                            <span
+                              :class="ans.correct ? 'el-icon-check' : ''"
+                            >
+                              {{ optionName[ans_index] + '、' + ans.answer }}
+                            </span>
+                          </el-radio-button>
+                        </el-radio-group>
+                      </div>
 
-          <!-- 单选和判断题候选答案列表 -->
-          <div
-            v-show="item.questionType === 1 || item.questionType === 4"
-            style="margin-top: 25px"
-          >
-            <div class="el-radio-group">
-              <label
-                v-for="(i2,index2) in item.answer"
-                :class="String(index2) === userAnswer[index] && i2.correct ?
-                  'activeAndTrue' : String(index2) === userAnswer[index] ? 'active' :
-                    i2.correct ? 'true' : ''"
-              >
-                <span>{{ optionName[index2] + '、' + i2.answer }}</span>
-                <img
-                  v-for="i3 in i2.images"
-                  v-if="i2.images !== null"
-                  style="position: absolute;left:100%;top:50%;transform: translateY(-50%);
-                  width: 40px;height: 40px;float: right;cursor: pointer;"
-                  title="点击查看大图"
-                  :src="i3"
-                  alt=""
-                  @mouseover="showBigImg(i3)"
+                      <!-- 多选和不定项选择题的候选答案列表 -->
+                      <div
+                        v-show="child.questionType === 2 || child.questionType === 3"
+                        style="margin-top: 25px"
+                      >
+                        <el-checkbox-group
+                          v-for="(ans,ans_index) in child.answer"
+                          :key="ans_index"
+                          v-model="child.userAnswer"
+                          text-color="green"
+                        >
+                          <el-checkbox :label="ans_index">
+                            <span
+                              :class="ans.correct ? 'el-icon-check' : ''"
+                            >
+                              {{ optionName[ans_index] + '、' + ans.answer }}
+                            </span>
+                          </el-checkbox>
+                        </el-checkbox-group>
+                      </div>
+
+                      <!-- 填空题和问答题的回答区 -->
+                      <div
+                        v-show="child.questionType === 5 || child.questionType === 6"
+                        style="margin-top: 25px"
+                      >
+                        <el-input
+                          v-model="userAnswer[curIndex]"
+                          type="textarea"
+                          :rows="8"
+                          placeholder="请输入答案"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- 单选和判断题候选答案列表 -->
+                <div
+                  v-show="item.questionInfo.questionType === 1 || item.questionInfo.questionType === 4"
+                  style="margin-top: 25px"
+                >
+                  <el-radio-group
+                    v-for="(ans,ans_index) in item.questionInfo.answer"
+                    :key="ans_index"
+                    v-model="item.userAnswer"
+                    text-color="green"
+                  >
+                    <el-radio-button
+                      :label="ans.pos"
+                      disabled
+                    >
+                      <span
+                        :class="ans.correct ? 'el-icon-check' : ''"
+                      >
+                        {{ optionName[ans_index] + '、' + ans.answer }}
+                      </span>
+                    </el-radio-button>
+                  </el-radio-group>
+                </div>
+
+                <!-- 多选和不定项选择题的候选答案列表 -->
+                <div
+                  v-show="item.questionInfo.questionType === 2 || item.questionInfo.questionType === 3"
+                  style="margin-top: 25px"
                 >
-              </label>
-            </div>
-          </div>
+                  <el-checkbox-group
+                    v-for="(ans,ans_index) in item.questionInfo.answer"
+                    :key="ans_index"
+                    v-model="item.userAnswer"
+                    text-color="green"
+                  >
+                    <el-checkbox-button
+                      :label="ans.pos"
+                      border
+                      style="margin-top: 20px;"
+                      disabled
+                    >
+                      <span
+                        :class="ans.correct ? 'el-icon-check' : ''"
+                      >
+                        {{ optionName[ans_index] + '、' + ans.answer }}
+                      </span>
+                    </el-checkbox-button>
+                  </el-checkbox-group>
+                </div>
 
-          <!-- 多选和不定项选择题的候选答案列表 -->
-          <div
-            v-show="item.questionType === 2 || item.questionType === 3"
-            style="margin-top: 25px"
-          >
-            <div class="el-radio-group">
-              <label
-                v-for="(i2,index2) in item.answer"
-                :class="(userAnswer[index]+'').indexOf(index2+'') !== -1 && i2.correct
-                  ? 'activeAndTrue' : (userAnswer[index]+'').indexOf(index2+'') !== -1 ? 'active' :
-                    i2.correct ? 'true' : ''"
+                <!-- 填空题的回答区 -->
+                <div
+                  v-show="item.questionInfo.questionType === 5"
+                  style="margin-top: 25px"
+                >
+                  <div style="margin-top: 25px">
+                    <el-row>
+                      <span>用户答案:</span>
+                    </el-row>
+                    <el-row>
+                      <span style="color: green" v-html="item.userAnswer" />
+                    </el-row>
+                  </div>
+                  <div style="margin-top: 25px">
+                    <el-row>
+                      <span>正确答案:</span>
+                    </el-row>
+                    <el-row>
+                      <span style="color: orangered" v-html="item.correctAnswer" />
+                    </el-row>
+                  </div>
+                  <div style="margin-top: 25px">
+                    <span>评分:</span>
+                    <el-input-number
+                      v-model="questionMarks[item.questionInfo.pos].score"
+                      :min="0"
+                      :max="50"
+                      @change="onInputNumber(item.questionInfo)"
+                    />
+                    <el-input
+                      v-model="questionMarks[item.questionInfo.pos].review"
+                      type="textarea"
+                      :rows="3"
+                      placeholder="请输入评语"
+                      @blur="onInputBlur(item.questionInfo)"
+                    />
+                  </div>
+                </div>
+                <!-- 问答题的回答区 -->
+                <div
+                  v-show="item.questionInfo.questionType === 6"
+                  style="margin-top: 25px"
+                >
+                  <div style="margin-top: 25px">
+                    <el-row>
+                      <span>用户答案:</span>
+                    </el-row>
+                    <el-row>
+                      <span style="color: green" v-html="item.userAnswer" />
+                    </el-row>
+                  </div>
+                  <div style="margin-top: 25px">
+                    <el-row>
+                      <span>正确答案:</span>
+                    </el-row>
+                    <el-row>
+                      <span style="color: orangered" v-html="item.correctAnswer" />
+                    </el-row>
+                  </div>
+                  <div style="margin-top: 25px">
+                    <span>评分:</span>
+                    <el-input-number
+                      v-model="questionMarks[item.questionInfo.pos].score"
+                      :min="0"
+                      :max="50"
+                      @change="onInputNumber(item.questionInfo)"
+                    />
+                    <el-input
+                      v-model="questionMarks[item.questionInfo.pos].review"
+                      type="textarea"
+                      :rows="3"
+                      placeholder="请输入评语"
+                      @blur="onInputBlur(item.questionInfo)"
+                    />
+                  </div>
+                </div>
+              </el-card>
+            </el-row>
+          </el-row>
+        </el-col>
+        <!-- 答题卡 -->
+        <el-col :span="8">
+          <el-row class="card-style">
+            <el-card>
+              <div slot="header" class="clearfix">
+                <h1>阅卷须知</h1>
+              </div>
+              <div class="text item">
+                <el-row>
+                  <h3>客观题部分</h3>
+                  <span>
+                    系统已自动对客观题进行了阅卷<br>
+                  </span>
+                  <span>
+                    用户答案使用<span style="color: green">绿色</span>文字标记<br>
+                  </span>
+                  <span>
+                    参考答案前面会使用 <span class="el-icon-check" /> 来标记<br>
+                  </span>
+                </el-row>
+                <el-row>
+                  <h3>主观题部分</h3>
+                  <span>
+                    用户答案使用<span style="color: green">绿色</span>文字标记<br>
+                  </span>
+                  <span>
+                    参考答案使用<span style="color: orangered">红色</span>文字标记<br>
+                  </span>
+                </el-row>
+              </div>
+            </el-card>
+          </el-row>
+          <el-row class="card-style">
+            <el-card>
+              <el-checkbox-group
+                v-for="(value, key) in items"
+                :key="key"
+                v-model="test"
+                text-color="red"
               >
-                <span>{{ optionName[index] + '、' + i2.answer }}</span>
-                <img
-                  v-for="i3 in i2.images"
-                  v-if="i2.images !== null"
-                  style="position: absolute;left:100%;top:50%;transform: translateY(-50%);
-                  width: 40px;height: 40px;float: right;cursor: pointer;"
-                  title="点击查看大图"
-                  :src="i3"
-                  alt=""
-                  @mouseover="showBigImg(i3)"
+                <el-checkbox-button
+                  :label="value.content"
+                  disabled
+                  border
+                  style="margin-top: 20px"
                 >
-              </label>
-            </div>
-          </div>
+                  <span>{{ value.content }}</span>
+                </el-checkbox-button>
+              </el-checkbox-group>
+            </el-card>
+          </el-row>
+          <el-row class="card-style">
+            <el-card>
+              <div>
+                <p style="font-size: 18px;">答题卡</p>
+              </div>
+              <!-- 单选的答题卡 -->
+              <div style="margin-top: 25px">
+                <p style="font-size: 18px;">单选题</p>
+                <el-button
+                  v-for="item in questionList.length"
+                  v-show="questionList[item-1].questionType === 1"
+                  :key="item"
+                  style="margin-top: 10px;margin-left: 15px"
+                  size="mini"
+                  :class="questionList[item-1].questionType === 1 && userAnswer[item-1] !== undefined ?
+                    'done' : userAnswer[item-1] === undefined ? curIndex === (item-1) ? 'orange' : 'noAnswer' : 'noAnswer'"
+                >{{ item }}
+                </el-button>
+              </div>
+              <!-- 多选的答题卡 -->
+              <div style="margin-top: 25px">
+                <p style="font-size: 18px;">多选题</p>
+                <el-button
+                  v-for="item in questionList.length"
+                  v-show="questionList[item-1].questionType === 2"
+                  :key="item"
+                  style="margin-top: 10px;margin-left: 15px"
+                  size="mini"
+                >{{ item }}
+                </el-button>
+              </div>
+              <!-- 不定项选择题的答题卡 -->
+              <div style="margin-top: 25px">
+                <p style="font-size: 18px;">不定项选择题</p>
+                <el-button
+                  v-for="item in questionList.length"
+                  v-show="questionList[item-1].questionType === 3"
+                  :key="item"
+                  style="margin-top: 10px;margin-left: 15px"
+                  size="mini"
+                  :class="questionList[item-1].questionType === 3 && userAnswer[item-1] !== undefined ?
+                    'done' : userAnswer[item-1] === undefined ? curIndex === (item-1) ? 'orange' : 'noAnswer' : 'noAnswer'"
+                >{{ item }}
+                </el-button>
+              </div>
 
-          <!-- 填空题和问答题的回答区 -->
-          <div
-            v-show="item.questionType === 5 || item.questionType === 6"
-            style="margin-top: 25px"
-          >
-            <div class="ques-analysis">
-              <h3 style="font-weight: 400">我的回答:</h3>
-              <p style="font-weight: 400;color: orange"> {{ userAnswer[index] }} </p>
-            </div>
-            <div v-if="markExam">
-              <span>评分:</span>
-              <el-input-number
-                v-model="item.score"
-                :min="0"
-                :max="parseInt(item.score)"
-              />
-              <el-input
-                v-model="markForm.review"
-                type="textarea"
-                :rows="3"
-                placeholder="请输入评语"
-              />
-            </div>
-          </div>
-        </div>
-        <div>
-          <el-button type="primary" @click="submitMark">提交评卷</el-button>
-        </div>
-      </el-card>
-    </el-main>
+              <!-- 判断题的答题卡 -->
+              <div style="margin-top: 25px">
+                <p style="font-size: 18px;">判断题</p>
+                <el-button
+                  v-for="item in questionList.length"
+                  v-show="questionList[item-1].questionType === 4"
+                  :key="item"
+                  style="margin-top: 10px;margin-left: 15px"
+                  size="mini"
+                  :class="questionList[item-1].questionType === 4 && userAnswer[item-1] !== undefined ?
+                    'done' : userAnswer[item-1] === undefined ? curIndex === (item-1) ? 'orange' : 'noAnswer' : 'noAnswer'"
+                >{{ item }}
+                </el-button>
+              </div>
+
+              <!-- 填空题的答题卡 -->
+              <div style="margin-top: 25px">
+                <p style="font-size: 18px;">填空题</p>
+                <el-button
+                  v-for="item in questionList.length"
+                  v-show="questionList[item-1].questionType === 5"
+                  :key="item"
+                  style="margin-top: 10px;margin-left: 15px"
+                  size="mini"
+                  :class="questionList[item-1].questionType === 5 && userAnswer[item-1] !== undefined ?
+                    'done' : userAnswer[item-1] === undefined ? curIndex === (item-1) ? 'orange' : 'noAnswer' : 'noAnswer'"
+                >{{ item }}
+                </el-button>
+              </div>
 
-    <!--图片回显-->
-    <el-dialog :visible.sync="bigImgDialog" @close="bigImgDialog = false">
-      <img style="width: 100%" :src="bigImgUrl">
-    </el-dialog>
+              <!-- 问答题的答题卡 -->
+              <div style="margin-top: 25px">
+                <p style="font-size: 18px;">问答题</p>
+                <el-button
+                  v-for="item in questionList.length"
+                  v-show="questionList[item-1].questionType === 6"
+                  :key="item"
+                  style="margin-top: 10px;margin-left: 15px"
+                  size="mini"
+                  :class="questionList[item-1].questionType === 6 && userAnswer[item-1] !== undefined ?
+                    'done' : userAnswer[item-1] === undefined ? curIndex === (item-1) ? 'orange' : 'noAnswer' : 'noAnswer'"
+                >{{ item }}
+                </el-button>
+              </div>
+
+              <!-- 综合题的答题卡 -->
+              <div style="margin-top: 25px">
+                <p style="font-size: 18px;">综合题</p>
+                <el-button
+                  v-for="item in questionList.length"
+                  v-show="questionList[item-1].questionType === 8"
+                  :key="item"
+                  style="margin-top: 10px;margin-left: 15px"
+                  size="mini"
+                  :class="questionList[item-1].questionType === 8 && userAnswer[item-1] !== undefined ?
+                    'done' : userAnswer[item-1] === undefined ? curIndex === (item-1) ? 'orange' : 'noAnswer' : 'noAnswer'"
+                  @click="curIndex = item-1"
+                >{{ item }}
+                </el-button>
+              </div>
+            </el-card>
+          </el-row>
+        </el-col>
+      </el-row>
+    </el-main>
   </el-container>
 </template>
 
 <script>
-import {getExamResult, getPaperQuestions, submitExamMark} from '@/api/exam'
+import { getExamResult, getPaperQuestions, submitExamMark } from '@/api/exam'
 
 export default {
-  name: 'ExamResult',
+  name: 'ExamPaperPreview',
   data() {
     return {
-      // 考试记录信息
-      examRecord: {},
-      // 考试的信息
+      // 当前考试的信息
       examInfo: {},
-      // 当前考试的题目
-      questionInfo: [],
-      // 页面加载
-      loading: {},
-      // 答案的选项名abcd数据
-      optionName: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
-      // 图片回显的url
-      bigImgUrl: '',
-      // 图片回显的对话框是否显示
+      // 当前的考试题目
+      questionList: [
+        {
+          questionType: ''
+        }
+      ],
+      // 当前题目的索引值
+      curIndex: 0,
+      // 控制大图的对话框
       bigImgDialog: false,
-      // 用户回答的答案
+      // 当前要展示的大图的url
+      bigImgUrl: '',
+      // 用户选择的答案
       userAnswer: [],
-      markExam: false,
-      markForm: {
-        paperId: null,
-        resultId: null,
-        markResults: [
-          {
-            pos: 0,
-            questionId: null,
-            score: 0,
-            markScore: 0,
-            review: null
-          }
-        ]
-      }
+      // 页面数据加载
+      loading: {},
+      // 页面绘制是否开始
+      showPaper: false,
+      // 答案的选项名abcd数据
+      optionName: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
+      // 考试总时长
+      duration: 0,
+      answer: {
+        pos: null,
+        questionId: null,
+        questionType: null,
+        questionAnswer: null,
+        children: []
+      },
+      questionMap: new Map(),
+      childMap: new Map(),
+      userAnswers: new Map(),
+      questionResults: [],
+      questionMarks: [
+        { score: 0, review: '' }, { score: 0, review: '' }, { score: 0, review: '' }, { score: 0, review: '' }, { score: 0, review: '' },
+        { score: 0, review: '' }, { score: 0, review: '' }, { score: 0, review: '' }, { score: 0, review: '' }, { score: 0, review: '' },
+        { score: 0, review: '' }, { score: 0, review: '' }, { score: 0, review: '' }, { score: 0, review: '' }, { score: 0, review: '' },
+        { score: 0, review: '' }, { score: 0, review: '' }, { score: 0, review: '' }, { score: 0, review: '' }, { score: 0, review: '' },
+        { score: 0, review: '' }, { score: 0, review: '' }, { score: 0, review: '' }, { score: 0, review: '' }, { score: 0, review: '' },
+        { score: 0, review: '' }, { score: 0, review: '' }, { score: 0, review: '' }, { score: 0, review: '' }, { score: 0, review: '' },
+        { score: 0, review: '' }, { score: 0, review: '' }, { score: 0, review: '' }, { score: 0, review: '' }, { score: 0, review: '' },
+        { score: 0, review: '' }, { score: 0, review: '' }, { score: 0, review: '' }, { score: 0, review: '' }, { score: 0, review: '' },
+        { score: 0, review: '' }, { score: 0, review: '' }, { score: 0, review: '' }, { score: 0, review: '' }, { score: 0, review: '' },
+        { score: 0, review: '' }, { score: 0, review: '' }, { score: 0, review: '' }, { score: 0, review: '' }, { score: 0, review: '' },
+        { score: 0, review: '' }, { score: 0, review: '' }, { score: 0, review: '' }, { score: 0, review: '' }, { score: 0, review: '' }
+      ],
+      test: ['选项一', '选项三'],
+      items: [
+        { id: 10, content: '选项一', disabled: false, checked: true },
+        { id: 11, content: '选项二', disabled: false, checked: false },
+        { id: 12, content: '选项三', disabled: false, checked: false }
+      ],
+      test1: '选项一',
+      items1: [
+        { id: 0, content: '选项一', disabled: false, checked: true },
+        { id: 1, content: '选项二', disabled: false, checked: false },
+        { id: 2, content: '选项三', disabled: false, checked: false }
+      ]
     }
   },
   created() {
     document.title = '考试结果'
-    this.getExamRecord()
-    // 页面数据加载的等待状态栏
-    this.loading = this.$loading({
-      body: true,
-      lock: true,
-      text: '数据拼命加载中,(*╹▽╹*)',
-      spinner: 'el-icon-loading'
-    })
+    const resultId = this.$route.params.resultId
+    this.getExamResult(resultId)
   },
   methods: {
     renderByMathjax() {
@@ -199,60 +496,86 @@ export default {
         this.MathJax.MathQueue1(className)
       })
     },
-    // 查询用户当时考试的信息
-    async getExamRecord() {
-      const examId = this.$route.params.examId
-      await getExamResult(examId).then((resp) => {
+    getExamResult(resultId) {
+      getExamResult(resultId).then((resp) => {
         if (resp.code === 0) {
-          this.examRecord = resp.data
-          // this.userAnswer = resp.data.userAnswers.split('-')
-          this.userAnswer = resp.data.userAnswers.split(',')
+          const respData = resp.data
+          this.examInfo = {
+            examId: respData.examId,
+            examName: respData.examName,
+            examTime: respData.examTime,
+            resultId: respData.resultId
+          }
+          this.questionResults = resp.data.questionResults
           const paperId = resp.data.examId
-          this.getPaperQuestions(paperId)
-          // 数据加载完毕
-          this.loading.close()
-          this.renderByMathjax()
+          this.getQuestionInfo1(paperId)
         }
       })
     },
-    async getPaperQuestions(paperId) {
-      await getPaperQuestions(paperId).then((resp) => {
+    // 查询考试的题目信息
+    getQuestionInfo1(paperId) {
+      getPaperQuestions(paperId).then(resp => {
         if (resp.code === 0) {
-          this.questionInfo = resp.data || []
-          // 重置问题的顺序 单选 多选 判断 简答
-          this.questionInfo = this.questionInfo.sort(function(a, b) {
+          this.questionList = resp.data || []
+          // 重置问题的顺序 单选 ->  -> 判断 -> 简答
+          this.questionList = this.questionList.sort(function(a, b) {
             return a.questionType - b.questionType
           })
+
+          for (const item of this.questionList) {
+            if (item.questionType === 5 || item.questionType === 6) {
+              this.questionMap.set(item.questionId, item)
+            }
+
+            if (item.children !== undefined && item.children !== null) {
+              for (const child of item.children) {
+                if (child.questionType === 5 || child.questionType === 6) {
+                  this.childMap.set(child.questionId, item.questionId)
+                  this.questionMap.set(item.questionId, item)
+                }
+              }
+            }
+          }
+          this.showPaper = true
+          this.renderByMathjax()
         }
       })
     },
-    // 点击展示高清大图
-    showBigImg(url) {
-      this.bigImgUrl = url
-      this.bigImgDialog = true
+    // ****************************************************************************************************************
+    // 填空和问答题
+    onInputNumber(val) {
+      console.log(this.questionMarks[val.pos])
     },
-    // 根据考试id查询考试中每一题的分数
-    async getQuestionScore(examId) {
+    onInputBlur(val) {
+      console.log(this.questionMarks[val.pos])
     },
-    submitMark() {
-      this.markForm.paperId = this.examRecord.examId
-      this.markForm.resultId = this.examRecord.resultId
-      submitExamMark(this.markForm).then(resp => {
+    async uploadExamToAdmin() {
+      var submitMarks = []
+      for (const item of this.questionMap) {
+        const question = item[1]
+        const pos = question.pos
+        const markForm = this.questionMarks[pos]
+        submitMarks.push({
+          questionId: question.questionId,
+          pos: pos,
+          score: markForm.score,
+          review: markForm.review
+        })
+      }
+
+      const markResult = {}
+      markResult.paperId = this.examInfo.examId
+      markResult.resultId = this.examInfo.resultId
+      markResult.paperMarks = submitMarks
+      submitExamMark(markResult).then((resp) => {
         if (resp.code === 0) {
           this.$notify({
-            title: '提示',
-            message: '评卷结果已提交',
-            type: 'warning',
-            duration: 3000
+            title: 'Tips',
+            message: '卷结果已提交',
+            type: 'success',
+            duration: 2000
           })
           this.$router.push('/exam/marker')
-        } else {
-          this.$notify({
-            title: '提示',
-            message: resp.msg,
-            type: 'warning',
-            duration: 3000
-          })
         }
       }).catch(error => {
         this.$notify({
@@ -262,13 +585,15 @@ export default {
           duration: 3000
         })
       })
+    },
+    showCorrectAnswer(correctAnswer) {
+      this.$message.info(correctAnswer)
     }
   }
 }
 </script>
 
-<style scoped lang="scss">
-
+<style lang="scss" scoped>
 * {
   font-weight: 800;
 }
@@ -278,22 +603,7 @@ export default {
   height: 100%;
 }
 
-.el-container {
-  animation: leftMoveIn .7s ease-in;
-}
-
-@keyframes leftMoveIn {
-  0% {
-    transform: translateX(-100%);
-    opacity: 0;
-  }
-  100% {
-    transform: translateX(0%);
-    opacity: 1;
-  }
-}
-
-.examName {
+.startExam {
   color: #160f58;
   border-bottom: 4px solid #ffd550;
   font-size: 18px;
@@ -301,8 +611,8 @@ export default {
   padding-bottom: 10px
 }
 
-.examTime {
-  font-size: 16px;
+.examTitle {
+  font-size: 18px;
   color: #cbcacf;
   margin-left: 20px;
   font-weight: 700;
@@ -315,6 +625,7 @@ export default {
   border-radius: 4px;
   border: 1px solid #dcdfe6;
   margin-bottom: 10px;
+  cursor: pointer;
   position: relative;
 
   span {
@@ -325,9 +636,34 @@ export default {
   }
 }
 
+.el-radio-group label:hover {
+  background-color: rgb(245, 247, 250);
+}
+
+/*当前选中的答案*/
+.active {
+  border: 1px solid #1f90ff !important;
+  opacity: .5;
+}
+
+/*做过的题目的高亮颜色*/
+.done {
+  background-color: rgb(87, 148, 247);
+}
+
+/*未做题目的高亮颜色*/
+.noAnswer {
+  background-color: rgb(238, 238, 238);
+}
+
+/*当前在做的题目高亮的颜色*/
+.orange {
+  background-color: rgb(255, 213, 80);
+}
+
 .num {
   display: inline-block;
-  background: url('../../assets/img/examTitle.png') no-repeat 100% 100%;
+  background: url('../../assets/img/examTitle.png') no-repeat 95%;
   background-size: contain;
   height: 37px;
   width: 37px;
@@ -338,38 +674,10 @@ export default {
   margin-right: 15px;
 }
 
-/*选中的答案*/
-.active {
-  border: 1px solid #ff1f39 !important;
-  opacity: .5;
-}
-
-/*  选中的答案且是正确答案*/
-.activeAndTrue {
-  border: 1px solid #1f90ff !important;
-  opacity: .5;
-  height: 15px;
-  width: 15px;
-  background-size: contain;
-  background: url('../../assets/img/true.png') no-repeat 95%;
-  position: absolute;
-  top: 0;
-  left: 0;
-}
-
-.true {
-  height: 15px;
-  width: 15px;
-  background-size: contain;
-  background: url('../../assets/img/true.png') no-repeat 95%;
-  position: absolute;
-  top: 0;
-  left: 0;
-}
-
-.ques-analysis {
-  padding: 30px 40px;
-  background: #f6f6f8;
-  margin-bottom: 70px;
+.card-style {
+  padding-top: 5px;
+  padding-bottom: 5px;
+  padding-left: 5px;
+  padding-right: 5px;
 }
 </style>