答题器功能

闫增涛

2024-06-19 0d70f01c3553b6c33e5ee86f89f8d0fbd42825d5

答题器功能

 src/assets/images/examination/chongzuo.png

 src/assets/images/examination/collectClickIcon.png

 src/assets/images/examination/collectIcon.png

 src/router/index.ts

@@ -9,6 +9,7 @@
    {
      path: '/',
      component: Layout,
      redirect:'/home',
      children: [
        {
          path: '/index',

 src/views/examination/components/list.vue

New file
@@ -0,0 +1,708 @@
<template>
  <div class="examination-lit">
    <div
      v-for="(item, nindex) in props.cardList"
      :key="nindex"
      class="border-box"
      v-show="item.infoList.length"
    >
      <p class="catalogName" :style="{ color: primaryColor }">
        <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>
      </p>
      <ul>
        <li v-for="(value, index) in item.infoList" :key="value.id" :id="'listItem-' + value.id">
          <!-- 标题 -->
          <div class="questionTitle">
            <div class="titleContent">
              <span
                class="questionNum"
                :style="{
                  marginTop: value.questionType == 'completion' ? '12px' : '0'
                }"
                >{{ index + 1 }}.
              </span>
              <!-- 听力进度条 -->
              <!-- <answerAudioPlayer :audioUrl="value.src" v-show="item.name == '听力题'" /> -->
              <!-- 题干 -->
              <!-- 仅文字 -->
              <p
                class="titleText"
                v-if="value.stemStyle == 'Txt' && value.questionType != 'completion'"
                :id="value.id"
              >
                {{ value.stem.stemTxt }}
              </p>
              <!-- 仅图片 -->
              <el-image
                class="stemImg"
                v-else-if="value.stemStyle == 'Image'"
                :src="getPublicImage(value.stem.stemImage, 150)"
                :preview-src-list="[getPublicImage(value.stem.stemImage)]"
              ></el-image>
              <!-- 文字加图片 -->
              <p class="stemTxtAndImage titleText" v-else-if="value.stemStyle == 'TxtAndImage'">
                <span> {{ value.stem.stemTxt }}</span>
                <el-image
                  :src="getPublicImage(value.stem.stemImage, 150)"
                  :preview-src-list="[getPublicImage(value.stem.stemImage)]"
                  style="margin-left: 10px"
                ></el-image>
              </p>
              <!-- 填空题题干 -->
              <p class="titleText" v-if="value.questionType == 'completion'">
                <span v-for="(itemText, indexText) in value.stem" :key="indexText">
                  <span v-if="typeof itemText == 'string'" v-html="itemText"></span>
                  <!-- &nbsp; -->
                  <input
                    v-else
                    type="text"
                    class="input"
                    v-model.trim="value.userAnswer[itemText.num]"
                    :disabled="value.isComplete"
                    :style="{ backgroundColor: inputBc }"
                  />
                  <!-- &nbsp; -->
                </span>
              </p>
              <!-- 富文本 -->
              <p
                class="titleText titleTextArea"
                v-else-if="value.stemStyle == 'RichText'"
                v-html="value.stem.stemTxt"
                v-cloak
              ></p>
            </div>
            <img
              :src="value.isCollect ? isHeart : heart"
              alt=""
              class="collect-png"
              @click="handleCollect(nindex, index)"
              v-if="!(hideCollect && value.questionType == 'shortAnswer')"
            />
            <!-- 收藏 -->
          </div>
          <div class="questionContent">
            <!-- 单选 -->
            <el-radio-group
              :disabled="value.isComplete"
              class="option"
              v-if="value.questionType == 'singleChoice' || value.questionType == 'judge'"
              v-model="value.userAnswer"
            >
              <el-radio
                v-for="content in value.option"
                :key="content.value"
                :label="content.value"
                @change="onChangeRadio(nindex,index)"
                border
                :class="
                  value.optionStyle == 'Image' ||
                  value.optionStyle == 'TxtAndImage' ||
                  value.optionStyle == 'RichText'
                    ? 'optionImg'
                    : 'optionTxt'
                "
              >
                <p class="optionContent" v-if="value.optionStyle == 'Txt'">
                  {{ content.value }}、{{ content.txt }}
                </p>
                <p class="optionContent" v-else-if="value.optionStyle == 'Image'">
                  {{ content.value }}、<el-image
                    :src="getPublicImage(content.img, 115)"
                    v-show="content.img"
                    :preview-src-list="[getPublicImage(content.img)]"
                    v-if="isReal"
                  ></el-image>
                  <img :src="content.img" alt="" v-if="!isReal" class="radio-img" />
                </p>
                <p class="optionContent" v-else-if="value.optionStyle == 'TxtAndImage'">
                  <span> {{ content.value }}、</span><span>{{ content.txt }}</span>
                  <el-image
                    :src="getPublicImage(content.img, 115)"
                    v-show="content.img"
                    :preview-src-list="[getPublicImage(content.img)]"
                  ></el-image>
                </p>
                <p
                  class="optionContent titleTextArea"
                  v-else-if="value.optionStyle == 'RichText'"
                  v-html="`<span>${content.value}</span>` + '、' + content.txt"
                  id="mathjax"
                ></p>
              </el-radio>
            </el-radio-group>
            <!-- 多选 -->
            <el-checkbox-group
              :disabled="value.isComplete"
              v-model="value.userAnswer"
              class="option"
              v-else-if="value.questionType == 'multipleChoice'"
            >
              <el-checkbox
                v-for="content in value.option"
                :key="content.value"
                :label="content.value"
                :name="content.text"
                :class="
                  value.optionStyle == 'Image' ||
                  value.optionStyle == 'TxtAndImage' ||
                  value.optionStyle == 'RichText'
                    ? 'optionImg'
                    : 'optionTxt'
                "
              >
                <p class="optionContent" v-if="value.optionStyle == 'Txt'">
                  {{ content.value }}、{{ content.txt }}
                </p>
                <p class="optionContent" v-else-if="value.optionStyle == 'Image'">
                  {{ content.value }}、<el-image
                    :src="getPublicImage(content.img, 115)"
                    :preview-src-list="[getPublicImage(content.img)]"
                    v-show="content.img"
                  ></el-image>
                </p>
                <p class="optionContent" v-else-if="value.optionStyle == 'TxtAndImage'">
                  <span> {{ content.value }}、</span><span>{{ content.txt }}</span>
                  <el-image
                    :src="getPublicImage(content.img, 115)"
                    :preview-src-list="[getPublicImage(content.img)]"
                    v-show="content.img"
                  ></el-image>
                </p>
                <p
                  class="optionContent titleTextArea"
                  v-else-if="value.optionStyle == 'RichText'"
                  v-html="content.value + '、' + content.txt"
                ></p>
              </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> -->
            <el-input
              :disabled="value.isComplete"
              style="width: 94%; margin: 0 auto"
              v-else-if="value.questionType == 'shortAnswer'"
              type="textarea"
              :rows="6"
              placeholder="请输入内容"
              v-model="value.userAnswer"
            />
            <div
              v-if="
                type != 'option' &&
                type != 'mock' &&
                (value.questionType == 'shortAnswer' ||
                  value.questionType == 'multipleChoice' ||
                  value.questionType == 'completion')
              "
            >
              <el-button @click="onChangeRadio(nindex,index)" style="margin-top: 10px">查看解析</el-button>
            </div>
            <!-- 提交后解析 -->
            <div class="analysis" v-if="value.isComplete">
              <el-collapse
                v-model="value.isUnfold"
                @change="handleChange(value)"
                accordion
                v-if="value.questionType != 'shortAnswer'"
              >
                <el-collapse-item :name="value.id" class="objective">
                  <template #title>
                    <div class="headerBox">
                      <div class="headerConent">
                        <!-- 正确错误标识 -->
                         <ul class="mark">
                          <li v-if="value.isRight" class="mark-correct">正确</li>
                          <li v-if="value.isRight == false" class="mark-error">错误</li>
                         </ul>
                        <p class="correct" :title="arrayToString(value.answer)">
                          <span>正确答案：</span>
                          <span v-html="arrayToString(value.answer)" class="correctBox"></span>
                        </p>
                        <p
                          :class="value.isRight ? 'correct textOverFlow' : 'error textOverFlow'"
                          :title="arrayToString(value.userAnswer)"
                          style="margin-left: 20px"
                        >
                          <span>您的答案：</span>
                          <span class="errorBox" v-if="isHaveAnswer(value.userAnswer)">{{
                            arrayToString(value.userAnswer)
                          }}</span>
                        </p>
                      </div>
                      <p class="difficulty" v-if="value.difficulty">
                        <span style="color: #333">难度等级：</span>
                        <el-rate
                          v-model="value.difficulty"
                          :max="3"
                          size="large"
                          disabled
                          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>
                        </p>
                        <p v-else><span class="analysisColor">收起解析</span></p>
                      </div>
                    </div>
                  </template>
                  <!-- 解析 -->
                  <div v-if="value.analysisCon" v-html="value.analysisCon"></div>
                  <div v-else>暂无数据</div>
                </el-collapse-item>
                <!-- 主观题 -->
              </el-collapse>
              <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>
                    <p
                      v-html="arrayToString(value.answer)"
                      class="ti-2"
                      :class="['subjectiveBox', value.isUnfold ? 'showText' : 'hideText']"
                    ></p>
                  </div>
                  <!-- 解析 -->
                  <div class="referBox" v-if="value.analysisCon">
                    <span>解析：</span>
                    <p
                      v-if="value.analysisCon"
                      v-html="value.analysisCon"
                      :class="['subjectiveBox', 'ti-2', value.isUnfold ? 'yincang' : ''].join(' ')"
                    ></p>
                    <p v-else class="ti-2">暂无数据</p>
                  </div>
                </el-collapse-item>
              </el-collapse>
              <!-- <div
                v-if="value.questionType == 'shortAnswer'"
                class="subjective subjectiveItem"
              >
                <div class="questionAnalysis">
                  <p class="difficulty" v-if="value.difficulty">
                    <span style="color: #333">难度等级：</span>
                    <el-rate
                      v-model="value.difficulty"
                      :max="3"
                      size="large"
                      disabled
                      disabled-void-color="#949494"
                    />
                  </p>
                  <p class="difficulty" @click="watchParsing(value)">
                    <span class="analysisColor"
                      >{{
                        value.isUnfold ? "收起答案和解析" : "查看答案与解析"
                      }}
                    </span>
                  </p>
                </div>
                <div
                  :class="
                    [
                      'analysisDetailBox',
                      value.isUnfold ? 'cartoon' : 'downCartoon',
                    ].join(' ')
                  "
                >
                  <div class="referBox">
                    <span>参考答案：</span>
                    <p
                      v-html="arrayToString(value.answer)"
                      :class="[
                        'subjectiveBox',
                        value.isUnfold ? 'showText' : 'hideText',
                      ]"
                    ></p>
                  </div>
                  <div class="referBox">
                    <span>解析：</span>
                    <p
                      v-if="value.analysisCon"
                      v-html="value.analysisCon"
                      :class="
                        ['subjectiveBox', value.isUnfold ? 'yincang' : ''].join(
                          ' '
                        )
                      "
                    ></p>
                    <p v-else>暂无数据</p>
                  </div>
                </div>
              </div> -->
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps, onMounted, ref,reactive } from 'vue'
import { getPublicImage } from '@/assets/js/middleGround/tool.js'
import heart from '@/assets/images/examination/collectIcon.png'
import isHeart from '@/assets/images/examination/collectClickIcon.png'
const props = defineProps({ cardList: Array, collectList: Array })
const emits = defineEmits([ 'onChangeRadio','setCollect'])
// const presentId = ref<Number>(props.collectList[0])
onMounted(() => {
  // if (props.collectList) presentId.value = props.collectList[0]
})
// 数组转为字符串方法
const arrayToString = (data) => {
  // 检查是否为数组
  if (Array.isArray(data)) {
    // 使用 join 方法将数组转换为字符串，默认使用逗号分隔
    return data.join(',').replace(/<[^>]*>/g, '')
  } else {
    // 如果不是数组，直接返回原始值
    return data.replace(/<[^>]*>/g, '')
  }
}
const isHaveAnswer = (data) => {
  if (typeof data == 'string') {
    data = data
      .replace(/<[^>]*>/g, '')
      .replace(/&nbsp;/g, '')
      .trim()
    if (data.length) {
      return true
    } else {
      return false
    }
  } else {
    const answer = data.find((item) => item.length > 0)
    if (answer) {
      return true
    } else {
      return false
    }
  }
}
// 收藏按钮
const handleCollect = (num,number) => {
  emits('setCollect',num,number)
}
// 单选框输入
const onChangeRadio = (num:number,number:number) => {
  emits('onChangeRadio', num,number)
}
</script>

