基于前后端分離的熱等靜壓點巡檢系統的設計與實現

摘 要 熱等靜壓設備作為高精度特種設備，其工作環境具有高溫、高壓的特點。為解決熱等靜壓設備人工巡檢效率低、危險系數高及信息化程度低等問題，基于前后端分離的開發模式，結合Spring Boot、Vue.js、Uniapp技術棧，設計并開發了一個熱等靜壓設備點巡檢管理系統。經實際應用測試，該系統在功能設計上涵蓋了熱等靜壓設備點巡檢的核心功能，并在實際應用中穩定運行了9個月，成功生成了七千多條點巡檢記錄。系統有效地將每次點巡檢平均時間縮短至6 min，顯著提升了巡檢效率，具有較高的實用價值。

關鍵詞 點巡檢 熱等靜壓設備 前后端分離 Spring Boot Uniapp Vue.js

中圖分類號 TP277" "文獻標志碼 B" "文章編號 10003932（2025）02031906

熱等靜壓技術起源于20世紀50年代，最初用于材料的擴散連接，隨后廣泛應用于粉末材料的固結和鑄造零件性能的改善［1］。熱等靜壓機作為工業母機，其工作原理是將高純度的氬氣或氮氣注入密封的壓力容器中，通過內置的加熱裝置實現高溫加熱，使氣體在高溫膨脹過程中產生等靜壓力，從而顯著提升材料的密度和機械性能，在航空航天、汽車制造及電子器件等領域發揮著重要作用［2］。我國自1972年開始對熱等靜壓技術和設備進行研究，并取得了一系列重要進展。中國鋼研科技集團近期發布了超大型熱等靜壓裝備HIPEX1850，標志著我國在這一領域取得了較大的突破。

鑒于熱等靜壓設備在高溫高壓工作環境下易發生故障，進行定期點巡檢顯得尤為重要。然而，目前的點巡檢管理仍主要依賴人工紙質巡檢，這種傳統方法不僅效率低下且勞動強度大，還可能因設備故障造成嚴重的經濟損失和安全隱患。因此，亟需引入高效的熱等靜壓設備巡檢系統，以提升管理水平，保障設備的正常運行。

通過借鑒任志昂等在有色金屬設備巡檢的數字化管理方案［3］、陳栩云等基于移動APP的設備巡檢系統［4］以及高曉哲等在點巡檢過程中二維碼識別技術點的使用［5］，本研究采用Vue.js、Uniapp前端技術和Spring Boot后端框架，開發了一套適用于熱等靜壓企業的點巡檢管理系統。該系統旨在提高熱等靜壓企業的管理水平，為設備安全運行提供保障，并有助于推動企業智能化轉型，具有較高的實用價值。

1 熱等靜壓點巡檢流程現狀及優化建議

目前，某熱等靜壓企業在設備運維方面主要采用人工巡檢、填寫紙質報表的傳統方式對熱等靜壓設備進行點巡檢，通過對該企業當前點巡檢流程進行詳細分析，可以發現該流程存在一些改進的空間。

1.1 點巡檢流程現狀

對該企業現階段設備點巡檢的情況進行分析，該企業車間當前的日常設備檢查工作主要分為點檢和巡檢兩個方面。點檢是在生產之前對某設備進行全面檢查，包括高壓容器、加熱爐、冷卻系統、壓縮機及真空泵［6］等設備的狀態，以確保它們的狀態符合安全生產的要求；巡檢則是按照值班情況安排巡檢人員對廠區環境及設備運行時的狀態進行巡視，巡檢頻次為每小時巡視一次，包括查看設備運行時是否有異響、是否存在漏油漏氣等情況。

1.2 日常運維工作的問題與優化建議

針對車間點巡檢現狀進行分析后，發現主要存在以下問題：一是人工填寫數據，信息化程度較低；二是缺乏數據分析，難以保證巡檢任務的完成率；三是車間巡檢任務繁重，數據的真實性和有效性難以保證。

