131 lines
3.8 KiB
Vue
131 lines
3.8 KiB
Vue
<script setup lang="ts">
|
|
import { DataAnalysis } from '@element-plus/icons-vue'
|
|
import { computed } from 'vue'
|
|
import PageContainer from '@/components/PageContainer.vue'
|
|
import { useAnalysisContext } from '@/composables/useAnalysisContext'
|
|
import { buildComprehensiveInsightRows, groupInsightsByDimension, type InsightDimension } from '@/lib/comprehensive-insights'
|
|
|
|
const { context, loading, reload } = useAnalysisContext()
|
|
|
|
const rows = computed(() => (context.value ? buildComprehensiveInsightRows(context.value) : []))
|
|
|
|
const grouped = computed(() => (context.value ? groupInsightsByDimension(rows.value) : null))
|
|
|
|
const dimensionOrder: InsightDimension[] = ['合规', '质量', '营销', '事件实质']
|
|
|
|
const docHint =
|
|
'结论由当前 mock 数据与规则自动生成，用于联席复盘；正式环境可接规则引擎与人工批注。口径详见《综合分析》与各维度落地文。'
|
|
</script>
|
|
|
|
<template>
|
|
<PageContainer @refresh="reload">
|
|
<div v-loading="loading" class="comp-inner">
|
|
<div class="page-header">
|
|
<div class="header-content">
|
|
<div class="header-left">
|
|
<h2 class="page-title">
|
|
<el-icon><DataAnalysis /></el-icon>
|
|
综合分析
|
|
</h2>
|
|
<p class="page-description">
|
|
汇总合规、质量、营销、事件实质各页已实现图表的<strong>读数结论</strong>（列表）。{{ docHint }}
|
|
</p>
|
|
<p class="comp-meta">落地说明文档：仓库内《分析策略/综合分析.md》。</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<el-alert
|
|
type="info"
|
|
:closable="false"
|
|
show-icon
|
|
class="comp-alert"
|
|
title="与单图说明的关系"
|
|
description="各图卡片内的「取数范围 / 分析逻辑」描述统计口径；本页列表给出基于同一聚合结果的要点摘要，二者配合使用。"
|
|
/>
|
|
|
|
<template v-if="grouped">
|
|
<section v-for="dim in dimensionOrder" :key="dim" class="comp-section">
|
|
<h3 class="comp-dim-title">{{ dim }}维度</h3>
|
|
<el-empty v-if="!grouped[dim].length" :description="`${dim} 下暂无已接图表`" />
|
|
<el-card v-for="item in grouped[dim]" :key="item.chartId" class="main-card comp-card" shadow="never">
|
|
<template #header>
|
|
<div class="comp-card-head">
|
|
<span class="comp-page-tag">{{ item.pageTitle }}</span>
|
|
<span class="comp-chart-title">{{ item.chartTitle }}</span>
|
|
<el-tag size="small" type="info" effect="plain">{{ item.chartId }}</el-tag>
|
|
</div>
|
|
</template>
|
|
<ul class="comp-bullets">
|
|
<li v-for="(b, i) in item.bullets" :key="i">{{ b }}</li>
|
|
</ul>
|
|
</el-card>
|
|
</section>
|
|
</template>
|
|
</div>
|
|
</PageContainer>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.comp-inner {
|
|
max-width: 1100px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
min-height: 120px;
|
|
}
|
|
|
|
.comp-meta {
|
|
margin: 8px 0 0;
|
|
font-size: 12px;
|
|
color: var(--text-placeholder, var(--el-text-color-placeholder));
|
|
}
|
|
|
|
.comp-alert {
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.comp-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
|
|
.comp-dim-title {
|
|
margin: 12px 0 4px;
|
|
font-size: 17px;
|
|
border-bottom: 1px solid var(--el-border-color-light);
|
|
padding-bottom: 6px;
|
|
}
|
|
|
|
.comp-card {
|
|
border-radius: var(--border-radius-md, 10px);
|
|
}
|
|
|
|
.comp-card-head {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.comp-page-tag {
|
|
font-size: 12px;
|
|
color: var(--text-secondary, var(--el-text-color-secondary));
|
|
}
|
|
|
|
.comp-chart-title {
|
|
font-weight: 600;
|
|
font-size: 14px;
|
|
flex: 1;
|
|
min-width: 200px;
|
|
}
|
|
|
|
.comp-bullets {
|
|
margin: 0;
|
|
padding-left: 1.2em;
|
|
line-height: 1.65;
|
|
color: var(--el-text-color-regular);
|
|
}
|
|
</style>
|