基于 Vue 3 + TypeScript 的企业级智能仓储控制系统前端解决方案
功能特性 • 技术栈 • 快速开始 • 项目结构 • 开发指南
--- ## 📖 项目简介 PLC-WCS（Programmable Logic Controller - Warehouse Control System）是一套面向工业4.0智能制造场景的仓储控制系统前端应用。系统采用现代化前端技术栈构建，提供直观的可视化界面，支持仓库管理、设备监控、任务调度、场景编排等核心功能。  ### 🎯 设计理念 - **科技感 UI**：深色主题 + 赛博朋克风格，打造沉浸式工业控制体验 - **双引擎架构**：Mock/API 无缝切换，支持独立开发与联调 - **可视化编排**：2D 拖拽式场景设计器，实现产线流程可视化配置 - **实时监控**：设备状态实时展示，支持动态数据可视化 --- ## ✨ 功能特性 ### 核心模块 | 模块 | 功能 | 状态 | |------|------|------| | **数据大屏** | 实时数据可视化、运营统计概览 | ✅ 已完成 | | **仓库管理** | 仓库统计、列表、详情、设备绑定、场景配置 | ✅ 已完成 | | **场景管理** | 2D拖拽编排、设备连线、流水线设计 | ✅ 已完成 | | **设备管理** | 设备列表、详情、接入配置、在线调试 | ✅ 已完成 | | **任务管理** | 入库、出库、倒库、盘点、机加工任务 | ✅ 已完成 | | **日志管理** | 操作日志、系统日志查询 | ✅ 已完成 | | **系统管理** | 用户、角色、权限、数据字典 | 🚧 规划中 | ### 场景编辑器特性 - 🎨 **可视化画布**：支持缩放、平移、网格对齐 - 📦 **设备库**：内置输送、仓储、搬运、加工、传感、控制六大类设备 - 🔗 **智能连线**：支持直线、贝塞尔曲线、正交折线三种连接方式 - ⚡ **流动动画**：连接线流动效果，直观展示物料流向 - ↩️ **撤销重做**：完整的历史记录管理 - 💾 **场景保存**：支持场景复制、导入导出 --- ## 🛠 技术栈 | 类别 | 技术 | 版本 | |------|------|------| | **框架** | Vue | 3.4+ | | **语言** | TypeScript | 5.3+ | | **构建工具** | Vite | 5.0+ | | **路由** | Vue Router | 4.x | | **状态管理** | Pinia | 2.x | | **UI 组件库** | Element Plus | 2.x | | **图表可视化** | ECharts | 5.4+ | | **HTTP 客户端** | Axios | 1.x | | **Mock 数据** | MockJS | 1.x | | **样式预处理** | Sass/SCSS | - | --- ## 🚀 快速开始 ### 环境要求 - Node.js >= 18.0.0 - pnpm >= 8.0.0 (推荐) 或 npm >= 9.0.0 ### 安装依赖 ```bash # 使用 pnpm (推荐) pnpm install # 或使用 npm npm install ``` ### 开发模式 ```bash # 启动开发服务器 pnpm dev # 或 npm run dev ``` 访问 http://localhost:5173 查看应用 ### 构建生产 ```bash # 构建生产版本 pnpm build # 或 npm run build ``` ### 预览构建 ```bash # 预览生产构建 pnpm preview # 或 npm run preview ``` --- ## 📁 项目结构 ``` PLC_WCS/ ├── public/ # 静态公共资源 ├── src/ │ ├── api/ # API 接口层 │ │ ├── device.ts # 设备相关接口 │ │ ├── log.ts # 日志相关接口 │ │ ├── task.ts # 任务相关接口 │ │ └── warehouse.ts # 仓库相关接口 │ ├── assets/ # 静态资源 (图片、图标等) │ ├── components/ # 公共组件 │ ├── config/ # 应用配置 │ │ └── index.ts # 全局配置 (Mock/API切换等) │ ├── layouts/ # 布局组件 │ │ └── MainLayout.vue # 主布局 │ ├── mock/ # Mock 数据层 │ │ ├── device.ts # 设备模拟数据 │ │ ├── log.ts # 日志模拟数据 │ │ ├── task.ts # 任务模拟数据 │ │ └── warehouse.ts # 仓库模拟数据 │ ├── router/ # 路由配置 │ ├── stores/ # Pinia 状态管理 │ ├── styles/ # 全局样式 │ │ └── index.scss # 主样式文件 │ ├── types/ # TypeScript 类型定义 │ │ ├── common.ts # 公共类型 │ │ ├── device.ts # 设备类型 │ │ ├── log.ts # 日志类型 │ │ ├── task.ts # 任务类型 │ │ └── warehouse.ts # 仓库类型 │ ├── utils/ # 工具函数 │ │ ├── color.ts # 颜色处理 │ │ ├── eventBus.ts # 事件总线 │ │ ├── format.ts # 格式化工具 │ │ ├── request.ts # HTTP 请求封装 │ │ ├── storage.ts # 本地存储 │ │ └── validate.ts # 数据验证 │ ├── views/ # 页面视图 │ │ ├── Dashboard.vue # 数据大屏 │ │ ├── device/ # 设备管理 │ │ ├── log/ # 日志管理 │ │ ├── task/ # 任务管理 │ │ └── warehouse/ # 仓库管理 │ ├── App.vue # 根组件 │ └── main.ts # 应用入口 ├── index.html # HTML 入口 ├── package.json # 项目配置 ├── tsconfig.json # TypeScript 配置 ├── vite.config.ts # Vite 构建配置 └── README.md # 项目说明 ``` --- ## 📝 开发指南 ### Mock/API 双引擎切换 在 `src/config/index.ts` 中配置数据源： ```typescript // true: 使用 Mock 模拟数据 (前端独立开发) // false: 使用真实 API 接口 (前后端联调) export const USE_MOCK = true ``` ### 添加新页面 1. 在 `src/views/` 下创建页面组件 2. 在 `src/router/index.ts` 中添加路由配置 3. 如需 API，在 `src/api/` 下添加接口定义 4. 如需 Mock，在 `src/mock/` 下添加模拟数据 ### 类型定义规范 所有数据类型定义统一放置在 `src/types/` 目录下，确保类型安全。 ### 样式规范 - 使用 CSS 变量定义主题色，支持主题切换 - 组件样式使用 `scoped` 避免污染 - 公共样式放置在 `src/styles/index.scss` --- ## 🖼 界面预览 ### 数据大屏 实时展示仓库运营数据，包括任务统计、设备状态、库存概览等。 ### 场景编辑器 2D 可视化流水线设计工具，支持拖拽设备、连接配置、参数设置。 ### 仓库管理 卡片/列表双视图切换，直观展示仓库信息及状态。 --- ## 🤝 贡献指南 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) 开源协议。 --- ## 📞 联系方式 如有问题或建议，欢迎通过以下方式联系： - 提交 [Issue](../../issues) - 发起 [Discussion](../../discussions) ---Copyright © 2024-2026 iotsink. All rights reserved.
Made with ❤️ for Industrial IoT