最近葡萄在做技術支持，又遇到了客戶給我們出的新問題。
事情是這樣的。
這次客戶使用的是.Net項目，直接做BI大屏過於復雜，所以想直接集成使用BI數據可視化分析大屏。
所以，這次我們就從——Wyn出發，為大家介紹如何在 .Net環境中集成BI儀表板數據可視化大屏。
說到這里有些同學對BI儀表板數據可視化大屏並沒有概念，我們這里先為大家介紹一下。
BI儀表板數據可視化大屏
無論你現在正在進行什么項目，多少都會遇到甲方提出，需要一個炫酷好看的數據看板，進行數據可視化展示及自助式數據分析。
這個看板，就是BI儀表板數據可視化大屏。
這個看板有多重要呢？
企業對內信息共享、對外行業交流、會議現場展示你能想到的這些場合都適用，同時看板類需求已經常態化，對於甲方客戶而言，項目需求的必備功能就是要必須支持"可視化大屏"。因此，BI 可視化儀表板設計會出現在我們現在及未來要做的每個信息項目中。
在這里我們簡單根據大屏實現效果和功能進行分層：
第一層：簡單可視化手段的堆疊，如使用Echarts.js 或其他圖表庫，將靜態的數據以可視化的樣式展示出來，形成一個靜態的自適應的數據可視化"報表"；
第二層：實現數據的實時更新，與真實的業務數據關聯，將業務數據使用可視化圖表進行實時展現，而非靜態的數據；
第三層：實現數據的自助式分析，包含了數據建模、數據加工處理、可視化展示及自助式數據分析的操作，是真正意義上的商業智能數據分析。
因此要實現BI大屏，主要根據我們的實際需求決定整體的開發工作量。本次，我們就用Wyn Enterprise 作為實例，為大家演示如何在.Net Core項目中實現BI可視化的應用集成。最終可實現項目的屏幕自適應、多頁面儀表板、自動數據刷新、3D動畫特效等效果，這些效果可以直接應用到智慧園區、智能車間、健康醫療、電力能源、校園安全、數字指揮中心等場景。
.Net Core 項目中集成BI方式介紹
.Net Core 項目中集成BI主要有三種方式，下面通過具體例子為大家介紹這幾種不同的集成方式。
Div 集成
Div集成多用於希望用以原生方式在業務系統中集成儀表板、報表、數據源以及數據集等。這種集成方式的核心是獲取到文檔的DIV元素和對應的值，然后將其寫到自己的網頁代碼中。
注意
進行DIV集成之前，需要將Wyn系統進行跨域配置，允許跨域請求。例如：
示例代碼
下面為集成的示例代碼：
以下對應圖中的編號，分別進行解釋說明：
(1)具體部署系統的實際域名地址；
(2)系統中儀表板（Dashboard）插件的版本號；
(3)用戶Token，請確保使用的Token 具有足夠權限（如查看儀表板，如集成設計器則需創建儀表板權限）。
(4)儀表板的ID，用於集成單個儀表板文檔。 如集成空的設計器，則不需要，刪掉此行即可。
(5)引用代碼，用於集成設計器。
(6)引用代碼，用於集成單個儀表板文檔。
URL集成
在.Net Core項目中使用最多的集成方式是URL集成，這種集成方式的核心是設置一個帶參數（QueryString）的網址（URL），作為業務系統中某個菜單鏈接的目標地址，或者是作為業務系統頁面中某個iframe元素的src屬性值。
URL集成的核心是生成被集成報表或儀表板的完整URL。
以儀表板為例：
(1)在新窗口打開儀表板
選擇儀表板，單擊頁面右上角的新窗口按鈕，在新的瀏覽器窗口中打開儀表板。
(2)拷貝瀏覽器地址欄 URL
將儀表板的URL地址拷貝粘貼到記事本中待用。
(3)獲取訪問令牌
進入系統后台管理 >生成令牌。
輸入令牌信息，單擊" 生成令牌"按鈕即可生成該用戶名的令牌字串；單擊右側的獲取令牌按鈕即可將令牌復制。
在這里需要注意
生成令牌時使用的用戶名，應具有待訪問報表或儀表板的查看權限。
比如專門為項目創建一個名為guest的用戶，再創建一個名為" 集成用戶"的角色，並將guest用戶加入該角色。然后設置待集成報表或儀表板的權限，允許" 集成用戶"【只讀】。
(4)將剛剛復制的令牌粘貼到第(3)步中URL的末尾，並使用 &token= 進行連接，得到的URL字串如下：
http://localhost:51980/dashboards/view/5d5cafe6e98abc00018ff4e5?theme=default&lng=zh-CN &token=0b77ebfe232bff06248ce245c24af6aa84010b5f747ef41e605b08ae310a6fed
(5)使用帶令牌的URL字串
將該URL字串設置為業務系統頁面文件中某個iframe的src屬性或者超鏈接的href屬性。
例如：
\<iframe src="[http://localhost:51980/dashboards/view/5d5cafe6e98abc00018ff4e5?theme=default&lng=zh-CN](http://localhost:51980/dashboards/view/5d5cafe6e98abc00018ff4e5?theme=default&lng=zh-CN)&token=0b77ebfe232bff06248ce245c24af6aa84010b5f747ef41e605b08ae310a6fed" style="height:90%;width:90%;border:none;background:grey;" /\>
效果如下圖：
如果你想在新的瀏覽器窗口中打開儀表板內容，只需設置一個超鏈接，href設置為上述的URL即可。
例如：
<iframe src="http://localhost:51980/dashboards/view/5d5cafe6e98abc00018ff4e5?theme=default&lng=zh-CN&token=0b77ebfe232bff06248ce245c24af6aa84010b5f747ef41e605b08ae310a6fed" style="height:90%;width:90%;border:none;background:grey;" />
API 集成
這種方式需要BI系統支持GraphQL API，這樣幾乎所有界面操作均可通過調用API完成，例如在門戶頁面中展開某個分類下的文檔列表時，通過瀏覽器調試窗格就可以看到實際的GraphQL API調用。
操作方法
所有API調用詳解，請參考：
https://wyn.grapecity.com.cn/WynApiDemo/
API調用示例，如下圖：
與REST API不同，GraphQL API不需要為不同的對象操作提供不同的URL。不同對象的不同操作，都是通過一個統一的URL（http://localhost:51980/api/graphql）進行調用；不同的是提交的數據不一樣。
提交數據的格式和內容，可通過瀏覽器調試功能，查看界面操作中的網絡交互（Network），再查看具體的請求頭信息（Headers）。
API返回的內容，可通過查看網絡交互中的Response部分來獲得。
在瀏覽器中打開 http://localhost:51980/graphiql 網頁（注意URL末尾的graph與ql之間有一個字母i），可隨時調試API，如下圖：
接下來我們再來演示如何在ASP.NET Core MVC 項目中實現數據可視化功能。
ASP .Net Core MVC 項目集成BI數據可視化
安裝Wyn后，使用 localhost:51980進入門戶管理網站。
整個數據可視化中使用到的儀表板，及設計器，管理中心，數據加工處理模塊都是在線的B/S端的，我們直接安裝就可以。
打開 Visual Studio 新建ASP.NET MVC項目 或者已有的項目中添加新的視圖或HTML文件
其他
在上面我們介紹了在ASP .Net Core MVC 項目和.Net Core 項目中的集成方式，但想要更好地解決實際項目中的問題，還需要一些更高級的集成功能。
集成中的權限管理
BI儀表板因為涉及到企業核心業務數據信息，因此用戶權限是關鍵的功能，因此對於用戶權限管理也需要有不同方案進行處理，我們以大家最熟悉的安全令牌來舉例：
使用固定令牌集成時，相當於以一個固定的用戶身份查看報表內容。
如果希望業務系統的不同用戶，根據數據權限的不同，看到不同的報表內容，就需要以業務系統當前用戶的身份登錄，獲取不同的令牌，再去查看文檔內容。
將業務系統的當前登錄用戶傳給BI系統時，並以該用戶身份登錄的過程，就是用戶身份集成。
用戶身份集成有兩種方式：（1）使用URL參數傳遞用戶信息；（2）單點登錄集成。前者更簡便，后者更安全。
QueryString
使用URL的QueryString方法直接傳遞用戶信息，也是我們可能會用到的一個常用功能。
方法如下：
（1）設計報表時定義一個隱藏的參數。例如：參數名為 oauser。設置參數隱藏的目的是防止用戶查看報表內容是手動輸入另一個用戶的用戶名。
（2）在集成報表內容的URL中添加用戶身份參數。
實例：
&dp={"oauser":["ZhangSan"]}。
跟其他參數一樣，這個參數內容需要經過URL編碼，結果如下：
%dp=%7b%22oauser%22%3a%5b%22ZhangSan%22%5d%7d
注意：
（1）此處的參數名（oauser）必須與報表設計時定義的參數名完全一致，大小寫敏感。
（2）這種方法仍然使用固定令牌進行集成，即在集成用的URL中，QueryString的token參數值仍然是固定的字符串。
單點登錄集成
如果業務系統有更高的安全性要求，可在業務系統登錄畫面中，通過登錄API，以實現單點登錄集成，並將獲取的令牌放在會話變量中。
需要集成報表功能時，再從會話變量中取出令牌，串接在集成URL中。這樣，業務系統的每個用戶都是不同的令牌。
從業務系統的登錄畫面中取出的用戶登錄信息，是用戶輸入的業務系統用戶名和密碼。通常用業務系統用戶賬號調用BI系統的登錄API，是需要Wyn中具有相同用戶名和密碼的賬號才可以。
為了避免為每個用戶創建多套賬號密碼，我們還可以編寫自定義安全提供程序。
通過編寫自定義的安全提供程序，可實現業務系統的用戶查看報表內容時，直接以業務系統的賬號登錄，查看其權限范圍內的數據內容。
寫在最后：
無論是.Net Core還是.NET 5或6 的項目整體都有強大的服務端資源來支持，適合開發大並發，高性能的業務系統，如果實現BI 可視化大屏功能，現有的市面上的工具也已經很完善了，我們在考慮為項目中增加這一【門面】的功能時，不妨可以考慮引用現成的工具，將開發資源集中在核心業務上面，從而實現高效的跨平台項目的交付。
