116 lines
4.4 KiB
Markdown
116 lines
4.4 KiB
Markdown
# 财务与风险看板卡片重组
|
||
|
||
## 功能一句话
|
||
|
||
将财务看板的预算执行率合并进预算指标卡片，并重组风险看板尾部卡片，让异常排行和风险占比成为主要分析信息。
|
||
|
||
## 背景与问题
|
||
|
||
当前分析看板存在两个体验问题：
|
||
|
||
- 财务看板底部同时有“预算指标”和“预算执行率（本月）”两个预算卡片，信息相近但占用两块空间。
|
||
- 风险看板中“算法闭环效果”和“近期高风险观察”对当前看板判断价值较低；“来源分布”展示 `unknown` 时会让用户误以为数据异常，实际用户想看每类风险占比。
|
||
|
||
## 目标与非目标
|
||
|
||
目标：
|
||
|
||
- 将预算执行率仪表图整合进“预算指标”卡片，取消单独的预算执行率卡片，并把整合后的预算指标卡放在“高额单据”右侧空白位。
|
||
- 风险看板把“来源分布”改为“风险占比”，展示风险信号或风险类型占比。
|
||
- 风险看板移除“算法闭环效果”和“近期高风险观察”卡片。
|
||
- 异常排行重新设计为占满整张卡片的图表化内容，减少碎片列表感。
|
||
|
||
非目标：
|
||
|
||
- 不改后端接口，不新增风险或预算接口。
|
||
- 不改顶部 KPI 和风险趋势图数据口径。
|
||
- 不引入新的图表库，继续复用现有 `DonutChart`、`BarChart` 和 `GaugeChart`。
|
||
|
||
## 用户与场景
|
||
|
||
用户：
|
||
|
||
- 财务分析人员、风险复核人员、管理员。
|
||
|
||
场景：
|
||
|
||
- 财务人员查看预算指标时，一眼看到预算执行率、预算总额、已用和剩余额度。
|
||
- 风险人员查看风险看板时，优先看到风险类型占比和异常维度排行，而不是来源未知或低价值尾部卡片。
|
||
|
||
## 功能能力
|
||
|
||
财务看板：
|
||
|
||
- “预算指标”卡片包含预算执行率仪表图和预算指标列表，桌面端与“高额单据”同处底部半宽行，避免预算信息独占新行造成留白。
|
||
- `budgetSummary` 仍作为仪表图数据源。
|
||
- `budgetMetrics` 仍作为指标列表数据源。
|
||
- 单独 `budget-panel` 不再渲染。
|
||
|
||
风险看板：
|
||
|
||
- “来源分布”改为“风险占比”，数据来自 `signalDistribution` 或 `topRiskSignals`。
|
||
- 异常排行卡片横跨整行，主图表填满卡片，下面只保留紧凑排行明细。
|
||
- 删除算法闭环效果和近期高风险观察两个卡片。
|
||
|
||
## 方案设计
|
||
|
||
前端：
|
||
|
||
- `OverviewView.vue`
|
||
- 删除独立预算执行率卡片。
|
||
- 在预算指标卡片内部增加 `GaugeChart` 区域，与指标列表左右布局。
|
||
|
||
- `overview-view.css`
|
||
- 调整 `budget-metrics-panel` 的布局宽度和内部栅格，桌面端占 6 栅格贴合“高额单据”右侧。
|
||
- 新增预算整合布局样式，移动端自动单列。
|
||
|
||
- `useOverviewView.js`
|
||
- 将 `riskSourceLegend` 改为风险占比 legend，优先使用风险信号分布。
|
||
|
||
- `RiskObservationDashboard.vue`
|
||
- 风险占比卡片标题改为“风险占比”。
|
||
- 异常排行卡片改为整行大卡。
|
||
- 移除算法闭环效果和近期高风险观察模板与样式。
|
||
|
||
## 算法与公式
|
||
|
||
本次不改变后端算法，只改变前端展示。
|
||
|
||
风险占比：
|
||
|
||
$$
|
||
share_i = \frac{count_i}{\sum_{j=1}^{n} count_j}
|
||
$$
|
||
|
||
预算执行率沿用已有 `budgetSummary.ratio`：
|
||
|
||
$$
|
||
budgetUsageRate = \frac{usedBudget}{totalBudget}
|
||
$$
|
||
|
||
## 测试方案
|
||
|
||
- 前端源码测试：
|
||
- 财务看板不再渲染独立 `budget-panel`。
|
||
- 预算指标卡片包含 `GaugeChart`。
|
||
- 风险看板标题为“风险占比”，不再使用“来源分布”。
|
||
- 风险看板不再渲染算法闭环效果和近期高风险观察。
|
||
- 异常排行卡片使用整行样式和图表填充样式。
|
||
- 构建验证：
|
||
- `node web/tests/risk-observation-dashboard.test.mjs`
|
||
- 如有财务看板测试则补充运行。
|
||
- `npm.cmd --prefix web run build`
|
||
|
||
## 指标与验收
|
||
|
||
- 财务看板底部不再多出单独“预算执行率（本月）”卡片。
|
||
- 预算指标卡片内部能看到预算执行率和预算指标，并在桌面端填充“高额单据”右侧空白位。
|
||
- 风险看板不再显示“算法闭环效果”和“近期高风险观察”。
|
||
- 风险占比不再显示来源未知，而是展示具体风险占比。
|
||
- 异常排行卡片占满整行，图表区域明显成为主内容。
|
||
|
||
## 风险与开放问题
|
||
|
||
- 当前工作区已有未提交改动，提交时必须只纳入本次相关文件。
|
||
- 本次只改前端展示，如果后端风险信号为空，则仍需要显示“暂无数据”兜底。
|