jinchao/XNSim
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

模型监控和数据监控也实现了打开即监控

Browse Source
This commit is contained in:
jinchao 2025-06-09 13:46:52 +08:00
parent 527e455e4b
commit b80f86f197
4 changed files with 219 additions and 194 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
Release/database/XNSim.db
View File

Binary file not shown.

109
XNSimHtml/components/data-monitor.js
View File

@ -28,9 +28,11 @@ class DataMonitor extends HTMLElement {
this._resizeEventBinded = false;
this.monitorId = `data_monitor_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`; // 添加监控器ID
this.dataUpdateTimer = null; // 数据更新定时器
this.isActive = false; // 组件是否激活
}
connectedCallback() {
this.isActive = true; // 设置初始状态为激活
this.loadInterfaces();
// 延迟多次尝试，直到拿到有效宽度
const tryInitColWidth = (tryCount = 0) => {
@ -71,6 +73,56 @@ class DataMonitor extends HTMLElement {
});
this._resizeEventBinded = true;
}
// 等待组件完全加载后初始化
setTimeout(() => {
this.initializeComponent();
// 初始化完成后再启动定时器，给服务器一些准备时间
setTimeout(() => {
this.startDataUpdateTimer();
}, 1000); // 延迟1秒启动定时器
}, 100);
}
// 重新激活组件
reactivate() {
if (this.isActive) return; // 如果已经激活，直接返回
this.isActive = true;
this.initializeComponent();
}
async initializeComponent() {
try {
// 初始化DDS监控
await this.initializeDDSMonitor();
// 更新所有行的监控状态
this.tableData.forEach(row => {
row.isMonitoring = true;
});
// 更新状态显示
const statusIndicator = this.shadowRoot.getElementById('statusIndicator');
const statusText = this.shadowRoot.getElementById('statusText');
if (statusIndicator) {
statusIndicator.classList.add('active');
}
if (statusText) {
statusText.textContent = '监控中';
}
this.renderTable();
} catch (error) {
console.error('初始化组件失败:', error);
const statusIndicator = this.shadowRoot.getElementById('statusIndicator');
const statusText = this.shadowRoot.getElementById('statusText');
if (statusIndicator) {
statusIndicator.classList.add('error');
}
if (statusText) {
statusText.textContent = '监控错误';
}
}
}
/**
@ -926,9 +978,6 @@ class DataMonitor extends HTMLElement {
</style>
<div class="toolbar">
<div class="toolbar-left">
<button class="global-monitor-btn" id="globalMonitorBtn">开始监控</button>
</div>
<div class="toolbar-right">
<div class="monitor-status">
<div class="status-indicator" id="statusIndicator"></div>
<span id="statusText">未监控</span>
@ -1086,62 +1135,10 @@ class DataMonitor extends HTMLElement {
document.body.style.userSelect = '';
}
};
// 绑定全局监控按钮事件
const globalMonitorBtn = this.shadowRoot.getElementById('globalMonitorBtn');
const statusIndicator = this.shadowRoot.getElementById('statusIndicator');
const statusText = this.shadowRoot.getElementById('statusText');
globalMonitorBtn.addEventListener('click', async () => {
try {
if (!globalMonitorBtn.classList.contains('monitoring')) {
// 开始监控
const ddsInitialized = await this.initializeDDSMonitor();
if (!ddsInitialized) {
throw new Error('DDS监控初始化失败');
}
// 更新所有行的监控状态
this.tableData.forEach(row => {
row.isMonitoring = true;
});
// 启动数据更新定时器
this.startDataUpdateTimer();
// 更新状态
globalMonitorBtn.textContent = '停止监控';
globalMonitorBtn.classList.add('monitoring');
statusIndicator.classList.add('active');
statusText.textContent = '监控中';
this.renderTable();
} else {
// 停止监控
// 停止数据更新定时器
await this.stopDataUpdateTimer();
// 更新所有行的监控状态
this.tableData.forEach(row => {
row.isMonitoring = false;
row.monitorData = ''; // 清空监控数据
});
// 更新状态
globalMonitorBtn.textContent = '开始监控';
globalMonitorBtn.classList.remove('monitoring');
statusIndicator.classList.remove('active');
statusText.textContent = '未监控';
this.renderTable();
}
} catch (error) {
statusIndicator.classList.add('error');
statusText.textContent = '监控错误';
alert(error.message);
}
});
}
disconnectedCallback() {
this.isActive = false;
// 组件销毁时清理定时器
this.stopDataUpdateTimer();
}

235
XNSimHtml/components/model-monitor.js
View File

@ -13,18 +13,27 @@ class ModelMonitor extends HTMLElement {
this.chartInitialized = false;
this.domainId = '10'; // 默认值
this.isActive = false;
this.initializing = false;
}
connectedCallback() {
this.render();
this.isActive = true; // 设置初始状态为激活
// 等待组件完全加载
// 等待组件完全加载后初始化
setTimeout(() => {
this.initializeComponent();
// 初始化完成后再启动定时器，给服务器一些准备时间
setTimeout(() => {
this.startStatusCheck();
}, 1000); // 延迟1秒启动定时器
}, 100);
}
async initializeComponent() {
if (this.initializing) return; // 防止重复初始化
this.initializing = true;
try {
// 确保图表被正确初始化
if (this.chart) {
@ -40,12 +49,9 @@ class ModelMonitor extends HTMLElement {
const statusData = await statusResponse.json();
this.monitorStatus = statusData;
// 如果已经在监控中，立即开始获取数据
if (this.monitorStatus.isMonitoring) {
// 先获取一次数据
await this.checkMonitorStatus();
// 然后开始定时检查
this.startStatusCheck();
// 如果监控未运行，尝试启动监控
if (!this.monitorStatus.isMonitoring) {
this.startMonitoring();
}
this.chartInitialized = true;
@ -53,6 +59,8 @@ class ModelMonitor extends HTMLElement {
console.error('初始化组件失败:', error);
this.monitorStatus.lastError = error.message;
this.updateUI();
} finally {
this.initializing = false;
}
}
@ -96,7 +104,7 @@ class ModelMonitor extends HTMLElement {
};
// 立即执行一次
checkStatus();
//checkStatus();
// 设置定时器，每秒执行一次
this.statusCheckInterval = setInterval(checkStatus, 1000);
@ -116,6 +124,11 @@ class ModelMonitor extends HTMLElement {
const selection = savedSelection ? JSON.parse(savedSelection) : {};
const confID = selection.configurationId;
// 如果已经在监控中，直接返回
if (this.monitorStatus.isMonitoring) {
console.log('监控已经在运行中');
return;
}
try {
// 获取构型参数
@ -136,24 +149,10 @@ class ModelMonitor extends HTMLElement {
const ddsStatusResponse = await fetch('/api/dds-monitor/status');
const ddsStatusData = await ddsStatusResponse.json();
// 如果DDS监控未初始化，先初始化DDS监控
// 如果DDS监控未初始化，直接返回，等待下次定时器运行时再检查
if (!ddsStatusData.isInitialized) {
const ddsInitResponse = await fetch('/api/dds-monitor/initialize', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
domainId,
monitorId: this.monitorId
})
});
if (!ddsInitResponse.ok) {
const errorData = await ddsInitResponse.json();
console.error('DDS监控初始化失败:', errorData.error);
return;
}
console.log('DDS监控未初始化，等待下次检查');
return;
}
// 启动模型监控
@ -168,7 +167,10 @@ class ModelMonitor extends HTMLElement {
if (response.ok) {
this.monitorStatus = data.status;
this.updateUI();
this.startStatusCheck(); // 直接启动状态检查，不需要检查 isActive
// 只有在没有运行中的状态检查时才启动新的检查
if (!this.statusCheckInterval) {
this.startStatusCheck();
}
} else {
console.error('启动监控失败:', data.error);
}
@ -180,17 +182,8 @@ class ModelMonitor extends HTMLElement {
disconnectedCallback() {
this.isActive = false;
this.stopStatusCheck();
// 注销监控器
fetch('/api/dds-monitor/unregister', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ monitorId: this.monitorId })
}).catch(error => {
console.error('注销监控器失败:', error);
});
// 不要在这里销毁图表实例，让它在重新激活时重新创建
// 自动停止监控
this.stopMonitoring();
}
async checkMonitorStatus() {
@ -200,13 +193,11 @@ class ModelMonitor extends HTMLElement {
const statusData = await statusResponse.json();
this.monitorStatus = statusData;
// 只有在监控状态为true时才获取详细信息
if (this.monitorStatus.isMonitoring) {
try {
// 获取模型信息
const modelResponse = await fetch('/api/model-monitor/model-info');
if (!modelResponse.ok) {
throw new Error(`模型信息获取失败: ${modelResponse.status}`);
}
const modelData = await modelResponse.json();
if (!modelResponse.ok) {
@ -231,12 +222,8 @@ class ModelMonitor extends HTMLElement {
// 保持原有数据不变
}
} else {
// 只有在状态发生变化时才更新
if (this.modelInfo !== null) {
this.modelInfo = null;
this.monitorStatus.lastError = null;
this.updateUI();
}
// 如果监控未运行，尝试启动监控
this.startMonitoring();
}
} catch (error) {
console.error('获取监控状态失败:', error);
@ -261,23 +248,24 @@ class ModelMonitor extends HTMLElement {
}
updateUI() {
const startButton = this.shadowRoot.querySelector('.start-button');
const stopButton = this.shadowRoot.querySelector('.stop-button');
const statusDisplay = this.shadowRoot.querySelector('.status-display');
const statusIndicator = this.shadowRoot.querySelector('#statusIndicator');
const statusText = this.shadowRoot.querySelector('#statusText');
const modelTableBody = this.shadowRoot.querySelector('#model-table-body');
if (this.monitorStatus.isMonitoring) {
startButton.disabled = true;
stopButton.disabled = false;
} else {
startButton.disabled = false;
stopButton.disabled = true;
}
// 更新状态显示
statusDisplay.textContent = `监控状态: ${this.monitorStatus.isMonitoring ? '运行中' : '已停止'}`;
if (this.monitorStatus.lastError) {
statusDisplay.textContent += ` (错误: ${this.monitorStatus.lastError})`;
if (statusIndicator && statusText) {
if (this.monitorStatus.isMonitoring) {
statusIndicator.classList.add('active');
statusIndicator.classList.remove('error');
statusText.textContent = '监控中';
} else if (this.monitorStatus.lastError) {
statusIndicator.classList.remove('active');
statusIndicator.classList.add('error');
statusText.textContent = `监控错误: ${this.monitorStatus.lastError}`;
} else {
statusIndicator.classList.remove('active', 'error');
statusText.textContent = '未监控';
}
}
// 更新模型表格
@ -320,12 +308,28 @@ class ModelMonitor extends HTMLElement {
async stopMonitoring() {
try {
// 首先检查监控状态
const statusResponse = await fetch('/api/model-monitor/status');
const statusData = await statusResponse.json();
// 如果监控未运行，直接返回
if (!statusData.isMonitoring) {
console.log('监控未运行，无需关闭');
return;
}
// 执行关闭操作
const response = await fetch('/api/model-monitor/stop', {
method: 'POST'
});
const data = await response.json();
if (response.ok) {
this.monitorStatus = data.status;
// 立即停止状态检查
this.stopStatusCheck();
// 清空数据
this.modelInfo = null;
// 更新UI
this.updateUI();
} else {
console.error('停止监控失败:', data.error);
@ -354,11 +358,44 @@ class ModelMonitor extends HTMLElement {
box-sizing: border-box;
}
.toolbar-section {
background-color: white;
.toolbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 16px;
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
padding: 16px;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
margin-bottom: 16px;
}
.toolbar-left {
display: flex;
align-items: center;
gap: 12px;
}
.monitor-status {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
color: #666;
}
.status-indicator {
width: 8px;
height: 8px;
border-radius: 50%;
background: #ccc;
}
.status-indicator.active {
background: #52c41a;
}
.status-indicator.error {
background: #ff4d4f;
}
.content-container {
@ -375,63 +412,6 @@ class ModelMonitor extends HTMLElement {
padding: 16px;
}
.toolbar {
display: flex;
gap: 12px;
align-items: center;
justify-content: space-between;
}
.toolbar-left {
display: flex;
gap: 12px;
align-items: center;
}
.input-group {
display: flex;
align-items: center;
gap: 8px;
}
.input-label {
font-size: 14px;
color: #333;
white-space: nowrap;
}
.control-button {
padding: 8px 16px;
border: none;
border-radius: 4px;
font-size: 14px;
cursor: pointer;
transition: background-color 0.2s;
}
.control-button:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.start-button {
background-color: #4CAF50;
color: white;
}
.start-button:hover:not(:disabled) {
background-color: #45a049;
}
.stop-button {
background-color: #f44336;
color: white;
}
.stop-button:hover:not(:disabled) {
background-color: #da190b;
}
.status-display {
padding: 8px 12px;
background-color: #f5f5f5;
@ -536,13 +516,12 @@ class ModelMonitor extends HTMLElement {
}
</style>
<div class="monitor-container">
<div class="toolbar-section">
<div class="toolbar">
<div class="toolbar-left">
<button class="control-button start-button" onclick="this.getRootNode().host.startMonitoring()">开始监控</button>
<button class="control-button stop-button" onclick="this.getRootNode().host.stopMonitoring()">停止监控</button>
<div class="toolbar">
<div class="toolbar-left">
<div class="monitor-status">
<div class="status-indicator" id="statusIndicator"></div>
<span id="statusText">未监控</span>
</div>
<div class="status-display">监控状态: 未启动</div>
</div>
</div>
<div class="content-container">
@ -582,7 +561,7 @@ class ModelMonitor extends HTMLElement {
<input type="checkbox" id="display-type-switch">
<span class="slider"></span>
</label>
<span id="display-type-label">频率</span>
<span id="display-type-label">周期</span>
</div>
</div>
</div>

69
XNSimHtml/components/simulation-monitor.js
View File

@ -259,15 +259,26 @@ class SimulationMonitor extends HTMLElement {
}
updateUI() {
const statusDisplay = this.shadowRoot.querySelector('.status-display');
const statusIndicator = this.shadowRoot.querySelector('#statusIndicator');
const statusText = this.shadowRoot.querySelector('#statusText');
const engineInfo = this.shadowRoot.querySelector('#engine-info');
const coreStatus = this.shadowRoot.querySelector('#core-status');
const threadTableBody = this.shadowRoot.querySelector('#thread-table-body');
// 更新状态显示
statusDisplay.textContent = `监控状态: ${this.monitorStatus.isMonitoring ? '运行中' : '已停止'}`;
if (this.monitorStatus.lastError) {
statusDisplay.textContent += ` (错误: ${this.monitorStatus.lastError})`;
if (statusIndicator && statusText) {
if (this.monitorStatus.isMonitoring) {
statusIndicator.classList.add('active');
statusIndicator.classList.remove('error');
statusText.textContent = '监控中';
} else if (this.monitorStatus.lastError) {
statusIndicator.classList.remove('active');
statusIndicator.classList.add('error');
statusText.textContent = `监控错误: ${this.monitorStatus.lastError}`;
} else {
statusIndicator.classList.remove('active', 'error');
statusText.textContent = '未监控';
}
}
// 更新引擎信息
@ -437,11 +448,44 @@ class SimulationMonitor extends HTMLElement {
box-sizing: border-box;
}
.toolbar-section {
background-color: white;
.toolbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 16px;
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
padding: 16px;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
margin-bottom: 16px;
}
.toolbar-left {
display: flex;
align-items: center;
gap: 12px;
}
.monitor-status {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
color: #666;
}
.status-indicator {
width: 8px;
height: 8px;
border-radius: 50%;
background: #ccc;
}
.status-indicator.active {
background: #52c41a;
}
.status-indicator.error {
background: #ff4d4f;
}
.content-container {
@ -629,8 +673,13 @@ class SimulationMonitor extends HTMLElement {
}
</style>
<div class="monitor-container">
<div class="toolbar-section">
<div class="status-display">监控状态: 未启动</div>
<div class="toolbar">
<div class="toolbar-left">
<div class="monitor-status">
<div class="status-indicator" id="statusIndicator"></div>
<span id="statusText">未监控</span>
</div>
</div>
</div>
<div class="content-container">
<div class="left-panel">