| | |
|---|
| | | - 右上角/底部颜色图例 |
|---|
| | | - 说明每种颜色代表的货位状态 |
|---|
| | | |
|---|
| | | ### 3.2 货位状态颜色编码 |
|---|
| | | ### 3.2 货位状态颜色编码（颜色优先级：locationStatus > stockStatus） |
|---|
| | | |
|---|
| | | | 状态 | 颜色 | Hex | |
|---|
| | | |------|------|-----| |
|---|
| | | | 空货位 | 暗灰 | `#4a4a4a` | |
|---|
| | | | 有库存 | 蓝色 | `#409EFF` | |
|---|
| | | | 库存紧张 (<10%) | 橙色 | `#E6A23C` | |
|---|
| | | | 已满 | 绿色 | `#67C23A` | |
|---|
| | | | 锁定/冻结 | 红色 | `#F56C6C` | |
|---|
| | | | 禁用 | 深灰 | `#2d2d2d` | |
|---|
| | | **颜色判定规则（按优先级顺序）：** |
|---|
| | | |
|---|
| | | 1. **`locationStatus = 3`（禁用）** → 深灰 `#2d2d2d`（最高优先级） |
|---|
| | | 2. **`locationStatus = 2`（锁定）** → 红色 `#F56C6C` |
|---|
| | | 3. **`locationStatus = 1`（占用）且 `stockStatus = 0`（无货）** → 暗灰 `#4a4a4a` |
|---|
| | | 4. **`locationStatus = 1`（占用）且 `stockStatus = 1`（有货）** → 蓝色 `#409EFF` |
|---|
| | | 5. **`locationStatus = 1`（占用）且 `stockStatus = 2`（库存紧张 <10%）** → 橙色 `#E6A23C` |
|---|
| | | 6. **`locationStatus = 1`（占用）且 `stockStatus = 3`（已满 ≥90%）** → 绿色 `#67C23A` |
|---|
| | | 7. **`locationStatus = 0`（空）** → 暗灰 `#4a4a4a` |
|---|
| | | |
|---|
| | | **阈值定义：** |
|---|
| | | - 库存紧张：`stockQuantity / maxCapacity < 10%` |
|---|
| | | - 已满：`stockQuantity / maxCapacity ≥ 90%` |
|---|
| | | |
|---|
| | | ## 4. 后端 API |
|---|
| | | |
|---|
| | |
|---|
| | | "maxRow": 10, |
|---|
| | | "maxColumn": 20, |
|---|
| | | "maxLayer": 5, |
|---|
| | | "materielCodeList": ["M001", "M002", "M003"], |
|---|
| | | "batchNoList": ["B20260301", "B20260302"], |
|---|
| | | "locations": [ |
|---|
| | | { |
|---|
| | | "locationId": 1, |
|---|
| | |
|---|
| | | } |
|---|
| | | } |
|---|
| | | ``` |
|---|
| | | |
|---|
| | | **说明**： |
|---|
| | | - `locationStatus`: 0=空, 1=占用, 2=锁定, 3=禁用 |
|---|
| | | - `stockStatus`: 0=无货, 1=有货, 2=库存紧张, 3=已满 |
|---|
| | | - `maxCapacity`: 货位最大容量（用于计算填充率） |
|---|
| | | - `materielCodeList`: 当前仓库所有物料编号列表（用于筛选下拉） |
|---|
| | | - `batchNoList`: 当前仓库所有批次号列表（用于筛选下拉） |
|---|
| | | |
|---|
| | | **说明**： |
|---|
| | | - `locationStatus`: 0=空, 1=占用, 2=锁定, 3=禁用 |
|---|
| | |
|---|
| | | |
|---|
| | | <!-- 工具栏 --> |
|---|
| | | <div class="toolbar"> |
|---|
| | | <el-select v-model="filterStatus" placeholder="库存状态筛选" clearable /> |
|---|
| | | <el-select v-model="filterMateriel" placeholder="物料筛选" clearable /> |
|---|
| | | <el-select v-model="filterStockStatus" placeholder="库存状态筛选" clearable> |
|---|
| | | <el-option label="有货" :value="1" /> |
|---|
| | | <el-option label="库存紧张" :value="2" /> |
|---|
| | | <el-option label="已满" :value="3" /> |
|---|
| | | </el-select> |
|---|
| | | <el-select v-model="filterMaterielCode" placeholder="物料筛选" clearable :options="materielCodeList" /> |
|---|
| | | <el-select v-model="filterBatchNo" placeholder="批次筛选" clearable :options="batchNoList" /> |
|---|
| | | <el-button @click="resetCamera">重置视角</el-button> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | |
|---|
| | | |
|---|
| | | ### 7.4 相机聚焦动画 |
|---|
| | | |
|---|
| | | - 使用 `TWEEN` 或手动插值平滑移动相机 |
|---|
| | | - 使用简单线性插值（lerp）平滑移动相机 |
|---|
| | | - 目标位置：货位坐标 + 偏移量 |
|---|
| | | - 插值公式：`camera.position.lerp(target, 0.05)` 每帧执行 |
|---|
| | | |
|---|
| | | ## 8. 性能优化 |
|---|
| | | |
|---|
| | |
|---|
| | | } |
|---|
| | | ``` |
|---|
| | | |
|---|
| | | ## 10. 待补充 |
|---|
| | | ## 10. 实现注意事项 |
|---|
| | | |
|---|
| | | - [ ] 后端 `Get3DLayout` API 实现 |
|---|
| | | - [ ] SignalR Hub 配置 |
|---|
| | | - [ ] 货位颜色与后端状态枚举对齐 |
|---|
| | | - [ ] 筛选功能具体字段确认 |
|---|
| | | ### 10.1 后端交付物 |
|---|
| | | - `Get3DLayout` API 实现，返回结构见 4.1 |
|---|
| | | - SignalR Hub 配置（`/stockHub`），推送 `stockUpdated` 事件 |
|---|
| | | - 货位颜色判定逻辑按 3.2 规则在后端或前端实现均可 |
|---|
| | | |
|---|
| | | ### 10.2 前端筛选联动 |
|---|
| | | - `filterStockStatus`、`filterMaterielCode`、`filterBatchNo` 三者联动 |
|---|
| | | - 筛选结果高亮显示，非匹配货位变暗（opacity: 0.3） |
|---|
| | | - 筛选为空时显示全部货位正常颜色 |
|---|
