基于前后端分離的數字化工單管理系統設計

摘" 要：該文針對10 kV斷路器生產線的實際業務需求，基于前后端分離開發模式，利用Spring Boot和Vue.js技術棧設計、開發數字化工單管理系統，實現定制化的產線工單管理流程。基于靈活的對象模型設計，數字化工單管理系統支持自定義工單模板以適配不同產品類型，同時實現自由的審批工作流。通過在實際產線中對系統的部署使用，驗證該系統設計的可行性。

關鍵詞：工單管理；前后端分離；Spring Boot；Vue；系統設計

中圖分類號：V445" " " " 文獻標志碼：A" " " " " 文章編號：2095-2945（2023）11-0128-04

Abstract： Aiming at the actual business requirements of the 10 kV circuit breaker production line， this paper designs and develops a digital work order management system using Spring Boot and Vue.js technology stack based on the front and rear separation development model， and implements a customized production line work order management process. Based on the flexible object model design， the digital chemical order management system supports custom work order templates to adapt to different product types， and realizes a free approval workflow. Through the deployment and use of the system in the actual production line， the feasibility of the system design is verified.

Keywords： work order management; front and rear separation; Spring Boot; Vue; system design

產品工單是記錄、處理及跟蹤產品生產與檢測過程的信息單元，是生產裝配平臺管理的關鍵要素。高效的工單流轉系統是裝配平臺的關鍵環節，對提高產品生產效率和質量把控十分重要。工業4.0時代[1]制造業數字轉型過程中，建立數字化、智能化的產線智能裝配系統，已成為各制造行業的必然選擇。

國外方面，自20世紀80年代末智能制造提出以來，世界各國都對生產流程數字化、信息化方法進行了研究。2013年德國漢諾威工業博覽會上正式推出“工業4.0”概念，主張利用物聯網和信息化系統，將工業制造、生產中的訂單、供應、制造和銷售等相關信息進行數據化和智慧化升級。國內方面，制造業信息化技術也取得良好成果。隨著先進制造、智能制造等制造業升級需求的提出，國內取得了一批基礎研究成果和智能裝配管理技術。例如黃靜等[2]基于Spring Cloud構建了工廠可視化管理系統，根據管理需求劃分出多個微服務進行獨立開發和部署，提高產線管理效率。丁奕[3]針對紡織業物料管理的需求，基于無BOM管理提出一種家紡產品生產企業的生產管理系統設計方法，解決了家紡生產企業管理信息化難題。

目前，天津平高10 kV斷路器生產線的裝配流程卡（記錄產品生產、質檢流程的工單）主要以線下打印、人工流轉的方式進行管理，維護成本高且效率低。為滿足產線生產和業務發展的需求，開發并部署數字化工單管理系統對提高產品生產效率和產品質量具有重要意義。

通過數字化工單形式管理裝配流程卡，節約紙質裝配卡資源，每條產線每年可以解決4 000張左右的紙張資源。同時部署數字化工單系統有助于提高生產管理效率和產品質量，具體表現如下。

1）實現更加經濟、高效的工單管理。使用數字化工單對產品生產流程進行信息管理，相比于紙質工單線下流轉方式，數字化工單管理提高了工單流轉與審批的效率；通過模糊搜索、分類匯總等方式，可以實現更加快速有效的工單檢索與查詢。以數字化工單替代傳統紙質工單，節約了紙質工單成本。

2）為生產資源調度與流程管理提供數據支撐。數字化工單管理系統通過數字化工單對產品全生命周期進行信息化管理，從訂單建立、項目立項開始，對產品各工段流程的生產時間、人員分配和缺陷問題記錄與處理等進行記錄與可視化呈現，為科學、高效的生產調度與流程管理提供數據支撐。

3）高效、可靠的產品質量追溯。數字化工單管理系統為每位產線用戶分配獨立賬戶，各用戶在系統完整記錄產品相關的生產、質檢及問題處理等操作，對每次問題檢測和處理的問題表現、問題原因、處理操作和相關時間點進行全方位記錄，每條產品質量記錄可追溯到具體責任人，有效促進產品質量的提升。

1" 數字化工單管理業務分析

數字化工單管理平臺對接斷路器產線訂單生產、產品生產與質檢全流程信息流轉，需滿足產線穩定性、可靠性和安全性要求，同時要求適配不同類型產品工單的需求，支持通過靈活的配置流程、模版等快速定制工單模板。從產線實際業務需求出發，進行數字化工單管理業務需求分析，以產品工單為核心，設計工單模板和工單生命周期。

1.1" 定制化工單模板