<style lang="less" scoped>
.collect-png {
  cursor: pointer;
  width: 24px;
  object-fit: contain;
  margin-right: 10px;
}
.colorBox {
  margin: 0 10px 0 23px;
  width: 4px;
  height: 19px;
  background-color: #ff6c00;
}
.textOverFlow {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.question {
  overflow: auto;
  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: 14px;
  .questionText {
    font-size: 14px;
    color: #000;
  }
  span {
    color: #c2c2c2;
  }
}
/** 题干 */
.questionTitle {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  .titleContent {
    width: 95%;
    display: flex;
    align-items: flex-start;
    span {
      height: 24px;
      line-height: 24px;
      text-align: center;
      font-size: 16px;
      color: #333;
      font-weight: bold;
    }
    .titleText {
      padding: 0 10px 10px 10px;
      min-width: 90%;
      font-size: 14px;
      line-height: 26px;
      color: #000;
      span {
        font-size: 14px;
        line-height: 26px;
        color: #000;
        font-weight: 400;
      }
      .el-input {
        width: 150px;
        height: 24px;
        border-top: 0;
      }
      /deep/.el-input__wrapper {
        border-top: 0 !important;
      }
      /deep/ .el-input__inner {
        border-top: 0 !important;
      }
    }
    ::v-deep {
      // .input {
      //   height: 24px;
      //   border: 0;
      //   border-bottom:1px solid #dcdfe6;
      //   // border-radius: 3px;
      // }
      // .input:focus {
      //   outline: 0;
      //   border-color: #ff6c00;
      //   // border-radius: 3px;
      // }
      .el-input__wrapper {
        border-top: 0 !important;
      }
    }
  }
  .collect {
    cursor: pointer;
    width: 21px;
    height: 21px;
  }
}
/** 选项 */
.option {
  .el-radio,
  .el-checkbox {
    min-height: 32px;
    margin-top: 10px;
    height: min-content;
    display: flex;
    align-items: center;
    min-width: 85%;
    margin-right: 50px;
    white-space: pre-wrap !important;
    color: #000;
    /deep/ .el-checkbox__label {
      line-height: 1.5;
    }
  }
  .optionContent {
    display: flex;
    align-items: center;
    line-height: 26px;
  }
}
.analysis {
  margin-top: 20px;
}
.el-collapse {
  width: 100%;
}
/** 解析 */
/deep/ .el-collapse-item__header {
  width: 100%;
  padding: 0 20px;
  font-size: 14px;
  background-color: #f4f4f4;
  .headerBox {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    .headerConent {
      height: 100%;
      display: flex;
      align-items: center;
      .el-image {
        width: 9px;
        height: 9px;
      }
      .correct {
        color: #1fbc1f;
        width: 200px;
        text-align: left;
      }
      .error {
        text-align: left;
        margin-left: 40px;
        width: 200px;
        color: #ee1818;
      }
    }
  }

  .checkAnalysis {
    cursor: pointer;
    height: 100%;
    display: flex;
    align-items: center;
  }
}
/deep/ .el-collapse-item__content {
  width: 100%;
  padding: 0 20px;
  background-color: #f4f4f4;
  font-size: 14px;
  color: #333;
}
/deep/ .el-collapse-item__arrow {
  display: none;
}

// 选项
.optionImg {
  height: 120px;
  /deep/ img {
    margin-left: 10px;
  }
}
.optionTxt {
  height: 32px;
}
// 题干仅图片
.stemImg {
  margin: 0 10px 10px 10px;
}
// 文字加图片
.stemTxtAndImage {
  display: flex;
  align-items: flex-start;
}
.titleTextArea {
  ::v-deep {
    img,
    .el-image__inner {
      max-width: 150px;
      object-fit: contain !important;
    }
  }
}
.mark {
  font-size: 14px;
  color: #fff;
  .mark-error,.mark-correct {
    white-space: nowrap;
    height: 20px;
    line-height: 18px;
    padding: 2px 8px;
    margin-right: 5px;
  }
  .mark-correct {
    background-color: #1fbc1f;
  }
  .mark-error {
    background-color: #ee1818;
  }
}
</style>

 src/views/examination/components/sheet.vue

New file
@@ -0,0 +1,268 @@
<template>
  <!-- 答题卡 -->
  <div class="sheet boxBorder">
    <div class="sheetTop">
      <div class="title">
        <p class="colorBox"></p>
        <p>答题卡</p>
      </div>
      <ul class="sheetContent" v-if="props.cardList">
        <li
          class="contentLi"
          v-for="(item, index) in props.cardList"
          :key="index"
          v-show="item.infoList.length"
        >
          <h2 class="topic" v-show="item.infoList.length">
            {{ item.catalogName }}
            <span v-if="props.answerType != 'mock'">（共{{ item.infoList.length }}题）</span>
          </h2>
          <ul class="topicBox">
            <li
              @click="itemLocation(value.id)"
              v-for="(value, index) in item.infoList"
              :key="index"
              :class="
                value.questionType == 'shortAnswer'
                  ? isHaveAnswer(value.userAnswer)
                    ? 'patch noDeafault'
                    : 'default'
                  : !value.isComplete
                    ? isHaveAnswer(value.userAnswer)
                      ? 'patch noDeafault'
                      : 'default'
                    : value.isRight
                      ? ' correct noDeafault'
                      : ' error noDeafault'
              "
            >
              {{ index + 1 }}
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <div
      class="sheetBottom"
      v-if="props.answerType != 'errorQuestion' && props.answerType != 'collectQuestion'"
    >
      <ul class="sheeting" >
        <li>
          <p class="sheetingBox"></p>
          <p>已答</p>
        </li>
        <li>
          <p class="sheetingBox" style="background-color: #f1f3f8"></p>
          <p>未答</p>
        </li>
        <li v-if="submitStatus">
          <p class="sheetingBox" style="background-color: #ee1818"></p>
          <p>错误</p>
        </li>
        <li v-if="submitStatus">
          <p class="sheetingBox" style="background-color: #1fbc1f"></p>
          <p>正确</p>
        </li>
      </ul>
      <div class="sheet-btn">
      <el-button @click="saveData">
        提交
      </el-button>
    </div>
    </div>
    <div class="sheetBottom" v-else>
      <ul class="sheeting" >
        <li>
          <p class="sheetingBox"></p>
          <p>已答</p>
        </li>
        <li>
          <p class="sheetingBox" style="background-color: #f1f3f8"></p>
          <p>未答</p>
        </li>
        <li>
          <p class="sheetingBox" style="background-color: #ee1818"></p>
          <p>错误</p>
        </li>
        <li>
          <p class="sheetingBox" style="background-color: #1fbc1f"></p>
          <p>正确</p>
        </li>
      </ul>
      <div class="sheet-btn">
      <el-button v-if="answerType == 'option'">
        提交
      </el-button>
    </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps, watch, ref, computed, defineEmits, onMounted } from 'vue'
