zjk/H100PowerManger
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

完善功能

Browse Source
This commit is contained in:
zjk
2025-04-02 21:31:51 +08:00
parent 341630f547
commit 811fbf2924
7 changed files with 426 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files
bin/static/script.js
+143 -25
View File
@@ -197,34 +197,109 @@ function updateProcesses(processes) {
const totalCount = document.getElementById('process-count');
totalCount.textContent = processes.count;
processes.list.forEach(process => {
const processElement = document.createElement('div');
processElement.className = 'process-card';
const header = document.createElement('div');
header.className = 'process-header';
header.innerHTML = `
<span class="process-name">${process.name}</span>
<span class="topic-count">订阅:${process.subscribed.length} 发布:${process.published.length}</span>
`;
const body = document.createElement('div');
body.className = 'process-body';
body.innerHTML = `
<div class="topic-group">
<h4>订阅主题</h4>
<ul class="subscribed-list">${process.subscribed.map(t => `<li>${t}</li>`).join('')}</ul>
</div>
<div class="topic-group">
<h4>发布主题</h4>
<ul class="published-list">${process.published.map(t => `<li>${t}</li>`).join('')}</ul>
// 创建消息详情弹窗
const modal = document.createElement('div');
modal.id = 'message-modal';
modal.className = 'modal';
modal.innerHTML = `
<div class="modal-content">
<span class="close-modal">&times;</span>
<h3>消息详情</h3>
<div class="message-details">
<div class="detail-row">
<label>消息名称:</label>
<span id="message-name"></span>
</div>
<div class="detail-row">
<label>消息类型:</label>
<span id="message-type"></span>
</div>
<div class="detail-row">
<label>最后更新时间:</label>
<span id="message-timestamp"></span>
</div>
<div class="detail-row">
<label>消息内容:</label>
<pre id="message-content"></pre>
</div>
</div>
</div>
`;
document.body.appendChild(modal);
processElement.appendChild(header);
processElement.appendChild(body);
processList.appendChild(processElement);
});
// 添加弹窗关闭事件
modal.querySelector('.close-modal').addEventListener('click', () => {
modal.style.display = 'none';
});
processes.list.forEach(process => {
const processElement = document.createElement('div');
processElement.className = 'process-card';
const header = document.createElement('div');
header.className = 'process-header';
header.innerHTML = `
<span class="process-name">${process.name}</span>
<span class="topic-count">订阅:${process.subscribed.length} 发布:${process.published.length}</span>
`;
const body = document.createElement('div');
body.className = 'process-body';
body.innerHTML = `
<div class="topic-group">
<h4>订阅主题</h4>
<ul class="subscribed-list">${process.subscribed.map(t => `<li class="message-item" data-type="subscribed">${t}</li>`).join('')}</ul>
</div>
<div class="topic-group">
<h4>发布主题</h4>
<ul class="published-list">${process.published.map(t => `<li class="message-item" data-type="published">${t}</li>`).join('')}</ul>
</div>
`;
body.querySelectorAll('.message-item').forEach(item => {
let timeoutId;
item.addEventListener('mouseenter', function(event) {
timeoutId = setTimeout(async () => {
const spinner = createSpinner(event.clientX, event.clientY);
try {
const messageName = item.textContent; // 新增获取消息名称
const messageType = item.dataset.type; // 新增获取消息类型
const response = await fetch(`/api/message-details?name=${encodeURIComponent(messageName)}&type=${messageType}`);
const data = await response.json();
if (data.success) {
// 根据C++的CVar结构映射字段
document.getElementById('message-name').textContent = data.name || 'N/A';
document.getElementById('message-type').textContent = data.type || '未知类型';
document.getElementById('message-timestamp').textContent = new Date(data.time * 1000).toLocaleString(); // 时间戳转换
document.getElementById('message-content').textContent = JSON.stringify({
value: data.value,
source: data.source
}, null, 2);
modal.style.display = 'block';
} else {
showErrorTooltip(event, `获取失败: ${data.message || '未知错误'}`);
}
} catch (error) {
showErrorTooltip(event, '网络连接异常，请检查后重试');
console.error('获取消息详情失败:', error);
} finally {
spinner.remove();
}
}, 300);
});
item.addEventListener('mouseleave', () => {
clearTimeout(timeoutId);
modal.style.display = 'none';
});
});
processElement.appendChild(header);
processElement.appendChild(body);
processList.appendChild(processElement);
});
}
// 渲染单个进程信息
@@ -259,3 +334,46 @@ function clearProcessList() {
processLog.removeChild(processLog.firstChild);
}
}
// 新增工具函数
function createSpinner(x, y) {
const spinner = document.createElement('div');
spinner.className = 'loading-spinner';
spinner.style = `
position: fixed;
left: ${x + 15}px;
top: ${y + 15}px;
width: 24px;
height: 24px;
border: 3px solid rgba(97, 218, 251, 0.3);
border-radius: 50%;
border-top-color: #61dafb;
animation: spin 1s ease-in-out infinite;
z-index: 1000;
`;
document.body.appendChild(spinner);
return spinner;
}
function showErrorTooltip(event, message) {
const tooltip = document.createElement('div');
tooltip.className = 'error-tooltip';
tooltip.innerHTML = `
<i class="fas fa-exclamation-triangle"></i>
<span>${message}</span>
`;
tooltip.style = `
position: fixed;
left: ${event.clientX + 20}px;
top: ${event.clientY + 20}px;
padding: 8px 12px;
background: rgba(255, 87, 87, 0.9);
color: white;
border-radius: 4px;
font-size: 14px;
z-index: 1000;
animation: fadeIn 0.3s ease;
`;
document.body.appendChild(tooltip);
setTimeout(() => tooltip.remove(), 3000);
}