From ca9682a4afc0ce064c90018c87cb0f1234dcecfb Mon Sep 17 00:00:00 2001
From: lxbhahaha <32586299+lxbhahaha@users.noreply.github.com>
Date: Fri, 4 Oct 2024 11:11:20 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=EF=BC=9A=E6=9C=80=E5=90=8E?=
 =?UTF-8?q?=E4=B8=80=E6=9D=A1=E5=88=86=E5=89=B2=E7=BA=BF=E5=88=A0=E9=99=A4?=
 =?UTF-8?q?=EF=BC=8C=E7=82=B9=E5=87=BBcheckbox=E5=90=8E=E7=AB=8B=E5=88=BB?=
 =?UTF-8?q?=E5=88=B7=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md  |  4 +++-
 index.html | 32 +++++++++++++++++++++++---------
 2 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/README.md b/README.md
index 93693b4..6c9473b 100644
--- a/README.md
+++ b/README.md
@@ -10,4 +10,6 @@ TODO
 - **nvidia驱动**，需要安装N卡的驱动，通过`nvidia-smi`来获取显卡信息。
 
 ## 2.3. 网页部署
-TODO
\ No newline at end of file
+TODO
+# 3. 其他
+- 永辉帮忙搞了一下顶部checkbox布局的问题
\ No newline at end of file
diff --git a/index.html b/index.html
index 1bb9239..ed29d79 100644
--- a/index.html
+++ b/index.html
@@ -53,25 +53,27 @@
         <div class="checkboxes">
             <div class="sample">
                 <label for="toggle_network">网络</label>
-                <input type="checkbox" id="toggle_network" checked>
+                <input type="checkbox" id="toggle_network" checked onchange="updateDisplay()">
             </div>
             <div class="sample">
                 <label for="toggle_memory">内存</label>
-                <input type="checkbox" id="toggle_memory" checked>
+                <input type="checkbox" id="toggle_memory" checked onchange="updateDisplay()">
             </div>
             <div class="sample">
                 <label for="toggle_storage">存储</label>
-                <input type="checkbox" id="toggle_storage" checked>
+                <input type="checkbox" id="toggle_storage" checked onchange="updateDisplay()">
             </div>
             <div class="sample">
                 <label for="toggle_gpus">显卡</label>
-                <input type="checkbox" id="toggle_gpus" checked>
+                <input type="checkbox" id="toggle_gpus" checked onchange="updateDisplay()">
             </div>
         </div>
     </div>
     <div id="server-data"></div>
 
     <script>
+        let lastData = null;
+
         // 请求服务器获取GPus数据
         function fetchData() {
             fetch('http://lxblxb.top:15002/all_data')
@@ -116,13 +118,19 @@
         }
 
         function add_bar(serverCard){
-            let bar = document.createElement('div');
-            bar.innerHTML = "<hr />"
+            let bar = document.createElement('hr');
             serverCard.appendChild(bar);
         }
 
+        function updateDisplay(){
+            if (lastData != null){
+                displayServerData(lastData);
+            }
+        }
+
         // 页面绑定数据
         function displayServerData(data) {
+            lastData = data;
             // 绘制 -------------------
             let serverDataContainer = document.getElementById('server-data');
             serverDataContainer.innerHTML = ''; // 清空容器
@@ -130,9 +138,6 @@
             let timeStr = data['time']
             let serverData = data['server_data']
 
-            // let timeDiv = document.createElement('div');
-            // timeDiv.textContent = timeStr;
-            // serverDataContainer.appendChild(timeDiv);
             let timeDiv = document.getElementById('time')
             timeDiv.textContent = "更新时间为：" + timeStr
 
@@ -233,6 +238,8 @@
                                             + 'Utilization: ' + gpu.util_gpu + '%';
                         serverCard.appendChild(gpuInfo);
                     });
+                    // 分割线
+                    add_bar(serverCard);
                 }
 
                 // 错误信息
@@ -245,6 +252,13 @@
                     errInfo.classList.add('error-info');
                     errInfo.innerHTML = '<strong>error info</strong><br>' + serverData[key].err_info;
                     serverCard.appendChild(errInfo);
+                    // 分割线
+                    add_bar(serverCard);
+                }
+
+                // 删除最后的分割线
+                if (serverCard.lastElementChild && serverCard.lastElementChild.tagName === 'HR') {
+                    serverCard.removeChild(serverCard.lastElementChild);
                 }
 
                 serverDataContainer.appendChild(serverCard);