專刊內文

當前位置:首頁>專刊分享>內文

瀏覽次數 : 2593



 

Metro數位儀表板

訊光科技 / 蘇文瑞 

什麼是Metro數位儀表板

數位儀表板,是以使用者個人為中心的資訊服務平台,提供企業組織各單位、系統電子化服務整合串接介面,以使用者個人資訊需求為導向,主動提供個人化的專屬資訊。

導入數位儀表板的原因,是為了避免企業內部因為資訊分散於不同平台不同子系統中,使用者取得各種訊息需耗費較多的選單、頁面點擊,造成訊息傳達不易與時間浪費。

例如個人工作、待辦事項、流程單據,或是企業決策分析、營運資源資訊,還有與個人有關的KPI指標,業績達成率等資訊,都可以整合在數位儀表板之中,透過適當的控制項呈現。

數位儀表板,就像一般企業入口網站EIP一樣,可以將企業的各項個人化資訊整合,因此無論是在任何時間,使用者都可以透過電腦瀏覽器,或是行動裝置瀏覽器等裝置,取得個人事項、公司公告、企業資源管理資訊等內容。而與EIP不同的是,一般EIP資訊呈現多以grid方式,而Metro數位儀表板,則可以搭配表單、grid、圖表等控制項設計。


數位儀表板的特性

MetroUI / Metro Style一詞,是微軟所開發的新型態使用者介面,其設計被用於微軟PC作業系統、Windows Phone行動裝置、XBox 360等產品。





雖然為了避免混淆,微軟曾經取消Metro一詞,改用Windows 8 Style UI或是Modern UI名稱代替,但是目前微軟官方網站最新的文件仍然大量出現Metro一詞。因此我們延續微軟的方式,使用Metro命名。


Metro數位儀表板的種類



DataForm
以表單方式呈現內容,多筆資料時可上下筆切換。

統計圖表
顯示折線圖、圓餅圖、長條圖內容。

DataGrid
顯示條列式內容,適合訊息、工作事項等資訊。

文字輪播
多行文字捲動顯示,類似一般網站垂直跑馬燈功能。

圖片輪播
多張固定圖片捲動顯示。

儀表板
以儀表板方式呈現數字,並可依照不同條件改變數字與儀表板顏色。


如何製作Metro數位儀表板

一、JQMerto控制項
1. JQScriptManager上設定UseMetro屬性為True。



2. JQMetro控制項,新增了『Edit』選項,取代原本快速編輯區的『Export』功能。



3.按下編輯後,選單功能上有Style與StyleObject兩個新的設定項目。



4.設定項style為下拉列表,選擇要在metro中呈現的專案類別,有'None'(預設為None,就是原來一般Menu項目),'DataGrid','DataForm','Chart'(統計圖),'Dashboard'(儀表),'Image'(圖檔輪播),'Text'(文字輪播),StyleObject直接對應上方選擇的類別選擇設計畫面中已有的控件,值填寫的是控件id,點擊右邊的按鈕會彈出選擇控制項框。

5. 如果設定的是dataform,datagrid,chart或者dashboard,需要根據實際使用大小更改Size。

6.在設定中需要設定的來源控制項設計與平時設計一模一樣,dataform的設計請參考AlwaysReadOnly=True的設計方式,dashboard儀錶板控制項和rotator輪播控制項會在之後介紹,在設定時也是設定相對應的控制項id。

成果:



二、輪播控制項JQRotator

1.請從工具箱JQClientTools拖拉出JQRotator控制項到網頁畫面中。



2.設定屬性,可參考範例。



3.屬性說明如下:
(1)RemoteName和TableName決定輪播數據的來源。
(2)FieldName決定輪播數據來源於哪個欄位。
(3)RotatorType決定輪播類型,分為text和image兩種。
(4)ImageFolder是當RotatorType為image時指定圖檔來源相對於網站根節點子資料夾的相對路徑,比如圖片存放在網站目錄下的Files檔夾中,那麼請在這個屬性中設定Files(此設定同上傳下載設定一致)。
(5)OnBeforeLoad是在輪播開始之前的事件,參數是options,除了以上所有的屬性在options中(首字母小寫)之外還有額外的屬性whereString,屬性可以對數據源過濾,屬性都可以通過(參數名.屬性名)直接修改。
(6)MenuID設定表單在EEPManager上的MenuID。


成果:



三、儀表板控制項JQDashBoard

1.請從工具箱JQChartTools拖拉出JQDashBoard。



2.JQScriptManager的UseChartJS請設定為True。



3.設定JQDashBoard屬性。



4.屬性說明如下:
(1)Label:文字說明。
(2)LabelColor:文字顏色。
(3)LabelHeightAdjust:文字對於下基準線的上下偏移量可以設定正負值。
(4)Ticks: 尺規刻度值的集合。
(5)TickColor:尺規文字顏色。
(6)Background: 儀錶板背景色。
(7)Intervals:刻度盤中間分割劃分的界限點集合。
(8) IntervalColors:根據Intervals區分開的界線點繪畫顏色。
(9)RingColor:邊框顏色。
(10) RingWidth:邊框厚度,預設是空(null)。
(11)Value: 指針對應的值。
(12)RenderObjectID:儀錶板要render到的對象。
(13)Width,height:儀錶板寬高。
(14
)OnBeforeLoad:顯示前執行的事件,有參數options,以上所有屬性都可以修改。

成果:




Metro數位儀表板的應用

數位儀表板,除了在頁面載入時給儀表板指針數值外,也可以透過計時器,每隔一段時間動態從後端更新最新數值到前端,不需要使用者重複的重整網頁,就能取得最新資訊。

程式碼片段:



效果:
每隔三秒,儀表板數字自動更新,若超過警示數值,則以紅色顯示。




結論


以EEP企業儀表板工具,可以迅速建立各種企業資訊整合功能,促進企業內部流程改造與橫向資訊整合。並透過訊息主動提供的機制,促進跨部門、單位多元資訊的整合與互通,達到資源公用共享的目的,提昇企業營運效能。

並且可以透過各種不同的Metro儀表板元件,呈現不同一般EIP條列式的資訊,以視覺化、圖表的方式顯示,讓使用者更方便的了解企業多樣化的訊息。