案例概覽

利用Tab列表控制組件顯隱

本案例通過藍圖實現用Tab列表組件控制多個組件切換顯示和隱藏。

配置案例交互，具體實操請參見利用Tab列表控制組件顯隱。

方法一：利用分支判斷節點

1. 在畫布編輯器中添加需要配置交互的組件，以柱狀圖、Tab列表和區域圖組件為例，并右鍵單擊分別將組件都導出到藍圖編輯器。

2. 按照下圖在藍圖編輯器畫布中將節點之間進行連線，并在分支判斷節點中編輯處理方法。

   說明

   • 如果Tab列表的參數id=1觸發執行，區域圖組件的顯示動作，不滿足則觸發隱藏動作。

   • 如果Tab列表的參數 id=2觸發執行，柱狀圖組件的顯示動作，不滿足則觸發隱藏動作。

方法二：利用串行處理節點

1. 在畫布編輯器中添加需要配置交互的組件，將區域圖和柱狀圖組件重疊放置，右鍵單擊成組。

2. 在圖層中，單擊成組后的對象，打開組內對象輪播并將觸發方式設置為事件觸發。

3. 將Tab列表和組，右鍵單擊導出到藍圖編輯器，按照下圖進行節點之間的連線，并在串行處理節點中編寫處理方法。

   說明

   當單擊Tab時，事件內的 {id:“1”} 參數傳遞給串行數據處理節點后變成 {index:0}，其中0代表組內的組件索引是以0開始的。

如何通過合并請求進行數據分發

本案例是通過藍圖編輯器實現以通用標題組件請求數據，并分發給數字翻牌器和多行文本組件的功能。

配置案例交互操作步驟如下，具體實操請參見如何通過合并請求進行數據分發。

1. 在畫布編輯器中添加數字翻牌器和通用標題組件，并清空數字翻牌器組件的標題名內容和前后綴內容，同時將通用標題組件放在畫布編輯器外，并修改組件數據內容。

2. 將組件導出到藍圖編輯器，單擊添加一個序列執行節點，填寫節點的處理方法。

如何實現跨屏聯動

本案例是通過藍圖編輯器中的WebSocket節點實現跨屏聯動的效果。

配置案例交互操作步驟如下，具體實操請參見 如何實現跨屏聯動。

1. 建立兩個屏幕的WebSocket服務，其中自建和下載DataV-WS服務包的方法請參見

   自建WebSocket節點服務說明和下載DataV-WS服務包。

2. 分別創建控制端和接收端2個可視化應用。

3. 控制端使用Tab列表組件導出到藍圖編輯器，接收端使用通用標題組件導出到藍圖編輯器。

4. 配置發送端的藍圖配置。

5. 配置接收端的藍圖配置。

實操演示

利用Tab列表控制組件顯隱

方法一：

1. 在畫布編輯器頁面，選擇全部資產欄，單擊添加需要配置交互的組件至畫布編輯器中，以Tab列表、輪播列表和轉盤抽獎組件為例。

2. 組件添加完成后 ，在左側圖層欄中選擇組件，右鍵單擊導出到藍圖編輯器。

3. 在藍圖編輯器頁面，從左側導入節點欄選擇組件，單擊添加至藍圖編輯器畫布中，并添加兩個分支判斷節點，按照下圖進行連線。

4. 單擊上方的分支判斷節點，在右側配置面板，其他配置模塊添加處理方法，代碼請參見：

   return data.id == 1;

   使用同樣的方法，為下方的分支判斷節點添加處理方法，代碼請參見：

   return data.id == 2;

5. 在藍圖編輯器右上方單擊預覽圖標，查看分支判斷節點實現Tab列表控制組件顯隱預覽效果。

方法二：利用串行處理節點

1. 在畫布編輯器頁面，選擇全部資產欄，單擊添加需要配置交互的組件至畫布編輯器中，以Tab列表、進度條表格和鍵值表格組件為例。

2. 在畫布編輯器中將進度條表格和鍵值表格組件重疊放置，在左側的圖層欄同時選中兩個組件，并在畫布中右鍵單擊成組。

