# WMS看板系统

制造业WMS仓库管理系统监控看板，使用Vue3+Vite构建，无需登录即可访问。

## 技术栈

- Vue 3
- Vite
- Vue Router
- Element Plus
- ECharts
- Axios
- Day.js

## 项目结构

```
vue-vite-js/
├── src/
│   ├── api/              # API接口定义
│   ├── router/           # 路由配置
│   ├── utils/            # 工具类
│   │   ├── http.js       # Axios封装
│   │   └── index.js      # 通用工具函数
│   ├── views/            # 页面组件
│   │   ├── Dashboard.vue # 综合看板
│   │   ├── Warehouse.vue # 仓库监控
│   │   ├── Production.vue# 生产监控
│   │   └── Inventory.vue # 库存预警
│   ├── App.vue           # 根组件
│   └── main.js           # 入口文件
├── index.html
├── vite.config.js
└── package.json
```

## 快速开始

### 1. 安装依赖

```bash
npm install
```

### 2. 启动开发服务器

```bash
npm run dev
```

访问 http://localhost:3000

### 3. 构建生产版本

```bash
npm run build
```

## 接口调用示例

项目中已封装好 `http` 工具，使用非常简单：

```javascript
import { http } from '@/utils/http'

// GET 请求
const getData = async () => {
  const res = await http.get('/api/list', { page: 1, size: 10 })
  console.log(res.data)
}

// POST 请求
const postData = async () => {
  const res = await http.post('/api/create', { name: '测试' })
  console.log(res.data)
}

// PUT 请求
const updateData = async () => {
  const res = await http.put('/api/update/1', { name: '更新' })
}

// DELETE 请求
const deleteData = async () => {
  const res = await http.delete('/api/delete/1')
}
```

## API 统一管理

在 `src/api/index.js` 中已经定义好所有业务接口：

```javascript
import { warehouseApi, inventoryApi, taskApi } from '@/api'

// 使用示例
const fetchData = async () => {
  // 获取仓库状态
  const status = await warehouseApi.getWarehouseStatus()

  // 获取库存列表
  const inventory = await inventoryApi.getInventoryList({ page: 1 })

  // 获取任务列表
  const tasks = await taskApi.getTaskList({ status: '进行中' })
}
```

## 代理配置

在 `vite.config.js` 中已配置API代理：

```javascript
server: {
  port: 3000,
  proxy: {
    '/api': {
      target: 'http://localhost:8080',  // 修改为实际后端地址
      changeOrigin: true,
      rewrite: (path) => path.replace(/^\/api/, '')
    }
  }
}
```

## 工具函数

```javascript
import { formatDateTime, formatDate, formatTime, formatNumber } from '@/utils'

// 格式化日期时间
formatDateTime(new Date())  // '2024-12-24 14:30:00'

// 格式化日期
formatDate(new Date())      // '2024-12-24'

// 格式化数字
formatNumber(12345.67, 2)   // '12,345.67'
```

## 页面说明

- **综合看板** - WMS整体运营数据概览
- **仓库监控** - 仓库区域、库位、环境温湿度监控
- **生产监控** - 生产线、设备状态、产量统计
- **库存预警** - 库存不足、积压、过期预警

## 响应式支持

项目已实现响应式设计，支持以下分辨率：

| 分辨率范围 | 适配说明 |
|-----------|---------|
| 1920px+ | 最佳显示效果，4列布局 |
| 1600px | 2-3列布局，字体和间距适中 |
| 1366px | 2列布局为主，图表高度调整 |
| 1024px | 紧凑布局，部分内容改为单列 |
| 768px | 移动端适配，单列布局，优化触摸操作 |

**主要适配内容：**
- 网格布局自适应调整
- 字体大小动态缩放
- 间距和内边距优化
- 导航菜单在小屏幕下自动换行
- 表格在移动端显示优化
- 图表高度自动调整

## 注意事项

1. 修改 `vite.config.js` 中的 `target` 为实际的后端API地址
2. 根据后端返回格式调整 `src/utils/http.js` 中的响应拦截器
3. 所有页面都可直接访问，无需登录认证