在線監(jiān)測的圖形組態(tài)方法及系統(tǒng)的制作方法
【專利摘要】本發(fā)明提供一種在線監(jiān)測的圖形組態(tài)方法及系統(tǒng)，系統(tǒng)包括：圖元構(gòu)建模塊，用于基于SVG的基本圖元構(gòu)建出復(fù)雜圖元；圖元行為構(gòu)建模塊，用于構(gòu)建基本圖元與行為之間的關(guān)聯(lián)，并根據(jù)根據(jù)構(gòu)建出的圖元與行為的關(guān)聯(lián)，根據(jù)接收到的行為數(shù)據(jù)生成SVG圖，并根據(jù)實(shí)時(shí)行為數(shù)據(jù)對SVG圖進(jìn)行實(shí)時(shí)更新；其中基本圖元包括以下的至少一種：直線、矩形、圓、橢圓、文本、路徑、折線、多邊形；其中所述行為包括以下的至少一種：用于獲取實(shí)時(shí)數(shù)據(jù)的圖形元件屬性、通用事件接口、數(shù)據(jù)展示、邊框顏色、填充、透明度、虛線、旋轉(zhuǎn)、縮放、平移、路徑、柱狀圖、趨勢圖。
【專利說明】
在線監(jiān)測的圖形組態(tài)方法及系統(tǒng)
技術(shù)領(lǐng)域
[0001] 本發(fā)明屬于數(shù)據(jù)處理技術(shù)領(lǐng)域，尤其涉及一種在線監(jiān)測的圖形組態(tài)方法及系統(tǒng)。
【背景技術(shù)】
[0002] 電力系統(tǒng)是現(xiàn)代生活中最重要的部分之一，因此現(xiàn)有的電力系統(tǒng)需要對系統(tǒng)進(jìn)行 實(shí)時(shí)在線監(jiān)測，以確保電力系統(tǒng)的穩(wěn)定運(yùn)行?，F(xiàn)有技術(shù)中廣泛采用圖形組態(tài)工具，根據(jù)接收 到的數(shù)據(jù)實(shí)時(shí)生成監(jiān)控圖形?，F(xiàn)有的很多圖形組態(tài)工具是基于Flash開發(fā)的，但是由于 Flash是一種未開源的私有技術(shù)，且其與某些瀏覽器存在兼容性問題，同時(shí)在布局、交互、內(nèi) 存占用等方面存在缺陷，因此不能很好地滿足圖像處理的要求，特別是對于電力系統(tǒng)這樣 的重要部門來說無法滿足使用要求。

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

