jackyu66git
c2489614a7
- dashboard.go: SSE hub + HTTP server + price history ring buffer
- static.go: //go:embed for static files
- web/static/index.html: Full dashboard HTML (6 panels)
- web/static/app.js: SSE client, Chart.js price chart, live table updates
- web/static/style.css: GitHub-style dark theme
- main.go: Start dashboard on :8888 + wire price recording + scan results
Dashboard features:
- Real-time price table (6 coins × 4 exchanges)
- Arbitrage opportunities table
- Open positions view
- Historical trades table (from SQLite)
- Chart.js price chart with coin/exchange selector
- Stats summary (total/converged/diverged/flat)
- 🚫 Zero external Go dependencies (Chart.js loaded from CDN)
140 lines
4.1 KiB
HTML
140 lines
4.1 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>
|
|
</section>
|
|
|
|
<!-- Price Table -->
|
|
<section class="card" id="prices-card">
|
|
<h2>💰 实时价格</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>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="price-body">
|
|
<tr><td colspan="5" class="loading">等待数据...</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Arbitrage Opportunities -->
|
|
<section class="card" id="arb-card">
|
|
<h2>🎯 套利机会</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>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="positions-body">
|
|
<tr><td colspan="6" 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>
|
|
|
|
<!-- 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>
|