前言

还在为写前端代码而头疼吗，本篇将带你体验一波零代码的前端可视化编程，场景是工业设备Web组态、设备管理、设备监控、故障预警、设备维保、设备数据分析和应用的设备全生命周期综合管理平台。

提示：以下是本篇文章正文内容，下面案例可供参考

一、前端模板

同一类型的工业设备往往配置基本完全相同，我们可以通过创建设备模板来快速配置同类设备。平台支持对模板进行分组、切换卡片视图和列表视图、根据行业筛选。

1、添加模板

点击【设备中心】->【设备模板】->【添加设备模板】，可直接创建设备模型。

2、其他功能

修改： 可以对该模板的名称、行业、模板组、备注进行修改。
复制： 新的模板会在名称最后添加“复制”字样，行业、备注、模板组以及组态工程也一起复制。
删除： 删除当前模板。若已有设备使用该模板，必须先清空该模板下的设备才能删除模板。

3、分享模板

设备模板分享指将一个租户中设备模板通过分享码的方式复制到其他租户中，原租户中的设备模板与分享租户中的设备模板可各自编辑和使用，不会相互影响。

分享设备模板

设备模型可以通过创建分享码进行跨租户分享。

用户可以限制分享码的有效期，目前提供了1天和7天。过期后，分享码将失效。

导入他人分享模板

用户输入分享码后，会获取该设备模板的名称，也可以进行重命名并指定分组。

二、模板配置

点击【模板配置】，跳转到组态设计页面。通过拖拽不同元件，设置大小颜色等属性，关联数据变量，完成自定义的监控画面。设计完成之后，点击【发布】按钮，即可将模板配置中的所有配置下发给设备，在【设备仪表盘】中可看到画面。

（1）数据源配置

创建数据源，然后在每个数据源中输入FlexManager账号的用户名、密码以及盒子序列号，导入监控点、告警和历史数据等。

（2）数据表配置

a、变量表

添加变量： 手动添加变量。可关联已添加的数据源的监控点，也可不关联。根据需要选择属性参数进行填写。

批量导入： 从已添加的数据源中选择监控点直接导入变量表，用监控点名称当变量名称生成变量，并自动将监控点中的数据类型、分组名、单位、状态说明、读写属性分别填入变量的数据类型、变量组、单位、状态说明、读写属性，并可进行修改。

批量修改： 多选变量后，可以对变量组、单位、读写设置、变量存储四个属性进行批量修改。

变量组管理： 对变量组进行添加、修改、删除。

导入同名不同组的监控点/报警会进行重命名才能导入，有两个命名规则：监控点名称_分组名_数据源名称、监控点名称_1(自增)，可根据需求进行选择。

b、告警表

添加告警： 手动添加告警。告警来源可选“变量”和“FBox”。告警来源为“变量”，从变量表中选择变量，自定义告警触发规则等属性参数；告警来源为“FBox”，从已添加的数据源中选择告警直接导入告警表。

导入告警： 从已添加的数据源中批量选择告警直接导入告警表。

批量修改： 多选告警后，可以对告警等级、告警组两个属性进行批量修改。

告警组管理： 对告警组进行添加、修改、删除。

c、事件表

添加事件： 手动添加事件。事件来源只有“变量”。从变量表中选择变量，自定义事件触发规则等属性参数。

批量修改： 多选事件后，可以对事件组进行批量修改。

事件组管理： 对事件组进行添加、修改、删除。

d、历史数据

批量导入： 从已添加的数据源中批量选择历史数据直接导入历史数据表。

注意：

告警表中存在的报警是处于订阅状态的，如果触发报警，会在【设备仪表盘】->【当前报警】中展示；如果报警条目不在告警表中，就是未订阅状态，触发报警也不会展示在【当前报警】中。
不在历史数据表中历史数据是未订阅状态，不会采集数据。

e、组态

在此处进行设备的主页面、缩略图和移动端页面的组态设计。拖拽不同元件设置相应的属性，关联数据变量，完成自定义的监控界面设计。

三、组态设置

a、视频配置

在此处可以添加视频地址，然后在监控页面查看该地址的直播视频。

Step 1

在【组态配置】>【视频配置】中添加一个或多个视频地址，在组态中添加视频元件，在属性页面中选择视频地址；也可以在属性页面中直接添加视频地址。

Step 2

点击【发布】，在监控画面中的视频元件中展示该地址的直播视频

进入查找视频地址并设置页面，熟悉流程。

注意：

当配置的视频地址是不存在的，会提示“无效的视频地址”；
可以在【设备管理】>【设备详情】>【IoT配置】中单独设置视频地址，如果单独设置之后就不继承该模板中的视频地址了。

