refactor: 重构页面布局和组件使用,优化考试信息展示

This commit is contained in:
hello8693 2024-08-05 18:06:38 +08:00
parent 97c440e7a6
commit d2775face7
3 changed files with 49 additions and 44 deletions

View File

@ -11,7 +11,6 @@
dense dense
class="text-h5" class="text-h5"
> >
<template #header.name> <template #header.name>
<span class="text-h5">科目</span> <span class="text-h5">科目</span>
</template> </template>
@ -44,7 +43,6 @@
</v-row> </v-row>
</v-container> </v-container>
</v-card> </v-card>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">

View File

@ -1,46 +1,41 @@
<template> <template>
<div class="main-area"> <v-container class="main-area">
<v-row>
<v-col cols="12">
<h1>{{ globalStore.examName }}</h1> <h1>{{ globalStore.examName }}</h1>
</v-col>
</v-row>
<el-row> <v-row>
<el-col :span="13"> <v-col cols="6">
<SubjectInfo <Clock></Clock>
v-if="isExamRunning" <SubjectInfo :exam="currentExam" />
:exam="runningExam" </v-col>
></SubjectInfo>
<h2 v-else> <v-col cols="6">
考试未开始 <ExamList :exam="globalStore.examInfos"></ExamList>
</h2> </v-col>
</el-col> </v-row>
<el-col :span="11"> </v-container>
<div v-for="exam in globalStore.examInfos">
<ExamStatus :exam="exam" />
</div>
</el-col>
</el-row>
</div>
</template> </template>
<script setup> <script setup>
import { useRouter } from 'vue-router';
import { useAppStore } from '@renderer/stores/app'; import { useAppStore } from '@renderer/stores/app';
import { getCurrentTimeSlot } from '@renderer/utils/subjectUtils' import { getCurrentTimeSlot, getNextExamTimeSlot } from '@renderer/utils/subjectUtils';
const globalStore = useAppStore(); const globalStore = useAppStore();
const router = useRouter();
getCurrentTimeSlot(globalStore.examInfos); getCurrentTimeSlot(globalStore.examInfos);
const runningExam = computed(() => { const currentExam = computed(() => {
return getCurrentTimeSlot(globalStore.examInfos); const current = getCurrentTimeSlot(globalStore.examInfos);
if (current == null) {
return getNextExamTimeSlot(globalStore.examInfos);
} else {
return current;
}
}); });
const isExamRunning = computed(() =>{
return getCurrentTimeSlot(globalStore.examInfos) == null;
});
// //
</script> </script>
@ -49,4 +44,8 @@ const isExamRunning = computed(() =>{
padding-left: 20px; padding-left: 20px;
padding-right: 20px; padding-right: 20px;
} }
.exam-list {
margin: 20px;
}
</style> </style>

View File

@ -1,30 +1,38 @@
<template> <template>
<div> <v-container>
<v-row>
<v-col cols="12">
<h1>电视猪考试看板</h1> <h1>电视猪考试看板</h1>
</v-col>
<el-button @click="OpenDialog">打开配置</el-button> </v-row>
<v-row>
</div> <v-col cols="12">
<v-btn @click="openDialog" color="primary" dark> 打开配置 </v-btn>
</v-col>
</v-row>
</v-container>
</template> </template>
<script setup> <script setup>
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { useAppStore } from '@renderer/stores/app'; import { useAppStore } from '@renderer/stores/app';
const globalStore = useAppStore() const globalStore = useAppStore();
function openDialog() {
function OpenDialog() {
window.electron.ipcRenderer.send('prog:loadjson'); window.electron.ipcRenderer.send('prog:loadjson');
} }
window.electron.ipcRenderer.on('common:openFile', (event, message) => { window.electron.ipcRenderer.on('common:openFile', (event, message) => {
console.log(message.data); console.log(message.data);
let examdata = JSON.parse(message.data); let examData = JSON.parse(message.data);
globalStore.$patch(examdata); globalStore.$patch(examData);
router.push('/infoPage'); router.push('/infoPage');
}); });
const router = useRouter(); const router = useRouter();
//
</script> </script>
<style scoped>
/* 根据需要添加额外的样式 */
</style>