# smart-mes-admin

**Repository Path**: beituo/smart-mes-admin

## Basic Information

- **Project Name**: smart-mes-admin
- **Description**: 🏭 Smart MES 智能制造管理后台 — 基于 Vue 3 + TypeScript + Ant Design Vue + ECharts 构建，覆盖生产/质量/仓库/设备/能源/安环等核心业务模块。
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2026-07-27
- **Last Updated**: 2026-07-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<p align="center">
  <h1 align="center">🏭 Smart MES Admin</h1>
  <p align="center">
    <strong>面向化工行业的开源 MES 智能制造平台前端</strong>
  </p>
  <p align="center">
    <a href="LICENSE"><img src="https://img.shields.io/badge/License-Apache%202.0-blue.svg" alt="License"></a>
    <a href="https://vuejs.org"><img src="https://img.shields.io/badge/Vue-3.5-42b883?logo=vue.js" alt="Vue 3"></a>
    <a href="https://www.typescriptlang.org"><img src="https://img.shields.io/badge/TypeScript-6.0-3178c6?logo=typescript" alt="TypeScript 6"></a>
    <a href="https://vite.dev"><img src="https://img.shields.io/badge/Vite-8.0-646cff?logo=vite" alt="Vite 8"></a>
    <a href="https://antdv.com"><img src="https://img.shields.io/badge/Ant%20Design%20Vue-4.2-0170fe?logo=ant-design" alt="Ant Design Vue 4"></a>
    <a href="https://pinia.vuejs.org"><img src="https://img.shields.io/badge/Pinia-3.0-ffd859?logo=vue.js" alt="Pinia 3"></a>
  </p>
</p>

---

## 📖 项目简介

**Smart MES Admin** 是一套面向化工行业的制造执行系统（MES）管理端前端应用，覆盖从生产计划、工单执行、质量检验到仓库管理、设备维护、能源监控的全链路数字化管理。

系统采用现代化前端技术栈构建，提供 **13 大核心功能模块**、**6 类数据驾驶舱**，支持 PC Web 端与移动端协同作业，内置工作流引擎与 IoT 多协议接入能力。