為優化點巡檢流程，本研究提出以下措施：

a. 引入移動設備和應用程序，通過智能設備執行巡檢任務，減少紙質記錄，提高檢查效率；

b. 建立中心化的數據管理平臺，實現數據的集中存儲、分析，以便查看任務完成情況；

c. 使用二維碼技術提升數據可信度，通過掃描二維碼提交巡檢結果，確保數據的準確性并防止違規操作。

2 系統核心功能概述

根據現場情況分析，熱等靜壓點巡檢管理系統需要PC端和手機端兩個平臺的配合使用，以支持熱等靜壓設備從點巡檢任務管理到執行的全流程。PC端用于任務的管理和統計分析，手機端則用于實際任務的執行，具體的功能模塊劃分如下。

2.1 設備狀態展示模塊

該模塊旨在為用戶提供全面的設備信息管理和生產數據實時監控的服務。在PC端的設備信息管理功能中，管理員可以通過直觀的界面對設備的詳細信息進行添加、更新或刪除操作，包括設備名稱、所屬廠區、設備型號、設備狀態及設備負責人等。在手機端，檢查人員可以選擇某廠區里的具體設備，查看該設備當前的運行情況和運行數據，包括溫度、壓力及電流等信息。檢查人員還可以查看設備一段時間內的歷史數據記錄，通過折線圖的形式展現，可以較好地幫助用戶了解設備運行的趨勢和變化，幫助用戶全面了解設備的運行情況，及時發現問題并采取相應的措施。

2.2 點檢功能模塊

該模塊主要用于在設備工作前對該設備進行全方位檢查，有助于確保設備的正常運行和使用安全。在點檢開始前，管理員可在PC端配置每個設備的檢查點和檢查內容，包括檢查點的位置、內容和標準，并將這些設置與具體設備關聯。在實際點檢過程中，檢查人員通過手機應用選擇待檢設備，并根據PC端設定的檢查點和檢查內容進行設備檢查。系統不僅支持文字記錄，還允許拍照等多維度的數據記錄，以提供更為全面的數據支持。檢查結果會實時同步到后臺系統，確保信息的及時更新和準確反饋。

2.3 巡檢功能模塊

該模塊主要用于對工廠的定期巡查，通過監測工廠的環境和設備狀況來確保生產過程的安全。在巡檢開始前，管理員需要在PC端配置巡檢方案和制定巡檢計劃，在巡檢任務按照計劃定時下發后，檢查人員可登錄APP，執行管理員分配的巡檢任務。為確保巡檢結果的真實性，系統要求用戶通過掃碼確認區域，在檢查工廠環境和設備狀態后再提交檢查結果。

2.4 問題上報功能模塊

該模塊旨在幫助檢查人員在非點檢和巡檢任務期間，及時報告設備故障或工廠環境異常，以便異常情況得以及時記錄和處理。

檢查人員在現場發現問題之后，就可以通過問題上報功能，選擇現有檢查點或描述新的問題，并提交相關的文字說明和相應的照片。管理員在接收并查看上報的信息后，審閱每個問題的描述、圖片及相關信息，以進行后續的處理。這些數據不僅有助于及時解決當前問題，還可為優化設備維護和工廠運營策略提供重要的數據參考，從而改進未來的點檢和巡檢策略，提高問題發現的能力。

2.5 問題整改功能模塊

該模塊旨在處理和匯總點檢、巡檢以及問題上報過程中發現的不合格項。

檢查人員在處理點檢、巡檢以及問題上報中發現的異常時，如果問題可以現場解決，檢查人員無需額外操作；若問題需要整單整改，整改后則需提交整改記錄，系統會更新問題狀態為“已整改”，這一過程確保了問題處理的及時性和記錄的準確性。管理員可以在PC端跟蹤和監控問題整改的進度，系統提供詳細的整改記錄視圖，顯示每個問題的整改狀態和進展情況，管理員可根據整改情況調整排產計劃，以確保生產的連續性和安全性。

