exam_student/pages/examPage/examStart.vue

<template>
	<view style="font-family: '微软雅黑', serif;
		font-size: 40px;
		color: #7f7f44;height: 30px;text-align: center;padding:20px;padding-bottom: 0;">
		{{examObject.examTitle}}
	</view>
	<uni-row>
		<uni-col :span="4" style="margin-top: 30px">
			<uni-card style="height: 85vh;">
				<l-divider color="#00a60d">
					<view style="font-size: 20px;">考生信息</view>
				</l-divider>
				<view
					style="font-family: '微软雅黑' , serif;font-size: 20px;color: #8c8c8c;height: 30px;text-align: center;padding:5px;">
					姓名：{{user.realname}}
				</view>
				<view
					style="font-family: '微软雅黑', serif;font-size: 20px;color: #8c8c8c;height: 30px;text-align: center;padding:5px;">
					考号：{{user.username}}
				</view>
				<l-divider color="#00a60d">
					<view style="font-size: 20px;">试卷名称</view>
				</l-divider>
				<radio-group>
					<label v-for="(item, index) in examObject.examPapersList" :key="item.value">
						<view>
							<view class="paperCss"
								:style="'background-color: '+(item.state === 0?'#b5aa09;':(item.state === 9?'#ececec':'#00f545'))">
								<view style="color: #000000;"> <strong>{{item.title}}</strong></view>
							</view>
						</view>
					</label>
				</radio-group>
				<l-divider color="#b3b3b3">
				</l-divider>
				<button type="primary" style="margin-top: 10px;" @click="subExam">交卷</button>
				<button type="primary" style="margin-top: 10px;" @click="reload">刷新</button>
			</uni-card>

		</uni-col>
		<uni-col :span="16" style="margin-top: 30px">
			<uni-card style="height: 85vh;">
				<scroll-view scroll-y="true" class="scroll-Y">
					<uni-section :title="scantron.questionIndex+'、'+scantron.questionTypeName" type="line" padding>
						<view v-if="scantron.questionType!==7&&scantron.questionType!==8" id="scantronNodes"
							style="height: 45vh;">
						</view>
						<template v-if="scantron.questionType===1||scantron.questionType===3">

							<view>
								<l-divider color="#aaaa7f">
								</l-divider>
							</view>
							<view>
								<radio-group>
									<label v-for="(item, index) in scantron.question.answerList" :key="item">
										<view>
											<button @click="radioAdd(item,index,scantron)"
												:style="'margin-top: 15px;padding-left:15px;font-size: 20px;text-align: left;background-color: '+(item.isRight?'#f9ea0d;':'#f0eff0')"><strong
													style="color: #0072eb;">{{item.tag+"、"}}</strong>{{item.content}}</button>
										</view>
									</label>
								</radio-group>
							</view>
						</template>
						<template v-if="scantron.questionType===2">

							<view>
								<l-divider color="#aaaa7f">
								</l-divider>
							</view>
							<view>
								<radio-group>
									<label v-for="(item, index) in scantron.question.answerList" :key="item.value">
										<view>
											<button @click="item.isRight=!item.isRight;radioAdd(item,index,scantron);"
												:style="'margin-top: 15px;padding-left:15px;font-size: 20px;text-align: left;background-color: '+(item.isRight?'#f9ea0d;':'#f0eff0')"><strong
													style="color: #0072eb;">{{item.tag+"、"}}</strong>{{item.content}}</button>
										</view>
									</label>
								</radio-group>
							</view>
						</template>

						<template v-if="scantron.questionType===4">

							<view>
								<l-divider color="#aaaa7f">
								</l-divider>
							</view>
							<view>
								<view>
									<view class="uni-textarea"
										style="border: #8c8c8c solid 2px;border-radius: 5px;height: 20vh;">
										<textarea @blur="radioAdd(null,null,scantron)"
											v-model="scantron.question.subjectiveAnswer"
											placeholder-style="color:#c7c7c7" placeholder="请输入答案" />
									</view>
								</view>
							</view>
						</template>
						<template v-if="scantron.questionType===5">

							<view>
								<l-divider color="#aaaa7f">
								</l-divider>
							</view>
							<view>
								<label v-for="(item, index) in scantron.question.answerList" :key="item.value">
									<view class="allceter"
										style="background-color: #e7f4ff; text-align: left;padding: 10px;margin-bottom: 10px;border: #2a7eeb solid 1px;border-radius: 5px;">
										<view style="display: inline-block;padding-left: 10px;">
											<strong style="font-size: 20px;color: #0072eb;">{{item.tag}}</strong>
										</view>
										<input @blur="radioAdd(item.blankcontent,item.tag,scantron)" class="uni-input"
											style="display: inline-block;background-color: white;" type="text"
											v-model="item.blankcontent" :placeholder="item.tag" />
									</view>
								</label>
							</view>
						</template>
						<template v-if="scantron.questionType===6">
							<view>
								<l-divider color="#aaaa7f">
								</l-divider>
							</view>
							<view class="" v-for="(combinationItem,index) in scantron.subQuestionList">
								<uni-card>
									<strong>{{scantron.questionIndex+'.'+combinationItem.questionIndex+'、'+combinationItem.questionTypeName}}</strong>
									<view :id="'combinationItemNodes'+index" style="height: 45vh;">
										<!-- <rich-text :nodes="combinationItem.question.content"></rich-text> -->
									</view>
									<template v-if="combinationItem.questionType===1||combinationItem.questionType===3">

										<view>
											<l-divider color="#aaaa7f">
											</l-divider>
										</view>
										<view>
											<radio-group>
												<label v-for="(item, index0) in combinationItem.question.answerList"
													:key="item">
													<view>
														<button @click="radioAdd(item,index0,scantron,combinationItem)"
															:style="'margin-top: 15px;padding-left:15px;font-size: 20px;text-align: left;background-color: '+(item.isRight?'#f9ea0d;':'#f0eff0')"><strong
																style="color: #0072eb;">{{item.tag+"、"}}</strong>{{item.content}}</button>
													</view>
												</label>
											</radio-group>
										</view>
									</template>
									<template v-if="combinationItem.questionType===2">
										<view>
											<l-divider color="#aaaa7f">
											</l-divider>
										</view>
										<view>
											<radio-group>
												<label v-for="(item, index) in combinationItem.question.answerList"
													:key="item.value">
													<view>
														<button
															@click="item.isRight=!item.isRight;radioAdd(item,index0,scantron,combinationItem);"
															:style="'margin-top: 15px;padding-left:15px;font-size: 20px;text-align: left;background-color: '+(item.isRight?'#f9ea0d;':'#f0eff0')"><strong
																style="color: #0072eb;">{{item.tag+"、"}}</strong>{{item.content}}</button>
													</view>
												</label>
											</radio-group>
										</view>
									</template>

									<template v-if="combinationItem.questionType===4">

										<view>
											<l-divider color="#aaaa7f">
											</l-divider>
										</view>
										<view>
											<view>
												<view class="uni-textarea"
													style="border: #8c8c8c solid 2px;border-radius: 5px;height: 20vh;">
													<textarea v-model="combinationItem.question.subjectiveAnswer"
														placeholder-style="color:#c7c7c7" placeholder="请输入答案" />
												</view>
											</view>
										</view>
									</template>
									<template v-if="combinationItem.questionType===5">

										<view>
											<l-divider color="#aaaa7f">
											</l-divider>
										</view>
										<view>
											<label v-for="(item, index) in combinationItem.question.answerList"
												:key="item.value">
												<view class="allceter"
													style="background-color: #e7f4ff; text-align: left;padding: 10px;margin-bottom: 10px;border: #2a7eeb solid 1px;border-radius: 5px;">
													<view style="display: inline-block;padding-left: 10px;">
														<strong
															style="font-size: 20px;color: #0072eb;">{{item.tag}}</strong>
													</view>
													<input
														@blur="radioAdd(item.blankcontent,item.tag,scantron,combinationItem)"
														class="uni-input"
														style="display: inline-block;background-color: white;"
														type="text" v-model="item.blankcontent"
														:placeholder="item.tag" />
												</view>
											</label>
										</view>
									</template>
									<template v-if="combinationItem.questionType===7">
										<view style="height: 5vh;">
											<rich-text :nodes="combinationItem.question.content"></rich-text>
										</view>
										<view>
											<l-divider color="#aaaa7f">
											</l-divider>
										</view>
										<view style=" height: 500px;width: 700px;background-color: #ff3807;">

											<movable-area style="height: 500px;width: 700px;background-color: #8c8c8c;">

												<movable-view style="width: 50px;height: 50px;border:solid 1px black;"
													:x="x" :y="y">

												</movable-view>



												<movable-view
													style="width: 40px;height: 40px;background-color: #f90005;"
													direction="all" :x="x" :y="y" @change="onChange">

													text
												</movable-view>

											</movable-area>

										</view>

									</template>
									<template v-if="combinationItem.questionType===8">
										<view style="height: 5vh;">
											<rich-text :nodes="combinationItem.question.content"></rich-text>
										</view>
										<view>
											<l-divider color="#aaaa7f">
											</l-divider>
										</view>

										<view>
											<view style="height: 600px;width: 800;background-color: #8c8c8c;">

												<movable-area
													style="height: 100%;width: 100%;background-color: #8c8c8c;">

													<movable-view
														style="width: 50px;height: 50px;border:solid 1px black;" :x="95"
														:y="95">

													</movable-view>

													<movable-view
														style="width: 40px;height: 40px;background-color: #f90005;"
														direction="all" :x="x" :y="y" @change="onChange">

														text
													</movable-view>

												</movable-area>

											</view>

										</view>

									</template>


								</uni-card>
							</view>

						</template>
						<template v-if="scantron.questionType===7">
							<button @click="restart">重置</button>
							<view>
								<l-divider color="#aaaa7f">
								</l-divider>
							</view>
							<view style="height: 600px;width: 800;background-color: #ffffff;">

								<movable-area
									:style="`height: 500px;width: 700px;background-color: #8c8c8c;margin: auto;background-image: url('${drag[this.scantron.sort].background.url}');background-size:${drag[this.scantron.sort].background.width}px ${drag[this.scantron.sort].background.height}px;background-repeat: no-repeat;`">
									<!-- <rich-text :nodes="scantron.question.content"></rich-text> -->
									<!-- <img v-if="drag.background.url!==''"  :style="`width:${drag.background.width} px;height:${drag.background.height} px;`"  :src="drag.background.url"/> -->
									<template v-for="item in drag[this.scantron.sort].answer">
										<view
											:style="`position: absolute;width: ${item.width}px;height: ${item.height}px;border:solid 1px black;left:${item.x}px;top:${item.y}px;`">

										</view>
									</template>

									<template v-for="item in drag[this.scantron.sort].option">
										<movable-view v-if="mbvShow" :id="item.id" :disabled="!disabledDrag"
											:style="'width: '+item.width+'px;height: '+item.height+'px;background-color: '+item.backgroundColor+';'"
											direction="all" :x="item.x" :y="item.y" @mousedown="onMousedown(item)"
											@change="onChange">


										</movable-view>
										<movable-view v-if="!mbvShow" :id="item.id" :disabled="!disabledDrag"
											:style="'width: '+item.width+'px;height: '+item.height+'px;background-color: '+item.backgroundColor+';'"
											direction="all" :x="item.x" :y="item.y" @mousedown="onMousedown(item)"
											@change="onChange">


										</movable-view>
									</template>
								</movable-area>

							</view>

						</template>
						<template v-if="scantron.questionType===8">
							<view style="height: 5vh;">

							</view>
							<view>
								<l-divider color="#aaaa7f">
								</l-divider>
							</view>

							<view>
								<view
									style="height: 600px;width: 800px;background-color: #8c8c8c;margin: auto;padding-top: 50px;">

									<movable-area
										style="height: 550px;width: 700px;background-color: #f6f6f6;margin: auto;">
										<canvas canvas-id="lineCanvas" style="width: 700px; height: 500px;">
											<template v-for="(item,index)  in connectionHtml">
												<view
													style="display: inline-block;margin-top: 30px;margin-left: 30px;margin-right: 70px;">
													<!-- <rich-text :nodes="item.innerHTML"></rich-text> -->
													<view v-for="(item0,index0) in item.children" :key="index">
														<view :id="'option'+index+'-'+(index0+1)"
															style="width: 90px;height: 100px;padding: 10px;padding-bottom:0 ;margin-bottom: 10px;border-radius: 5px;border: #007aff solid 1px;background-color: #e0eef9;overflow: hidden;">
														</view>
													</view>
												</view>
											</template>
										</canvas>
									</movable-area>
								</view>
							</view>
						</template>
					</uni-section>
				</scroll-view>
			</uni-card>
		</uni-col>
		<uni-col :span="4" style="margin-top: 30px">
			<uni-card style="height: 85vh;">

				<l-divider color="#8f960c" style="margin-top: 20px;">
					<view style="font-size: 20px;">当前试卷时间</view>
				</l-divider>
				<view
					style="font-family: '微软雅黑', serif;font-size: 20px;color: #f90005;height: 30px;text-align: center;padding:10px;font-size: 35px;">
					<strong>{{paperTime}}</strong>
				</view>
				<!-- 	<l-divider color="#8f960c">
					<view style="font-size: 20px;">考试时间</view>
				</l-divider>
				<view
					style="font-family: '微软雅黑', serif;font-size: 15px;color: #00aaf9;height: 30px;text-align: center;padding:10px;">
					剩余:{{examTime}}
				</view> -->

				<l-divider color="#251e75">
					<view style="font-size: 20px;">答题卡</view>
				</l-divider>
				<view>
					<scroll-view scroll-y="true" style="height: 50vh;">
						<label v-for="(item, index) in  examObject.answerCardList2" :key="item">
							<uni-section class="mb-10" :title="item.questionTypeName" type="line">
								<template v-for="sort in item.indexList">
									<view style="display: inline-block;margin-left: 5px;"
										@mousedown="radioScantron(sort)">
										<view>
											<button type="radio"
												:style="'width: 30px;height: 30px;padding:0px;color:#FFFFFF;font-size: 12px;text-align: center;background-color: '+(sort === scantron.questionIndex?'#b5aa09;':(this.examObject.userExamQuestionList[sort-1].question.isAnswer?'#18da59':'#007aff'))">{{sort}}</button>
										</view>
										<view>
											{{item.questionTypeName.replace("题","")}}

										</view>
									</view>

								</template>
							</uni-section>
						</label>
					</scroll-view>
				</view>
				<l-divider color="#251e75" />
				<view>
					<button type="primary" style="margin-top: 10px;" @click="previousQuestion">上一题</button>
					<button type="primary" style="margin-top: 10px;" @click="nextQuestion">下一题</button>

				</view>

			</uni-card>
		</uni-col>
	</uni-row>
	<uni-popup ref="message" type="message">
		<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
	</uni-popup>
	<uni-popup ref="inputDialog" type="dialog">
		<uni-popup-dialog ref="inputClose" title="提交试卷" @confirm="dialogInputConfirm">
			<view>
				<view>1、提交当前试卷后不可再次作答</view>
				<view>2、本试卷剩余时间不计入下一套</view>
				<view>3、最终试卷提交将结束考试</view>
				<view style="text-align: center;">确认提交？</view>
			</view>
		</uni-popup-dialog>
	</uni-popup>
	<uni-popup ref="cheat" type="dialog">
		<uni-popup-dialog style="width: 50vh;" ref="inputClose" title="作弊提醒">
			<view style="color: red;">
				<view>1、鼠标请勿点击窗口之外的地方</view>
				<view>2、如果不小心退出全屏，请按F11恢复到全屏</view>
				<view>3、鼠标多次点击窗口之外的地方将按作弊处理</view>
			</view>
		</uni-popup-dialog>
	</uni-popup>
