本文由葡萄城技術團隊於博客園原創並首發轉載請註明出處：葡萄城官網，葡萄城為開發者提供專業的開發工具、解決方案和服務，賦能開發者。 項目想做數據可視化，想同時在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 站點中，無需重新創建賬號體系。
本節就為您介紹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小時計算。 |
- |
我們將 CorpID、AgentId、AppKey和AppSecret信息填入對應輸入框中。
並開啟自動同步數據功能，將時間間隔設置為1小時。此時可以直接保存設置。
（圖片來源於Wyn）
保存之後系統檢測到您開啟了自動同步數據功能（約15分鐘後），會立即進行首次的數據同步。之後會按照設置的間隔進行自動同步。
為了可以立即將釘釘中的用戶數據同步到系統中，我們可手動同步數據。
（圖片來源於Wyn）
提示同步成功。
（圖片來源於Wyn）
此時整個配置過程基本完成，我們到Wyn 系統中來看一下釘釘用戶的映射情況。
可見釘釘是作為全局下的一個單獨組織存在。
（圖片來源於Wyn）
釘釘中的角色全部直接掛在“釘釘”總組織下。
（圖片來源於Wyn）
（圖片來源於Wyn）
提示
如您需要在釘釘組織下麵添加新的組織、角色和用戶的話，推薦您在釘釘端操作。
因為同步數據時，會使用釘釘端的最新數據覆蓋Wyn 中釘釘組織中的數據。
在手機中登錄釘釘，可以在“工作台”欄中看到自己創建的應用。單擊應用圖標，即可自動登錄Wyn。
按照上面的配置過程完成站點與釘釘的集成之後，釘釘用戶即可在釘釘 App 端查看 Wyn 站點內容。
但此時釘釘用戶還不能如同 Wyn 系統中原有的用戶那樣不經過 App 而是直接由 Wyn 登錄頁面進行登錄。
那麼怎樣做才可以使釘釘用戶可以像Wyn 中的原有用戶一樣直接登錄站點呢?
接下來就為您詳細介紹具體的配置方法，經過配置後，釘釘用戶就可以通過掃碼直接登錄站點。
(1) 文中以舊版釘釘開發者後臺界面為例，為您介紹。所以在配置之前，請先返回舊版。
（圖片來源於Wyn）
(2) 在釘釘開發者後臺選擇“應用開發->登錄”，然後單擊“創建掃碼登錄應用授權”按鈕。
（圖片來源於Wyn）
(3) 在彈出的對話框中填寫應用授權信息，包括名稱、描述、授權LOGO地址和回調功能變數名稱。然後單擊右下角的確定按鈕。
其中授權LOGO會顯示在掃碼後手機端的登錄確認頁面中；回調功能變數名稱為 Wyn 站點的功能變數名稱。
（圖片來源於Wyn）
（圖片來源於Wyn）
(4) 可見已經生成了應用的 appId 和 appSecret。
（圖片來源於Wyn）
(5) 來到 Wyn 後臺管理當中，進入“安全設置>外部用戶提供程式>釘釘”打開釘釘集成的配置頁面。
將“啟用掃碼登錄”置為“True”。
然後將上一步中生成的 appId 和 appSecret 對應填入掃碼登錄 AppId 和掃碼登錄 AppSecret 中。
最後單擊右下角的“保存”按鈕保存設置。
（圖片來源於Wyn）
(5) 此時在Wyn 登錄頁面就可以看到釘釘的圖標，單擊出現二維碼。
接下來使用釘釘客戶端掃碼即可登錄站點了。
（圖片來源於Wyn）
（圖片來源於Wyn）
到這裡所有移動端數據開發的重點難點與解決方案都為大家完整展示，大家如果感興趣歡迎自己嘗試一下。
拓展閱讀
[詳解商業智能“前世今生”，“嵌入式BI”到底是如何產生的？](https://www.grapecity.com.cn/blogs/wyn-how-the-embedded-bi-come-about)
[使用WIX進行商業智能OEM打包](https://www.grapecity.com.cn/blogs/wyn-oem-packaging-with-WIX)
[數據可視化分析工具如何在國內彎道超車迅速崛起百花齊放？](https://www.grapecity.com.cn/blogs/wyn-data-analysis-tools-how-to-technology-leadership)
本文是由葡萄城技術開發團隊發佈，轉載請註明出處：葡萄城官網
