diff --git a/Release/database/XNSim.db b/Release/database/XNSim.db index 17552c3..14ffbff 100644 Binary files a/Release/database/XNSim.db and b/Release/database/XNSim.db differ diff --git a/XNSimHtml/components/data-monitor.js b/XNSimHtml/components/data-monitor.js index a510390..368c7d5 100644 --- a/XNSimHtml/components/data-monitor.js +++ b/XNSimHtml/components/data-monitor.js @@ -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 {
- -
-
未监控 @@ -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(); } diff --git a/XNSimHtml/components/model-monitor.js b/XNSimHtml/components/model-monitor.js index 7ec81e9..07b36d6 100644 --- a/XNSimHtml/components/model-monitor.js +++ b/XNSimHtml/components/model-monitor.js @@ -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 { }
-
-
-
- - +
+
+
+
+ 未监控
-
监控状态: 未启动
@@ -582,7 +561,7 @@ class ModelMonitor extends HTMLElement { - 频率 + 周期
diff --git a/XNSimHtml/components/simulation-monitor.js b/XNSimHtml/components/simulation-monitor.js index 75c23be..3b2ecd1 100644 --- a/XNSimHtml/components/simulation-monitor.js +++ b/XNSimHtml/components/simulation-monitor.js @@ -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 { }
-
-
监控状态: 未启动
+
+
+
+
+ 未监控 +
+