|
|
|
@ -3,26 +3,86 @@ |
|
|
|
<head> |
|
|
|
<meta charset="UTF-8"> |
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
|
<title>Fetch JSON from Flask</title> |
|
|
|
<title>Server and GPU Information</title> |
|
|
|
<style> |
|
|
|
.card { |
|
|
|
margin: 10px; |
|
|
|
padding: 10px; |
|
|
|
border: 1px solid #ccc; |
|
|
|
border-radius: 5px; |
|
|
|
width: 300px; |
|
|
|
display: inline-block; |
|
|
|
vertical-align: top; |
|
|
|
} |
|
|
|
.server-name { |
|
|
|
font-weight: bold; |
|
|
|
margin-bottom: 5px; |
|
|
|
} |
|
|
|
.gpu-info { |
|
|
|
margin-top: 10px; |
|
|
|
} |
|
|
|
</style> |
|
|
|
</head> |
|
|
|
<body> |
|
|
|
<h1>Fetch JSON from Flask Example</h1> |
|
|
|
<button onclick="fetchData()">Fetch Data</button> |
|
|
|
<div id="output"></div> |
|
|
|
<h1>Server and GPU Information</h1> |
|
|
|
<div id="server-data"></div> |
|
|
|
|
|
|
|
<script> |
|
|
|
function fetchData() { |
|
|
|
fetch('http://127.0.0.1:15002/data') // 发起 GET 请求到 Flask 服务器的 '/get_data' 路径 |
|
|
|
fetch('http://127.0.0.1:15002/all_data') |
|
|
|
// 获取服务器和显卡数据 |
|
|
|
.then(response => response.json()) // 解析 JSON 响应 |
|
|
|
.then(data => { |
|
|
|
// 处理 JSON 数据 |
|
|
|
console.log(data); |
|
|
|
document.getElementById('output').innerHTML = '<pre>' + JSON.stringify(data, null, 2) + '</pre>'; |
|
|
|
// console.log(data); |
|
|
|
displayServerData(data); // 调用显示数据的函数 |
|
|
|
}) |
|
|
|
.catch(error => { |
|
|
|
console.error('Error fetching data:', error); |
|
|
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
function displayServerData(serverData) { |
|
|
|
// 绘制 ------------------- |
|
|
|
let serverDataContainer = document.getElementById('server-data'); |
|
|
|
serverDataContainer.innerHTML = ''; // 清空容器 |
|
|
|
|
|
|
|
for (let key in serverData){ |
|
|
|
let serverCard = document.createElement('div'); |
|
|
|
serverCard.classList.add('card'); |
|
|
|
|
|
|
|
let serverName = document.createElement('div'); |
|
|
|
serverName.classList.add('server-name'); |
|
|
|
let updateFlag = serverData[key].updated ? '' : ' -X-'; |
|
|
|
serverName.textContent = key + updateFlag; |
|
|
|
serverCard.appendChild(serverName); |
|
|
|
|
|
|
|
if ('info_list' in serverData[key]){ |
|
|
|
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>' |
|
|
|
+ 'Temperature: ' + gpu.temperature + '°C<br>' |
|
|
|
+ 'Memory: ' + gpu.used_mem + ' / ' + gpu.total_mem + " MB" + '<br>' |
|
|
|
+ 'Utilization: ' + gpu.util_gpu + '%'; |
|
|
|
serverCard.appendChild(gpuInfo); |
|
|
|
}); |
|
|
|
}else{ |
|
|
|
let errInfo = document.createElement('div'); |
|
|
|
errInfo.classList.add('error-info'); |
|
|
|
errInfo.innerHTML = '<strong>error info</strong><br>' + serverData[key].err_info; |
|
|
|
serverCard.appendChild(errInfo); |
|
|
|
} |
|
|
|
|
|
|
|
serverDataContainer.appendChild(serverCard); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
// 页面加载时获取数据并定时刷新 |
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
|
fetchData(); |
|
|
|
setInterval(fetchData, 2000); // 每5秒刷新一次数据 |
|
|
|
}); |
|
|
|
</script> |
|
|
|
</body> |
|
|
|
</html> |
|
|
|
|
