update
This commit is contained in:
aaron
parent
161f9feda0
commit
cc059b726b
@ -18,13 +18,23 @@
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* 固定顶部区域 */
|
||||
.sticky-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
background: var(--bg-primary);
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.trading-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 30px;
|
||||
padding-bottom: 20px;
|
||||
margin-bottom: 20px;
|
||||
padding: 10px 0 20px 0;
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: var(--bg-primary);
|
||||
}
|
||||
|
||||
.trading-title {
|
||||
@ -57,7 +67,7 @@
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||||
gap: 16px;
|
||||
margin-bottom: 30px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
@ -453,56 +463,59 @@
|
||||
<div id="app">
|
||||
<div class="trading-page">
|
||||
<div class="trading-container">
|
||||
<!-- 头部 -->
|
||||
<div class="trading-header">
|
||||
<h1 class="trading-title">模拟交易 <span>Paper Trading</span></h1>
|
||||
<div style="display: flex; align-items: center; gap: 12px;">
|
||||
<div class="monitor-status">
|
||||
<div class="monitor-dot" :class="{ running: monitorRunning }"></div>
|
||||
<span>{{ monitorRunning ? '监控中' : '未启动' }}</span>
|
||||
</div>
|
||||
<button class="refresh-btn" @click="refreshData">刷新数据</button>
|
||||
<button class="reset-btn" @click="resetData">重置数据</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 统计卡片 -->
|
||||
<div class="stats-grid">
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">总交易数</div>
|
||||
<div class="stat-value">{{ stats.total_trades }}</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">胜率</div>
|
||||
<div class="stat-value">{{ stats.win_rate.toFixed(1) }}%</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">总盈亏</div>
|
||||
<div class="stat-value" :class="stats.total_pnl >= 0 ? 'positive' : 'negative'">
|
||||
${{ stats.total_pnl.toFixed(2) }}
|
||||
<!-- 固定顶部区域 -->
|
||||
<div class="sticky-header">
|
||||
<!-- 头部 -->
|
||||
<div class="trading-header">
|
||||
<h1 class="trading-title">模拟交易 <span>Paper Trading</span></h1>
|
||||
<div style="display: flex; align-items: center; gap: 12px;">
|
||||
<div class="monitor-status">
|
||||
<div class="monitor-dot" :class="{ running: monitorRunning }"></div>
|
||||
<span>{{ monitorRunning ? '监控中' : '未启动' }}</span>
|
||||
</div>
|
||||
<button class="refresh-btn" @click="manualRefresh">刷新数据</button>
|
||||
<button class="reset-btn" @click="resetData">重置数据</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">盈亏比</div>
|
||||
<div class="stat-value">{{ stats.profit_factor === Infinity ? '∞' : stats.profit_factor.toFixed(2) }}</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">平均盈利</div>
|
||||
<div class="stat-value positive">${{ stats.average_win.toFixed(2) }}</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">平均亏损</div>
|
||||
<div class="stat-value negative">${{ stats.average_loss.toFixed(2) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 实时价格 -->
|
||||
<div v-if="Object.keys(latestPrices).length > 0" style="margin-bottom: 20px;">
|
||||
<div class="stat-label" style="margin-bottom: 8px;">实时价格</div>
|
||||
<div class="price-list">
|
||||
<div class="price-item" v-for="(price, symbol) in latestPrices" :key="symbol">
|
||||
<span class="symbol">{{ symbol }}</span>
|
||||
<span class="price">${{ price.toLocaleString() }}</span>
|
||||
<!-- 统计卡片 -->
|
||||
<div class="stats-grid">
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">总交易数</div>
|
||||
<div class="stat-value">{{ stats.total_trades }}</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">胜率</div>
|
||||
<div class="stat-value">{{ stats.win_rate.toFixed(1) }}%</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">总盈亏</div>
|
||||
<div class="stat-value" :class="stats.total_pnl >= 0 ? 'positive' : 'negative'">
|
||||
${{ stats.total_pnl.toFixed(2) }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">盈亏比</div>
|
||||
<div class="stat-value">{{ stats.profit_factor === Infinity ? '∞' : stats.profit_factor.toFixed(2) }}</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">平均盈利</div>
|
||||
<div class="stat-value positive">${{ stats.average_win.toFixed(2) }}</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">平均亏损</div>
|
||||
<div class="stat-value negative">${{ stats.average_loss.toFixed(2) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 实时价格 -->
|
||||
<div v-if="Object.keys(latestPrices).length > 0" style="margin-bottom: 15px;">
|
||||
<div class="stat-label" style="margin-bottom: 8px;">实时价格</div>
|
||||
<div class="price-list">
|
||||
<div class="price-item" v-for="(price, symbol) in latestPrices" :key="symbol">
|
||||
<span class="symbol">{{ symbol }}</span>
|
||||
<span class="price">${{ price.toLocaleString() }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -714,7 +727,7 @@
|
||||
data() {
|
||||
return {
|
||||
activeTab: 'active',
|
||||
loading: false,
|
||||
loading: true, // 只在首次加载时为 true
|
||||
activeOrders: [],
|
||||
historyOrders: [],
|
||||
stats: {
|
||||
@ -731,14 +744,15 @@
|
||||
},
|
||||
monitorRunning: false,
|
||||
latestPrices: {},
|
||||
refreshInterval: null
|
||||
refreshInterval: null,
|
||||
isFirstLoad: true
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.refreshData();
|
||||
// 每3秒自动刷新（实时价格更新）
|
||||
// 每3秒自动刷新（静默刷新，不显示 loading）
|
||||
this.refreshInterval = setInterval(() => {
|
||||
this.refreshData();
|
||||
this.silentRefresh();
|
||||
}, 3000);
|
||||
},
|
||||
beforeUnmount() {
|
||||
@ -747,8 +761,18 @@
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async refreshData() {
|
||||
// 手动刷新（显示 loading）
|
||||
async manualRefresh() {
|
||||
this.loading = true;
|
||||
await this.refreshData();
|
||||
},
|
||||
|
||||
// 静默刷新（不显示 loading）
|
||||
async silentRefresh() {
|
||||
await this.refreshData();
|
||||
},
|
||||
|
||||
async refreshData() {
|
||||
try {
|
||||
await Promise.all([
|
||||
this.fetchActiveOrders(),
|
||||
@ -760,6 +784,7 @@
|
||||
console.error('刷新数据失败:', e);
|
||||
} finally {
|
||||
this.loading = false;
|
||||
this.isFirstLoad = false;
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user