108 lines
4.1 KiB
Vue
108 lines
4.1 KiB
Vue
<script setup lang="ts">
|
||
import { computed, ref, watch } from 'vue'
|
||
import { getScore, type Score } from '@/api/scores'
|
||
import { parseTsCode } from '@/utils/contract'
|
||
|
||
const props = defineProps<{ scoreId: number | null }>()
|
||
const emit = defineEmits<{ (e: 'close'): void }>()
|
||
|
||
const score = ref<Score | null>(null)
|
||
const loading = ref(false)
|
||
|
||
const visible = computed({
|
||
get: () => props.scoreId !== null,
|
||
set: (v) => {
|
||
if (!v) emit('close')
|
||
},
|
||
})
|
||
|
||
watch(
|
||
() => props.scoreId,
|
||
async (id) => {
|
||
if (id === null) {
|
||
score.value = null
|
||
return
|
||
}
|
||
loading.value = true
|
||
try {
|
||
score.value = await getScore(id)
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
},
|
||
)
|
||
</script>
|
||
|
||
<template>
|
||
<el-drawer v-model="visible" title="打分明细" size="640px" destroy-on-close>
|
||
<div v-loading="loading" v-if="score">
|
||
<el-descriptions :column="2" border>
|
||
<el-descriptions-item label="品种">{{ parseTsCode(score.ts_code).symbol }}</el-descriptions-item>
|
||
<el-descriptions-item label="合约">{{ parseTsCode(score.ts_code).contract }}</el-descriptions-item>
|
||
<el-descriptions-item label="日期">{{ score.trade_date }}</el-descriptions-item>
|
||
<el-descriptions-item label="收盘">{{ score.close }}</el-descriptions-item>
|
||
<el-descriptions-item label="持仓">{{ score.oi }}</el-descriptions-item>
|
||
<el-descriptions-item label="综合">
|
||
<strong>{{ score.composite.toFixed(2) }}</strong>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="信号">
|
||
<el-tag>{{ score.signal }}</el-tag>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="短期(7d × 0.4)">{{ score.short_term.toFixed(2) }}</el-descriptions-item>
|
||
<el-descriptions-item label="中期(15d × 0.35)">{{ score.medium_term.toFixed(2) }}</el-descriptions-item>
|
||
<el-descriptions-item label="长期(30d × 0.25)" :span="2">
|
||
{{ score.long_term.toFixed(2) }}
|
||
</el-descriptions-item>
|
||
</el-descriptions>
|
||
|
||
<h4 class="section">短期 7 日逐日打分</h4>
|
||
<el-table :data="score.detail?.short_details ?? []" size="small" border>
|
||
<el-table-column prop="trade_date" label="日期" width="100" />
|
||
<el-table-column prop="close" label="收盘" />
|
||
<el-table-column prop="pre_close" label="昨收" />
|
||
<el-table-column prop="oi" label="持仓" />
|
||
<el-table-column prop="oi_chg" label="持仓变化" />
|
||
<el-table-column prop="score" label="单日得分" />
|
||
</el-table>
|
||
|
||
<h4 class="section">中期(15d)细节</h4>
|
||
<el-descriptions :column="2" border v-if="score.detail?.medium_detail">
|
||
<el-descriptions-item label="价格收益率">
|
||
{{ (score.detail.medium_detail.price_return_pct * 100).toFixed(2) }}%
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="价格信号分">
|
||
{{ score.detail.medium_detail.price_signal.toFixed(2) }}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="增仓上涨日">
|
||
{{ score.detail.medium_detail.long_up_days }}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="增仓下跌日">
|
||
{{ score.detail.medium_detail.long_down_days }}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="资金意愿分" :span="2">
|
||
{{ score.detail.medium_detail.fund_signal }}
|
||
</el-descriptions-item>
|
||
</el-descriptions>
|
||
|
||
<h4 class="section">长期(30d)细节</h4>
|
||
<el-descriptions :column="2" border v-if="score.detail?.long_detail">
|
||
<el-descriptions-item label="30 日均持仓">
|
||
{{ score.detail.long_detail.avg_oi.toFixed(0) }}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="30 日前持仓">
|
||
{{ score.detail.long_detail.oi_before.toFixed(0) }}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="变化幅度" :span="2">
|
||
{{ (score.detail.long_detail.change_pct * 100).toFixed(2) }}%
|
||
</el-descriptions-item>
|
||
</el-descriptions>
|
||
</div>
|
||
</el-drawer>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.section {
|
||
margin: 18px 0 8px;
|
||
}
|
||
</style>
|