From e81c27ae4f00a107b1bf67062c9f008686a8e19f Mon Sep 17 00:00:00 2001
From: 闫增涛 <1829501689@qq.com>
Date: 星期六, 12 十月 2024 13:06:03 +0800
Subject: [PATCH] 数学

---
 src/components/examinations/index.vue |  759 +++++++++++++++++++++++++++++++++++----------------------
 1 files changed, 464 insertions(+), 295 deletions(-)

diff --git a/src/components/examinations/index.vue b/src/components/examinations/index.vue
index 6b36a86..ded0303 100644
--- a/src/components/examinations/index.vue
+++ b/src/components/examinations/index.vue
@@ -1,11 +1,6 @@
 <template>
-  <div class="examination" v-loading="!cardList.length">
-    <div
-      v-for="(item, nindex) in cardList"
-      :key="nindex"
-      class="border-box"
-      v-show="item.infoList.length"
-    >
+  <div class="examination" v-loading="loading">
+    <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 v-if="nindex == 0">涓�銆�</span>
         <span v-if="nindex == 1">浜屻��</span>
@@ -15,187 +10,105 @@
         <span>{{ item.catalogName }}</span>
       </p>
       <ul>
-        <li
-          v-for="(value, index) in item.infoList"
-          :key="value.id"
-          :id="'listItem-' + value.id"
-        >
+        <li v-for="(value, index) in item.infoList" :key="index + 'value'" :id="'listItem-' + value.id">
           <!-- 鏍囬 -->
           <div class="questionTitle">
             <div class="titleContent">
-              <span
-                class="questionNum"
-                :style="{
-                  marginTop: value.questionType == 'completion' ? '12px' : '0',
-                }"
-                >{{ index + 1 }}.
+              <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 class="titleText" v-if="
+                value.stemStyle == 'Txt' && value.questionType != 'completion'
+              " :id="value.id">
+                <span v-html="value.stem.stemTxt"></span>
+                <!-- {{ value.stem.stemTxt }} -->
               </p>
               <!-- 浠呭浘鐗� -->
-              <el-image
-                class="stemImg"
-                v-else-if="value.stemStyle == 'Image'"
+              <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>
+                :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 class="stemTxtAndImage titleText" v-else-if="value.stemStyle == 'TxtAndImage'">
+                <span v-html="value.stem.stemTxt"> <!-- {{ 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'">{{ itemText }}</span>
+                <span v-for="(itemText, indexText) in value.stem" :key="indexText + 'questionType'">
+                  <span v-if="typeof itemText == 'string'" v-html="itemText"></span>
                   <!-- &nbsp; -->
-                  <el-input
-                    v-else
-                    type="text"
-                    class="input"
-                    v-model.trim="value.userAnswer[itemText.num]"
-                    :disabled="value.isComplete"
-                  />
+                  <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>
+              <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="setCollect(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"
-                :class="
-                  value.optionStyle == 'Image' ||
-                  value.optionStyle == 'TxtAndImage' ||
-                  value.optionStyle == 'RichText'
-                    ? 'optionImg'
-                    : 'optionTxt'
-                "
-              >
+            <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,contentIndex) in value.option" :key="contentIndex + 'contentIndex'" :label="content.value" :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)]"
-                  ></el-image>
+                <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="sourceType == 'bits'"></el-image>
+                  <img :src="content.img" alt="" v-else 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 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>
+                <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' ||
+            <el-checkbox-group :disabled="value.isComplete" v-model="value.userAnswer" class="option"
+              v-else-if="value.questionType == 'multipleChoice'">
+              <el-checkbox v-for="(content,contentCindex) in value.option" :key="contentCindex + 'contentCindex'" :label="content.value"
+                :name="content.text" :class="value.optionStyle == 'Image' ||
                   value.optionStyle == 'TxtAndImage' ||
                   value.optionStyle == 'RichText'
-                    ? 'optionImg'
-                    : 'optionTxt'
-                "
-              >
+                  ? '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 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 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>
+                <p class="optionContent titleTextArea" v-else-if="value.optionStyle == 'RichText'"
+                  v-html="content.value + '銆�' + content.txt"></p>
               </el-checkbox>
             </el-checkbox-group>
             <!-- 绠�绛� 缈昏瘧 -->
@@ -210,92 +123,74 @@
               }
             "
           ></TEditorVue> -->
-            <el-input
-              @input="textChange($event,nindex,value.id)"
-              :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="checkPares(value)" style="margin-top: 10px"
-                >鏌ョ湅瑙f瀽</el-button
-              >
+            <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="checkPares(value)" style="margin-top: 10px">鏌ョ湅瑙f瀽</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 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">
                         <p class="correct" :title="arrayToString(value.answer)">
                           <span>姝g‘绛旀锛�</span>
-                          <span
-                            v-html="arrayToString(value.answer)"
-                            class="correctBox"
-                          ></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"
-                        >
+                        <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
-                          >
+                          <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"
-                        />
+                        <el-rate v-model="value.difficulty" :max="3" size="large" disabled
+                          disabled-void-color="#949494" />
                       </p>
