From c718c815aef6ecb4175dc8ea7902a4adf0287714 Mon Sep 17 00:00:00 2001
From: 闫增涛 <1829501689@qq.com>
Date: 星期二, 22 十月 2024 15:20:33 +0800
Subject: [PATCH] 数学

---
 src/components/examinations/index.vue |  287 +++++++++++++++++++++++++++++++++++++++++++++------------
 1 files changed, 225 insertions(+), 62 deletions(-)

diff --git a/src/components/examinations/index.vue b/src/components/examinations/index.vue
index 96953e4..4cdcd5c 100644
--- a/src/components/examinations/index.vue
+++ b/src/components/examinations/index.vue
@@ -2,7 +2,7 @@
   <div class="examination" v-loading="loading">
     <div
       v-for="(item, nindex) in cardData"
-      :key="nindex"
+      :key="nindex + 'item'"
       class="border-box"
       v-show="item.infoList.length"
     >
@@ -12,12 +12,13 @@
         <span v-if="nindex == 2">涓夈��</span>
         <span v-if="nindex == 3">鍥涖��</span>
         <span v-if="nindex == 4">浜斻��</span>
-        <span>{{ item.catalogName }}</span>
+        <span v-html="item.catalogName" ></span>
       </p>
+      <el-image v-if="item.catalogImage" :src="item.catalogImage"></el-image>
       <ul>
         <li
           v-for="(value, index) in item.infoList"
-          :key="value.id"
+          :key="index + 'value'"
           :id="'listItem-' + value.id"
         >
           <!-- 鏍囬 -->
@@ -32,16 +33,15 @@
               </span>
               <!-- 鍚姏杩涘害鏉� -->
               <!-- <answerAudioPlayer :audioUrl="value.src" v-show="item.name == '鍚姏棰�'" /> -->
-              <!-- 棰樺共 -->
               <!-- 浠呮枃瀛� -->
               <p
-                class="titleText"
+                class="titleText text-fl"
                 v-if="
-                  value.stemStyle == 'Txt' && value.questionType != 'completion'
+                  value.stemStyle == 'Txt' && value.questionType != 'completion' &&  value.questionType !='dropdown'
                 "
                 :id="value.id"
+                v-html="value.stem.stemTxt"
               >
-                {{ value.stem.stemTxt }}
               </p>
               <!-- 浠呭浘鐗� -->
               <el-image
@@ -55,7 +55,8 @@
                 class="stemTxtAndImage titleText"
                 v-else-if="value.stemStyle == 'TxtAndImage'"
               >
-                <span> {{ value.stem.stemTxt }}</span>
+                <span v-html="value.stem.stemTxt">
+                </span>
                 <el-image
                   :src="getPublicImage(value.stem.stemImage, 150)"
                   :preview-src-list="[getPublicImage(value.stem.stemImage)]"
@@ -66,13 +67,13 @@
               <p class="titleText" v-if="value.questionType == 'completion'">
                 <span
                   v-for="(itemText, indexText) in value.stem"
-                  :key="indexText"
+                  :key="indexText + 'questionType'"
                 >
                   <span
                     v-if="typeof itemText == 'string'"
                     v-html="itemText"
+                    class="input-txt"
                   ></span>
-                  <!-- &nbsp; -->
                   <input
                     v-else
                     type="text"
@@ -81,7 +82,6 @@
                     :disabled="value.isComplete"
                     :style="{ backgroundColor: inputBc }"
                   />
-                  <!-- &nbsp; -->
                 </span>
               </p>
               <!-- 瀵屾枃鏈� -->
@@ -91,6 +91,32 @@
                 v-html="value.stem.stemTxt"
                 v-cloak
               ></p>
+              <!-- 涓嬫媺閫夋嫨棰� -->
+              <p class="titleText" v-if="value.questionType == 'dropdown'">
+                <span
+                  v-for="(itemText, indexText) in value.stem"
+                  :key="indexText + 'questionType'"
+                >
+                  <span
+                    v-if="typeof itemText == 'string'"
+                    v-html="itemText"
+                    class="input-txt"
+                  ></span>
+                  <el-select
+                    v-else 
+                    v-model="value.userAnswer" 
+                    :disabled="value.isComplete"
+                  >
+                    <el-option 
+                      v-for="(citem,cindex) in value.option"
+                      :key="cindex + 'dropdown'"
+                      :label="citem"
+                      :value="citem"
+                    >
+                    </el-option>
+                  </el-select>
+                </span>
+              </p>
             </div>
             <img
               :src="value.isCollect ? isHeart : heart"
@@ -113,8 +139,8 @@
               v-model="value.userAnswer"
             >
               <el-radio
-                v-for="content in value.option"
-                :key="content.value"
+                v-for="(content, contentIndex) in value.option"
+                :key="contentIndex + 'contentIndex'"
                 :label="content.value"
                 :class="
                   value.optionStyle == 'Image' ||
