# Salesforce集成统计监控页面设计原型

## 1. 页面概述

### 1.1 页面名称
Salesforce集成统计监控大屏

### 1.2 页面定位
统一展示Salesforce数据集成系统的各项统计指标，包括API调用、批次同步、元数据变更、对象状态和数据同步日志等核心数据，为运维人员和业务人员提供实时的系统运行状态监控。

### 1.3 访问权限
- 需要具备以下任一权限：
  - integration:apilog:statistics - API调用日志统计权限
  - integration:batch:statistics - 批次同步统计权限
  - integration:change:statistics - 元数据变更统计权限
  - integration:object:statistics - 对象统计权限
  - integration:synclog:query - 同步日志查询权限

---

## 2. 页面布局设计

### 2.1 整体布局结构
```
┌─────────────────────────────────────────────────────────────────────────┐
│                          页面标题栏                                        │
│  Salesforce集成统计监控大屏                            [刷新] [导出] [设置] │
├─────────────────────────────────────────────────────────────────────────┤
│  筛选条件区                                                                │
│  [时间范围选择器] [对象选择] [操作类型] [状态筛选] [查询] [重置]             │
├─────────────────────────────────────────────────────────────────────────┤
│  ┌─────────────────────┐ ┌─────────────────────┐ ┌─────────────────────┐ │
│  │   API调用统计卡片    │ │   对象状态统计卡片   │ │   批次同步统计卡片    │ │
│  └─────────────────────┘ └─────────────────────┘ └─────────────────────┘ │
│  ┌─────────────────────┐ ┌─────────────────────┐ ┌─────────────────────┐ │
│  │  元数据变更统计卡片  │ │  同步日志统计卡片    │ │   系统健康度卡片     │ │
│  └─────────────────────┘ └─────────────────────┘ └─────────────────────┘ │
├─────────────────────────────────────────────────────────────────────────┤
│  ┌─────────────────────────────────────────────────────────────────────┐ │
│  │                      API调用趋势图表                                   │ │
│  │  [折线图：调用次数/成功率/平均响应时间]                                 │ │
│  └─────────────────────────────────────────────────────────────────────┘ │
├─────────────────────────────────────────────────────────────────────────┤
│  ┌─────────────────────────────┐ ┌─────────────────────────────────────┐ │
│  │      对象状态分布图          │ │        操作类型分布图               │ │
│  │  [饼图：启用/禁用/增量/全量]  │ │  [柱状图：INSERT/UPDATE/DELETE]    │ │
│  └─────────────────────────────┘ └─────────────────────────────────────┘ │
├─────────────────────────────────────────────────────────────────────────┤
│  ┌─────────────────────────────────────────────────────────────────────┐ │
│  │                      最近同步记录列表                                 │ │
│  │  [表格：批次ID | 对象 | 操作类型 | 状态 | 记录数 | 开始时间 | 执行时长] │
│  └─────────────────────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────────────────┘
```

### 2.2 响应式布局
- **桌面端（≥1920px）**：三列布局，完整展示所有统计卡片
- **平板端（768px-1919px）**：两列布局，统计卡片自适应排列
- **移动端（<768px）**：单列布局，统计卡片垂直堆叠，支持横向滚动查看图表

---

## 3. 统计卡片设计

### 3.1 API调用统计卡片
**对应接口**：`GET /integration/apilog/statistics`

**展示指标**：
- 总调用次数
- 成功次数 / 失败次数
- 成功率（百分比）
- 平均执行时间（毫秒）
- 最大执行时间 / 最小执行时间
- 今日调用次数（对比昨日增长率）

**筛选条件**：
- API类型（下拉选择）
- 连接类（下拉选择）
- 方法名（下拉选择）
- 状态（成功/失败/全部）
- 时间范围（快捷选项：今日/昨日/最近7天/最近30天/自定义）

**交互功能**：
- 点击卡片跳转到API调用日志详情页
- 悬停显示各API类型的调用占比
- 点击指标可查看详细数据

**API请求示例**：
```javascript
GET /integration/apilog/statistics?apiType=SOAP&status=SUCCESS&startTime=2025-12-29 00:00:00&endTime=2025-12-30 23:59:59
```

### 3.2 对象状态统计卡片
**对应接口**：`GET /integration/object/statistics`

**展示指标**：
- 总对象数
- 启用对象数 / 禁用对象数
- 启用率（百分比）
- 增量同步对象数 / 全量同步对象数
- 增量率（百分比）
- 自定义对象数 / 标准对象数
- 自定义率（百分比）
- 同步成功对象数 / 同步失败对象数
- 成功率（百分比）
- 总数据行数
- 最新同步日期

