支撑位和阻力位改为逐个标注:表格用S1/R1标签,抽屉分开展示每层价位

This commit is contained in:
fish
2026-05-11 22:07:36 +08:00
parent e756c3f300
commit b91bffdb4c

View File

@@ -88,12 +88,11 @@ async function handleRun() {
}
}
function formatLevels(json: string): string {
function parseLevels(json: string): number[] {
try {
const arr = JSON.parse(json) as number[]
return arr.join(', ')
return JSON.parse(json) as number[]
} catch {
return '-'
return []
}
}
@@ -146,11 +145,17 @@ onMounted(fetchList)
</span>
</template>
</el-table-column>
<el-table-column label="支撑位" width="130">
<template #default="{ row }">{{ formatLevels(row.support) }}</template>
<el-table-column label="支撑位" width="160">
<template #default="{ row }">
<span v-for="(v, i) in parseLevels(row.support)" :key="'s'+i" class="level-chip sup">S{{ i + 1 }} {{ v }}</span>
<span v-if="!parseLevels(row.support).length">-</span>
</template>
</el-table-column>
<el-table-column label="阻力位" width="130">
<template #default="{ row }">{{ formatLevels(row.resistance) }}</template>
<el-table-column label="阻力位" width="160">
<template #default="{ row }">
<span v-for="(v, i) in parseLevels(row.resistance)" :key="'r'+i" class="level-chip res">R{{ i + 1 }} {{ v }}</span>
<span v-if="!parseLevels(row.resistance).length">-</span>
</template>
</el-table-column>
<el-table-column label="明细" width="80" align="center">
<template #default="{ row }">
@@ -172,17 +177,25 @@ onMounted(fetchList)
</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 class="drawer-label">支撑</div>
<div class="level-rows">
<div v-for="(v, i) in parseLevels(selectedRow.support)" :key="'ds'+i" class="level-row sup">
<span class="level-tag">支撑{{ i + 1 }}</span>
<span class="level-val">{{ v }}</span>
</div>
<div class="level-block resistance">
<span class="level-tag">阻力</span>
<span>{{ formatLevels(selectedRow.resistance) || '-' }}</span>
<div v-if="!parseLevels(selectedRow.support).length" class="level-row">-</div>
</div>
</div>
<div class="drawer-section">
<div class="drawer-label">阻力位</div>
<div class="level-rows">
<div v-for="(v, i) in parseLevels(selectedRow.resistance)" :key="'dr'+i" class="level-row res">
<span class="level-tag">阻力{{ i + 1 }}</span>
<span class="level-val">{{ v }}</span>
</div>
<div v-if="!parseLevels(selectedRow.resistance).length" class="level-row">-</div>
</div>
</div>
<div class="drawer-section">
@@ -219,13 +232,31 @@ onMounted(fetchList)
font-size: 18px;
}
.level-chip {
display: inline-block;
font-size: 12px;
padding: 1px 6px;
border-radius: 3px;
margin-right: 4px;
margin-bottom: 2px;
font-weight: 600;
}
.level-chip.sup {
background: #ecf5ff;
color: #409eff;
}
.level-chip.res {
background: #fef0f0;
color: #f56c6c;
}
.drawer-section {
margin-bottom: 20px;
}
.drawer-label {
font-size: 13px;
color: var(--el-text-color-secondary);
margin-bottom: 6px;
margin-bottom: 8px;
}
.drawer-confidence {
margin-left: 12px;
@@ -241,29 +272,39 @@ onMounted(fetchList)
.drawer-text.risk {
color: var(--el-color-warning);
}
.drawer-levels {
.level-rows {
display: flex;
gap: 24px;
flex-direction: column;
gap: 8px;
}
.level-block {
.level-row {
display: flex;
align-items: center;
gap: 8px;
gap: 12px;
}
.level-tag {
font-size: 12px;
padding: 2px 8px;
padding: 2px 10px;
border-radius: 4px;
font-weight: 600;
min-width: 54px;
text-align: center;
}
.support .level-tag {
.level-row.sup .level-tag {
background: #ecf5ff;
color: #409eff;
}
.resistance .level-tag {
.level-row.res .level-tag {
background: #fef0f0;
color: #f56c6c;
}
.level-val {
font-size: 20px;
font-weight: 700;
color: var(--el-text-color-primary);
}
.drawer-section.meta {
margin-top: 24px;
padding-top: 16px;