feat(ui): CMA前端UI优化P0 - BSC变量+公共类+统一标题+色值替换+内联style替换

This commit is contained in:
Hermes CI Fix
2026-07-17 16:35:54 +08:00
parent 7f0f74a6e9
commit c82bd5b40f
11 changed files with 93 additions and 54 deletions
+7 -4
View File
@@ -1,6 +1,9 @@
<template>
<div>
<el-button text @click="$router.back()">< 返回KPI字典</el-button>
<div class="page-header">
<h3 class="page-title">KPI详情</h3>
</div>
<el-card v-if="kpi" style="margin-top:16px;">
<template #header>
<span style="font-size:16px;font-weight:600;">{{ kpi.kpi_name }}</span>
@@ -99,7 +102,7 @@
<div v-if="upstream.length === 0" style="color:#999;text-align:center;padding:20px;">无上游驱动</div>
<el-timeline v-else>
<el-timeline-item v-for="item in upstream" :key="item.kpi_id"
:color="item.direction === 'positive' ? '#67c23a' : '#f56c6c'"
:color="item.direction === 'positive' ? 'var(--bsc-process)' : 'var(--bsc-finance)'"
:timestamp="'强度:' + item.strength + ' / 滞后期:' + item.lag_months + '月'">
<div><b>{{ item.kpi_name }}</b> ({{ item.kpi_code }})</div>
<div style="font-size:12px;color:#999;">
@@ -116,7 +119,7 @@
<div v-if="downstream.length === 0" style="color:#999;text-align:center;padding:20px;">无下游影响</div>
<el-timeline v-else>
<el-timeline-item v-for="item in downstream" :key="item.kpi_id"
:color="item.direction === 'positive' ? '#67c23a' : '#f56c6c'"
:color="item.direction === 'positive' ? 'var(--bsc-process)' : 'var(--bsc-finance)'"
:timestamp="'强度:' + item.strength + ' / 滞后期:' + item.lag_months + '月'">
<div><b>{{ item.kpi_name }}</b> ({{ item.kpi_code }})</div>
<div style="font-size:12px;color:#999;">
@@ -159,11 +162,11 @@
</el-table-column>
<el-table-column prop="current_value" label="当前值" width="90" />
<el-table-column prop="predicted_value" label="预测值" width="90">
<template #default="{ row }"><span style="color:#409eff;font-weight:600;">{{ row.predicted_value ?? '-' }}</span></template>
<template #default="{ row }"><span style="color:var(--bsc-customer);font-weight:600;">{{ row.predicted_value ?? '-' }}</span></template>
</el-table-column>
<el-table-column prop="change_pct" label="变化率" width="80">
<template #default="{ row }">
<span :style="{ color: row.change_pct > 0 ? '#67c23a' : '#f56c6c' }">{{ row.change_pct > 0 ? '+' : '' }}{{ row.change_pct }}%</span>
<span :style="{ color: row.change_pct > 0 ? 'var(--bsc-process)' : 'var(--bsc-finance)' }">{{ row.change_pct > 0 ? '+' : '' }}{{ row.change_pct }}%</span>
</template>
</el-table-column>
<el-table-column prop="path_strength" label="传递强度" width="80" />