邮轮穿舱件管理系统-小程序端核心功能模块分析
文档概述
本文档基于对邮轮穿舱件管理系统-小程序端的pages目录结构分析，详细阐述了系统的核心功能模块架构、代码依赖关系和数据流模式。通过深入分析用户认证、任务管理、工件管理、消息系统和个人中心等关键模块，为开发人员提供全面的技术参考。
系统架构概览
整体架构图
flowchart TD
subgraph 前端层
A[登录认证模块] --> B[任务管理模块]
A --> C[工件管理模块]
A --> D[消息系统模块]
A --> E[个人中心模块]
end
subgraph 业务逻辑层
B --> F[任务列表页面]
B --> G[任务详情页面]
C --> H[工件详情页面]
D --> I[消息列表页面]
E --> J[个人信息页面]
end
subgraph 数据访问层
F --> K[API请求模块]
G --> K
H --> K
I --> K
J --> K
end
subgraph 后端服务
K --> L[RESTful API]
L --> M[数据库服务]
end
核心模块依赖关系
flowchart TD
A[登录页面] --> B[用户绑定页面]
A --> C[任务列表页面]
C --> D[任务详情页面]
D --> E[工件详情页面]
A --> F[个人中心页面]
F --> B
F --> G[消息页面]
H[API请求模块] --> A
H --> B
H --> C
H --> D
H --> E
H --> F
H --> G
style A fill:#e1f5fe
style C fill:#f3e5f5
style D fill:#e8f5e8
style E fill:#fff3e0
用户认证模块分析
登录功能架构
sequenceDiagram
participant U as 用户
participant L as 登录页面
participant W as 微信API
participant S as 后端服务
U->>L: 输入账号密码/微信登录
L->>W: 调用wx.login()获取code
W-->>L: 返回授权code
L->>S: 发送登录请求(账号密码+code)
S-->>L: 返回access_token
L->>L: 存储token到本地
L->>U: 跳转到个人中心页面
关键代码实现
登录模块支持两种认证方式：
- 密码登录：传统用户名密码认证
- 微信登录：基于微信授权码的快速登录
核心功能函数：
passwordLogin(): 处理密码登录逻辑wechatLogin(): 处理微信登录逻辑changeSubmit(): 动态控制提交按钮状态
引用文件:
用户绑定功能
stateDiagram-v2
[*] --> 未绑定状态
未绑定状态 --> 绑定表单: 显示绑定界面
绑定表单 --> 验证中: 提交绑定信息
验证中 --> 绑定成功: 验证通过
验证中 --> 绑定失败: 验证失败
绑定成功 --> [*]: 重新登录
绑定失败 --> 绑定表单: 重新输入
引用文件:
- bindUser.js - 账户绑定逻辑
任务管理模块分析
任务列表页面架构
classDiagram
class TaskPage {
-data: Object
+userInfo: Object
+userScopes: Array
+taskList: Array
+allTaskList: Array
+filterType: String
+loadUserInfo()
+loadTaskList()
+applyFilter()
+onTaskClick()
}
class TaskItem {
+ticket_id: String
+ticket_status: String
+ticket_type: String
+target_workpiece: String
+ticket_tos: Array
+statusText: String
+typeText: String
+formattedTime: String
}
TaskPage "1" *-- "many" TaskItem : contains
任务筛选机制
系统支持两种任务筛选模式：
- 全部任务：显示所有可见任务
- 分配给我：仅显示分配给当前用户的任务
筛选逻辑实现：
// 根据用户ID筛选分配任务
filteredList = allTaskList.filter(task => {
if (Array.isArray(task.ticket_tos)) {
return task.ticket_tos.includes(userInfo.id);
}
// 其他格式处理逻辑...
});
引用文件:
- taskPage.js - 任务筛选逻辑
任务详情页面
flowchart TD
A[任务列表] --> B{点击任务项}
B --> C[加载任务详情]
C --> D[获取工件信息]
C --> E[加载相关图片]
D --> F[显示工件详情]
E --> G[显示任务图片]
F --> H[任务操作面板]
G --> H
H --> I[开始作业]
H --> J[取消作业]
H --> K[提交汇报]
任务状态流转：
stateDiagram-v2
[*] --> open: 创建任务
open --> running: 开始作业
running --> closed: 完成汇报
running --> issue: 问题汇报
running --> open: 取消作业
issue --> running: 重新处理
closed --> [*]: 任务结束
引用文件:
- taskDetail.js - 任务操作逻辑
工件管理模块分析
工件详情页面架构
erDiagram
WORKPIECE ||--o{ WORKPIECE_IMAGE : has
WORKPIECE {
string wp_id PK
string wp_firestop_code
string wp_matrial
string wp_size
string wp_fire_rating
string wp_watertightness
string wp_main_vertical_zone
string wp_installation_location
string wp_z_coordinate
string wp_frame_station
string wp_longitudinal_stiffener
string wp_sap1
string wp_sap2
string wp_standard_drawing_catalogue
string wp_extra
}
WORKPIECE_IMAGE {
string image_id PK
string wp_id FK
string image_key
string base64_data
string url
}
字段映射机制
系统使用字段映射表将数据库字段转换为用户友好的显示名称：
| 数据库字段 | 显示名称 | 数据类型 |
|---|---|---|
| wp_firestop_code | 防火板代号 | String |
| wp_matrial | 材料 | String |
| wp_size | 规格 | String |
| wp_fire_rating | 防火等级 | String |
| wp_watertightness | 水密等级 | String |
引用文件:
- workpieceDetail.js - 字段映射配置
图片加载流程
sequenceDiagram
participant P as 工件页面
participant S as 后端服务
participant I as 图片服务
P->>S: 请求工件基本信息
S-->>P: 返回工件数据
P->>S: 请求工件图片列表
S-->>P: 返回图片key列表
loop 每张图片
P->>I: 请求图片下载(key)
I-->>P: 返回base64数据
P->>P: 构建图片URL
end
P->>P: 更新界面显示
引用文件:
- workpieceDetail.js - 图片加载逻辑
消息系统模块分析
实时消息架构
flowchart TD
A[消息列表页面] --> B[WebSocket连接]
B --> C[接收实时消息]
C --> D[更新消息状态]
D --> E[刷新未读计数]
E --> F[通知个人中心]
G[聊天页面] --> H[发送消息]
H --> I[通过WebSocket传输]
I --> J[目标用户接收]
消息处理机制
系统采用事件驱动的消息处理模式：
- 消息接收：通过WebSocket实时接收新消息
- 状态更新：自动标记已读消息
- 未读计数：实时计算并更新未读消息数量
引用文件:
- message.js - 消息接收处理
个人中心模块分析
用户信息管理
classDiagram
class MyPage {
+personalInfo: Object
+optionalList: Array
+settingList: Array
+onShow()
+onNavigateTo()
+onEleClick()
}
class PersonalInfo {
+name: String
+star: String
+city: String
}
class MenuItem {
+name: String
+icon: String
+type: String
+url: String
}
MyPage "1" *-- "1" PersonalInfo : has
MyPage "1" *-- "many" MenuItem : contains
用户状态识别
系统根据用户信息自动识别不同状态：
- 绑定状态：通过用户名前缀识别（UNBIND_为未绑定）
- 权限等级：根据is_system字段区分管理员和普通用户
- 账户状态：基于status字段判断账户是否活跃
引用文件:
- my.js - 用户信息处理逻辑
API请求模块分析
统一请求处理
flowchart LR
A[页面组件] --> B[request函数]
B --> C[构建请求头]
C --> D[添加Token认证]
D --> E[发送HTTP请求]
E --> F{状态码判断}
F -->|200/201| G[解析响应数据]
F -->|其他| H[处理错误]
G --> I[返回成功结果]
H --> J[抛出异常]
认证机制实现
系统采用Bearer Token认证方式：
- 自动从本地存储获取access_token
- 在请求头中添加Authorization字段
- 支持JSON格式的数据传输
引用文件:
- request.js - 请求处理核心逻辑
数据流分析
核心数据流转路径
flowchart TD
A[用户登录] --> B[获取Token]
B --> C[存储到本地]
C --> D[任务列表请求]
D --> E[携带Token认证]
E --> F[获取任务数据]
F --> G[任务详情请求]
G --> H[获取工件信息]
H --> I[加载相关图片]
I --> J[展示完整信息]
状态管理策略
系统采用分层状态管理：
- 页面级状态：各页面独立管理的数据状态
- 应用级状态：通过本地存储管理的持久化状态
- 服务级状态：后端服务维护的业务状态
性能优化建议
图片加载优化
- 实现图片懒加载机制
- 使用base64编码减少HTTP请求
- 添加图片缓存策略
数据请求优化
- 实现请求去重机制
- 添加请求缓存层
- 优化图片下载并发控制
索引
邮轮穿舱件管理系统-小程序端采用模块化架构设计，各功能模块职责清晰，依赖关系明确。系统通过统一的API请求层实现前后端数据交互，采用Token认证机制保障安全性。核心功能模块包括用户认证、任务管理、工件管理、消息系统和个人中心，形成了完整的业务闭环。
关键技术特点：
- 支持多种登录方式，用户体验友好
- 任务状态管理完善，支持完整的业务流程
- 工件信息展示详细，支持图片预览
- 消息系统实时性强，支持未读计数
- API请求封装统一，错误处理完善
该系统架构合理，代码结构清晰，为后续功能扩展和维护提供了良好的基础。
参考文件列表: