From 0a465050c773d8b420f2b99d598de3d5dc9aef2b Mon Sep 17 00:00:00 2001 From: YM <479443481@qq.com> Date: 星期五, 17 五月 2024 15:45:28 +0800 Subject: [PATCH] Merge branch 'master' of http://182.92.203.7:2001/r/testbookLayout --- src/components/examinations/index.vue | 478 ++++++++++++++++++++--------------------------------------- 1 files changed, 161 insertions(+), 317 deletions(-) diff --git a/src/components/examinations/index.vue b/src/components/examinations/index.vue index 747117f..e1dc40a 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" class="border-box" v-show="item.infoList.length"> - <p class="catalogName"> + <div class="examination" v-loading="!cardList.length"> + <div + v-for="(item, nindex) in 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> @@ -23,8 +28,8 @@ :style="{ marginTop: value.questionType == 'completion' ? '12px' : '0', }" - >{{ index + 1 }}. </span - > + >{{ index + 1 }}. + </span> <!-- 鍚姏杩涘害鏉� --> <!-- <answerAudioPlayer :audioUrl="value.src" v-show="item.name == '鍚姏棰�'" /> --> <!-- 棰樺共 --> @@ -63,7 +68,7 @@ v-for="(itemText, indexText) in value.stem" :key="indexText" > - <span v-if="typeof itemText == 'string'" >{{ itemText }}</span> + <span v-if="typeof itemText == 'string'">{{ itemText }}</span> <!-- --> <el-input v-else @@ -207,7 +212,7 @@ ></TEditorVue> --> <el-input :disabled="value.isComplete" - style="width: 90%; margin: 0 auto" + style="width: 94%; margin: 0 auto" v-else-if="value.questionType == 'shortAnswer'" type="textarea" :rows="6" @@ -275,12 +280,12 @@ </p> <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 /> + ><el-image /> </p> </div> </div> @@ -294,7 +299,48 @@ </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" > @@ -313,12 +359,10 @@ <span class="analysisColor" >{{ value.isUnfold ? "鏀惰捣绛旀鍜岃В鏋�" : "鏌ョ湅绛旀涓庤В鏋�" - }} </span - > + }} + </span> </p> </div> - <!-- :class="['analysisDetailBox', value.isUnfold ? 'open' : 'close'].join(' ') --> - <!-- :class="['analysisDetailBox', value.isUnfold ? 'cartoon' : 'downCartoon'].join(' ') --> <div :class=" [ @@ -329,7 +373,6 @@ > <div class="referBox"> <span>鍙傝�冪瓟妗堬細</span> - <!-- <p v-html="arrayToString(value.answer)" class="subjectiveBox"></p> --> <p v-html="arrayToString(value.answer)" :class="[ @@ -352,26 +395,25 @@ <p v-else>鏆傛棤鏁版嵁</p> </div> </div> - </div> + </div> --> </div> </div> </li> </ul> </div> - <div class="bottom-btn" v-if="!loading"> - <el-button style="height: 34px; padding: 4px 10px">淇濆瓨</el-button> + <el-button class="btn-box" @click="saveAnswer">淇濆瓨</el-button> <el-button @click="handleQuestion" - style="border-color: #1eb9ee; height: 34px; padding: 4px 10px" + class="btn-box" + :style="{ borderColor: primaryColor }" >鎻愪氦</el-button > - <el-button @click="redo" style="height: 34px; padding: 4px 10px" - >閲嶅仛</el-button - > + <el-button @click="redo" class="btn-box">閲嶅仛</el-button> <el-button @click="openAnswers" - style="border-color: #1eb9ee; height: 34px; padding: 4px 10px" + class="btn-box" + :style="{ borderColor: primaryColor }" >鏌ョ湅绛旀</el-button > </div> @@ -382,16 +424,30 @@ import { getPublicImage } from "@/assets/js/middleGround/tool"; export default { name: "examination-option", - props: ["cardList"], + // props: ["cardList"], + props: { + cardList: { + type: Array, + default:[] + }, + primaryColor: { + type: String, + default: "#00aeef", + }, + chapter: { + type: Number, + }, + page: { + type: Number, + }, + }, data() { return { type: "option", - cardList: [], loading: false, }; }, - mounted() { - }, + mounted() {}, methods: { // 鏁扮粍杞负瀛楃涓叉柟娉� arrayToString(data) { @@ -451,312 +507,92 @@ this.$data.loading = false; }, watchParsing(data) { - debugger - data.isUnfold = !data.isUnfold; }, - // // 鑾峰彇璇曞嵎涓嬮鐩被鍨� - // getIdPathList() { - // this.$data.loading = true; - // let query = { - // path: "*", - // queryType: "*", - // productId: this.config.bookId, - // cmsPath: "24080\\63791\\63792\\63807", - // pading: { - // start: 0, - // size: 999, - // }, - // }; - // this.MG.store.getProductDetail(query).then(async (res) => { - // console.log(this.$props.productLinkPath, res.datas.cmsDatas[0].datas); - // const idPathList = res.datas.cmsDatas[0].datas; - // await this.getQuestionList(idPathList); - // }); - // }, - // // 鑾峰彇棰樺簱棰樼洰 - // async getQuestionList(idPathList, oldData) { - // let cardList = []; - // // 娓呯┖姝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, - // }); - // } - // 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 - // }); - // }); - // } - // }, // 鎵规敼棰樼洰 (缁冧範,鎴戠殑鍋氶,鎴戠殑鏀惰棌妯″紡涓�) handleQuestion() { - const list = this.$props.cardList + const list = this.$props.cardList; for (let index = 0; index < list.length; index++) { const item = list[index]; for (let cindex = 0; cindex < item.infoList.length; cindex++) { const citem = item.infoList[cindex]; citem.isComplete = true; - // 淇敼棰樼洰鐘舵�佷负瀹屾垚 - citem.isComplete = true; - // 鎵规敼棰樼洰 - if (citem.questionType == "multipleChoice") { - // 澶氶�夐 - if (citem.answer.length == citem.userAnswer.length) { - const sortedArr1 = citem.answer.slice().sort(); - const sortedArr2 = citem.userAnswer.slice().sort(); - citem.isRight = sortedArr1.every( - (value, index) => value === sortedArr2[index] - ); - } else { + // 淇敼棰樼洰鐘舵�佷负瀹屾垚 + citem.isComplete = true; + // 鎵规敼棰樼洰 + if (citem.questionType == "multipleChoice") { + // 澶氶�夐 + if (citem.answer.length == citem.userAnswer.length) { + const sortedArr1 = citem.answer.slice().sort(); + const sortedArr2 = citem.userAnswer.slice().sort(); + citem.isRight = sortedArr1.every( + (value, index) => value === sortedArr2[index] + ); + } else { + citem.isRight = false; + } + } else if ( + citem.questionType == "singleChoice" || + citem.questionType == "judge" + ) { + 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 if ( - citem.questionType == "singleChoice" || - citem.questionType == "judge" - ) { - if(citem.id == '63825') console.log('i',item); - citem.isRight = citem.answer == citem.userAnswer; - } else if (citem.questionType == "shortAnswer") { - // 绠�绛� 缈昏瘧 - citem.isRight = null; - } else if (citem.questionType == "completion") { - // 濉┖ - if (typeof citem.answer == "string") { - citem.isRight = citem.answer == citem.userAnswer[0]; } else { - if (citem.answer.length != citem.userAnswer.length) { - citem.isRight = false; - } else { - citem.isRight = citem.answer.every( - (value, index) => - value === citem.userAnswer[index] - ); - } + citem.isRight = citem.answer.every( + (value, index) => value === citem.userAnswer[index] + ); } } + } } - } - this.$props.cardList = list + this.$props.cardList = list; console.log(this.$props.cardList); + }, + // 淇濆瓨鎸夐挳 + saveAnswer() { + console.log(this.cardList); + const oldAnswerData = localStorage.getItem("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 cindex = 0; cindex < item.infoList.length; cindex++) { + const citem = item.infoList[cindex]; + asnwerList.push({ + id: citem.id, + userAnswer: citem.userAnswer, + }); + } + } + if(oldData[this.chapter]) { + oldData[this.chapter][this.page] = asnwerList + } else { + oldData[this.chapter] = {} + oldData[this.chapter][this.page] = asnwerList + } + console.log(oldData); + localStorage.setItem("oldAnswerData", JSON.stringify(oldData)); }, }, }; + </script> <style lang="less" scoped> .catalogName { - color: #00aeef; + // color: #00aeef; + // color: #ff6c00; text-indent: 1em !important; font-size: 16px; } @@ -767,16 +603,22 @@ list-style: none; } } +.btn-box { + height: 30px; + width: 78px; + padding: 4px 10px; +} .border-box { padding-top: 20px; - border: 2px solid #e9e9e9; + // border: 2px solid #e9e9e9; } -.border-box:first-child { - border-top:2px solid #e9e9e9 ; +.ti-2 { + text-indent: 2em !important; } .questionContent { // display: flex; // justify-content: center; + text-indent: 0em !important; margin-left: 20px; /deep/ .el-textarea__inner:focus { border-color: #15c0f2; @@ -856,6 +698,8 @@ display: flex; align-items: flex-start; .questionNum { + text-indent: 0 !important; + margin-right: 5px; height: 32px; line-height: 32px; text-align: center; @@ -865,7 +709,7 @@ } .titleText { text-align: left; - padding: 0 10px 10px 0px; + // padding: 0 10px 10px 0px; min-width: 90%; font-size: 16px; line-height: 32px; @@ -884,7 +728,7 @@ border-top: 0; } /deep/ .el-textarea.is-disabled .el-textarea__inner { - background-color: #fff ; + background-color: #fff; } /deep/.el-input__wrapper { border-top: 0 !important; @@ -946,7 +790,7 @@ } .analysis { margin: 20px 0; - width:550px; + width: 94%; // margin-left: 12px; } .el-collapse { -- Gitblit v1.9.1