已完成仿真监控页面
This commit is contained in:
parent
2b39135c63
commit
7e85f4e23a
Binary file not shown.
@ -519,7 +519,6 @@ class RunSimulation extends HTMLElement {
|
||||
this.eventSource.addEventListener('status', (event) => {
|
||||
try {
|
||||
const data = JSON.parse(event.data);
|
||||
console.log('收到状态事件:', data);
|
||||
|
||||
if (data.running === false) {
|
||||
// 仿真已经不存在或已结束
|
||||
@ -548,7 +547,6 @@ class RunSimulation extends HTMLElement {
|
||||
this.eventSource.addEventListener('completed', (event) => {
|
||||
try {
|
||||
const data = JSON.parse(event.data);
|
||||
console.log('收到完成事件:', data); // 添加日志
|
||||
|
||||
if (data.success) {
|
||||
this.showSuccess('仿真执行成功');
|
||||
@ -567,7 +565,6 @@ class RunSimulation extends HTMLElement {
|
||||
this.eventSource.addEventListener('error', (event) => {
|
||||
try {
|
||||
const data = JSON.parse(event.data);
|
||||
console.log('收到错误事件:', data); // 添加日志
|
||||
this.showError(`仿真错误: ${data.message}`);
|
||||
|
||||
// 重置UI
|
||||
@ -581,7 +578,6 @@ class RunSimulation extends HTMLElement {
|
||||
this.eventSource.addEventListener('terminated', (event) => {
|
||||
try {
|
||||
const data = JSON.parse(event.data);
|
||||
console.log('收到终止事件:', data); // 添加日志
|
||||
this.showMessage(`仿真已终止: ${data.message}`);
|
||||
|
||||
// 在输出框中添加终止信息
|
||||
@ -599,7 +595,6 @@ class RunSimulation extends HTMLElement {
|
||||
this.eventSource.addEventListener('timeout', (event) => {
|
||||
try {
|
||||
const data = JSON.parse(event.data);
|
||||
console.log('收到超时事件:', data); // 添加日志
|
||||
this.showError(`仿真超时: ${data.message}`);
|
||||
|
||||
// 在输出框中添加超时信息
|
||||
|
||||
@ -63,7 +63,6 @@ class SimulationMonitor extends HTMLElement {
|
||||
const systemResponse = await fetch('/api/system-monitor/system-info');
|
||||
const systemData = await systemResponse.json();
|
||||
this.systemInfo = systemData.data;
|
||||
console.log('系统信息:', this.systemInfo);
|
||||
|
||||
// 获取线程信息
|
||||
const threadResponse = await fetch('/api/system-monitor/thread-info');
|
||||
@ -79,6 +78,51 @@ class SimulationMonitor extends HTMLElement {
|
||||
}
|
||||
}
|
||||
|
||||
getStatusDisplay(status) {
|
||||
switch (status) {
|
||||
case 0:
|
||||
return { text: '未运行', color: '#999999' };
|
||||
case 1:
|
||||
return { text: '运行中', color: '#4CAF50' };
|
||||
case 2:
|
||||
return { text: '暂停中', color: '#FF9800' };
|
||||
case 3:
|
||||
return { text: '错误', color: '#f44336' };
|
||||
default:
|
||||
return { text: '未知状态', color: '#f44336' };
|
||||
}
|
||||
}
|
||||
|
||||
getCoreStatusDisplay(status) {
|
||||
switch (status) {
|
||||
case 0:
|
||||
return { text: '未加载', color: '#999999' };
|
||||
case 1:
|
||||
return { text: '初始化完成', color: '#FFC107' };
|
||||
case 2:
|
||||
return { text: '正常', color: '#4CAF50' };
|
||||
case 3:
|
||||
return { text: '异常', color: '#f44336' };
|
||||
default:
|
||||
return { text: '未知状态', color: '#f44336' };
|
||||
}
|
||||
}
|
||||
|
||||
getThreadStatusDisplay(status) {
|
||||
switch (status) {
|
||||
case 0:
|
||||
return { text: '未运行', color: '#999999' };
|
||||
case 1:
|
||||
return { text: '运行中', color: '#4CAF50' };
|
||||
case 2:
|
||||
return { text: '暂停中', color: '#FF9800' };
|
||||
case 3:
|
||||
return { text: '错误', color: '#f44336' };
|
||||
default:
|
||||
return { text: '未知状态', color: '#f44336' };
|
||||
}
|
||||
}
|
||||
|
||||
updateUI() {
|
||||
const input = this.shadowRoot.querySelector('.domain-input');
|
||||
const startButton = this.shadowRoot.querySelector('.start-button');
|
||||
@ -115,27 +159,45 @@ class SimulationMonitor extends HTMLElement {
|
||||
|
||||
engineInfo.innerHTML = `
|
||||
<div class="status-grid">
|
||||
${engineInfoFields.map(field => `
|
||||
${engineInfoFields.map(field => {
|
||||
let value = '未知';
|
||||
let color = '#666';
|
||||
|
||||
if (this.monitorStatus.isMonitoring && this.systemInfo?.engineInfo) {
|
||||
if (field.key === 'status') {
|
||||
const status = this.systemInfo.engineInfo[field.key];
|
||||
const statusInfo = this.getStatusDisplay(status);
|
||||
value = statusInfo.text;
|
||||
color = statusInfo.color;
|
||||
} else {
|
||||
value = this.systemInfo.engineInfo[field.key] || '未知';
|
||||
}
|
||||
} else if (field.key === 'status') {
|
||||
const statusInfo = this.getStatusDisplay(0);
|
||||
value = statusInfo.text;
|
||||
color = statusInfo.color;
|
||||
}
|
||||
|
||||
return `
|
||||
<div class="status-item">
|
||||
<div class="status-label">${field.label}</div>
|
||||
<div class="status-value">${this.monitorStatus.isMonitoring && this.systemInfo?.engineInfo ?
|
||||
(this.systemInfo.engineInfo[field.key] || '未知') :
|
||||
(field.key === 'status' ? '未运行' : '未知')}</div>
|
||||
<div class="status-value" style="color: ${color}">${value}</div>
|
||||
</div>
|
||||
`).join('')}
|
||||
`;
|
||||
}).join('')}
|
||||
</div>
|
||||
`;
|
||||
|
||||
// 更新核心状态
|
||||
const coreStatusFields = [
|
||||
{ label: '主框架状态', key: 'fwStatus' },
|
||||
{ label: '时间管理器状态', key: 'tmStatus' },
|
||||
{ label: '事件管理器状态', key: 'emStatus' },
|
||||
{ label: '环境管理器状态', key: 'sdStatus' },
|
||||
{ label: '线程管理器状态', key: 'thmStatus' },
|
||||
{ label: '模型管理器状态', key: 'mmStatus' },
|
||||
{ label: '服务管理器状态', key: 'smStatus' },
|
||||
{ label: 'DDS管理器状态', key: 'dmStatus' }
|
||||
{ label: '主框架状态', key: 'fw' },
|
||||
{ label: '时间管理器状态', key: 'tm' },
|
||||
{ label: '事件管理器状态', key: 'em' },
|
||||
{ label: '环境管理器状态', key: 'sd' },
|
||||
{ label: '线程管理器状态', key: 'thm' },
|
||||
{ label: '模型管理器状态', key: 'mm' },
|
||||
{ label: '服务管理器状态', key: 'sm' },
|
||||
{ label: 'DDS管理器状态', key: 'dm' }
|
||||
];
|
||||
|
||||
// 确保coreStatus元素存在
|
||||
@ -147,35 +209,47 @@ class SimulationMonitor extends HTMLElement {
|
||||
// 无论是否有数据，都显示状态项
|
||||
coreStatus.innerHTML = `
|
||||
<div class="status-grid">
|
||||
${coreStatusFields.map(field => `
|
||||
${coreStatusFields.map(field => {
|
||||
const status = this.monitorStatus.isMonitoring && this.systemInfo?.coreStatus ?
|
||||
this.systemInfo.coreStatus[field.key] : 0;
|
||||
const statusInfo = this.getCoreStatusDisplay(status);
|
||||
return `
|
||||
<div class="status-item">
|
||||
<div class="status-label">${field.label}</div>
|
||||
<div class="status-value">${this.monitorStatus.isMonitoring && this.systemInfo?.coreStatus ?
|
||||
(this.systemInfo.coreStatus[field.key] || '未知') : '未知'}</div>
|
||||
<div class="status-value" style="color: ${statusInfo.color}">${statusInfo.text}</div>
|
||||
</div>
|
||||
`).join('')}
|
||||
`;
|
||||
}).join('')}
|
||||
</div>
|
||||
`;
|
||||
|
||||
// 更新线程表格
|
||||
if (this.monitorStatus.isMonitoring && this.threadInfo && Array.isArray(this.threadInfo)) {
|
||||
threadTableBody.innerHTML = this.threadInfo.map(thread => `
|
||||
threadTableBody.innerHTML = this.threadInfo.map(thread => {
|
||||
const statusInfo = this.getThreadStatusDisplay(thread.status);
|
||||
return `
|
||||
<tr>
|
||||
<td>${thread.name || '未知'}</td>
|
||||
<td>${thread.id || '未知'}</td>
|
||||
<td>${thread.status || '未知'}</td>
|
||||
<td style="color: ${statusInfo.color}">${statusInfo.text}</td>
|
||||
<td>${thread.priority || '未知'}</td>
|
||||
<td>${thread.runCount || '0'}</td>
|
||||
<td>${(thread.currentFrequency || 0).toFixed(2)}</td>
|
||||
<td>${(thread.setFrequency || 0).toFixed(2)}</td>
|
||||
<td>${(thread.currentPeriod || 0).toFixed(2)}</td>
|
||||
<td>${(thread.avgFrequency || 0).toFixed(2)}</td>
|
||||
<td>${(thread.maxFrequency || 0).toFixed(2)}</td>
|
||||
<td>${(thread.minFrequency || 0).toFixed(2)}</td>
|
||||
<td>${(thread.setPeriod || 0).toFixed(2)}</td>
|
||||
<td>${(thread.avgPeriod || 0).toFixed(2)}</td>
|
||||
<td>${(thread.maxPeriod || 0).toFixed(2)}</td>
|
||||
<td>${(thread.minPeriod || 0).toFixed(2)}</td>
|
||||
</tr>
|
||||
`).join('');
|
||||
`;
|
||||
}).join('');
|
||||
|
||||
// 更新图表数据
|
||||
this.updateChartData();
|
||||
} else {
|
||||
threadTableBody.innerHTML = '<tr><td colspan="8" style="text-align: center;">暂无线程信息</td></tr>';
|
||||
threadTableBody.innerHTML = '<tr><td colspan="13" style="text-align: center;">暂无线程信息</td></tr>';
|
||||
// 清空图表数据
|
||||
if (this.chart) {
|
||||
this.chart.data.labels = [];
|
||||
@ -569,9 +643,14 @@ class SimulationMonitor extends HTMLElement {
|
||||
<th>状态</th>
|
||||
<th>优先级</th>
|
||||
<th>运行次数</th>
|
||||
<th>当前频率(Hz)</th>
|
||||
<th>设置频率(Hz)</th>
|
||||
<th>当前周期(ms)</th>
|
||||
<th>设定频率(Hz)</th>
|
||||
<th>平均频率(Hz)</th>
|
||||
<th>最大频率(Hz)</th>
|
||||
<th>最小频率(Hz)</th>
|
||||
<th>设定周期(ms)</th>
|
||||
<th>平均周期(ms)</th>
|
||||
<th>最大周期(ms)</th>
|
||||
<th>最小周期(ms)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="thread-table-body"></tbody>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user