const props = defineProps<{
  cardList: any
  submitStatus: boolean
  answerType: string,
  
}>()

const emits = defineEmits(['saveData'])
// 题目定位
const itemLocation = (id: number) => {
  document.getElementById(`listItem-${id}`)!.scrollIntoView()
}
// 判断是否输入答案
const isHaveAnswer = (data) => {
  if (typeof data == 'string') {
    data = data
      .replace(/<[^>]*>/g, '')
      .replace(/&nbsp;/g, '')
      .trim()
    if (data.length) {
      return true
    } else {
      return false
    }
  } else {
    const answer = data.find((item) => item.length > 0)
    if (answer) {
      return true
    } else {
      return false
    }
  }
}
// 提交
const saveData = () => {
  emits('saveData')
}
</script>

<style lang="less" scoped>
.title {
  display: flex;
  align-items: center;
  width: 100%;
  height: 55px;
  font-size: 16px;
  color: #000;
  border-bottom: 1px solid #f4f4f4;
  font-weight: bold;
  background-color: #F5F7FB ;
}
.colorBox {
  margin: 0 10px 0 23px;
  width: 4px;
  height: 19px;
  background-color: #ff6c00;
}
.sheet {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 25px;
  min-width: 275px;
  margin-right: 18px;
  height: 100%;
  overflow: auto;
  border-right: 1px solid #EEEEEE;
  .sheetContent {
    padding-top: 20px;
    .contentLi {
      padding: 0 20px 0 20px;
      .topic {
        font-size: 14px;
        color: #000;
      }
      .topicBox {
        display: flex;
        flex-wrap: wrap;
        margin-top: 20px;
        li {
          cursor: pointer;
          margin-right: 20px;
          margin-bottom: 15px;
          text-align: center;
          line-height: 30px;
          width: 30px;
          background-color: #f1f3f8;
          color: #b4b6bd;
          font-size: 17px;
          border-radius: 2px;
        }
        li:nth-child(5n) {
          margin-right: 0;
        }
      }
    }
  }
  .sheetBottom {
    margin-bottom: 22px;
    .sheeting {
      display: flex;
      justify-content: space-evenly;
      li {
        display: flex;
        align-items: center;
        .sheetingBox {
          margin-right: 6px;
          width: 12px;
          height: 12px;
          border-radius: 2px;
          background-color: #ff6c00;
        }
      }
    }
  }
}
.sheet-btn {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  .el-button {
    width: 150px;
    background-color: #3b93fe;
    color: #fff;
    &:hover {
      background-color: #83b6f5;
    }
  }
}
.sheet::-webkit-scrollbar {
  width: 3px;
}
/*滚动条滑块*/
.sheet::-webkit-scrollbar-thumb {
  border-radius: 20px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background-color: #333;
}
/*滚动条轨道*/
.sheet::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0);
  border-radius: 20px;
  background: #d9d9d9;
}
/** 默认样式 */
.default {
  background-color: #f1f3f8;
  color: #b4b6bd;
}
/** 有答案样式 */
.patch {
  background-color: #ff6c00 !important;
}
/** 正确样式 */
.correct {
  background-color: #1fbc1f !important;
}
/** 错误样式 */
.error {
  background-color: #ee1818 !important;
}
/** 非默认字体颜色 */
.noDeafault {
  color: #fff !important;
}
</style>

 src/views/examination/index.vue

