工程信息精細化管理平臺架構設計研究

饒平平1 沈 益1 朱清鵝1 沈程琳

(1.上海理工大學 環境與建筑學院，上海 200093； 2.上海同筑信息科技有限公司，上海 200093)

引言

隨著社會經濟的發展，為了適應高速發展經濟需求，計算機、網絡等技術被越來越多的行業所應用，并帶來了行業顛覆性的影響。例如傳統集市+互聯網→淘寶； 傳統銀行+互聯網→支付寶； 傳統交通+互聯網→滴滴快車等。通過利用云計算、大數據、物聯網等實現了資源共享與信息實時傳遞，極大地促進電子商務和互聯網金融健康發展，引導互聯網企業拓展國際市場[1]。在建筑行業，工程項目具有建設周期長、涉及專業多、環境復雜等特點，這使得建筑行業數據和信息多而復雜，然而這些數據因粗放式的管理，沒有產生數據應有的價值[2]。隨著BIM、云計算、大數據、物聯網等技術的出現，將BIM模型作為數據信息的載體，通過互聯網模式，實現建筑信息的采集和分析，形成數據庫，保障信息的及時性、準確性、唯一性[3-4]。

市面上多數工程的環境或安全監管平臺解決了監測數據散亂的問題，如現場監控系統、安全指數監測平臺等實現了施工現場安全信息的收集和查看，但此類平臺往往缺乏日常流程管理功能，同時也在數據分析處理、安全預警、消息傳送等功能方面少有涉及； 而對于多數工程業務流程管理平臺，往往存在日常運行故障多、低移動化、操作冗雜度高等問題，這不利于工程管理平臺朝向智能化發展。

因此我們需要建立一個運行流暢、架構安全的精細化平臺，實現工程建設的信息化、精細化、規范化管理，從而達到工程信息的實時共享，提高項目管理效率的目的。

1 平臺總體架構

圖1 平臺總體架構

精細化管理平臺總體架構由五個層次組成，分別為：由網絡基礎設施和計算機軟硬件基礎設施兩部分組成的基礎設施層； 包含BIM數據庫、GIS數據庫、管理數據庫、共享數據庫的數據層； 包含前后端分離技術、Vue前段框架技術、Springcloud等后端框架技術、移動端技術的支撐層； 包含進度、質量、安全、物料、文檔、模型管理六個功能模塊的應用層，該層即為精細化管理實際內容的表現； 由業主方、施工方、監理方等項目參建單位組成的用戶層，為精細化管理組織成員的具體表現。總體架構圖如圖1。

2 前后端分離原則

精細化管理平臺采用前后端分離進行搭建，前端負責UI交互層設計、數據的展現、程序應用邏輯及邏輯渲染、優化用戶體驗、頁面渲染等； 后端負責服務層開發、提供數據、存儲數據、保障數據傳輸的穩定性等。前后端最后通過接口實現數據傳遞和交互。

多數工業管理平臺存在前后端某一端業務薄弱的情況，這往往是由于平臺開發時，開發人員一起開發前后端，開發存在側重點。而本研究構想的平臺采用開發分離原則，前后端在分離開發模式下，前后端人員各司其職，同時進行開發，可以縮短平臺開發時間，提高開發效率。在前后端人員雙方了解業務邏輯情況下，前后端人員可以不依賴彼此進行單獨開發和調試，從而減少前后端的溝通，有效地降低溝通成本。前端不需要編寫任何后端代碼，只需要調用后端提供的接口，就可實現前后端的連接，從而避免前后端代碼耦合、混雜等現象。

圖2 終端與后端連接

采用前后端分離，后端提供數據接口，手機、平板等不同終端只需要根據數據接口編程，就能實現多個終端與同一個后端的連接，避免開發者針對每一個終端都開發相同的后端服務的重復工作，提高開發者的工作效率，如圖2終端與后端的連接。

