# 业务场景运营看板 - 页面改动说明

## 1. 文档目的

本文档记录"业务场景运营看板"功能在原型Demo中的页面范围、具体改动点、布局方案和交互细节，便于开发实现和后续迭代。

---

## 2. 本次改动概述

在业务场景详情页新增"运营看板"Tab，包含四个区域：疑点总览、风控指标、疑点趋势、规则分布。

---

## 3. 涉及页面

| 文件 | 改动类型 | 说明 |
|------|----------|------|
| `风险场景详情和编辑页面.html` | 修改 | 新增运营看板Tab及全部内容 |

---

## 4. 改动说明

### 4.1 新增Tab

在现有Tab导航中新增"运营看板"Tab：

```html
<div class="scene-tab" data-tab="dashboard">
    <i class="fa fa-bar-chart"></i>运营看板
</div>
```

Tab顺序：基础信息 → 覆盖图谱 → 运营看板

### 4.2 运营看板整体布局

```
┌──────────────────────────────────────────────────────────────────────┐
│  [基础信息]  [覆盖图谱]  [运营看板]                                    │
├──────────────────────────────────────────────────────────────────────┤
│                                                                      │
│  ┌── 疑点总览 ──────────────────────────────────────────────────┐   │
│  │                                                               │   │
│  │  ┌─────────────────────┐  ┌──────────┐ ┌──────────┐         │   │
│  │  │                     │  │关联规则数 │ │ 待处理   │         │   │
│  │  │   处置完成率         │  │  12      │ │  156    │         │   │
│  │  │   87.9%             │  ├──────────┤ ├──────────┤         │   │
│  │  │   ████████░░ 87.9%  │  │累计疑点  │ │近30天新增│         │   │
│  │  │   已处置 1,130      │  │  1,286   │ │  243    │         │   │
│  │  │   累计 1,286        │  └──────────┘ └──────────┘         │   │
│  │  └─────────────────────┘                                     │   │
│  └───────────────────────────────────────────────────────────────┘   │
│                                                                      │
│  ┌── 风控指标 ──────────────────────────────────────────────────┐   │
│  │  ┌──────────────┐ ┌──────────────┐ ┌──────────────┐         │   │
│  │  │风险识别准确率 │ │决策自动化率   │ │无效告警减少  │         │   │
│  │  │  72.5%       │ │  68.3%       │ │  65.1%       │         │   │
│  │  │已确认725     │ │绿灯4520      │ │基期35.0%     │         │   │
│  │  │已甄别1,000   │ │+黄灯2310     │ │→当期12.2%    │         │   │
│  │  │              │ │/总数10,000   │ │              │         │   │
│  │  └──────────────┘ └──────────────┘ └──────────────┘         │   │
│  └───────────────────────────────────────────────────────────────┘   │
│                                                                      │
│  ┌── 疑点趋势 ──────────────────────────────────────────────────┐   │
│  │  [近30天] [近90天]        [新增与关闭] [按响应等级]            │   │
│  │                                                               │   │
│  │  ┌───────────────────────────────────────────────────────┐   │   │
│  │  │                    趋势图                              │   │   │
│  │  └───────────────────────────────────────────────────────┘   │   │
│  └───────────────────────────────────────────────────────────────┘   │
│                                                                      │
│  ┌── 规则分布 ──────────────────────────────────────────────────┐   │
│  │  [甄别视角] [处置视角]                                        │   │
│  │                                                               │   │
│  │  差旅费用超标检测  ████████████████████  320条                 │   │
│  │  发票重复报销校验  █████████████████     265条                 │   │
│  │  审批流程合规检查  ████████████          198条                 │   │
│  │  ...                                                          │   │
│  │                                                               │   │
│  │  图例：■ 已确认  ■ 已排除  ■ 待甄别                           │   │
│  └───────────────────────────────────────────────────────────────┘   │
│                                                                      │
└──────────────────────────────────────────────────────────────────────┘
```

---

### 4.3 区域一：疑点总览

#### 布局

左右分栏布局（grid 1fr 2fr）：
- **左侧**：处置完成率主指标卡片
- **右侧**：2×2 KPI卡片网格

#### 主指标卡片 — 处置完成率

| 属性 | 说明 |
|------|------|
| 样式 | 紫蓝渐变背景（#667eea → #764ba2），圆角12px，内含装饰圆形 |
| 内容 | 标签"处置完成率"、大号百分比数值（42px）、进度条、"已处置 X / 累计 Y" |

#### KPI卡片排列

| 第1行 | 第2行 |
|-------|-------|
| 关联规则数（蓝） | 累计疑点（蓝） |
| 待处理（橙） | 近30天新增（蓝） |

每张卡片仅包含：图标、标签、数值。不含明细文字和钻取链接。

---

### 4.4 区域二：风控指标

#### 布局

3列等宽卡片网格。

#### 卡片设计

