本文檔以數據看板1上的Tab列表組件控制數據看板2上的通用標題組件為例,實現跨屏聯動功能。
效果展示
使用場景
當您有多個數據看板,并希望多個數據看板內的組件能展示相互聯動的效果。
操作步驟
登錄DataV控制臺。
配置主屏幕
選擇任一數據看板,重命名為主屏幕,單擊編輯,進入畫布編輯器頁面。
添加Tab列表組件到畫布中。
單擊頁面左上角的圖標,切換到藍圖頁面。
在圖層節點頁簽,將Tab列表節點添加到藍圖主畫布中。
單擊邏輯節點頁簽,將串行數據處理和websocket添加到藍圖主畫布中。
選中websocket節點,在右側配置面板的服務地址區域,輸入事先獲得的測試地址;重命名動作為下一個;刪除多余事件節點和動作節點。
說明服務地址請參見如何使用DataV-WS服務獲取。
連接組件。
配置串行數據處理節點處理方法。
return [{"value":data.content}];
配置副屏幕
重新選擇一個數據看板,重命名為副屏幕,單擊編輯,進入畫布編輯器頁面。
添加通用標題組件到畫布中。
單擊頁面左上角的圖標,切換到藍圖頁面。
在圖層節點頁簽,將通用標題節點添加到藍圖主畫布中。
單擊邏輯節點頁簽,將websocket添加到藍圖主畫布中。
選中websocket節點,在右側配置面板的服務地址區域,輸入和主屏幕相同的地址;重命名事件為下一個。
重要主屏幕和副屏幕的分組要一致,因為副屏幕是接收端,所以配置接收消息即可。
連接組件。
單擊兩個屏幕頁面右上角的預覽圖標,預覽展示結果。
異常排查
WS服務不能直接在HTTPS協議下訪問,需要用WSS服務,再使用自己的SSL證書去代理WS服務地址后,才能在HTTPS下訪問。
使用功能鍵F12,打開瀏覽器調試頁面,查看瀏覽器Network頁簽下的WS標簽連接提示信息,檢查是否因跨域未配置以及在連接返回的Response的Header里是否有設置Sec-WebSocket-Protocol為
echo-protocol
。連接成功后,根據文檔中的消息格式傳遞參數即可。