SecMPS/warehouse/docs/入侵报警组件/TODO_入侵报警组件.md

入侵报警组件待办事项

待办事项列表

1. 菜单配置

• 状态: 待处理
• 详情: 需要在系统菜单中添加"入侵报警"菜单项，并配置路由指向AlarmRecord组件
• 操作指引: 在路由配置文件中添加新路由，在菜单配置中添加相应条目

2. 路由配置

• 状态: ✅ 已完成
• 详情: 在router/index.ts中成功注册了AlarmRecord组件的路由
• 操作指引: 路由已添加，路径为/index/intrusion-alarm/record

3. Splitter组件集成

• 状态: 待处理
• 详情: 需要确保AlarmRecord组件能够在splitter组件的右侧面板中正确显示
• 操作指引: 在使用splitter组件的父组件中，通过动态组件或路由视图的方式加载AlarmRecord组件

4. 后端接口对接

• 状态: 待处理
• 详情: 当前使用的是mock数据，需要对接实际的后端API
• 操作指引:
  • 替换fetchAlarmData函数中的mock数据逻辑
  • 根据实际API文档实现数据请求和处理
  • 确保接口错误处理机制完善

5. 默认占位图片

• 状态: 待处理
• 详情: 当图片加载失败时，需要提供一个实际的占位图片
• 操作指引: 在public/images目录下添加placeholder.png图片，或修改代码中的占位图路径

6. 权限控制

• 状态: 待处理
• 详情: 需要根据系统权限配置，控制不同用户对入侵报警记录的访问权限
• 操作指引: 集成系统现有的权限控制机制，添加相应的权限检查

配置需求

1. 路由配置 ✅已完成

已在src/router/index.ts中添加如下配置：

// 入侵报警相关路由
{
  path: '/index/intrusion-alarm/record',
  name: 'AlarmRecord',
  component: () => import('@/view/intrusion-alarm/AlarmRecord.vue'),
  meta: { requiresAuth: true }
}

### 2. 菜单配置
需要在菜单配置文件中添加"入侵报警"菜单项，指向上述路由

### 3. 接口配置
需要在API配置中添加入侵报警相关接口：
```typescript
// 入侵报警记录接口
const getAlarmRecords = (params) => http.get('/api/intrusion-alarm/records', { params })

注意事项

1. 组件默认使用了picsum.photos提供的随机图片服务，在实际环境中应替换为系统存储的实际告警图片
2. 当前的时间段筛选功能仅在前端实现，与后端对接时需要将时间范围参数传递给API
3. 组件采用了响应式设计，可以适应不同尺寸的右侧面板，但建议面板最小宽度不小于800px以获得最佳显示效果