<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Lonely Horse 监控大屏</title>
    <!-- 引入 ECharts -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <style>
        body { font-family: Arial, sans-serif; padding: 20px; background-color: #f0f2f5; }
        .container { max-width: 1000px; margin: 0 auto; background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
        h1 { text-align: center; color: #333; }
        #main { width: 100%; height: 500px; }
    </style>
</head>
<body>

<div class="container">
    <h1>🚀 服务器实时监控 (CPU & 内存)</h1>
    <div id="main"></div>
</div>

<script type="text/javascript">
    // 1. 初始化 ECharts
    var myChart = echarts.init(document.getElementById('main'));

    // 2. 基础配置
    var option = {
        title: { text: '系统资源使用率趋势' },
        tooltip: { trigger: 'axis' },
        legend: { data: ['CPU使用率', '内存使用率'] },
        grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
        xAxis: { 
            type: 'category', 
            boundaryGap: false,
            data: [] 
        },
        yAxis: { 
            type: 'value', 
            name: '百分比(%)',
            max: 100 
        },
        series: [
            {
                name: 'CPU使用率',
                type: 'line',
                data: [],
                smooth: true,
                lineStyle: { color: '#ff4d4f' }
            },
            {
                name: '内存使用率',
                type: 'line',
                data: [],
                smooth: true,
                lineStyle: { color: '#1890ff' }
            }
        ]
    };

    // 3. 获取数据
    // 这里的 URL 是 Nginx 代理后的绝对路径
    fetch('/monitor/api/data')
        .then(function(response) {
            // 修正了之前的拼写错误，并且增加了错误检查
            if (!response.ok) {
                throw new Error("网络请求失败，状态码: " + response.status);
            }
            return response.json();
        })
        .then(function(data) {
            console.log("成功拿到数据:", data);

            // 提取数据
            var times = data.map(function(item) { return item.timestamp; });
            var cpus = data.map(function(item) { return item.cpu_percent; });
            var mems = data.map(function(item) { return item.memory_percent; });

            // 更新图表
            myChart.setOption({
                xAxis: { data: times },
                series: [
                    { name: 'CPU使用率', data: cpus },
                    { name: '内存使用率', data: mems }
                ]
            });
        })
        .catch(function(error) {
            console.error('报错详情:', error);
            alert("加载失败！请按F12看控制台报错");
        });

    // 渲染图表
    myChart.setOption(option);
    
    // 窗口大小改变时自动调整
    window.addEventListener('resize', function() {
        myChart.resize();
    });
</script>
</body>
</html>
