增加了moos变量显示的webui功能

bin/static/script.js

@@ -130,11 +130,20 @@ function updateUI(data) {
     document.getElementById('state-note').textContent = data.state.note;
 
     // 更新DIS系统状态
-    document.getElementById('dis-sys-state').textContent = JSON.stringify(data.status.disSys, null, 2);
+    // document.getElementById('dis-sys-state').textContent = JSON.stringify(data.status.disSys, null, 2);
     
     // 更新CCU状态
-    document.getElementById('ccu-state').textContent = JSON.stringify(data.status.ccuState, null, 2);
+    // document.getElementById('ccu-state').textContent = JSON.stringify(data.status.ccuState, null, 2);
     
+    // 更新进程消息面板
+    console.log('Received WebSocket message:', data);
+    if (data && data.processes && data.processes.list) {
+        console.log('Updating processes:', data.processes);
+        updateProcesses(data.processes);
+    } else {
+        console.warn('Invalid processes data received:', data);
+    }
+
     // 更新运行日志
     document.getElementById('log-data').textContent = data.status.logs.join('\n');
 }
@@ -179,3 +188,74 @@ document.getElementById('moos-send-btn').addEventListener('click', sendMoosNotif
 
 // 初始化WebSocket连接
 initWebSocket();
+
+// 更新进程列表
+function updateProcesses(processes) {
+    const processList = document.getElementById('process-list');
+    processList.innerHTML = ''; // 清空现有内容
+    
+    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>
+            </div>
+        `;
+
+        processElement.appendChild(header);
+        processElement.appendChild(body);
+        processList.appendChild(processElement);
+    });
+}
+
+// 渲染单个进程信息
+function renderProcess(process) {
+    const template = document.getElementById('process-template');
+    const clone = document.importNode(template.content, true);
+    
+    const processEntry = clone.querySelector('.process-entry');
+    processEntry.querySelector('.process-name').textContent = process.name;
+    
+    const subscribedList = processEntry.querySelector('.subscribed-list');
+    process.subscribed.forEach(topic => {
+        const li = document.createElement('li');
+        li.textContent = topic;
+        subscribedList.appendChild(li);
+    });
+    
+    const publishedList = processEntry.querySelector('.published-list');
+    process.published.forEach(topic => {
+        const li = document.createElement('li');
+        li.textContent = topic;
+        publishedList.appendChild(li);
+    });
+    
+    return processEntry;
+}
+
+// 清空进程列表
+function clearProcessList() {
+    const processLog = document.getElementById('log-data');
+    while (processLog.firstChild && processLog.firstChild.tagName !== 'TEMPLATE') {
+        processLog.removeChild(processLog.firstChild);
+    }
+}