Files
qihuo/templates/stats.html
T
dekun 726ed7adef Add standalone trade calendar page with solar and lunar dates.
Move calendar from stats to /calendar nav page; show Gregorian and lunar on cells, month title, and day detail.
2026-06-30 12:07:58 +08:00

80 lines
4.2 KiB
HTML

{# Copyright (c) 2025-2026 马建军. All rights reserved. 专有软件,详见 LICENSE.zh-CN.txt #}
{% extends "base.html" %}
{% block title %}统计分析 - 国内期货 · 交易复盘系统{% endblock %}
{% block extra_css %}
<style>
.stats-summary-card{margin-bottom:1.25rem}
.stats-toolbar{display:flex;align-items:center;justify-content:flex-start;gap:1rem;margin-bottom:.75rem;flex-wrap:wrap}
.stat-grid-summary{
display:flex;flex-wrap:nowrap;align-items:stretch;gap:0;
margin-bottom:0;overflow-x:auto;-webkit-overflow-scrolling:touch;
}
.stat-grid-summary .stat-item{
flex:1 1 0;min-width:4.5rem;background:transparent;border:none;border-radius:0;
padding:.35rem .2rem;text-align:center;position:relative;overflow:visible;
border-right:1px solid var(--table-border);
}
.stat-grid-summary .stat-item:last-child{border-right:none}
.stat-grid-summary .stat-item::before{display:none}
.stat-grid-summary .stat-item:hover{transform:none;box-shadow:none}
.stat-grid-summary .stat-item .label{
font-size:.62rem;line-height:1.25;color:var(--text-muted);white-space:nowrap;
}
.stat-grid-summary .stat-item .value{
font-size:.78rem;font-weight:600;color:var(--text-title);margin-top:.12rem;
font-variant-numeric:tabular-nums;white-space:nowrap;
}
.stats-card-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}
.stats-card-head h2{margin-bottom:0}
.stats-view-field{width:auto;min-width:200px}
.stats-view-field select{width:100%;min-width:180px}
</style>
{% endblock %}
{% block content %}
<div class="card stats-summary-card">
<div class="stats-toolbar">
<span id="stats-updated" class="hint">正在加载统计…</span>
</div>
<div class="stat-grid stat-grid-summary" id="stats-summary">
<div class="stat-item"><div class="label">总交易次数</div><div class="value" data-k="total_trades">-</div></div>
<div class="stat-item"><div class="label">胜率</div><div class="value" data-k="win_rate">-</div></div>
<div class="stat-item"><div class="label">平均盈利</div><div class="value text-profit" data-k="avg_profit">-</div></div>
<div class="stat-item"><div class="label">平均亏损</div><div class="value text-loss" data-k="avg_loss">-</div></div>
<div class="stat-item"><div class="label">盈亏比</div><div class="value" data-k="profit_loss_ratio">-</div></div>
<div class="stat-item"><div class="label">连续亏损次数</div><div class="value" data-k="consecutive_losses">-</div></div>
<div class="stat-item"><div class="label">最大回撤</div><div class="value" data-k="max_drawdown">-</div></div>
<div class="stat-item"><div class="label">最大亏损金额</div><div class="value text-loss" data-k="max_loss_amount">-</div></div>
<div class="stat-item"><div class="label">最大亏损占比</div><div class="value text-loss" data-k="max_loss_pct">-</div></div>
<div class="stat-item"><div class="label">最大盈利金额</div><div class="value text-profit" data-k="max_profit_amount">-</div></div>
<div class="stat-item"><div class="label">最大盈利占比</div><div class="value text-profit" data-k="max_profit_pct">-</div></div>
<div class="stat-item"><div class="label">累计手续费</div><div class="value text-loss" data-k="total_fee">-</div></div>
<div class="stat-item"><div class="label">情绪单数量</div><div class="value" data-k="emotion_count">-</div></div>
<div class="stat-item"><div class="label">情绪单占比</div><div class="value" data-k="emotion_ratio">-</div></div>
</div>
</div>
<div class="card">
<div class="stats-card-head">
<h2>分项统计</h2>
<div class="field stats-view-field">
<label for="stats-view-select">统计维度</label>
<select id="stats-view-select"></select>
</div>
</div>
<div class="card-scroll">
<table id="stats-breakdown-table">
<thead><tr id="stats-breakdown-head"></tr></thead>
<tbody id="stats-breakdown-body">
<tr><td colspan="12" class="text-muted">加载中…</td></tr>
</tbody>
</table>
</div>
</div>
{% endblock %}
{% block extra_js %}
<script src="{{ url_for('static', filename='js/stats.js') }}"></script>
{% endblock %}