From 2d7f36bc2b00c7e8aaa2964834a911dcf400c8a7 Mon Sep 17 00:00:00 2001 From: zhongshujie <2862698242@qq.com> Date: 星期五, 13 十二月 2024 18:56:54 +0800 Subject: [PATCH] 民航服务基本技能 --- src/components/examinations/index.vue | 1131 +++++++++++++++++++++++++++++++++++++++-------------------- 1 files changed, 743 insertions(+), 388 deletions(-) diff --git a/src/components/examinations/index.vue b/src/components/examinations/index.vue index 747117f..e99c446 100644 --- a/src/components/examinations/index.vue +++ b/src/components/examinations/index.vue @@ -1,18 +1,38 @@ <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"> - <span v-if="nindex == 0">涓�銆�</span> - <span v-if="nindex == 1">浜屻��</span> - <span v-if="nindex == 2">涓夈��</span> - <span v-if="nindex == 3">鍥涖��</span> - <span v-if="nindex == 4">浜斻��</span> - <span>{{ item.catalogName }}</span> + <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 class="catalogName-box"> + <span v-if="nindex == 0">涓�銆�</span> + <span v-if="nindex == 1">浜屻��</span> + <span v-if="nindex == 2">涓夈��</span> + <span v-if="nindex == 3">鍥涖��</span> + <span v-if="nindex == 4">浜斻��</span> + <span v-html="item.catalogName"></span> + </span> + <img + :src="item.isCollect ? isHeart : heart" + alt="" + class="collect-png" + @click="setCollect(nindex, index)" + v-if="!hideCollect && item.type == 'material'" + /> </p> + <el-image + v-if="item.catalogImage" + :src="item.catalogImage" + :preview-src-list="[item.catalogImage]" + class="catalogImage" + ></el-image> <ul> <li v-for="(value, index) in item.infoList" - :key="value.id" + :key="index + 'value'" :id="'listItem-' + value.id" > <!-- 鏍囬 --> @@ -21,23 +41,28 @@ <span class="questionNum" :style="{ - marginTop: value.questionType == 'completion' ? '12px' : '0', + marginTop: + value.questionType == 'completion' || + value.questionType == 'mathField' + ? '12px' + : '0', }" - >{{ index + 1 }}. </span - > + >{{ index + 1 }}. + </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' && + value.questionType != 'mathField' " :id="value.id" - > - {{ value.stem.stemTxt }} - </p> + v-html="value.stem.stemTxt" + ></p> <!-- 浠呭浘鐗� --> <el-image class="stemImg" @@ -50,7 +75,7 @@ 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)]" @@ -58,21 +83,44 @@ ></el-image> </p> <!-- 濉┖棰橀骞� --> - <p class="titleText" v-if="value.questionType == 'completion'"> + <p + class="titleText" + v-if=" + value.questionType == 'completion' || + value.questionType == 'mathField' + " + > <span v-for="(itemText, indexText) in value.stem" - :key="indexText" + :key="indexText + 'questionType'" > - <span v-if="typeof itemText == 'string'" >{{ itemText }}</span> - <!-- --> - <el-input - v-else + <span + v-if="typeof itemText == 'string'" + v-html="itemText" + class="input-txt" + ></span> + <input + v-if=" + typeof itemText != 'string' && + value.questionType == 'completion' + " type="text" class="input" v-model.trim="value.userAnswer[itemText.num]" :disabled="value.isComplete" + :style="{ backgroundColor: inputBc }" /> - <!-- --> + <math-field + v-if=" + typeof itemText != 'string' && + value.questionType == 'mathField' + " + class="mathField" + :menuItems="[]" + @input="onChangeInput($event, nindex, index, itemText.num)" + > + {{ value.userAnswer[itemText.num] }} + </math-field> </span> </p> <!-- 瀵屾枃鏈� --> @@ -82,7 +130,39 @@ 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> + <select + v-else + v-model="value.userAnswer" + :disabled="value.isComplete" + > + <option + v-for="(citem, cindex) in value.option" + :key="cindex + 'dropdown'" + :label="citem" + :value="citem" + ></option> + </select> + </span> + </p> </div> + <img + :src="value.isCollect ? isHeart : heart" + alt="" + class="collect-png" + @click="setCollect(nindex, index)" + v-if="!hideCollect && item.type != 'material'" + /> <!-- 鏀惰棌 --> </div> <div class="questionContent"> @@ -97,8 +177,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' || @@ -119,7 +199,9 @@ :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" @@ -149,8 +231,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=" @@ -194,20 +276,19 @@ </el-checkbox> </el-checkbox-group> <!-- 绠�绛� 缈昏瘧 --> - <!-- <TEditorVue - v-else-if="value.questionType == 'shortAnswer'" - :value="value.userAnswer" - :disabled="value.isComplete" - @getContent=" - (val) => { - value.userAnswer = val.trim(); - inputChange(); - } - " - ></TEditorVue> --> + <TEditorVue + v-else-if="value.questionType == 'formula'" + :value="value.userAnswer" + :disabled="value.isComplete" + @getContent=" + (val) => { + value.userAnswer = val; + } + " + /> <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" @@ -220,7 +301,8 @@ type != 'mock' && (value.questionType == 'shortAnswer' || value.questionType == 'multipleChoice' || - value.questionType == 'completion') + value.questionType == 'completion' || + value.questionType == 'mathField') " > <el-button @click="checkPares(value)" style="margin-top: 10px" @@ -231,9 +313,11 @@ <div class="analysis" v-if="value.isComplete"> <el-collapse v-model="value.isUnfold" - @change="handleChange(value)" accordion - v-if="value.questionType != 'shortAnswer'" + v-if=" + value.questionType != 'shortAnswer' && + value.questionType != 'formula' + " > <el-collapse-item :name="value.id" class="objective"> <template #title> @@ -273,14 +357,54 @@ 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 /> + ><el-image /> </p> </div> </div> @@ -292,9 +416,48 @@ ></div> <div v-else>鏆傛棤鏁版嵁</div> </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> + <span + v-html="value.answer" + class="ti-2" + :class="[ + 'subjectiveBox', + value.isUnfold ? 'showText' : 'hideText', + ]" + ></span> + </div> + <!-- 瑙f瀽 --> + <div class="referBox" v-if="value.analysisCon"> + <span>瑙f瀽锛�</span> + <p + v-html="value.analysisCon" + :class=" + [ + 'subjectiveBox', + 'ti-2', + value.isUnfold ? 'yincang' : '', + ].join(' ') + " + ></p> + </div> + </el-collapse-item> + </el-collapse> + <!-- <div v-if="value.questionType == 'shortAnswer'" class="subjective subjectiveItem" > @@ -313,12 +476,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 +490,6 @@ > <div class="referBox"> <span>鍙傝�冪瓟妗堬細</span> - <!-- <p v-html="arrayToString(value.answer)" class="subjectiveBox"></p> --> <p v-html="arrayToString(value.answer)" :class="[ @@ -352,26 +512,37 @@ <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="examinations-btn-box" @click="saveAnswer" + >淇濆瓨</el-button + > <el-button - @click="handleQuestion" - style="border-color: #1eb9ee; height: 34px; padding: 4px 10px" + @click=" + (e) => { + handleQuestion(); + saveAnswer(e); + } + " + class="examinations-btn-box" + :style="{ borderColor: primaryColor }" >鎻愪氦</el-button > - <el-button @click="redo" style="height: 34px; padding: 4px 10px" - >閲嶅仛</el-button - > + <el-button @click="redo" class="examinations-btn-box">閲嶅仛</el-button> <el-button - @click="openAnswers" - style="border-color: #1eb9ee; height: 34px; padding: 4px 10px" + @click=" + (e) => { + openAnswers(); + saveAnswer(e); + } + " + class="examinations-btn-box" + :style="{ borderColor: primaryColor }" >鏌ョ湅绛旀</el-button > </div> @@ -379,20 +550,106 @@ </template> <script> -import { getPublicImage } from "@/assets/js/middleGround/tool"; +import { MathfieldElement } from "mathlive"; +import { Message } from "element-ui"; +import TEditorVue from "../teditor/index.vue"; export default { name: "examination-option", - props: ["cardList"], + components: { TEditorVue }, + props: { + cardList: { + type: Array, + }, + primaryColor: { + type: String, + default: "#00aeef", + }, + chapter: { + type: Number, + }, + page: { + type: Number, + }, + inputBc: { + type: String, + default: "#fff", + }, + hideCollect: { + type: Boolean, + default: false, + }, + sourceType: { + type: String, + default: "bits", + }, + }, data() { return { type: "option", - cardList: [], 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: [], + }, + ], }; }, + watch: { + cardList: { + handler(newVal) { + this.cardData = this.cardList; + if (newVal && newVal.length) { + this.loading = false; + } + }, + immediate: true, + deep: true, + }, + }, mounted() { + this.getCollectIdList(); + this.getErrorList(); }, methods: { + // 鑾峰彇涓嶅彈淇濇姢鐨勫浘鐗� + getPublicImage(md5, width, height) { + if (!md5) return; + if (md5.includes("http")) { + if (width) { + return md5 + `?width=${width}`; + } else { + 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) { // 妫�鏌ユ槸鍚︿负鏁扮粍 @@ -425,24 +682,30 @@ } }, 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 = ""; + if (typeof citem.userAnswer == "string") { + citem.userAnswer = ""; + } else { + if (citem.questionType == "multipleChoice") { + citem.userAnswer = []; + } else { + // 濉┖棰� + for (let dindex = 0; dindex < citem.userAnswer.length; dindex++) { + citem.userAnswer[dindex] = ""; + } + } + } 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]; + 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; @@ -451,354 +714,332 @@ 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 + 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++) { 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" || + citem.questionType == "dropdown" + ) { + citem.isRight = citem.answer == citem.userAnswer; + } else if (citem.questionType == "shortAnswer") { + // 绠�绛� 缈昏瘧 + citem.isRight = null; + } else if ( + citem.questionType == "completion" || + citem.questionType == "mathField" + ) { + // 濉┖ + 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] + ); } } + } + 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) { + element = element.parentElement; + if (element.classList.contains(className)) { + return element; + } + } + }, + // 淇濆瓨鎸夐挳 + saveAnswer(e) { + if (e.srcElement) { + const pageNum = this.getParentWithClass( + e.srcElement, + "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, + }); + } + } + 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) + ); + Message.success("淇濆瓨鎴愬姛"); + } + + // if(oldData[this.chapter]) { + // oldData[this.chapter][this.page] = asnwerList + // } else { + // oldData[this.chapter] = {} + // 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) { + let item = null; + if (number) { + item = this.cardData[num].infoList[number]; + } else { + item = this.cardData[num]; + } + item.isCollect = !item.isCollect; + console.log(111, item); + 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.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); + console.log("鍏ㄩ儴鏀惰棌id", collect); + 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(() => {}); + }, + onChangeInput(e, index, cindex, num) { + this.cardData[index].infoList[cindex].userAnswer[num] = e.target.value; }, }, }; </script> +<style lang="less"> +.titleText img { + max-width: 80%; +} +</style> + <style lang="less" scoped> .catalogName { - color: #00aeef; + display: flex; text-indent: 1em !important; font-size: 16px; + .catalogName-box { + display: inline-block; + width: 94%; + } +} +.catalogImage { + width: 50%; } .examination { - margin-top: 20px; 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; + // 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; } } + .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; @@ -810,52 +1051,66 @@ 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; height: 32px; line-height: 32px; text-align: center; @@ -863,59 +1118,76 @@ color: #333; font-weight: bold; } + .text-fl { + display: flex; + align-items: center; + flex-wrap: wrap; + } .titleText { + display: flex; + flex-wrap: wrap; + align-items: center; 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; } - .el-input { + select { + outline: none; + min-width: 100px; + } + input { width: 140px; height: 24px; - border-top: 0; + border: 0; + outline: none; + border-bottom: 1px solid #000; } + /deep/ .el-textarea.is-disabled .el-textarea__inner { - background-color: #fff ; + 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; } + .mathField { + min-width: 200px; + max-width: 518px; + } } + /** 閫夐」 */ .option { .el-radio, @@ -929,13 +1201,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; @@ -944,14 +1219,17 @@ color: #000; } } + .analysis { margin: 20px 0; - width:550px; + width: 94%; // margin-left: 12px; } + .el-collapse { width: 100%; } + /** 瑙f瀽 */ .objective { /deep/ .el-collapse-item__header { @@ -960,34 +1238,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; @@ -995,23 +1281,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; @@ -1030,9 +1321,11 @@ } } } + /deep/ .el-collapse-item__header:focus:not(:hover) { color: #333; } + /deep/ .el-collapse-item__content { width: 93%; padding: 0 20px; @@ -1040,16 +1333,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; @@ -1061,16 +1358,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; @@ -1079,31 +1379,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; @@ -1113,28 +1421,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, @@ -1145,19 +1459,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%; @@ -1166,64 +1484,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; @@ -1231,15 +1565,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; @@ -1252,8 +1589,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