Tool_CheckGPUsWeb/web/js/script.js

// 请求服务器获取数据
function fetchData() {
    fetch('http://127.0.0.1:15002/api/get_data')
        // 获取服务器和显卡数据
        .then(response => response.json())  // 解析 JSON 响应
        .then(data => {
            // 处理 JSON 数据
            // console.log(data);
            displayServerData(data); // 调用显示数据的函数
        })
        .catch(error => {
            // console.error('Error fetching data:', error);
            displayError(error + " （多半是没有正确连接服务器端，可能是没开、网络错误）");
        });
}

// 显示错误
function displayError(err_info){
    let serverDataContainer = document.getElementById('server-data');
    serverDataContainer.innerHTML = ''; // 清空容器

    let errDiv = document.createElement('div');
    errDiv.classList.add('error-info');
    errDiv.innerText = err_info;
    serverDataContainer.appendChild(errDiv);
}

// 将KB转为合适的格式
function parse_data_unit(num, fixedLen=2){
    if (num < 1024){
        return num.toFixed(fixedLen) + " KB";
    }

    num /= 1024;
    if (num < 1024){
        return num.toFixed(fixedLen) + " MB";
    }

    num /= 1024;
    if (num < 1024){
        return num.toFixed(fixedLen) + " GB";
    }

    num /= 1024;
    if (num < 1024){
        return num.toFixed(fixedLen) + " TB";
    }
}


function add_bar(serverCard){
    let bar = document.createElement('hr');
    serverCard.appendChild(bar);
}

// 添加服务器信息的元素
function displayServerData(data){
    let serverDataContainer = document.getElementById('server-data');
    serverDataContainer.innerHTML = ''; // 清空容器

    let serverDataDict = data['server_dict'];

    // 创建每一个服务器的信息
    for (let serverTitle in serverDataDict){
        let serverCard = document.createElement('div');
        serverCard.className = 'card';

        // 标题
        let serverName = document.createElement('div');
        serverName.className = 'server-name';
        serverName.textContent = serverTitle;
        serverCard.appendChild(serverName);

        serverData = serverDataDict[serverTitle];
        // 如果没有数据则跳过
        if (serverData == null){
            let errText = document.createElement('div');
            errText.className = 'error-text';
            errText.textContent = "No data.";
            serverCard.appendChild(errText);
            serverDataContainer.appendChild(serverCard);
            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 -";
        }

        // 网速
        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);
        }

        // CPU
        if ('cpu' in serverData){
            let cpuInfo = document.createElement('div');
            cpuInfo.className = 'cpu-info';

            temperature_list_str = "";
            serverData.cpu['temperature_list'].forEach(function(v){
                temperature_list_str += v + " ℃ ";
            });
            cpuInfo.innerHTML = "<strong>CPU型号 : </strong>" + serverData.cpu['name'] + "<br>" +
                                "<strong>温度 : </strong>" + temperature_list_str + "<br>" +
                                "<strong>占用率 : </strong>" + serverData.cpu['core_avg_occupy'] + "%";

            serverCard.appendChild(cpuInfo);
            // 分割线
            add_bar(serverCard);
        }
        
        // 内存
        if ('memory' in serverData){
            let memoryInfo = document.createElement('div');
            memoryInfo.className = 'memory-info';
            let totalNum = serverData.memory.total
            let usedNum = serverData.memory.used
            let totalMem = parse_data_unit(totalNum);
            let usedMem = parse_data_unit(usedNum);
            let tmpClass = "state-free";
            if (usedNum / totalNum > 0.95)
                tmpClass = "state-super-occupy";
            else if (usedNum / totalNum > 0.8)
                tmpClass = "state-occupy";
            else if (usedNum / totalNum > 0.6)
                tmpClass = "state-light-occupy";
            memoryInfo.innerHTML += "<strong> 内存 : </strong> <span class=\"" + tmpClass + "\">" + usedMem + " / " + totalMem + "</span><br>";
            serverCard.appendChild(memoryInfo);
            // 分割线
            add_bar(serverCard);
        }

        // 存储空间
        if ('storage_list' in serverData){
            let storageInfo = document.createElement('div');
            storageInfo.className = 'storage-info';

            for (let i = 0; i < serverData.storage_list.length; i++) {
                let targetPath = serverData.storage_list[i].path;
                let totalNum = serverData.storage_list[i].total
                let availableNum = serverData.storage_list[i].available
                let totalStorage = parse_data_unit(totalNum);
                let availableStorage = parse_data_unit(totalNum - availableNum);
                let tmpClass = "state-free";
                if (availableNum / totalNum < 0.01)
                    tmpClass = "state-super-occupy";
                else if (availableNum / totalNum < 0.1)
                    tmpClass = "state-occupy";
                else if (availableNum / totalNum < 0.3)
                    tmpClass = "state-light-occupy";
                storageInfo.innerHTML += '<strong>' + targetPath + " :</strong> <span class=\"" + tmpClass
                                            + "\">" + availableStorage + " / " + totalStorage + "</span><br>";
            }

            serverCard.appendChild(storageInfo);
            // 分割线
            add_bar(serverCard);
        }

        if ('gpu_list' in serverData){
            serverData.gpu_list.forEach(function(gpu){
                let gpuInfo = document.createElement('div');
                gpuInfo.className = 'gpu-info';

                let markFree = '<span class="state-free"> 空闲</span>';
                let markLightOccupy = '<span class="state-light-occupy"> 占用</span>';
                let markOccupy = '<span class="state-occupy"> 占用</span>';
                let tmpMark = markFree;
                if (gpu.used_memory < 1000 && gpu.utilization < 20){
                    tmpMark = markFree;
                }
                else if (gpu.util_mem < 50){
                    tmpMark = markLightOccupy;
                }else{
                    tmpMark = markOccupy;
                }
                gpuInfo.innerHTML = '<strong>' + gpu.idx + ' - ' + gpu.name + tmpMark + '</strong><br>'
                                    + '温度: ' + gpu.temperature + '°C<br>'
                                    + '显存: ' + gpu.used_memory + ' / ' + gpu.total_memory + " MB" + '<br>'
                                    + '利用率: ' + gpu.utilization + '%';

                // 添加进程信息
                let processInfo = document.createElement('div');
                processInfo.classList.add('process-info');
                processInfo.innerHTML = "使用情况: ";

                gpu.process_list.sort((a, b) => b.memory - a.memory);
                gpu.process_list.forEach(function(item, index){
                    if (item.memory > 40)
                        processInfo.innerHTML += `<span class="process-item" title="${item.cmd}">${item.user} (${item.memory})  </span>`;
                });
                gpuInfo.appendChild(processInfo);  // 将用户信息添加到GPU信息中

                serverCard.appendChild(gpuInfo);
            });
            // 分割线
            add_bar(serverCard);
        }

        // 单个服务器信息作为child加入
        serverDataContainer.appendChild(serverCard);
    }
}

// TODO test
fetchData()