New file
@@ -0,0 +1,1259 @@
<template>
  <el-dialog
    v-model="examination.dialogVisible"
    :title="
      props.type == 'option' ? '附加题' : props.type == 'errorQuestion' ? '我的错题' : '我的收藏'
    "
    :align-center="true"
    width="1200"
    :show-close="false"
    @open="openDialog"
    class="examination-dialog"
  >
    <template #header>
      <div class="dialog-header">
        <span>
          {{
            props.type == 'option'
              ? '附加题'
              : props.type == 'errorQuestion'
                ? '我的错题'
                : '我的收藏'
          }}
        </span>

        <svg
          style="position: absolute; right: 10px; cursor: pointer"
          @click="closeDialog"
          t="1718596022986"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="4252"
          width="20"
          height="20"
          xmlns:xlink="http://www.w3.org/1999/xlink"
        >
          <path
            d="M176.661601 817.172881C168.472798 825.644055 168.701706 839.149636 177.172881 847.338438 185.644056 855.527241 199.149636 855.298332 207.338438 846.827157L826.005105 206.827157C834.193907 198.355983 833.964998 184.850403 825.493824 176.661601 817.02265 168.472798 803.517069 168.701706 795.328267 177.172881L176.661601 817.172881Z"
            fill="#979797"
            p-id="4253"
          ></path>
          <path
            d="M795.328267 846.827157C803.517069 855.298332 817.02265 855.527241 825.493824 847.338438 833.964998 839.149636 834.193907 825.644055 826.005105 817.172881L207.338438 177.172881C199.149636 168.701706 185.644056 168.472798 177.172881 176.661601 168.701706 184.850403 168.472798 198.355983 176.661601 206.827157L795.328267 846.827157Z"
            fill="#979797"
            p-id="4254"
          ></path>
        </svg>
      </div>
    </template>
    <div v-loading="examination.loading">
      <ul class="examintaion-box" v-if="!examination.noData">
        <li>
          <sheet
            :cardList="examination.cardList"
            :submitStatus="examination.submitStatus"
            :answerType="props.type"
            @saveData="saveData"
          />
        </li>
        <li>
          <div class="examintaion-top-btn">
            <div
              v-if="
                (type == 'option' && examination.submitStatus) ||
                type == 'collectQuestion' ||
                type == 'errorQuestion'
              "
            >
              <div class="resolving-btn" @click="showCollaspe()" v-if="!examination.isCollapse">
                【查看解析】
              </div>

              <div class="resolving-btn" @click="showCollaspe('noshow')" v-else>【收起解析】</div>
            </div>
            <!-- <div @click="clearCollect">清空收藏</div> -->
            <div class="redo-btn" @click="restart">
              <img src="@/assets/images/examination/chongzuo.png" alt="">
              <span>重做</span>
            </div>
          </div>
          <div class="examintaion-box-list">
            <list
              :cardList="examination.cardList"
              @setCollect="setCollect"
              @onChangeRadio="onChangeRadio"
            />
          </div>
        </li>
      </ul>
      <el-empty description="暂无数据" v-else class="empty" />
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, defineExpose, defineProps, inject } from 'vue'
import { getPublicImage } from '@/assets/js/middleGround/tool.js'
import { requestCtx } from '@/assets/js/config.js'
import { ElMessageBox } from 'element-plus'
import list from './components/list.vue'
import sheet from './components/sheet.vue'
const MG: any = inject('MG')
const examination = reactive({
  dialogVisible: false,
  loading: false,
  noData: false,
  cardList: [],
  allCollect: [
    {
      type: 'bits',
      collectList: []
    },
    {
      type: 'json',
      collectList: []
    }
  ],
  collectList: [], // 收藏id列表
  allError: [
    {
      type: 'bits',
      errorList: []
    },
    {
      type: 'json',
      errorList: []
    }
  ],
  errorList: [], // 错题id列表
  submitStatus: false, // 是否提交
  isCollapse: false // 是否展开所有解析
})
const props = defineProps<{
  type: String
  info: Object
  activeBook: Object
  infoType: String
}>()
// 弹窗打开前的回调
const openDialog = () => {
  init()
}
// 弹窗弹窗按钮
const closeDialog = () => {
  if(props.type =='option') {
    if(!examination.submitStatus) {
        ElMessageBox.confirm('未提交，是否退出答题', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        autofocus: false,
        type: 'warning'
      }).then(() => {
        examination.dialogVisible = false
        examination.cardList = []
      })
    } else {
      examination.dialogVisible = false
      examination.cardList = []
    }
  } else {
    examination.dialogVisible = false
    handleQuestion()
    examination.cardList = []
  }
  
}
// 开关弹窗方法
const handleExaminationDialog = (type: boolean) => {
  examination.dialogVisible = type
}
// 单选触发查看解析， 单个题目查看解析
const onChangeRadio = (num: number, number: number) => {
  if (props.type == 'collectQuestion' || props.type == 'errorQuestion') correctQuestion(num, number)
}

