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/BIReportCenter.vue
+20 -8
View File
@@ -14,16 +14,16 @@
<el-row :gutter="16">
<el-col v-for="tpl in templates" :key="tpl.id" :span="24 / templates.length || 1">
<el-card shadow="hover" :body-style="{ padding: '16px', cursor: 'pointer' }" @click="useTemplate(tpl)">
<div style="text-align:center;">
<div style="font-size:32px;margin-bottom:8px;">
<div class="tpl-card-body">
<div class="tpl-icon">
<span v-if="tpl.report_type === 'overview'">📊</span>
<span v-else-if="tpl.report_type === 'trend'">📈</span>
<span v-else-if="tpl.report_type === 'comparison'">📋</span>
<span v-else-if="tpl.report_type === 'topn'">🔝</span>
<span v-else>🔗</span>
</div>
<div style="font-weight:600;">{{ tpl.name }}</div>
<div style="font-size:12px;color:#999;margin-top:4px;">{{ tpl.config?.description || '' }}</div>
<div class="tpl-name">{{ tpl.name }}</div>
<div class="tpl-desc">{{ tpl.config?.description || '' }}</div>
</div>
</el-card>
</el-col>
@@ -33,7 +33,7 @@
<!-- 分析引擎 -->
<el-card v-if="analysisResult" shadow="never" class="section-gap">
<template #header>
<div style="display:flex;justify-content:space-between;align-items:center;">
<div class="card-header-flex">
<span>{{ currentReportName }}</span>
<div>
<el-button size="small" @click="showSaveDialog = true">保存报表</el-button>
@@ -44,10 +44,10 @@
</template>
<!-- 图表区域 -->
<v-chart :option="analysisChartOption" autoresize style="height:350px;width:100%;" />
<v-chart :option="analysisChartOption" autoresize class="bi-chart" />
<!-- 数据表格 -->
<el-table :data="analysisResult.rows" size="small" border style="width:100%;margin-top:12px;" max-height="400">
<el-table :data="analysisResult.rows" size="small" border class="bi-data-table" max-height="400">
<el-table-column prop="kpi_code" label="编码" width="100" />
<el-table-column prop="kpi_name" label="KPI名称" min-width="150" />
<el-table-column prop="dimension" label="维度" width="80">
@@ -77,6 +77,7 @@
</template>
</el-table-column>
</el-table>
<el-empty v-if="!loading && reports.length === 0" description="暂无已保存报表" />
</el-card>
<!-- 模板选择对话框 -->
@@ -110,7 +111,7 @@
</el-checkbox-group>
</el-form-item>
<el-form-item label="图表类型">
<el-select v-model="chartType" style="width:100%">
<el-select v-model="chartType" class="full-width-select">
<el-option label="自动" value="auto" />
<el-option label="柱状图" value="bar" />
<el-option label="折线图" value="line" />
@@ -312,3 +313,14 @@ function exportData() {
onMounted(() => { loadData() })
</script>
<style scoped>
.card-header-flex { display: flex; justify-content: space-between; align-items: center; }
.tpl-card-body { text-align: center; }
.tpl-icon { font-size: 32px; margin-bottom: 8px; }
.tpl-name { font-weight: 600; }
.tpl-desc { font-size: 12px; color: #999; margin-top: 4px; }
.bi-chart { height: 350px; width: 100%; }
.bi-data-table { width: 100%; margin-top: 12px; }
.full-width-select { width: 100%; }
</style>