3 系統設計與實現

3.1 系統架構設計

熱等靜壓點巡檢系統采用前后端分離的開發模式，通過RESTful接口進行通信，實現了前后端的解耦，從而顯著提升了開發效率和系統的可擴展性［7］。系統服務于管理人員和巡檢者，因此前端分為兩部分：一個是B/S架構的點巡檢管理系統，另一個是C/S架構的巡檢APP，技術棧分別選用了Vue.js和Uniapp，以適應不同的開發需求。后端則采用了Spring Boot技術棧，提供了統一的服務接口以支持前端的數據交互，同時將MyBatis框架與MySQL數據庫和Redis緩存整合在一起，簡化了數據操作的配置與開發，同時提升了系統的開發效率和可維護性。熱等靜壓點巡檢系統架構如圖1所示。

3.2 系統實現

3.2.1 前端實現

熱等靜壓點巡檢系統的前端實現包括兩個主要部分：基于Vue.js技術棧的B/S架構點巡檢管理系統，以及使用Uniapp開發的C/S架構巡檢APP。

3.2.1.1 B/S架構的熱等靜壓點巡檢管理系統

熱等靜壓點巡檢管理系統基于Vue框架，通過瀏覽器以網頁形式展示數據并進行交互。Vue.js是一個輕量級且靈活的JavaScript框架，它通過簡潔的語法和組件化開發，使得開發者能夠高效地創建和維護前端應用。Vue.js提供了雙向數據綁定和虛擬DOM技術，能夠自動同步數據和界面，并優化渲染性能［8］。

Vue項目中基本結構包括核心源碼src文件夾，src文件夾下的components用于存放可復用的Vue組件，views包含頁面級別的組件，而assets則用于存放靜態資源，如樣式表和圖片。Vue Router用于處理客戶端路由，支持單頁面應用的導航管理；Vuex提供了全局狀態管理，簡化了不同組件間的數據共享和管理［9］。

在Vue組件的設計過程中充分體現了MVVM（ModelViewViewModel）模式，雖然開發者可以在一個文件中同時定義模板、腳本和樣式，但MVVM的核心是將數據邏輯與視圖展示分離，通過數據綁定實現雙向數據流動，無需手動操作DOM，自動將數據渲染到視圖層［8］，前端通過RESTful接口請求后端數據，并將結果呈現于視圖層，實現數據與用戶界面的高效同步，MVVM模型結構如圖2所示。

Model（模型層）。由Vue組件的data屬性和外部數據源構成。以設備管理組件為例，data定義了組件的內部數據（如deviceList和queryParams），這些數據通過Vue的響應式系統自動更新視圖。核心代碼如下：

data（） {

" " return {

" " " open： true，

" " " deviceList： ［

" " " " ……

" " " ］，

" " " queryParams： {

" " " " ……

" " }，

" }；

}

View（視圖層）。視圖層部分則由 Vue 的模板語法定義，通過指令（如 vbind 和 vmodel）實現數據和視圖的雙向綁定，確保用戶界面的動態更新和用戶輸入的實時反饋。例如，輸入框和表格組件分別綁定到queryParams.deviceNo和deviceList：

lt;el-input v-model=“queryParams.deviceNo” placeholder=“請輸入設備編號”/gt;

lt;el-table ：data=“deviceList” max-height=“400px”gt;

" lt;el-table-column label=“設備編號” prop=“deviceNo” /gt;

" lt;el-table-column label=“設備名稱” prop=“deviceName” /gt;

lt;/el-tablegt;

ViewModel（視圖模型層）。視圖模型層由Vue實例承擔，它在數據模型和視圖之間充當橋梁，處理數據變化和用戶交互。當用戶點擊按鈕觸發事件時，Vue實例中的方法（如handleQuery）會被調用，執行相應的邏輯并更新數據。這種模式有效地將數據邏輯與視圖展示分離，提高了組件的可維護性和可擴展性。例如：

