161 lines
7.6 KiB
Markdown
161 lines
7.6 KiB
Markdown
# 设计文档: 模型输出展示
|
||
|
||
## 概述
|
||
|
||
本文档描述在流程详情页面中添加模型输出展示功能的技术设计。
|
||
|
||
## 页面结构
|
||
|
||
### 当前布局
|
||
|
||
```
|
||
┌─────────────────────────────────────────────────────────┐
|
||
│ 页面标题: 流程详情 [返回按钮] │
|
||
├──────────────────────┬──────────────────────────────────┤
|
||
│ 关键信息摘要 (30%) │ 详情标签页 (70%) │
|
||
│ ┌────────────────┐ │ ┌────────────────────────────┐ │
|
||
│ │ 流水号 │ │ │ [基本信息][业务信息]... │ │
|
||
│ │ 客户名称 │ │ │ │ │
|
||
│ │ 客户类型 │ │ │ 字段内容... │ │
|
||
│ │ 申请金额 │ │ │ │ │
|
||
│ │ 贷款利率 │ │ │ │ │
|
||
│ │ 担保方式 │ │ │ │ │
|
||
│ └────────────────┘ │ └────────────────────────────┘ │
|
||
└──────────────────────┴──────────────────────────────────┘
|
||
```
|
||
|
||
### 新增布局
|
||
|
||
```
|
||
┌─────────────────────────────────────────────────────────┐
|
||
│ 页面标题: 流程详情 [返回按钮] │
|
||
├──────────────────────┬──────────────────────────────────┤
|
||
│ 关键信息摘要 (30%) │ 详情标签页 (70%) │
|
||
│ ┌────────────────┐ │ ┌────────────────────────────┐ │
|
||
│ │ 流水号 │ │ │ [基本信息][业务信息]... │ │
|
||
│ │ 客户名称 │ │ │ │ │
|
||
│ │ 客户类型 │ │ │ 字段内容... │ │
|
||
│ │ 申请金额 │ │ │ │ │
|
||
│ │ 贷款利率 │ │ │ │ │
|
||
│ │ 担保方式 │ │ │ │ │
|
||
│ └────────────────┘ │ └────────────────────────────┘ │
|
||
├──────────────────────┴──────────────────────────────────┤
|
||
│ 模型输出 (当有数据时显示) │
|
||
│ ┌────────────────────────────────────────────────────┐│
|
||
│ │ [基本信息][忠诚度分析][贡献度分析]... ││
|
||
│ │ ││
|
||
│ │ 字段内容... ││
|
||
│ └────────────────────────────────────────────────────┘│
|
||
└─────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
## 组件设计
|
||
|
||
### ModelOutputDisplay 组件
|
||
|
||
建议创建独立的模型输出展示组件，便于维护和复用。
|
||
|
||
```vue
|
||
<template>
|
||
<el-card v-if="shouldDisplay" class="model-output-card">
|
||
<div slot="header" class="card-header">
|
||
<span class="card-title">模型输出</span>
|
||
</div>
|
||
<el-tabs v-model="activeTab">
|
||
<!-- 个人客户 Tabs -->
|
||
<template v-if="custType === '个人'">
|
||
<el-tab-pane label="基本信息" key="retail-basic">...</el-tab-pane>
|
||
<el-tab-pane label="忠诚度分析" key="retail-loyalty">...</el-tab-pane>
|
||
<el-tab-pane label="贡献度分析" key="retail-contribution">...</el-tab-pane>
|
||
<el-tab-pane label="关联度分析" key="retail-relevance">...</el-tab-pane>
|
||
<el-tab-pane label="贷款特征" key="retail-loan">...</el-tab-pane>
|
||
<el-tab-pane label="风险度分析" key="retail-risk">...</el-tab-pane>
|
||
<el-tab-pane label="测算结果" key="retail-result">...</el-tab-pane>
|
||
</template>
|
||
<!-- 企业客户 Tabs -->
|
||
<template v-else-if="custType === '企业'">
|
||
<el-tab-pane label="基本信息" key="corp-basic">...</el-tab-pane>
|
||
<el-tab-pane label="忠诚度分析" key="corp-loyalty">...</el-tab-pane>
|
||
<el-tab-pane label="贡献度分析" key="corp-contribution">...</el-tab-pane>
|
||
<el-tab-pane label="关联度分析" key="corp-relevance">...</el-tab-pane>
|
||
<el-tab-pane label="企业类别" key="corp-category">...</el-tab-pane>
|
||
<el-tab-pane label="贷款特征" key="corp-loan">...</el-tab-pane>
|
||
<el-tab-pane label="风险度分析" key="corp-risk">...</el-tab-pane>
|
||
<el-tab-pane label="测算结果" key="corp-result">...</el-tab-pane>
|
||
</template>
|
||
</el-tabs>
|
||
</el-card>
|
||
</template>
|
||
```
|
||
|
||
## 数据流
|
||
|
||
### API 响应结构
|
||
|
||
```json
|
||
{
|
||
"code": 200,
|
||
"msg": "查询成功",
|
||
"data": {
|
||
"loanPricingWorkflow": { ... },
|
||
"modelRetailOutputFields": { ... }, // 个人客户时存在
|
||
"modelCorpOutputFields": { ... } // 企业客户时存在
|
||
}
|
||
}
|
||
```
|
||
|
||
### 组件 Props
|
||
|
||
| Prop | 类型 | 说明 |
|
||
|------|------|------|
|
||
| custType | String | 客户类型（个人/企业） |
|
||
| retailOutput | Object | 个人客户模型输出数据 |
|
||
| corpOutput | Object | 企业客户模型输出数据 |
|
||
|
||
## 样式规范
|
||
|
||
### 卡片样式
|
||
|
||
与现有 `.summary-card` 和 `.detail-card` 保持一致：
|
||
|
||
- 头部背景色: `#fafafa`
|
||
- 边框颜色: `#ebeef5`
|
||
- 内边距: 头部 `16px 20px`, 内容 `20px`
|
||
- 标题字号: `16px`, 字重 `500`
|
||
- 标题颜色: `#303133`
|
||
|
||
### Tab 样式
|
||
|
||
使用 Element UI 默认 Tab 样式，间距保持一致。
|
||
|
||
## 字段映射表
|
||
|
||
### 个人客户模型输出字段
|
||
|
||
| Tab | 字段名 | 显示标签 | 格式化 |
|
||
|-----|--------|----------|--------|
|
||
| 基本信息 | custIsn | 客户内码 | - |
|
||
| 基本信息 | custName | 客户名称 | - |
|
||
| 基本信息 | idType | 证件类型 | - |
|
||
| 基本信息 | idNum | 证件号码 | - |
|
||
| 基本信息 | baseLoanRate | 基准利率 | - |
|
||
| 测算结果 | totalBp | 浮动BP | - |
|
||
| 测算结果 | calculateRate | 测算利率 | 高亮显示 |
|
||
|
||
### 企业客户模型输出字段
|
||
|
||
| Tab | 字段名 | 显示标签 | 格式化 |
|
||
|-----|--------|----------|--------|
|
||
| 基本信息 | custIsn | 客户内码 | - |
|
||
| 基本信息 | custName | 客户名称 | - |
|
||
| 基本信息 | idType | 证件类型 | - |
|
||
| 基本信息 | idNum | 证件号码 | - |
|
||
| 基本信息 | baseLoanRate | 基准利率 | - |
|
||
| 测算结果 | totalBp | 浮动BP | - |
|
||
| 测算结果 | calculateRate | 测算利率 | 高亮显示 |
|
||
|
||
## 响应式设计
|
||
|
||
- 桌面端 (≥768px): 模型输出卡片宽度 100%，Tab 内容两列布局
|
||
- 移动端 (<768px): 模型输出卡片宽度 100%，Tab 内容单列布局
|