2.2 KiB
2.2 KiB
任务列表: 模型输出展示功能
实施顺序
1. 前端页面结构调整
- 在 detail.vue 中新增模型输出展示区域（el-card）
- 添加条件渲染逻辑：仅当模型输出数据存在时显示
- 添加客户类型判断逻辑：个人/企业显示不同字段
- 抽离模型输出组件 ModelOutputDisplay.vue
2. 页面布局调整
- 将模型输出组件放在关键信息右侧（三栏布局）
- 调整响应式布局支持不同屏幕尺寸
3. 个人客户模型输出组件
- 创建个人模型输出 Tab 结构（7 个 Tab）
- 实现"基本信息"Tab 字段展示（5 个字段）
- 实现"忠诚度分析"Tab 字段展示（7 个字段）
- 实现"贡献度分析"Tab 字段展示（4 个字段）
- 实现"关联度分析"Tab 字段展示（14 个字段）
- 实现"贷款特征"Tab 字段展示（10 个字段）
- 实现"风险度分析"Tab 字段展示（7 个字段）
- 实现"测算结果"Tab 字段展示（2 个字段）
4. 企业客户模型输出组件
- 创建企业模型输出 Tab 结构（8 个 Tab）
- 实现"基本信息"Tab 字段展示（5 个字段）
- 实现"忠诚度分析"Tab 字段展示（6 个字段）
- 实现"贡献度分析"Tab 字段展示（4 个字段）
- 实现"关联度分析"Tab 字段展示（13 个字段）
- 实现"企业类别"Tab 字段展示（6 个字段）
- 实现"贷款特征"Tab 字段展示（7 个字段）
- 实现"风险度分析"Tab 字段展示（7 个字段）
- 实现"测算结果"Tab 字段展示（2 个字段）
5. 数据适配
- 修改 API 响应数据解析逻辑，支持
LoanPricingWorkflowVO结构 - 添加模型输出字段的数据绑定
- 添加布尔值字段的格式化（true/false → 是/否）
- 添加空值处理逻辑
6. 样式调整
- 保持与现有详情页面一致的卡片样式
- 保持 Tab 样式一致性
- 确保响应式布局在移动端正常显示
- 调整卡片间距
7. 测试验证
- 测试个人客户数据展示
- 测试企业客户数据展示
- 测试无模型输出数据时的页面表现
- 测试响应式布局
- 测试各 Tab 切换交互