# 共同富裕成果年度报告 — 前端技术方案

> 依据：`共同富裕成果年度报告功能需求.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`（长度 = 该年最大月，缺月指标为 0）。

---

## 3. 页面结构

1. **筛选区**：`el-card` + 统计年份 `el-date-picker`（`value-format="yyyy"`），变更后重新请求。  
2. **空态**：`hasData === false` 时 `el-empty`，文案引导至「共同富裕成果」台账。  
3. **共富成果总览**：11 张指标卡片（`el-row` / `el-col`，大屏约 6+5 列），数值带单位；指标名称复用 `commonProsperity.achievement.*`。  
4. **图表区（两行 × 三列）**：ECharts `macarons` 主题，高度约 320px。  

| 区块 | 图表类型 | 数据字段 |
| --- | --- | --- |
| 集体经济收入对比 | 横向柱状 | `collectiveEconomyIncome` |
| 就业带动 | 双折线 | `employmentDrivenCount`、`newJobPositions` |
| 环境治理 | 柱状 | `envProjectCount` |
| 绿化建设 | 折线 | `newGreenArea` |
| 文化传承 | 柱状 | `culturalHeritageCount` |
| 民族团结 | 堆叠柱状 | `ethnicIntegrationProjectCount`、`ethnicUnityActivityCount` |

横轴为 **1～该年最大统计月**；`monthly` 缺月由后端补 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. 联调说明

1. 后端实现 `AchievementReportController` 及 `GET /commonProsperity/achievementReport`。  
2. 配置菜单与 `commonProsperity:achievementReport:query` 权限。  
3. 成果表有测试数据后，`hasData=true` 应出现总览与 6 图；全年无记录走空态。  
4. 缺月、年度汇总口径以后端为准，前端仅展示接口返回值。

---

## 7. 修订记录

| 版本 | 说明 |
| --- | --- |
| 1.0 | 初版：单页 + ECharts 六图 + 11 指标卡片；对齐原型布局 |