[0003] 針對現(xiàn)有技術(shù)中存在圖形組態(tài)工具多是基于Flash開發(fā)的導(dǎo)致性能無法滿足的問 題，提出了一種在線監(jiān)測的圖形組態(tài)方法及系統(tǒng)，能夠廣泛的應(yīng)用于電力系統(tǒng)等領(lǐng)域，提高 系統(tǒng)的兼容性和整體性能。
[0004] 為了解決上述問題，本發(fā)明實(shí)施例提出了一種在線監(jiān)測的圖形組態(tài)系統(tǒng)，包括：
[0005] 圖元構(gòu)建模塊，用于基于可縮放矢量圖形即SVG的基本圖元構(gòu)建出復(fù)雜圖元；
[0006] 圖元行為構(gòu)建模塊，用于構(gòu)建基本圖元與行為之間的關(guān)聯(lián)，并根據(jù)構(gòu)建出的圖元 與行為的關(guān)聯(lián)，根據(jù)接收到的行為數(shù)據(jù)生成SVG圖，并根據(jù)實(shí)時(shí)行為數(shù)據(jù)對SVG圖進(jìn)行實(shí)時(shí) 更新；
[0007] 其中所述SVG的基本圖元包括以下的至少一種:直線、矩形、圓、橢圓、文本、路徑、 折線、多邊形；
[0008] 其中所述行為包括以下的至少一種：用于獲取實(shí)時(shí)數(shù)據(jù)的圖形元件屬性、通用事 件接口、數(shù)據(jù)展示、邊框顏色、填充、透明度、虛線、旋轉(zhuǎn)、縮放、平移、路徑、柱狀圖、趨勢圖； 其中所述圖形元件屬性包括:設(shè)備名稱、測試點(diǎn)名稱、數(shù)據(jù)類型；其中所述通用事件接口包 括:鼠標(biāo)的點(diǎn)擊、移人、移出、按下、彈起、移動(dòng)。
[0009] 其中，所述圖元行為構(gòu)建模塊包括：
[0010] 圖形元件屬性構(gòu)建單元，用于從實(shí)時(shí)數(shù)據(jù)中獲取圖形元件屬性中的設(shè)備名稱、測 試點(diǎn)名稱、數(shù)據(jù)類型；
[0011] 通用事件接口構(gòu)建單元，用于對通用事件接口包括的點(diǎn)擊、移入、移出、按下、彈 起、移動(dòng)動(dòng)作，分別綁定對應(yīng)的處理步驟；
[0012] 數(shù)據(jù)展示構(gòu)建單元，用于將圖形元件屬性映射為預(yù)設(shè)字段;具體包括：
[0013] 將圖形元件屬性的原始數(shù)據(jù)映射為預(yù)設(shè)字段，或
[0014] 將圖形元件屬性的原始數(shù)據(jù)進(jìn)行預(yù)設(shè)處理后得到的數(shù)據(jù)映射為預(yù)設(shè)字段，或
[0015] 將圖形元件屬性的原始數(shù)據(jù)通過匿名函數(shù)根據(jù)預(yù)設(shè)條件對原始數(shù)據(jù)進(jìn)行判斷以 映射為預(yù)設(shè)字段；
[0016]圖元CSS屬性構(gòu)建單元，用于對邊框顏色、填充、透明度、虛線，通過圖元CSS屬性進(jìn) 行解析以映射為預(yù)設(shè)字段；
[0017] 圖元transform矩陣構(gòu)建單元，用于對旋轉(zhuǎn)、縮放、平移通過設(shè)置圖元transform矩 陣進(jìn)行解析以映射為預(yù)設(shè)字段；
[0018] 柱狀圖和趨勢圖構(gòu)建單元，用于根據(jù)柱狀圖和趨勢圖的主題、標(biāo)題、圖例、數(shù)據(jù)，將 圖元\生成柱圖和曲線圖。
[0019] 其中，所述圖元行為構(gòu)建模塊還包括：
[0020] 解除單元，用于針對復(fù)雜圖元進(jìn)行解除組合以將所述復(fù)雜圖元分解為多個(gè)基本圖 J L· 〇
[0021] 其中，還包括行為解析模塊，所述行為機(jī)械模塊通過行為解析函數(shù)來解析每一個(gè) 基本圖元上綁定的行為，并生成解析后的預(yù)覽圖。
[0022] 其中，所述行為解析模執(zhí)行以下操作：
[0023] 獲取需要預(yù)覽的SVG圖并添加到頁面中；
[0024]根據(jù)接收到的控制指令以控制對所述SVG圖進(jìn)行相應(yīng)操作，具體包括：
[0025] 根據(jù)接收到的鼠標(biāo)按下、移動(dòng)、彈起事件，對所述SVG圖進(jìn)行相應(yīng)的拖動(dòng)操作；
[0026] 根據(jù)接收到的鼠標(biāo)滾動(dòng)事件，對所述SVG圖進(jìn)行縮放；
[0027] 根據(jù)接收到的放大、縮小、原圖、適應(yīng)屏幕控制指令，對所述SVG圖進(jìn)行相應(yīng)的縮 放、原圖展不、適應(yīng)屏蒂；
[0028]根據(jù)接收到的SVG元素及其綁定的行為，遍歷實(shí)時(shí)接口并綁定tool tip，以移入圖 元展示綁定信息；
[0029] 遍歷實(shí)時(shí)接口以獲取設(shè)備名稱、測點(diǎn)名稱、數(shù)據(jù)類型，并發(fā)送數(shù)據(jù)；
[0030] 在成功返回?cái)?shù)據(jù)后，遍歷實(shí)時(shí)接口，以獲取每一實(shí)時(shí)接口的行為，然后對行為進(jìn)行 解析；
[0031] 遍歷柱狀圖趨勢圖接口，發(fā)送數(shù)據(jù)，數(shù)據(jù)成功返回后，解析柱圖和曲線。
[0032] 其中，所述在成功返回?cái)?shù)據(jù)后，遍歷實(shí)時(shí)接口，以獲取每一實(shí)時(shí)接口的行為，然后 對行為進(jìn)行解析，具體包括：
[0033] 在獲取到數(shù)據(jù)后，判斷該行為是否為圖形元件屬性或通用事件接口；如果是圖形 元件屬性則將該數(shù)據(jù)還原為原始實(shí)時(shí)數(shù)據(jù);如果是通用事件接口則根據(jù)預(yù)設(shè)的該圖元事件 綁定相應(yīng)的處理方法;如果是其他行為，則根據(jù)原始實(shí)時(shí)數(shù)據(jù)及該行為數(shù)據(jù)處理接口內(nèi)容， 對原始實(shí)時(shí)數(shù)據(jù)進(jìn)行處理，并將處理結(jié)果即數(shù)據(jù)映射結(jié)果對基本圖元進(jìn)行相應(yīng)操作，實(shí)現(xiàn) 行為解析；
[0034] 其中所述操作包括但不限于:設(shè)置圖元的CSS屬性、設(shè)置圖元的transform矩陣。 [0035]同時(shí)，本發(fā)明實(shí)施例還提出了一種利用如前任一項(xiàng)所述的在線監(jiān)測的圖形組態(tài)系 統(tǒng)進(jìn)行圖形組態(tài)的方法，包括：
[0036]利用SVG的基本圖元構(gòu)建出復(fù)雜圖元;其中所述SVG的基本圖元包括以下的至少一 種:直線、矩形、圓、橢圓、文本、路徑、折線、多邊形；
[0037]構(gòu)建基本圖元與行為之間的關(guān)聯(lián)，其中所述行為包括以下的至少一種：用于獲取 實(shí)時(shí)數(shù)據(jù)的圖形元件屬性、通用事件接口、數(shù)據(jù)展示、邊框顏色、填充、透明度、虛線、旋轉(zhuǎn)、 縮放、平移、路徑、柱狀圖、趨勢圖；其中所述圖形元件屬性包括:設(shè)備名稱、測試點(diǎn)名稱、數(shù) 據(jù)類型;其中所述通用事件接口包括:點(diǎn)擊、移入、移出、按下、彈起、移動(dòng)；
[0038] 根據(jù)構(gòu)建出的圖元與行為的關(guān)聯(lián)，根據(jù)接收到的行為數(shù)據(jù)生成SVG圖，并根據(jù)實(shí)時(shí) 行為數(shù)據(jù)對SVG圖進(jìn)行實(shí)時(shí)更新。
[0039] 本發(fā)明的上述技術(shù)方案的有益效果如下:本發(fā)明實(shí)施例提出了一種在線監(jiān)測的圖 形組態(tài)方法及系統(tǒng)，靈活的運(yùn)用了 SVG的各種特性直觀的實(shí)時(shí)顯示出各個(gè)部件的工作狀態(tài)， 且具有很好的兼容性并能夠降低系統(tǒng)負(fù)荷。
【附圖說明】
[0040] 圖1為本發(fā)明實(shí)施例的控制隔離開關(guān)閉合的圖元行為綁定的示意圖；
[0041] 圖2為本發(fā)明實(shí)施例的綁定行為接口-圖形元件屬性原理示意圖；
[0042]圖3為本發(fā)明實(shí)施例的綁定行為接口-通用事件接口的原理示意圖；
[0043]圖4為本發(fā)明實(shí)施例的綁定行為接口-數(shù)據(jù)展示單元的原理示意圖；
[0044] 圖5為本發(fā)明實(shí)施例的綁定行為接口-數(shù)據(jù)展示單元的原理示意圖；
[0045] 圖6為本發(fā)明實(shí)施例的綁定行為接口-柱狀圖的原理示意圖；
[0046] 圖7為本發(fā)明實(shí)施例的綁定行為接口-趨勢圖的原理示意圖；
[0047]圖8為本發(fā)明實(shí)施例的SVG解析過程的流程圖；
[0048] 圖9為水庫圖；
[0049] 圖10為圖9的水庫圖的解析圖。
【具體實(shí)施方式】
[0050] 為使本發(fā)明要解決的技術(shù)問題、技術(shù)方案和優(yōu)點(diǎn)更加清楚，下面將結(jié)合附圖及具 體實(shí)施例進(jìn)行詳細(xì)描述。
[0051] 本發(fā)明實(shí)施例提出了一種在線監(jiān)測的圖形組態(tài)系統(tǒng)，包括：
[0052] 圖元構(gòu)建模塊，用于基于可縮放矢量圖形即SVG的基本圖元構(gòu)建出復(fù)雜圖元；
[0053] 圖元行為構(gòu)建模塊，用于構(gòu)建基本圖元與行為之間的關(guān)聯(lián)，并根據(jù)構(gòu)建出的圖元 與行為的關(guān)聯(lián)，根據(jù)接收到的行為數(shù)據(jù)生成SVG圖，并根據(jù)實(shí)時(shí)行為數(shù)據(jù)對SVG圖進(jìn)行實(shí)時(shí) 更新；
[0054] 其中所述SVG的基本圖元包括以下的至少一種:直線、矩形、圓、橢圓、文本、路徑、 折線、多邊形；
[0055] 其中所述行為包括以下的至少一種：用于獲取實(shí)時(shí)數(shù)據(jù)的圖形元件屬性、通用事 件接口、數(shù)據(jù)展示、邊框顏色、填充、透明度、虛線、旋轉(zhuǎn)、縮放、平移、路徑、柱狀圖、趨勢圖； 其中所述圖形元件屬性包括:設(shè)備名稱、測試點(diǎn)名稱、數(shù)據(jù)類型；其中所述通用事件接口包 括:鼠標(biāo)的點(diǎn)擊、移人、移出、按下、彈起、移動(dòng)。
[0056] 具體的，上述的圖元行為構(gòu)建模塊，能夠?qū)?3種行為構(gòu)建出與圖元之間的關(guān)聯(lián)，這 13種行為包括：
[0057]圖形元件屬性(設(shè)備名稱、測試點(diǎn)名稱、數(shù)據(jù)類型）、通用事件接口（鼠標(biāo)的點(diǎn)擊、移 入、移出、按下、彈起、移動(dòng)）、數(shù)據(jù)展示、邊框顏色、填充、透明度、虛線、旋轉(zhuǎn)、縮放、平移、路 徑、柱狀圖、趨勢圖。
[0058]具體的，如圖2所示的為圖形元件屬性的一個(gè)具體例子，其包括設(shè)備名稱device_ name、測點(diǎn)名稱tag、數(shù)據(jù)類型typ，以獲取實(shí)時(shí)數(shù)據(jù)。如圖3所示的為通用事件接口的一個(gè)具 體例子，包含以下五個(gè)事件：點(diǎn)擊、移入、移出、按下、彈起、移動(dòng);該通用事件接口用于對圖 元事件綁定相應(yīng)的處理方法。
[0059] 具體的，如圖3所示的為通用事件接□包含:點(diǎn)擊、移入、移出、按下、彈起、移動(dòng)，用 于對圖元事件綁定相應(yīng)方法。
[0060] 其中所述數(shù)據(jù)展示包括:將圖形元件屬性的原始數(shù)據(jù)映射為預(yù)設(shè)字段，或是對原 始數(shù)據(jù)進(jìn)行處理后得到的處理后數(shù)據(jù)并將處理后數(shù)據(jù)映射為預(yù)設(shè)字段，或通過匿名函數(shù)根 據(jù)預(yù)設(shè)條件對原始數(shù)據(jù)進(jìn)行判斷以映射為預(yù)設(shè)字段。如圖4、圖5所示的為數(shù)據(jù)展示的一個(gè) 具體例子，圖4所示的數(shù)據(jù)值#value#是表示能夠直接獲取圖形元件屬性對應(yīng)的原始數(shù)據(jù)； 舉例來說，如果數(shù)據(jù)值#value#為0則文本映射為"發(fā)電"、如果數(shù)據(jù)值#value#為1則文本映 射為"抽水"。而如圖5所示的則為綁定接口，通過匿名函數(shù)根據(jù)預(yù)設(shè)條件對原始數(shù)據(jù)進(jìn)行判 斷；如果原始數(shù)據(jù)在[20,40]范圍內(nèi)則映射為1，否則映射為2;而映射值又可以對應(yīng)不同的 文本，例如映射值為0則文本映射為發(fā)電，如果映射值為1則文本映射為抽水，如果映射值為 2則文本映射為檢修。
[0061] 具體的，邊框顏色、填充、透明度、虛線(一次行為)這幾個(gè)行為通過設(shè)置圖元CSS屬 性進(jìn)行解析。具體包括;邊框顏色及填充數(shù)據(jù)映射將數(shù)據(jù)處理中可能的所有結(jié)果映射為顏 色，如green、#000000、reb( 100，200，90);透明度數(shù)據(jù)映射將數(shù)據(jù)處理中可能的所有結(jié)果映 射為[0，1]之間的數(shù)字;虛線(一次行為)數(shù)據(jù)映射將數(shù)據(jù)處理中可能的所有結(jié)果映射為數(shù) 字，表示虛線段長度。
[0062]具體的，旋轉(zhuǎn)、縮放、平移（一次行為)這幾個(gè)行為通過設(shè)置圖元transform矩陣進(jìn) 行解析。與邊框顏色、填充、透明度、虛線(一次行為)這幾個(gè)行為這幾個(gè)行為相同的，也將這 些行為相應(yīng)的映射為數(shù)字，其中旋轉(zhuǎn)數(shù)據(jù)映射將數(shù)據(jù)處理中可能的所有結(jié)果映射為[-180， 180]之間的數(shù)字，表示旋轉(zhuǎn)角度;縮放數(shù)據(jù)映射將數(shù)據(jù)處理中可能的所有結(jié)果映射為數(shù)字， 表示縮放倍數(shù);平移（一次行為）將數(shù)據(jù)處理中可能的所有結(jié)果映射為(x，y)坐標(biāo)形式；如 (100，100)，表示向下移動(dòng)ΙΟΟρχ、向右移動(dòng)ΙΟΟρχ。這幾個(gè)行為通過設(shè)置圖元transform矩陣 進(jìn)行解析。
[0063] 其中，如圖6、圖7所示的，柱狀圖、趨勢圖都各自包括主題、標(biāo)題、圖例、數(shù)據(jù)，用于 將圖元根據(jù)綁定信息生成柱圖和曲線圖。
[0064] 其中，所述圖元行為構(gòu)建模塊是針對基本圖元進(jìn)行行為綁定。如果對象為復(fù)雜圖 元，則可以通過解除組合的方式將其分解為多個(gè)基本圖元，然后再進(jìn)行行為綁定;或是人工 選取每一基本圖元并進(jìn)行行為綁定。如圖1所示的為控制隔離開關(guān)閉合的圖元行為綁定，隔 離開關(guān)是一個(gè)由多個(gè)基本圖元組合而成的復(fù)雜圖元，可以通過解除組合的方式形成多個(gè)基 本圖元，或是通過人工方式逐一選擇基本圖元;然后針對每一基本圖元分別綁定行為。這樣 綁定的行為是在每一個(gè)基本圖元上而不是在整個(gè)隔離開關(guān)上。
[0065] 行為解析模塊，通過行為解析函數(shù)來解析每一個(gè)基本圖元上綁定的行為，并生成 解析后的預(yù)覽圖。具體的，如圖8所示，執(zhí)行以下操作：
[0066] 1、獲取需要預(yù)覽的SVG內(nèi)容，添加到頁面中；
[0067] 2、監(jiān)聽鼠標(biāo)按下、移動(dòng)、彈起事件，實(shí)現(xiàn)鼠標(biāo)拖動(dòng)SVG圖；
[0068] 3、監(jiān)聽鼠標(biāo)滾動(dòng)事件，滾動(dòng)鼠標(biāo)實(shí)現(xiàn)SVG縮放；
[0069] 4、頁面添加放大、縮小、原圖、適應(yīng)屏蒂按鈕，實(shí)現(xiàn)SVG縮放、原圖展不、適應(yīng)屏蒂；
[0070] 5、獲取SVG元素及其綁定的行為(實(shí)時(shí)接口及柱狀圖趨勢圖接口）；
[0071] 6、遍歷實(shí)時(shí)接口，綁定tooltip，實(shí)現(xiàn)鼠標(biāo)移入圖元展示綁定信息；
[0072] 7、遍歷實(shí)時(shí)接口，獲取設(shè)備名稱、測點(diǎn)名稱、數(shù)據(jù)類型，發(fā)送數(shù)據(jù)；
[0073] 8、成功返回?cái)?shù)據(jù)后，遍歷實(shí)時(shí)接口，以獲取每一實(shí)時(shí)接口的行為，然后對行為進(jìn)行 解析；
[0074] 9、遍歷柱狀圖趨勢圖接口，發(fā)送數(shù)據(jù)，數(shù)據(jù)成功返回后，解析柱圖和曲線。
[0075] 其中前述的8中對行為進(jìn)行解析具體包括:在獲取到數(shù)據(jù)后，判斷該行為是否為圖 形元件屬性或通用事件接口；如果是圖形元件屬性則將該數(shù)據(jù)還原為原始實(shí)時(shí)數(shù)據(jù);如果 是通用事件接口則根據(jù)預(yù)設(shè)的該圖元事件綁定相應(yīng)的處理方法;如果是其他行為，則根據(jù) 原始實(shí)時(shí)數(shù)據(jù)及該行為數(shù)據(jù)處理接口內(nèi)容，對原始實(shí)時(shí)數(shù)據(jù)進(jìn)行處理，并將處理結(jié)果即數(shù) 據(jù)映射結(jié)果對基本圖元進(jìn)行設(shè)置CSS屬性、transform矩陣等操作，實(shí)現(xiàn)行為解析。
[0076] -下通過一個(gè)具體的例子對本發(fā)明實(shí)施例的系統(tǒng)和方法進(jìn)行詳細(xì)說明。
[0077] 本實(shí)施例用于實(shí)時(shí)在線顯示水庫水位變化、電機(jī)狀態(tài)、水流狀態(tài)、閥門狀態(tài)等參數(shù) 以進(jìn)行實(shí)時(shí)在線監(jiān)測，其實(shí)時(shí)數(shù)據(jù)來自后臺服務(wù)產(chǎn)生的模擬數(shù)據(jù)，且需要顯示的包括： [0078] 1、顯示機(jī)組上下庫水位的值；
[0079] 2、顯示球閥開度、閥門狀態(tài)、電機(jī)狀態(tài)、電機(jī)轉(zhuǎn)速；
[0080] 3、顯示閥門顏色及移動(dòng)，具體包括：當(dāng)閥門狀態(tài)為全開時(shí)，圖中的閥門圖標(biāo)顯示綠 色，向上移動(dòng)至全開位置；當(dāng)狀態(tài)為半開時(shí)，圖中的閥門圖標(biāo)顯示黃色，并顯示為向上移動(dòng) 至半開位置;當(dāng)狀態(tài)為關(guān)閉時(shí)，圖中的閥門圖標(biāo)顯示紅色，并顯示為不進(jìn)行移動(dòng)；
[0081] 4、顯示上下庫水位動(dòng)態(tài)變化，具體包括：當(dāng)水位上升時(shí)，用于表示水位的圖標(biāo)（例 如顯示為液面線)上移;水位下降時(shí)，用于表示水位的圖標(biāo)下移；
[0082] 5、根據(jù)電機(jī)狀態(tài)顯示電機(jī)顏色及轉(zhuǎn)動(dòng)方向變化，具體包括：當(dāng)電機(jī)停運(yùn)時(shí)，用于表 示電機(jī)的圖標(biāo)顯示為綠色且不轉(zhuǎn)動(dòng)；當(dāng)電機(jī)檢修時(shí)，用于表示電機(jī)的圖標(biāo)顯示為灰色且不 轉(zhuǎn)；當(dāng)電機(jī)發(fā)電時(shí)，用于表示電機(jī)的圖標(biāo)顯示為紅色且向右轉(zhuǎn)；當(dāng)電機(jī)抽水時(shí)，用于表示電 機(jī)的圖標(biāo)顯示為藍(lán)色且向左轉(zhuǎn)
[0083] 6、根據(jù)電機(jī)狀態(tài)顯示管道水流，具體包括：當(dāng)電機(jī)停運(yùn)或檢修時(shí)，用于表示管道內(nèi) 水流的圖標(biāo)靜止；當(dāng)電機(jī)發(fā)電時(shí)，用于表示管道內(nèi)水流的圖標(biāo)顯示水向上流；當(dāng)電機(jī)抽水 時(shí)，用于表示管道內(nèi)水流的圖標(biāo)顯示水向下流。
[0084]為了實(shí)現(xiàn)上述的實(shí)時(shí)在線監(jiān)測的圖形顯示，本發(fā)明實(shí)施例的工作流程為：
[0085]步驟S1:繪制出水庫圖，如圖9所示的即為一種水庫圖；
[0086] 步驟S2:對圖元進(jìn)行綁定，具體包括：
[0087]上下庫水位、球閥開度、閥門狀態(tài)、電機(jī)狀態(tài)、電機(jī)轉(zhuǎn)速綁定數(shù)據(jù)展示單元，例如1、 2號機(jī)組上庫水位綁定方法：
[0089]閥門顏色綁定填充，例如1、2號機(jī)組上庫閥門：
[0091 ]閥門移動(dòng)綁定平移一次動(dòng)作，例如1、2號機(jī)組上庫閥門：
[0092]