methods： {

" handleQuery（） {

" " "http:// 搜索按鈕的邏輯

" }，

" resetQuery（） {

" " "http:// 重置按鈕的邏輯

" }

" ……

}

通過MVVM的實現方式，Vue不僅簡化了數據管理和視圖更新的過程，還通過雙向數據綁定機制提高了開發效率，使得數據和視圖自動同步，從而提高了開發效率和應用程序的可維護性。

3.2.1.2 C/S架構的熱等靜壓巡檢APP

巡檢APP的前端技術棧選用的是Uniapp，這是一個基于Vue.js的跨平臺應用開發框架，旨在通過統一的代碼庫實現多平臺（如iOS、Android、Web和小程序等）的應用開發，從而提高開發效率減少工作量［10］。其項目結構以src文件夾為核心，用于存放應用的主要源碼，包括頁面、組件和靜態資源。具體而言，pages文件夾中定義了應用的各個頁面；components文件夾則包含可復用的組件；static文件夾中存放靜態資源（如圖片和字體）；unpackage文件夾存放編譯后的文件。

為了實現跨平臺兼容性，Uniapp利用條件編譯和平臺適配API來處理平臺特定的需求。開發者可以通過#ifdef和#endif指令在代碼中插入針對特定平臺（如iOS和Android）的實現，這使得在不同平臺上能夠處理特有的邏輯。其高效的跨平臺特性和統一的開發體驗，大幅減少了開發和維護的工作量，使得開發者能夠更快速地推出和更新多平臺應用［11］。例如：

#ifdef APPPLUS

// 針對 APPPLUS 平臺的代碼（包括Android和iOS）

#endif

#ifdef MPWEIXIN

// 針對微信小程序平臺的代碼

#endif

此外，Uniapp提供了一套統一的API接口，無論是進行網絡請求還是數據存儲，開發者都可以使用相同的方法調用。這種統一性簡化了開發過程，使得在不同平臺上的實現保持一致。在與后端服務進行數據交互時，Uniapp使用RESTful接口來處理網絡請求。通過調用uni.request方法，開發者可以向后端發送HTTP請求（如GET、POST、PUT和DELETE等），并接收響應數據。這種方法確保了前端應用能夠高效地與后端進行數據交互，并且接口規范的一致性提高了系統的穩定性和維護性。使用uni.request進行網絡請求時，其核心代碼如下：

uni.request（{

" url： baseUrl，

" method： ‘GET’，

" success： （res） =gt; {

" " "……

" }

}）；

Uniapp還支持通過manifest.json和vue.config.js配置文件來定制編譯選項，確保應用在各個平臺上的表現符合預期。通過HBuilderX或命令行工具進行構建，Uniapp能夠生成適用于不同平臺的應用包，從而提高了開發效率，并確保了在各個平臺上的一致性和穩定性。這種集成化的開發模式不僅簡化了跨平臺開發的復雜性，還提升了應用的維護性和擴展性。圖3展示了點巡檢APP的部分頁面。

3.2.2 后端實現

系統的后端部分是基于Spring Boot技術棧進行構建的。Spring Boot是Spring框架生態系統中的一員，并且集成了大量第三方庫，同時可通過自動配置、依賴注入及嵌入式服務器等特性，大幅簡化Spring項目中繁瑣的配置步驟。根據不同的職責，系統后端可被劃分為控制層、業務層、數據訪問層及模型層等多個層次，如圖4所示，這種分層結構有助于提高系統的模塊化程度和可維護性。

控制層（Controller）。控制層是應用程序的入口點，負責處理用戶的請求并返回相應的結果。在Spring Boot框架中，控制層通常由@Controller或@RestController注解的類實現，并遵循RESTful原則保證系統接口的標準化和一致性。這些控制器類包含處理請求的處理方法，并通過@RequestMapping或其變體（如@GetMapping、@PostMapping）來映射URL路徑和HTTP方法。