考慮數字化工單系統的擴展性，為了適配不同產線、不同類型產品，本系統設計了可定制的工單模板，支持根據不同產品進行模板類型定制。產線生產管理的基本單位是工段（或工位），即獨立完成某項生產、裝配及檢測的基本生產組織。通過對不同產品的生產、檢測需求進行調研，總結不同產線工段對工單信息記錄的需求，提出與工段對應的“表單項”概念，并抽象提出三類表單項，即“勾選檢查項”“多選檢查項”和“填寫檢查項”。

由圖1可知，對于不同類型產品，根據生產流程涉及的工段信息，生成相應的表單項，表單項聚合成產品對應的工單模板。生產過程中，基于工單模板即可創建對應產品的工單。根據工段生成的表單項存儲為一個表單項集合，在創建新產品工單模板時已有表單項可以復用，提高了自定義工單模板的效率。

1.2" 工單生命周期

由圖2可知，工單生命周期包括工單創建草稿、審批流轉和歸檔3個環節，工單創建后以草稿形式保存；提交后進入審批流轉，流轉到指定責任用戶，責任用戶根據權限對每個表單項進行自檢、互檢和終檢審查。所有表單項都審查完畢后，工單可以執行歸檔操作，表示產品完成生產流程，可以下線。

2" 基于前后端分離的系統設計

2.1" 系統框架設計

由圖3可知，數字化工單管理系統采用前后端分離的Web開發模式[4]，后端采用Spring Boot技術棧，前端選用Vue.js、Element UI和CSS等技術，持久層基于MyBatis框架、MySQL軟件等實現。前后端基于RESTful接口進行通信，實現了前、后端的解耦，提高了開發效率和系統可擴展性。

基于前后端分離方式進行業務系統實現，前端顯示作為視圖層獨立于后端業務邏輯，同時將與功能需求直接相關的業務邏輯封裝為控制層，將工單相關數據實體封裝為模型層，視圖層、控制層和模型層獨立開發，通過標準化、統一化的接口進行交互，提高了系統的可維護性和可擴展性，不同業務功能以獨立模塊形式開發來提高復用性。

2.2" 模塊化業務單元設計

數字化工單管理系統以產品工單為主要單元，通過電子化工單系統進行工單創建、填寫、流轉、審批、打印及歸檔保存。通過工單數據庫系統對產線工單全生命周期相關信息進行數字化管理與統計分析，并從不同維度以統計報表形式進行展示。由于系統涉及生產環節中多用戶角色、多業務流程和自定義工單模板功能，同時需要支持復雜、非線性的審批工作流，本系統通過模塊化業務單元的設計實現同步業務功能的解耦，進一步提升系統復用性和擴展性。

由圖4可知，系統各業務邏輯以分層結構進行設計，從前端頁面展示到后端數據管理依次為前端表現層、業務邏輯層、數據訪問層和數據層。前端表現層以Vue.js為基礎，結合Html、CSS和jQuery等技術進行頁面展示。業務邏輯層對系統主要業務模塊進行封裝，包括工單管理、用戶管理、模板管理、權限管理、統計報表、問題記錄和流轉管理等模塊，同時封裝了系統日志等工具類。數據訪問層實現了存儲過程、事務管理和數據緩存等功能，提高了數據訪問性能和穩定性。數據層基于MySQL實現；業務邏輯層和數據訪問層基于Spring Boot框架實現，各業務模塊以獨立服務形式開發，相互解耦；上層業務模塊通過統一接口依賴于下層模塊，前端表現層通過RESTful接口與后端進行交互。

2.3" 前端表現層設計

數字化工單管理系統前端部分基于瀏覽器端運行，以網頁形式向用戶展現數據、進行交互。圍繞產線業務需求，系統前端同步支持PC端和移動端瀏覽器。平臺基于Vue框架，設計符合MVVM模式的前端框架[5]，包括模型層（Model）、視圖層（View）和視圖-模型層（View-Model），框架結構如圖5所示。Vue采用響應式數據綁定，當數據發生變化時，前端框架自動更新視圖并用代理監控數據操作。MVVM模式不需要手動操作DOM元素，而是將數據綁定到視圖模型層上，自動將數據渲染到視圖層；視圖層變化會通知視圖模型層更新數據，通過數據綁定實現雙向數據流動，使前端開發更加高效，同時解決了傳統前端模式中大量DOM操作使頁面渲染性能降低的問題。前端框架基于Element UI庫[6]進行控件設計。Element UI庫的操作流程與邏輯與用戶交互習慣高度一致，操作流程簡潔直觀。