// 初始化函数
const init = async () => {
  examination.loading = true
  examination.submitStatus = false
  examination.noData = false
  if (props.type == 'option') {
    // 附加题
    getCollectIdList()
    getErrorList()
  } else if (props.type == 'collectQuestion') {
    examination.submitStatus = true
    await getcollectId() // 获取收藏题目
    // 收藏夹
  } else if (props.type == 'errorQuestion') {
    examination.submitStatus = true
    await getErrorIdList()
  }
}
// 重做
const restart = () => {
  ElMessageBox.confirm('确认要重新开始答题吗', '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    autofocus: false,
    type: 'warning'
  })
    .then(async () => {
      examination.loading = true
      examination.submitStatus = false
      examination.cardList = []
      examination.collectList = []
      examination.errorList = []
      goTop()
      if (props.type == 'option') {
        deleteAnswerInfo(async () => {
          examination.cardList = (await getQuestionList([])) as any
        })
      } else {
        init()
      }
    })
    .catch(() => {})
}

// 返回顶部
const goTop = () => {
  const layout = document.querySelector('examintaion-box-list')
  if (layout) layout.scrollTo(0, 0)
}
// 判断单个题目是否正确
const correctQuestion = (num: number, number: number) => {
  const item = examination.cardList[num].infoList[number]
  item.isComplete = true
  if (item.questionType == 'multipleChoice') {
    if (item.answer.length == item.userAnswer.length) {
      const sortedArr1 = item.answer.slice().sort()
      const sortedArr2 = item.userAnswer.slice().sort()
      item.isRight = sortedArr1.every((value: string, index: number) => value === sortedArr2[index])
    } else {
      item.isRight = false
    }
  } else if (item.questionType == 'singleChoice' || item.questionType == 'judge') {
    // 单选 判断
    item.isRight = item.answer == item.userAnswer
  } else if (item.questionType == 'shortAnswer') {
    // 简答 翻译
    item.isRight = null
  } else if (item.questionType == 'completion') {
    // 填空
    if (typeof item.answer == 'string') {
      item.isRight = item.answer == item.userAnswer[0]
    } else {
      if (item.answer.length != item.userAnswer.length) {
        item.isRight = false
      } else {
        item.isRight = item.answer.every(
          (value: unknown, index: number) => value === item.userAnswer[index]
        )
      }
    }
  }
  console.log(examination.cardList[num].infoList[number])
}
// 展开所有解析的折叠面板
const showCollaspe = (type?: string) => {
  for (let index = 0; index < examination.cardList.length; index++) {
    const item = examination.cardList[index]
    for (let cindex = 0; cindex < item.infoList.length; cindex++) {
      const citem = item.infoList[cindex]
      console.log(citem)

      if (type == 'noshow') {
        citem.isUnfold = ''
        examination.isCollapse = false
      } else {
        citem.questionType == 'shortAnswer' ? (citem.isUnfold = true) : (citem.isUnfold = citem.id)
        examination.isCollapse = true
      }
    }
  }
}
// 提交按钮
const saveData = () => {
  if (props.type == 'option') {
    handleQuestion()
  }
  examination.submitStatus = true
}
// 题目收藏按钮,收藏和取消同一接口，取消数组减去该项id
const setCollect = (num: number, number: number) => {
  const item = examination.cardList[num].infoList[number]
  item.isCollect = !item.isCollect
  console.log(item)
  if (examination.collectList.length == 0) {
    examination.collectList.push(item.id)
  } else {
    const isShow = examination.collectList.findIndex((citem) => citem == item.id)
    if (isShow == -1) {
      examination.collectList.push(item.id)
    } else {
      examination.collectList = examination.collectList.filter((citem) => citem != item.id)
    }
  }
  for (let index = 0; index < examination.allCollect.length; index++) {
    const item = examination.allCollect[index]
    if (item.type == 'bits') item.collectList = examination.collectList
  }
  MG.identity
    .setUserKey({
      setKeyRequests: [
        {
          domain: 'collectData',
          key: props.activeBook.bookId,
          value: JSON.stringify(examination.allCollect)
        }
      ]
    })
    .then((res) => {
      console.log('收藏/取消成功')
    })
}
// 练习模式获取收藏id
const getCollectIdList = () => {
  MG.identity
    .getUserKey({
      domain: 'collectData',
      keys: [props.activeBook.bookId]
    })
    .then((res) => {
      console.log('收藏数据', res)
      try {
        const collect = JSON.parse(res[0].value)
        if (collect.length) {
          examination.collectList = collect.find((citem) => citem.type == 'bits').collectList
          examination.allCollect[0].collectList = collect.find(
            (citem) => citem.type == 'bits'
          ).collectList
          examination.allCollect[1].collectList = collect.find(
            (citem) => citem.type == 'json'
          ).collectList
        }
      } catch (error) {
        console.log('暂无数据')
      }
      if (props.type == 'option') {
        getAnswerInfo(async (res) => {
          if (res.length) {
            // 有记录，不能答题，状态设为已提交
            examination.submitStatus = true
            let value = JSON.parse(res[0].value)
            if (value) {
              console.log('旧数据', value)
              // 有答题记录,携带旧数据获取题目
              examination.cardList = (await getQuestionList(value)) as any
            }
          } else {
            examination.cardList = (await getQuestionList([])) as any
          }
        })
      }
    })
}
// 获取错题id列表
const getErrorList = () => {
  MG.identity
    .getUserKey({
      domain: 'errorData',
      keys: [props.activeBook.bookId]
    })
    .then((res) => {
      try {
        const error = JSON.parse(res[0].value)
        if (error.length) {
          examination.errorList = error.find((citem) => citem.type == 'bits').errorList
          examination.allCollect[0].collectList = error.find(
            (citem) => citem.type == 'bits'
          ).errorList
          examination.allCollect[1].collectList = error.find(
            (citem) => citem.type == 'json'
          ).errorList
        }
      } catch (error) {}
    })
}
// 获取附加题题目列表
const getQuestionList = async (oldAnswer: any) => {
  if (!props.info.ids.length) {
    examination.loading = false
    examination.noData = true
    return false
  }
  // 开始请求
  let oldList = oldAnswer
  let cardList = [
    {
      catalogName: '单选题',
      infoList: []
    },
    {
      catalogName: '判断题',
      infoList: []
    },
    {
      catalogName: '多选题',
      infoList: []
    },
    {
      catalogName: '填空题',
      infoList: []
    },
    {
      catalogName: '简答题',
      infoList: []
    }
  ]
  let singleChoiceArr = [] // 单选
  let judgeArr = [] // 判断
  let shortArr = [] // 简答
  let multipleChoiceArr = [] // 多选
  let completionArr = [] // 填空
  // 11
  for (let qindex = 0; qindex < props.info.ids.length; qindex++) {
    const qitem = props.info.ids[qindex]
    let query = {
      storeInfo: props.activeBook.storeRefcode,
      path: '*',
      cmsPath: props.activeBook.rootCmsItemId,
      cmsType: '*',
      productId: props.activeBook.bookId,
      queryType: '*',
      itemIds: qitem + '',
      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: []
      }
    }
    console.log('请求日·', examination.collectList)

    const res = await MG.store.getProductDetail(query)
    if (!res.datas) return false
    res.datas.cmsDatas[0].datas.forEach((item, index) => {
      let oldObj = {}
      if (oldList) {
        oldObj = oldList.find((item) => item.id == qitem)
      }
      const questionObj = {
        number: index + 1, // 题号
        id: item.id,
        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'
            ? []
            : '',
        isSubmit: false, // 查看解析
        isRight: oldObj ? oldObj.isRight : null, // 是否正确
        isComplete: oldObj ? true : false,
        isCollect: examination.collectList.indexOf(item.id) > -1 ? true : 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'
            }
            questionObj.userAnswer[index] = ''
            index++
          }
        }
      }
      // 获取图片
      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.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"')
          .replaceAll('../file', 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', 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 (item.Embedded_QuestionBank_QuestionType == 'judge') {
        questionObj.type = '判断题'
        judgeArr.push(questionObj)
      } else if (item.Embedded_QuestionBank_QuestionType == 'singleChoice') {
        questionObj.type = '单选题'
        singleChoiceArr.push(questionObj)
      } else if (item.Embedded_QuestionBank_QuestionType == 'multipleChoice') {
        questionObj.type = '多选题'
        multipleChoiceArr.push(questionObj)
      } else if (item.Embedded_QuestionBank_QuestionType == 'completion') {
        questionObj.type = '填空题'
        completionArr.push(questionObj)
      } else if (item.Embedded_QuestionBank_QuestionType == 'shortAnswer') {
        questionObj.type = '简答题'
        shortArr.push(questionObj)
      }
    })
  }
  // 22
  cardList[0].infoList = singleChoiceArr
  cardList[1].infoList = judgeArr
  cardList[2].infoList = multipleChoiceArr
  cardList[3].infoList = completionArr
  cardList[4].infoList = shortArr
  for (let index = 0; index < cardList.length; index++) {
    const item = cardList[index]
    for (let cindex = 0; cindex < item.infoList.length; cindex++) {
      const citem = item.infoList[cindex]
      citem.number = cindex + 1
    }
  }
  examination.loading = false
  return cardList.filter((item) => item.infoList.length > 0)
}
// 我的收藏获取收藏id
const getcollectId = async () => {
  MG.identity
    .getUserKey({
      domain: 'collectData',
      keys: [props.activeBook.bookId]
    })
    .then(async (res) => {
      try {
        const collect = JSON.parse(res[0].value)
        if (collect.length) {
          examination.collectList = collect.find((citem) => citem.type == 'bits').collectList
          examination.allCollect[0].collectList = collect.find(
            (citem) => citem.type == 'bits'
          ).collectList
          examination.allCollect[1].collectList = collect.find(
            (citem) => citem.type == 'json'
          ).collectList
        }
      } catch (error) {}
      if (examination.collectList && examination.collectList.length > 0) {
        examination.cardList = (await getCollectDataList()) as any
      } else {
        examination.loading = false
        examination.noData = true
      }
    })
}
// 获取收藏夹
const getCollectDataList = async () => {
  if (!examination.collectList.length) {
    examination.loading = false
    examination.noData = true
    return false
  }
  // 开始请求
  let oldData = null
  let oldList = []
  let cardList = [
    {
      catalogName: '单选题',
      infoList: []
    },
    {
      catalogName: '判断题',
      infoList: []
    },
    {
      catalogName: '多选题',
      infoList: []
    },
    {
      catalogName: '填空题',
      infoList: []
    },
    {
      catalogName: '简答题',
      infoList: []
    }
  ]
  let singleChoiceArr = [] // 单选
  let judgeArr = [] // 判断
  let shortArr = [] // 简答
  let multipleChoiceArr = [] // 多选
  let completionArr = [] // 填空
  // 11
  for (let qindex = 0; qindex < examination.collectList.length; qindex++) {
    const qitem = examination.collectList[qindex]
    let query = {
      storeInfo: props.activeBook.storeRefcode,
      path: '*',
      cmsPath: props.activeBook.rootCmsItemId,
      cmsType: '*',
      productId: props.activeBook.bookId,
      queryType: '*',
      itemIds: qitem + '',
      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: []
      }
    }
    const res = await MG.store.getProductDetail(query)
    if (!res.datas) return false
    res.datas.cmsDatas[0].datas.forEach((item, index) => {
      let oldObj = {}
      if (oldList) {
        oldObj = oldList.find((item) => item.id == qitem)
      }
      const questionObj = {
        number: index + 1, // 题号
        id: item.id,
        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'
            ? []
            : '',
        isSubmit: false, // 查看解析
        isRight: null, // 是否正确
        isComplete: false,
        isCollect: examination.collectList.indexOf(item.id) > -1 ? true : 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'
            }
            questionObj.userAnswer[index] = ''
            index++
          }
        }
      }
      // 获取图片
      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.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', 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', 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 (item.Embedded_QuestionBank_QuestionType == 'judge') {
        questionObj.type = '判断题'
        judgeArr.push(questionObj)
      } else if (item.Embedded_QuestionBank_QuestionType == 'singleChoice') {
        questionObj.type = '单选题'
        singleChoiceArr.push(questionObj)
      } else if (item.Embedded_QuestionBank_QuestionType == 'multipleChoice') {
        questionObj.type = '多选题'
        multipleChoiceArr.push(questionObj)
      } else if (item.Embedded_QuestionBank_QuestionType == 'completion') {
        questionObj.type = '填空题'
        completionArr.push(questionObj)
      } else if (item.Embedded_QuestionBank_QuestionType == 'shortAnswer') {
        questionObj.type = '简答题'
        shortArr.push(questionObj)
      }
    })
  }
  // 22
  cardList[0].infoList = singleChoiceArr
  cardList[1].infoList = judgeArr
  cardList[2].infoList = multipleChoiceArr
  cardList[3].infoList = completionArr
  cardList[4].infoList = shortArr
  for (let index = 0; index < cardList.length; index++) {
    const item = cardList[index]
    for (let cindex = 0; cindex < item.infoList.length; cindex++) {
      const citem = item.infoList[cindex]
      citem.number = cindex + 1
    }
  }
  examination.loading = false
  return cardList.filter((item) => item.infoList.length > 0)
}
// 我的错题模式下获取错题id列表
const getErrorIdList = async () => {
  await MG.identity
    .getUserKey({
      domain: 'errorData',
      keys: [props.activeBook.bookId]
    })
    .then(async (res) => {
      try {
        const error = JSON.parse(res[0].value)
        if (error.length) {
          examination.errorList = error.find((citem) => citem.type == 'bits').errorList
          examination.allCollect[0].collectList = error.find(
            (citem) => citem.type == 'bits'
          ).errorList
          examination.allCollect[1].collectList = error.find(
            (citem) => citem.type == 'json'
          ).errorList
        }
      } catch (error) {}
      if (examination.errorList && examination.errorList.length) {
        examination.cardList = (await getErrorDataList()) as any
      } else {
        examination.loading = false
        ElMessageBox.confirm('错题集暂无数据!', '提示', {
          confirmButtonText: '确定',
          showCancelButton: false,
          type: 'warning'
        })
          .then(() => {
            examination.submitStatus = true
          })
          .catch(() => {})
      }
    })
}
// 获取错题集
const getErrorDataList = async () => {
  if (!examination.errorList.length) {
    examination.loading = false
    examination.noData = true
    return false
  }
  // 开始请求
  let oldData = null
  let oldList = []
  let cardList = [
    {
      catalogName: '单选题',
      infoList: []
    },
    {
      catalogName: '判断题',
      infoList: []
    },
    {
      catalogName: '多选题',
      infoList: []
    },
    {
      catalogName: '填空题',
      infoList: []
    },
    {
      catalogName: '简答题',
      infoList: []
    }
  ]
  let singleChoiceArr = [] // 单选
  let judgeArr = [] // 判断
  let shortArr = [] // 简答
  let multipleChoiceArr = [] // 多选
  let completionArr = [] // 填空
  // 11
  for (let qindex = 0; qindex < examination.errorList.length; qindex++) {
    const qitem = examination.errorList[qindex]
    let query = {
      storeInfo: props.activeBook.storeRefcode,
      path: '*',
      cmsPath: props.activeBook.rootCmsItemId,
      cmsType: '*',
      productId: props.activeBook.bookId,
      queryType: '*',
      itemIds: qitem + '',
      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: []
      }
    }
    const res = await MG.store.getProductDetail(query)
    if (!res.datas) return false
    res.datas.cmsDatas[0].datas.forEach((item, index) => {
      let oldObj = {}
      if (oldList) {
        oldObj = oldList.find((item) => item.id == qitem)
      }
      const questionObj = {
        number: index + 1, // 题号
        id: item.id,
        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'
            ? []
            : '',
        isSubmit: false, // 查看解析
        isRight: null, // 是否正确
        isComplete: false,
        isCollect: examination.collectList.indexOf(item.id) > -1 ? true : 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'
            }
            questionObj.userAnswer[index] = ''
            index++
          }
        }
      }
      // 获取图片
      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.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', 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', 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 (item.Embedded_QuestionBank_QuestionType == 'judge') {
        questionObj.type = '判断题'
        judgeArr.push(questionObj)
      } else if (item.Embedded_QuestionBank_QuestionType == 'singleChoice') {
        questionObj.type = '单选题'
        singleChoiceArr.push(questionObj)
      } else if (item.Embedded_QuestionBank_QuestionType == 'multipleChoice') {
        questionObj.type = '多选题'
        multipleChoiceArr.push(questionObj)
      } else if (item.Embedded_QuestionBank_QuestionType == 'completion') {
        questionObj.type = '填空题'
        completionArr.push(questionObj)
      } else if (item.Embedded_QuestionBank_QuestionType == 'shortAnswer') {
        questionObj.type = '简答题'
        shortArr.push(questionObj)
      }
    })
  }
  // 22
  cardList[0].infoList = singleChoiceArr
  cardList[1].infoList = judgeArr
  cardList[2].infoList = multipleChoiceArr
  cardList[3].infoList = completionArr
  cardList[4].infoList = shortArr
  for (let index = 0; index < cardList.length; index++) {
    const item = cardList[index]
    for (let cindex = 0; cindex < item.infoList.length; cindex++) {
      const citem = item.infoList[cindex]
      citem.number = cindex + 1
    }
  }
  examination.loading = false
  return cardList.filter((item) => item.infoList.length > 0)
}
// 批改题目  (练习,我的做题,我的收藏模式下)
const handleQuestion = () => {
  for (let index = 0; index < examination.cardList.length; index++) {
    const item = examination.cardList[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.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])
          }
        }
      }
      if (!citem.isRight && citem.questionType != 'shortAnswer') {
        // 客观题回答错误 记录错题
        if (examination.errorList.findIndex((errorItem) => errorItem == citem.id) == -1) {
          examination.errorList.push(citem.id)
        }
      } else {
        if (props.type == 'errorQuestion' || props.type == 'option') {
          // 从错题集中移除
          let index = examination.errorList.findIndex((erroritem) => erroritem == citem.id)
          if (index > -1) {
            examination.errorList.splice(index, 1)
          }
        }
      }
    }
  }
  // 错题已经拿到，需要记录错题id
  examination.allError[0].errorList = examination.errorList
  MG.identity
    .setUserKey({
      setKeyRequests: [
        {
          domain: 'errorData',
          key: props.activeBook.bookId,
          value: JSON.stringify(examination.allError)
        }
      ]
    })
    .then((res) => {
      console.log('错题已保存', examination.allError)
    })
  if (props.type == 'option') {
    recordAnswerData()
  }
}
// 处理答题数据
const recordAnswerData = () => {
  const infoData: any[] = []
  for (let index = 0; index < examination.cardList.length; index++) {
    const item = examination.cardList[index]
    for (let cindex = 0; cindex < item.infoList.length; cindex++) {
      const citem = item.infoList[cindex]
      infoData.push({
        id: citem.id,
        userAnswer: citem.userAnswer,
        isRight: citem.isRight
      })
    }
  }
  console.log('保存的数据', infoData)
  setAnswerInfo(infoData)
}
// 获取用户旧答题数据
const getAnswerInfo = (callback) => {
  MG.identity
    .getUserKey({
      domain: 'answerData',
      keys: [props.info.id]
    })
    .then((res) => {
      if (callback) callback(res)
    })
}
// 提交用户答题数据
const setAnswerInfo = (data: any) => {
  MG.identity
    .setUserKey({
      setKeyRequests: [
        {
          domain: 'answerData',
          key: props.info.id,
          value: JSON.stringify(data)
        }
      ]
    })
    .then((res) => {
      console.log('提交用户答题数据成功')
    })
}
// 删除用户答题数据
const deleteAnswerInfo = (callback) => {
  MG.identity
    .delUserKey({
      domain: 'answerData',
      keys: [props.info.id]
    })
    .then((res) => {
      if (callback) callback()
    })
}
const clearCollect = () => {
  MG.identity
    .setUserKey({
      setKeyRequests: [
        {
          domain: 'collectData',
          key: props.activeBook.bookId,
          value: JSON.stringify([])
        }
      ]
    })
    .then((res) => {
      console.log('收藏/取消成功')
    })
}
defineExpose({ handleExaminationDialog })
</script>

