# 看板管理

​ 看板管理提供直观的可视化展示页面，具有相应分组权限的用户可以对属于该组的看板进行增删查改。

# 看板基本操作

​ 主界面上展示了一些当前已有的看板，将鼠标移动到某个看板上，将会展示一些基本操作，如下图所示。

​ 点击中间的查看按钮可以进入看板的预览界面，点击编辑可进入看板的编辑模式，该模式下的具体操作见编辑看板章节描述，点击复制可创建一个该模板的副本，点击发布可将该看板发布出去。勾选右上角的复选框可以进行看板删除操作。

# 添加看板

​ 页面右上角，用户名下方有添加看板按钮，点击即可进行添加看板的操作，如下图所示。根据不同的操作环境可以选择不同的模式，包括电脑模式、pad模式、手机模式等。

​ 左侧下方可以选择已有的模板进行添加，也可以选择空白模板建立全新的看板。右侧根据提示填写适当的内容，进行看板创建。建立好的看板如下图所示。

​ （注意，在选择分组时，应与数据源所在分组相对应，否则会导致没有查询数据的权限。）

​ 创建看板之后自动进入编辑模式，具体操作见下一章编辑看板章节的描述。

# 编辑看板

​ 修改已有的看板或者新建看板后需要对看板进行编辑，进入编辑界面后，可以看到如图 3‑6所示，页面大致分为四个区域：

​ 上方导航栏，提供了多种类型组件供用户按需选择，包括竖向柱状图、TopN柱状图、折线图、饼状图、仪表盘、雷达图、散点及迁徙地图、文本框、表格、图片边框以及一些特殊组件，如时间选择器、标签页等等，用户可以通过拖拽的方式将其拖动到下方效果展示窗口处，并根据需要调整位置及大小。

​ 左侧图层窗口显示了当前看板上所有的图层，可以在此窗口对图层整体进行操作，如上移、下移、置顶、置地、删除等，从而可以方便的设置各个图层的叠加顺序，避免图层之间的遮挡。

​ 中间的效果展示窗口就是目前设计的看板的大致预览；

​ 右侧样式配置可以设置背景板或组件的尺寸、颜色、图片等，同时可以设置是否将所建立的看板设置成模板。将看板设置成模板，可以在之后建立类似看板时选择该模板（如图 3‑5所示），无需重复配置，简化操作步骤。

# 柱状图

​ 柱状图包括竖向柱状图及topN柱状图。

1、竖向柱状图

​ 竖向柱状图适用于二维数据集（每个数据点包括x和y两个值），但只有一个维度需要比较的场景，用于显示一段时间内的数据变化或显示各项之间的比较情况，通过柱子的高低反映数据的差异，从而肉眼就可以看出各项之间比较的情况，数据之间没有必然的连续性。使用竖向柱状图展示数据的步骤如下：

​ 从顶部导航栏选择竖向柱状图的组件并拖入中间效果展示窗口，界面如下图所示：

​ 可以发现左侧图层栏多了一个新的图层，当前看板上存在的所有组件都会显示在图层栏里。

​ 选中该组件，右侧的样式设置自动跳转为对应该组件，在这里可以设置该组件的一些基本样式，如大小、颜色、坐标轴的格式等等，用户可以根据需要自由调整。当某个柱状图有多个数据系列的时候，可以对柱子进行堆叠。堆叠柱状图适用于若干系列都是某个总量的分量的情况，可以直观的展示某个分量在总量中的占比情况。比如用于展示今年WEB漏洞和APP漏洞的数量。在“样式配置-数据系列”下增加系列（默认为两个系列，可根据需要增减），并将需要堆叠的两个系列的“堆叠”文本框中的值设置为同一个数字（如都设为1），则这两个柱子会自动进行堆叠，如下图所示。

​ 点击上方的数据配置键，可以对该组件的数据来源进行配置，如下图所示：

​ 数据配置包括数据源、数据、绑定、触发事件、侦听事件几个部分。在数据源中，可选的类型包括JSON类型和QUERY类型。JSON类型主要用于静态数据的展示，每个组件本身都自带JSON示例，如下图所示。这些内容可以在数据框中直接修改，用户可以参照示例中的格式设置自己的JSON数据。

​ QUERY类型的数据源用于动态数据的实时展示。

