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

背景技術：

傳統的前端頁面開發(fā)是以頁面為獨立的最小單元，一個業(yè)務場景設計一個頁面，在這個頁面上根據業(yè)務場景設計布局，不同的區(qū)域顯示不同的內容，整個頁面的HTML元素和CSS樣式是耦合在一起的。

隨著業(yè)務場景的逐漸增多，有兩個問題逐漸顯現出來：

1.當業(yè)務場景發(fā)生變化時，有時可能是某些區(qū)域的內容發(fā)生了變化，有時可能是多個區(qū)域間的業(yè)務關聯發(fā)生了變化，這個時候只能對頁面整體代碼進行修改調整。而這樣的修改調整經常維持不了多久又會隨著下一次的業(yè)務調整而發(fā)生新的變化。

2.當有新的業(yè)務場景出現的時候，必須重新設計頁面布局，開發(fā)新的頁面HTML和CSS，這個時候需要引入設計人員和開發(fā)人員把頁面的開發(fā)過程再次實施一遍。

這兩個問題其實總結來說就是頁面的開發(fā)不能適應業(yè)務場景的變化，而在監(jiān)測服務類應用中，由于監(jiān)測數據繁多，監(jiān)測場景復雜多變，上述兩個問題尤其明顯。

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

技術實現要素：

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

步驟1：設計組件的外觀。

這一步驟通過UI的交互設計完成，根據整個網頁應用的外觀風格來確定不同的組件外觀，組件外觀圖表以及自定義外觀的數據展示組件，圖表的形式為餅圖、折線圖、區(qū)域圖或柱狀圖等，數據展示組件中為一個多列的表格，其中表格的某一列顯示一個進度條和指示標桿來顯示當前日期的值和指定的對比日期的值。

步驟2：設計組件的接口。

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

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

步驟3：組件的實現設計。

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

步驟4：配置組件

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

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

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

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

附圖說明

圖1頁面設計效果圖；

圖2頁面用XMLDocument描述的排版代碼圖；

具體實施方式

下面結合附圖和具體實施方式對本發(fā)明做進一步說明。

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

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

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

設計并實現設計圖中包含的圖形化組件，包括以下步驟：

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

步驟1.2高速公路實時交通量線圖組件以及過濾線圖數據的單選+多選復合組件。

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

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

定義頁面排版結構描述XML文檔，包括以下步驟：

步驟2.1分析頁面DOM結構，設計行列組合。

步驟2.2以XMLDocument格式完成頁面結構描述，其中Container代表容器，Module代表上面步驟1中實現的組件。

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

步驟3.1分析每個組件包含的數據，以接口設計的模板完成參數配置。

步驟3.2微調頁面樣式完成最終效果。

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