update

data_define/server_data_example.json

@@ -4,11 +4,11 @@
             "title": "server title",
             "update_time_stamp": "1673082950",
             "note": "some note",
+            "interval": 3.0,
             "error_dict":{
                 "gpu": "some error",
                 "cpu": "some error"
             },
-            "interval": 3.0,
             "gpu_list":[
                 {
                     "idx": 0,

web/css/style_1.css

@@ -1,15 +1,23 @@
 #header-container {
-    background-color: beige;
+    /* background-color: beige; */
+    font-size: 32px;
+    font-weight: bold;
+}
+
+.header-container {
+    /* display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    gap: 10px; */
 }
 
 .card {
-    border-style: solid;
-    border-width: 2px;
-    border-color: black;
-    /* background-color: aqua; */
     padding: 5px 10px;
     margin: 5px;
     border-radius: 8px;
+    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
+    width: 300px;
+    display: inline-block;
+    vertical-align: top;
 }
 
 .server-name {

web/js/script.js

@@ -186,6 +186,7 @@ function displayServerData(data){
             add_bar(serverCard);
         }
 
+        // gpu
         if ('gpu_list' in serverData){
             serverData.gpu_list.forEach(function(gpu){
                 let gpuInfo = document.createElement('div');
@@ -226,6 +227,27 @@ function displayServerData(data){
             add_bar(serverCard);
         }
 
+        // 错误信息
+        if ('error_dict' in serverData){
+            let errorInfo = document.createElement('div');
+            errorInfo.className = 'storage-info';
+
+            if (Object.keys(serverData.error_dict).length > 0){
+                for (let k in serverData.error_dict){
+                    errorInfo.innerHTML += '<strong>' + k + " :</strong>" + serverData.error_dict[k] + "<br>";
+                }
+    
+                serverCard.appendChild(errorInfo);
+                // 分割线
+                add_bar(serverCard);
+            }
+        }
+
+        // 删除最后的分割线
+        if (serverCard.lastElementChild && serverCard.lastElementChild.tagName === 'HR') {
+            serverCard.removeChild(serverCard.lastElementChild);
+        }
+
         // 单个服务器信息作为child加入
         serverDataContainer.appendChild(serverCard);
     }