本文由葡萄城技術團隊於部落格園原創並首發
轉載請註明出處：葡萄城官網，葡萄城為開發者提供專業的開發工具、解決方案和服務，賦能開發者。
專案想做資料視覺化，想同時在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)