82 lines
2.7 KiB
JavaScript
82 lines
2.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 updateEntry(nodeName, statusData) {
|
|
const contentDiv = document.getElementById('content');
|
|
const entries = contentDiv.children;
|
|
|
|
// 查找对应的条目
|
|
for (let entry of entries) {
|
|
const nodeNameElement = entry.querySelector('.node-name');
|
|
if (nodeNameElement.textContent === nodeName) {
|
|
const statusDot = entry.querySelector('.status-dot');
|
|
const statusDataElement = entry.querySelector('.status-data');
|
|
|
|
// 更新状态圆点颜色（根据状态来决定颜色，可以根据后端发送的状态修改）
|
|
statusDot.style.backgroundColor = 'green'; // 假设状态是正常的，暂时设置为绿色
|
|
|
|
// 更新流式数据
|
|
statusDataElement.textContent = statusData;
|
|
return; // 找到对应的条目后退出
|
|
}
|
|
}
|
|
|
|
// 如果没有找到对应条目，创建一个新的条目并添加到页面
|
|
contentDiv.appendChild(createEntry(nodeName));
|
|
updateEntry(nodeName, statusData); // 立即更新新条目
|
|
}
|
|
|
|
// 模拟后端数据流
|
|
// const socket = new WebSocket('ws://localhost:8080'); // 连接后端 WebSocket
|
|
|
|
|