112 lines
4.7 KiB
Markdown
112 lines
4.7 KiB
Markdown
# 工作台费用统计详情弹窗概念文档
|
||
|
||
## 功能一句话
|
||
|
||
在个人工作台的“费用统计”卡片中提供本地弹窗详情，让用户直接查看历史费用分布、单据处理时间和系统操作明细。
|
||
|
||
## 背景与问题
|
||
|
||
当前“费用统计”右上角的“查看详情”会进入助手问答，不符合用户期望的“像用户画像一样直接看详情”的操作方式。费用进度区域也存在两个可见性问题：右上角“全部进度”按钮没有实际承载完整列表能力，10 日以上分割标识靠左且不醒目。
|
||
|
||
本次调整需要让工作台成为个人费用操作的直接入口：用户不离开首页即可理解自己的费用结构、单据流转时间和近期系统动作。
|
||
|
||
## 目标与非目标
|
||
|
||
目标：
|
||
|
||
- 移除“费用进度”右上角的“全部进度”按钮，减少无效操作。
|
||
- 将“10日以上”分割标识放在分割线中间，并使用更醒目的主题强调色。
|
||
- 将“费用统计”的“查看详情”改为打开详情弹窗。
|
||
- 弹窗展示历史报销费用分布、单据处理时间和系统操作详情。
|
||
- 数据优先来自 `buildWorkbenchSummary` 已有的当前用户单据汇总，不新增后端接口。
|
||
|
||
非目标：
|
||
|
||
- 不新增后端 API。
|
||
- 不改变报销单据审批状态计算规则。
|
||
- 不替代用户画像详情弹窗。
|
||
- 不做复杂图表库接入，避免为了一个工作台弹窗扩大依赖和维护面。
|
||
|
||
## 用户与场景
|
||
|
||
主要用户是个人员工和经常处理报销的业务人员。典型场景：
|
||
|
||
- 在首页查看本月报销情况后，想进一步确认自己的历史费用主要花在哪些类别。
|
||
- 想知道近期单据从创建到当前状态大概处理了多久。
|
||
- 想复盘系统里最近需要处理或已提醒的费用相关动作。
|
||
|
||
## 功能能力
|
||
|
||
### 费用分布
|
||
|
||
按单据标题、场景或备注归类费用类型，统计每类金额、单据数量和金额占比。详情区使用项目现有 `DonutChart` 饼图展示费用分布，并通过图例保留金额与占比信息。若数据不足，展示空状态。
|
||
|
||
### 处理时间
|
||
|
||
按单据创建、提交、更新或进度步骤时间推断处理耗时，输出可读的耗时文案，并展示当前状态和节点数量。
|
||
|
||
### 操作详情
|
||
|
||
基于待办、通知和进度项生成系统操作明细，帮助用户理解最近有哪些费用动作需要关注。
|
||
|
||
## 方案设计
|
||
|
||
前端实现：
|
||
|
||
- 在 `workbenchSummary.js` 中新增 `expenseStatsDetail` 汇总结构。
|
||
- 新增 `ExpenseStatsDetailModal.vue`，复用 Element Plus `ElDialog`、`ElButton`、`ElTag` 的企业后台弹窗体验。
|
||
- 费用分布展示复用现有 `DonutChart`，不手写临时 SVG、Canvas 或 CSS 饼图。
|
||
- 在 `PersonalWorkbench.vue` 中接入弹窗状态，费用统计“查看详情”只打开弹窗。
|
||
- 调整 `personal-workbench.css` 中长时间分割标识的居中与强调样式。
|
||
|
||
数据结构：
|
||
|
||
```js
|
||
expenseStatsDetail: {
|
||
distributionRows: [],
|
||
processingRows: [],
|
||
operationRows: []
|
||
}
|
||
```
|
||
|
||
## 算法与公式
|
||
|
||
费用类型金额占比：
|
||
|
||
$$
|
||
percent_i = \frac{amount_i}{\sum_{k=1}^{n} amount_k} \times 100
|
||
$$
|
||
|
||
单据处理耗时：
|
||
|
||
$$
|
||
duration = latestTime - firstTime
|
||
$$
|
||
|
||
其中 `firstTime` 优先取单据创建时间、提交时间或最早进度步骤时间，`latestTime` 优先取更新时间或最新进度步骤时间。
|
||
|
||
## 测试方案
|
||
|
||
- 源码测试确认费用进度不再渲染“全部进度”按钮。
|
||
- 源码测试确认“费用统计”的“查看详情”打开弹窗而不是进入助手。
|
||
- 单元测试确认 `buildWorkbenchSummary` 能生成费用分布、处理时间和操作明细。
|
||
- 源码测试确认弹窗包含费用分布饼图、处理时间和系统操作详情区块。
|
||
- 运行前端构建验证组件编译通过。
|
||
|
||
## 指标与验收
|
||
|
||
- “10日以上”标识位于分割线中间，且使用主题强调色。
|
||
- “费用进度”卡片右上角不再出现“全部进度”。
|
||
- 点击“费用统计”的“查看详情”打开详情弹窗。
|
||
- 弹窗至少包含费用分布饼图、处理时间、系统操作详情三个信息区。
|
||
- 相关测试与前端构建通过。
|
||
|
||
## 风险与开放问题
|
||
|
||
- 当前数据来自工作台前端汇总，历史维度受首页已加载单据范围影响；若后续需要跨年或分页全量统计，应补后端专用接口。
|
||
- 单据类型归类依赖标题、场景和备注，属于前端轻量归类；后续可与 ontology 费用类别字段打通。
|
||
|
||
## 2026-06-03 饼图呈现修正
|
||
|
||
费用分布仍复用项目已有 `DonutChart`，但在费用统计详情弹窗内关闭组件自带图例，只保留一个环形饼图入口。费用类型、金额、笔数和占比改为右侧文字明细列表，避免环图主体和双列图例在同一卡片内被误认为出现两个饼图。
|