63 lines
2.1 KiB
Vue
63 lines
2.1 KiB
Vue
<script setup lang="ts">
|
|
import { ref, onMounted } from 'vue'
|
|
import { useRoute } from 'vue-router'
|
|
import {
|
|
getEquity, getTrades, getStrategies,
|
|
type BalancePoint, type PaperTrade, type StrategySummary,
|
|
} from '@/api/paper'
|
|
|
|
const route = useRoute()
|
|
const aid = Number(route.params.id)
|
|
const equity = ref<BalancePoint[]>([])
|
|
const trades = ref<PaperTrade[]>([])
|
|
const strategies = ref<StrategySummary[]>([])
|
|
|
|
onMounted(async () => {
|
|
equity.value = await getEquity(aid)
|
|
trades.value = await getTrades(aid)
|
|
strategies.value = await getStrategies(aid)
|
|
})
|
|
|
|
function rowClass({ row }: { row: PaperTrade }): string {
|
|
return row.rejected ? 'rejected-row' : ''
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<el-card header="账户净值" style="margin-bottom: 16px">
|
|
<el-table :data="equity" size="small" max-height="240">
|
|
<el-table-column prop="date" label="日期" />
|
|
<el-table-column prop="total_equity" label="总净值" />
|
|
<el-table-column prop="cash" label="现金" />
|
|
<el-table-column prop="market_value" label="市值" />
|
|
</el-table>
|
|
</el-card>
|
|
<el-card header="分策略归因" style="margin-bottom: 16px">
|
|
<el-table :data="strategies" size="small">
|
|
<el-table-column prop="strategy_id" label="策略" />
|
|
<el-table-column prop="filled" label="成交" />
|
|
<el-table-column prop="rejected" label="拒单" />
|
|
<el-table-column prop="commission" label="费用" />
|
|
</el-table>
|
|
</el-card>
|
|
<el-card header="成交明细（拒单高亮）">
|
|
<el-table :data="trades" size="small" :row-class-name="rowClass">
|
|
<el-table-column prop="bar_date" label="日期" />
|
|
<el-table-column prop="strategy_id" label="策略" />
|
|
<el-table-column prop="symbol" label="标的" />
|
|
<el-table-column prop="direction" label="方向" />
|
|
<el-table-column prop="price" label="价格" />
|
|
<el-table-column prop="volume" label="数量" />
|
|
<el-table-column prop="reject_reason" label="拒因" />
|
|
</el-table>
|
|
</el-card>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
:deep(.rejected-row) {
|
|
color: #f56c6c;
|
|
}
|
|
</style>
|