风控效能分析

# 风控效能分析 - 页面改动说明 ## 1. 改动概述新增风控效能分析页面，需对以下内容进行改动： | 页面 | 改动类型 | 说明 | | :--- | :--- | :--- | | 新增：风控效能分析.html | 新增 | 风控效能分析主页面 | | 左侧菜单 | 修改 | 运营管理下新增"风控效能分析"菜单入口 | ## 2. 具体改动 ### 2.1 新增风控效能分析.html **页面入口**：风控运营管理 → 风控效能分析（位于"疑点统计分析"之后） **页面结构**： ```html 风控效能分析

指标总览

数据周期：2026年5月（上一完整月） | 更新于 2026-06-01 08:00

数据交换成功率

96.2%

较上期 ↑1.2%

成功: 9,620 | 总数: 10,000 | 参考值 95%

风险识别准确率

72.5%

较上期 ↑3.2%

已确认: 725 | 已甄别: 1,000 | 参考值 60%

决策自动化率

68.3%

较上期 ↑2.1%

自动处置: 6,830 | 总数: 10,000 | 参考值 60%

无效告警优化率

65.1%

较上期 ↑5.8%

基期: 35% | 当期: 12.2% | 参考值 60%

指标趋势

按月展示

数据交换成功率

风险识别准确率

决策自动化率

无效告警优化率

指标明细表 2026-05

序号	指标名称	能力域	分子	分母	计算值	参考值	环比变化	统计月份	操作

``` ### 2.2 左侧菜单改动在运营管理菜单下新增"风控效能分析"，位于"疑点统计分析"之后： ```html

风控效能分析

