From 9c2eb9ed6da32c1830b02431875dacaa7f904b1f Mon Sep 17 00:00:00 2001
From: 黄何裕 <1053952480@qq.com>
Date: 星期五, 12 七月 2024 18:16:56 +0800
Subject: [PATCH] 修改资料校验
---
src/views/exam/index.vue | 194 +++++++++++++++++++++++++++++++++++-------------
1 files changed, 142 insertions(+), 52 deletions(-)
diff --git a/src/views/exam/index.vue b/src/views/exam/index.vue
index df363a4..dbbf30c 100644
--- a/src/views/exam/index.vue
+++ b/src/views/exam/index.vue
@@ -1,5 +1,7 @@
<template>
- <div class="exam-container w-screen h-screen bg-slate-50 relative overflow-hidden">
+ <div
+ class="exam-container w-screen h-screen bg-slate-50 relative overflow-hidden"
+ >
<div class="top-bg bg-blue-500"></div>
<div class="exam-content">
<div class="exam-wrapper container mx-auto h-full flex flex-col">
@@ -7,7 +9,7 @@
<div class="title-container text-3xl font-semibold text-white mr-8">
{{ examInfo.examName }}
</div>
- <AnswerTime @timeOut="timeOut"></AnswerTime>
+ <AnswerTime @timeOut="timeOut" ref="answerTime"></AnswerTime>
<div class="return-container grow flex justify-end">
<el-button type="danger" size="large" circle @click="closeClick">
@@ -24,8 +26,10 @@
<!-- 绛旈鍗″尯 -->
<div class="answer-wrapper answer-left mr-8 shadow-xl p-4 box-border">
<div class="wrapper h-full flex flex-col items-center">
- <div class="title-wrapper w-full flex justify-between items-center mb-5">
- <div class="title text-xl font-semibold ">绛旈鍗�</div>
+ <div
+ class="title-wrapper w-full flex justify-between items-center mb-5"
+ >
+ <div class="title text-xl font-semibold">绛旈鍗�</div>
<AnswerTag></AnswerTag>
</div>
@@ -40,9 +44,13 @@
</div>
<div class="submit-wrapper">
- <el-button type="primary" class="submit-button" @click="submitExamHandle">鎻愪氦璇曞嵎</el-button>
+ <el-button
+ type="primary"
+ class="submit-button"
+ @click="submitExamHandle"
+ >鎻愪氦璇曞嵎</el-button
+ >
</div>
-
</div>
</div>
@@ -50,15 +58,20 @@
<div class="answer-wrapper answer-right grow shadow-xl p-4">
<div class="wrapper h-full flex flex-col">
<div class="title-wrapper w-full flex mb-5">
- <div class="title text-xl font-semibold ">{{ examType[currentType] }} ({{
- examStore.getActiveQuestion.questionScore }}鍒�)
+ <div class="title text-xl font-semibold">
+ {{ examType[currentType] }} ({{
+ examStore.getActiveQuestion.questionScore
+ }}鍒�)
</div>
</div>
<div class="main-wrapper w-full grow relative my-5">
<div class="main-content absolute top-0 bottom-0 w-full">
<Transition appear name="fade-transform" mode="out-in">
- <component :is="typeComponent[currentType]" :key="currentIndex"></component>
+ <component
+ :is="typeComponent[currentType]"
+ :key="currentIndex"
+ ></component>
</Transition>
</div>
</div>
@@ -66,10 +79,17 @@
<div class="tool-wrapper flex justify-end">
<div class="button-container flex items-center">
<div class="button-item">
- <el-button class="tool-button" @click="prevQuestion">涓婁竴棰�</el-button>
+ <el-button class="tool-button" @click="prevQuestion"
+ >涓婁竴棰�</el-button
+ >
</div>
<div class="button-item">
- <el-button class="tool-button" type="primary" @click="nextQuestion">涓嬩竴棰�</el-button>
+ <el-button
+ class="tool-button"
+ type="primary"
+ @click="nextQuestion"
+ >涓嬩竴棰�</el-button
+ >
</div>
</div>
</div>
@@ -78,7 +98,6 @@
</div>
</div>
</div>
-
<!-- 閫�鍑鸿�冭瘯鎻愮ず寮圭獥 -->
<el-dialog v-model="quitDialog" title="娉ㄦ剰" width="500">
@@ -89,9 +108,7 @@
<template #footer>
<div class="dialog-footer">
<el-button @click="quitDialog = false">缁х画浣滅瓟</el-button>
- <el-button type="danger" @click="confirmQuit">
- 纭畾閫�鍑�
- </el-button>
+ <el-button type="danger" @click="confirmQuit"> 纭畾閫�鍑� </el-button>
</div>
</template>
</el-dialog>
@@ -113,69 +130,99 @@
</el-dialog>
<!-- 鑰冭瘯鏃堕棿寮圭獥 -->
- <el-dialog v-model="timeDialog" align-center width="500" :close-on-click-modal="false"
- :close-on-press-escape="false" :show-close="false">
+ <el-dialog
+ v-model="timeDialog"
+ align-center
+ width="500"
+ :close-on-click-modal="false"
+ :close-on-press-escape="false"
+ :show-close="false"
+ >
<div class="dialog-container flex flex-col items-center">
<div class="icon-container">
<el-icon :size="50" color="#3680fa">
<Timer />
</el-icon>
</div>
- <div class="dialog-info">
- 鑰冭瘯缁撴潫锛岀郴缁熻嚜鍔ㄦ敹鍗蜂腑.......
- </div>
+ <div class="dialog-info">鑰冭瘯缁撴潫锛岀郴缁熻嚜鍔ㄦ敹鍗蜂腑.......</div>
</div>
</el-dialog>
</div>
</template>
<script setup>
-import { ref, watchEffect } from 'vue';
-import { storeToRefs } from 'pinia';
-import { Close, Timer } from '@element-plus/icons-vue';
-import AnswerTag from './components/answer-tag/index.vue';
-import AnswerProgress from './components/answer-progress/index.vue';
-import AnswerSheet from './components/answer-sheet/index.vue';
-import AnswerTime from './components/answer-time/index.vue';
+import { ref, watchEffect, watch, onMounted ,onUnmounted} from "vue";
+import { storeToRefs } from "pinia";
+import { Close, Timer } from "@element-plus/icons-vue";
+import AnswerTag from "./components/answer-tag/index.vue";
+import AnswerProgress from "./components/answer-progress/index.vue";
+import AnswerSheet from "./components/answer-sheet/index.vue";
+import AnswerTime from "./components/answer-time/index.vue";
-import AnswerSingle from './components/answer-main/answer-single/index.vue';
-import AnswerMultiple from './components/answer-main/answer-multiple/index.vue';
-import AnswerAudio from './components/answer-main/answer-audio/index.vue';
-import AnswerFill from './components/answer-main/answer-fill/index.vue';
+import AnswerSingle from "./components/answer-main/answer-single/index.vue";
+import AnswerMultiple from "./components/answer-main/answer-multiple/index.vue";
+import AnswerAudio from "./components/answer-main/answer-audio/index.vue";
+import AnswerFill from "./components/answer-main/answer-fill/index.vue";
+import AnswerDetermine from "./components/answer-main/answer-determine/index.vue";
+import AnswerShort from "./components/answer-main/answer-short/index.vue";
+import AnswerCount from "./components/answer-main/answer-count/index.vue";
-import { useExamStore } from '@/store/index.js';
-import { useRouter } from 'vue-router';
+import { useExamStore, useUserStore } from "@/store/index.js";
+import { useRouter } from "vue-router";
-import { submitExam } from '@/api/modules/exam.js';
+import { submitExam } from "@/api/modules/exam.js";
+import useWebScoket from "@/hooks/useWebScoket.js";
+import { ElMessage, ElMessageBox } from "element-plus";
const router = useRouter();
const examStore = useExamStore();
-const { currentType, currentIndex, examDetail, examType, examInfo } = storeToRefs(examStore);
+const userStore = useUserStore();
+
+const { userInfo } = storeToRefs(userStore);
+const { currentType, currentIndex, examDetail, examType, examInfo } =
+ storeToRefs(examStore);
const typeComponent = {
1: AnswerSingle,
2: AnswerMultiple,
+ 3: AnswerDetermine,
4: AnswerFill,
- 6: AnswerAudio
+ 5: AnswerShort,
+ 6: AnswerAudio,
+ 7: AnswerCount,
+ 8: AnswerShort,
};
const quitDialog = ref(false);
const submitDialog = ref(false);
const timeDialog = ref(false);
+// const { status, message, error, connect, disconnect, sendMessage } = useWebScoket({
+// url: 'wss://42.193.1.25:8000/websocket/' + userInfo.value.id,
+// heartBeatData: 'ping'
+// });
+const { status, message, error, connect, disconnect, sendMessage } =
+ useWebScoket({
+ url: "//192.168.3.64:8000/websocket/" + userInfo.value.id,
+ heartBeatData: "ping",
+ });
+
+// 涓婁竴棰�
const prevQuestion = () => {
currentIndex.value--;
checkList();
};
+// 涓嬩竴棰�
const nextQuestion = () => {
currentIndex.value++;
checkList();
};
+// 鏌ヨ棰樼洰
const checkList = () => {
let tempIndex = 0;
const typeQuestion = examDetail.value.find((typeItem, index) => {
@@ -196,21 +243,19 @@
currentType.value = typeQuestion.questionType;
currentIndex.value = typeQuestion.questionList.length - 1;
}
-
} else if (currentIndex.value < 0) {
tempIndex--;
if (examDetail.value[tempIndex]) {
currentType.value = examDetail.value[tempIndex].questionType;
- currentIndex.value = examDetail.value[tempIndex].questionList.length - 1;
+ currentIndex.value =
+ examDetail.value[tempIndex].questionList.length - 1;
} else {
currentType.value = typeQuestion.questionType;
currentIndex.value = 0;
}
}
}
-
};
-
// 閫�鍑鸿�冭瘯
const closeClick = () => {
@@ -237,17 +282,22 @@
// 鏃堕棿缁撴潫
const timeOut = () => {
- resetAllDialog();
- timeDialog.value = true;
const temp = {
...examInfo.value,
- titleList: examDetail.value
+ titleList: examDetail.value,
};
- submitExam(temp).then(res => {
- returnBack();
- }).catch(() => {
- returnBack();
- });
+ timeDialog.value = true;
+ resetAllDialog();
+
+ disconnect();
+
+ submitExam(temp)
+ .then((res) => {
+ returnBack();
+ })
+ .catch(() => {
+ returnBack();
+ });
};
const returnBack = () => {
@@ -258,15 +308,55 @@
watchEffect(() => {
let progress = 0;
- examDetail.value.forEach(item => {
- item.questionList.forEach(question => {
- if (question.answer || (Array.isArray(question.answerList) && question.answerList.length)) {
+ examDetail.value.forEach((item) => {
+ item.questionList.forEach((question) => {
+ if (
+ question.answer ||
+ (Array.isArray(question.answerList) && question.answerList.length)
+ ) {
progress += 1;
}
});
});
examStore.setProgress(progress);
});
+const answerTime = ref();
+watch(
+ () => message.value,
+ (msg) => {
+ if (msg.commend == "delayed") {
+ answerTime.value.addTime(msg.data.addTimeM);
+ } else if (msg.commend == "forceSubmit") {
+ confirmSubmit();
+ }
+ }
+);
+// document.addEventListener('blur', function() {
+// console.log('椤甸潰澶卞幓鐒︾偣');
+// });
+const warningNum = ref(0)
+const handleBlur = () => {
+ if (document.visibilityState === "visible") {
+ } else if (document.visibilityState === "hidden") {
+ ElMessageBox.alert("鑰冭瘯杩囩▼涓鍕跨寮�鑰冭瘯椤甸潰锛佽鍛婁笁娆″皢寮哄埗鏀跺嵎", "璀﹀憡", {
+ confirmButtonText: "纭畾",
+ });
+ warningNum.value++
+ if (warningNum.value==3) {
+ timeOut();
+ }
+ }
+};
+
+// -----------------------------------鐢熷懡鍛ㄦ湡
+onMounted(() => {
+ // 杩炴帴webscoket
+ connect();
+ document.addEventListener("visibilitychange", handleBlur);
+});
+onUnmounted(()=>{
+ document.removeEventListener("visibilitychange", handleBlur);
+})
</script>
<style lang="scss" scoped>
@@ -329,4 +419,4 @@
background-color: rgba($color: #3680fa, $alpha: 0.2);
margin-bottom: 20px;
}
-</style>
\ No newline at end of file
+</style>
--
Gitblit v1.8.0