@@ -135,14 +161,9 @@
                     :src="getPublicImage(content.img, 115)"
                     v-show="content.img"
                     :preview-src-list="[getPublicImage(content.img)]"
-                    v-if="isReal"
+                    v-if="sourceType == 'bits'"
                   ></el-image>
-                  <img
-                    :src="content.img"
-                    alt=""
-                    v-if="!isReal"
-                    class="radio-img"
-                  />
+                  <img :src="content.img" alt="" v-else class="radio-img" />
                 </p>
                 <p
                   class="optionContent"
@@ -172,8 +193,8 @@
               v-else-if="value.questionType == 'multipleChoice'"
             >
               <el-checkbox
-                v-for="content in value.option"
-                :key="content.value"
+                v-for="(content, contentCindex) in value.option"
+                :key="contentCindex + 'contentCindex'"
                 :label="content.value"
                 :name="content.text"
                 :class="
@@ -254,7 +275,6 @@
             <div class="analysis" v-if="value.isComplete">
               <el-collapse
                 v-model="value.isUnfold"
-                @change="handleChange(value)"
                 accordion
                 v-if="value.questionType != 'shortAnswer'"
               >
@@ -355,8 +375,8 @@
                   ></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>
@@ -371,14 +391,14 @@
                   </template>
                   <div class="referBox">
                     <span>鍙傝�冪瓟妗堬細</span>
-                    <p
-                      v-html="arrayToString(value.answer)"
+                    <span
+                      v-html="value.answer"
                       class="ti-2"
                       :class="[
                         'subjectiveBox',
                         value.isUnfold ? 'showText' : 'hideText',
                       ]"
-                    ></p>
+                    ></span>
                   </div>
                   <!-- 瑙ｆ瀽 -->
                   <div class="referBox" v-if="value.analysisCon">
@@ -464,14 +484,24 @@
         >淇濆瓨</el-button
       >
       <el-button
-        @click="handleQuestion"
+        @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="openAnswers"
+        @click="
+          (e) => {
+            openAnswers();
+            saveAnswer(e);
+          }
+        "
         class="examinations-btn-box"
         :style="{ borderColor: primaryColor }"
         >鏌ョ湅绛旀</el-button
@@ -497,10 +527,6 @@
     },
     page: {
       type: Number,
-    },
-    isReal: {
-      type: Boolean,
-      default: true,
     },
     inputBc: {
       type: String,
@@ -560,13 +586,22 @@
     },
   },
   mounted() {
-    // this.cardData = this.cardList
-    // console.log('this.cardList',this.cardList);
-    // console.log('this.cardData',this.cardData);
     this.getCollectIdList();
-    this.getErrorList()
+    this.getErrorList();
   },
   methods: {
+    // 鑾峰彇涓嶅彈淇濇姢鐨勫浘鐗�
+    getPublicImage(md5, width, height) {
+      if(!md5) return 
+      if(md5.includes('http')) return md5
+      let src = null;
+      if (md5) {
+        src = process.env.VUE_APP_API_URL + `/file/GetPreViewImage?md5=${md5}`;
+      } 
+      if (width) src += `&width=${width}`;
+      if (height) src += `&height=${height}`;
+      return src;
+    },
     // 鏁扮粍杞负瀛楃涓叉柟娉�
     arrayToString(data) {
       // 妫�鏌ユ槸鍚︿负鏁扮粍
@@ -624,7 +659,7 @@
     },
     // 鎵规敼棰樼洰  (缁冧範,鎴戠殑鍋氶,鎴戠殑鏀惰棌妯″紡涓�)
     handleQuestion() {
-      let errorId = []
+      let errorId = [];
       const list = this.cardData;
       for (let index = 0; index < list.length; index++) {
         const item = list[index];
@@ -647,9 +682,9 @@
             }
           } else if (
             citem.questionType == "singleChoice" ||
-            citem.questionType == "judge"
+            citem.questionType == "judge" || 
+            citem.questionType == 'dropdown'
           ) {
-            if (citem.id == "63825") console.log("i", item);
             citem.isRight = citem.answer == citem.userAnswer;
           } else if (citem.questionType == "shortAnswer") {
             // 绠�绛� 缈昏瘧
@@ -668,33 +703,38 @@
               }
             }
           }
-          if(citem.isRight == false) {
-            errorId.push(citem.id)
+          if (citem.isRight == false) {
+            errorId.push(citem.id);
           }
         }
       }
       this.cardData = list;
-      let oldErrodId = this.allError.find(item => item.type == this.sourceType).errorList
+      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)
+        if (oldErrodId.indexOf(item) == -1) {
+          oldErrodId.push(item);
         }
       }
-      this.allError[1].errorList = oldErrodId
+      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',
+              domain: "errorData",
               key: this.config.activeBook.bookId,