2.4" 可視化看板設計

數字化工單管理系統基于MySQL數據庫系統管理和統計工單相關信息，通過報表看板形式進行信息展示和匯總。面向產線業務需求，進行生產流程可視化技術研究，圍繞生產流程中的各類信息，包括產品生產效率、缺陷情況和質檢流程等，以可視化報表形式進行展示，輔助生產管理決策的開展?；贖TML5進行數據可視化方法封裝，將通用數據類型的可視化展示封裝為易于復用、控制的軟件開發庫，基于業務需求發展不斷豐富可視化庫的實現，以支持適配多終端的生產流程可視化。利用Web服務的易移植特點，實現一個數據源、多個可視化終端，將生產過程信息進行全流程可視化展示與統計，以即時掌握各個生產環節的實時動態、實時響應數據分析結果。

數字化工單管理系統基于數據可視化圖表庫ECharts進行可視化看板功能的設計與開發，根據業務需求封裝報表功能和組件，開發靈活、易擴展的工單看板模塊。ECharts是基于 JavaScript實現的開源可視化庫，兼容大部分瀏覽器，交互操作豐富，可高度個性化定制的數據可視化圖表。數據可視化看板層次化結構如圖6所示，包括表現層、模型層和數據層。表現層基于ECharts庫進行前端渲染和數據映射，根據業務需求實現折線圖、柱狀圖等多種繪圖類型；模型層基于Spring框架，將可視化看板涉及數據對象進行解耦、封裝；數據層基于MySQL設計實現工段、工單、用戶和缺陷等信息實體對應的數據庫對象。

2.5" 容器化部署

數字化工單管理系統基于Docker實現系統部署與快速升級。Docker是一款開源應用容器引擎，基于容器技術實現對應用程序的自動部署，以實現更輕量級的虛擬化快速部署，減少時間成本和人力成本?；贒ocker的系統部署流程如圖7所示，當系統需要更新需求或修復缺陷時，首先在開發環境新建對應開發分支，進行獨立開發、測試后合并到主線，在測試庫進行系統測試；完成測試后，對主線系統進行打包，基于Docker容器部署到生產環境服務器上。

3" 實際效果

數字化工單管理系統部署于企業內部網絡，生產管理員、質檢員通過PC端和移動端瀏覽器訪問系統，創建工單并進行審批流轉。系統上線后，替代了原有線下紙質裝配流程卡流轉的形式，節約了紙張資源和人力管理成本。同時，生產管理員可以通過可視化看板對生產業務情況進行全面掌握，分析生產效率制約點、排查質量隱患，優化資源分配和任務部署，進一步提高了生產效率和產品生產質量。

通過實際生產使用和第三方測試驗證，系統滿足產線業務實時訪問需求；交互類業務平均響應時間1 s，查詢類業務簡單查詢平均響應時間1 s，復雜查詢平均響應時間2 s。數字化工單管理系統直接替換了當前產線使用的紙質裝配流程卡，一條產線僅裝配流程卡這一項就能帶來每年4 000張左右的紙張節約。同時，系統可以有效提高產品生產效率、縮短工時，提供數據分析支持資源調度，為質量追溯提供便利。

4" 結束語

本文先針對10 kV斷路器產線業務需求，基于前后端分離開發模式，設計、開發和部署了定制化數字工單管理系統，全面替代了當前使用的紙質裝配流程卡。前后端分別采用Spring Boot和Vue.js技術棧實現，基于靈活的對象模型設計，系統支持自定義工單模板，以適配不同產品類型，實現了自由的審批工作流。本文定制化工單管理系統的部署應用有效地提高了產線生產效率和生產質量。

參考文獻：

[1] 張雍達，宋嘉.工業4.0時代的智能制造[J].中國工業和信息化，2021（9）：32-34.

[2] 黃靜，吳涵.基于Spring Cloud的工廠可視化管理系統的設計與實現[J].軟件工程，2021，24（10）：59-62，58.

[3] 丁奕.基于無BOM管理的生產管理系統設計方案[J].信息與電腦（理論版），2021，33（8）：117-122.

[4] 馬雪山，張輝軍，陳輝，等.前后端分離的Web平臺技術研究與實現[J].電子技術與軟件工程，2022（8）：70-73.

[5] 巢晟盛.基于SpringBoot微服務架構下前后端分離的MVVM模型淺析[J].電腦知識與技術，2021，17（23）：128-129，141.

[6] 王志文.Vue+Elementui+Echarts在項目管理平臺中的應用[J].山西科技，2020，35（6）：45-47.