From cb836de80d33e8683a6bb9f8ec37d21845f4db86 Mon Sep 17 00:00:00 2001
From: lxbhahaha <32586299+lxbhahaha@users.noreply.github.com>
Date: Fri, 4 Oct 2024 10:52:04 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E4=BA=86=E6=98=BE=E7=A4=BA?=
 =?UTF-8?q?=E9=80=89=E9=A1=B9=E7=9A=84=E5=BC=80=E5=85=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md  |  1 +
 index.html | 63 +++++++++++++++++++++++++++++++++++++++++++++---------
 2 files changed, 54 insertions(+), 10 deletions(-)
diff --git a/README.md b/README.md
index 112c274..93693b4 100644
--- a/README.md
+++ b/README.md
@@ -6,6 +6,7 @@ TODO
 ## 2.2. 服务器环境
 因为本质上是通过ssh连接服务器，然后通过命令来获取相应的信息，有的命令可能服务器系统上不自带需要另外安装，否则无法获取到对应的数据。
 - **ifstat**，用于获取网络数据的工具，可通过apt安装。并且需要在服务器上运行一下命令，查看哪个网卡才是主要的，写到配置文件里去。
+- **sysstat**，用于获取cpu的数据。
 - **nvidia驱动**，需要安装N卡的驱动，通过`nvidia-smi`来获取显卡信息。
 
 ## 2.3. 网页部署
diff --git a/index.html b/index.html
index 4480179..1bb9239 100644
--- a/index.html
+++ b/index.html
@@ -26,15 +26,55 @@
         .gpu-info {
             margin-top: 10px;
         }
+
+        /* 头部样式 */
+        .head_contrainer{
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+            height: 90px;
+            align-items: center;
+        }
+        .head_contrainer .checkboxes{
+            display: flex;
+            align-items: center;
+        }
+
+
     </style>
 </head>
 <body>
-    <h1>Server and GPU Information</h1>
+    <div class="head_contrainer">
+        <div>
+            <h1>Server and GPU Information</h1>
+            <p id="time"></p>
+        </div>
+
+        <div class="checkboxes">
+            <div class="sample">
+                <label for="toggle_network">网络</label>
+                <input type="checkbox" id="toggle_network" checked>
+            </div>
+            <div class="sample">
+                <label for="toggle_memory">内存</label>
+                <input type="checkbox" id="toggle_memory" checked>
+            </div>
+            <div class="sample">
+                <label for="toggle_storage">存储</label>
+                <input type="checkbox" id="toggle_storage" checked>
+            </div>
+            <div class="sample">
+                <label for="toggle_gpus">显卡</label>
+                <input type="checkbox" id="toggle_gpus" checked>
+            </div>
+        </div>
+    </div>
     <div id="server-data"></div>
 
     <script>
+        // 请求服务器获取GPus数据
         function fetchData() {
-            fetch('http://127.0.0.1:15002/all_data')
+            fetch('http://lxblxb.top:15002/all_data')
                 // 获取服务器和显卡数据
                 .then(response => response.json())  // 解析 JSON 响应
                 .then(data => {
@@ -81,6 +121,7 @@
             serverCard.appendChild(bar);
         }
 
+        // 页面绑定数据
         function displayServerData(data) {
             // 绘制 -------------------
             let serverDataContainer = document.getElementById('server-data');
@@ -89,9 +130,11 @@
             let timeStr = data['time']
             let serverData = data['server_data']
 
-            let timeDiv = document.createElement('div');
-            timeDiv.textContent = timeStr;
-            serverDataContainer.appendChild(timeDiv);
+            // let timeDiv = document.createElement('div');
+            // timeDiv.textContent = timeStr;
+            // serverDataContainer.appendChild(timeDiv);
+            let timeDiv = document.getElementById('time')
+            timeDiv.textContent = "更新时间为：" + timeStr
 
             let greenDot = '<span style="color: green;"> 空闲</span>';
             let yellowDot = '<span style="color: orange;"> 占用</span>';
@@ -109,7 +152,7 @@
                 serverCard.appendChild(serverName);
 
                 // 网速
-                if ('network_info' in serverData[key]){
+                if (document.getElementById('toggle_network').checked && 'network_info' in serverData[key]){
                     let networkInfo = document.createElement('div');
                     networkInfo.classList.add('network-info');
 
@@ -124,7 +167,7 @@
                 }
 
                 // 内存
-                if ('memory_info' in serverData[key]){
+                if (document.getElementById('toggle_memory').checked && 'memory_info' in serverData[key]){
                     let memoryInfo = document.createElement('div');
                     memoryInfo.classList.add('memory-info');
 
@@ -146,7 +189,7 @@
                 }
 
                 // 存储空间
-                if ('storage_info_list' in serverData[key]){
+                if (document.getElementById('toggle_storage').checked && 'storage_info_list' in serverData[key]){
                     let storageInfo = document.createElement('div');
                     storageInfo.classList.add('storage-info');
 
@@ -171,7 +214,7 @@
                 }
 
                 // gpu
-                if ('gpu_info_list' in serverData[key]){
+                if (document.getElementById('toggle_gpus').checked && 'gpu_info_list' in serverData[key]){
                     serverData[key].gpu_info_list.forEach(function(gpu){
                         let gpuInfo = document.createElement('div');
                         gpuInfo.classList.add('gpu-info');
@@ -215,4 +258,4 @@
         });
     </script>
 </body>
-</html>
+</html>
\ No newline at end of file
