修复：最后一条分割线删除，点击checkbox后立刻刷新

README.md

@@ -11,3 +11,5 @@ TODO
 
 ## 2.3. 网页部署
 TODO
+# 3. 其他
+- 永辉帮忙搞了一下顶部checkbox布局的问题

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);