【开源解析】基于HTML5的智能会议室预约系统开发全攻略：从零构建企业级管理平台

🚀 【开源解析】基于HTML5的智能会议室预约系统开发全攻略：从零构建企业级管理平台

在这里插入图片描述
请添加图片描述

🌈 个人主页：创客白泽 - CSDN博客
💡 热爱不止于代码，热情源自每一个灵感闪现的夜晚。愿以开源之火，点亮前行之路。
🐋 希望大家多多支持，我们一起进步！
👍 🎉如果文章对你有帮助的话，欢迎点赞 👍🏻 评论 💬 收藏 ⭐️ 加关注+💗分享给更多人哦

请添加图片描述
在这里插入图片描述

📌 概述：现代办公场景的会议管理痛点与解决方案

在当今快节奏的企业环境中，会议室资源的高效管理已成为提升组织效能的关键环节。传统纸质登记或简单电子表格的预约方式存在诸多弊端：

资源冲突频发 - 约40%的企业每周都会出现会议室双重预订
利用率低下 - 平均会议室使用率不足60%，存在大量闲置时段
管理成本高 - 行政人员需花费15%工作时间处理预约协调

本文介绍的智能会议室预约系统采用纯前端技术栈（HTML5+CSS3+JavaScript），具备以下突破性优势：

✅ 可视化时间选择 - 直观展示可用时段，避免冲突
✅ 实时状态监控 - 大屏展示当前会议进度和下一会议信息
✅ 多维度管理 - 支持会议室管理、预约审核、数据导出
✅ 响应式设计 - 完美适配PC、平板和移动设备

系统架构图如下：

🛠️ 核心功能详解

1. 智能预约系统

三维度冲突检测（会议室/时间/人员）
拖拽式时间选择（支持半小时粒度）
7天预约日历（色块化显示繁忙度）
自动邮件提醒（会议前15分钟触发）

2. 状态展示大屏

在这里插入图片描述

3. 管理后台

多条件筛选（日期/会议室/状态）
批量操作（导出/删除/修改）
数据可视化（使用率统计图表

3.1 会议室管理界面

在这里插入图片描述

3.2 预约管理页面

在这里插入图片描述

🎨 界面展示与交互逻辑

动态时间选择器

