最近葡萄在做技術支援，又遇到了客戶給我們出的新問題。
事情是這樣的。
這次客戶使用的是.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 視覺化大屏功能，現有的市面上的工具也已經很完善了，我們在考慮為專案中增加這一【門面】的功能時，不妨可以考慮引用現成的工具，將開發資源集中在核心業務上面，從而實現高效的跨平臺專案的交付。
