民航服务基本技能

zhongshujie

2024-12-13 2d7f36bc2b00c7e8aaa2964834a911dcf400c8a7

 src/components/examinations/index.vue

@@ -1,18 +1,38 @@
<template>
  <div class="examination" v-loading="loading">
    <div v-for="(item, nindex) in cardList" :key="nindex" class="border-box" v-show="item.infoList.length">
      <p class="catalogName">
        <span v-if="nindex == 0">一、</span>
        <span v-if="nindex == 1">二、</span>
        <span v-if="nindex == 2">三、</span>
        <span v-if="nindex == 3">四、</span>
        <span v-if="nindex == 4">五、</span>
        <span>{{ item.catalogName }}</span>
    <div
      v-for="(item, nindex) in cardData"
      :key="nindex + 'item'"
      class="border-box"
      v-show="item.infoList.length"
    >
      <p class="catalogName" :style="{ color: primaryColor }">
        <span class="catalogName-box">
          <span v-if="nindex == 0">一、</span>
          <span v-if="nindex == 1">二、</span>
          <span v-if="nindex == 2">三、</span>
          <span v-if="nindex == 3">四、</span>
          <span v-if="nindex == 4">五、</span>
          <span v-html="item.catalogName"></span>
        </span>
        <img
          :src="item.isCollect ? isHeart : heart"
          alt=""
          class="collect-png"
          @click="setCollect(nindex, index)"
          v-if="!hideCollect && item.type == 'material'"
        />
      </p>
      <el-image
        v-if="item.catalogImage"
        :src="item.catalogImage"
        :preview-src-list="[item.catalogImage]"
        class="catalogImage"
      ></el-image>
      <ul>
        <li
          v-for="(value, index) in item.infoList"
          :key="value.id"
          :key="index + 'value'"
          :id="'listItem-' + value.id"
        >
          <!-- 标题 -->
@@ -21,23 +41,28 @@
              <span
                class="questionNum"
                :style="{
                  marginTop: value.questionType == 'completion' ? '12px' : '0',
                  marginTop:
                    value.questionType == 'completion' ||
                    value.questionType == 'mathField'
                      ? '12px'
                      : '0',
                }"
                >{{ index + 1 }}. </span
              >
                >{{ index + 1 }}.
              </span>
              <!-- 听力进度条 -->
              <!-- <answerAudioPlayer :audioUrl="value.src" v-show="item.name == '听力题'" /> -->
              <!-- 题干 -->
              <!-- 仅文字 -->
              <p
                class="titleText"
                class="titleText text-fl"
                v-if="
                  value.stemStyle == 'Txt' && value.questionType != 'completion'
                  value.stemStyle == 'Txt' &&
                  value.questionType != 'completion' &&
                  value.questionType != 'dropdown' &&
                  value.questionType != 'mathField'
                "
                :id="value.id"
              >
                {{ value.stem.stemTxt }}
              </p>
                v-html="value.stem.stemTxt"
              ></p>
              <!-- 仅图片 -->
              <el-image
                class="stemImg"
@@ -50,7 +75,7 @@
                class="stemTxtAndImage titleText"
                v-else-if="value.stemStyle == 'TxtAndImage'"
              >
                <span> {{ value.stem.stemTxt }}</span>
                <span v-html="value.stem.stemTxt"> </span>
                <el-image
                  :src="getPublicImage(value.stem.stemImage, 150)"
                  :preview-src-list="[getPublicImage(value.stem.stemImage)]"
@@ -58,21 +83,44 @@
                ></el-image>
              </p>
              <!-- 填空题题干 -->
              <p class="titleText" v-if="value.questionType == 'completion'">
              <p
                class="titleText"
                v-if="
                  value.questionType == 'completion' ||
                  value.questionType == 'mathField'
                "
              >
                <span
                  v-for="(itemText, indexText) in value.stem"
                  :key="indexText"
                  :key="indexText + 'questionType'"
                >
                  <span v-if="typeof itemText == 'string'" >{{ itemText }}</span>
                  <!-- &nbsp; -->
                  <el-input
                    v-else
                  <span
                    v-if="typeof itemText == 'string'"
                    v-html="itemText"
                    class="input-txt"
                  ></span>
                  <input
                    v-if="
                      typeof itemText != 'string' &&
                      value.questionType == 'completion'
                    "
                    type="text"
                    class="input"
                    v-model.trim="value.userAnswer[itemText.num]"
                    :disabled="value.isComplete"
                    :style="{ backgroundColor: inputBc }"
                  />
                  <!-- &nbsp; -->
                  <math-field
                    v-if="
                      typeof itemText != 'string' &&
                      value.questionType == 'mathField'
                    "
                    class="mathField"
                    :menuItems="[]"
                    @input="onChangeInput($event, nindex, index, itemText.num)"
                  >
                    {{ value.userAnswer[itemText.num] }}
                  </math-field>
                </span>
              </p>
              <!-- 富文本 -->
@@ -82,7 +130,39 @@
                v-html="value.stem.stemTxt"
                v-cloak
              ></p>
              <!-- 下拉选择题 -->
              <p class="titleText" v-if="value.questionType == 'dropdown'">
                <span
                  v-for="(itemText, indexText) in value.stem"
                  :key="indexText + 'questionType'"
                >
                  <span
                    v-if="typeof itemText == 'string'"
                    v-html="itemText"
                    class="input-txt"
                  ></span>
                  <select
                    v-else
                    v-model="value.userAnswer"
                    :disabled="value.isComplete"
                  >
                    <option
                      v-for="(citem, cindex) in value.option"
                      :key="cindex + 'dropdown'"
                      :label="citem"
                      :value="citem"
                    ></option>
                  </select>
                </span>
              </p>
            </div>
            <img
              :src="value.isCollect ? isHeart : heart"
              alt=""
              class="collect-png"
              @click="setCollect(nindex, index)"
              v-if="!hideCollect && item.type != 'material'"
            />
            <!-- 收藏 -->
          </div>
          <div class="questionContent">