**交互功能**：
- 点击卡片跳转到对象管理页面
- 悬停显示对象类型分布
- 点击指标可查看对应对象列表

**API请求示例**：
```javascript
GET /integration/object/statistics
```

### 3.3 批次同步统计卡片
**对应接口**：`GET /integration/batch/{id}/statistics`

**展示指标**：
- 当前批次ID
- 批次状态（待执行/执行中/已完成/失败）
- 总记录数
- 成功记录数 / 失败记录数
- 成功率（百分比）
- 开始时间 / 结束时间
- 执行时长（分钟）
- 平均处理速度（记录/分钟）

**筛选条件**：
- 批次ID（输入框，支持搜索）
- 批次状态（下拉选择）

**交互功能**：
- 点击卡片跳转到批次详情页
- 悬停显示批次执行进度
- 实时更新执行状态

**API请求示例**：
```javascript
GET /integration/batch/123/statistics
```

### 3.4 元数据变更统计卡片
**对应接口**：`GET /integration/change/statistics`

**展示指标**：
- 总变更次数
- 对象变更次数 / 字段变更次数
- INSERT操作次数 / UPDATE操作次数 / DELETE操作次数
- 已同步变更数 / 未同步变更数
- 同步率（百分比）
- 自定义对象变更数 / 标准对象变更数

**筛选条件**：
- 变更类型（对象/字段/全部）
- 操作类型（INSERT/UPDATE/DELETE/全部）
- 对象API（下拉选择，支持搜索）
- 同步状态（已同步/未同步/全部）
- 是否自定义（是/否/全部）
- 时间范围（快捷选项：今日/昨日/最近7天/最近30天/自定义）

**交互功能**：
- 点击卡片跳转到元数据变更列表页
- 悬停显示变更类型分布
- 点击指标可查看对应变更记录

**API请求示例**：
```javascript
GET /integration/change/statistics?changeType=OBJECT&operationType=INSERT&syncStatus=false&startTime=2025-12-29 00:00:00&endTime=2025-12-30 23:59:59
```

### 3.5 同步日志统计卡片
**对应接口**：`GET /integration/synclog/statistics`

**展示指标**：
- 总日志数
- INSERT操作次数 / UPDATE操作次数 / DELETE操作次数
- 成功操作数 / 失败操作数
- 成功率（百分比）
- 今日同步记录数
- 平均执行时间

**筛选条件**：
- 批次ID（下拉选择）
- 对象API（下拉选择，支持搜索）
- 操作类型（INSERT/UPDATE/DELETE/全部）
- 操作状态（成功/失败/全部）
- 部门ID（下拉选择）
- 时间范围（快捷选项：今日/昨日/最近7天/最近30天/自定义）

**交互功能**：
- 点击卡片跳转到同步日志列表页
- 悬停显示操作类型分布
- 点击指标可查看对应日志记录

**API请求示例**：
```javascript
GET /integration/synclog/statistics?operationType=INSERT&operationStatus=SUCCESS&startTime=2025-12-29 00:00:00&endTime=2025-12-30 23:59:59
```

### 3.6 系统健康度卡片
**综合指标**：
- 整体系统健康评分（0-100分）
- API可用性（百分比）
- 数据同步成功率（百分比）
- 元数据同步率（百分比）
- 最近24小时告警数
- 系统运行状态（正常/警告/异常）

**计算逻辑**：
- 健康评分 = (API成功率 × 0.3) + (数据同步成功率 × 0.3) + (元数据同步率 × 0.2) + (可用性 × 0.2)
- 状态判定：
  - 正常：健康评分 ≥ 90 且 告警数 = 0
  - 警告：80 ≤ 健康评分 < 90 或 告警数 > 0
  - 异常：健康评分 < 80

**交互功能**：
- 点击卡片跳转到系统告警页面
- 悬停显示各维度评分详情
- 实时更新健康状态

---

## 4. 图表设计

### 4.1 API调用趋势图
**图表类型**：多轴折线图

**X轴**：时间（小时/天/周，根据时间范围自动调整）

**Y轴（左）**：调用次数

**Y轴（右）**：成功率（%）、平均响应时间（ms）

**数据系列**：
- 调用次数（柱状图）
- 成功率（折线图，绿色）
- 平均响应时间（折线图，蓝色）

**交互功能**：
- 鼠标悬停显示详细数据
- 点击图例隐藏/显示数据系列
- 支持缩放和平移

**数据来源**：API调用日志统计数据，按时间维度聚合

### 4.2 对象状态分布图
**图表类型**：环形图

**数据维度**：
- 启用对象 / 禁用对象
- 增量同步 / 全量同步
- 自定义对象 / 标准对象

