司南报告组件 (DWBG6A2C) - 模块化架构
概述
司南报告组件采用模块化架构设计，将完整的司南报告拆分成13个独立的模块，每个模块都可以作为独立的tab显示，具有独立的大标题。
数据结构
司南报告的数据结构如下：
{
"apiID": "DWBG6A2C",
"data": {
"baseInfo": {}, // 基本信息
"standLiveInfo": {}, // 身份信息核验
"riskPoint": {}, // 命中风险标注
"securityInfo": {}, // 公安重点人员核验
"antiFraudInfo": {}, // 涉赌涉诈人员核验
"riskList": {}, // 风险名单
"applicationStatistics": {}, // 历史借贷行为
"lendingStatistics": {}, // 近24个月放款情况
"performanceStatistics": {}, // 履约情况
"overdueRecord": {}, // 历史逾期记录
"creditDetail": {}, // 授信详情
"rentalBehavior": {}, // 租赁行为
"riskSupervision": {}, // 关联风险监督
"judiciaRiskInfos": [] // 法院风险信息
},
"success": true,
"timestamp": "2025-01-20 21:19:58"
}
模块拆分
司南报告被拆分成以下14个独立模块：
| API ID | 模块名称 | 包含数据 | 组件文件 |
|---|---|---|---|
DWBG6A2C_BaseInfo |
基本信息 | baseInfo | BaseInfoSection.vue |
DWBG6A2C_StandLiveInfo |
身份信息核验 | standLiveInfo | StandLiveInfoSection.vue |
DWBG6A2C_RiskPoint |
命中风险标注 | riskPoint | RiskPointSection.vue |
DWBG6A2C_SecurityInfo |
公安重点人员核验 | securityInfo | SecurityInfoSection.vue |
DWBG6A2C_AntiFraudInfo |
涉赌涉诈人员核验 | antiFraudInfo | AntiFraudInfoSection.vue |
DWBG6A2C_RiskList |
风险名单 | riskList | RiskListSection.vue |
DWBG6A2C_ApplicationStatistics |
历史借贷行为 | applicationStatistics | ApplicationStatisticsSection.vue |
DWBG6A2C_LendingStatistics |
近24个月放款情况 | lendingStatistics | LendingStatisticsSection.vue |
DWBG6A2C_PerformanceStatistics |
履约情况 | performanceStatistics | PerformanceStatisticsSection.vue |
DWBG6A2C_OverdueRecord |
历史逾期记录 | overdueRecord | OverdueRecordSection.vue |
DWBG6A2C_CreditDetail |
授信详情 | creditDetail | CreditDetailSection.vue |
DWBG6A2C_RentalBehavior |
租赁行为 | rentalBehavior | RentalBehaviorSection.vue |
DWBG6A2C_RiskSupervision |
关联风险监督 | riskSupervision | RiskSupervisionSection.vue |
DWBG6A2C_CourtRiskInfo |
法院风险信息 | judiciaRiskInfos | CourtRiskInfoSection.vue |
使用方法
1. 前端自动拆分
BaseReport.vue 已自动配置支持司南报告的模块化显示：
import { splitDWBG6A2CForTabs } from '@/ui/DWBG6A2C/utils/simpleSplitter.js';
// 处理数据拆分（支持DWBG8B4D和DWBG6A2C）
const processedReportData = computed(() => {
let data = reportData.value;
// 拆分DWBG8B4D数据
data = splitDWBG8B4DForTabs(data);
// 拆分DWBG6A2C数据
data = splitDWBG6A2CForTabs(data);
return data;
});
2. 组件配置
BaseReport.vue 中已配置所有司南报告模块：
// 司南报告
DWBG6A2C: {
name: "司南报告",
component: defineAsyncComponent(() => import("@/ui/DWBG6A2C/index.vue")),
remark: '司南报告提供全面的个人信用风险评估，包括身份核验、风险名单、借贷行为、履约情况等多维度分析。'
},
// ... 其他模块配置
组件结构
src/ui/DWBG6A2C/
├── index.vue # 原始完整组件（保留）
├── README.md # 文档说明
├── components/ # 子组件目录
│ ├── BaseInfoSection.vue # 基本信息
│ ├── StandLiveInfoSection.vue # 身份信息核验
│ ├── RiskPointSection.vue # 命中风险标注
│ ├── SecurityInfoSection.vue # 公安重点人员核验
│ ├── AntiFraudInfoSection.vue # 涉赌涉诈人员核验
│ ├── RiskListSection.vue # 风险名单
│ ├── ApplicationStatisticsSection.vue # 历史借贷行为
│ ├── LendingStatisticsSection.vue # 近24个月放款情况
│ ├── PerformanceStatisticsSection.vue # 履约情况
│ ├── OverdueRecordSection.vue # 历史逾期记录
│ ├── CreditDetailSection.vue # 授信详情
│ ├── RentalBehaviorSection.vue # 租赁行为
│ ├── RiskSupervisionSection.vue # 关联风险监督
│ └── CourtRiskInfoSection.vue # 法院风险信息
└── utils/
└── simpleSplitter.js # 数据拆分工具
特色功能
1. 智能风险评估
- 多维度风险标注
- 智能颜色编码
- 风险等级自动判断
2. 数据可视化
- 渐变色彩设计
- 图标化展示
- 响应式布局
3. 用户友好
- 清晰的层次结构
- 详细的说明文档
- 直观的风险提示
4. 模块化设计
- 独立的模块组件
- 可复用的工具函数
- 灵活的数据拆分
工具函数
utils/simpleSplitter.js 提供了以下工具函数：
splitDWBG6A2CForTabs()- 数据拆分formatRiskLevel()- 格式化风险等级formatPhoneStatus()- 格式化手机号状态formatVerificationResult()- 格式化身份核验结果formatInTime()- 格式化在网时长hasRiskData()- 检查是否有风险数据
使用示例
// 在页面中使用
<BaseReport
:reportData="reportData"
:reportParams="reportParams"
reportName="司南报告"
feature="DWBG6A2C"
:isEmpty="false"
:isDone="true"
/>
注意事项
- 确保数据格式符合司南报告的标准结构
- 所有模块都支持数据为空的情况
- 风险评估基于实际数据动态计算
- 组件采用 Tailwind CSS 进行样式设计
- 支持移动端响应式布局
更新日志
- v1.0.0: 初始版本，支持完整的司南报告模块化显示
- 包含13个独立模块
- 支持自动数据拆分
- 提供完整的风险评估功能