V0.22.4.250617_alpha:数据采集页面增加采集动画

XNSimHtml/components/data-collection.js

@@ -498,11 +498,44 @@ class DataCollection extends HTMLElement {
                 .left-panel {
                     width: 320px;
                     min-width: 280px;
+                    flex-shrink: 0;
                     display: flex;
                     flex-direction: column;
                     gap: 16px;
                     height: 100%;
                 }
+                .right-panel {
+                    flex: 1 1 0;
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center;
+                    justify-content: center;
+                    min-width: 0;
+                    min-height: 200px;
+                    background: #fff;
+                    border-radius: 8px;
+                    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
+                    margin-bottom: 16px;
+                }
+                .loading-spinner {
+                    border: 6px solid #f3f3f3;
+                    border-top: 6px solid #1890ff;
+                    border-radius: 50%;
+                    width: 48px;
+                    height: 48px;
+                    animation: spin 1s linear infinite;
+                    margin-bottom: 12px;
+                }
+                @keyframes spin {
+                    0% { transform: rotate(0deg);}
+                    100% { transform: rotate(360deg);}
+                }
+                .loading-text {
+                    color: #1890ff;
+                    font-size: 16px;
+                    font-weight: bold;
+                    margin-top: 0;
+                }
                 .panel-section {
                     background: #fff;
                     border-radius: 8px;
@@ -607,9 +640,15 @@ class DataCollection extends HTMLElement {
                     display: flex;
                     align-items: center;
                 }
+                .input-row-abs {
+                    position: relative;
+                    width: 100%;
+                    display: flex;
+                    align-items: center;
+                }
                 .input-box {
                     width: 100%;
-                    padding: 0 8px;
+                    padding-right: 36px;
                     border: 1px solid #d9d9d9;
                     border-radius: 4px;
                     font-size: 14px;
@@ -628,6 +667,22 @@ class DataCollection extends HTMLElement {
                     background-color: #f5f5f5;
                     cursor: not-allowed;
                 }
+                .input-unit {
+                    position: absolute;
+                    right: 8px;
+                    top: 50%;
+                    transform: translateY(-50%);
+                    font-size: 16px;
+                    color: #888;
+                    white-space: nowrap;
+                }
+                .action-btn.icon-btn {
+                    position: absolute;
+                    right: 4px;
+                    top: 50%;
+                    transform: translateY(-50%);
+                    margin-left: 0;
+                }
                 .tree-section {
                     background: #fff;
                     border-radius: 8px;
@@ -726,7 +781,7 @@ class DataCollection extends HTMLElement {
                 <div class="left-panel">
                     <div class="panel-section">
                         <div class="button-row">
-                            <button class="action-btn ${this.scriptFile ? 'unload' : ''}" id="loadScriptBtn">${this.scriptFile ? '卸载脚本' : '载入脚本'}</button>
+                            <button class="action-btn ${this.scriptFile ? 'unload' : ''}" id="loadScriptBtn" ${this.collectStatus === 2 ? 'disabled' : ''}>${this.scriptFile ? '卸载脚本' : '载入脚本'}</button>
                             <button class="action-btn ${this.collectStatus === 2 ? 'stop' : ''}" id="startCollectBtn" ${!this.scriptFile ? 'disabled' : ''}>${this.collectStatus === 2 ? '停止采集' : '开始采集'}</button>
                         </div>
                         <div class="input-row">
@@ -735,18 +790,24 @@ class DataCollection extends HTMLElement {
                                 <input class="input-box" id="scriptFileInput" type="text" value="${this.scriptFile ? this.scriptFile.name : ''}" readonly />
                             </div>
                             <div class="input-group">
-                                <div class="input-label">采集频率 (Hz)</div>
+                                <div class="input-label">采集频率</div>
-                                <input class="input-box" id="collectFreqInput" type="number" min="1" max="10000" value="${this.scriptFile ? (this.collectFreq || 100) : 100}" disabled />
+                                <div class="input-row-abs">
+                                    <input class="input-box" id="collectFreqInput" type="number" min="1" max="10000" value="${this.collectFreq !== undefined ? this.collectFreq : ''}" disabled />
+                                    <span class="input-unit">Hz</span>
+                                </div>
                             </div>
                             <div class="input-group">
-                                <div class="input-label">采集时长 (秒)</div>
+                                <div class="input-label">采集时长</div>
-                                <input class="input-box" id="collectDurationInput" type="number" min="1" max="86400" value="${this.scriptFile ? (this.collectDuration || 60) : 60}" disabled />
+                                <div class="input-row-abs">
+                                    <input class="input-box" id="collectDurationInput" type="number" min="1" max="86400" value="${this.collectDuration !== undefined ? this.collectDuration : ''}" disabled />
+                                    <span class="input-unit">秒</span>
+                                </div>
                             </div>
                             <div class="input-group">
                                 <div class="input-label">输出文件</div>
-                                <div style="display: flex; gap: 8px; flex: 1;">
+                                <div class="input-row-abs">
                                     <input class="input-box" id="outputFileInput" type="text" value="${this.outputFile || ''}" disabled />
-                                    <button class="action-btn icon-btn" id="downloadBtn" disabled title="下载">
+                                    <button class="action-btn icon-btn" id="downloadBtn" ${this.collectStatus === 3 ? '' : 'disabled'} title="下载">
                                         <img src="./assets/icons/png/download_b.png" alt="下载" style="width:16px;height:16px;" />
                                     </button>
                                 </div>
@@ -774,6 +835,12 @@ class DataCollection extends HTMLElement {
                         </div>
                     </div>
                 </div>
+                <div class="right-panel">
+                    ${this.collectStatus === 2 ? `
+                        <div class="loading-spinner"></div>
+                        <div class="loading-text">数据采集中...</div>
+                    ` : ''}
+                </div>
             </div>
         `;
 
@@ -789,7 +856,6 @@ class DataCollection extends HTMLElement {
             itemEl.ondblclick = (e) => {
                 const name = itemEl.getAttribute('data-interfacename');
                 const struct = itemEl.getAttribute('data-modelstructname');
-                console.log('双击接口:', name, struct); // 添加调试日志
                 this.handleInterfaceDblClick(name, struct);
             };
         });
@@ -971,6 +1037,7 @@ class DataCollection extends HTMLElement {
                         console.error('加载采集数据失败:', error);
                         alert('加载采集数据失败: ' + error.message);
                     }
+                    this.render();
                 } else {
                     throw new Error(result.message);
                 }
@@ -998,6 +1065,12 @@ class DataCollection extends HTMLElement {
             const result = await response.json();
             
             if (result.success) {
+                // 关闭所有浮动窗口
+                this.chartWindows.forEach((window, windowId) => {
+                    window.dispatchEvent(new CustomEvent('close'));
+                    window.remove();
+                });
+                this.chartWindows.clear();
                 // 更新采集状态
                 this.collectStatus = 2; // 设置为采集中
                 // 更新按钮状态
@@ -1007,6 +1080,7 @@ class DataCollection extends HTMLElement {
                 loadScriptBtn.disabled = true;
                 // 禁用下载按钮
                 if (downloadBtn) downloadBtn.disabled = true;
+                this.render();
             } else {
                 throw new Error(result.message);
             }