增加了显示选项的开光

10 months ago · 07d0422095
2 changed files with 54 additions and 10 deletions
--- a/README.md
+++ b/README.md
@ -6,6 +6,7 @@ TODO
 ## 2.2. 服务器环境
 因为本质上是通过ssh连接服务器，然后通过命令来获取相应的信息，有的命令可能服务器系统上不自带需要另外安装，否则无法获取到对应的数据。
 - **ifstat**，用于获取网络数据的工具，可通过apt安装。并且需要在服务器上运行一下命令，查看哪个网卡才是主要的，写到配置文件里去。
+- **sysstat**，用于获取cpu的数据。
 - **nvidia驱动**，需要安装N卡的驱动，通过`nvidia-smi`来获取显卡信息。

 ## 2.3. 网页部署
--- a/index.html
+++ b/index.html
@ -26,15 +26,55 @@
        .gpu-info {
            margin-top: 10px;
        }
+
+        /* 头部样式 */
+        .head_contrainer{
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+            height: 90px;
+            align-items: center;
+        }
+        .head_contrainer .checkboxes{
+            display: flex;
+            align-items: center;
+        }
+
+
    </style>
 </head>
 <body>
-    <h1>Server and GPU Information</h1>
+    <div class="head_contrainer">
+        <div>
+            <h1>Server and GPU Information</h1>
+            <p id="time"></p>
+        </div>
+
+        <div class="checkboxes">
+            <div class="sample">
+                <label for="toggle_network">网络</label>
+                <input type="checkbox" id="toggle_network" checked>
+            </div>
+            <div class="sample">
+                <label for="toggle_memory">内存</label>
+                <input type="checkbox" id="toggle_memory" checked>
+            </div>
+            <div class="sample">
+                <label for="toggle_storage">存储</label>
+                <input type="checkbox" id="toggle_storage" checked>
+            </div>
+            <div class="sample">
+                <label for="toggle_gpus">显卡</label>
+                <input type="checkbox" id="toggle_gpus" checked>
+            </div>
+        </div>
+    </div>
    <div id="server-data"></div>

    <script>
+        // 请求服务器获取GPus数据
        function fetchData() {
-            fetch('http://127.0.0.1:15002/all_data')
+            fetch('http://lxblxb.top:15002/all_data')
                // 获取服务器和显卡数据
                .then(response => response.json())  // 解析 JSON 响应
                .then(data => {
@ -81,6 +121,7 @@
            serverCard.appendChild(bar);
        }

+        // 页面绑定数据
        function displayServerData(data) {
            // 绘制 -------------------
            let serverDataContainer = document.getElementById('server-data');
@ -89,9 +130,11 @@
            let timeStr = data['time']
            let serverData = data['server_data']

-            let timeDiv = document.createElement('div');
-            timeDiv.textContent = timeStr;
-            serverDataContainer.appendChild(timeDiv);
+            // let timeDiv = document.createElement('div');
+            // timeDiv.textContent = timeStr;
+            // serverDataContainer.appendChild(timeDiv);
+            let timeDiv = document.getElementById('time')
+            timeDiv.textContent = "更新时间为：" + timeStr

            let greenDot = '<span style="color: green;"> 空闲</span>';
            let yellowDot = '<span style="color: orange;"> 占用</span>';
@ -109,7 +152,7 @@
                serverCard.appendChild(serverName);

                // 网速
-                if ('network_info' in serverData[key]){
+                if (document.getElementById('toggle_network').checked && 'network_info' in serverData[key]){
                    let networkInfo = document.createElement('div');
                    networkInfo.classList.add('network-info');

@ -124,7 +167,7 @@
                }

                // 内存
-                if ('memory_info' in serverData[key]){
+                if (document.getElementById('toggle_memory').checked && 'memory_info' in serverData[key]){
                    let memoryInfo = document.createElement('div');
                    memoryInfo.classList.add('memory-info');

@ -146,7 +189,7 @@
                }

                // 存储空间
-                if ('storage_info_list' in serverData[key]){
+                if (document.getElementById('toggle_storage').checked && 'storage_info_list' in serverData[key]){
                    let storageInfo = document.createElement('div');
                    storageInfo.classList.add('storage-info');

@ -171,7 +214,7 @@
                }

                // gpu
-                if ('gpu_info_list' in serverData[key]){
+                if (document.getElementById('toggle_gpus').checked && 'gpu_info_list' in serverData[key]){
                    serverData[key].gpu_info_list.forEach(function(gpu){
                        let gpuInfo = document.createElement('div');
                        gpuInfo.classList.add('gpu-info');
@ -215,4 +258,4 @@
        });
    </script>
 </body>
-</html>
+</html>