</template>

<script>
	import {
		exit,
		request,
		getExamDetail,
		cacheExamAnswer,
		getCacheAnswer,
		submitExamPaper,
		getExamQueryById
	} from '../../examJs/examRequest';
	import screenfull from "screenfull";
	import {
		redirectTo,
		toLogin
	} from '../../examJs/examRoute';
	import {
		windowState
	} from '../../util/examStartUtil';
	export default {
		name: "examStart",
		data() {
			return {
				// 所有方块============拖拽
				drag: [],
				// 拖拽元素刷新
				mbvShow: true,
				// 拖拽的方块信息
				dragItem: {},
				// 拖拽位置记录
				subDrag: [],
				// 拖拽后动作未完成禁用
				disabledDrag: true,
				// ==================================
				// 连线===============================
				// 连线题内容页面展示
				connectionHtml: [],
				// 连线题中间存储
				connectionInfo: [],
				// 连线题连线内容保存
				connectionContentALL: [],
				// 连线绘制
				ctx: null,
				// 点击过程颜色
				clickColor: '0px 0px 5px 2px rgba(80, 85, 83, 0.7)',
				// 点击结束颜色
				connectionColor: ['#ffaa00', '#00ff7f', '#6ca7ff', '#1d00ff', '#aa00ff', '#ffff00', '#550000', '#ff0000'],
				// ==============================
				// 所有试卷和试题
				examObject: {},
				// 当前题目
				examTopic: {},
				// 答题卡
				scantron: '',
				//选项
				answer: {},
				typeThree: '',
				userExamAnswers: [],
				user: {},
				// 拖动监听测试
				b: true,
				canvasWidth: 300,
				canvasHeight: 300,
				// 用户当前考试
				userExamPaper: {},
				// 倒计时实际时间
				examPaperTime: 0,
				// 除当前试卷的其他时间
				papersTime: 0,
				// 倒计时试卷显示时间
				paperTime: '',
				// 倒计时考试显示时间
				examTime: '',
				// 倒计时函数
				intervalId: null,
				// 切屏记录========================
				windowCheat: 0,
				// 切屏状态
				cheat: null,
				// 消息弹窗记录=================
				msgType: 'success',
				messageText: '这是一条成功提示',
			};
		},
		methods: {
			// 页面刷新
			reload() {
				cacheExamAnswer({
					'examAnswers': this.userExamAnswers,
					'userExamId': sessionStorage.getItem('examId'),
					'leaveTime': this.windowCheat,
					'paperId': this.userExamPaper.paperId,
					'limitTime': this.userExamPaper.limitTime
				}).then(data => {
					console.log(data);
					window.location.reload()
				})

			},
			// 消息提示
			messageToggle(type, message) {
				this.msgType = type
				this.messageText = message
				this.$refs.message.open()
			},

			// 弹窗内容
			dialogInputConfirm(val) {
				this.submitExam()
			},
			// 提交试卷弹窗提示打开
			subExam() {
				this.$refs.inputDialog.open()
			},
			// 提交试卷
			submitExam(ins) {
				console.log(ins);
				submitExamPaper({
					'examAnswers': this.userExamAnswers,
					'userExamId': sessionStorage.getItem('examId'),
					'paperId': this.userExamPaper.paperId,
				}).then(data => {
					if (data.data.result !== null && data.data.success) {
						if (ins !== 0 && ins !== 'cheat') {
							this.messageToggle('success', "本试卷提交成功，即将开始下一张试卷······")
						}
						this.userExamAnswers = []
						clearInterval(this.intervalId);
						this.examObject = data.data.result
						this.scantron = this.examObject.userExamQuestionList[0]
						this.userExamPaper = this.examObject.userExamPapersList[0]
						this.examPaperTime = this.addExamPaperTime(new Date(this.userExamPaper.systemTime),
							new Date(this
								.userExamPaper.limitTime))
						// 试卷计时
						this.papersTime = this.examPapersTime()
						this.intervalId = setInterval(this.updateCountDown, 1000);
						this.examTime = this.paperTime
					} else {
						if (ins === 'cheat') {
							this.messageToggle('error', "多次切屏，考试强行终止")
						} else if (ins !== 0) {
							this.messageToggle('success', "考试已结束，即将退出！")
						} else {
							this.messageToggle('warn', "时间已到，已为您自动交卷")
						}
						setTimeout(() => {
							screenfull.exit();
							window.removeEventListener('blur', this.handleBlur);
							window.removeEventListener('focus', this.handleFocus);
							exit()
						}, 2000)
					}
					if (data.data.result !== null && data.data.success && ins === 'cheat') {
						this.handleBlur(0)
					}

				})

			},
			// 重置
			restart() {
				this.disabledDrag = true
				this.drag[this.scantron.sort].answer = []
				this.drag[this.scantron.sort].option = []
				let content = this.stringToHTML(this.scantron.question.content)
				console.log(content);
				for (var i = 0; i < content.children.length; i++) {
					let thisTop = content.children[i].style.top.toString().replace("px", "")
					let thisLeft = content.children[i].style.left.toString().replace("px", "")
					let thisWidth = content.children[i].style.width.toString().replace("px", "")
					let thisHeight = content.children[i].style.height.toString().replace("px", "")
					let thisBackgroundColor = content.children[i].style.backgroundColor
					let thisInnerHTML = content.children[i].innerHTML
					if (content.children[i].id.includes("option")) {
						this.drag[this.scantron.sort].option.push({
							id: content.children[i].id,
							x: Number(thisLeft),
							y: Number(thisTop),
							old: {
								x: 0,
								y: 0,
								ax: Number(thisLeft),
								by: Number(thisTop)
							},
							// 只添加一次拖拽监听
							b: true,
							width: thisWidth,
							height: thisHeight,
							backgroundColor: thisBackgroundColor,
							innerHTML: thisInnerHTML
						})
					}
					if (content.children[i].id.includes("answer")) {
						this.drag[this.scantron.sort].answer.push({
							id: content.children[i].id,
							x: Number(thisLeft),
							y: Number(thisTop),
							old: {
								x: 0,
								y: 0
							},
							width: thisWidth,
							height: thisHeight,
							backgroundColor: thisBackgroundColor
						})
					}
				}
			},
			// 上一题目
			previousQuestion() {
				if (this.scantron.sort > 1) {
					this.radioScantron(this.scantron.sort - 1)
				}
			},
			// 下一题目
			nextQuestion() {
				if (this.scantron.sort < this.examObject.userExamQuestionList.length) {
					// this.scantron = this.examObject.userExamQuestionList[this.scantron.sort]
					this.radioScantron(this.scantron.sort + 1)
				}
			},
			// 答题卡单击题目
			radioScantron(value) {
				this.scantron = this.examObject.userExamQuestionList[value - 1]
				if (this.scantron.questionType !== 7 && this.scantron.questionType !== 8) {
					document.getElementById('scantronNodes').innerHTML = this.scantron.question.content
				}

				let combination = setInterval(() => {
					if (this.scantron.questionType == 6) {
						for (var i = 0; i < this.scantron.subQuestionList.length; i++) {
							if (document.getElementById('combinationItemNodes' + i) === null) {
								console.log("加载中");
								break;
							}
							document.getElementById('combinationItemNodes' + i).innerHTML = this.scantron
								.subQuestionList[i].question.content
						}
						clearInterval(combination);
					}
				}, 10)

				cacheExamAnswer({
					'examAnswers': this.userExamAnswers,
					'userExamId': sessionStorage.getItem('examId'),
					'leaveTime': this.windowCheat,
					'paperId': this.userExamPaper.paperId,
					'limitTime': this.userExamPaper.limitTime
				})
				// 拖拽加载
				if (this.scantron.questionType == 7) {
					this.mbvShow = !this.mbvShow
					this.disabledDrag = true
					console.log(this.drag[this.scantron.questionIndex]);
					if (this.drag[this.scantron.questionIndex] !== undefined) {
						setTimeout(() => {
							for (var i = 0; i < this.drag[this.scantron.sort].option.length; i++) {
								let drags = this.drag[this.scantron.sort].option[i]
								console.log(document.getElementById(drags.id));
								document.getElementById(drags.id).innerHTML = drags.innerHTML
							}
						}, 10)
						return
					}
					this.drag[this.scantron.questionIndex] = {}
					this.drag[this.scantron.questionIndex].answer = []
					this.drag[this.scantron.questionIndex].option = []
					this.drag[this.scantron.questionIndex].background = {}
					let content = this.stringToHTML(this.scantron.question.content)
					for (var i = 0; i < content.children.length; i++) {
						let thisTop = content.children[i].style.top.toString().replace("px", "")
						let thisLeft = content.children[i].style.left.toString().replace("px", "")
						let thisWidth = content.children[i].style.width.toString().replace("px", "")
						let thisHeight = content.children[i].style.height.toString().replace("px", "")
						let thisBackgroundColor = content.children[i].style.backgroundColor
						let thisInnerHTML = content.children[i].innerHTML
						if (content.children[i].id.includes("option")) {
							this.drag[this.scantron.sort].option.push({
								id: content.children[i].id,
								x: Number(thisLeft),
								y: Number(thisTop),
								old: {
									x: 0,
									y: 0,
									ax: Number(thisLeft),
									by: Number(thisTop)
								},
								// 只添加一次拖拽监听
								b: true,
								width: thisWidth,
								height: thisHeight,
								backgroundColor: thisBackgroundColor,
								innerHTML: thisInnerHTML
							})
						}
						if (content.children[i].id.includes("answer")) {
							this.drag[this.scantron.sort].answer.push({
								id: content.children[i].id,
								x: Number(thisLeft),
								y: Number(thisTop),
								old: {
									x: 0,
									y: 0
								},
								width: thisWidth,
								height: thisHeight,
								backgroundColor: thisBackgroundColor
							})
						}
						if (content.children[i].tagName === 'IMG') {
							this.drag[this.scantron.sort].background.url = content.children[i].src
							this.drag[this.scantron.sort].background.width = content.children[i].style.width.toString()
								.replace("px", "")
							this.drag[this.scantron.sort].background.height = content.children[i].style.height.toString()
								.replace("px", "")
						}
					}
					console.log(this.drag[this.scantron.sort].option.length);
					setTimeout(() => {
						for (var i = 0; i < this.drag[this.scantron.sort].option.length; i++) {
							let drags = this.drag[this.scantron.sort].option[i]
							console.log(document.getElementById(drags.id));
							document.getElementById(drags.id).innerHTML = drags.innerHTML
						}
					}, 10)
				}
				// 连线题添加监听
				if (this.scantron.questionType == 8) {
					this.connectionHtml = []
					let content = this.stringToHTML(this.scantron.question.content)
					for (var i = 0; i < content.children.length; i++) {
						let child = content.children[i]
						for (var j = 0; j < child.children.length; j++) {
							if (child.children[j].id !== undefined && child.children[j].id.includes("option")) {
								this.connectionHtml.push(child.children[j])
							}
						}
					}

					if (this.connectionContentALL[value] === undefined) {
						this.connectionContentALL[value] = []
					}
					this.connectionInfo = []
					setTimeout(() => {
						// 画内容
						this.drawLineWriteContent()
						// 画缓存线
						this.drawLineWrite(value)
					}, 100)
					for (var i = 0; i < this.connectionHtml.length; i++) {
						let option = this.connectionHtml[i]
						for (var j = 0; j < option.children.length; j++) {
							let ids = "option" + i + "-" + (j + 1)
							if (document.getElementById(ids) === null) {
								setTimeout(() => {
									let optionCol = document.getElementById(ids)
									optionCol.addEventListener("mousedown", (event) => {
										console.log(event);

										let id = event.currentTarget.id
										console.log(id);
										let colId = Number(id.replace('option', '').split('-')[0])
										let rowId = Number(id.replace('option', '').split('-')[1])
										let left = event.target.offsetLeft
										let right = Number(event.target.offsetLeft + event.target
											.offsetWidth)
										let top = Number(event.target.offsetTop + event.target
											.offsetHeight / 2)
										if (this.connectionInfo.length === this.connectionHtml.length &&
											colId === 0) {
											this.connectionContentALL[this.scantron.sort].push(this
												.connectionInfo)
											this.radioAdd(this.connectionInfo, this
												.connectionInfo[0].id.replace('option', '').split('-')[
													1], this.scantron)
											this.connectionInfo = []

										}
										let arr = []
										for (var i = 0; i < this.connectionContentALL[this.scantron.sort]
											.length; i++) {
											let all = this.connectionContentALL[this.scantron.sort][i]
											if (all[0].id !== id) {
												arr.push(this.connectionContentALL[this.scantron.sort][i])
											}
										}
										this.connectionContentALL[this.scantron.sort] = arr
										let infoLength = this.connectionInfo.length
										if (infoLength <= this.connectionHtml.length) {
											if (infoLength !== 0) {
												if (!this.isLine(id, this.scantron.sort)) {
													this.messageToggle('error', "这个已经连过了")
													this.drawLineWrite(this.scantron.sort)
													return
												}
												let last = this.connectionInfo[infoLength -
													1]
												let lastId = Number(last.id.replace('option', '').split(
													'-')[0])
												if (lastId + 1 === colId) {
													this.connectionInfo.push({
														'id': id,
														'left': left,
														'right': right,
														'top': top
													})
												}
												if (lastId === colId && colId !== this.connectionHtml
													.length - 1) {
													this.connectionInfo[infoLength - 1] = {
														'id': id,
														'left': left,
														'right': right,
														'top': top
													}
													document.getElementById(ids).style.boxShadow = this
														.clickColor
													if (Number(last.id.replace('option', '').split(
															'-')[1]) === rowId &&
														this.connectionInfo.length === this.connectionHtml
														.length) {
														this.connectionContentALL[this.scantron.sort].push(
															this.connectionInfo)
														console.log(this.connectionContentALL[this.scantron
															.sort]);
														this.radioAdd(this.connectionInfo, this
															.connectionInfo[0].id.replace('option', '')
															.split('-')[1], this.scantron)
														this.connectionInfo = []
													}
												} else if (colId === this.connectionHtml.length - 1) {

													this.connectionContentALL[this.scantron.sort].push(
														this.connectionInfo)
													console.log(this.connectionContentALL[this.scantron
														.sort]);
													this.radioAdd(this.connectionInfo, this
														.connectionInfo[0].id.replace('option', '')
														.split('-')[1], this.scantron)
													this.connectionInfo = []
												}


											} else if (infoLength === 0) {
												if (colId === 0) {
													this.connectionInfo.push({
														'id': id,
														'left': left,
														'right': right,
														'top': top
													})
													console.log(document.getElementById(id + ''));
													document.getElementById(id + '').style.boxShadow = this
														.clickColor
													console.log(document.getElementById(id));
												}

											}
										}
										this.shadowClean()
										this.drawLineWrite(this.scantron.sort)


									})
								}, 10)
							} else {
								setTimeout(() => {
									this.shadowClean()
								}, 10)
							}

						}
					}

				}
			},
			// 连线绘制
			drawLine(x1, y1, x2, y2, index) {
				this.ctx = uni.createCanvasContext('lineCanvas');
				this.ctx.beginPath();
				let color = this.connectionColor[index]
				if (index === -1) {
					color = '#000000'
					this.ctx.shadowColor = 'red';
					// 设置阴影的模糊级别
					this.ctx.setshadowBlur = 100;
					// 设置阴影的水平偏移
					this.ctx.shadowOffsetX = 1;
					// 设置阴影的垂直偏移
					this.ctx.shadowOffsetY = 1;
				} else {
					this.ctx.shadowColor = '#000000';
					this.ctx.setshadowBlur = 0;
					this.ctx.shadowOffsetX = 0;
					this.ctx.shadowOffsetY = 0;
				}
				this.ctx.setStrokeStyle(color)
				this.ctx.lineWidth = 3
				this.ctx.moveTo(x1, y1); // 开始点
				this.ctx.lineTo(x2, y2); // 结束点
				this.ctx.stroke(); // 绘制线条
				this.ctx.draw(true);
			},
			// 连线清理
			clearRect() {
				const canvas = uni.createCanvasContext('lineCanvas');
				// 使用clearRect方法清空整个画布
				canvas.clearRect(0, 0, 700, 500); // 这里的300x300是画布的宽高，应该与你的实际画布尺寸相匹配
				canvas.draw(true); // 调用draw方法将清空操作应用到画布上
			},
			// 阴影清理
			shadowClean() {
				for (var i = 0; i < this.connectionHtml.length; i++) {
					let option = this.connectionHtml[i]
					for (var j = 0; j < option.children.length; j++) {
						let ids = "option" + i + "-" + (j + 1)
						document.getElementById(ids).style.boxShadow = ''

					}
				}
			},
			isLine(id, value) {
				for (var i = 0; i < this.connectionContentALL[value].length; i++) {
					let option = this.connectionContentALL[value][i]
					for (var j = 0; j < option.length; j++) {
						let oldId = option[j].id
						if (oldId === id) {
							return false
						}
					}
				}
				return true
			},
			// 连线题画内容
			drawLineWriteContent() {
				for (var i = 0; i < this.connectionHtml.length; i++) {
					let option = this.connectionHtml[i]
					for (var j = 0; j < option.children.length; j++) {
						let ids = "option" + i + "-" + (j + 1)

						document.getElementById(ids).innerHTML = option.children[j].innerHTML
					}
				}
			}, // 连线画线
			drawLineWrite(value) {
				this.clearRect()
				if (this.connectionInfo.length >= 2) {
					for (var i = 0; i < this.connectionInfo.length - 1; i++) {
						let one = this.connectionInfo[i]
						let two = this.connectionInfo[i + 1]
						// box-shadow: ;
						document.getElementById(one.id).style.boxShadow = this.clickColor
						document.getElementById(two.id).style.boxShadow = this.clickColor
						this.drawLine(one.right, one.top, two.left, two.top, -1)
					}
				} else if (this.connectionInfo.length === 1) {
					document.getElementById(this.connectionInfo[0].id).style.boxShadow = this.clickColor
				}

				for (var i = 0; i < this.connectionContentALL[value].length; i++) {
					let option = this.connectionContentALL[value][i]
					for (var j = 0; j < option.length - 1; j++) {
						let one = option[j]
						let two = option[j + 1]
						document.getElementById(one.id).style.boxShadow = '0px 0px 5px 2px ' + this.connectionColor[i]
						document.getElementById(two.id).style.boxShadow = '0px 0px 5px 2px ' + this.connectionColor[i]
						this.drawLine(one.right, one.top, two.left, two.top, i)
					}
				}
			},
			// 字符转换html对象
			stringToHTML(str) {
				var dom = document.createElement('div');
				dom.innerHTML = str;
				return dom;
			},
			// 拖动位置固定
			tap(index, subX, subY) {
				let x = subX
				let y = subY
				this.drag[this.scantron.sort].option[index].x = this.drag[this.scantron.sort].option[index].old.x
				this.drag[this.scantron.sort].option[index].y = this.drag[this.scantron.sort].option[index].old.y
				this.$nextTick(function() {
					this.drag[this.scantron.sort].option[index].x = x
					this.drag[this.scantron.sort].option[index].y = y
				})
			},
			// 鼠标按下
			onMousedown(item) {
				console.log(this.drag[this.scantron.sort].option.length);
				this.dragItem = item;
			},
			// 拖动监听
			onChange: function(e) {
				if (!this.disabledDrag) {
					return
				}
				let index = -1
				for (var j = 0; j < this.drag[this.scantron.sort].option.length; j++) {
					let option = this.drag[this.scantron.sort].option[j]
					if (option.id === this.dragItem.id) {
						index = j
						break;
					}

				}
				this.drag[this.scantron.sort].option[index].old.x = e.detail.x
				this.drag[this.scantron.sort].option[index].old.y = e.detail.y
				let asda = (event) => {
					document.removeEventListener('mouseup', asda)
					this.disabledDrag = false
					let bxs = true
					// 处理鼠标抬起事件
					for (var i = 0; i < this.drag[this.scantron.sort].answer.length; i++) {
						let drag = this.drag[this.scantron.sort].answer[i]
						let x = drag.x
						let y = drag.y
						if (
							(Number(this.drag[this.scantron.sort].option[index].old.x) <= (Number(drag.x) + Number(
								drag
								.width))) &&
							(Number(this.drag[this.scantron.sort].option[index].old.x) + Number(this.drag[this
									.scantron.sort].option[index]
								.width)) >= drag.x &&
							(Number(this.drag[this.scantron.sort].option[index].old.y) <= (Number(drag.y) + Number(
								drag
								.height))) &&
							(Number(this.drag[this.scantron.sort].option[index].old.y) + Number(this.drag[this
									.scantron.sort].option[index]
								.height)) >= drag.y
						) {
							this.tap(index, x, y);
							bxs = false
							break;
						}
					}
					// console.log(this.drag[this.scantron.sort].option[index]);
					if (bxs) {
						this.tap(index, this.drag[this.scantron.sort].option[index].old.ax, this.drag[this.scantron
							.sort].option[index].old.by);
					}
					setTimeout(() => {
						for (var i = 0; i < this.drag[this.scantron.sort].option.length; i++) {
							this.drag[this.scantron.sort].option[i]
							for (var j = 0; j < this.drag[this.scantron.sort].answer.length; j++) {
								this.drag[this.scantron.sort].answer[j]
							}
						}
						this.radioAdd(this.dragItem, i, this.scantron)
						this.disabledDrag = true
					}, 700)
				}

				// if (this.drag[this.scantron.sort].option[index].b) {
				// 	this.drag[this.scantron.sort].option[index].b = false
				document.addEventListener('mouseup', asda);
				// }

			},
			//缓存答案读取
			answerDisplay(data) {
				this.windowCheat = Number(data.leaveTime)
				this.userExamAnswers = data.examAnswers

				let examAnswers = data.examAnswers
				for (var i = 0; i < examAnswers.length; i++) {
					let scantron = examAnswers[i]
					let index = Number(scantron.index)
					if (scantron.index.includes('.')) {
						let parentIndex = Number(scantron.index.split('.')[0])
						let childIndex = scantron.index.split('.')[1]
						let childSubject = this.examObject.userExamQuestionList[parentIndex - 1].subQuestionList[
							childIndex]

						console.log(childSubject);

					} else if (scantron.questionType === 1 || scantron.questionType === 3) {
						console.log(this.examObject.userExamQuestionList[index - 1]);
						this.examObject.userExamQuestionList[index - 1].question.isAnswer = true
						this.examObject.userExamQuestionList[index - 1].question.answerList[Number(scantron.answerIndex[
								0])]
							.isRight = true
					} else if (scantron.questionType === 2) {
						this.examObject.userExamQuestionList[index - 1].question.isAnswer = true
						for (var j = 0; j < scantron.answerIndex.length; j++) {
							this.examObject.userExamQuestionList[index - 1].question.answerList[Number(scantron
								.answerIndex[j])].isRight = true
						}
					} else if (scantron.questionType === 4) {
						this.examObject.userExamQuestionList[index - 1].question.isAnswer = true
						this.examObject.userExamQuestionList[index - 1].question.subjectiveAnswer = scantron
							.subjectiveAnswer
					} else if (scantron.questionType === 5) {
						this.examObject.userExamQuestionList[index - 1].question.isAnswer = true
						let blankAnswer = JSON.parse(scantron.blankAnswer)
						for (var k = 0; k < blankAnswer.length; k++) {
							for (var j = 0; j < this.examObject.userExamQuestionList[index - 1].question.answerList
								.length; j++) {
								if (this.examObject.userExamQuestionList[index - 1].question.answerList[j].tag ===
									blankAnswer[k].tag) {
									this.examObject.userExamQuestionList[index - 1].question.answerList[j].blankcontent =
										blankAnswer[k].content
								}
							}
						}
					} else if (scantron.questionType === 7) {
						this.examObject.userExamQuestionList[index - 1].question.isAnswer = true
						let blankAnswer = JSON.parse(scantron.blankAnswer)
						for (var k = 0; k < blankAnswer.length; k++) {
							for (var j = 0; j < this.examObject.userExamQuestionList[index - 1].question.answerList
								.length; j++) {
								if (this.examObject.userExamQuestionList[index - 1].question.answerList[j].tag ===
									blankAnswer[k].tag) {
									this.examObject.userExamQuestionList[index - 1].question.answerList[j].blankcontent =
										blankAnswer[k].content
								}
							}
						}
						this.drag[index] = JSON.parse(scantron.coordinates)
					} else if (scantron.questionType === 8) {
						console.log(scantron);
						this.examObject.userExamQuestionList[index - 1].question.isAnswer = true
						let blankAnswer = JSON.parse(scantron.blankAnswer)
						for (var k = 0; k < blankAnswer.length; k++) {
							for (var j = 0; j < this.examObject.userExamQuestionList[index - 1].question.answerList
								.length; j++) {
								if (this.examObject.userExamQuestionList[index - 1].question.answerList[j].tag ===
									blankAnswer[k].tag) {
									this.examObject.userExamQuestionList[index - 1].question.answerList[j].blankcontent =
										blankAnswer[k].content
								}
							}
						}
						this.connectionContentALL[index] = JSON.parse(scantron.coordinates)
					}

				}
			},
			// 题目做答
			radioAdd(value, index, scantron, combinationItem) {
				index = index + ''
				let qIndex = scantron.questionIndex + ""
				let arr = []
				this.examObject.userExamQuestionList[scantron.questionIndex - 1].question.isAnswer = true
				if (scantron.questionType === 1 || scantron.questionType === 3) {
					for (var i = 0; i < scantron.question.answerList.length; i++) {
						scantron.question.answerList[i].isRight = false
					}
					scantron.question.answerList[index].isRight = true
					for (var i = 0; i < this.userExamAnswers.length; i++) {
						if (this.userExamAnswers[i].index !== qIndex) {
							arr.push(this.userExamAnswers[i])
						}
					}
					arr.push({
						answerIndex: [index],
						answers: [value.id],
						index: qIndex,
						questionType: scantron.questionType
					})

				} else if (scantron.questionType === 2) {
					let b = true
					for (var i = 0; i < this.userExamAnswers.length; i++) {

						if (this.userExamAnswers[i].index !== qIndex) {
							arr.push(this.userExamAnswers[i])
						} else {
							b = false
							let bc = true
							let arrAnswer = []
							let arrAnswerId = []
							let num = this.userExamAnswers[i].answers.length;
							for (var j = 0; j < num; j++) {
								if (this.userExamAnswers[i].answerIndex[j] !== index) {
									arrAnswer.push(this.userExamAnswers[i].answerIndex[j])
									arrAnswerId.push(this.userExamAnswers[i].answers[j])
								} else {
									if (!value.isRight) {
										bc = false
									}

								}
							}
							if (bc) {
								arrAnswer.push(index)
								arrAnswerId.push(value.id)
							}
							if (arrAnswer.length !== 0) {
								arr.push({
									answerIndex: arrAnswer,
									answers: arrAnswerId,
									index: qIndex,
									questionType: scantron.questionType
								})
							} else {
								this.examObject.userExamQuestionList[scantron.questionIndex - 1].question.isAnswer = false
							}

						}
					}
					if (b) {
						arr.push({
							answerIndex: [index],
							answers: [value.id],
							index: qIndex,
							questionType: scantron.questionType
						})
					}
				} else if (scantron.questionType === 4) {
					for (var i = 0; i < this.userExamAnswers.length; i++) {
						if (this.userExamAnswers[i].index !== qIndex) {
							arr.push(this.userExamAnswers[i])
						}
					}
					if (scantron.question.subjectiveAnswer === null || scantron.question.subjectiveAnswer === "") {
						this.examObject.userExamQuestionList[scantron.questionIndex - 1].question.isAnswer = false
					}
					arr.push({
						subjectiveAnswer: scantron.question.subjectiveAnswer,
						index: qIndex,
						questionType: scantron.questionType
					})
				} else if (scantron.questionType === 5) {
					if (value === undefined) {
						return
					}
					let b = true
					for (var i = 0; i < this.userExamAnswers.length; i++) {

						if (this.userExamAnswers[i].index !== qIndex) {
							arr.push(this.userExamAnswers[i])
						} else {
							b = false
							let bc = true
							let arrAnswer = []
							let blankAnswer = JSON.parse(this.userExamAnswers[i].blankAnswer)
							let num = blankAnswer.length;
							for (var j = 0; j < num; j++) {
								if (blankAnswer[j].tag !== index) {
									arrAnswer.push({
										tag: blankAnswer[j].tag,
										content: blankAnswer[j].content
									})
								} else {
									bc = false
								}
							}
							if (bc) {
								arrAnswer.push({
									tag: index,
									content: value
								})
							}
							if (arrAnswer.length !== 0) {
								arr.push({
									blankAnswer: JSON.stringify(arrAnswer),
									index: qIndex,
									questionType: scantron.questionType
								})
							} else {
								this.examObject.userExamQuestionList[scantron.questionIndex - 1].question.isAnswer = false
							}

						}
					}
					if (b) {
						if (value === null || value === "") {
							this.examObject.userExamQuestionList[scantron.questionIndex - 1].question.isAnswer = false
						}
						arr.push({
							blankAnswer: JSON.stringify([{
								tag: index,
								content: value
							}]),
							index: qIndex,
							questionType: scantron.questionType
						})
					}

				} else if (scantron.questionType === 6) {


					qIndex = qIndex + "." + combinationItem.sort

					if (combinationItem.questionType === 1 || combinationItem.questionType ===
						3) {
						for (var j = 0; j < combinationItem.question.answerList.length; j++) {
							combinationItem.question.answerList[j].isRight = false
						}
						combinationItem.question.answerList[index].isRight = true
						for (var j = 0; j < this.userExamAnswers.length; j++) {
							if (this.userExamAnswers[j].index !== qIndex) {

								arr.push(this.userExamAnswers[j])
							}
						}
						arr.push({
							answerIndex: [index],
							answers: [value.id],
							index: qIndex,
							questionType: combinationItem.questionType
						})

					} else if (combinationItem.questionType === 2) {
						let b = true
						for (var j = 0; j < this.userExamAnswers.length; j++) {

							if (this.userExamAnswers[j].index !== qIndex) {
								arr.push(this.userExamAnswers[j])
							} else {
								b = false
								let bca = true
								let arrAnswer = []
								let arrAnswerId = []
								let num = this.userExamAnswers[j].answers.length;
								for (var k = 0; k < num; k++) {
									if (this.userExamAnswers[j].answerIndex[k] !== index) {
										arrAnswer.push(this.userExamAnswers[j].answerIndex[k])
										arrAnswerId.push(this.userExamAnswers[j].answers[k])
									} else {
										if (!value.isRight) {
											bca = false
										}

									}
								}
								if (bca) {
									arrAnswer.push(index)
									arrAnswerId.push(value.id)
								}
								if (arrAnswer.length !== 0) {
									arr.push({
										answerIndex: arrAnswer,
										answers: arrAnswerId,
										index: qIndex,
										questionType: combinationItem.questionType
									})
								} else {
									this.examObject.userExamQuestionList[scantron.questionIndex - 1].question
										.isAnswer =
										false
								}
							}
						}
						if (b) {
							arr.push({
								answerIndex: [index],
								answers: [value.id],
								index: qIndex,
								questionType: combinationItem.questionType
							})
						}
					} else if (combinationItem.questionType === 4) {
						for (var j = 0; j < this.userExamAnswers.length; j++) {
							if (this.userExamAnswers[j].index !== qIndex) {
								arr.push(this.userExamAnswers[j])
							}
						}
						if (combinationItem.question.subjectiveAnswer === null || scantron.subQuestionList[
								i].question.subjectiveAnswer === "") {
							this.examObject.userExamQuestionList[scantron.questionIndex - 1].question.isAnswer = false
						}
						arr.push({
							subjectiveAnswer: combinationItem.question.subjectiveAnswer,
							index: qIndex,
							questionType: combinationItem.questionType
						})
					} else if (combinationItem.questionType === 5) {
						if (value === undefined) {
							return
						}
						let b = true
						for (var j = 0; j < this.userExamAnswers.length; j++) {

							if (this.userExamAnswers[j].index !== qIndex) {
								arr.push(this.userExamAnswers[j])
							} else {
								b = false
								let bc = true
								let arrAnswer = []
								let blankAnswer = JSON.parse(this.userExamAnswers[j].blankAnswer)
								let num = blankAnswer.length;
								for (var q = 0; q < num; q++) {
									if (blankAnswer[q].tag !== index) {
										arrAnswer.push({
											tag: blankAnswer[q].tag,
											content: blankAnswer[q].content
										})
									} else {
										bc = false
									}
								}
								if (bc) {
									arrAnswer.push({
										tag: index,
										content: value
									})
								}
								if (arrAnswer.length !== 0) {
									arr.push({
										blankAnswer: JSON.stringify(arrAnswer),
										index: qIndex,
										questionType: scantron.subQuestionList[i].questionType
									})
								} else {
									this.examObject.userExamQuestionList[scantron.questionIndex - 1].question
										.isAnswer = false
								}
							}
						}
						if (b) {
							if (value === null || value === "") {
								this.examObject.userExamQuestionList[scantron.questionIndex - 1].question.isAnswer = false
							}
							console.log(qIndex);
							console.log(scantron);
							console.log(this.examObject.userExamQuestionList[scantron.questionIndex - 1].subQuestionList[
								Number(combinationItem.sort)]);
							arr.push({
								blankAnswer: JSON.stringify([{
									tag: index,
									content: value
								}]),
								index: qIndex,
								questionType: scantron.subQuestionList[i].questionType
							})
						}

					}

				} else if (scantron.questionType === 7) {
					if (value === undefined) {
						return
					}
					index = (Number(index) + 1) + ""
					let b = true
					for (var i = 0; i < this.userExamAnswers.length; i++) {
						if (this.userExamAnswers[i].index !== qIndex) {
							arr.push(this.userExamAnswers[i])
						} else {
							b = false
							let bc = true
							let arrAnswer = []
							let blankAnswer = JSON.parse(this.userExamAnswers[i].blankAnswer)
							let num = blankAnswer.length;
							for (var j = 0; j < num; j++) {
								if (blankAnswer[j].tag !== index) {
									arrAnswer.push({
										tag: blankAnswer[j].tag,
										content: blankAnswer[j].content
									})
								} else {
									bc = false
								}
							}
							if (bc) {
								arrAnswer.push({
									tag: index,
									content: value.id
								})
							}
							if (arrAnswer.length !== 0) {
								arr.push({
									blankAnswer: JSON.stringify(arrAnswer),
									coordinates: JSON.stringify(this.drag[qIndex]),
									index: qIndex,
									questionType: scantron.questionType
								})
							} else {
								this.examObject.userExamQuestionList[scantron.questionIndex - 1].question.isAnswer = false
							}

						}
					}
					if (b) {
						if (value === null || value === "") {
							this.examObject.userExamQuestionList[scantron.questionIndex - 1].question.isAnswer = false
						}
						arr.push({
							blankAnswer: JSON.stringify([{
								tag: index,
								content: value.id
							}]),
							coordinates: JSON.stringify(this.drag[qIndex]),
							index: qIndex,
							questionType: scantron.questionType
						})
					}
				} else if (scantron.questionType === 8) {
					console.log(this.connectionContentALL[qIndex]);
					let info = value
					value = ""
					for (var i = 0; i < info.length; i++) {
						console.log(info);
						value += info[i].id.replace('option', '').split('-')[1]
					}

					// connectingCoordinates
					if (value === undefined) {
						return
					}
					let b = true
					for (var j = 0; j < this.userExamAnswers.length; j++) {

						if (this.userExamAnswers[j].index !== qIndex) {
							arr.push(this.userExamAnswers[j])
						} else {
							b = false
							let bc = true
							let arrAnswer = []
							let blankAnswer = JSON.parse(this.userExamAnswers[j].blankAnswer)
							let num = blankAnswer.length;
							for (var q = 0; q < num; q++) {
								if (blankAnswer[q].tag !== index) {
									arrAnswer.push({
										tag: blankAnswer[q].tag,
										content: blankAnswer[q].content
									})
								} else {
									bc = false
								}
							}
							if (bc) {
								arrAnswer.push({
									tag: index,
									content: value
								})
							}
							if (arrAnswer.length !== 0) {
								arr.push({
									blankAnswer: JSON.stringify(arrAnswer),
									index: qIndex,
									coordinates: JSON.stringify(this.connectionContentALL[qIndex]),
									questionType: scantron.questionType
								})
							} else {
								this.examObject.userExamQuestionList[scantron.questionIndex - 1].question
									.isAnswer =
									false

							}

						}
					}
					if (b) {
						if (value === null || value === "") {
							this.examObject.userExamQuestionList[scantron.questionIndex - 1].question.isAnswer =
								false
						}

						arr.push({
							blankAnswer: JSON.stringify([{
								tag: index,
								content: value
							}]),
							coordinates: JSON.stringify(this.connectionContentALL[qIndex]),
							index: qIndex,
							questionType: scantron.questionType
						})
					}
				}
				this.userExamAnswers = arr
			},
			// 失去焦点时的处理函数
			handleBlur(v) {
				if (this.examObject.leaveOn) {
					if (this.windowCheat < 2 && v !== 0) {
						this.$refs.cheat.open()
					}
					let leaveCount = this.examObject.totalLeaveTimes
					let leaveTime = this.examObject.leaveTime
					if (this.windowCheat < leaveCount) {
						this.cheat = setInterval(() => {
							console.log("切屏加一");
							this.windowCheat++
							cacheExamAnswer({
								'examAnswers': this.userExamAnswers,
								'userExamId': sessionStorage.getItem('examId'),
								'leaveTime': this.windowCheat,
								'paperId': this.userExamPaper.paperId,
								'limitTime': this.userExamPaper.limitTime
							})
							clearInterval(this.cheat)
						}, leaveTime * 1000)
					} else {
						this.submitExam('cheat')
					}

					console.log(this.windowCheat);
				}
			},

			// 获得焦点时的处理函数
			handleFocus() {
				if (this.examObject.leaveOn) {
					clearInterval(this.cheat)
				}
			},
			// 时间
			addExamPaperTime(systemTime, endTime) {
				return (endTime.getTime() - systemTime.getTime()) / 1000
			},
			// 更新倒计时函数
			updateCountDown() {
				var distance = this.examPaperTime;
				this.examPaperTime = this.examPaperTime - 1
				if (distance < 0) {
					clearInterval(this.intervalId);
					console.log(0);
					this.messageToggle('warn', "时间已到，2秒后为您自动交卷")
					setTimeout(() => {
						this.submitExam(0)
					}, 2000)
					return;
				}
				// 计算时分秒
				var seconds = Math.floor((distance % (60)));
				var minutes = Math.floor((distance % (60 * 60)) / (60));
				var hours = Math.floor(distance / (60 * 60));
				if (hours != 0) {
					this.paperTime = hours + ":" + (minutes.toString().length == 2 ? minutes : '0' + minutes) + ":" + (
						seconds.toString().length == 2 ? seconds : '0' + seconds)
				} else {
					this.paperTime = (minutes.toString().length == 2 ? minutes : '0' + minutes) + ":" + (seconds.toString()
						.length == 2 ? seconds : '0' + seconds)
				}
				let examTime = this.papersTime + distance
				// 计算考試时分秒
				var examTimeseconds = Math.floor((examTime % (60)));
				var examTimeminutes = Math.floor((examTime % (60 * 60)) / (60));
				var examTimehours = Math.floor(examTime / (60 * 60));
				if (examTimehours != 0) {
					this.examTime = examTimehours + ":" + (examTimeminutes.toString().length == 2 ? examTimeminutes : '0' +
						examTimeminutes) + ":" + (
						seconds.toString().length == 2 ? examTimeseconds : '0' + examTimeseconds)
				} else {
					this.examTime = (examTimeminutes.toString().length == 2 ? examTimeminutes : '0' + examTimeminutes) +
						":" + (examTimeseconds.toString()
							.length == 2 ? examTimeseconds : '0' + examTimeseconds)
				}
			},

			examPapersTime() {
				let list = this.examObject.examPapersList
				let time = 0
				for (var i = 0; i < list.length; i++) {

					if (list[i].paperId !== this.userExamPaper.paperId) {
						if (list[i].state === 9) {
							time += list[i].paperTime * 60
						}
					}
				}
				return time
			}
		},
		mounted() {
			window.addEventListener("unload", (e) => {
				e.preventDefault();
				setTimeout(() => {
					cacheExamAnswer({
						'examAnswers': this.userExamAnswers,
						'userExamId': sessionStorage.getItem('examId'),
						'leaveTime': this.windowCheat,
						'paperId': this.userExamPaper.paperId,
						'limitTime': this.userExamPaper.limitTime
					}).then(data => {
						console.log(data);
					})
				}, 100)
			});

			this.user = JSON.parse(sessionStorage.getItem("user"))
			let examId = sessionStorage.getItem('examId')
			getExamDetail({
				'userExamId': examId,
				't': new Date().toString()
			}).then(data => {
				if (data.data.code !== 200) {
					sessionStorage.removeItem('examId')
					toLogin()
				}
				this.examObject = data.data.result
				this.scantron = this.examObject.userExamQuestionList[0]
				this.userExamPaper = this.examObject.userExamPapersList[0]
				this.examPaperTime = this.addExamPaperTime(new Date(this.userExamPaper.systemTime), new Date(this
					.userExamPaper.limitTime))
				// 试卷计时
				this.papersTime = this.examPapersTime()
				this.intervalId = setInterval(this.updateCountDown, 1000);
				this.examTime = this.paperTime
				// 添加切屏事件监听
				if (windowState) {
					window.addEventListener('blur', this.handleBlur);
					window.addEventListener('focus', this.handleFocus);
				}
				// 获取缓存答案
				getCacheAnswer({
					'userExamId': examId
				}).then(answerData => {
					if (answerData.data.result !== null) {
						this.answerDisplay(answerData.data.result)
					}
				})
			})
		}
	}
