cn/com allow all

Html/apps/static/js/process_show_floating_window.js

@@ -0,0 +1,81 @@
+// 拖动浮动窗口功能
+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
+
+