104 lines
3.7 KiB
JavaScript
104 lines
3.7 KiB
JavaScript
// 拖动浮动窗口功能
|
|
const floatingWindow = document.getElementById('floatingWindow');
|
|
const header = document.querySelector('.header');
|
|
const draggable = document.querySelector('.draggable');
|
|
|
|
let isDragging = false;
|
|
let offsetX, offsetY;
|
|
|
|
// 开始拖动
|
|
draggable.addEventListener('mousedown', (e) => {
|
|
isDragging = true;
|
|
offsetX = e.clientX - floatingWindow.getBoundingClientRect().left;
|
|
offsetY = e.clientY - floatingWindow.getBoundingClientRect().top;
|
|
document.addEventListener('mousemove', onMouseMove);
|
|
document.addEventListener('mouseup', () => {
|
|
isDragging = false;
|
|
document.removeEventListener('mousemove', onMouseMove);
|
|
});
|
|
});
|
|
|
|
// 拖动中
|
|
function onMouseMove(e) {
|
|
if (isDragging) {
|
|
floatingWindow.style.left = e.clientX - offsetX + 'px';
|
|
floatingWindow.style.top = e.clientY - offsetY + 'px';
|
|
}
|
|
}
|
|
|
|
// 动态生成新条目
|
|
function createEntry(nodeName) {
|
|
const entry = document.createElement('div');
|
|
entry.classList.add('entry');
|
|
|
|
const statusDot = document.createElement('div');
|
|
statusDot.classList.add('status-dot');
|
|
|
|
const nodeNameElement = document.createElement('div');
|
|
nodeNameElement.classList.add('node-name');
|
|
nodeNameElement.textContent = nodeName;
|
|
|
|
const statusData = document.createElement('div');
|
|
statusData.classList.add('status-data');
|
|
statusData.textContent = '流式数据...';
|
|
|
|
entry.appendChild(statusDot);
|
|
entry.appendChild(nodeNameElement);
|
|
entry.appendChild(statusData);
|
|
|
|
return entry;
|
|
}
|
|
function cleanString(str) {
|
|
// 去除所有空白字符（包括中间的）
|
|
return str.replace(/\s+/g, '');
|
|
}
|
|
// 更新条目内容
|
|
function updateEntry(nodeName, statusData) {
|
|
const contentDiv = document.getElementById('entry-content');
|
|
const entries = [...contentDiv.children];
|
|
entries.forEach(entry => {
|
|
entry.style.display = 'none';
|
|
});
|
|
// 只显示前8个条目
|
|
const displayEntries = entries.slice(0, 8);
|
|
displayEntries.forEach(entry => {
|
|
entry.style.display = ''; // 恢复默认显示
|
|
});
|
|
// 查找对应的条目
|
|
for (let entry of entries) {
|
|
const nodeNameElement = entry.querySelector('.node-name');
|
|
if (nodeNameElement.textContent === nodeName) {
|
|
let statusDataElement = entry.querySelector('.status-data');
|
|
// 如果内容和要更新的内容一样,跳过
|
|
if (!statusData)return;
|
|
if (cleanString(statusData) === cleanString(statusDataElement.textContent)) {
|
|
return;
|
|
}
|
|
|
|
// 将元素滚动到最底部
|
|
const parent = entry.parentElement; // 获取条目所在的父容器
|
|
parent.appendChild(entry); // 移动到父容器末尾（自动移除原有位置）
|
|
const statusDot = entry.querySelector('.status-dot');
|
|
statusDataElement = entry.querySelector('.status-data');
|
|
// 更新状态圆点颜色（根据状态来决定颜色，可以根据后端发送的状态修改）
|
|
statusDot.style.backgroundColor = 'green'; // 假设状态是正常的，暂时设置为绿色
|
|
|
|
// 更新流式数据
|
|
statusDataElement.textContent = statusData;
|
|
statusDataElement.scrollLeft = statusDataElement.scrollWidth - statusDataElement.clientWidth
|
|
contentDiv.scrollTop = contentDiv.scrollHeight;
|
|
return; // 找到对应的条目后退出
|
|
}
|
|
}
|
|
|
|
|
|
// 如果没有找到对应条目，创建一个新的条目并添加到页面
|
|
contentDiv.appendChild(createEntry(nodeName));
|
|
updateEntry(nodeName, statusData); // 立即更新新条目
|
|
}
|
|
|
|
// 模拟后端数据流
|
|
// const socket = new WebSocket('ws://localhost:8080'); // 连接后端 WebSocket
|
|
|
|
|