01 使用说明 | EdgeAgent Docs

面向用户: 实施工程师 / 项目交付 / 前端二次开发 版本: v1.0

viSCADA 2D 组态工具基于公司采购的乐吾乐(le5le)2D 可视化平台,并针对典型供热、源侧场景做了集成适配。本手册覆盖从打开工具到绘制、绑定数据、导出交付的完整使用流程。

ℹ️ 底层引擎的完整能力参考乐吾乐文档中心。本手册仅收录 viSCADA 场景下常用的功能与注意事项。

1 整体流程

图 1 2D 组态使用主流程

步骤	操作目标	对应章节
`1`	进入工具,认识界面四大区域	2 进入工具与界面总览
`2`	使用钢笔、铅笔、连线、锚点绘制与编辑图元	3 绘图与编辑
`3`	设置节点/图片/字体图标外观,调整画布属性与布局	4 外观与画布设置
`4`	为图元添加事件行为并绑定实时数据变量	5 事件与数据绑定
`5`	为节点和连线添加动画,实现动态可视化效果	6 动效
`6`	配置 MQTT、WebSocket、HTTP 与外部系统通信	7 消息通信
`7`	管理图纸、系统组件、我的组件与自定义图形库	8 图形库
`8`	文件保存与多格式导出(JSON/ZIP/HTML/Vue/React/PNG/SVG)	9 文件与导出
`9`	使用右键菜单完成图层、组合、状态切换等操作	10 右键菜单

2 进入工具与界面总览

2.1 访问地址

打开浏览器进入设计器:https://le5le-dev.iheatingos.com/。

图 2 2D 组态设计器总览

2.2 四大区域

设计器由 「画布」、「菜单栏」、「图形库」、「属性面板」 四个区域组成。

区域	说明
「画布」	中央绘图区域,将图形拖拽到画布上进行编辑
「菜单栏」	顶部导航,含 Logo、公司名称、文件编辑、钢笔、铅笔、放大镜、鹰眼地图、连线起止点样式、连线线宽、视图比例、自动锚点、禁用锚点、编辑/预览/锁定切换、分享、帮助、语言、登录
「图形库」	左侧面板,含「搜索」、「图纸」、「系统组件」、「我的组件」、「图形库管理」五个子页签
「属性面板」	右侧面板,根据当前选中对象显示三种形态——文件属性、图形属性、多选属性

2.3 属性面板三种形态

2.3.1 文件属性面板

点击画布空白处触发。

图 3 文件属性面板

2.3.2 图形属性面板

选中某个图形触发。

图 4 图形属性面板

2.3.3 多选属性面板

框选或按住 Ctrl 多选多个图形触发,提供对齐与分布操作。

操作分组	具体动作
对齐	左对齐、右对齐、顶部对齐、底部对齐、垂直居中、水平居中
等距分布	等距分布左右对齐、等距分布上下对齐
统一尺寸	相同大小
样式复制	格式刷

图 5 多选属性面板

3 绘图与编辑

3.1 连线

3.1.1 钢笔绘制连线

基础操作键:

操作	快捷键
开始	鼠标左键单击
暂停	鼠标右键单击或 `Enter`
结束	`Esc`

3.1.1.1 曲线、线段、直线、脑图曲线

图 6 钢笔绘制曲线/线段/直线/脑图曲线

3.1.1.2 横线

按住 Shift 键,左键绘制,右键结束(「连线类型」 选择 「直线」)。

图 7 钢笔绘制横线

3.1.1.3 竖线

按住 Ctrl 键,左键绘制,右键结束(「连线类型」 选择 「直线」)。

图 8 钢笔绘制竖线

3.1.2 连接绘制连线

从图元锚点拖出连线,按连线类型呈现不同效果。

3.1.2.1 曲线

图 9 连接绘制曲线

3.1.2.2 线段

图 10 连接绘制线段

3.1.2.3 直线

图 11 连接绘制直线

3.1.2.4 脑图曲线

图 12 连接绘制脑图曲线

3.1.3 连线变节点

在选中连线上右键,可在”连线”与”节点”之间切换。

图 13 连线与节点互转

3.1.4 切割与合并连线

