本文由葡萄城技術團隊于博客園原創并首發
轉載請注明出處：葡萄城官網，葡萄城為開發者提供專業的開發工具、解決方案和服務，賦能開發者，

專案想做資料可視化，想同時在PC端、手機端查看資料怎么辦？業務主要關心的資料包括：銷售資料、業績達成、同比、環比，各產品銷售情況及潛客商機、未來收入預測等資料，最好附加人力資源的管理資訊，對業務和人員進行全面掌控，讓一切資訊都可以更加高效查看，同時，相關內容可在移動端方便查看，不需要問IT人員要才能看到，

既然用戶的專案系統有這樣的需求，作為開發主力的助理，系統必須得安排，實作最好也是無需親自動手，接下來為大家展示內容的實作，

移動端資料展示的必要性

移動端服務的第一用戶，是領導，業務人員可以在任意場所，如會場、出差途中可以隨時查看當前業務運轉的資料，不論平板、電腦、手機；同時為了讓決策人員，管理人員，業務人員等使用更加方便，還可集成到微信、釘釘等APP中，實作移動辦公，

移動端資料展示開發難點

移動端螢屏尺寸不一致，一次模板設計無法多次復用，并且要盡可能保證在Web端、客戶端，以及原生IOS 和Android 應用開發功能一致，避免為不同平臺維護多套模板而導致維護成本大，
資料呈現能力受限，移動端報表布局樣式特殊，需要豐富的可視化元素，布局靈活多樣，支持大資料量實時展現，避免明細資料展示，
性能及資料處理能力要求高，大多數控制元件為B/S端，大都依托強大的服務器資源增強性能，但在手機端渲染需要滿足用戶的更低的容忍度，移動端網路環境復雜，無法適應離線環境正常加載，無法快速集成到即時通訊小程式，如微信、釘釘等，

（圖片來源于Wyn）

不搜索不知道，通過搜索才了解到，原來移動端要查看資料，查看業務報告，開發起來也是相當困難，并且領導的要求可不是隨隨便便敷衍了事就可以的，既要美觀，又要實用，

搜索了下BI工具大都滿足移動端的展示，既要基于HTML5標準開發, 無需安裝任何客戶端，又要在瀏覽器中可直接打開，除了可以在PC端查看之外，還可以在移動端，如手機、pad端查看，最終用戶可以隨時隨地的瀏覽查看儀表板或報表，同時，最好是具有移動端自適應的能力，無需專門為移動端使用設計儀表板，

移動端顯示效果展示

在移動端登錄系統后，自動以磁貼樣式顯示門戶目錄，無需額外設定，符合手機觸摸式操作模式，

（圖片來源于Wyn）

移動端儀表板顯示效果

儀表板自適應進行流式布局顯示，

（圖片來源于Wyn）

移動端報表顯示效果

移動也可將報表完美呈現，但須專門為移動端進行設計，后續小節（設計移動端報表）將為您進行詳細介紹，

（圖片來源于Wyn）

設計移動端儀表板

Wyn 中的儀表板具備完全自適應的能力，因此您無需專門設計移動端使用的儀表板，

在PC端設計器內可一鍵查看移動端顯示效果，也可以進行自定義布局設計，

自定義移動端布局

如果未對移動端的儀表板內容做自定義的布局，在移動端將以自動布局的方式來展示儀表板的內容，

如果您對移動端展示的內容有自定義的需求，單擊儀表板右下角的，即可進入移動端展示編輯頁面，在手機模擬器中修改布局及展示內容，

（圖片來源于Wyn）

在手機模擬器的編輯頁面中，您可以通過拖拽手動調整各組件之間的順序調整各組件的大小，

單擊組件右上角的洗掉按鈕，可將該組件從移動端頁面中移除，被移除的組件會出現在右側的“自定義布局”中，您也可以將已洗掉的組件串列重新拖拽至手機模擬器中，

如果要恢復初始的樣式，單擊“自動布局”即可回傳到初始的樣式，

單擊右下角，回傳大屏編輯頁面，

移動端集成

與釘釘集成

