66 lines
2.3 KiB
Markdown
66 lines
2.3 KiB
Markdown
# 入侵报警组件任务拆分文档
|
||
|
||
## 任务依赖图
|
||
|
||
```mermaid
|
||
graph TD
|
||
T1[创建入侵报警文件夹] --> T2[创建AlarmRecord.vue组件]
|
||
T2 --> T3[实现基本布局和UI]
|
||
T3 --> T4[实现时间段选择功能]
|
||
T3 --> T5[实现告警数据列表]
|
||
T3 --> T6[实现图片展示功能]
|
||
T4 --> T7[实现数据加载逻辑]
|
||
T5 --> T7
|
||
T6 --> T7
|
||
T7 --> T8[添加mock数据]
|
||
```
|
||
|
||
## 原子任务详情
|
||
|
||
### T1: 创建入侵报警文件夹
|
||
- **输入契约**: 无
|
||
- **输出契约**: src/view/intrusion-alarm目录
|
||
- **实现约束**: 确保目录结构与现有项目一致
|
||
- **依赖关系**: 前置任务无，后置任务T2
|
||
|
||
### T2: 创建AlarmRecord.vue组件
|
||
- **输入契约**: T1完成
|
||
- **输出契约**: AlarmRecord.vue文件
|
||
- **实现约束**: 使用Vue 3 script setup语法，符合项目编码规范
|
||
- **依赖关系**: 前置任务T1，后置任务T3
|
||
|
||
### T3: 实现基本布局和UI
|
||
- **输入契约**: T2完成
|
||
- **输出契约**: 组件基本结构和样式
|
||
- **实现约束**: 包含头部、筛选区和数据展示区，样式与现有系统一致
|
||
- **依赖关系**: 前置任务T2，后置任务T4、T5、T6
|
||
|
||
### T4: 实现时间段选择功能
|
||
- **输入契约**: T3完成
|
||
- **输出契约**: 可用的时间段选择器
|
||
- **实现约束**: 使用ElementPlus的el-date-picker，支持日期范围选择
|
||
- **依赖关系**: 前置任务T3，后置任务T7
|
||
|
||
### T5: 实现告警数据列表
|
||
- **输入契约**: T3完成
|
||
- **输出契约**: 可用的告警数据表格
|
||
- **实现约束**: 使用ElementPlus的el-table，显示指定字段
|
||
- **依赖关系**: 前置任务T3，后置任务T7
|
||
|
||
### T6: 实现图片展示功能
|
||
- **输入契约**: T3完成
|
||
- **输出契约**: 告警图片展示功能
|
||
- **实现约束**: 使用ElementPlus的el-image，支持预览功能
|
||
- **依赖关系**: 前置任务T3，后置任务T7
|
||
|
||
### T7: 实现数据加载逻辑
|
||
- **输入契约**: T4、T5、T6完成
|
||
- **输出契约**: 完整的数据交互逻辑
|
||
- **实现约束**: 包含加载状态、错误处理、数据更新
|
||
- **依赖关系**: 前置任务T4、T5、T6，后置任务T8
|
||
|
||
### T8: 添加mock数据
|
||
- **输入契约**: T7完成
|
||
- **输出契约**: 可演示的组件
|
||
- **实现约束**: 提供足够的mock数据以便测试和演示
|
||
- **依赖关系**: 前置任务T7，无后置任务 |