# 钥匙管理组件 - 共识文档

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

## 技术实现方案

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

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

### 3. 数据模型

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

#### 钥匙数据结构
```typescript
interface KeyData {
  id: number
  DeviceId: number
  KeyName: string
  KeyLocation: string
  KeyType: string
  KeyState: string
  Memo: string | null
}
```

#### 操作记录数据结构
```typescript
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的开发和修改