# 疑点统计分析页面 - 页面改动说明
## 1. 改动概述
新增疑点统计分析页面，需对以下内容进行改动：
| 页面 | 改动类型 | 说明 |
| :--- | :--- | :--- |
| 新增：疑点统计分析.html | 新增 | 疑点统计分析主页面 |
| 左侧菜单 | 修改 | 添加疑点统计分析菜单入口 |
## 2. 具体改动
### 2.1 新增疑点统计分析.html
**页面结构**：
```html
疑点统计分析
```
### 2.2 左侧菜单改动
在风控运营管理下新增菜单项：
```html
疑点统计分析
```
## 3. CSS样式改动
新增样式：
```css
.stats-overview {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 20px;
margin-bottom: 24px;
}
.stat-card {
background: linear-gradient(135deg, #409EFF 0%, #66b1ff 100%);
border-radius: 8px;
padding: 24px;
text-align: center;
color: #fff;
}
.stat-value {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 8px;
}
.stat-label {
font-size: 14px;
opacity: 0.9;
}
.trend-section,
.rule-ranking-section,
.domain-distribution-section {
background: #fff;
border-radius: 8px;
padding: 20px;
margin-bottom: 20px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
```
## 4. JavaScript改动
### 4.1 数据加载
```javascript
function loadStatistics() {
const params = getFilterParams();
fetchStatisticsData(params).then(data => {
renderOverview(data);
renderTrendChart(data.trendData);
renderRuleRanking(data.ruleRanking);
renderDomainDistribution(data.domainDistribution);
});
}
```
### 4.2 图表渲染
```javascript
// 使用ECharts渲染图表
function renderTrendChart(data) {
const chart = echarts.init(document.getElementById('trendChart'));
chart.setOption({
title: { text: '疑点发生趋势' },
xAxis: { type: 'category', data: data.map(d => d.date) },
yAxis: { type: 'value' },
series: [{
type: 'line',
data: data.map(d => d.count),
smooth: true
}]
});
}
```
## 5. 兼容性说明
- 页面采用响应式设计，适配PC和移动端
- 使用Bootstrap 5框架，保证样式兼容性
- 图表使用ECharts，支持主流浏览器
## 6. 测试要点
| 测试项 | 说明 |
| :--- | :--- |
| 数据加载 | 确认页面打开时正确加载统计数据 |
| 筛选功能 | 确认筛选条件能正确刷新数据 |
| 图表展示 | 确认趋势图、饼图等正常显示 |
| 权限控制 | 确认导出按钮仅管理员可见 |
| 响应式布局 | 确认不同屏幕尺寸下显示正常 |