From 870e0b3c8361cfa8af3facf67b08f1f5be66252a Mon Sep 17 00:00:00 2001 From: user1 <10901603+no-distractions1@user.noreply.gitee.com> Date: 星期四, 13 六月 2024 10:13:49 +0800 Subject: [PATCH] Merge branch 'master' of http://182.92.203.7:2001/r/testbookLayout --- src/components/examinations/index.vue | 572 ++++++++++++++++++++++++++++----------------------------- 1 files changed, 281 insertions(+), 291 deletions(-) diff --git a/src/components/examinations/index.vue b/src/components/examinations/index.vue index 9adde9f..23b1a5f 100644 --- a/src/components/examinations/index.vue +++ b/src/components/examinations/index.vue @@ -1,7 +1,12 @@ <template> <div class="examination" v-loading="loading"> - <div v-for="(item, nindex) in cardList" :key="nindex"> - <p class="catalogName"> + <div + v-for="(item, nindex) in cardData" + :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> @@ -18,7 +23,13 @@ <!-- 鏍囬 --> <div class="questionTitle"> <div class="titleContent"> - <span class="questionNum" :style="{marginTop:value.questionType == 'completion' ? '12px' : '0'}">{{ index + 1 }}銆�</span> + <span + class="questionNum" + :style="{ + marginTop: value.questionType == 'completion' ? '12px' : '0', + }" + >{{ index + 1 }}. + </span> <!-- 鍚姏杩涘害鏉� --> <!-- <answerAudioPlayer :audioUrl="value.src" v-show="item.name == '鍚姏棰�'" /> --> <!-- 棰樺共 --> @@ -113,7 +124,9 @@ :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" @@ -200,7 +213,8 @@ " ></TEditorVue> --> <el-input - style="width: 90%; margin: 0 auto" + :disabled="value.isComplete" + style="width: 94%; margin: 0 auto" v-else-if="value.questionType == 'shortAnswer'" type="textarea" :rows="6" @@ -268,12 +282,12 @@ </p> <div class="headerConent sitgBox"> <p v-if="!value.isUnfold"> - <span class="analysisColor">鏌ョ湅瑙f瀽</span - ><el-image :src="chakanIcon" /> + <span class="analysisColor">灞曞紑瑙f瀽</span + ><el-image /> </p> <p v-else> <span class="analysisColor">鏀惰捣瑙f瀽</span - ><el-image :src="packIcon" /> + ><el-image /> </p> </div> </div> @@ -287,12 +301,53 @@ </el-collapse-item> <!-- 涓昏棰� --> </el-collapse> - <div + <el-collapse v-else v-model="value.isUnfold" accordion> + <el-collapse-item :name="value.id" class="objective"> + <template #title> + <div class="headerBox"> + <p v-if="!value.isUnfold"> + <span class="analysisColor">灞曞紑绛旀涓庤В鏋�</span> + </p> + <p v-else> + <span class="analysisColor">鏀惰捣绛旀涓庤В鏋�</span> + </p> + </div> + </template> + <div class="referBox"> + <span>鍙傝�冪瓟妗堬細</span> + <p + v-html="arrayToString(value.answer)" + class="ti-2" + :class="[ + 'subjectiveBox', + value.isUnfold ? 'showText' : 'hideText', + ]" + ></p> + </div> + <!-- 瑙f瀽 --> + <div class="referBox"> + <span>瑙f瀽锛�</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"> + <p class="difficulty" v-if="value.difficulty"> <span style="color: #333">闅惧害绛夌骇锛�</span> <el-rate v-model="value.difficulty" @@ -306,12 +361,10 @@ <span class="analysisColor" >{{ value.isUnfold ? "鏀惰捣绛旀鍜岃В鏋�" : "鏌ョ湅绛旀涓庤В鏋�" - }} </span - ><el-image :src="!value.isUnfold ? chakanIcon : packIcon" /> + }} + </span> </p> </div> - <!-- :class="['analysisDetailBox', value.isUnfold ? 'open' : 'close'].join(' ') --> - <!-- :class="['analysisDetailBox', value.isUnfold ? 'cartoon' : 'downCartoon'].join(' ') --> <div :class=" [ @@ -322,7 +375,6 @@ > <div class="referBox"> <span>鍙傝�冪瓟妗堬細</span> - <!-- <p v-html="arrayToString(value.answer)" class="subjectiveBox"></p> --> <p v-html="arrayToString(value.answer)" :class="[ @@ -345,36 +397,79 @@ <p v-else>鏆傛棤鏁版嵁</p> </div> </div> - </div> + </div> --> </div> </div> </li> </ul> </div> - <div class="bottom-btn" v-if="!loading"> - <el-button>淇濆瓨</el-button> - <el-button @click="openAnswers">鎻愪氦</el-button> - <el-button @click="redo">閲嶅仛</el-button> - <el-button @click="openAnswers">鏌ョ湅绛旀</el-button> + <el-button class="examinations-btn-box" @click="saveAnswer">淇濆瓨</el-button> + <el-button + @click="handleQuestion" + class="examinations-btn-box" + :style="{ borderColor: primaryColor }" + >鎻愪氦</el-button + > + <el-button @click="redo" class="examinations-btn-box">閲嶅仛</el-button> + <el-button + @click="openAnswers" + class="examinations-btn-box" + :style="{ borderColor: primaryColor }" + >鏌ョ湅绛旀</el-button + > </div> </div> </template> <script> -import { getPublicImage } from "@/assets/js/middleGround/tool"; export default { name: "examination-option", - props: ["productLinkPath"], + props: { + cardList: { + type: Array, + }, + primaryColor: { + type: String, + default: "#00aeef", + }, + chapter: { + type: Number, + }, + page: { + type: Number, + }, + isReal:{ + type:Boolean, + default:true + } + }, data() { return { type: "option", - cardList: [], loading: false, + cardData:[], + loading:true, + }; }, + watch:{ + cardList:{ + handler(newVal) { + console.log('11',newVal); + this.cardData = this.cardList + if(newVal && newVal.length) { + this.loading = false + } + }, + immediate:true, + deep:true + } + }, mounted() { - this.getIdPathList() + // this.cardData = this.cardList + // console.log('this.cardList',this.cardList); + // console.log('this.cardData',this.cardData); }, methods: { // 鏁扮粍杞负瀛楃涓叉柟娉� @@ -409,276 +504,128 @@ } }, 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; } } - // for (let index = 0; index < this.questionList.length; index++) { - // const item = this.questionList[index]; - // item.userAnswer = ""; - // item.isComplete = false - // } }, openAnswers() { - this.$data.loading = true - for (let index = 0; index < this.cardList.length; index++) { - const item = this.cardList[index]; + this.$data.loading = true; + 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; } } - this.$data.loading = false + this.$data.loading = false; }, watchParsing(data) { data.isUnfold = !data.isUnfold; }, - // 鑾峰彇璇曞嵎涓嬮鐩被鍨� - getIdPathList() { - this.$data.loading = true; - let query = { - path: "*", - queryType: "*", - productId: this.config.bookId, - cmsPath: '24080\\63791\\63792\\63807', - pading: { - start: 0, - size: 999, - }, - }; - this.MG.store.getProductDetail(query).then(async (res) => { - console.log(this.$props.productLinkPath,res.datas.cmsDatas[0].datas); - const idPathList = res.datas.cmsDatas[0].datas; - await this.getQuestionList(idPathList); - }); + // 鎵规敼棰樼洰 (缁冧範,鎴戠殑鍋氶,鎴戠殑鏀惰棌妯″紡涓�) + handleQuestion() { + const list = this.cardData; + for (let index = 0; index < list.length; index++) { + const item = list[index]; + for (let cindex = 0; cindex < item.infoList.length; cindex++) { + const citem = item.infoList[cindex]; + citem.isComplete = true; + // 淇敼棰樼洰鐘舵�佷负瀹屾垚 + citem.isComplete = true; + // 鎵规敼棰樼洰 + if (citem.questionType == "multipleChoice") { + // 澶氶�夐 + if (citem.answer.length == citem.userAnswer.length) { + const sortedArr1 = citem.answer.slice().sort(); + const sortedArr2 = citem.userAnswer.slice().sort(); + citem.isRight = sortedArr1.every( + (value, index) => value === sortedArr2[index] + ); + } else { + citem.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] + ); + } + } + } + } + } + this.cardData = list; + console.log(this.cardData); }, - // 鑾峰彇棰樺簱棰樼洰 - async getQuestionList(idPathList, oldData) { - let cardList = []; - // 娓呯┖姝g‘棰樻暟璁板綍 - for (let index = 0; index < idPathList.length; index++) { - const pathitem = idPathList[index]; - const pathList = cardList; - pathList.push({ - path: pathitem.productLinkPath, - catalogName: pathitem.name, - infoList: [], - }); - cardList = pathList; - // 鑾峰彇棰樼洰 - let query = { - path: "*", - queryType: "*", - productId: this.config.bookId, - cmsPath: pathitem.productLinkPath, - itemFields: { - Embedded_QuestionBank_Stem: [], - Embedded_QuestionBank_AnalysisCon: [], - Embedded_QuestionBank_Answer: [], - Embedded_QuestionBank_Option: [], - Embedded_QuestionBank_QuestionType: [], - Embedded_QuestionBank_StemStyle: [], - Embedded_QuestionBank_OptionStyle: [], - Embedded_QuestionBank_KnowledgePoint: [], - Embedded_QuestionBank_Difficulty: [], - }, - pading: { - start: 0, - size: 999, - }, - }; - await this.MG.store.getProductDetail(query).then((res) => { - let oldList; - if (oldData) { - // 鎻愪氦杩囷紝瀛樺湪绛旈璁板綍 - oldList = oldData.find( - (item) => item.path == pathitem.productLinkPath - ).infoList; - this.setData({ - submitStatus: true, + getParentWithClass(element, className) { + while (element.parentElement) { + element = element.parentElement; + if (element.classList.contains(className)) { + return element; + } + } + }, + // 淇濆瓨鎸夐挳 + saveAnswer() { + const element = (this.container ? this.container : document + ).querySelector(".examination"); + if (element) { + const pageNum = this.getParentWithClass( + element, + "page-box" + ).getAttribute("page"); + const oldAnswerData = localStorage.getItem( + this.config.activeBook.name + "oldAnswerData" + ); + let oldData = oldAnswerData ? JSON.parse(oldAnswerData) : {}; + const asnwerList = []; + for (let index = 0; index < this.cardData.length; index++) { + const item = this.cardData[index]; + for (let cindex = 0; cindex < item.infoList.length; cindex++) { + const citem = item.infoList[cindex]; + asnwerList.push({ + id: citem.id, + userAnswer: citem.userAnswer, }); } - res.datas.cmsDatas[0].datas.forEach((item, index) => { - let oldObj = ""; - if (oldList) - oldObj = oldList.find((oldItem) => oldItem.id == item.id); - let questionObj = { - // num: index, // 棰樺彿 - id: item.id, - type: pathitem.name, - stem: - item.Embedded_QuestionBank_QuestionType == "completion" - ? JSON.parse(item.Embedded_QuestionBank_Stem) - .stemTxt.replaceAll("<vacancy>", ",input,") - .split(",") - : JSON.parse(item.Embedded_QuestionBank_Stem), // 棰樺共 - answer: item.Embedded_QuestionBank_Answer, // 绛旀 - option: item.Embedded_QuestionBank_Option - ? JSON.parse(item.Embedded_QuestionBank_Option) - : "", // 閫夋嫨棰橀�夐」 - analysisCon: item.Embedded_QuestionBank_AnalysisCon, // 瑙f瀽 - questionType: item.Embedded_QuestionBank_QuestionType, // 棰樺瀷 - optionStyle: item.Embedded_QuestionBank_OptionStyle, // 閫夐」鏄剧ず绫诲瀷 - stemStyle: item.Embedded_QuestionBank_StemStyle, // 棰樺共鏄剧ず绫诲瀷 - difficulty: item.Embedded_QuestionBank_Difficulty - ? 4 - item.Embedded_QuestionBank_Difficulty - : 0, // 闅惧害绛夌骇 - userAnswer: oldObj - ? oldObj.userAnswer - : item.Embedded_QuestionBank_QuestionType == "completion" || - item.Embedded_QuestionBank_QuestionType == "multipleChoice" - ? [] - : "", - isUserAnswer: oldObj - ? this.isHaveAnswer(oldObj.userAnswer) - : false, - isRight: oldObj ? oldObj.isRight : null, - isComplete: oldObj ? oldObj.isComplete : false, - isCollect: false, - isUnfold: "", // 鎺у埗瑙f瀽鐨勬姌鍙犻潰鏉挎槸鍚﹀睍寮� - }; - // 澶氶�夊拰濉┖绛旀鑲负鏁扮粍锛岃杞崲JSON鏍煎紡 - if ( - questionObj.questionType == "completion" || - questionObj.questionType == "multipleChoice" - ) { - try { - questionObj.answer = JSON.parse(questionObj.answer).toString(); - } catch (error) { - questionObj.answer = item.Embedded_QuestionBank_Answer; - } - } - // 濉┖棰樻敼閫� - if (questionObj.questionType == "completion") { - let index = 0; - for (let i = 0; i < questionObj.stem.length; i++) { - const item = questionObj.stem[i]; - if (item == "input") { - questionObj.stem[i] = { - num: index, - data: "input", - }; - if (!oldObj) questionObj.userAnswer[index] = ""; - index++; - } - } - } - // 棰樺共瀵屾枃鏈鐞� - if (questionObj.stemStyle == "RichText") { - // questionObj.option.txt = '' - questionObj.stem.stemTxt = questionObj.stem.stemTxt - .replace( - /\<img/gi, - '<img style="max-width: 300rpx !important;object-fit: contain;" class="stem-rich-img" ' - ) - .replace(/\<p/gi, '<p class="stem-rich-p"') - .replace("../file", app.config.requestCtx + "/file"); - } - // 閫夐」瀵屾枃鏈鐞� - if ( - questionObj.optionStyle == "RichText" && - (questionObj.questionType == "singleChoice" || - questionObj.questionType == "judge" || - questionObj.questionType == "multipleChoice") - ) { - questionObj.option.forEach((item) => { - if (item.txt) - item.txt = item.txt - .replace(/\<img/gi, '<img class="option-rich-img"') - .replace(/\<p/gi, '<p class="stem-rich-p"') - .replace("../file", app.config.requestCtx + "/file"); - }); - } - // 瑙f瀽瀵屾枃鏈鐞� - if ( - questionObj.analysisCon && - typeof questionObj.analysisCon == "string" - ) { - questionObj.analysisCon = questionObj.analysisCon.replace( - /\<img/gi, - '<img style="max-width: 300rpx !important;object-fit: contain;" class="stem-rich-img" ' - ); - } - // 鍚姏棰樹慨鏀� - // if (questionObj.questionType == 'singleChoice') { - // const src = this.extractSourceSrc(questionObj.stem.stemTxt) - // if (src) { - // questionObj.src = src - // questionObj.stem.stemTxt = this.removeVideoAndAudioTags(questionObj.stem.stemTxt) - // } - // } - // 鑾峰彇鍥剧墖 - if ( - questionObj.stemStyle == "Image" || - questionObj.stemStyle == "TxtAndImage" - ) { - questionObj.stem.stemImage = getPublicImage( - questionObj.stem.stemImage, - 150 - ); - } - if ( - questionObj.optionStyle == "Image" || - questionObj.optionStyle == "TxtAndImage" - ) { - questionObj.option.forEach((optionItem) => { - if (optionItem.img) - optionItem.img = getPublicImage(optionItem.img, 150); - }); - } - // 瀹㈣棰樻�诲垎璧嬪�� - if (questionObj.questionType !== "shortAnswer") { - // this.setData({ - // subjectiveGrade: this.data.subjectiveGrade + 2, - // }); - } - // 鏃ф暟鎹噷 棰樼洰姝g‘ 璁板綍姝g‘鏁伴噺 - if (questionObj.isRight) { - // this.setData({ - // correctNum: this.data.correctNum + 1, - // }); - } - if ( - pathitem.name == "鍒ゆ柇棰�" || - pathitem.name == "濉┖棰�" || - pathitem.name == "澶氶�夐" || - pathitem.name == "鍗曢�夐" || - pathitem.name == "鍚姏棰�" - ) { - if (oldObj) { - // this.setData({ - // subjectiveTotal: this.data.subjectiveTotal + 1, - // }); - } - } - // cardList璧嬪�� - let cardIndex = cardList.findIndex( - (item) => item.path == pathitem.productLinkPath - ); - let infoList = cardList[cardIndex].infoList; - infoList.push(questionObj); - cardList[cardIndex].infoList = infoList; - let questionList = []; - const cardUpdatedList = cardList; - cardUpdatedList.forEach((aitem) => { - aitem.infoList.forEach((bitem, bindex) => { - questionList.push(bitem); - bitem.number = bindex + 1; - bitem.score = 2; - }); - }); - cardList = cardUpdatedList; - this.$data.cardList = cardList; - this.$data.loading = false; - // console.log("棰樼洰鍛�", cardList); - // return cardList - }); - }); + } + if(oldData[pageNum]) { + oldData[pageNum] = oldData[pageNum].filter(citem => asnwerList.findIndex(ditem => ditem.id == citem.id) == -1 ) + oldData[pageNum].push(...asnwerList) + } else { + oldData[pageNum] = asnwerList + } + localStorage.setItem(this.config.activeBook.name + "oldAnswerData", JSON.stringify(oldData)); } + + // if(oldData[this.chapter]) { + // oldData[this.chapter][this.page] = asnwerList + // } else { + // oldData[this.chapter] = {} + // oldData[this.chapter][this.page] = asnwerList + // } + // console.log(oldData); + }, }, }; @@ -686,14 +633,42 @@ <style lang="less" scoped> .catalogName { - color: #00aeef; + // color: #00aeef; + // color: #ff6c00; text-indent: 1em !important; - font-size: 24px; + font-size: 16px; } .examination { + margin-top: 20px; min-height: 100px; ul { - list-style:none ; + list-style: none; + } +} +.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 { @@ -747,9 +722,9 @@ padding-left: 12px; display: flex; align-items: center; - font-size: 14px; + font-size: 16px; .questionText { - font-size: 14px; + font-size: 16px; color: #000; } span { @@ -759,12 +734,14 @@ /** 棰樺共 */ .questionTitle { display: flex; - justify-content: space-between; + justify-content: center; .titleContent { width: 95%; display: flex; align-items: flex-start; .questionNum { + text-indent: 0 !important; + margin-right: 5px; height: 32px; line-height: 32px; text-align: center; @@ -774,23 +751,26 @@ } .titleText { text-align: left; - padding: 0 10px 10px 0px; + // padding: 0 10px 10px 0px; min-width: 90%; - font-size: 14px; + font-size: 16px; line-height: 32px; color: #000; span { display: inline-block; - font-size: 14px; + font-size: 16px; // line-height: 26px; color: #000; font-weight: 400; margin-top: 6px; } .el-input { - width: 150px; + width: 140px; height: 24px; border-top: 0; + } + /deep/ .el-textarea.is-disabled .el-textarea__inner { + background-color: #fff; } /deep/.el-input__wrapper { border-top: 0 !important; @@ -799,7 +779,7 @@ border-top: 0 !important; border-left: 0 !important ; border-right: 0 !important ; - border-bottom: 1px solid #000 !important; + border-bottom: 1px solid #15c0f2 !important; border-radius: 0 !important; } /deep/ .el-input.is-disabled .el-input__inner { @@ -832,11 +812,15 @@ align-items: center; min-width: 45%; margin-right: 50px; + 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; @@ -848,6 +832,8 @@ } .analysis { margin: 20px 0; + width: 94%; + // margin-left: 12px; } .el-collapse { width: 100%; @@ -858,7 +844,7 @@ min-height: 48px; height: min-content; padding: 0 20px; - font-size: 14px; + font-size: 16px; background-color: #f4f4f4; .headerBox { width: 100%; @@ -908,7 +894,7 @@ } .errorBox { width: 100px; - height: 48px; + // height: 48px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -934,10 +920,10 @@ color: #333; } /deep/ .el-collapse-item__content { - width: 100%; + width: 93%; padding: 0 20px; background-color: #f4f4f4; - font-size: 14px; + font-size: 16px; color: #333; } /deep/ .el-collapse-item__arrow { @@ -956,7 +942,7 @@ background-color: #f4f4f4; width: 100%; padding: 0 20px; - font-size: 14px; + font-size: 16px; display: flex; flex-direction: column; justify-content: flex-start; @@ -1007,7 +993,7 @@ span, p { text-indent: 0em; - font-size: 14px; + font-size: 16px; line-height: 20px; } } @@ -1148,7 +1134,7 @@ } .bottom-btn { - margin-top: 50px; + margin-top: 25px; display: flex; justify-content: center; flex-wrap: wrap; @@ -1156,4 +1142,8 @@ margin-top: 10px; } } +.radio-img { + width: 200px; + object-fit: contain; +} </style> -- Gitblit v1.9.1