<style lang="less" scoped>
.examintaion-box {
  display: flex;
  justify-content: space-between;
  .examintaion-box-list {
    padding-right: 10px;
    height: 850px;
    overflow: auto;
  }
}
.dialog-header {
  text-align: center;
  font-size: 16px;
  color: #333;
}
.examination-dialog {
  .empty {
    margin: 250px 0;
  }
}
.examintaion-top-btn {
  display: flex;
  padding: 0 20px;
  justify-content: flex-end;
  align-items: center;
  height: 40px;
  color: #3b93fe;
  font-size: 14px;
  .resolving-btn {
    margin-right: 20px;
    cursor: pointer;
  }
  .redo-btn {
    cursor: pointer;
    display: flex;
    align-items: center;
    img {
      margin-right: 4px;
    }
  }
}
</style>

 src/views/readerPages/webHome.vue

@@ -123,6 +123,11 @@
              <div>习题</div>
              <div :class="exercisesType == 'exercises' ? 'text' : 'line'"></div>
            </div>
            <hr class="hr" v-if="bookConfig.textbookComponents.indexOf('A4821F71') > -1"/>
            <div class="tabItem hover" @click="selectExercisesType('additional')" v-if="bookConfig.textbookComponents.indexOf('A4821F71') > -1">
              <div>附加题</div>
              <div :class="exercisesType == 'additional' ? 'text' : 'line'"></div>
            </div>
            <hr class="hr" v-if="bookConfig.textbookComponents.indexOf('AFC1A288') > -1"/>
            <div class="tabItem hover" @click="selectExercisesType('wrong')" v-if="bookConfig.textbookComponents.indexOf('AFC1A288') > -1">
              <div>错题本</div>
