From 6aac0dd9c6d6bd3de148f3d6e123f9c91b1aab4b Mon Sep 17 00:00:00 2001 From: user1 <10901603+no-distractions1@user.noreply.gitee.com> Date: 星期二, 02 七月 2024 09:31:04 +0800 Subject: [PATCH] Merge branch 'master' of http://182.92.203.7:2001/r/testbookLayout --- src/components/examinations/index.vue | 357 ++++++++++++++++++++++++++++++++++++++++++++++++++--------- 1 files changed, 302 insertions(+), 55 deletions(-) diff --git a/src/components/examinations/index.vue b/src/components/examinations/index.vue index 4998f9c..d6d99a8 100644 --- a/src/components/examinations/index.vue +++ b/src/components/examinations/index.vue @@ -68,14 +68,18 @@ v-for="(itemText, indexText) in value.stem" :key="indexText" > - <span v-if="typeof itemText == 'string'">{{ itemText }}</span> + <span + v-if="typeof itemText == 'string'" + v-html="itemText" + ></span> <!-- --> - <el-input + <input v-else type="text" class="input" v-model.trim="value.userAnswer[itemText.num]" :disabled="value.isComplete" + :style="{ backgroundColor: inputBc }" /> <!-- --> </span> @@ -88,6 +92,13 @@ 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"> @@ -124,7 +135,14 @@ :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" @@ -278,6 +296,46 @@ 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 @@ -313,17 +371,17 @@ </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> <!-- 瑙f瀽 --> - <div class="referBox"> + <div class="referBox" v-if="value.analysisCon"> <span>瑙f瀽锛�</span> <p v-if="value.analysisCon" @@ -402,17 +460,29 @@ </ul> </div> <div class="bottom-btn" v-if="!loading"> - <el-button class="btn-box" @click="saveAnswer">淇濆瓨</el-button> + <el-button class="examinations-btn-box" @click="saveAnswer" + >淇濆瓨</el-button + > <el-button - @click="handleQuestion" - class="btn-box" + @click=" + (e) => { + handleQuestion(); + saveAnswer(e); + } + " + class="examinations-btn-box" :style="{ borderColor: primaryColor }" >鎻愪氦</el-button > - <el-button @click="redo" class="btn-box">閲嶅仛</el-button> + <el-button @click="redo" class="examinations-btn-box">閲嶅仛</el-button> <el-button - @click="openAnswers" - class="btn-box" + @click=" + (e) => { + openAnswers(); + saveAnswer(e); + } + " + class="examinations-btn-box" :style="{ borderColor: primaryColor }" >鏌ョ湅绛旀</el-button > @@ -421,6 +491,7 @@ </template> <script> +import { Message } from "element-ui"; export default { name: "examination-option", props: { @@ -437,32 +508,70 @@ page: { type: Number, }, + isReal: { + type: Boolean, + default: true, + }, + inputBc: { + type: String, + default: "#fff", + }, + hideCollect: { + type: Boolean, + default: false, + }, + sourceType: { + type: String, + default: "bits", + }, }, data() { return { type: "option", loading: false, - cardData:[], - loading:true + 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: [], + }, + ], }; }, - watch:{ - cardList:{ + watch: { + cardList: { handler(newVal) { - console.log('11',newVal); - this.cardData = this.cardList - if(newVal && newVal.length) { - this.loading = false + this.cardData = this.cardList; + if (newVal && newVal.length) { + this.loading = false; } }, - immediate:true, - deep:true - } + immediate: true, + deep: true, + }, }, mounted() { - // this.cardData = this.cardList - // console.log('this.cardList',this.cardList); - // console.log('this.cardData',this.cardData); + this.getCollectIdList(); + this.getErrorList(); }, methods: { // 鏁扮粍杞负瀛楃涓叉柟娉� @@ -522,6 +631,7 @@ }, // 鎵规敼棰樼洰 (缁冧範,鎴戠殑鍋氶,鎴戠殑鏀惰棌妯″紡涓�) handleQuestion() { + let errorId = []; const list = this.cardData; for (let index = 0; index < list.length; index++) { const item = list[index]; @@ -565,10 +675,38 @@ } } } + if (citem.isRight == false) { + errorId.push(citem.id); + } } } this.cardData = list; - console.log(this.cardData); + 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) { @@ -579,12 +717,10 @@ } }, // 淇濆瓨鎸夐挳 - saveAnswer() { - const element = (this.container ? this.container : document - ).querySelector(".examination"); - if (element) { + saveAnswer(e) { + if (e.srcElement) { const pageNum = this.getParentWithClass( - element, + e.srcElement, "page-box" ).getAttribute("page"); const oldAnswerData = localStorage.getItem( @@ -602,13 +738,20 @@ }); } } - if(oldData[pageNum]) { - oldData[pageNum] = oldData[pageNum].filter(citem => asnwerList.findIndex(ditem => ditem.id == citem.id) == -1 ) - 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]) { @@ -618,7 +761,104 @@ // oldData[this.chapter][this.page] = asnwerList // } // console.log(oldData); - + }, + 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) {} + }) + .catch(() => {}); }, }, }; @@ -626,19 +866,19 @@ <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; @@ -757,23 +997,15 @@ 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; @@ -844,6 +1076,7 @@ height: 100%; display: flex; justify-content: space-between; + align-items: center; flex-wrap: wrap; .headerConent { height: 100%; @@ -880,7 +1113,7 @@ .error { display: flex; text-align: left; - width: 180px; + width: 170px; color: #ee1818; span { height: min-content; @@ -1135,4 +1368,18 @@ 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