[發(fā)明專利]一種適用于監(jiān)測服務(wù)類應(yīng)用動態(tài)構(gòu)建頁面的方法

在審

• 申請?zhí)枺?/td>: 201611212103.X
• 申請日: 2016-12-25
• 公開（公告）號: CN106873965A
• 公開（公告）日: 2017-06-20
• 發(fā)明（設(shè)計）人: 方秀川;陳智宏;孟凡強(qiáng)
• 申請（專利權(quán)）人: 北京通途永久科技有限公司
• 主分類號: G06F9/44
• 分類號: G06F9/44;G06F9/445;G06F17/30
• 代理公司: 北京思海天達(dá)知識產(chǎn)權(quán)代理有限公司11203
• 代理人: 沈波

1.一種適用于監(jiān)測服務(wù)類應(yīng)用動態(tài)構(gòu)建頁面的方法，其特征在于：該方法包括一種構(gòu)建組件的方法和一種配置頁面的方法，一種構(gòu)建組件的方法為下述步驟的1-3，一種配置頁面的方法為下述步驟4，一種構(gòu)建組件的方法和一種配置頁面的方法兩者相配合實(shí)現(xiàn)具體的實(shí)施過程，

步驟1：設(shè)計組件的外觀；

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

步驟2：設(shè)計組件的接口；

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

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

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

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

步驟4：配置組件

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

2.根據(jù)權(quán)利要求1所述的一種適用于監(jiān)測服務(wù)類應(yīng)用動態(tài)構(gòu)建頁面的方法，其特征在于：高速公路免通行費(fèi)專題監(jiān)測頁面中，這個頁面將高速公路通行的繁雜數(shù)據(jù)分類整理，既能看到各條高速公路的交通量占比和交通量排名，也能看到每條高速公路的實(shí)時小時交通量，還能看到高速公路上發(fā)生的事件列表；

本方法包括以下步驟：

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

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

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

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

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

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

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

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

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

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

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