本文由葡萄城技術團隊於博客園原創並首發轉載請註明出處：葡萄城官網，葡萄城為開發者提供專業的開發工具、解決方案和服務，賦能開發者。項目想做數據可視化，想同時在PC端、手機端查看數據怎麼辦？業務主要關心的數據包括：銷售數據、業績達成、同比、環比，各產品銷售情況及潛客商機、未來收入預測等數據，最好附加人 ...

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

項目想做數據可視化，想同時在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小時計算。	-