+                      <!-- 姝g‘閿欒鍥炬爣 -->
+                      <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">灞曞紑瑙f瀽</span
-                          ><el-image />
+                          <span class="analysisColor">灞曞紑瑙f瀽</span><el-image />
                         </p>
                         <p v-else>
-                          <span class="analysisColor">鏀惰捣瑙f瀽</span
-                          ><el-image />
+                          <span class="analysisColor">鏀惰捣瑙f瀽</span><el-image />
                         </p>
                       </div>
                     </div>
                   </template>
                   <!-- 瑙f瀽 -->
-                  <div
-                    v-if="value.analysisCon"
-                    v-html="value.analysisCon"
-                  ></div>
+                  <div v-if="value.analysisCon" v-html="value.analysisCon"></div>
                   <div v-else>鏆傛棤鏁版嵁</div>
                 </el-collapse-item>
                 <!-- 涓昏棰� -->
@@ -314,29 +209,20 @@
                   </template>
                   <div class="referBox">
                     <span>鍙傝�冪瓟妗堬細</span>
-                    <p
-                      v-html="arrayToString(value.answer)"
-                      class="ti-2"
-                      :class="[
-                        'subjectiveBox',
-                        value.isUnfold ? 'showText' : 'hideText',
-                      ]"
-                    ></p>
+                    <span v-html="value.answer" class="ti-2" :class="[
+                      'subjectiveBox',
+                      value.isUnfold ? 'showText' : 'hideText',
+                    ]"></span>
                   </div>
                   <!-- 瑙f瀽 -->
-                  <div class="referBox">
+                  <div class="referBox" v-if="value.analysisCon">
                     <span>瑙f瀽锛�</span>
-                    <p
-                      v-if="value.analysisCon"
-                      v-html="value.analysisCon"
-                      :class="
-                        [
-                          'subjectiveBox',
-                          'ti-2',
-                          value.isUnfold ? 'yincang' : '',
-                        ].join(' ')
-                      "
-                    ></p>
+                    <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>
@@ -403,31 +289,29 @@
       </ul>
     </div>
     <div class="bottom-btn" v-if="!loading">
-      <el-button class="btn-box" @click="saveAnswer">淇濆瓨</el-button>
-      <el-button
-        @click="handleQuestion"
-        class="btn-box"
-        :style="{ borderColor: primaryColor }"
-        >鎻愪氦</el-button
-      >
-      <el-button @click="redo" class="btn-box">閲嶅仛</el-button>
-      <el-button
-        @click="openAnswers"
-        class="btn-box"
-        :style="{ borderColor: primaryColor }"
-        >鏌ョ湅绛旀</el-button
-      >
+      <el-button class="examinations-btn-box" @click="saveAnswer">淇濆瓨</el-button>
+      <el-button @click="(e) => {
+        handleQuestion();
+        saveAnswer(e);
+      }
+        " class="examinations-btn-box" :style="{ borderColor: primaryColor }">鎻愪氦</el-button>
+      <el-button @click="redo" class="examinations-btn-box">閲嶅仛</el-button>
+      <el-button @click="(e) => {
+        openAnswers();
+        saveAnswer(e);
+      }
+        " class="examinations-btn-box" :style="{ borderColor: primaryColor }">鏌ョ湅绛旀</el-button>
     </div>
   </div>
 </template>
 
 <script>
+import { Message } from "element-ui";
 export default {
   name: "examination-option",
   props: {
     cardList: {
       type: Array,
-      default: [],
     },
     primaryColor: {
       type: String,
@@ -439,19 +323,67 @@
     page: {
       type: Number,
     },
+    inputBc: {
+      type: String,
+      default: "#fff",
+    },
+    hideCollect: {
+      type: Boolean,
+      default: false,
+    },
+    sourceType: {
+      type: String,
+      default: "bits",
+    },
   },
   data() {
     return {
       type: "option",
       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: [],
+        },
+      ],
     };
   },
-  inject:['changeQuestionData'],
-  mounted() {},
-  computed:{
-    cardLists() {
-      return this.props.cardList
-    }
+  watch: {
+    cardList: {
+      handler(newVal) {
+        // console.log('鏂板��',newVal);
+        this.cardData = this.cardList;
+        if (newVal && newVal.length) {
+          this.loading = false;
+        }
+      },
+      immediate: true,
+      deep: true,
+    },
+  },
+  mounted() {
+    this.getCollectIdList();
+    this.getErrorList();
   },
   methods: {
     // 鏁扮粍杞负瀛楃涓叉柟娉�
@@ -486,20 +418,19 @@
       }
     },
     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 = "";
           citem.isComplete = false;
         }
       }
-      console.log('閲嶅仛',this.cardList);
     },
     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;
@@ -512,7 +443,8 @@
     },
     // 鎵规敼棰樼洰  (缁冧範,鎴戠殑鍋氶,鎴戠殑鏀惰棌妯″紡涓�)
     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++) {
@@ -555,10 +487,38 @@
               }
             }
           }
+          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) {
@@ -569,21 +529,19 @@
       }
     },
     // 淇濆瓨鎸夐挳