@@ -97,8 +177,8 @@
              v-model="value.userAnswer"
            >
              <el-radio
                v-for="content in value.option"
                :key="content.value"
                v-for="(content, contentIndex) in value.option"
                :key="contentIndex + 'contentIndex'"
                :label="content.value"
                :class="
                  value.optionStyle == 'Image' ||
@@ -119,7 +199,9 @@
                    :src="getPublicImage(content.img, 115)"
                    v-show="content.img"
                    :preview-src-list="[getPublicImage(content.img)]"
                    v-if="sourceType == 'bits'"
                  ></el-image>
                  <img :src="content.img" alt="" v-else class="radio-img" />
                </p>
                <p
                  class="optionContent"
@@ -149,8 +231,8 @@
              v-else-if="value.questionType == 'multipleChoice'"
            >
              <el-checkbox
                v-for="content in value.option"
                :key="content.value"
                v-for="(content, contentCindex) in value.option"
                :key="contentCindex + 'contentCindex'"
                :label="content.value"
                :name="content.text"
                :class="
@@ -194,20 +276,19 @@
              </el-checkbox>
            </el-checkbox-group>
            <!-- 简答 翻译 -->
            <!-- <TEditorVue
            v-else-if="value.questionType == 'shortAnswer'"
            :value="value.userAnswer"
            :disabled="value.isComplete"
            @getContent="
              (val) => {
                value.userAnswer = val.trim();
                inputChange();
              }
            "
          ></TEditorVue> -->
            <TEditorVue
              v-else-if="value.questionType == 'formula'"
              :value="value.userAnswer"
              :disabled="value.isComplete"
              @getContent="
                (val) => {
                  value.userAnswer = val;
                }
              "
            />
            <el-input
              :disabled="value.isComplete"
              style="width: 90%; margin: 0 auto"
              style="width: 94%; margin: 0 auto"
              v-else-if="value.questionType == 'shortAnswer'"
              type="textarea"
              :rows="6"
@@ -220,7 +301,8 @@
                type != 'mock' &&
                (value.questionType == 'shortAnswer' ||
                  value.questionType == 'multipleChoice' ||
                  value.questionType == 'completion')
                  value.questionType == 'completion' ||
                  value.questionType == 'mathField')
              "
            >
              <el-button @click="checkPares(value)" style="margin-top: 10px"
@@ -231,9 +313,11 @@
            <div class="analysis" v-if="value.isComplete">
              <el-collapse
                v-model="value.isUnfold"
                @change="handleChange(value)"
                accordion
                v-if="value.questionType != 'shortAnswer'"
                v-if="
                  value.questionType != 'shortAnswer' &&
                  value.questionType != 'formula'
                "
              >
                <el-collapse-item :name="value.id" class="objective">
                  <template #title>
@@ -273,14 +357,54 @@
                          disabled-void-color="#949494"
                        />
                      </p>
                      <!-- 正确错误图标 -->
                      <span class="mr-10">
                        <svg
                          v-if="value.isRight"
                          t="1716986419862"
                          class="icon"
                          viewBox="0 0 1820 1024"
                          version="1.1"
                          xmlns="http://www.w3.org/2000/svg"
                          p-id="18767"
                          xmlns:xlink="http://www.w3.org/1999/xlink"
                          width="40"
                          height="20"
                        >
                          <path
                            d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
                            fill="#1AFA29"
                            p-id="18768"
                          ></path>
                        </svg>
                        <svg
                          v-if="value.isRight == false"
                          t="1716987085767"
                          class="icon"
                          viewBox="0 0 1024 1024"
                          version="1.1"
                          xmlns="http://www.w3.org/2000/svg"
                          p-id="25745"
                          xmlns:xlink="http://www.w3.org/1999/xlink"
                          width="20"
                          height="20"
                        >
                          <path
                            d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
                            fill="#d81e06"
                            p-id="25746"
                          ></path>
                        </svg>
                      </span>

                      <div class="headerConent sitgBox">
                        <p v-if="!value.isUnfold">
                          <span class="analysisColor">查看解析</span
                          ><el-image  />
                          <span class="analysisColor">展开解析</span
                          ><el-image />
                        </p>
                        <p v-else>
                          <span class="analysisColor">收起解析</span
                          ><el-image  />
                          ><el-image />
                        </p>
                      </div>
                    </div>
@@ -292,9 +416,48 @@
                  ></div>
                  <div v-else>暂无数据</div>
                </el-collapse-item>
                <!-- 主观题 -->
              </el-collapse>
              <div
              <!-- 主观题 -->
              <el-collapse v-else v-model="value.isUnfold" accordion>
                <el-collapse-item :name="value.id" class="objective">
                  <template #title>
                    <div class="headerBox">
                      <p v-if="!value.isUnfold">
                        <span class="analysisColor">展开答案与解析</span>
                      </p>
                      <p v-else>
                        <span class="analysisColor">收起答案与解析</span>
                      </p>
                    </div>
                  </template>
                  <div class="referBox">
                    <span>参考答案：</span>
                    <span
                      v-html="value.answer"
                      class="ti-2"
                      :class="[
                        'subjectiveBox',
                        value.isUnfold ? 'showText' : 'hideText',
                      ]"
                    ></span>
                  </div>
                  <!-- 解析 -->
                  <div class="referBox" v-if="value.analysisCon">
                    <span>解析：</span>
                    <p
                      v-html="value.analysisCon"
                      :class="
                        [
                          'subjectiveBox',
                          'ti-2',
                          value.isUnfold ? 'yincang' : '',
                        ].join(' ')
                      "
                    ></p>
                  </div>
                </el-collapse-item>
              </el-collapse>
              <!-- <div
                v-if="value.questionType == 'shortAnswer'"
                class="subjective subjectiveItem"
              >
