testbookLayout.git

			@@ -1,6 +1,14 @@
			<template>
			<el-dialog :visible.sync="localDialogVisible" @open="hadleOpenDialog" width="60vw" top="2vh" append-to-body
			lock-scroll :show-close="false" class="custom-dialog">
			<el-dialog
			:visible.sync="localDialogVisible"
			@open="hadleOpenDialog"
			width="60vw"
			top="2vh"
			append-to-body
			lock-scroll
			:show-close="false"
			class="custom-dialog"
			>
			<div slot="title" class="header_title">
			<span>{{ questionTitle }}</span>
			<span @click="closeDialog"> x </span>
			@@ -9,8 +17,12 @@
			<!-- 原有的内容 -->
			<div class="pdfBox-component">
			<div class="examination" v-loading="loading">
			<div v-for="(item, nindex) in cardData" :key="nindex + 'item'" class="border-box"
			v-show="item.infoList.length">
			<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>
			@@ -20,242 +32,430 @@
			<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'" />
			<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>
			<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="index + 'value'"
			:id="'listItem-' + value.id">
			<li
			v-for="(value, index) in item.infoList"
			:key="index + 'value'"
			:id="'listItem-' + value.id"
			>
			<!-- 标题 -->
			<div class="questionTitle">
			<div class="titleContent">
			<span class="questionNum" :style="{
			<span
			class="questionNum"
			:style="{
			marginTop:
			value.questionType == 'completion' \|\|
			value.questionType == 'mathField'
			? '12px'
			: '0',
			}">{{ index + 1 }}.
			}"
			>{{ index + 1 }}.
			</span>
			<!-- 听力进度条 -->
			<!-- <answerAudioPlayer :audioUrl="value.src" v-show="item.name == '听力题'" /> -->
			<!-- 仅文字 -->
			<p class="titleText text-fl" v-if="
			<p
			class="titleText text-fl"
			v-if="
			value.stemStyle == 'Txt' &&
			value.questionType != 'completion' &&
			value.questionType != 'dropdown' &&
			value.questionType != 'mathField'
			" :id="value.id" v-html="value.stem.stemTxt"></p>
			"
			:id="value.id"
			v-html="value.stem.stemTxt"
			></p>
			<!-- 仅图片 -->
			<el-image class="stemImg" v-else-if="value.stemStyle == 'Image'"
			<el-image
			class="stemImg"
			v-else-if="value.stemStyle == 'Image'"
			:src="getPublicImage(value.stem.stemImage, 150)"
			:preview-src-list="[getPublicImage(value.stem.stemImage)]"></el-image>
			<!-- 文字加图片 -->
			<p class="stemTxtAndImage titleText"
			v-else-if="value.stemStyle == 'TxtAndImage'">
			<span v-html="value.stem.stemTxt"> </span>
			<el-image :src="getPublicImage(value.stem.stemImage, 150)"
			:preview-src-list="[getPublicImage(value.stem.stemImage)]"
			style="margin-left: 10px"></el-image>
			></el-image>
			<!-- 文字加图片 -->
			<p
			class="stemTxtAndImage titleText"
			v-else-if="value.stemStyle == 'TxtAndImage'"
			>
			<span v-html="value.stem.stemTxt"> </span>
			<el-image
			:src="getPublicImage(value.stem.stemImage, 150)"
			:preview-src-list="[
			getPublicImage(value.stem.stemImage),
			]"
			style="margin-left: 10px"
			></el-image>
			</p>
			<!-- 填空题题干 -->
			<p class="titleText" v-if="
			<p
			class="titleText"
			v-if="
			value.questionType == 'completion' \|\|
			value.questionType == 'mathField'
			">
			<span v-for="(itemText, indexText) in value.stem"
			:key="indexText + 'questionType'">
			<span v-if="typeof itemText == 'string'" v-html="itemText"
			class="input-txt"></span>
			<input v-if="
			"
			>
			<span
			v-for="(itemText, indexText) in value.stem"
			:key="indexText + 'questionType'"
			>
			<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"
			"
			type="text"
			class="input"
			v-model.trim="value.userAnswer[itemText.num]"
			:disabled="value.isComplete"
			:style="{ backgroundColor: inputBc }" />
			<math-field v-if="
			:style="{ backgroundColor: inputBc }"
			/>
			<math-field
			v-if="
			typeof itemText != 'string' &&
			value.questionType == 'mathField'
			" class="mathField" :menuItems="[]"
			@input="onChangeInput($event, nindex, index, itemText.num)">
			"
			class="mathField"
			:menuItems="[]"
			@input="
			onChangeInput($event, nindex, index, itemText.num)
			"
			>
			{{ value.userAnswer[itemText.num] }}
			</math-field>
			</span>
			</p>
			<!-- 富文本 -->
			<p class="titleText titleTextArea" v-else-if="value.stemStyle == 'RichText'"
			v-html="value.stem.stemTxt" v-cloak></p>
			<p
			class="titleText titleTextArea"
			v-else-if="value.stemStyle == 'RichText'"
			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>
			<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"
			<img
			:src="value.isCollect ? isHeart : heart"
			alt=""
			class="collect-png"
			@click="setCollect(nindex, index)"
			v-if="!hideCollect && item.type != 'material'" />
			v-if="!hideCollect && item.type != 'material'"
			/>
			<!-- 收藏 -->
			</div>
			<div class="questionContent">
			<!-- 单选 -->
			<el-radio-group :disabled="value.isComplete" class="option" v-if="
			<el-radio-group
			:disabled="value.isComplete"
			class="option"
			v-if="
			value.questionType == 'singleChoice' \|\|
			value.questionType == 'judge'
			" v-model="value.userAnswer">
			<el-radio v-for="(content, contentIndex) in value.option"
			:key="contentIndex + 'contentIndex'" :label="content.value" :class="value.optionStyle == 'Image' \|\|
			"
			v-model="value.userAnswer"
			>
			<el-radio
			v-for="(content, contentIndex) in value.option"
			:key="contentIndex + 'contentIndex'"
			:label="content.value"
			:class="
			value.optionStyle == 'Image' \|\|
			value.optionStyle == 'TxtAndImage' \|\|
			value.optionStyle == 'RichText'
			? 'optionImg'
			: 'optionTxt'
			">
			<p class="optionContent" v-if="value.optionStyle == 'Txt'">
			"
			>
			<p
			class="optionContent"
			v-if="value.optionStyle == 'Txt'"
			>
			{{ content.value }}、{{ content.txt }}
			</p>
			<p class="optionContent" v-else-if="value.optionStyle == 'Image'">
			{{ content.value }}、<el-image :src="getPublicImage(content.img, 115)"
			<p
			class="optionContent"
			v-else-if="value.optionStyle == 'Image'"
			>
			{{ content.value }}、<el-image
			: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" />
			v-if="sourceType == 'bits'"
			></el-image>
			<img
			:src="content.img"
			alt=""
			v-else
			class="radio-img"
			/>
			</p>
			<p class="optionContent" v-else-if="value.optionStyle == 'TxtAndImage'">
			<span> {{ content.value }}、</span><span>{{ content.txt }}</span>
			<el-image :src="getPublicImage(content.img, 115)" v-show="content.img"
			:preview-src-list="[getPublicImage(content.img)]"></el-image>
			<p
			class="optionContent"
			v-else-if="value.optionStyle == 'TxtAndImage'"
			>
			<span> {{ content.value }}、</span
			><span>{{ content.txt }}</span>
			<el-image
			:src="getPublicImage(content.img, 115)"
			v-show="content.img"
			:preview-src-list="[getPublicImage(content.img)]"
			></el-image>
			</p>
			<p class="optionContent titleTextArea"
			<p
			class="optionContent titleTextArea"
			v-else-if="value.optionStyle == 'RichText'"
			v-html="`<span>${content.value}</span>` + '、' + content.txt"
			id="mathjax">
			</p>
			v-html="
			`<span>${content.value}</span>` + '、' + content.txt
			"
			id="mathjax"
			></p>
			</el-radio>
			</el-radio-group>
			<!-- 多选 -->
			<el-checkbox-group :disabled="value.isComplete" v-model="value.userAnswer"
			class="option" v-else-if="value.questionType == 'multipleChoice'">
			<el-checkbox v-for="(content, contentCindex) in value.option"
			:key="contentCindex + 'contentCindex'" :label="content.value"
			:name="content.text" :class="value.optionStyle == 'Image' \|\|
			<el-checkbox-group
			:disabled="value.isComplete"
			v-model="value.userAnswer"
			class="option"
			v-else-if="value.questionType == 'multipleChoice'"
			>
			<el-checkbox
			v-for="(content, contentCindex) in value.option"
			:key="contentCindex + 'contentCindex'"
			:label="content.value"
			:name="content.text"
			:class="
			value.optionStyle == 'Image' \|\|
			value.optionStyle == 'TxtAndImage' \|\|
			value.optionStyle == 'RichText'
			? 'optionImg'
			: 'optionTxt'
			">
			<p class="optionContent" v-if="value.optionStyle == 'Txt'">
			"
			>
			<p
			class="optionContent"
			v-if="value.optionStyle == 'Txt'"
			>
			{{ content.value }}、{{ content.txt }}
			</p>
			<p class="optionContent" v-else-if="value.optionStyle == 'Image'">
			{{ content.value }}、<el-image :src="getPublicImage(content.img, 115)"
			<p
			class="optionContent"
			v-else-if="value.optionStyle == 'Image'"
			>
			{{ content.value }}、<el-image
			:src="getPublicImage(content.img, 115)"
			:preview-src-list="[getPublicImage(content.img)]"
			v-show="content.img"></el-image>
			v-show="content.img"
			></el-image>
			</p>
			<p class="optionContent" v-else-if="value.optionStyle == 'TxtAndImage'">
			<span> {{ content.value }}、</span><span>{{ content.txt }}</span>
			<el-image :src="getPublicImage(content.img, 115)"
			<p
			class="optionContent"
			v-else-if="value.optionStyle == 'TxtAndImage'"
			>
			<span> {{ content.value }}、</span
			><span>{{ content.txt }}</span>
			<el-image
			:src="getPublicImage(content.img, 115)"
			:preview-src-list="[getPublicImage(content.img)]"
			v-show="content.img"></el-image>
			v-show="content.img"
			></el-image>
			</p>
			<p class="optionContent titleTextArea"
			<p
			class="optionContent titleTextArea"
			v-else-if="value.optionStyle == 'RichText'"
			v-html="content.value + '、' + content.txt"></p>
			v-html="content.value + '、' + content.txt"
			></p>
			</el-checkbox>
			</el-checkbox-group>
			<!-- 简答翻译 -->
			<TEditorVue v-else-if="value.questionType == 'formula'" :value="value.userAnswer"
			:disabled="value.isComplete" @getContent="(val) => {
			<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: 94%; margin: 0 auto"
			v-else-if="value.questionType == 'shortAnswer'" type="textarea" :rows="6"
			placeholder="请输入内容" v-model="value.userAnswer" />
			<div v-if="
			"
			/>
			<el-input
			:disabled="value.isComplete"
			style="width: 94%; margin: 0 auto"
			v-else-if="value.questionType == 'shortAnswer'"
			type="textarea"
			:rows="6"
			placeholder="请输入内容"
			v-model="value.userAnswer"
			/>
			<div
			v-if="
			type != 'option' &&
			type != 'mock' &&
			(value.questionType == 'shortAnswer' \|\|
			value.questionType == 'multipleChoice' \|\|
			value.questionType == 'completion' \|\|
			value.questionType == 'mathField')
			">
			<el-button @click="checkPares(value)" style="margin-top: 10px">查看解析</el-button>
			"
			>
			<el-button
			@click="checkPares(value)"
			style="margin-top: 10px"
			>查看解析</el-button
			>
			</div>
			<!-- 提交后解析 -->
			<div class="analysis" v-if="value.isComplete">
			<el-collapse v-model="value.isUnfold" accordion v-if="
			<el-collapse
			v-model="value.isUnfold"
			accordion
			v-if="
			value.questionType != 'shortAnswer' &&
			value.questionType != 'formula'
			">
			"
			>
			<el-collapse-item :name="value.id" class="objective">
			<template #title>
			<div class="headerBox">
			<div class="headerConent">
			<p class="correct" :title="arrayToString(value.answer)">
			<p
			class="correct"
			:title="arrayToString(value.answer)"
			>
			<span>正确答案：</span>
			<span v-html="arrayToString(value.answer)"
			class="correctBox"></span>
			<span
			v-html="arrayToString(value.answer)"
			class="correctBox"
			></span>
			</p>
			<p :class="value.isRight
			<p
			:class="
			value.isRight
			? 'correct textOverFlow'
			: 'error textOverFlow'
			" :title="arrayToString(value.userAnswer)"
			style="margin-left: 20px">
			"
			:title="arrayToString(value.userAnswer)"
			style="margin-left: 20px"
			>
			<span>您的答案：</span>
			<span class="errorBox"
			v-if="isHaveAnswer(value.userAnswer)">{{
			arrayToString(value.userAnswer) }}</span>
			<span
			class="errorBox"
			v-if="isHaveAnswer(value.userAnswer)"
			>{{ arrayToString(value.userAnswer) }}</span
			>
			</p>
			</div>
			<p class="difficulty" v-if="value.difficulty">
			<span style="color: #333">难度等级：</span>
			<el-rate v-model="value.difficulty" :max="3" size="large"
			disabled disabled-void-color="#949494" />
			<el-rate
			v-model="value.difficulty"
			:max="3"
			size="large"
			disabled
			disabled-void-color="#949494"
			/>
			</p>
			<!-- 正确错误图标 -->
			<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">
			<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>
			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">
			<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>
			fill="#d81e06"
			p-id="25746"
			></path>
			</svg>
			</span>

			<div class="headerConent sitgBox">
			<p v-if="!value.isUnfold">
			<span class="analysisColor">展开解析</span><el-image />
			<span class="analysisColor">展开解析</span
			><el-image />
			</p>
			<p v-else>
			<span class="analysisColor">收起解析</span><el-image />
			<span class="analysisColor">收起解析</span
			><el-image />
			</p>
			</div>
			</div>
			</template>
			<!-- 解析 -->
			<div v-if="value.analysisCon" v-html="value.analysisCon"></div>
			<div
			v-if="value.analysisCon"
			v-html="value.analysisCon"
			></div>
			<div v-else>暂无数据</div>
			</el-collapse-item>
			</el-collapse>
			@@ -274,20 +474,28 @@
			</template>
			<div class="referBox">
			<span>参考答案：</span>
			<span v-html="value.answer" class="ti-2" :class="[
			<span
			v-html="value.answer"
			class="ti-2"
			:class="[
			'subjectiveBox',
			value.isUnfold ? 'showText' : 'hideText',
			]"></span>
			]"
			></span>
			</div>
			<!-- 解析 -->
			<div class="referBox" v-if="value.analysisCon">
			<span>解析：</span>
			<p v-html="value.analysisCon" :class="[
			<p
			v-html="value.analysisCon"
			:class="
			[
			'subjectiveBox',
			'ti-2',
			value.isUnfold ? 'yincang' : '',
			].join(' ')
			"></p>
			"
			></p>
			</div>
			</el-collapse-item>
			</el-collapse>
			@@ -297,18 +505,34 @@
			</ul>
			</div>
			<div class="bottom-btn" v-if="!loading">
			<el-button class="examinations-btn-box" @click="saveAnswer">保存</el-button>
			<el-button @click="(e) => {
			<el-button class="examinations-btn-box" @click="saveAnswer"
			>保存</el-button
			>
			<el-button
			@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="(e) => {
			"
			class="examinations-btn-box"
			:style="{ borderColor: primaryColor }"
			>提交</el-button
			>
			<el-button @click="redo" class="examinations-btn-box"
			>重做</el-button
			>
			<el-button
			@click="
			(e) => {
			openAnswers();
			saveAnswer(e);
			}
			" class="examinations-btn-box" :style="{ borderColor: primaryColor }">查看答案</el-button>
			"
			class="examinations-btn-box"
			:style="{ borderColor: primaryColor }"
			>查看答案</el-button
			>
			</div>
			</div>
			</div>
			@@ -355,7 +579,7 @@
			},
			questionTitle: {
			type: String,
			}
			},
			},
			data() {
			return {
			@@ -406,9 +630,7 @@
			this.getErrorList();
			},
			methods: {
			hadleOpenDialog() {

			},
			hadleOpenDialog() {},
			// 获取不受保护的图片
			getPublicImage(md5, width, height) {
			if (!md5) return;
			@@ -636,7 +858,7 @@
			// 题目收藏按钮,收藏和取消同一接口，取消数组减去该项id
			setCollect(num, number) {
			let item = null;
			if (number) {
			if (number >=0) {
			item = this.cardData[num].infoList[number];
			} else {
			item = this.cardData[num];
			@@ -677,6 +899,7 @@
			},
			// 获取收藏id列表
			getCollectIdList() {
			console.log(this.cardList,"cardList")
			const token = localStorage.getItem("token");
			if (!token) return false;
			this.MG.identity
			@@ -738,18 +961,16 @@
			this.cardData[index].infoList[cindex].userAnswer[num] = e.target.value;
			},
			closeDialog() {
			this.localDialogVisible = false
			this.localDialogVisible = false;
			},
			openDialogQuestion() {
			this.localDialogVisible = true
			this.localDialogVisible = true;
			},
			},
			};
			</script>


			<style lang="less" scoped>

			.titleText img {
			max-width: 80%;
			min-width: 220px;
			@@ -763,7 +984,6 @@
			/deep/.el-loading-mask {
			background: transparent !important;
			}


			.catalogName {
			display: flex;
			@@ -790,7 +1010,8 @@
			margin: 0;
			}

			math {}
			math {
			}
			}

			.examinations-btn-box {
			@@ -992,10 +1213,8 @@
			}
			}


			/** 选项 */
			.option {

			.el-radio,
			.el-checkbox {
			// min-height: 32px;
			@@ -1257,7 +1476,6 @@

			.titleTextArea {
			::v-deep {

			img,
			.el-image__inner {
			max-width: 150px !important;