操作	触发方式
切割连线	选中线,移入线锚点,按 `S`
合并连线	线连接到另一条线时,按 `Alt`

图 14 切割/合并连线

3.1.5 连线样式

样式项	可选值
「线条样式」	实线、虚线
「连线类型」	曲线、折线、直线
「连接样式」	斜角、圆角、默认
「线条渐变」	无、线性渐变
「线条颜色」 / 「浮动颜色」 / 「选中颜色」	自定义色值
「线条宽度」	数值
「背景」	纯色背景、线性渐变、径向渐变
「背景颜色」 / 「浮动背景颜色」 / 「选中背景颜色」	自定义色值
「透明度」	`0`~`1`
「锚点颜色」 / 「锚点半径」	半径 ≥ `0`
「阴影颜色」 / 「阴影模糊」 / 「阴影 X 偏移」 / 「阴影 Y 偏移」	自定义
「边框颜色」 / 「边框宽度」	宽度 ≥ `0`

图 15 连线样式面板

3.1.6 用连线绘制管道

方式一:线性渐变外观

路径:「外观」 → 「线条渐变」 → 「线性渐变」 → 设置渐变颜色。

图 16 线性渐变管道示意(设置)

图 17 线性渐变管道示意(效果)

案例地址:https://2d.le5le.com/?id=01871289-7110-708d-80f2-c654ea652d7e

方式二:连线边框 + 透明度

利用连线的边框样式与透明度组合,绘制地铁线路图等丰富管道效果。

案例地址:https://2d.le5le.com/?id=01888a73-2918-70ad-803e-767682ff0950

图 18 边框+透明度管道示意

起点样式 / 终点样式 / 线宽

图 19 连线起点样式

图 20 连线终点样式

图 21 连线线宽

3.1.7 连线动画

动画属性	可选值 / 说明
「动画效果」	水流、水珠流动、圆点
「动画线宽」	≥ `0`
「动画颜色」	自定义色值
「动画速度」	数值
「反向流动」	是 / 否
「循环次数」	数值(`0` 表示循环)
「下个动画」	动画 `tag`
「自动播放」 / 「保持动画状态」 / 「线性播放」	是 / 否

图 22 连线动画参数面板

典型用途:展示管道水流、能源等流动方向。

案例地址:https://2d.le5le.com/?id=0186531b-a898-7046-8062-680466d51d97

视频教程:用连线绘制管道效果

图 23 连线动画效果演示

3.2 锚点

图形和连线都可以添加、删除、移动锚点。

操作	快捷键	说明
「添加/删除锚点」	`A`	图形与连线通用
「移动锚点」	`G`	光标移到锚点上按 `G`,拖动鼠标完成
「添加手柄」	`H`	仅曲线锚点
「删除手柄」	`D`	仅曲线锚点
「切换手柄类型」	`Shift`	三种类型循环切换

图 24 添加/删除锚点

图 25 移动锚点

按 Shift 循环切换三种手柄类型:

两端手柄完全对称
一端手柄可以任意伸缩长度
一端手柄可以任意伸缩长度和变换角度

图 26 切换手柄类型

3.2.1 自动锚点

开启 「自动锚点」 时,系统自动选择距离最近的 2 个锚点相连;关闭时可自由选择锚点。

图 27 自动锚点开关

3.2.2 禁用锚点

开启 「禁用锚点」 时锚点不显示。

图 28 锚点正常显示

图 29 禁用锚点后效果

3.3 钢笔

独立钢笔工具(与连线钢笔共享基础操作,额外支持闭合路径)。

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

图 30 钢笔工具

3.4 铅笔

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

图 31 铅笔工具

3.5 放大镜

图 32 放大镜工具

3.6 鹰眼地图

画布缩略图,用于大画布的快速定位。

图 33 鹰眼地图

3.7 拖拽

可拖拽任意节点到画布。

图 34 拖拽添加节点

也可先单击选定节点,再单击画布放置。

图 35 点选添加节点

4 外观与画布设置

4.1 节点外观样式

属性	取值范围 / 说明
「角度」	`0`~`1`,设置尖角与圆角
「旋转」	图形旋转角度
「进度」	`0`~`1`,任意封闭图形(矩形、圆、SVG、封闭连线等)都可当进度条

