|
|
|
|
@ -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,21 +1142,59 @@
|
|
|
|
|
<button id="tr-btn-batch-import" class="tr-btn tr-btn-primary" title="同时导入多个结算单文件">
|
|
|
|
|
<span>📂</span><span>批量导入</span>
|
|
|
|
|
</button>
|
|
|
|
|
<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>
|
|
|
|
|
|
|
|
|
|
<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>
|
|
|
|
|
<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>
|
|
|
|
|
|
|
|
|
|
<!-- 6个统计卡片 -->
|
|
|
|
|
<div id="tr-stats-grid" class="tr-stats-grid"></div>
|
|
|
|
|
|
|
|
|
|
|