# wcs-front

**Repository Path**: zl_java/wcs-front

## Basic Information

- **Project Name**: wcs-front
- **Description**: 基于Vue3 + TypeScript + Element Plus构建的现代化WCS（Warehouse Control System）仓储控制系统前端。
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 2
- **Created**: 2025-07-09
- **Last Updated**: 2025-07-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# WCS仓储控制系统前端

基于Vue3 + TypeScript + Element Plus构建的现代化WCS（Warehouse Control System）仓储控制系统前端。

## 🚀 技术栈

- **框架**: Vue 3.3+ (Composition API)
- **语言**: TypeScript 5.3+
- **构建工具**: Vite 5.0+
- **UI组件库**: Element Plus 2.4+
- **状态管理**: Pinia 2.1+
- **路由管理**: Vue Router 4.2+
- **HTTP客户端**: Axios 1.6+
- **图表库**: ECharts 5.4+ / Vue-ECharts 6.6+
- **Mock数据**: Mock.js 1.1+

## 📋 功能模块

### 🎯 核心功能
- **仪表盘**: 系统概览、实时统计、数据可视化
- **AGV管理**: 设备监控、状态管理、远程控制
- **充电管理**: 充电桩监控、电量管理、充电调度
- **地图管理**: 仓库地图、路径规划、位置追踪
- **任务管理**: 任务创建、调度分配、执行监控
- **料箱管理**: 库存管理、位置追踪、状态监控
- **货架管理**: 货架监控、容量管理、利用率统计
- **故障管理**: 故障报警、处理流程、维护记录

### 🎨 界面特性
- 响应式设计，支持多种屏幕尺寸
- 现代化UI设计，用户体验友好
- 实时数据更新，支持自动刷新
- 完整的CRUD操作界面
- 丰富的数据可视化图表
- 🤖 **AGV智能监控**: 实时状态监控、传感器状态、路径追踪
- 🎮 **远程控制系统**: AGV启动、停止、暂停、充电、急停等控制
- 📈 **性能分析**: 运行数据统计、图表分析、效率监控
- 🔧 **维护管理**: 维护记录、故障处理、预防性维护
- 📍 **位置追踪**: 实时位置显示、路径规划、地图可视化
- 🔋 **电量监控**: 电池状态、充电管理、低电量预警
- 🌡️ **设备监控**: 温度监控、信号强度、传感器状态
- 📊 **批量操作**: 多设备选择、批量控制、统一管理


## 页面展示

![背景图片](doc/images/homepage.png)
![AGV管理](doc/images/agv_01.png)
![AGV](doc/images/agv_02.png)
![AGV](doc/images/agv_03.png)
![充电桩](doc/images/charge_01.png)
![充电桩](doc/images/charge_02.png)
![充电桩](doc/images/charge_03.png)
![充电桩](doc/images/charge_04.png)
![地图管理](doc/images/map_01.png)
![地图管理](doc/images/map_02.png)
![地图管理](doc/images/map_03.png)
![地图管理](doc/images/map_04.png)
![任务管理](doc/images/task_01.png)
![任务管理](doc/images/task_02.png)
![任务管理](doc/images/task_03.png)
![任务管理](doc/images/task_04.png)
![料箱管理](doc/images/shelf_01.png)
![料箱管理](doc/images/shelf_02.png)
![任务管理](doc/images/task_01.png)
![任务管理](doc/images/task_02.png)
![任务管理](doc/images/task_03.png)
![任务管理](doc/images/task_04.png)
![故障管理](doc/images/fault_01.png)

## 🛠️ 开发环境

### 环境要求
- Node.js >= 16.0.0
- npm >= 8.0.0 或 yarn >= 1.22.0

### 安装依赖
```bash
npm install
# 或
yarn install
```

### 启动开发服务器
```bash
npm run dev
# 或
yarn dev
```

访问 http://localhost:3000

### 构建生产版本
```bash
npm run build
# 或
yarn build
```

### 预览生产版本
```bash
npm run preview
# 或
yarn preview
```

## 📁 项目结构