**交互功能**：
- 点击扇区跳转到对应对象列表
- 悬停显示数量和百分比
- 支持切换不同维度

**数据来源**：对象统计数据

### 4.3 操作类型分布图
**图表类型**：堆叠柱状图

**X轴**：对象API或时间

**Y轴**：操作次数

**数据系列**：
- INSERT操作（绿色）
- UPDATE操作（蓝色）
- DELETE操作（红色）

**交互功能**：
- 鼠标悬停显示详细数据
- 点击柱子跳转到对应操作日志
- 支持按对象或时间维度查看

**数据来源**：同步日志统计数据

### 4.4 元数据变更趋势图
**图表类型**：折线图

**X轴**：时间

**Y轴**：变更次数

**数据系列**：
- 对象变更（紫色）
- 字段变更（橙色）

**交互功能**：
- 鼠标悬停显示详细数据
- 支持时间范围筛选
- 点击数据点跳转到变更详情

**数据来源**：元数据变更统计数据

---

## 5. 数据表格设计

### 5.1 最近同步记录列表
**对应接口**：`GET /integration/batch/list`

**表格列**：
| 列名 | 字段 | 类型 | 说明 |
|------|------|------|------|
| 批次ID | id | Number | 主键，点击跳转详情 |
| 对象 | objectApi | String | 对象API名称 |
| 操作类型 | operationType | String | INSERT/UPDATE/DELETE |
| 状态 | status | String | 待执行/执行中/已完成/失败，带颜色标识 |
| 记录数 | recordCount | Number | 总记录数 |
| 成功数 | successCount | Number | 成功记录数 |
| 失败数 | failCount | Number | 失败记录数 |
| 开始时间 | startTime | DateTime | 批次开始时间 |
| 结束时间 | endTime | DateTime | 批次结束时间 |
| 执行时长 | duration | String | 格式：X分Y秒 |
| 操作 | - | - | 查看详情/重试/取消 |

**分页**：
- 每页显示：10/20/50条
- 默认排序：开始时间降序

**交互功能**：
- 点击行跳转到批次详情页
- 支持多选批量操作
- 列排序和筛选

---

## 6. 筛选条件区设计

### 6.1 时间范围选择器
**快捷选项**：
- 今日
- 昨日
- 最近7天
- 最近30天
- 本月
- 上月
- 自定义（日期时间范围选择器）

**默认值**：最近7天

### 6.2 对象选择器
**类型**：多选下拉框，支持搜索

**数据来源**：对象列表接口

**默认值**：全部对象

### 6.3 操作类型选择器
**类型**：多选下拉框

**选项**：
- INSERT
- UPDATE
- DELETE

**默认值**：全部

### 6.4 状态筛选器
**类型**：多选下拉框

**选项**：
- 成功
- 失败
- 待执行
- 执行中
- 已完成

**默认值**：全部

### 6.5 查询按钮
**功能**：应用所有筛选条件，刷新统计数据

### 6.6 重置按钮
**功能**：清空所有筛选条件，恢复默认值

---

## 7. 页面交互设计

### 7.1 数据刷新机制
- **自动刷新**：每60秒自动刷新一次统计数据
- **手动刷新**：点击刷新按钮立即刷新
- **实时更新**：WebSocket推送关键指标变化（如批次状态变更）

### 7.2 数据导出功能
- **导出格式**：Excel、CSV
- **导出内容**：当前筛选条件下的所有统计数据
- **导出范围**：
  - 导出当前页面数据
  - 导出全部数据

### 7.3 页面设置
- **显示配置**：可配置显示/隐藏哪些统计卡片
- **刷新频率**：可配置自动刷新间隔（30秒/60秒/120秒/关闭）
- **图表样式**：可配置图表主题（浅色/深色）

### 7.4 告警提示
- **告警规则**：
  - API成功率 < 95%
  - 数据同步成功率 < 90%
  - 批次执行失败
  - 元数据变更未同步超过24小时
- **提示方式**：
  - 页面顶部横幅提示
  - 统计卡片红色边框标识
  - 消息通知

---

## 8. API接口清单

### 8.1 统计接口列表

| 接口名称 | 请求方法 | 路径 | 权限 | 说明 |
|---------|---------|------|------|------|
| API调用日志统计 | GET | /integration/apilog/statistics | integration:apilog:statistics | 获取API调用统计信息 |
| 批次同步统计 | GET | /integration/batch/{id}/statistics | integration:batch:statistics | 获取指定批次的同步统计 |
| 元数据变更统计 | GET | /integration/change/statistics | integration:change:statistics | 获取元数据变更统计 |
| 对象统计 | GET | /integration/object/statistics | integration:object:statistics | 获取对象整体统计 |
| 对象同步统计 | GET | /integration/object/{id}/statistics | integration:object:statistics | 获取指定对象的同步统计 |
| 同步日志统计 | GET | /integration/synclog/statistics | integration:synclog:query | 获取同步日志统计 |
| 批次列表 | GET | /integration/batch/list | integration:batch:list | 获取批次列表 |

