Skip to Content

面向用户: 实施工程师 / 项目经理 / 终端使用者 版本: v1.0

本文介绍 viSCADA 2D 组态编辑器的整体布局与核心功能,涵盖登录、画布绘制、钢笔/铅笔、锚点、事件、动效、数据绑定与下发指令等模块,帮助读者在 0 代码条件下完成供热场景组态图的设计、联调与预览。

整体流程

2D 组态从登录到指令下发的端到端流程如下:

图 1 2D 组态配置整体流程

步骤操作目标对应章节
1完成账号登录,确保画布可保存1.1 登录
2认识画布与编辑区域1.2 画布
3使用钢笔/铅笔/图形库完成绘制2 钢笔(以及手柄)、3 铅笔(以及手柄)
4管理图形锚点与连线4 锚点
5配置画布通信并绑定事件、数据5 画布配置、6 事件、8 数据
6给节点和连线添加动效7 动效
7预览画面并向设备下发指令9 下发指令

1 总览

viSCADA 2D 组态编辑器主界面由四大区域构成:

  1. 画布区域
  2. 组件、图纸区域
  3. 菜单、登录区域
  4. 文件、组件属性区域

图 2 2D 组态编辑器主界面总览

1.1 登录

⚠️ 打开页面后请先完成登录,否则所绘制的组态图将不会被保存。

操作步骤:

  1. 点击页面右上角 「登录」 按钮。
  2. 键入登录信息(与供热系统同一套账号)。
  3. 完成登录。

图 3 登录入口示意

ℹ️ 同一项目的不同用户可以看到该项目下所有组态;不同项目的组态不互通。

1.2 画布

画布即绘画区域,将图形从图形库拖拽到画布即可进行编辑,完成组态图的绘制。

1.3 菜单栏

顶部菜单导航提供组态编辑与展示全链路入口,元素说明如下:

元素说明
「Logo」 / 「公司名称」可自定义品牌标识与公司名称
「文件编辑」新建、打开、保存、导入/导出组态文件
「钢笔」 / 「铅笔」自由绘制工具,详见 2 / 3
「放大镜」局部放大画布
「鹰眼地图」画布缩略图,用于快速定位大画布位置
「连线起点」 / 「连线终点」 / 「连线线宽」设置连线的起止样式与宽度
「视图比例」调整画布缩放比例
「自动锚点」 / 「禁用锚点」锚点行为开关,详见 4.3 / 4.4
「编辑」 / 「预览」 / 「锁定」切换画布工作模式
「分享」 / 「社区」 / 「帮助」 / 「语言」其他辅助功能
「登录」详见 1.1 登录

1.4 图形库

图形库分为以下几类:

类别说明
「搜索」按关键词搜索系统组件
「图纸」项目图纸
「系统组件」分为基础图形库和企业图形库
「我的组件」用户自己上传或绘制的图形
「图形库管理」筛选系统组件分类,提升加载速度

1.5 属性面板

属性面板根据当前选中对象的不同,分为三种形态。

1.5.1 文件属性面板

点击画布空白处时,显示当前画布的文件级属性。

图 4 文件属性面板

1.5.2 图形属性面板

选中单个图形时,显示该图形的可编辑属性。

图 5 图形属性面板

1.5.3 多选属性面板

选中多个图形时,提供对齐与批量操作入口:

操作分组可用操作
对齐「左对齐」、「右对齐」、「顶部对齐」、「底部对齐」、「垂直居中」、「水平居中」
分布「等距分布左右对齐」、「等距分布上下对齐」
尺寸/样式「相同大小」、「格式刷」

图 6 多选属性面板

2 钢笔(以及手柄)

钢笔用于绘制带有精确控制点的路径,支持通过手柄调节线段弧度。

操作快捷方式
开始单击鼠标左键
暂停单击鼠标右键 或 Enter
结束Esc
闭合/取消闭合Enter

📌 绘制过程中可通过拖拽手柄调节贝塞尔曲线弧度,使连线更平滑。

图 7 钢笔工具与手柄演示

3 铅笔(以及手柄)

铅笔用于自由手绘路径,适合绘制不规则形状。

操作快捷方式
开始连续拖动鼠标左键
暂停释放鼠标左键
结束Esc
闭合/取消闭合Enter

📌 铅笔同样支持手柄,用于二次修整已绘制路径。

图 8 铅笔工具与手柄演示

4 锚点

图形和连线都可以添加、删除、移动锚点,用以控制连线的吸附位置。

4.1 添加/删除锚点

📌 快捷键 A

操作步骤:

  1. 鼠标悬浮到 「编辑」 按钮,点击 「新增锚点」 按钮(当前使用的图形默认没有锚点)。
  2. 触碰到期望新增或删除的位置,点击鼠标左键即可完成。

图 9 新增锚点入口

图 10 新增锚点操作示意

4.2 移动锚点

📌 快捷键 G

将鼠标移动到目标锚点上,按一下快捷键 G,拖动鼠标即可完成锚点位置调整。

图 11 移动锚点演示

4.3 自动锚点

状态行为
开启系统自动选择 2 个最近锚点连接
关闭可自由选择锚点

