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

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

引言

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

市面上多數(shù)工程的環(huán)境或安全監(jiān)管平臺(tái)解決了監(jiān)測(cè)數(shù)據(jù)散亂的問(wèn)題，如現(xiàn)場(chǎng)監(jiān)控系統(tǒng)、安全指數(shù)監(jiān)測(cè)平臺(tái)等實(shí)現(xiàn)了施工現(xiàn)場(chǎng)安全信息的收集和查看，但此類平臺(tái)往往缺乏日常流程管理功能，同時(shí)也在數(shù)據(jù)分析處理、安全預(yù)警、消息傳送等功能方面少有涉及； 而對(duì)于多數(shù)工程業(yè)務(wù)流程管理平臺(tái)，往往存在日常運(yùn)行故障多、低移動(dòng)化、操作冗雜度高等問(wèn)題，這不利于工程管理平臺(tái)朝向智能化發(fā)展。

因此我們需要建立一個(gè)運(yùn)行流暢、架構(gòu)安全的精細(xì)化平臺(tái)，實(shí)現(xiàn)工程建設(shè)的信息化、精細(xì)化、規(guī)范化管理，從而達(dá)到工程信息的實(shí)時(shí)共享，提高項(xiàng)目管理效率的目的。

1 平臺(tái)總體架構(gòu)

圖1 平臺(tái)總體架構(gòu)

精細(xì)化管理平臺(tái)總體架構(gòu)由五個(gè)層次組成，分別為：由網(wǎng)絡(luò)基礎(chǔ)設(shè)施和計(jì)算機(jī)軟硬件基礎(chǔ)設(shè)施兩部分組成的基礎(chǔ)設(shè)施層； 包含BIM數(shù)據(jù)庫(kù)、GIS數(shù)據(jù)庫(kù)、管理數(shù)據(jù)庫(kù)、共享數(shù)據(jù)庫(kù)的數(shù)據(jù)層； 包含前后端分離技術(shù)、Vue前段框架技術(shù)、Springcloud等后端框架技術(shù)、移動(dòng)端技術(shù)的支撐層； 包含進(jìn)度、質(zhì)量、安全、物料、文檔、模型管理六個(gè)功能模塊的應(yīng)用層，該層即為精細(xì)化管理實(shí)際內(nèi)容的表現(xiàn)； 由業(yè)主方、施工方、監(jiān)理方等項(xiàng)目參建單位組成的用戶層，為精細(xì)化管理組織成員的具體表現(xiàn)?？傮w架構(gòu)圖如圖1。

2 前后端分離原則

精細(xì)化管理平臺(tái)采用前后端分離進(jìn)行搭建，前端負(fù)責(zé)UI交互層設(shè)計(jì)、數(shù)據(jù)的展現(xiàn)、程序應(yīng)用邏輯及邏輯渲染、優(yōu)化用戶體驗(yàn)、頁(yè)面渲染等； 后端負(fù)責(zé)服務(wù)層開發(fā)、提供數(shù)據(jù)、存儲(chǔ)數(shù)據(jù)、保障數(shù)據(jù)傳輸?shù)姆€(wěn)定性等。前后端最后通過(guò)接口實(shí)現(xiàn)數(shù)據(jù)傳遞和交互。

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

圖2 終端與后端連接

采用前后端分離，后端提供數(shù)據(jù)接口，手機(jī)、平板等不同終端只需要根據(jù)數(shù)據(jù)接口編程，就能實(shí)現(xiàn)多個(gè)終端與同一個(gè)后端的連接，避免開發(fā)者針對(duì)每一個(gè)終端都開發(fā)相同的后端服務(wù)的重復(fù)工作，提高開發(fā)者的工作效率，如圖2終端與后端的連接。

平臺(tái)前后端分離采用單頁(yè)面應(yīng)用SPA(Single-page application)，單頁(yè)面應(yīng)用將前后端關(guān)注點(diǎn)進(jìn)行分離，前端負(fù)責(zé)顯示，后端負(fù)責(zé)數(shù)據(jù)的計(jì)算和存儲(chǔ)，明確前后端的邏輯，加載時(shí)僅根據(jù)需求進(jìn)行局部更新，提高了加載速度和用戶體驗(yàn)感。

3 前端搭建

3.1 相關(guān)技術(shù)介紹

(1)Vue技術(shù)

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

