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. 安装依赖

npm install

2. 启动开发服务器

npm run dev

访问 http://localhost:3000

3. 构建生产版本

npm run build

接口调用示例

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

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 中已经定义好所有业务接口：

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代理：

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

工具函数

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整体运营数据概览
• 仓库监控 - 仓库区域、库位、环境温湿度监控
• 生产监控 - 生产线、设备状态、产量统计
• 库存预警 - 库存不足、积压、过期预警

响应式支持

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

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

注意事项

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