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

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

Browse Source
This commit is contained in:
jinchao 2025-06-17 12:22:55 +08:00
parent 51d3ff73e7
commit 8f8e3d6384
2 changed files with 83 additions and 9 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.

92
XNSimHtml/components/data-collection.js
View File

@ -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>
<input class="input-box" id="collectFreqInput" type="number" min="1" max="10000" value="${this.scriptFile ? (this.collectFreq || 100) : 100}" disabled />
<div class="input-label">采集频率</div>
<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>
<input class="input-box" id="collectDurationInput" type="number" min="1" max="86400" value="${this.scriptFile ? (this.collectDuration || 60) : 60}" disabled />
<div class="input-label">采集时长</div>
<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);
}