feat(考试):考试收卷提示

ZhangXianQiang

2024-06-19 cf87d6fd9a43139a10e0b6bf10a233cbde66820f

feat(考试):考试收卷提示

 src/store/modules/exam.js

@@ -8,7 +8,7 @@
    examStatus: '考试状态',
    examStartTime: '2021-01-01',
    examEndTime: '2021-01-01',
    examTime: 60,
    examTime: 5,
  });

  const examType = ref({

 src/views/exam/components/answer-time/index.vue

@@ -2,15 +2,28 @@
  <div class="time-container flex justify-center text-white items-center shadow-md">
    <el-icon class="mr-1 text-xl" size="24"><Timer /></el-icon>
    <div class="label mr-1">剩余时间:</div>
    <el-countdown :value="time" />
    <el-countdown :value="time" @finish="timeFinish" />
  </div>
</template>

<script setup>
import {ref} from 'vue';
import dayjs from 'dayjs';
import { storeToRefs } from 'pinia';
import { Timer } from '@element-plus/icons-vue';
import { useExamStore } from '@/store/index.js';

const time = ref(1000);
const examStore = useExamStore();
const { examInfo } = storeToRefs(examStore);

const emit = defineEmits(['timeOut']);

const time = ref(dayjs().valueOf() + examInfo.value.examTime * 1000);

const timeFinish = () => {
  emit('timeOut');
}

</script>

<style lang="scss" scoped>

 src/views/exam/index.vue

@@ -5,9 +5,9 @@
      <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></AnswerTime>
          <AnswerTime @timeOut="timeOut"></AnswerTime>

          <div class="return-container grow flex justify-end">
            <el-button type="danger" size="large" circle @click="closeClick">
@@ -50,7 +50,9 @@
          <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.score}}分)</div>
                <div class="title text-xl font-semibold ">{{ examType[currentType] }} ({{
                  examStore.getActiveQuestion.score }}分)
                </div>
              </div>

              <div class="main-wrapper w-full grow relative my-5">
@@ -109,13 +111,31 @@
        </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 } 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';
@@ -131,7 +151,7 @@
const router = useRouter();

const examStore = useExamStore();
const { currentType, currentIndex, examDetail, examType } = storeToRefs(examStore);
const { currentType, currentIndex, examDetail, examType, examInfo } = storeToRefs(examStore);

const typeComponent = {
  1: AnswerSingle,
@@ -141,6 +161,7 @@

const quitDialog = ref(false);
const submitDialog = ref(false);
const timeDialog = ref(false);

const prevQuestion = () => {
  currentIndex.value--;
@@ -211,14 +232,26 @@
// 交卷
const submitExam = () => {
  submitDialog.value = true;
}
};

const confirmSubmit = () => {
  submitDialog.value = false;
  router.back();
};

const resetAllDialog = () => {
  quitDialog.value = false;
  submitDialog.value = false;
}

// 时间结束
const timeOut = () => {
  resetAllDialog();
  timeDialog.value = true;
  setTimeout(() => {
    router.back();
  },2000);
};

watchEffect(() => {
  let progress = 0;
@@ -282,4 +315,15 @@
.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>