198 lines
4.9 KiB
Markdown
198 lines
4.9 KiB
Markdown
|
# 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
|
|||
|
|
|
|||
|
|
### 安装依赖
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
cd mobile-app
|
|||
|
|
npm install
|
|||
|
|
# 或
|
|||
|
|
pnpm install
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 开发运行
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
# H5 开发
|
|||
|
|
npm run dev:h5
|
|||
|
|
|
|||
|
|
# 微信小程序开发
|
|||
|
|
npm run dev:mp-weixin
|
|||
|
|
|
|||
|
|
# App 开发
|
|||
|
|
npm run dev:app
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 构建发布
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
# 构建 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 文档。
|
|||
|
|
|
|||
|
|
## 注意事项
|
|||
|
|
|
|||
|
|
1. 扫码功能在 H5 环境下不可用，需要在小程序或 App 中使用
|
|||
|
|
2. 部分功能需要配合后端接口实现
|
|||
|
|
3. 标签打印功能需要配合打印终端使用
|
|||
|
|
4. IOT 告警功能需要与 IOT 平台对接
|
|||
|
|
|
|||
|
|
## 相关文档
|
|||
|
|
|
|||
|
|
- [MOM系统移动端PRD文档](../prd/MOM系统移动端PRD文档.md)
|
|||
|
|
- [Figma 设计稿](https://www.figma.com/make/i3vtaKIYFAxsVlOi5l6aVb)
|
|||
|
|
- [Web 后台源码](../mom-front/)
|
|||
|
|
|
|||
|
|
## 版本记录
|
|||
|
|
|
|||
|
|
### v1.0.0 (2026-01-22)
|
|||
|
|
- 初始版本发布
|
|||
|
|
- 实现基础页面框架
|
|||
|
|
- 实现登录认证功能
|
|||
|
|
- 实现仓储管理核心功能
|
|||
|
|
- 实现生产报工功能
|
|||
|
|
- 实现设备点检功能
|
|||
|
|
- 实现质量检验功能
|