refactor: 测试信息页拆为三视图(全部/B2/B4),按data_source自动切换列

- 移除混杂的24列大表,改为三个标签页切换
- 全部视图: 精简核心字段
- B2视图: 峰峰值、频率、距离、速度、故障、完成状态
- B4视图: 剩余次数、当前距离、速度、波动范围、进入/离开高度
- 后端增加data_source查询/导出参数支持
This commit is contained in:
wangfq
2026-06-03 17:02:27 +08:00
parent a69d7ab1d0
commit d00d199558
4 changed files with 168 additions and 77 deletions

View File

@@ -4,19 +4,17 @@
{% block content %}
<h2>测试信息</h2>
<div class="view-tabs">
<button id="tab-all" class="tab-btn active" onclick="switchView('all')">全部数据</button>
<button id="tab-b2" class="tab-btn" onclick="switchView('b2')">灵敏度测试 (0xB2)</button>
<button id="tab-b4" class="tab-btn" onclick="switchView('b4')">波动测试 (0xB4)</button>
</div>
<div class="search-bar">
<label>
设备编码:
<input type="text" id="search-serial" placeholder="输入设备编码搜索...">
</label>
<label>
测试模式:
<select id="search-test-mode">
<option value="">全部</option>
<option value="0">灵敏度测试</option>
<option value="1">波动测试</option>
</select>
</label>
<label>
日期范围:
<input type="date" id="search-date-from">
@@ -28,34 +26,7 @@
</div>
<table id="test-data-table">
<thead>
<tr>
<th>ID</th>
<th>设备编码</th>
<th>DG430地址</th>
<th>设备型号</th>
<th>类型</th>
<th>测试模式</th>
<th>数据来源</th>
<th>是否完成</th>
<th>故障信息</th>
<th>继电器</th>
<th>峰峰值(V)</th>
<th>开始频率(Hz)</th>
<th>进入频率(Hz)</th>
<th>离开频率(Hz)</th>
<th>进入距离(mm)</th>
<th>离开距离(mm)</th>
<th>进入速度(m/s)</th>
<th>离开速度(m/s)</th>
<th>剩余次数</th>
<th>当前距离(mm)</th>
<th>速度(dm/s)</th>
<th>最近距离(mm)</th>
<th>最远距离(mm)</th>
<th>时间</th>
</tr>
</thead>
<thead></thead>
<tbody></tbody>
</table>
@@ -63,5 +34,23 @@
{% endblock %}
{% block scripts %}
<style>
.view-tabs { margin-bottom: 16px; display: flex; gap: 8px; }
.tab-btn {
padding: 8px 20px;
border: 1px solid #ccc;
background: #f5f5f5;
cursor: pointer;
border-radius: 4px 4px 0 0;
font-size: 14px;
transition: all .2s;
}
.tab-btn.active {
background: #2c3e50;
color: #fff;
border-color: #2c3e50;
}
.tab-btn:hover:not(.active) { background: #e0e0e0; }
</style>
<script src="{{ url_for('static', filename='js/test_data.js') }}"></script>
{% endblock %}