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