​ 如上图 所示，在查询中选择建立好的查询语句（查询语句可以在数据管理模块中查看，具体描述见数据管理章节），点击右侧的小箭头，即可获取到查询语句读取到的数据，这些数据会以表格形式显示在下方的数据栏中，如下图所示。查询下方有设置间隔的文本框，用于设置该组件刷新的频率。

​ 数据下方有一栏绑定，绑定的作用就是将数据同步到图表中。对于柱状图来说，分类绑定的是柱状图横坐标描述的数据，表明图表将以这些数据分成不同的柱子，系列绑定的是要展示的条目，每个系列下面的值展示在图表中就是纵坐标的值。在本例中，将要展示不同IP地址的最大攻击时间以及平均攻击时间，因此将IP作为分类的依据，而最大值max_value以及平均值avg_value分别是两个不同的系列，绑定好数据，结果就会自动显示在图表里。

​ 侦听事件和触发事件用于监测用户的操作行为，通过侦听事件和触发事件的设置可以增强图表的交互性，根据用户需求及时给予反馈。这些操作需要在预览看板时才能展示出来，在编辑看板界面是看不到交互效果的。

2、topN柱状图

​ topN柱状图与竖向柱状图作用类似，用于显示各个项目之间的比较情况。topN柱状图一般是将数据排序，展示前N有效信息。这样的图能够直观清晰的看到数据情况。topN柱状图的样式如下图所示：

​ topN柱状图的样式配置及数据配置与竖向柱状图类似，设置样式，选择查询，绑定数据，即可完成topN柱状图的配置。

# 折线图

​ 折线图适用于二维的大量数据，以及多个二维数据的比较，一般用于表示趋势的变化。折线图的样式如下所示：

​ 同样的，通过样式配置设置折线图的大小、颜色、坐标轴等样式参数，通过数据配置查询数据并绑定数据，完成数据配置。

# 饼图

​ 饼图包括普通饼图及百分比饼图。

1、普通饼图

​ 普通饼图用于显示各项的大小与各项总和的比例，适合不要求数据精细的简单占比比例图，它能够明确显示数据的占比情况，尤其适合渠道来源等场景。饼图的样式如下所示：

​ 通过样式配置可以设置饼图是饼状或是环状的，是普通饼图或者是南丁格尔玫瑰图，以及其他大小、颜色等基础设置。数据配置的方法和柱状图的数据配置方法类似，可参考3.3.3.1柱状图章节的具体操作步骤完成。通过数据配置查询并绑定类目和值的数据即可完成配置。

​ （注意，绑定在值上的数据格式必须是数字，否则饼图依然会显示但是各个部分是等分的。）

2 、百分比饼图

​ 百分比用于显示某个条目所占的百分比，适用于数据本身就是所占比例的情况。百分比饼图的样式如下图所示。

​ 同样在右侧栏进行样式配置及数据配置。在进行数据配置的时候，系统会自动为数据乘以100%，因此用查询语句查到的数据本身应当是一个小数占比，而非百分数或其他类型的数据。

# 仪表盘

​ 仪表盘一般用于展示某个项目的完成进度，类似汽车油箱仪表盘，设置最大最小值，用户可以清楚的看到当前得到的数据处于哪个阶段。仪表盘的样式如下图所示。

​ 右侧样式配置栏可设置仪表盘的初始值及终止值，以及一些基本的颜色大小设置，同时还可以设置仪表盘的分段，不同的阶段用不同颜色表示，这样可以更清晰的显示当前数据所处阶段，增强数据可读性。数据配置与其他组件类似，建立查询并绑定数据。

# 雷达图

​ 雷达图适用于多维数据（四维以上），一般用于表示某个数据字段的综合情况，能够了解各项数据指标的变动情形及好坏趋向。但雷达图的数据条目不易过多，太多会造成辨别困难。雷达图的样式如下图所示：

​ 在样式配置栏中设置雷达图的样式，圆形、多边形、大小、旋转角度、颜色等等，在数据配置中通过查询语句获取需要的数据，并将数据与指标、值绑定起来，并设置各指标的最大值，即可呈现雷达图的效果。

# 地图

​ 地图包括散点地图和迁徙地图。

1、散点地图

