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

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

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

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

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

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

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

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

系统架构图如下：

#mermaid-svg-QtUlGUPldtS2ZZCi {font-family:\"trebuchet ms\",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-QtUlGUPldtS2ZZCi .error-icon{fill:#552222;}#mermaid-svg-QtUlGUPldtS2ZZCi .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-QtUlGUPldtS2ZZCi .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-QtUlGUPldtS2ZZCi .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-QtUlGUPldtS2ZZCi .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-QtUlGUPldtS2ZZCi .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-QtUlGUPldtS2ZZCi .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-QtUlGUPldtS2ZZCi .marker{fill:#333333;stroke:#333333;}#mermaid-svg-QtUlGUPldtS2ZZCi .marker.cross{stroke:#333333;}#mermaid-svg-QtUlGUPldtS2ZZCi svg{font-family:\"trebuchet ms\",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-QtUlGUPldtS2ZZCi .label{font-family:\"trebuchet ms\",verdana,arial,sans-serif;color:#333;}#mermaid-svg-QtUlGUPldtS2ZZCi .cluster-label text{fill:#333;}#mermaid-svg-QtUlGUPldtS2ZZCi .cluster-label span{color:#333;}#mermaid-svg-QtUlGUPldtS2ZZCi .label text,#mermaid-svg-QtUlGUPldtS2ZZCi span{fill:#333;color:#333;}#mermaid-svg-QtUlGUPldtS2ZZCi .node rect,#mermaid-svg-QtUlGUPldtS2ZZCi .node circle,#mermaid-svg-QtUlGUPldtS2ZZCi .node ellipse,#mermaid-svg-QtUlGUPldtS2ZZCi .node polygon,#mermaid-svg-QtUlGUPldtS2ZZCi .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-QtUlGUPldtS2ZZCi .node .label{text-align:center;}#mermaid-svg-QtUlGUPldtS2ZZCi .node.clickable{cursor:pointer;}#mermaid-svg-QtUlGUPldtS2ZZCi .arrowheadPath{fill:#333333;}#mermaid-svg-QtUlGUPldtS2ZZCi .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-QtUlGUPldtS2ZZCi .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-QtUlGUPldtS2ZZCi .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-QtUlGUPldtS2ZZCi .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-QtUlGUPldtS2ZZCi .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-QtUlGUPldtS2ZZCi .cluster text{fill:#333;}#mermaid-svg-QtUlGUPldtS2ZZCi .cluster span{color:#333;}#mermaid-svg-QtUlGUPldtS2ZZCi div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:\"trebuchet ms\",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-QtUlGUPldtS2ZZCi :root{--mermaid-font-family:\"trebuchet ms\",verdana,arial,sans-serif;} 用户界面 预约模块 展示模块 管理模块 时间选择器 冲突检测 实时时钟 状态看板 会议室CRUD 预约管理

🛠️ 核心功能详解

1. 智能预约系统

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

2. 状态展示大屏

3. 管理后台

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

3.1 会议室管理界面

3.2 预约管理页面

🎨 界面展示与交互逻辑

1. 动态时间选择器

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

2. 实时冲突检测算法

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

状态大屏动效实现

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

🔧 部署与使用指南

开发环境搭建

1. 安装VS Code及相关插件

   Extensions:- Live Server- Prettier- ESLint

2. 项目目录结构

   /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));}// 支持导出为Excelfunction 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>    <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>会议室预约系统 © 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>会议室预约系统 © 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\' } ]; // 保存预约数据到localStorage function 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 = \'-- 请选择会议室 --\'; 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 = `  
  
暂无会议室信息，请添加会议室
  
 `; 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 => ` 
 ${eq} 
  `).join(\'\'); } roomElement.innerHTML = `  
 ${room.name} ${room.description ? `
${room.description}` : \'\'}  
  
${room.capacity}人
  
${equipmentTags || \'无\'}
  
 <span class=\"status-indicator ${statusClass}\">${statusText}  
  
 <button class=\"room-action-btn edit-room-btn\" data-id=\"${room.id}\">  编辑  <button class=\"room-action-btn delete-room-btn\" data-id=\"${room.id}\">  删除   
 `; 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 = \' 全天可用\'; 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 = ` ${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 = ` 
时间
 
主题
 
会议室
 
预约人
 `; 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 = `  
 <span class=\"dot ${statusClass}\"> ${res.start} - ${res.end}  
  
${res.title}
  
${getRoomName(res.room)}
  
${res.booker}
 `; 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} 会议中`; 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 = `  
 
  
 
会议室总数：${totalRooms}
 
可用会议室：${availableRooms}
 
 
 
  
 `; // 渲染会议室详细信息到roomInfoList setTimeout(() => {  const roomInfoList = document.getElementById(\'roomInfoList\');  if (roomInfoList) { let html = \'
\'; meetingRooms.forEach(room => { let statusColor = room.status === \'available\' ? \'#38a169\' : (room.status === \'maintenance\' ? \'#f6c343\' : \'#e53e3e\'); let statusText = room.status === \'available\' ? \'可用\' : (room.status === \'maintenance\' ? \'维护中\' : \'不可用\'); html += ` 
  
${room.name}
  
容量：${room.capacity}人
  
设备：${room.equipment || \'无\'}
  <div style=\\\"font-size:0.98rem;color:${statusColor};font-weight:bold;\\\">状态：${statusText}
 
 `; }); html += \'