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