规则准确率分析 - 全知业务数字化治理平台

# 规则准确率按版本追踪 - 页面改动说明 ## 文档信息 - 文档名称：规则准确率按版本追踪 - 页面改动说明 - 所属模块：全知平台 / 风控模块 / 风险规则 / 准确率分析 - 编写目的：说明规则详情页新增准确率分析Tab、新增全局规则准确率分析页面的改动内容，为前端开发提供指引 - 前置依赖：规则版本管理功能、疑点甄别功能 --- ## 涉及页面 | 序号 | 页面文件 | 改动类型 | 说明 | |------|----------|----------|------| | 1 | `规则详情.html` | 修改 | 新增"准确率分析"Tab，含版本准确率卡片、趋势图、明细表 | | 2 | `规则统计分析.html` | 修改 | 左侧菜单"运营管理"下新增"规则准确率分析"菜单入口 | | 3 | `规则准确率分析.html` | **新增** | 全局规则准确率分析页面，含筛选、排行榜、趋势对比图 | --- ## 改动内容 ### 1. `规则详情.html` #### 1.1 新增"准确率分析"Tab按钮 **位置**：`ruleDetailTabs`（约 line 1032-1036），在"版本历史"Tab之后插入。 ```html

``` **显示条件**：仅规则已上线时显示该Tab。草稿/审核中规则隐藏。 ```javascript // loadRuleData() 中控制Tab显示 const accuracyTab = document.getElementById('accuracy-tab'); if (accuracyTab) { const isOnline = !!rule.basic.onlineTime; accuracyTab.parentElement.style.display = isOnline ? '' : 'none'; } ``` --- #### 1.2 新增"准确率分析"Tab面板 **位置**：`tab-content` 区域内，`versionPanel` 之后（约 line 1067 之后）。 ```html

``` --- #### 1.3 准确率分析面板内容结构 `renderAccuracyAnalysis(ruleCode)` 函数渲染以下内容： ```html

当前版本

准确率

78.5%

已确认疑点

157

已排除疑点

版本准确率趋势

各版本准确率明细

版本	时间区间	准确率	已确认	已排除	疑点总数

