本發(fā)明涉及一種動(dòng)態(tài)構(gòu)建實(shí)時(shí)數(shù)據(jù)展示頁(yè)面的方法，在大量的實(shí)時(shí)監(jiān)測(cè)數(shù)據(jù)中動(dòng)態(tài)選擇業(yè)務(wù)相關(guān)的數(shù)據(jù)，按照符合監(jiān)測(cè)大屏布局的方式來(lái)快速構(gòu)建監(jiān)測(cè)頁(yè)面。

背景技術(shù)：

傳統(tǒng)的前端頁(yè)面開(kāi)發(fā)是以頁(yè)面為獨(dú)立的最小單元，一個(gè)業(yè)務(wù)場(chǎng)景設(shè)計(jì)一個(gè)頁(yè)面，在這個(gè)頁(yè)面上根據(jù)業(yè)務(wù)場(chǎng)景設(shè)計(jì)布局，不同的區(qū)域顯示不同的內(nèi)容，整個(gè)頁(yè)面的HTML元素和CSS樣式是耦合在一起的。

隨著業(yè)務(wù)場(chǎng)景的逐漸增多，有兩個(gè)問(wèn)題逐漸顯現(xiàn)出來(lái)：

1.當(dāng)業(yè)務(wù)場(chǎng)景發(fā)生變化時(shí)，有時(shí)可能是某些區(qū)域的內(nèi)容發(fā)生了變化，有時(shí)可能是多個(gè)區(qū)域間的業(yè)務(wù)關(guān)聯(lián)發(fā)生了變化，這個(gè)時(shí)候只能對(duì)頁(yè)面整體代碼進(jìn)行修改調(diào)整。而這樣的修改調(diào)整經(jīng)常維持不了多久又會(huì)隨著下一次的業(yè)務(wù)調(diào)整而發(fā)生新的變化。

2.當(dāng)有新的業(yè)務(wù)場(chǎng)景出現(xiàn)的時(shí)候，必須重新設(shè)計(jì)頁(yè)面布局，開(kāi)發(fā)新的頁(yè)面HTML和CSS，這個(gè)時(shí)候需要引入設(shè)計(jì)人員和開(kāi)發(fā)人員把頁(yè)面的開(kāi)發(fā)過(guò)程再次實(shí)施一遍。

這兩個(gè)問(wèn)題其實(shí)總結(jié)來(lái)說(shuō)就是頁(yè)面的開(kāi)發(fā)不能適應(yīng)業(yè)務(wù)場(chǎng)景的變化，而在監(jiān)測(cè)服務(wù)類應(yīng)用中，由于監(jiān)測(cè)數(shù)據(jù)繁多，監(jiān)測(cè)場(chǎng)景復(fù)雜多變，上述兩個(gè)問(wèn)題尤其明顯。

為了解決上述問(wèn)題，本文提出了一種適用于監(jiān)測(cè)服務(wù)類應(yīng)用的動(dòng)態(tài)構(gòu)建頁(yè)面的方法。這種方法的核心思想是從數(shù)據(jù)展示的角度出發(fā)，構(gòu)建僅僅為數(shù)據(jù)服務(wù)的組件，然后用配置的方式將監(jiān)測(cè)數(shù)據(jù)和組件組合起來(lái)構(gòu)建用戶頁(yè)面。這樣隨著組件庫(kù)的不斷完善，無(wú)論業(yè)務(wù)場(chǎng)景變化或者新增，都不再需要開(kāi)發(fā)人員去修改原始代碼，只需要相關(guān)人員去更改配置文件即可。

技術(shù)實(shí)現(xiàn)要素：