> 🏗️ 本仓库为前端项目，后端服务请参见 [smart-mes-api](https://gitee.com/zhier_plus)（开发中）。

## ✨ 核心特色

| 特色 | 说明 |
|------|------|
| 🏭 **化工行业垂直** | 专为化工制造场景设计，内置危化品管理、配方版本控制、批次追溯、安全连锁装置等 |
| 📊 **6 大数据驾驶舱** | 生产 / 设备 / 质量 / 仓库 / 安环 / 能源六维度可视化，支持 KPI 下钻分析 |
| 🔒 **安全优先** | JWT + RBAC 权限控制 + 车间级数据隔离，Token 使用 sessionStorage 存储 |
| 🏗️ **现代技术栈** | Vue 3 Composition API + TypeScript 6 + Vite 8 + Ant Design Vue 4 |
| 🔄 **工作流引擎** | 内置可视化流程设计器，支持会签/或签/条件分支，审批流程贯穿全业务 |
| 🔌 **IoT 多协议接入** | 支持 OPC UA / MQTT / Modbus / HTTP / JDBC 等协议，实时采集设备数据 |
| 📱 **移动端支持** | 内置移动 APP 管理模块，操作工可通过移动端完成生产报工、异常上报 |
| 📝 **全链路追溯** | 计划 → 工单 → 投料 → 执行 → 质检 → 入库全链路数字化，一秒追溯 |

---

## 🧩 功能模块

### 概览

| 模块 | 主要功能 |
|------|---------|
| **📊 仪表盘** | 总览仪表盘、生产/设备/质量/仓库/安环/能源驾驶舱 |
| **🏭 工厂建模** | 物料管理、产品管理、配方管理、产线建模、工艺管理、流程管理、组织架构、工厂日历、权限管理 |
| **⚙️ 生产管理** | 生产计划、工单管理、物料齐套检查、领料管理、产线监控、生产报表、交接班管理、异常处置 |
| **🔍 质量管理** | 质检任务、质量事件、规则库、检验报告、质量追溯、器具台账、检定校准、原辅料检验、成品检验、复检管理 |
| **📦 仓库管理** | 库存台账、出入库记录、出库防错、安全库存预警、条码管理、FIFO、库存盘点、仓库建模 |
| **🔧 设备管理** | 设备台账、重点设备监测、备品备件、预防性维护、设备统计报表、人员绩效 |
| **⚡ 能源管理** | 能耗记录、能耗监测、能流图分析、能源统计分析、能源成本核算 |
| **⚠️ 危化品管理** | 危化品台账、化学品管理、隐患排查标准、排查计划、排查工单 |
| **🛡️ 安环管理** | 事故记录、安全检查、安全培训、管理制度、环保耗材预警、劳保管理、巡检路线、生产连锁装置 |
| **🌐 物联网平台** | IoT 设备管理、设备报警、数据集成服务、数据存储 |
| **📱 移动 APP** | 移动端应用管理与配置 |
| **📋 报表中心** | 综合报表查询与导出 |
| **🔐 系统管理** | 用户管理、角色管理、菜单权限、定时任务、消息通知、工作流管理 |

### 部分模块截图

<!-- 截图可在此处添加 -->
<!-- ![Dashboard](docs/screenshots/dashboard.png) -->

---

## 🛠 技术栈

| 类别 | 技术 | 版本 |
|------|------|------|
| 框架 | Vue 3 (Composition API) | ^3.5 |
| 语言 | TypeScript | ~6.0 |
| 构建工具 | Vite | ^8.0 |
| UI 组件库 | Ant Design Vue | ^4.2 |
| 图表 | ECharts | ^6.1 |
| 状态管理 | Pinia | ^3.0 |
| 路由 | Vue Router | ^5.0 |
| HTTP 客户端 | Axios | ^1.16 |
| 日期处理 | Day.js | ^1.11 |
| 单元测试 | Vitest | ^4.1 |
| E2E 测试 | Playwright / Cypress | ^1.59 / ^15.14 |

---

## 🚀 快速开始

### 环境要求

- **Node.js** `^20.19.0` 或 `>=22.12.0`
- **包管理器** npm / pnpm / yarn（推荐 pnpm）

### 安装与启动

```bash
# 克隆仓库
git clone https://gitee.com/zhier_plus/smart-mes-admin.git
cd smart-mes-admin

# 安装依赖
npm install

# 复制环境变量配置
cp .env.example .env

# 启动开发服务器（默认端口 3000）
npm run dev
```

访问 [http://localhost:3000](http://localhost:3000) 即可看到应用。

### 构建生产版本

```bash
npm run build
```

构建产物位于 `dist/` 目录。

### 运行测试

```bash
# 单元测试
npm run test:unit

# E2E 测试（Playwright）
npx playwright install
npm run test:e2e

# E2E 测试（Cypress）
npm run test:e2e:dev
```

---

## 📁 项目结构

```
smart-mes-admin/
├── src/
│   ├── api/                    # API 接口层（按业务域拆分）
│   │   ├── auth.ts             #   认证相关
│   │   ├── prod.ts             #   生产管理
│   │   ├── qms.ts              #   质量管理
│   │   ├── wms.ts              #   仓库管理
│   │   ├── equip.ts            #   设备管理
│   │   ├── energy.ts           #   能源管理
│   │   ├── hazard.ts           #   危化品管理
│   │   ├── ehs.ts              #   安环管理
│   │   ├── iot.ts              #   物联网平台
│   │   ├── order.ts            #   工单
│   │   ├── report.ts           #   报表
│   │   ├── factory.ts          #   工厂建模
│   │   └── request.ts          #   Axios 实例 + 拦截器
│   ├── assets/                 # 静态资源与全局样式
│   ├── components/             # 公共组件
│   ├── layouts/                # 布局组件
│   ├── router/                 # 路由配置
│   ├── stores/                 # Pinia 状态管理
│   ├── utils/                  # 工具函数
│   │   └── websocket.ts        #   WebSocket 通知管理
│   └── views/                  # 页面视图（按模块组织）
│       ├── dashboard/          #   仪表盘 & 驾驶舱
│       ├── prod/               #   生产管理
│       ├── qms/                #   质量管理
│       ├── wms/                #   仓库管理
│       ├── equip/              #   设备管理
│       ├── energy/             #   能源管理
│       ├── hazard/             #   危化品管理
│       ├── ehs/                #   安环管理
│       ├── iot/                #   物联网平台
│       ├── mobile/             #   移动APP
│       ├── factory/            #   工厂建模
│       ├── system/             #   系统管理
│       ├── workflow/           #   工作流引擎
│       ├── schedule/           #   定时任务
│       ├── notification/       #   消息通知
│       ├── report/             #   报表中心
│       └── login/              #   登录
├── docs/                       # 项目文档
│   └── PRD.md                  #   产品需求文档
├── e2e/                        # E2E 测试
├── cypress/                    # Cypress 配置
├── LICENSE                     # Apache 2.0
├── package.json
├── vite.config.ts
└── tsconfig.json
```

---

## 🔧 配置说明

### 环境变量

创建 `.env` 文件（参考 `.env.example`）：

```bash
# 应用部署路径
VITE_BASE_PATH=/

# API 后端地址（开发环境使用 Vite proxy）
VITE_API_BASE_URL=
```

| 变量 | 说明 | 示例 |
|------|------|------|
| `VITE_BASE_PATH` | 应用部署的 URL 路径前缀 | `/mes-admin/` |
| `VITE_API_BASE_URL` | 后端 API 地址（空则使用 Vite proxy） | `https://api.example.com` |

### Vite 代理配置

开发环境下 API 请求默认通过 Vite proxy 转发至 `http://localhost:8080`。修改 `vite.config.ts` 中的 `server.proxy` 即可调整。

---

## 🤝 贡献指南

欢迎参与贡献！请遵循以下流程：

1. **Fork** 本仓库
2. 创建特性分支：`git checkout -b feat/your-feature`
3. 提交变更：`git commit -m 'feat: add some feature'`
4. 推送分支：`git push origin feat/your-feature`
5. 提交 **Pull Request**

### 提交规范

推荐使用 [Conventional Commits](https://www.conventionalcommits.org/) 规范：

- `feat:` 新功能
- `fix:` 修复 Bug
- `docs:` 文档变更
- `style:` 代码格式（不影响功能）
- `refactor:` 重构
- `perf:` 性能优化
- `test:` 测试相关
- `chore:` 构建/工具变更

### 代码风格

- 使用 Vue 3 **Composition API**（`<script setup lang="ts">`）
- 遵循项目中已有的组件结构和命名约定
- 提交前确保 `npm run type-check` 通过

---

## 📄 许可证

本项目基于 **Apache License 2.0** 开源。详见 [LICENSE](LICENSE)。

Copyright © 2026 Smart MES Admin Contributors.

---

## 🙏 致谢

本项目得益于以下优秀的开源项目：

- [Vue.js](https://vuejs.org/) — 渐进式 JavaScript 框架
- [Ant Design Vue](https://antdv.com/) — 企业级 UI 组件库
- [ECharts](https://echarts.apache.org/) — 数据可视化图表库
- [Vite](https://vite.dev/) — 下一代前端构建工具
- [Pinia](https://pinia.vuejs.org/) — 直观的类型安全状态管理
- [Playwright](https://playwright.dev/) — 可靠的 E2E 测试框架

---

<p align="center">
  <sub>Made with ❤️ by Smart MES Admin Contributors</sub>
</p>