jackyu66git
beb3611778
P3-1: Scan optimization — only BG↔HL (50+ pair combos → 2)
P3-2: Real-time spread chart — spreadHistory ring buffer +
/api/spread-history endpoint + Chart.js spread chart
P3-3: Live position PnL — positions SSE now includes
estimated current profit/loss + current spread
P3-4: Real-time trade events — trader.OnTradeEvent callback
fires SSE 'trade_open' / 'trade_close' immediately
P3-5: Connection status monitoring — tracks last update time
per exchange, broadcast via stats.connections + /api/connections
Frontend: spread chart card, PnL column in positions,
connection status dots in stats bar,
green/red border flash on trade events
124 lines
4.3 KiB
HTML
124 lines
4.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Exchange Monitor Dashboard</title>
|
|
<link rel="stylesheet" href="/static/style.css">
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.7/dist/chart.umd.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<header>
|
|
<h1>⚡ 跨交易所套利监控</h1>
|
|
<div class="header-meta">
|
|
<span id="clock">--:--:--</span>
|
|
<span class="sep">|</span>
|
|
<span id="conn-status" class="status-offline">● 未连接</span>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="grid">
|
|
<!-- Stats Summary -->
|
|
<section class="card" id="stats-card">
|
|
<h2>📊 统计数据</h2>
|
|
<div class="stats-row">
|
|
<div class="stat"><label>总交易</label><span id="stat-total">0</span></div>
|
|
<div class="stat"><label>收敛</label><span id="stat-converged" class="pct-green">0</span></div>
|
|
<div class="stat"><label>发散</label><span id="stat-diverged" class="pct-red">0</span></div>
|
|
<div class="stat"><label>持平</label><span id="stat-flat" class="pct-gray">0</span></div>
|
|
<div class="stat"><label>持仓</label><span id="stat-positions" class="pct-yellow">0</span></div>
|
|
<div class="stat"><label>币种</label><span id="stat-coins" class="pct-blue">0</span></div>
|
|
<div class="stat" id="conn-stats"><label>连接</label><span id="conn-detail"></span></div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Price Table -->
|
|
<section class="card" id="prices-card">
|
|
<h2>💰 实时价格 <span id="prices-age" class="text-dim" style="font-size:11px"></span></h2>
|
|
<div class="table-wrap">
|
|
<table id="price-table">
|
|
<thead>
|
|
<tr><th>币种</th><th>Binance</th><th>HyperLiquid</th><th>Bitget</th><th>dYdX</th><th>BG↔HL价差</th></tr>
|
|
</thead>
|
|
<tbody id="price-body">
|
|
<tr><td colspan="6" class="loading">等待数据...</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Arbitrage Opportunities -->
|
|
<section class="card" id="arb-card">
|
|
<h2>🎯 套利机会 (BG↔HL)</h2>
|
|
<div class="table-wrap">
|
|
<table id="arb-table">
|
|
<thead>
|
|
<tr><th>币种</th><th>方向</th><th>买价</th><th>卖价</th><th>净利%</th></tr>
|
|
</thead>
|
|
<tbody id="arb-body">
|
|
<tr><td colspan="5" class="loading">等待数据...</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Open Positions -->
|
|
<section class="card" id="positions-card">
|
|
<h2>🔒 当前持仓</h2>
|
|
<div class="table-wrap">
|
|
<table id="positions-table">
|
|
<thead>
|
|
<tr><th>币种</th><th>方向</th><th>规模</th><th>入价差</th><th>现价差</th><th>估盈亏</th><th>加仓</th><th>时长</th></tr>
|
|
</thead>
|
|
<tbody id="positions-body">
|
|
<tr><td colspan="8" class="loading">等待数据...</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Price Chart -->
|
|
<section class="card card-wide" id="chart-card">
|
|
<h2>📈 价格走势</h2>
|
|
<div class="chart-controls">
|
|
<select id="chart-coin"></select>
|
|
<select id="chart-exchange"></select>
|
|
</div>
|
|
<div class="chart-container">
|
|
<canvas id="priceChart"></canvas>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Spread Chart (P3-2) -->
|
|
<section class="card card-wide" id="spread-chart-card">
|
|
<h2>📉 价差走势 (BG↔HL)</h2>
|
|
<div class="chart-controls">
|
|
<select id="spread-coin"></select>
|
|
</div>
|
|
<div class="chart-container">
|
|
<canvas id="spreadChart"></canvas>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Recent Trades -->
|
|
<section class="card card-wide" id="trades-card">
|
|
<h2>📋 历史交易</h2>
|
|
<div class="table-wrap">
|
|
<table id="trades-table">
|
|
<thead>
|
|
<tr><th>时间</th><th>币种</th><th>方向</th><th>入价差</th><th>出价差</th><th>净利%</th><th>结果</th><th>原因</th></tr>
|
|
</thead>
|
|
<tbody id="trades-body">
|
|
<tr><td colspan="8" class="loading">等待数据...</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/static/app.js"></script>
|
|
</body>
|
|
</html>
|