``` **改动后的运营管理菜单顺序**： 1. 规则统计分析 2. 疑点统计分析 3. **风控效能分析** ← 新增 4. 规则分组管理 5. 风险主题管理 6. 消息模板管理 7. 已排除疑点汇总 ## 3. CSS样式改动复用现有 `common-styles.css` 变量和基础组件样式，新增以下样式： ```css /* KPI卡片统一尺寸 */ .kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .kpi-card { background: white; border-radius: 10px; padding: 20px; border-left: 4px solid #3498db; } .kpi-change.up { color: #67C23A; } .kpi-change.down { color: #F56C6C; } /* 2x2网格趋势图 */ .chart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .chart-grid-item { background: #fff; border-radius: 8px; padding: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); } /* 明细展开行 */ .detail-expand-row { display: none; } .detail-expand-row.show { display: table-row; } .detail-expand-cell { padding: 20px 20px 20px 48px; background: #f8fbff; } .detail-formula { background: #f0f7ff; border: 1px solid #d4e6ff; border-radius: 6px; padding: 12px 16px; color: #409EFF; margin-bottom: 16px; } .detail-data { display: flex; gap: 0; justify-content: center; } .detail-data-col { flex: 0 0 320px; min-width: 280px; padding: 12px 24px; border-right: 1px solid #EBEEF5; } .detail-data-col:last-child { border-right: none; } .detail-data-col h4 { font-size: 13px; font-weight: 600; color: #303133; margin-bottom: 10px; } .detail-data-col .data-item { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; font-size: 12px; color: #606266; border-bottom: 1px dashed #EBEEF5; } .detail-data-col .data-item span:first-child { color: #909399; text-align: left; } .detail-data-col .data-item span:last-child { font-weight: 500; color: #303133; text-align: right; } ``` ## 4. JavaScript改动 ### 4.1 数据加载 ```javascript function loadDashboardData() { // 卡片数据固定为上一完整月，不受筛选影响 const latestMonth = getLatestCompleteMonth(); // 如 '2026-05' fetchOverviewData({ statMonth: latestMonth }).then(data => { renderKPICards(data); }); // 趋势图和明细表按时间范围加载 const params = { startDate: document.getElementById('startDate').value, endDate: document.getElementById('endDate').value }; fetchTrendData(params).then(data => { renderAllCharts(); renderDetailTable(latestMonth); }); } ``` ### 4.2 趋势图渲染（分图模式） ```javascript // 4个独立小图 function renderAllCharts() { const metrics = [ { id: 'chartExchange', label: '数据交换成功率', color: '#409EFF' }, { id: 'chartAccuracy', label: '风险识别准确率', color: '#67C23A' }, { id: 'chartAutomation', label: '决策自动化率', color: '#E6A23C' }, { id: 'chartAlert', label: '无效告警优化率', color: '#F56C6C' } ]; metrics.forEach(m => { new Chart(document.getElementById(m.id), { type: 'line', data: { labels: months, datasets: [{ data: m.data, borderColor: m.color }] }, options: { onClick: (event, elements) => { if (elements.length > 0) { const month = months[elements[0].index]; renderDetailTable(month); // 联动明细表 } } } }); }); } ``` ### 4.3 趋势图联动明细表 ```javascript // 点击趋势图数据点，更新明细表 function onChartClick(month) { // 更新明细表标题的月份标识 document.getElementById('detailMonthBadge').textContent = month; // 请求该月的明细数据 fetchDetailData({ kpiCode: 'ALL', statMonth: month }).then(data => { renderDetailTableRows(data); }); } ``` ### 4.4 自动聚合逻辑 ```javascript // 根据时间范围跨度自动决定展示粒度 function getAggregationHint(months) { if (months.length <= 12) return '按月展示'; if (months.length <= 24) return '按季度展示'; return '按年度展示'; } ``` ## 5. 接口依赖 | 接口 | 方法 | 说明 | | :--- | :--- | :--- | | /core/efficiencyDashboard/overview | GET | 获取4项指标总览数据（参数：statMonth，固定为上一完整月） | | /core/efficiencyDashboard/trend | GET | 获取指标趋势数据（参数：kpiCode, startDate, endDate） | | /core/efficiencyDashboard/detail | GET | 获取指标明细数据（参数：kpiCode, statMonth） | ## 6. 兼容性说明 - 页面采用响应式设计，适配PC端 - 使用Bootstrap 5框架，保证样式兼容性 - 图表使用Chart.js，支持主流浏览器 - 复用现有 `common-styles.css` 变量体系 ## 7. 测试要点 | 测试项 | 说明 | | :--- | :--- | | 数据加载 | 确认页面打开时正确加载4项效能指标数据 | | 卡片固定数据 | 确认卡片始终显示上一完整月数据，不受时间范围筛选影响 | | 数据周期标注 | 确认卡片标题行右侧正确显示数据周期和更新时间 | | 筛选功能 | 确认时间范围筛选仅控制趋势图和明细表，不影响卡片，默认近6个月 | | 卡片展示 | 确认4项指标卡片统一尺寸，2x2网格排列 | | 趋势图展示 | 确认4个独立小图（2x2网格）正确显示 | | 趋势图联动 | 确认点击趋势图数据点后，明细表切换到对应月份 | | 自动聚合 | 确认时间范围>12个月时趋势图自动按季度聚合 | | 指标明细表 | 确认4项指标均正确渲染，分子、分母、计算过程数据正确，支持钻取 | | 明细展开布局 | 确认展开区域整体缩进、各部分居中排列、列名左对齐数值右对齐、各部分以竖线分隔 | | 数据交换明细 | 确认分子/分母按风控规则存证和疑点数据存证分类，失败原因仅显示总数 | | 自动化率明细 | 确认分母明细不含红灯-拦截叫停，仅显示绿灯、黄灯、红灯-限期处置 | | 环比变化 | 确认↑↓箭头和百分比正确反映与上月对比 | | 边界场景 | 确认无数据时显示"--"和提示文案 | | 菜单入口 | 确认左侧菜单"风控效能分析"入口正常，位于"疑点统计分析"之后 |