Files
Binance_Altcoin_Monitor/web/app.js
T
2026-05-22 13:06:42 +08:00

92 lines
3.0 KiB
JavaScript

const REFRESH_MS = 60_000;
function formatPeriod(start, end) {
const fmt = (s) => s.replace("T", " ").slice(0, 16);
return `${fmt(start)} ~ ${fmt(end)}`;
}
function renderTags(row) {
const parts = [];
if (row.is_high_volume) {
parts.push('<span class="tag tag-vol">千万+</span>');
}
if (row.is_high_change) {
parts.push('<span class="tag tag-chg">涨跌5%+</span>');
}
return parts.length ? parts.join("") : "—";
}
function pctClass(pct) {
if (pct > 0) return "pct-up";
if (pct < 0) return "pct-down";
return "";
}
function renderTable(tbody, items) {
if (!items || !items.length) {
tbody.innerHTML = '<tr><td colspan="5" class="loading">暂无数据</td></tr>';
return;
}
tbody.innerHTML = items
.map((row) => {
const highlight =
row.is_high_volume || row.is_high_change ? " row-highlight" : "";
const pct = row.price_change_pct ?? 0;
return `<tr class="${highlight}">
<td class="rank">${row.rank}</td>
<td><strong>${row.symbol}</strong></td>
<td>${row.quote_volume_fmt || row.quote_volume}</td>
<td class="${pctClass(pct)}">${row.price_change_pct_fmt || pct.toFixed(2) + "%"}</td>
<td>${renderTags(row)}</td>
</tr>`;
})
.join("");
}
async function loadYesterday() {
const body = document.getElementById("yesterday-body");
body.innerHTML = '<tr><td colspan="5" class="loading">加载中…</td></tr>';
try {
const res = await fetch("/api/yesterday/top30");
const data = await res.json();
document.getElementById("yesterday-period").textContent = formatPeriod(
data.period_start,
data.period_end
);
document.getElementById("yesterday-updated").textContent =
"更新: " + (data.updated_at || "").replace("T", " ").slice(0, 19);
renderTable(body, data.items);
} catch (e) {
body.innerHTML = `<tr><td colspan="5" class="error">加载失败: ${e.message}</td></tr>`;
}
}
async function loadToday() {
const body = document.getElementById("today-body");
try {
const res = await fetch("/api/today/top30");
const data = await res.json();
document.getElementById("today-period").textContent = formatPeriod(
data.period_start,
data.period_end
);
document.getElementById("today-updated").textContent =
"更新: " + (data.updated_at || "").replace("T", " ").slice(0, 19);
renderTable(body, data.items);
document.getElementById("status").textContent = "今日数据已刷新";
} catch (e) {
body.innerHTML = `<tr><td colspan="5" class="error">加载失败: ${e.message}</td></tr>`;
document.getElementById("status").textContent = e.message;
}
}
document.getElementById("btn-refresh").addEventListener("click", async () => {
document.getElementById("status").textContent = "刷新中…";
await fetch("/api/refresh/today", { method: "POST" });
await loadToday();
});
loadYesterday();
loadToday();
setInterval(loadToday, REFRESH_MS);