跨瀏覽器動(dòng)態(tài)展示方法和裝置的制造方法
【技術(shù)領(lǐng)域】
[0001 ]本發(fā)明涉及計(jì)算機(jī)領(lǐng)域，具體地，涉及一種跨瀏覽器動(dòng)態(tài)展示方法和裝置，主要適 用于基于B/S模式的ERP應(yīng)用系統(tǒng)或協(xié)同應(yīng)用系統(tǒng)中瀏覽器前端流程圖繪制及展示的應(yīng)用 場(chǎng)景。
【背景技術(shù)】
[0002] 在ERP應(yīng)用系統(tǒng)或協(xié)同應(yīng)用系統(tǒng)中，流程圖繪制、布局調(diào)整、流程圖展示及流程節(jié) 點(diǎn)狀態(tài)跟蹤展示等功能越來(lái)越受客戶的重視，隨著信息辦公自動(dòng)化的推進(jìn)，企業(yè)內(nèi)部的審 批流程越來(lái)越多，也更復(fù)雜，一些復(fù)雜的流程圖可能需要功能強(qiáng)大的流程圖繪制工具來(lái)繪 制。流程的展示和ERP系統(tǒng)后臺(tái)的流程處理引擎是分不開(kāi)的，因此在ERP系統(tǒng)中必需提供強(qiáng) 大流程圖繪制、展示功能。目前市場(chǎng)上的流程圖實(shí)現(xiàn)機(jī)制大概有三種： 1、通過(guò)flash插件方式實(shí)現(xiàn)： 在瀏覽器頁(yè)面嵌入flash，通過(guò)flash完成流程圖的繪制展示，該方式不存在瀏覽器兼 容性問(wèn)題，且flash展示流程圖比較美觀。該方式主要的缺點(diǎn)有:flash的技術(shù)體系和ERP系 統(tǒng)的技術(shù)體系屬于不同的技術(shù)，存在數(shù)據(jù)交互問(wèn)題，雙方需要定義好交互數(shù)據(jù)的格式和接 口，另外ERP系統(tǒng)中流程圖功能改動(dòng)或新增時(shí)都需要flash端配合改動(dòng)，并再次進(jìn)行交互數(shù) 據(jù)的定義和接口開(kāi)發(fā)。另外一個(gè)缺點(diǎn)是，flash程序有畫布的概念，且flash畫布大小是固定 的，一旦流程圖高寬超出flash畫布范圍，flash將無(wú)法處理。
[0003] 2、通過(guò)瀏覽器畫布方式實(shí)現(xiàn)： 通過(guò)瀏覽器支持的畫布，實(shí)現(xiàn)流程圖的繪制展示，通過(guò)Json和Ajax實(shí)現(xiàn)數(shù)據(jù)交互，不存 在數(shù)據(jù)交互問(wèn)題，并且新增或修改流程圖功能都很方便，缺點(diǎn)在于瀏覽器兼容性問(wèn)題無(wú)法 處理，例如火狐、谷歌支持HTML5,可通過(guò)canvas實(shí)現(xiàn)流程圖繪制展示，但是IE8不支持 HTML5,只能通過(guò)IE8的VML技術(shù)或其他替代技術(shù)來(lái)實(shí)現(xiàn)流程圖的繪制展示。VML技術(shù)和 canvas技術(shù)區(qū)別很大，因此流程圖功能就需要針對(duì)不同的瀏覽器進(jìn)行不同的實(shí)現(xiàn)。
[0004] 3、通過(guò)ocx插件方式實(shí)現(xiàn)： 在網(wǎng)頁(yè)嵌入ocx插件，缺點(diǎn)同flash插件方式實(shí)現(xiàn)。還是因?yàn)閛cx技術(shù)體系和ERP系統(tǒng)的 技術(shù)體系不同，存在數(shù)據(jù)交互問(wèn)題，及功能新增修改都需要ocx端配合改動(dòng)。
[0005] 綜上所述，現(xiàn)有解決方案的弊端可以總結(jié)為如下兩點(diǎn)： (1) 瀏覽器兼容性問(wèn)題； (2) 不同技術(shù)體系引起的數(shù)據(jù)交互不便，功能的擴(kuò)展新增復(fù)雜。

【發(fā)明內(nèi)容】