-    saveAnswer() {
-      const element = document.getElementsByClassName("examination")[0];
-      if (element) {
+    saveAnswer(e) {
+      if (e.srcElement) {
         const pageNum = this.getParentWithClass(
-          element,
+          e.srcElement,
           "page-box"
         ).getAttribute("page");
-        console.log(this.config.activeBook.name, pageNum);
         const oldAnswerData = localStorage.getItem(
           this.config.activeBook.name + "oldAnswerData"
         );
         let oldData = oldAnswerData ? JSON.parse(oldAnswerData) : {};
         const asnwerList = [];
-        for (let index = 0; index < this.$props.cardList.length; index++) {
-          const item = this.$props.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];
             asnwerList.push({
@@ -592,12 +550,20 @@
             });
           }
         }
-        if(oldData[pageNum]) {
-          oldData[pageNum].push(asnwerList)
+        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
+          oldData[pageNum] = asnwerList;
         }
-        localStorage.setItem(this.config.activeBook.name + "oldAnswerData", JSON.stringify(oldData));
+        localStorage.setItem(
+          this.config.activeBook.name + "oldAnswerData",
+          JSON.stringify(oldData)
+        );
+        Message.success("淇濆瓨鎴愬姛");
       }
 
       // if(oldData[this.chapter]) {
@@ -607,69 +573,174 @@
       //   oldData[this.chapter][this.page] = asnwerList
       // }
       // console.log(oldData);
-      
     },
-    textChange(value,a,b) {
-      console.log('杈撳叆',value,a,b);
-      console.log(this.cardList);
-      this.changeQuestionData(9,this.cardList)
-    }
+    handleCollect(infoNum, num) {
+      this.cardData[infoNum].infoList[num].isCollect =
+        !this.cardData[infoNum].infoList[num].isCollect;
+    },
+    // 棰樼洰鏀惰棌鎸夐挳,鏀惰棌鍜屽彇娑堝悓涓�鎺ュ彛锛屽彇娑堟暟缁勫噺鍘昏椤筰d
+    setCollect(num, number) {
+      const item = this.cardData[num].infoList[number];
+      item.isCollect = !item.isCollect;
+      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.collectList, list);
+      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);
+            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("绛旈鍣ㄨ姹傞鐩敹钘廼d鎶ラ敊");
+        });
+    },
+    // 鑾峰彇閿欓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) { }
+          console.log('閿欓鍒楄〃', this.allError)
+        })
+        .catch(() => { });
+    },
   },
 };
 </script>
 
 <style lang="less" scoped>
 .catalogName {
-  // color: #00aeef;
-  // color: #ff6c00;
   text-indent: 1em !important;
   font-size: 16px;
 }
+
 .examination {
-  margin-top: 20px;
   min-height: 100px;
+
   ul {
     list-style: none;
   }
+
+  p {
+    margin: 0;
+  }
 }
-.btn-box {
+
+.examinations-btn-box {
   height: 30px;
   width: 78px;
   padding: 4px 10px;
 }
+
 .border-box {
   padding-top: 20px;
   // border: 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;
@@ -681,51 +752,63 @@
   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;
@@ -736,6 +819,7 @@
       color: #333;
       font-weight: bold;
     }
+
     .titleText {
       text-align: left;
       // padding: 0 10px 10px 0px;
@@ -743,6 +827,7 @@
       font-size: 16px;
       line-height: 32px;
       color: #000;
+
       span {
         display: inline-block;
         font-size: 16px;
@@ -751,46 +836,46 @@
         font-weight: 400;
         margin-top: 6px;
       }
-      .el-input {
+
+      input {
         width: 140px;
         height: 24px;
-        border-top: 0;
+        border: 0;
+        outline: none;
+        border-bottom: 1px solid #15c0f2;
       }
+
       /deep/ .el-textarea.is-disabled .el-textarea__inner {
         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;
   }
 }
+
 /** 閫夐」 */
 .option {
+
   .el-radio,
   .el-checkbox {
     // min-height: 32px;
@@ -802,13 +887,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;
@@ -817,14 +905,17 @@
     color: #000;
   }
 }
+
 .analysis {
   margin: 20px 0;
   width: 94%;
   // margin-left: 12px;
 }
+
 .el-collapse {
   width: 100%;
 }
+
 /** 瑙f瀽 */
 .objective {
   /deep/ .el-collapse-item__header {
@@ -833,34 +924,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;
@@ -868,23 +967,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;
@@ -903,9 +1007,11 @@
     }
   }
 }
+
 /deep/ .el-collapse-item__header:focus:not(:hover) {
   color: #333;
 }
+
 /deep/ .el-collapse-item__content {
   width: 93%;
   padding: 0 20px;
@@ -913,16 +1019,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;
@@ -934,16 +1044,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;
@@ -952,31 +1065,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;
@@ -986,30 +1107,37 @@
     }
   }
 }
+
 // 閫夐」
 .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,
     .el-image__inner {
       max-width: 150px !important;
@@ -1018,19 +1146,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%;
@@ -1039,64 +1171,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;
@@ -1104,15 +1252,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;
@@ -1125,8 +1276,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>

--
Gitblit v1.9.1