恒美微站
首页
关于我们
建站服务
主题模板
案例展示
资讯中心
联系我们
SpringBoot+Vue车间管理系统设计与实践
首页
资讯中心
/
SpringBoot+Vue车间管理系统设计与实践
SpringBoot+Vue车间管理系统设计与实践
发布时间:2026/10/14 10:58:37
1. 项目背景与核心价值车间管理系统是制造业数字化转型的关键基础设施。传统工厂普遍面临生产数据分散、设备状态不透明、人工排产效率低等痛点。我们团队为某中型机械加工厂设计的这套系统实现了从原料入库到成品出库的全流程数字化管控。系统上线后该工厂订单交付周期缩短27%设备利用率提升35%纸质单据减少90%。这套系统采用前后端分离架构后端基于SpringBoot 2.7 MyBatis-Plus 3.5前端使用Vue 3 Element Plus数据库选用MySQL 8.0。特别设计了工单优先级动态算法和可视化看板解决了该厂紧急插单频繁导致的产线混乱问题。2. 技术架构设计解析2.1 后端技术栈选型选择SpringBoot而非传统SSM框架的三大理由内置Tomcat简化部署适合工厂IT人员技术水平Starter依赖自动配置快速集成Redis缓存、Quartz定时任务Actuator端点监控特别适合7×24小时运行的车间环境数据库设计中的关键优化CREATE TABLE work_order ( id bigint NOT NULL AUTO_INCREMENT, order_no varchar(32) NOT NULL COMMENT 工单号规则年月日流水号, priority tinyint NOT NULL DEFAULT 2 COMMENT 0-紧急 1-高 2-普通, machine_group varchar(20) NOT NULL COMMENT 设备组别, estimated_time int NOT NULL COMMENT 预计耗时(分钟), actual_start datetime DEFAULT NULL, actual_end datetime DEFAULT NULL, PRIMARY KEY (id), UNIQUE KEY idx_order_no (order_no), KEY idx_machine_group (machine_group) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;2.2 前端技术方案采用Vue3TypeScript的组合带来两大优势Composition API更好封装设备状态看板组件TypeScript接口定义确保与后端DTO严格一致可视化看板实现技巧template el-row :gutter20 el-col :span8 v-for(machine, index) in machineList :keyindex machine-card :statusmachine.status :current-ordermachine.currentOrder clickhandleMachineSelect(machine.id) / /el-col /el-row /template script setup langts // 使用WebSocket实时更新设备状态 const ws new WebSocket(wss://${location.host}/api/ws/machine-status) /script3. 核心功能实现细节3.1 动态工单排产算法优先级计算模型考虑因素订单交期紧急程度剩余时间占比物料齐套状态BOM满足率设备负载均衡度当前班组空闲率核心算法片段public class OrderScheduler { public ListWorkOrder schedule(ListWorkOrder orders) { return orders.stream() .sorted(Comparator .comparingDouble(this::calculateUrgencyScore) .thenComparingInt(WorkOrder::getPriority) .reversed()) .collect(Collectors.toList()); } private double calculateUrgencyScore(WorkOrder order) { double timeFactor 1 - (dueDate - now) / totalDays; double materialFactor bomCheckService.getReadyRate(order.getId()); return 0.6 * timeFactor 0.3 * materialFactor 0.1 * getMachineLoadFactor(); } }3.2 设备状态实时监控采用三种状态同步机制设备PLC定时上报30秒间隔扫码枪触发事件驱动更新人工强制状态覆盖按钮状态流转设计[待机] --开始加工-- [运行中] [运行中] --正常完成-- [待机] [运行中] --异常停机-- [故障] [故障] --维修完成-- [待机]4. 典型问题排查实录4.1 工单状态不同步问题现象前端显示工单已完成但看板仍显示设备运行中 排查步骤检查WebSocket连接状态Network面板验证后端事件发布逻辑查看MySQL事务隔离级别应为READ_COMMITTED根本原因设备状态更新未触发Hibernate二级缓存清除 解决方案Transactional public void completeOrder(Long orderId) { // 先更新工单状态 workOrderMapper.updateStatus(orderId, COMPLETED); // 手动清除缓存 cacheManager.getCache(machineCache).evict( machineService.getByOrderId(orderId).getId()); // 发送领域事件 applicationContext.publishEvent( new OrderCompletedEvent(this, orderId)); }4.2 高并发下的数据冲突场景多个终端同时报工导致产量统计异常 解决策略在报工接口添加Version乐观锁控制关键操作增加分布式锁Redisson实现采用最终一致性补偿机制分布式锁实现示例public void reportProduction(ReportDTO dto) { String lockKey lock:order: dto.getOrderId(); RLock lock redissonClient.getLock(lockKey); try { if (lock.tryLock(3, 10, TimeUnit.SECONDS)) { // 核心业务逻辑 productionService.handleReport(dto); } } finally { lock.unlock(); } }5. 部署优化实践5.1 性能调优参数生产环境JVM配置建议-Xms2g -Xmx2g -XX:UseG1GC -XX:MaxGCPauseMillis200 -XX:InitiatingHeapOccupancyPercent35MySQL关键配置[mysqld] innodb_buffer_pool_size4G innodb_log_file_size512M sync_binlog1 innodb_flush_log_at_trx_commit25.2 高可用部署方案采用NginxKeepalived双机热备[VIP:192.168.1.100] | ------------------------------------ | | [NGINX Master] [NGINX Backup] 192.168.1.101 192.168.1.102 | | -------------- -------------- | SpringBoot | | SpringBoot | | Node1 | | Node2 | --------------- ---------------6. 扩展功能建议设备预测性维护通过振动传感器数据训练LSTM模型提前3天预警轴承磨损风险质量追溯看板扫描成品二维码反查生产批次展示关键工序的质检数据移动端小程序微信小程序扫码快速报工异常状态推送提醒这套系统在实际运行中最大的收获是永远要为现场操作留出容错空间。我们最初设计的严格流程控制在实际车间环境中反而导致工人频繁绕过系统。后来增加了应急通道机制允许班组长在特殊情况下手动覆盖系统状态才真正实现了数字化与人性化的平衡。