dekun
cd2dfac2ba
Orders/keys/strategy/options/hedge only appear when they have rows, shown in table layout. Co-authored-by: Cursor <cursoragent@cursor.com>
366 lines
10 KiB
JavaScript
366 lines
10 KiB
JavaScript
/**
|
|
* 实例数据看板:拉 /api/instance/dashboard 渲染只读表格.
|
|
* 各区块无数据时不展示;有数据按表格展示.
|
|
*/
|
|
(function (global) {
|
|
const SECTION_ORDER = ["orders", "keys", "strategy", "options", "hedge_plan"];
|
|
let loading = false;
|
|
let timer = null;
|
|
|
|
function root() {
|
|
const active = document.querySelector('.embed-tab-pane.is-active-pane [data-inst-dashboard="1"]');
|
|
if (active) return active;
|
|
return document.getElementById("instance-dashboard");
|
|
}
|
|
|
|
function escapeHtml(s) {
|
|
return String(s == null ? "" : s)
|
|
.replace(/&/g, "&")
|
|
.replace(/</g, "<")
|
|
.replace(/>/g, ">")
|
|
.replace(/"/g, """);
|
|
}
|
|
|
|
function fmtNum(v) {
|
|
if (v == null || v === "") return "—";
|
|
const n = Number(v);
|
|
if (!Number.isFinite(n)) return escapeHtml(v);
|
|
return String(n);
|
|
}
|
|
|
|
function fmtPnl(v) {
|
|
if (v == null || v === "") return "—";
|
|
const n = Number(v);
|
|
if (!Number.isFinite(n)) return "—";
|
|
const cls = n > 0 ? "pos-pnl-profit" : n < 0 ? "pos-pnl-loss" : "";
|
|
const sign = n > 0 ? "+" : "";
|
|
return '<span class="' + cls + '">' + sign + n.toFixed(2) + "U</span>";
|
|
}
|
|
|
|
function goTab(tab) {
|
|
if (!tab) return;
|
|
if (global.InstanceEmbed && typeof global.InstanceEmbed.loadTab === "function") {
|
|
global.InstanceEmbed.loadTab(tab);
|
|
return;
|
|
}
|
|
const pathMap = {
|
|
trade: "/trade",
|
|
key_monitor: "/key_monitor",
|
|
strategy: "/strategy",
|
|
options: "/options",
|
|
hedge_plan: "/hedge-plan",
|
|
};
|
|
const path = pathMap[tab] || "/" + tab;
|
|
location.href = path;
|
|
}
|
|
|
|
function tableWrap(headers, rowsHtml) {
|
|
return (
|
|
'<div class="inst-dash-table-wrap">' +
|
|
'<table class="inst-dash-table">' +
|
|
"<thead><tr>" +
|
|
headers.map(function (h) {
|
|
return "<th>" + escapeHtml(h) + "</th>";
|
|
}).join("") +
|
|
"</tr></thead>" +
|
|
"<tbody>" +
|
|
rowsHtml +
|
|
"</tbody></table></div>"
|
|
);
|
|
}
|
|
|
|
function rowClickAttrs(tab) {
|
|
return ' class="inst-dash-row" data-dash-tab="' + escapeHtml(tab || "") + '" role="link" tabindex="0"';
|
|
}
|
|
|
|
function renderOrdersTable(items) {
|
|
const rows = items
|
|
.map(function (it) {
|
|
return (
|
|
"<tr" +
|
|
rowClickAttrs(it.tab || "trade") +
|
|
">" +
|
|
"<td>" +
|
|
escapeHtml(it.symbol || "-") +
|
|
"</td>" +
|
|
"<td>" +
|
|
escapeHtml(it.direction_label || it.direction || "-") +
|
|
"</td>" +
|
|
"<td>" +
|
|
escapeHtml(it.subtitle || "—") +
|
|
"</td>" +
|
|
"<td>" +
|
|
fmtNum(it.entry) +
|
|
"</td>" +
|
|
"<td>" +
|
|
fmtNum(it.stop_loss) +
|
|
"</td>" +
|
|
"<td>" +
|
|
fmtNum(it.take_profit) +
|
|
"</td>" +
|
|
"</tr>"
|
|
);
|
|
})
|
|
.join("");
|
|
return tableWrap(["合约", "方向", "类型", "入场", "止损", "止盈"], rows);
|
|
}
|
|
|
|
function renderKeysTable(items) {
|
|
const rows = items
|
|
.map(function (it) {
|
|
return (
|
|
"<tr" +
|
|
rowClickAttrs(it.tab || "key_monitor") +
|
|
">" +
|
|
"<td>" +
|
|
escapeHtml(it.symbol || "-") +
|
|
"</td>" +
|
|
"<td>" +
|
|
escapeHtml(it.direction_label || it.direction || "-") +
|
|
"</td>" +
|
|
"<td>" +
|
|
escapeHtml(it.subtitle || "—") +
|
|
"</td>" +
|
|
"<td>" +
|
|
fmtNum(it.upper) +
|
|
"</td>" +
|
|
"<td>" +
|
|
fmtNum(it.lower) +
|
|
"</td>" +
|
|
"</tr>"
|
|
);
|
|
})
|
|
.join("");
|
|
return tableWrap(["合约", "方向", "信号", "上沿", "下沿"], rows);
|
|
}
|
|
|
|
function renderStrategyTable(items) {
|
|
const rows = items
|
|
.map(function (it) {
|
|
const kindLabel = it.kind === "roll" ? "顺势加仓" : it.kind === "trend" ? "趋势回调" : "策略";
|
|
return (
|
|
"<tr" +
|
|
rowClickAttrs(it.tab || "strategy") +
|
|
">" +
|
|
"<td>" +
|
|
escapeHtml(kindLabel) +
|
|
"</td>" +
|
|
"<td>" +
|
|
escapeHtml(it.symbol || "-") +
|
|
"</td>" +
|
|
"<td>" +
|
|
escapeHtml(it.direction_label || it.direction || "-") +
|
|
"</td>" +
|
|
"<td>" +
|
|
escapeHtml(it.status || "—") +
|
|
"</td>" +
|
|
"<td>" +
|
|
fmtNum(it.entry) +
|
|
"</td>" +
|
|
"</tr>"
|
|
);
|
|
})
|
|
.join("");
|
|
return tableWrap(["类型", "合约", "方向", "状态", "入场"], rows);
|
|
}
|
|
|
|
function renderOptionsTable(items) {
|
|
const rows = items
|
|
.map(function (it) {
|
|
const opt =
|
|
String(it.opt_type || "").toUpperCase() === "C"
|
|
? "Call"
|
|
: String(it.opt_type || "").toUpperCase() === "P"
|
|
? "Put"
|
|
: it.opt_type || "—";
|
|
return (
|
|
"<tr" +
|
|
rowClickAttrs(it.tab || "options") +
|
|
">" +
|
|
"<td>" +
|
|
escapeHtml(it.inst_id || it.title || "-") +
|
|
"</td>" +
|
|
"<td>" +
|
|
escapeHtml(opt) +
|
|
"</td>" +
|
|
"<td>" +
|
|
fmtNum(it.pos) +
|
|
"</td>" +
|
|
"<td>" +
|
|
fmtPnl(it.pnl) +
|
|
"</td>" +
|
|
"</tr>"
|
|
);
|
|
})
|
|
.join("");
|
|
return tableWrap(["合约", "类型", "张数", "盈亏"], rows);
|
|
}
|
|
|
|
function renderHedgeTable(items) {
|
|
const rows = items
|
|
.map(function (it) {
|
|
return (
|
|
"<tr" +
|
|
rowClickAttrs(it.tab || "hedge_plan") +
|
|
">" +
|
|
"<td>#" +
|
|
escapeHtml(it.id != null ? it.id : "—") +
|
|
"</td>" +
|
|
"<td>" +
|
|
escapeHtml(it.underlying || "-") +
|
|
"</td>" +
|
|
"<td>" +
|
|
escapeHtml(it.plan_type || "—") +
|
|
"</td>" +
|
|
"<td>" +
|
|
escapeHtml(it.status || "—") +
|
|
"</td>" +
|
|
"<td>" +
|
|
escapeHtml(it.subtitle || "—") +
|
|
"</td>" +
|
|
"</tr>"
|
|
);
|
|
})
|
|
.join("");
|
|
return tableWrap(["ID", "标的", "计划类型", "状态", "说明"], rows);
|
|
}
|
|
|
|
function renderTable(key, items) {
|
|
if (key === "orders") return renderOrdersTable(items);
|
|
if (key === "keys") return renderKeysTable(items);
|
|
if (key === "strategy") return renderStrategyTable(items);
|
|
if (key === "options") return renderOptionsTable(items);
|
|
if (key === "hedge_plan") return renderHedgeTable(items);
|
|
return "";
|
|
}
|
|
|
|
function sectionHasData(sec) {
|
|
if (!sec) return false;
|
|
const count = Number(sec.count);
|
|
if (Number.isFinite(count) && count > 0) return true;
|
|
return Array.isArray(sec.items) && sec.items.length > 0;
|
|
}
|
|
|
|
function renderSection(key, sec) {
|
|
if (!sectionHasData(sec)) return "";
|
|
const items = sec.items || [];
|
|
const count = Number(sec.count) || items.length;
|
|
return (
|
|
'<section class="inst-dash-section" data-dash-section="' +
|
|
escapeHtml(key) +
|
|
'">' +
|
|
'<div class="inst-dash-section-head">' +
|
|
"<h3>" +
|
|
escapeHtml(sec.title || key) +
|
|
' <span class="inst-dash-count">' +
|
|
count +
|
|
"</span></h3>" +
|
|
'<button type="button" class="btn-sm inst-dash-goto" data-dash-tab="' +
|
|
escapeHtml(sec.tab || "") +
|
|
'">打开</button>' +
|
|
"</div>" +
|
|
renderTable(key, items) +
|
|
"</section>"
|
|
);
|
|
}
|
|
|
|
function bindClicks(el) {
|
|
if (!el) return;
|
|
el.querySelectorAll("[data-dash-tab]").forEach(function (node) {
|
|
const handler = function () {
|
|
goTab(node.getAttribute("data-dash-tab"));
|
|
};
|
|
node.addEventListener("click", handler);
|
|
node.addEventListener("keydown", function (ev) {
|
|
if (ev.key === "Enter" || ev.key === " ") {
|
|
ev.preventDefault();
|
|
handler();
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
async function load(opts) {
|
|
const el = root();
|
|
if (!el) return;
|
|
const status = el.querySelector("#inst-dash-status") || document.getElementById("inst-dash-status");
|
|
const sections = el.querySelector("#inst-dash-sections") || document.getElementById("inst-dash-sections");
|
|
const updated = el.querySelector("#inst-dash-updated") || document.getElementById("inst-dash-updated");
|
|
if (loading) return;
|
|
loading = true;
|
|
if (status && !(opts && opts.silent)) status.textContent = "加载中…";
|
|
try {
|
|
const res = await fetch("/api/instance/dashboard", { credentials: "same-origin" });
|
|
const data = await res.json().catch(function () {
|
|
return {};
|
|
});
|
|
if (!res.ok || !data.ok) {
|
|
throw new Error(data.msg || res.statusText || "加载失败");
|
|
}
|
|
if (updated) updated.textContent = "更新 " + (data.updated_at || "—");
|
|
if (sections) {
|
|
const html = SECTION_ORDER.map(function (k) {
|
|
return renderSection(k, data[k]);
|
|
}).join("");
|
|
sections.innerHTML =
|
|
html || '<p class="inst-dash-empty muted">当前无活跃监控与持仓</p>';
|
|
bindClicks(sections);
|
|
}
|
|
if (status) status.textContent = "";
|
|
} catch (e) {
|
|
if (status) status.textContent = e.message || "加载失败";
|
|
} finally {
|
|
loading = false;
|
|
}
|
|
}
|
|
|
|
function stopAuto() {
|
|
if (timer) {
|
|
clearInterval(timer);
|
|
timer = null;
|
|
}
|
|
}
|
|
|
|
function startAuto() {
|
|
stopAuto();
|
|
timer = setInterval(function () {
|
|
const el = root();
|
|
if (!el) return;
|
|
const pane = el.closest(".embed-tab-pane");
|
|
if (pane && !pane.classList.contains("is-active-pane")) return;
|
|
load({ silent: true });
|
|
}, 15000);
|
|
}
|
|
|
|
function init(force) {
|
|
const el = root();
|
|
if (!el) return;
|
|
if (!force && el.getAttribute("data-dash-booted") === "1") {
|
|
load({ silent: true });
|
|
startAuto();
|
|
return;
|
|
}
|
|
el.setAttribute("data-dash-booted", "1");
|
|
const btn = el.querySelector("#inst-dash-refresh") || document.getElementById("inst-dash-refresh");
|
|
if (btn && !btn.getAttribute("data-bound")) {
|
|
btn.setAttribute("data-bound", "1");
|
|
btn.addEventListener("click", function () {
|
|
load({});
|
|
});
|
|
}
|
|
load({});
|
|
startAuto();
|
|
}
|
|
|
|
function refreshSoft(opts) {
|
|
load(Object.assign({ silent: true }, opts || {}));
|
|
}
|
|
|
|
global.InstanceDashboard = {
|
|
init: init,
|
|
refreshSoft: refreshSoft,
|
|
load: load,
|
|
stopAuto: stopAuto,
|
|
};
|
|
})(window);
|