增加了moos变量显示的webui功能
This commit is contained in:
+82
-2
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -708,3 +708,154 @@ body {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.process-log {
|
||||
background-color: rgba(97, 218, 251, 0.05);
|
||||
padding: 15px;
|
||||
border-radius: 8px;
|
||||
max-height: 600px;
|
||||
overflow-y: auto;
|
||||
border: 1px solid rgba(97, 218, 251, 0.2);
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* 进程消息容器样式 */
|
||||
.process-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
gap: 15px;
|
||||
padding: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.process-card {
|
||||
background: linear-gradient(145deg, #3a3f4b, #2e323a);
|
||||
border-radius: 8px;
|
||||
padding: 15px;
|
||||
border: 1px solid rgba(97, 218, 251, 0.3);
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.process-card:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
|
||||
border-color: rgba(97, 218, 251, 0.6);
|
||||
}
|
||||
|
||||
.process-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-bottom: 10px;
|
||||
margin-bottom: 10px;
|
||||
border-bottom: 1px solid rgba(97, 218, 251, 0.2);
|
||||
}
|
||||
|
||||
.process-name {
|
||||
color: #61dafb;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.topic-count {
|
||||
color: #4caf50;
|
||||
font-size: 14px;
|
||||
background: rgba(76, 175, 80, 0.1);
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.topic-group h4 {
|
||||
color: #ffeb3b;
|
||||
margin: 10px 0 5px 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.subscribed-list, .published-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.subscribed-list li, .published-list li {
|
||||
padding: 6px 10px;
|
||||
margin: 3px 0;
|
||||
background: rgba(97, 218, 251, 0.05);
|
||||
border-radius: 4px;
|
||||
border-left: 3px solid rgba(97, 218, 251, 0.3);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.subscribed-list li:hover, .published-list li:hover {
|
||||
background: rgba(97, 218, 251, 0.1);
|
||||
border-left-color: #61dafb;
|
||||
transform: translateX(5px);
|
||||
}
|
||||
|
||||
#process-count {
|
||||
background: rgba(97, 218, 251, 0.2);
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
margin-left: 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.process-entry:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
border-color: rgba(97, 218, 251, 0.5);
|
||||
}
|
||||
|
||||
.process-name {
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
color: #61dafb;
|
||||
font-size: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.process-name::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: #61dafb;
|
||||
box-shadow: 0 0 8px #61dafb;
|
||||
animation: glow 2s infinite alternate;
|
||||
}
|
||||
|
||||
.message-type {
|
||||
font-style: italic;
|
||||
color: #61dafb;
|
||||
margin: 10px 0 5px 0;
|
||||
font-size: 14px;
|
||||
padding: 4px 8px;
|
||||
background: rgba(97, 218, 251, 0.1);
|
||||
border-radius: 4px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.subscribed-list, .published-list {
|
||||
margin-left: 20px;
|
||||
list-style-type: none;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.subscribed-list li, .published-list li {
|
||||
margin: 5px 0;
|
||||
padding: 6px 10px;
|
||||
background: rgba(97, 218, 251, 0.05);
|
||||
border-radius: 4px;
|
||||
border-left: 3px solid rgba(97, 218, 251, 0.3);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.subscribed-list li:hover, .published-list li:hover {
|
||||
background: rgba(97, 218, 251, 0.1);
|
||||
border-left-color: #61dafb;
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
@@ -68,8 +68,21 @@
|
||||
</div>
|
||||
|
||||
<div class="panel log-panel">
|
||||
<h2>运行日志</h2>
|
||||
<pre id="log-data">正在加载...</pre>
|
||||
<h2>进程消息 <span class="badge" id="process-count">0</span></h2>
|
||||
<div id="process-list" class="process-container"></div>
|
||||
<pre id="log-data" class="process-log">
|
||||
<template id="process-template">
|
||||
<div class="process-entry">
|
||||
<div class="process-name"></div>
|
||||
<div class="message-list">
|
||||
<div class="message-type">订阅的消息</div>
|
||||
<ul class="subscribed-list"></ul>
|
||||
<div class="message-type">发布的消息</div>
|
||||
<ul class="published-list"></ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
<div class="panel state-machine-panel">
|
||||
|
||||
Reference in New Issue
Block a user