[0006] 本發(fā)明的目的在于，針對(duì)上述問(wèn)題，提出一種跨瀏覽器動(dòng)態(tài)展示方法和裝置，以實(shí) 現(xiàn)解決兼容性和數(shù)據(jù)交互不便的問(wèn)題。
[0007] 為實(shí)現(xiàn)上述目的，本發(fā)明采用的技術(shù)方案是： 一種跨瀏覽器動(dòng)態(tài)展示裝置，包括： 數(shù)據(jù)引擎:負(fù)責(zé)流程節(jié)點(diǎn)定義，流程節(jié)點(diǎn)關(guān)系的維護(hù)以及節(jié)點(diǎn)坐標(biāo)的定位； 事件引擎:負(fù)責(zé)鼠標(biāo)及頁(yè)面事件響應(yīng)，以及事件函數(shù)定義； 畫布引擎:負(fù)責(zé)畫布的繪制，流程圖的繪制以及流程圖樣式的美化調(diào)整； 交互引擎:負(fù)責(zé)跟ERP后臺(tái)的交互數(shù)據(jù)定義，交互事件定義，交互數(shù)據(jù)的轉(zhuǎn)化。
[0008] 優(yōu)選的，所述數(shù)據(jù)引擎，包括流程節(jié)點(diǎn)定義單元、節(jié)點(diǎn)關(guān)系維護(hù)單元和節(jié)點(diǎn)坐標(biāo)定 位單元； 所述流程節(jié)點(diǎn)定義單元:定義節(jié)點(diǎn)的屬性； 所述節(jié)點(diǎn)關(guān)系維護(hù)單元:按雙向遍歷的原則進(jìn)行節(jié)點(diǎn)上下級(jí)關(guān)系的維護(hù)； 所述節(jié)點(diǎn)坐標(biāo)定位單元:負(fù)責(zé)定位節(jié)點(diǎn)的X、Y坐標(biāo)。
[0009] 優(yōu)選的，所述事件引擎，包括，事件響應(yīng)單元和事件函數(shù)定義單元； 所述事件響應(yīng)單元:響應(yīng)鼠標(biāo)的操作事件和頁(yè)面的操作事件； 所述事件函數(shù)定義單元:處理事件函數(shù)的定義。
[0010]優(yōu)選的，所述處理事件函數(shù)的定義具體包括，節(jié)點(diǎn)的新增、修改、刪除或移動(dòng)事件。 [0011]優(yōu)選的，所述畫布引擎，包括畫布繪制單元、流程圖繪制單元和樣式美化調(diào)整單 元； 所述畫布繪制單元:繪制簡(jiǎn)單的圖形； 所述流程圖繪制單元:根據(jù)數(shù)據(jù)引擎模塊提供的節(jié)點(diǎn)的x、Y坐標(biāo)，根據(jù)定義好的橫豎坐 標(biāo)軸單位寬度，算出該節(jié)點(diǎn)的絕對(duì)或相對(duì)位置，從而完成流程圖的繪制； 所述樣式美化調(diào)整單元，控制流程圖的樣式。
[0012] 優(yōu)選的，所述交互引擎，包括交互數(shù)據(jù)定義單元、交互事件定義單元和交互數(shù)據(jù)轉(zhuǎn) 化單元； 所述交互數(shù)據(jù)定義單元:結(jié)合ERP系統(tǒng)中流程數(shù)據(jù)的格式，定義交互過(guò)程中的雙方都認(rèn) 可的數(shù)據(jù)格式，格式要求符合Json規(guī)范； 所述交互事件定義單元:采用Ajax的方式來(lái)實(shí)現(xiàn)交互事件的編寫； 所述交互數(shù)據(jù)轉(zhuǎn)化單元:把前端流程圖的數(shù)據(jù)轉(zhuǎn)化成用于同ERP交互的BDF格式數(shù)據(jù)， 同時(shí)，把ERP端提供的BDF格式數(shù)據(jù)，轉(zhuǎn)化成前端流程圖數(shù)據(jù)格式。
[0013] 優(yōu)選的，所述節(jié)點(diǎn)坐標(biāo)定位單元中節(jié)點(diǎn)定位具體包括： 確定X坐標(biāo):從起始節(jié)點(diǎn)開(kāi)始遞歸遍歷流程圖，設(shè)定當(dāng)前節(jié)點(diǎn)子節(jié)點(diǎn)的X坐標(biāo)為當(dāng)前節(jié) 點(diǎn)的X坐標(biāo)+1; 確定Y坐標(biāo)； 其中，起始節(jié)點(diǎn)的X坐標(biāo)是1，Y坐標(biāo)是固定的，且位于畫布的Y軸中點(diǎn)。
[0014] 優(yōu)選的，所述確定Y坐標(biāo)，具體包括： 建立節(jié)點(diǎn)關(guān)系：建立節(jié)點(diǎn)上下級(jí)關(guān)系，在節(jié)點(diǎn)中存儲(chǔ)上下級(jí)節(jié)點(diǎn)的信息，方便雙向遍 歷； 給節(jié)點(diǎn)設(shè)置初始Y坐標(biāo);根據(jù)確定的起始節(jié)點(diǎn)Υ，利用基本公式，遞歸遍歷整個(gè)流程圖， 給所有節(jié)點(diǎn)一個(gè)初始的Y坐標(biāo)，所述基本公式為:y(n) = a + η - 0.5*(Ν+1)，其中a為節(jié)點(diǎn) Y坐標(biāo)，n代表第n個(gè)子節(jié)點(diǎn)，N代表該節(jié)點(diǎn)子節(jié)點(diǎn)數(shù)量； 對(duì)節(jié)點(diǎn)Y坐標(biāo)進(jìn)行動(dòng)態(tài)調(diào)整。
[0015] 優(yōu)選的，所述對(duì)節(jié)點(diǎn)Y坐標(biāo)進(jìn)行動(dòng)態(tài)調(diào)整具體包括： 確定最小分支:若該節(jié)點(diǎn)的直接或間接父節(jié)點(diǎn)的兄弟節(jié)點(diǎn)不是該節(jié)點(diǎn)的直接或間接父 節(jié)點(diǎn)，則第一次出現(xiàn)的該父節(jié)點(diǎn)為該節(jié)點(diǎn)的最小分支； 確定值域:當(dāng)前節(jié)點(diǎn)到最小分支節(jié)點(diǎn)的Y軸坐標(biāo)的上下限為該節(jié)點(diǎn)的值域； 計(jì)算偏移量； 調(diào)整兄弟節(jié)點(diǎn)：根據(jù)計(jì)算的偏移量，運(yùn)用運(yùn)算法則，調(diào)整該節(jié)點(diǎn)的兄弟節(jié)點(diǎn)及兄弟節(jié)點(diǎn) 的子節(jié)點(diǎn)的Y坐標(biāo)，所述運(yùn)算法則為節(jié)點(diǎn)的兄弟節(jié)點(diǎn)上移或下移。
[0016] 同時(shí)本發(fā)明的技術(shù)方案還公開(kāi)一種跨瀏覽器動(dòng)態(tài)展示方法，為采用本發(fā)明技術(shù)方 案公開(kāi)的裝置繪制流程圖并展示的方法。
[0017] 本發(fā)明的技術(shù)方案具有以下有益效果： 本發(fā)明的技術(shù)方案，利用圖結(jié)構(gòu)的雙向遍歷及賦權(quán)定位機(jī)制，并取消對(duì)瀏覽器畫布對(duì) 象及flash、〇CX第三方插件的依賴，利用前端js插件實(shí)現(xiàn)流程圖的繪制定位。解決兼容性和 數(shù)據(jù)交互不便的問(wèn)題。
[0018] 下面通過(guò)附圖和實(shí)施例，對(duì)本發(fā)明的技術(shù)方案做進(jìn)一步的詳細(xì)描述。
【附圖說(shuō)明】
[0019] 圖1為本發(fā)明實(shí)施例所述的跨瀏覽器動(dòng)態(tài)展示裝置的原理框圖； 圖2為本發(fā)明實(shí)施例所述的流程圖繪制功能展示圖； 圖3為本發(fā)明實(shí)施例所述的節(jié)點(diǎn)定位基本公式用例說(shuō)明圖； 圖4為本發(fā)明實(shí)施例所述的Y坐標(biāo)初始設(shè)置示意圖。
【具體實(shí)施方式】
[0020] 以下結(jié)合附圖對(duì)本發(fā)明的優(yōu)選實(shí)施例進(jìn)行說(shuō)明，應(yīng)當(dāng)理解，此處所描述的優(yōu)選實(shí) 施例僅用于說(shuō)明和解釋本發(fā)明，并不用于限定本發(fā)明。
[0021] 本技術(shù)方案提供的流程圖實(shí)現(xiàn)機(jī)制底層技術(shù)采用jquery，這樣就不存在瀏覽器兼 容性問(wèn)題，另外在跟ERP系統(tǒng)的數(shù)據(jù)交互上，采用通用的Json+Ajax方式。
[0022] 具體技術(shù)方案，如圖1所示，一種跨瀏覽器動(dòng)態(tài)展示裝置，包括： 數(shù)據(jù)引擎:負(fù)責(zé)流程節(jié)點(diǎn)定義，流程節(jié)點(diǎn)關(guān)系的維護(hù)以及節(jié)點(diǎn)坐標(biāo)的定位； 事件引擎:負(fù)責(zé)鼠標(biāo)及頁(yè)面事件響應(yīng)，以及事件函數(shù)定義； 畫布引擎:負(fù)責(zé)畫布的繪制，流程圖的繪制以及流程圖樣式的美化調(diào)整； 交互引擎:負(fù)責(zé)跟ERP后臺(tái)的交互數(shù)據(jù)定義，交互事件定義，交互數(shù)據(jù)的轉(zhuǎn)化。
[0023]下文對(duì)跨瀏覽器動(dòng)態(tài)展示進(jìn)行具體說(shuō)明： 數(shù)據(jù)引擎:負(fù)責(zé)流程節(jié)點(diǎn)定義，流程節(jié)點(diǎn)關(guān)系的維護(hù)以及節(jié)點(diǎn)坐標(biāo)的定位。
[0024] 1、流程節(jié)點(diǎn)定義:定義節(jié)點(diǎn)的屬性包括節(jié)點(diǎn)ID、節(jié)點(diǎn)名稱、節(jié)點(diǎn)類型(開(kāi)始節(jié)點(diǎn)、結(jié) 束節(jié)點(diǎn)、串聯(lián)節(jié)點(diǎn)、并聯(lián)節(jié)點(diǎn)）、父節(jié)點(diǎn)列表、子節(jié)點(diǎn)列表、X坐標(biāo)或Y坐標(biāo)等； 2、 節(jié)點(diǎn)關(guān)系維護(hù):流程圖可以算是一種圖結(jié)構(gòu)，因此節(jié)點(diǎn)關(guān)系是按雙向遍歷的原則進(jìn) 行節(jié)點(diǎn)上下級(jí)關(guān)系的維護(hù)，開(kāi)始節(jié)點(diǎn)和結(jié)束節(jié)點(diǎn)比較特殊，開(kāi)始節(jié)點(diǎn)只有子節(jié)點(diǎn)沒(méi)有父節(jié) 點(diǎn)，結(jié)束節(jié)點(diǎn)只有父節(jié)點(diǎn)沒(méi)有子節(jié)點(diǎn)； 3、 節(jié)點(diǎn)坐標(biāo)定位:本技術(shù)方案的核心內(nèi)容，即核心的功能，負(fù)責(zé)定位節(jié)點(diǎn)的X、Y坐標(biāo)，采 用賦權(quán)算法來(lái)定位X坐標(biāo)和Y坐標(biāo)，具體在下文中進(jìn)行詳細(xì)說(shuō)明。
[0025] 事件引擎:負(fù)責(zé)鼠標(biāo)及頁(yè)面事件響應(yīng)，以及節(jié)點(diǎn)增刪改拖動(dòng)等事件的定義。
[0026] 1、事件響應(yīng):響應(yīng)鼠標(biāo)的單擊、雙擊、右擊、拖動(dòng)、onmouseover等事件，響應(yīng)頁(yè)面的 onload、滾動(dòng)條拖動(dòng)等事件； 2、事件函數(shù)定義:處理各種事件函數(shù)的定義，大體包括節(jié)點(diǎn)的新增、修改、刪除、移動(dòng)等 事件； 畫布引擎:負(fù)責(zé)畫布的繪制，流程圖的繪制，流程圖樣式的美化調(diào)整。
[0027] 1、畫布繪制：繪制各種簡(jiǎn)單圖形，包括矩形、文本框、圓形、直線等，在這里為了保 證瀏覽器的兼容性，采用純JS實(shí)現(xiàn)的"wz_jsgraphics. js"的插件來(lái)完成這些工作； 2、 流程圖繪制:本技術(shù)方案的核心功能，根據(jù)數(shù)據(jù)引擎模塊提供好的流程節(jié)點(diǎn)的X、Y坐 標(biāo)，根據(jù)定義好的橫豎坐標(biāo)軸單位寬度(Ux、Uy)，很容易能算出該節(jié)點(diǎn)的絕對(duì)(相對(duì))位置， 若采用CSS絕對(duì)布局，則X*Ux是相對(duì)瀏覽器左側(cè)的像素值，Y*Uy是相對(duì)瀏覽器頂部的像素 值，通過(guò)CSS很容易控制節(jié)點(diǎn)位置，另外節(jié)點(diǎn)之間的連線通過(guò)簡(jiǎn)單的算法便可確定直線的開(kāi) 始和結(jié)束坐標(biāo)。若采用CSS相對(duì)布局，處理方式和絕對(duì)布局大體一樣，不同的是X、Y不是相對(duì) 瀏覽器的像素值，而是相對(duì)頁(yè)面的某個(gè)DIV元素的像素值； 對(duì)于折線的繪制采用分成一段橫線和一段豎線的方式來(lái)處理； 對(duì)于在流程圖任意位置進(jìn)行文字標(biāo)注的功能，只需要確定文本標(biāo)注的位置，就可以通 過(guò)wz_jsgra