尧图网站设计 尧图网站设计YAOTU DESIGN
ARTICLE DETAIL

资讯详情

深耕网站设计与一线实操的经验洞察。

SpringBoot+Vue船舶维保管理系统开发实践

SpringBoot+Vue船舶维保管理系统开发实践 1. 项目概述船舶维保管理系统是针对航运企业、修船厂等机构设计的专业信息化解决方案。这个基于SpringBootVue的前后端分离系统通过整合MyBatis和MySQL数据库实现了船舶设备全生命周期管理的数字化和智能化。我在实际开发中发现传统船舶维保管理普遍存在纸质记录易丢失、维修历史难追溯、备件库存不透明等问题。这套系统通过以下几个核心模块解决了这些痛点设备档案管理记录船舶各类设备的基础信息和技术参数维修工单流转实现从报修到验收的全流程电子化跟踪预防性维护计划基于设备运行小时数或日历周期的自动提醒备件库存管理实时监控备件库存状态和采购需求数据分析看板可视化展示设备故障率、维修成本等关键指标2. 技术架构解析2.1 后端技术栈SpringBoot 2.7作为后端框架其自动配置特性大幅简化了项目初始化工作。我在pom.xml中主要配置了这些关键依赖dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-web/artifactId /dependency dependency groupIdorg.mybatis.spring.boot/groupId artifactIdmybatis-spring-boot-starter/artifactId version2.2.2/version /dependency dependency groupIdmysql/groupId artifactIdmysql-connector-java/artifactId scoperuntime/scope /dependencyMyBatis的XML映射文件采用了动态SQL写法这是处理船舶设备复杂查询条件的关键select idselectEquipmentList resultMapEquipmentResult SELECT * FROM ship_equipment where if testshipId ! nullAND ship_id #{shipId}/if if testequipmentType ! nullAND equipment_type #{equipmentType}/if if teststatus ! nullAND status #{status}/if /where ORDER BY create_time DESC /select2.2 前端技术栈Vue 3组合式API大幅提升了代码组织效率。这个典型设备列表组件展示了前后端交互方式script setup import { ref, onMounted } from vue import { getEquipmentList } from /api/equipment const equipmentList ref([]) const loading ref(true) onMounted(async () { try { const res await getEquipmentList() equipmentList.value res.data } finally { loading.value false } }) /script3. 核心功能实现3.1 维修工单状态机船舶维修涉及多状态流转我们采用状态模式实现工单生命周期管理public interface MaintenanceOrderState { void submit(OrderContext context); void approve(OrderContext context); void reject(OrderContext context); void complete(OrderContext context); } // 具体状态实现 public class DraftState implements MaintenanceOrderState { Override public void submit(OrderContext context) { context.setState(new PendingReviewState()); // 发送通知给审批人 notificationService.sendReviewNotice(context.getOrder()); } }3.2 预防性维护提醒基于Quartz实现两种维保触发机制固定周期提醒如每3个月运行小时数提醒如每500小时配置示例Scheduled(cron 0 0 8 * * ?) // 每天8点检查 public void checkPreventiveMaintenance() { // 查询即将到期的设备 ListEquipment dueSoon equipmentMapper.selectDueSoonEquipment(); dueSoon.forEach(equip - { // 生成维保工单 MaintenanceOrder order new MaintenanceOrder(); order.setEquipmentId(equip.getId()); // 发送微信/邮件提醒 remindService.sendMaintenanceReminder(equip.getResponsiblePerson()); }); }4. 数据库设计要点4.1 关键表结构CREATE TABLE ship_equipment ( id bigint NOT NULL AUTO_INCREMENT, ship_id bigint NOT NULL COMMENT 所属船舶, name varchar(100) NOT NULL COMMENT 设备名称, type_code varchar(50) NOT NULL COMMENT 设备类型编码, manufacturer varchar(100) DEFAULT NULL COMMENT 制造商, model varchar(100) DEFAULT NULL COMMENT 型号, install_date date DEFAULT NULL COMMENT 安装日期, last_maintenance_date date DEFAULT NULL COMMENT 上次维保日期, running_hours int DEFAULT 0 COMMENT 运行小时数, status tinyint DEFAULT 1 COMMENT 状态(1-正常 2-维修中 3-报废), PRIMARY KEY (id), KEY idx_ship (ship_id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;4.2 查询优化实践针对船舶维保特有的跨表查询场景我们采用这些优化策略为高频查询字段添加复合索引使用MyBatis二级缓存处理静态数据对大文本字段如维修记录单独建表5. 部署与运维5.1 多环境配置通过Spring Profile实现环境隔离# application-dev.yml spring: datasource: url: jdbc:mysql://dev-db:3306/ship_maintenance?useSSLfalse username: devuser password: dev123 # application-prod.yml spring: datasource: url: jdbc:mysql://prod-db:3306/ship_maintenance?useSSLtrue username: produser password: ${DB_PASSWORD} # 从环境变量读取5.2 前端部署方案Vue项目通过nginx配置实现高效部署server { listen 80; server_name maintenance.yourdomain.com; location / { root /usr/share/nginx/html; index index.html; try_files $uri $uri/ /index.html; } location /api { proxy_pass http://backend:8080; proxy_set_header Host $host; } }6. 踩坑与解决方案6.1 时区问题处理船舶经常跨时区航行我们在系统中统一采用UTC时间存储前端按用户时区显示Configuration public class TimeConfig { Bean public Jackson2ObjectMapperBuilderCustomizer jacksonObjectMapperCustomization() { return builder - builder.timeZone(TimeZone.getTimeZone(UTC)); } }6.2 大文件上传优化对于船舶图纸等大文件采用分片上传方案前端使用vue-simple-uploader组件后端实现分片合并接口文件存储采用MinIO对象存储核心代码片段PostMapping(/merge) public Result mergeChunks(RequestParam String md5, RequestParam String fileName) { // 合并临时分片文件 FileMergeUtil.merge(md5, fileName); // 保存文件元信息 attachmentService.saveFileInfo(md5, fileName); return Result.success(); }7. 扩展功能建议根据实际船舶管理需求后续可以考虑集成物联网设备数据采集通过MQTT协议基于历史数据的故障预测机器学习模型移动端小程序微信/钉钉电子签名验收功能多语言支持针对国际航运公司在船舶设备详情页我们添加了二维码生成功能方便现场扫码查看设备信息。这个功能使用qrcode.js实现generateQRCode(equipmentId) { const qrCodeUrl ${location.origin}/equipment/detail/${equipmentId} QRCode.toCanvas(document.getElementById(qrcode), qrCodeUrl, { width: 120, margin: 1 }) }
返回列表