65 lines
2.5 KiB
Markdown
65 lines
2.5 KiB
Markdown
# 入侵报警组件待办事项
|
||
|
||
## 待办事项列表
|
||
|
||
### 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以获得最佳显示效果 |