代码提交_12_31

src/api/user.js

@@ -102,4 +102,41 @@ export const getPracticeTopic = (data) => {
   return axios.get(
     `/Handler/Boat.ashx?action=theorylist&lianxi=1`, { params: data }
   );
+}
+
+//提交练习
+export const submitPracticeTopic = (data) => {
+  return axios({
+    url: `/Handler/Boat.ashx?action=savelianxi`,
+    data: data,
+    method: 'post',
+    headers: { 'Content-Type': 'multipart/form-data' }
+  });
+}
+
+//通过id获取考试记录
+export const getPracticeRecords = (data) => {
+  return axios.get(
+    `/Handler/Boat.ashx?action=querylianxilist`, { params: data }
+  );
+}
+
+//查询考试详情
+export const getPracticeDetails = (data) => {
+  return axios.get(
+    `/Handler/Boat.ashx?action=querylianxidetails`, { params: data }
+  );
+}
+//查询考试人名
+export const getUserName = (data) => {
+  return axios.get(
+    `/Handler/Boat.ashx?action=queryuser`, { params: data }
+  );
+}
+
+//通过resultId查询考试基本详情
+export const getDetailsMap = (data) => {
+  return axios.get(
+    `/Handler/Boat.ashx?action=querylianxiresult`, { params: data }
+  );
 }

src/router/index.js

@@ -254,6 +254,12 @@ const routes = [
     path:'/practiceSuccess',
     name:'practiceSuccess',
     component:()=>import("../views/examModule/practiceSuccess.vue")
+  },
+  //考试详情页
+  {
+    path:'/examDetails',
+    name:'examDetails',
+    component:()=>import("../views/examModule/examDetails.vue")
   }
 ];
 

src/views/examModule/examDetails.vue

