dekun/crypto_monitor
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Dashboard OKX card: 3-column perpetual/options split when options enabled.

Browse Source 
Show perpetual and options funding metrics separately, total funds row, then positions; other exchanges keep the 2-column layout.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
2026-07-07 15:22:11 +08:00
parent 9027708a61
commit 7bbb5663c9
4 changed files with 148 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
manual_trading_hub/static/dashboard.js
+56 -31
View File
@@ -170,8 +170,57 @@
});
}
function dashMetric(label, value, valCls) {
return `<div class="dash-ac-metric"><span>${esc(label)}</span><strong class="${valCls || ""}">${value}</strong></div>`;
}
function dashSectionLabel(text) {
return `<div class="dash-ac-section-label">${esc(text)}</div>`;
}
function renderOkxOptionsMetrics(ac) {
const pnl = Number(ac.pnl_u);
const perpFloat = Number(
ac.perpetual_float_pnl_u != null ? ac.perpetual_float_pnl_u : ac.float_pnl_u
);
const optFloat = Number(ac.options_float_pnl_u);
const pf =
ac.perpetual_funding_usdt != null ? ac.perpetual_funding_usdt : ac.funding_usdt;
const pt =
ac.perpetual_trading_usdt != null ? ac.perpetual_trading_usdt : ac.trading_usdt;
return `<div class="dash-ac-metrics dash-ac-metrics-3col">
${dashSectionLabel("永续账户")}
${dashMetric("资金账户", `${fmt(pf, 2)}U`)}
${dashMetric("交易账户", `${fmt(pt, 2)}U`)}
${dashMetric("今日盈亏", pnlSigned(pnl, 2), pnlClass(pnl))}
${dashMetric("平仓笔数", String(Number(ac.closed_count) || 0))}
${dashMetric("浮盈亏", pnlSigned(perpFloat, 2), pnlClass(perpFloat))}
<div class="dash-ac-metric dash-ac-metric-empty" aria-hidden="true"></div>
${dashSectionLabel("期权账户")}
${dashMetric("资金账户", `${fmt(ac.options_funding_usdt, 2)}U`)}
${dashMetric("交易账户", `${fmt(ac.options_trading_usdt, 2)}U`)}
${dashMetric("期权浮盈亏", pnlSigned(optFloat, 2), pnlClass(optFloat))}
</div>
<div class="dash-ac-total-row">
<span>总资金</span>
<strong>${fmt(ac.capital_total_usdt, 2)}U</strong>
</div>`;
}
function renderStandardMetrics(ac) {
const pnl = Number(ac.pnl_u);
const floatPnl = Number(ac.float_pnl_u);
return `<div class="dash-ac-metrics">
${dashMetric("资金账户", `${fmt(ac.funding_usdt, 2)}U`)}
${dashMetric("交易账户", `${fmt(ac.trading_usdt, 2)}U`)}
${dashMetric("资金合计", `${fmt(ac.capital_total_usdt, 2)}U`)}
${dashMetric("今日盈亏", pnlSigned(pnl, 2), pnlClass(pnl))}
${dashMetric("平仓笔数", String(Number(ac.closed_count) || 0))}
${dashMetric("浮盈亏", pnlSigned(floatPnl, 2), pnlClass(floatPnl))}
</div>`;
}
function renderAccounts(accounts, threshold) {
if (!elAccounts) return;
const rows = Array.isArray(accounts) ? accounts : [];
if (!rows.length) {
elAccounts.innerHTML = '<div class="dash-empty">暂无账户数据</div>';
@@ -181,8 +230,6 @@
.map((ac) => {
const alert = !!ac.loss_alert;
const unmon = !ac.monitored;
const pnl = Number(ac.pnl_u);
const floatPnl = Number(ac.float_pnl_u);
const lossPct = Number(ac.daily_loss_pct);
const barW =
alert && Number.isFinite(lossPct)
@@ -195,38 +242,16 @@
alert && barW > 0
? `<div class="dash-loss-bar" title="占资金合计 ${fmt(lossPct, 2)}%"><i style="width:${barW}%"></i></div>`
: "";
const optFunding = ac.options_funding_usdt;
const optTrading = ac.options_trading_usdt;
const optFloat = Number(ac.options_float_pnl_u);
const optPos = Number(ac.options_open_position_count) || 0;
const optMetrics =
optFunding != null || optTrading != null || optPos > 0
? `<div class="dash-ac-metric"><span>期权资金</span><strong>${fmt(
optFunding != null && optTrading != null
? Number(optFunding) + Number(optTrading)
: null,
2
)}U</strong></div>
<div class="dash-ac-metric"><span>期权持仓</span><strong>${optPos} 仓</strong></div>
<div class="dash-ac-metric"><span>期权浮盈</span><strong class="${pnlClass(optFloat)}">${pnlSigned(
optFloat,
2
)}</strong></div>`
: "";
return `<article class="dash-ac-card${alert ? " is-alert" : ""}${unmon ? " is-unmon" : ""}">
const metricsHtml = ac.options_layout
? renderOkxOptionsMetrics(ac)
: renderStandardMetrics(ac);
const cardCls = ac.options_layout ? " dash-ac-card-options" : "";
return `<article class="dash-ac-card${cardCls}${alert ? " is-alert" : ""}${unmon ? " is-unmon" : ""}">
<div class="dash-ac-top">
<div class="dash-ac-name">${esc(ac.name || "—")}</div>
${badge}
</div>
<div class="dash-ac-metrics">
<div class="dash-ac-metric"><span>资金账户</span><strong>${fmt(ac.funding_usdt, 2)}U</strong></div>
<div class="dash-ac-metric"><span>交易账户</span><strong>${fmt(ac.trading_usdt, 2)}U</strong></div>
<div class="dash-ac-metric"><span>资金合计</span><strong>${fmt(ac.capital_total_usdt, 2)}U</strong></div>
<div class="dash-ac-metric"><span>今日盈亏</span><strong class="${pnlClass(pnl)}">${pnlSigned(pnl, 2)}</strong></div>
<div class="dash-ac-metric"><span>平仓笔数</span><strong>${Number(ac.closed_count) || 0}</strong></div>
<div class="dash-ac-metric"><span>浮盈亏</span><strong class="${pnlClass(floatPnl)}">${pnlSigned(floatPnl, 2)}</strong></div>
${optMetrics}
</div>
${metricsHtml}
${lossBar}
${renderAccountDetail(ac)}
</article>`;