sxbh_admin/cma-management
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): 第二轮P1 — scoped样式/mc-dialog暗黑适配/空状态/字号变量

Browse Source
This commit is contained in:
Hermes CI Fix
2026-07-17 16:55:09 +08:00
parent c82bd5b40f
commit c68bdd1e1d
12 changed files with 159 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/KPIDetail.vue
+20 -9
View File
@@ -6,10 +6,10 @@
</div>
<el-card v-if="kpi" style="margin-top:16px;">
<template #header>
<span style="font-size:16px;font-weight:600;">{{ kpi.kpi_name }}</span>
<el-tag size="small" style="margin-left:8px;">{{ kpi.kpi_code }}</el-tag>
<el-tag v-if="kpi.dimension" :type="dimTagType(kpi.dimension)" size="small" style="margin-left:4px;">{{ dimLabel(kpi.dimension) }}</el-tag>
<el-tag v-if="kpi.category" type="info" size="small" style="margin-left:4px;">{{ catLabel(kpi.category) }}</el-tag>
<span class="header-title">{{ kpi.kpi_name }}</span>
<el-tag size="small" class="header-tag">{{ kpi.kpi_code }}</el-tag>
<el-tag v-if="kpi.dimension" :type="dimTagType(kpi.dimension)" size="small" class="header-tag-gap">{{ dimLabel(kpi.dimension) }}</el-tag>
<el-tag v-if="kpi.category" type="info" size="small" class="header-tag-gap">{{ catLabel(kpi.category) }}</el-tag>
</template>
<el-tabs v-model="activeTab">
@@ -82,8 +82,8 @@
</el-tab-pane>
<el-tab-pane label="历史数据" name="history">
<v-chart :option="chartOption" autoresize style="height:300px;width:100%;" />
<el-table :data="values" size="small" style="width:100%;margin-top:12px;">
<v-chart :option="chartOption" autoresize class="full-width-chart" />
<el-table :data="values" size="small" class="data-table">
<el-table-column prop="period" label="期间" width="120" />
<el-table-column prop="actual_value" label="实际值" width="120" />
<el-table-column prop="source_type" label="来源" width="80" />
@@ -99,7 +99,7 @@
<el-col :span="12">
<el-card shadow="never">
<template #header><b>上游驱动</b>（影响本KPI的因子）</template>
<div v-if="upstream.length === 0" style="color:#999;text-align:center;padding:20px;">无上游驱动</div>
<div v-if="upstream.length === 0" class="network-empty">无上游驱动</div>
<el-timeline v-else>
<el-timeline-item v-for="item in upstream" :key="item.kpi_id"
:color="item.direction === 'positive' ? 'var(--bsc-process)' : 'var(--bsc-finance)'"
@@ -116,7 +116,7 @@
<el-col :span="12">
<el-card shadow="never">
<template #header><b>下游影响</b>（本KPI影响的指标）</template>
<div v-if="downstream.length === 0" style="color:#999;text-align:center;padding:20px;">无下游影响</div>
<div v-if="downstream.length === 0" class="network-empty">无下游影响</div>
<el-timeline v-else>
<el-timeline-item v-for="item in downstream" :key="item.kpi_id"
:color="item.direction === 'positive' ? 'var(--bsc-process)' : 'var(--bsc-finance)'"
@@ -196,7 +196,7 @@
<el-dialog v-model="showFullNetwork" title="全局因果网络图" :width="900" top="5vh">
<div v-loading="fullNetworkLoading" style="height:550px;">
<v-chart v-if="fullNetworkNodes.length > 0" :option="fullNetworkChartOption" autoresize style="height:550px;width:100%;" />
<div v-else style="text-align:center;padding:40px;color:#999;">加载中...</div>
<div v-else class="full-network-loading">加载中...</div>
</div>
<template #footer>
<el-button @click="showFullNetwork = false">关闭</el-button>
@@ -534,3 +534,14 @@ async function associateMap() {
function onMapChange(val: any) {}
</script>
<style scoped>
.kpi-detail-page { }
.kpi-detail-page .header-card .header-title { font-size: 16px; font-weight: 600; }
.kpi-detail-page .header-card .header-tag { margin-left: 8px; }
.kpi-detail-page .header-card .header-tag-gap { margin-left: 4px; }
.full-width-chart { height: 300px; width: 100%; }
.data-table { width: 100%; margin-top: 12px; }
.network-empty { color: #999; text-align: center; padding: 20px; }
.full-network-loading { text-align: center; padding: 40px; color: #999; }
</style>