</script>

<style scoped>
	.svg-container {
		width: 100%;
		height: 100%;
		overflow: hidden;
		position: runiative;
	}

	svg {
		display: block;
		width: 100%;
		height: 100%;
	}

	.scroll-Y {
		height: 80vh;
	}

	.allceter {
		display: flex;
		align-items: center;
		height: 50px;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}

	.scroll-view-item {
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
		font-size: 36rpx;
	}

	.scroll-view-item_H {
		display: inline-block;
		width: 100%;
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
		font-size: 36rpx;
	}



	div {
		margin: 0;
		padding: 0;
	}

	/* CSS 预设*/
	* {
		margin: 0;
		padding: 0;
	}

	a {
		text-decoration: none;
		outline: none;
	}

	body a {
		outline: none;
		blr: expression(this.onFocus=this.blur());
	}

	.uni-input {
		padding-left: 20px;
		border: 1rpx solid #5bb4ee;
		height: 96rpx;
		margin-left: 10px;


		color: #000000;
		width: 90%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	img {
		border: none;
	}



	.dialog-text {
		font-size: 14px;
		color: #333;
	}

	.paperCss {
		width: 85%;
		border-radius: 5px;
		padding: 15px;
		margin-top: 15px;

		font-size: 15px;
		text-align: left;
	}
</style>