@@ -0,0 +1,985 @@
+<script>
+import {
+  getPracticeTopic,
+  getTopicDetail,
+  getTestCache,
+  saveTestCache,
+  submitPracticeTopic,
+  getUserName,
+  getPracticeDetails,
+} from "@/api/user";
+import { sortString } from "@/util/tools";
+
+export default {
+  name: "examDetails",
+  data() {
+    return {
+      // 题目详情
+      testContent: {
+        testType: "多选题",
+        question:
+          "1、以社会主义核心价值观为引领，发展社会主义先进文化，弘扬革命文化，传承中华优秀传统文化，满足人民日益增长的精神文化需求，巩固全党全国各族人民团结奋斗的共同思想基础，不断提升（ ）。",
+        score: "10",
+        your_answer: "",
+        blanks_answer: [],
+        options: [
+          {
+            item_letter: "A",
+            item: "国家文化软实力和中华文化影响力",
+          },
+          {
+            item_letter: "B",
+            item: "国家文化硬实力和中华文化影响力",
+          },
+          {
+            item_letter: "C",
+            item: "国家文化硬实力和中华传统文化影响力",
+          },
+          {
+            item_letter: "D",
+            item: "国家文化硬实力和中华传统文化",
+          },
+        ],
+      },
+      testList: [],
+      //题目数量
+      testTypeNum: [
+        {
+          type: "单选题",
+          children: [],
+        },
+        {
+          type: "多选题",
+          children: [],
+        },
+        {
+          type: "判断题",
+          children: [],
+        },
+        {
+          type: "填空题",
+          children: [],
+        },
+        {
+          type: "简答题",
+          children: [],
+        },
+      ],
+      optionIndex: -1, // 选中的选项
+      examDialogShow: false,
+      // 考试请求参数
+      params: {
+        result_id: "",
+      },
+      //   题量总数
+      questionTotal: 0,
+      passScore: 0, //及格分
+      score: 0, //总分
+      minute: 0, //剩余时间
+      number: 0, //第几题
+      isCache: false, //是否获取完缓存
+      testTitle: "", //试卷名称
+      user_id: "", //用户ID
+      user_name: "", //用户名称
+      countdown: "", //剩余时间
+      timer: "", //定时器
+      inputArr: 0, //填空题输入框长度
+      fileList: [
+        {
+          name: "food.jpeg",
+          url:
+            "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
+        },
+        {
+          name: "food2.jpeg",
+          url:
+            "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
+        },
+      ],
+    };
+  },
+  methods: {
+    //查询考试人名
+    getUser() {
+      this.user_id = this.$route.query.user_id;
+      getUserName({ user_id: this.$route.query.user_id })
+        .then((res) => {
+          this.user_name = res.data.data.real_name;
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+    },
+    // 选项点击事件
+    // optionClick(event, index, item) {
+    //   // 单选题
+    //   if (this.testContent.testType === "多选题") {
+    //     // 多选题
+    //     if (event.target.className.includes("optionSelect")) {
+    //       event.target.className = "exam-left-test-option";
+
+    //       this.testList[this.number - 1].your_answer = this.testList[
+    //         this.number - 1
+    //       ].your_answer.replace(item.item_letter + ",", "");
+    //     } else {
+    //       if (
+    //         this.testList[this.number - 1].your_answer.indexOf(item.item_letter) === -1
+    //       ) {
+    //         this.testList[this.number - 1].your_answer += item.item_letter + ",";
+    //       }
+    //       event.target.className = "exam-left-test-option optionSelect";
+    //     }
+    //   } else {
+    //     if (event.target.className.includes("optionSelect")) {
+    //       event.target.className = "exam-left-test-option";
+    //       this.$set(this.testList[this.number - 1], "your_answer", "");
+    //     } else {
+    //       // 单选题、判断题
+    //       this.$refs.option.forEach((el) => {
+    //         el.className = "exam-left-test-option";
+    //       });
+    //       event.target.className = "exam-left-test-option optionSelect";
+    //       this.$set(this.testList[this.number - 1], "your_answer", item.item_letter);
+    //     }
+
+    //     // this.testList[this.number - 1].your_answer = item.item_letter
+    //   }
+    // },
+    //输入框输入事件
+    handleInput(index) {
+      // this.inputArr = index;
+    },
+    inputValue(value) {
+      this.$set(
+        this.testList[this.number - 1],
+        "your_answer",
+        this.testContent.your_answer
+      );
+    },
+    sparseArrayToNull(arr, length) {
+      if (arr[length - 1] == undefined) {
+        arr[length - 1] = undefined;
+      }
+      for (let i = 0; i < arr.length; i++) {
+        if (arr[i] === undefined) {
+          // 检查稀疏数组的空洞
+          arr[i] = "null";
+        }
+      }
+      return arr;
+    },
+    //交卷按钮
+    handPaper() {
+      //   this.examDialogShow = true;
+      this.$router.push("/examModule?" + this.user_id);
+    },
+    //确定交卷按钮
+    submitTest() {
+      let list = this.testList.map((el) => {
+        if (el.kind == "填空题") {
+          const parts = el.question.split("_");
+          let inputNum = this.generateArray(parts);
+          // let filteredArr = el.blanks_answer.filter(
+          //   (item) => item !== undefined && item !== null
+          // );
+          return {
+            your_answer:
+              el.blanks_answer.length != 0
+                ? this.sparseArrayToNull(el.blanks_answer, inputNum).join("__")
+                : "", // 将数组元素通过 '__' 连接成字符串
+            theory_base_id: el.theory_base_id,
+          };
+        } else if (el.kind == "简答题") {
+          return {
+            your_answer: el.your_answer,
+            theory_base_id: el.theory_base_id,
+          };
+        } else {
+          return {
+            your_answer: el.your_answer.includes(",")
+              ? sortString(el.your_answer).slice(0, -1)
+              : el.your_answer,
+            theory_base_id: el.theory_base_id,
+          };
+        }
+      });
+      let params = sessionStorage.getItem("params");
+      let data = JSON.parse(params);
+      data.list_item_answer = list;
+      let formData = new FormData();
+      formData.append("data", JSON.stringify(data));
+      submitPracticeTopic(formData).then((res) => {
+        localStorage.removeItem("countdownEndTime");
+        this.$router.push("/practiceSuccess");
+      });
+    },
+    //答题卡数据获取
+    getCardData() {
+      // 考试信息
+      this.testTitle = this.$route.query.exam_name; //考试名称
+      // 试卷id
+      this.params.result_id = this.$route.query.id;
+      this.score = this.$route.query.score; //得分
+      this.minute = this.$route.query.examine_time; //考试时间
+      this.passScore = this.$route.query.pass_score; //及格分
+      getPracticeDetails(this.params).then((res) => {
+        // 总数
+        this.questionTotal = res.data.data.length;
+        res.data.data.forEach((el) => {
+          this.testTypeNum.forEach((item) => {
+            if (el.kind === item.type) {
+              item.children.push(el);
+            }
+          });
+        });
+        this.testTypeNum.forEach((item, index) => {
+          this.testList.push(...item.children);
+          item.children.forEach((el) => {
+            // 回答的问题
+            // el.your_answer = "";
+            el.blanks_answer = [];
+            if (el.kind === "单选题") {
+              el.number = el.no;
+            } else if (el.kind === "多选题") {
+              el.number = el.no + this.testTypeNum[0].children.length;
+            } else if (el.kind === "判断题") {
+              el.number =
+                el.no +
+                this.testTypeNum[0].children.length +
+                this.testTypeNum[1].children.length;
+            } else if (el.kind === "填空题") {
+              el.number =
+                el.no +
+                this.testTypeNum[0].children.length +
+                this.testTypeNum[1].children.length +
+                this.testTypeNum[2].children.length;
+            } else if (el.kind === "简答题") {
+              el.number =
+                el.no +
+                this.testTypeNum[0].children.length +
+                this.testTypeNum[1].children.length +
+                this.testTypeNum[2].children.length +
+                this.testTypeNum[3].children.length;
+            }
+          });
+        });
+        //   获取缓存数据
+        this.getCacheData();
+        this.testClick(this.testList[0]);
+      });
+    },
+    //  题目点击
+    testClick(item) {
+      console.log(item, "item");
+      // 保存缓存
+      this.saveCacheData();
+      this.testContent.options = [];
+      this.testContent.question = "";
+      this.testContent.score = item.score;
+      this.testContent.right_answer = item.right_answer;
+      this.testContent.blanks_answer = item.your_answer_desc
+      // 第几个题目
+      this.number = item.number;
+      // 分数赋值
+      // this.testContent.score = item.per_score;
+      this.testContent.testType = item.kind;
+      getTopicDetail({ theoryBaseId: item.theory_base_id }).then((res) => {
+        this.testContent.question = res.data.data.question;
+        this.testContent.options = res.data.data.items;
+      });
+
+      // 当前答案
+      this.testContent.your_answer = item.your_answer;
+      // this.testContent.blanks_answer = item.blanks_answer;
+    },
+    // 获取缓存数据
+    getCacheData() {
+      let params = sessionStorage.getItem("params");
+      let data = JSON.parse(params);
+      let formData = {
+        user_id: data.user_id,
+        batch_id: data.batch_id,
+      };
+      getTestCache(formData).then((res) => {
+        if (res.data.state) {
+          res.data.data.list_item_answer.forEach((val) => {
+            this.testList.forEach((ele) => {
+              if (val.theory_base_id === ele.theory_base_id) {
+                this.$set(ele, "your_answer", val.your_answer);
+                // ele.your_answer = val.your_answer
+              }
+            });
+          });
+          this.testContent.your_answer = this.testList[0].your_answer;
+        } else {
+        }
+
+        this.isCache = true;
+      });
+    },
+    // 保存缓存数据
+    saveCacheData() {
+      let list = this.testList.map((el) => {
+        return {
+          your_answer: el.your_answer,
+          theory_base_id: el.theory_base_id,
+        };
+      });
+      let params = sessionStorage.getItem("params");
+      let data = JSON.parse(params);
+      data.list_item_answer = list.filter((el) => {
+        return el.your_answer;
+      });
+      let formData = new FormData();
+      formData.append("data", JSON.stringify(data));
+      // 保存缓存
+      saveTestCache(formData);
+    },
+    // 下一题点击
+    nextClick() {
+      if (this.number === this.questionTotal) {
+        return;
+      }
+      this.number++;
+      let data = this.testList[this.number - 1];
+      this.testClick(data);
+    },
+    // 上一题点击
+    preClick() {
+      if (this.number === 1 || this.number === 0) {
+        return;
+      }
+      this.number--;
+      let data = this.testList[this.number - 1];
+      this.testClick(data);
+    },
+
+    generateArray(arr) {
+      let count = 0;
+      for (let i = 0; i < arr.length; i++) {
+        if (i % 2 === 1) {
+          count++;
+        }
+      }
+      return count;
+    },
+
+    //文件处理
+    handleRemove(file, fileList) {
+      console.log(file, fileList);
+    },
+    handlePreview(file) {
+      console.log(file);
+    },
+  },
+  mounted() {
+    this.getCardData();
+    //获取用户名
+    this.getUser();
+  },
+
+  computed: {
+    // 将题目字符串按“-”分割，形成一个包含文本和输入框的数组
+    questionParts() {
+      let num = 0;
+        const parts = this.testContent.question.split("_");
+        return parts.map((part, index) => {
+          if (index % 2 === 1) {
+            num++;
+          }
+          return {
+            type: index % 2 === 1 ? "input" : "text",
+            value: part,
+            index: num,
+            totalInput: this.generateArray(parts),
+          };
+        });
+    },
+  },
+  watch: {
+    "testContent.options"(newVal, oldVal) {},
+  },
+};
+</script>
+
+<template>
+  <div class="exam">
+    <div class="exam-box">
+      <div class="exam-left">
+        <div class="exam-test-title">{{ testTitle }}</div>
+        <div class="exam-left-top">
+          <div class="exam-left-num">{{ number }}/{{ questionTotal }}</div>
+          <div class="exam-left-type">{{ testContent.testType }}</div>
+          <span>({{ testContent.score }}分)</span>
+          <div v-if="testContent.testType === '单选题'" class="exam-left-msc">
+            每题只有一个正确答案
+          </div>
+          <div v-else-if="testContent.testType === '多选题'" class="exam-left-msc">
+            每题只有两个以上正确答案
+          </div>
+        </div>
+        <!-- 题干 -->
+        <div class="exam-left-test">
+          <div class="exam-left-test-title">
+            <div v-if="testContent.testType === '填空题'" class="exam-left-test-blanks">
+              <div v-for="(char, index) in questionParts" :key="index">
+                <span v-if="char.type !== 'input'">{{ char.value }}</span>
+                <el-input
+                  v-else
+                  :disabled="true"
+                  v-model="testContent.blanks_answer[char.index - 1]"
+                  @input="handleInput(char.totalInput)"
+                  type="text"
+                  placeholder="请输入答案"
+                  class="answer-input"
+                ></el-input>
+              </div>
+            </div>
+            <div v-else>{{ testContent.question }}</div>
+          </div>
+          <div v-if="testContent.testType === '多选题'" class="exam-left-test-content">
+            <div
+              v-for="(item, index) in testContent.options"
+              ref="option"
+              :class="
+                testContent.your_answer.includes(item.item_letter) ? 'optionSelect' : ''
+              "
+              class="exam-left-test-option"
+              @click="optionClick($event, index, item)"
+            >
+              {{ item.item_letter }}丶{{ item.item }}
+            </div>
+            <div class="exam-left-test-result">
+              <span>得分：{{ testContent.score }}</span>
+              <span>您的答案：{{ testContent.your_answer }}</span>
+              <span>正确答案：{{ testContent.right_answer }}</span>
+            </div>
+          </div>
+          <div
+            v-else-if="testContent.testType === '简答题'"
+            class="exam-left-test-content"
+          >
+            <div class="exam-left-test-shortAnswer">
+              <el-input
+                type="textarea"
+                :rows="14"
+                placeholder="请输入内容"
+                v-model="testContent.your_answer"
+                @input="inputValue"
+              >
+              </el-input>
+              <el-upload
+                class="upload-demo"
+                action="https://jsonplaceholder.typicode.com/posts/"
+                :on-preview="handlePreview"
+                :on-remove="handleRemove"
+                :file-list="fileList"
+                list-type="picture-card"
+              >
+                <el-button
+                  size="small"
+                  type="text"
+                  style="color: #658cf6; font-size: 16px"
+                >
+                  <img src="@/assets/image/attachment.png" style="width: 16px" />
+                  附件上传</el-button
+                >
+              </el-upload>
+            </div>
+          </div>
+          <div v-else class="exam-left-test-content">
+            <div
+              v-for="(item, index) in testContent.options"
+              ref="option"
+              :class="testContent.your_answer === item.item_letter ? 'optionSelect' : ''"
+              class="exam-left-test-option"
+              @click="optionClick($event, index, item)"
+            >
+              {{ item.item_letter }}丶{{ item.item }}
+            </div>
+
+            <div class="exam-left-test-result">
+              <span>得分：{{ testContent.score }}</span>
+              <span>您的答案：{{ testContent.your_answer }}</span>
+              <span>正确答案：{{ testContent.right_answer }}</span>
+            </div>
+          </div>
+          <!--    按钮    -->
+          <div class="exam-left-btn">
+            <div
+              :class="number === 1 ? 'exam-left-btn-pre' : 'exam-left-btn-next'"
+              @click="preClick"
+            >
+              上一题
+            </div>
+            <div
+              :class="
+                number === questionTotal ? 'exam-left-btn-pre' : 'exam-left-btn-next'
+              "
+              style="margin-left: 164px"
+              @click="nextClick"
+            >
+              下一题
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="exam-right">
+        <div class="exam-right-title">答题卡</div>
+        <div class="exam-right-card">
+          <div class="exam-right-card-score">
+            <span>{{ user_name }}</span>
+            <span>{{ minute }} </span>
+          </div>
+          <div class="exam-right-card-time">
+            <span>{{ score }}分</span>
+            <img src="@/assets/image/nojg.png" v-if="score < passScore" />
+            <img src="@/assets/image/jg.png" v-else />
+          </div>
+          <div class="exam-right-card-line"></div>
+          <div v-if="isCache" class="exam-right-card-box">
+            <div v-for="(item, index) in testTypeNum" class="exam-right-card-num">
+              <span class="exam-right-card-num-title"
+                ><span class="type">{{ item.type }}</span>
+                <span>(共{{ item.children.length }}题)</span></span
+              >
+              <div class="exam-right-card-num-item">
+                <span
+                  ref="answer"
+                  v-for="s in item.children"
+                  :class="{
+                    selectQuestion: s.result_desc == '对',
+                    border: s.number === number,
+                  }"
+                  :style="{
+                    'background-color':
+                      (s.result_desc == '错' && s.kind != '简答题') ||
+                      (s.result_desc == '缺' && s.kind != '简答题')
+                        ? 'rgba(135, 85, 96)'
+                        : 'rgba(101, 140, 246, 0.6)',
+                  }"
+                  @click="testClick(s)"
+                  >{{ s.no }}</span
+                >
+              </div>
+            </div>
+          </div>
+          <div class="submit" @click="handPaper"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.exam-test-title {
+  position: absolute;
+  top: -40px;
+  font-size: 24px;
+  color: rgba(255, 255, 255, 1);
+  font-weight: 700;
+  left: 0;
+}
+
+.exam {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+
+  //提示弹窗
+  &-dialog {
+    width: 807px;
+    height: 391px;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    margin: auto;
+    background-image: url("../../assets/image/prompt.png");
+    background-size: 100% 100%;
+
+    &-title {
+      text-align: center;
+      margin-right: 25px;
+      margin-top: 7px;
+      color: rgba(255, 255, 255, 1);
+      font-size: 24px;
+    }
+
+    &-content {
+      margin-top: 113px;
+      text-align: center;
+      font-size: 26px;
+      color: rgba(255, 255, 255, 1);
+    }
+
+    &-btn {
+      display: flex;
+      margin-top: 97px;
+      justify-content: center;
+
+      div {
+        width: 157px;
+        height: 44px;
+        line-height: 44px;
+        text-align: center;
+        background-size: 100% 100%;
+      }
+
+      &-light {
+        color: rgba(255, 255, 255, 1);
+        background-image: url("../../assets/image/highlight-btn.png");
+      }
+
+      &-dark {
+        margin-right: 82px;
+        color: rgba(255, 255, 255, 0.2);
+        background-image: url("../../assets/image/dark-btn.png");
+      }
+    }
+  }
+
+  &-box {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-evenly;
+  }
+
+  &-left::-webkit-scrollbar {
+    display: none;
+  }
+
+  &-left {
+    position: relative;
+    width: 1325px;
+    height: 858px;
+    background-size: 100% 100%;
+    background-image: url("../../assets/image/test.png");
+
+    &-top {
+      margin-top: 32px;
+      display: flex;
+      align-items: center;
+    }
+
+    &-type {
+      border: 2px solid rgba(101, 140, 246, 1);
+      color: rgba(101, 140, 246, 1);
+      padding: 0 7px;
+      margin-left: 20px;
+      font-size: 24px;
+    }
+
+    &-type + span {
+      margin: 0 10px;
+      color: rgba(255, 255, 255, 1);
+      font-size: 20px;
+    }
+
+    &-num {
+      text-align: center;
+      font-size: 26px;
+      line-height: 52px;
+      color: rgba(255, 255, 255, 1);
+      width: 114px;
+      height: 52px;
+      background-size: 100% 100%;
+      background-image: url("../../assets/image/test-num.png");
+    }
+
+    &-msc {
+      color: rgba(255, 255, 255, 0.6);
+      font-size: 18px;
+    }
+
+    //  试卷内容
+    &-test {
+      margin-top: 33px;
+      padding: 0 50px;
+      //题目
+      &-title {
+        font-size: 24px;
+        line-height: 44px;
+        color: rgba(255, 255, 255, 1);
+      }
+      &-blanks {
+        display: flex;
+        flex-wrap: wrap;
+        ::v-deep .el-input__inner {
+          border: none;
+          border-radius: 0;
+          background: transparent;
+          color: #fff;
+          border-bottom: 1px solid #fff;
+          font-size: 20px;
+          width: 200px;
+        }
+      }
+      &-content::-webkit-scrollbar {
+        display: none;
+      }
+
+      //  选项
+      &-content {
+        margin-top: 40px;
+        height: 500px;
+        overflow-y: scroll;
+      }
+      &-result {
+        display: flex;
+        flex-direction: column;
+        span:nth-child(1) {
+          color: #fff;
+        }
+        span:nth-child(2) {
+          margin-top: 10px;
+          color: #ff5858;
+        }
+        span:nth-child(3) {
+          margin-top: 10px;
+          color: #4fe979;
+        }
+      }
+      &-shortAnswer {
+        background: url("../../assets/image/shortAnswer.png") no-repeat;
+        background-size: 100% 100%;
+        height: 305px;
+        ::v-deep .el-textarea__inner {
+          background: transparent;
+          border: none;
+          color: rgb(255, 255, 255);
+        }
+        ::v-deep .upload-demo {
+          height: 160px;
+          display: flex;
+          // flex-direction: column-reverse;
+          margin-top: 40px;
+          position: relative;
+        }
+        ::v-deep .el-upload--picture-card {
+          background: transparent;
+          border: none;
+          border-radius: 0.375rem;
+          box-sizing: border-box;
+          width: 9.25rem;
+          height: 40px;
+          cursor: pointer;
+          line-height: 30px;
+          vertical-align: top;
+          position: absolute;
+          right: 0px;
+          top: -35px;
+        }
+      }
+      ::-webkit-scrollbar {
+        display: none;
+      }
+      .optionSelect {
+        background-color: rgba(101, 140, 246, 0.55);
+      }
+
+      &-option {
+        width: 100%;
+        height: 80px;
+        margin-bottom: 20px;
+        background-image: url("../../assets/image/test-option.png");
+        padding-left: 34px;
+        display: flex;
+        font-size: 22px;
+        color: #ffffff;
+        align-items: center;
+        box-sizing: border-box;
+      }
+    }
+
+    //按钮
+    &-btn {
+      position: absolute;
+      bottom: 50px;
+      display: flex;
+      margin-left: -239px;
+      left: 50%;
+
+      &-pre,
+      &-next {
+        width: 157px;
+        height: 44px;
+        text-align: center;
+        line-height: 44px;
+        background-size: 100% 100%;
+        cursor: pointer;
+      }
+
+      &-pre {
+        color: rgba(255, 255, 255, 0.5);
+        background-image: url("../../assets/image/dark-btn.png");
+      }
+
+      &-next {
+        color: rgba(255, 255, 255, 1);
+        background-image: url("../../assets/image/highlight-btn.png");
+      }
+    }
+  }
+
+  &-right {
+    position: relative;
+    width: 441px;
+    height: 858px;
+    background-size: 100% 100%;
+    background-image: url("../../assets/image/test-card.png");
+
+    //答题卡名称
+    &-title {
+      text-align: center;
+      font-size: 24px;
+      color: rgba(255, 255, 255, 1);
+      margin-top: 16px;
+    }
+
+    &-card {
+      font-size: 18px;
+      color: rgba(255, 255, 255, 1);
+      padding: 46px;
+      //提交按钮
+      .submit {
+        width: 157px;
+        height: 44px;
+        margin: 20px auto;
+        //left: 50%;
+        //margin-left: -78px;
+        //bottom: 50px;
+        background-image: url("../../assets/image/closeDetails.png");
+        cursor: pointer;
+      }
+      &-lenged {
+        width: 400px;
+        height: 80px;
+        background-color: rgba(149, 149, 149, 0.2);
+        position: absolute;
+        bottom: 10px;
+        left: 50%;
+        margin-left: -200px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        div {
+          span {
+            font-size: 14px;
+            margin-right: 26px;
+            span:last-child {
+              margin-right: 0;
+            }
+            i {
+              width: 18px;
+              height: 10px;
+              margin-right: 10px;
+              display: inline-block;
+              box-sizing: border-box;
+            }
+            .current {
+              border: 2px solid rgba(101, 140, 246, 1);
+            }
+            .notDone {
+              background-color: rgba(0, 0, 0, 0.2);
+            }
+            .have {
+              background-color: rgba(64, 253, 137, 0.2);
+            }
+          }
+        }
+      }
+      &-score {
+        justify-content: space-between;
+        display: flex;
+        font-size: 18px;
+      }
+
+      &-line {
+        border: 1px solid rgba(255, 255, 255, 0.3);
+        margin: 22px 0;
+      }
+
+      &-time {
+        margin-top: 37px;
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        span:nth-child(1) {
+          color: rgba(255, 189, 34, 1);
+          font-size: 26px;
+        }
+      }
+
+      //题目容器
+      &-box {
+        position: relative;
+        height: 516px;
+        overflow-y: auto;
+      }
+
+      //  滚动条
+      &-box::-webkit-scrollbar {
+        position: absolute;
+        left: -50px;
+        width: 7px; //修改滚动条宽度
+        background-color: rgba(107, 126, 177, 0.2);
+      }
+
+      &-box::-webkit-scrollbar-thumb {
+        border-radius: 7px;
+        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+        background: rgba(107, 126, 177, 1);
+      }
+
+      //  题目数量
+      &-num {
+        &-title {
+          display: block;
+          margin-bottom: 16px;
+
+          .type {
+            border: 2px solid rgba(101, 140, 246, 1);
+            color: rgba(101, 140, 246, 1);
+            padding: 0 7px;
+            display: inline-block;
+            margin-right: 8px;
+            font-size: 24px;
+          }
+        }
+
+        &-item {
+          display: flex;
+          flex-wrap: wrap;
+          .border {
+            box-sizing: border-box;
+            border: 2px solid rgba(101, 140, 246, 1);
+          }
+          .selectQuestion {
+            background-color: rgba(64, 253, 137, 0.2) !important;
+          }
+
+          span {
+            //display:inline-block ;
+            margin: 0 11px 14px 0;
+            width: 58px;
+            line-height: 38px;
+            text-align: center;
+            color: #fff;
+            background-color: rgba(0, 0, 0, 0.1);
+            height: 38px;
+          }
+
+          span:nth-child(5n) {
+            margin-right: 0 !important;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/views/examModule/examPage.vue

@@ -5,6 +5,7 @@ import {
   savaTestAnswer,
   getTestCache,
   saveTestCache,
+  submitPracticeTopic,
 } from "@/api/user";
 import { sortString } from "@/util/tools";
 
@@ -80,6 +81,19 @@ export default {
       endTime: "",
       countdown: "", //剩余时间
       timer: "", //定时器
+      inputArr: 0, //填空题输入框长度
+      fileList: [
+        {
+          name: "food.jpeg",
+          url:
+            "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
+        },
+        {
+          name: "food2.jpeg",
+          url:
+            "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
+        },
+      ],
     };
   },
   methods: {
@@ -120,16 +134,26 @@ export default {
     },
     //输入框输入事件
     handleInput(index) {
-      // let filteredArr = this.testContent.blanks_answer.filter(
+      // this.inputArr = index;
-      //   (item) => item !== undefined && item !== null
+    },
-      // );
+    inputValue(value) {
-      console.log("value", index, this.testContent.blanks_answer,);
+      this.$set(
-      index.forEach(item => {
+        this.testList[this.number - 1],
-        console.log(filteredArr[item-1]);
+        "your_answer",
-      });
+        this.testContent.your_answer
-      if (this.testContent.testType == "填空题") {
+      );
-
+    },
+    sparseArrayToNull(arr, length) {
+      if (arr[length - 1] == undefined) {
+        arr[length - 1] = undefined;
       }
+      for (let i = 0; i < arr.length; i++) {
+        if (arr[i] === undefined) {
+          // 检查稀疏数组的空洞
+          arr[i] = "null";
+        }
+      }
+      return arr;
     },
     //交卷按钮
     handPaper() {
@@ -138,13 +162,22 @@ export default {
     //确定交卷按钮
     submitTest() {
       let list = this.testList.map((el) => {
-        console.log(el, "el");
         if (el.question_kind == "填空题") {
-          let filteredArr = el.blanks_answer.filter(
+          const parts = el.question.split("_");
-            (item) => item !== undefined && item !== null
+          let inputNum = this.generateArray(parts);
-          );
+          // let filteredArr = el.blanks_answer.filter(
+          //   (item) => item !== undefined && item !== null
+          // );
           return {
-            your_answer: filteredArr.join("__"), // 将数组元素通过 '__' 连接成字符串
+            your_answer:
+              el.blanks_answer.length != 0
+                ? this.sparseArrayToNull(el.blanks_answer, inputNum).join("__")
+                : "", // 将数组元素通过 '__' 连接成字符串
+            theory_base_id: el.theory_base_id,
+          };
+        } else if (el.question_kind == "简答题") {
+          return {
+            your_answer: el.your_answer,
             theory_base_id: el.theory_base_id,
           };
         } else {
@@ -158,13 +191,12 @@ export default {
       });
       let params = sessionStorage.getItem("params");
       let data = JSON.parse(params);
-      console.log(list);
       data.list_item_answer = list;
       let formData = new FormData();
       formData.append("data", JSON.stringify(data));
-      savaTestAnswer(formData).then((res) => {
+      submitPracticeTopic(formData).then((res) => {
         localStorage.removeItem("countdownEndTime");
-        this.$router.push("/practiceSuccess");
+        this.$router.push("/practiceSuccess?score=" + res.data.data.score+'&result_id='+res.data.data.result_id);
       });
     },
     //答题卡数据获取
@@ -350,12 +382,22 @@ export default {
       // 格式化为两位数
       return value < 10 ? `0${value}` : value;
     },
-    generateArray(n) {
+    generateArray(arr) {
-      let result = [];
+      let count = 0;
-      for (let i = 1; i <= n; i++) {
+      for (let i = 0; i < arr.length; i++) {
-        result.push(i);
+        if (i % 2 === 1) {
+          count++;
+        }
       }
-      return result;
+      return count;
+    },
+
+    //文件处理
+    handleRemove(file, fileList) {
+      console.log(file, fileList);
+    },
+    handlePreview(file) {
+      console.log(file);
     },
   },
   mounted() {
@@ -372,12 +414,17 @@ export default {
   computed: {
     // 将题目字符串按“-”分割，形成一个包含文本和输入框的数组
     questionParts() {
+      let num = 0;
       const parts = this.testContent.question.split("_");
       return parts.map((part, index) => {
+        if (index % 2 === 1) {
+          num++;
+        }
         return {
           type: index % 2 === 1 ? "input" : "text",
           value: part,
-          index: this.generateArray(parts.filter((value, i) => i % 2 === 1).length),
+          index: num,
+          totalInput: this.generateArray(parts),
         };
       });
     },
@@ -420,8 +467,8 @@ export default {
                 <span v-if="char.type !== 'input'">{{ char.value }}</span>
                 <el-input
                   v-else
-                  v-model="testContent.blanks_answer[index]"
+                  v-model="testContent.blanks_answer[char.index - 1]"
-                  @input="handleInput(char.index)"
+                  @input="handleInput(char.totalInput)"
                   type="text"
                   placeholder="请输入答案"
                   class="answer-input"
@@ -443,7 +490,38 @@ export default {
               {{ item.item_letter }}丶{{ item.item }}
             </div>
           </div>
-
+          <div
+            v-else-if="testContent.testType === '简答题'"
+            class="exam-left-test-content"
+          >
+            <div class="exam-left-test-shortAnswer">
+              <el-input
+                type="textarea"
+                :rows="14"
+                placeholder="请输入内容"
+                v-model="testContent.your_answer"
+                @input="inputValue"
+              >
+              </el-input>
+              <el-upload
+                class="upload-demo"
+                action="https://jsonplaceholder.typicode.com/posts/"
+                :on-preview="handlePreview"
+                :on-remove="handleRemove"
+                :file-list="fileList"
+                list-type="picture-card"
+              >
+                <el-button
+                  size="small"
+                  type="text"
+                  style="color: #658cf6; font-size: 16px"
+                >
+                  <img src="@/assets/image/attachment.png" style="width: 16px" />
+                  附件上传</el-button
+                >
+              </el-upload>
+            </div>
+          </div>
           <div v-else class="exam-left-test-content">
             <div
               v-for="(item, index) in testContent.options"
@@ -680,6 +758,7 @@ export default {
           background: transparent;
           color: #fff;
           border-bottom: 1px solid #fff;
+          font-size: 24px;
         }
       }
       &-content::-webkit-scrollbar {
@@ -692,7 +771,40 @@ export default {
         height: 500px;
         overflow-y: scroll;
       }
-
+      &-shortAnswer {
+        background: url("../../assets/image/shortAnswer.png") no-repeat;
+        background-size: 100% 100%;
+        height: 305px;
+        ::v-deep .el-textarea__inner {
+          background: transparent;
+          border: none;
+          color: rgb(255, 255, 255);
+        }
+        ::v-deep .upload-demo {
+          height: 160px;
+          display: flex;
+          // flex-direction: column-reverse;
+          margin-top: 40px;
+          position: relative;
+        }
+        ::v-deep .el-upload--picture-card {
+          background: transparent;
+          border: none;
+          border-radius: 0.375rem;
+          box-sizing: border-box;
+          width: 9.25rem;
+          height: 40px;
+          cursor: pointer;
+          line-height: 30px;
+          vertical-align: top;
+          position: absolute;
+          right: 0px;
+          top: -35px;
+        }
+      }
+      ::-webkit-scrollbar {
+        display: none;
+      }
       .optionSelect {
         background-color: rgba(101, 140, 246, 0.55);
       }

src/views/examModule/index.vue

@@ -1,5 +1,5 @@
 <script>
-import { GetSubjectType, GetPractice } from "@/api/user";
+import { GetSubjectType, GetPractice, getPracticeRecords } from "@/api/user";
 
 export default {
   name: "index",
@@ -18,6 +18,8 @@ export default {
       // 考试场次
       testList: [],
       total: 0, //总数
+      isVisible: false, //考试记录弹窗
+      examRecordsTable: [], //考试记录表格
     };
   },
   methods: {
@@ -25,14 +27,6 @@ export default {
     onQuery() {
       this.getTestList();
     },
-    examClick(item, index) {
-      // 状态切换页码初始化
-      this.form.PageIndex = 1;
-      this.examIndex = index;
-      this.form.state = item.state;
-      //   切换状态重新发送请求
-      this.getTestList();
-    },
     getTestList() {
       GetPractice(this.form).then((res) => {
         this.testList = res.data.data;
@@ -57,6 +51,38 @@ export default {
       sessionStorage.setItem("testMsg", JSON.stringify(testMsg));
       sessionStorage.setItem("params", JSON.stringify(data));
     },
+    //练习记录
+    enterExamRecords(row) {
+      let dataMap = {
+        batch_id: row.batch_id,
+        user_id: this.form.user_id,
+      };
+      getPracticeRecords(dataMap)
+        .then((res) => {
+          this.examRecordsTable = res.data.data;
+          this.isVisible = true;
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+    },
+    //查看考试详情
+    goDetails(row){
+      console.log(row,'行');
+      this.$router.push(
+        `/examDetails?id=${row.result_id}&score=${row.score}&user_id=${this.form.user_id}&examine_time=${row.examine_time}&exam_name=${row.exam_name}&pass_score=${row.pass_score}`
+      );
+      let data = {
+        user_id: this.form.user_id,
+        batch_id: row.result_id,
+        list_item_answer: [],
+      };
+      sessionStorage.setItem("params", JSON.stringify(data));
+    },
+    //关闭练习记录
+    closeExamRecords() {
+      this.isVisible = false;
+    },
     currentChange(current) {
       this.form.PageIndex = current;
       this.getTestList();
@@ -93,6 +119,15 @@ export default {
           console.log(err);
         });
     },
+    //表格样式
+    tableRowClassName({ row, rowIndex }) {
+      if (rowIndex % 2 == 1) {
+        return "warning-row";
+      } else {
+        return "success-row";
+      }
+      return "";
+    },
   },
   mounted() {
     // 用户id赋值
@@ -148,7 +183,11 @@ export default {
         <div class="test-box-site-item-btn">
           <!-- <span> 考试记录 </span> -->
           <span>
-            <img src="@/assets/image/ksjl.png" />
+            <img
+              src="@/assets/image/ksjl.png"
+              v-show="item.ks_count > 0"
+              @click="enterExamRecords(item)"
+            />
           </span>
           <!-- <div class="time" v-if="item.batch_state.trim() === '未开始'">
             {{ getCountdown(item.start_time) }}
@@ -167,11 +206,39 @@ export default {
         @current-change="currentChange"
         :current-page="form.PageIndex"
         layout="prev, pager, next"
-        :page-size="8"
+        :page-size="form.PageSize"
         :total="total"
       >
       </el-pagination>
     </div>
+    <!-- 考试记录弹窗 -->
+    <div class="examRecords" v-if="isVisible">
+      <div class="examRecords-title">
+        <span>考试记录</span>
+        <img src="@/assets/image/close.png" @click="closeExamRecords" />
+      </div>
+      <div class="diyTable">
+        <el-table
+          class="my-el-table"
+          :data="examRecordsTable"
+          height="320"
+          :header-cell-style="{
+            background: 'rgba(131, 129, 177, 0.5) !important',
+            color: '#ededed  !important',
+          }"
+          :row-class-name="tableRowClassName"
+        >
+          <el-table-column type="index" label="序号" align="center" />
+          <el-table-column prop="examine_time" label="考试时间" align="center" />
+          <el-table-column prop="score" label="考试成绩" align="center" />
+          <el-table-column label="操作" align="center">
+            <template slot-scope="scope">
+              <el-button type="primary" size="small" @click="goDetails(scope.row)">查看详情</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -388,5 +455,87 @@ export default {
       margin-right: 0;
     }
   }
+  .examRecords {
+    position: fixed; /* Stay in place */
+    // z-index: 1; /* Sit on top */
+    left: 28%;
+    top: 30%;
+    transform: translate(-50%, -50%);
+    width: 807px; /* Could be more or less, depending on screen size */
+    height: 391px;
+    background: #fff;
+    border-radius: 5px;
+    padding: 0 20px;
+    background: url("@/assets/image/examRecords.png") no-repeat;
+    background-size: 100% 100%;
+    animation: popup-enter 0.7s ease-out forwards;
+    &-title {
+      height: 40px;
+      font-size: 24px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      color: #fff;
+      span {
+        left: 42%;
+        position: relative;
+      }
+
+      img {
+        cursor: pointer;
+        margin-left: auto;
+        margin-top: 20px;
+      }
+    }
+  }
+  @keyframes popup-enter {
+    from {
+      opacity: 0;
+      transform: translateY(-20px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+  .diyTable {
+    margin-top: 20px;
+  }
+  ::v-deep .my-el-table {
+    overflow-x: hidden;
+    .el-table__header-wrapper {
+      .el-table__header {
+        width: calc(100% + 32px) !important;
+      }
+    }
+    .el-table__body-wrapper {
+      width: calc(100% + 20px) !important;
+      .el-table__body {
+        width: calc(100% + 20px) !important;
+      }
+    }
+    .el-table__body tr:hover > td {
+      background-color: transparent;
+    }
+  }
+  // 去掉table表格底部白色线条
+  ::v-deep .el-table::before {
+    background-color: transparent;
+  }
+  ::v-deep .el-table td.el-table__cell,
+  ::v-deep .el-table th.el-table__cell.is-leaf {
+    border: none;
+  }
+  ::v-deep .el-table__row.warning-row {
+    background: rgba(60, 58, 74, 0.15) !important;
+  }
+
+  ::v-deep .el-table__row.success-row {
+    background: rgba(131, 129, 177, 0.2) !important;
+  }
+  ::v-deep .el-table tr {
+    color: #fff;
+    background-color: transparent;
+  }
 }
 </style>

src/views/examModule/practiceSuccess.vue

@@ -1,8 +1,12 @@
 <script>
+import { getDetailsMap } from "@/api/user";
 export default {
   name: "practiceSuccess",
   data() {
-    return {};
+    return {
+      score: 0,
+      detailsMap: {},
+    };
   },
   methods: {
     // 进入考场选择页面
@@ -11,6 +15,28 @@ export default {
       let data = JSON.parse(params);
       this.$router.push("/examModule?" + data.user_id);
     },
+    //进入详情页面
+    goDetails() {
+      let params = sessionStorage.getItem("params");
+      let data = JSON.parse(params);
+      this.$router.push(
+        `/examDetails?id=${this.detailsMap.result_id}&score=${this.detailsMap.score}&user_id=${data.user_id}&examine_time=${this.detailsMap.examine_time}&exam_name=${this.detailsMap.exam_name}&pass_score=${this.detailsMap.pass_score}`
+      );
+    },
+    //通过resultId获取需要传到详情页的数据
+    getDetailsData() {
+      getDetailsMap({ result_id: this.$route.query.result_id })
+        .then((res) => {
+          this.detailsMap = res.data.data;
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+    },
+  },
+  mounted() {
+    this.score = this.$route.query.score;
+    this.getDetailsData();
   },
 };
 </script>
@@ -20,11 +46,11 @@ export default {
     <div class="success-page">
       <div class="success-font">您已成功交卷，请继续下一场考试。</div>
       <div class="success-score">
-        <p class="score">60</p>
+        <p class="score">{{ score }}</p>
         <p class="unit">分</p>
       </div>
       <div class="success-btn">
-        <img src="@/assets/image/viewAnalysis.png" />
+        <img @click="goDetails" src="@/assets/image/viewAnalysis.png" />
         <img @click="determine" src="@/assets/image/returnList.png" />
       </div>
     </div>
@@ -79,8 +105,8 @@ export default {
     // background-image: url("../../assets/image/highlight-btn.png");
     display: flex;
     justify-content: space-between;
-    img{
+    img {
-        cursor: pointer;
+      cursor: pointer;
     }
   }
 }