tweak: 将导入、批量导入、删除当日等功能独立到数据管理模块

refactor3.0
Lxy 1 week ago
parent cef59bd92f
commit 0bd393ed6a

@ -594,6 +594,18 @@
.tr-tab-panel { display: none; }
.tr-tab-panel.active { display: block; }
/* 数据管理 Tab 样式 */
.tr-data-management { background: var(--bg-card); border-radius: var(--radius-card); padding: 32px; box-shadow: var(--shadow-sm); }
.tr-section-title { font-size: 16px; font-weight: 600; color: var(--text-primary); margin-bottom: 16px; padding-bottom: 8px; border-bottom: 1px solid rgba(0,0,0,0.05); }
.tr-import-section { display: flex; gap: 12px; align-items: center; }
.tr-data-operations { display: flex; flex-direction: column; gap: 16px; }
.tr-operation-item { display: flex; align-items: center; gap: 12px; }
.tr-operation-item label { font-size: 14px; color: var(--text-secondary); min-width: 120px; }
.tr-data-overview { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.tr-overview-card { background: #F5F5F7; border-radius: 12px; padding: 20px; text-align: center; }
.tr-overview-label { font-size: 12px; color: var(--text-tertiary); margin-bottom: 8px; font-weight: 500; }
.tr-overview-value { font-size: 20px; font-weight: 700; color: var(--text-primary); }
/* 交易反思 - 日期导航 */
.tr-refl-datebar { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 24px; }
.tr-refl-datebtn { width: 36px; height: 36px; border-radius: 50%; border: none; background: #fff; color: var(--text-secondary); cursor: pointer; box-shadow: var(--shadow-sm); transition: all 0.2s; font-size: 16px; }
@ -1112,15 +1124,16 @@
<!-- 子 Tab 切换栏 -->
<div class="tr-subtabs" id="tr-subtabs">
<button class="tr-subtab active" data-subtab="stats">统计分析</button>
<button class="tr-subtab" data-subtab="data">数据管理</button>
<button class="tr-subtab" data-subtab="reflection">交易反思</button>
<button class="tr-subtab" data-subtab="experience">经验库</button>
</div>
<!-- 统计分析子 Tab -->
<div id="tr-tab-stats" class="tr-tab-panel active">
<!-- 工具栏 -->
<div class="tr-toolbar">
<div class="tr-toolbar-left">
<!-- 数据管理子 Tab -->
<div id="tr-tab-data" class="tr-tab-panel">
<div class="tr-data-management">
<div class="tr-section-title">结算单导入</div>
<div class="tr-import-section">
<input type="file" id="tr-file-input" accept=".xls,.xlsx" style="display:none" />
<input type="file" id="tr-batch-file-input" accept=".xls,.xlsx" multiple style="display:none" />
<button id="tr-btn-import" class="tr-btn tr-btn-primary">
@ -1129,19 +1142,57 @@
<button id="tr-btn-batch-import" class="tr-btn tr-btn-primary" title="同时导入多个结算单文件">
<span>📂</span><span>批量导入</span>
</button>
</div>
<div class="tr-section-title" style="margin-top:32px;">数据操作</div>
<div class="tr-data-operations">
<div class="tr-operation-item">
<label>删除指定日期数据:</label>
<input type="date" id="tr-delete-date-input" class="tr-date-input" />
<button id="tr-btn-delete-date" class="tr-btn tr-btn-danger" title="删除指定日期的所有交易记录">
<span>🗑️</span><span>删除</span>
</button>
</div>
<div class="tr-operation-item">
<label>批次管理:</label>
<button id="tr-btn-batches" class="tr-btn tr-btn-secondary">
<span>📋</span><span>查看导入批次</span>
</button>
</div>
</div>
<div class="tr-section-title" style="margin-top:32px;">数据概览</div>
<div id="tr-data-overview" class="tr-data-overview">
<div class="tr-overview-card">
<div class="tr-overview-label">总交易记录</div>
<div class="tr-overview-value" id="tr-total-records">-</div>
</div>
<div class="tr-overview-card">
<div class="tr-overview-label">导入批次</div>
<div class="tr-overview-value" id="tr-total-batches">-</div>
</div>
<div class="tr-overview-card">
<div class="tr-overview-label">最早日期</div>
<div class="tr-overview-value" id="tr-earliest-date">-</div>
</div>
<div class="tr-overview-card">
<div class="tr-overview-label">最新日期</div>
<div class="tr-overview-value" id="tr-latest-date">-</div>
</div>
</div>
</div>
</div>
<!-- 统计分析子 Tab -->
<div id="tr-tab-stats" class="tr-tab-panel active">
<!-- 工具栏 -->
<div class="tr-toolbar">
<div class="tr-toolbar-left">
<input type="date" id="tr-start-date" class="tr-date-input" title="开始日期" />
<span style="color:var(--text-tertiary);font-size:13px;">~</span>
<input type="date" id="tr-end-date" class="tr-date-input" title="结束日期" />
<button id="tr-btn-query" class="tr-btn tr-btn-secondary">查询</button>
</div>
<div class="tr-toolbar-right">
<button id="tr-btn-delete-date" class="tr-btn tr-btn-danger" title="删除当前查询日期的所有交易记录">
<span>🗑️</span><span>删除当日</span>
</button>
<button id="tr-btn-batches" class="tr-btn tr-btn-secondary">
<span>📋</span><span>批次管理</span>
</button>
</div>
</div>
<!-- 6个统计卡片 -->

@ -651,6 +651,7 @@ function trSwitchSubtab(tab) {
panel.classList.toggle('active', panel.id === 'tr-tab-' + tab);
});
if (tab === 'experience') trExpLoad();
if (tab === 'data') trLoadDataOverview();
}
function trSwitchToReflection(date) {
@ -2328,6 +2329,7 @@ async function trHandleFileImport(e) {
if (json.success) {
trShowImportResult(json.message, json.skipped_details || []);
trLoadAllData();
trLoadDataOverview();
} else {
alert('导入失败: ' + (json.message || '未知错误'));
}
@ -2402,7 +2404,10 @@ async function trHandleBatchImport(e) {
const json = await res.json();
if (json.success) {
trShowBatchImportResult(json);
if (json.data.total_futures > 0 || json.data.total_options > 0) trLoadAllData();
if (json.data.total_futures > 0 || json.data.total_options > 0) {
trLoadAllData();
trLoadDataOverview();
}
} else {
alert('批量导入失败: ' + (json.message || '未知错误'));
}
@ -2499,11 +2504,8 @@ function trCloseBatchModal() {
// ===== 删除当日 =====
async function trDeleteByDate() {
const startDate = document.getElementById('tr-start-date').value;
const endDate = document.getElementById('tr-end-date').value;
if (!startDate || !endDate) { alert('请先选择要删除的日期范围'); return; }
if (startDate !== endDate) { alert('删除功能仅支持单个日期,请确保开始日期和结束日期相同'); return; }
const tradeDate = startDate;
const tradeDate = document.getElementById('tr-delete-date-input').value;
if (!tradeDate) { alert('请先选择要删除的日期'); return; }
try {
const queryRes = await fetch(`${TR_API_BASE}/records?start_date=${tradeDate}&end_date=${tradeDate}&page=1&page_size=1`);
@ -2518,12 +2520,52 @@ async function trDeleteByDate() {
if (json.success) {
alert(`${json.message}`);
trLoadAllData();
trLoadDataOverview();
} else {
alert(json.message || '删除失败');
}
} catch (e) { alert('删除失败: ' + e.message); }
}
// ===== 数据概览 =====
async function trLoadDataOverview() {
try {
// 获取总记录数和日期范围
const res = await fetch(`${TR_API_BASE}/statistics`);
const json = await res.json();
if (json.success && json.data) {
document.getElementById('tr-total-records').textContent = json.data.total_trades || 0;
document.getElementById('tr-total-batches').textContent = json.data.trading_days || 0;
}
// 获取批次信息
const batchRes = await fetch(`${TR_API_BASE}/batches`);
const batchJson = await batchRes.json();
if (batchJson.success && batchJson.data && batchJson.data.length > 0) {
document.getElementById('tr-total-batches').textContent = batchJson.data.length;
// 获取最早和最新日期
const dates = batchJson.data.map(b => b.trade_dates).filter(d => d);
if (dates.length > 0) {
const allDates = [];
dates.forEach(d => {
const parts = d.split(' ~ ');
parts.forEach(p => {
const date = p.trim();
if (date) allDates.push(date);
});
});
if (allDates.length > 0) {
allDates.sort();
document.getElementById('tr-earliest-date').textContent = allDates[0];
document.getElementById('tr-latest-date').textContent = allDates[allDates.length - 1];
}
}
}
} catch (e) {
console.error('加载数据概览失败:', e);
}
}
function formatNumber(num) {
if (num === 0 || num === undefined || num === null) return '--';
return num.toLocaleString('zh-CN', { minimumFractionDigits: 0, maximumFractionDigits: 2 });

Binary file not shown.
Loading…
Cancel
Save