2025-10-12 17:04:18 +08:00
|
|
|
|
# 仓库管理操作端
|
|
|
|
|
|
|
|
|
|
|
|
## 项目简介
|
|
|
|
|
|
仓库管理操作端是一个基于Vue 3构建的现代化仓库管理系统前端界面，提供钥匙管理、巡检管理、车辆管理、环境监控等多项功能，采用空军蓝主题设计，结合3D地图展示，实现直观高效的仓库管理体验。
|
|
|
|
|
|
|
2025-10-12 17:10:40 +08:00
|
|
|
|
## 项目更新记录
|
|
|
|
|
|
请查看[项目更新日志](UpdateLog.md)了解详细的项目更新历史。
|
|
|
|
|
|
|
2025-10-12 17:04:18 +08:00
|
|
|
|
## 技术栈
|
|
|
|
|
|
- **前端框架**: Vue 3.4.21
|
|
|
|
|
|
- **构建工具**: Vite 5.2.0
|
|
|
|
|
|
- **UI组件库**: Element Plus 2.7.0
|
|
|
|
|
|
- **路由管理**: Vue Router 4.3.0
|
|
|
|
|
|
- **状态管理**: Pinia 2.1.7
|
|
|
|
|
|
- **样式框架**: Tailwind CSS 3.4.3
|
|
|
|
|
|
- **HTTP客户端**: Axios 1.6.8
|
|
|
|
|
|
- **图标库**: Element Plus Icons Vue 2.3.2
|
|
|
|
|
|
|
|
|
|
|
|
## 项目结构
|
|
|
|
|
|
```
|
|
|
|
|
|
├── src/
|
|
|
|
|
|
│ ├── App.vue # 应用入口组件
|
|
|
|
|
|
│ ├── assets/ # 静态资源
|
|
|
|
|
|
│ ├── components/ # 公共组件
|
|
|
|
|
|
│ ├── config/ # 配置文件
|
|
|
|
|
|
│ ├── hooks/ # 自定义hooks
|
|
|
|
|
|
│ ├── main.js # 应用入口文件
|
|
|
|
|
|
│ ├── router/ # 路由配置
|
|
|
|
|
|
│ ├── stores/ # 状态管理
|
|
|
|
|
|
│ └── views/ # 页面组件
|
|
|
|
|
|
├── public/ # 静态资源
|
|
|
|
|
|
├── vite.config.js # Vite配置
|
|
|
|
|
|
├── tailwind.config.js # Tailwind CSS配置
|
|
|
|
|
|
└── package.json # 项目依赖
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
## 已实现功能
|
|
|
|
|
|
- **项目基础框架**: 搭建完整的Vue 3应用结构
|
|
|
|
|
|
- **登录模块**: 实现用户登录功能
|
|
|
|
|
|
- **钥匙管理**: 开发钥匙柜及钥匙状态展示功能
|
|
|
|
|
|
- **地图功能**: 集成地图展示和监控组件
|
|
|
|
|
|
- **布局组件**: 创建统一的应用布局框架，包含侧边栏、顶栏和内容区域
|
|
|
|
|
|
- **配置管理**: 完成项目配置文件设置
|
|
|
|
|
|
|
|
|
|
|
|
## 未来规划功能
|
|
|
|
|
|
在第一个大版本中计划实现以下功能模块：
|
|
|
|
|
|
|
|
|
|
|
|
### 1. 钥匙管理
|
|
|
|
|
|
- **钥匙信息管理**: 管理仓库内所有钥匙的详细信息（已部分实现）
|
|
|
|
|
|
- **钥匙使用申请**: 提供钥匙使用申请流程和审批功能
|
|
|
|
|
|
- **钥匙取用记录**: 记录钥匙的取用和归还历史
|
|
|
|
|
|
|
|
|
|
|
|
### 2. 巡检管理
|
|
|
|
|
|
- **巡检路径管理**: 配置和管理仓库巡检路线
|
|
|
|
|
|
- **巡检排班管理**: 安排巡检人员和巡检时间
|
|
|
|
|
|
- **巡检记录**: 记录和查询巡检结果
|
|
|
|
|
|
|
|
|
|
|
|
### 3. 车辆管理
|
|
|
|
|
|
- **车辆信息管理**: 管理仓库内所有车辆的基本信息
|
|
|
|
|
|
- **车辆使用申请**: 提供车辆使用申请和审批流程
|
|
|
|
|
|
- **车辆出入库记录**: 记录车辆出入库情况
|
|
|
|
|
|
- **车辆出入营区记录**: 记录车辆出入营区的详细信息
|
|
|
|
|
|
|
|
|
|
|
|
### 4. 环境监控
|
|
|
|
|
|
- **环境变量管理**: 监控和管理仓库环境参数（温度、湿度、门禁等）
|
|
|
|
|
|
|
|
|
|
|
|
### 5. 信息管理
|
|
|
|
|
|
- **特情处置预案**: 管理和展示各种特殊情况的处置预案
|
|
|
|
|
|
- **安全提示**: 发布和管理安全提示信息
|
|
|
|
|
|
|
|
|
|
|
|
### 6. 访客管理
|
|
|
|
|
|
- **来访人员管理**: 登记和管理来访人员信息
|
|
|
|
|
|
- **来访车辆管理**: 登记和管理来访车辆信息
|
|
|
|
|
|
|
|
|
|
|
|
### 7. 营区管理
|
|
|
|
|
|
- **岗位职责**: 展示和管理各岗位的职责说明
|
|
|
|
|
|
- **人员区域管理**: 管理人员的活动区域和权限
|
|
|
|
|
|
|
|
|
|
|
|
### 8. 无人机管理
|
|
|
|
|
|
- **无人机管理**: 管理无人机设备和飞行任务
|
|
|
|
|
|
|
|
|
|
|
|
## 界面设计
|
|
|
|
|
|
- **主题风格**: 采用空军蓝为主色调，营造专业、现代的界面风格
|
|
|
|
|
|
- **布局模式**: 侧边栏菜单 + 右侧抽屉式内容区域 + 底层3D地图展示
|
|
|
|
|
|
- **交互体验**: 支持菜单折叠、平滑过渡动画、响应式设计
|
|
|
|
|
|
- **视觉效果**: 运用半透明背景、模糊效果、渐变色彩提升视觉层次感
|
|
|
|
|
|
|
|
|
|
|
|
## 开发指南
|
|
|
|
|
|
### 安装依赖
|
|
|
|
|
|
```bash
|
|
|
|
|
|
npm install
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
### 开发模式
|
|
|
|
|
|
```bash
|
|
|
|
|
|
npm run dev
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
### 构建生产版本
|
|
|
|
|
|
```bash
|
|
|
|
|
|
npm run build
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
### 预览生产版本
|
|
|
|
|
|
```bash
|
|
|
|
|
|
npm run preview
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
## 环境配置
|
|
|
|
|
|
- **开发环境**: .env.development
|
|
|
|
|
|
- **生产环境**: .env.production
|
|
|
|
|
|
|
|
|
|
|
|
## 浏览器支持
|
|
|
|
|
|
- Chrome (推荐)
|
|
|
|
|
|
- Firefox
|
|
|
|
|
|
- Safari
|
|
|
|
|
|
- Edge
|
|
|
|
|
|
|
|
|
|
|
|
## License
|
|
|
|
|
|
MIT
|
