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

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 {
             </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();
     }

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) {
+            if (!this.monitorStatus.isMonitoring) {
-                // 先获取一次数据
+                this.startMonitoring();
-                await this.checkMonitorStatus();
-                // 然后开始定时检查
-                this.startStatusCheck();
             }
             
             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', {
+                console.log('DDS监控未初始化，等待下次检查');
-                    method: 'POST',
+                return;
-                    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;
-                }
             }
 
             // 启动模型监控
@@ -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', {
+        this.stopMonitoring();
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json'
-            },
-            body: JSON.stringify({ monitorId: this.monitorId })
-        }).catch(error => {
-            console.error('注销监控器失败:', error);
-        });
-        // 不要在这里销毁图表实例，让它在重新激活时重新创建
     }
 
     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.startMonitoring();
-                    this.modelInfo = null;
-                    this.monitorStatus.lastError = null;
-                    this.updateUI();
-                }
             }
         } catch (error) {
             console.error('获取监控状态失败:', error);
@@ -261,23 +248,24 @@ class ModelMonitor extends HTMLElement {
     }
 
     updateUI() {
-        const startButton = this.shadowRoot.querySelector('.start-button');
+        const statusIndicator = this.shadowRoot.querySelector('#statusIndicator');
-        const stopButton = this.shadowRoot.querySelector('.stop-button');
+        const statusText = this.shadowRoot.querySelector('#statusText');
-        const statusDisplay = this.shadowRoot.querySelector('.status-display');
         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 (statusIndicator && statusText) {
-        if (this.monitorStatus.lastError) {
+            if (this.monitorStatus.isMonitoring) {
-            statusDisplay.textContent += ` (错误: ${this.monitorStatus.lastError})`;
+                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 {
+                .toolbar {
-                    background-color: white;
+                    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);
+                    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
-                    padding: 16px;
+                    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">
+                    <div class="toolbar-left">
-                        <div class="toolbar-left">
+                        <div class="monitor-status">
-                            <button class="control-button start-button" onclick="this.getRootNode().host.startMonitoring()">开始监控</button>
+                            <div class="status-indicator" id="statusIndicator"></div>
-                            <button class="control-button stop-button" onclick="this.getRootNode().host.stopMonitoring()">停止监控</button>
+                            <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>

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 (statusIndicator && statusText) {
-        if (this.monitorStatus.lastError) {
+            if (this.monitorStatus.isMonitoring) {
-            statusDisplay.textContent += ` (错误: ${this.monitorStatus.lastError})`;
+                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 {
+                .toolbar {
-                    background-color: white;
+                    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);
+                    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
-                    padding: 16px;
+                    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="toolbar">
-                    <div class="status-display">监控状态: 未启动</div>
+                    <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">