日常作業中，使用釘釘進行手機端移動辦公的情況越來越普遍，

Wyn 支持與釘釘集成，集成之后系統自動將釘釘中的用戶和角色資料無縫同步到 Wyn 中，

集成之后釘釘用戶無需切換應用，直接在釘釘應用中就可以打開Wyn 查看檔案，

不僅如此，釘釘用戶可以直接掃碼登錄到 Wyn 站點中，無需重新創建賬號體系，

本節就為您介紹Wyn如何實作與企業釘釘的集成，

釘釘端配置

(1) 登錄釘釘開發者平臺

使用企業管理員的身份登錄釘釘開發者平臺（https://open-dev.dingtalk.com，如果沒有釘釘賬號，可以免費申請），請記錄下自己企業的CorpId，后續步驟中會使用到，

（圖片來源于Wyn）

(2) 創建應用

選擇“應用開發>企業內部開發”

（圖片來源于Wyn）

單擊“H5微應用”進入微應用管理配置頁面，然后單擊“創建應用”按鈕，

（圖片來源于Wyn）

如下圖所示填寫基本資訊，然后單擊“確定創建”，

（圖片來源于Wyn）

創建完成后，可以得到應用憑證，記錄 AgentId、AppKey 和 AppSecret，集成中會使用到，

（圖片來源于Wyn）

(3) 配置集成資訊

單擊“開發管理”，然后單擊“修改”按鈕，

（圖片來源于Wyn）

接下來配置開發資訊，

“服務器出口IP”呼叫釘釘服務端API的合法的IP串列，若填寫的IP不符規范，則無法創建應用，請填寫Wyn服務器的IP地址，

“應用首頁地址”填寫應用首頁鏈接，在移動端作業臺點擊應用圖示會跳轉到此頁面，

url格式為：{PortalUrl}/dingtalk/sso?corpid={CorpId}&redirectUri={PortalUrl}，

其中PortalUrl為您實際部署Wyn的域名或IP+埠號，例如：https://wynportal.grapecity.com/dingtalk/sso?corpid=xxxxxxx&redirectUri=https://wynportal.grapecity.com/，

填寫完成后，單擊頁面右上角的“保存”按鈕，

（圖片來源于Wyn）

(4) 配置介面權限

單擊“權限管理”，然后選擇“通訊錄管理”，

（圖片來源于Wyn）

如下圖，開通通訊錄介面權限，

（圖片來源于Wyn）

然后配置權限范圍，你可選擇全部員工，也可以選擇部分員工，

（圖片來源于Wyn）

(5) 發布應用

單擊“版本管理與發布”進入應用發布頁面，然后單擊“確認發布”按鈕，將應用發布，

（圖片來源于Wyn）

如可見范圍為全部員工，則應用發布時則選擇“全部員工”，如果可見范圍設定的是部分員工，那么發布時也需要對應的選擇“部分員工”，最后保存修改，完成發布，

（圖片來源于Wyn）

Wyn 系統端配置

在釘釘端創建并發布微應用后，使用 admin 賬戶登錄 Wyn 后臺管理站點，選擇“安全設定 > 外部用戶提供程式 > 釘釘”，

（圖片來源于Wyn）

配置專案	功能	說明
CorpID	企業的CorpID，
AppKey	應用憑證AppKey，
AppSecret	應用憑證AppSecret
AgentID	應用憑證中的AgentID，
最大并發請求數	同步資料時，單次請求同步的用戶數量，	建議使用保持默認資料，
啟用掃碼登錄	是否開啟二維碼登錄功能，	有關掃碼登錄的更多介紹，請見釘釘用戶掃碼登錄，
掃碼登錄 AppId	填寫在釘釘應用中創建的QR Code AppId，
掃碼登錄 AppSecret	填寫在釘釘應用中創建的QR Code AppSecret，
啟用自動同步	是否開啟自動同步資料功能，同步資料指的是將釘釘中的用戶資料同步到Wyn 中，	-
同步時間間隔	設定自動同步資料的時間間隔，必須填入正整數，單位“小時”，輸入非正整數時，均按1小時計算，	-