lxb 7 months ago
parent
commit
fe0c86f85c
  1. 8
      web/css/style_1.css
  2. 25
      web/js/script.js

8
web/css/style_1.css

@ -14,18 +14,20 @@
padding: 5px 10px; padding: 5px 10px;
margin: 5px; margin: 5px;
border-radius: 8px; border-radius: 8px;
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.3);
width: 300px; width: 300px;
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
margin: 12px;
} }
.server-name { .server-name {
background-color: rgb(0, 0, 0); background-color: rgb(0, 0, 0);
color: white; color: white;
border-radius: 8px; border-radius: 8px;
padding: 4px 10px; padding: 6px 10px;
font-size: 26px; font-size: 26px;
margin-top: 4px;
margin-bottom: 6px; margin-bottom: 6px;
} }
@ -37,7 +39,7 @@
border-radius: 8px; border-radius: 8px;
margin-top: 5px; margin-top: 5px;
padding: 4px 8px; padding: 4px 8px;
margin-bottom: 5px; margin-bottom: 12px;
background-color: #f9f9f9; background-color: #f9f9f9;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
} }

25
web/js/script.js

@ -1,6 +1,23 @@
// 判断内网还是公网
let apiURL = '';
fetch('/index.html') // 随便请求一个资源
.then(response => {
// 获取X-Environment响应头
const environment = response.headers.get('X-Environment');
// 根据环境变量设置API URL
if (environment === 'internal') {
apiURL = 'http://10.1.16.174:15001';
} else {
apiURL = 'http://gpus.lxblxb.top';
}
console.log('访问地址: ' + apiURL);
})
// 请求服务器获取数据 // 请求服务器获取数据
function fetchData() { function fetchData() {
fetch('http://10.1.16.174:15001/api/get_data') // http://mm.zjgsu.edu.cn/serverInfo-api/get_data fetch(apiURL + '/api/get_data')
// 获取服务器和显卡数据 // 获取服务器和显卡数据
.then(response => response.json()) // 解析 JSON 响应 .then(response => response.json()) // 解析 JSON 响应
.then(data => { .then(data => {
@ -85,14 +102,14 @@ function displayServerData(data){
// 判断时间 // 判断时间
let lastTime = new Date(serverData['update_time_stamp'] * 1000); let lastTime = new Date(serverData['update_time_stamp'] * 1000);
let timeFromUpdate = Date.now() - lastTime; let timeFromUpdate = Date.now() - lastTime;
if (timeFromUpdate > serverData['interval'] * 1000 * 3){ if (timeFromUpdate > serverData['interval'] * 1000 * 4){
let errText = document.createElement('div'); let errText = document.createElement('div');
errText.className = 'error-text'; errText.className = 'error-text';
errText.textContent = "长时间未更新,上次更新时间: " + lastTime.toLocaleString(); errText.textContent = "长时间未更新,上次更新时间: " + lastTime.toLocaleString();
serverCard.appendChild(errText); serverCard.appendChild(errText);
serverDataContainer.appendChild(serverCard); serverDataContainer.appendChild(serverCard);
continue; continue;
}else if (timeFromUpdate > serverData['interval'] * 1000 * 1.5){ }else if (timeFromUpdate > serverData['interval'] * 1000 * 2.5){
serverName.textContent = serverTitle + " - Not update -"; serverName.textContent = serverTitle + " - Not update -";
} }
@ -132,7 +149,7 @@ function displayServerData(data){
}); });
cpuInfo.innerHTML = "<strong>" + serverData.cpu['name'] + "</strong><br>" + cpuInfo.innerHTML = "<strong>" + serverData.cpu['name'] + "</strong><br>" +
"<strong>温度 : </strong>" + temperature_list_str + "<br>" + "<strong>温度 : </strong>" + temperature_list_str + "<br>" +
"<strong>占用率 : </strong>" + serverData.cpu['core_avg_occupy'] + "%"; "<strong>占用率 : </strong><span title=\"" + serverData.cpu['core_occupy_list'] + "\">" + serverData.cpu['core_avg_occupy'] + "%";
serverCard.appendChild(cpuInfo); serverCard.appendChild(cpuInfo);
// 分割线 // 分割线

Loading…
Cancel
Save