图 36 节点外观属性面板

典型案例:用 「进度」 展示水位高低。

图 37 水位案例 1

图 38 水位案例 2

图 39 水位案例 3

视频教程:水位随数据动态变化

4.2 图片外观样式

图 40 图片外观样式

4.3 字体图标外观样式

图 41 字体图标外观样式

4.4 画布属性

属性	说明
「默认颜色」	预设节点(基础图形、文字、icon)默认颜色,拖入后自动统一
「画笔填充颜色」	预设基础图形的默认填充颜色
「背景颜色」	画布底色
「背景网格」 / 「网格颜色」 / 「网格大小」 / 「网格角度」	网格显示参数
「标尺」 / 「标尺颜色」	标尺显示

图 42 默认颜色与画笔填充颜色

图 43 背景颜色

图 44 背景网格与标尺

4.5 画布布局

设置画布与组件的排版布局。

图 45 画布布局

4.6 画布结构

通过 「画布结构」 面板控制每个图元的三种状态:

状态	行为
「可编辑」	可以编辑属性与事件
「被锁定」	可以执行事件和交互,不可编辑
「被禁用」	不能选中,完全不触发任何事件,可作背景底图

图 46 画布结构状态切换

5 事件与数据绑定

5.1 添加事件

为图元添加事件行为,实现交互效果。

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

图 47 添加事件

5.2 条件触发器

通过条件变化触发实时告警。

图 48 条件触发器配置

视频教程:条件告警

5.3 数据绑定

绑定变量到图元属性,快速实现实时数据动态展示。

图 49 数据绑定入口

图 50 变量列表

图 51 变量到图元属性的映射

图 52 数据绑定示例

演示视频:报表随数据动态展示

6 动效

6.1 节点动画

给节点添加动画与鼠标提示,可设置 「动画时长」、「动画效果」、「循环次数」、「下个动画 tag」、「自动播放」、「保持动画状态」 等参数。

6.1.1 内置动画

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

图 53 内置动画

6.1.2 自定义动画

通过新增动画帧,逐帧自定义动画。示例:进度条展示水位变化。

视频教程:自定义动画

图 54 自定义动画

6.2 连线动画

连线动画参数见 3.1.7 连线动画。此处作为动效体系的整体归位,不再重复表格。

图 55 连线动画参数

图 56 连线动画效果

6.3 鼠标提示

参考 Markdown 语法编写鼠标提示内容。

图 57 鼠标提示

7 消息通信

设计器支持 MQTT、WebSocket、HTTP 三种主流协议,实现”0 代码”的消息通信、数据实时修改与事件交互。入口见画布属性面板 「通信」 区。

图 58 画布通信配置入口

7.1 MQTT 通信

7.1.1 配置 EMQX MQTT 服务器

若无自有 MQTT 服务,推荐使用国产开源 EMQX MQTT 公共服务器。

图 59 EMQX 公共服务器

7.1.2 建立 MQTT 通信

地址示例:wss://broker.emqx.io:8084/mqtt。

图 60 MQTT 通信配置

7.1.3 发送 MQTT 消息

图 61 发送 MQTT 消息

7.2 WebSocket 通信

在 「通信」 中配置 WebSocket 地址。若无自有 WS 服务,可使用本地搭建的 node 测试服务器 :


npm install
node index.js

7.3 HTTP 轮询

图元绑定变量后,在 「通信」 中配置 HTTP 地址。默认提供的测试地址:/api/device/data?mock=1。

图 62 HTTP 轮询通信

参考视频:

8 图形库

左侧 「图形库」 面板含五个子页签。

8.1 图纸

管理项目图纸:新建文件夹、新建图纸、删除文件夹、删除图纸。

图 63 图纸管理

8.2 系统组件

乐吾乐系统图形库分为三大类,总计约 3700 个图元,格式包括原生代码(js)、阿里字体(iconfont)、图片(svg、gif)。企业版对图元已写好固定逻辑,支持良好。

系统组件外部索引:http://2d.le5le.com/

图 64 系统组件面板

8.2.1 基础图形库

