|
|
|
|
|
# 前端开发任务 - v2.1
|
|
|
|
|
|
|
|
|
|
|
|
**任务来源**: Agent Coordinator
|
|
|
|
|
|
**创建时间**: 2026-04-03
|
|
|
|
|
|
**优先级**: P0 - 紧急
|
|
|
|
|
|
**截止时间**: 2026-04-13
|
|
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
|
|
## 📋 任务概述
|
|
|
|
|
|
|
|
|
|
|
|
请开发金融数据中台 v2.1 的前端页面，包括告警管理、数据质量 Dashboard、WebSocket 测试工具。
|
|
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
|
|
## 📊 当前状态
|
|
|
|
|
|
|
|
|
|
|
|
| 模块 | 状态 |
|
|
|
|
|
|
|------|------|
|
|
|
|
|
|
| 后端开发 | ✅ 已完成（11 个文件，3500 行代码） |
|
|
|
|
|
|
| 前端开发 | ⏳ 待开始 |
|
|
|
|
|
|
| 测试 | ⏳ 待后端+前端完成后开始 |
|
|
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
|
|
## 🎯 开发任务
|
|
|
|
|
|
|
|
|
|
|
|
### 1. 告警管理页面（2 天）
|
|
|
|
|
|
|
|
|
|
|
|
**文件位置**: `frontend/src/views/alert/`
|
|
|
|
|
|
|
|
|
|
|
|
**页面清单**:
|
|
|
|
|
|
- `AlertList.vue` - 告警列表页面
|
|
|
|
|
|
- `AlertCreate.vue` - 创建告警表单
|
|
|
|
|
|
- `AlertEdit.vue` - 编辑告警表单
|
|
|
|
|
|
- `AlertHistory.vue` - 告警历史页面
|
|
|
|
|
|
- `AlertStats.vue` - 告警统计图表
|
|
|
|
|
|
|
|
|
|
|
|
**API 接口**:
|
|
|
|
|
|
```
|
|
|
|
|
|
POST /api/v2/alert/rules 创建告警
|
|
|
|
|
|
GET /api/v2/alert/rules 查询告警列表
|
|
|
|
|
|
GET /api/v2/alert/rules/{id} 查询告警详情
|
|
|
|
|
|
PUT /api/v2/alert/rules/{id} 更新告警
|
|
|
|
|
|
DELETE /api/v2/alert/rules/{id} 删除告警
|
|
|
|
|
|
POST /api/v2/alert/rules/{id}/enable 启用告警
|
|
|
|
|
|
POST /api/v2/alert/rules/{id}/disable 禁用告警
|
|
|
|
|
|
GET /api/v2/alert/history 查询告警历史
|
|
|
|
|
|
GET /api/v2/alert/statistics 查询告警统计
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
**页面功能**:
|
|
|
|
|
|
- 告警列表：表格展示，支持筛选（品种、类型、状态）
|
|
|
|
|
|
- 创建告警：表单（名称、品种、类型、条件、渠道、生效时间）
|
|
|
|
|
|
- 编辑告警：表单（同创建）
|
|
|
|
|
|
- 告警历史：表格展示触发记录
|
|
|
|
|
|
- 告警统计：图表（触发次数趋势、类型分布）
|
|
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
|
|
### 2. 数据质量 Dashboard（2 天）
|
|
|
|
|
|
|
|
|
|
|
|
**文件位置**: `frontend/src/views/quality/`
|
|
|
|
|
|
|
|
|
|
|
|
**页面清单**:
|
|
|
|
|
|
- `QualityDashboard.vue` - 质量概览页面
|
|
|
|
|
|
- `QualityIssues.vue` - 问题列表页面
|
|
|
|
|
|
- `QualityHistory.vue` - 质量趋势页面
|
|
|
|
|
|
- `QualityRules.vue` - 监控规则管理
|
|
|
|
|
|
|
|
|
|
|
|
**API 接口**:
|
|
|
|
|
|
```
|
|
|
|
|
|
GET /api/v2/quality/score 查询质量评分
|
|
|
|
|
|
GET /api/v2/quality/issues 查询问题列表
|
|
|
|
|
|
GET /api/v2/quality/history 查询监控历史
|
|
|
|
|
|
GET /api/v2/quality/statistics 查询监控统计
|
|
|
|
|
|
POST /api/v2/quality/check 触发质量检查
|
|
|
|
|
|
POST /api/v2/quality/rules 创建监控规则
|
|
|
|
|
|
GET /api/v2/quality/rules 查询监控规则
|
|
|
|
|
|
PUT /api/v2/quality/rules/{id} 更新监控规则
|
|
|
|
|
|
DELETE /api/v2/quality/rules/{id} 删除监控规则
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
**页面功能**:
|
|
|
|
|
|
- 质量概览：4 个评分卡片（完整性、准确性、及时性、一致性）
|
|
|
|
|
|
- 问题列表：表格展示，支持筛选（品种、指标、级别）
|
|
|
|
|
|
- 质量趋势：折线图（评分变化）
|
|
|
|
|
|
- 监控规则：规则管理（创建、编辑、删除）
|
|
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
|
|
### 3. WebSocket 测试工具（1 天）
|
|
|
|
|
|
|
|
|
|
|
|
**文件位置**: `frontend/src/views/tools/`
|
|
|
|
|
|
|
|
|
|
|
|
**页面清单**:
|
|
|
|
|
|
- `WebSocketTester.vue` - WebSocket 测试工具
|
|
|
|
|
|
|
|
|
|
|
|
**WebSocket 接口**:
|
|
|
|
|
|
```
|
|
|
|
|
|
连接地址: WS /api/v2/ws/quote?token={token}
|
|
|
|
|
|
|
|
|
|
|
|
操作:
|
|
|
|
|
|
- subscribe: {"action": "subscribe", "symbols": ["IF2406"]}
|
|
|
|
|
|
- unsubscribe: {"action": "unsubscribe", "symbols": ["IF2406"]}
|
|
|
|
|
|
- heartbeat: {"action": "heartbeat"}
|
|
|
|
|
|
- query: {"action": "query"}
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
**页面功能**:
|
|
|
|
|
|
- 连接管理：连接/断开按钮，状态显示
|
|
|
|
|
|
- 订阅管理：添加/取消订阅，订阅列表
|
|
|
|
|
|
- 消息日志：接收消息列表，发送消息输入框
|
|
|
|
|
|
- 统计信息：延迟、丢包、连接数
|
|
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
|
|
## 📁 参考文档
|
|
|
|
|
|
|
|
|
|
|
|
| 文档 | 路径 |
|
|
|
|
|
|
|------|------|
|
|
|
|
|
|
| PRD v2.1 | `/app/working/workspaces/product_manager/projects/20260330_kline_system/PRD_v2.1.md` |
|
|
|
|
|
|
| 架构设计 | `/app/working/workspaces/architect/projects/20260330_kline_system/ARCHITECTURE_DESIGN_v2.1.md` |
|
|
|
|
|
|
| 开发任务详情 | `/app/working/workspaces/developer/projects/20260330_kline_system/DEVELOPMENT_TASKS_V2.1.md` |
|
|
|
|
|
|
| 后端 API 文档 | `/app/working/workspaces/developer/projects/20260330_kline_system/backend/app/api/v2/` |
|
|
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
|
|
## 📝 完成标准
|
|
|
|
|
|
|
|
|
|
|
|
1. 页面功能完整，符合 PRD 要求
|
|
|
|
|
|
2. API 调用正确，数据展示准确
|
|
|
|
|
|
3. 页面交互流畅，用户体验良好
|
|
|
|
|
|
4. 代码结构清晰，可维护性好
|
|
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
|
|
## 📢 完成后通知
|
|
|
|
|
|
|
|
|
|
|
|
前端开发完成后，请通知 Agent Coordinator，将启动测试阶段。
|
|
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
|
|
**任务创建人**: Agent Coordinator
|
|
|
|
|
|
**创建时间**: 2026-04-03
|
|
|
|
|
|
**任务状态**: ✅ 已完成
|
|
|
|
|
|
**完成时间**: 2026-04-05
|
|
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
|
|
## ✅ 完成情况
|
|
|
|
|
|
|
|
|
|
|
|
### 1. 告警管理页面 ✅
|
|
|
|
|
|
- [x] AlertList.vue (11.6KB)
|
|
|
|
|
|
- [x] AlertCreate.vue (11.7KB)
|
|
|
|
|
|
- [x] AlertEdit.vue (16KB)
|
|
|
|
|
|
- [x] AlertHistory.vue (19.3KB)
|
|
|
|
|
|
|
|
|
|
|
|
### 2. 数据质量 Dashboard ✅
|
|
|
|
|
|
- [x] QualityDashboard.vue (11.2KB)
|
|
|
|
|
|
- 4 个质量评分卡片
|
|
|
|
|
|
- 总体质量评分
|
|
|
|
|
|
- 问题统计
|
|
|
|
|
|
- 质量趋势图表
|
|
|
|
|
|
- 问题列表
|
|
|
|
|
|
|
|
|
|
|
|
### 3. WebSocket 测试工具 ✅
|
|
|
|
|
|
- [x] WebSocketTester.vue (14.1KB)
|
|
|
|
|
|
- 连接管理
|
|
|
|
|
|
- 订阅管理
|
|
|
|
|
|
- 消息日志
|
|
|
|
|
|
- 压力测试
|
|
|
|
|
|
- 延迟测试
|
|
|
|
|
|
|
|
|
|
|
|
**前端总计**: 6 个文件，73KB 代码
|
|
|
|
|
|
**下一步**: 启动测试阶段
|
