feat: 四所独立统计页日历,修复档案盈亏重复与日历交互

四所 index.html 统计分析页接入交易日历;内照明心剔除犯病盈亏列不再重复计入,犯病日点击显示全部交易,选中日历蓝色高亮。

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
2026-06-30 08:27:38 +08:00
parent 14dbf25798
commit ac4cdceb39
6 changed files with 177 additions and 8 deletions
@@ -244,6 +244,7 @@
.stats-period-block .sub{font-size:.78rem;color:#8892b0;margin-bottom:10px;line-height:1.4} .stats-period-block .sub{font-size:.78rem;color:#8892b0;margin-bottom:10px;line-height:1.4}
</style> </style>
<link rel="stylesheet" href="/static/instance_theme.css?v=18"> <link rel="stylesheet" href="/static/instance_theme.css?v=18">
<link rel="stylesheet" href="/static/trade_stats_calendar.css?v=1">
</head> </head>
<body <body
@@ -806,6 +807,14 @@
</select> </select>
</label> </label>
</div> </div>
<div id="stats-calendar-wrap" class="trade-cal-wrap stats-calendar-wrap">
<div class="trade-cal-head">
<button type="button" id="stats-cal-prev" class="btn" title="上一月"></button>
<span id="stats-cal-title" class="trade-cal-title"></span>
<button type="button" id="stats-cal-next" class="btn" title="下一月"></button>
</div>
<div id="stats-calendar" class="trade-cal-grid-host" role="grid" aria-label="交易日历"></div>
</div>
{% for seg in stats_bundle.segments %} {% for seg in stats_bundle.segments %}
<div class="stats-segment-block stats-segment-panel" data-stats-segment="{{ seg.key }}"{% if not loop.first %} style="display:none"{% endif %}> <div class="stats-segment-block stats-segment-panel" data-stats-segment="{{ seg.key }}"{% if not loop.first %} style="display:none"{% endif %}>
{{ period_stats("日统计", seg.day) }} {{ period_stats("日统计", seg.day) }}
@@ -842,6 +851,7 @@
<script src="/static/form_submit_guard.js?v=2"></script> <script src="/static/form_submit_guard.js?v=2"></script>
<script src="/static/manual_order_rr_preview.js?v=5"></script> <script src="/static/manual_order_rr_preview.js?v=5"></script>
<script src="/static/strategy_roll.js?v=5"></script> <script src="/static/strategy_roll.js?v=5"></script>
<script src="/static/trade_stats_calendar.js?v=1"></script>
<script> <script>
const JOURNAL_ENTRY_REASON_OPTIONS = {{ entry_reason_options | tojson }}; const JOURNAL_ENTRY_REASON_OPTIONS = {{ entry_reason_options | tojson }};
const JOURNAL_ENTRY_REASON_OTHER = {{ entry_reason_other_value | tojson }}; const JOURNAL_ENTRY_REASON_OTHER = {{ entry_reason_other_value | tojson }};
@@ -1500,6 +1510,36 @@ function switchStatsSegment(){
q.set("stats_segment", key); q.set("stats_segment", key);
const qs = q.toString(); const qs = q.toString();
history.replaceState(null, "", qs ? (window.location.pathname + "?" + qs) : window.location.pathname); history.replaceState(null, "", qs ? (window.location.pathname + "?" + qs) : window.location.pathname);
if(statsCalendarWidget) statsCalendarWidget.load();
}
let statsCalendarWidget = null;
function initStatsCalendarWidget(){
const grid = document.getElementById("stats-calendar");
if(!grid || !window.TradeStatsCalendar) return;
statsCalendarWidget = new TradeStatsCalendar({
gridEl: grid,
titleEl: document.getElementById("stats-cal-title"),
prevBtn: document.getElementById("stats-cal-prev"),
nextBtn: document.getElementById("stats-cal-next"),
apiUrl: "/api/stats/calendar",
showSick: false,
buildQuery: function(year, month){
const q = new URLSearchParams();
q.set("year", String(year));
q.set("month", String(month));
const sel = document.getElementById("stats-segment-select");
if(sel) q.set("segment", sel.value || "all");
return q;
},
parseResponse: function(data){
if(data && data.ok === false) return {};
return (data && data.days) || {};
}
});
statsCalendarWidget.ensureMonth(new Date());
statsCalendarWidget.load();
} }
function initStatsSegmentFromUrl(){ function initStatsSegmentFromUrl(){
@@ -1523,6 +1563,7 @@ function toggleStatsCard(){
attachListWindowToExports(); attachListWindowToExports();
toggleListWindowCustom(); toggleListWindowCustom();
initStatsSegmentFromUrl(); initStatsSegmentFromUrl();
initStatsCalendarWidget();
if(document.getElementById("journal-list")) loadJournals(); if(document.getElementById("journal-list")) loadJournals();
if(document.getElementById("review-list")) loadReviews(); if(document.getElementById("review-list")) loadReviews();
const reviewToggle = document.getElementById("review-mode-toggle"); const reviewToggle = document.getElementById("review-mode-toggle");
+41
View File
@@ -244,6 +244,7 @@
.stats-period-block .sub{font-size:.78rem;color:#8892b0;margin-bottom:10px;line-height:1.4} .stats-period-block .sub{font-size:.78rem;color:#8892b0;margin-bottom:10px;line-height:1.4}
</style> </style>
<link rel="stylesheet" href="/static/instance_theme.css?v=18"> <link rel="stylesheet" href="/static/instance_theme.css?v=18">
<link rel="stylesheet" href="/static/trade_stats_calendar.css?v=1">
</head> </head>
<body <body
@@ -773,6 +774,14 @@
</select> </select>
</label> </label>
</div> </div>
<div id="stats-calendar-wrap" class="trade-cal-wrap stats-calendar-wrap">
<div class="trade-cal-head">
<button type="button" id="stats-cal-prev" class="btn" title="上一月"></button>
<span id="stats-cal-title" class="trade-cal-title"></span>
<button type="button" id="stats-cal-next" class="btn" title="下一月"></button>
</div>
<div id="stats-calendar" class="trade-cal-grid-host" role="grid" aria-label="交易日历"></div>
</div>
{% for seg in stats_bundle.segments %} {% for seg in stats_bundle.segments %}
<div class="stats-segment-block stats-segment-panel" data-stats-segment="{{ seg.key }}"{% if not loop.first %} style="display:none"{% endif %}> <div class="stats-segment-block stats-segment-panel" data-stats-segment="{{ seg.key }}"{% if not loop.first %} style="display:none"{% endif %}>
{{ period_stats("日统计", seg.day) }} {{ period_stats("日统计", seg.day) }}
@@ -809,6 +818,7 @@
<script src="/static/form_submit_guard.js?v=2"></script> <script src="/static/form_submit_guard.js?v=2"></script>
<script src="/static/manual_order_rr_preview.js?v=5"></script> <script src="/static/manual_order_rr_preview.js?v=5"></script>
<script src="/static/strategy_roll.js?v=5"></script> <script src="/static/strategy_roll.js?v=5"></script>
<script src="/static/trade_stats_calendar.js?v=1"></script>
<script> <script>
const JOURNAL_ENTRY_REASON_OPTIONS = {{ entry_reason_options | tojson }}; const JOURNAL_ENTRY_REASON_OPTIONS = {{ entry_reason_options | tojson }};
const JOURNAL_ENTRY_REASON_OTHER = {{ entry_reason_other_value | tojson }}; const JOURNAL_ENTRY_REASON_OTHER = {{ entry_reason_other_value | tojson }};
@@ -1467,6 +1477,36 @@ function switchStatsSegment(){
q.set("stats_segment", key); q.set("stats_segment", key);
const qs = q.toString(); const qs = q.toString();
history.replaceState(null, "", qs ? (window.location.pathname + "?" + qs) : window.location.pathname); history.replaceState(null, "", qs ? (window.location.pathname + "?" + qs) : window.location.pathname);
if(statsCalendarWidget) statsCalendarWidget.load();
}
let statsCalendarWidget = null;
function initStatsCalendarWidget(){
const grid = document.getElementById("stats-calendar");
if(!grid || !window.TradeStatsCalendar) return;
statsCalendarWidget = new TradeStatsCalendar({
gridEl: grid,
titleEl: document.getElementById("stats-cal-title"),
prevBtn: document.getElementById("stats-cal-prev"),
nextBtn: document.getElementById("stats-cal-next"),
apiUrl: "/api/stats/calendar",
showSick: false,
buildQuery: function(year, month){
const q = new URLSearchParams();
q.set("year", String(year));
q.set("month", String(month));
const sel = document.getElementById("stats-segment-select");
if(sel) q.set("segment", sel.value || "all");
return q;
},
parseResponse: function(data){
if(data && data.ok === false) return {};
return (data && data.days) || {};
}
});
statsCalendarWidget.ensureMonth(new Date());
statsCalendarWidget.load();
} }
function initStatsSegmentFromUrl(){ function initStatsSegmentFromUrl(){
@@ -1490,6 +1530,7 @@ function toggleStatsCard(){
attachListWindowToExports(); attachListWindowToExports();
toggleListWindowCustom(); toggleListWindowCustom();
initStatsSegmentFromUrl(); initStatsSegmentFromUrl();
initStatsCalendarWidget();
if(document.getElementById("journal-list")) loadJournals(); if(document.getElementById("journal-list")) loadJournals();
if(document.getElementById("review-list")) loadReviews(); if(document.getElementById("review-list")) loadReviews();
const reviewToggle = document.getElementById("review-mode-toggle"); const reviewToggle = document.getElementById("review-mode-toggle");
@@ -244,6 +244,7 @@
.stats-period-block .sub{font-size:.78rem;color:#8892b0;margin-bottom:10px;line-height:1.4} .stats-period-block .sub{font-size:.78rem;color:#8892b0;margin-bottom:10px;line-height:1.4}
</style> </style>
<link rel="stylesheet" href="/static/instance_theme.css?v=18"> <link rel="stylesheet" href="/static/instance_theme.css?v=18">
<link rel="stylesheet" href="/static/trade_stats_calendar.css?v=1">
</head> </head>
<body <body
@@ -773,6 +774,14 @@
</select> </select>
</label> </label>
</div> </div>
<div id="stats-calendar-wrap" class="trade-cal-wrap stats-calendar-wrap">
<div class="trade-cal-head">
<button type="button" id="stats-cal-prev" class="btn" title="上一月"></button>
<span id="stats-cal-title" class="trade-cal-title"></span>
<button type="button" id="stats-cal-next" class="btn" title="下一月"></button>
</div>
<div id="stats-calendar" class="trade-cal-grid-host" role="grid" aria-label="交易日历"></div>
</div>
{% for seg in stats_bundle.segments %} {% for seg in stats_bundle.segments %}
<div class="stats-segment-block stats-segment-panel" data-stats-segment="{{ seg.key }}"{% if not loop.first %} style="display:none"{% endif %}> <div class="stats-segment-block stats-segment-panel" data-stats-segment="{{ seg.key }}"{% if not loop.first %} style="display:none"{% endif %}>
{{ period_stats("日统计", seg.day) }} {{ period_stats("日统计", seg.day) }}
@@ -809,6 +818,7 @@
<script src="/static/form_submit_guard.js?v=2"></script> <script src="/static/form_submit_guard.js?v=2"></script>
<script src="/static/manual_order_rr_preview.js?v=5"></script> <script src="/static/manual_order_rr_preview.js?v=5"></script>
<script src="/static/strategy_roll.js?v=5"></script> <script src="/static/strategy_roll.js?v=5"></script>
<script src="/static/trade_stats_calendar.js?v=1"></script>
<script> <script>
const JOURNAL_ENTRY_REASON_OPTIONS = {{ entry_reason_options | tojson }}; const JOURNAL_ENTRY_REASON_OPTIONS = {{ entry_reason_options | tojson }};
const JOURNAL_ENTRY_REASON_OTHER = {{ entry_reason_other_value | tojson }}; const JOURNAL_ENTRY_REASON_OTHER = {{ entry_reason_other_value | tojson }};
@@ -1467,6 +1477,36 @@ function switchStatsSegment(){
q.set("stats_segment", key); q.set("stats_segment", key);
const qs = q.toString(); const qs = q.toString();
history.replaceState(null, "", qs ? (window.location.pathname + "?" + qs) : window.location.pathname); history.replaceState(null, "", qs ? (window.location.pathname + "?" + qs) : window.location.pathname);
if(statsCalendarWidget) statsCalendarWidget.load();
}
let statsCalendarWidget = null;
function initStatsCalendarWidget(){
const grid = document.getElementById("stats-calendar");
if(!grid || !window.TradeStatsCalendar) return;
statsCalendarWidget = new TradeStatsCalendar({
gridEl: grid,
titleEl: document.getElementById("stats-cal-title"),
prevBtn: document.getElementById("stats-cal-prev"),
nextBtn: document.getElementById("stats-cal-next"),
apiUrl: "/api/stats/calendar",
showSick: false,
buildQuery: function(year, month){
const q = new URLSearchParams();
q.set("year", String(year));
q.set("month", String(month));
const sel = document.getElementById("stats-segment-select");
if(sel) q.set("segment", sel.value || "all");
return q;
},
parseResponse: function(data){
if(data && data.ok === false) return {};
return (data && data.days) || {};
}
});
statsCalendarWidget.ensureMonth(new Date());
statsCalendarWidget.load();
} }
function initStatsSegmentFromUrl(){ function initStatsSegmentFromUrl(){
@@ -1490,6 +1530,7 @@ function toggleStatsCard(){
attachListWindowToExports(); attachListWindowToExports();
toggleListWindowCustom(); toggleListWindowCustom();
initStatsSegmentFromUrl(); initStatsSegmentFromUrl();
initStatsCalendarWidget();
if(document.getElementById("journal-list")) loadJournals(); if(document.getElementById("journal-list")) loadJournals();
if(document.getElementById("review-list")) loadReviews(); if(document.getElementById("review-list")) loadReviews();
const reviewToggle = document.getElementById("review-mode-toggle"); const reviewToggle = document.getElementById("review-mode-toggle");
+41
View File
@@ -244,6 +244,7 @@
.stats-period-block .sub{font-size:.78rem;color:#8892b0;margin-bottom:10px;line-height:1.4} .stats-period-block .sub{font-size:.78rem;color:#8892b0;margin-bottom:10px;line-height:1.4}
</style> </style>
<link rel="stylesheet" href="/static/instance_theme.css?v=18"> <link rel="stylesheet" href="/static/instance_theme.css?v=18">
<link rel="stylesheet" href="/static/trade_stats_calendar.css?v=1">
</head> </head>
<body <body
@@ -802,6 +803,14 @@
</select> </select>
</label> </label>
</div> </div>
<div id="stats-calendar-wrap" class="trade-cal-wrap stats-calendar-wrap">
<div class="trade-cal-head">
<button type="button" id="stats-cal-prev" class="btn" title="上一月"></button>
<span id="stats-cal-title" class="trade-cal-title"></span>
<button type="button" id="stats-cal-next" class="btn" title="下一月"></button>
</div>
<div id="stats-calendar" class="trade-cal-grid-host" role="grid" aria-label="交易日历"></div>
</div>
{% for seg in stats_bundle.segments %} {% for seg in stats_bundle.segments %}
<div class="stats-segment-block stats-segment-panel" data-stats-segment="{{ seg.key }}"{% if not loop.first %} style="display:none"{% endif %}> <div class="stats-segment-block stats-segment-panel" data-stats-segment="{{ seg.key }}"{% if not loop.first %} style="display:none"{% endif %}>
{{ period_stats("日统计", seg.day) }} {{ period_stats("日统计", seg.day) }}
@@ -838,6 +847,7 @@
<script src="/static/form_submit_guard.js?v=2"></script> <script src="/static/form_submit_guard.js?v=2"></script>
<script src="/static/manual_order_rr_preview.js?v=5"></script> <script src="/static/manual_order_rr_preview.js?v=5"></script>
<script src="/static/strategy_roll.js?v=5"></script> <script src="/static/strategy_roll.js?v=5"></script>
<script src="/static/trade_stats_calendar.js?v=1"></script>
<script> <script>
const JOURNAL_ENTRY_REASON_OPTIONS = {{ entry_reason_options | tojson }}; const JOURNAL_ENTRY_REASON_OPTIONS = {{ entry_reason_options | tojson }};
const JOURNAL_ENTRY_REASON_OTHER = {{ entry_reason_other_value | tojson }}; const JOURNAL_ENTRY_REASON_OTHER = {{ entry_reason_other_value | tojson }};
@@ -1496,6 +1506,36 @@ function switchStatsSegment(){
q.set("stats_segment", key); q.set("stats_segment", key);
const qs = q.toString(); const qs = q.toString();
history.replaceState(null, "", qs ? (window.location.pathname + "?" + qs) : window.location.pathname); history.replaceState(null, "", qs ? (window.location.pathname + "?" + qs) : window.location.pathname);
if(statsCalendarWidget) statsCalendarWidget.load();
}
let statsCalendarWidget = null;
function initStatsCalendarWidget(){
const grid = document.getElementById("stats-calendar");
if(!grid || !window.TradeStatsCalendar) return;
statsCalendarWidget = new TradeStatsCalendar({
gridEl: grid,
titleEl: document.getElementById("stats-cal-title"),
prevBtn: document.getElementById("stats-cal-prev"),
nextBtn: document.getElementById("stats-cal-next"),
apiUrl: "/api/stats/calendar",
showSick: false,
buildQuery: function(year, month){
const q = new URLSearchParams();
q.set("year", String(year));
q.set("month", String(month));
const sel = document.getElementById("stats-segment-select");
if(sel) q.set("segment", sel.value || "all");
return q;
},
parseResponse: function(data){
if(data && data.ok === false) return {};
return (data && data.days) || {};
}
});
statsCalendarWidget.ensureMonth(new Date());
statsCalendarWidget.load();
} }
function initStatsSegmentFromUrl(){ function initStatsSegmentFromUrl(){
@@ -1519,6 +1559,7 @@ function toggleStatsCard(){
attachListWindowToExports(); attachListWindowToExports();
toggleListWindowCustom(); toggleListWindowCustom();
initStatsSegmentFromUrl(); initStatsSegmentFromUrl();
initStatsCalendarWidget();
if(document.getElementById("journal-list")) loadJournals(); if(document.getElementById("journal-list")) loadJournals();
if(document.getElementById("review-list")) loadReviews(); if(document.getElementById("review-list")) loadReviews();
const reviewToggle = document.getElementById("review-mode-toggle"); const reviewToggle = document.getElementById("review-mode-toggle");
+2 -4
View File
@@ -495,8 +495,6 @@
"%</td><td>" + "%</td><td>" +
fmtPnlStat(e.pnl_total) + fmtPnlStat(e.pnl_total) +
"</td><td>" + "</td><td>" +
fmtPnlStat(e.pnl_total) +
"</td><td>" +
fmtPnlStat(e.pnl_ex_sick) + fmtPnlStat(e.pnl_ex_sick) +
"</td><td>" + "</td><td>" +
fmtVolStat(e.turnover_total) + fmtVolStat(e.turnover_total) +
@@ -536,11 +534,11 @@
if (!data || !data.ok) return {}; if (!data || !data.ok) return {};
return data.days || {}; return data.days || {};
}, },
onDayClick: function (day, sick) { onDayClick: function (day) {
selectedCalendarDay = day; selectedCalendarDay = day;
setPeriodMode("today"); setPeriodMode("today");
if (elTradingDay) elTradingDay.value = day; if (elTradingDay) elTradingDay.value = day;
if (elFilterSick) elFilterSick.checked = sick; if (elFilterSick) elFilterSick.checked = false;
syncPeriodUI(); syncPeriodUI();
void loadDailyTrades(); void loadDailyTrades();
}, },
+11 -4
View File
@@ -4,8 +4,9 @@
--trade-cal-cell-bg: var(--section-surface, var(--inset-surface, rgba(0, 0, 0, 0.32))); --trade-cal-cell-bg: var(--section-surface, var(--inset-surface, rgba(0, 0, 0, 0.32)));
--trade-cal-cell-hover-bg: color-mix(in srgb, var(--accent, #6366f1) 12%, var(--trade-cal-cell-bg)); --trade-cal-cell-hover-bg: color-mix(in srgb, var(--accent, #6366f1) 12%, var(--trade-cal-cell-bg));
--trade-cal-cell-hover-border: color-mix(in srgb, var(--accent, #6366f1) 45%, transparent); --trade-cal-cell-hover-border: color-mix(in srgb, var(--accent, #6366f1) 45%, transparent);
--trade-cal-selected-border: color-mix(in srgb, var(--accent, #6366f1) 75%, transparent); --trade-cal-selected-border: rgba(59, 130, 246, 0.85);
--trade-cal-selected-shadow: color-mix(in srgb, var(--accent, #6366f1) 35%, transparent); --trade-cal-selected-bg: color-mix(in srgb, #3b82f6 16%, var(--trade-cal-cell-bg));
--trade-cal-selected-shadow: rgba(59, 130, 246, 0.45);
--trade-cal-sick-bg: color-mix(in srgb, var(--red, #ef4444) 14%, var(--trade-cal-cell-bg)); --trade-cal-sick-bg: color-mix(in srgb, var(--red, #ef4444) 14%, var(--trade-cal-cell-bg));
--trade-cal-sick-border: color-mix(in srgb, var(--red, #ef4444) 55%, transparent); --trade-cal-sick-border: color-mix(in srgb, var(--red, #ef4444) 55%, transparent);
--trade-cal-sick-shadow: color-mix(in srgb, var(--red, #ef4444) 45%, transparent); --trade-cal-sick-shadow: color-mix(in srgb, var(--red, #ef4444) 45%, transparent);
@@ -76,14 +77,17 @@
} }
.trade-cal-cell.is-selected { .trade-cal-cell.is-selected {
border-color: var(--trade-cal-selected-border); border-color: var(--trade-cal-selected-border);
box-shadow: 0 0 0 1px var(--trade-cal-selected-shadow); background: var(--trade-cal-selected-bg);
box-shadow: 0 0 0 2px var(--trade-cal-selected-shadow);
} }
.trade-cal-cell.is-sick-day { .trade-cal-cell.is-sick-day {
border-color: var(--trade-cal-sick-border); border-color: var(--trade-cal-sick-border);
background: var(--trade-cal-sick-bg); background: var(--trade-cal-sick-bg);
} }
.trade-cal-cell.is-sick-day.is-selected { .trade-cal-cell.is-sick-day.is-selected {
box-shadow: 0 0 0 2px var(--trade-cal-sick-shadow); border-color: var(--trade-cal-selected-border);
background: color-mix(in srgb, #3b82f6 14%, var(--trade-cal-sick-bg));
box-shadow: 0 0 0 2px var(--trade-cal-selected-shadow);
} }
.trade-cal-cell.pnl-pos .trade-cal-pnl { .trade-cal-cell.pnl-pos .trade-cal-pnl {
color: var(--trade-cal-pos); color: var(--trade-cal-pos);
@@ -123,5 +127,8 @@ html[data-theme="light"] .trade-cal-wrap {
--trade-cal-wrap-bg: var(--inset-surface, #eef3f8); --trade-cal-wrap-bg: var(--inset-surface, #eef3f8);
--trade-cal-cell-bg: var(--section-surface, #f6f9fc); --trade-cal-cell-bg: var(--section-surface, #f6f9fc);
--trade-cal-cell-hover-bg: color-mix(in srgb, var(--accent, #2563eb) 10%, #f6f9fc); --trade-cal-cell-hover-bg: color-mix(in srgb, var(--accent, #2563eb) 10%, #f6f9fc);
--trade-cal-selected-border: rgba(37, 99, 235, 0.75);
--trade-cal-selected-bg: color-mix(in srgb, #2563eb 12%, #f6f9fc);
--trade-cal-selected-shadow: rgba(37, 99, 235, 0.35);
--trade-cal-sick-tag-fg: #b91c1c; --trade-cal-sick-tag-fg: #b91c1c;
} }