頁面說明

4 自助儀表板-頁面說明

概述

頁面是自助儀表板的載體，一個自助儀表板等同於一個頁面，系統支援對該頁面進行佈局及主題樣式設計，設計的物件是目前自助儀表板。

操作入口

在自助儀表板的編輯介面，左側頁籤中切換頁面頁籤，顯示“頁面”各設定選項。如下圖：

頁面頁籤介紹

頁面頁籤設計項主要分為三個部分：佈局、樣式、元件。

• 佈局：指調整自助儀表板頁面的佈局，有三種方式：高寬自我調整，寬度自我調整，固定大小。

• 樣式：包含三部分內容：主題、背景、內邊距。

• 組件：按照“垂直”和“水平”兩種階層結構，顯示頁面的所有元件佈局結構。

各部分說明如下：

部分	說明
設備	自助儀表板分為“電腦/平板”和“手機”設備，可針對不同設備分別設置自助儀表板的佈局等。
佈局	指設置為“電腦/平板”時，可調整自助儀表板頁面的佈局，有三種方式：高寬自我調整，寬度自我調整，固定大小。
樣式	包含三部分內容：主題、背景、內邊距。
組件	按照“垂直”和“水平”兩種階層結構，顯示頁面的所有元件佈局結構。

4.1 自助儀表板-設備

概述

自助儀表板分為“電腦/平板”和“手機”設備，可針對不同設備分別設置自助儀表板的佈局等。

電腦/平板設備

電腦/平板設置介面：

手機設備

手機設備介面：

手機移動端介面：

手機設備支援的功能：

注：手機設備佈局時不允許增加、刪除組件。

功能	說明
調整組件的位置	電腦/平板設備切換為手機設備時，元件在手機設備以直排展示，元件預設展示的順序為“元件”中元件從上到下的順序。 注：“電腦/平板設備”第一次切換為“手機設備”時，兩種設備“元件”中的元件排序保持一致。在“電腦/平板設備”或“手機設備”調整元件 的位置，各自設備儲存各自的元件順序，兩種設備互不影響。
調整組件的高度	支援手動調整組件的高度。
篩選器排序	支援對移動設備的篩選器進行排序。 點擊右上角篩選器排序按鈕（），彈出“篩選器排序”視窗，通過拖拉調整順序。 在PC端設置篩選器排序後，開啟移動端，效果如圖：

4.2 自助儀表板-佈局

概述說明

自助儀表板支援三種佈局方式：高度自我調整、寬度自我調整和固定大小，可以根據需要選擇合適的佈局方式，快速地做出符合某個業務場景的儀表板。

功能入口

設置佈局方式是在“頁面”頁籤下，通過點擊選擇的方式，定義儀表板的佈局。如下圖：

對比說明

三種佈局方式顯示效果以及使用場景對比如下：

效果	佈局方式	描述
	高寬自我調整（預設值）	設置了高寬自我調整後，儀表板會自動調整大小以填充用於顯示儀表板的視窗； 此種佈局方式適用于單屏展示的儀表板，比如CEO看板；
	寬度自我調整	設置了寬度自我調整後，儀表板會自動調整顯示寬度以適應不同設備的寬度，但高度固定以實現垂直捲動效果； 此種佈局方式（流式佈局）適用於報告型的儀表板，比如汽車銷售季度報告；
	固定大小	設置了固定大小的佈局方式後，不管用於顯示儀表板的視窗的大小如何，儀表板都保持相同的大小； 此種佈局方式適用於大螢幕展示的儀表板（明確知道顯示視窗大小），比如監控中心大螢幕； 另外固定大小能指定元件的確切位置，如果儀表板中有浮動物件，選用此種佈局效果更佳；

4.3 自助儀表板-樣式

概述

樣式包含三部分內容：主題，背景，內邊距。

"頁面樣式”效果圖
對應的模型圖

主題

定義

主題：設置頁面的主題類型，生效於頁面和所有元件。有淺色主題和深色主題。

分類

1.主題為“淺色主題”，如下圖：

2.主題為“深色主題”，如下圖：

背景

定義

背景：設置頁面的背景，有單色和圖片兩種，預設為單色。

分類

1. 背景為“單色”，提供六種顏色供選擇，也可以點擊最後一個矩形設置其他顏色。 設置背景為單色 > 黃色，頁面背景為黃色，元件1和元件2背景不受影響，如下圖：

2. 背景為“圖片”，提供六張圖片供選擇，也可上傳圖片，不過一次只能上傳一個檔案。並且可以設置圖片背景的拉伸方式，有“適應，平鋪，拉伸，填充，原圖”五種方式。 設置背景為圖片，頁面背景為上傳的圖片，元件1和元件2背景不受影響，如下圖：

說明

• 可對上傳的圖片進行操作，上傳的圖片上有“預覽”和“刪除”兩個按鈕。

• 拉伸方式對比說明：

拉伸方式	效果圖	對比說明
適應		圖片等比縮放，圖片的最大邊放大到頁面最小邊時就不再放大，即保持圖片比例的同時最大化顯示圖片。
平鋪		若圖片大小小於頁面，則圖片挨個排列，直到排滿整個頁面。
拉伸		圖片不按比例縮放，根據螢幕顯示解析度拉伸。圖片占滿整個頁面。
填充		圖片等比縮放，按照圖片的最小邊來適應頁面的最大邊以達到填充頁面效果。如果圖片解析度和螢幕的比例不一樣的話，圖片會有部分顯示不了（超出螢幕之外）。
原圖		保持圖片原先的大小。當圖片的拉伸方式為“原圖”時，可設置圖片的位置，有“居左，置中，居右”三種。

內邊距

定義

設置頁面與元件上下左右的內邊距大小。

說明

內邊距設置具體情況如下圖：

4.4 自助儀表板-組件

概述

按照“垂直”和“水平”兩種階層結構，展示自助儀表板的元件結構。

作用

展示結構

如下圖中圖表2和圖表3為垂直結構。

說明

可以顯示不可直接在儀表板中發現的結構，例如篩選器的隱藏、元件的佈局方式為浮動。

組件定位

通過點擊“元件”裡的圖表進行快速定位，如下圖點擊圖表3，自助儀表板的圖表3被選中，元件四周有藍色短線框標識表示被選中狀態。