| 卡片 | 左边框 | 内容 |
|------|--------|------|
| 风险识别准确率 | 绿 #67C23A | 百分比 + "已确认 X / 已甄别 Y" |
| 决策自动化率 | 绿 #67C23A | 百分比 + "绿灯 X + 黄灯 Y / 总数 Z" |
| 无效告警减少比例 | 绿 #67C23A | 百分比 + "基期 X% → 当期 Y%" + 基期时间范围（小字灰色） |

不显示"达标"/"未达标"徽章，不显示"目标 ≥X%"，不显示"查看计算明细"链接。

---

### 4.5 区域三：疑点趋势

#### 控件布局

两个 Segmented Control 同行排列，左对齐时间段、右对齐维度切换：

```
[近30天] [近90天]              [新增与处置] [按响应等级]
```

#### 时间段选择

| 选项 | 粒度 | X轴标签 | 数据点 |
|------|------|---------|--------|
| 近30天 | 按天 | M/D（如 5/7, 5/8） | 30 |
| 近90天 | 按周 | 第N周 | 约13 |

不包含当前未完成的天。例如当前6月5日，近30天为5月7日~6月4日。

#### 维度切换

**新增与关闭**：
- 新增（蓝 #409EFF，实线，面积填充）
- 已关闭（绿 #67C23A，实线，面积填充）

**按响应等级**：
- 绿灯（绿 #67C23A，实线，面积填充）
- 黄灯（黄 #F5C842，实线，面积填充）
- 红灯（红 #F56C6C，实线，面积填充）

#### 图表规格

| 属性 | 说明 |
|------|------|
| 类型 | 折线图（面积填充） |
| 高度 | 260px |
| 样式 | 圆点标记，tension 0.3，填充透明度 0.08 |
| 图例 | 顶部居中，圆点样式 |

---

### 4.6 区域四：规则分布

#### 视角切换

右上角 Segmented Control（与趋势图切换控件样式一致）：

```
[甄别视角] [处置视角]
```

#### 两种视角

**甄别视角**：

| 颜色 | 含义 |
|------|------|
| 绿 #67C23A | 已确认疑点 |
| 灰 #909399 | 已排除 |
| 橙 #E6A23C | 待甄别 |

**处置视角**：

| 颜色 | 含义 |
|------|------|
| 灰 #909399 | 已关闭 |
| 绿 #67C23A | 加白名单 |
| 蓝 #409EFF | 待分派疑点 |
| 橙 #E6A23C | 待处置 |

#### 图表形式

横向堆叠条形图（鱼骨图）：
- 左侧：规则名称（宽度200px，右对齐，溢出省略）
- 右侧：堆叠条形 + 总数标签
- 底部：图例
- 数据按疑点数量降序，取前8条规则

---

### 4.7 区块间距

四个区块之间的间距增大，使分区更明显：

```css
.dashboard-section-block {
    padding-top: 32px;
    margin-bottom: 8px;
    border-top: 1px solid #f0f0f0;
}
.dashboard-section-block:first-child {
    padding-top: 0;
    border-top: none;
}
```

---

### 4.8 Segmented Control 组件规范

趋势图的时间段选择、维度切换，以及规则分布的视角切换，统一使用以下样式：

```css
.segmented-control {
    display: inline-flex;
    gap: 0;
    border: 1px solid #DCDFE6;
    border-radius: 4px;
    overflow: hidden;
}
.segmented-control .seg-btn {
    padding: 5px 14px;
    font-size: 12px;
    border: none;
    background: #fff;
    color: #606266;
    cursor: pointer;
    transition: all 0.2s;
}
.segmented-control .seg-btn:not(:last-child) {
    border-right: 1px solid #DCDFE6;
}
.segmented-control .seg-btn.active {
    background: #667eea;
    color: #fff;
}
.segmented-control .seg-btn:hover:not(.active) {
    color: #667eea;
}
```

---

### 4.9 Tab懒加载

运营看板Tab采用懒加载：首次点击时渲染图表，后续切换不重复渲染。

```javascript
var dashboardRendered = false;

function renderDashboard() {
    if (dashboardRendered) return;
    dashboardRendered = true;
    renderDoubtTrendChart('30', 'flow');
    renderFishbone('identify');
}
```

---

### 4.10 空状态

| 场景 | 提示 |
|------|------|
| 场景未关联规则 | "该场景暂未关联规则，请先在基础信息中关联规则" |
| 无疑点数据 | "该场景暂无疑点数据" |

---

## 5. 版本历史

| 版本 | 日期 | 修改内容 |
|------|------|----------|
| v1.0 | 2026-06-05 | 初始版本 |
| v1.1 | 2026-06-05 | 趋势图"新增与处置"改为"新增与关闭"，去掉待处理线；黄灯颜色改为 #F5C842；规则分布处置视角已关闭改灰、加白名单改绿、待分派改为待分派疑点；去掉KPI卡片明细和钻取链接；去掉风控指标"查看计算明细"；删除钻取跳转章节 |