業務邏輯層（Service）。業務邏輯層通常由@Service注解的類實現，主要負責處理具體的業務邏輯，封裝業務流程，連接控制器層和數據訪問層，將控制層的請求轉發到數據訪問層，并將結果返回給控制層。

數據訪問層（DAO）。數據訪問層負責與數據庫進行交互，通過MyBatis的Mapper接口和XML映射文件來實現數據操作。通常由Mapper接口定義數據訪問方法，而XML映射文件則負責具體SQL語句的定義、參數映射和結果映射。

模型層（Model）。模型層定義了系統的數據結構和業務實體。在使用MyBatis時，模型類通常與數據庫表一一對應，通過字段和getter/setter方法實現數據封裝。模型類與XML映射文件中的SQL語句進行映射，從而將數據庫操作與業務邏輯相結合，確保數據的正確處理和持久化。

4 結束語

針對某熱等靜壓企業的點巡檢管理業務需求，基于前后端分離的開發模式，設計并實現了一個熱等靜壓點巡檢管理系統。前后端分別采用Spring Boot、Vue.js和Uniapp技術棧實現，后端則使用Spring Boot提供穩定的數據處理和業務邏輯支持；Vue.js的響應式數據綁定和組件化設計提升了用戶體驗和前端的開發效率；Uniapp則用于開發跨平臺移動應用，確保了系統在多平臺上的一致性。系統在實際應用中已經穩定運行了9個月，成功地生成了七千多條巡檢任務。在點巡檢任務執行過程中，有效地將每次點巡檢平均時間縮短至6 min，提升了執行效率，并通過二維碼識別技術增強了結果的可信度。同時系統通過信息化手段實現了數據的多維保存，涵蓋了文字信息和圖片數據，為后續的數據分析和應用提供了豐富的基礎數據。筆者開發的熱等靜壓設備點巡檢管理系統優化了某熱等靜壓企業設備點巡檢流程，提升了點巡檢的工作效率，有著較高的實用價值。

參 考 文 獻

［1］ 任志祿.熱等靜壓機常見故障的排除方法［J］.冶金管理，2022（5）：67-69.

［2］ 鄭少輝，王佳華，劉麗娜，等.熱等靜壓機常見故障及排除分析［J］.冶金管理，2019（15）：74；76.

［3］ 任志昂，萬曉鴿，余宏飛，等.有色金屬加工設備智能化巡檢系統設計與開發［J］.有色金屬加工，2022，51（1）：67-70.

［4］ 陳栩云，羅偉軍，陳斌，等.基于移動APP的水廠設備巡檢系統設計與實現［J］.城鎮供水，2023（3）：36-40；84.

［5］ 高曉哲，李以善，崔慶勝，等.智能設備點檢系統的研發與應用［J］.現代制造技術與裝備，2018（8）：188-191.

［6］ 尚文靜.熱等靜壓（HIP）技術和設備的發展及應用［J］.有色冶金設計與研究，2010，31（1）：18-21.

［7］ 陳南冰，方煜瑛，郭志，等.基于前后端分離的數字化工單管理系統設計［J］.科技創新與應用，2023，13（11）：128-131.

［8］ 高志輝，秦琦，段暕，等.基于實時Web技術的車間監測系統設計與實現［J］.計算機應用，2023，43（S1）：201-206.

［9］ 江家龍.基于Vue.js框架的餐飲Web APP設計與實現［J］.科技創新與應用，2023，13（36）：128-132；136.

［10］ 李源，李金忠，薛國鵬，等.CircleChat：基于SpringBoot和UniApp框架的圈聊平臺的設計與實現［J］.井岡山大學學報（自然科學版），2021，42（3）：64-71.

［11］ 任遠，丁玲，戚偉.Uni-APP移動應用開發技術分析［J］.電子技術與軟件工程，2023（3）：41-44.

（收稿日期：2024-08-14）