<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>控制台</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <style>
        .stat-card {
            padding: 20px;
            text-align: center;
            background-color: #fff;
            border-radius: 4px;
            box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
            margin-bottom: 15px;
        }
        .stat-title {
            color: #666;
            font-size: 14px;
            margin-bottom: 10px;
        }
        .stat-number {
            color: #009688;
            font-size: 24px;
            font-weight: bold;
        }
        .stat-icon {
            font-size: 30px;
            margin-bottom: 10px;
            color: #009688;
        }
        .stat-trend {
            margin-top: 10px;
            font-size: 12px;
            color: #999;
        }
        .trend-up {
            color: #5FB878;
        }
        .trend-down {
            color: #FF5722;
        }
    </style>
</head>
<body>
    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <!-- 统计卡片 -->
            <div class="layui-col-md3">
                <div class="stat-card">
                    <i class="layui-icon layui-icon-component stat-icon"></i>
                    <div class="stat-title">设备总数</div>
                    <div class="stat-number" id="total-devices">0</div>
                    <div class="stat-trend">
                        今日新增: <span id="today-new">0</span>
                    </div>
                </div>
            </div>
            <div class="layui-col-md3">
                <div class="stat-card">
                    <i class="layui-icon layui-icon-vercode stat-icon"></i>
                    <div class="stat-title">授权码总数</div>
                    <div class="stat-number" id="total-licenses">0</div>
                    <div class="stat-trend">
                        未使用: <span id="unused-licenses">0</span>
                    </div>
                </div>
            </div>
            <div class="layui-col-md3">
                <div class="stat-card">
                    <i class="layui-icon layui-icon-circle-dot stat-icon"></i>
                    <div class="stat-title">在线设备</div>
                    <div class="stat-number" id="online-devices">0</div>
                    <div class="stat-trend">
                        活跃率: <span id="active-rate">0%</span>
                    </div>
                </div>
            </div>
            <div class="layui-col-md3">
                <div class="stat-card">
                    <i class="layui-icon layui-icon-chart stat-icon"></i>
                    <div class="stat-title">过期设备</div>
                    <div class="stat-number" id="expired-devices">0</div>
                    <div class="stat-trend">
                        占比: <span id="expired-rate">0%</span>
                    </div>
                </div>
            </div>

            <!-- 图表区域 -->
            <div class="layui-col-md8">
                <div class="layui-card">
                    <div class="layui-card-header">设备注册趋势</div>
                    <div class="layui-card-body">
                        <div id="register-trend" style="height: 300px;"></div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md4">
                <div class="layui-card">
                    <div class="layui-card-header">设备类型分布</div>
                    <div class="layui-card-body">
                        <div id="device-types" style="height: 300px;"></div>
                    </div>
                </div>
            </div>

            <!-- 系统状态 -->
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">系统状态</div>
                    <div class="layui-card-body">
                        <div class="layui-row layui-col-space10">
                            <div class="layui-col-md3">
                                <div>CPU使用率：<span id="cpu-usage">0%</span></div>
                                <div>内存使用率：<span id="memory-usage">0%</span></div>
                            </div>
                            <div class="layui-col-md3">
                                <div>系统运行时间：<span id="uptime">0天</span></div>
                                <div>磁盘使用率：<span id="disk-usage">0%</span></div>
                            </div>
                            <div class="layui-col-md3">
                                <div>系统负载：<span id="load-avg">0</span></div>
                                <div>网络流量：<span id="network-traffic">0 KB/s</span></div>
                            </div>
                            <div class="layui-col-md3">
                                <div>当前在线用户：<span id="online-users">0</span></div>
                                <div>最后更新时间：<span id="last-update">-</span></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="/static/layui/layui.js"></script>
    <script src="/static/lib/echarts.min.js"></script>
    <script src="/static/js/dashboard.js"></script>
</body>
</html> 