增加网络的简单显示

client.py

@@ -120,11 +120,43 @@ def get_memory_info(error_dict):
     return result_dict
 
 # 获取网络相关信息
+last_network_stats = None
+last_network_time = None
 def get_networks_info(error_dict):
-    # net_io = psutil.net_io_counters()
-    # print(net_io)
-    # todo
-    pass
+    result_list = list()
+    # try:
+    global last_network_stats
+    global last_network_time
+    current_stats = psutil.net_io_counters(pernic=True)
+    
+    if last_network_stats is None:
+        # 第一次检测
+        for k in current_stats.keys():
+            if k == 'lo':
+                continue
+            result_list.append({
+                "name": k,
+                "default": False,
+                "in": 0,
+                "out": 0
+            })
+    else:
+        time_interval = time.time() - last_network_time
+        for k in current_stats.keys():
+            if k == 'lo':
+                continue
+            result_list.append({
+                "name": k,
+                "default": False,
+                "in": (current_stats[k].bytes_recv - last_network_stats[k].bytes_recv) / time_interval / 1000,
+                "out": (current_stats[k].bytes_sent - last_network_stats[k].bytes_sent) / time_interval / 1000
+            })
+    
+    # 记录信息下次用
+    last_network_stats = current_stats
+    last_network_time = time.time()
+
+    return result_list
 
 # endregion
 

client_config.json

@@ -3,7 +3,7 @@
     "title": "174",
     "interval": 3.0,
     "note": "",
-    "enable": ["gpu", "cpu", "memory", "storage"],
+    "enable": ["gpu", "cpu", "memory", "storage", "network"],
     "storage_list":[
         "/",
         "/media/D",

web/css/style_1.css

@@ -7,21 +7,22 @@
     border-width: 2px;
     border-color: black;
     /* background-color: aqua; */
-    padding: 5px;
+    padding: 5px 10px;
     margin: 5px;
     border-radius: 8px;
 }
 
 .server-name {
-    background-color: black;
+    background-color: rgb(0, 0, 0);
     color: white;
     border-radius: 8px;
     padding: 4px 10px;
     font-size: 26px;
+    margin-bottom: 6px;
 }
 
 .gpu-info {
-    /* background-color: aqua; */
+    background-color: aqua;
     border-style: solid;
     border-width: 1px;
     border-color: #ccc;

web/js/script.js

@@ -82,6 +82,45 @@ function displayServerData(data){
             continue;
         }
 
+        // 判断时间
+        let lastTime = new Date(serverData['update_time_stamp'] * 1000);
+        let timeFromUpdate = Date.now() - lastTime;
+        if (timeFromUpdate > serverData['interval'] * 1000 * 3){
+            let errText = document.createElement('div');
+            errText.className = 'error-text';
+            errText.textContent = "长时间未更新，上次更新时间: " + lastTime.toLocaleString();
+            serverCard.appendChild(errText);
+            serverDataContainer.appendChild(serverCard);
+            continue;
+        }else if (timeFromUpdate > serverData['interval'] * 1000 * 1.5){
+            serverName.textContent = serverTitle + " - Not update -";
+        }
+
+        console.log(serverData);
+        // 网速
+        if ('network_list' in serverData){
+            let networkInfo = document.createElement('div');
+            networkInfo.className = 'network-info';
+
+            console.log(serverData.network);
+            // todo 暂时采用所有网卡均值的方法
+            let inSum = 0;
+            let outSum = 0;
+            serverData.network_list.forEach(function(network){
+                inSum += network['in'];
+                outSum += network['out'];
+            });
+
+            let inStr = parse_data_unit(inSum / serverData.network_list.length);
+            let outStr = parse_data_unit(outSum / serverData.network_list.length);
+
+            networkInfo.innerHTML += "<strong> 网络 : </strong> in:" + inStr + "/s  out:" + outStr + "/s</span><br>";
+
+            serverCard.appendChild(networkInfo);
+            // 分割线
+            add_bar(serverCard);
+        }
+        
         // 内存
         if ('memory' in serverData){
             let memoryInfo = document.createElement('div');
@@ -159,7 +198,6 @@ function displayServerData(data){
 
                 gpu.process_list.sort((a, b) => b.memory - a.memory);
                 gpu.process_list.forEach(function(item, index){
-                    console.log(item.memory );
                     if (item.memory > 40)
                         processInfo.innerHTML += `<span class="process-item" title="${item.cmd}">${item.user} (${item.memory})  </span>`;
                 });