@@ -313,12 +476,10 @@
                    <span class="analysisColor"
                      >{{
                        value.isUnfold ? "收起答案和解析" : "查看答案与解析"
                      }} </span
                    >
                      }}
                    </span>
                  </p>
                </div>
                <!-- :class="['analysisDetailBox', value.isUnfold ? 'open' : 'close'].join(' ') -->
                <!-- :class="['analysisDetailBox', value.isUnfold ? 'cartoon' : 'downCartoon'].join(' ') -->
                <div
                  :class="
                    [
@@ -329,7 +490,6 @@
                >
                  <div class="referBox">
                    <span>参考答案：</span>
                    <!-- <p v-html="arrayToString(value.answer)" class="subjectiveBox"></p> -->
                    <p
                      v-html="arrayToString(value.answer)"
                      :class="[
@@ -352,26 +512,37 @@
                    <p v-else>暂无数据</p>
                  </div>
                </div>
              </div>
              </div> -->
            </div>
          </div>
        </li>
      </ul>
    </div>

    <div class="bottom-btn" v-if="!loading">
      <el-button style="height: 34px; padding: 4px 10px">保存</el-button>
      <el-button class="examinations-btn-box" @click="saveAnswer"
        >保存</el-button
      >
      <el-button
        @click="handleQuestion"
        style="border-color: #1eb9ee; height: 34px; padding: 4px 10px"
        @click="
          (e) => {
            handleQuestion();
            saveAnswer(e);
          }
        "
        class="examinations-btn-box"
        :style="{ borderColor: primaryColor }"
        >提交</el-button
      >
      <el-button @click="redo" style="height: 34px; padding: 4px 10px"
        >重做</el-button
      >
      <el-button @click="redo" class="examinations-btn-box">重做</el-button>
      <el-button
        @click="openAnswers"
        style="border-color: #1eb9ee; height: 34px; padding: 4px 10px"
        @click="
          (e) => {
            openAnswers();
            saveAnswer(e);
          }
        "
        class="examinations-btn-box"
        :style="{ borderColor: primaryColor }"
        >查看答案</el-button
      >
    </div>
@@ -379,20 +550,106 @@
</template>

<script>
import { getPublicImage } from "@/assets/js/middleGround/tool";
import { MathfieldElement } from "mathlive";
import { Message } from "element-ui";
import TEditorVue from "../teditor/index.vue";
export default {
  name: "examination-option",
  props: ["cardList"],
  components: { TEditorVue },
  props: {
    cardList: {
      type: Array,
    },
    primaryColor: {
      type: String,
      default: "#00aeef",
    },
    chapter: {
      type: Number,
    },
    page: {
      type: Number,
    },
    inputBc: {
      type: String,
      default: "#fff",
    },
    hideCollect: {
      type: Boolean,
      default: false,
    },
    sourceType: {
      type: String,
      default: "bits",
    },
  },
  data() {
    return {
      type: "option",
      cardList: [],
      loading: false,
      cardData: [],
      loading: true,
      heart: require("@/assets/images/heart.png"),
      isHeart: require("@/assets/images/heart-check.png"),
      collectList: [],
      allCollect: [
        {
          type: "bits",
          collectList: [],
        },
        {
          type: "json",
          collectList: [],
        },
      ],
      errorList: [],
      allError: [
        {
          type: "bits",
          errorList: [],
        },
        {
          type: "json",
          errorList: [],
        },
      ],
    };
  },
  watch: {
    cardList: {
      handler(newVal) {
        this.cardData = this.cardList;
        if (newVal && newVal.length) {
          this.loading = false;
        }
      },
      immediate: true,
      deep: true,
    },
  },
  mounted() {
    this.getCollectIdList();
    this.getErrorList();
  },
  methods: {
    // 获取不受保护的图片
    getPublicImage(md5, width, height) {
      if (!md5) return;
      if (md5.includes("http")) {
        if (width) {
          return md5 + `?width=${width}`;
        } else {
          return md5;
        }
      }
      let src = null;
      if (md5) {
        src = process.env.VUE_APP_API_URL + `/file/GetPreViewImage?md5=${md5}`;
      }
      if (width) src += `&width=${width}`;
      if (height) src += `&height=${height}`;
      return src;
    },
    // 数组转为字符串方法
    arrayToString(data) {
      // 检查是否为数组
@@ -425,24 +682,30 @@
      }
    },
    redo() {
      for (let index = 0; index < this.cardList.length; index++) {
        const item = this.cardList[index];
      for (let index = 0; index < this.cardData.length; index++) {
        const item = this.cardData[index];
        for (let cindex = 0; cindex < item.infoList.length; cindex++) {
          const citem = item.infoList[cindex];
          citem.userAnswer = "";
          if (typeof citem.userAnswer == "string") {
            citem.userAnswer = "";
          } else {
            if (citem.questionType == "multipleChoice") {
              citem.userAnswer = [];
            } else {
              // 填空题
              for (let dindex = 0; dindex < citem.userAnswer.length; dindex++) {
                citem.userAnswer[dindex] = "";
              }
            }
          }
          citem.isComplete = false;
        }
      }
      // for (let index = 0; index < this.questionList.length; index++) {
      //   const item = this.questionList[index];
      //   item.userAnswer = "";
      //   item.isComplete = false
      // }
    },
    openAnswers() {
      this.$data.loading = true;
      for (let index = 0; index < this.cardList.length; index++) {
        const item = this.cardList[index];
      for (let index = 0; index < this.cardData.length; index++) {
        const item = this.cardData[index];
        for (let cindex = 0; cindex < item.infoList.length; cindex++) {
          const citem = item.infoList[cindex];
          citem.isComplete = true;
@@ -451,351 +714,332 @@
      this.$data.loading = false;
    },
    watchParsing(data) {
      debugger

      data.isUnfold = !data.isUnfold;
    },
    // // 获取试卷下题目类型
    // getIdPathList() {
    //   this.$data.loading = true;
    //   let query = {
    //     path: "*",
    //     queryType: "*",
    //     productId: this.config.bookId,
    //     cmsPath: "24080\\63791\\63792\\63807",
    //     pading: {
    //       start: 0,
    //       size: 999,
    //     },
    //   };
    //   this.MG.store.getProductDetail(query).then(async (res) => {
    //     console.log(this.$props.productLinkPath, res.datas.cmsDatas[0].datas);
    //     const idPathList = res.datas.cmsDatas[0].datas;
    //     await this.getQuestionList(idPathList);
    //   });
    // },
    // // 获取题库题目
    // async getQuestionList(idPathList, oldData) {
    //   let cardList = [];
    //   // 清空正确题数记录
    //   for (let index = 0; index < idPathList.length; index++) {
    //     const pathitem = idPathList[index];
    //     const pathList = cardList;
    //     pathList.push({
    //       path: pathitem.productLinkPath,
    //       catalogName: pathitem.name,
    //       infoList: [],
    //     });
    //     cardList = pathList;
    //     // 获取题目
    //     let query = {
    //       path: "*",
    //       queryType: "*",
    //       productId: this.config.bookId,
    //       cmsPath: pathitem.productLinkPath,
    //       itemFields: {
    //         Embedded_QuestionBank_Stem: [],
    //         Embedded_QuestionBank_AnalysisCon: [],
    //         Embedded_QuestionBank_Answer: [],
    //         Embedded_QuestionBank_Option: [],
    //         Embedded_QuestionBank_QuestionType: [],
    //         Embedded_QuestionBank_StemStyle: [],
    //         Embedded_QuestionBank_OptionStyle: [],
    //         Embedded_QuestionBank_KnowledgePoint: [],
    //         Embedded_QuestionBank_Difficulty: [],
    //       },
    //       pading: {
    //         start: 0,
    //         size: 999,
    //       },
    //     };
    //     await this.MG.store.getProductDetail(query).then((res) => {
    //       let oldList;
    //       if (oldData) {
    //         // 提交过，存在答题记录
    //         oldList = oldData.find(
    //           (item) => item.path == pathitem.productLinkPath
    //         ).infoList;
    //         this.setData({
    //           submitStatus: true,
    //         });
    //       }
    //       res.datas.cmsDatas[0].datas.forEach((item, index) => {
    //         let oldObj = "";
    //         if (oldList)
    //           oldObj = oldList.find((oldItem) => oldItem.id == item.id);
    //         let questionObj = {
    //           // num: index, // 题号
    //           id: item.id,
    //           type: pathitem.name,
    //           stem:
    //             item.Embedded_QuestionBank_QuestionType == "completion"
    //               ? JSON.parse(item.Embedded_QuestionBank_Stem)
    //                   .stemTxt.replaceAll("<vacancy>", ",input,")
    //                   .split(",")
    //               : JSON.parse(item.Embedded_QuestionBank_Stem), // 题干
    //           answer: item.Embedded_QuestionBank_Answer, // 答案
    //           option: item.Embedded_QuestionBank_Option
    //             ? JSON.parse(item.Embedded_QuestionBank_Option)
    //             : "", // 选择题选项
    //           analysisCon: item.Embedded_QuestionBank_AnalysisCon, // 解析
    //           questionType: item.Embedded_QuestionBank_QuestionType, // 题型
    //           optionStyle: item.Embedded_QuestionBank_OptionStyle, // 选项显示类型
    //           stemStyle: item.Embedded_QuestionBank_StemStyle, // 题干显示类型
    //           difficulty: item.Embedded_QuestionBank_Difficulty
    //             ? 4 - item.Embedded_QuestionBank_Difficulty
    //             : 0, // 难度等级
    //           userAnswer: oldObj
    //             ? oldObj.userAnswer
    //             : item.Embedded_QuestionBank_QuestionType == "completion" ||
    //               item.Embedded_QuestionBank_QuestionType == "multipleChoice"
    //             ? []
    //             : "",
    //           isUserAnswer: oldObj
    //             ? this.isHaveAnswer(oldObj.userAnswer)
    //             : false,
    //           isRight: oldObj ? oldObj.isRight : null,
    //           isComplete: oldObj ? oldObj.isComplete : false,
    //           isCollect: false,
    //           isUnfold: "", // 控制解析的折叠面板是否展开
    //         };
    //         // 多选和填空答案肯为数组，要转换JSON格式
    //         if (
    //           questionObj.questionType == "completion" ||
    //           questionObj.questionType == "multipleChoice"
    //         ) {
    //           try {
    //             questionObj.answer = JSON.parse(questionObj.answer).toString();
    //           } catch (error) {
    //             questionObj.answer = item.Embedded_QuestionBank_Answer;
    //           }
    //         }
    //         // 填空题改造
    //         if (questionObj.questionType == "completion") {
    //           let index = 0;
    //           for (let i = 0; i < questionObj.stem.length; i++) {
    //             const item = questionObj.stem[i];
    //             if (item == "input") {
    //               questionObj.stem[i] = {
    //                 num: index,
    //                 data: "input",
    //               };
    //               if (!oldObj) questionObj.userAnswer[index] = "";
    //               index++;
    //             }
    //           }
    //         }
    //         // 题干富文本处理
    //         if (questionObj.stemStyle == "RichText") {
    //           // questionObj.option.txt = ''
    //           questionObj.stem.stemTxt = questionObj.stem.stemTxt
    //             .replace(
    //               /\<img/gi,
    //               '<img style="max-width: 300rpx !important;object-fit: contain;" class="stem-rich-img" '
    //             )
    //             .replace(/\<p/gi, '<p class="stem-rich-p"')
    //             .replace("../file", app.config.requestCtx + "/file");
    //         }
    //         // 选项富文本处理
    //         if (
    //           questionObj.optionStyle == "RichText" &&
    //           (questionObj.questionType == "singleChoice" ||
    //             questionObj.questionType == "judge" ||
    //             questionObj.questionType == "multipleChoice")
    //         ) {
    //           questionObj.option.forEach((item) => {
    //             if (item.txt)
    //               item.txt = item.txt
    //                 .replace(/\<img/gi, '<img class="option-rich-img"')
    //                 .replace(/\<p/gi, '<p class="stem-rich-p"')
    //                 .replace("../file", app.config.requestCtx + "/file");
    //           });
    //         }
    //         // 解析富文本处理
    //         if (
    //           questionObj.analysisCon &&
    //           typeof questionObj.analysisCon == "string"
    //         ) {
    //           questionObj.analysisCon = questionObj.analysisCon.replace(
    //             /\<img/gi,
    //             '<img style="max-width: 300rpx !important;object-fit: contain;" class="stem-rich-img" '
    //           );
    //         }
    //         // 听力题修改
    //         // if (questionObj.questionType == 'singleChoice') {
    //         //   const src = this.extractSourceSrc(questionObj.stem.stemTxt)
    //         //   if (src) {
    //         //     questionObj.src = src
    //         //     questionObj.stem.stemTxt = this.removeVideoAndAudioTags(questionObj.stem.stemTxt)
    //         //   }
    //         // }
    //         // 获取图片
    //         if (
    //           questionObj.stemStyle == "Image" ||
    //           questionObj.stemStyle == "TxtAndImage"
    //         ) {
    //           questionObj.stem.stemImage = getPublicImage(
    //             questionObj.stem.stemImage,
    //             150
    //           );
    //         }
    //         if (
    //           questionObj.optionStyle == "Image" ||
    //           questionObj.optionStyle == "TxtAndImage"
    //         ) {
    //           questionObj.option.forEach((optionItem) => {
    //             if (optionItem.img)
    //               optionItem.img = getPublicImage(optionItem.img, 150);
    //           });
    //         }
    //         // 客观题总分赋值
    //         if (questionObj.questionType !== "shortAnswer") {
    //           // this.setData({
    //           //   subjectiveGrade: this.data.subjectiveGrade + 2,
    //           // });
    //         }
    //         // 旧数据里 题目正确 记录正确数量
    //         if (questionObj.isRight) {
    //           // this.setData({
    //           //   correctNum: this.data.correctNum + 1,
    //           // });
    //         }
    //         if (
    //           pathitem.name == "判断题" ||
    //           pathitem.name == "填空题" ||
    //           pathitem.name == "多选题" ||
    //           pathitem.name == "单选题" ||
    //           pathitem.name == "听力题"
    //         ) {
    //           if (oldObj) {
    //             // this.setData({
    //             //   subjectiveTotal: this.data.subjectiveTotal + 1,
    //             // });
    //           }
    //         }
    //         // cardList赋值
    //         let cardIndex = cardList.findIndex(
    //           (item) => item.path == pathitem.productLinkPath
    //         );
    //         let infoList = cardList[cardIndex].infoList;
    //         infoList.push(questionObj);
    //         cardList[cardIndex].infoList = infoList;
    //         let questionList = [];
    //         const cardUpdatedList = cardList;
    //         cardUpdatedList.forEach((aitem) => {
    //           aitem.infoList.forEach((bitem, bindex) => {
    //             questionList.push(bitem);
    //             bitem.number = bindex + 1;
    //             bitem.score = 2;
    //           });
    //         });
    //         cardList = cardUpdatedList;
    //         this.$data.cardList = cardList;
    //         this.$data.loading = false;
    //         // console.log("题目呢", cardList);
    //         // return cardList
    //       });
    //     });
    //   }
    // },
    // 批改题目  (练习,我的做题,我的收藏模式下)
    handleQuestion() {
      const list = this.$props.cardList
      let errorId = [];
      const list = this.cardData;
      for (let index = 0; index < list.length; index++) {
        const item = list[index];
        for (let cindex = 0; cindex < item.infoList.length; cindex++) {
          const citem = item.infoList[cindex];
          citem.isComplete = true;
           // 修改题目状态为完成
           citem.isComplete = true;
            // 批改题目
            if (citem.questionType == "multipleChoice") {
              // 多选题
              if (citem.answer.length == citem.userAnswer.length) {
                const sortedArr1 = citem.answer.slice().sort();
                const sortedArr2 = citem.userAnswer.slice().sort();
                citem.isRight = sortedArr1.every(
                  (value, index) => value === sortedArr2[index]
                );
              } else {
          // 修改题目状态为完成
          citem.isComplete = true;
          // 批改题目
          if (citem.questionType == "multipleChoice") {
            // 多选题
            if (citem.answer.length == citem.userAnswer.length) {
              const sortedArr1 = citem.answer.slice().sort();
              const sortedArr2 = citem.userAnswer.slice().sort();
              citem.isRight = sortedArr1.every(
                (value, index) => value === sortedArr2[index]
              );
            } else {
              citem.isRight = false;
            }
          } else if (
            citem.questionType == "singleChoice" ||
            citem.questionType == "judge" ||
            citem.questionType == "dropdown"
          ) {
            citem.isRight = citem.answer == citem.userAnswer;
          } else if (citem.questionType == "shortAnswer") {
            // 简答 翻译
            citem.isRight = null;
          } else if (
            citem.questionType == "completion" ||
            citem.questionType == "mathField"
          ) {
            // 填空
            if (typeof citem.answer == "string") {
              citem.isRight = citem.answer == citem.userAnswer[0];
            } else {
              if (citem.answer.length != citem.userAnswer.length) {
                citem.isRight = false;
              }
            } else if (
              citem.questionType == "singleChoice" ||
              citem.questionType == "judge"
            ) {
              if(citem.id == '63825') console.log('i',item);
              citem.isRight = citem.answer == citem.userAnswer;
            } else if (citem.questionType == "shortAnswer") {
              // 简答 翻译
              citem.isRight = null;
            } else if (citem.questionType == "completion") {
              // 填空
              if (typeof citem.answer == "string") {
                citem.isRight = citem.answer == citem.userAnswer[0];
              } else {
                if (citem.answer.length != citem.userAnswer.length) {
                  citem.isRight = false;
                } else {
                  citem.isRight = citem.answer.every(
                    (value, index) =>
                      value === citem.userAnswer[index]
                  );
                }
                citem.isRight = citem.answer.every(
                  (value, index) => value === citem.userAnswer[index]
                );
              }
            }
          }
          if (citem.isRight == false) {
            errorId.push(citem.id);
          }
        }
        
      }
      this.$props.cardList = list
      console.log(this.$props.cardList);
      this.cardData = list;
      let oldErrodId = this.allError.find(
        (item) => item.type == this.sourceType
      ).errorList;
      for (let index = 0; index < errorId.length; index++) {
        const item = errorId[index];
        if (oldErrodId.indexOf(item) == -1) {
          oldErrodId.push(item);
        }
      }
      for (let cindex = 0; cindex < this.allError.length; cindex++) {
        const citem = this.allError[cindex];
        if (citem.type == this.sourceType) citem.errorList = oldErrodId;
      }
      this.MG.identity
        .setUserKey({
          setKeyRequests: [
            {
              domain: "errorData",
              key: this.config.activeBook.bookId,
              value: JSON.stringify(this.allError),
            },
          ],
        })
        .then((res) => {
          console.log("错题已保存", this.allError);
        });
    },
    getParentWithClass(element, className) {
      while (element.parentElement) {
        element = element.parentElement;
        if (element.classList.contains(className)) {
          return element;
        }
      }
    },
    // 保存按钮
    saveAnswer(e) {
      if (e.srcElement) {
        const pageNum = this.getParentWithClass(
          e.srcElement,
          "page-box"
        ).getAttribute("page");
        const oldAnswerData = localStorage.getItem(
          this.config.activeBook.name + "oldAnswerData"
        );
        let oldData = oldAnswerData ? JSON.parse(oldAnswerData) : {};
        const asnwerList = [];
        for (let index = 0; index < this.cardData.length; index++) {
          const item = this.cardData[index];
          for (let cindex = 0; cindex < item.infoList.length; cindex++) {
            const citem = item.infoList[cindex];
            asnwerList.push({
              id: citem.id,
              userAnswer: citem.userAnswer,
            });
          }
        }
        if (oldData[pageNum]) {
          oldData[pageNum] = oldData[pageNum].filter(
            (citem) =>
              asnwerList.findIndex((ditem) => ditem.id == citem.id) == -1
          );
          oldData[pageNum].push(...asnwerList);
        } else {
          oldData[pageNum] = asnwerList;
        }
        localStorage.setItem(
          this.config.activeBook.name + "oldAnswerData",
          JSON.stringify(oldData)
        );
        Message.success("保存成功");
      }

      // if(oldData[this.chapter]) {
      //   oldData[this.chapter][this.page] = asnwerList
      // } else {
      //   oldData[this.chapter] = {}
      //   oldData[this.chapter][this.page] = asnwerList
      // }
      // console.log(oldData);
    },
    handleCollect(infoNum, num) {
      this.cardData[infoNum].infoList[num].isCollect =
        !this.cardData[infoNum].infoList[num].isCollect;
    },
    // 题目收藏按钮,收藏和取消同一接口，取消数组减去该项id
    setCollect(num, number) {
      let item = null;
      if (number) {
        item = this.cardData[num].infoList[number];
      } else {
        item = this.cardData[num];
      }
      item.isCollect = !item.isCollect;
      console.log(111, item);
      if (this.cardData.length == 0) {
        this.collectList.push(item.id);
      } else {
        const isShow = this.collectList.findIndex((citem) => citem == item.id);
        if (isShow == -1) {
          this.collectList.push(item.id);
        } else {
          this.collectList = this.collectList.filter(
            (citem) => citem != item.id
          );
        }
      }
      const list = this.collectList;
      for (let index = 0; index < this.allCollect.length; index++) {
        const item = this.allCollect[index];
        if (item.type == this.sourceType) item.collectList = this.collectList;
      }
      console.log("点击收藏按钮", this.allCollect);
      this.MG.identity
        .setUserKey({
          setKeyRequests: [
            {
              domain: "collectData",
              key: this.config.activeBook.bookId,
              value: JSON.stringify(this.allCollect),
            },
          ],
        })
        .then((res) => {
          console.log("收藏/取消成功");
        });
    },
    // 获取收藏id列表
    getCollectIdList() {
      const token = localStorage.getItem("token");
      if (!token) return false;
      this.MG.identity
        .getUserKey({
          domain: "collectData",
          keys: [this.config.activeBook.bookId],
        })
        .then((res) => {
          try {
            const collect = JSON.parse(res[0].value);
            console.log("全部收藏id", collect);
            if (collect.length) {
              this.collectList = collect.find(
                (citem) => citem.type == this.sourceType
              ).collectList;
              this.allCollect[0].collectList = collect.find(
                (citem) => citem.type == "bits"
              ).collectList;
              this.allCollect[1].collectList = collect.find(
                (citem) => citem.type == "json"
              ).collectList;
            }
          } catch (error) {
            console.log("暂无数据");
          }
        })
        .catch((res) => {
          console.log("答题器请求题目收藏id报错");
        });
    },
    // 获取错题id列表
    getErrorList() {
      const token = localStorage.getItem("token");
      if (!token) return false;
      this.MG.identity
        .getUserKey({
          domain: "errorData",
          keys: [this.config.activeBook.bookId],
        })
        .then((res) => {
          try {
            const error = JSON.parse(res[0].value);
            if (error.length) {
              this.errorList = error.find(
                (citem) => citem.type == this.sourceType
              ).errorList;
              this.allError[0].errorList = error.find(
                (citem) => citem.type == "bits"
              ).errorList;
              this.allError[1].errorList = error.find(
                (citem) => citem.type == "json"
              ).errorList;
            }
          } catch (error) {}
        })
        .catch(() => {});
    },
    onChangeInput(e, index, cindex, num) {
      this.cardData[index].infoList[cindex].userAnswer[num] = e.target.value;
    },
  },
};
</script>

<style lang="less">
.titleText img {
  max-width: 80%;
}
</style>

<style lang="less" scoped>
.catalogName {
  color: #00aeef;
  display: flex;
  text-indent: 1em !important;
  font-size: 16px;
  .catalogName-box {
    display: inline-block;
    width: 94%;
  }
}
.catalogImage {
  width: 50%;
}
.examination {
  margin-top: 20px;
  min-height: 100px;
  ul {
    list-style: none;
  }

  p {
    margin: 0;
  }
  math {
  }
}

.examinations-btn-box {
  height: 30px;
  width: 78px;
  padding: 4px 10px;
}

.border-box {
  padding-top: 20px;
  border: 2px solid #e9e9e9;
  // border: 2px solid #e9e9e9;
}
.border-box:first-child {
  border-top:2px solid #e9e9e9 ;

.ti-2 {
  text-indent: 2em !important;
}

.questionContent {
  // display: flex;
  // justify-content: center;
  text-indent: 0em !important;
  margin-left: 20px;

  /deep/ .el-textarea__inner:focus {
    border-color: #15c0f2;
  }
}

.input {
  /deep/ .el-input__inner {
    height: 26px;
  }
}

p {
  margin-top: 0em;
  text-indent: 0em !important;
  line-height: 1.5em;
  font-size: 16px;
}

.colorBox {
  margin: 0 10px 0 23px;
  width: 4px;
  height: 19px;
  background-color: #ff6c00;
}

.textOverFlow {
  overflow: hidden;
  text-overflow: ellipsis;
@@ -807,52 +1051,66 @@
  height: 775px;
  padding-bottom: 20px;
}

.question::-webkit-scrollbar {
  width: 3px;
}

/*滚动条滑块*/
.question::-webkit-scrollbar-thumb {
  border-radius: 20px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background-color: #333;
}

/*滚动条轨道*/
.question::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0);
  border-radius: 20px;
  background: #d9d9d9;
}

.paperMargin {
  margin-top: 30px;

  ul li {
    padding: 20px 41px 0px 46px;
  }

  li:last-child {
    padding-bottom: 20px;
  }
}

.paperQuestion {
  padding-left: 12px;
  display: flex;
  align-items: center;
  font-size: 16px;

  .questionText {
    font-size: 16px;
    color: #000;
  }

  span {
    color: #c2c2c2;
  }
}

/** 题干 */
.questionTitle {
  display: flex;
  justify-content: center;

  .titleContent {
    width: 95%;
    display: flex;
    align-items: flex-start;

    .questionNum {
      text-indent: 0 !important;
      margin-right: 5px;
      height: 32px;
      line-height: 32px;
      text-align: center;
@@ -860,59 +1118,76 @@
      color: #333;
      font-weight: bold;
    }
    .text-fl {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
    }
    .titleText {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      text-align: left;
      padding: 0 10px 10px 0px;
      min-width: 90%;
      font-size: 16px;
      line-height: 32px;
      color: #000;
      .input-txt {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
      }
      span {
        display: inline-block;
        font-size: 16px;
        // line-height: 26px;
        color: #000;
        font-weight: 400;
        margin-top: 6px;
      }
      .el-input {
      select {
        outline: none;
        min-width: 100px;
      }
      input {
        width: 140px;
        height: 24px;
        border-top: 0;
        border: 0;
        outline: none;
        border-bottom: 1px solid #000;
      }

      /deep/ .el-textarea.is-disabled .el-textarea__inner {
        background-color: #fff ;
        background-color: #fff;
      }
      /deep/.el-input__wrapper {
        border-top: 0 !important;
      }
      /deep/ .el-input__inner {
        border-top: 0 !important;
        border-left: 0 !important ;
        border-right: 0 !important ;
        border-bottom: 1px solid #15c0f2 !important;
        border-radius: 0 !important;
      }

      /deep/ .el-input.is-disabled .el-input__inner {
        background-color: #fff;
      }

      /dee/ p {
        display: flex;
        align-items: center;
      }
    }

    ::v-deep {
      .el-input__wrapper {
        border-top: 0 !important;
      }
    }
  }

  .collect {
    cursor: pointer;
    width: 21px;
    height: 21px;
  }
  .mathField {
    min-width: 200px;
    max-width: 518px;
  }
}

/** 选项 */
.option {
  .el-radio,
@@ -926,13 +1201,16 @@
    margin-bottom: 6px;
    white-space: pre-wrap !important;
    color: #000;

    /deep/ .el-checkbox__label {
      line-height: 1.5;
    }
  }

  /deep/ .el-radio__inner {
    border-color: #a5a3a3;
  }

  .optionContent {
    margin: 0;
    display: flex;
@@ -941,14 +1219,17 @@
    color: #000;
  }
}

.analysis {
  margin: 20px 0;
  width:550px;
  width: 94%;
  // margin-left: 12px;
}

.el-collapse {
  width: 100%;
}

/** 解析 */
.objective {
  /deep/ .el-collapse-item__header {
@@ -957,34 +1238,42 @@
    padding: 0 20px;
    font-size: 16px;
    background-color: #f4f4f4;

    .headerBox {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;

      .headerConent {
        height: 100%;
        display: flex;
        align-items: center;
        flex-wrap: wrap;

        p {
          margin-bottom: 0;
        }

        .el-image {
          width: 9px;
          height: 9px;
        }

        .correct {
          color: #1fbc1f;
          width: 180px;
          text-align: left;
          display: flex;

          span:nth-child(1) {
            display: inline-block;
            width: 82px;
          }
        }

        .correctBox {
          width: 100px;
          height: min-content;
@@ -992,23 +1281,28 @@
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1; /* 这里是超出几行省略 */
          -webkit-line-clamp: 1;
          /* 这里是超出几行省略 */
          overflow: hidden;
        }

        .error {
          display: flex;
          text-align: left;
          width: 180px;
          width: 170px;
          color: #ee1818;

          span {
            height: min-content;
          }

          .errorBox {
            width: 100px;
            // height: 48px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;

            ::v-deep {
              img {
                max-height: 48px;
@@ -1027,9 +1321,11 @@
    }
  }
}

/deep/ .el-collapse-item__header:focus:not(:hover) {
  color: #333;
}

/deep/ .el-collapse-item__content {
  width: 93%;
  padding: 0 20px;
@@ -1037,16 +1333,20 @@
  font-size: 16px;
  color: #333;
}

/deep/ .el-collapse-item__arrow {
  display: none;
}

.subjectiveItem {
  background-color: #f4f4f4;
  padding: 10px 20px;

  p {
    text-indent: 0em;
  }
}

.subjective {
  /deep/ .el-collapse-item__header {
    height: 80px;
@@ -1058,16 +1358,19 @@
    flex-direction: column;
    justify-content: flex-start;
  }

  .subjectiveTitle {
    width: 80px;
    height: 20px;
    line-height: 20px;
  }

  .subjectiveRefer {
    display: flex;
    align-items: flex-start;
    text-align: left;
  }

  .subjectiveAnswer {
    width: 540px;
    height: 20px;
@@ -1076,31 +1379,39 @@
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1; /* 这里是超出几行省略 */
    -webkit-line-clamp: 1;
    /* 这里是超出几行省略 */
    overflow: hidden;
    line-height: 20px;
  }

  .analysisDetailBox {
    overflow: hidden;
    max-height: 100px;
    transition: 1s;

    &.open {
      max-height: 500px;
    }

    &.close {
      max-height: 20px;
    }

    .referBox {
      display: flex;
      margin-bottom: 10px;

      span {
        width: 80px;
        color: #999;
      }

      p {
        flex: 1;
        overflow: hidden;
      }

      span,
      p {
        text-indent: 0em;
@@ -1110,28 +1421,34 @@
    }
  }
}

// 选项
.optionImg {
  height: min-content;
  margin-bottom: 6px;

  /deep/ img {
    margin-left: 10px;
    object-fit: contain;
    vertical-align: middle;
  }
}

.optionTxt {
  height: 32px;
}

// 题干仅图片
.stemImg {
  margin: 0 10px 10px 10px;
}

// 文字加图片
.stemTxtAndImage {
  display: flex;
  align-items: flex-start;
}

.titleTextArea {
  ::v-deep {
    img,
@@ -1142,19 +1459,23 @@
    }
  }
}

.questionAnalysis {
  width: 100%;
  height: 48px;
  display: flex;
  justify-content: space-between;

  .analysisAnswer {
    width: 74%;
    display: flex;
  }

  .referAnswer {
    display: inline-block;
    width: 60px;
  }

  .answerContent {
    height: 48px;
    width: 80%;
@@ -1163,64 +1484,80 @@
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1; /* 这里是超出几行省略 */
    -webkit-line-clamp: 1;
    /* 这里是超出几行省略 */
    overflow: hidden;
  }

  .el-image {
    width: 9px;
    height: 9px;
  }
}

.analysisColor {
  cursor: pointer;
  color: #949494;
  margin-right: 4px;
}

.difficulty {
  display: flex;
  align-items: center;
}

.cartoon {
  animation: spread 1s linear forwards;
}

.downCartoon {
  animation: downSpred 1s linear forwards;
}

.showText {
  animation: showText 1s linear forwards;
}

.hideText {
  animation: hideText 2s linear forwards;
}

@keyframes spread {
  from {
    max-height: 20px;
  }

  to {
    max-height: 500px;

    p {
      flex: 1;
      overflow: hidden;
    }
  }
}

@keyframes downSpred {
  from {
    max-height: 500px;
  }

  to {
    max-height: 20px;
  }
}

@keyframes showText {
  100% {
    height: auto;
  }
}

@keyframes hideText {
  0% {
    height: auto;
  }

  100% {
    height: 20px;
    overflow: hidden;
@@ -1228,15 +1565,18 @@
    white-space: nowrap;
  }
}

.yincang {
  animation: yincang 1s linear forwards;
}

@keyframes yincang {
  from {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  to {
    overflow: auto;
    text-overflow: initial;
@@ -1249,8 +1589,26 @@
  display: flex;
  justify-content: center;
  flex-wrap: wrap;

  .el-button {
    margin-top: 10px;
  }
}

.radio-img {
  width: 200px;
  object-fit: contain;
}

.collect-png {
  cursor: pointer;
  width: 18px;
  object-fit: contain;
}

/deep/ .examination-math {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
</style>