@@ -130,7 +135,7 @@
            </div>
            <hr class="hr" v-if="bookConfig.textbookComponents.indexOf('A434F2C0') > -1"/>
            <div class="tabItem hover" @click="selectExercisesType('collection')" v-if="bookConfig.textbookComponents.indexOf('A434F2C0') > -1">
              <div>收藏</div>
              <div>收藏夹</div>
              <div :class="exercisesType == 'collection' ? 'text' : 'line'"></div>
            </div>
          </div>
@@ -461,7 +466,7 @@
          </div>
        </div>
        <div class="questionList" v-if="activeMenu == '题库'" v-loading="listLoading">
          <div class="resourceSearchBox">
          <div class="resourceSearchBox" v-if="exercisesType !== 'collection' && exercisesType !=='wrong'">
            <div class="inputBox">
              <el-input
                class="custom-input"
@@ -482,14 +487,14 @@
              <div v-for="(item, index) in questionList" :key="index" class="reMarkItem">
                <div
                  class="questionCon hover"
                  @click="JumpPosition(item)"
                  @click="clickQuestion(exercisesType,item)"
                  :title="item.resourceName"
                >
                  {{ item.resourceName }}
                </div>
              </div>
            </div>
            <div v-else>
            <div v-if="questionList.length == 0 && (exercisesType !== 'collection' && exercisesType !=='wrong')">
              <el-empty :image-size="60" description="暂无数据" />
            </div>
          </div>