``` --- #### 1.4 准确率卡片样式复用效能分析看板的 `.kpi-card` 样式，无需新增CSS。准确率数值颜色规则： ```javascript function getAccuracyColor(accuracy) { if (accuracy >= 70) return '#67C23A'; // 绿色 if (accuracy >= 50) return '#E6A23C'; // 橙色 return '#F56C6C'; // 红色 } ``` --- #### 1.5 版本准确率趋势图使用 Chart.js 折线图，X轴为版本号，Y轴为准确率。 ```javascript function renderVersionAccuracyChart(versions) { const ctx = document.getElementById('versionAccuracyChart').getContext('2d'); const labels = versions.map(v => v.version); const data = versions.map(v => v.accuracy); const colors = data.map(v => getAccuracyColor(v)); new Chart(ctx, { type: 'line', data: { labels: labels, datasets: [{ label: '准确率', data: data, borderColor: '#409EFF', backgroundColor: 'rgba(64,158,255,0.1)', borderWidth: 2, pointRadius: 6, pointBackgroundColor: '#fff', pointBorderColor: '#409EFF', pointBorderWidth: 2, fill: true, tension: 0.3 }] }, options: { responsive: true, plugins: { tooltip: { callbacks: { afterLabel: function(context) { const v = versions[context.dataIndex]; return `疑点总数: ${v.totalCount}\n时间区间: ${v.startTime} ~ ${v.endTime || '至今'}`; } } } }, scales: { y: { min: 0, max: 100, ticks: { callback: v => v + '%' } } } } }); } ``` --- #### 1.6 各版本准确率明细表渲染 ```javascript function renderAccuracyDetailTable(versions, currentVersion) { const tbody = document.getElementById('accuracyDetailBody'); const sorted = [...versions].reverse(); // 从新到旧 let html = ''; for (const v of sorted) { const isCurrent = v.version === currentVersion; const rowStyle = isCurrent ? 'background:#ecf5ff;' : ''; const versionBadge = isCurrent ? `${v.version} 当前` : `${v.version}`; const accuracyColor = getAccuracyColor(v.accuracy); const timeRange = v.startTime + ' ~ ' + (v.endTime || '至今'); html += ` ${versionBadge} ${timeRange} ${v.accuracy}% ${v.confirmedCount} ${v.excludedCount} ${v.totalCount} `; } tbody.innerHTML = html; } ``` --- #### 1.7 JavaScript — Mock数据新增在 `ruleDatabase` 中为已上线规则新增准确率相关数据： ```javascript // 新增准确率数据结构（按规则编码索引） const accuracyDataMap = { 'GZ177019905698527': { currentVersion: 'V1', versions: [ { version: 'V1', accuracy: 45.0, confirmedCount: 54, excludedCount: 66, totalCount: 120, startTime: '2025-12-01', endTime: null // 当前版本 } ] }, 'GZ1716607905340192': { currentVersion: 'V5', versions: [ { version: 'V1', accuracy: 45.0, confirmedCount: 54, excludedCount: 66, totalCount: 120, startTime: '2025-12-29', endTime: '2026-01-06' }, { version: 'V2', accuracy: 58.3, confirmedCount: 75, excludedCount: 54, totalCount: 129, startTime: '2026-01-06', endTime: '2026-01-15' }, { version: 'V3', accuracy: 62.1, confirmedCount: 87, excludedCount: 53, totalCount: 140, startTime: '2026-01-15', endTime: '2026-01-20' }, { version: 'V4', accuracy: 70.5, confirmedCount: 119, excludedCount: 50, totalCount: 169, startTime: '2026-01-20', endTime: '2026-02-10' }, { version: 'V5', accuracy: 78.5, confirmedCount: 157, excludedCount: 43, totalCount: 200, startTime: '2026-02-10', endTime: null } ] } }; ``` --- #### 1.8 JavaScript — `renderAccuracyAnalysis(ruleCode)` ```javascript function renderAccuracyAnalysis(ruleCode) { const container = document.getElementById('accuracyAnalysisContent'); const data = accuracyDataMap[ruleCode]; if (!data || !data.versions || data.versions.length === 0) { container.innerHTML = `

暂无准确率数据。

`; return; } const currentV = data.versions.find(v => v.version === data.currentVersion) || data.versions[data.versions.length - 1]; // 渲染卡片 // ...（HTML结构见1.3节） // 渲染趋势图 renderVersionAccuracyChart(data.versions); // 渲染明细表 renderAccuracyDetailTable(data.versions, data.currentVersion); } ``` --- #### 1.9 JavaScript — 修改 `loadRuleData()` 在 `loadRuleData()` 末尾（版本历史渲染之后）增加： ```javascript // 渲染准确率分析Tab renderAccuracyAnalysis(code); ``` --- #### 1.10 Tab切换联动当用户切换到"准确率分析"Tab时，确保图表正确渲染（Canvas需要在可见状态下才能正确获取尺寸）： ```javascript document.getElementById('accuracy-tab').addEventListener('shown.bs.tab', function () { const code = currentRuleCode; // 重新渲染图表以适应容器宽度 const canvas = document.getElementById('versionAccuracyChart'); if (canvas && canvas.__chart) { canvas.__chart.resize(); } }); ``` --- ### 2. `规则统计分析.html` #### 2.1 左侧菜单新增入口 **位置**：运营管理菜单下（约 line 234），在"风控效能分析"之后、"规则分组管理"之前。 ```html

规则准确率分析

``` **改动后的运营管理菜单顺序**： 1. 规则统计分析 2. 疑点统计分析 3. 风控效能分析 4. **规则准确率分析** ← 新增 5. 规则分组管理 6. 风险主题管理 7. 消息模板管理 8. 已排除疑点汇总 > 注：其他含运营管理菜单的页面（如效能分析看板.html、疑点统计分析.html等）也需同步新增此菜单项，保持菜单一致性。 --- ### 3. `规则准确率分析.html`（新增页面） #### 3.1 页面入口风控运营管理 → 规则准确率分析 #### 3.2 页面结构 ```html 规则准确率分析 - 全知业务数字化治理平台

规则准确率排行榜共 0 条规则

排名	规则名称	规则编号	规则类型	当前版本	准确率	已确认	已排除	操作

准确率趋势对比

最多选择5条规则进行对比

请选择要对比的规则（最多5条）

从排行榜点击"加入对比"，或使用上方搜索框

``` --- #### 3.3 左侧菜单运营管理菜单完整结构（与其他页面保持一致）： ```html

``` 当前页面菜单项高亮：`active` 类加在"规则准确率分析"上。 --- #### 3.4 准确率排行榜渲染排行榜每行新增"加入对比"操作列，用于向趋势图添加规则。 ```javascript function renderRankingTable() { const tbody = document.getElementById('rankingBody'); document.getElementById('totalCount').textContent = filteredData.length; // ...分页逻辑... pageData.forEach((item, index) => { // ...排名、准确率颜色、类型标签渲染... // "加入对比"按钮状态判断 const isInCompare = selectedCompareRules.some(r => r.ruleId === item.ruleId); let compareBtn = ''; if (isInCompare) { compareBtn = ''; } else if (item.accuracy === null) { compareBtn = ''; } else if (selectedCompareRules.length >= 5) { compareBtn = ''; } else { compareBtn = ''; } html += ''; // ...排名、规则名称链接、编号、类型、版本、准确率、已确认、已排除... html += '' + compareBtn + ''; html += ''; }); } ``` **分页增强**：支持"每页显示"选择器（10/20/50/全部），默认20条。超过7页时省略中间页码。 --- #### 3.5 趋势对比图 — 规则选择方式 **交互流程**： 1. **排行榜添加**：用户点击排行榜某行的"加入对比"按钮 → 该规则添加到 `selectedCompareRules` 数组 → 按钮变为"已加入" → 已选标签区更新 → 趋势图重新渲染 2. **搜索框添加**：用户在趋势图区域搜索框输入关键词 → **实时搜索**（input事件，无需回车）→ 下拉匹配结果每行显示"+ 对比"按钮 → 点击按钮添加 → 搜索框清空、下拉收起 3. **移除规则**：点击已选标签的×按钮 → 从 `selectedCompareRules` 移除 → 排行榜按钮恢复 → 趋势图重新渲染 4. **清空所有**：点击"清空"标签 → 清空 `selectedCompareRules` → 所有排行榜按钮恢复 **搜索框交互细节**： - 输入即搜索，绑定 `input` 事件 - 搜索范围：规则名称 + 规则编号 - 排除已选规则和无准确率数据的规则 - 每行显示：规则名称（上方）+ 规则编号（下方）+ "+ 对比"按钮（右侧） - 最多显示8条匹配结果 - 点击"+ 对比"按钮后，搜索框清空、下拉收起 - 点击页面其他区域自动收起下拉（document click事件监听） **已选规则标签展示**： - 每个标签：彩色圆点 + 规则名称 + ×删除按钮 - 颜色与趋势图折线颜色一致（5色循环：蓝、绿、橙、红、灰） - 末尾显示虚线边框"清空"标签，点击一键移除所有 **趋势图配置要点**： - `spanGaps: true`：折线跳过null值保持连续，避免断裂 - 版本标签插件：自定义Chart.js插件，在每个数据点上方绘制版本号（V1、V2等），颜色与折线一致 - Tooltip格式：`规则名称 [版本号]: 准确率%` **状态管理**： ```javascript let selectedCompareRules = []; // 已选对比规则数组 function addToCompare(ruleId) { if (selectedCompareRules.length >= 5) return; const rule = allRulesAccuracy.find(r => r.ruleId === ruleId); if (!rule || rule.accuracy === null) return; selectedCompareRules.push(rule); renderSelectedTags(); renderComparisonChart(); renderRankingTable(); // 刷新按钮状态 } ``` --- #### 3.6 筛选与交互 **新增关键词搜索**：筛选区增加"搜索规则名称/编号"输入框，支持回车触发查询。 **准确率分布摘要**：筛选区下方新增色块摘要栏，展示各准确率区间规则数量。点击某区间自动联动筛选。**分布摘要的统计独立于准确率区间筛选**——只根据规则类型、业务域、关键词三个条件过滤，确保无论选中哪个区间，四个色块的数字始终保持不变。 ```javascript // 分布摘要渲染（独立于准确率筛选） function renderDistribution() { const ruleType = document.getElementById('filterRuleType').value; const domain = document.getElementById('filterDomain').value; const keyword = document.getElementById('filterKeyword').value.trim().toLowerCase(); const counts = { high: 0, medium: 0, low: 0, none: 0 }; allRulesAccuracy.forEach(item => { if (ruleType && item.ruleType !== ruleType) return; if (domain && item.businessDomain !== domain) return; if (keyword && !item.ruleName.toLowerCase().includes(keyword) && !item.ruleCode.toLowerCase().includes(keyword)) return; counts[getAccuracyLevel(item.accuracy)]++; }); // 渲染4个色块：高(绿)、中(橙)、低(红)、无数据(灰) } // 点击分布摘要联动筛选 function filterByDistribution(level) { if (activeDistributionLevel === level) { activeDistributionLevel = null; // 取消筛选 document.getElementById('filterAccuracy').value = ''; } else { activeDistributionLevel = level; document.getElementById('filterAccuracy').value = level; } applyFilters(); } // 查询按钮（含关键词） document.getElementById('btnSearch').addEventListener('click', applyFilters); function applyFilters() { const ruleType = document.getElementById('filterRuleType').value; const domain = document.getElementById('filterDomain').value; const accuracyLevel = document.getElementById('filterAccuracy').value; const keyword = document.getElementById('filterKeyword').value.trim().toLowerCase(); filteredData = allRulesAccuracy.filter(item => { if (ruleType && item.ruleType !== ruleType) return false; if (domain && item.businessDomain !== domain) return false; if (accuracyLevel && getAccuracyLevel(item.accuracy) !== accuracyLevel) return false; if (keyword && !item.ruleName.toLowerCase().includes(keyword) && !item.ruleCode.toLowerCase().includes(keyword)) return false; return true; }); // 排序、渲染... } ``` --- #### 3.7 Mock数据 ```javascript const allRulesAccuracy = [ { ruleId: 'GZ1716607905340192', ruleName: '投标文件围标识别', ruleCode: 'CJ-001-01', ruleType: 'AI规则', businessDomain: '供应链域', currentVersion: 'V5', accuracy: 78.5, confirmedCount: 157, excludedCount: 43, versions: [ { version: 'V1', accuracy: 45.0, publishTime: '2025-12-29' }, { version: 'V2', accuracy: 58.3, publishTime: '2026-01-06' }, { version: 'V3', accuracy: 62.1, publishTime: '2026-01-15' }, { version: 'V4', accuracy: 70.5, publishTime: '2026-01-20' }, { version: 'V5', accuracy: 78.5, publishTime: '2026-02-10' } ] }, { ruleId: 'GZ177019905698527', ruleName: '差旅费伙食补助人数校验', ruleCode: 'CW-002-01', ruleType: '普通规则', businessDomain: '财务域', currentVersion: 'V1', accuracy: 65.0, confirmedCount: 78, excludedCount: 42, versions: [ { version: 'V1', accuracy: 65.0, publishTime: '2026-01-15' } ] }, { ruleId: 'GZ1723456789012345', ruleName: '合同审批流程缺失检测', ruleCode: 'CW-003-01', ruleType: 'AI规则', businessDomain: '合同管理域', currentVersion: 'V3', accuracy: 52.3, confirmedCount: 47, excludedCount: 43, versions: [ { version: 'V1', accuracy: 38.0, publishTime: '2026-02-01' }, { version: 'V2', accuracy: 45.5, publishTime: '2026-03-10' }, { version: 'V3', accuracy: 52.3, publishTime: '2026-04-20' } ] }, { ruleId: 'GZ1734567890123456', ruleName: '供应商资质过期预警', ruleCode: 'CJ-004-01', ruleType: '普通规则', businessDomain: '供应链域', currentVersion: 'V2', accuracy: 82.0, confirmedCount: 82, excludedCount: 18, versions: [ { version: 'V1', accuracy: 70.0, publishTime: '2026-01-20' }, { version: 'V2', accuracy: 82.0, publishTime: '2026-03-05' } ] }, { ruleId: 'GZ1745678901234567', ruleName: '报销金额异常检测', ruleCode: 'CW-005-01', ruleType: 'AI规则', businessDomain: '财务域', currentVersion: 'V1', accuracy: null, // 无数据 confirmedCount: 0, excludedCount: 0, versions: [] } ]; ``` --- ## CSS样式改动新增页面 `规则准确率分析.html` 复用 `common-styles.css` 和效能分析看板的已有样式，无需新增CSS变量或组件样式。如需微调，仅增加以下辅助样式： ```css /* 排行榜排名序号 */ .rank-number { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; font-size: 12px; font-weight: 600; } .rank-top1 { background: #FFD700; color: #fff; } .rank-top2 { background: #C0C0C0; color: #fff; } .rank-top3 { background: #CD7F32; color: #fff; } /* 规则类型标签 */ .rule-type-tag { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 12px; font-weight: 500; } .rule-type-ai { background: #ecf5ff; color: #409EFF; } .rule-type-normal { background: #f0f9eb; color: #67C23A; } /* 准确率颜色 */ .accuracy-high { color: #67C23A; font-weight: 600; } .accuracy-medium { color: #E6A23C; font-weight: 600; } .accuracy-low { color: #F56C6C; font-weight: 600; } .accuracy-none { color: #909399; } ``` --- ## 接口依赖 | 接口 | 方法 | 说明 | |------|------|------| | `/core/riskRule/versionAccuracy` | GET | 单规则各版本准确率（参数：ruleId） | | `/core/riskRule/accuracyRanking` | GET | 全局准确率排行（参数：ruleType, businessDomain, accuracyLevel, pageNum, pageSize） | | `/core/riskRule/accuracyTrend` | GET | 多规则趋势对比（参数：ruleIds） | --- ## 测试要点 ### 规则详情页 — 准确率分析Tab | 测试项 | 说明 | |--------|------| | Tab显示条件 | 已上线规则显示该Tab，草稿/审核中规则隐藏 | | 卡片数据 | 当前版本准确率、已确认数、已排除数正确 | | 趋势图渲染 | 各版本数据点正确，当前版本高亮 | | 趋势图交互 | 悬停显示tooltip（版本号、准确率、疑点总数、时间区间） | | 明细表数据 | 各版本行数据准确，时间区间计算正确 | | 当前版本行 | 浅蓝背景 + "当前"标记 | | 准确率颜色 | ≥70%绿色、50%~70%橙色、<50%红色 | | 无数据状态 | 无准确率数据时显示空状态提示 | | 仅1个版本 | 单个数据点 + 提示"暂无历史版本可对比" | ### 全局规则准确率分析页 | 测试项 | 说明 | |--------|------| | 菜单入口 | 左侧菜单"规则准确率分析"入口正常，与其他页面菜单一致 | | 筛选功能 | 规则类型、业务域、准确率区间、关键词搜索筛选生效 | | 准确率分布摘要 | 各区间数量统计正确，点击可联动筛选，再次点击取消 | | 分布摘要独立性 | 点击"中"后，高/低/无数据数字保持不变 | | 排行榜排序 | 按准确率降序，无数据排最后 | | 规则编号格式 | 显示为GZ+10位数字（如GZ1716607905） | | 规则名称跳转 | 点击规则名称跳转至规则详情页 | | 准确率颜色 | 排行榜中准确率颜色标识正确 | | 加入对比按钮 | 可添加→点击后变"已加入"；无数据→禁用；达到5条→禁用 | | 从排行榜添加 | 点击"加入对比"后趋势图自动更新 | | 搜索框实时搜索 | 输入即搜索（input事件），无需回车 | | 搜索结果按钮 | 每行显示"+ 对比"按钮，点击后添加 | | 已选标签 | 标签显示正确，可单个删除或一键清空 | | 折线连续性 | spanGaps=true，折线跳过null值保持连续，无断裂点 | | 版本标签 | 数据点上方显示版本号（V1、V2等），颜色与折线一致 | | Tooltip格式 | 显示"规则名称 [版本号]: 准确率%" | | 时间轴对齐 | 不同规则版本按发布时间在X轴上正确定位 | | 空状态 | 未选择规则时显示引导提示 | | 分页 | 分页功能正常，支持每页10/20/50/全部切换 | | 100+规则场景 | 排行榜分页正常，搜索响应流畅 | ### 菜单一致性 | 测试项 | 说明 | |--------|------| | 菜单顺序 | 运营管理下菜单顺序一致：规则统计分析 → 疑点统计分析 → 风控效能分析 → 规则准确率分析 → 规则分组管理 → 风险主题管理 → 消息模板管理 → 已排除疑点汇总 | | 高亮状态 | 当前页面菜单项正确高亮 |