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

日内方向分析详情改用抽屉面板展示，点击表格行查看完整逻辑与风险提示

Browse Source
This commit is contained in:
fish
2026-05-11 21:39:21 +08:00
parent 5c30bfa472
commit bd48887b88
1 changed files with 118 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

127
web/frontend/src/views/DailyDirectionView.vue
View File

@@ -14,6 +14,8 @@ const loading = ref(false)
const running = ref(false)
const runStep = ref('')
const runResult = ref<DailyDirectionRunResponse | null>(null)
const selectedRow = ref<DailyDirection | null>(null)
const drawerOpen = ref(false)
const symbolNames: Record<string, string> = {
FG: '玻璃', SA: '纯碱', RB: '螺纹钢', MA: '甲醇', CF: '棉花', M: '豆粕',
@@ -46,6 +48,12 @@ const runSummary = computed(() => {
return parts.join(' | ')
})
const drawerTitle = computed(() => {
if (!selectedRow.value) return ''
const name = symbolNames[selectedRow.value.symbol] ?? selectedRow.value.symbol
return `${name}(${selectedRow.value.symbol}) · ${selectedRow.value.trade_date}`
})
async function fetchList() {
loading.value = true
try {
@@ -89,6 +97,11 @@ function formatLevels(json: string): string {
}
}
function openDrawer(row: DailyDirection) {
selectedRow.value = row
drawerOpen.value = true
}
onMounted(fetchList)
</script>
@@ -101,7 +114,6 @@ onMounted(fetchList)
</el-button>
</div>
<!-- 运行结果摘要 -->
<el-alert
v-if="runResult"
:title="`${runResult.trade_date} 分析结果`"
@@ -112,8 +124,7 @@ onMounted(fetchList)
style="margin-bottom: 16px"
/>
<!-- 表格 -->
<el-table :data="items" stripe v-loading="loading" empty-text="暂无数据，请先执行分析">
<el-table :data="items" stripe v-loading="loading" empty-text="暂无数据，请先执行分析" highlight-current-row @row-click="openDrawer">
<el-table-column prop="symbol" label="品种" width="80">
<template #default="{ row }">
{{ symbolNames[row.symbol] ?? row.symbol }}
@@ -128,22 +139,65 @@ onMounted(fetchList)
</el-tag>
</template>
</el-table-column>
<el-table-column prop="confidence" label="置信度" width="90">
<el-table-column prop="confidence" label="置信度" width="90" align="center">
<template #default="{ row }">
<span :style="{ color: row.confidence >= 70 ? '#67c23a' : row.confidence >= 50 ? '#e6a23c' : '#f56c6c' }">
<span :style="{ color: row.confidence >= 70 ? '#67c23a' : row.confidence >= 50 ? '#e6a23c' : '#f56c6c', fontWeight: 'bold' }">
{{ row.confidence }}%
</span>
</template>
</el-table-column>
<el-table-column label="支撑位" width="120">
<el-table-column label="支撑位" width="130">
<template #default="{ row }">{{ formatLevels(row.support) }}</template>
</el-table-column>
<el-table-column label="阻力位" width="120">
<el-table-column label="阻力位" width="130">
<template #default="{ row }">{{ formatLevels(row.resistance) }}</template>
</el-table-column>
<el-table-column prop="reasoning" label="分析逻辑" min-width="280" show-overflow-tooltip />
<el-table-column prop="risk_note" label="风险提示" min-width="160" show-overflow-tooltip />
<el-table-column prop="reasoning" label="分析逻辑" min-width="200" show-overflow-tooltip />
<el-table-column prop="risk_note" label="风险提示" min-width="120" show-overflow-tooltip />
</el-table>
<el-drawer v-model="drawerOpen" :title="drawerTitle" size="480px" direction="rtl">
<template v-if="selectedRow">
<div class="drawer-section">
<div class="drawer-label">方向判断</div>
<el-tag :type="directionType(selectedRow.direction)" size="default">
{{ directionLabel(selectedRow.direction) }}
</el-tag>
<span class="drawer-confidence" :style="{ color: selectedRow.confidence >= 70 ? '#67c23a' : selectedRow.confidence >= 50 ? '#e6a23c' : '#f56c6c' }">
置信度 {{ selectedRow.confidence }}%
</span>
</div>
<div class="drawer-section">
<div class="drawer-label">关键价位</div>
<div class="drawer-levels">
<div class="level-block support">
<span class="level-tag">支撑</span>
<span>{{ formatLevels(selectedRow.support) || '-' }}</span>
</div>
<div class="level-block resistance">
<span class="level-tag">阻力</span>
<span>{{ formatLevels(selectedRow.resistance) || '-' }}</span>
</div>
</div>
</div>
<div class="drawer-section">
<div class="drawer-label">分析逻辑</div>
<div class="drawer-text">{{ selectedRow.reasoning || '-' }}</div>
</div>
<div class="drawer-section">
<div class="drawer-label">风险提示</div>
<div class="drawer-text risk">{{ selectedRow.risk_note || '-' }}</div>
</div>
<div class="drawer-section meta">
<span>分析日期：{{ selectedRow.trade_date }}</span>
<span>目标交易日：{{ selectedRow.target_date }}</span>
</div>
</template>
</el-drawer>
</div>
</template>
@@ -161,4 +215,59 @@ onMounted(fetchList)
margin: 0;
font-size: 18px;
}
.drawer-section {
margin-bottom: 20px;
}
.drawer-label {
font-size: 13px;
color: var(--el-text-color-secondary);
margin-bottom: 6px;
}
.drawer-confidence {
margin-left: 12px;
font-size: 16px;
font-weight: bold;
}
.drawer-text {
font-size: 15px;
line-height: 1.8;
white-space: pre-wrap;
color: var(--el-text-color-primary);
}
.drawer-text.risk {
color: var(--el-color-warning);
}
.drawer-levels {
display: flex;
gap: 24px;
}
.level-block {
display: flex;
align-items: center;
gap: 8px;
}
.level-tag {
font-size: 12px;
padding: 2px 8px;
border-radius: 4px;
font-weight: 600;
}
.support .level-tag {
background: #ecf5ff;
color: #409eff;
}
.resistance .level-tag {
background: #fef0f0;
color: #f56c6c;
}
.drawer-section.meta {
margin-top: 24px;
padding-top: 16px;
border-top: 1px solid var(--el-border-color-light);
display: flex;
gap: 24px;
font-size: 13px;
color: var(--el-text-color-secondary);
}
</style>