b、权限项管理

默认有“管理员”、“操作工”两个角色，可以根据自己的需求对角色的添加、修改和删除，发布组态后，关联该模板的设备组态操作权限也会随之变化。

c、全局预设密码

此功能针对启用密码控制的可写元件。为了增加安全性，对可写元件设置密码之后，在操作此元件之前需要属于设置的密码，密码错误就不能操作。

Step 1

勾选元件的“启用密码控制”选项：

Step 2

修改全局预设密码，发布组态。

注意：全局预设密码默认是“888888”，如果没有修改，则使用默认密码；如果修改了，则使用修改之后的密码。

Step 3

关联此模板的设备监控页面中对设置的元件进行写值之前，输入设置的正确密码之后，才能写值成功。

注意：

如果密码不正确就会提示密码错误，不能进行操作；

模板密码设置为空时，就是恢复原始的设置“888888”；
可以对关联该模板的设备进行单独设置密码，在【设备管理】>【设备详情】>【IoT配置】中进行设置密码。修改之后，在监控页面中操作时，就可以使用单独设置的密码操作；
设备单独设置密码为空时，就默认继承关联的模板全局密码；

四、仪表盘

注意：没有开通变量实时数据存储的租户无法使用该功能。如有需要，请联系销售或者技术支持。

设备模板中加入仪表盘，方便用户统一配置设备仪表盘效果，不需要为引用同一个设备模板的设备重复配置。目前在设备模板中仅支持添加一个仪表盘。

设备模板发布后，该仪表盘会在相应的设备仪表盘中，仅支持在设备模板中修改。

1、添加报表：地图

点击【仪表盘】->【添加仪表盘】，输入仪表盘名称后，点击【编辑仪表盘】->【添加组件】下拉菜单->【添加报表】，在报表设计器中，选择“地图”（目前仅支持“地图”）。

报表名称： 支持中文、大小写字母、数字、短划线和下划线，且必须以中文、英文或数字开头，不超过32个字符。
经度： 选择表示经度的变量。
纬度： 选择表示纬度的变量。

注意：为保证轨迹查询正常显示，请将经纬度对应的变量设置相同的存储周期，并且存储周期不小于1分钟。

设备模型发布后，可以对设备的轨迹按时间进行查询。一次查询时间范围不超过7天。

2、组态设计

组态是指用户通过“搭积木”的简单方式来完成自己所需要的软件功能，而不需要编写计算机程序。在本系统中，我们通过组态的方式实现工业系统监控的可视化，并把这个工具称之为“组态设计器”。组态设计器中包含了丰富的元件，可以满足各个行业的系统监控可视化需求。

a、工具栏

工具栏在组态设计器的顶部，提供常用的快捷操作按钮，主要包括文件操作、对齐操作、图层顺序、视图操作、图库等。

b、设置启动画面

启动画面是指展示组态的第一页。网页端默认“主画面”为启动画面，且网页端的启动画面是不能删除的，但是可以修改其他组态画面为启动画面；移动端默认没有启动画面，需要进行添加设置。

注意：

移动端在没有启动画面的情况下，展示的是网页端的启动画面。

c、画布

大小调整
新建画布网页端大小默认为1280X720（16：9），移动端大小默认为720X1280（9:16），可根据需要进行调整。也可以双击画面进行设置。

位置调整
画布的位置可以根据需要进行调整，元件可以拖动在画布外展示，以便使用。

画布位置的调整需要用到的快捷键如下：
alt + 拖动鼠标：移动画布
ctrl + 鼠标滚轮：缩放画布
ctrl + （+ 键）、（- 键）：缩放画布
Ctrl + 0 ：恢复画布缩放

画布中的元件操作有以下快捷键：
方向键：按1px移动
shift+方向键：按背景网格对齐像素移动
Del & Backspace：删除
Ctrl-X & Shift-Del：剪切
Ctrl-C & Ctrl-Insert ：复制
Ctrl-V & Shift-Insert：粘贴
Ctrl-A ：全选
Ctrl-Z & Alt-Backspace：撤销
Ctrl-Y & Alt-Shift-Backspace：重做

背景设置
画布背景可以选择“纯色”、“图片”、“图库图形”三种，可根据自己的需要设置画布的背景。也可以双击画布进行设置背景。

总结

1、零代码可视化构建前端是可行的，至少在设备云组态这一块很受用。
2、前端零代码可以让我们有更多的精力去专注设备的性能可视化，而不仅仅是构建设备前端。