[0094] 上下庫水位動(dòng)態(tài)變化通過綁定路徑連續(xù)動(dòng)作實(shí)現(xiàn)，例如：[0095]
[0096]電機(jī)顏色綁定填充，例如：[0097]
[0098]電機(jī)轉(zhuǎn)動(dòng)綁定平移連續(xù)動(dòng)作
[0100] 管道水流綁定虛線連續(xù)動(dòng)作
[0101]
[0102] S4預(yù)覽，在瀏覽器輸入預(yù)覽地址，查看解析后的SVG文件，該SVG文件如圖10所示 的。該頁面能夠監(jiān)聽鼠標(biāo)滾動(dòng)事件，鼠標(biāo)向上滾動(dòng)實(shí)現(xiàn)SVG放大，鼠標(biāo)向下滾動(dòng)實(shí)現(xiàn)SVG縮 ??；同時(shí)在加載SVG的界面中設(shè)有放大、縮小、原始大小、適應(yīng)屏幕四個(gè)按鈕以控制SVG縮放。 同時(shí)，當(dāng)鼠標(biāo)移動(dòng)到半丁的圖元時(shí)，能夠顯示出該圖元對應(yīng)的信息。例如當(dāng)鼠標(biāo)停留在用于 表示電機(jī)狀態(tài)的圖標(biāo)上時(shí)，通過對話窗口顯示出電機(jī)的參數(shù);如圖1 〇所示，當(dāng)鼠標(biāo)放在最右 側(cè)的用于表示電機(jī)的圖標(biāo)上時(shí)，以浮動(dòng)窗口的形式將電機(jī)的參數(shù)數(shù)值都顯示出來。這樣既 可以通過SVG圖的方式直觀顯示出各個(gè)部件的工作參數(shù)，又能具體顯示每個(gè)部件的工作參 數(shù)。同時(shí)SVG圖具有
[0103] 1、顯示機(jī)組上下庫水位的值；
[0104] 2、顯示球閥開度、閥門狀態(tài)、電機(jī)狀態(tài)、電機(jī)轉(zhuǎn)速；
[0105] 3、顯示閥門顏色及移動(dòng)，具體包括：當(dāng)閥門狀態(tài)為全開時(shí)，圖中的閥門圖標(biāo)顯示綠 色，向上移動(dòng)至全開位置；當(dāng)狀態(tài)為半開時(shí)，圖中的閥門圖標(biāo)顯示黃色，并顯示為向上移動(dòng) 至半開位置;當(dāng)狀態(tài)為關(guān)閉時(shí)，圖中的閥門圖標(biāo)顯示紅色，并顯示為不進(jìn)行移動(dòng)；
[0106] 4、顯示上下庫水位動(dòng)態(tài)變化，具體包括：當(dāng)水位上升時(shí)，用于表示水位的圖標(biāo)（例 如顯示為液面線)上移;水位下降時(shí)，用于表示水位的圖標(biāo)下移；
[0107] 5、根據(jù)電機(jī)狀態(tài)顯示電機(jī)顏色及轉(zhuǎn)動(dòng)方向變化，具體包括：當(dāng)電機(jī)停運(yùn)時(shí)，用于表 示電機(jī)的圖標(biāo)顯示為綠色且不轉(zhuǎn)動(dòng)；當(dāng)電機(jī)檢修時(shí)，用于表示電機(jī)的圖標(biāo)顯示為灰色且不 轉(zhuǎn)；當(dāng)電機(jī)發(fā)電時(shí)，用于表示電機(jī)的圖標(biāo)顯示為紅色且向右轉(zhuǎn)；當(dāng)電機(jī)抽水時(shí)，用于表示電 機(jī)的圖標(biāo)顯示為藍(lán)色且向左轉(zhuǎn)
[0108] 6、根據(jù)電機(jī)狀態(tài)顯示管道水流，具體包括：當(dāng)電機(jī)停運(yùn)或檢修時(shí)，用于表示管道內(nèi) 水流的圖標(biāo)靜止；當(dāng)電機(jī)發(fā)電時(shí)，用于表示管道內(nèi)水流的圖標(biāo)顯示水向上流；當(dāng)電機(jī)抽水 時(shí)，用于表示管道內(nèi)水流的圖標(biāo)顯示水向下流。
[0109]以上所述是本發(fā)明的優(yōu)選實(shí)施方式，應(yīng)當(dāng)指出，對于本技術(shù)領(lǐng)域的普通技術(shù)人員 來說，在不脫離本發(fā)明所述原理的前提下，還可以作出若干改進(jìn)和潤飾，這些改進(jìn)和潤飾 也應(yīng)視為本發(fā)明的保護(hù)范圍。
【主權(quán)項(xiàng)】
1. 一種在線監(jiān)測的圖形組態(tài)系統(tǒng)，其特征在于，包括： 圖元構(gòu)建模塊，用于基于可縮放矢量圖形即SVG的基本圖元構(gòu)建出復(fù)雜圖元； 圖元行為構(gòu)建模塊，用于構(gòu)建基本圖元與行為之間的關(guān)聯(lián)，并根據(jù)根據(jù)構(gòu)建出的圖元 與行為的關(guān)聯(lián)，根據(jù)接收到的行為數(shù)據(jù)生成SVG圖，并根據(jù)實(shí)時(shí)行為數(shù)據(jù)對SVG圖進(jìn)行實(shí)時(shí) 更新； 其中所述SVG的基本圖元包括以下的至少一種:直線、矩形、圓、橢圓、文本、路徑、折線、 多邊形； 其中所述行為包括以下的至少一種：用于獲取實(shí)時(shí)數(shù)據(jù)的圖形元件屬性、通用事件接 口、數(shù)據(jù)展示、邊框顏色、填充、透明度、虛線、旋轉(zhuǎn)、縮放、平移、路徑、柱狀圖、趨勢圖；其中 所述圖形元件屬性包括:設(shè)備名稱、測試點(diǎn)名稱、數(shù)據(jù)類型;其中所述通用事件接口包括：鼠 標(biāo)的點(diǎn)擊、移入、移出、按下、彈起、移動(dòng)。2. 根據(jù)權(quán)利要求1所述的在線監(jiān)測的圖形組態(tài)系統(tǒng)，其特征在于，所述圖元行為構(gòu)建模 塊包括： 圖形元件屬性構(gòu)建單元，用于從實(shí)時(shí)數(shù)據(jù)中獲取圖形元件屬性中的設(shè)備名稱、測試點(diǎn) 名稱、數(shù)據(jù)類型； 通用事件接口構(gòu)建單元，用于對通用事件接口包括的點(diǎn)擊、移入、移出、按下、彈起、移 動(dòng)動(dòng)作，分別綁定對應(yīng)的處理步驟； 數(shù)據(jù)展示構(gòu)建單元，用于將圖形元件屬性映射為預(yù)設(shè)字段;具體包括： 將圖形元件屬性的原始數(shù)據(jù)映射為預(yù)設(shè)字段，或 將圖形元件屬性的原始數(shù)據(jù)進(jìn)行預(yù)設(shè)處理后得到的數(shù)據(jù)映射為預(yù)設(shè)字段，或 將圖形元件屬性的原始數(shù)據(jù)通過匿名函數(shù)根據(jù)預(yù)設(shè)條件對原始數(shù)據(jù)進(jìn)行判斷以映射 為預(yù)設(shè)字段； 圖元CSS屬性構(gòu)建單元，用于對邊框顏色、填充、透明度、虛線，通過圖元CSS屬性進(jìn)行解 析以映射為預(yù)設(shè)字段； 圖元transform矩陣構(gòu)建單元，用于對旋轉(zhuǎn)、縮放、平移通過設(shè)置圖元transform矩陣進(jìn) 行解析以映射為預(yù)設(shè)字段； 柱狀圖和趨勢圖構(gòu)建單元，用于根據(jù)柱狀圖和趨勢圖的主題、標(biāo)題、圖例、數(shù)據(jù)，將圖 元\生成柱圖和曲線圖。3. 根據(jù)權(quán)利要求2所述的在線監(jiān)測的圖形組態(tài)系統(tǒng)，其特征在于，所述圖元行為構(gòu)建模 塊還包括： 解除單元，用于針對復(fù)雜圖元進(jìn)行解除組合以將所述復(fù)雜圖元分解為多個(gè)基本圖元。4. 根據(jù)權(quán)利要求1所述的在線監(jiān)測的圖形組態(tài)系統(tǒng)，其特征在于，還包括行為解析模 塊，所述行為機(jī)械模塊通過行為解析函數(shù)來解析每一個(gè)基本圖元上綁定的行為，并生成解 析后的預(yù)覽圖。5. 根據(jù)權(quán)利要求4所述的在線監(jiān)測的圖形組態(tài)系統(tǒng)，其特征在于，所述行為解析模執(zhí)行 以下操作： 獲取需要預(yù)覽的SVG圖并添加到頁面中； 根據(jù)接收到的控制指令以控制對所述SVG圖進(jìn)行相應(yīng)操作，具體包括： 根據(jù)接收到的鼠標(biāo)按下、移動(dòng)、彈起事件，對所述SVG圖進(jìn)行相應(yīng)的拖動(dòng)操作； 根據(jù)接收到的鼠標(biāo)滾動(dòng)事件，對所述SVG圖進(jìn)行縮放； 根據(jù)接收到的放大、縮小、原圖、適應(yīng)屏幕控制指令，對所述SVG圖進(jìn)行相應(yīng)的縮放、原 圖展不、適應(yīng)屏蒂； 根據(jù)接收到的SVG元素及其綁定的行為，遍歷實(shí)時(shí)接口并綁定tool tip，以移入圖元展 示綁定信息； 遍歷實(shí)時(shí)接口以獲取設(shè)備名稱、測點(diǎn)名稱、數(shù)據(jù)類型，并發(fā)送數(shù)據(jù)； 在成功返回?cái)?shù)據(jù)后，遍歷實(shí)時(shí)接口，以獲取每一實(shí)時(shí)接口的行為，然后對行為進(jìn)行解 析； 遍歷柱狀圖趨勢圖接口，發(fā)送數(shù)據(jù)，數(shù)據(jù)成功返回后，解析柱圖和曲線。6. 根據(jù)權(quán)利要求5所述的在線監(jiān)測的圖形組態(tài)系統(tǒng)，其特征在于，所述在成功返回?cái)?shù)據(jù) 后，遍歷實(shí)時(shí)接口，以獲取每一實(shí)時(shí)接口的行為，然后對行為進(jìn)行解析，具體包括： 在獲取到數(shù)據(jù)后，判斷該行為是否為圖形元件屬性或通用事件接口；如果是圖形元件 屬性則將該數(shù)據(jù)還原為原始實(shí)時(shí)數(shù)據(jù);如果是通用事件接口則根據(jù)預(yù)設(shè)的該圖元事件綁定 相應(yīng)的處理方法;如果是其他行為，則根據(jù)原始實(shí)時(shí)數(shù)據(jù)及該行為數(shù)據(jù)處理接口內(nèi)容，對原 始實(shí)時(shí)數(shù)據(jù)進(jìn)行處理，并將處理結(jié)果即數(shù)據(jù)映射結(jié)果對基本圖元進(jìn)行相應(yīng)操作，實(shí)現(xiàn)行為 解析； 其中所述操作包括但不限于:設(shè)置圖元的CSS屬性、設(shè)置圖元的transform矩陣。7. -種利用如權(quán)利要求1-6任一項(xiàng)所述的在線監(jiān)測的圖形組態(tài)系統(tǒng)進(jìn)行圖形組態(tài)的方 法，其特征在于，包括： 利用SVG的基本圖元構(gòu)建出復(fù)雜圖元；其中所述SVG的基本圖元包括以下的至少一種： 直線、矩形、圓、橢圓、文本、路徑、折線、多邊形； 構(gòu)建基本圖元與行為之間的關(guān)聯(lián)，其中所述行為包括以下的至少一種：用于獲取實(shí)時(shí) 數(shù)據(jù)的圖形元件屬性、通用事件接口、數(shù)據(jù)展示、邊框顏色、填充、透明度、虛線、旋轉(zhuǎn)、縮放、 平移、路徑、柱狀圖、趨勢圖；其中所述圖形元件屬性包括:設(shè)備名稱、測試點(diǎn)名稱、數(shù)據(jù)類 型;其中所述通用事件接口包括:點(diǎn)擊、移入、移出、按下、彈起、移動(dòng)。
【文檔編號】G06F9/44GK106095471SQ201610702852
【公開日】2016年11月9日
【申請日】2016年8月22日
【發(fā)明人】張志學(xué), 潘玥, 姜雪菲, 李喆, 郭凡, 郭少川
【申請人】國家電網(wǎng)公司, 北京許繼電氣有限公司