中科集团HTML托管
返回管理
编辑页面
页面标题
有效期
7天
30天
90天
修改后将从当前时间重新计算过期时间
CSS文件（可选）
JS文件（可选）
HTML内容
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>实验室仪器预约系统 - 后台管理</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: "PingFang SC", "Microsoft YaHei", Arial, sans-serif; background: #f0f2f5; color: #333; display: flex; min-height: 100vh; font-size: 14px; } .sidebar { width: 215px; background: #001529; color: #fff; flex-shrink: 0; position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; } .sidebar .brand { padding: 18px 16px; font-size: 15px; font-weight: 700; border-bottom: 1px solid rgba(255,255,255,.08); } .sidebar .brand small { display: block; font-size: 11px; color: #8c9ba8; font-weight: 400; margin-top: 5px; } .sidebar nav { flex: 1; } .sidebar .nav-group { padding: 8px 0 4px; } .sidebar .nav-group-title { padding: 6px 20px; font-size: 11px; color: #5a6b7a; text-transform: uppercase; letter-spacing: 1px; } .sidebar nav button { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 11px 20px; background: none; border: none; color: #a6b0bb; font-size: 13px; cursor: pointer; transition: all .15s; } .sidebar nav button:hover { color: #fff; background: #0c2135; } .sidebar nav button.active { color: #fff; background: #1890ff; } .sidebar nav button .icon { width: 18px; text-align: center; } .sidebar nav button .badge { margin-left: auto; background: #ff4d4f; color: #fff; font-size: 10px; padding: 1px 6px; border-radius: 8px; min-width: 18px; text-align: center; } .sidebar .syncbox { padding: 12px 16px; border-top: 1px solid rgba(255,255,255,.08); font-size: 12px; color: #8c9ba8; line-height: 1.6; } .sidebar .syncbox b { color: #e8eef3; font-weight: 600; } .sidebar .syncbox .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #52c41a; margin-right: 4px; } .main { flex: 1; padding: 0 20px 30px; min-width: 0; } .topbar { background: #fff; margin: 0 -20px 16px; padding: 12px 20px; border-bottom: 1px solid #e8eaec; display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 50; } .topbar .tb-left { display: flex; align-items: center; gap: 12px; } .topbar h2 { font-size: 16px; font-weight: 600; } .topbar .crumb { font-size: 12px; color: #999; } .topbar .btns { display: flex; gap: 8px; } .btn { border: 1px solid #d9d9d9; background: #fff; color: #333; border-radius: 4px; padding: 7px 14px; font-size: 13px; cursor: pointer; transition: all .15s; white-space: nowrap; } .btn:hover { color: #1890ff; border-color: #1890ff; } .btn.primary { background: #1890ff; border-color: #1890ff; color: #fff; } .btn.primary:hover { background: #40a9ff; border-color: #40a9ff; color: #fff; } .btn.danger { color: #f5222d; border-color: #f0b6b9; } .btn.danger:hover { background: #fff1f0; } .btn.success { background: #52c41a; border-color: #52c41a; color: #fff; } .btn.warning { background: #faad14; border-color: #faad14; color: #fff; } .btn.link { border: none; background: none; color: #1890ff; padding: 3px 6px; } .btn.link.danger { color: #f5222d; } .btn.sm { padding: 4px 10px; font-size: 12px; } .card { background: #fff; border-radius: 6px; padding: 16px; margin-bottom: 14px; box-shadow: 0 1px 2px rgba(0,0,0,.04); } .card h3 { font-size: 15px; font-weight: 600; color: #111; margin-bottom: 4px; } .card .bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; flex-wrap: wrap; gap: 8px; } .card .hint { font-size: 12px; color: #888; margin-bottom: 12px; line-height: 1.7; } table.tbl { width: 100%; border-collapse: collapse; background: #fff; } table.tbl th, table.tbl td { border: 1px solid #eef0f2; padding: 9px 10px; text-align: left; font-size: 13px; } table.tbl th { background: #fafafa; font-weight: 600; color: #555; white-space: nowrap; } table.tbl tr:hover td { background: #f8fafc; } table.tbl td .ops { white-space: nowrap; } .empty-row { text-align: center; color: #bbb; padding: 30px 0 !important; font-size: 13px; } .mform .row { display: flex; align-items: flex-start; margin-bottom: 14px; } .mform .row > label { width: 110px; flex-shrink: 0; font-size: 13px; color: #555; padding-top: 7px; } .mform input[type=text], .mform input[type=number], .mform input[type=time], .mform select, .mform textarea { flex: 1; border: 1px solid #d9d9d9; border-radius: 4px; padding: 7px 10px; font-size: 13px; outline: none; font-family: inherit; } .mform input:focus, .mform select:focus, .mform textarea:focus { border-color: #1890ff; box-shadow: 0 0 0 2px rgba(24,144,255,.1); } .mform .inline { display: flex; gap: 8px; align-items: center; flex: 1; } .mform .warn { font-size: 12px; color: #999; align-self: center; } .mform .chk { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #555; } .mask { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 200; display: none; align-items: flex-start; justify-content: center; padding-top: 8vh; } .mask.show { display: flex; } .modal { width: 620px; max-width: 94vw; max-height: 86vh; overflow: auto; background: #fff; border-radius: 8px; animation: pop .18s ease; } @keyframes pop { from { transform: scale(.95); opacity: 0 } to { transform: scale(1); opacity: 1 } } .modal .m-head { padding: 14px 18px; border-bottom: 1px solid #eef0f2; font-size: 15px; font-weight: 600; display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; background: #fff; z-index: 1; } .modal .m-head .x { border: none; background: none; font-size: 18px; color: #999; cursor: pointer; line-height: 1; } .modal .m-body { padding: 18px; } .modal .m-foot { padding: 12px 18px; border-top: 1px solid #eef0f2; text-align: right; display: flex; justify-content: flex-end; gap: 8px; position: sticky; bottom: 0; background: #fff; } .stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 16px; } .stat-card { background: #fff; border-radius: 6px; padding: 18px 16px; box-shadow: 0 1px 2px rgba(0,0,0,.04); position: relative; overflow: hidden; } .stat-card .stat-icon { position: absolute; right: 14px; top: 14px; font-size: 32px; opacity: .12; } .stat-card .stat-label { font-size: 12px; color: #888; margin-bottom: 6px; } .stat-card .stat-value { font-size: 26px; font-weight: 700; color: #1890ff; line-height: 1.2; } .stat-card .stat-sub { font-size: 11px; color: #bbb; margin-top: 4px; } .stat-card.green .stat-value { color: #52c41a; } .stat-card.orange .stat-value { color: #fa8c16; } .stat-card.purple .stat-value { color: #722ed1; } .tag { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; line-height: 1.5; } .tag.blue { background: #e6f7ff; color: #1890ff; border: 1px solid #91d5ff; } .tag.green { background: #f6ffed; color: #52c41a; border: 1px solid #b7eb8f; } .tag.orange { background: #fff7e6; color: #fa8c16; border: 1px solid #ffd591; } .tag.red { background: #fff1f0; color: #f5222d; border: 1px solid #ffa39e; } .tag.gray { background: #fafafa; color: #999; border: 1px solid #d9d9d9; } .tag.purple { background: #f9f0ff; color: #722ed1; border: 1px solid #d3adf7; } .filter-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; } .filter-bar select, .filter-bar input { border: 1px solid #d9d9d9; border-radius: 4px; padding: 7px 10px; font-size: 13px; outline: none; } .filter-bar select:focus, .filter-bar input:focus { border-color: #1890ff; } .tabs { display: flex; border-bottom: 2px solid #eef0f2; margin-bottom: 14px; } .tabs button { border: none; background: none; padding: 8px 18px; font-size: 14px; color: #666; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; } .tabs button:hover { color: #1890ff; } .tabs button.active { color: #1890ff; border-bottom-color: #1890ff; font-weight: 600; } .notice { background: #fffbe6; border: 1px solid #ffe58f; color: #ad8b00; border-radius: 6px; padding: 10px 12px; font-size: 13px; line-height: 1.7; margin-bottom: 14px; } .notice.info { background: #e6f7ff; border-color: #91d5ff; color: #096dd9; } .toast { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,.82); color: #fff; padding: 9px 18px; border-radius: 20px; font-size: 13px; z-index: 999; display: none; } .panel { display: none; } .panel.show { display: block; } .quick-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .quick-item { background: #fff; border-radius: 6px; padding: 16px; text-align: center; cursor: pointer; transition: all .15s; box-shadow: 0 1px 2px rgba(0,0,0,.04); } .quick-item:hover { box-shadow: 0 2px 8px rgba(24,144,255,.12); transform: translateY(-2px); } .quick-item .qi-icon { font-size: 28px; margin-bottom: 6px; } .quick-item .qi-label { font-size: 13px; color: #555; } .auth-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .auth-item { border: 1px solid #e8ecf1; border-radius: 6px; padding: 10px 12px; display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; } .auth-item:hover { border-color: #1890ff; } .auth-item.checked { background: #e6f7ff; border-color: #91d5ff; } .auth-item .a-name { flex: 1; } .auth-item .a-role { font-size: 11px; color: #999; } .day-chips { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; } .day-chip { border: 1px solid #d9d9d9; background: #fff; border-radius: 4px; padding: 5px 12px; font-size: 13px; cursor: pointer; } .day-chip.active { background: #1890ff; border-color: #1890ff; color: #fff; } .slot-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .slot-cell { border-radius: 6px; padding: 12px; font-size: 12px; text-align: center; } .slot-cell .sc-time { font-size: 13px; font-weight: 700; margin-bottom: 4px; } .slot-cell.free { background: #f6ffed; color: #389e0d; border: 1px solid #b7eb8f; } .slot-cell.pass { background: #e6f7ff; color: #1890ff; border: 1px solid #91d5ff; } .slot-cell.pend { background: #fff7e6; color: #d46b08; border: 1px solid #ffd591; } .data-row { padding: 8px 0; border-bottom: 1px dashed #f0f2f4; font-size: 13px; color: #444; } .data-row:last-child { border-bottom: none; } .data-row .dr-t { color: #333; font-weight: 600; } .data-row .dr-s { color: #888; font-size: 12px; margin-top: 3px; } @media (max-width: 1024px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } .quick-grid { grid-template-columns: repeat(2, 1fr); } .auth-grid { grid-template-columns: repeat(2, 1fr); } .slot-grid { grid-template-columns: repeat(2, 1fr); } } </style> </head> <body> <div class="sidebar"> <div class="brand">仪器预约管理系统<small>武汉天行健科学仪器 · 后台管理</small></div> <nav> <div class="nav-group"> <div class="nav-group-title">概览</div> <button class="active" data-panel="panel-dash" onclick="goPanel(this)"><span class="icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" width="15" height="15"><path d="M18 20V10M12 20V4M6 20v-6"/></svg></span> 工作台</button> </div> <div class="nav-group"> <div class="nav-group-title">业务管理</div> <button data-panel="panel-booking" onclick="goPanel(this)"><span class="icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" width="15" height="15"><rect x="3" y="4" width="18" height="17" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg></span> 预约管理</button> <button data-panel="panel-approve" onclick="goPanel(this)"><span class="icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="15" height="15"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z"/><path d="m9 12 2 2 4-4"/></svg></span> 审批中心 <span class="badge" id="navApproveBadge" style="display:none">0</span></button> <button data-panel="panel-overview" onclick="goPanel(this)"><span class="icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" width="15" height="15"><rect x="3" y="4" width="18" height="17" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/><circle cx="12" cy="14" r="3"/></svg></span> 排期总览</button> </div> <div class="nav-group"> <div class="nav-group-title">资源配置</div> <button data-panel="panel-inst" onclick="goPanel(this)"><span class="icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="15" height="15"><path d="M10 2v6L4.5 17a2 2 0 0 0 1.7 3h11.6a2 2 0 0 0 1.7-3L14 8V2"/><path d="M8.5 2h7"/></svg></span> 仪器管理</button> <button data-panel="panel-auth" onclick="goPanel(this)"><span class="icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="15" height="15"><circle cx="7.5" cy="15.5" r="4.5"/><path d="M10.5 12.5 21 2M15 7l2.5 2.5M18 4l2 2"/></svg></span> 授权管理</button> <button data-panel="panel-user" onclick="goPanel(this)"><span class="icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="15" height="15"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg></span> 用户管理</button> </div> <div class="nav-group"> <div class="nav-group-title">系统配置</div> <button data-panel="panel-rule" onclick="goPanel(this)"><span class="icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="15" height="15"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg></span> 预约规则</button> </div> <div class="nav-group"> <div class="nav-group-title">数据报表</div> <button data-panel="panel-stat" onclick="goPanel(this)"><span class="icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="15" height="15"><path d="M3 3v18h18"/><path d="m7 15 4-5 3 3 6-7"/></svg></span> 数据统计</button> </div> </nav> <div class="syncbox"> <div><span class="dot"></span>演示环境 · 数据本地保存</div> <b>登录：管理员（企业平台）</b> </div> </div> <div class="main"> <div class="topbar"> <div class="tb-left"> <h2 id="pageTitle">工作台</h2> <span class="crumb" id="pageCrumb">概览 / 工作台</span> </div> <div class="btns"> <button class="btn" onclick="renderAll()"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="13" height="13" style="vertical-align:-2px"><path d="M23 4v6h-6"/><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/></svg> 刷新</button> <button class="btn danger" onclick="resetDemo()">恢复演示数据</button> </div> </div> <div class="panel show" id="panel-dash"> <div class="stat-grid"> <div class="stat-card"><span class="stat-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="34" height="34"><path d="M10 2v6L4.5 17a2 2 0 0 0 1.7 3h11.6a2 2 0 0 0 1.7-3L14 8V2"/><path d="M8.5 2h7"/></svg></span><div class="stat-label">仪器总数</div><div class="stat-value" id="dashInsts">0</div><div class="stat-sub" id="dashInstsSub"></div></div> <div class="stat-card green"><span class="stat-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="34" height="34"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/></svg></span><div class="stat-label">系统用户</div><div class="stat-value" id="dashUsers">0</div><div class="stat-sub" id="dashUsersSub"></div></div> <div class="stat-card orange"><span class="stat-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" width="34" height="34"><rect x="3" y="4" width="18" height="17" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg></span><div class="stat-label">预约总数</div><div class="stat-value" id="dashBookings">0</div><div class="stat-sub" id="dashBookingsSub"></div></div> <div class="stat-card purple"><span class="stat-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="34" height="34"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z"/><path d="m9 12 2 2 4-4"/></svg></span><div class="stat-label">待审批</div><div class="stat-value" id="dashPending">0</div><div class="stat-sub" id="dashPendingSub"></div></div> </div> <div class="card"> <div class="bar"><h3>快捷操作</h3></div> <div class="quick-grid"> <div class="quick-item" onclick="goPanel(document.querySelector('.sidebar button[data-panel=panel-booking]'))"><div class="qi-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" width="26" height="26"><rect x="3" y="4" width="18" height="17" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg></div><div class="qi-label">全部预约</div></div> <div class="quick-item" onclick="goPanel(document.querySelector('.sidebar button[data-panel=panel-approve]'))"><div class="qi-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="26" height="26"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z"/><path d="m9 12 2 2 4-4"/></svg></div><div class="qi-label">去审批</div></div> <div class="quick-item" onclick="goPanel(document.querySelector('.sidebar button[data-panel=panel-inst]'))"><div class="qi-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="26" height="26"><path d="M10 2v6L4.5 17a2 2 0 0 0 1.7 3h11.6a2 2 0 0 0 1.7-3L14 8V2"/><path d="M8.5 2h7"/></svg></div><div class="qi-label">仪器管理</div></div> <div class="quick-item" onclick="goPanel(document.querySelector('.sidebar button[data-panel=panel-auth]'))"><div class="qi-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="26" height="26"><circle cx="7.5" cy="15.5" r="4.5"/><path d="M10.5 12.5 21 2M15 7l2.5 2.5M18 4l2 2"/></svg></div><div class="qi-label">授权配置</div></div> </div> </div> <div class="card"> <div class="bar"><h3>当前预约规则</h3><button class="btn link" onclick="goPanel(document.querySelector('.sidebar button[data-panel=panel-rule]'))">去配置 →</button></div> <div id="dashRuleText"></div> </div> <div class="card"> <div class="bar"><h3>最新预约</h3><button class="btn link" onclick="goPanel(document.querySelector('.sidebar button[data-panel=panel-booking]'))">全部 →</button></div> <table class="tbl"><thead><tr><th>预约人</th><th>仪器</th><th>时间</th><th>审批状态</th></tr></thead><tbody id="dashRecent"></tbody></table> </div> </div> <div class="panel" id="panel-booking"> <div class="card"> <div class="bar"> <h3>全部预约</h3> <span class="hint" style="margin:0">管理员可查看全部预约，支持审批与取消。</span> </div> <div class="filter-bar"> <select id="bkStatusF"><option value="">全部状态</option><option value="0">待老师审核</option><option value="1">待平台审核</option><option value="2">已通过</option><option value="3">已取消</option></select> <select id="bkInstF"><option value="">全部仪器</option></select> <input type="text" id="bkKwF" placeholder="搜索预约人 / 用途" style="width:180px"> <button class="btn" onclick="renderBookings()">查询</button> <button class="btn link" onclick="exportCSV('bookings')">导出 CSV</button> </div> <table class="tbl"><thead><tr><th style="width:46px">编号</th><th>预约人</th><th>角色</th><th>仪器</th><th>时间</th><th>用途/样品</th><th style="width:90px">状态</th><th style="width:170px">操作</th></tr></thead><tbody id="bkTbody"></tbody></table> </div> </div> <div class="panel" id="panel-approve"> <div class="card"> <div class="bar"> <h3>审批中心（两级审批）</h3> <span class="hint" style="margin:0">学生预约：指导老师审核 → 平台审核；老师/企业人员预约：平台审核。</span> </div> <div class="tabs"> <button class="active" data-st="all" onclick="switchApproveTab(this)">全部待审批</button> <button data-st="0" onclick="switchApproveTab(this)">待老师审核</button> <button data-st="1" onclick="switchApproveTab(this)">待平台审核</button> </div> <table class="tbl"><thead><tr><th style="width:46px">编号</th><th>预约人</th><th>所属老师</th><th>仪器</th><th>时间</th><th>当前环节</th><th style="width:190px">操作</th></tr></thead><tbody id="apprTbody"></tbody></table> </div> </div> <div class="panel" id="panel-overview"> <div class="card"> <div class="bar"><h3>排期总览（空闲可视化）</h3></div> <div class="filter-bar"> <select id="ovInst"></select> <span class="hint" style="margin-left:4px">选择仪器后，点击日期查看该日各时段占用情况。</span> </div> <div class="day-chips" id="ovDays"></div> <div id="ovInfo"></div> <div class="slot-grid" id="ovGrid"></div> </div> </div> <div class="panel" id="panel-inst"> <div class="card"> <div class="bar"> <h3>仪器列表</h3> <button class="btn primary" onclick="instModal()">+ 新增仪器</button> </div> <p class="hint">对应用户端「仪器预约」列表。每台仪器可配置型号、分类、厂商、存放位置与授权用户（见授权管理）。</p> <table class="tbl"><thead><tr><th style="width:46px">编号</th><th>仪器名称</th><th>型号</th><th>分类</th><th>厂商</th><th>位置</th><th style="width:90px">历史时长(h)</th><th style="width:90px">授权人数</th><th style="width:200px">操作</th></tr></thead><tbody id="instTbody"></tbody></table> </div> </div> <div class="panel" id="panel-auth"> <div class="card"> <div class="bar"><h3>仪器授权名单</h3></div> <div class="notice info">需求：不同仪器配置不同的授权用户，只有获得授权的用户才能预约对应仪器。授权名单可随时增加 / 移除（支持无限用户）。</div> <div class="filter-bar"> <select id="authInst" onchange="renderAuth()"></select> <button class="btn link" onclick="checkAll(true)">全选</button> <button class="btn link" onclick="checkAll(false)">清空</button> <span class="hint" id="authCount"></span> </div> <div class="auth-grid" id="authGrid"></div> <div style="display:flex;justify-content:flex-end;padding-top:14px"> <button class="btn primary" onclick="saveAuth()">保存授权名单</button> </div> </div> </div> <div class="panel" id="panel-user"> <div class="card"> <div class="bar"> <h3>用户账号</h3> <button class="btn primary" onclick="userModal()">+ 新增用户</button> </div> <p class="hint">用户分为 学生 / 老师 / 企业人员 三类，账户数量不设限。学生需归属一名指导老师（用于两级审批）；企业人员归属客户单位。</p> <div class="filter-bar"> <select id="userRoleF" onchange="renderUsers()"><option value="">全部角色</option><option value="student">学生</option><option value="teacher">老师</option><option value="enterprise">企业人员</option></select> <input type="text" id="userKwF" placeholder="搜索姓名" style="width:180px" oninput="renderUsers()"> </div> <table class="tbl"><thead><tr><th style="width:46px">编号</th><th>姓名</th><th>角色</th><th>归属</th><th style="width:90px">预约次数</th><th style="width:170px">操作</th></tr></thead><tbody id="userTbody"></tbody></table> </div> </div> <div class="panel" id="panel-rule"> <div class="card"> <div class="bar"><h3>预约周期规则（按周周期性开放）</h3></div> <div class="notice">用户端顶部横幅：<b id="ruleBannerPreview"></b></div> <div class="mform"> <div class="row"><label>系统开关</label><div class="chk"><input type="checkbox" id="rOn"> 开放预约（关闭后用户端不可提交新预约）</div></div> <div class="row"><label>开放时间</label><div class="inline"><select id="rOpenW" style="flex:1"></select><input type="time" id="rOpenT" style="flex:1"></div><span class="warn">每周该时刻开放下一周期预约</span></div> <div class="row"><label>截止时间</label><div class="inline"><select id="rCloseW" style="flex:1"></select><input type="time" id="rCloseT" style="flex:1"></div><span class="warn">每周该时刻截止本周期预约</span></div> <div class="row"><label>审批模式</label><div class="chk"><input type="checkbox" id="rTwoStep"> 启用两级审批（学生：指导老师 → 平台；老师/企业：平台）</div></div> <div class="row"><label>每段时长</label><input type="number" id="rSlotMin" min="15" step="15"><span class="warn">单位：分钟</span></div> <div class="row"><label>开放时段</label><div class="inline"><input type="time" id="rSlotStart" style="flex:1"><span>至</span><input type="time" id="rSlotEnd" style="flex:1"></div><span class="warn">每日可预约起止时间</span></div> </div> <div style="display:flex;justify-content:flex-end;gap:8px"> <button class="btn" onclick="previewRule()">预览时段</button> <button class="btn primary" onclick="saveRule()">保存规则</button> </div> <p class="hint" style="margin-top:12px" id="ruleSlotsPreview"></p> </div> </div> <div class="panel" id="panel-stat"> <div class="stat-grid"> <div class="stat-card"><span class="stat-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="34" height="34"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9l-5-7Z"/><path d="M13 2v7h7"/><path d="M9 13h6M9 17h6"/></svg></span><div class="stat-label">本周通过时长(h)</div><div class="stat-value" id="stHours">0</div><div class="stat-sub">按每个时段 1 段计</div></div> <div class="stat-card green"><span class="stat-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="34" height="34"><circle cx="12" cy="12" r="9"/><path d="m8.5 12 2.5 2.5 4.5-5"/></svg></span><div class="stat-label">本周已通过预约</div><div class="stat-value" id="stPass">0</div><div class="stat-sub" id="stPassSub"></div></div> <div class="stat-card orange"><span class="stat-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="34" height="34"><path d="M6 2h12M6 22h12M6 2v4l6 6 6-6V2M6 22v-4l6-6 6 6v4"/></svg></span><div class="stat-label">审批中</div><div class="stat-value" id="stPend">0</div><div class="stat-sub">待老师 / 待平台</div></div> <div class="stat-card purple"><span class="stat-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="34" height="34"><path d="M3 3v18h18"/><path d="m7 15 4-5 3 3 6-7"/></svg></span><div class="stat-label">仪器历史总时长(h)</div><div class="stat-value" id="stHist">0</div><div class="stat-sub">录入时的累计值</div></div> </div> <div class="card"> <div class="bar"> <h3>按仪器统计</h3> <button class="btn link" onclick="exportCSV('inst')">导出 CSV</button> </div> <p class="hint">统计每台仪器在本周期内的预约次数与使用时长（用于线下按小时计费参考，系统内不做线上收费）。</p> <table class="tbl"><thead><tr><th>仪器</th><th>型号</th><th style="width:80px">授权人数</th><th style="width:90px">本周预约(条)</th><th style="width:90px">已通过(条)</th><th style="width:100px">历史时长(h)</th><th style="width:110px">使用总时长(h)</th><th style="width:100px">操作</th></tr></thead><tbody id="stInstTbody"></tbody></table> </div> <div class="card"> <div class="bar"> <h3 id="stUserTitle">按用户统计</h3> <div style="display:flex;gap:8px;align-items:center"> <select id="stUserDim" onchange="renderStats()"><option value="teacher">老师维度</option><option value="student">学生维度</option><option value="enterprise">企业人员维度</option></select> <button class="btn link" onclick="exportCSV('user')">导出 CSV</button> </div> </div> <p class="hint" id="stUserHint"></p> <table class="tbl"><thead id="stUserHead"></thead><tbody id="stUserTbody"></tbody></table> </div> </div> </div> <div class="mask" id="mask"> <div class="modal"> <div class="m-head"><span id="mTitle"></span><button class="x" onclick="closeModal()">×</button></div> <div class="m-body" id="mBody"></div> <div class="m-foot" id="mFoot"></div> </div> </div> <div class="toast" id="toast"></div> <script> /* ================= 常量 / 状态 ================= */ var DAYS = ['一','二','三','四','五','六','日']; var ROLE_NAME = { student:'学生', teacher:'老师', enterprise:'企业人员' }; var ST_NAME = ['待老师审核','待平台审核','已通过','已取消']; var ST_TAG = ['orange','blue','green','gray']; var K = 'inst-admin-v1'; var DB = null; var av = 0, uid = 0, bid = 0; function seedUsers() { return [ { id:1, name:'张三', role:'student', teacher:'李老师' }, { id:2, name:'王小明', role:'student', teacher:'李老师' }, { id:3, name:'李老师', role:'teacher', teacher:'' }, { id:4, name:'王工', role:'enterprise', teacher:'' }, { id:5, name:'赵工', role:'enterprise', teacher:'' }, { id:6, name:'刘工', role:'enterprise', teacher:'' } ]; } function seedInsts() { return [ { id:1, name:'气相色谱仪', model:'GC-2010 Pro', cat:'色谱', maker:'岛津', loc:'分析一室', hist:96 }, { id:2, name:'液相色谱仪', model:'LC-20A', cat:'色谱', maker:'岛津', loc:'分析一室', hist:88 }, { id:3, name:'气质联用仪', model:'GCMS-QP2020 NX', cat:'质谱', maker:'岛津', loc:'分析二室', hist:64 }, { id:4, name:'液质联用仪', model:'LCMS-8050', cat:'质谱', maker:'岛津', loc:'分析二室', hist:71 }, { id:5, name:'原子吸收分光光度计', model:'AA-7800', cat:'光谱', maker:'岛津', loc:'光谱室', hist:55 }, { id:6, name:'紫外可见分光光度计', model:'UV-3600i Plus', cat:'光谱', maker:'岛津', loc:'光谱室', hist:78 }, { id:7, name:'傅立叶变换红外光谱仪', model:'IRTracer-100', cat:'光谱', maker:'岛津', loc:'光谱室', hist:42 }, { id:8, name:'荧光分光光度计', model:'RF-6000', cat:'光谱', maker:'岛津', loc:'光谱室', hist:33 }, { id:9, name:'总有机碳分析仪', model:'TOC-L', cat:'有机分析', maker:'岛津', loc:'理化室', hist:27 }, { id:10, name:'电子万能试验机', model:'AGS-X', cat:'物性测试', maker:'岛津', loc:'物性室', hist:31 } ]; } function seedAuth() { var all = [1,2,3,4,5,6]; var te = [3,4,5,6]; var sp = [4,5,6]; var a = {}; [1,2,5,6].forEach(function(id){ a[id] = all.slice(); }); [3,4,7,8,10].forEach(function(id){ a[id] = te.slice(); }); a[9] = sp.slice(); return a; } function buildBookings() { var raw = [ [1,'张三','student','李老师',2,1,0,'气相色谱进样器检定'], [5,'张三','student','李老师',1,3,2,'原子吸收测铜'], [2,'张三','student','李老师',3,5,0,''], [2,'王小明','student','李老师',4,2,2,'液相测防腐剂'], [3,'李老师','teacher','',2,2,2,''], [7,'李老师','teacher','',1,4,1,'红外测膜材料'], [9,'王工','enterprise','',1,1,2,'TOC 水样检测'], [4,'王工','enterprise','',3,0,1,'LCMS 成份筛查'], [10,'赵工','enterprise','',4,4,2,'拉伸强度测试'], [3,'刘工','enterprise','',5,5,2,''], [1,'王工','enterprise','',4,0,2,'气相客户样品'] ]; bid = 0; return raw.map(function(x){ return { id:++bid, instId:x[0], user:x[1], role:x[2], teacher:x[3]||'', day:x[4], slot:x[5], status:x[6], purpose:x[7]||'' }; }); } function build() { var insts = seedInsts(), users = seedUsers(); av = insts.length; uid = users.length; return { insts: insts, users: users, auths: seedAuth(), bookings: buildBookings(), rule: { on: true, openWeek: 4, openTime: '09:00', closeWeek: 6, closeTime: '21:00', twoStep: true, slotStart: '09:00', slotEnd: '17:00', slotMin: 60, cycle: '8/24–8/30', banner: '预约开放中 · 下一周期 8/24–8/30（周五 09:00 开放 / 周日 21:00 截止）' } }; } function load() { try { var raw = localStorage.getItem(K); if (raw) { DB = JSON.parse(raw); return; } } catch (e) {} DB = build(); } function save() { try { localStorage.setItem(K, JSON.stringify(DB)); } catch (e) {} } function resetDemo() { if (!confirm('确定恢复示例数据？当前所有修改将被覆盖。')) return; localStorage.removeItem(K); DB = build(); save(); renderAll(); toast('已恢复演示数据'); } /* ================= 工具 ================= */ function $(id) { return document.getElementById(id); } function toast(msg) { var t = $('toast'); t.textContent = msg; t.style.display = 'block'; clearTimeout(t._t); t._t = setTimeout(function(){ t.style.display = 'none'; }, 2000); } function toMin(t) { var p = String(t).split(':'); return (+p[0]) * 60 + (+p[1]); } function fmtMin(m) { var h = Math.floor(m / 60), mm = m % 60; return String(h).padStart(2,'0') + ':' + String(mm).padStart(2,'0'); } function slotLabels() { var r = DB.rule, st = toMin(r.slotStart), en = toMin(r.slotEnd), min = Math.max(15, +r.slotMin || 60), out = [], t = st; while (t < en) { var nt = Math.min(t + min, en); out.push(fmtMin(t) + '–' + fmtMin(nt)); t = nt; } return out; } function byId(coll, id) { for (var i = 0; i < DB[coll].length; i++) if (DB[coll][i].id === id) return DB[coll][i]; return null; } function instOf(id) { return byId('insts', id); } function isActive(s) { return s === 0 || s === 1 || s === 2; } function authCount(instId) { return (DB.auths[instId] || []).length; } function authNames(instId) { return (DB.auths[instId] || []).map(function(id){ var u = byId('users', id); return u ? u.name : ''; }).filter(Boolean); } function weekday(day) { return '周' + DAYS[day] + '（8/' + (24 + day) + '）'; } function slotTxt(si) { var L = slotLabels(); return L[si] || ''; } function hourPerSlot() { return DB.rule.slotMin / 60; } function fmtH(h) { return (Math.round(h * 10) / 10) === Math.floor(h) ? String(h) : (Math.round(h * 10) / 10).toFixed(1); } function hoursOf(b) { return b.status === 2 ? hourPerSlot() : 0; } function flowOf(b) { if (b.role === 'student') { if (b.status === 0) return '待' + (b.teacher || '老师') + '审核'; if (b.status === 1) return '老师已通过 → 待平台审核'; if (b.status === 2) return '两级审批已完成'; } else { if (b.status === 0 || b.status === 1) return '待平台审核'; if (b.status === 2) return '平台审核已通过'; } return '已取消'; } /* ================= 面板导航 ================= */ function goPanel(btn) { document.querySelectorAll('.sidebar nav button').forEach(function(b){ b.classList.remove('active'); }); btn.classList.add('active'); document.querySelectorAll('.panel').forEach(function(p){ p.classList.remove('show'); }); var id = btn.dataset.panel; $(id).classList.add('show'); var page = { inst:'仪器管理', auth:'授权管理', user:'用户管理', booking:'预约管理', approve:'审批中心', overview:'排期总览', rule:'预约规则', stat:'数据统计', dash:'工作台' }[id.split('-')[1]]; var group = { inst:'资源配置', auth:'资源配置', user:'资源配置', booking:'业务管理', approve:'业务管理', overview:'业务管理', rule:'系统配置', stat:'数据报表', dash:'概览' }[id.split('-')[1]]; $('pageTitle').textContent = page; $('pageCrumb').textContent = group + ' / ' + page; if (id === 'panel-booking') initBkFilter(); if (id === 'panel-auth') initAuthSel(); if (id === 'panel-overview') initOv(); if (id === 'panel-stat') renderStats(); if (id === 'panel-approve') renderApprove(); if (id === 'panel-rule') renderRule(); } function show(id) { $('panel-' + id).classList.add('show'); } function renderAll() { document.querySelectorAll('.panel').forEach(function(p){ p.classList.remove('show'); }); $('panel-dash').classList.add('show'); renderDash(); renderInsts(); renderUsers(); renderBookings(); renderApprove(); renderRule(); renderStats(); updateBadge(); } /* ================= 工作台 ================= */ function renderDash() { $('dashInsts').textContent = DB.insts.length; $('dashInstsSub').textContent = DB.insts.filter(function(i){ return authCount(i.id) > 0; }).length + ' 台已配置授权'; $('dashUsers').textContent = DB.users.length; var ns = DB.users.filter(function(u){ return u.role === 'student'; }).length; var nt = DB.users.filter(function(u){ return u.role === 'teacher'; }).length; var ne = DB.users.filter(function(u){ return u.role === 'enterprise'; }).length; $('dashUsersSub').textContent = '学生 ' + ns + ' / 老师 ' + nt + ' / 企业 ' + ne; $('dashBookings').textContent = DB.bookings.length; $('dashBookingsSub').textContent = '已通过 ' + DB.bookings.filter(function(b){ return b.status === 2; }).length + ' 条'; var pend = DB.bookings.filter(function(b){ return b.status === 0 || b.status === 1; }).length; $('dashPending').textContent = pend; $('dashPendingSub').textContent = '老师审核 ' + DB.bookings.filter(function(b){ return b.status === 0; }).length + ' / 平台审核 ' + DB.bookings.filter(function(b){ return b.status === 1; }).length; var r = DB.rule; $('dashRuleText').innerHTML = '<div class="data-row"><div class="dr-t"><span style="display:inline-block;width:9px;height:9px;border-radius:50%;background:#52c41a;margin-right:6px"></span>' + (r.on ? '预约开放中' : '预约已关闭') + '</div><div class="dr-s">' + r.banner + '</div></div>' + '<div class="data-row"><div class="dr-t">审批模式</div><div class="dr-s">' + (r.twoStep ? '两级审批（学生：指导老师 → 平台；老师/企业：平台）' : '单级审批（统一平台审核）') + '</div></div>' + '<div class="data-row"><div class="dr-t">可预约时段</div><div class="dr-s">每日 ' + r.slotStart + ' – ' + r.slotEnd + '，每段 ' + r.slotMin + ' 分钟，共 ' + slotLabels().length + ' 段</div></div>'; var rows = DB.bookings.slice().reverse().slice(0, 6).map(function(b){ var i = instOf(b.instId); return '<tr><td>' + b.user + '（' + ROLE_NAME[b.role] + '）</td><td>' + (i ? i.name : '') + '</td><td>' + weekday(b.day) + ' ' + slotTxt(b.slot) + '</td><td><span class="tag ' + ST_TAG[b.status] + '">' + ST_NAME[b.status] + '</span></td></tr>'; }).join(''); $('dashRecent').innerHTML = rows || '<tr><td colspan="4" class="empty-row">暂无预约记录</td></tr>'; } /* ================= 仪器管理 ================= */ function renderInsts() { $('instTbody').innerHTML = DB.insts.map(function(i){ return '<tr><td>' + i.id + '</td><td><b>' + i.name + '</b></td><td>' + i.model + '</td><td>' + i.cat + '</td><td>' + i.maker + '</td><td>' + i.loc + '</td>' + '<td>' + i.hist + '</td><td>' + authCount(i.id) + ' 人</td>' + '<td class="ops"><button class="btn sm" onclick="instModal(' + i.id + ')">编辑</button> ' + '<button class="btn sm" onclick="goAuth(' + i.id + ')">授权</button> ' + '<button class="btn sm danger" onclick="delInst(' + i.id + ')">删除</button></td></tr>'; }).join('') || '<tr><td colspan="9" class="empty-row">暂无仪器</td></tr>'; } function instModal(id) { var i = id ? byId('insts', id) : { id:0, name:'', model:'', cat:'', maker:'', loc:'', hist:0 }; $('mTitle').textContent = id ? '编辑仪器' : '新增仪器'; $('mBody').innerHTML = '<div class="mform">' + '<div class="row"><label>仪器名称</label><input type="text" id="f_name" value="' + i.name + '" placeholder="如：气相色谱仪"></div>' + '<div class="row"><label>型号</label><input type="text" id="f_model" value="' + i.model + '" placeholder="如：GC-2010 Pro"></div>' + '<div class="row"><label>分类</label><input type="text" id="f_cat" value="' + i.cat + '" placeholder="如：色谱 / 质谱 / 光谱"></div>' + '<div class="row"><label>厂商</label><input type="text" id="f_maker" value="' + i.maker + '" placeholder="如：岛津"></div>' + '<div class="row"><label>存放位置</label><input type="text" id="f_loc" value="' + i.loc + '" placeholder="如：分析一室"></div>' + '<div class="row"><label>历史时长(h)</label><input type="number" id="f_hist" value="' + i.hist + '" min="0"></div>' + '</div>'; $('mFoot').innerHTML = '<button class="btn" onclick="closeModal()">取消</button><button class="btn primary" onclick="saveInst(' + id + ')">保存</button>'; $('mask').classList.add('show'); } function saveInst(id) { var v = function(x){ return $(x).value.trim(); }; if (!v('f_name')) { toast('请填写仪器名称'); return; } if (id) { var i = byId('insts', id); i.name = v('f_name'); i.model = v('f_model'); i.cat = v('f_cat'); i.maker = v('f_maker'); i.loc = v('f_loc'); i.hist = +v('f_hist') || 0; } else { id = ++av; DB.insts.push({ id: id, name: v('f_name'), model: v('f_model'), cat: v('f_cat'), maker: v('f_maker'), loc: v('f_loc'), hist: +v('f_hist') || 0 }); DB.auths[id] = []; } closeModal(); save(); renderInsts(); renderDash(); toast('已保存'); } function delInst(id) { var i = byId('insts', id); if (!i || !confirm('确定删除仪器「' + i.name + '」吗？相关预约记录将保留。')) return; DB.insts = DB.insts.filter(function(x){ return x.id !== id; }); delete DB.auths[id]; save(); renderInsts(); renderDash(); toast('已删除'); } function goAuth(id) { goPanel(document.querySelector('.sidebar button[data-panel=panel-auth]')); initAuthSel(id); } /* ================= 授权管理 ================= */ function fillInstSelect(sel, selId) { var s = $(sel); s.innerHTML = DB.insts.map(function(i){ return '<option value="' + i.id + '">' + i.name + '（' + i.model + '）</option>'; }).join(''); if (selId) s.value = selId; } function initAuthSel(pre) { var s = $('authInst'); if (!s.options.length || (pre && +s.value !== pre)) fillInstSelect('authInst', pre || s.value); renderAuth(); } function renderAuth() { var id = +$('authInst').value; var arr = DB.auths[id] || []; $('authCount').textContent = '已授权 ' + arr.length + ' / ' + DB.users.length + ' 人'; $('authGrid').innerHTML = DB.users.map(function(u){ var chk = arr.indexOf(u.id) >= 0; return '<div class="auth-item ' + (chk ? 'checked' : '') + '" onclick="toggleAuth(' + u.id + ',this)">' + '<input type="checkbox" ' + (chk ? 'checked' : '') + ' onchange="toggleAuth(' + u.id + ',this.parentNode)" onclick="event.stopPropagation()">' + '<span class="a-name">' + u.name + '</span><span class="a-role">' + ROLE_NAME[u.role] + (u.teacher ? ' · ' + u.teacher : '') + '</span></div>'; }).join(''); } function toggleAuth(uidx, el) { var id = +$('authInst').value; var arr = DB.auths[id] = DB.auths[id] || []; var pos = arr.indexOf(uidx); if (pos >= 0) arr.splice(pos, 1); else arr.push(uidx); el.classList.toggle('checked'); renderAuth(); } function checkAll(on) { var id = +$('authInst').value; DB.auths[id] = on ? DB.users.map(function(u){ return u.id; }) : []; renderAuth(); } function saveAuth() { save(); renderAuth(); renderInsts(); toast('授权名单已保存，用户端实时生效'); } /* ================= 用户管理 ================= */ function renderUsers() { var rf = $('userRoleF').value, kw = $('userKwF').value.trim(); var list = DB.users.filter(function(u){ return (!rf || u.role === rf) && (!kw || u.name.indexOf(kw) >= 0); }); $('userTbody').innerHTML = list.map(function(u){ var cnt = DB.bookings.filter(function(b){ return b.user === u.name; }).length; var belong = u.role === 'student' ? '指导老师：' + u.teacher : (u.role === 'teacher' ? '—' : '武汉天行健科学仪器'); return '<tr><td>' + u.id + '</td><td><b>' + u.name + '</b></td><td><span class="tag ' + (u.role === 'student' ? 'blue' : u.role === 'teacher' ? 'purple' : 'green') + '">' + ROLE_NAME[u.role] + '</span></td>' + '<td>' + belong + '</td><td>' + cnt + ' 次</td>' + '<td class="ops"><button class="btn sm" onclick="userModal(' + u.id + ')">编辑</button> <button class="btn sm danger" onclick="delUser(' + u.id + ')">删除</button></td></tr>'; }).join('') || '<tr><td colspan="6" class="empty-row">暂无用户</td></tr>'; } function userModal(id) { var u = id ? byId('users', id) : { id:0, name:'', role:'student', teacher:'' }; var opts = ['student','teacher','enterprise'].map(function(r){ return '<option value="' + r + '" ' + (u.role === r ? 'selected' : '') + '>' + ROLE_NAME[r] + '</option>'; }).join(''); $('mTitle').textContent = id ? '编辑用户' : '新增用户'; $('mBody').innerHTML = '<div class="mform">' + '<div class="row"><label>姓名</label><input type="text" id="u_name" value="' + u.name + '"></div>' + '<div class="row"><label>角色</label><select id="u_role">' + opts + '</select></div>' + '<div class="row"><label>指导老师</label><input type="text" id="u_teacher" value="' + u.teacher + '" placeholder="学生需填写老师姓名"></div>' + '</div>'; $('mFoot').innerHTML = '<button class="btn" onclick="closeModal()">取消</button><button class="btn primary" onclick="saveUser(' + id + ')">保存</button>'; $('mask').classList.add('show'); } function saveUser(id) { var name = $('u_name').value.trim(), role = $('u_role').value, teacher = $('u_teacher').value.trim(); if (!name) { toast('请填写姓名'); return; } var dup = DB.users.filter(function(x){ return x.name === name && x.id !== id; })[0]; if (dup) { toast('该姓名已存在'); return; } if (id) { var uu = byId('users', id); DB.bookings.forEach(function(b){ if (b.user === uu.name) { b.user = name; b.role = role; b.teacher = role === 'student' ? teacher : ''; } }); uu.name = name; uu.role = role; uu.teacher = role === 'student' ? teacher : ''; } else { var nu = { id: ++uid, name: name, role: role, teacher: role === 'student' ? teacher : '' }; DB.users.push(nu); Object.keys(DB.auths).forEach(function(k){ if (DB.insts.filter(function(i){ return i.id === +k; })[0]) DB.auths[k].push(nu.id); }); } closeModal(); save(); renderUsers(); renderInsts(); renderDash(); toast('已保存'); } function delUser(id) { var u = byId('users', id); if (!u) return; var has = DB.bookings.filter(function(b){ return b.user === u.name; }).length; var msg = has ? '该用户已有 ' + has + ' 条预约记录，删除后将保留记录仅移除账号，确定继续？' : '确定删除用户「' + u.name + '」吗？'; if (!confirm(msg)) return; DB.users = DB.users.filter(function(x){ return x.id !== id; }); Object.keys(DB.auths).forEach(function(k){ DB.auths[k] = DB.auths[k].filter(function(x){ return x !== id; }); }); save(); renderUsers(); renderInsts(); renderDash(); toast('已删除'); } /*__PART2__*//* ================= 预约管理 ================= */ function initBkFilter() { var s = $('bkInstF'); if (!s.options.length) { s.innerHTML = '<option value="">全部仪器</option>' + DB.insts.map(function(i){ return '<option value="' + i.id + '">' + i.name + '</option>'; }).join(''); } } function renderBookings() { var st = $('bkStatusF').value, inst = $('bkInstF').value, kw = $('bkKwF').value.trim(); var list = DB.bookings.filter(function(b){ return (!st || String(b.status) === st) && (!inst || String(b.instId) === inst) && (!kw || b.user.indexOf(kw) >= 0 || (b.purpose || '').indexOf(kw) >= 0); }).slice().reverse(); $('bkTbody').innerHTML = list.map(function(b){ var i = instOf(b.instId); var ops = ''; if (b.status === 0 || b.status === 1) ops += '<button class="btn sm success" onclick="approveAct(' + b.id + ',1)">通过</button> '; if (isActive(b.status)) ops += '<button class="btn sm danger" onclick="approveAct(' + b.id + ',2)">驳回/取消</button> '; return '<tr><td>' + b.id + '</td><td><b>' + b.user + '</b></td><td>' + ROLE_NAME[b.role] + (b.teacher ? ' · ' + b.teacher : '') + '</td>' + '<td>' + (i ? i.name : '（已删除仪器）') + '</td><td>' + weekday(b.day) + ' ' + slotTxt(b.slot) + '</td>' + '<td>' + (b.purpose || '—') + '</td>' + '<td><span class="tag ' + ST_TAG[b.status] + '">' + ST_NAME[b.status] + '</span></td>' + '<td class="ops">' + ops + '</td></tr>'; }).join('') || '<tr><td colspan="8" class="empty-row">暂无符合条件的预约</td></tr>'; } function approveAct(id, act) { var b = DB.bookings.filter(function(x){ return x.id === id; })[0]; if (!b) return; if (act === 1) { if (b.status === 0 || b.status === 1) { if (b.role === 'student' && b.status === 0) { b.status = 1; toast('老师审核通过，已转平台审核'); } else { b.status = 2; toast('审批通过，预约已生效'); } } } else { b.status = 3; toast('已取消该预约'); } save(); renderBookings(); renderApprove(); renderDash(); renderStats(); updateBadge(); } /* ================= 审批中心 ================= */ var apprFilter = 'all'; function switchApproveTab(btn) { document.querySelectorAll('#panel-approve .tabs button').forEach(function(b){ b.classList.remove('active'); }); btn.classList.add('active'); apprFilter = btn.dataset.st; renderApprove(); } function renderApprove() { var list = DB.bookings.filter(function(b){ var pend = b.status === 0 || b.status === 1; if (apprFilter === 'all') return pend; return String(b.status) === apprFilter; }).slice().reverse(); $('apprTbody').innerHTML = list.map(function(b){ var i = instOf(b.instId); var isTeacherStage = b.status === 0 && b.role === 'student'; var hint = isTeacherStage ? '<span class="hint" style="display:inline">' + (b.teacher || '老师') + ' 审核</span> ' : ''; var passLabel = isTeacherStage ? '通过（转平台）' : '通过'; return '<tr><td>' + b.id + '</td><td><b>' + b.user + '</b></td><td>' + (b.teacher || '—') + '</td>' + '<td>' + (i ? i.name : '') + '</td><td>' + weekday(b.day) + ' ' + slotTxt(b.slot) + '</td>' + '<td><span class="tag ' + ST_TAG[b.status] + '">' + flowOf(b) + '</span></td>' + '<td class="ops">' + hint + '<button class="btn sm success" onclick="approveAct(' + b.id + ',1)">' + passLabel + '</button> ' + '<button class="btn sm danger" onclick="approveAct(' + b.id + ',2)">驳回</button></td></tr>'; }).join('') || '<tr><td colspan="7" class="empty-row">暂无待审批的预约</td></tr>'; updateBadge(); } function updateBadge() { var pend = DB.bookings.filter(function(b){ return b.status === 0 || b.status === 1; }).length; var el = $('navApproveBadge'); el.style.display = pend ? '' : 'none'; el.textContent = pend; } /* ================= 排期总览 ================= */ var ovDay = 0; function initOv() { var s = $('ovInst'); if (!s.options.length) fillInstSelect('ovInst'); var chipsEl = $('ovDays'); if (!chipsEl.dataset.init) { chipsEl.dataset.init = '1'; chipsEl.innerHTML = DAYS.map(function(d, i){ return '<button class="day-chip ' + (i === 0 ? 'active' : '') + '" onclick="setOvDay(' + i + ',this)">周' + d + '</button>'; }).join(''); } renderOv(); } function setOvDay(d, el) { ovDay = d; document.querySelectorAll('#ovDays .day-chip').forEach(function(c){ c.classList.remove('active'); }); el.classList.add('active'); renderOv(); } function renderOv() { var i = instOf(+$('ovInst').value); if (!i) return; var arr = authNames(i.id); $('ovInfo').innerHTML = '<span class="hint">' + i.name + '（' + i.model + '）· ' + i.loc + ' · 授权 ' + arr.length + ' 人：' + (arr.join('、') || '暂无') + '</span>'; $('ovGrid').innerHTML = slotLabels().map(function(s, si){ var b = DB.bookings.filter(function(x){ return x.instId === i.id && x.day === ovDay && x.slot === si && isActive(x.status); })[0]; var cls = 'free', txt = '空闲可约'; if (b) { if (b.status === 2) { cls = 'pass'; txt = b.user + ' 已通过'; } else { cls = 'pend'; txt = b.user + ' 审核中'; } } return '<div class="slot-cell ' + cls + '"><div class="sc-time">' + s + '</div><div>' + txt + '</div></div>'; }).join(''); } /* ================= 预约规则 ================= */ function renderRule() { var r = DB.rule; $('rOn').checked = r.on; fillWeekSelect('rOpenW', r.openWeek); $('rOpenT').value = r.openTime; fillWeekSelect('rCloseW', r.closeWeek); $('rCloseT').value = r.closeTime; $('rTwoStep').checked = r.twoStep; $('rSlotMin').value = r.slotMin; $('rSlotStart').value = r.slotStart; $('rSlotEnd').value = r.slotEnd; $('ruleBannerPreview').textContent = r.banner; previewRule(true); } function fillWeekSelect(id, val) { var keys = { 0:'周一',1:'周二',2:'周三',3:'周四',4:'周五',5:'周六',6:'周日' }; var s = $(id); s.innerHTML = Object.keys(keys).map(function(k){ return '<option value="' + k + '">' + keys[k] + '</option>'; }).join(''); s.value = String(val); } function previewRule(silent) { var min = Math.max(15, Math.round((+$('rSlotMin').value || 60) / 15) * 15); var st = $('rSlotStart').value || '09:00', en = $('rSlotEnd').value || '17:00'; var m0 = toMin(st), m1 = Math.max(toMin(en), m0 + min), labels = [], t = m0; while (t < m1) { var nt = Math.min(t + min, m1); labels.push(fmtMin(t) + '–' + fmtMin(nt)); t = nt; } $('ruleSlotsPreview').textContent = '时段预览：每日 ' + st + '–' + en + '，每段 ' + min + ' 分钟，共 ' + labels.length + ' 段 → ' + labels.join('、'); if (!silent) toast('已生成时段预览'); } function saveRule() { var r = DB.rule; r.on = $('rOn').checked; r.openWeek = +$('rOpenW').value; r.openTime = $('rOpenT').value; r.closeWeek = +$('rCloseW').value; r.closeTime = $('rCloseT').value; r.twoStep = $('rTwoStep').checked; r.slotMin = Math.max(15, Math.round((+$('rSlotMin').value || 60) / 15) * 15); r.slotStart = $('rSlotStart').value; r.slotEnd = $('rSlotEnd').value; r.banner = (r.on ? '预约开放中 · 下一周期 ' + r.cycle : '预约已关闭（下周期仍按原日程开放）') + '（周' + DAYS[r.openWeek] + ' ' + r.openTime + ' 开放 / 周' + DAYS[r.closeWeek] + ' ' + r.closeTime + ' 截止）'; save(); renderRule(); renderDash(); toast('预约规则已保存，用户端实时生效'); } /* ================= 数据统计 ================= */ function renderStats() { var pass = DB.bookings.filter(function(b){ return b.status === 2; }); var pend0 = DB.bookings.filter(function(b){ return b.status === 0; }).length; var pend1 = DB.bookings.filter(function(b){ return b.status === 1; }).length; var hist = DB.insts.reduce(function(s, i){ return s + i.hist; }, 0); $('stHours').textContent = pass.length; $('stPass').textContent = pass.length; $('stPassSub').textContent = '涉及 ' + DB.insts.filter(function(i){ return pass.some(function(b){ return b.instId === i.id; }); }).length + ' 台仪器'; $('stPend').textContent = pend0 + pend1; $('stHist').textContent = hist; $('stInstTbody').innerHTML = DB.insts.map(function(i){ var all = DB.bookings.filter(function(b){ return b.instId === i.id; }); var mypass = all.filter(function(b){ return b.status === 2; }); return '<tr><td><b>' + i.name + '</b></td><td>' + i.model + '</td><td>' + authCount(i.id) + ' 人</td>' + '<td>' + all.length + '</td><td>' + mypass.length + '</td><td>' + i.hist + '</td><td><b>' + (i.hist + mypass.length * hourPerSlot()) + ' h</b></td>' + '<td class="ops"><button class="btn sm" onclick="instStatDetail(' + i.id + ')">查看明细</button></td></tr>'; }).join(''); var dim = $('stUserDim').value, head, rows, hint; if (dim === 'teacher') { head = '<tr><th>老师</th><th>名下学生(人)</th><th>有预约的学生(人)</th><th>学生预约总次数</th><th>使用时长(h)</th></tr>'; hint = '以老师为单位，统计名下学生预约人数与使用时长，供线下按小时计费参考。'; var tmap = {}; DB.users.forEach(function(u){ if (u.role === 'student') (tmap[u.teacher || '未分配'] = tmap[u.teacher || '未分配'] || []).push(u); }); var tkeys = Object.keys(tmap); rows = tkeys.length ? tkeys.map(function(tt){ var ids = tmap[tt].map(function(u){ return u.name; }); var books = DB.bookings.filter(function(b){ return b.role === 'student' && ids.indexOf(b.user) >= 0; }); var has = {}; books.forEach(function(b){ has[b.user] = 1; }); return '<tr><td><b>' + tt + '</b></td><td>' + ids.length + '</td><td>' + Object.keys(has).length + '</td><td>' + books.length + '</td><td>' + books.filter(function(b){ return b.status === 2; }).length + ' h</td></tr>'; }).join('') : '<tr><td colspan="5" class="empty-row">暂无老师维度数据</td></tr>'; } else if (dim === 'student') { head = '<tr><th>学生</th><th>所属老师</th><th>预约次数</th><th>使用时长(h)</th></tr>'; hint = '逐个学生统计其预约与使用时长，老师可查看名下学生使用情况。'; rows = DB.users.filter(function(u){ return u.role === 'student'; }).map(function(u){ var books = DB.bookings.filter(function(b){ return b.user === u.name && b.role === 'student'; }); return '<tr><td><b>' + u.name + '</b></td><td>' + (u.teacher || '—') + '</td><td>' + books.length + '</td><td>' + books.filter(function(b){ return b.status === 2; }).length + ' h</td></tr>'; }).join('') || '<tr><td colspan="4" class="empty-row">暂无学生</td></tr>'; } else { head = '<tr><th>企业人员</th><th>所属单位</th><th>预约次数</th><th>使用时长(h)</th></tr>'; hint = '按企业人员单独导出使用数据，供线下按时长收费参考。'; rows = DB.users.filter(function(u){ return u.role === 'enterprise'; }).map(function(u){ var books = DB.bookings.filter(function(b){ return b.user === u.name && b.role === 'enterprise'; }); return '<tr><td><b>' + u.name + '</b></td><td>武汉天行健科学仪器</td><td>' + books.length + '</td><td>' + books.filter(function(b){ return b.status === 2; }).length + ' h</td></tr>'; }).join('') || '<tr><td colspan="4" class="empty-row">暂无企业人员</td></tr>'; } $('stUserTitle').textContent = '按用户统计：' + (dim === 'teacher' ? '老师维度' : dim === 'student' ? '学生维度' : '企业人员维度'); $('stUserHint').textContent = hint; $('stUserHead').innerHTML = head; $('stUserTbody').innerHTML = rows; } /* ================= 仪器统计明细 ================= */ function instStatDetail(id) { var i = byId('insts', id); if (!i) return; var all = DB.bookings.filter(function(b){ return b.instId === id; }).slice().reverse(); var mypass = all.filter(function(b){ return b.status === 2; }); var ph = hourPerSlot(), uh = Math.round(ph * 10) / 10; var umap = {}, ukeys = []; all.forEach(function(b){ if (!umap[b.user]) { umap[b.user] = { user: b.user, role: b.role, teacher: b.teacher || '', total: 0, pass: 0, hours: 0 }; ukeys.push(b.user); } umap[b.user].total++; if (b.status === 2) { umap[b.user].pass++; umap[b.user].hours += ph; } }); var userRows = ukeys.map(function(n){ var u = umap[n]; var roleTxt = u.role === 'student' ? '学生' + (u.teacher ? ' · ' + u.teacher : '') : (u.role === 'teacher' ? '老师' : '企业人员'); return '<tr><td><b>' + u.user + '</b></td><td>' + roleTxt + '</td><td>' + u.total + '</td><td>' + u.pass + '</td><td><b>' + fmtH(Math.round(u.hours * 10) / 10) + ' h</b></td></tr>'; }).join(''); var detailRows = all.map(function(b){ return '<tr><td>' + b.id + '</td><td><b>' + b.user + '</b></td><td>' + ROLE_NAME[b.role] + (b.teacher ? ' · ' + b.teacher : '') + '</td>' + '<td>' + weekday(b.day) + ' ' + slotTxt(b.slot) + '</td><td>' + (b.purpose || '—') + '</td>' + '<td><span class="tag ' + ST_TAG[b.status] + '">' + ST_NAME[b.status] + '</span></td>' + '<td>' + (b.status === 2 ? fmtH(Math.round(ph * 10) / 10) + ' h' : '—') + '</td></tr>'; }).join(''); $('mTitle').textContent = '仪器统计明细：' + i.name + '（' + i.model + '）'; $('mBody').innerHTML = '<div class="stat-grid" style="grid-template-columns:repeat(4,1fr);margin-bottom:14px">' + '<div class="stat-card"><div class="stat-label">授权人数</div><div class="stat-value" style="font-size:20px">' + authCount(id) + '</div></div>' + '<div class="stat-card green"><div class="stat-label">预约总数</div><div class="stat-value" style="font-size:20px">' + all.length + '</div></div>' + '<div class="stat-card orange"><div class="stat-label">已通过(条)</div><div class="stat-value" style="font-size:20px">' + mypass.length + '</div></div>' + '<div class="stat-card purple"><div class="stat-label">本周期使用时长(h)</div><div class="stat-value" style="font-size:20px">' + fmtH(Math.round(mypass.length * ph * 10) / 10) + '</div></div>' + '</div>' + '<h3 style="font-size:14px;margin:6px 0 10px">按用户统计（' + ukeys.length + ' 人）</h3>' + '<table class="tbl"><thead><tr><th>预约人</th><th>角色</th><th>预约次数</th><th>已通过(次)</th><th>使用时长(h)</th></tr></thead><tbody>' + (userRows || '<tr><td colspan="5" class="empty-row">暂无预约</td></tr>') + '</tbody></table>' + '<h3 style="font-size:14px;margin:16px 0 10px">预约明细（共 ' + all.length + ' 条）</h3>' + '<table class="tbl"><thead><tr><th>编号</th><th>预约人</th><th>角色</th><th>时间</th><th>用途/样品</th><th>状态</th><th>时长</th></tr></thead><tbody>' + (detailRows || '<tr><td colspan="7" class="empty-row">暂无预约</td></tr>') + '</tbody></table>' + '<p class="hint" style="margin-top:10px">每段 ' + DB.rule.slotMin + ' 分钟计 ' + uh + ' 小时；使用时长仅统计已通过预约，供线下按小时计费参考。</p>'; $('mFoot').innerHTML = '<button class="btn" onclick="exportCSV(\'instDetail\',' + id + ')">导出本机明细 CSV</button><button class="btn primary" onclick="closeModal()">关闭</button>'; $('mask').classList.add('show'); } /* ================= 导出 CSV ================= */ function exportCSV(kind, id) { var rows = []; if (kind === 'bookings') { rows.push(['编号','预约人','角色','所属老师','仪器','时间','用途/样品','状态']); DB.bookings.forEach(function(b){ var i = instOf(b.instId); rows.push([b.id, b.user, ROLE_NAME[b.role], b.teacher || '', i ? i.name : '', weekday(b.day) + ' ' + slotTxt(b.slot), b.purpose || '', ST_NAME[b.status]]); }); csv(rows, '全部预约清单.csv'); } else if (kind === 'inst') { rows.push(['仪器','型号','授权人数','本周预约(条)','已通过(条)','历史时长(h)','使用总时长(h)']); DB.insts.forEach(function(i){ var all = DB.bookings.filter(function(b){ return b.instId === i.id; }); var mypass = all.filter(function(b){ return b.status === 2; }); rows.push([i.name, i.model, authCount(i.id), all.length, mypass.length, i.hist, i.hist + mypass.length]); }); csv(rows, '按仪器统计.csv'); } else if (kind === 'user') { var dim = $('stUserDim').value; if (dim === 'teacher') { rows.push(['老师','名下学生(人)','有预约的学生(人)','学生预约总次数','使用时长(h)']); var tmap = {}; DB.users.forEach(function(u){ if (u.role === 'student') (tmap[u.teacher || '未分配'] = tmap[u.teacher || '未分配'] || []).push(u); }); Object.keys(tmap).forEach(function(tt){ var ids = tmap[tt].map(function(u){ return u.name; }); var books = DB.bookings.filter(function(b){ return b.role === 'student' && ids.indexOf(b.user) >= 0; }); var has = {}; books.forEach(function(b){ has[b.user] = 1; }); rows.push([tt, ids.length, Object.keys(has).length, books.length, books.filter(function(b){ return b.status === 2; }).length]); }); } else if (dim === 'student') { rows.push(['学生','所属老师','预约次数','使用时长(h)']); DB.users.filter(function(u){ return u.role === 'student'; }).forEach(function(u){ var books = DB.bookings.filter(function(b){ return b.user === u.name && b.role === 'student'; }); rows.push([u.name, u.teacher || '', books.length, books.filter(function(b){ return b.status === 2; }).length]); }); } else { rows.push(['企业人员','所属单位','预约次数','使用时长(h)']); DB.users.filter(function(u){ return u.role === 'enterprise'; }).forEach(function(u){ var books = DB.bookings.filter(function(b){ return b.user === u.name && b.role === 'enterprise'; }); rows.push([u.name, '武汉天行健科学仪器', books.length, books.filter(function(b){ return b.status === 2; }).length]); }); } csv(rows, '按用户统计-' + (dim === 'teacher' ? '老师' : dim === 'student' ? '学生' : '企业人员') + '.csv'); } else if (kind === 'instDetail') { var i = byId('insts', id); if (!i) return; var ph = hourPerSlot(), uh = Math.round(ph * 10) / 10; var all = DB.bookings.filter(function(b){ return b.instId === id; }); var umap = {}, ukeys = []; all.forEach(function(b){ if (!umap[b.user]) { umap[b.user] = { user: b.user, role: b.role, teacher: b.teacher || '', total: 0, pass: 0, hours: 0 }; ukeys.push(b.user); } umap[b.user].total++; if (b.status === 2) { umap[b.user].pass++; umap[b.user].hours += ph; } }); rows.push(['仪器名称', i.name + '（' + i.model + '）']); rows.push(['本周期使用时长(h)', String(Math.round(DB.bookings.filter(function(b){ return b.instId === id && b.status === 2; }).length * uh * 10) / 10)]); rows.push([]); rows.push(['按用户统计']); rows.push(['预约人', '角色', '预约次数', '已通过(次)', '使用时长(h)']); ukeys.forEach(function(n){ var u = umap[n]; var roleTxt = u.role === 'student' ? '学生' + (u.teacher ? '·' + u.teacher : '') : (u.role === 'teacher' ? '老师' : '企业人员'); rows.push([u.user, roleTxt, u.total, u.pass, Math.round(u.hours * 10) / 10]); }); rows.push([]); rows.push(['预约明细']); rows.push(['编号', '预约人', '角色', '时间', '用途/样品', '状态', '时长(h)']); all.forEach(function(b){ rows.push([b.id, b.user, ROLE_NAME[b.role] + (b.teacher ? '·' + b.teacher : ''), weekday(b.day) + ' ' + slotTxt(b.slot), b.purpose || '', ST_NAME[b.status], b.status === 2 ? uh : 0]); }); csv(rows, '仪器统计明细-' + i.name + '.csv'); } } function csv(rows, filename) { var str = rows.map(function(r){ return r.map(function(c){ return '"' + String(c).replace(/"/g, '""') + '"'; }).join(','); }).join('\r\n'); var blob = new Blob(['\ufeff' + str], { type: 'text/csv;charset=utf-8;' }); var a = document.createElement('a'); a.href = URL.createObjectURL(blob); a.download = filename; a.click(); URL.revokeObjectURL(a.href); toast('已导出 ' + filename); } /* ================= 弹窗 ================= */ function closeModal() { $('mask').classList.remove('show'); } $('mask').addEventListener('click', function(e){ if (e.target === $('mask')) closeModal(); }); function init() { load(); renderAll(); } document.addEventListener('DOMContentLoaded', init); </script> </body> </html>
保存更改
取消
访问码:
anu8mdqt
复制链接
重新生成