From a3cc0d240ee750fa23d6a7772346cc6bc1023bae Mon Sep 17 00:00:00 2001
From: 黄何裕 <1053952480@qq.com>
Date: 星期五, 12 七月 2024 11:51:55 +0800
Subject: [PATCH] 考试操作加时和交卷

---
 src/views/exam/index.vue |   95 +++++++++++++++++++++++++++++++++++------------
 1 files changed, 70 insertions(+), 25 deletions(-)

diff --git a/src/views/exam/index.vue b/src/views/exam/index.vue
index ae4716e..bd858ed 100644
--- a/src/views/exam/index.vue
+++ b/src/views/exam/index.vue
@@ -7,7 +7,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">
@@ -51,7 +51,7 @@
             <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.score }}鍒�)
+                  examStore.getActiveQuestion.questionScore }}鍒�)
                 </div>
               </div>
 
@@ -113,16 +113,13 @@
     </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>
+          <el-icon :size="50" color="#3680fa">
+            <Timer />
+          </el-icon>
         </div>
         <div class="dialog-info">
           鑰冭瘯缁撴潫锛岀郴缁熻嚜鍔ㄦ敹鍗蜂腑.......
@@ -133,9 +130,9 @@
 </template>
 
 <script setup>
-import { ref, watchEffect } from 'vue';
+import { ref, watchEffect, watch, onMounted } from 'vue';
 import { storeToRefs } from 'pinia';
-import { Close,Timer } from '@element-plus/icons-vue';
+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';
@@ -144,39 +141,65 @@
 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 { useExamStore, useUserStore } from '@/store/index.js';
 import { useRouter } from 'vue-router';
 
 import { submitExam } from '@/api/modules/exam.js';
+import useWebScoket from '@/hooks/useWebScoket.js';
 
 
 const router = useRouter();
 
 const examStore = useExamStore();
+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,
+  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) => {
@@ -212,7 +235,6 @@
 
 };
 
-
 // 閫�鍑鸿�冭瘯
 const closeClick = () => {
   quitDialog.value = true;
@@ -234,34 +256,57 @@
 const resetAllDialog = () => {
   quitDialog.value = false;
   submitDialog.value = false;
-}
+};
 
 // 鏃堕棿缁撴潫
 const timeOut = () => {
-  resetAllDialog();
-  timeDialog.value = true;
   const temp = {
     ...examInfo.value,
     titleList: examDetail.value
-  }
+  };
+  timeDialog.value = true;
+  resetAllDialog();
+
+  disconnect();
+
   submitExam(temp).then(res => {
+    returnBack();
+  }).catch(() => {
+    returnBack();
+  });
+};
+
+const returnBack = () => {
+  setTimeout(() => {
     router.back();
-  })
-  // setTimeout(() => {
-  //   router.back();
-  // },2000);
+  }, 2000);
 };
 
 watchEffect(() => {
   let progress = 0;
   examDetail.value.forEach(item => {
     item.questionList.forEach(question => {
-      if (question.answer || question.answerList) {
+      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()
+  }
+});
+
+
+// -----------------------------------鐢熷懡鍛ㄦ湡
+onMounted(() => {
+  // 杩炴帴webscoket
+  connect();
 });
 </script>
 
@@ -302,7 +347,7 @@
 }
 
 .answer-left {
-  width: 340px;
+  width: 370px;
 }
 
 .submit-button,
@@ -325,4 +370,4 @@
   background-color: rgba($color: #3680fa, $alpha: 0.2);
   margin-bottom: 20px;
 }
-</style>
\ No newline at end of file
+</style>

--
Gitblit v1.8.0