function generateTimeOptions() {const times = ['08:00','08:30','09:00'...];times.forEach(time => {const isBooked = checkBookingConflict(time);// 生成带状态的DOM元素});
}

实时冲突检测算法

function checkConflict(newStart, newEnd, existing) {return existing.some(item => newStart < item.end && newEnd > item.start);
}

状态大屏动效实现

CSS3动画：会议进度条使用渐变背景+宽度过渡
实时时钟：利用Canvas绘制动态表盘
数据更新：WebSocket实现秒级同步

🔧 部署与使用指南

开发环境搭建

安装VS Code及相关插件

Extensions:
- Live Server
- Prettier
- ESLint

项目目录结构

/meeting-room-booking
├── index.html        # 主界面
├── style.css         # 样式文件
├── script.js         # 业务逻辑
└── assets/           # 静态资源

关键配置项

配置项	路径	说明
工作时间	script.js L120	修改times数组调整
管理员密码	script.js L980	建议生产环境修改
数据存储	localStorage	可替换为IndexedDB

🧠 深度代码解析

1. 数据持久化方案

// 使用localStorage存储预约数据
function saveReservations() {localStorage.setItem('meetingReservations', JSON.stringify(reservations));
}// 支持导出为Excel
function exportToExcel() {const ws = XLSX.utils.json_to_sheet(reservations);XLSX.writeFile(ws, "预约记录.xlsx");
}

2. 响应式布局实现

/* 移动端适配 */
@media (max-width: 768px) {.reservation-item {grid-template-columns: 1fr;}.reservation-item > div::before {content: attr(data-label);font-weight: bold;}
}

3. 状态管理机制

在这里插入图片描述

💾 源码下载与二次开发

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>会议室预约系统</title><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"><style>:root {--primary: #1a2a6c;--secondary: #b21f1f;--accent: #38a169;--light: #f8f9fa;--dark: #2c3e50;--gray: #6c757d;--light-gray: #e9ecef;}* {margin: 0;padding: 0;box-sizing: border-box;font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;}body {background: linear-gradient(135deg, #1a2a6c, #b21f1f, #1a2a6c);color: #333;min-height: 100vh;padding: 20px;}.container {max-width: 1200px;margin: 0 auto;}header {text-align: center;padding: 20px 0;color: white;margin-bottom: 30px;}header h1 {font-size: 2.5rem;margin-bottom: 10px;text-shadow: 0 2px 4px rgba(0,0,0,0.3);}header p {font-size: 1.2rem;opacity: 0.9;}.app-container {display: grid;grid-template-columns: 1fr 1fr;gap: 25px;}@media (max-width: 900px) {.app-container {grid-template-columns: 1fr;}}.card {background: rgba(255, 255, 255, 0.92);border-radius: 15px;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);padding: 25px;transition: transform 0.3s ease;}.card:hover {transform: translateY(-5px);}.card-title {display: flex;align-items: center;margin-bottom: 20px;padding-bottom: 15px;border-bottom: 2px solid #e0e0e0;color: var(--dark);}.card-title i {margin-right: 12px;font-size: 1.8rem;color: var(--primary);}.form-group {margin-bottom: 20px;}label {display: block;margin-bottom: 8px;font-weight: 600;color: var(--dark);}input, select {width: 100%;padding: 14px;border: 2px solid #ddd;border-radius: 8px;font-size: 1rem;transition: border-color 0.3s;}input:focus, select:focus {border-color: var(--primary);outline: none;box-shadow: 0 0 0 3px rgba(26, 42, 108, 0.2);}.time-container {display: grid;grid-template-columns: 1fr 1fr;gap: 15px;margin-top: 10px;}.time-input-group {position: relative;}.time-input-group i {position: absolute;right: 15px;top: 50%;transform: translateY(-50%);color: var(--gray);}.btn {display: block;width: 100%;padding: 15px;background: var(--primary);color: white;border: none;border-radius: 8px;font-size: 1.1rem;font-weight: 600;cursor: pointer;transition: background 0.3s;margin-top: 20px;}.btn:hover {background: #142255;}.btn:active {transform: scale(0.98);}.display-screen {background: var(--primary);color: white;border-radius: 15px;padding: 30px;min-height: 500px;display: flex;flex-direction: column;}.current-room {font-size: 2.2rem;font-weight: bold;text-align: center;margin-bottom: 30px;text-shadow: 0 2px 4px rgba(0,0,0,0.3);}.current-time {font-size: 5rem;text-align: center;font-weight: 700;margin: 20px 0;letter-spacing: 2px;text-shadow: 0 4px 6px rgba(0,0,0,0.3);}.current-date {font-size: 1.5rem;text-align: center;margin-bottom: 40px;opacity: 0.9;}.current-event {background: rgba(255, 255, 255, 0.15);border-radius: 12px;padding: 25px;margin-bottom: 25px;}.next-event {background: rgba(255, 255, 255, 0.1);border-radius: 12px;padding: 20px;}.event-title {font-size: 1.8rem;margin-bottom: 15px;display: flex;align-items: center;}.event-title i {margin-right: 10px;}.event-details {display: flex;justify-content: space-between;font-size: 1.2rem;flex-wrap: wrap;}.event-time {width: 100%;margin-bottom: 10px;font-weight: 500;}.no-event {text-align: center;font-size: 1.3rem;opacity: 0.8;padding: 20px;}.reservations-list {margin-top: 30px;background: rgba(255, 255, 255, 0.92);border-radius: 15px;padding: 25px;}.reservations-list h3 {margin-bottom: 20px;color: var(--dark);padding-bottom: 15px;border-bottom: 2px solid #e0e0e0;display: flex;align-items: center;}.reservations-list h3 i {margin-right: 10px;color: var(--primary);}.reservation-item {padding: 15px;border-bottom: 1px solid #eee;display: grid;grid-template-columns: 1.5fr 3fr 1.5fr 1.5fr;align-items: center;}.reservation-item:last-child {border-bottom: none;}.reservation-item:hover {background: #f9f9f9;}.reservation-time {font-weight: bold;color: var(--primary);}.reservation-title {font-weight: 500;}.reservation-booker {text-align: right;font-style: italic;color: #666;}.status-indicator {height: 12px;width: 12px;border-radius: 50%;display: inline-block;margin-right: 8px;}.status-upcoming {background: var(--accent);}.status-current {background: #3182ce;}.status-past {background: #a0aec0;}.confirmation {background: var(--accent);color: white;padding: 20px;border-radius: 10px;margin-top: 20px;text-align: center;display: none;}.room-availability {background: #f8f9fa;border-radius: 8px;padding: 15px;margin-top: 15px;border-left: 4px solid var(--accent);}.availability-title {font-weight: 600;margin-bottom: 8px;color: var(--dark);}.availability-list {display: flex;flex-wrap: wrap;gap: 10px;}.availability-badge {background: #e2f0ea;color: var(--accent);padding: 5px 10px;border-radius: 20px;font-size: 0.9rem;display: flex;align-items: center;}.availability-badge i {margin-right: 5px;}footer {text-align: center;color: white;margin-top: 40px;padding: 20px;font-size: 0.9rem;opacity: 0.8;}.time-error {color: #e53e3e;font-size: 0.9rem;margin-top: 5px;display: none;}.room-info {display: flex;align-items: center;margin-top: 5px;font-size: 0.9rem;color: var(--gray);}.room-info i {margin-right: 5px;}.time-selector {display: flex;flex-direction: column;gap: 10px;max-height: 300px;overflow-y: auto;padding: 10px;border: 1px solid #ddd;border-radius: 8px;margin-top: 10px;}.time-option {padding: 10px;background: #f0f4f8;border-radius: 6px;text-align: center;cursor: pointer;transition: all 0.2s;border: 1px solid #cbd5e0;position: relative;}.time-option:hover {background: #e2e8f0;}.time-option.selected {background: var(--primary);color: white;border-color: var(--primary);}.time-option.booked {background: #e53e3e;color: white;border-color: #c53030;cursor: not-allowed;}.time-option.booked::after {content: "已预约";position: absolute;top: 0;right: 0;background: rgba(0,0,0,0.3);font-size: 0.7rem;padding: 2px 5px;border-radius: 0 6px 0 6px;}.time-picker-container {display: grid;grid-template-columns: 1fr 1fr;gap: 15px;}.time-picker {border: 1px solid #ddd;border-radius: 8px;padding: 10px;}.time-picker-title {text-align: center;font-weight: 600;margin-bottom: 10px;color: var(--dark);}.time-input-group {margin-bottom: 15px;}.conflict-error {background: #fee2e2;color: #b91c1c;padding: 15px;border-radius: 8px;margin-top: 15px;display: none;}.in-session {color: #38a169;font-size: 0.9rem;margin-left: 8px;font-weight: bold;display: inline-block;padding: 2px 8px;background: rgba(56, 161, 105, 0.15);border-radius: 4px;}.view-display {display: flex;justify-content: center;margin-top: 20px;}.view-display-btn {padding: 12px 25px;background: var(--accent);color: white;border: none;border-radius: 50px;font-weight: 600;cursor: pointer;transition: all 0.3s;display: flex;align-items: center;}.view-display-btn i {margin-right: 8px;}.view-display-btn:hover {background: #2d8555;transform: translateY(-2px);box-shadow: 0 5px 15px rgba(0,0,0,0.2);}/* 状态显示屏样式 */.status-display {width: 100%;max-width: 800px;background: rgba(0, 15, 46, 0.8);border-radius: 20px;box-shadow: 0 15px 50px rgba(0, 0, 0, 0.5);padding: 30px;margin: 50px auto;color: white;position: relative;overflow: hidden;display: none;}.status-display .header {text-align: center;margin-bottom: 30px;position: relative;}.status-display .header h1 {font-size: 2.8rem;margin-bottom: 10px;text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);letter-spacing: 2px;}.status-display .room-name {display: inline-block;background: rgba(255, 255, 255, 0.15);padding: 10px 25px;border-radius: 50px;margin-top: 15px;font-weight: 600;font-size: 1.4rem;backdrop-filter: blur(5px);border: 1px solid rgba(255, 255, 255, 0.1);}.status-display .time-display {text-align: center;margin: 30px 0;}.status-display .current-time {font-size: 5.5rem;font-weight: 800;letter-spacing: 3px;text-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);margin-bottom: 10px;font-variant-numeric: tabular-nums;}.status-display .current-date {font-size: 1.8rem;opacity: 0.9;margin-bottom: 40px;}.status-display .status-section {background: rgba(255, 255, 255, 0.1);border-radius: 15px;padding: 25px;margin-bottom: 25px;backdrop-filter: blur(5px);border: 1px solid rgba(255, 255, 255, 0.1);position: relative;overflow: hidden;}.status-display .status-section::before {content: "";position: absolute;top: 0;left: 0;width: 8px;height: 100%;background: linear-gradient(to bottom, #38a169, #1a2a6c);}.status-display .status-header {display: flex;align-items: center;margin-bottom: 20px;}.status-display .status-header i {font-size: 2rem;margin-right: 15px;width: 50px;height: 50px;background: rgba(56, 161, 105, 0.2);display: flex;align-items: center;justify-content: center;border-radius: 50%;}.status-display .status-title {font-size: 2rem;font-weight: 600;}.status-display .in-session {background: rgba(56, 161, 105, 0.3);color: #a0f0c0;padding: 5px 15px;border-radius: 20px;font-size: 1.2rem;margin-left: 15px;display: inline-flex;align-items: center;}.status-display .in-session i {font-size: 0.9rem;margin-right: 5px;}.status-display .event-details {display: grid;grid-template-columns: 1fr 1fr;gap: 20px;margin-top: 20px;}.status-display .detail-card {background: rgba(255, 255, 255, 0.08);border-radius: 12px;padding: 20px;}.status-display .detail-label {font-size: 1.1rem;opacity: 0.8;margin-bottom: 8px;display: flex;align-items: center;}.status-display .detail-label i {margin-right: 8px;font-size: 1.1rem;}.status-display .detail-value {font-size: 1.7rem;font-weight: 600;}.status-display .time-range {font-size: 2.2rem;font-weight: 700;text-align: center;margin: 15px 0;letter-spacing: 1px;font-variant-numeric: tabular-nums;}.status-display .progress-container {height: 8px;background: rgba(255, 255, 255, 0.1);border-radius: 10px;overflow: hidden;margin: 20px 0;}.status-display .progress-bar {height: 100%;background: linear-gradient(to right, #38a169, #2c7a4d);border-radius: 10px;}.status-display .next-event {background: rgba(255, 255, 255, 0.08);border-radius: 15px;padding: 25px;backdrop-filter: blur(5px);border: 1px solid rgba(255, 255, 255, 0.1);}.status-display .next-header {display: flex;align-items: center;margin-bottom: 20px;}.status-display .next-header i {font-size: 1.8rem;margin-right: 15px;width: 45px;height: 45px;background: rgba(26, 92, 169, 0.2);display: flex;align-items: center;justify-content: center;border-radius: 50%;}.status-display .next-title {font-size: 1.8rem;font-weight: 600;}.status-display .no-events {text-align: center;padding: 40px 20px;}.status-display .no-events i {font-size: 4rem;opacity: 0.3;margin-bottom: 20px;}.status-display .no-events p {font-size: 1.8rem;opacity: 0.7;}.status-display .footer {text-align: center;margin-top: 40px;padding-top: 20px;border-top: 1px solid rgba(255, 255, 255, 0.1);font-size: 1.1rem;opacity: 0.7;}/* 动画效果 */@keyframes pulse {0% { opacity: 0.7; }50% { opacity: 1; }100% { opacity: 0.7; }}.status-display .in-session {animation: pulse 2s infinite;}/* 响应式设计 */@media (max-width: 768px) {.status-display .header h1 {font-size: 2.2rem;}.status-display .current-time {font-size: 4rem;}.status-display .current-date {font-size: 1.5rem;}.status-display .event-details {grid-template-columns: 1fr;}.status-display .time-range {font-size: 1.8rem;}.status-display .status-title, .next-title {font-size: 1.6rem;}}@media (max-width: 480px) {.status-display {padding: 20px;}.status-display .header h1 {font-size: 1.8rem;}.status-display .current-time {font-size: 3rem;}.status-display .room-name {font-size: 1.2rem;padding: 8px 20px;}}.switch-container {display: flex;justify-content: center;gap: 15px;margin-bottom: 30px;flex-wrap: wrap;}.switch-btn {padding: 12px 20px;background: rgba(255, 255, 255, 0.1);color: white;border: 2px solid rgba(255, 255, 255, 0.2);border-radius: 25px;cursor: pointer;transition: all 0.3s ease;font-size: 1rem;font-weight: 600;backdrop-filter: blur(10px);}.switch-btn:hover {background: rgba(255, 255, 255, 0.2);border-color: rgba(255, 255, 255, 0.4);transform: translateY(-2px);}.switch-btn i {margin-right: 8px;}/* 预约管理页面样式 */.reservation-management {display: none;background: rgba(255, 255, 255, 0.92);border-radius: 15px;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);padding: 25px;margin-bottom: 30px;}.reservation-management-header {display: flex;justify-content: space-between;align-items: center;margin-bottom: 25px;flex-wrap: wrap;gap: 15px;}.reservation-management-title {display: flex;align-items: center;color: var(--dark);}.reservation-management-title i {margin-right: 12px;font-size: 1.8rem;color: var(--primary);}.reservation-management-title h2 {font-size: 1.8rem;margin: 0;}.reservation-filters {display: flex;gap: 15px;align-items: center;flex-wrap: wrap;}.filter-select, .search-input {padding: 10px 15px;border: 2px solid #ddd;border-radius: 8px;font-size: 0.9rem;background: white;transition: border-color 0.3s;}.filter-select:focus, .search-input:focus {border-color: var(--primary);outline: none;box-shadow: 0 0 0 3px rgba(26, 42, 108, 0.1);}.search-input {min-width: 200px;}.reservation-stats {display: grid;grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));gap: 20px;margin-bottom: 25px;}.stat-card {background: linear-gradient(135deg, var(--primary), var(--secondary));color: white;padding: 20px;border-radius: 12px;text-align: center;box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);}.stat-number {font-size: 2rem;font-weight: bold;margin-bottom: 5px;}.stat-label {font-size: 0.9rem;opacity: 0.9;}.reservation-list {background: white;border-radius: 12px;overflow: hidden;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);}.reservation-item {display: grid;grid-template-columns: 1fr 1fr 1fr 2fr 1fr 1fr 1fr;gap: 15px;padding: 15px 20px;align-items: center;border-bottom: 1px solid #eee;transition: background-color 0.3s;}.reservation-item:hover {background-color: #f8f9fa;}.reservation-item-header {background: var(--primary);color: white;font-weight: 600;border-bottom: none;}.reservation-item-header:hover {background: var(--primary);}.reservation-item:last-child {border-bottom: none;}.reservation-status {padding: 4px 12px;border-radius: 20px;font-size: 0.8rem;font-weight: 600;text-align: center;}.status-upcoming {background: #e3f2fd;color: #1976d2;}.status-current {background: #e8f5e8;color: #388e3c;}.status-past {background: #f5f5f5;color: #757575;}.reservation-actions {display: flex;gap: 8px;}.action-btn {padding: 6px 12px;border: none;border-radius: 6px;cursor: pointer;font-size: 0.8rem;font-weight: 600;transition: all 0.3s;}.btn-edit {background: #2196f3;color: white;}.btn-edit:hover {background: #1976d2;}.btn-delete {background: #f44336;color: white;}.btn-delete:hover {background: #d32f2f;}.no-reservations {text-align: center;padding: 60px 20px;color: var(--gray);}.no-reservations i {font-size: 3rem;margin-bottom: 15px;opacity: 0.5;}.no-reservations p {font-size: 1.1rem;}@media (max-width: 768px) {.reservation-item {grid-template-columns: 1fr;gap: 8px;padding: 15px;}.reservation-item-header {display: none;}.reservation-item > div {display: flex;justify-content: space-between;align-items: center;}.reservation-item > div::before {content: attr(data-label);font-weight: 600;color: var(--gray);}.reservation-filters {flex-direction: column;align-items: stretch;}.filter-select, .search-input {width: 100%;}}/* 会议室管理页面样式 */.room-management {background: rgba(255, 255, 255, 0.92);border-radius: 15px;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);padding: 25px;display: none;margin-top: 25px;}.room-management-header {display: flex;justify-content: space-between;align-items: center;margin-bottom: 25px;padding-bottom: 15px;border-bottom: 2px solid #e0e0e0;}.room-management-title {display: flex;align-items: center;color: var(--dark);}.room-management-title i {margin-right: 12px;font-size: 1.8rem;color: var(--primary);}.room-list {margin-bottom: 30px;max-height: 500px;overflow-y: auto;}.room-item {display: grid;grid-template-columns: 1fr 80px 1fr 80px 120px;padding: 15px;border-bottom: 1px solid #eee;align-items: center;}.room-item-header {font-weight: 700;background: var(--light-gray);border-radius: 8px;}.room-item:hover {background: #f9f9f9;}.room-actions {display: flex;gap: 10px;}.room-action-btn {display: inline-flex;align-items: center;gap: 6px;padding: 6px 16px;border-radius: 8px;cursor: pointer;font-weight: 500;font-size: 1rem;border: none;white-space: nowrap;transition: background 0.2s, box-shadow 0.2s;box-shadow: 0 2px 6px rgba(0,0,0,0.04);}.edit-room-btn {background: #2196f3;color: #fff;}.edit-room-btn:hover {background: #1769aa;}.delete-room-btn {background: #f44336;color: #fff;}.delete-room-btn:hover {background: #b71c1c;}.room-action-btn:hover {opacity: 0.9;transform: translateY(-2px);}.room-form-container {background: rgba(240, 244, 248, 0.8);border-radius: 12px;padding: 25px;border-left: 4px solid var(--accent);}.form-title {margin-bottom: 20px;display: flex;align-items: center;color: var(--dark);}.form-title i {margin-right: 10px;color: var(--primary);}.form-grid {display: grid;grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));gap: 20px;}.form-actions {display: flex;gap: 15px;margin-top: 20px;}.btn-secondary {background: var(--gray);}.btn-secondary:hover {background: #5a6268;}.no-rooms {text-align: center;padding: 40px 20px;color: var(--gray);font-size: 1.1rem;}.no-rooms i {font-size: 3rem;margin-bottom: 15px;opacity: 0.5;}.equipment-list {display: flex;flex-wrap: wrap;gap: 8px;margin-top: 8px;}.equipment-tag {background: #e2f0ea;color: var(--accent);padding: 4px 10px;border-radius: 20px;font-size: 0.85rem;display: inline-flex;align-items: center;}.equipment-tag i {margin-right: 5px;font-size: 0.8rem;}#addRoomBtn {min-width: 120px;width: auto;padding-left: 24px;padding-right: 24px;display: inline-block;margin-left: auto;margin-right: 0;}@media (max-width: 768px) {.room-item {grid-template-columns: 1fr;gap: 8px;padding: 15px;}.room-item-header {display: none;}.room-item > div {display: flex;justify-content: space-between;align-items: center;}.room-item > div::before {content: attr(data-label);font-weight: 600;color: var(--gray);}.room-management-header {flex-direction: column;align-items: stretch;gap: 15px;}#addRoomBtn {margin-left: 0;width: 100%;}}#reservationsContainer {margin-top: 10px;}.today-reservation-row {display: grid;grid-template-columns: 140px 2fr 120px 100px;align-items: center;padding: 10px 0;border-bottom: 1px solid #f0f0f0;background: transparent;font-size: 1.05rem;}.today-reservation-row:last-child {border-bottom: none;}.today-reservation-time {display: flex;align-items: center;font-weight: bold;color: #222;gap: 8px;justify-content: center;}.dot {display: inline-block;width: 12px;height: 12px;border-radius: 50%;margin-right: 6px;}.status-ongoing {background: #38a169; /* 绿色 */}.status-upcoming {background: #e53e3e; /* 红色 */}.status-ended {background: #bdbdbd; /* 灰色 */}.today-reservation-title {color: #222;text-align: center;}.today-reservation-room,.today-reservation-booker {text-align: center;/* 可选：让内容稍微离左边远一点 */padding-left: 8px;}/* 7天预约状态日历样式 */.calendar-container {background: rgba(255, 255, 255, 0.1);border-radius: 12px;padding: 20px;margin-bottom: 25px;}.calendar-title {font-size: 1.3rem;font-weight: 600;text-align: center;margin-bottom: 15px;color: #f6c343;}.calendar-grid {display: grid;grid-template-columns: repeat(7, 1fr);gap: 8px;}.calendar-day {text-align: center;padding: 8px 4px;border-radius: 8px;background: rgba(255, 255, 255, 0.05);position: relative;}.calendar-date {font-size: 0.9rem;font-weight: 600;margin-bottom: 4px;}.calendar-weekday {font-size: 0.75rem;opacity: 0.8;margin-bottom: 6px;}.calendar-status {width: 12px;height: 12px;border-radius: 50%;margin: 0 auto;position: relative;}.status-available {background: #38a169;}.status-partial {background: #f6c343;}.status-booked {background: #e53e3e;}.status-today {background: #3182ce;}.calendar-day.today {background: rgba(49, 130, 206, 0.2);border: 1px solid rgba(49, 130, 206, 0.4);}.calendar-day:hover {background: rgba(255, 255, 255, 0.1);transform: translateY(-1px);transition: all 0.2s ease;}</style><script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js" defer></script>
</head>
<body><div class="container"><div style="position: absolute; top: 20px; right: 30px; z-index: 999;"><input type="file" id="bgUpload" accept="image/*" style="display:none;"><button id="bgUploadBtn" class="btn btn-secondary" style="padding:4px 12px;font-size:0.95rem;">上传背景</button><button id="bgResetBtn" class="btn btn-secondary" style="padding:4px 12px;font-size:0.95rem;">恢复默认</button></div><div class="switch-container"><button id="showBookingBtn" class="switch-btn"><i class="fas fa-calendar-plus"></i> 预约系统</button><button id="showDisplayBtn" class="switch-btn"><i class="fas fa-tv"></i> 状态显示屏</button><button id="showManagementBtn" class="switch-btn"><i class="fas fa-cog"></i> 会议室管理</button><button id="showReservationManagementBtn" class="switch-btn"><i class="fas fa-list-alt"></i> 预约管理</button></div><div id="bookingSystem"><header><h1><i class="fas fa-calendar-alt"></i> 会议室预约系统</h1><p>轻松预约 · 高效协作 · 智能管理</p></header><div class="app-container"><div class="card"><div class="card-title"><i class="fas fa-book"></i><h2>会议室预约</h2></div><form id="bookingForm"><div class="form-group"><label for="meetingRoom">选择会议室</label><select id="meetingRoom" required><option value="">-- 请选择会议室 --</option><option value="room1">会议室 1 (创新厅, 8人)</option><option value="room2">会议室 2 (协作厅, 12人)</option><option value="room3">会议室 3 (决策厅, 6人)</option><option value="room4">会议室 4 (创意空间, 10人)</option></select></div><div class="form-group"><label for="bookingDate">选择日期</label><input type="date" id="bookingDate" required></div><div class="form-group"><label>选择时间段 (整点/半点)</label><div class="time-picker-container"><div class="time-picker"><div class="time-picker-title">开始时间</div><div class="time-selector" id="startTimeSelector"><!-- 开始时间选项将在这里生成 --></div></div><div class="time-picker"><div class="time-picker-title">结束时间</div><div class="time-selector" id="endTimeSelector"><!-- 结束时间选项将在这里生成 --></div></div></div><div class="time-input-group"><div class="time-error" id="timeError"><i class="fas fa-exclamation-circle"></i> 结束时间必须晚于开始时间</div><div id="selectedTimeDisplay">已选择: <span id="startTimeDisplay">--:--</span> 至 <span id="endTimeDisplay">--:--</span></div></div></div><div class="form-group"><label for="userName">预约人</label><input type="text" id="userName" placeholder="请输入您的姓名" required></div><div class="form-group"><label for="meetingTitle">会议主题</label><input type="text" id="meetingTitle" placeholder="请输入会议主题" required></div><div class="conflict-error" id="conflictError"><i class="fas fa-exclamation-triangle"></i> <span id="conflictMessage">该时间段与已有预约冲突，请选择其他时间</span></div><div class="room-availability"><div class="availability-title"><i class="fas fa-info-circle"></i> 会议室可用时间段</div><div class="availability-list" id="availabilityList"><!-- 可用时间段将动态生成 --></div></div><button type="submit" class="btn">提交预约</button><div class="confirmation" id="confirmation"><i class="fas fa-check-circle"></i> 预约成功！您的会议已安排。</div></form></div><div class="display-screen"><div class="current-room">会议室使用情况</div><div class="current-time" id="currentTime">10:30:45</div><div class="current-date" id="currentDate">2023年6月15日 星期四</div><!-- 新增7天预约状态日历 --><div class="calendar-container"><div class="calendar-title">未来7天预约状态</div><div class="calendar-grid" id="calendarGrid"><!-- 日历内容将动态生成 --></div></div><div class="current-event" id="currentEvent"><div class="event-title"><i class="fas fa-microphone-alt"></i> <span id="currentEventTitle">产品需求评审会议</span></div><div class="event-details"><div class="event-time" id="currentEventTime">10:00 - 11:30</div><div id="currentEventBooker">预约人: 张经理</div><div id="currentEventRoom">会议室: 创新厅</div></div></div><div class="next-event" id="nextEvent"><div class="event-title"><i class="fas fa-clock"></i> <span>下一个会议</span></div><div class="event-details"><div class="event-time" id="nextEventTime">11:30 - 12:30</div><div id="nextEventTitle">团队周例会</div><div id="nextEventBooker">预约人: 王总监</div></div></div></div></div><div class="reservations-list"><h3><i class="fas fa-list"></i> 今日会议安排</h3><div id="reservationsContainer"><!-- 预约列表将动态生成 --></div></div><div class="view-display"><button id="viewDisplayBtn" class="view-display-btn"><i class="fas fa-external-link-alt"></i> 查看会议室状态显示屏</button></div></div><div id="statusDisplay" class="status-display"><div class="header"><h1><i class="fas fa-calendar-alt"></i> 会议室状态显示屏</h1><p>实时会议状态 · 专业会议管理</p></div><div class="time-display"><div class="current-time" id="displayCurrentTime">14:25:38</div><div class="current-date" id="displayCurrentDate">2023年6月20日 星期二</div></div><div id="allRoomsStatus"></div><div class="footer"><p>会议室预约系统 &copy; 2025 | 状态实时更新</p></div></div><!-- 新增会议室管理页面 --><div id="roomManagement" class="room-management"><div class="room-management-header"><div class="room-management-title"><i class="fas fa-door-open"></i><h2>会议室管理</h2></div><button id="addRoomBtn" class="btn"><i class="fas fa-plus-circle"></i> 添加会议室</button></div><div class="room-list"><div class="room-item room-item-header"><div>会议室名称</div><div>容量</div><div>设备</div><div>状态</div><div>操作</div></div><div id="roomsContainer"><!-- 会议室列表将动态生成 --></div></div><div id="roomFormContainer" class="room-form-container" style="display: none;"><div class="form-title"><i class="fas fa-edit"></i><h3 id="formHeader">添加会议室</h3></div><form id="roomForm"><input type="hidden" id="roomId"><div class="form-grid"><div class="form-group"><label for="roomName">会议室名称 *</label><input type="text" id="roomName" placeholder="例如：创新厅" required></div><div class="form-group"><label for="roomCapacity">最大容量 *</label><input type="number" id="roomCapacity" min="1" placeholder="例如：10" required></div><div class="form-group"><label for="roomDescription">描述</label><input type="text" id="roomDescription" placeholder="会议室简要描述"></div><div class="form-group"><label for="roomEquipment">设备（用逗号分隔）</label><input type="text" id="roomEquipment" placeholder="例如：投影仪, 白板, 电话"></div><div class="form-group"><label for="roomStatus">状态</label><select id="roomStatus"><option value="available">可用</option><option value="maintenance">维护中</option><option value="unavailable">不可用</option></select></div></div><div class="form-actions"><button type="submit" class="btn">保存会议室</button><button type="button" id="cancelRoomForm" class="btn btn-secondary">取消</button></div></form></div></div><!-- 新增预约管理页面 --><div id="reservationManagement" class="reservation-management"><div class="reservation-management-header"><div class="reservation-management-title"><i class="fas fa-list-alt"></i><h2>预约管理</h2></div><div class="reservation-filters"><select id="filterRoom" class="filter-select"><option value="">所有会议室</option></select><select id="filterDate" class="filter-select"><option value="">所有日期</option><option value="today">今天</option><option value="tomorrow">明天</option><option value="week">本周</option></select><input type="text" id="searchBooker" class="search-input" placeholder="搜索预约人..."></div><button id="exportReservationsBtn" class="btn btn-secondary" style="height:32px;align-self:center;margin-left:10px;padding:4px 16px;font-size:0.95rem;line-height:1.2;min-width:unset;width:auto;"><i class="fas fa-file-export"></i> 导出表格</button></div><div class="reservation-stats"><div class="stat-card"><div class="stat-number" id="totalReservations">0</div><div class="stat-label">总预约数</div></div><div class="stat-card"><div class="stat-number" id="todayReservations">0</div><div class="stat-label">今日预约</div></div><div class="stat-card"><div class="stat-number" id="upcomingReservations">0</div><div class="stat-label">即将到来</div></div></div><div class="reservation-list"><div class="reservation-item reservation-item-header"><div>会议室</div><div>日期</div><div>时间</div><div>会议主题</div><div>预约人</div><div>状态</div><div>操作</div></div><div id="reservationsManagementContainer"><!-- 预约列表将动态生成 --></div></div><div class="no-reservations" id="noReservations" style="display: none;"><i class="fas fa-calendar-times"></i><p>暂无预约记录</p></div></div><footer><p>会议室预约系统 &copy; 2025 | 技术支持: 创客白泽 | 版本: 5.0.0</p></footer></div><script>// 全局存储预约数据let reservations = JSON.parse(localStorage.getItem('meetingReservations')) || [];// 新增：限制预约日期只能为7天内(function setBookingDateRange() {const today = new Date();const dateInput = document.getElementById('bookingDate');dateInput.valueAsDate = today;dateInput.min = today.toISOString().split('T')[0];const maxDate = new Date();maxDate.setDate(today.getDate() + 7);dateInput.max = maxDate.toISOString().split('T')[0];})();// 会议室数据结构let meetingRooms = JSON.parse(localStorage.getItem('meetingRooms')) || [{id: 'room1',name: '创新厅',capacity: 8,description: '适合小型创意会议',equipment: '投影仪, 白板',status: 'available'},{id: 'room2',name: '协作厅',capacity: 12,description: '适合团队协作会议',equipment: '电视, 视频会议设备',status: 'available'},{id: 'room3',name: '决策厅',capacity: 6,description: '适合高层决策会议',equipment: '视频会议系统, 智能白板',status: 'available'},{id: 'room4',name: '创意空间',capacity: 10,description: '灵活多变的创意空间',equipment: '投影仪, 移动白板',status: 'available'}];// 保存预约数据到localStoragefunction saveReservations() {localStorage.setItem('meetingReservations', JSON.stringify(reservations));}// 保存会议室数据function saveRooms() {localStorage.setItem('meetingRooms', JSON.stringify(meetingRooms));generateRoomOptions();displayRooms();}// 生成会议室下拉选项function generateRoomOptions() {const roomSelect = document.getElementById('meetingRoom');roomSelect.innerHTML = '<option value="">-- 请选择会议室 --</option>';meetingRooms.forEach(room => {if (room.status === 'available') {const option = document.createElement('option');option.value = room.id;option.textContent = `${room.name} (${room.capacity}人)`;roomSelect.appendChild(option);}});}// 显示会议室列表function displayRooms() {const container = document.getElementById('roomsContainer');container.innerHTML = '';if (meetingRooms.length === 0) {container.innerHTML = `<div class="no-rooms"><i class="fas fa-door-closed"></i><p>暂无会议室信息，请添加会议室</p></div>`;return;}meetingRooms.forEach(room => {const roomElement = document.createElement('div');roomElement.className = 'room-item';// 状态标签let statusText = '';let statusClass = '';switch(room.status) {case 'available':statusText = '可用';statusClass = 'status-upcoming';break;case 'maintenance':statusText = '维护中';statusClass = 'status-past';break;case 'unavailable':statusText = '不可用';statusClass = 'status-current';break;}// 设备标签let equipmentTags = '';if (room.equipment) {const equipmentList = room.equipment.split(',').map(e => e.trim());equipmentTags = equipmentList.map(eq => `<div class="equipment-tag"><i class="fas fa-check"></i>${eq}</div>`).join('');}roomElement.innerHTML = `<div><strong>${room.name}</strong>${room.description ? `<div class="room-info">${room.description}</div>` : ''}</div><div>${room.capacity}人</div><div class="equipment-list">${equipmentTags || '无'}</div><div><span class="status-indicator ${statusClass}"></span>${statusText}</div><div class="room-actions"><button class="room-action-btn edit-room-btn" data-id="${room.id}"><i class="fas fa-edit"></i> 编辑</button><button class="room-action-btn delete-room-btn" data-id="${room.id}"><i class="fas fa-trash"></i> 删除</button></div>`;container.appendChild(roomElement);});// 添加编辑事件监听document.querySelectorAll('.edit-room-btn').forEach(btn => {btn.addEventListener('click', function() {const roomId = this.dataset.id;editRoom(roomId);});});// 添加删除事件监听document.querySelectorAll('.delete-room-btn').forEach(btn => {btn.addEventListener('click', function() {const roomId = this.dataset.id;deleteRoom(roomId);});});}// 编辑会议室function editRoom(roomId) {const room = meetingRooms.find(r => r.id === roomId);if (!room) return;document.getElementById('roomId').value = room.id;document.getElementById('roomName').value = room.name;document.getElementById('roomCapacity').value = room.capacity;document.getElementById('roomDescription').value = room.description || '';document.getElementById('roomEquipment').value = room.equipment || '';document.getElementById('roomStatus').value = room.status;document.getElementById('formHeader').textContent = '编辑会议室';document.getElementById('roomFormContainer').style.display = 'block';document.getElementById('addRoomBtn').style.display = 'none';// 滚动到表单document.getElementById('roomFormContainer').scrollIntoView({ behavior: 'smooth' });}// 删除会议室function deleteRoom(roomId) {if (confirm('确定要删除这个会议室吗？此操作不可恢复。')) {// 检查该会议室是否有预约const hasReservations = reservations.some(r => r.room === roomId);if (hasReservations) {alert('无法删除该会议室，因为存在相关的预约记录。请先删除相关预约后再试。');return;}meetingRooms = meetingRooms.filter(room => room.id !== roomId);saveRooms();alert('会议室已成功删除');}}// 获取当前会议室和日期下的预约function getReservationsForCurrentRoomAndDate() {const room = document.getElementById('meetingRoom').value;const date = document.getElementById('bookingDate').value;if (!room || !date) return [];return reservations.filter(res => res.room === room && res.date === date);}// 检查时间段是否冲突function checkTimeConflict(start, end, currentReservations) {for (const res of currentReservations) {// 时间冲突的条件：新会议开始时间 < 已有会议结束时间 且 新会议结束时间 > 已有会议开始时间if (start < res.end && end > res.start) {return res;}}return null;}// 生成整点/半点时间选项function generateTimeOptions() {const startContainer = document.getElementById('startTimeSelector');const endContainer = document.getElementById('endTimeSelector');startContainer.innerHTML = '';endContainer.innerHTML = '';const times = ['08:00', '08:30', '09:00', '09:30', '10:00', '10:30', '11:00', '11:30','12:00', '12:30', '13:00', '13:30','14:00', '14:30', '15:00', '15:30','16:00', '16:30', '17:00', '17:30','18:00'];const currentReservations = getReservationsForCurrentRoomAndDate();// 新增：判断是否为今天，过滤掉已过时间const bookingDate = document.getElementById('bookingDate').value;const todayStr = new Date().toISOString().split('T')[0];let nowMinutes = 0;if (bookingDate === todayStr) {const now = new Date();nowMinutes = now.getHours() * 60 + now.getMinutes();}// 生成开始时间选项times.forEach(time => {// 新增：如果为今天且时间已过，则不显示if (bookingDate === todayStr) {const [h, m] = time.split(':').map(Number);const tMinutes = h * 60 + m;if (tMinutes <= nowMinutes) return;}const option = document.createElement('div');option.className = 'time-option';option.textContent = time;option.dataset.time = time;// 检查该时间点是否已被预约const isBooked = currentReservations.some(res => {return time >= res.start && time < res.end;});if (isBooked) {option.classList.add('booked');option.title = '该时间段已被预订';}option.addEventListener('click', function() {if (!this.classList.contains('booked')) {document.querySelectorAll('#startTimeSelector .time-option').forEach(opt => {opt.classList.remove('selected');});this.classList.add('selected');document.getElementById('startTimeDisplay').textContent = this.dataset.time;validateTimeSelection();updateEndTimeOptions(this.dataset.time);updateAvailability();}});startContainer.appendChild(option);});// 生成结束时间选项（初始为空）document.getElementById('endTimeDisplay').textContent = '--:--';document.getElementById('conflictError').style.display = 'none';}// 更新结束时间选项function updateEndTimeOptions(startTime) {const endContainer = document.getElementById('endTimeSelector');endContainer.innerHTML = '';const times = ['08:00', '08:30', '09:00', '09:30', '10:00', '10:30', '11:00', '11:30','12:00', '12:30', '13:00', '13:30','14:00', '14:30', '15:00', '15:30','16:00', '16:30', '17:00', '17:30','18:00'];// 找到开始时间在数组中的位置const startIndex = times.indexOf(startTime);const currentReservations = getReservationsForCurrentRoomAndDate();// 新增：判断是否为今天，过滤掉已过时间const bookingDate = document.getElementById('bookingDate').value;const todayStr = new Date().toISOString().split('T')[0];let nowMinutes = 0;if (bookingDate === todayStr) {const now = new Date();nowMinutes = now.getHours() * 60 + now.getMinutes();}if (startIndex !== -1) {// 只显示在开始时间之后的选项const availableTimes = times.slice(startIndex + 1);availableTimes.forEach(time => {// 新增：如果为今天且时间已过，则不显示if (bookingDate === todayStr) {const [h, m] = time.split(':').map(Number);const tMinutes = h * 60 + m;if (tMinutes <= nowMinutes) return;}const option = document.createElement('div');option.className = 'time-option';option.textContent = time;option.dataset.time = time;// 检查时间段是否冲突const conflict = checkTimeConflict(startTime, time, currentReservations);if (conflict) {option.classList.add('booked');option.title = `该时间段与 "${conflict.title}" 会议冲突`;}option.addEventListener('click', function() {if (!this.classList.contains('booked')) {document.querySelectorAll('#endTimeSelector .time-option').forEach(opt => {opt.classList.remove('selected');});this.classList.add('selected');document.getElementById('endTimeDisplay').textContent = this.dataset.time;validateTimeSelection();document.getElementById('conflictError').style.display = 'none';}});endContainer.appendChild(option);});}}// 验证时间选择function validateTimeSelection() {const startTime = document.querySelector('#startTimeSelector .time-option.selected');const endTime = document.querySelector('#endTimeSelector .time-option.selected');const timeError = document.getElementById('timeError');if (startTime && endTime) {const startValue = startTime.dataset.time;const endValue = endTime.dataset.time;if (startValue >= endValue) {timeError.style.display = 'block';return false;} else {timeError.style.display = 'none';return true;}}return false;}// 更新可用时间段显示function updateAvailability() {const container = document.getElementById('availabilityList');container.innerHTML = '';const currentReservations = getReservationsForCurrentRoomAndDate();// 如果没有预约，显示全天可用if (currentReservations.length === 0) {const badge = document.createElement('div');badge.className = 'availability-badge';badge.innerHTML = '<i class="fas fa-check"></i> 全天可用';container.appendChild(badge);return;}// 计算可用时间段const times = ['08:00', '08:30', '09:00', '09:30', '10:00', '10:30', '11:00', '11:30','12:00', '12:30', '13:00', '13:30', '14:00', '14:30', '15:00', '15:30','16:00', '16:30', '17:00', '17:30', '18:00'];let availableSlots = [];let currentStart = null;for (let i = 0; i < times.length; i++) {const time = times[i];const isBooked = currentReservations.some(res => time >= res.start && time < res.end);if (!isBooked) {if (currentStart === null) {currentStart = time;}// 如果是最后一个时间段或是下一个时间段已被预约if (i === times.length - 1 || currentReservations.some(res => times[i+1] >= res.start && times[i+1] < res.end)) {if (currentStart) {availableSlots.push(`${currentStart}-${times[i]}`);currentStart = null;}}} else {currentStart = null;}}// 显示可用时间段availableSlots.forEach(slot => {const badge = document.createElement('div');badge.className = 'availability-badge';badge.innerHTML = `<i class="fas fa-check"></i> ${slot}`;container.appendChild(badge);});}// 更新当前时间function updateCurrentTime() {const now = new Date();const timeElement = document.getElementById('currentTime');const dateElement = document.getElementById('currentDate');const displayTimeElement = document.getElementById('displayCurrentTime');const displayDateElement = document.getElementById('displayCurrentDate');const timeString = now.toLocaleTimeString('zh-CN', {hour: '2-digit', minute: '2-digit', second: '2-digit',hour12: false});const dateString = now.toLocaleDateString('zh-CN', {year: 'numeric',month: 'long',day: 'numeric',weekday: 'long'});timeElement.textContent = timeString;dateElement.textContent = dateString;// 更新状态显示屏的时间if (displayTimeElement) {displayTimeElement.textContent = timeString;}if (displayDateElement) {displayDateElement.textContent = dateString;}}function getMeetingStatus(start, end, date) {const now = new Date();const startTime = new Date(date + 'T' + start);const endTime = new Date(date + 'T' + end);if (now < startTime) return 'upcoming';if (now >= startTime && now <= endTime) return 'ongoing';return 'ended';}function displayReservations() {const container = document.getElementById('reservationsContainer');container.innerHTML = '';const today = new Date().toISOString().split('T')[0];const todayReservations = reservations.filter(res => res.date === today);todayReservations.sort((a, b) => a.start.localeCompare(b.start));// 添加标题行const headerRow = document.createElement('div');headerRow.className = 'today-reservation-row';headerRow.style.fontWeight = 'bold';headerRow.style.backgroundColor = '#f8f9fa';headerRow.style.borderBottom = '2px solid #dee2e6';headerRow.innerHTML = `<div class="today-reservation-time" style="justify-content: center;">时间</div><div class="today-reservation-title" style="text-align: center;">主题</div><div class="today-reservation-room" style="text-align: center;">会议室</div><div class="today-reservation-booker">预约人</div>`;container.appendChild(headerRow);todayReservations.forEach(res => {const status = getMeetingStatus(res.start, res.end, res.date);const statusClass = status === 'ongoing' ? 'status-ongoing' :status === 'upcoming' ? 'status-upcoming' : 'status-ended';const row = document.createElement('div');row.className = 'today-reservation-row';row.innerHTML = `<div class="today-reservation-time"><span class="dot ${statusClass}"></span><span class="time-text">${res.start} - ${res.end}</span></div><div class="today-reservation-title" style="text-align: center;">${res.title}</div><div class="today-reservation-room" style="text-align: center;">${getRoomName(res.room)}</div><div class="today-reservation-booker">${res.booker}</div>`;container.appendChild(row);});}// 处理表单提交document.getElementById('bookingForm').addEventListener('submit', function(e) {e.preventDefault();const room = document.getElementById('meetingRoom').value;const date = document.getElementById('bookingDate').value;const startOption = document.querySelector('#startTimeSelector .time-option.selected');const endOption = document.querySelector('#endTimeSelector .time-option.selected');const userName = document.getElementById('userName').value;const meetingTitle = document.getElementById('meetingTitle').value;if (!room) {alert('请选择会议室');return;}if (!startOption || !endOption) {alert('请选择开始时间和结束时间');return;}const startTime = startOption.dataset.time;const endTime = endOption.dataset.time;if (startTime >= endTime) {document.getElementById('timeError').style.display = 'block';return;}// 检查时间冲突const currentReservations = getReservationsForCurrentRoomAndDate();const conflict = checkTimeConflict(startTime, endTime, currentReservations);if (conflict) {document.getElementById('conflictMessage').textContent = `该时间段与 "${conflict.title}" 会议冲突 (${conflict.start}-${conflict.end})`;document.getElementById('conflictError').style.display = 'block';return;}// 创建新预约const newReservation = {id: Date.now(),room: room,date: date,start: startTime,end: endTime,title: meetingTitle,booker: userName};// 添加到数据reservations.push(newReservation);saveReservations();// 显示成功消息const confirmation = document.getElementById('confirmation');confirmation.style.display = 'block';// 更新显示displayReservations();updateRoomDisplay();updateAvailability();updateStatusDisplay();// 重置表单setTimeout(() => {document.getElementById('userName').value = '';document.getElementById('meetingTitle').value = '';confirmation.style.display = 'none';generateTimeOptions();}, 3000);});// 更新会议室显示信息function updateRoomDisplay() {const now = new Date();const currentHours = now.getHours();const currentMinutes = now.getMinutes();const today = new Date().toISOString().split('T')[0];// 获取当前选择的会议室const room = document.getElementById('meetingRoom').value;// 获取今天该会议室的所有预约const todayReservations = reservations.filter(res => res.date === today && res.room === room);let currentEvent = null;let nextEvent = null;// 查找当前会议和下一个会议todayReservations.forEach(res => {const [startHour, startMinute] = res.start.split(':').map(Number);const [endHour, endMinute] = res.end.split(':').map(Number);// 检查是否当前会议if ((currentHours > startHour || (currentHours === startHour && currentMinutes >= startMinute)) &&(currentHours < endHour || (currentHours === endHour && currentMinutes < endMinute))) {currentEvent = res;}// 检查是否是将来的会议if (currentHours < startHour || (currentHours === startHour && currentMinutes < startMinute)) {if (!nextEvent || res.start < nextEvent.start) {nextEvent = res;}}});// 更新当前会议显示const currentEventElement = document.getElementById('currentEvent');if (currentEvent) {// 添加"开会中"标记const titleWithStatus = `${currentEvent.title} <span class="in-session">会议中</span>`;document.getElementById('currentEventTitle').innerHTML = titleWithStatus;document.getElementById('currentEventTime').textContent = `${currentEvent.start} - ${currentEvent.end}`;document.getElementById('currentEventBooker').textContent = `预约人: ${currentEvent.booker}`;document.getElementById('currentEventRoom').textContent = `会议室: ${getRoomName(currentEvent.room)}`;currentEventElement.style.display = 'block';} else {// 统计会议室信息const totalRooms = meetingRooms.length;const availableRooms = meetingRooms.filter(r => r.status === 'available').length;currentEventElement.style.display = 'block';currentEventElement.innerHTML = `<div class="no-event" style="display: flex; align-items: center; justify-content: center; gap: 18px; flex-direction: column;"><div style="display: flex; align-items: center; gap: 18px;"><i class="fas fa-door-open" style="font-size: 2.2rem; color: #f6c343;"></i><div style="text-align: left;"><div style="color:#38a169; font-size:1.5rem;">会议室总数：<b>${totalRooms}</b></div><div style="color:#f6c343; font-size:1.5rem;">可用会议室：<b>${availableRooms}</b></div></div></div><div id="roomInfoList" style="width:100%;margin-top:18px;"></div></div>`;// 渲染会议室详细信息到roomInfoListsetTimeout(() => {const roomInfoList = document.getElementById('roomInfoList');if (roomInfoList) {let html = '<div style="display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; align-items: flex-start;">';meetingRooms.forEach(room => {let statusColor = room.status === 'available' ? '#38a169' : (room.status === 'maintenance' ? '#f6c343' : '#e53e3e');let statusText = room.status === 'available' ? '可用' : (room.status === 'maintenance' ? '维护中' : '不可用');html += `<div style=\"background:rgba(255,255,255,0.10);border-radius:12px;padding:18px 24px;min-width:180px;max-width:220px;box-shadow:0 2px 8px rgba(0,0,0,0.04);margin:8px 0;\"><div style=\"font-size:1.2rem;font-weight:bold;margin-bottom:6px;color:#f6c343;\">${room.name}</div><div style=\"font-size:0.98rem;margin-bottom:4px;color:#f6c343;\">容量：${room.capacity}人</div><div style=\"font-size:0.98rem;margin-bottom:4px;color:#f6c343;\">设备：${room.equipment || '无'}</div><div style=\"font-size:0.98rem;color:${statusColor};font-weight:bold;\">状态：${statusText}</div></div>`;});html += '</div>';roomInfoList.innerHTML = html;}}, 0);}// 更新下一个会议显示const nextEventElement = document.getElementById('nextEvent');if (nextEvent) {document.getElementById('nextEventTitle').textContent = nextEvent.title;document.getElementById('nextEventTime').textContent = `${nextEvent.start} - ${nextEvent.end}`;document.getElementById('nextEventBooker').textContent = `预约人: ${nextEvent.booker}`;nextEventElement.style.display = 'block';} else {// 没有下一个会议时直接隐藏该区域nextEventElement.style.display = 'none';}// 更新7天预约状态日历updateCalendar();}// 更新7天预约状态日历function updateCalendar() {const calendarGrid = document.getElementById('calendarGrid');if (!calendarGrid) return;const room = document.getElementById('meetingRoom').value;if (!room) return;calendarGrid.innerHTML = '';const weekdays = ['日', '一', '二', '三', '四', '五', '六'];const today = new Date();for (let i = 0; i < 7; i++) {const date = new Date(today);date.setDate(today.getDate() + i);const dateStr = date.toISOString().split('T')[0];const dayOfWeek = weekdays[date.getDay()];const dayOfMonth = date.getDate();// 获取该日期的预约const dayReservations = reservations.filter(res => res.room === room && res.date === dateStr);// 判断状态let statusClass = 'status-available';let statusText = '可用';if (dayReservations.length > 0) {// 检查是否全天被预约（假设工作时间8:00-18:00，共20个半小时时段）const timeSlots = ['08:00', '08:30', '09:00', '09:30', '10:00', '10:30', '11:00', '11:30','12:00', '12:30', '13:00', '13:30', '14:00', '14:30', '15:00', '15:30','16:00', '16:30', '17:00', '17:30', '18:00'];let bookedSlots = 0;timeSlots.forEach(time => {const isBooked = dayReservations.some(res => time >= res.start && time < res.end);if (isBooked) bookedSlots++;});if (bookedSlots >= timeSlots.length * 0.8) {statusClass = 'status-booked';statusText = '已满';} else {statusClass = 'status-partial';statusText = '部分';}}// 如果是今天const isToday = i === 0;if (isToday) {statusClass = 'status-today';statusText = '今天';}const dayElement = document.createElement('div');dayElement.className = `calendar-day${isToday ? ' today' : ''}`;dayElement.innerHTML = `<div class="calendar-date">${dayOfMonth}</div><div class="calendar-weekday">周${dayOfWeek}</div><div class="calendar-status ${statusClass}" title="${statusText}"></div>`;calendarGrid.appendChild(dayElement);}}// 更新状态显示屏function updateStatusDisplay() {const now = new Date();const currentHours = now.getHours();const currentMinutes = now.getMinutes();const today = new Date().toISOString().split('T')[0];const container = document.getElementById('allRoomsStatus');if (!container) return;container.innerHTML = '';meetingRooms.forEach(room => {// 获取该会议室今天的预约const todayReservations = reservations.filter(res => res.date === today && res.room === room.id);let currentEvent = null;let nextEvent = null;todayReservations.forEach(res => {const [startHour, startMinute] = res.start.split(':').map(Number);const [endHour, endMinute] = res.end.split(':').map(Number);if ((currentHours > startHour || (currentHours === startHour && currentMinutes >= startMinute)) &&(currentHours < endHour || (currentHours === endHour && currentMinutes < endMinute))) {currentEvent = res;}if (currentHours < startHour || (currentHours === startHour && currentMinutes < startMinute)) {if (!nextEvent || res.start < nextEvent.start) {nextEvent = res;}}});// 构建卡片let card = `<div class="status-section" style="margin-bottom:32px;"><div class="status-header"><i class="fas fa-door-open"></i><div><div class="status-title">${room.name} (${room.capacity}人)</div><span class="in-session" style="background:${room.status==='available'?'rgba(56,161,105,0.3)':'#f6c343'};color:${room.status==='available'?'#38a169':'#b21f1f'};"><i class="fas fa-circle"></i> ${room.status==='available'?'可用':(room.status==='maintenance'?'维护中':'不可用')}</span></div></div>`;if (currentEvent) {card += `<div class="time-range">${currentEvent.start} - ${currentEvent.end}</div><div class="progress-container"><div class="progress-bar" style="width:${getProgress(currentEvent.start, currentEvent.end)}%"></div></div><div class="event-details"><div class="detail-card"><div class="detail-label"><i class="fas fa-heading"></i> 会议主题</div><div class="detail-value">${currentEvent.title}</div></div><div class="detail-card"><div class="detail-label"><i class="fas fa-user"></i> 预约人</div><div class="detail-value">${currentEvent.booker}</div></div></div>`;} else {card += `<div class="no-events" style="padding:32px 0 0 0;"><i class="fas fa-door-open"></i><p>当前无会议</p></div>`;}if (nextEvent) {card += `<div class="next-event" style="margin-top:18px;"><div class="next-header"><i class="fas fa-clock"></i><div class="next-title">下一个会议</div></div><div class="time-range">${nextEvent.start} - ${nextEvent.end}</div><div class="event-details"><div class="detail-card"><div class="detail-label"><i class="fas fa-heading"></i> 会议主题</div><div class="detail-value">${nextEvent.title}</div></div><div class="detail-card"><div class="detail-label"><i class="fas fa-user"></i> 预约人</div><div class="detail-value">${nextEvent.booker}</div></div></div></div>`;}card += `</div>`;container.innerHTML += card;});}// 辅助函数：计算进度条百分比function getProgress(startTime, endTime) {const now = new Date();const [startHour, startMinute] = startTime.split(':').map(Number);const [endHour, endMinute] = endTime.split(':').map(Number);const startDate = new Date();startDate.setHours(startHour, startMinute, 0, 0);const endDate = new Date();endDate.setHours(endHour, endMinute, 0, 0);const totalDuration = endDate - startDate;const elapsedTime = now - startDate;let progress = (elapsedTime / totalDuration) * 100;progress = Math.max(0, Math.min(100, progress));return progress;}// 获取会议室名称function getRoomName(roomId) {const room = meetingRooms.find(r => r.id === roomId);return room ? room.name : '未知会议室';}// 显示添加会议室表单document.getElementById('addRoomBtn').addEventListener('click', function() {document.getElementById('roomForm').reset();document.getElementById('roomId').value = '';document.getElementById('formHeader').textContent = '添加会议室';document.getElementById('roomFormContainer').style.display = 'block';this.style.display = 'none';// 滚动到表单document.getElementById('roomFormContainer').scrollIntoView({ behavior: 'smooth' });});// 取消表单document.getElementById('cancelRoomForm').addEventListener('click', function() {document.getElementById('roomFormContainer').style.display = 'none';document.getElementById('addRoomBtn').style.display = 'block';});// 处理会议室表单提交document.getElementById('roomForm').addEventListener('submit', function(e) {e.preventDefault();const roomId = document.getElementById('roomId').value;const name = document.getElementById('roomName').value;const capacity = parseInt(document.getElementById('roomCapacity').value);const description = document.getElementById('roomDescription').value;const equipment = document.getElementById('roomEquipment').value;const status = document.getElementById('roomStatus').value;if (!name || !capacity) {alert('请填写必填字段（会议室名称和容量）');return;}if (roomId) {// 编辑现有会议室const index = meetingRooms.findIndex(room => room.id === roomId);if (index !== -1) {meetingRooms[index] = {...meetingRooms[index],name,capacity,description,equipment,status};}} else {// 添加新会议室const newId = 'room' + (meetingRooms.length + 1);meetingRooms.push({id: newId,name,capacity,description,equipment,status});}saveRooms();document.getElementById('roomFormContainer').style.display = 'none';document.getElementById('addRoomBtn').style.display = 'block';alert(`会议室${roomId ? '已更新' : '已添加'}！`);});// 初始化页面saveRooms(); // 初始化会议室数据generateRoomOptions();generateTimeOptions();updateCurrentTime();displayReservations();displayRooms();updateRoomDisplay();updateAvailability();updateStatusDisplay();updateCalendar(); // 初始化日历显示// 每秒更新时间setInterval(updateCurrentTime, 1000);// 每分钟刷新预订状态setInterval(() => {displayReservations();updateRoomDisplay();updateStatusDisplay();}, 60000);// 新增：每5分钟自动刷新会议室状态显示屏页面setInterval(() => {// 仅在状态显示屏可见时刷新页面const statusDisplay = document.getElementById('statusDisplay');if (statusDisplay && statusDisplay.style.display !== 'none') {window.location.reload();}}, 300000); // 300000ms = 5分钟// 当日期或会议室改变时重新生成时间选项document.getElementById('bookingDate').addEventListener('change', function() {generateTimeOptions();updateAvailability();updateStatusDisplay();});// 记住会议室选择document.getElementById('meetingRoom').addEventListener('change', function() {localStorage.setItem('lastRoom', this.value);generateTimeOptions();updateAvailability();updateStatusDisplay();updateCalendar(); // 新增，会议室切换时刷新日历});// 页面加载时恢复会议室选择window.addEventListener('DOMContentLoaded', function() {const lastRoom = localStorage.getItem('lastRoom');const meetingRoomSelect = document.getElementById('meetingRoom');if (lastRoom && meetingRoomSelect) {meetingRoomSelect.value = lastRoom;}// 自动选中第一个可用会议室if (meetingRoomSelect && !meetingRoomSelect.value) {for (let i = 0; i < meetingRoomSelect.options.length; i++) {if (meetingRoomSelect.options[i].value) {meetingRoomSelect.value = meetingRoomSelect.options[i].value;break;}}}// 触发一次相关更新（如果有会议室选中）generateTimeOptions();updateAvailability();updateStatusDisplay();updateCalendar(); // 确保日历刷新});// 显示状态显示屏document.getElementById('viewDisplayBtn').addEventListener('click', function() {document.getElementById('bookingSystem').style.display = 'none';document.getElementById('statusDisplay').style.display = 'block';document.getElementById('roomManagement').style.display = 'none';document.getElementById('reservationManagement').style.display = 'none';localStorage.setItem('lastView', 'status'); // 记录当前页面});// 显示预约系统document.getElementById('showBookingBtn').addEventListener('click', function() {document.getElementById('bookingSystem').style.display = 'block';document.getElementById('statusDisplay').style.display = 'none';document.getElementById('roomManagement').style.display = 'none';document.getElementById('reservationManagement').style.display = 'none';localStorage.setItem('lastView', 'booking'); // 记录当前页面});// 显示状态显示屏document.getElementById('showDisplayBtn').addEventListener('click', function() {document.getElementById('bookingSystem').style.display = 'none';document.getElementById('statusDisplay').style.display = 'block';document.getElementById('roomManagement').style.display = 'none';document.getElementById('reservationManagement').style.display = 'none';localStorage.setItem('lastView', 'status'); // 记录当前页面});// 显示会议室管理页面document.getElementById('showManagementBtn').addEventListener('click', function() {const password = prompt('请输入管理员密码：');if (password === 'baize') {document.getElementById('bookingSystem').style.display = 'none';document.getElementById('statusDisplay').style.display = 'none';document.getElementById('roomManagement').style.display = 'block';document.getElementById('reservationManagement').style.display = 'none';localStorage.setItem('lastView', 'management');} else if (password !== null) {alert('密码错误，无法访问会议室管理页面！');}});// 显示预约管理页面document.getElementById('showReservationManagementBtn').addEventListener('click', function() {const password = prompt('请输入管理员密码：');if (password === 'baize') {document.getElementById('bookingSystem').style.display = 'none';document.getElementById('statusDisplay').style.display = 'none';document.getElementById('roomManagement').style.display = 'none';document.getElementById('reservationManagement').style.display = 'block';localStorage.setItem('lastView', 'reservationManagement');displayReservationsManagement();} else if (password !== null) {alert('密码错误，无法访问预约管理页面！');}});// 页面加载时根据localStorage显示上次页面window.addEventListener('DOMContentLoaded', function() {const lastView = localStorage.getItem('lastView');if (lastView === 'status') {document.getElementById('bookingSystem').style.display = 'none';document.getElementById('statusDisplay').style.display = 'block';document.getElementById('roomManagement').style.display = 'none';document.getElementById('reservationManagement').style.display = 'none';} else if (lastView === 'management') {document.getElementById('bookingSystem').style.display = 'none';document.getElementById('statusDisplay').style.display = 'none';document.getElementById('roomManagement').style.display = 'block';document.getElementById('reservationManagement').style.display = 'none';} else if (lastView === 'reservationManagement') {document.getElementById('bookingSystem').style.display = 'none';document.getElementById('statusDisplay').style.display = 'none';document.getElementById('roomManagement').style.display = 'none';document.getElementById('reservationManagement').style.display = 'block';displayReservationsManagement();} else {document.getElementById('bookingSystem').style.display = 'block';document.getElementById('statusDisplay').style.display = 'none';document.getElementById('roomManagement').style.display = 'none';document.getElementById('reservationManagement').style.display = 'none';}});// 状态显示屏悬停显示顶部按钮（修正版）const switchContainer = document.querySelector('.switch-container');const statusDisplay = document.getElementById('statusDisplay');let hoverTimer = null;function showSwitchContainer() {if (statusDisplay.style.display !== 'none') {switchContainer.style.display = 'flex';}}function hideSwitchContainer() {hoverTimer = setTimeout(() => {if (statusDisplay.style.display !== 'none') {switchContainer.style.display = 'none';}}, 120);}function cancelHide() {if (hoverTimer) clearTimeout(hoverTimer);}function enableHoverEvents() {statusDisplay.addEventListener('mouseenter', showSwitchContainer);statusDisplay.addEventListener('mouseleave', hideSwitchContainer);switchContainer.addEventListener('mouseenter', function() {cancelHide();showSwitchContainer();});switchContainer.addEventListener('mouseleave', hideSwitchContainer);}function disableHoverEvents() {statusDisplay.removeEventListener('mouseenter', showSwitchContainer);statusDisplay.removeEventListener('mouseleave', hideSwitchContainer);switchContainer.removeEventListener('mouseenter', showSwitchContainer);switchContainer.removeEventListener('mouseleave', hideSwitchContainer);}// 页面切换时同步按钮显示状态function updateSwitchContainerVisibility() {if (statusDisplay.style.display !== 'none') {switchContainer.style.display = 'none';enableHoverEvents();} else {switchContainer.style.display = 'flex';disableHoverEvents();}}// 在切换页面时调用document.getElementById('showBookingBtn').addEventListener('click', updateSwitchContainerVisibility);document.getElementById('showDisplayBtn').addEventListener('click', updateSwitchContainerVisibility);document.getElementById('showManagementBtn').addEventListener('click', updateSwitchContainerVisibility);document.getElementById('viewDisplayBtn').addEventListener('click', updateSwitchContainerVisibility);// 页面加载时初始化window.addEventListener('DOMContentLoaded', updateSwitchContainerVisibility);// 预约管理相关函数function displayReservationsManagement() {updateReservationStats();populateFilterOptions();displayFilteredReservations();}function updateReservationStats() {const today = new Date().toISOString().split('T')[0];const now = new Date();const totalCount = reservations.length;const todayCount = reservations.filter(res => res.date === today).length;const upcomingCount = reservations.filter(res => {const reservationDate = new Date(res.date);const reservationTime = new Date(res.date + 'T' + res.start);return reservationDate >= now || (reservationDate.toISOString().split('T')[0] === today && reservationTime > now);}).length;document.getElementById('totalReservations').textContent = totalCount;document.getElementById('todayReservations').textContent = todayCount;document.getElementById('upcomingReservations').textContent = upcomingCount;}function populateFilterOptions() {const roomFilter = document.getElementById('filterRoom');const dateFilter = document.getElementById('filterDate');// 清空现有选项roomFilter.innerHTML = '<option value="">所有会议室</option>';dateFilter.innerHTML = '<option value="">所有日期</option><option value="today">今天</option><option value="tomorrow">明天</option><option value="week">本周</option>';// 添加会议室选项meetingRooms.forEach(room => {const option = document.createElement('option');option.value = room.id;option.textContent = room.name;roomFilter.appendChild(option);});}function displayFilteredReservations() {const roomFilter = document.getElementById('filterRoom').value;const dateFilter = document.getElementById('filterDate').value;const searchTerm = document.getElementById('searchBooker').value.toLowerCase();let filteredReservations = [...reservations];// 按会议室筛选if (roomFilter) {filteredReservations = filteredReservations.filter(res => res.room === roomFilter);}// 按日期筛选if (dateFilter) {const today = new Date().toISOString().split('T')[0];const tomorrow = new Date();tomorrow.setDate(tomorrow.getDate() + 1);const tomorrowStr = tomorrow.toISOString().split('T')[0];switch(dateFilter) {case 'today':filteredReservations = filteredReservations.filter(res => res.date === today);break;case 'tomorrow':filteredReservations = filteredReservations.filter(res => res.date === tomorrowStr);break;case 'week':const weekStart = new Date();weekStart.setDate(weekStart.getDate() - weekStart.getDay());const weekEnd = new Date(weekStart);weekEnd.setDate(weekEnd.getDate() + 6);filteredReservations = filteredReservations.filter(res => {const resDate = new Date(res.date);return resDate >= weekStart && resDate <= weekEnd;});break;}}// 按预约人搜索if (searchTerm) {filteredReservations = filteredReservations.filter(res => res.booker.toLowerCase().includes(searchTerm));}// 按日期和时间排序filteredReservations.sort((a, b) => {if (a.date !== b.date) {return new Date(a.date) - new Date(b.date);}return a.start.localeCompare(b.start);});const container = document.getElementById('reservationsManagementContainer');const noReservations = document.getElementById('noReservations');if (filteredReservations.length === 0) {container.innerHTML = '';noReservations.style.display = 'block';return;}noReservations.style.display = 'none';container.innerHTML = '';filteredReservations.forEach(reservation => {const reservationElement = createReservationElement(reservation);container.appendChild(reservationElement);});}function createReservationElement(reservation) {const element = document.createElement('div');element.className = 'reservation-item';const roomName = getRoomName(reservation.room);const status = getReservationStatus(reservation);const statusClass = getStatusClass(status);element.innerHTML = `<div data-label="会议室">${roomName}</div><div data-label="日期">${formatDate(reservation.date)}</div><div data-label="时间">${reservation.start} - ${reservation.end}</div><div data-label="会议主题">${reservation.title}</div><div data-label="预约人">${reservation.booker}</div><div data-label="状态"><span class="reservation-status ${statusClass}">${status}</span></div><div data-label="操作" class="reservation-actions"><button class="action-btn btn-edit" onclick="editReservation(${reservation.id})"><i class="fas fa-edit"></i> 编辑</button><button class="action-btn btn-delete" onclick="deleteReservation(${reservation.id})"><i class="fas fa-trash"></i> 删除</button></div>`;return element;}function getReservationStatus(reservation) {const now = new Date();const today = new Date().toISOString().split('T')[0];const reservationDate = new Date(reservation.date);const reservationStart = new Date(reservation.date + 'T' + reservation.start);const reservationEnd = new Date(reservation.date + 'T' + reservation.end);if (reservation.date < today) {return '已结束';} else if (reservation.date === today) {if (now >= reservationStart && now <= reservationEnd) {return '进行中';} else if (now < reservationStart) {return '即将开始';} else {return '已结束';}} else {return '即将到来';}}function getStatusClass(status) {switch(status) {case '进行中':return 'status-current';case '即将开始':case '即将到来':return 'status-upcoming';case '已结束':return 'status-past';default:return 'status-upcoming';}}function formatDate(dateStr) {const date = new Date(dateStr);const today = new Date();const tomorrow = new Date();tomorrow.setDate(tomorrow.getDate() + 1);if (date.toDateString() === today.toDateString()) {return '今天';} else if (date.toDateString() === tomorrow.toDateString()) {return '明天';} else {return date.toLocaleDateString('zh-CN', { month: 'short', day: 'numeric' });}}function deleteReservation(id) {if (confirm('确定要删除这个预约吗？此操作不可撤销。')) {reservations = reservations.filter(res => res.id !== id);saveReservations();displayReservationsManagement();displayReservations();updateRoomDisplay();updateStatusDisplay();alert('预约已删除');}}function editReservation(id) {const reservation = reservations.find(res => res.id === id);if (!reservation) return;// 切换到预约系统页面document.getElementById('showBookingBtn').click();// 填充表单document.getElementById('meetingRoom').value = reservation.room;document.getElementById('bookingDate').value = reservation.date;document.getElementById('userName').value = reservation.booker;document.getElementById('meetingTitle').value = reservation.title;// 生成时间选项并设置时间generateTimeOptions();// 等待时间选项生成完成后设置时间setTimeout(() => {const startOptions = document.querySelectorAll('#startTimeSelector .time-option');const endOptions = document.querySelectorAll('#endTimeSelector .time-option');startOptions.forEach(option => {if (option.dataset.time === reservation.start) {option.classList.add('selected');}});endOptions.forEach(option => {if (option.dataset.time === reservation.end) {option.classList.add('selected');}});// 更新显示document.getElementById('startTimeDisplay').textContent = reservation.start;document.getElementById('endTimeDisplay').textContent = reservation.end;// 删除原预约reservations = reservations.filter(res => res.id !== id);saveReservations();alert('预约信息已加载到表单中，请修改后重新提交');}, 100);}// 添加筛选器事件监听器document.addEventListener('DOMContentLoaded', function() {const filterRoom = document.getElementById('filterRoom');const filterDate = document.getElementById('filterDate');const searchBooker = document.getElementById('searchBooker');if (filterRoom) {filterRoom.addEventListener('change', displayFilteredReservations);}if (filterDate) {filterDate.addEventListener('change', displayFilteredReservations);}if (searchBooker) {searchBooker.addEventListener('input', displayFilteredReservations);}});// 页面加载时根据localStorage显示上次页面window.addEventListener('DOMContentLoaded', function() {const lastView = localStorage.getItem('lastView');if (lastView === 'status') {document.getElementById('bookingSystem').style.display = 'none';document.getElementById('statusDisplay').style.display = 'block';document.getElementById('roomManagement').style.display = 'none';document.getElementById('reservationManagement').style.display = 'none';} else if (lastView === 'management') {document.getElementById('bookingSystem').style.display = 'none';document.getElementById('statusDisplay').style.display = 'none';document.getElementById('roomManagement').style.display = 'block';document.getElementById('reservationManagement').style.display = 'none';} else if (lastView === 'reservationManagement') {document.getElementById('bookingSystem').style.display = 'none';document.getElementById('statusDisplay').style.display = 'none';document.getElementById('roomManagement').style.display = 'none';document.getElementById('reservationManagement').style.display = 'block';displayReservationsManagement();} else {document.getElementById('bookingSystem').style.display = 'block';document.getElementById('statusDisplay').style.display = 'none';document.getElementById('roomManagement').style.display = 'none';document.getElementById('reservationManagement').style.display = 'none';}});// 更新页面切换函数function updateSwitchContainerVisibility() {const statusDisplay = document.getElementById('statusDisplay');if (statusDisplay && statusDisplay.style.display !== 'none') {switchContainer.style.display = 'none';enableHoverEvents();} else {switchContainer.style.display = 'flex';disableHoverEvents();}}// 在切换页面时调用document.getElementById('showBookingBtn').addEventListener('click', updateSwitchContainerVisibility);document.getElementById('showDisplayBtn').addEventListener('click', updateSwitchContainerVisibility);document.getElementById('showManagementBtn').addEventListener('click', updateSwitchContainerVisibility);document.getElementById('showReservationManagementBtn').addEventListener('click', updateSwitchContainerVisibility);document.getElementById('viewDisplayBtn').addEventListener('click', updateSwitchContainerVisibility);// 背景上传与恢复document.getElementById('bgUploadBtn').addEventListener('click', function() {document.getElementById('bgUpload').click();});document.getElementById('bgUpload').addEventListener('change', function(e) {const file = e.target.files[0];if (!file) return;const reader = new FileReader();reader.onload = function(evt) {document.body.style.backgroundImage = `url('${evt.target.result}')`;document.body.style.backgroundSize = 'cover';document.body.style.backgroundRepeat = 'no-repeat';document.body.style.backgroundAttachment = 'fixed';localStorage.setItem('customBg', evt.target.result);};reader.readAsDataURL(file);});document.getElementById('bgResetBtn').addEventListener('click', function() {localStorage.removeItem('customBg');location.reload();});// 页面加载时恢复背景(function() {const bg = localStorage.getItem('customBg');if (bg) {document.body.style.backgroundImage = `url('${bg}')`;document.body.style.backgroundSize = 'cover';document.body.style.backgroundRepeat = 'no-repeat';document.body.style.backgroundAttachment = 'fixed';}})();document.addEventListener('DOMContentLoaded', function() {var exportBtn = document.getElementById('exportReservationsBtn');if (exportBtn) {exportBtn.addEventListener('click', function() {// 获取当前显示的预约数据const container = document.getElementById('reservationsManagementContainer');const rows = Array.from(container.querySelectorAll('.reservation-item'));if (rows.length === 0) {alert('没有可导出的预约记录');return;}// 表头const header = ['会议室', '日期', '时间', '会议主题', '预约人', '状态'];// 数据const data = [header];rows.forEach(row => {const cells = row.querySelectorAll('div');// 只取前6列const rowData = [];for (let i = 0; i < 6; i++) {rowData.push(cells[i].innerText.trim());}data.push(rowData);});// 生成工作表const ws = XLSX.utils.aoa_to_sheet(data);const wb = XLSX.utils.book_new();XLSX.utils.book_append_sheet(wb, ws, "预约记录");// 文件名const today = new Date();const filename = `预约记录_${today.getFullYear()}${(today.getMonth()+1).toString().padStart(2,'0')}${today.getDate().toString().padStart(2,'0')}.xlsx`;XLSX.writeFile(wb, filename);});}});</script>
</body>
</html>