From b9b15cf8c857e3d02a9afa5c0a21de70d6932e62 Mon Sep 17 00:00:00 2001
From: ZhangXianQiang <1135831638@qq.com>
Date: 星期三, 03 七月 2024 13:34:14 +0800
Subject: [PATCH] fix:pdf查看器修改
---
src/views/exam/index.vue | 319 ++++++++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 312 insertions(+), 7 deletions(-)
diff --git a/src/views/exam/index.vue b/src/views/exam/index.vue
index cdc820e..da8d53f 100644
--- a/src/views/exam/index.vue
+++ b/src/views/exam/index.vue
@@ -1,22 +1,287 @@
<template>
- <div class="exam-container w-screen h-screen relative overflow-hidden">
- <div class="top-bg bg-blue-400"></div>
- <div class="exam-content flex flex-col ">
- <div class="exam-header">
- <div class="title-container">
- 娴嬭瘯娴嬭瘯娴嬭瘯
+ <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">
+ <div class="exam-header flex items-center mt-12 mb-10">
+ <div class="title-container text-3xl font-semibold text-white mr-8">
+ {{ examInfo.examName }}
+ </div>
+ <AnswerTime @timeOut="timeOut"></AnswerTime>
+
+ <div class="return-container grow flex justify-end">
+ <el-button type="danger" size="large" circle @click="closeClick">
+ <template #icon>
+ <el-icon :size="20">
+ <Close />
+ </el-icon>
+ </template>
+ </el-button>
+ </div>
+ </div>
+
+ <div class="exam-main grow flex justify-between">
+ <!-- 绛旈鍗″尯 -->
+ <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>
+ <AnswerTag></AnswerTag>
+ </div>
+
+ <div class="progress-wrapper w-full">
+ <AnswerProgress></AnswerProgress>
+ </div>
+
+ <div class="sheet-wrapper w-full grow relative my-5">
+ <div class="sheet-content absolute top-0 bottom-0 w-full">
+ <AnswerSheet></AnswerSheet>
+ </div>
+ </div>
+
+ <div class="submit-wrapper">
+ <el-button type="primary" class="submit-button" @click="submitExamHandle">鎻愪氦璇曞嵎</el-button>
+ </div>
+
+ </div>
+ </div>
+
+ <!-- 绛旈鍐呭鍖� -->
+ <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>
+ </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>
+ </Transition>
+ </div>
+ </div>
+
+ <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>
+ </div>
+ <div class="button-item">
+ <el-button class="tool-button" type="primary" @click="nextQuestion">涓嬩竴棰�</el-button>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
</div>
</div>
- <div class="exam-main flex-1"></div>
</div>
+
+
+ <!-- 閫�鍑鸿�冭瘯鎻愮ず寮圭獥 -->
+ <el-dialog v-model="quitDialog" title="娉ㄦ剰" width="500">
+ <div class="dialog-container">
+ <p>璇风‘璁ゆ槸鍚﹂��鍑哄綋鍓嶈�冭瘯</p>
+ <p>褰撳墠璇曞嵎浼氳嚜鍔ㄦ彁浜�,鍚庣画灏嗘棤娉曠户缁綔绛�</p>
+ </div>
+ <template #footer>
+ <div class="dialog-footer">
+ <el-button @click="quitDialog = false">缁х画浣滅瓟</el-button>
+ <el-button type="danger" @click="confirmQuit">
+ 纭畾閫�鍑�
+ </el-button>
+ </div>
+ </template>
+ </el-dialog>
+
+ <!-- 浜ゅ嵎鎻愮ず寮圭獥 -->
+ <el-dialog v-model="submitDialog" title="纭浜ゅ嵎?" width="500">
+ <div class="dialog-container">
+ <p>璇风‘璁ゆ槸鍚︽彁浜よ瘯鍗�</p>
+ <p>涓�鏃︿氦鍗峰皢鏃犳硶缁х画浣滅瓟鎴栦慨鏀圭瓟妗�</p>
+ </div>
+ <template #footer>
+ <div class="dialog-footer">
+ <el-button @click="submitDialog = false">缁х画浣滅瓟</el-button>
+ <el-button type="primary" @click="confirmSubmit">
+ 纭鎻愪氦
+ </el-button>
+ </div>
+ </template>
+ </el-dialog>
+
+ <!-- 鑰冭瘯鏃堕棿寮圭獥 -->
+ <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>
+ </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 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 { submitExam } from '@/api/modules/exam.js';
+
+
+const router = useRouter();
+
+const examStore = useExamStore();
+const { currentType, currentIndex, examDetail, examType, examInfo } = storeToRefs(examStore);
+
+const typeComponent = {
+ 1: AnswerSingle,
+ 2: AnswerMultiple,
+ 3: AnswerDetermine,
+ 4: AnswerFill,
+ 5: AnswerShort,
+ 6: AnswerAudio,
+ 7: AnswerCount,
+};
+
+const quitDialog = ref(false);
+const submitDialog = ref(false);
+const timeDialog = ref(false);
+
+
+const prevQuestion = () => {
+ currentIndex.value--;
+ checkList();
+};
+
+const nextQuestion = () => {
+ currentIndex.value++;
+ checkList();
+};
+
+const checkList = () => {
+ let tempIndex = 0;
+ const typeQuestion = examDetail.value.find((typeItem, index) => {
+ if (typeItem.questionType === currentType.value) {
+ tempIndex = index;
+ return typeItem;
+ } else {
+ return false;
+ }
+ });
+ if (typeQuestion) {
+ if (currentIndex.value >= typeQuestion.questionList.length) {
+ tempIndex++;
+ if (examDetail.value[tempIndex]) {
+ currentType.value = examDetail.value[tempIndex].questionType;
+ currentIndex.value = 0;
+ } else {
+ 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;
+ } else {
+ currentType.value = typeQuestion.questionType;
+ currentIndex.value = 0;
+ }
+ }
+ }
+
+};
+
+
+// 閫�鍑鸿�冭瘯
+const closeClick = () => {
+ quitDialog.value = true;
+};
+
+const confirmQuit = () => {
+ timeOut();
+};
+
+// 浜ゅ嵎
+const submitExamHandle = () => {
+ submitDialog.value = true;
+};
+
+const confirmSubmit = () => {
+ timeOut();
+};
+
+const resetAllDialog = () => {
+ quitDialog.value = false;
+ submitDialog.value = false;
+};
+
+// 鏃堕棿缁撴潫
+const timeOut = () => {
+ resetAllDialog();
+ timeDialog.value = true;
+ const temp = {
+ ...examInfo.value,
+ titleList: examDetail.value
+ };
+ submitExam(temp).then(res => {
+ returnBack();
+ }).catch(() => {
+ returnBack();
+ });
+};
+
+const returnBack = () => {
+ setTimeout(() => {
+ router.back();
+ }, 2000);
+};
+
+watchEffect(() => {
+ let progress = 0;
+ examDetail.value.forEach(item => {
+ item.questionList.forEach(question => {
+ if (question.answer || (Array.isArray(question.answerList) && question.answerList.length)) {
+ progress += 1;
+ }
+ });
+ });
+ examStore.setProgress(progress);
+});
</script>
<style lang="scss" scoped>
+@media (min-width: 1836px) {
+ .container {
+ max-width: 1724px;
+ }
+}
+
.top-bg {
width: 130%;
height: 200px;
@@ -26,8 +291,48 @@
left: 50%;
transform: translateX(-50%);
}
+
.exam-content {
width: 100%;
height: 100%;
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: 2;
+}
+
+.exam-header {
+ width: 100%;
+}
+
+.answer-wrapper {
+ background-color: #fff;
+ border-top-left-radius: 10px;
+ border-top-right-radius: 10px;
+}
+
+.answer-left {
+ width: 370px;
+}
+
+.submit-button,
+.tool-button {
+ width: 160px;
+ height: 40px;
+}
+
+.tool-button {
+ margin: 0 20px;
+}
+
+.icon-container {
+ width: 70px;
+ height: 70px;
+ border-radius: 50%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: rgba($color: #3680fa, $alpha: 0.2);
+ margin-bottom: 20px;
}
</style>
\ No newline at end of file
--
Gitblit v1.8.0