# 项目详情页面设计文档 **创建日期**: 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 页面缓存 使用 `` 缓存标签页内容，避免切换时重复加载。 --- ## 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 | 便于跨组件数据共享和状态持久化 |