3. 在圖層欄中，單擊成組后的對象，打開組內對象輪播并將觸發方式設置為事件觸發。

4. 將Tab列表和組右鍵單擊選擇導出到藍圖編輯器，在藍圖編輯器頁面左側的導入節點欄，將組件節點添加到畫布中。

5. 在藍圖編輯器畫布中，添加一個串行數據處理節點，按照如下圖連線，并為串行數據處理節點添加一個方法，代碼請參見：

   return {
     "index": data.id - 1
   } 

   說明

   當單擊Tab時，事件內的 {id:“1”} 參數傳遞給串行數據處理節點后變成 {index:0}，其中0代表組內的組件索引是以0開始的。

6. 在藍圖編輯器右上方單擊預覽圖標，查看串行節點實現Tab列表控制組件顯隱預覽效果。

   說明

   當選中TAB1時畫布顯示進度條表格組件，選中TAB2時畫布顯示鍵值表格組件。

7. 如果您想查看如何利用Tab列表控制組件顯隱的詳細方法，請參見：如何利用Tab列表控制組件顯隱。

如何通過合并請求進行數據分發

1. 在畫布編輯器頁面，選擇全部資產欄，單擊添加需要配置交互的組件至畫布編輯器中，以通用標題、多行文本和數字翻牌器組件為例。

2. 選擇通用標題組件，在右側數據配置面板單擊配置數據源，按照如下方法設置數據源。

   [
       {
           "num": "123",
           "text": "這是多行文本組件",
           "value": "接收數據組件"
       }
   ]

3. 在畫布編輯器頁面，選擇圖層欄3個組件，并分別右鍵單擊導出到藍圖編輯器。

4. 在藍圖編輯器頁面的導入節點欄，單擊三個組件節點，分別添加到藍圖編輯器畫布中，并在畫布中添加一個序列執行節點，按照如下圖連線。

5. 節點之間連線完成后，在右側其它配置模塊，為序列執行節點添加兩個方法，代碼請參見：

   • 取文本數據

     return [{
       value:data[0].text
     }];

   • 取數字翻牌器數據

     return [{
       value:data[0].num
     }];

6. 在藍圖編輯器配置頁面右上角，單擊預覽圖標，查看數據的分發效果。

7. 如果您想查看如何通過合并請求進行數據分發的詳細方法，請參見：如何通過合并請求進行數據分發。

如何實現跨屏聯動

1. 建立兩個可視化應用的WebSocket服務，其中自建和下載DataV-WS服務包的方法請參見

   自建WebSocket節點服務說明和下載DataV-WS服務包。

2. 分別創建控制端和接收端2個可視化應用。

3. 在控制端可視化應用中，添加Tab列表組件，并將其導出到藍圖編輯器。

4. 在藍圖編輯器畫布中添加串行數據處理以及WebSocket節點，按照如下圖連線。

   說明

   • 您需要在右側其它配置模塊配置WebSocket節點服務的IP地址，有如下兩種情況：

     • 用HTTP打開可視化應用，請使用ws協議，如：ws://127.0.0.1:8181。

     • 用HTTPS打開可視化應用，請使用wss協議，如：wss://xxx。

   • 屏幕ID和屏幕名稱會自動填充。

5. 設置完WebSocket節點后，您需要在其它配置模塊為串行數據處理節點添加一個方法，代碼請參見：

   return [{"value":data.content}]; 

6. 控制端配置完成后，打開接收端可視化應用，在畫布編輯器中添加通用標題組件，并將其導出到藍圖編輯器。

7. 在藍圖編輯器頁面，在左側導入節點欄的通用標題節點添加到畫布中，并添加一個WebSocket節點，按照如下圖連線。

8. 按照同樣的方法配置接收端的WebSocket節點，節點內所配置接受消息的消息名與發送消息的消息名需要保持一致，設為test。

9. 設置完成后，在藍圖編輯器配置頁面右上角，單擊預覽圖標，查看分屏聯動效果。

10. 如果您想查看如何實現跨屏聯動的詳細方法，請參見：如何實現跨屏聯動。