邮轮穿舱件管理系统 - 项目介绍
1. 业务背景与价值定位
1.1 业务背景
邮轮穿舱件管理系统是针对邮轮制造业中穿舱件（贯穿船体的结构件）管理需求开发的专用系统。在邮轮建造过程中，穿舱件作为重要的结构部件，需要严格管理其技术参数、安装位置、防火等级、水密性等关键信息。
1.2 价值定位
该系统通过数字化手段实现穿舱件的全生命周期管理，提供以下核心价值：
- 标准化管理：统一穿舱件技术参数和规格标准
- 可视化追踪：实现穿舱件从设计到安装的全过程可视化追踪
- 质量控制：确保穿舱件符合船舶建造规范和安全标准
- 效率提升：通过自动化管理减少人工操作，提高工作效率
2. 系统功能概述
2.1 核心功能模块
基于代码分析，系统包含以下主要功能模块：
2.1.1 工件管理模块
- 穿舱件信息的新建、编辑、查看和删除
- 穿舱件状态管理（已生效、未生效、维护中、已停用）
- 穿舱件技术参数管理（防火等级、水密等级、材料规格等）
2.1.2 图像管理模块
- 穿舱件图像的上传、查看和管理
- 图像与穿舱件的绑定关系管理
- 图像预览和详细信息展示
2.1.3 用户认证与权限管理
- 用户登录、注册和权限验证
- 基于角色的访问控制
- 会话管理和安全控制
2.2 辅助功能模块
- 搜索和筛选功能
- 数据统计和报表
- 系统配置管理
- 调试和错误处理
3. 技术架构分析
3.1 前端技术栈
graph TD
A[Vue.js 2.6.14] --> B[Vue Router 3.6.5]
A --> C[Vuex 3.6.2]
A --> D[Vuetify 2.6.0]
A --> E[Axios 1.7.5]
B --> F[路由守卫]
C --> G[状态管理]
D --> H[UI组件库]
E --> I[HTTP请求]
技术栈详情：
- 框架：Vue.js 2.6.14 - 渐进式JavaScript框架
- 路由：Vue Router 3.6.5 - 单页面应用路由管理
- 状态管理：Vuex 3.6.2 - 集中式状态管理
- UI组件：Vuetify 2.6.0 - Material Design组件库
- HTTP客户端：Axios 1.7.5 - Promise-based HTTP客户端
3.2 项目结构分析
flowchart TD
subgraph 根目录
A[package.json] --> B[配置文件]
C[src/] --> D[源代码]
E[public/] --> F[静态资源]
G[docs/] --> H[文档]
end
subgraph 源代码结构
D --> I[App.vue]
D --> J[main.js]
D --> K[router/]
D --> L[store/]
D --> M[views/]
D --> N[components/]
D --> O[utils/]
D --> P[http/]
end
subgraph 视图模块
M --> Q[工件管理]
M --> R[图像管理]
M --> S[用户管理]
M --> T[调度管理]
M --> U[搜索功能]
end
4. 核心组件架构
4.1 应用入口架构
classDiagram
class App {
+name: String
+components: Object
+data(): Object
+methods: Object
+created(): void
}
class Navigator {
+导航菜单组件
}
class Footer {
+页脚组件
}
App --> Navigator: 包含
App --> Footer: 包含
核心文件引用：
4.2 路由架构设计
flowchart TD
A[路由入口] --> B[路由守卫]
B --> C{认证检查}
C -->|已认证| D[主页面]
C -->|未认证| E[登录页面]
D --> F[工件管理]
D --> G[图像管理]
D --> H[用户管理]
D --> I[调度管理]
D --> J[搜索功能]
路由配置详情：
- router/index.js - 路由配置，包含所有页面路由定义
- 支持历史模式路由，包含路由守卫进行权限验证
4.3 状态管理架构
classDiagram
class VuexStore {
+state: Object
+mutations: Object
+actions: Object
+getters: Object
}
class State {
+navigator_drawer: Boolean
+authenticated: Boolean
+user_info: Object
+user_token: String
}
VuexStore --> State: 管理
状态管理文件：
- store/index.js - Vuex状态管理配置
5. 核心业务模块详细分析
5.1 工件管理模块
5.1.1 功能特性
- 工件创建：支持新建穿舱件记录
- 状态管理：区分已生效和未生效工件
- 技术参数：管理防火等级、水密等级、材料规格等
- 搜索筛选：支持多条件搜索和排序
5.1.2 组件架构
classDiagram
class WorkpieceView {
+data(): Object
+computed: Object
+methods: Object
+mounted(): void
}
class WorkpieceEdit {
+工件编辑功能
}
WorkpieceView --> WorkpieceEdit: 跳转编辑
核心文件：
- WorkpieceView.vue - 工件管理主页面
- WorkpieceEdit.vue - 工件编辑页面
5.2 图像管理模块
5.2.1 功能特性
- 图像上传：支持多文件上传和预览
- 绑定管理：图像与工件的绑定关系管理
- 状态分类：已绑定和未绑定图像分类显示
- 详细信息：图像元数据和关联工件信息展示
5.2.2 数据流设计
sequenceDiagram
participant User
participant ImageView
participant API
participant Backend
User->>ImageView: 上传图像
ImageView->>API: POST /image/create
API->>Backend: 存储图像
Backend-->>API: 返回图像ID
API-->>ImageView: 上传成功
ImageView->>User: 显示上传结果
核心文件：
- ImageView.vue - 图像管理主页面
6. 数据模型与API集成
6.1 工件数据模型
erDiagram
WORKPIECE ||--o{ WORKPIECE_INFO : has
WORKPIECE {
string workpiece_id PK
datetime created_at
datetime updated_at
int workpiece_status
}
WORKPIECE_INFO {
string workpiece_id FK
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
}
6.2 图像数据模型
erDiagram
IMAGE_ENTITY ||--o{ IMAGE_BIND : can_have
IMAGE_ENTITY {
int id PK
string key
string name
string description
datetime created_at
datetime updated_at
}
IMAGE_BIND {
int image_id FK
int workpiece_id FK
}
7. 系统架构索引
7.1 技术优势
- 模块化设计：清晰的组件分离和职责划分
- 响应式UI：基于Vuetify的现代化界面设计
- 状态管理：完善的Vuex状态管理机制
- 路由控制：细粒度的权限控制和路由守卫
- API集成：完整的后端API集成和错误处理
7.2 业务价值
- 实现穿舱件管理的数字化和标准化
- 提供完整的生命周期管理解决方案
- 支持多维度数据分析和报表生成
- 提升邮轮建造过程的质量控制水平
7.3 扩展性考虑
系统采用模块化架构设计，便于后续功能扩展和维护。基于Vue.js的技术栈具有良好的生态系统支持，可以方便地集成新的功能模块和技术组件。
参考源文件：
- README.md - 项目概述文档
- package.json - 项目依赖配置
- App.vue - 应用主组件
- router/index.js - 路由配置
- store/index.js - 状态管理
- WorkpieceView.vue - 工件管理页面
- ImageView.vue - 图像管理页面