jackyu66git
505137bcb0
- Click any trade row in history table to open detail modal - Modal shows 6 sections: 概览, 时间, 价差, 手续费, 多仓, 空仓 - Entries and exits displayed with 6 decimal precision - Fee entry/exit and total fee displayed - Open/close timestamps with full date-time format - Duration, scale count, total amount, exit reason - Orders sub-table if available - Escape key and overlay click to close
137 lines
4.7 KiB
HTML
137 lines
4.7 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>
|
|
|
|
<!-- Trade Detail Modal -->
|
|
<div id="trade-modal" class="modal-overlay" style="display:none">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h2>📋 交易详情</h2>
|
|
<button class="modal-close" onclick="closeTradeDetail()">✕</button>
|
|
</div>
|
|
<div id="trade-detail-body">
|
|
<div class="loading">加载中...</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/static/app.js"></script>
|
|
</body>
|
|
</html>
|