### 8.2 接口参数说明

#### API调用日志统计参数
| 参数名 | 类型 | 必填 | 说明 |
|--------|------|------|------|
| apiType | String | 否 | API类型（SOAP/REST） |
| connectionClass | String | 否 | 连接类名 |
| methodName | String | 否 | 方法名 |
| status | String | 否 | 状态（SUCCESS/FAILED） |
| startTime | String | 否 | 开始时间（格式：yyyy-MM-dd HH:mm:ss） |
| endTime | String | 否 | 结束时间（格式：yyyy-MM-dd HH:mm:ss） |

#### 元数据变更统计参数
| 参数名 | 类型 | 必填 | 说明 |
|--------|------|------|------|
| changeType | String | 否 | 变更类型（OBJECT/FIELD） |
| operationType | String | 否 | 操作类型（INSERT/UPDATE/DELETE） |
| objectApi | String | 否 | 对象API名称 |
| syncStatus | Boolean | 否 | 同步状态（true/false） |
| isCustom | Boolean | 否 | 是否自定义对象（true/false） |
| startTime | String | 否 | 开始时间（格式：yyyy-MM-dd HH:mm:ss） |
| endTime | String | 否 | 结束时间（格式：yyyy-MM-dd HH:mm:ss） |

#### 同步日志统计参数
| 参数名 | 类型 | 必填 | 说明 |
|--------|------|------|------|
| batchId | Integer | 否 | 批次ID |
| objectApi | String | 否 | 对象API名称 |
| operationType | String | 否 | 操作类型（INSERT/UPDATE/DELETE） |
| operationStatus | String | 否 | 操作状态（SUCCESS/FAILED） |
| deptId | Long | 否 | 部门ID |
| startTime | String | 否 | 开始时间（格式：yyyy-MM-dd HH:mm:ss） |
| endTime | String | 否 | 结束时间（格式：yyyy-MM-dd HH:mm:ss） |

---

## 9. 技术实现建议

### 9.1 前端技术栈
- **框架**：Vue 3 / React
- **UI组件库**：Element Plus / Ant Design
- **图表库**：ECharts / Chart.js
- **状态管理**：Pinia / Redux
- **HTTP客户端**：Axios
- **日期处理**：Day.js / Moment.js

### 9.2 数据缓存策略
- **统计数据缓存**：Redis缓存统计数据，TTL设置为5分钟
- **图表数据缓存**：前端缓存图表数据，减少重复请求
- **本地存储**：使用localStorage保存用户配置（刷新频率、显示配置等）

### 9.3 性能优化
- **懒加载**：图表组件懒加载，提升首屏加载速度
- **防抖节流**：筛选条件变化时使用防抖，避免频繁请求
- **虚拟滚动**：表格数据量大时使用虚拟滚动
- **按需加载**：按需加载ECharts图表类型

### 9.4 响应式设计
- 使用CSS Grid和Flexbox实现响应式布局
- 移动端适配：统计卡片垂直堆叠，图表横向滚动
- 断点设置：
  - 移动端：< 768px
  - 平板端：768px - 1919px
  - 桌面端：≥ 1920px



## 12. 附录

### 12.1 颜色规范
- **主色调**：#1890ff（蓝色）
- **成功色**：#52c41a（绿色）
- **警告色**：#faad14（橙色）
- **错误色**：#f5222d（红色）
- **信息色**：#1890ff（蓝色）
- **背景色**：#f0f2f5（浅灰）
- **卡片背景**：#ffffff（白色）

### 12.2 图标规范
- API调用：📊 或 chart-line
- 对象状态：📦 或 box
- 批次同步：🚀 或 rocket
- 元数据变更：🔄 或 refresh
- 同步日志：📝 或 document
- 系统健康：❤️ 或 heart
- 刷新：🔄 或 refresh
- 导出：📥 或 download
- 设置：⚙ 或 setting
- 查询：🔍 或 search

### 12.3 字体规范
- **标题字体**：PingFang SC, Microsoft YaHei, sans-serif, 18px, bold
- **正文字体**：PingFang SC, Microsoft YaHei, sans-serif, 14px, regular
- **数字字体**：DIN Alternate, Roboto Mono, monospace, 16px, medium
- **辅助文字**：PingFang SC, Microsoft YaHei, sans-serif, 12px, regular

---