針對(duì)現(xiàn)有技術(shù)中存在的上述問(wèn)題，本發(fā)明采用的技術(shù)方案為一種適用于監(jiān)測(cè)服務(wù)類應(yīng)用動(dòng)態(tài)構(gòu)建頁(yè)面的方法，該方法包括一種構(gòu)建組件的方法和一種配置頁(yè)面的方法，一種構(gòu)建組件的方法為下述步驟的1-3，一種配置頁(yè)面的方法為下述步驟4，一種構(gòu)建組件的方法和一種配置頁(yè)面的方法兩者相配合實(shí)現(xiàn)具體的實(shí)施過(guò)程，

步驟1：設(shè)計(jì)組件的外觀。

這一步驟通過(guò)UI的交互設(shè)計(jì)完成，根據(jù)整個(gè)網(wǎng)頁(yè)應(yīng)用的外觀風(fēng)格來(lái)確定不同的組件外觀，組件外觀圖表以及自定義外觀的數(shù)據(jù)展示組件，圖表的形式為餅圖、折線圖、區(qū)域圖或柱狀圖等，數(shù)據(jù)展示組件中為一個(gè)多列的表格，其中表格的某一列顯示一個(gè)進(jìn)度條和指示標(biāo)桿來(lái)顯示當(dāng)前日期的值和指定的對(duì)比日期的值。

步驟2：設(shè)計(jì)組件的接口。

組件的接口也為組件的配置方式，這里需要明確這個(gè)通用的組件需要暴露哪些配置項(xiàng)給用戶，有了這些配置項(xiàng)用戶就在配置文件中隨時(shí)修改從而讓對(duì)應(yīng)的組件適用于對(duì)應(yīng)的業(yè)務(wù)場(chǎng)景。

組件的接口設(shè)計(jì)要考慮到組件所適用的數(shù)據(jù)類型、業(yè)務(wù)場(chǎng)景、表現(xiàn)形式。組件會(huì)展示一組數(shù)據(jù)的對(duì)比，那接口中一定會(huì)有一個(gè)這組數(shù)據(jù)的特征值項(xiàng)；組件在不同的場(chǎng)景下表現(xiàn)的對(duì)比形式不一樣，對(duì)比形式是一組柱圖對(duì)比或是一個(gè)餅圖對(duì)比總體百分比權(quán)重，那接口中會(huì)有一個(gè)表現(xiàn)外觀的配置項(xiàng)。

步驟3：組件的實(shí)現(xiàn)設(shè)計(jì)。

組件的實(shí)現(xiàn)過(guò)程其實(shí)就是完成從設(shè)計(jì)組件的接口到最終設(shè)計(jì)組件的應(yīng)用的過(guò)渡，每個(gè)組件的開(kāi)發(fā)都包含邏輯代碼JS，展示代碼HTML+CSS。設(shè)計(jì)組件的接口中設(shè)計(jì)的配置項(xiàng)都會(huì)作為組件JS的初始化參數(shù)，組件的模板采用含表達(dá)式的動(dòng)態(tài)編譯模板引擎，步驟2中設(shè)計(jì)的接口配置項(xiàng)中外觀表現(xiàn)相關(guān)的參數(shù)首先會(huì)使得模板編譯為配置項(xiàng)要求的HTML片段。然后步驟2設(shè)計(jì)的數(shù)據(jù)特征值會(huì)使得組件從后臺(tái)獲取到相關(guān)的數(shù)據(jù)，然后用這些數(shù)據(jù)渲染到組件中，進(jìn)而形成與設(shè)計(jì)匹配的組件表現(xiàn)。

步驟4：配置組件

在組件的實(shí)現(xiàn)設(shè)計(jì)的基礎(chǔ)之上，有以上組件后頁(yè)面的開(kāi)發(fā)過(guò)程就轉(zhuǎn)變?yōu)榫帉懪渲梦募倪^(guò)程，配置文件的格式很靈活，配置文件的格式是xml、j son或者其他解析格式的文件。在配置文件里需要以下兩方面的內(nèi)容，第一方面是頁(yè)面布局和組件選擇，當(dāng)前這個(gè)頁(yè)面需要顯示為上下兩行時(shí)，上面一行按50％-50％分為兩列，下面一行按40％-20％-40％的比例分成三列，這一共5個(gè)顯示單元每個(gè)單元顯示哪個(gè)特定的組件都寫在配置文件中。第二方面就是配置單個(gè)組件的接口參數(shù)，即第一個(gè)單元格的組件需要一個(gè)id一個(gè)日期，一個(gè)顯示主題，單個(gè)組件的接口參數(shù)都需要寫到配置文件中。

