共同富裕成果年度报告 — 前端技术方案
依据：共同富裕成果年度报告功能需求.md、共同富裕成果年度报告技术方案.md；布局对齐 共同富裕成果年度报告.png；请求字段 小驼峰。
1. 页面与路由
| 项 |
说明 |
| Vue 路径 |
ruoyi-ui/src/views/commonProsperity/achievementReport/index.vue |
| 组件名 |
CommonProsperityAchievementReport |
| 菜单配置 |
若依「菜单管理」组件路径：commonProsperity/achievementReport/index |
| 权限标识 |
commonProsperity:achievementReport:query（只读，无增删改按钮） |
2. API 模块
| 项 |
说明 |
| 文件 |
ruoyi-ui/src/api/commonProsperity/achievementReport.js |
| 方法 |
getAchievementAnnualReport(statYear) → GET /commonProsperity/achievementReport |
| 可选 |
getAchievementReportYears() → GET /commonProsperity/achievementReport/years（年份选择器可仅用 el-date-picker type="year"，不强制调此接口） |
响应使用：data.hasData、data.summary（12 项年度汇总）、data.monthly（长度 12，缺月指标为 0）。
3. 页面结构
- 筛选区：
el-card + 统计年份 el-date-picker（value-format="yyyy"），变更后重新请求。
- 空态：
hasData === false 时 el-empty，文案引导至「共同富裕成果」台账。
- 共富成果总览：11 张指标卡片（
el-row / el-col，大屏约 6+5 列），数值带单位；指标名称复用 commonProsperity.achievement.*。
- 图表区（两行 × 三列）：ECharts
macarons 主题，高度约 320px。
| 区块 |
图表类型 |
数据字段 |
| 集体经济收入对比 |
横向柱状 |
collectiveEconomyIncome |
| 就业带动 |
双折线 |
employmentDrivenCount、newJobPositions |
| 环境治理 |
柱状 |
envProjectCount |
| 绿化建设 |
折线 |
newGreenArea |
| 文化传承 |
柱状 |
culturalHeritageCount |
| 民族团结 |
堆叠柱状 |
ethnicIntegrationProjectCount、ethnicUnityActivityCount |
横轴固定 1～12 月；monthly 缺月由后端补 0，前端 seriesByField 再兜底为 0。
4. 国际化
| 项 |
说明 |
| 语言包 |
commonProsperity.achievementReport（图表标题、空态、月份 {m}月 等） |
| 指标名 |
复用 commonProsperity.achievement（cpAch） |
| Mixin |
commonProsperityLocaleMixin，data.cpNs = 'achievementReport' |
5. 交互与实现要点
- 进入页默认 当前自然年；
v-loading 包裹整页，切换年份先 dispose 再请求，避免图表残留。
window.resize + debounce 调用各图表 resize()。
- 比率类总览展示为 百分比（
×100 + %），与成果台账列表一致。
- 本页 不提供 台账 CRUD；数据维护在
commonProsperity/achievement/index。
6. 联调说明
- 后端实现
AchievementReportController 及 GET /commonProsperity/achievementReport。
- 配置菜单与
commonProsperity:achievementReport:query 权限。
- 成果表有测试数据后，
hasData=true 应出现总览与 6 图；全年无记录走空态。
- 缺月、年度汇总口径以后端为准，前端仅展示接口返回值。
7. 修订记录
| 版本 |
说明 |
| 1.0 |
初版：单页 + ECharts 六图 + 11 指标卡片；对齐原型布局 |