图 12 自动锚点效果对比

4.4 禁用锚点

禁用锚点后,图形上不再显示锚点标记。

💡 禁用后不适合绘制,建议默认开启,特殊情况再手动关闭。

禁用前: 鼠标悬浮在图形上可见锚点。

图 13 禁用锚点前效果

禁用后: 鼠标悬浮在图形上锚点被隐藏。

图 14 禁用锚点后效果

5 画布配置

5.1 设置画布属性

字段说明
「默认颜色」预先设置默认颜色,拖拽到画布的节点(基础图形、文字、icon)自动统一默认颜色
「画笔填充颜色」预先设置画笔填充颜色,拖拽到画布的节点(基础图形)自动统一默认填充颜色

图 15 画布属性设置面板

5.2 画布通信

画布通信支持主流的 websocket、MQTT、http 协议,能够”0 代码”实现消息通信、数据实时修改和触发事件交互。

图 16 画布通信配置面板

⚠️ 画布通信信息必须先于数据绑定完成配置,否则 8.1 信息板 无法接收实时数据。

5.3 设置画布布局

用于对画布与组件进行整体排版布局。

图 17 画布布局设置演示

6 事件

6.1 添加事件

为图形添加相应事件即可实现对应的交互行为。

分类可选项
事件类型「鼠标移入」、「鼠标移出」、「选中」、「取消选中」、「鼠标按下」、「鼠标弹起」、「单击」、「双击」
事件行为「打开链接」、「更改属性」、「执行动画」、「暂停动画」、「停止动画」、「执行 JavaScript」、「执行 Window 函数」、「自定义消息」

图 18 事件配置演示

7 动效

7.1 节点动画

为节点添加动画与鼠标提示,支持配置以下参数:

字段说明
「动画时长」单次动画播放时长
「动画效果」内置或自定义效果
「循环次数」播放次数,0 表示无限循环
「下个动画 tag」当前动画结束后联动播放的下一个动画标签
「是否自动播放」画布加载时是否自动触发
「是否保持动画状态」动画结束后是否保留末帧

7.1.1 内置动画

可选效果:「无」、「上下跳动」、「左右跳动」、「心跳」、「成功」、「警告」、「错误」、「炫耀」、「自定义」。

图 19 内置节点动画效果

7.1.2 自定义动画

通过新增动画帧,逐帧自定义节点动画。

示例: 进度条,通常用来展示水位变化。

图 20 自定义进度条动画演示

7.2 连线动画

为连线添加动画与鼠标提示,配置参数如下:

字段说明
「动画效果」「水流」、「水珠流动」、「圆点」
「动画颜色」流动元素的颜色
「动画速度」流动速度
「流动方向」正向 / 反向
「循环次数」播放次数
「下个动画 tag」联动下一段动画
「是否自动播放」画布加载时是否自动触发
「是否保持动画状态」动画结束后是否保留末帧

图 21 连线动画配置演示

8 数据

8.1 信息板

信息板常用于给模型以及按需展示的图形添加实时数据展示能力。

图 22 信息板示例

8.1.1 MQTT 实时数据使用

操作步骤:

  1. 给画布配置对应的 MQTT 通信信息(详见 5.2 画布通信)。

    图 23 画布 MQTT 通信配置

  2. 选中所需 「信息板」 图形,在右侧操作栏点击 「数据」 栏,点击 「数据组」。

    图 24 数据组配置入口

  3. 配置数据组信息,通过 MQTT 通信工具发送一条数据,即可实时展示在信息板上。

    图 25 MQTT 实时数据展示效果

⚠️ 数据组的字段名必须与 MQTT 消息体的字段完全一致,否则无法正确回显。

8.2 数据转译

数据转译配合信息板以及点位控制时的回显使用,用于将特定的数字转译成特定的文字。

操作步骤:

  1. 打开 「数据转译」 编辑面板。

    图 26 数据转译编辑入口

  2. 编辑所需转译的点位。

    匹配项说明
    「匹配规则」越靠前优先级越高
    「参数匹配」模糊匹配输入的匹配项
    「全字匹配」必须与参数完全一致

    图 27 数据转译规则编辑面板

  3. 按上一步规则,实际将 1 转为 测试1 的效果如下图所示。

    图 28 数据转译效果示例

📌 底部固定项为预置规则,不可修改。自定义规则按从上到下优先级生效。

9 下发指令

9.1 模型控制

模型控制用于向下位对应的模型或设备发送指令。选中模型组件后,通过 「添加事件」 → 「下发指令」 填写参数信息,并在预览页面执行下发。

参数信息:

字段是否必填示例说明
「参数名称」是水泵启停在组态上展示的参数名称,预览页面选中设备后显示的控制点位名称
「参数 ID」是pump_switch对应物联平台的设备标识
「控制点类型」是开关类型可选 「开关类型」、「输入类型」、「连锁输入类型」

图 29 模型控制下发指令演示

⚠️ 下发指令的 「参数 ID」 必须与物联平台设备物模型的属性标识严格一致,否则指令将无法送达目标设备。

💡 建议先在测试环境完成下发指令的闭环验证后,再在生产环境正式启用。

01 设备类创建（单设备推送）