SecMPS/warehouse/docs/钥匙管理组件/CONSENSUS_钥匙管理组件.md

钥匙管理组件 - 共识文档

需求描述

开发钥匙信息管理组件，实现钥匙柜选择、钥匙位置可视化展示、钥匙状态显示和操作历史查询功能。

技术实现方案

1. 文件夹结构

• 在src/view目录下创建key文件夹，用于存放钥匙管理相关组件
• 在key文件夹中创建KeyInfo.vue组件文件

2. 组件结构

• 组件使用Vue 3 Composition API实现
• 主要包含以下部分：
  • 钥匙柜选择下拉框
  • 钥匙位置矩阵展示区域
  • 钥匙操作历史Dialog组件

3. 数据模型

钥匙柜配置

const keyCabinets = [
  { id: 3, name: '指挥中心钥匙柜1', capacity: 48 },
  { id: 10, name: '指挥中心钥匙柜2', capacity: 42 },
  { id: 11, name: '车队钥匙柜', capacity: 32 }
]

钥匙数据结构

interface KeyData {
  id: number
  DeviceId: number
  KeyName: string
  KeyLocation: string
  KeyType: string
  KeyState: string
  Memo: string | null
}

操作记录数据结构

interface KeyLog {
  id: number
  KeyId: number
  Action: string
  CreateDate: string
  ActionUser: string
}

4. API集成

• 使用http.js中的post函数调用两个接口：
  • /api/warehouse_keys/GetPageData - 获取钥匙数据
  • /api/warehouse_keylog/GetPageData - 获取钥匙操作记录

5. 状态管理

• 使用Vue的响应式系统管理组件状态
• 主要状态包括：选中的钥匙柜、钥匙数据、操作记录数据、Dialog显示状态等

验收标准

功能验收

1. 钥匙柜选择下拉框正确显示三个选项
2. 选择钥匙柜后，下方正确显示对应位数的方格矩阵
3. 矩阵中的格子按顺序显示序号（从左上角1号开始）
4. 成功从API获取钥匙数据并在对应位置显示
5. 钥匙图标颜色根据状态正确显示（在位-绿色，离位-红色）
6. 点击钥匙图标时显示Dialog，包含操作历史表格
7. Dialog中正确显示钥匙的操作历史记录

技术验收

1. 组件能够正确编译和运行
2. API调用错误时提供适当的错误处理
3. 代码风格与项目现有代码保持一致
4. 组件具有良好的可维护性和可扩展性

任务边界限制

• 本次任务仅实现钥匙信息管理的前端展示功能
• 不涉及钥匙的申请、归还等操作功能
• 不涉及后端API的开发和修改