快速入门

创建可视化应用

  1. 进入平台,在大屏管理页面中,单击新建大屏

    新增1

  2. 新建大屏 对话框中,输入可视化应用的信息。

    新增2

  3. 单击确认

    应用创建成功后会跳转到大屏编辑页面

    然后跳转进入大屏编辑页面

    新增3

添加并配置可视化组件

添加并配置柱形图组件

  1. 在画布左上组件栏中,鼠标滑过第一列图表列,出现图标列组件,点击柱形图,将柱形图组件添加到画布中.

    编辑1

  2. 配置柱形图的样式

    柱形图2

  3. 配置柱形图的数据,

    代码编辑中,修改数据

    柱形图3

    修改好数据后,剪辑确认

    柱形图4

    然后点击刷新

    柱形图4

    通过上面的方式添加上您的大屏所需要的组件,完成大屏组件的拖拽。

调整组件的图层和位置

  1. 在平台大屏管理页面中,选择一个可视化应用,单击编辑

    调整组件的图层和位置-编辑-1

  2. 右击组件,选择调整组件的图层位置,或者在左侧图层栏,拖动组件上移或下移,调整组件图层位置。

    调整组件的图层和位置-编辑-2

  3. 在画布中通过拖拽调整组件位置,或在操作栏的参数中修改组件的坐标位置。

    调整组件的图层和位置-编辑-3

预览并保存可视化应用

  1. 单击画布编辑器顶部的预览图标,预览可视化应用。

    预览并保存可视化应用-预览-1

  2. 单击画布编辑器顶部的保存图标,保存可视化应用。

    预览并保存可视化应用-预览-1

查看可视化应用

  1. 在平台大屏管理页面中,选择一个可视化应用,单击预览

    查看可视化应用-预览-1

  2. 即可成功查看到可视化应用

    查看可视化应用-预览-2

可视化应用管理

编辑可视化应用

  1. 在平台大屏管理页面中,选择一个可视化应用,单击编辑

    可视化应用管理-编辑-1

  2. 在可视化应用编辑页面,修改组件的布局和配置,或者添加、删除组件,完成可视化应用的编辑。

    编辑完成后,可查看可视化应用。

重命名可视化应用

  1. 在平台大屏管理页面中,选择一个可视化应用,单击编辑图标。

    可视化应用管理-重命名-1

复制可视化应用

  1. 在平台大屏管理页面中,选择一个可视化应用,单击复制图标。

    可视化应用管理-复制-1

  2. 重新填写大屏信息,系统会自动生成一个相同的可视化应用

    可视化应用管理-复制-2

下载和导入可视化应用

  1. 在平台大屏管理页面中,选择一个可视化应用,单击下载图标,可以把可视化应用下载下来。

    下载和导入可视化应用-下载

  2. 在平台大屏管理页面中,选择一个可视化应用,单击快速导入图标,可以把下载下来的可视化应用导入进平台。

    下载和导入可视化应用-导入

温馨提示:

**注意json文件的大屏id是否与平台已有的数据重复,如果重复,需要先修改id,才能导入成功

删除可视化应用

  1. 新建的可视化应用默认是已启动状态,此时是不能删除的,需要把其改为已禁用状态

    删除可视化应用-1

  2. 然后就可以单击删除,删除可视化应用,同时也可以启动可视化应用

删除可视化应用-2

预览可视化应用

  1. 在平台大屏管理页面中,选择一个可视化应用,单击预览图标。

    预览可视化应用

数据配置管理

一个组件最多只有5种数据配置方式,分别为:静态数据、动态数据、WebSocket、设备数据和脚本数据

数据配置管理

静态数据

第一步,点击选择静态数据,编辑数据值

静态数据-1

第二步,弹出数据值编辑框,修改数据值,点击确定

静态数据-2

第三步,此时数据就成功被设置。

静态数据-3

动态数据

第一步, 选择数据类型为动态数据,然后填入请求接口url,选择请求方式

动态数据-1

第二步,编辑参数,参数必须是json格式,而且需要避免符号为中文符号

动态数据-2

第三步,刷新时间设置,默认为5s刷新一次(即5s重新请求一次接口)。接下来需要编辑接口返回的数据(注意里面的代码为js代码),让其渲染到组件上。

动态数据-3

第四步,点击刷新

动态数据-4

WebSocket

第一步,选择数据类型为WebSocket

WebSocket-1

第二步,编辑接口参数

WebSocket-2

第三步,编辑接口返回数据

WebSocket-3

第四步,点击刷新

WebSocket-4

设备数据

第一步,选择数据类型为设备数据,然后选择设备,配置参数

设备数据-1

第二步,编辑返回数据

设备数据-2

第三步,点击刷新

设备数据-3

脚本数据

第一步,选择数据类型为脚本数据

image-20201125172019476

第二步,编辑脚本代码

image-20201125172047088

第三步,编辑返回数据

image-20201125172131783

第四步,点击刷新

脚本4