编辑页面

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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: #f0f2f5; }
        
        /* 登录页 */
        .login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%); }
        .login-box { background: white; padding: 40px; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.2); width: 400px; }
        .login-box h1 { text-align: center; color: #1890ff; margin-bottom: 30px; font-size: 28px; }
        .login-box input { width: 100%; padding: 12px 15px; margin-bottom: 15px; border: 1px solid #ddd; border-radius: 6px; font-size: 14px; }
        .login-box button { width: 100%; padding: 12px; background: #1890ff; color: white; border: none; border-radius: 6px; font-size: 16px; cursor: pointer; }
        .login-box button:hover { background: #096dd9; }
        
        /* 主布局 */
        .main-layout { display: none; min-height: 100vh; }
        .main-layout.active { display: flex; }
        
        /* 左侧导航 */
        .sidebar { width: 220px; background: #001529; height: 100vh; position: fixed; left: 0; top: 0; overflow-y: auto; }
        .sidebar-logo { padding: 20px; color: white; font-size: 18px; font-weight: bold; border-bottom: 1px solid #ffffff20; text-align: center; }
        .sidebar-menu { padding: 10px 0; }
        .menu-section { color: #ffffff60; padding: 10px 20px; font-size: 12px; text-transform: uppercase; }
        .menu-item { padding: 12px 20px; color: #ffffffcc; cursor: pointer; display: flex; align-items: center; gap: 10px; transition: all 0.3s; }
        .menu-item:hover { background: #ffffff10; color: white; }
        .menu-item.active { background: #1890ff; color: white; }
        .menu-item .icon { font-size: 18px; width: 24px; text-align: center; }
        .menu-item .arrow { margin-left: auto; font-size: 12px; }
        .submenu { display: none; background: #000c17; }
        .menu-item.open + .submenu { display: block; }
        .submenu-item { padding: 10px 20px 10px 54px; color: #ffffff99; cursor: pointer; font-size: 14px; }
        .submenu-item:hover { color: #fff; }
        .submenu-item.active { color: #1890ff; }
        
        /* 顶部 */
        .header { height: 60px; background: white; border-bottom: 1px solid #f0f0f0; margin-left: 220px; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; position: fixed; right: 0; left: 220px; top: 0; z-index: 100; }
        .header-left { display: flex; align-items: center; gap: 20px; }
        .header-left h2 { font-size: 18px; font-weight: 500; }
        .header-right { display: flex; align-items: center; gap: 20px; }
        .header-user { display: flex; align-items: center; gap: 8px; cursor: pointer; }
        .header-user .avatar { width: 32px; height: 32px; background: #1890ff; border-radius: 50%; color: white; display: flex; align-items: center; justify-content: center; }
        .header-bell { font-size: 20px; cursor: pointer; position: relative; }
        .header-bell .badge { position: absolute; top: -5px; right: -5px; background: #ff4d4f; color: white; font-size: 10px; padding: 2px 5px; border-radius: 10px; }
        
        /* 主内容区 */
        .main-content { 
            margin-left: 220px; 
            padding: 80px 20px 20px; 
            min-height: 100vh; 
            box-sizing: border-box;
            overflow-x: hidden;
        }
        .page { 
            width: 100%; 
            max-width: 100%;
            overflow: hidden;
        }
        
        /* 卡片统计 */
        .stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 20px; }
        .stat-card { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); min-width: 0; }
        .stat-card .label { color: #666; font-size: 14px; margin-bottom: 8px; }
        .stat-card .value { font-size: 28px; font-weight: bold; color: #333; overflow: hidden; text-overflow: ellipsis; }
        .stat-card .trend { font-size: 12px; margin-top: 8px; }
        .stat-card .trend.up { color: #52c41a; }
        .stat-card .trend.down { color: #ff4d4f; }
        
        /* 表格卡片 */
        .table-card { background: white; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); margin-bottom: 20px; overflow: hidden; }
        .table-card-header { padding: 15px 20px; border-bottom: 1px solid #f0f0f0; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; }
        .table-card-header h3 { font-size: 16px; font-weight: 500; }
        .table-card-header .actions { display: flex; gap: 10px; flex-shrink: 0; }
        .btn { padding: 8px 16px; border-radius: 4px; cursor: pointer; font-size: 14px; border: none; white-space: nowrap; }
        .btn-primary { background: #1890ff; color: white; }
        .btn-primary:hover { background: #096dd9; }
        .btn-default { background: #f0f0f0; color: #333; }
        .btn-default:hover { background: #e0e0e0; }
        
        /* 表格 */
        .table-wrapper { overflow-x: auto; }
        table { width: 100%; border-collapse: collapse; min-width: 600px; }
        th, td { padding: 12px 15px; text-align: left; border-bottom: 1px solid #f0f0f0; white-space: nowrap; }
        th { background: #fafafa; font-weight: 500; color: #333; position: sticky; top: 0; }
        tbody tr:hover { background: #f5f5f5; cursor: pointer; }
        
        /* 状态标签 */
        .status { padding: 4px 8px; border-radius: 4px; font-size: 12px; white-space: nowrap; }
        .status-success { background: #f6ffed; color: #52c41a; }
        .status-warning { background: #fffbe6; color: #faad14; }
        .status-error { background: #fff2f0; color: #ff4d4f; }
        .status-info { background: #e6f7ff; color: #1890ff; }
        
        /* 分页 */
        .pagination { padding: 15px 20px; display: flex; justify-content: flex-end; align-items: center; gap: 10px; flex-shrink: 0; }
        .pagination button { padding: 6px 12px; border: 1px solid #d9d9d9; background: white; cursor: pointer; border-radius: 4px; }
        .pagination button:hover { border-color: #1890ff; color: #1890ff; }
        .pagination button.active { background: #1890ff; color: white; border-color: #1890ff; }
        
        /* 模态框 */
        .modal { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 1000; align-items: center; justify-content: center; }
        .modal.show { display: flex; }
        .modal-content { background: white; border-radius: 8px; width: 600px; max-width: 90%; max-height: 90vh; overflow: hidden; animation: fadeIn 0.3s; flex-shrink: 0; }
        @keyframes fadeIn { from { opacity: 0; transform: scale(0.95); } }
        .modal-header { padding: 15px 20px; border-bottom: 1px solid #f0f0f0; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; }
        .modal-header h3 { font-size: 16px; }
        .modal-close { background: none; border: none; font-size: 24px; cursor: pointer; color: #999; }
        .modal-close:hover { color: #333; }
        .modal-body { padding: 20px; max-height: 60vh; overflow-y: auto; }
        .modal-footer { padding: 15px 20px; border-top: 1px solid #f0f0f0; display: flex; justify-content: flex-end; gap: 10px; flex-shrink: 0; }
        
        /* 表单 */
        .form-group { margin-bottom: 15px; }
        .form-group label { display: block; margin-bottom: 8px; font-size: 14px; color: #333; }
        .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 10px 12px; border: 1px solid #d9d9d9; border-radius: 4px; font-size: 14px; box-sizing: border-box; }
        .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: #1890ff; }
        .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
        
        /* 筛选栏 */
        .filter-bar { padding: 15px 20px; background: #fafafa; border-bottom: 1px solid #f0f0f0; display: flex; gap: 15px; flex-wrap: wrap; align-items: center; flex-shrink: 0; }
        .filter-bar select, .filter-bar input { padding: 6px 12px; border: 1px solid #d9d9d9; border-radius: 4px; font-size: 14px; white-space: nowrap; }
        
        /* 网格布局 */
        .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; min-width: 0; }
        .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; min-width: 0; }
        
        /* 列表项 */
        .list-item { padding: 15px 20px; border-bottom: 1px solid #f0f0f0; display: flex; align-items: center; gap: 15px; min-width: 0; }
        .list-item:hover { background: #f5f5f5; }
        .list-item .icon { width: 40px; height: 40px; background: #e6f7ff; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
        .list-item .info { flex: 1; min-width: 0; }
        .list-item .title { font-weight: 500; margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .list-item .desc { font-size: 12px; color: #999; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        
        /* Tab页签 */
        .tabs { display: flex; border-bottom: 1px solid #f0f0f0; background: white; overflow-x: auto; flex-shrink: 0; }
        .tab { padding: 15px 20px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
        .tab:hover { color: #1890ff; }
        .tab.active { color: #1890ff; border-bottom-color: #1890ff; }
        
        /* 图表区域占位 */
        .chart-placeholder { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); height: 300px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: white; font-size: 18px; min-width: 0; }
        
        /* 响应式 */
        @media (max-width: 1400px) {
            .stats-row { grid-template-columns: repeat(2, 1fr); }
        }
        @media (max-width: 1200px) {
            .grid-2, .grid-3 { grid-template-columns: 1fr; }
        }
        @media (max-width: 768px) {
            .stats-row { grid-template-columns: 1fr; }
            .filter-bar { flex-direction: column; align-items: stretch; }
        }
        
        /* 操作按钮 */
        .action-btns { display: flex; gap: 5px; flex-wrap: nowrap; }
        .action-btn { padding: 4px 8px; border: none; background: none; color: #1890ff; cursor: pointer; font-size: 12px; white-space: nowrap; }
        .action-btn:hover { text-decoration: underline; }
        
        /* 通知列表 */
        .notification-list { max-height: 400px; overflow-y: auto; }
        .notification-item { padding: 12px 15px; border-bottom: 1px solid #f0f0f0; display: flex; gap: 12px; }
        .notification-item .icon-circle { width: 8px; height: 8px; background: #ff4d4f; border-radius: 50%; margin-top: 6px; flex-shrink: 0; }
        .notification-item .content { flex: 1; min-width: 0; }
        .notification-item .title { font-weight: 500; margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; }
        .notification-item .time { font-size: 12px; color: #999; }
    </style>
</head>
<body>
    <!-- 登录页 -->
    <div class="login-page" id="loginPage">
        <div class="login-box">
            <h1>物业管理系统</h1>
            <input type="text" placeholder="用户名" value="admin">
            <input type="password" placeholder="密码" value="123456">
            <button onclick="login()">登 录</button>
        </div>
    </div>
    
    <!-- 主布局 -->
    <div class="main-layout" id="mainLayout">
        <!-- 左侧导航 -->
        <div class="sidebar">
            <div class="sidebar-logo">🏢 物业管理平台</div>
            <div class="sidebar-menu">
                <div class="menu-section">数据中心</div>
                <div class="menu-item active" onclick="showPage('dashboard')">
                    <span class="icon">📊</span><span>数据看板</span>
                </div>
                
                <div class="menu-section">管理端</div>
                <div class="menu-item" onclick="toggleMenu(this)">
                    <span class="icon">📝</span><span>合同管理</span><span class="arrow">▶</span>
                </div>
                <div class="submenu">
                    <div class="submenu-item" onclick="showPage('contract-apply')">非项目合同申请</div>
                    <div class="submenu-item" onclick="showPage('contract-approve')">合同审批</div>
                    <div class="submenu-item" onclick="showPage('contract-archive')">合同归档留存</div>
                </div>
                <div class="menu-item" onclick="toggleMenu(this)">
                    <span class="icon">💰</span><span>费用收缴</span><span class="arrow">▶</span>
                </div>
                <div class="submenu">
                    <div class="submenu-item" onclick="showPage('fee-collection')">费用收缴管理</div>
                    <div class="submenu-item" onclick="showPage('fee-report')">收缴报表</div>
                </div>
                <div class="menu-item" onclick="showPage('energy-monitor')">
                    <span class="icon">⚡</span><span>能耗监控</span>
                </div>
                <div class="menu-item" onclick="showPage('repair-manage')">
                    <span class="icon">🔧</span><span>报事报修</span>
                </div>
                
                <div class="menu-section">运营端</div>
                <div class="menu-item" onclick="showPage('dispatch')">
                    <span class="icon">📋</span><span>派单管理</span>
                </div>
                <div class="menu-item" onclick="showPage('inspection')">
                    <span class="icon">🔍</span><span>巡检管理</span>
                </div>
                <div class="menu-item" onclick="showPage('complaint')">
                    <span class="icon">📢</span><span>投诉建议</span>
                </div>
                
                <div class="menu-section">行政端</div>
                <div class="menu-item" onclick="showPage('schedule')">
                    <span class="icon">📅</span><span>日程管理</span>
                </div>
                <div class="menu-item" onclick="showPage('meeting')">
                    <span class="icon">🏠</span><span>会议管理</span>
                </div>
                <div class="menu-item" onclick="showPage('notice')">
                    <span class="icon">📢</span><span>通知公告</span>
                </div>
                <div class="menu-item" onclick="showPage('seal')">
                    <span class="icon">🔏</span><span>公章管理</span>
                </div>
                <div class="menu-item" onclick="showPage('visitor')">
                    <span class="icon">👤</span><span>访客管理</span>
                </div>
                
                <div class="menu-section">仓库端</div>
                <div class="menu-item" onclick="showPage('warehouse')">
                    <span class="icon">📦</span><span>仓库管理</span>
                </div>
                
                <div class="menu-section">人事财务端</div>
                <div class="menu-item" onclick="showPage('hr')">
                    <span class="icon">👥</span><span>人事管理</span>
                </div>
                <div class="menu-item" onclick="showPage('finance')">
                    <span class="icon">💼</span><span>财务管理</span>
                </div>
                
                <div class="menu-section">维保端</div>
                <div class="menu-item" onclick="showPage('equipment')">
                    <span class="icon">🔧</span><span>设备维保</span>
                </div>
                <div class="menu-item" onclick="showPage('cleaning')">
                    <span class="icon">🧹</span><span>保洁管理</span>
                </div>
                <div class="menu-item" onclick="showPage('fire')">
                    <span class="icon">🔥</span><span>消防管理</span>
                </div>
                <div class="menu-item" onclick="showPage('parking')">
                    <span class="icon">🚗</span><span>停车管理</span>
                </div>
                
                <div class="menu-section">系统设置</div>
                <div class="menu-item" onclick="showPage('settings')">
                    <span class="icon">⚙️</span><span>权限管理</span>
                </div>
            </div>
        </div>
        
        <!-- 顶部 -->
        <div class="header">
            <div class="header-left">
                <h2 id="pageTitle">数据看板</h2>
            </div>
            <div class="header-right">
                <div class="header-bell" onclick="showModal('notificationModal')">
                    🔔<span class="badge">3</span>
                </div>
                <div class="header-user">
                    <div class="avatar">张</div>
                    <span>管理员</span>
                </div>
            </div>
        </div>
        
        <!-- 主内容 -->
        <div class="main-content">
            <!-- 数据看板 -->
            <div id="page-dashboard" class="page">
                <div class="stats-row">
                    <div class="stat-card">
                        <div class="label">今日报修工单</div>
                        <div class="value">28</div>
                        <div class="trend up">↑ 12% 较昨日</div>
                    </div>
                    <div class="stat-card">
                        <div class="label">待处理工单</div>
                        <div class="value">15</div>
                        <div class="trend down">↓ 5% 较昨日</div>
                    </div>
                    <div class="stat-card">
                        <div class="label">本月收缴率</div>
                        <div class="value">92%</div>
                        <div class="trend up">↑ 3% 较上月</div>
                    </div>
                    <div class="stat-card">
                        <div class="label">设备告警</div>
                        <div class="value">3</div>
                        <div class="trend down">↓ 2 较昨日</div>
                    </div>
                </div>
                <div class="grid-2">
                    <div class="table-card">
                        <div class="table-card-header">
                            <h3>工单进度追踪</h3>
                            <div class="actions">
                                <button class="btn btn-primary" onclick="showModal('dispatchModal')">+ 创建工单</button>
                            </div>
                        </div>
                        <div class="filter-bar">
                            <select><option>全部状态</option><option>待分派</option><option>处理中</option><option>已完成</option></select>
                            <input type="date">
                            <button class="btn btn-default">搜索</button>
                        </div>
                        <div class="table-wrapper"><div class="table-wrapper"><table>
                            <thead><tr><th>工单号</th><th>类型</th><th>位置</th><th>紧急程度</th><th>状态</th><th>操作</th></tr></thead>
                            <tbody>
                                <tr><td>WO2026051301</td><td>水龙头漏水</td><td>1号楼2单元</td><td><span class="status status-error">紧急</span></td><td><span class="status status-warning">处理中</span></td><td class="action-btns"><button class="action-btn">详情</button><button class="action-btn">调度</button></td></tr>
                                <tr><td>WO2026051302</td><td>电梯故障</td><td>2号楼</td><td><span class="status status-warning">急</span></td><td><span class="status status-info">已派单</span></td><td class="action-btns"><button class="action-btn">详情</button><button class="action-btn">调度</button></td></tr>
                                <tr><td>WO2026051303</td><td>门禁故障</td><td>3号楼1单元</td><td><span class="status status-info">普通</span></td><td><span class="status status-success">已完成</span></td><td class="action-btns"><button class="action-btn">详情</button></td></tr>
                                <tr><td>WO2026051304</td><td>路灯不亮</td><td>小区主干道</td><td><span class="status status-info">普通</span></td><td><span class="status status-warning">待派单</span></td><td class="action-btns"><button class="action-btn">详情</button><button class="action-btn">派单</button></td></tr>
                                <tr><td>WO2026051305</td><td>空调不制热</td><td>物业办公室</td><td><span class="status status-warning">急</span></td><td><span class="status status-warning">处理中</span></td><td class="action-btns"><button class="action-btn">详情</button><button class="action-btn">调度</button></td></tr>
                            </tbody>
                        </table></div></div>
                        <div class="pagination">
                            <button>«</button><button>‹</button><button class="active">1</button><button>2</button><button>3</button><button>›</button><button>»</button>
                        </div>
                    </div>
                    <div class="table-card">
                        <div class="table-card-header">
                            <h3>能耗监控概览</h3>
                            <button class="btn btn-default">查看详情</button>
                        </div>
                        <div class="chart-placeholder">📈 能耗趋势图表区域</div>
                    </div>
                </div>
                <div class="grid-3">
                    <div class="table-card">
                        <div class="table-card-header"><h3>待缴费提醒</h3></div>
                        <div class="list-item"><div class="info"><div class="title">李明 - 1号楼101</div><div class="desc">欠费金额 ¥2,580</div></div><span class="status status-warning">待缴</span></div>
                        <div class="list-item"><div class="info"><div class="title">王芳 - 2号楼202</div><div class="desc">欠费金额 ¥3,200</div></div><span class="status status-warning">待缴</span></div>
                        <div class="list-item"><div class="info"><div class="title">张伟 - 3号楼301</div><div class="desc">欠费金额 ¥1,850</div></div><span class="status status-warning">待缴</span></div>
                    </div>
                    <div class="table-card">
                        <div class="table-card-header"><h3>设备告警</h3></div>
                        <div class="list-item"><div class="icon">⚠️</div><div class="info"><div class="title">电梯故障 - 2号楼</div><div class="desc">10:30 发生</div></div></div>
                        <div class="list-item"><div class="icon">⚠️</div><div class="info"><div class="title">消防报警 - 3号楼</div><div class="desc">09:15 发生</div></div></div>
                        <div class="list-item"><div class="icon">💡</div><div class="info"><div class="title">能耗超限 - 地下车库</div><div class="desc">08:00 发生</div></div></div>
                    </div>
                    <div class="table-card">
                        <div class="table-card-header"><h3>巡检任务</h3></div>
                        <div class="list-item"><div class="icon">✓</div><div class="info"><div class="title">电梯巡检 - 1号楼</div><div class="desc">已完成</div></div></div>
                        <div class="list-item"><div class="icon">⏳</div><div class="info"><div class="title">消防巡检 - 地下车库</div><div class="desc">进行中</div></div></div>
                        <div class="list-item"><div class="icon">○</div><div class="info"><div class="title">保洁巡检 - 小区绿化</div><div class="desc">待执行</div></div></div>
                    </div>
                </div>
            </div>
            
            <!-- 合同审批 -->
            <div id="page-contract-approve" class="page" style="display:none">
                <div class="stats-row">
                    <div class="stat-card"><div class="label">待审批</div><div class="value">8</div><div class="trend up">需要处理</div></div>
                    <div class="stat-card"><div class="label">今日审批</div><div class="value">3</div></div>
                    <div class="stat-card"><div class="label">本周通过</div><div class="value">12</div></div>
                    <div class="stat-card"><div class="label">驳回</div><div class="value">2</div></div>
                </div>
                <div class="table-card">
                    <div class="table-card-header"><h3>合同审批列表</h3></div>
                    <div class="filter-bar">
                        <select><option>全部</option><option>待审批</option><option>已通过</option><option>已驳回</option></select>
                        <select><option>全部环节</option><option>部门领导</option><option>总经理助理</option><option>总经理</option></select>
                        <input type="date"><span>至</span><input type="date">
                        <button class="btn btn-default">搜索</button>
                    </div>
                    <div class="table-wrapper"><table>
                        <thead><tr><th>申请部门</th><th>合同名称</th><th>金额(元)</th><th>申请人</th><th>申请时间</th><th>当前环节</th><th>状态</th><th>操作</th></tr></thead>
                        <tbody>
                            <tr><td>物业部</td><td>电梯维保合同</td><td>120,000</td><td>张强</td><td>2026-05-10</td><td>一级部门领导</td><td><span class="status status-warning">审批中</span></td><td class="action-btns"><button class="action-btn">详情</button><button class="action-btn">审批</button></td></tr>
                            <tr><td>维修部</td><td>设备采购合同</td><td>85,000</td><td>李娜</td><td>2026-05-08</td><td>总经理</td><td><span class="status status-warning">审批中</span></td><td class="action-btns"><button class="action-btn">详情</button><button class="action-btn">审批</button></td></tr>
                            <tr><td>保洁部</td><td>清洁用品采购</td><td>35,000</td><td>王芳</td><td>2026-05-09</td><td>部门领导</td><td><span class="status status-warning">审批中</span></td><td class="action-btns"><button class="action-btn">详情</button><button class="action-btn">审批</button></td></tr>
                            <tr><td>绿化部</td><td>绿化养护合同</td><td>68,000</td><td>刘伟</td><td>2026-05-07</td><td>已完成</td><td><span class="status status-success">已通过</span></td><td class="action-btns"><button class="action-btn">详情</button><button class="action-btn">下载</button></td></tr>
                            <tr><td>安保部</td><td>监控升级合同</td><td>150,000</td><td>陈刚</td><td>2026-05-06</td><td>已完成</td><td><span class="status status-error">已驳回</span></td><td class="action-btns"><button class="action-btn">详情</button></td></tr>
                        </tbody>
                    </table></div>
                    <div class="pagination">
                        <button>«</button><button>‹</button><button class="active">1</button><button>2</button><button>›</button><button>»</button>
                    </div>
                </div>
            </div>
            
            <!-- 合同归档留存 -->
            <div id="page-contract-archive" class="page" style="display:none">
                <div class="stats-row">
                    <div class="stat-card"><div class="label">合同总数</div><div class="value">156</div></div>
                    <div class="stat-card"><div class="label">执行中</div><div class="value">89</div></div>
                    <div class="stat-card"><div class="label">即将到期</div><div class="value">5</div><div class="trend down">需续签</div></div>
                    <div class="stat-card"><div class="label">已完成</div><div class="value">62</div></div>
                </div>
                <div class="table-card">
                    <div class="table-card-header"><h3>合同档案管理</h3><button class="btn btn-default">导出全部</button></div>
                    <div class="filter-bar">
                        <input type="text" placeholder="搜索合同名称/编号" style="width:200px">
                        <select><option>全部类型</option><option>维保合同</option><option>采购合同</option><option>服务合同</option><option>租赁合同</option></select>
                        <select><option>全部状态</option><option>执行中</option><option>已完成</option><option>已到期</option></select>
                        <button class="btn btn-default">搜索</button>
                    </div>
                    <div class="table-wrapper"><table>
                        <thead><tr><th>合同编号</th><th>合同名称</th><th>签约方</th><th>金额(元)</th><th>有效期</th><th>到期提醒</th><th>状态</th><th>操作</th></tr></thead>
                        <tbody>
                            <tr><td>HT202501001</td><td>电梯维保合同</td><td>xxx电梯公司</td><td>120,000</td><td>2025.01-2025.12</td><td><span class="status status-warning">30天后到期</span></td><td><span class="status status-success">执行中</span></td><td class="action-btns"><button class="action-btn">查看</button><button class="action-btn">下载</button><button class="action-btn">续签</button></td></tr>
                            <tr><td>HT202412002</td><td>保洁服务合同</td><td>xxx保洁公司</td><td>85,000</td><td>2024.12-2025.12</td><td><span class="status status-error">15天后到期</span></td><td><span class="status status-success">执行中</span></td><td class="action-btns"><button class="action-btn">查看</button><button class="action-btn">下载</button><button class="action-btn">续签</button></td></tr>
                            <tr><td>HT202401003</td><td>绿化养护合同</td><td>xxx园林公司</td><td>68,000</td><td>2024.01-2024.12</td><td>已到期</td><td><span class="status status-info">已完成</span></td><td class="action-btns"><button class="action-btn">查看</button><button class="action-btn">下载</button></td></tr>
                            <tr><td>HT202403004</td><td>监控设备采购</td><td>xxx科技公司</td><td>156,000</td><td>2024.03-2026.03</td><td>-</td><td><span class="status status-success">执行中</span></td><td class="action-btns"><button class="action-btn">查看</button><button class="action-btn">下载</button></td></tr>
                        </tbody>
                    </table></div>
                    <div class="pagination">
                        <button>«</button><button>‹</button><button class="active">1</button><button>2</button><button>3</button><button>›</button><button>»</button>
                    </div>
                </div>
            </div>
            
            <!-- 收缴报表 -->
            <div id="page-fee-report" class="page" style="display:none">
                <div class="stats-row">
                    <div class="stat-card"><div class="label">本年累计收缴</div><div class="value">¥2,856,000</div><div class="trend up">较去年↑15%</div></div>
                    <div class="stat-card"><div class="label">综合收缴率</div><div class="value">94.5%</div><div class="trend up">↑2.3%</div></div>
                    <div class="stat-card"><div class="label">欠费总额</div><div class="value">¥158,000</div><div class="trend down">23户</div></div>
                    <div class="stat-card"><div class="label">预收金额</div><div class="value">¥85,600</div></div>
                </div>
                <div class="grid-2">
                    <div class="table-card">
                        <div class="table-card-header"><h3>月度收缴趋势</h3><button class="btn btn-default">导出</button></div>
                        <div class="chart-placeholder">📊 收缴率折线图</div>
                    </div>
                    <div class="table-card">
                        <div class="table-card-header"><h3>收缴构成分析</h3></div>
                        <div class="chart-placeholder">🥧 收缴类型饼图</div>
                    </div>
                </div>
                <div class="table-card" style="margin-top:20px;">
                    <div class="table-card-header"><h3>收缴明细报表</h3><button class="btn btn-default">导出报表</button></div>
                    <div class="filter-bar">
                        <select><option>全部月份</option><option>2026-05</option><option>2026-04</option><option>2026-03</option></select>
                        <select><option>全部类型</option><option>物业费</option><option>水电费</option><option>停车费</option></select>
                        <button class="btn btn-default">搜索</button>
                    </div>
                    <div class="table-wrapper"><table>
                        <thead><tr><th>月份</th><th>应收金额</th><th>实收金额</th><th>收缴率</th><th>欠费金额</th><th>环比</th></tr></thead>
                        <tbody>
                            <tr><td>2026-05</td><td>¥285,600</td><td>¥262,752</td><td>92%</td><td>¥22,848</td><td><span class="status status-success">↑3%</span></td></tr>
                            <tr><td>2026-04</td><td>¥280,000</td><td>¥249,200</td><td>89%</td><td>¥30,800</td><td><span class="status status-success">↑2%</span></td></tr>
                            <tr><td>2026-03</td><td>¥275,000</td><td>¥239,250</td><td>87%</td><td>¥35,750</td><td><span class="status status-warning">↓1%</span></td></tr>
                        </tbody>
                    </table></div>
                </div>
            </div>
            
            <!-- 能耗监控 -->
            <div id="page-energy-monitor" class="page" style="display:none">
                <div class="stats-row">
                    <div class="stat-card"><div class="label">本月用电</div><div class="value">45,280 kWh</div><div class="trend up">↓ 8% 较上月</div></div>
                    <div class="stat-card"><div class="label">本月用水</div><div class="value">3,260 m³</div><div class="trend down">↑ 3% 较上月</div></div>
                    <div class="stat-card"><div class="label">节能目标达成</div><div class="value">92%</div></div>
                </div>
                <div class="grid-2">
                    <div class="table-card">
                        <div class="table-card-header"><h3>区域用电排名</h3></div>
                        <div class="table-wrapper"><table>
                            <thead><tr><th>区域</th><th>用电量(kWh)</th><th>占比</th></tr></thead>
                            <tbody>
                                <tr><td>地下车库</td><td>12,500</td><td>27.6%</td></tr>
                                <tr><td>电梯</td><td>8,200</td><td>18.1%</td></tr>
                                <tr><td>公共照明</td><td>6,800</td><td>15.0%</td></tr>
                            </tbody>
                        </table></div>
                    </div>
                    <div class="table-card">
                        <div class="table-card-header"><h3>能耗异常告警</h3></div>
                        <div class="list-item"><div class="icon">!</div><div class="info"><div class="title">地下车库 - 用电量异常</div><div class="desc">较昨日增长 45%</div></div></div>
                        <div class="list-item"><div class="icon">!</div><div class="info"><div class="title">3号楼电梯 - 能耗超标</div><div class="desc">超过阈值 20%</div></div></div>
                    </div>
                </div>
            </div>
            
            <!-- 报事报修 -->
            <div id="page-repair-manage" class="page" style="display:none">
                <div class="stats-row">
                    <div class="stat-card"><div class="label">今日报修</div><div class="value">28</div><div class="trend up">↑12%</div></div>
                    <div class="stat-card"><div class="label">待处理</div><div class="value">12</div><div class="trend down">↓5%</div></div>
                    <div class="stat-card"><div class="label">处理中</div><div class="value">8</div></div>
                    <div class="stat-card"><div class="label">本月完成</div><div class="value">486</div><div class="trend up">满意度98%</div></div>
                </div>
                <div class="grid-2">
                    <div class="table-card">
                        <div class="table-card-header"><h3>报事报修管理</h3><button class="btn btn-primary" onclick="showModal('dispatchModal')">+ 新建报修</button></div>
                        <div class="tabs">
                            <div class="tab active">全部 (89)</div>
                            <div class="tab">待处理 (12)</div>
                            <div class="tab">处理中 (15)</div>
                            <div class="tab">已完成 (62)</div>
                        </div>
                        <div class="filter-bar">
                            <select><option>全部类型</option><option>水</option><option>电</option><option>门禁</option><option>电梯</option><option>其他</option></select>
                            <select><option>全部紧急度</option><option>紧急</option><option>急</option><option>普通</option></select>
                            <input type="date"><span>至</span><input type="date">
                            <button class="btn btn-default">搜索</button>
                        </div>
                        <div class="table-wrapper"><table>
                            <thead><tr><th>工单号</th><th>报修类型</th><th>位置</th><th>报修人</th><th>紧急程度</th><th>处理人</th><th>状态</th><th>操作</th></tr></thead>
                            <tbody>
                                <tr><td>BX2026051301</td><td>水龙头漏水</td><td>1-2-101</td><td>李明</td><td><span class="status status-error">紧急</span></td><td>张三</td><td><span class="status status-warning">处理中</span></td><td class="action-btns"><button class="action-btn">详情</button><button class="action-btn">调度</button></td></tr>
                                <tr><td>BX2026051302</td><td>门禁故障</td><td>2-1-门口</td><td>王芳</td><td><span class="status status-warning">急</span></td><td>李四</td><td><span class="status status-success">已完成</span></td><td class="action-btns"><button class="action-btn">详情</button></td></tr>
                                <tr><td>BX2026051303</td><td>电梯故障</td><td>3号楼</td><td>张伟</td><td><span class="status status-error">紧急</span></td><td>王五</td><td><span class="status status-info">已派单</span></td><td class="action-btns"><button class="action-btn">详情</button><button class="action-btn">调度</button></td></tr>
                                <tr><td>BX2026051304</td><td>灯泡损坏</td><td>1楼走廊</td><td>刘芳</td><td><span class="status status-info">普通</span></td><td>-</td><td><span class="status status-warning">待派单</span></td><td class="action-btns"><button class="action-btn">详情</button><button class="action-btn">派单</button></td></tr>
                                <tr><td>BX2026051305</td><td>空调不制热</td><td>物业办公室</td><td>陈刚</td><td><span class="status status-warning">急</span></td><td>赵六</td><td><span class="status status-warning">处理中</span></td><td class="action-btns"><button class="action-btn">详情</button><button class="action-btn">调度</button></td></tr>
                            </tbody>
                        </table></div>
                        <div class="pagination">
                            <button>«</button><button>‹</button><button class="active">1</button><button>2</button><button>3</button><button>›</button><button>»</button>
                        </div>
                    </div>
                    <div class="table-card">
                        <div class="table-card-header"><h3>处理效率统计</h3></div>
                        <div class="chart-placeholder">📊 处理时效柱状图</div>
                        <div style="padding:20px;">
                            <div style="margin-bottom:15px;display:flex;justify-content:space-between;"><span>平均响应时间</span><strong>15分钟</strong></div>
                            <div style="margin-bottom:15px;display:flex;justify-content:space-between;"><span>平均处理时长</span><strong>2.5小时</strong></div>
                            <div style="margin-bottom:15px;display:flex;justify-content:space-between;"><span>按时完成率</span><strong>96%</strong></div>
                            <div style="display:flex;justify-content:space-between;"><span>用户满意度</span><strong>98%</strong></div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 合同管理页面 -->
            <div id="page-contract-apply" class="page" style="display:none">
                <div class="stats-row">
                    <div class="stat-card"><div class="label">本月申请</div><div class="value">12</div><div class="trend up">↑ 3 较上月</div></div>
                    <div class="stat-card"><div class="label">审批中</div><div class="value">5</div></div>
                    <div class="stat-card"><div class="label">已通过</div><div class="value">6</div></div>
                    <div class="stat-card"><div class="label">总金额</div><div class="value">¥865,000</div></div>
                </div>
                <div class="table-card">
                    <div class="table-card-header">
                        <h3>非项目合同申请</h3>
                        <button class="btn btn-primary" onclick="showModal('contractModal')">+ 新建申请</button>
                    </div>
                    <div class="filter-bar">
                        <select><option>全部状态</option><option>草稿</option><option>审批中</option><option>已通过</option><option>已驳回</option></select>
                        <input type="text" placeholder="合同名称/编号" style="width:200px">
                        <button class="btn btn-default">搜索</button>
                    </div>
                    <div class="table-wrapper"><table>
                        <thead><tr><th>合同编号</th><th>合同名称</th><th>签约方</th><th>金额(元)</th><th>申请日期</th><th>申请人</th><th>状态</th><th>操作</th></tr></thead>
                        <tbody>
                            <tr><td>HT202605001</td><td>电梯维保合同</td><td>xxx电梯公司</td><td>120,000</td><td>2026-05-10</td><td>张强</td><td><span class="status status-warning">审批中</span></td><td class="action-btns"><button class="action-btn">详情</button><button class="action-btn">编辑</button></td></tr>
                            <tr><td>HT202605002</td><td>保洁服务合同</td><td>xxx保洁公司</td><td>85,000</td><td>2026-05-08</td><td>李娜</td><td><span class="status status-success">已通过</span></td><td class="action-btns"><button class="action-btn">详情</button><button class="action-btn">下载</button></td></tr>
                            <tr><td>HT202605003</td><td>绿化养护合同</td><td>xxx园林公司</td><td>60,000</td><td>2026-05-12</td><td>王伟</td><td><span class="status status-info">草稿</span></td><td class="action-btns"><button class="action-btn">详情</button><button class="action-btn">编辑</button><button class="action-btn">提交</button></td></tr>
                            <tr><td>HT202605004</td><td>消防维保合同</td><td>xxx消防公司</td><td>95,000</td><td>2026-05-11</td><td>赵明</td><td><span class="status status-warning">审批中</span></td><td class="action-btns"><button class="action-btn">详情</button><button class="action-btn">撤回</button></td></tr>
                            <tr><td>HT202605005</td><td>监控设备采购</td><td>xxx科技公司</td><td>156,000</td><td>2026-05-06</td><td>刘芳</td><td><span class="status status-success">已通过</span></td><td class="action-btns"><button class="action-btn">详情</button><button class="action-btn">下载</button></td></tr>
                            <tr><td>HT202605006</td><td>门禁系统升级</td><td>xxx智能公司</td><td>230,000</td><td>2026-05-09</td><td>陈刚</td><td><span class="status status-error">已驳回</span></td><td class="action-btns"><button class="action-btn">详情</button><button class="action-btn">编辑</button></td></tr>
                        </tbody>
                    </table></div>
                    <div class="pagination">
                        <button>«</button><button>‹</button><button class="active">1</button><button>2</button><button>›</button><button>»</button>
                    </div>
                </div>
            </div>
            
            <!-- 巡检管理 -->
            <div id="page-inspection" class="page" style="display:none">
                <div class="stats-row">
                    <div class="stat-card"><div class="label">今日巡检</div><div class="value">15</div><div class="trend up">↑3 较昨日</div></div>
                    <div class="stat-card"><div class="label">完成率</div><div class="value">92%</div><div class="trend up">↑5%</div></div>
                    <div class="stat-card"><div class="label">异常发现</div><div class="value">3</div><div class="trend down">需处理</div></div>
                    <div class="stat-card"><div class="label">本月巡检</div><div class="value">286</div></div>
                </div>
                <div class="grid-2">
                    <div class="table-card">
                        <div class="table-card-header"><h3>巡检计划</h3><button class="btn btn-primary">+ 新建计划</button></div>
                        <div class="tabs">
                            <div class="tab active">全部计划</div>
                            <div class="tab">日常巡检</div>
                            <div class="tab">设备巡检</div>
                            <div class="tab">安全巡检</div>
                        </div>
                        <div class="filter-bar">
                            <select><option>全部区域</option><option>1-3号楼</option><option>地下车库</option><option>公共区域</option></select>
                            <select><option>全部状态</option><option>启用</option><option>暂停</option></select>
                            <button class="btn btn-default">搜索</button>
                        </div>
                        <div class="table-wrapper"><table>
                            <thead><tr><th>计划名称</th><th>巡检区域</th><th>周期</th><th>执行人</th><th>下次执行</th><th>完成率</th><th>状态</th><th>操作</th></tr></thead>
                            <tbody>
                                <tr><td>电梯月度巡检</td><td>1-6号楼电梯</td><td>每月1次</td><td>张伟</td><td>2026-06-01</td><td>100%</td><td><span class="status status-success">启用</span></td><td class="action-btns"><button class="action-btn">编辑</button><button class="action-btn">执行</button><button class="action-btn">记录</button></td></tr>
                                <tr><td>消防设施巡检</td><td>地下车库</td><td>每周1次</td><td>李强</td><td>2026-05-18</td><td>85%</td><td><span class="status status-success">启用</span></td><td class="action-btns"><button class="action-btn">编辑</button><button class="action-btn">执行</button><button class="action-btn">记录</button></td></tr>
                                <tr><td>公共区域保洁巡检</td><td>小区公共区域</td><td>每日</td><td>王秀</td><td>2026-05-14</td><td>96%</td><td><span class="status status-success">启用</span></td><td class="action-btns"><button class="action-btn">编辑</button><button class="action-btn">执行</button><button class="action-btn">记录</button></td></tr>
                                <tr><td>门禁系统巡检</td><td>各楼栋入口</td><td>每周1次</td><td>赵明</td><td>2026-05-19</td><td>90%</td><td><span class="status status-success">启用</span></td><td class="action-btns"><button class="action-btn">编辑</button><button class="action-btn">执行</button><button class="action-btn">记录</button></td></tr>
                                <tr><td>绿化带巡检</td><td>小区绿化带</td><td>每周2次</td><td>刘芳</td><td>2026-05-15</td><td>88%</td><td><span class="status status-success">启用</span></td><td class="action-btns"><button class="action-btn">编辑</button><button class="action-btn">执行</button><button class="action-btn">记录</button></td></tr>
                            </tbody>
                        </table></div>
                        <div class="pagination">
                            <button>«</button><button>‹</button><button class="active">1</button><button>2</button><button>›</button><button>»</button>
                        </div>
                    </div>
                    <div class="table-card">
                        <div class="table-card-header"><h3>巡检异常记录</h3></div>
                        <div class="table-wrapper"><table>
                            <thead><tr><th>时间</th><th>区域</th><th>异常描述</th><th>处理状态</th></tr></thead>
                            <tbody>
                                <tr><td>05-13 09:30</td><td>2号楼电梯</td><td>电梯异响</td><td><span class="status status-warning">处理中</span></td></tr>
                                <tr><td>05-12 14:20</td><td>地下车库</td><td>消防栓异常</td><td><span class="status status-success">已处理</span></td></tr>
                                <tr><td>05-11 16:00</td><td>3号楼门禁</td><td>门禁读卡器故障</td><td><span class="status status-success">已处理</span></td></tr>
                            </tbody>
                        </table></div>
                        <div style="padding:15px;border-top:1px solid #f0f0f0;">
                            <h4 style="margin-bottom:10px;">巡检完成情况</h4>
                            <div style="display:flex;justify-content:space-between;margin-bottom:8px;"><span>今日应巡检</span><strong>15</strong></div>
                            <div style="display:flex;justify-content:space-between;margin-bottom:8px;"><span>实际完成</span><strong style="color:#52c41a;">14</strong></div>
                            <div style="display:flex;justify-content:space-between;"><span>完成率</span><strong>92%</strong></div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 投诉建议 -->
            <div id="page-complaint" class="page" style="display:none">
                <div class="stats-row">
                    <div class="stat-card"><div class="label">本月投诉</div><div class="value">18</div><div class="trend down">↓3 较上月</div></div>
                    <div class="stat-card"><div class="label">本月建议</div><div class="value">12</div><div class="trend up">↑2</div></div>
                    <div class="stat-card"><div class="label">待处理</div><div class="value">5</div><div class="trend down">需处理</div></div>
                    <div class="stat-card"><div class="label">处理时效</div><div class="value">94%</div><div class="trend up">满意率</div></div>
                </div>
                <div class="grid-2">
                    <div class="table-card">
                        <div class="table-card-header"><h3>投诉建议处理</h3><button class="btn btn-primary">+ 新建工单</button></div>
                        <div class="tabs">
                            <div class="tab active">全部 (30)</div>
                            <div class="tab">待处理 (5)</div>
                            <div class="tab">处理中 (8)</div>
                            <div class="tab">已闭环 (17)</div>
                        </div>
                        <div class="filter-bar">
                            <select><option>全部类型</option><option>投诉</option><option>建议</option></select>
                            <select><option>全部类别</option><option>环境</option><option>服务</option><option>设施</option><option>安全</option></select>
                            <input type="text" placeholder="关键词搜索" style="width:150px">
                            <button class="btn btn-default">搜索</button>
                        </div>
                        <div class="table-wrapper"><table>
                            <thead><tr><th>编号</th><th>类型</th><th>类别</th><th>内容摘要</th><th>提交人</th><th>提交时间</th><th>处理人</th><th>状态</th><th>操作</th></tr></thead>
                            <tbody>
                                <tr><td>TS202605001</td><td><span class="status status-error">投诉</span></td><td>环境</td><td>小区绿化带杂草丛生...</td><td>业主李明</td><td>2026-05-13 09:00</td><td>王强</td><td><span class="status status-warning">处理中</span></td><td class="action-btns"><button class="action-btn">详情</button><button class="action-btn">处理</button></td></tr>
                                <tr><td>TS202605002</td><td><span class="status status-error">投诉</span></td><td>服务</td><td>物业人员态度不好...</td><td>业主张华</td><td>2026-05-12 14:30</td><td>李娜</td><td><span class="status status-warning">处理中</span></td><td class="action-btns"><button class="action-btn">详情</button><button class="action-btn">处理</button></td></tr>
                                <tr><td>JY202605003</td><td><span class="status status-info">建议</span></td><td>设施</td><td>建议增加健身器材...</td><td>业主王芳</td><td>2026-05-11 10:15</td><td>张伟</td><td><span class="status status-success">已闭环</span></td><td class="action-btns"><button class="action-btn">详情</button></td></tr>
                                <tr><td>JY202605004</td><td><span class="status status-info">建议</span></td><td>环境</td><td>建议增设垃圾分类点...</td><td>业主刘伟</td><td>2026-05-10 16:20</td><td>赵明</td><td><span class="status status-success">已闭环</span></td><td class="action-btns"><button class="action-btn">详情</button></td></tr>
                                <tr><td>TS202605005</td><td><span class="status status-error">投诉</span></td><td>安全</td><td>楼道灯不亮存在隐患...</td><td>业主陈刚</td><td>2026-05-13 08:45</td><td>-</td><td><span class="status status-info">待处理</span></td><td class="action-btns"><button class="action-btn">详情</button><button class="action-btn">指派</button></td></tr>
                                <tr><td>JY202605006</td><td><span class="status status-info">建议</span></td><td>设施</td><td>建议安装电动车充电桩...</td><td>业主赵丽</td><td>2026-05-09 11:30</td><td>李强</td><td><span class="status status-success">已闭环</span></td><td class="action-btns"><button class="action-btn">详情</button></td></tr>
                            </tbody>
                        </table></div>
                        <div class="pagination">
                            <button>«</button><button>‹</button><button class="active">1</button><button>2</button><button>›</button><button>»</button>
                        </div>
                    </div>
                    <div class="table-card">
                        <div class="table-card-header"><h3>处理效率统计</h3></div>
                        <div class="table-wrapper"><table>
                            <thead><tr><th>处理人</th><th>本月处理</th><th>平均时长</th><th>满意度</th></tr></thead>
                            <tbody>
                                <tr><td>王强</td><td>8</td><td>1.5天</td><td>95%</td></tr>
                                <tr><td>李娜</td><td>6</td><td>2.0天</td><td>92%</td></tr>
                                <tr><td>张伟</td><td>5</td><td>1.2天</td><td>96%</td></tr>
                                <tr><td>赵明</td><td>4</td><td>2.5天</td><td>88%</td></tr>
                            </tbody>
                        </table></div>
                        <div style="padding:15px;border-top:1px solid #f0f0f0;">
                            <h4 style="margin-bottom:10px;">本月汇总</h4>
                            <div style="display:flex;justify-content:space-between;margin-bottom:8px;"><span>平均处理时长</span><strong>1.8天</strong></div>
                            <div style="display:flex;justify-content:space-between;"><span>闭环率</span><strong style="color:#52c41a;">85%</strong></div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 日程管理 -->
            <div id="page-schedule" class="page" style="display:none">
                <div class="stats-row">
                    <div class="stat-card"><div class="label">今日日程</div><div class="value">5</div></div>
                    <div class="stat-card"><div class="label">进行中</div><div class="value">1</div><div class="trend up">部门例会</div></div>
                    <div class="stat-card"><div class="label">本周日程</div><div class="value">28</div></div>
                    <div class="stat-card"><div class="label">已结束</div><div class="value">23</div></div>
                </div>
                <div class="grid-2">
                    <div class="table-card">
                        <div class="table-card-header"><h3>我的日程</h3><button class="btn btn-primary">+ 新建日程</button></div>
                        <div class="tabs">
                            <div class="tab active">今日</div>
                            <div class="tab">本周</div>
                            <div class="tab">本月</div>
                        </div>
                        <div class="filter-bar">
                            <select><option>全部类型</option><option>会议</option><option>拜访</option><option>培训</option><option>其他</option></select>
                            <button class="btn btn-default">搜索</button>
                        </div>
                        <div class="table-wrapper"><table>
                            <thead><tr><th>时间</th><th>标题</th><th>类型</th><th>地点</th><th>参与人</th><th>状态</th><th>操作</th></tr></thead>
                            <tbody>
                                <tr><td>10:00-11:30</td><td>部门周例会</td><td><span class="status status-info">会议</span></td><td>会议室A</td><td>张强、李娜、王伟</td><td><span class="status status-success">进行中</span></td><td class="action-btns"><button class="action-btn">详情</button><button class="action-btn">取消</button></td></tr>
                                <tr><td>14:00-15:00</td><td>客户拜访</td><td><span class="status status-warning">拜访</span></td><td>客户公司</td><td>独自</td><td><span class="status status-info">待执行</span></td><td class="action-btns"><button class="action-btn">详情</button><button class="action-btn">改期</button></td></tr>
                                <tr><td>16:00-17:00</td><td>项目评审会</td><td><span class="status status-info">会议</span></td><td>会议室B</td><td>张强、王芳、刘明</td><td><span class="status status-info">待执行</span></td><td class="action-btns"><button class="action-btn">详情</button><button class="action-btn">改期</button></td></tr>
                                <tr><td>09:00-10:00</td><td>新员工培训</td><td><span class="status status-success">培训</span></td><td>培训室</td><td>HR、实习生</td><td><span class="status status-success">已完成</span></td><td class="action-btns"><button class="action-btn">详情</button></td></tr>
                                <tr><td>15:00-16:00</td><td>供应商洽谈</td><td><span class="status status-warning">拜访</span></td><td>物业办公室</td><td>李娜、采购部</td><td><span class="status status-success">已完成</span></td><td class="action-btns"><button class="action-btn">详情</button></td></tr>
                            </tbody>
                        </table></div>
                        <div class="pagination">
                            <button>«</button><button>‹</button><button class="active">1</button><button>2</button><button>›</button><button>»</button>
                        </div>
                    </div>
                    <div class="table-card">
                        <div class="table-card-header"><h3>团队日程</h3></div>
                        <div class="table-wrapper"><table>
                            <thead><tr><th>人员</th><th>部门</th><th>今日日程数</th><th>下一个日程</th><th>空闲时间</th></tr></thead>
                            <tbody>
                                <tr><td>张强</td><td>物业部</td><td>3</td><td>16:00 项目评审会</td><td>11:30-14:00</td></tr>
                                <tr><td>李娜</td><td>维修部</td><td>2</td><td>14:00 客户拜访</td><td>15:00后空闲</td></tr>
                                <tr><td>王伟</td><td>保洁部</td><td>1</td><td>10:00 部门例会</td><td>12:00-14:00</td></tr>
                                <tr><td>刘芳</td><td>安保部</td><td>2</td><td>09:00 巡逻安排</td><td>17:00后空闲</td></tr>
                            </tbody>
                        </table></div>
                        <div style="padding:15px;border-top:1px solid #f0f0f0;">
                            <h4 style="margin-bottom:10px;">本周会议安排</h4>
                            <div style="display:flex;justify-content:space-between;margin-bottom:8px;"><span>周一</span><strong>3场</strong></div>
                            <div style="display:flex;justify-content:space-between;margin-bottom:8px;"><span>周三</span><strong>2场</strong></div>
                            <div style="display:flex;justify-content:space-between;"><span>周五</span><strong>1场</strong></div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 公章管理 -->
            <div id="page-seal" class="page" style="display:none">
                <div class="stats-row">
                    <div class="stat-card"><div class="label">本月用章</div><div class="value">12</div><div class="trend up">↑3 较上月</div></div>
                    <div class="stat-card"><div class="label">待审批</div><div class="value">2</div></div>
                    <div class="stat-card"><div class="label">已完成</div><div class="value">10</div></div>
                    <div class="stat-card"><div class="label">公章数量</div><div class="value">3</div></div>
                </div>
                <div class="grid-2">
                    <div class="table-card">
                        <div class="table-card-header"><h3>公章使用记录</h3><button class="btn btn-primary">+ 用章申请</button></div>
                        <div class="tabs">
                            <div class="tab active">全部 (15)</div>
                            <div class="tab">审批中 (2)</div>
                            <div class="tab">已通过 (10)</div>
                            <div class="tab">已驳回 (3)</div>
                        </div>
                        <div class="filter-bar">
                            <select><option>全部类型</option><option>合同盖章</option><option>证明开具</option><option>函件</option><option>其他</option></select>
                            <input type="date"><span>至</span><input type="date">
                            <button class="btn btn-default">搜索</button>
                        </div>
                        <div class="table-wrapper"><table>
                            <thead><tr><th>申请编号</th><th>用章类型</th><th>用章事由</th><th>申请人</th><th>申请时间</th><th>用章公章</th><th>审批状态</th><th>操作</th></tr></thead>
                            <tbody>
                                <tr><td>SZ202605001</td><td><span class="status status-info">合同</span></td><td>电梯维保合同盖章</td><td>张强</td><td>2026-05-13 09:00</td><td>公司公章</td><td><span class="status status-success">已通过</span></td><td class="action-btns"><button class="action-btn">详情</button><button class="action-btn">登记使用</button></td></tr>
                                <tr><td>SZ202605002</td><td><span class="status status-warning">证明</span></td><td>业主证明开具</td><td>李娜</td><td>2026-05-13 10:30</td><td>业务章</td><td><span class="status status-warning">审批中</span></td><td class="action-btns"><button class="action-btn">详情</button><button class="action-btn">审批</button></td></tr>
                                <tr><td>SZ202605003</td><td><span class="status status-success">函件</span></td><td>律师函盖章</td><td>王伟</td><td>2026-05-12 14:00</td><td>公司公章</td><td><span class="status status-success">已通过</span></td><td class="action-btns"><button class="action-btn">详情</button><button class="action-btn">登记使用</button></td></tr>
                                <tr><td>SZ202605004</td><td><span class="status status-info">合同</span></td><td>保洁合同盖章</td><td>赵明</td><td>2026-05-12 09:15</td><td>公司公章</td><td><span class="status status-success">已通过</span></td><td class="action-btns"><button class="action-btn">详情</button><button class="action-btn">登记使用</button></td></tr>
                                <tr><td>SZ202605005</td><td><span class="status status-warning">证明</span></td><td>在职证明开具</td><td>刘芳</td><td>2026-05-11 16:30</td><td>业务章</td><td><span class="status status-error">已驳回</span></td><td class="action-btns"><button class="action-btn">详情</button></td></tr>
                                <tr><td>SZ202605006</td><td><span class="status status-success">函件</span></td><td>付款通知书</td><td>陈刚</td><td>2026-05-11 11:00</td><td>财务章</td><td><span class="status status-warning">审批中</span></td><td class="action-btns"><button class="action-btn">详情</button><button class="action-btn">审批</button></td></tr>
                            </tbody>
                        </table></div>
                        <div class="pagination">
                            <button>«</button><button>‹</button><button class="active">1</button><button>2</button><button>›</button><button>»</button>
                        </div>
                    </div>
                    <div class="table-card">
                        <div class="table-card-header"><h3>公章台账</h3></div>
                        <div class="table-wrapper"><table>
                            <thead><tr><th>公章名称</th><th>类型</th><th>保管人</th><th>使用次数</th><th>最后使用</th></tr></thead>
                            <tbody>
                                <tr><td>公司公章</td><td>行政章</td><td>张强</td><td>8</td><td>2026-05-13</td></tr>
                                <tr><td>财务章</td><td>财务专用章</td><td>李娜</td><td>3</td><td>2026-05-11</td></tr>
                                <tr><td>业务章</td><td>合同专用章</td><td>王伟</td><td>4</td><td>2026-05-13</td></tr>
                            </tbody>
                        </table></div>
                        <div style="padding:15px;border-top:1px solid #f0f0f0;">
                            <h4 style="margin-bottom:10px;">用章须知</h4>
                            <div style="font-size:13px;color:#666;line-height:1.8;">
                                <p>1. 所有用章申请需提前1天提交</p>
                                <p>2. 合同类用章需附合同草稿</p>
                                <p>3. 证明类用章需附相关证明材料</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 费用收缴 -->
            <div id="page-fee-collection" class="page" style="display:none">
                <div class="stats-row">
                    <div class="stat-card"><div class="label">本月应收</div><div class="value">¥285,600</div><div class="trend up">↑8% 较上月</div></div>
                    <div class="stat-card"><div class="label">本月实收</div><div class="value">¥262,752</div><div class="trend up">收缴率 92%</div></div>
                    <div class="stat-card"><div class="label">欠费金额</div><div class="value">¥22,848</div><div class="trend down">共23户</div></div>
                    <div class="stat-card"><div class="label">预收金额</div><div class="value">¥15,200</div><div class="trend up">待确认</div></div>
                </div>
                <div class="grid-2">
                    <div class="table-card">
                        <div class="table-card-header"><h3>费用收缴记录</h3><button class="btn btn-primary">+ 新增缴费</button></div>
                        <div class="tabs">
                            <div class="tab active">全部 (156)</div>
                            <div class="tab">已缴 (120)</div>
                            <div class="tab">欠费 (23)</div>
                            <div class="tab">预缴 (13)</div>
                        </div>
                        <div class="filter-bar">
                            <select><option>全部类型</option><option>物业费</option><option>水电费</option><option>停车费</option><option>垃圾费</option></select>
                            <select><option>全部状态</option><option>已缴</option><option>欠费</option><option>预缴</option></select>
                            <input type="month">
                            <button class="btn btn-default">导出报表</button>
                        </div>
                        <div class="table-wrapper"><table>
                            <thead><tr><th>单据号</th><th>房号</th><th>业主</th><th>类型</th><th>金额</th><th>缴费日期</th><th>状态</th><th>操作</th></tr></thead>
                            <tbody>
                                <tr><td>FY202605001</td><td>1-101</td><td>李明</td><td>物业费</td><td>¥2,580</td><td>2026-05-05</td><td><span class="status status-success">已缴</span></td><td class="action-btns"><button class="action-btn">详情</button></td></tr>
                                <tr><td>FY202605002</td><td>1-102</td><td>王芳</td><td>物业费</td><td>¥2,800</td><td>-</td><td><span class="status status-error">欠费</span></td><td class="action-btns"><button class="action-btn">催缴</button></td></tr>
                                <tr><td>FY202605003</td><td>2-201</td><td>张伟</td><td>水电费</td><td>¥580</td><td>2026-05-08</td><td><span class="status status-success">已缴</span></td><td class="action-btns"><button class="action-btn">详情</button></td></tr>
                                <tr><td>FY202605004</td><td>2-202</td><td>刘芳</td><td>停车费</td><td>¥300</td><td>2026-05-03</td><td><span class="status status-success">已缴</span></td><td class="action-btns"><button class="action-btn">详情</button></td></tr>
                                <tr><td>FY202605005</td><td>3-301</td><td>陈刚</td><td>物业费</td><td>¥3,200</td><td>-</td><td><span class="status status-warning">预缴</span></td><td class="action-btns"><button class="action-btn">确认</button></td></tr>
                                <tr><td>FY202605006</td><td>3-302</td><td>赵丽</td><td>水电费</td><td>¥420</td><td>2026-05-10</td><td><span class="status status-success">已缴</span></td><td class="action-btns"><button class="action-btn">详情</button></td></tr>
                                <tr><td>FY202605007</td><td>1-201</td><td>周强</td><td>垃圾费</td><td>¥60</td><td>-</td><td><span class="status status-error">欠费</span></td><td class="action-btns"><button class="action-btn">催缴</button></td></tr>
                            </tbody>
                        </table></div>
                        <div class="pagination">
                            <button>«</button><button>‹</button><button class="active">1</button><button>2</button><button>3</button><button>›</button><button>»</button>
                        </div>
                    </div>
                    <div class="table-card">
                        <div class="table-card-header"><h3>欠费催缴</h3></div>
                        <div class="table-wrapper"><table>
                            <thead><tr><th>房号</th><th>业主</th><th>欠费金额</th><th>欠费月数</th><th>操作</th></tr></thead>
                            <tbody>
                                <tr><td>1-102</td><td>王芳</td><td>¥2,800</td><td>1个月</td><td class="action-btns"><button class="action-btn">催缴</button><button class="action-btn">上门</button></td></tr>
                                <tr><td>2-305</td><td>吴磊</td><td>¥5,600</td><td>2个月</td><td class="action-btns"><button class="action-btn">催缴</button><button class="action-btn">上门</button></td></tr>
                                <tr><td>4-102</td><td>孙静</td><td>¥8,400</td><td>3个月</td><td class="action-btns"><button class="action-btn">催缴</button><button class="action-btn">上门</button></td></tr>
                                <tr><td>5-201</td><td>郑涛</td><td>¥3,150</td><td>1个月</td><td class="action-btns"><button class="action-btn">催缴</button><button class="action-btn">上门</button></td></tr>
                            </tbody>
                        </table></div>
                        <div style="padding:15px;border-top:1px solid #f0f0f0;">
                            <h4 style="margin-bottom:10px;">收缴构成</h4>
                            <div style="display:flex;justify-content:space-between;margin-bottom:8px;"><span>物业费</span><strong>¥180,000</strong></div>
                            <div style="display:flex;justify-content:space-between;margin-bottom:8px;"><span>水电费</span><strong>¥45,000</strong></div>
                            <div style="display:flex;justify-content:space-between;margin-bottom:8px;"><span>停车费</span><strong>¥25,000</strong></div>
                            <div style="display:flex;justify-content:space-between;"><span>其他</span><strong>¥12,752</strong></div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 派单管理 -->
            <div id="page-dispatch" class="page" style="display:none">
                <div class="stats-row">
                    <div class="stat-card"><div class="label">今日工单</div><div class="value">35</div><div class="trend up">↑8%</div></div>
                    <div class="stat-card"><div class="label">待分派</div><div class="value">5</div><div class="trend down">需处理</div></div>
                    <div class="stat-card"><div class="label">处理中</div><div class="value">12</div></div>
                    <div class="stat-card"><div class="label">今日完成</div><div class="value">18</div></div>
                </div>
                <div class="table-card">
                    <div class="table-card-header">
                        <h3>工单派发列表</h3>
                        <div class="actions">
                            <button class="btn btn-default">导出</button>
                            <button class="btn btn-primary" onclick="showModal('dispatchModal')">+ 创建工单</button>
                        </div>
                    </div>
                    <div class="tabs">
                        <div class="tab active">全部</div>
                        <div class="tab">待分派 (5)</div>
                        <div class="tab">处理中 (12)</div>
                        <div class="tab">已完成 (126)</div>
                    </div>
                    <div class="filter-bar">
                        <select><option>全部类型</option><option>报事报修</option><option>投诉建议</option><option>日常巡检</option></select>
                        <select><option>全部处理人</option><option>张三</option><option>李四</option><option>王五</option></select>
                        <input type="date"><span>至</span><input type="date">
                        <button class="btn btn-default">搜索</button>
                    </div>
                    <div class="table-wrapper"><table>
                        <thead><tr><th>工单号</th><th>类型</th><th>描述</th><th>位置</th><th>紧急程度</th><th>派单人</th><th>处理人</th><th>状态</th><th>创建时间</th><th>操作</th></tr></thead>
                        <tbody>
                            <tr><td>GD2026051301</td><td>报事报修</td><td>水龙头漏水</td><td>1-2-101</td><td><span class="status status-error">紧急</span></td><td>李明</td><td>张三</td><td><span class="status status-warning">处理中</span></td><td>09:30</td><td class="action-btns"><button class="action-btn">详情</button><button class="action-btn">调度</button></td></tr>
                            <tr><td>GD2026051302</td><td>报事报修</td><td>门禁故障</td><td>2-1-门口</td><td><span class="status status-warning">急</span></td><td>物业</td><td>李四</td><td><span class="status status-success">已完成</span></td><td>08:15</td><td class="action-btns"><button class="action-btn">详情</button></td></tr>
                            <tr><td>GD2026051303</td><td>投诉建议</td><td>电梯噪音投诉</td><td>3号楼电梯</td><td><span class="status status-warning">急</span></td><td>业主</td><td>王五</td><td><span class="status status-info">已派单</span></td><td>10:20</td><td class="action-btns"><button class="action-btn">详情</button><button class="action-btn">调度</button></td></tr>
                            <tr><td>GD2026051304</td><td>日常巡检</td><td>消防设备检查</td><td>地下车库</td><td><span class="status status-info">普通</span></td><td>系统</td><td>待分配</td><td><span class="status status-warning">待分派</span></td><td>11:00</td><td class="action-btns"><button class="action-btn">详情</button><button class="action-btn">派单</button></td></tr>
                            <tr><td>GD2026051305</td><td>报事报修</td><td>路灯不亮</td><td>小区主干道</td><td><span class="status status-info">普通</span></td><td>物业</td><td>赵六</td><td><span class="status status-success">已完成</span></td><td>07:45</td><td class="action-btns"><button class="action-btn">详情</button></td></tr>
                        </tbody>
                    </table></div>
                    <div class="pagination">
                        <button>«</button><button>‹</button><button class="active">1</button><button>2</button><button>3</button><button>›</button><button>»</button>
                    </div>
                </div>
            </div>
            
            <!-- 访客管理 -->
            <div id="page-visitor" class="page" style="display:none">
                <div class="stats-row">
                    <div class="stat-card"><div class="label">今日访客</div><div class="value">18</div><div class="trend up">↑5</div></div>
                    <div class="stat-card"><div class="label">当前在访</div><div class="value">5</div></div>
                    <div class="stat-card"><div class="label">本月访客</div><div class="value">326</div></div>
                    <div class="stat-card"><div class="label">异常告警</div><div class="value">0</div><div class="trend up">正常</div></div>
                </div>
                <div class="grid-2">
                    <div class="table-card">
                        <div class="table-card-header">
                            <h3>访客记录</h3>
                            <button class="btn btn-primary" onclick="showModal('visitorModal')">+ 访客登记</button>
                        </div>
                        <div class="tabs">
                            <div class="tab active">全部</div>
                            <div class="tab">在访 (5)</div>
                            <div class="tab">已离开</div>
                        </div>
                        <div class="filter-bar">
                            <select><option>全部类型</option><option>业务洽谈</option><option>维修服务</option><option>快递/外卖</option><option>探访亲友</option></select>
                            <input type="date"><span>至</span><input type="date">
                            <button class="btn btn-default">搜索</button>
                        </div>
                        <div class="table-wrapper"><table>
                            <thead><tr><th>访客姓名</th><th>联系方式</th><th>身份证号</th><th>被访人</th><th>来访事由</th><th>进入时间</th><th>离开时间</th><th>状态</th><th>操作</th></tr></thead>
                            <tbody>
                                <tr><td>陈思</td><td>138****5678</td><td>310***********1234</td><td>王经理</td><td>业务洽谈</td><td>09:30</td><td>-</td><td><span class="status status-warning">在访</span></td><td class="action-btns"><button class="action-btn">登记离开</button></td></tr>
                                <tr><td>刘强</td><td>139****8765</td><td>320***********5678</td><td>李主管</td><td>维修服务</td><td>10:15</td><td>11:30</td><td><span class="status status-success">已离开</span></td><td class="action-btns"><button class="action-btn">详情</button></td></tr>
                                <tr><td>王琳</td><td>137****4321</td><td>330***********9012</td><td>张主任</td><td>快递/外卖</td><td>10:45</td><td>10:55</td><td><span class="status status-success">已离开</span></td><td class="action-btns"><button class="action-btn">详情</button></td></tr>
                                <tr><td>赵鹏</td><td>136****7890</td><td>340***********3456</td><td>刘经理</td><td>业务洽谈</td><td>11:00</td><td>-</td><td><span class="status status-warning">在访</span></td><td class="action-btns"><button class="action-btn">登记离开</button></td></tr>
                            </tbody>
                        </table></div>
                        <div class="pagination">
                            <button>«</button><button>‹</button><button class="active">1</button><button>2</button><button>›</button><button>»</button>
                        </div>
                    </div>
                    <div class="table-card">
                        <div class="table-card-header"><h3>访客统计</h3></div>
                        <div class="chart-placeholder">📊 访客趋势图</div>
                        <div class="list-item"><div class="icon">📊</div><div class="info"><div class="title">本周访客统计</div><div class="desc">共接待 126 人次</div></div></div>
                        <div class="list-item"><div class="icon">📊</div><div class="info"><div class="title">本月访客统计</div><div class="desc">共接待 326 人次</div></div></div>
                        <div class="list-item"><div class="icon">📊</div><div class="info"><div class="title">热门被访人</div><div class="desc">王经理 (45人次)、李主管 (38人次)</div></div></div>
                    </div>
                </div>
            </div>
            
            <!-- 仓库管理 -->
            <div id="page-warehouse" class="page" style="display:none">
                <div class="stats-row">
                    <div class="stat-card"><div class="label">物资种类</div><div class="value">156</div></div>
                    <div class="stat-card"><div class="label">库存预警</div><div class="value">8</div><div class="trend down">需要补货</div></div>
                    <div class="stat-card"><div class="label">本月入库</div><div class="value">45</div><div class="trend up">↑12笔</div></div>
                    <div class="stat-card"><div class="label">本月出库</div><div class="value">38</div></div>
                </div>
                <div class="grid-2">
                    <div class="table-card">
                        <div class="table-card-header">
                            <h3>物资台账</h3>
                            <div class="actions">
                                <button class="btn btn-default" onclick="showModal('inboundModal')">入库</button>
                                <button class="btn btn-default">出库</button>
                                <button class="btn btn-primary">库存盘点</button>
                            </div>
                        </div>
                        <div class="filter-bar">
                            <input type="text" placeholder="物资名称/编号" style="width:150px">
                            <select><option>全部类型</option><option>耗材</option><option>设备</option><option>工具</option></select>
                            <select><option>全部状态</option><option>正常</option><option>预警</option><option>缺货</option></select>
                            <button class="btn btn-default">搜索</button>
                        </div>
                        <div class="table-wrapper"><table>
                            <thead><tr><th>物资编号</th><th>物资名称</th><th>规格</th><th>单位</th><th>库存数量</th><th>安全库存</th><th>存放位置</th><th>状态</th><th>操作</th></tr></thead>
                            <tbody>
                                <tr><td>WZ2025001</td><td>灯泡</td><td>LED 10W</td><td>个</td><td>120</td><td>50</td><td>A区-01-01</td><td><span class="status status-success">正常</span></td><td class="action-btns"><button class="action-btn">详情</button></td></tr>
                                <tr><td>WZ2025002</td><td>水龙头</td><td>DN15</td><td>个</td><td>12</td><td>20</td><td>A区-01-02</td><td><span class="status status-error">预警</span></td><td class="action-btns"><button class="action-btn">采购</button></td></tr>
                                <tr><td>WZ2025003</td><td>扫帚</td><td>普通型</td><td>把</td><td>35</td><td>10</td><td>B区-02-01</td><td><span class="status status-success">正常</span></td><td class="action-btns"><button class="action-btn">详情</button></td></tr>
                                <tr><td>WZ2025004</td><td>垃圾桶</td><td>240L</td><td>个</td><td>8</td><td>15</td><td>B区-02-02</td><td><span class="status status-error">预警</span></td><td class="action-btns"><button class="action-btn">采购</button></td></tr>
                                <tr><td>WZ2025005</td><td>拖把</td><td>棉布款</td><td>把</td><td>25</td><td>15</td><td>B区-02-03</td><td><span class="status status-success">正常</span></td><td class="action-btns"><button class="action-btn">详情</button></td></tr>
                            </tbody>
                        </table></div>
                        <div class="pagination">
                            <button>«</button><button>‹</button><button class="active">1</button><button>2</button><button>›</button><button>»</button>
                        </div>
                    </div>
                    <div class="table-card">
                        <div class="table-card-header"><h3>库存预警</h3></div>
                        <div class="list-item"><div class="icon" style="background:#fff2f0;color:#ff4d4f;">!</div><div class="info"><div class="title">水龙头 DN15</div><div class="desc">当前12个，低于安全库存20个</div></div><button class="btn btn-default" style="padding:4px 8px;">采购</button></div>
                        <div class="list-item"><div class="icon" style="background:#fff2f0;color:#ff4d4f;">!</div><div class="info"><div class="title">垃圾桶 240L</div><div class="desc">当前8个，低于安全库存15个</div></div><button class="btn btn-default" style="padding:4px 8px;">采购</button></div>
                        <div class="list-item"><div class="icon" style="background:#fffbe6;color:#faad14;">!</div><div class="info"><div class="title">水管 DN25</div><div class="desc">当前18个，低于安全库存25个</div></div><button class="btn btn-default" style="padding:4px 8px;">采购</button></div>
                        <div class="list-item"><div class="icon" style="background:#fffbe6;color:#faad14;">!</div><div class="info"><div class="title">开关插座</div><div class="desc">当前10个，低于安全库存15个</div></div><button class="btn btn-default" style="padding:4px 8px;">采购</button></div>
                    </div>
                </div>
            </div>
            
            <!-- 人事管理 -->
            <div id="page-hr" class="page" style="display:none">
                <div class="stats-row">
                    <div class="stat-card"><div class="label">员工总数</div><div class="value">56</div></div>
                    <div class="stat-card"><div class="label">在职</div><div class="value">52</div><div class="trend up">正常</div></div>
                    <div class="stat-card"><div class="label">本月入职</div><div class="value">3</div></div>
                    <div class="stat-card"><div class="label">本月离职</div><div class="value">1</div></div>
                </div>
                <div class="table-card">
                    <div class="table-card-header">
                        <h3>员工信息管理</h3>
                        <div class="actions">
                            <button class="btn btn-default">导出</button>
                            <button class="btn btn-primary" onclick="showModal('employeeModal')">+ 添加员工</button>
                        </div>
                    </div>
                    <div class="tabs">
                        <div class="tab active">全部 (56)</div>
                        <div class="tab">物业部 (12)</div>
                        <div class="tab">维修部 (8)</div>
                        <div class="tab">保洁部 (18)</div>
                        <div class="tab">安保部 (10)</div>
                        <div class="tab">其他 (8)</div>
                    </div>
                    <div class="filter-bar">
                        <select><option>全部岗位</option><option>经理</option><option>主管</option><option>员工</option></option></select>
                        <select><option>全部状态</option><option>在职</option><option>离职</option><option>实习</option></select>
                        <input type="text" placeholder="姓名/工号" style="width:120px">
                        <button class="btn btn-default">搜索</button>
                    </div>
                    <div class="table-wrapper"><table>
                        <thead><tr><th>工号</th><th>姓名</th><th>部门</th><th>岗位</th><th>手机</th><th>入职日期</th><th>状态</th><th>操作</th></tr></thead>
                        <tbody>
                            <tr><td>EMP001</td><td>张强</td><td>物业部</td><td>经理</td><td>138****1234</td><td>2020-01-15</td><td><span class="status status-success">在职</span></td><td class="action-btns"><button class="action-btn">详情</button><button class="action-btn">编辑</button></td></tr>
                            <tr><td>EMP002</td><td>李娜</td><td>维修部</td><td>主管</td><td>139****5678</td><td>2021-03-20</td><td><span class="status status-success">在职</span></td><td class="action-btns"><button class="action-btn">详情</button><button class="action-btn">编辑</button></td></tr>
                            <tr><td>EMP003</td><td>王刚</td><td>保洁部</td><td>员工</td><td>137****9012</td><td>2022-06-01</td><td><span class="status status-success">在职</span></td><td class="action-btns"><button class="action-btn">详情</button><button class="action-btn">编辑</button></td></tr>
                            <tr><td>EMP004</td><td>刘芳</td><td>安保部</td><td>主管</td><td>136****3456</td><td>2021-08-15</td><td><span class="status status-success">在职</span></td><td class="action-btns"><button class="action-btn">详情</button><button class="action-btn">编辑</button></td></tr>
                            <tr><td>EMP005</td><td>陈伟</td><td>维修部</td><td>员工</td><td>135****7890</td><td>2023-02-10</td><td><span class="status status-warning">实习</span></td><td class="action-btns"><button class="action-btn">详情</button><button class="action-btn">编辑</button></td></tr>
                        </tbody>
                    </table></div>
                    <div class="pagination">
                        <button>«</button><button>‹</button><button class="active">1</button><button>2</button><button>3</button><button>›</button><button>»</button>
                    </div>
                </div>
            </div>
            
            <!-- 会议管理 -->
            <div id="page-meeting" class="page" style="display:none">
                <div class="stats-row">
                    <div class="stat-card"><div class="label">今日会议</div><div class="value">3</div></div>
                    <div class="stat-card"><div class="label">本周会议</div><div class="value">12</div></div>
                    <div class="stat-card"><div class="label">可用会议室</div><div class="value">4/5</div></div>
                    <div class="stat-card"><div class="label">会议室利用率</div><div class="value">68%</div><div class="trend up">↑5%</div></div>
                </div>
                <div class="grid-2">
                    <div class="table-card">
                        <div class="table-card-header">
                            <h3>会议室预约</h3>
                            <button class="btn btn-primary" onclick="showModal('meetingModal')">+ 预约会议室</button>
                        </div>
                        <div class="table-wrapper"><table>
                            <thead><tr><th>会议室</th><th>容纳人数</th><th>设备</th><th>状态</th><th>操作</th></tr></thead>
                            <tbody>
                                <tr><td>会议室A</td><td>20人</td><td>投影仪、白板、音响</td><td><span class="status status-success">可用</span></td><td class="action-btns"><button class="action-btn">预约</button></td></tr>
                                <tr><td>会议室B</td><td>10人</td><td>电视、白板</td><td><span class="status status-warning">使用中</span></td><td class="action-btns"><button class="action-btn">查看</button></td></tr>
                                <tr><td>会议室C</td><td>30人</td><td>投影仪、白板、音响、视频会议</td><td><span class="status status-success">可用</span></td><td class="action-btns"><button class="action-btn">预约</button></td></tr>
                                <tr><td>会议室D</td><td>8人</td><td>电视、电话会议</td><td><span class="status status-success">可用</span></td><td class="action-btns"><button class="action-btn">预约</button></td></tr>
                            </tbody>
                        </table></div>
                    </div>
                    <div class="table-card">
                        <div class="table-card-header"><h3>今日会议安排</h3></div>
                        <div class="list-item"><div class="icon" style="background:#e6f7ff;color:#1890ff;">10:00</div><div class="info"><div class="title">部门周例会</div><div class="desc">会议室A | 张强主持</div></div><span class="status status-info">进行中</span></div>
                        <div class="list-item"><div class="icon" style="background:#f6ffed;color:#52c41a;">14:00</div><div class="info"><div class="title">项目评审会</div><div class="desc">会议室C | 李娜主持</div></div><span class="status status-warning">待开始</span></div>
                        <div class="list-item"><div class="icon" style="background:#f6ffed;color:#52c41a;">16:00</div><div class="info"><div class="title">客户洽谈</div><div class="desc">会议室B | 王经理主持</div></div><span class="status status-warning">待开始</span></div>
                    </div>
                </div>
            </div>
            
            <!-- 通知公告 -->
            <div id="page-notice" class="page" style="display:none">
                <div class="stats-row">
                    <div class="stat-card"><div class="label">公告总数</div><div class="value">86</div></div>
                    <div class="stat-card"><div class="label">本月发布</div><div class="value">5</div></div>
                    <div class="stat-card"><div class="label">总阅读量</div><div class="value">12,580</div></div>
                    <div class="stat-card"><div class="label">草稿</div><div class="value">2</div></div>
                </div>
                <div class="table-card">
                    <div class="table-card-header">
                        <h3>通知公告</h3>
                        <button class="btn btn-primary" onclick="showModal('noticeModal')">+ 发布公告</button>
                    </div>
                    <div class="tabs">
                        <div class="tab active">全部</div>
                        <div class="tab">系统通知</div>
                        <div class="tab">放假通知</div>
                        <div class="tab">作业通知</div>
                        <div class="tab">草稿</div>
                    </div>
                    <div class="table-wrapper"><table>
                        <thead><tr><th>标题</th><th>类型</th><th>发布人</th><th>发布时间</th><th>阅读量</th><th>状态</th><th>操作</th></tr></thead>
                        <tbody>
                            <tr><td>关于小区端午节放假的通知</td><td><span class="status status-info">放假通知</span></td><td>物业经理</td><td>2026-05-10</td><td>328</td><td><span class="status status-success">已发布</span></td><td class="action-btns"><button class="action-btn">查看</button><button class="action-btn">撤回</button></td></tr>
                            <tr><td>小区绿化消杀作业通知</td><td><span class="status status-warning">作业通知</span></td><td>绿化主管</td><td>2026-05-08</td><td>156</td><td><span class="status status-success">已发布</span></td><td class="action-btns"><button class="action-btn">查看</button><button class="action-btn">撤回</button></td></tr>
                            <tr><td>电梯维保通知</td><td><span class="status status-warning">作业通知</span></td><td>维修主管</td><td>2026-05-06</td><td>89</td><td><span class="status status-success">已发布</span></td><td class="action-btns"><button class="action-btn">查看</button><button class="action-btn">撤回</button></td></tr>
                            <tr><td>物业费调价通知（草稿）</td><td><span class="status status-info">费用通知</span></td><td>财务主管</td><td>-</td><td>-</td><td><span class="status status-info">草稿</span></td><td class="action-btns"><button class="action-btn">编辑</button><button class="action-btn">发布</button></td></tr>
                        </tbody>
                    </table></div>
                    <div class="pagination">
                        <button>«</button><button>‹</button><button class="active">1</button><button>2</button><button>›</button><button>»</button>
                    </div>
                </div>
            </div>
            
            <!-- 停车管理 -->
            <div id="page-parking" class="page" style="display:none">
                <div class="stats-row">
                    <div class="stat-card"><div class="label">总车位数</div><div class="value">200</div></div>
                    <div class="stat-card"><div class="label">已占用</div><div class="value">156</div><div class="trend">占用率 78%</div></div>
                    <div class="stat-card"><div class="label">月卡车辆</div><div class="value">128</div></div>
                    <div class="stat-card"><div class="label">今日临停</div><div class="value">42</div></div>
                </div>
                <div class="table-card">
                    <div class="table-card-header">
                        <h3>车辆进出记录</h3>
                        <button class="btn btn-primary">月卡管理</button>
                    </div>
                    <div class="table-wrapper"><table>
                        <thead><tr><th>车牌号</th><th>车主</th><th>类型</th><th>进入时间</th><th>离开时间</th><th>停车时长</th><th>费用</th><th>状态</th></tr></thead>
                        <tbody>
                            <tr><td>浙A12345</td><td>李明</td><td><span class="status status-info">月卡</span></td><td>2026-05-13 08:30</td><td>-</td><td>进行中</td><td>-</td><td><span class="status status-warning">在停</span></td></tr>
                            <tr><td>浙B67890</td><td>王芳</td><td><span class="status status-success">临停</span></td><td>2026-05-13 09:15</td><td>10:30</td><td>1小时15分</td><td>¥10</td><td><span class="status status-success">已离场</span></td></tr>
                        </tbody>
                    </table></div>
                </div>
            </div>
            
            <!-- 财务管理 -->
            <div id="page-finance" class="page" style="display:none">
                <div class="stats-row">
                    <div class="stat-card"><div class="label">本月收入</div><div class="value">¥385,600</div><div class="trend up">↑ 12%</div></div>
                    <div class="stat-card"><div class="label">本月支出</div><div class="value">¥256,800</div><div class="trend down">↓ 5%</div></div>
                    <div class="stat-card"><div class="label">本月结余</div><div class="value">¥128,800</div></div>
                </div>
                <div class="grid-2">
                    <div class="table-card">
                        <div class="table-card-header"><h3>收入明细</h3></div>
                        <div class="table-wrapper"><table>
                            <thead><tr><th>日期</th><th>类型</th><th>金额</th><th>备注</th></tr></thead>
                            <tbody>
                                <tr><td>2026-05-01</td><td>物业费</td><td>¥28,500</td><td>1号楼业主缴费</td></tr>
                                <tr><td>2026-05-02</td><td>停车费</td><td>¥3,200</td><td>月卡续费</td></tr>
                            </tbody>
                        </table></div>
                    </div>
                    <div class="table-card">
                        <div class="table-card-header"><h3>支出明细</h3></div>
                        <div class="table-wrapper"><table>
                            <thead><tr><th>日期</th><th>类型</th><th>金额</th><th>备注</th></tr></thead>
                            <tbody>
                                <tr><td>2026-05-01</td><td>设备维修</td><td>¥5,800</td><td>电梯维修费</td></tr>
                                <tr><td>2026-05-02</td><td>水电费</td><td>¥12,600</td><td>公共区域水电</td></tr>
                            </tbody>
                        </table></div>
                    </div>
                </div>
            </div>
            
            <!-- 设备维保 -->
            <div id="page-equipment" class="page" style="display:none">
                <div class="stats-row">
                    <div class="stat-card"><div class="label">设备总数</div><div class="value">156</div></div>
                    <div class="stat-card"><div class="label">运行中</div><div class="value">142</div></div>
                    <div class="stat-card"><div class="label">故障</div><div class="value">3</div></div>
                    <div class="stat-card"><div class="label">维保中</div><div class="value">11</div></div>
                </div>
                <div class="table-card">
                    <div class="table-card-header"><h3>设备档案</h3><button class="btn btn-primary">+ 添加设备</button></div>
                    <div class="table-wrapper"><table>
                        <thead><tr><th>设备编号</th><th>设备名称</th><th>型号</th><th>位置</th><th>维保状态</th><th>下次维保</th><th>操作</th></tr></thead>
                        <tbody>
                            <tr><td>EQ2025001</td><td>电梯</td><td>xxx型号</td><td>1号楼</td><td><span class="status status-success">正常</span></td><td>2026-06-01</td><td class="action-btns"><button class="action-btn">详情</button><button class="action-btn">维保</button></td></tr>
                            <tr><td>EQ2025002</td><td>中央空调</td><td>xxx型号</td><td>物业办公室</td><td><span class="status status-warning">维保中</span></td><td>-</td><td class="action-btns"><button class="action-btn">详情</button><button class="action-btn">查看</button></td></tr>
                        </tbody>
                    </table></div>
                </div>
            </div>
            
            <!-- 保洁管理 -->
            <div id="page-cleaning" class="page" style="display:none">
                <div class="stats-row">
                    <div class="stat-card"><div class="label">保洁人员</div><div class="value">12</div></div>
                    <div class="stat-card"><div class="label">今日任务</div><div class="value">28</div></div>
                    <div class="stat-card"><div class="label">完成率</div><div class="value">95%</div></div>
                </div>
                <div class="table-card">
                    <div class="table-card-header"><h3>保洁排班</h3><button class="btn btn-primary">+ 新建排班</button></div>
                    <div class="table-wrapper"><table>
                        <thead><tr><th>日期</th><th>保洁员</th><th>负责区域</th><th>上班时间</th><th>状态</th><th>操作</th></tr></thead>
                        <tbody>
                            <tr><td>2026-05-13</td><td>王秀英</td><td>1-3号楼公共区域</td><td>08:00-17:00</td><td><span class="status status-success">正常</span></td><td class="action-btns"><button class="action-btn">调整</button></td></tr>
                            <tr><td>2026-05-13</td><td>李桂芳</td><td>小区绿化带</td><td>07:00-16:00</td><td><span class="status status-success">正常</span></td><td class="action-btns"><button class="action-btn">调整</button></td></tr>
                        </tbody>
                    </table></div>
                </div>
            </div>
            
            <!-- 消防管理 -->
            <div id="page-fire" class="page" style="display:none">
                <div class="stats-row">
                    <div class="stat-card"><div class="label">消防设备</div><div class="value">328</div></div>
                    <div class="stat-card"><div class="label">正常</div><div class="value">325</div></div>
                    <div class="stat-card"><div class="label">异常</div><div class="value">3</div></div>
                </div>
                <div class="table-card">
                    <div class="table-card-header"><h3>消防设备台账</h3><button class="btn btn-primary">+ 添加设备</button></div>
<div class="table-wrapper"><table>
                        <thead><tr><th>设备编号</th><th>设备类型</th><th>安装位置</th><th>安装日期</th><th>检查周期</th><th>状态</th><th>操作</th></tr></thead>
                        <tbody>
                            <tr><td>XF2025001</td><td>烟感探测器</td><td>1号楼1层</td><td>2020-01-15</td><td>每月</td><td><span class="status status-success">正常</span></td><td class="action-btns"><button class="action-btn">检查</button></td></tr>
                            <tr><td>XF2025002</td><td>消防栓</td><td>地下车库</td><td>2020-01-15</td><td>每季</td><td><span class="status status-warning">待检查</span></td><td class="action-btns"><button class="action-btn">检查</button></td></tr>
                        </tbody>
                    </table></div>
                </div>
            </div>
            
            <!-- 系统设置 -->
            <div id="page-settings" class="page" style="display:none">
                <div class="grid-2">
                    <div class="table-card">
                        <div class="table-card-header"><h3>组织架构</h3><button class="btn btn-primary">+ 添加部门</button></div>
                        <div class="table-wrapper"><table>
                            <thead><tr><th>部门编号</th><th>部门名称</th><th>负责人</th><th>人数</th><th>操作</th></tr></thead>
                            <tbody>
                                <tr><td>DEPT001</td><td>物业部</td><td>张强</td><td>8人</td><td class="action-btns"><button class="action-btn">编辑</button></td></tr>
                                <tr><td>DEPT002</td><td>维修部</td><td>李娜</td><td>6人</td><td class="action-btns"><button class="action-btn">编辑</button></td></tr>
                                <tr><td>DEPT003</td><td>保洁部</td><td>赵刚</td><td>12人</td><td class="action-btns"><button class="action-btn">编辑</button></td></tr>
                            </tbody>
                        </table></div>
                    </div>
                    <div class="table-card">
                        <div class="table-card-header"><h3>角色权限</h3><button class="btn btn-primary">+ 添加角色</button></div>
                        <div class="table-wrapper"><table>
                            <thead><tr><th>角色编号</th><th>角色名称</th><th>描述</th><th>人数</th><th>操作</th></tr></thead>
                            <tbody>
                                <tr><td>ROLE001</td><td>系统管理员</td><td>系统全部权限</td><td>2人</td><td class="action-btns"><button class="action-btn">编辑</button><button class="action-btn">权限</button></td></tr>
                                <tr><td>ROLE002</td><td>物业经理</td><td>物业管理权限</td><td>3人</td><td class="action-btns"><button class="action-btn">编辑</button><button class="action-btn">权限</button></td></tr>
                                <tr><td>ROLE003</td><td>维修人员</td><td>维修工单处理</td><td>6人</td><td class="action-btns"><button class="action-btn">编辑</button><button class="action-btn">权限</button></td></tr>
                            </tbody>
                        </table></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 模态框：工单派发 -->
    <div class="modal" id="dispatchModal">
        <div class="modal-content">
            <div class="modal-header"><h3>创建工单</h3><button class="modal-close" onclick="closeModal('dispatchModal')">×</button></div>
            <div class="modal-body">
                <div class="form-row">
                    <div class="form-group"><label>工单类型</label><select><option>报事报修</option><option>投诉建议</option><option>日常巡检</option></select></div>
                    <div class="form-group"><label>紧急程度</label><select><option>普通</option><option>急</option><option>紧急</option></select></div>
                </div>
                <div class="form-group"><label>工单描述</label><textarea rows="3" placeholder="请输入工单描述...">
编辑页面

访客登记

通知中心

新建合同申请

物资入库

添加员工

预约会议室

发布公告
