增加了颜色显示

index.html

@@ -47,6 +47,10 @@
             let serverDataContainer = document.getElementById('server-data');
             serverDataContainer.innerHTML = ''; // 清空容器
 
+            let greenDot = '<span style="color: green;"> 空闲</span>';
+            let yellowDot = '<span style="color: orange;"> 占用</span>';
+            let redDot = '<span style="color: red;"> 占用</span>';
+
             for (let key in serverData){
                 let serverCard = document.createElement('div');
                 serverCard.classList.add('card');
@@ -61,7 +65,16 @@
                     serverData[key].info_list.forEach(function(gpu){
                         let gpuInfo = document.createElement('div');
                         gpuInfo.classList.add('gpu-info');
-                        gpuInfo.innerHTML = '<strong>' + gpu.idx + ' - ' + gpu.gpu_name + '</strong><br>'
+                        let colorDot = greenDot;
+                        if (gpu.used_mem < 1000 && gpu.util_gpu < 20){
+                            colorDot = greenDot;
+                        }
+                        else if (gpu.util_mem < 50){
+                            colorDot = yellowDot;
+                        }else{
+                            colorDot = redDot;
+                        }
+                        gpuInfo.innerHTML = '<strong>' + gpu.idx + ' - ' + gpu.gpu_name + colorDot + '</strong><br>'
                                             + 'Temperature: ' + gpu.temperature + '°C<br>'
                                             + 'Memory: ' + gpu.used_mem + ' / ' + gpu.total_mem + " MB" + '<br>'
                                             + 'Utilization: ' + gpu.util_gpu + '%';