與現(xiàn)有技術(shù)相比，本發(fā)明具有以下明顯的優(yōu)勢(shì)：

1.適應(yīng)復(fù)雜多變的業(yè)務(wù)場(chǎng)景。配置文件中的排版和組件選擇都是很靈活，隨時(shí)可以改動(dòng)的，業(yè)務(wù)場(chǎng)景變化后只需要修改配置文件即可。

2.形成了一整套完善的頁(yè)面配置流程和方法，使得不同的工程人員專注于各自負(fù)責(zé)的領(lǐng)域?？蚣荛_(kāi)發(fā)人員只需要專注于組件的完善，頁(yè)面配置人員只專注于對(duì)業(yè)務(wù)的理解和組件的配置使用。

附圖說(shuō)明

圖1頁(yè)面設(shè)計(jì)效果圖；

圖2頁(yè)面用XMLDocument描述的排版代碼圖；

具體實(shí)施方式

下面結(jié)合附圖和具體實(shí)施方式對(duì)本發(fā)明做進(jìn)一步說(shuō)明。

具體實(shí)施方式以開(kāi)發(fā)一個(gè)如圖1所示的高速公路免通行費(fèi)專題監(jiān)測(cè)頁(yè)面為例。

從設(shè)計(jì)圖上可以看出，這個(gè)頁(yè)面將高速公路通行的繁雜數(shù)據(jù)分類整理，既可以看到各條高速公路的交通量占比和交通量排名，也可以看到每條高速公路的實(shí)時(shí)小時(shí)交通量，還能看到高速公路上發(fā)生的事件列表。

本發(fā)明所述的方法包括以下步驟：

設(shè)計(jì)并實(shí)現(xiàn)設(shè)計(jì)圖中包含的圖形化組件，包括以下步驟：

步驟1.1高速公路交通量占比餅圖組件。

步驟1.2高速公路實(shí)時(shí)交通量線圖組件以及過(guò)濾線圖數(shù)據(jù)的單選+多選復(fù)合組件。

步驟1.3高速公路交通量排名柱狀圖組件。

步驟1.4高速公路事件列表組件。

定義頁(yè)面排版結(jié)構(gòu)描述XML文檔，包括以下步驟：

步驟2.1分析頁(yè)面DOM結(jié)構(gòu)，設(shè)計(jì)行列組合。

步驟2.2以XMLDocument格式完成頁(yè)面結(jié)構(gòu)描述，其中Container代表容器，Module代表上面步驟1中實(shí)現(xiàn)的組件。

配置組件接口參數(shù)，完成最終效果，包括以下步驟：

步驟3.1分析每個(gè)組件包含的數(shù)據(jù)，以接口設(shè)計(jì)的模板完成參數(shù)配置。

步驟3.2微調(diào)頁(yè)面樣式完成最終效果。

至此整個(gè)頁(yè)面的開(kāi)發(fā)就完成了，可以看到本發(fā)明中將頁(yè)面開(kāi)發(fā)分解為組件開(kāi)發(fā)加頁(yè)面布局開(kāi)發(fā)兩個(gè)主要步驟，組件開(kāi)發(fā)只考慮數(shù)據(jù)展示，頁(yè)面布局開(kāi)發(fā)只考慮排版，這樣就可以十分靈活的設(shè)計(jì)對(duì)組件的排放，從而快速完成每一個(gè)新頁(yè)面的開(kāi)發(fā)。