2.2.4 dashboard层次结构

在介绍dashboard之前，首先要了解dashboard的层次结构，如图2-6所示。

整个dashboard是一个站点，可以通过“侧边栏”→“dashboard选项卡”→“Site”进行站点的设置。在站点里面可以设置多个Dashboard Tab（分页面），包括首页、气候数据面板和电力数据面板。可以通过单击左上角的三个横线图标打开和切换到不同的分页面。

每个分页面的设置可以通过依次单击“侧边栏”→“dashboard选项卡”→“Layout”完成。每个分页面中可以布局很多不同的组，这些组组成整个页面，通过布局的调整可以美化大屏展示界面。每个组的设置界面可以通过依次单击“侧边栏”→“dashboard选项卡”→“Layout”，之后鼠标放在分组图标上出现，具体设置方式参见下一小节。组设置好以后，用户就可以在流程编辑器中拖入需要展现在这些组里面的各个小部件并进行配置，最终展现出完整的界面。

通过对dashboard不同层次结构的了解，我们在实现一个Dashboard界面之前，需要设计有多少个分页面、每个分页面有多少个组，这些组默认的宽度是多少，里面放置什么样的小部件，根据最终要展示的屏幕分辨率设置每个部件的宽度，最后在主题中调整要显示的样式配置方案。图2-7所示是在制作Dashboard界面之前做的设计草稿示例。