# 入侵报警组件待办事项

## 待办事项列表

### 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`中添加如下配置：
```typescript
// 入侵报警相关路由
{
  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以获得最佳显示效果