```
src/
├── api/                    # API接口层
│   └── index.ts           # 统一API管理
├── components/            # 公共组件
├── mock/                  # Mock数据
│   └── index.ts          # Mock配置
├── router/                # 路由配置
│   └── index.ts          # 路由定义
├── stores/                # Pinia状态管理
├── styles/                # 全局样式
│   └── index.css         # 基础样式
├── types/                 # TypeScript类型定义
│   └── index.ts          # 数据模型
├── views/                 # 页面组件
│   ├── Layout.vue        # 主布局
│   ├── Dashboard.vue     # 仪表盘
│   ├── AGV/              # AGV管理
│   ├── Charging/         # 充电管理
│   ├── Map/              # 地图管理
│   ├── Task/             # 任务管理
│   ├── Container/        # 料箱管理
│   ├── Shelf/            # 货架管理
│   └── Fault/            # 故障管理
├── App.vue               # 根组件
└── main.ts               # 应用入口
```

## 🔧 配置说明

### Vite配置
- 自动导入Vue和Element Plus组件
- 路径别名配置 (@指向src目录)
- 开发服务器端口3000

### TypeScript配置
- 严格模式启用
- 路径映射配置
- 支持Vue单文件组件

### Mock数据
项目使用Mock.js生成模拟数据，便于前端开发和测试：
- 自动生成AGV、任务、充电桩等数据
- 模拟真实的API响应格式
- 支持分页、筛选等功能

## 🌐 API接口

### 接口规范
所有API接口遵循RESTful设计规范：

```typescript
// 统一响应格式
interface ApiResponse<T> {
  code: number      // 状态码
  message: string   // 响应消息
  data: T          // 响应数据
}

// 分页数据格式
interface PageData<T> {
  list: T[]        // 数据列表
  total: number    // 总数量
  page: number     // 当前页
  pageSize: number // 页大小
}
```

### 主要接口
- `GET /api/dashboard/stats` - 获取仪表盘统计
- `GET /api/agv/list` - 获取AGV列表
- `GET /api/task/list` - 获取任务列表
- `GET /api/charging/list` - 获取充电桩列表
- `GET /api/container/list` - 获取料箱列表
- `GET /api/shelf/list` - 获取货架列表
- `GET /api/fault/list` - 获取故障列表

## 🎯 后台对接

### 替换Mock数据
1. 修改 `src/api/index.ts` 中的 `baseURL`
2. 移除 `src/main.ts` 中的 `import './mock'`
3. 根据实际后台接口调整请求参数和响应处理

### 认证集成
在 `src/api/index.ts` 的请求拦截器中添加认证逻辑：

```typescript
api.interceptors.request.use((config) => {
  // 添加认证token
  const token = localStorage.getItem('token')
  if (token) {
    config.headers.Authorization = `Bearer ${token}`
  }
  return config
})
```

## 🔍 开发指南

### 添加新页面
1. 在 `src/views/` 下创建页面组件
2. 在 `src/router/index.ts` 中添加路由配置
3. 在 `src/views/Layout.vue` 中添加菜单项

### 添加新API
1. 在 `src/types/index.ts` 中定义数据类型
2. 在 `src/api/index.ts` 中添加API方法
3. 在 `src/mock/index.ts` 中添加Mock数据

### 样式规范
- 使用CSS变量定义主题色彩
- 遵循Element Plus设计规范
- 响应式设计，支持移动端

## 🚀 部署说明

### Nginx配置示例
```nginx
server {
    listen 80;
    server_name your-domain.com;
    root /path/to/dist;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }

    location /api {
        proxy_pass http://backend-server;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}
```

## 📝 更新日志

### v1.0.0 (2024-01-01)
- ✨ 初始版本发布
- 🎯 完成核心功能模块
- 📱 响应式设计实现
- 🔧 Mock数据集成

## 🤝 贡献指南

1. Fork 项目
2. 创建功能分支 (`git checkout -b feature/AmazingFeature`)
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 打开 Pull Request

## 📄 许可证

本项目采用 MIT 许可证 - 查看 [LICENSE](LICENSE) 文件了解详情

## 📞 联系方式

如有问题或建议，请通过以下方式联系：
- 联系人: UKIOT
- 邮箱: ukiot1000@163.com
- 项目地址: https://gitee.com/ukiot/wcs-front.git

---

⭐ 如果这个项目对您有帮助，请给它一个星标！