-              value: JSON.stringify(this.allError)
-            }
-          ]
+              value: JSON.stringify(this.allError),
+            },
+          ],
         })
         .then((res) => {
-          console.log('閿欓宸蹭繚瀛�',this.allError)
-        })
+          console.log("閿欓宸蹭繚瀛�", this.allError);
+        });
     },
     getParentWithClass(element, className) {
       while (element.parentElement) {
@@ -775,7 +815,7 @@
         const item = this.allCollect[index];
         if (item.type == this.sourceType) item.collectList = this.collectList;
       }
-      console.log(this.allCollect, this.collectList, list);
+      // console.log(this.allCollect, this.collectList, list);
       this.MG.identity
         .setUserKey({
           setKeyRequests: [
@@ -792,6 +832,8 @@
     },
     // 鑾峰彇鏀惰棌id鍒楄〃
     getCollectIdList() {
+      const token = localStorage.getItem("token");
+      if (!token) return false;
       this.MG.identity
         .getUserKey({
           domain: "collectData",
@@ -821,6 +863,8 @@
     },
     // 鑾峰彇閿欓id鍒楄〃
     getErrorList() {
+      const token = localStorage.getItem("token");
+      if (!token) return false;
       this.MG.identity
         .getUserKey({
           domain: "errorData",
@@ -841,65 +885,84 @@
               ).errorList;
             }
           } catch (error) {}
-          console.log('閿欓鍒楄〃',this.allError);
-        });
+          console.log("閿欓鍒楄〃", this.allError);
+        })
+        .catch(() => {});
     },
   },
 };
 </script>
+
+
+<style lang="less" >
+  .titleText img {
+    max-width: 80%;
+  }
+</style>
 
 <style lang="less" scoped>
 .catalogName {
   text-indent: 1em !important;
   font-size: 16px;
 }
+
 .examination {
   min-height: 100px;
   ul {
     list-style: none;
   }
+
   p {
     margin: 0;
   }
+  math {
+  }
 }
+
 .examinations-btn-box {
   height: 30px;
   width: 78px;
   padding: 4px 10px;
 }
+
 .border-box {
   padding-top: 20px;
   // border: 2px solid #e9e9e9;
 }
+
 .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;
@@ -911,51 +974,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;
@@ -966,21 +1041,30 @@
       color: #333;
       font-weight: bold;
     }
+    .text-fl {
+      display:flex;
+      align-items:center;
+      flex-wrap:wrap;
+    }
     .titleText {
       text-align: left;
-      // padding: 0 10px 10px 0px;
       min-width: 90%;
       font-size: 16px;
       line-height: 32px;
       color: #000;
+      .input-txt {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+      }
       span {
         display: inline-block;
         font-size: 16px;
-        // line-height: 26px;
         color: #000;
         font-weight: 400;
         margin-top: 6px;
       }
+
       input {
         width: 140px;
         height: 24px;
@@ -988,29 +1072,35 @@
         outline: none;
         border-bottom: 1px solid #15c0f2;
       }
+
       /deep/ .el-textarea.is-disabled .el-textarea__inner {
         background-color: #fff;
       }
+
       /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,
@@ -1024,13 +1114,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;
@@ -1039,14 +1132,17 @@
     color: #000;
   }
 }
+
 .analysis {
   margin: 20px 0;
   width: 94%;
   // margin-left: 12px;
 }
+
 .el-collapse {
   width: 100%;
 }
+
 /** 瑙ｆ瀽 */
 .objective {
   /deep/ .el-collapse-item__header {
@@ -1055,6 +1151,7 @@
     padding: 0 20px;
     font-size: 16px;
     background-color: #f4f4f4;
+
     .headerBox {
       width: 100%;
       height: 100%;
@@ -1062,28 +1159,34 @@
       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;
@@ -1091,23 +1194,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: 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;
@@ -1126,9 +1234,11 @@
     }
   }
 }
+
 /deep/ .el-collapse-item__header:focus:not(:hover) {
   color: #333;
 }
+
 /deep/ .el-collapse-item__content {
   width: 93%;
   padding: 0 20px;
@@ -1136,16 +1246,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;
@@ -1157,16 +1271,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;
@@ -1175,31 +1292,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;
@@ -1209,28 +1334,34 @@
     }
   }
 }
+
 // 閫夐」
 .optionImg {
   height: min-content;
   margin-bottom: 6px;
+
   /deep/ img {
     margin-left: 10px;
     object-fit: contain;
     vertical-align: middle;
   }
 }
+
 .optionTxt {
   height: 32px;
 }
+
 // 棰樺共浠呭浘鐗�
 .stemImg {
   margin: 0 10px 10px 10px;
 }
+
 // 鏂囧瓧鍔犲浘鐗�
 .stemTxtAndImage {
   display: flex;
   align-items: flex-start;
 }
+
 .titleTextArea {
   ::v-deep {
     img,
@@ -1241,19 +1372,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%;
@@ -1262,64 +1397,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;
@@ -1327,15 +1478,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;
@@ -1348,17 +1502,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