mirror of
https://github.com/ZeroCatDev/Classworks.git
synced 2025-07-02 17:29:23 +00:00
1138 lines
30 KiB
Vue
1138 lines
30 KiB
Vue
<template>
|
|
<v-app-bar>
|
|
<template #prepend>
|
|
<v-app-bar-nav-icon icon="mdi-home" />
|
|
</template>
|
|
|
|
<v-app-bar-title>
|
|
{{ classNumber }}班 - {{ titleText }}
|
|
</v-app-bar-title>
|
|
|
|
<v-spacer />
|
|
|
|
<template #append>
|
|
<v-btn
|
|
icon="mdi-format-font-size-decrease"
|
|
variant="text"
|
|
@click="zoom('out')"
|
|
/>
|
|
<v-btn
|
|
icon="mdi-format-font-size-increase"
|
|
variant="text"
|
|
@click="zoom('up')"
|
|
/>
|
|
<v-menu
|
|
v-model="datePickerDialog"
|
|
:close-on-content-click="false"
|
|
>
|
|
<template v-slot:activator="{ props }">
|
|
<v-btn
|
|
icon="mdi-calendar"
|
|
variant="text"
|
|
v-bind="props"
|
|
/>
|
|
</template>
|
|
|
|
<v-date-picker
|
|
v-model="selectedDate"
|
|
color="primary"
|
|
@update:model-value="handleDateSelect"
|
|
/>
|
|
</v-menu>
|
|
<v-btn
|
|
icon="mdi-refresh"
|
|
variant="text"
|
|
:loading="downloadLoading"
|
|
@click="downloadData"
|
|
/>
|
|
<v-btn
|
|
icon="mdi-cog"
|
|
variant="text"
|
|
@click="$router.push('/settings')"
|
|
/>
|
|
</template>
|
|
</v-app-bar>
|
|
<div class="d-flex">
|
|
<!-- 主要内容区域 -->
|
|
<v-container
|
|
class="main-window flex-grow-1"
|
|
fluid
|
|
>
|
|
<div v-if="showNoDataMessage && !isToday" class="no-data-message">
|
|
<v-card class="text-center pa-4" >
|
|
<v-card-title class="text-h6">别看未来的作业了</v-card-title>
|
|
<v-card-text>
|
|
<div class="text-body-1">{{ noDataMessage }}</div>
|
|
</v-card-text>
|
|
</v-card>
|
|
</div>
|
|
|
|
<template v-else>
|
|
<div class="grid-masonry" ref="gridContainer">
|
|
<div
|
|
v-for="item in sortedItems"
|
|
:key="item.key"
|
|
class="grid-item"
|
|
:class="{
|
|
'empty-card': !item.content,
|
|
[`grid-row-${item.rowSpan}`]: true
|
|
}"
|
|
:style="{
|
|
'grid-row-end': `span ${item.rowSpan}`,
|
|
order: item.order,
|
|
cursor: uploadLoading || downloadLoading || isPastDate ? 'not-allowed' : 'pointer',
|
|
opacity: uploadLoading || downloadLoading ? '0.7' : '1'
|
|
}"
|
|
@click="!uploadLoading && !downloadLoading && !isPastDate && openDialog(item.key)"
|
|
>
|
|
<v-card border height="100%">
|
|
<v-card-title :class="{ 'text-subtitle-1': !item.content }">
|
|
{{ item.name }}
|
|
</v-card-title>
|
|
<v-card-text :style="item.content ? contentStyle : null">
|
|
<template v-if="item.content">
|
|
<v-list>
|
|
<v-list-item
|
|
v-for="text in splitPoint(item.content)"
|
|
:key="text"
|
|
>
|
|
{{ text }}
|
|
</v-list-item>
|
|
</v-list>
|
|
</template>
|
|
<template v-else>
|
|
<div class="text-center pa-2">
|
|
<v-icon size="small" color="grey">mdi-plus</v-icon>
|
|
<div class="text-caption text-grey">点击添加作业</div>
|
|
</div>
|
|
</template>
|
|
</v-card-text>
|
|
</v-card>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 空科目按钮组 -->
|
|
<v-btn-group v-if="emptySubjectDisplay === 'button'" class="empty-subjects-container">
|
|
<v-btn
|
|
v-for="subject in emptySubjects"
|
|
:key="subject.key"
|
|
variant="tonal"
|
|
color="primary"
|
|
@click="!uploadLoading && !downloadLoading && openDialog(subject.key)"
|
|
:disabled="uploadLoading || downloadLoading"
|
|
>
|
|
<v-icon start>mdi-plus</v-icon>
|
|
{{ subject.name }}
|
|
</v-btn>
|
|
</v-btn-group>
|
|
</template>
|
|
</v-container>
|
|
|
|
<!-- 出勤统计区域 -->
|
|
<v-col
|
|
v-if="studentList.length"
|
|
class="attendance-area"
|
|
cols="1"
|
|
@click="!isPastDate ? setAttendanceArea() : null"
|
|
>
|
|
<h1>出勤</h1>
|
|
<h2>应到: {{ studentList.length }}人</h2>
|
|
<h2>实到: {{ studentList.length - selectedSet.size }}人</h2>
|
|
<h2>请假: {{ selectedSet.size }}人</h2>
|
|
<h3 v-for="(i, index) in selectedSet" :key="'absent-' + index">
|
|
{{ `${index + 1}. ${studentList[i]}` }}
|
|
</h3>
|
|
<h2>迟到: {{ lateSet.size }}人</h2>
|
|
<h3 v-for="(i, index) in lateSet" :key="'late-' + index">
|
|
{{ `${index + 1}. ${studentList[i]}` }}
|
|
</h3>
|
|
</v-col>
|
|
</div>
|
|
<v-container fluid>
|
|
<v-btn
|
|
v-if="!synced"
|
|
color="error"
|
|
size="large"
|
|
:loading="uploadLoading"
|
|
class="ml-2"
|
|
@click="uploadData"
|
|
>
|
|
上传
|
|
</v-btn>
|
|
<v-btn
|
|
v-else
|
|
color="success"
|
|
size="large"
|
|
@click="showSyncMessage"
|
|
>
|
|
同步完成
|
|
</v-btn>
|
|
</v-container>
|
|
<v-dialog
|
|
v-model="dialogVisible"
|
|
width="500"
|
|
@click:outside="handleClose"
|
|
>
|
|
<v-card border>
|
|
<v-card-title>{{ dialogTitle }}</v-card-title>
|
|
<v-card-subtitle>
|
|
{{ autoSave ? "喵？喵呜！" : "写完后点击上传谢谢喵" }}
|
|
</v-card-subtitle>
|
|
<v-card-text>
|
|
<v-textarea
|
|
ref="inputRef"
|
|
v-model="textarea"
|
|
auto-grow
|
|
placeholder="使用换行表示分条"
|
|
rows="5"
|
|
/>
|
|
</v-card-text>
|
|
</v-card>
|
|
</v-dialog>
|
|
|
|
<v-dialog
|
|
v-model="attendDialogVisible"
|
|
width="800"
|
|
>
|
|
<v-card>
|
|
<v-card-title>设置学生出勤状态</v-card-title>
|
|
<v-card-text>
|
|
<v-btn @click="cleanstudentslist">
|
|
全勤
|
|
</v-btn>
|
|
<v-container fluid>
|
|
<v-row>
|
|
<v-col
|
|
v-for="(name, i) in studentList"
|
|
:key="i"
|
|
cols="12"
|
|
sm="6"
|
|
md="4"
|
|
>
|
|
<v-card
|
|
border
|
|
:class="{ selected: selectedSet.has(i) || lateSet.has(i) }"
|
|
:color="
|
|
selectedSet.has(i)
|
|
? 'primary'
|
|
: lateSet.has(i)
|
|
? 'orange'
|
|
: ''
|
|
"
|
|
@click="toggleStudentStatus(i)"
|
|
>
|
|
<v-card-text>
|
|
{{ `${i + 1}. ${name}` }}
|
|
</v-card-text>
|
|
</v-card>
|
|
</v-col>
|
|
</v-row>
|
|
</v-container>
|
|
</v-card-text>
|
|
</v-card>
|
|
</v-dialog>
|
|
|
|
<v-snackbar
|
|
v-model="snackbar"
|
|
:timeout="2000"
|
|
>
|
|
{{ snackbarText }}
|
|
</v-snackbar>
|
|
|
|
<v-dialog
|
|
v-model="attendanceDialog"
|
|
max-width="600"
|
|
>
|
|
<v-card>
|
|
<v-card-title class="text-h6">
|
|
编辑出勤状态
|
|
</v-card-title>
|
|
|
|
<v-card-text>
|
|
<v-select
|
|
v-model="selectedTimeSlot"
|
|
:items="timeSlots"
|
|
item-title="name"
|
|
item-value="id"
|
|
label="选择时间段"
|
|
class="mb-4"
|
|
/>
|
|
|
|
<v-expansion-panels>
|
|
<v-expansion-panel>
|
|
<v-expansion-panel-title>
|
|
批量操作
|
|
</v-expansion-panel-title>
|
|
<v-expansion-panel-text>
|
|
<v-btn-group>
|
|
<v-btn
|
|
color="success"
|
|
prepend-icon="mdi-account-check"
|
|
@click="setAllPresent"
|
|
>
|
|
全部到齐
|
|
</v-btn>
|
|
<v-btn
|
|
color="error"
|
|
prepend-icon="mdi-account-off"
|
|
@click="setAllAbsent"
|
|
>
|
|
全部请假
|
|
</v-btn>
|
|
<v-btn
|
|
color="warning"
|
|
prepend-icon="mdi-clock-alert"
|
|
@click="setAllLate"
|
|
>
|
|
全部迟到
|
|
</v-btn>
|
|
</v-btn-group>
|
|
</v-expansion-panel-text>
|
|
</v-expansion-panel>
|
|
</v-expansion-panels>
|
|
|
|
<v-list class="mt-4">
|
|
<v-list-subheader>学生列表</v-list-subheader>
|
|
<v-list-item
|
|
v-for="(student, index) in currentTimeSlotStudents"
|
|
:key="index"
|
|
:title="student"
|
|
>
|
|
<template v-slot:append>
|
|
<v-btn-group>
|
|
<v-btn
|
|
:color="isPresent(index) ? 'success' : ''"
|
|
icon="mdi-account-check"
|
|
size="small"
|
|
@click="setPresent(index)"
|
|
/>
|
|
<v-btn
|
|
:color="isAbsent(index) ? 'error' : ''"
|
|
icon="mdi-account-off"
|
|
size="small"
|
|
@click="setAbsent(index)"
|
|
/>
|
|
<v-btn
|
|
:color="isLate(index) ? 'warning' : ''"
|
|
icon="mdi-clock-alert"
|
|
size="small"
|
|
@click="setLate(index)"
|
|
/>
|
|
</v-btn-group>
|
|
</template>
|
|
</v-list-item>
|
|
</v-list>
|
|
</v-card-text>
|
|
|
|
<v-card-actions>
|
|
<v-spacer />
|
|
<v-btn
|
|
color="primary"
|
|
@click="saveAttendance"
|
|
>
|
|
保存
|
|
</v-btn>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-dialog>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.grid-masonry {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 16px;
|
|
padding: 8px;
|
|
grid-auto-flow: dense;
|
|
}
|
|
|
|
.grid-item {
|
|
width: 100%;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.empty-card {
|
|
transform: scale(0.9);
|
|
opacity: 0.8;
|
|
grid-row-end: span 1 !important;
|
|
}
|
|
|
|
.empty-card:hover {
|
|
transform: scale(0.95);
|
|
opacity: 1;
|
|
}
|
|
|
|
.empty-subjects-container {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
@media (max-width: 1199px) {
|
|
.grid-masonry {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 799px) {
|
|
.grid-masonry {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.empty-card {
|
|
transform: scale(0.95);
|
|
}
|
|
}
|
|
|
|
/* 确保容器高度不超过视口 */
|
|
.main-window {
|
|
max-height: calc(100vh - 180px);
|
|
overflow-y: auto;
|
|
}
|
|
|
|
/* 优化滚动条样式 */
|
|
.main-window::-webkit-scrollbar {
|
|
width: 8px;
|
|
}
|
|
|
|
.main-window::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
.main-window::-webkit-scrollbar-thumb {
|
|
background-color: rgba(0, 0, 0, 0.2);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.main-window::-webkit-scrollbar-thumb:hover {
|
|
background-color: rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.no-data-message {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
min-height: 200px;
|
|
margin: 20px 0;
|
|
}
|
|
|
|
.attendance-drawer {
|
|
border-left: 1px solid rgba(0, 0, 0, 0.12);
|
|
}
|
|
|
|
.attendance-drawer :deep(.v-navigation-drawer__content) {
|
|
overflow-y: auto;
|
|
}
|
|
|
|
/* 优化滚动条样式 */
|
|
.attendance-drawer :deep(.v-navigation-drawer__content::-webkit-scrollbar) {
|
|
width: 8px;
|
|
}
|
|
|
|
.attendance-drawer :deep(.v-navigation-drawer__content::-webkit-scrollbar-track) {
|
|
background: transparent;
|
|
}
|
|
|
|
.attendance-drawer :deep(.v-navigation-drawer__content::-webkit-scrollbar-thumb) {
|
|
background-color: rgba(0, 0, 0, 0.2);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.attendance-drawer :deep(.v-navigation-drawer__content::-webkit-scrollbar-thumb:hover) {
|
|
background-color: rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
/* 响应式调整 */
|
|
@media (max-width: 960px) {
|
|
.attendance-drawer {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.text-success {
|
|
color: rgb(var(--v-theme-success));
|
|
}
|
|
|
|
.text-error {
|
|
color: rgb(var(--v-theme-error));
|
|
}
|
|
|
|
.text-warning {
|
|
color: rgb(var(--v-theme-warning));
|
|
}
|
|
|
|
.attendance-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.attendance-numbers {
|
|
padding: 20px 0;
|
|
}
|
|
|
|
.total-number {
|
|
border-bottom: 1px solid rgba(0,0,0,0.12);
|
|
padding-bottom: 20px;
|
|
}
|
|
|
|
.status-number {
|
|
flex: 1;
|
|
}
|
|
|
|
.text-h2, .text-h3 {
|
|
line-height: 1.2;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
import axios from "axios";
|
|
import { useDisplay } from "vuetify";
|
|
import { getSetting, watchSettings } from '@/utils/settings';
|
|
|
|
export default {
|
|
name: "HomeworkBoard",
|
|
data() {
|
|
return {
|
|
backurl: '',
|
|
classNumber: '',
|
|
currentEditSubject: null,
|
|
studentList: [],
|
|
selectedSet: new Set(), // Absent students
|
|
lateSet: new Set(), // Late students
|
|
dialogVisible: false,
|
|
dialogTitle: "",
|
|
textarea: "",
|
|
dateString: "",
|
|
synced: false,
|
|
attendDialogVisible: false,
|
|
contentStyle: { "font-size": `${getSetting('font.size')}px` },
|
|
uploadLoading: false,
|
|
downloadLoading: false,
|
|
homeworkData: {},
|
|
snackbar: false,
|
|
snackbarText: "",
|
|
fontSize: getSetting('font.size'),
|
|
datePickerDialog: false,
|
|
selectedDate: null,
|
|
refreshInterval: null,
|
|
subjectOrder: [
|
|
"语文", "数学", "英语", "物理", "化学",
|
|
"生物", "政治", "历史", "地理", "其他"
|
|
],
|
|
showNoDataMessage: false,
|
|
noDataMessage: '',
|
|
isToday: false,
|
|
attendanceDialog: false,
|
|
selectedTimeSlot: null,
|
|
timeSlots: [],
|
|
currentTimeSlotStudents: [],
|
|
};
|
|
},
|
|
|
|
computed: {
|
|
isMobile() {
|
|
return useDisplay().mobile.value;
|
|
},
|
|
titleText() {
|
|
const now = new Date();
|
|
const year = now.getFullYear();
|
|
const month = String(now.getMonth() + 1).padStart(2, '0');
|
|
const day = String(now.getDate()).padStart(2, '0');
|
|
const today = `${year}-${month}-${day}`;
|
|
|
|
const yesterday = new Date(now);
|
|
yesterday.setDate(yesterday.getDate() - 1);
|
|
const yesterdayFormatted = `${yesterday.getFullYear()}-${String(yesterday.getMonth() + 1).padStart(2, '0')}-${String(yesterday.getDate()).padStart(2, '0')}`;
|
|
|
|
if (this.dateString === today) {
|
|
return '今天的作业';
|
|
} else if (this.dateString === yesterdayFormatted) {
|
|
return '昨天的作业';
|
|
} else {
|
|
return `${this.dateString}的作业`;
|
|
}
|
|
},
|
|
sortedItems() {
|
|
const items = Object.entries(this.homeworkData)
|
|
.map(([key, value]) => ({
|
|
key,
|
|
name: value.name,
|
|
content: value.content,
|
|
order: this.subjectOrder.indexOf(key),
|
|
rowSpan: value.content ?
|
|
Math.ceil((value.content.split('\n').filter(line => line.trim()).length + 1) * 0.8) : 1
|
|
}))
|
|
.filter(item => {
|
|
if (this.emptySubjectDisplay === 'button') {
|
|
return item.content;
|
|
}
|
|
return true;
|
|
});
|
|
|
|
// Sort items: prioritize non-empty content first
|
|
return items.sort((a, b) => {
|
|
// If one item has content and the other does not, prioritize the one with content
|
|
if (a.content && !b.content) return -1;
|
|
if (!a.content && b.content) return 1;
|
|
|
|
// If both have content or both are empty, sort by order
|
|
return a.order - b.order;
|
|
});
|
|
},
|
|
attendanceVisible() {
|
|
return this.studentList.length > 0;
|
|
},
|
|
emptySubjects() {
|
|
if (this.emptySubjectDisplay !== 'button') return [];
|
|
|
|
return Object.entries(this.homeworkData)
|
|
.map(([key, value]) => ({
|
|
key,
|
|
name: value.name,
|
|
content: value.content,
|
|
order: this.subjectOrder.indexOf(key)
|
|
}))
|
|
.filter(subject => !subject.content)
|
|
.sort((a, b) => a.order - b.order);
|
|
},
|
|
autoSave() {
|
|
return getSetting('edit.autoSave');
|
|
},
|
|
refreshBeforeEdit() {
|
|
return getSetting('edit.refreshBeforeEdit');
|
|
},
|
|
emptySubjectDisplay() {
|
|
return getSetting('display.emptySubjectDisplay');
|
|
},
|
|
dynamicSort() {
|
|
return getSetting('display.dynamicSort');
|
|
},
|
|
isPastDate() {
|
|
const selectedDate = new Date(this.dateString);
|
|
const today = new Date();
|
|
// 将时间部分归零以进行比较
|
|
selectedDate.setHours(0, 0, 0, 0);
|
|
today.setHours(0, 0, 0, 0);
|
|
return selectedDate < today; // 如果选择的日期在今天之前，则返回 true
|
|
},
|
|
},
|
|
|
|
async mounted() {
|
|
try {
|
|
this.updateBackendUrl();
|
|
await this.initializeData();
|
|
this.setupAutoRefresh();
|
|
|
|
// 监听设置变化
|
|
this.unwatchSettings = watchSettings(() => {
|
|
this.updateSettings();
|
|
});
|
|
} catch (err) {
|
|
console.error("初始化失败:", err);
|
|
this.showError("初始化失败，请刷新页面重试");
|
|
}
|
|
},
|
|
|
|
beforeUnmount() {
|
|
if (this.unwatchSettings) {
|
|
this.unwatchSettings();
|
|
}
|
|
if (this.refreshInterval) {
|
|
clearInterval(this.refreshInterval);
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
async initializeData() {
|
|
try {
|
|
// 获取配置信息（包含学生列表和时间段）
|
|
await this.loadConfig();
|
|
|
|
// 获取URL中的日期参数
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
const dateParam = urlParams.get('date');
|
|
|
|
if (dateParam) {
|
|
this.dateString = dateParam;
|
|
} else {
|
|
const now = new Date();
|
|
this.dateString = now.toISOString().split('T')[0];
|
|
}
|
|
|
|
// 下载当天作业数据
|
|
await this.downloadData();
|
|
} catch (error) {
|
|
console.error('初始化失败:', error);
|
|
this.showError('初始化失败，请检查网络连接');
|
|
}
|
|
},
|
|
|
|
async loadConfig() {
|
|
try {
|
|
const domain = getSetting('server.domain');
|
|
const classNum = getSetting('server.classNumber');
|
|
|
|
if (!domain || !classNum) {
|
|
throw new Error('请先设置服务器域名和班号');
|
|
}
|
|
|
|
const res = await axios.get(`${domain}/${classNum}/config`);
|
|
// 直接使用返回的数据，不再需要 .data 层
|
|
this.studentList = res.data.studentList || [];
|
|
this.timeSlots = res.data.timeSlots || [];
|
|
|
|
// 如果有时间段，默认选择第一个
|
|
if (this.timeSlots.length > 0) {
|
|
this.selectedTimeSlot = this.timeSlots[0].id;
|
|
this.updateCurrentTimeSlotStudents();
|
|
}
|
|
} catch (error) {
|
|
console.error('加载配置失败:', error);
|
|
throw error;
|
|
}
|
|
},
|
|
|
|
updateCurrentTimeSlotStudents() {
|
|
if (this.selectedTimeSlot) {
|
|
const slot = this.timeSlots.find(s => s.id === this.selectedTimeSlot);
|
|
this.currentTimeSlotStudents = slot ? slot.students : [];
|
|
} else {
|
|
this.currentTimeSlotStudents = this.studentList;
|
|
}
|
|
},
|
|
|
|
async downloadDataDirectly() {
|
|
try {
|
|
const formattedDate = new Date(this.dateString).toISOString().split('T')[0];
|
|
const res = await axios.get(
|
|
`${this.backurl}/homework?date=${formattedDate}`
|
|
);
|
|
|
|
const today = new Date();
|
|
this.isToday = today.toISOString().split('T')[0] === formattedDate;
|
|
|
|
// Check if the response indicates success
|
|
if (res.data && res.data.status !== false) {
|
|
this.showNoDataMessage = false;
|
|
|
|
// Process the new data structure
|
|
const { homework, attendance } = res.data;
|
|
|
|
// Initialize homeworkData with existing data or default empty subjects
|
|
this.homeworkData = {
|
|
"语文": { name: "语文", content: "" },
|
|
"数学": { name: "数学", content: "" },
|
|
"英语": { name: "英语", content: "" },
|
|
"物理": { name: "物理", content: "" },
|
|
"化学": { name: "化学", content: "" },
|
|
"生物": { name: "生物", content: "" },
|
|
"历史": { name: "历史", content: "" },
|
|
"地理": { name: "地理", content: "" },
|
|
"政治": { name: "政治", content: "" },
|
|
"其他": { name: "其他", content: "" },
|
|
};
|
|
|
|
// Update homeworkData with existing data from the response
|
|
for (const subject in homework) {
|
|
if (homework.hasOwnProperty(subject)) {
|
|
this.homeworkData[subject] = homework[subject];
|
|
}
|
|
}
|
|
|
|
// Update attendance information if available
|
|
if (attendance) {
|
|
this.selectedTimeSlot = attendance.timeSlotId;
|
|
this.selectedSet = new Set(attendance.absent || []);
|
|
this.lateSet = new Set(attendance.late || []);
|
|
this.updateCurrentTimeSlotStudents();
|
|
} else {
|
|
this.selectedSet.clear();
|
|
this.lateSet.clear();
|
|
}
|
|
|
|
this.synced = true;
|
|
} else {
|
|
// Handle the error case for today's date
|
|
if (this.isToday && res.data.status == false) {
|
|
this.showNoDataMessage = false; // Ensure we show the empty data
|
|
this.homeworkData = {
|
|
"语文": { name: "语文", content: "" },
|
|
"数学": { name: "数学", content: "" },
|
|
"英语": { name: "英语", content: "" },
|
|
"物理": { name: "物理", content: "" },
|
|
"化学": { name: "化学", content: "" },
|
|
"生物": { name: "生物", content: "" },
|
|
"历史": { name: "历史", content: "" },
|
|
"地理": { name: "地理", content: "" },
|
|
"政治": { name: "政治", content: "" },
|
|
};
|
|
this.noDataMessage = ''; // Clear any previous message
|
|
} else {
|
|
// Handle other error cases
|
|
this.showNoDataMessage = true;
|
|
this.noDataMessage = res.data.msg || '未找到数据';
|
|
this.homeworkData = {};
|
|
this.selectedSet.clear();
|
|
this.lateSet.clear();
|
|
}
|
|
}
|
|
} catch (error) {
|
|
console.error('下载数据失败:', error);
|
|
this.showError('下载数据失败，请重试');
|
|
}
|
|
},
|
|
|
|
async uploadData() {
|
|
if (this.uploadLoading) return;
|
|
|
|
try {
|
|
this.uploadLoading = true;
|
|
await axios.post(`${this.backurl}/homework`, {
|
|
date: new Date(this.dateString).toISOString().split('T')[0],
|
|
homework: this.homeworkData, // 修改键名为 homework
|
|
attendance: {
|
|
timeSlotId: this.selectedTimeSlot,
|
|
absent: Array.from(this.selectedSet),
|
|
late: Array.from(this.lateSet),
|
|
},
|
|
});
|
|
this.synced = true;
|
|
this.showSyncMessage();
|
|
} catch (err) {
|
|
console.error("上传失败:", err);
|
|
this.showError("上传失败，请重试");
|
|
} finally {
|
|
this.uploadLoading = false;
|
|
}
|
|
},
|
|
|
|
showSyncMessage() {
|
|
this.snackbar = true;
|
|
this.snackbarText = "数据已完成与服务器同步";
|
|
},
|
|
|
|
showError(message) {
|
|
this.snackbar = true;
|
|
this.snackbarText = message;
|
|
},
|
|
|
|
handleClose() {
|
|
if (this.currentEditSubject) {
|
|
// Update only the specific subject being edited
|
|
const currentSubject = this.homeworkData[this.currentEditSubject];
|
|
if (currentSubject) {
|
|
currentSubject.content = this.textarea;
|
|
}
|
|
this.synced = false;
|
|
|
|
// If auto-save is enabled, upload the data
|
|
if (this.autoSave) {
|
|
this.uploadData();
|
|
}
|
|
}
|
|
this.dialogVisible = false;
|
|
},
|
|
|
|
async openDialog(subject) {
|
|
// 如果启用了编辑前刷新，先刷新数据
|
|
if (this.refreshBeforeEdit) {
|
|
try {
|
|
await this.downloadData();
|
|
} catch (err) {
|
|
this.showError("刷新数据失败，可能显示的不是最新数据");
|
|
}
|
|
}
|
|
|
|
this.currentEditSubject = subject;
|
|
this.dialogTitle = this.homeworkData[subject].name;
|
|
this.textarea = this.homeworkData[subject].content;
|
|
this.dialogVisible = true;
|
|
|
|
// 在下一个 tick 后聚焦输入框
|
|
this.$nextTick(() => {
|
|
if (this.$refs.inputRef) {
|
|
this.$refs.inputRef.focus();
|
|
}
|
|
});
|
|
},
|
|
|
|
splitPoint(content) {
|
|
return content.split("\n").filter((text) => text.trim());
|
|
},
|
|
|
|
setAttendanceArea() {
|
|
this.attendDialogVisible = true;
|
|
},
|
|
|
|
toggleStudentStatus(index) {
|
|
if (this.selectedSet.has(index)) {
|
|
this.selectedSet.delete(index);
|
|
this.lateSet.add(index);
|
|
} else if (this.lateSet.has(index)) {
|
|
this.lateSet.delete(index);
|
|
} else {
|
|
this.selectedSet.add(index);
|
|
}
|
|
this.synced = false;
|
|
|
|
// 如果启用了自动保存，状态改变时自动上传
|
|
if (this.autoSave) {
|
|
this.uploadData();
|
|
}
|
|
},
|
|
cleanstudentslist()
|
|
{
|
|
this.selectedSet.clear();
|
|
this.lateSet.clear();
|
|
this.synced = false;
|
|
|
|
// 如果启用了自动保存，清空后自动上传
|
|
if (this.autoSave) {
|
|
this.uploadData();
|
|
}
|
|
},
|
|
zoom(direction) {
|
|
const step = 2;
|
|
if (direction === "up" && this.fontSize < 100) {
|
|
this.fontSize += step;
|
|
} else if (direction === "out" && this.fontSize > 16) {
|
|
this.fontSize -= step;
|
|
}
|
|
this.contentStyle = {
|
|
"font-size": `${this.fontSize}px`,
|
|
};
|
|
setSetting('font.size', this.fontSize);
|
|
},
|
|
|
|
updateBackendUrl() {
|
|
const domain = getSetting('server.domain');
|
|
const classNum = getSetting('server.classNumber');
|
|
|
|
if (domain && classNum) {
|
|
this.backurl = `${domain}/${classNum}`;
|
|
this.classNumber = classNum;
|
|
}
|
|
},
|
|
|
|
setupAutoRefresh() {
|
|
const autoRefresh = getSetting('refresh.auto');
|
|
const interval = getSetting('refresh.interval');
|
|
|
|
if (this.refreshInterval) {
|
|
clearInterval(this.refreshInterval);
|
|
}
|
|
|
|
if (autoRefresh) {
|
|
this.refreshInterval = setInterval(() => {
|
|
this.downloadData();
|
|
}, interval * 1000);
|
|
}
|
|
},
|
|
|
|
updateSettings() {
|
|
// 更新字体大小
|
|
this.fontSize = getSetting('font.size');
|
|
this.contentStyle = { "font-size": `${this.fontSize}px` };
|
|
|
|
// 更新自动刷新
|
|
this.setupAutoRefresh();
|
|
|
|
// 更新服务器设置
|
|
this.updateBackendUrl();
|
|
},
|
|
|
|
handleDateSelect(newDate) {
|
|
if (newDate) {
|
|
// 使用本地时区处理日期，避免时区偏移
|
|
const date = new Date(newDate);
|
|
const year = date.getFullYear();
|
|
const month = String(date.getMonth() + 1).padStart(2, '0');
|
|
const day = String(date.getDate()).padStart(2, '0');
|
|
const formattedDate = `${year}-${month}-${day}`;
|
|
|
|
this.dateString = formattedDate;
|
|
this.$router.push(`/?date=${formattedDate}`);
|
|
this.downloadData();
|
|
}
|
|
},
|
|
|
|
optimizeGridLayout(items) {
|
|
// 首先按内容长度和科目顺序排序
|
|
const sortedItems = items.sort((a, b) => {
|
|
// 有内容的排在前面
|
|
if (a.content && !b.content) return -1;
|
|
if (!a.content && b.content) return 1;
|
|
|
|
// 内容较长的优先
|
|
if (a.content && b.content) {
|
|
const lengthDiff = b.rowSpan - a.rowSpan;
|
|
if (lengthDiff !== 0) return lengthDiff;
|
|
}
|
|
|
|
// 最后按科目顺序
|
|
return a.order - b.order;
|
|
});
|
|
|
|
// 计算每列的当前高度
|
|
const columnHeights = [0, 0, 0];
|
|
const columnItems = [[], [], []];
|
|
|
|
// 分配项目到最短的列
|
|
sortedItems.forEach(item => {
|
|
const shortestColumn = columnHeights.indexOf(Math.min(...columnHeights));
|
|
columnHeights[shortestColumn] += item.rowSpan;
|
|
columnItems[shortestColumn].push(item);
|
|
});
|
|
|
|
// 将所有列的项目合并，并设置显示顺序
|
|
return columnItems.flat().map((item, index) => ({
|
|
...item,
|
|
order: index
|
|
}));
|
|
},
|
|
|
|
fixedGridLayout(items) {
|
|
// 定义每行的科目顺序
|
|
const rowSubjects = [
|
|
["语文", "数学", "英语"],
|
|
["物理", "化学", "生物"],
|
|
["政治", "历史", "地理", "其他"]
|
|
];
|
|
|
|
// 按照固定布局排序
|
|
return items.sort((a, b) => {
|
|
// 找出科目所在的行号
|
|
const getRowIndex = (subject) => {
|
|
for (let i = 0; i < rowSubjects.length; i++) {
|
|
if (rowSubjects[i].includes(subject)) {
|
|
return i;
|
|
}
|
|
}
|
|
return rowSubjects.length; // 其他科目放最后
|
|
};
|
|
|
|
// 获取科目在行内的位置
|
|
const getColumnIndex = (subject) => {
|
|
for (const row of rowSubjects) {
|
|
const index = row.indexOf(subject);
|
|
if (index !== -1) return index;
|
|
}
|
|
return 999; // 未知科目放最后
|
|
};
|
|
|
|
const rowA = getRowIndex(a.key);
|
|
const rowB = getRowIndex(b.key);
|
|
|
|
if (rowA !== rowB) {
|
|
return rowA - rowB;
|
|
}
|
|
|
|
// 同一行内按照预定义顺序排序
|
|
const colA = getColumnIndex(a.key);
|
|
const colB = getColumnIndex(b.key);
|
|
return colA - colB;
|
|
}).map((item, index) => ({
|
|
...item,
|
|
order: index,
|
|
// 固定布局时每个卡片占用相同的行高
|
|
rowSpan: item.content ? 2 : 1
|
|
}));
|
|
},
|
|
|
|
setAllPresent() {
|
|
this.selectedSet.clear();
|
|
this.lateSet.clear();
|
|
},
|
|
|
|
setAllAbsent() {
|
|
this.currentTimeSlotStudents.forEach((_, index) => {
|
|
this.setAbsent(index);
|
|
});
|
|
},
|
|
|
|
setAllLate() {
|
|
this.currentTimeSlotStudents.forEach((_, index) => {
|
|
this.setLate(index);
|
|
});
|
|
},
|
|
|
|
isPresent(index) {
|
|
return !this.selectedSet.has(index) && !this.lateSet.has(index);
|
|
},
|
|
|
|
isAbsent(index) {
|
|
return this.selectedSet.has(index);
|
|
},
|
|
|
|
isLate(index) {
|
|
return this.lateSet.has(index);
|
|
},
|
|
|
|
setPresent(index) {
|
|
this.selectedSet.delete(index);
|
|
this.lateSet.delete(index);
|
|
},
|
|
|
|
setAbsent(index) {
|
|
this.selectedSet.add(index);
|
|
this.lateSet.delete(index);
|
|
},
|
|
|
|
setLate(index) {
|
|
this.lateSet.add(index);
|
|
this.selectedSet.delete(index);
|
|
},
|
|
|
|
async saveAttendance() {
|
|
try {
|
|
await this.uploadData();
|
|
this.attendanceDialog = false;
|
|
} catch (error) {
|
|
console.error('保存出勤状态失败:', error);
|
|
this.showError('保存失败，请重试');
|
|
}
|
|
},
|
|
|
|
async downloadData() {
|
|
if (this.downloadLoading) return;
|
|
|
|
try {
|
|
this.downloadLoading = true;
|
|
await this.downloadDataDirectly();
|
|
} catch (error) {
|
|
console.error('下载数据失败:', error);
|
|
this.showError('下载数据失败，请重试');
|
|
} finally {
|
|
this.downloadLoading = false;
|
|
}
|
|
},
|
|
},
|
|
|
|
watch: {
|
|
homeworkData: {
|
|
handler() {
|
|
this.$nextTick(() => {
|
|
if (this.$refs.waterfall) {
|
|
this.$refs.waterfall.reflow();
|
|
}
|
|
});
|
|
},
|
|
deep: true
|
|
},
|
|
// 监听窗口大小变化
|
|
'$vuetify.display.width': {
|
|
handler() {
|
|
this.$nextTick(() => {
|
|
if (this.$refs.gridContainer) {
|
|
// 触发重新布局
|
|
this.optimizeGridLayout(this.sortedItems);
|
|
}
|
|
});
|
|
}
|
|
},
|
|
selectedTimeSlot() {
|
|
this.updateCurrentTimeSlotStudents();
|
|
}
|
|
}
|
|
};
|
|
</script>
|