序号	类别	格式	数量
`1`	基本形状	`js`	`22`
`2`	表单	`js`	`8`
`3`	脑图	`js`	`2`
`4`	流程图	`js`	`15`
`5`	活动图	`js`	`8`
`6`	时序图和类图	`js`	`4`
`7`	Echarts 图表	`js`	`4`
`8`	Highcharts 图表	`js`	`4`
`9`	Le5le charts	`js`	`5`
`10`	故障树	`js`	`12`
合计			`84`

基本形状包括:文字、图片、视频、iframe、icon。

图 65 基础图形库

视频 video:video 标签支持 MP4、WebM、Ogg 三种格式。

网页 iframe:

图 66 iframe 图元

搜索与管理:输入关键词可搜索系统组件,删除关键词并回车取消搜索。不常用的图形可以在 「图形库管理」 中取消勾选以提升加载速度。

图 67 系统组件搜索

8.2.2 电力图形库

序号	类别	格式	数量
`1`	逻辑门电路	`js`	`27`
`2`	电阻	`js`	`23`
`3`	电容	`js`	`16`
`4`	电感	`js`	`39`
`5`	开关、转换器	`js`	`46`
`6`	二极管	`js`	`13`
`7`	信号源	`js`	`29`
`8`	晶体管	`js`	`72`
`9`	仪表	`js`	`5`
`10`	电子显示设备	`js`	`15`
`11`	真空电子管	`js`	`7`
`12`	电子波形	`js`	`23`
`13`	转动与机械设备	`js`	`15`
`14`	电子逻辑计算器	`js`	`10`
`15`	电子传输/传播	`js`	`17`
`16`	电子未分类	`js`	`147`
`17`	液压符号	`js`	`245`
`18`	电气工程常用字母和符号	`iconfont`	`578`
`19`	国家电网图元规范	`iconfont`	`344`
`20`	SVG 国家电网	`svg`	`272`
`21`	SVG 电气工程	`svg`	`603`
合计			`2553`

8.2.3 物联网图形库

序号	类别	格式	数量
`1`	云	`js`	`313`
`2`	网络设备	`js`	`81`
`3`	电子产品	`js`	`147`
`4`	楼宇	`js`	`37`
`5`	物联网未分类	`js`	`35`
`6`	Iot-MNMS(移动网管域)	`svg`	`6`
`7`	City(城市)	`svg`	`21`
`8`	Iot-pump(泵)	`svg`、`gif`	`40`
`9`	Iot-HVAC(暖通空调)	`svg`、`gif`	`35`
`10`	Iot-waste water treatment(废水处理)	`svg`、`gif`	`129`
`11`	Iot-Boilers(锅炉)	`svg`	`21`
`12`	Iot-process heating(制程加热)	`svg`	`20`
`13`	Weather(天气)	`svg`	`51`
`14`	Iot-Labortory(实验室)	`svg`	`19`
`15`	鞋子专属定制	`svg`	`9`
`16`	2.5D Room(2.5D 房间)	`svg`	`16`
`17`	Iot-logistics(物流)	`svg`	`35`
`18`	Iot-water tank(水槽)	`svg`	`95`
`19`	Iot-Food(食品)	`svg`	`60`
`20`	Iot-building(建筑)	`svg`	`9`
`21`	Iot-machining(机器)	`svg`	`60`
`22`	Iot-CONTAINERS(容器)	`svg`	`14`
`23`	Iot-light(灯)	`svg`	`18`
`24`	Iot-PIPES(管道)	`svg`	`21`
`25`	Iot-valve symbols(阀门符号)	`svg`	`32`
`26`	Iot-WIRE(电线电缆)	`svg`	`13`
`27`	Iot-Material Handing(物料运输)	`svg`	`55`
`28`	Iot-Flow Meters(流量计)	`svg`	`24`
`29`	Iot-buttom(按钮)	`svg`	`40`
`30`	Iot-MIXERS(搅拌器)	`svg`	`21`
`31`	Iot-process cooling(制程冷却)	`svg`	`22`
`32`	Iot-SAFETY(安全)	`svg`	`27`
`33`	Iot-Chemical(化学)	`svg`	`36`
`34`	Iot-power(电源)	`svg`	`58`
`35`	Iot-valve(阀门)	`svg`	`20`
`36`	Iot-Plant Facilities(工厂设施)	`svg`	`36`
`37`	Iot-Meter(仪表)	`svg`	`12`
`38`	Iot-Motors(发动机)	`svg`	`18`
`39`	Iot-Computer Keys(电脑按键)	`svg`	`94`
`40`	Iot-Blowers(鼓风机)	`svg`、`gif`	`18`
`41`	大屏可视化	`svg`	`19`
合计			`1837`

