344 lines
13 KiB
Markdown
344 lines
13 KiB
Markdown
# 项目详情页面设计文档
|
||
|
||
**创建日期**: 2025-01-30
|
||
**设计者**: Claude Code
|
||
**状态**: 待实施
|
||
|
||
## 1. 概述
|
||
|
||
### 1.1 需求描述
|
||
|
||
开发一个项目详情页面，在项目管理列表中，点击项目那一行或者查看详情跳转到项目详情页面。顶部有一个导航栏，里面有按钮切换项目详情的不同页面。
|
||
|
||
### 1.2 功能模块
|
||
|
||
- **上传数据**（默认）：批量上传流水、征信、员工家庭关系数据，选择名单库
|
||
- **参数配置**：配置项目分析参数和排查规则
|
||
- **结果总览**：查看项目分析结果的总体概况
|
||
- **专项排查**：针对特定风险类型进行深度排查
|
||
- **流水明细查询**：查询和筛选具体的流水记录明细
|
||
|
||
---
|
||
|
||
## 2. 整体架构设计
|
||
|
||
### 2.1 路由结构
|
||
|
||
采用独立页面路由方式：
|
||
|
||
```
|
||
路由: /project-detail/:projectId
|
||
组件: @/views/ccdiProject/detail/index.vue
|
||
```
|
||
|
||
### 2.2 页面布局
|
||
|
||
```
|
||
┌─────────────────────────────────────────────┐
|
||
│ 顶部导航 (PageHeader) │
|
||
│ [返回] 项目名称 [状态] │
|
||
│ [上传数据] [参数配置] [结果总览] ... │
|
||
├─────────────────────────────────────────────┤
|
||
│ │
|
||
│ 内容区域 (el-tabs) │
|
||
│ 根据选中标签显示对应子页面 │
|
||
│ │
|
||
└─────────────────────────────────────────────┘
|
||
```
|
||
|
||
### 2.3 组件层次结构
|
||
|
||
```
|
||
detail/
|
||
├── index.vue # 主页面容器
|
||
├── components/
|
||
│ ├── PageHeader.vue # 顶部导航
|
||
│ ├── UploadData.vue # 上传数据
|
||
│ ├── ParameterConfig.vue # 参数配置
|
||
│ ├── ResultOverview.vue # 结果总览
|
||
│ ├── SpecialCheck.vue # 专项排查
|
||
│ └── TransactionDetail.vue # 流水明细查询
|
||
└── api.js # API 接口定义
|
||
```
|
||
|
||
---
|
||
|
||
## 3. 上传数据页面详细设计
|
||
|
||
### 3.1 页面布局
|
||
|
||
```
|
||
┌─────────────────────────────────────────────┐
|
||
│ 批量上传数据 [生成报告][拉取本行]│
|
||
│ 支持在一个项目中上传多个主体/账户数据 │
|
||
├─────────────────────────────────────────────┤
|
||
│ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ │
|
||
│ │流水 │ │征信 │ │员工 │ │名单 │ │
|
||
│ │导入 │ │导入 │ │家庭 │ │库选择 │ │
|
||
│ └──────┘ └──────┘ └──────┘ └──────┘ │
|
||
├─────────────────────────────────────────────┤
|
||
│ 数据质量检查区 │
|
||
│ - 检查结果列表 │
|
||
│ - 指标卡片（完整性、一致性、连续性） │
|
||
└─────────────────────────────────────────────┘
|
||
```
|
||
|
||
### 3.2 功能模块
|
||
|
||
#### 3.2.1 流水导入
|
||
|
||
- 支持格式：xlsx, xls, pdf
|
||
- 拖拽上传 + 点击上传
|
||
- 上传进度显示
|
||
|
||
#### 3.2.2 征信导入
|
||
|
||
- 支持格式：html
|
||
- 解析征信报告
|
||
|
||
#### 3.2.3 员工家庭关系导入
|
||
|
||
- 支持格式：xlsx, xls
|
||
- Excel 模板上传
|
||
|
||
#### 3.2.4 名单库选择
|
||
|
||
- 高风险人员名单（68人）
|
||
- 历史可疑人员名单（45人）
|
||
- 监管关注名单（32人）
|
||
|
||
#### 3.2.5 数据质量检查
|
||
|
||
- 数据完整性：98.5%
|
||
- 格式一致性：95.2%
|
||
- 余额连续性：92.8%
|
||
- 检查结果详情
|
||
|
||
---
|
||
|
||
## 4. 其他子页面框架设计
|
||
|
||
### 4.1 参数配置页面
|
||
|
||
```
|
||
┌─────────────────────────────────────────────┐
|
||
│ 参数配置 [保存] [重置] │
|
||
├─────────────────────────────────────────────┤
|
||
│ ┌──────────┐ ┌──────────┐ │
|
||
│ │ 预警阈值 │ │ 排查规则 │ │
|
||
│ └──────────┘ └──────────┘ │
|
||
│ ┌────────────────────────────────┐ │
|
||
│ │ 高级配置（可折叠） │ │
|
||
│ └────────────────────────────────┘ │
|
||
└─────────────────────────────────────────────┘
|
||
```
|
||
|
||
### 4.2 结果总览页面
|
||
|
||
```
|
||
┌─────────────────────────────────────────────┐
|
||
│ 结果总览 [导出报告] [刷新] │
|
||
├─────────────────────────────────────────────┤
|
||
│ ┌────────┐ ┌────────┐ ┌────────┐ │
|
||
│ │ 总人数 │ │ 预警数 │ │ 可疑数 │ │
|
||
│ └────────┘ └────────┘ └────────┘ │
|
||
│ ┌──────────────┐ ┌──────────────┐ │
|
||
│ │ 预警分布图 │ │ 趋势图 │ │
|
||
│ └──────────────┘ └──────────────┘ │
|
||
│ 预警排名表格（Top 10） │
|
||
└─────────────────────────────────────────────┘
|
||
```
|
||
|
||
### 4.3 专项排查页面
|
||
|
||
```
|
||
┌─────────────────────────────────────────────┐
|
||
│ 专项排查 [新增排查] [批量导出]│
|
||
├─────────────────────────────────────────────┤
|
||
│ 筛选条件：[风险类型] [严重程度] [状态] │
|
||
│ 排查任务列表（表格） │
|
||
└─────────────────────────────────────────────┘
|
||
```
|
||
|
||
### 4.4 流水明细查询页面
|
||
|
||
```
|
||
┌─────────────────────────────────────────────┐
|
||
│ 流水明细查询 [导出] [高级查询] │
|
||
├─────────────────────────────────────────────┤
|
||
│ 查询条件：[账户] [日期范围] [金额范围] │
|
||
│ 流水明细表格（分页） │
|
||
└─────────────────────────────────────────────┘
|
||
```
|
||
|
||
---
|
||
|
||
## 5. 接口设计
|
||
|
||
### 5.1 接口列表
|
||
|
||
| 接口名称 | 方法 | 路径 | 说明 |
|
||
|----------|------|------------------------------------|----------|
|
||
| 获取项目详情 | GET | `/ccdi/project/detail/{projectId}` | 获取项目基本信息 |
|
||
| 上传流水文件 | POST | `/ccdi/project/transaction/upload` | 上传流水文件 |
|
||
| 上传征信文件 | POST | `/ccdi/project/credit/upload` | 上传征信报告 |
|
||
| 上传员工关系 | POST | `/ccdi/project/employee/upload` | 上传员工家庭关系 |
|
||
| 获取名单库列表 | GET | `/ccdi/project/namelist/list` | 获取可选名单库 |
|
||
| 保存名单库选择 | POST | `/ccdi/project/namelist/save` | 保存选择的名单库 |
|
||
| 获取数据质量检查 | GET | `/ccdi/project/quality/check` | 获取质量检查指标 |
|
||
| 生成报告 | POST | `/ccdi/project/report/generate` | 生成分析报告 |
|
||
| 拉取本行信息 | GET | `/ccdi/project/own/info` | 获取本行员工信息 |
|
||
| 保存参数配置 | POST | `/ccdi/project/config/save` | 保存项目参数 |
|
||
| 获取结果总览 | GET | `/ccdi/project/overview` | 获取结果统计数据 |
|
||
| 获取排查列表 | GET | `/ccdi/project/check/list` | 获取专项排查列表 |
|
||
| 查询流水明细 | GET | `/ccdi/project/transaction/list` | 分页查询流水 |
|
||
|
||
### 5.2 Mock 数据示例
|
||
|
||
**项目详情**
|
||
|
||
```javascript
|
||
{
|
||
code: 200,
|
||
data: {
|
||
projectId: 1,
|
||
projectName: "2025年第一季度初核排查",
|
||
projectDesc: "针对全行员工进行第一季度常规排查",
|
||
projectStatus: "0",
|
||
createTime: "2025-01-15",
|
||
targetCount: 1250,
|
||
warningCount: 23
|
||
}
|
||
}
|
||
```
|
||
|
||
**数据质量检查结果**
|
||
|
||
```javascript
|
||
{
|
||
code: 200,
|
||
data: {
|
||
completeness: 98.5,
|
||
consistency: 95.2,
|
||
continuity: 92.8,
|
||
issues: [
|
||
{ type: "格式不一致", count: 23 },
|
||
{ type: "余额连续性异常", count: 5 },
|
||
{ type: "缺失关键字段", count: 12 }
|
||
]
|
||
}
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 6. 状态管理
|
||
|
||
### 6.1 Vuex Store
|
||
|
||
```javascript
|
||
// store/modules/projectDetail.js
|
||
const state = {
|
||
currentProject: null,
|
||
activeTab: 'upload',
|
||
uploadStatus: {
|
||
transaction: false,
|
||
credit: false,
|
||
employee: false,
|
||
nameList: []
|
||
},
|
||
qualityCheck: null,
|
||
pageCache: {}
|
||
}
|
||
```
|
||
|
||
### 6.2 页面缓存
|
||
|
||
使用 `<keep-alive>` 缓存标签页内容，避免切换时重复加载。
|
||
|
||
---
|
||
|
||
## 7. 路由配置
|
||
|
||
```javascript
|
||
// router/index.js
|
||
{
|
||
path: '/project-detail',
|
||
component: Layout,
|
||
hidden: true,
|
||
children: [
|
||
{
|
||
path: ':projectId(\\d+)',
|
||
component: () => import('@/views/ccdiProject/detail/index'),
|
||
name: 'ProjectDetail',
|
||
meta: {
|
||
title: '项目详情',
|
||
activeMenu: '/ccdiProject'
|
||
}
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 8. 文件目录结构
|
||
|
||
```
|
||
ruoyi-ui/src/
|
||
├── views/ccdiProject/
|
||
│ ├── index.vue # 项目列表页（已存在）
|
||
│ └── detail/ # 项目详情目录
|
||
│ ├── index.vue # 主页面
|
||
│ └── components/
|
||
│ ├── PageHeader.vue
|
||
│ ├── UploadData.vue
|
||
│ ├── ParameterConfig.vue
|
||
│ ├── ResultOverview.vue
|
||
│ ├── SpecialCheck.vue
|
||
│ └── TransactionDetail.vue
|
||
├── api/
|
||
│ └── ccdiProject/
|
||
│ └── detail.js # 项目详情 API
|
||
├── store/
|
||
│ └── modules/
|
||
│ └── projectDetail.js # Vuex 状态管理
|
||
└── mock/
|
||
└── projectDetail.js # Mock 数据
|
||
```
|
||
|
||
---
|
||
|
||
## 9. 待实现功能清单
|
||
|
||
- [ ] 创建路由配置
|
||
- [ ] 创建主页面容器
|
||
- [ ] 实现 PageHeader 顶部导航组件
|
||
- [ ] 实现 UploadData 上传数据页面
|
||
- [ ] 流水导入功能
|
||
- [ ] 征信导入功能
|
||
- [ ] 员工家庭关系导入功能
|
||
- [ ] 名单库选择功能
|
||
- [ ] 数据质量检查展示
|
||
- [ ] 实现 ParameterConfig 参数配置页面（框架）
|
||
- [ ] 实现 ResultOverview 结果总览页面（框架）
|
||
- [ ] 实现 SpecialCheck 专项排查页面（框架）
|
||
- [ ] 实现 TransactionDetail 流水明细查询页面（框架）
|
||
- [ ] 创建 Vuex 状态管理模块
|
||
- [ ] 创建 API 接口定义
|
||
- [ ] 创建 Mock 数据
|
||
- [ ] 修改项目列表页跳转逻辑
|
||
- [ ] 测试整体流程
|
||
|
||
---
|
||
|
||
## 10. 设计决策记录
|
||
|
||
| 决策点 | 选择 | 原因 |
|
||
|--------|-----------|----------------------|
|
||
| 路由方式 | 独立页面路由 | 可通过URL直接访问，支持浏览器前进后退 |
|
||
| 导航方式 | Tabs 标签页 | 交互流畅，适合频繁切换场景 |
|
||
| 上传卡片布局 | 四列一行 | 节省空间，一目了然 |
|
||
| 后端接口 | Mock 数据先行 | 前端可独立开发，后续对接真实接口 |
|
||
| 状态管理 | Vuex | 便于跨组件数据共享和状态持久化 |
|