|
|
@@ -21,11 +21,11 @@
|
|
|
}
|
|
|
|
|
|
.container {
|
|
|
- max-width: 1400px;
|
|
|
- margin: 0 auto;
|
|
|
+ width: 100%;
|
|
|
+ margin: 0;
|
|
|
background: rgba(255, 255, 255, 0.95);
|
|
|
- border-radius: 20px;
|
|
|
- box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
|
|
|
+ border-radius: 0;
|
|
|
+ box-shadow: none;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
|
|
|
@@ -179,7 +179,7 @@
|
|
|
|
|
|
.chart-wrapper {
|
|
|
position: relative;
|
|
|
- height: 400px;
|
|
|
+ height: 80vh;
|
|
|
}
|
|
|
|
|
|
.loading {
|
|
|
@@ -267,40 +267,7 @@
|
|
|
<div id="loading" class="loading">请选择币对以查看数据</div>
|
|
|
<div id="error" class="error" style="display: none;"></div>
|
|
|
|
|
|
- <div id="statsContainer" style="display: none;">
|
|
|
- <div class="stats-grid">
|
|
|
- <div class="stat-card">
|
|
|
- <h3>当前标记价格差</h3>
|
|
|
- <div class="value" id="currentMarkPriceDiff">--</div>
|
|
|
- <div class="unit">USDT</div>
|
|
|
- </div>
|
|
|
- <div class="stat-card">
|
|
|
- <h3>当前价格差</h3>
|
|
|
- <div class="value" id="currentPriceDiff">--</div>
|
|
|
- <div class="unit">USDT</div>
|
|
|
- </div>
|
|
|
- <div class="stat-card">
|
|
|
- <h3>标记价格差百分比</h3>
|
|
|
- <div class="value" id="currentMarkPriceDiffPct">--</div>
|
|
|
- <div class="unit">%</div>
|
|
|
- </div>
|
|
|
- <div class="stat-card">
|
|
|
- <h3>价格差百分比</h3>
|
|
|
- <div class="value" id="currentPriceDiffPct">--</div>
|
|
|
- <div class="unit">%</div>
|
|
|
- </div>
|
|
|
- <div class="stat-card">
|
|
|
- <h3>平均标记价格差</h3>
|
|
|
- <div class="value" id="avgMarkPriceDiff">--</div>
|
|
|
- <div class="unit">USDT</div>
|
|
|
- </div>
|
|
|
- <div class="stat-card">
|
|
|
- <h3>数据记录数</h3>
|
|
|
- <div class="value" id="recordCount">--</div>
|
|
|
- <div class="unit">条</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <!-- 数据卡片已移除 -->
|
|
|
|
|
|
<div id="chartsContainer" style="display: none;">
|
|
|
<div class="chart-container">
|
|
|
@@ -392,14 +359,11 @@
|
|
|
]);
|
|
|
|
|
|
const data = dataResponse.data.data;
|
|
|
- const stats = statsResponse.data;
|
|
|
- const latest = latestResponse.data;
|
|
|
-
|
|
|
- updateStats(stats, latest);
|
|
|
+ // 数据卡片相关代码已移除
|
|
|
+
|
|
|
updateCharts(data, symbol);
|
|
|
updateLastUpdateTime();
|
|
|
|
|
|
- document.getElementById('statsContainer').style.display = 'block';
|
|
|
document.getElementById('chartsContainer').style.display = 'block';
|
|
|
document.getElementById('lastUpdate').style.display = 'block';
|
|
|
document.getElementById('loading').style.display = 'none';
|
|
|
@@ -410,29 +374,7 @@
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- function updateStats(stats, latest) {
|
|
|
- // 更新当前数据
|
|
|
- updateStatValue('currentMarkPriceDiff', latest.mark_price_diff);
|
|
|
- updateStatValue('currentPriceDiff', latest.price_diff);
|
|
|
- updateStatValue('currentMarkPriceDiffPct', latest.mark_price_diff_pct, '%');
|
|
|
- updateStatValue('currentPriceDiffPct', latest.price_diff_pct, '%');
|
|
|
-
|
|
|
- // 更新统计数据
|
|
|
- updateStatValue('avgMarkPriceDiff', stats.avg_mark_price_diff);
|
|
|
- document.getElementById('recordCount').textContent = stats.record_count || '--';
|
|
|
- }
|
|
|
-
|
|
|
- function updateStatValue(elementId, value, suffix = '') {
|
|
|
- const element = document.getElementById(elementId);
|
|
|
- if (value !== null && value !== undefined) {
|
|
|
- const formattedValue = typeof value === 'number' ? value.toFixed(4) : value;
|
|
|
- element.textContent = formattedValue + suffix;
|
|
|
- element.className = 'value ' + (value > 0 ? 'positive' : value < 0 ? 'negative' : '');
|
|
|
- } else {
|
|
|
- element.textContent = '--';
|
|
|
- element.className = 'value';
|
|
|
- }
|
|
|
- }
|
|
|
+ // 数据卡片相关函数已移除
|
|
|
|
|
|
function updateCharts(data, symbol) {
|
|
|
if (!data || data.length === 0) {
|
|
|
@@ -535,8 +477,6 @@
|
|
|
const item = data[dataIndex];
|
|
|
return [
|
|
|
'',
|
|
|
- `标记价格差: ${item.mark_price_diff ? item.mark_price_diff.toFixed(6) : '--'} USDT`,
|
|
|
- `价格差: ${item.price_diff ? item.price_diff.toFixed(6) : '--'} USDT`,
|
|
|
`标记价格差 (%): ${item.mark_price_diff_pct ? item.mark_price_diff_pct.toFixed(4) : '--'}%`,
|
|
|
`价格差 (%): ${item.price_diff_pct ? item.price_diff_pct.toFixed(4) : '--'}%`
|
|
|
];
|
|
|
@@ -575,32 +515,13 @@
|
|
|
data: {
|
|
|
labels: labels,
|
|
|
datasets: [
|
|
|
- {
|
|
|
- label: '标记价格差 (USDT)',
|
|
|
- data: data.map(item => item.mark_price_diff),
|
|
|
- borderColor: '#ff6384',
|
|
|
- backgroundColor: 'rgba(255, 99, 132, 0.1)',
|
|
|
- tension: 0.1,
|
|
|
- pointRadius: 0,
|
|
|
- yAxisID: 'y'
|
|
|
- },
|
|
|
- {
|
|
|
- label: '价格差 (USDT)',
|
|
|
- data: data.map(item => item.price_diff),
|
|
|
- borderColor: '#36a2eb',
|
|
|
- backgroundColor: 'rgba(54, 162, 235, 0.1)',
|
|
|
- tension: 0.1,
|
|
|
- pointRadius: 0,
|
|
|
- yAxisID: 'y'
|
|
|
- },
|
|
|
{
|
|
|
label: '标记价格差 (%)',
|
|
|
data: data.map(item => item.mark_price_diff_pct),
|
|
|
borderColor: '#ffce56',
|
|
|
backgroundColor: 'rgba(255, 206, 86, 0.1)',
|
|
|
tension: 0.1,
|
|
|
- pointRadius: 0,
|
|
|
- yAxisID: 'y1'
|
|
|
+ pointRadius: 0
|
|
|
},
|
|
|
{
|
|
|
label: '价格差 (%)',
|
|
|
@@ -608,8 +529,7 @@
|
|
|
borderColor: '#4bc0c0',
|
|
|
backgroundColor: 'rgba(75, 192, 192, 0.1)',
|
|
|
tension: 0.1,
|
|
|
- pointRadius: 0,
|
|
|
- yAxisID: 'y1'
|
|
|
+ pointRadius: 0
|
|
|
}
|
|
|
]
|
|
|
},
|
|
|
@@ -667,23 +587,10 @@
|
|
|
y: {
|
|
|
type: 'linear',
|
|
|
display: true,
|
|
|
- position: 'left',
|
|
|
- title: {
|
|
|
- display: true,
|
|
|
- text: '价格差 (USDT)'
|
|
|
- }
|
|
|
- },
|
|
|
- y1: {
|
|
|
- type: 'linear',
|
|
|
- display: true,
|
|
|
- position: 'right',
|
|
|
title: {
|
|
|
display: true,
|
|
|
text: '价格差 (%)'
|
|
|
- },
|
|
|
- grid: {
|
|
|
- drawOnChartArea: false,
|
|
|
- },
|
|
|
+ }
|
|
|
},
|
|
|
x: {
|
|
|
title: {
|