@@ -1182,12 +1187,15 @@
      <wrongQuestion  />
    </div>
  </el-dialog>
  <!-- 答题器 -->
  <examination ref="examinationRef"  :activeBook="bookConfig" :info="examinationData.info" :type="examinationData.type" :infoType="examinationData.infoType" />
</template>

<script setup lang="ts">
import { ref, reactive, watch, onMounted, onBeforeMount, onBeforeUnmount, inject } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import useClipboard from 'vue-clipboard3'
import examination from '../examination/index.vue'
const { toClipboard } = useClipboard()
const MG: any = inject('MG')
const toolClass = inject('toolClass')
@@ -1297,6 +1305,7 @@

import { loadMicroApp } from 'qiankun'
import { microApps } from '@/child.ts'
import { open } from 'fs'
let token = localStorage.getItem('token')
const canvasWith = ref(1000)
const canvasheight = ref(3000)
@@ -1543,7 +1552,7 @@
    {
      name: '题库',
      icon: question,
      isShow: bookConfig.value.textbookComponents.indexOf('3D3B4F55') > -1 || bookConfig.value.textbookComponents.indexOf('AFC1A288') > -1 || bookConfig.value.textbookComponents.indexOf('A434F2C0') > -1
      isShow: bookConfig.value.textbookComponents.indexOf('3D3B4F55') > -1 || bookConfig.value.textbookComponents.indexOf('AFC1A288') > -1 || bookConfig.value.textbookComponents.indexOf('A434F2C0') > -1 || bookConfig.value.textbookComponents.indexOf('A4821F71') > -1
    }
  ]
  teachToolsMenuData = [
@@ -2006,7 +2015,6 @@

//资源跳转到指定位置
const JumpPosition = (data) => {
  console.log(data, '跳转')
  if (window.qiankunState && window.qiankunState.gotoPage) {
    window.qiankunState.gotoPage(Number(data.chapterNum), Number(data.pagination))
  }
@@ -2036,6 +2044,13 @@
//习题
const exercisesType = ref('exercises') //习题类型
const questionList = ref([])
const examinationRef = ref() // 答题器实例
const examinationData = reactive({
  type:"",  // 答题类型  option 测试
  infoType:"",  // 数据来源  bits 比特后台  json  假数据
  info:{}, // 这套题的信息
})
// 获取习题
const getExercisesList = () => {
  if (token) {
    listLoading.value = true
@@ -2078,6 +2093,38 @@
  }
}

// 获取附加题
const getAdditionalList = () => {
  if (token) {
    listLoading.value = true
    questionList.value = []
    axios
      .get(bookConfig.value.resourceUrl + '/bits-question.json')
      .then((res) => {
        // 处理获取到的json数据
        if (res.data.data.length > 0) {
          questionList.value = res.data.data
          examinationData.infoType = res.data.type
        }
        listLoading.value = false
      })
      .catch(() => {
        listLoading.value = false
      })
  } else {
    ElMessageBox.confirm('请先登录！', {
      confirmButtonText: '去登录',
      cancelButtonText: '取消',
      autofocus: false,
      type: 'warning'
    })
      .then(() => {
        router.push('/login')
      })
      .catch(() => {})
  }
}

//错题本
const wrongQuestionVisble = ref(false)
const selectExercisesType = (type) => {
@@ -2085,12 +2132,37 @@
  searchText.value = ''
  if (type == 'exercises') {
    getExercisesList()
  } else if(type == 'additional') {
    getAdditionalList()
  } else if(type == 'wrong'){
    openExaminationDialog(true,{},'errorQuestion')
    questionList.value = []
  }else{
    openExaminationDialog(true,{},'collectQuestion')
    questionList.value = []
  }
}
// 题列表点击
const clickQuestion = (type:string,data:any) => {
  switch (type) {
    case 'exercises':
      JumpPosition(data)
      break;
    case 'additional':
      openExaminationDialog(true,data,'option')
      break;
    default:
      break;
  }
}
const openExaminationDialog = (isSHow:boolean,data:any,type:string) => {
  if(examinationRef.value) {
    examinationRef.value.handleExaminationDialog(isSHow)
    examinationData.type = type
    examinationData.info = data
  }
  
}

// 选中菜单
const activeMenu = ref('目录')