​ 散点地图适用于有空间地理位置的数据集，比如查看攻击源地理位置分布。所有数据以点的形式展示在地图上，点的大小对应该点的数据大小。散点地图的样式如下图所示：

​ 在样式配置中设置地图的样式，可以选择是中国地图或世界地图，还可以设置图的大小、各区域的颜色、以及数据点的最大最小值、颜色样式等。在数据配置中，通过查询语句获取数据并进行系列、城市、值的绑定，并设置要着重突出的topN的数量，从而完成散点地图的配置。以IPS近七日攻击态势为例，通过query语句获取到攻击源城市src_location_city和该城市的攻击量doc_count，将src_location_city与城市绑定，将doc_count与值绑定，则该散点地图将会以doc_count的数值大小为依据，用不同大小的点标注出所有城市在地图上对应的位置。

2、 迁徙地图

​ 迁徙地图用于表示某个位置到另一个位置的动态路径，例如攻击源到攻击目标的路径展示。迁徙地图可以显示源位置及目标位置，以及两者之间的运动轨迹。如下图所示：

​ 样式配置中同样可以选择中国地图或世界地图，除基础设置外，还可以设置源、目标、线条的颜色、大小、粗细等。数据配置中需要通过查询获取数据后，绑定桶路径、源数据、目的数据。桶路径指的是封装了源数据及目的数据的数据块路径。

# 文字

​ 文字组件是用于展示数据的文本框，可以是静态的固定文本，也可以是通过查询获取到的动态数据。一般而言，静态文本用于对其他组件或数据进行解释说明，动态文本用于展示某项数据的具体数值，如攻击总量等数据。

​ 文本框的样式同样在样式配置中设置，包括字体的颜色、大小等参数。文本框显示的内容通过数据配置进行设置。对于静态文本框的内容，通过数据配置中的JSON修改，如下图所示，在数据下的text中输入需要显示的文本，并在下方的绑定框中绑定text即可显示。

​ 对于动态文本框，则仍然是通过QUERY查询语句获取数据，并且进行数据的绑定。间隔是刷新该数据的时间间隔。如下图所示。

# 表格

​ 表格用于直接展示数据，适用于数据、维度较多的情况下的数据展示。表格的样式如下图所示。

​ 在样式配置中，可以设置表格分页的组件，分页的标准，以及一些大小、颜色等基础样式。

在数据配置中，首先通过查询语句获取数据，而后进行列的数据绑定，可以设置列名、列宽，如下图所示。

​ 序列复选框代表是否将此列数据作为序列号显示，勾选后，该列数据不显示具体数值，而是显示1、2、3…这样的序号，排序复选框代表是否能够按照此列数据大小对整个表格进行排序，勾选后，该列标题后面会出现一个小箭头，点击该箭头可使整个表格按照当前列数值的升序或降序排列。

# 特殊组件

​ 特殊组件指的是一些并非直接用于展示数据，而是为其他展示数据的组件做辅助支持的组件，用于提高页面的交互性及友好度。目前系统支持的特殊组件包括标签页、轮播、容器、时钟、时间选择器、选择器、管道七种。

1、标签页

​ 标签页组件类似一个容器，通过切换分页可以展示不同的内容。标签页用于需要在同一个位置展示不同效果的情况，通过切换标签页来实现数据、样式、图表类型等的转换。

​ 将一个标签页组件拖拽到面板中，选中该标签页，再去导航栏中选择拖拽其他组件，则默认将这个组件放进当前标签页中。标签页内的子组件的配置方法与前面对各组件描述的方法一致。

​ 如上图所示，右侧样式配置栏可以配置标签页的页数、名称、以及大小颜色等基本信息。点击标签页名字即可切换页面。

2、轮播

​ 轮播组件与标签页组件类似，也是作为一个容器可以容纳不同组件的转换。可以设置它的轮播周期、样式等，提高看板的界面友好度。适用于多个效果需要自动循环播放的场景。轮播的样式如下图所示。

​ 在右侧对轮播组件的样式进行设置，可设置轮播的周期，指示器的样式，轮播页的数量及顺序等。轮播页内容纳的组件的配置与之前介绍过的组件基本配置是一样的。

3、容器

​ 容器组件可以将其它看板用一个小窗口集成到当前看板上，展示相关的其它看板情况。适用于需要在当前页面上不打开新页面就可以查看另一看板内容的情况。容器的样式如下图所示：