平臺前后端分離采用單頁面應用SPA(Single-page application)，單頁面應用將前后端關注點進行分離，前端負責顯示，后端負責數據的計算和存儲，明確前后端的邏輯，加載時僅根據需求進行局部更新，提高了加載速度和用戶體驗感。

3 前端搭建

3.1 相關技術介紹

(1)Vue技術

Vue是當前使用廣泛的開源的漸進式JavaScript框架，可以自由與多種第三方庫或第三方插件進行對接，包含多種附帶組件，如Vue-cli、Vue-router等。

1)Vue.js前端開發框架

Vue.js[5]是近年來出現的一款輕量級前端框架，相比于Angular JS前端框架，Vue.js更簡單、更靈活、更容易優化、性能更好，因此Vue.js運用于前端框架被越來越多的人認可。與Vue.js相似并被多數工程管理平臺應用的前端開發框架React，其與Vue.js區別主要是內部實現本質不同，React通過對虛擬DOM進行渲染，將數據保存在內存中，當狀態發生改變時，將會重新對虛擬DOM進行渲染，通過補丁的形式將變化部分加載到虛擬DOM節點上，并且不是每次改變都渲染整個頁面。而Vue.js則是以DOM為模板，真正操作在DOM上，將數據與真實的節點進行綁定[6]。Vue.js的這種真實DOM比React的虛擬DOM性能更好，能為前端多功能模塊提供精細度高的界面顯示，更能滿足本平臺前端開發。

除此之外，Vue.js作為前端開放框架主要是因為其具有模塊化、組件化、響應式數據雙向綁定、路由功能和狀態管理特點。

模塊化：在JavaScript剛開始運用于前端開發時，不支持程序分解，然后再自由組合。這給開發人員開發大型、復雜的Web應用帶來很大的阻礙。因此，前端逐漸支持模塊化，保證了管理人員基于平臺對工程信息的模塊式管理。通過import(導入)模塊、export(導出)模塊，豐富Java Script語言的功能。2015年所處JavaScript最新版本ECMAScript6.0(簡稱ES6)支持模塊化，ES6模塊的靜態化設計原則，有效提高模塊的加載[7]。Vue.js支持最新的ES6規范，因此利用Vue.js作為前端框架，能夠很好地體現模塊化思想。

組件化：通過組件化，Vue.js能夠將JS、HTML和CSS等前端開發語言寫在一個文件里，且各組件之間不會相互影響，組件之間的關系明確，開發人員清楚劃分各組件的功能邊界，這有效提高代碼可讀性和可維護性，有效減少定位并解決開發遇到問題的時間，為工程信息復雜的精細化管理提供了軟硬件基礎上的流暢性和快捷性。

響應式數據雙向綁定：其綁定原理如圖3。與單項數據綁定相比，雙向數據綁定減少了增、刪、改、查操作，在模型數據與視圖顯示數據之間，一個數據修改，另一個數據自動隨之改變，例如在表單場景中，當填寫完表單信息，數據就已經保存到模型數據庫，這就省去模型數據增、刪、改、查等工作量，節約時間，提高效率。

圖3 雙向數據綁定原理

路由功能：Vue.js+vue-router創建單頁面應用，通過Vue.js的路由功能在路由中配置業務模塊，實現單頁面跳轉。

狀態管理：Vuex專門為解決多個組件共享狀態的問題而設計的Vue.js框架的狀態管理模式，其狀態管理原理如圖4，Commit主動操作Mutations，Mutations操作用來存放共享狀態的State。

圖4 Vuex狀態管理原理

2)管理平臺前端動態頁面技術

利用HTML5和CSS3編寫靜態頁面，然后在靜態頁面插入JavaScript這種能被瀏覽器解析和運行的腳本語言實現精細化管理平臺前端動態頁面設計。

HTML5是2014年萬維網重新修訂的超文本標記語言，它在舊版本的HTML基礎上添加