7.6 KiB
7.6 KiB
设计文档: 模型输出展示
概述
本文档描述在流程详情页面中添加模型输出展示功能的技术设计。
页面结构
当前布局
┌─────────────────────────────────────────────────────────┐
│ 页面标题: 流程详情 [返回按钮] │
├──────────────────────┬──────────────────────────────────┤
│ 关键信息摘要 (30%) │ 详情标签页 (70%) │
│ ┌────────────────┐ │ ┌────────────────────────────┐ │
│ │ 流水号 │ │ │ [基本信息][业务信息]... │ │
│ │ 客户名称 │ │ │ │ │
│ │ 客户类型 │ │ │ 字段内容... │ │
│ │ 申请金额 │ │ │ │ │
│ │ 贷款利率 │ │ │ │ │
│ │ 担保方式 │ │ │ │ │
│ └────────────────┘ │ └────────────────────────────┘ │
└──────────────────────┴──────────────────────────────────┘
新增布局
┌─────────────────────────────────────────────────────────┐
│ 页面标题: 流程详情 [返回按钮] │
├──────────────────────┬──────────────────────────────────┤
│ 关键信息摘要 (30%) │ 详情标签页 (70%) │
│ ┌────────────────┐ │ ┌────────────────────────────┐ │
│ │ 流水号 │ │ │ [基本信息][业务信息]... │ │
│ │ 客户名称 │ │ │ │ │
│ │ 客户类型 │ │ │ 字段内容... │ │
│ │ 申请金额 │ │ │ │ │
│ │ 贷款利率 │ │ │ │ │
│ │ 担保方式 │ │ │ │ │
│ └────────────────┘ │ └────────────────────────────┘ │
├──────────────────────┴──────────────────────────────────┤
│ 模型输出 (当有数据时显示) │
│ ┌────────────────────────────────────────────────────┐│
│ │ [基本信息][忠诚度分析][贡献度分析]... ││
│ │ ││
│ │ 字段内容... ││
│ └────────────────────────────────────────────────────┘│
└─────────────────────────────────────────────────────────┘
组件设计
ModelOutputDisplay 组件
建议创建独立的模型输出展示组件，便于维护和复用。
<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 响应结构
{
"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 内容单列布局