fish/trade
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

手动打分页改为按品种选择,日期限定主力合约范围,结果自动滚动到视图

Browse Source 
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
fish
2026-05-03 16:40:15 +08:00
parent fd1c1c7330
commit 44909f04e2
6 changed files with 167 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
web/frontend/src/api/run.ts
View File

@@ -19,6 +19,19 @@ export interface RunResponse {
signal: string
}
export interface ActiveContract {
symbol: string
ts_code: string
min_date: string
max_date: string
}
export function runPipeline(req: RunRequest) {
return client.post<RunResponse>('/run', req).then((r) => r.data)
}
export function getActiveContract(symbol: string) {
return client
.get<ActiveContract>('/contracts/active', { params: { symbol } })
.then((r) => r.data)
}

152
web/frontend/src/views/RunView.vue
View File

@@ -1,47 +1,79 @@
<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import { nextTick, onMounted, reactive, ref, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { listContracts } from '@/api/scores'
import { runPipeline, type RunResponse } from '@/api/run'
import {
runPipeline,
getActiveContract,
type ActiveContract,
type RunResponse,
} from '@/api/run'
import { parseTsCode } from '@/utils/contract'
const SYMBOLS = ['FG', 'SA', 'RB', 'MA', 'CF', 'M']
const form = reactive<{
ts_code: string
symbol: string
trade_date: string
}>({
ts_code: '',
symbol: 'FG',
trade_date: '',
})
const contracts = ref<string[]>([])
const active = ref<ActiveContract | null>(null)
const activeLoading = ref(false)
const loading = ref(false)
const result = ref<RunResponse | null>(null)
const resultRef = ref<HTMLElement | null>(null)
async function loadActive() {
activeLoading.value = true
try {
active.value = await getActiveContract(form.symbol)
// 切换品种后,如果原日期落在新合约的可选范围之外,清空它
if (form.trade_date && !isDateAllowed(toDate(form.trade_date))) {
form.trade_date = ''
}
} catch (err: any) {
active.value = null
ElMessage.error(err?.response?.data?.error || '加载主力合约失败')
} finally {
activeLoading.value = false
}
}
function toDate(s: string) {
// s 形如 'YYYY-MM-DD'
const [y, m, d] = s.split('-').map(Number)
return new Date(y, m - 1, d)
}
function isDateAllowed(d: Date): boolean {
if (!active.value) return true
const min = toDate(active.value.min_date).getTime()
const max = toDate(active.value.max_date).getTime()
const t = d.getTime()
return t >= min && t <= max
}
function disabledDate(d: Date) {
return !isDateAllowed(d)
}
async function submit() {
if (!form.ts_code && !form.symbol) {
ElMessage.warning('请选择合约或填写品种代号')
if (!form.symbol) {
ElMessage.warning('请选择品种')
return
}
loading.value = true
result.value = null
try {
const req: { ts_code?: string; symbol?: string; trade_date?: string } = {}
if (form.ts_code) {
req.ts_code = form.ts_code
} else {
req.symbol = form.symbol
}
if (form.trade_date) {
req.trade_date = form.trade_date.replace(/-/g, '')
}
const req: { symbol: string; trade_date?: string } = { symbol: form.symbol }
if (form.trade_date) req.trade_date = form.trade_date.replace(/-/g, '')
const resp = await runPipeline(req)
result.value = resp
ElMessage.success('打分完成')
await nextTick()
resultRef.value?.scrollIntoView({ behavior: 'smooth', block: 'start' })
} catch (err: any) {
const msg = err?.response?.data?.error || err.message || '请求失败'
ElMessage.error(msg)
@@ -58,77 +90,73 @@ function signalTagType(s: string) {
return 'info'
}
onMounted(async () => {
contracts.value = await listContracts().catch(() => [])
})
watch(() => form.symbol, loadActive)
onMounted(loadActive)
</script>
<template>
<div class="page">
<el-card shadow="never" title="手动打分">
<el-card shadow="never">
<template #header>
<span>手动打分</span>
</template>
<el-form :model="form" label-width="100px" style="max-width: 480px">
<el-form-item label="合约">
<el-select
v-model="form.ts_code"
placeholder="选择已有合约(优先)"
clearable
filterable
style="width: 100%"
>
<el-option
v-for="c in contracts"
:key="c"
:label="c"
:value="c"
/>
</el-select>
</el-form-item>
<el-form-item label="品种">
<el-select v-model="form.symbol" style="width: 100%">
<el-select v-model="form.symbol" :loading="activeLoading" style="width: 100%">
<el-option v-for="s in SYMBOLS" :key="s" :label="s" :value="s" />
</el-select>
</el-form-item>
<el-form-item label="主力合约">
<span v-if="active">
{{ parseTsCode(active.ts_code).contract }}
<el-text type="info" size="small" style="margin-left: 8px">
({{ active.ts_code }})
</el-text>
</span>
<el-text v-else type="info">加载中…</el-text>
</el-form-item>
<el-form-item label="打分日期">
<el-date-picker
v-model="form.trade_date"
type="date"
placeholder="留空则对最新日期打分"
:placeholder="active ? `${active.min_date} ~ ${active.max_date},留空则取最新` : '加载中…'"
value-format="YYYY-MM-DD"
:disabled-date="disabledDate"
:disabled="!active"
style="width: 100%"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" :loading="loading" @click="submit">
<el-button type="primary" :loading="loading" :disabled="!active" @click="submit">
执行打分
</el-button>
</el-form-item>
</el-form>
</el-card>
<el-card v-if="result" shadow="never" class="result-card">
<template #header>
<span>打分结果</span>
</template>
<el-descriptions :column="2" border>
<el-descriptions-item label="品种">{{ parseTsCode(result.ts_code).symbol }}</el-descriptions-item>
<el-descriptions-item label="合约">{{ parseTsCode(result.ts_code).contract }}</el-descriptions-item>
<el-descriptions-item label="日期">{{ result.trade_date }}</el-descriptions-item>
<el-descriptions-item label="收盘">{{ result.close }}</el-descriptions-item>
<el-descriptions-item label="持仓">{{ result.oi }}</el-descriptions-item>
<el-descriptions-item label="短期(7d)">{{ result.short_term }}</el-descriptions-item>
<el-descriptions-item label="中期(15d)">{{ result.medium_term }}</el-descriptions-item>
<el-descriptions-item label="长期(30d)">{{ result.long_term }}</el-descriptions-item>
<el-descriptions-item label="综合">
<strong>{{ result.composite }}</strong>
</el-descriptions-item>
<el-descriptions-item label="信号" :span="2">
<el-tag :type="signalTagType(result.signal)">{{ result.signal }}</el-tag>
</el-descriptions-item>
</el-descriptions>
</el-card>
<div v-if="result" ref="resultRef">
<el-card shadow="never" class="result-card">
<template #header>
<span>打分结果</span>
</template>
<el-descriptions :column="2" border>
<el-descriptions-item label="品种">{{ parseTsCode(result.ts_code).symbol }}</el-descriptions-item>
<el-descriptions-item label="合约">{{ parseTsCode(result.ts_code).contract }}</el-descriptions-item>
<el-descriptions-item label="日期">{{ result.trade_date }}</el-descriptions-item>
<el-descriptions-item label="收盘">{{ result.close }}</el-descriptions-item>
<el-descriptions-item label="持仓">{{ result.oi }}</el-descriptions-item>
<el-descriptions-item label="短期(7d)">{{ result.short_term }}</el-descriptions-item>
<el-descriptions-item label="中期(15d)">{{ result.medium_term }}</el-descriptions-item>
<el-descriptions-item label="长期(30d)">{{ result.long_term }}</el-descriptions-item>
<el-descriptions-item label="综合">
<strong>{{ result.composite }}</strong>
</el-descriptions-item>
<el-descriptions-item label="信号" :span="2">
<el-tag :type="signalTagType(result.signal)">{{ result.signal }}</el-tag>
</el-descriptions-item>
</el-descriptions>
</el-card>
</div>
</div>
</template>