wkc/ccdi

Fork 0

Files

wkc 02249c402e 文件夹整理

2026-02-09 14:28:25 +08:00

12 KiB

Raw Blame History

项目详情页面设计文档

创建日期: 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 数据示例

项目详情

{
  code: 200,
  data: {
    projectId: 1,
    projectName: "2025年第一季度初核排查",
    projectDesc: "针对全行员工进行第一季度常规排查",
    projectStatus: "0",
    createTime: "2025-01-15",
    targetCount: 1250,
    warningCount: 23
  }
}

数据质量检查结果

{
  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

// 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. 路由配置

// 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	便于跨组件数据共享和状态持久化

12 KiB Raw Blame History Unescape Escape