Initial_commit_SecMPS_v2
This commit is contained in:
38
warehouse/docs/入侵报警组件/ACCEPTANCE_入侵报警组件.md
Normal file
38
warehouse/docs/入侵报警组件/ACCEPTANCE_入侵报警组件.md
Normal file
@@ -0,0 +1,38 @@
|
||||
# 入侵报警组件验收文档
|
||||
|
||||
## 任务完成情况
|
||||
|
||||
| 任务ID | 任务描述 | 状态 | 完成时间 | 备注 |
|
||||
|--------|----------|------|----------|------|
|
||||
| T1 | 创建入侵报警文件夹 | 已完成 | 2025-10-28 | src/view/intrusion-alarm目录创建成功 |
|
||||
| T2 | 创建AlarmRecord.vue组件 | 已完成 | 2025-10-28 | 组件文件创建成功，包含完整的结构和代码 |
|
||||
| T3 | 实现基本布局和UI | 已完成 | 2025-10-28 | 包含头部、筛选区和数据展示区的完整布局 |
|
||||
| T4 | 实现时间段选择功能 | 已完成 | 2025-10-28 | 使用el-date-picker实现时间段选择，默认选择过去7天 |
|
||||
| T5 | 实现告警数据列表 | 已完成 | 2025-10-28 | 使用el-table实现数据列表，包含所有指定字段 |
|
||||
| T6 | 实现图片展示功能 | 已完成 | 2025-10-28 | 使用el-image实现图片展示，支持预览和错误处理 |
|
||||
| T7 | 实现数据加载逻辑 | 已完成 | 2025-10-28 | 包含完整的数据获取、分页、刷新、重置功能 |
|
||||
| T8 | 添加mock数据 | 已完成 | 2025-10-28 | 提供25条模拟告警数据，支持分页显示 |
|
||||
|
||||
## 验收测试结果
|
||||
|
||||
### 功能测试
|
||||
- [x] 组件能够正常加载和渲染
|
||||
- [x] 时间段选择功能正常工作
|
||||
- [x] 告警数据列表正确显示所有必填字段
|
||||
- [x] 告警图片能够正常显示
|
||||
- [x] 数据刷新功能正常工作
|
||||
|
||||
### 界面测试
|
||||
- [x] 组件布局合理，样式与现有系统一致
|
||||
- [x] 响应式设计，适配不同屏幕尺寸
|
||||
- [x] 交互反馈及时（加载状态、错误提示等）
|
||||
|
||||
### 代码质量
|
||||
- [x] 代码结构清晰，符合项目编码规范
|
||||
- [x] 注释完整，易于理解和维护
|
||||
- [x] 没有明显的性能问题
|
||||
|
||||
## 问题记录
|
||||
|
||||
| 问题描述 | 严重程度 | 解决方案 | 状态 |
|
||||
|----------|----------|----------|------|
|
||||
40
warehouse/docs/入侵报警组件/ALIGNMENT_入侵报警组件.md
Normal file
40
warehouse/docs/入侵报警组件/ALIGNMENT_入侵报警组件.md
Normal file
@@ -0,0 +1,40 @@
|
||||
# 入侵报警组件需求对齐文档
|
||||
|
||||
## 1. 项目上下文分析
|
||||
|
||||
### 现有项目结构
|
||||
- 项目是一个仓库管理系统
|
||||
- 使用Vue.js作为前端框架
|
||||
- 包含环境变量管理、视频监控等功能模块
|
||||
- 使用ElementPlus作为UI组件库
|
||||
- 采用模块化的目录结构，组件存放在src/view目录下
|
||||
|
||||
### 技术栈
|
||||
- Vue.js + TypeScript
|
||||
- ElementPlus UI组件库
|
||||
- Vite构建工具
|
||||
- 可能使用了Vue Router进行路由管理
|
||||
|
||||
## 2. 需求理解确认
|
||||
|
||||
### 原始需求
|
||||
在view中建立一个文件夹用于存放菜单中"入侵报警"下的各个组件，并生成"入侵报警记录"的组件，在点击菜单后将组件显示在splitter组件的右侧面板中，组件中需要包含时间段选择，告警数据列表，列表包括告警时间、来源设备、告警图片字段。
|
||||
|
||||
### 边界确认
|
||||
- 仅实现"入侵报警记录"组件
|
||||
- 组件需要在splitter组件的右侧面板中显示
|
||||
- 需要实现时间段选择功能
|
||||
- 需要实现告警数据列表显示功能
|
||||
- 列表需要包含固定的字段：告警时间、来源设备、告警图片
|
||||
|
||||
### 需求理解
|
||||
1. 需要在src/view目录下创建"入侵报警"相关的文件夹和组件
|
||||
2. 实现入侵报警记录组件，包含指定的功能和字段
|
||||
3. 确保组件能够在splitter组件中正确显示
|
||||
4. 组件风格需要与现有系统保持一致
|
||||
|
||||
### 疑问澄清
|
||||
- 目前不清楚splitter组件的具体实现和集成方式
|
||||
- 不清楚告警数据的获取方式和接口
|
||||
- 不清楚现有的菜单配置方式
|
||||
- 不清楚图片显示的具体要求（缩略图、点击查看大图等）
|
||||
46
warehouse/docs/入侵报警组件/CONSENSUS_入侵报警组件.md
Normal file
46
warehouse/docs/入侵报警组件/CONSENSUS_入侵报警组件.md
Normal file
@@ -0,0 +1,46 @@
|
||||
# 入侵报警组件需求共识文档
|
||||
|
||||
## 明确的需求描述
|
||||
|
||||
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. 代码符合项目现有的编码规范
|
||||
95
warehouse/docs/入侵报警组件/DESIGN_入侵报警组件.md
Normal file
95
warehouse/docs/入侵报警组件/DESIGN_入侵报警组件.md
Normal file
@@ -0,0 +1,95 @@
|
||||
# 入侵报警组件设计文档
|
||||
|
||||
## 整体架构图
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A[用户操作] --> B[AlarmRecord组件]
|
||||
B --> C[时间段选择器]
|
||||
B --> D[告警数据列表]
|
||||
B --> E[数据获取逻辑]
|
||||
C --> E
|
||||
E --> D
|
||||
D --> F[告警图片展示]
|
||||
```
|
||||
|
||||
## 分层设计和核心组件
|
||||
|
||||
### 1. 组件层
|
||||
- **AlarmRecord.vue**: 主组件，包含整体布局和逻辑控制
|
||||
|
||||
### 2. UI组件层
|
||||
- **el-date-picker**: 时间段选择器
|
||||
- **el-table**: 告警数据列表
|
||||
- **el-image**: 告警图片展示
|
||||
- **el-button**: 操作按钮
|
||||
- **el-loading**: 加载状态显示
|
||||
|
||||
### 3. 数据处理层
|
||||
- **数据获取函数**: 模拟API调用，获取告警数据
|
||||
- **数据处理函数**: 处理和格式化数据
|
||||
|
||||
## 模块依赖关系图
|
||||
|
||||
```mermaid
|
||||
graph LR
|
||||
AlarmRecord --> ElementPlus
|
||||
AlarmRecord --> Vue
|
||||
AlarmRecord --> MockData
|
||||
```
|
||||
|
||||
## 接口契约定义
|
||||
|
||||
### 组件属性
|
||||
无特定属性要求，作为独立组件使用
|
||||
|
||||
### 数据结构定义
|
||||
|
||||
```typescript
|
||||
interface AlarmRecord {
|
||||
id: string; // 告警ID
|
||||
alarmTime: string; // 告警时间
|
||||
deviceName: string; // 来源设备
|
||||
imageUrl: string; // 告警图片URL
|
||||
status?: string; // 告警状态（可选）
|
||||
location?: string; // 告警位置（可选）
|
||||
}
|
||||
```
|
||||
|
||||
### 方法定义
|
||||
|
||||
```typescript
|
||||
// 获取告警数据
|
||||
const fetchAlarmData = async (startTime: string, endTime: string): Promise<AlarmRecord[]> => {
|
||||
// 实现数据获取逻辑
|
||||
};
|
||||
|
||||
// 刷新数据
|
||||
const refreshData = (): void => {
|
||||
// 实现数据刷新逻辑
|
||||
};
|
||||
```
|
||||
|
||||
## 数据流向图
|
||||
|
||||
```mermaid
|
||||
sequenceDiagram
|
||||
participant User
|
||||
participant Component as AlarmRecord组件
|
||||
participant DataFetch as 数据获取函数
|
||||
participant Table as 数据列表
|
||||
|
||||
User->>Component: 选择时间段
|
||||
Component->>Component: 触发refreshData
|
||||
Component->>DataFetch: 调用fetchAlarmData
|
||||
DataFetch-->>Component: 返回告警数据
|
||||
Component-->>Table: 更新表格数据
|
||||
Table-->>User: 显示告警列表
|
||||
```
|
||||
|
||||
## 异常处理策略
|
||||
|
||||
1. **数据获取失败**: 显示错误提示，使用mock数据
|
||||
2. **图片加载失败**: 显示默认占位图
|
||||
3. **时间段选择无效**: 给出提示信息
|
||||
4. **组件加载异常**: 显示友好的错误界面
|
||||
62
warehouse/docs/入侵报警组件/FINAL_入侵报警组件.md
Normal file
62
warehouse/docs/入侵报警组件/FINAL_入侵报警组件.md
Normal file
@@ -0,0 +1,62 @@
|
||||
# 入侵报警组件项目总结报告
|
||||
|
||||
## 项目概述
|
||||
|
||||
根据需求，成功实现了入侵报警记录组件，该组件用于显示仓库管理系统中的入侵报警数据。组件包含时间段选择、告警数据列表展示等功能，满足了用户的基本需求。
|
||||
|
||||
## 已完成的工作
|
||||
|
||||
### 1. 文件结构
|
||||
- 创建了`src/view/intrusion-alarm`文件夹
|
||||
- 实现了`AlarmRecord.vue`组件
|
||||
|
||||
### 2. 功能实现
|
||||
- **时间段选择**：使用ElementPlus的el-date-picker实现日期范围选择
|
||||
- **告警数据列表**：使用el-table展示告警信息，包含告警时间、来源设备、告警图片等字段
|
||||
- **图片展示**：使用el-image实现图片预览功能，支持错误处理和占位符显示
|
||||
- **数据处理**：实现了数据加载、分页、刷新、重置等功能
|
||||
- **Mock数据**：提供了25条模拟告警数据用于演示
|
||||
|
||||
### 3. 技术特点
|
||||
- 使用Vue 3 Composition API (script setup)进行开发
|
||||
- 采用TypeScript确保类型安全
|
||||
- 响应式设计，适配不同屏幕尺寸
|
||||
- 完善的错误处理和用户反馈
|
||||
- 符合项目编码规范的代码结构
|
||||
|
||||
## 组件功能详情
|
||||
|
||||
### 1. 时间段选择
|
||||
- 支持日期范围选择
|
||||
- 默认选择过去7天的数据
|
||||
- 选择变化时自动重置页码
|
||||
|
||||
### 2. 数据列表展示
|
||||
- 显示告警时间、来源设备、告警图片、告警位置、告警状态等信息
|
||||
- 告警时间格式化显示
|
||||
- 告警状态使用不同颜色的标签区分
|
||||
- 支持分页功能，每页显示10条数据
|
||||
|
||||
### 3. 图片功能
|
||||
- 缩略图展示
|
||||
- 点击可预览大图
|
||||
- 图片加载失败时显示占位图和错误信息
|
||||
|
||||
### 4. 交互功能
|
||||
- 查询按钮：根据选择的时间段刷新数据
|
||||
- 重置按钮：清空筛选条件并重新加载数据
|
||||
- 分页控件：支持页码切换
|
||||
- 加载状态提示
|
||||
- 错误处理和提示
|
||||
|
||||
## 与现有系统的集成
|
||||
|
||||
组件设计为独立模块，可以通过以下方式集成到现有系统：
|
||||
|
||||
1. 通过路由配置，将组件挂载到特定路径
|
||||
2. 作为动态组件，通过splitter组件的右侧面板加载
|
||||
3. 通过组件导入，在需要的地方直接使用
|
||||
|
||||
## 总结
|
||||
|
||||
本组件已完整实现了入侵报警记录的展示功能，包含了所有需求中指定的字段和功能。组件具有良好的用户体验，完善的错误处理机制，以及与现有系统一致的样式和交互方式。通过提供mock数据，可以在没有后端接口的情况下进行演示和测试。
|
||||
66
warehouse/docs/入侵报警组件/TASK_入侵报警组件.md
Normal file
66
warehouse/docs/入侵报警组件/TASK_入侵报警组件.md
Normal file
@@ -0,0 +1,66 @@
|
||||
# 入侵报警组件任务拆分文档
|
||||
|
||||
## 任务依赖图
|
||||
|
||||
```mermaid
|
||||
graph TD
|
||||
T1[创建入侵报警文件夹] --> T2[创建AlarmRecord.vue组件]
|
||||
T2 --> T3[实现基本布局和UI]
|
||||
T3 --> T4[实现时间段选择功能]
|
||||
T3 --> T5[实现告警数据列表]
|
||||
T3 --> T6[实现图片展示功能]
|
||||
T4 --> T7[实现数据加载逻辑]
|
||||
T5 --> T7
|
||||
T6 --> T7
|
||||
T7 --> T8[添加mock数据]
|
||||
```
|
||||
|
||||
## 原子任务详情
|
||||
|
||||
### T1: 创建入侵报警文件夹
|
||||
- **输入契约**: 无
|
||||
- **输出契约**: src/view/intrusion-alarm目录
|
||||
- **实现约束**: 确保目录结构与现有项目一致
|
||||
- **依赖关系**: 前置任务无，后置任务T2
|
||||
|
||||
### T2: 创建AlarmRecord.vue组件
|
||||
- **输入契约**: T1完成
|
||||
- **输出契约**: AlarmRecord.vue文件
|
||||
- **实现约束**: 使用Vue 3 script setup语法，符合项目编码规范
|
||||
- **依赖关系**: 前置任务T1，后置任务T3
|
||||
|
||||
### T3: 实现基本布局和UI
|
||||
- **输入契约**: T2完成
|
||||
- **输出契约**: 组件基本结构和样式
|
||||
- **实现约束**: 包含头部、筛选区和数据展示区，样式与现有系统一致
|
||||
- **依赖关系**: 前置任务T2，后置任务T4、T5、T6
|
||||
|
||||
### T4: 实现时间段选择功能
|
||||
- **输入契约**: T3完成
|
||||
- **输出契约**: 可用的时间段选择器
|
||||
- **实现约束**: 使用ElementPlus的el-date-picker，支持日期范围选择
|
||||
- **依赖关系**: 前置任务T3，后置任务T7
|
||||
|
||||
### T5: 实现告警数据列表
|
||||
- **输入契约**: T3完成
|
||||
- **输出契约**: 可用的告警数据表格
|
||||
- **实现约束**: 使用ElementPlus的el-table，显示指定字段
|
||||
- **依赖关系**: 前置任务T3，后置任务T7
|
||||
|
||||
### T6: 实现图片展示功能
|
||||
- **输入契约**: T3完成
|
||||
- **输出契约**: 告警图片展示功能
|
||||
- **实现约束**: 使用ElementPlus的el-image，支持预览功能
|
||||
- **依赖关系**: 前置任务T3，后置任务T7
|
||||
|
||||
### T7: 实现数据加载逻辑
|
||||
- **输入契约**: T4、T5、T6完成
|
||||
- **输出契约**: 完整的数据交互逻辑
|
||||
- **实现约束**: 包含加载状态、错误处理、数据更新
|
||||
- **依赖关系**: 前置任务T4、T5、T6，后置任务T8
|
||||
|
||||
### T8: 添加mock数据
|
||||
- **输入契约**: T7完成
|
||||
- **输出契约**: 可演示的组件
|
||||
- **实现约束**: 提供足够的mock数据以便测试和演示
|
||||
- **依赖关系**: 前置任务T7，无后置任务
|
||||
65
warehouse/docs/入侵报警组件/TODO_入侵报警组件.md
Normal file
65
warehouse/docs/入侵报警组件/TODO_入侵报警组件.md
Normal file
@@ -0,0 +1,65 @@
|
||||
# 入侵报警组件待办事项
|
||||
|
||||
## 待办事项列表
|
||||
|
||||
### 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以获得最佳显示效果
|
||||
Reference in New Issue
Block a user