［通用］參數面板行動端樣式

1.1 版本

1.2 應用場景

在製作報表時，使用者希望將參數元件固定在報表頂部，便於參數查詢。如下圖所示：

1.3 實現思路

注：V11.5.1 版本起，設計器中取消 「建立決策報表」 入口，歷史決策報表範本仍可正常編輯與存取。更推薦使用 FineVis資料視覺化 ，作為專業的資料視覺化工具，比決策報表製作視覺化看板效率更高、效果更豐富  。

在普通報表或決策報表中，可設定行動端參數面板的樣式範本為「頂部」。

在 FVS 視覺化看板中，可設定 查詢面板 的樣式範本為「頂部式」。

2.1 普通報表

點選參數面板的編輯按鈕，進入參數面板編輯介面，在組件設定面板選擇「para>行動端」，點選樣式範本右側的「...」按鈕。

彈出樣式範本設定框，即可選擇「預設」或「頂部」。如下圖所示：

注1：普通報表/決策報表參數面板在行動端不支援顯示標籤元件。

注2：決策報表新增 參數介面 後，同樣在右側組件設定面板選擇「para>行動端」進行設定。

2.2 FVS視覺化看板

FVS 插件 V2.8.0 及之後版本，查詢面板行動端支援設定樣式範本。

將範本切換到「行動端」模式，點選「查詢面板設定」，在彈出框中選擇「樣式」。如下圖所示：

普通報表和決策報表效果一致，FVS 效果有所不同。本文提供 cpt 和 FVS 範本，用於展示效果：

參數查詢-phone.cpt

FVS參數查詢-phone.fvs

4.1 效果範例

以 App 端效果為例，要實現查詢，需點選範本下方的篩選按鈕開啟參數面板，編輯元件值後，點選「查詢」進行資料查詢。

• 普通報表效果如下圖所示：

• FVS 範本效果如下圖所示：

4.2 元件初始化顯示規則

參數面板行動端樣式選擇「預設」時，元件內容分為上下兩部分顯示。

• 上方顯示元件名稱。

• 下方顯示元件內容，優先為：預設值>水印>空

注：普通報表/決策報儲存格件的「標籤名稱」、「元件值」分別對應 FVS 中元件的「名稱」、「預設值」。

如下圖所示：

5.1 編輯元件值後自動查詢

普通報表/決策報表設定「頂部」樣式時，可選擇是否「自動查詢」；FVS 中對應功能為「編輯元件值後自動查詢」。

注：FVS 中的「啟動自動查詢」功能請參見本文 6.1 節說明。

• 不勾選「自動查詢/編輯元件值後自動查詢」時，頂部面板新增「查詢」按鈕，編輯元件值後，點選「查詢」按鈕方可查詢更新。

• 勾選「自動查詢/編輯元件值後自動查詢」時，無需查詢按鈕，編輯元件值後，即可查詢更新。

5.2 元件展示數量

由 5.1 節得知，勾選「自動查詢/編輯元件值後自動查詢」時，無查詢按鈕，故最多可支援展示 4 個元件；

不勾選「自動查詢/編輯元件值後自動查詢」時，有查詢按鈕，故最多可支援展示 3 個元件；

超過的元件將收納到「更多」按鈕，點選後再展開元件查詢。如下圖所示：

FVS 中還支援取消勾選「展示數量限制」，此時可左右滑動展示元件。如下圖所示：

5.3 元件初始化顯示規則

1）頂部參數面板中，元件內容顯示優先如下：

• 普通報表/決策報表：元件內容的顯示優先為：元件值>水印>標籤名稱>空。

• FVS 視覺化看板：元件內容的顯示優先為：預設值>名稱。

注：FVS 的元件「名稱」不支援為空，故不能顯示空內容。

2）頂部參數面板中，若有多值元件選擇了多個值且沒有被收到「更多」按鈕中，顯示規則如下：

• 普通報表/決策報表：顯示選中的第一個值+選中值個數。

• FVS 視覺化看板：顯示選中的所有值+選中值個數。但超過一定的長度限制後，將省略顯示。

注：頂部面板可捲動查看時，單個元件存在最大寬度（顯示 6 字元左右），小於此寬度時，元件內容自適應展示；大於此寬度時，元件內容省略顯示。

頂部面板限制元件展示數量時，元件等分佈局， 元件內容顯示不下則省略顯示。

5.4 頂部參數面板背景

1）普通報表/決策報表中，行動端頂部參數面板跟隨 PC 端背景顯示。如下圖所示：

預覽效果如下圖所示：

2）FVS 視覺化看板中，行動端查詢面板背景需單獨設定，僅支援設定為顏色，預設為頁面背景初始顏色。

預覽效果如下圖所示：

6.1 初始化查詢資料

FVS 查詢面板樣式中的「啟動自動查詢」，指的是範本初始化預覽時，是否查詢展示範本內容。為 PC端/行動端 共用功能，與樣式範本無關。

勾選「啟動自動查詢」，則初始化預覽時即可自動查詢展示範本內容；若不勾選，則初始化預覽時需手動查詢。

普通報表/決策報表參數面板是透過「點選查詢前不顯示報表內容」功能實現的。如下圖所示：

6.2 正文元件顯示規則

普通報表/決策報表中，若參數面板中存在「正文元件」，參數面板的行動端樣式範本選擇「頂部」時，「正文元件」將始終被收納在「更多」按鈕中。

如下圖所示：