8.2.4 2.5D 科技图形库

序号	类别	格式	数量
`1`	特殊图元	`js`	`10`
`2`	光伏系统	`svg`、`gif`	`7`
`3`	制冷站	`svg`	`8`
`4`	废水处理	`svg`	`15`
`5`	智慧城市	`svg`	`27`
`6`	电信机房	`svg`、`gif`	`15`
`7`	其他更新中……	……	……

8.3 我的组件

支持新建文件夹、上传图片、创建组件、删除文件夹、删除我的组件。

图 68 我的组件管理

常用图元组合可保存到 「我的组件」,方便下次直接拖拽使用,也可下载 JSON 分享给同事。

图 69 保存组件与分享

8.4 自定义图形库

乐吾乐 2D 可视化平台支持自定义图形库。

参考文档:炫酷组件,自己定义
演示视频:自定义图形库

9 文件与导出

菜单栏 「文件」 提供新建、打开、导入、导入 3D 组态文件、导入 Excel 模板、保存、另存为、下载 JSON、下载 ZIP、导出为 HTML、导出为 Vue2/Vue3/React 组件、下载为 PNG、下载为 SVG。

图 70 文件菜单

9.1 设置文件名、文件夹、分类

属性面板的 「文件夹」 即图形库图纸文件夹。

图 71 文件属性面板

9.2 下载 JSON

输出单文件 文件名.json,为 meta2d 可识别的 JSON 格式。

9.3 下载 ZIP 打包文件

目录/文件	说明
`文件名.json`	画布数据
`png/`	图纸中的 PNG 图片资源
`img/`	图纸中的其他图片资源

图 72 ZIP 包结构

9.4 导出为 HTML

目录/文件	说明
`img/`	图片资源
`js/`	`index` 入口,`meta2d` 核心库,`marked` Markdown 库,`lcjs` LightningCharts 库
`png/`	PNG 图片资源
`data.json`	画布 JSON 数据
`favicon.ico`	图标
`index.css`	样式文件
`index.html`	主页面
`使用说明.pdf`	运行参考

图 73 HTML 导出结构

9.5 导出为 Vue2 组件

目录/文件	说明
`img/` / `js/` / `png/`	资源目录
`vue2/`	Vue2 页面文件
`data.json`	画布数据
`index.html`	主页面
`使用说明.md`	运行参考

图 74 Vue2 导出结构

9.6 导出为 Vue3 组件

目录/文件	说明
`img/` / `js/` / `png/`	资源目录
`vue3/`	Vue3 页面文件
`data.json`	画布数据
`index.html`	主页面
`使用说明.md`	运行参考

图 75 Vue3 导出结构

9.7 导出为 React 组件

目录/文件	说明
`img/` / `js/` / `png/`	资源目录
`react/`	React 页面文件
`data.json`	画布数据
`index.html`	主页面
`使用说明.md`	运行参考

图 76 React 导出结构

9.8 下载为 PNG

输出 文件名.png。

📌 视频图元、iframe 图元无法解析为 PNG。

9.9 下载为 SVG

输出 文件名.svg(使用 canvas2svg 库)。

📌 视频图元、iframe 图元无法解析为 SVG。

10 右键菜单

鼠标右键或平板三指触摸调出右键菜单。

10.1 右键功能

分组	功能
层级	「置顶」 / 「置底」 / 「上一个图层」 / 「下一个图层」
组合	「组合」 / 「组合为状态」
锁定	「锁定」
编辑	「删除」 / 「撤销」 / 「恢复」 / 「剪切」 / 「复制」 / 「粘贴」

图 77 右键菜单

10.2 组合为状态

「组合为状态」 常用于展示开关的断开与闭合、风机的转动与停止、警示灯的状态切换等多状态效果。

视频教程:开关阀门多状态控制

图 78 组合为状态 1

图 79 组合为状态 2