​ 在数据配置中，可以设置容器内所容纳的看板的编号。看板编号可以在预览该看板时的地址栏获取。在样式配置中，除基础设置外，还可以设置容器是否默认隐藏，是否显示边框，是否显示交互。默认隐藏意味着在正常情况下，该看板是不显示的，可以设置侦听事件，当触发该事件时，再显示该容器。显示边框是给容器设置了一个边框，可以有效区分容器内的看板和实际当前页面的看板情况。显示交互的作用是用户在查看该看板时，可以拖动、关闭容器窗口。若关闭显示交互功能，则该容器是被固定在页面上的，用户不能进行移动等操作。

4、时钟

​ 时钟组件用于显示当前系统时间。可以在样式配置中设置时间格式。时钟的样式如下图所示：

5、时间选择器

​ 时间选择器提供了一个样式基本固定的选择时间的控件，它主要用于需要切换时间参数，修改查询范围的情况。时间选择器的使用需要与其他组件配套使用，利用参数和侦听事件将时间选择器与其他组件联系起来。下面以DDOS攻击告警时间的展示为例说明该过程。

​ 要使用时间选择器，首先应为查询设置参数。设置查询参数需要用户具有管理员权限，操作步骤如下：系统管理-查询管理-编辑查询，在查询体中，将需要设置为可变参数的字段改写成{ {xxx} }的样式，其中,xxx代表的是参数名。

​ 查询过去七天的攻击告警时间的查询体如下图所示：

​ 在这段查询体中，设置的时间范围是固定的，从“now-7d”到“now”，可查询从当前时间往前推七天的数据。要想查询可变参数的某段时间的数据，则应将查询体改写如下图所示：

​ 红框中的部分为修改的部分，将起始时间设置成了{ {start} }，终止时间设置成{ {end} }，其中start和end是可变参数名，意味着该段查询体查询的是从start开始到end结束这一时间段的数据。设置好之后，点击页面上的查询配置，可以发现系统自动识别到了这两个参数，并将它们标记了出来，如图所示。在此页面上，可以设置该参数的类型及默认值。

​ 设置好参数后，即可回到编辑看板界面为控件配置数据。

​ 拖入一个时间选择器，可对它进行样式设置及数据配置。在数据配置中，为该时间选择器增加侦听事件，如下图所示：

​ 对应时间选择器，它所侦听的事件就是修改时间范围，改变时间范围的数据，因此为该事件选择器增加一个timeRangeChange事件。

​ 然后在看板上添加一个竖向柱状图用于显示DDOS近七天攻击告警时间分布，样式配置及基本数据源配置与前面章节描述的方法一致。不同的是，修改了原来查询的参数后，在看板管理中对组件进行数据绑定时也可以看到所设置的参数，并且可以设置默认值。如下图所示。

​ 绑定数据之后，还需要为该组件添加侦听事件，用于侦听时间选择器的变化，它所侦听的事件也是timeRangeChange事件，与时间选择器的事件相对应。针对该事件的操作是改变查询参数，点击加号增加需要改变的参数，参数的来源为时间选择器的开始时间及结束时间，目标参数为我们所设置的start及end。如下图所示。

​ 这样就完成了时间选择器与其他控件的关联。

6、选择器

​ 选择器与时间选择器类似，不同的是选择器中的值是文本，而不是时间。选择器就是平时经常用到的下拉选择框。它适用于需要切换文本参数的情况。例如，需要展示不同公司的数据时，通过选择选择器中的值，可以完成查询数据的切换。同样需要通过侦听事件来触发改变查询参数，获取新的查询结果，选择器的配置过程与时间选择器的配置基本一致。

# 图片

​ 图片组件提供了五种类型的边框，用于图片的展示，或直接使用此边框作为其他组件，如文本等内容的边框。在样式配置中可以选择文件进行填充。这几种类型的边框如下图所示：

# 看板的保存及发布

​ 看板编辑完成后，可以对看板进行预览、保存等操作。页面上方导航栏右侧的三个按钮功能分别为预览（用于展示所建立的看板的最终效果），保存（保存对看板进行的修改），发布，用户可按需选择。

（注意修改看板后进行保存。）