1)Vue.js前端開發(fā)框架

Vue.js[5]是近年來(lái)出現(xiàn)的一款輕量級(jí)前端框架，相比于Angular JS前端框架，Vue.js更簡(jiǎn)單、更靈活、更容易優(yōu)化、性能更好，因此Vue.js運(yùn)用于前端框架被越來(lái)越多的人認(rèn)可。與Vue.js相似并被多數(shù)工程管理平臺(tái)應(yīng)用的前端開發(fā)框架React，其與Vue.js區(qū)別主要是內(nèi)部實(shí)現(xiàn)本質(zhì)不同，React通過(guò)對(duì)虛擬DOM進(jìn)行渲染，將數(shù)據(jù)保存在內(nèi)存中，當(dāng)狀態(tài)發(fā)生改變時(shí)，將會(huì)重新對(duì)虛擬DOM進(jìn)行渲染，通過(guò)補(bǔ)丁的形式將變化部分加載到虛擬DOM節(jié)點(diǎn)上，并且不是每次改變都渲染整個(gè)頁(yè)面。而Vue.js則是以DOM為模板，真正操作在DOM上，將數(shù)據(jù)與真實(shí)的節(jié)點(diǎn)進(jìn)行綁定[6]。Vue.js的這種真實(shí)DOM比React的虛擬DOM性能更好，能為前端多功能模塊提供精細(xì)度高的界面顯示，更能滿足本平臺(tái)前端開發(fā)。

除此之外，Vue.js作為前端開放框架主要是因?yàn)槠渚哂心K化、組件化、響應(yīng)式數(shù)據(jù)雙向綁定、路由功能和狀態(tài)管理特點(diǎn)。

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

組件化：通過(guò)組件化，Vue.js能夠?qū)S、HTML和CSS等前端開發(fā)語(yǔ)言寫在一個(gè)文件里，且各組件之間不會(huì)相互影響，組件之間的關(guān)系明確，開發(fā)人員清楚劃分各組件的功能邊界，這有效提高代碼可讀性和可維護(hù)性，有效減少定位并解決開發(fā)遇到問(wèn)題的時(shí)間，為工程信息復(fù)雜的精細(xì)化管理提供了軟硬件基礎(chǔ)上的流暢性和快捷性。

響應(yīng)式數(shù)據(jù)雙向綁定：其綁定原理如圖3。與單項(xiàng)數(shù)據(jù)綁定相比，雙向數(shù)據(jù)綁定減少了增、刪、改、查操作，在模型數(shù)據(jù)與視圖顯示數(shù)據(jù)之間，一個(gè)數(shù)據(jù)修改，另一個(gè)數(shù)據(jù)自動(dòng)隨之改變，例如在表單場(chǎng)景中，當(dāng)填寫完表單信息，數(shù)據(jù)就已經(jīng)保存到模型數(shù)據(jù)庫(kù)，這就省去模型數(shù)據(jù)增、刪、改、查等工作量，節(jié)約時(shí)間，提高效率。

圖3 雙向數(shù)據(jù)綁定原理

路由功能：Vue.js+vue-router創(chuàng)建單頁(yè)面應(yīng)用，通過(guò)Vue.js的路由功能在路由中配置業(yè)務(wù)模塊，實(shí)現(xiàn)單頁(yè)面跳轉(zhuǎn)。

狀態(tài)管理：Vuex專門為解決多個(gè)組件共享狀態(tài)的問(wèn)題而設(shè)計(jì)的Vue.js框架的狀態(tài)管理模式，其狀態(tài)管理原理如圖4，Commit主動(dòng)操作Mutations，Mutations操作用來(lái)存放共享狀態(tài)的State。

圖4 Vuex狀態(tài)管理原理

2)管理平臺(tái)前端動(dòng)態(tài)頁(yè)面技術(shù)

利用HTML5和CSS3編寫靜態(tài)頁(yè)面，然后在靜態(tài)頁(yè)面插入JavaScript這種能被瀏覽器解析和運(yùn)行的腳本語(yǔ)言實(shí)現(xiàn)精細(xì)化管理平臺(tái)前端動(dòng)態(tài)頁(yè)面設(shè)計(jì)。

HTML5是2014年萬(wàn)維網(wǎng)重新修訂的超文本標(biāo)記語(yǔ)言，它在舊版本的HTML基礎(chǔ)上添加