MOM系统移动端应用
基于 UniApp 框架开发的 MOM（制造运营管理）系统移动端应用。
项目概述
本项目是 MOM 系统的移动端配套应用，旨在为车间操作人员、仓库管理员、设备维护人员等提供便捷的移动端操作入口，实现现场作业的数字化管理。
技术栈
- 框架: UniApp (Vue 3 + TypeScript)
- 状态管理: Pinia
- 样式: SCSS
- 目标平台: H5、微信小程序、Android App
项目结构
mobile-app/
├── src/
│ ├── pages/ # 页面文件
│ │ ├── login/ # 登录页
│ │ ├── tabbar/ # TabBar页面
│ │ │ ├── home/ # 首页
│ │ │ ├── reports/ # 报表
│ │ │ ├── workspace/ # 工作台
│ │ │ └── profile/ # 我的
│ │ ├── warehouse/ # 仓储管理
│ │ ├── production/ # 生产管理
│ │ ├── equipment/ # 设备管理
│ │ ├── quality/ # 质量管理
│ │ ├── scan/ # 扫码页面
│ │ └── message/ # 消息中心
│ ├── components/ # 公共组件
│ ├── store/ # 状态管理
│ ├── styles/ # 全局样式
│ ├── utils/ # 工具函数
│ ├── static/ # 静态资源
│ ├── App.vue # 根组件
│ ├── main.ts # 入口文件
│ ├── manifest.json # 应用配置
│ └── pages.json # 页面配置
├── package.json
├── vite.config.ts
└── tsconfig.json
功能模块
1. 首页
- 用户信息展示
- 工厂切换
- 待办事项统计
- 快捷入口
- 公告通知
2. 工作台
- 生产管理: 上工、生产报工、生产领料、生产退料、安灯呼叫
- 仓储管理: 库存查询、到货通知、采购入库、采购退货、产品入库、发货通知、销售出库、销售退货、转移调拨、库存盘点、外协发料、外协入库、标签打印、拆箱/封箱
- 设备管理: 设备台账、设备点检、设备保养、设备维修、告警记录
- 质量管理: IQC来料检验、IPQC过程检验、OQC出货检验
3. 报表
- 库存统计
- 入库统计
- 生产统计
- 产品追溯
4. 我的
- 用户信息
- 消息中心
- 工厂切换
- 语言切换
- 主题设置
- 暗黑模式
- 退出登录
开发指南
环境要求
- Node.js >= 16.0
- pnpm 或 npm
安装依赖
cd mobile-app
npm install
# 或
pnpm install
开发运行
# H5 开发
npm run dev:h5
# 微信小程序开发
npm run dev:mp-weixin
# App 开发
npm run dev:app
构建发布
# 构建 H5
npm run build:h5
# 构建微信小程序
npm run build:mp-weixin
# 构建 App
npm run build:app
设计规范
主题色
- 主色：#00BFA5 (明青色)
- 辅助色：#06B6D4 (青色)
- 成功：#22C55E
- 警告：#F97316
- 错误：#EF4444
字体规范
- 标题：32rpx - 36rpx, font-weight: 600
- 正文：28rpx, font-weight: 400
- 辅助：24rpx - 26rpx, color: #999999
间距规范
- xs: 8rpx
- sm: 16rpx
- base: 24rpx
- lg: 32rpx
- xl: 48rpx
圆角规范
- sm: 8rpx
- base: 12rpx
- lg: 16rpx
- xl: 24rpx
- round: 999rpx
TabBar 图标
在 src/static/tabbar/ 目录下需要放置以下图标：
| 文件名 | 说明 |
|---|---|
| home.png | 首页图标（未选中） |
| home-active.png | 首页图标（选中） |
| reports.png | 报表图标（未选中） |
| reports-active.png | 报表图标（选中） |
| workspace.png | 工作台图标（未选中） |
| workspace-active.png | 工作台图标（选中） |
| profile.png | 我的图标（未选中） |
| profile-active.png | 我的图标（选中） |
| scan.png | 中间扫码按钮图标 |
API 接口
本项目复用现有 Web 后台的 RESTful API 接口，主要接口包括：
- 认证接口：
/login,/logout,/getInfo - 仓储管理：
/mes/wm/* - 生产管理：
/mes/pro/* - 设备管理：
/mes/dv/* - 质量管理：
/mes/qc/*
详细接口文档请参考 PRD 文档。
注意事项
- 扫码功能在 H5 环境下不可用，需要在小程序或 App 中使用
- 部分功能需要配合后端接口实现
- 标签打印功能需要配合打印终端使用
- IOT 告警功能需要与 IOT 平台对接
相关文档
版本记录
v1.0.0 (2026-01-22)
- 初始版本发布
- 实现基础页面框架
- 实现登录认证功能
- 实现仓储管理核心功能
- 实现生产报工功能
- 实现设备点检功能
- 实现质量检验功能