<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>系统监控</title>

    <link rel="stylesheet" href="/static/layui/css/layui.css">

    <link rel="stylesheet" href="/static/css/style.css">

</head>

<body>

    <div class="layui-fluid">

        <!-- 系统概览 -->

        <div class="layui-row layui-col-space15">

            <div class="layui-col-md3">

                <div class="layui-card">

                    <div class="layui-card-header">运行时间</div>

                    <div class="layui-card-body big-font" id="uptime">

                        0天0小时0分钟

                    </div>

                </div>

            </div>

            <div class="layui-col-md3">

                <div class="layui-card">

                    <div class="layui-card-header">活跃用户</div>

                    <div class="layui-card-body big-font" id="active-users">

                        0

                    </div>

                </div>

            </div>

            <div class="layui-col-md3">

                <div class="layui-card">

                    <div class="layui-card-header">设备总数</div>

                    <div class="layui-card-body big-font" id="total-devices">

                        0

                    </div>

                </div>

            </div>

            <div class="layui-col-md3">

                <div class="layui-card">

                    <div class="layui-card-header">系统负载</div>

                    <div class="layui-card-body big-font" id="load-avg">

                        0.00

                    </div>

                </div>

            </div>

        </div>



        <!-- 资源监控 -->

        <div class="layui-row layui-col-space15">

            <div class="layui-col-md6">

                <div class="layui-card">

                    <div class="layui-card-header">CPU使用率</div>

                    <div class="layui-card-body">

                        <div id="cpu-chart" style="height: 300px;"></div>

                    </div>

                </div>

            </div>

            <div class="layui-col-md6">

                <div class="layui-card">

                    <div class="layui-card-header">内存使用情况</div>

                    <div class="layui-card-body">

                        <div id="memory-chart" style="height: 300px;"></div>

                    </div>

                </div>

            </div>

        </div>



        <!-- 磁盘和网络 -->

        <div class="layui-row layui-col-space15">

            <div class="layui-col-md6">

                <div class="layui-card">

                    <div class="layui-card-header">磁盘使用情况</div>

                    <div class="layui-card-body">

                        <div id="disk-chart" style="height: 300px;"></div>

                    </div>

                </div>

            </div>

            <div class="layui-col-md6">

                <div class="layui-card">

                    <div class="layui-card-header">网络流量</div>

                    <div class="layui-card-body">

                        <div id="network-chart" style="height: 300px;"></div>

                    </div>

                </div>

            </div>

        </div>



        <!-- 进程和系统信息 -->

        <div class="layui-row layui-col-space15">

            <div class="layui-col-md6">

                <div class="layui-card">

                    <div class="layui-card-header">

                        <span>进程列表（Top 10）</span>

                        <span class="layui-badge layui-bg-blue" id="total-processes">0</span>

                    </div>

                    <div class="layui-card-body">

                        <table class="layui-table" lay-skin="line">

                            <thead>

                                <tr>

                                    <th>PID</th>

                                    <th>名称</th>

                                    <th>CPU使用率</th>

                                    <th>内存使用率</th>

                                    <th>运行时间</th>

                                </tr>

                            </thead>

                            <tbody id="process-list"></tbody>

                        </table>

                    </div>

                </div>

            </div>

            <div class="layui-col-md6">

                <div class="layui-card">

                    <div class="layui-card-header">系统信息</div>

                    <div class="layui-card-body">

                        <table class="layui-table" lay-skin="nob">

                            <tbody>

                                <tr>

                                    <td>主机名</td>

                                    <td id="hostname"></td>

                                </tr>

                                <tr>

                                    <td>操作系统</td>

                                    <td id="os"></td>

                                </tr>

                                <tr>

                                    <td>平台</td>

                                    <td id="platform"></td>

                                </tr>

                                <tr>

                                    <td>内核版本</td>

                                    <td id="kernel"></td>

                                </tr>

                                <tr>

                                    <td>CPU型号</td>

                                    <td id="cpu-model"></td>

                                </tr>

                                <tr>

                                    <td>CPU核心数</td>

                                    <td id="cpu-cores"></td>

                                </tr>

                                <tr>

                                    <td>启动时间</td>

                                    <td id="boot-time"></td>

                                </tr>

                            </tbody>

                        </table>

                    </div>

                </div>

            </div>

        </div>

    </div>



    <script src="/static/layui/layui.js"></script>

    <script src="/static/lib/echarts.min.js"></script>

    <script src="/static/js/monitor.js"></script>

    <script type="text/html" id="processListTpl">
        {{# layui.each(d, function(index, item){ }}
        <tr>
            <td>{{item.pid}}</td>
            <td>{{item.name}}</td>
            <td>{{item.cpu.toFixed(1)}}%</td>
            <td>{{item.memory.toFixed(1)}}%</td>
            <td>{{formatDuration(Math.floor((Date.now() - item.created) / 1000))}}</td>
        </tr>
        {{# }); }}
    </script>

</body>

</html> 
