探索监控可视化工具


本文介绍监控可视化工具页面的主要元素。

监控可视化编辑器


下图展示了监控可视化编辑器的页面。


../_images/editor.png


编辑器页面各区域的名称与功能说明如下所示。


名称

说明

工具栏

包含快速绘制图形工具及页面编辑工具。

管理区

显示图纸、图元、组件及资源的存放目录,并管理图纸、图元及组件。

预览区

显示目录中的图纸、图元、组件及资源的缩略图。

画布

绘制图纸或图元。

配置区

配置图纸和图元的属性,进行数据绑定。

查看区

查看该图纸或图元的架构信息:
  • 列表:该图纸或图元中的所有元素的树形列表。
    • 父子关系:拖动图元至其他图元上即可设置父子关系。

    • 排列顺序:由上往下为图元层次由后往前。即列表排序第一的图元位于图纸或图元最底层。

  • 图层(仅对图纸显示):该图纸中的所有图层信息,可添加删除图层。选中图元可将图元归至不同图层进行分类。

  • 状态(仅对图元显示):该图元的状态信息。

  • 鹰眼:俯视图,快速选择图纸或图元的局部位置。

  • 数据:该图纸或图元的所有 JSON 数据。


工具栏


在编辑图纸或图元时,你可以通过工具栏中的图形工具快速绘制图形或者通过页面编辑工具更改页面状态。

图形工具


工具栏中的图形工具如下所示。


图纸图形工具


../_images/page_toolbar1.png


图元图形工具


../_images/toolbar.png


下表说明了工具栏每个按钮的功能。


按钮

说明

click

编辑模式。

draw

绘制不规则图形。

shape

绘制椭圆、圆角矩形、矩形体、正多边形、三角形体、星形体以及圆弧形。

text

添加文本。

border

绘制边框。

chart

绘制饼图、单维柱状图、柱状图以及曲线图。仅在编辑图元时可用。

link

可连接图形中心,仅在编辑图纸时可用。

controller

提供文本框输入与按钮等控件,支持对资产数据进行控制。

DTD1

添加 DTD 页面,并且可传参给指标可视化工具页面。

alarmlist

添加资产的告警列表,可直接在监控可视化工具页面中进行告警确认或直接进入告警操作台操作。


页面编辑工具


工具栏中的页面工具如下所示。


../_images/page_toolbar.png


下表说明了工具栏每个按钮的功能。


按钮

说明

bind

绑定页面资产。

redo

撤销/重做。

scale

显示/隐藏刻度尺。

grids

显示/隐藏网格线。

save

保存当前页面。

preview

预览当前页面。

reload

重新加载。

zoom

当前页面缩放比例。左右拖动数字可调整比例尺。

fullscreen

缩放到全屏。

lefttoolbar

隐藏/显示左侧工具栏。

righttoolbar

隐藏/显示右侧工具栏。

switchfull

开启/关闭全屏模式。全屏模式。


图元编辑工具


工具栏中的图元工具如下所示。


../_images/element_toolbar.png


下表说明了工具栏每个按钮的功能。


按钮

说明

distribute

横向/纵向分布,仅当选中三个及以上图元时可用。

align

对齐,仅当选中两个及以上图元时可用。

search

搜索图元配置项。

advanced

隐藏/显示高级配置项。