46 lines
1.5 KiB
Markdown
46 lines
1.5 KiB
Markdown
# 入侵报警组件需求共识文档
|
||
|
||
## 明确的需求描述
|
||
|
||
1. 在src/view目录下创建"intrusion-alarm"文件夹
|
||
2. 在该文件夹中创建"AlarmRecord.vue"组件
|
||
3. 组件功能：
|
||
- 提供时间段选择功能
|
||
- 显示告警数据列表
|
||
- 列表字段：告警时间、来源设备、告警图片
|
||
4. 组件需要能够在splitter组件的右侧面板中正确显示
|
||
|
||
## 技术实现方案
|
||
|
||
### 组件结构
|
||
- 使用ElementPlus的el-date-picker实现时间段选择
|
||
- 使用ElementPlus的el-table实现告警数据列表
|
||
- 使用ElementPlus的el-image实现告警图片展示
|
||
- 采用Vue 3 Composition API (script setup)进行开发
|
||
|
||
### 数据流
|
||
1. 组件加载时初始化
|
||
2. 用户选择时间段后，触发数据刷新
|
||
3. 数据刷新时显示loading状态
|
||
4. 显示告警数据列表
|
||
|
||
### 集成方案
|
||
- 创建组件并导出
|
||
- 预期通过路由或动态组件方式集成到splitter组件中
|
||
- 组件需要响应式设计以适应右侧面板的空间
|
||
|
||
## 任务边界限制
|
||
|
||
- 仅实现入侵报警记录组件，不包括其他报警相关功能
|
||
- 不包括后端接口实现，使用mock数据进行演示
|
||
- 不包括菜单配置修改
|
||
|
||
## 验收标准
|
||
|
||
1. 成功创建intrusion-alarm文件夹和AlarmRecord.vue组件
|
||
2. 组件能够正常渲染，包括时间段选择器和告警数据列表
|
||
3. 时间段选择功能正常工作
|
||
4. 告警数据列表正确显示指定字段
|
||
5. 图片字段能够正确显示告警图片
|
||
6. 组件风格与现有系统保持一致
|
||
7. 代码符合项目现有的编码规范 |