SystemStatus/index.html at main · EndlessPixel/SystemStatus · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="format-detection" content="telephone=no, email=no">
    <meta name="theme-color" content="#f5f5f7">
    <title>SystemStatus 系统监控</title>
    <!-- 引入本地资源 -->
    <link rel="stylesheet" href="style.css">
    <script src="echarts.js"></script>
</head>

<body>
    <div class="container">
        <header class="header">
            <h1>SystemStatus</h1>
            <p class="sub-title">系统监控面板</p>
        </header>

        <!-- 服务器分支切换 -->
        <div class="branch-switcher">
            <label for="branch-select">选择监控服务器：</label>
            <select id="branch-select">
                <!-- 由JS动态填充选项 -->
            </select>
            <button id="switch-btn">切换</button>
        </div>

        <!-- 状态提示 -->
    <div id="status-tip" class="status-tip tip-success">
        正在连接后端服务...
    </div>

    <!-- 重试按钮 -->
    <div id="retry-container" class="retry-container" style="display: none;">
        <button id="retry-btn" class="retry-btn">重试连接后端</button>
    </div>

        <!-- 硬件基础信息 -->
        <div class="card-container">
            <!-- CPU信息 -->
            <div class="card">
                <h3 class="card-title">CPU</h3>
                <p id="cpu-model" class="card-content">加载中...</p>
                <p class="card-content">核心数: <span id="cpu-cores">加载中...</span></p>
            </div>
            <!-- 内存信息 -->
            <div class="card">
                <h3 class="card-title">内存</h3>
                <p id="mem-model" class="card-content">加载中...</p>
                <p class="card-content">总容量: <span id="mem-total">加载中...</span> GB</p>
            </div>
            <!-- 显卡信息 -->
            <div class="card">
                <h3 class="card-title">显卡</h3>
                <p id="gpu-model" class="card-content">加载中...</p>
                <p class="card-content">状态: <span id="gpu-status">加载中...</span></p>
            </div>
            <!-- 网卡信息 -->
            <div class="card">
                <h3 class="card-title">网卡</h3>
                <div id="network-info" class="card-content">加载中...</div>
            </div>
        </div>

        <!-- 一键展开/折叠按钮 -->
        <div class="toggle-all-container">
            <button id="toggle-all-btn" class="toggle-btn toggle-all-btn">
                <span class="toggle-icon">▼</span>
                <span class="toggle-text">折叠所有图表</span>
            </button>
        </div>

        <!-- CPU核心实时占用 -->
        <div class="panel chart-panel" data-chart-id="cpu-cores-container">
            <div class="panel-header">
                <h2 class="panel-title">CPU核心实时占用</h2>
                <button class="toggle-btn chart-toggle-btn" data-target="cpu-cores-container">
                    <span class="toggle-icon">▼</span>
                </button>
            </div>
            <div id="cpu-cores-container" class="cpu-cores-container chart-container">
                加载中...
            </div>
        </div>

        <!-- 硬盘占用率 -->
        <div class="panel chart-panel" data-chart-id="disk-container">
            <div class="panel-header">
                <h2 class="panel-title">硬盘占用率</h2>
                <button class="toggle-btn chart-toggle-btn" data-target="disk-container">
                    <span class="toggle-icon">▼</span>
                </button>
            </div>
            <div id="disk-container" class="disk-container chart-container">
                加载中...
            </div>
        </div>

        <!-- 网卡流量监控 -->
        <div class="panel chart-panel" data-chart-id="net-chart">
            <div class="panel-header">
                <h2 class="panel-title">网卡流量监控</h2>
                <button class="toggle-btn chart-toggle-btn" data-target="net-chart">
                    <span class="toggle-icon">▼</span>
                </button>
            </div>
            <div class="net-speed">
                <p>实时上传速度: <span id="net-upload-speed">0 KB/s</span></p>
                <p>实时下载速度: <span id="net-download-speed">0 KB/s</span></p>
            </div>
            <div id="net-chart" class="chart-container"></div>
        </div>

        <!-- 系统负载监控 -->
        <div class="panel chart-panel" data-chart-id="system-chart">
            <div class="panel-header">
                <h2 class="panel-title">系统负载监控</h2>
                <button class="toggle-btn chart-toggle-btn" data-target="system-chart">
                    <span class="toggle-icon">▼</span>
                </button>
            </div>
            <div class="system-info">
                <p>1分钟系统负载: <span id="system-load">0.00</span></p>
                <p>当前进程数: <span id="process-count">0</span></p>
                <p>CPU温度: <span id="cpu-temperature">0°C</span></p>
                <p>开机时间: <span id="boot-time">0天0小时0分钟</span></p>
                <p id="battery-info">电池状态: 未检测到电池信息</p>
            </div>
            <div id="system-chart" class="chart-container"></div>
        </div>

        <!-- 系统资源趋势 -->
        <div class="panel chart-panel" data-chart-id="usage-chart">
            <div class="panel-header">
                <h2 class="panel-title">系统资源趋势</h2>
                <button class="toggle-btn chart-toggle-btn" data-target="usage-chart">
                    <span class="toggle-icon">▼</span>
                </button>
            </div>
            <div class="usage-info">
                <p>CPU占用率: <span id="cpu-usage-current">0%</span></p>
                <p>内存占用率: <span id="mem-usage-current">0%</span></p>
                <p>GPU占用率: <span id="gpu-usage-current">0%</span></p>
            </div>
            <div id="usage-chart" class="chart-container"></div>
        </div>
    </div>

    <footer>
        <p class="project">SystemStatus / EndlessPixel-SS</p>
        <p class="studio">Copyright © 2024-2025 EndlessPixel Studio. All Rights Reserved.</p>
    </footer>

    <!-- 最后引入JS -->
    <script src="script.js"></script>
</body>

</html>