产品简介

1.简介

乐吾乐大屏可视化组态软件，是乐吾乐公司完全自主研发的“零代码”Web 组态可视化+数字大屏编辑工具，支持以 2D/2.5D 等形式构建实时数据展示、监控告警、动态交互的组态画面，完全满足国产化需求。为物联网、电力能源、工业互联网等领域的 Web 组态、智慧数字大屏、工控可视化、触摸屏 UI 等提供可视化解决方案。丰富的行业模板和组件库、2D 与 3D 的无缝融合，能够快速搭建酷炫、生动、直观、形象的数字大屏和可视化解决方案。配合一键离线部署功能，帮助企业快速交付，降低开发成本，助力数字化转型，携手打造数字化时代的前沿大屏应用。

2.在线体验

https://v.le5le.com/

3.特点

3.1 Web 组态，零代码，一键构建，无限可能

无需编程背景，就能轻松构建复杂的可视化界面，创建出酷炫惊叹的数据可视化大屏。
Web 组态：支持 2D/2.5D 组态搭建、数据通信、动效、事件和交互。
直观的拖拽操作： 用户只需通过直观的拖拽和放置操作，即可在画布上添加、调整和排列各种组件、图表和控件。零代码拖拽方式让用户能够实时预览界面效果，直观地观察布局、样式和数据的变化。
零代码连接数据：通过智能配置，将实时数据源或 Mock 数据与图表或其他组件进行关联，无需编写代码即可实时动态展示数据及监控告警。
实时预览和编排：用户可以实时预览界面效果，同时可以随时进行调整和修改。这种所见即所得的特点使用户能够在设计过程中快速优化界面和功能。

总之，大屏可视化设计器极力降低数据可视化创作门槛，使更多的人都能参与其中，从而实现更广泛的应用。无论是专业人士还是普通用户，都可以在不费力气的情况下，创造出引人注目的数据可视化大屏和数字孪生，探索数据的奥秘，实现更智能化的决策和应用。

3.2 实时展示，自动化连接数据

零代码实时数据展示：在大屏可视化设计器中，实时数据展示也是零代码的。通过智能配置，可以选择 Mock 数据或设备数据源，轻松实现数据实时展示，无需编写代码。

零代码数据绑定：通过定义数据模型，快速绑定图元数据；支持接口请求或 excel 导入数据模型

支持多种通信方式：支持 mqtt、websocket、http、SSE 等多种方式数据通信。

3.3 丰富的大屏可视化组件

大屏模板：内置多款主题和布局，让大屏设计更加简单。

大屏控件：文本、音频、视频、时间、日历、列表、表格、提醒、轮播、导航、输入、工控等。

大屏图表：包括折线图、面积图、柱状图、条形图、饼环图、散点图、雷达图、关系图、桑葚图、仪表盘、地图。

大屏设备：光伏系统、制冷站、废气治理、废水处理、智慧城市、智慧港口、汽车制造、火力发电、电信机房、矿山、采暖系统、锅炉房、风力发电、国家电网、电气工程图元。

大屏素材：标题、装饰、面板

3.4 支持多方式部署和发布

企业版：私有化部署大屏可视化设计器平台
单项目部署：
- 一键云发布，在线云部署
- 导出大屏项目，单项目私有化部署
- 导出 HTML、Vue、React 等组件包
- 支持大屏查看页面内嵌集成到第三方平台

3.5 多端适配能力

支持 Chrome、Firefox、Edge、Safari等主流浏览器
支持移动端 webview 方式访问
支持手机、平板、PC、大屏等多端展示

扫一扫，查看更多移动端解决方案

3.6 强大的扩展能力

组件库扩展：控件、图表、图形、图元、模板的扩展
数据显示扩展：条件显示、数据格式显示、自定义函数扩展等
交互事件扩展：系统消息、自定义消息、生命周期 hook、系统接口函数等
智能算法扩展：支持自定义拖拽智能算法，自定义连线算法等
动画扩展：节点逐帧定义动画、自定义算法动画
排版扩展：支持自定义排版布局算法

3.7 满足国产化需求

可以满足纯国产环境：

2D、大屏：100%纯自研，国产

3D：基于开源 3D 引擎 Babylon.js 研发的的数字孪生和组态开发，类似国产系统基于 Linux 研发

支持国产系统：支持基于 Linux 的国产系统

支持国产数据库： 人大金仓数据库、华为高斯数据库、达梦数据库

4.应用场景

物联网数字可视化
工业智能制造组态
触摸屏端 UI
工控可视化
零代码 Web 应用

5.技术路线

前端框架采用主流的 Vite + Vue3
后端采用 Java 语言，框架 springboot
绘画引擎采用 meta2d.js
底层绘画技术为 Canvas
消息通信支持 Websocket、MQTT、http、SSE
客户端支持 Chrome、Firefox、Edge 等
后端接口设计遵循 Restful Api 接口设计标准及规范
支持多端访问，包含浏览器和移动端
提供离线部署安装方式，支持离线/在线更新

6.性能测试

图纸画笔(节点和连线)总数不超过 20000，性能良好、使用流畅

节点	图片	动画	测试结果
20000	0	0	使用流畅
10000	0	100	使用流畅
2000	0	1000	使用流畅
2000	10	0	使用流畅
500	300	0	略有卡顿

实时数据刷新性能

数据点	刷新时间
1000	30ms
2000	40-50ms

7.解决方案（可在线编辑/预览）

更多方案：https://le5le.com/enterprise/solution

7.1 暖通可视化（2.5D）

7.2 废水处理系统（2.5D）

7.3 废气处理（2D）

7.4 机房可视化运维平台（3D 大屏）

7.5 暖通可视化系统（3D 大屏）

8.在线使用

在线编辑：https://v.le5le.com/

**部署试用： **https://doc.le5le.com/document/118947577

9.技术咨询

电话：17740685317（吴）

技术群：https://doc.le5le.com/document/120479036

10.商务咨询

	武汉乐吾乐科技有限责任公司联系人：胡女士电话：19107154517 座机：027-63497374 邮箱：business@le5le.com 地址：武汉市东湖新技术开发区金融港四路 18 号光谷汇金中心 15B 栋 5 楼

大屏与 2D 区别

大屏可视化组态编辑器涵盖了 2D 可视化组态编辑器的所有功能，是 2D 可视化编辑器的增强版。

乐吾乐大屏可视化组态编辑 demo： https://v.le5le.com/

乐吾乐 2D 可视化编辑器 demo： https://2d.le5le.com/

一、主要差别

产品	组态能力	数据报表能力	3D 场景交互	方案管理	模板管理	适用场景
大屏可视化	零代码	✔	✔	✔	✔	多页面组态
2D 可视化	低代码	低代码开发或二开	×	×	×	单页面组态

1.组态能力及适用场景

1.1 2D 可视化编辑器：“低代码”单页面的组态工具

1.2 大屏可视化编辑器：“零代码”单多面的组态工具

2. 数据报表能力

支持编辑、合并、拖拽图元到单元格、分页等的表格控件

3. 3D/2D 场景交互

3.1 大屏可以实现大屏页面与内嵌 3D/2D 场景相互通信

底层原理是利用了 iframe 通过postMessage发送消息

4. 方案管理

大屏提供方案管理系统，统一管理方案，设置系统方案，共享方案

4.1 可视化管理中心

4.2 个人中心

二、详细功能对比清单

序号	指标类型	指标项	规格要求	大屏可视化	2D 可视化
1	多端访问	浏览器	支持 Chrome、Firefox、Edge 等浏览器	√	√
2		移动端	支持 webview 方式访问	√	√
3	功能性指标	数据对接能力	支持 mqtt 访问数据	√	√
4			支持 websocket 访问数据	√	√
5			支持 http 访问数据	√	√
6			支持接口请求/excel 导入数据集	√	×
7		丰富的组态能力	内置文本、时间、倒计时、时间轴、轮播行、图标、视频、音频、图片、GIF、按钮、单选选项卡、选项卡、导航、FLV 视频流轮播、链接、iframe、轮播页面、单选框、多选框、时间选择器、下拉框选择器、表格、输入框、按钮、开关、进度条、滑块等控件；支持自定义控件	√	内置少量基础表单
8			内置柱状图、条形图、折线图、曲线图、面积图、仪表盘、饼环图、散点图、雷达图、关系图等图表；支持自定义图表	√	内置少量基础图表
9			内置形状、脑图、流程图、活动图、故障树、时序图、拓扑图、箭头等基础图形；支持自定义图形	√	√
10			支持 3D 场景与大屏交互	√	×
11			内置画布模板、布局模板，支持场景和模板的快速搭建。	√	×
12			支持引入电力图元、物联网图元、2.5D 图元，支持自定义图元	独立购买	独立购买
13			内置标题、装饰、面板等大屏素材	√	×
14			具备实时数据动态显示，同时支持定制中间件条件格式化或条件筛选显示。	√	√
15			丰富的动画功能，配合条件很方便的进行动画告警。并支持节点逐帧自定义动画。支持节点配置多个动画，实现在多个动画中切换。	√	不支持配置多个动画
16			丰富的事件、自定义消息，支持组态联动，通过事件或消息发送设备指令。	√	√
17			支持组件多样化的外观属性设置，包括颜色、背景、字体、字号、渐变、大小、对齐、格式刷等，支持组件组合为状态。	√	√
18			支持图元的分组定义。	√	√
19		报表能力	支持编辑、合并、拖拽图元到单元格、分页等的表格控件（开发中）	√	简单 table 控件，无合并单元格、拖拽、分页等功能
20			Chart 图表生成器（开发中）	√	简单 echarts 控件，需要代码编辑
21		管理能力	设置用户解决方案为系统方案。多用户访问	√	×
22			设置用户模板为系统模板。多用户访问	√	×
23			设置用户组件为系统组件。多用户访问	√	×
24			支持大屏组态图的导入导出及组态图源代码导入导出。	√	√
25			支持组态图环境迁移能力	√	√
26			支持组态设计页面内嵌到第三方平台。	√	√
27			支持组态查看页面内嵌到第三方平台。	√	√
28	交付性指标	系统易用性	产品设计简单实用，具有良好的可视化和界面友好度。	√	√
29		部署方式	提供离线部署安装服务，并交付安装手册。	√	√
30		产品升级	支持离线/在线更新。产品版本如有升级更新，厂家应主动进行免费版本升级。	√	√
31		源码交付	免费维护期内能够持续移交最新版本产品源代码，且源代码可运行。	√	√
32		自主可控	产品不包括其自己不可控的外资核心技术、模块或者产品，其能够做到自主可控。	√	√
33	可视化管理中心	运营管理	运营人员后台管理大屏方案、模板、组件等	√	×
34	可视化运行系统	生产运行	集大屏、3D、2D 与一体的运行查看预览系统	√	仅预览 2D
35	用户中心	用户中心	登录、注册、大屏/3D/2D 项目管理，项目图纸分享给团队，团队管理	√	×
36	技术支持服务		1V1 技术支持服务	√	√
37	培训服务		1V1 培训服务	√	√

大屏快速入门

乐吾乐大屏可视化设计软件

一、在线使用

https://v.le5le.com/

二、步骤

通过本章内容，你将快速学习到大屏可视化设计平台的全流程开发

1.创建图纸

大屏可视化设计平台分为 3 部分，左侧为资源面板，包含了众多可被使用的方案、模板、组件等，中间为图纸面板，是编辑设计可视化图纸的核心区域，右侧为属性面板，用于设置和查看图元或图纸的具体信息。首先让我们从创建图纸开始。

默认情况下，进入大屏可视化设计平台系统会为你自动创建一张空图纸，你也可以通过文件下列表手动新建图纸，新建图纸后让我们进行下一步操作：

1.搜索或选择系统资源/我的资源，拖拽放置到画布

2.编辑大屏可视化界面

3.设置文件名称、分类

4.保存图纸

2.添加事件

大屏可视化平台的事件机制能够帮助你实现复杂多样的用户交互效果，通过简单的配置即可完成，配置步骤如下：

1.添加事件：事件类型**、**事件行为**、触发条件**

图元事件的配置位于右侧的“交互”面板中，我们要先选择要绑定事件的图元然后再配置右侧数据，具体步骤如下：

在选择交互事件类型后，会发现列表中多了一个事件项，我们需要在此面板中进行事件的配置，我们以一个鼠标悬浮背景变红的案例为参考，具有步骤如图：

2. 锁定画布：执行事件

当我们的事件配置好后，为了防止误触在编辑模式下是不会被触发的，只有在锁定画布进入预览模式的时候才会有效。自己也去尝试一下吧。

3.设置动效

大屏可视化提供了强大的动画系统，支持实现自定义的动画效果，如同配置事件一样，你只需要选择图元并点击“动画”选项卡进行简单的配置即可使用。大屏可视化平台支持三种动效：组件特效、连线特效、自定义特效

1.组件特效

系统为组件特效提供了众多了动画类型，用户可自行选择

** 2.连线特效**

****默认情况下大屏可视化平台隐藏了图元的锚点信息，你需要在“工具“中找到并点击“显示锚点”的选项来显示锚点信息。然后就可以按照下方的顺序去配置动画了，系统为连线类型提供了三种特效，可自行尝试看看效果。

你可以按照如下的配置规则实现一个水流动画，注意连线的宽度已设置为 0

3.自定义特效

自定义特效主要用于组件，当系统提供的动画效果不满足需求时，你可以自己设计动画效果，该选项在动画类型的“自定义”中，点击后，你就可进入自定义动画的界面，该动画为帧动画，你需要配置每一帧的动画效果。详细步骤如下图：

再点击播放按钮，就能播放动画啦

4.数据通信

在大屏可视化设计平台中，实现数据通信是十分简单的，平台已将相关设置集成在数据通信面板中，只需要进行简单的设置即可实现相关内容。

大屏可视化平台支持常见的数据通信协议：HTTP、MQTT、WebSocket，用户可根据实际需求进行任意的选择，在完成配置后点击确认系统将会自动发起请求，同时具有断线重连机制，最大强度的保证了通信的稳定性

对于接收到的数据，大屏可视化平台会自动根据一定的格式进行解包，并实时更新界面，用户只需要将注意力放在数据格式的处理上，而无需关心界面的刷新。关于数据通讯的更多内容，你可参考《实时数据》一章

5.预览/分享/发布

大屏可视化提供过了一站式产品分享发布机制，让项目上线无后顾之忧，在完成大屏可视化项目的搭建后，我们可以通过预览功能来查看图纸工作是否符合预期，可通过分享功能来将图纸分享给他人，同时可以通过发布功能将项目上线到公网，让全世界都能看见你的优秀创作。

1.预览

预览功能主要是用来让作者检测项目运行是否符合预期的，只需要点击编辑器菜单栏的 “运行(预览)” 按钮，即可进入到预览视图中。

2.分享

分享功能用于将图纸分享给他人，对方能基于你的图纸进行二次创作。只需要点击菜单栏的分享按钮，进入分享主界面后，点击分享公开，再将你的链接分享给他人，他们就能访问你的作品啦。

3.云发布

云发布功能用于将项目发布到公网上，用于将其快速上线，只需要点击菜单栏的云发布按钮，进行域名配置，就能快速发布上线啦。

6.私有部署与集成

对于某些场景，需要将图纸项目集成到自己的业务之中去，在线云发布可能不太适合，这种情况下需要进行私有化部署与集成，大屏可视化平台也提供了私有化部署的方式，你可以通过文件菜单下的 “下载离线部署包” 选项将其下载到本地，待文件下载完后，接下来阅读文件包中的《离线部署包使用说明.pdf》即可，里面阐述了私有化部署与集成的详细步骤。

7.图纸管理

在保存完图纸后，我们可以在左侧的菜单栏进入“我的资源“目录，该目录下分类得保存了用户的相关数据，同时你也可在此面板下执行资源的上传保存到云端等操作，同时你也可以通过前往个人中心（https://account.le5le.com/ ）去查看所有在乐吾乐保存的文件信息和其他关于账号的所有信息。

三、解决方案

https://le5le.com/enterprise/solution

组态教程

# 大屏与iframe项目集成交互

引言

在乐吾乐大屏可视化中我们经常会遇到嵌入已有的乐吾乐 3D 可视化项目，乐吾乐 2D 可视化项目甚至是开发的已有项目的需求。如果您有这方面的需求，本文档将为您详细描述如何完成上述需求。

1、3D 方案的引入

访问v.le5le.com进入乐吾乐大屏可视化平台，如果您重未使用过本产品，请先注册为乐吾乐用户，方便您及时保存自己的项目到云端。右上角点击登录然后选择注册，注册完成后登录即可跳转回大屏编辑器页面。

如果您已有 3D 项目，可以将左侧的资源图形界面的“系统资源”切换到“我的资源”，左侧选择 3D，可以便捷的显示您已有的 3D 项目，选择您的 3D 项目将其拖拽到编辑器中间的位置，即可呈现入图所示的界面。

2、嵌入 2D 及网页

在第 1 节中，我们集成了 3D 项目，下面介绍集成 2D 及任意网页。

如图所示即可嵌入任意网址，如果您像嵌入 2D 项目只需知晓您 2D 项目的运行网址并填入上述网页地址一栏即可。接下来为大家展示如何查询 2D、3D 运行地址。

3、2D，3D 运行地址查询

页面顶部，靠右有一个“账户中心”，点击可跳转至乐吾乐 Le5le - 用户中心

如图示，可以选择您要查询的项目类型，点击进入后选择您的要嵌入大屏的项目

将第 2 点“嵌入 2D 及网页”中的属性“网页地址”填入您复制的链接

4、调整可操作区域并嵌入图表

【重要】**有时您会遇到中间嵌入的页面无法操作，或者控件无法操作甚至丢失的情况，请检查大屏项目的控件层级，确保您的层级正确**。

调整完页面布局后，在此点击中间的 3D 画布层，选择修改毛玻璃的颜色 alpha 通道。

如果您不需要毛玻璃可以修改背景模糊的值，该值越接近 0（但不能为 0，可填 0.01），毛玻璃越清晰，反之越模糊。

5、大屏与嵌入的项目之间交互

5.1 3D 向大屏发送消息

在 3D 中您可以先择向父窗口发送消息来向大屏发出消息事件，在大屏中选择监听消息

5.2 大屏向 3D 发送消息

大屏选择一个交互事件，将执行的动作类型设置为“向场景发送消息”，3d 的触发变成接受窗口消息，请确保您输入的消息名是一致的且不含特殊字符。

5.3、本地项目与大屏的消息通信

本地项目与大屏的消息通信可以参考 iframe 的消息事件【iframe 跨域消息通信(postMessage 和 message 事件)】。本地项目为子窗口，大屏项目为父窗口。大屏项目本地集成到您的项目时，注意修改路径为相对路径，另外注意大屏的 iframe 是否为您项目的父类窗口。避免多个 iframe 嵌套的问题。

6、嵌入项目的修改

嵌入的项目需要到项目所在的可视化编辑器中（3d.le5le.com）进行编辑。重新编辑完成之后，选择保存当前项目

返回大屏可视化编辑器中保存您的项目

两个项目都保存好之后，在大屏可视化编辑器中选择您拖入的网页控件，右键替换方案即可查看最新的嵌入项目效果。

7.项目部署

项目部署需要参考文档：

【乐吾乐 | 文档中心】大屏可视化 - 下载离线部署包/组件包

https://doc.le5le.com/document/34

如果内嵌的网页显示有误需要检查一下大屏到的项目 json 文件中链入的网址是否正确。

使用手册

1 总览

开始设计：https://v.le5le.com/

1.1 画布

画布即绘画区域，将图形拖拽到画布进行编辑，绘制大屏。

1.2 菜单栏

顶部菜单导航，一级菜单可设置 Logo、公司名称、文件、编辑、工具、帮助，设置大屏名称、其他平台链接和登陆。

二级菜单支持快捷新建、保存、格式刷、直线、文字、铅笔、钢笔、连线类型、连线起点、连线终点、视图比例、缩放设置、自适应设置、编辑/游览模式、运行、分享、二维码发布、云发布。

1.3 资源、数据和结构

系统资源:官方提供的解决方案、模版、控件、设备、图表、素材、图形和组件。

我的资源:即用户自己创建的内容。包括方案、模版、组件、图片和 3D。

数据：数据源、属性、和解析。

结构：图层和分组

1.4 属性面板

1.4.1 画布属性面板

点击画布空白处

1.4.2 单选图元属性面板

选中图元

1.4.3 多选图元属性面板

选中多个图元

2 资源

2.1 系统资源

系统资源包含官方提供的物联网和电力等行业的方案及模板、控件（包含基础、时间、面板、提醒、轮播、导航、输入和工控图形库）、设备（包含企业版物联网图形库和电力图形库）、图表（包含 echarts 图表和 le5le-charts 图表）、素材（包含常用图标、标题、装饰和各种行业场景图元）、图形（开源基础图形库，包括基本形状、脑图、流程图、活动图、时序图和类图、故障树）。

方案/模板拖拽到画布或者双击即可展示。

其他系统图元可以直接拖拽到画布中生成图元

2.2 我的资源

我的资源包括用户创建的方案、模板、组件、上传的图片和在乐吾乐3d 可视化平台创建的 3d 场景

2.2.1 方案/模板

新建文件夹、编辑文件夹、新建方案/模版、删除方案/模版、删除文件夹等

2.2.2 组件

新建文件夹、编辑文件夹、新建组件、删除组件、删除文件夹等

一键更新我的组件

通过大屏可视化组合的组件，如果组件后续更新后，想将样式同步到之前用到了该组件的图纸，大屏可视化平台提供“一键更新组件”功能。

注意：图纸中有组件，右键才会出现“一键更新我的组件”按钮。

2.2.3 图片

新建文件夹、编辑文件夹、上传图片、删除图片、删除文件夹等

2.2.4 3D

拖拽 3D 场景到画布，右键编辑 3d 场景

3 文件

文件：文件的新建、打开、导入、导入 visio 文件、保存、另存为、仅保存 json 数据、下载 JOSN 文件、导出为 ZIP 文件、下载离线部署包、下载 Vue2 组件包、下载 Vue3 组件包、下载 React 组件包、下载为 PNG、下载为 SVG、主题切换。

3.1 文件夹操作

新建文件夹、编辑文件名（默认文件夹除外）、删除文件夹（默认文件夹除外）、在该文件夹下创建图纸，图纸右键可移动到其他文件夹

3.2 文件下载

3.2.1 下载 JSON 文件

文件结构

文件名.json meta2d 能识别的 json 格式文件

3.2.7 下载为 png

文件结构

文件名.png

注意：视频图元、iframe 图元无法解析图片内容。

3.2.8 下载为 svg

文件结构

文件名.png

注意：使用的是 canvas2svg 库，视频图元、iframe 图元无法解析。

4 编辑

包含撤销、重做、剪切、复制、粘贴、全选、删除操作及对应的快捷键。

5 查看

包括窗口大小、放大缩小画布、100%视图大小、打开鹰眼地图/放大镜、勾选自动锚点、显示锚点、添加/删除锚点等。

显示锚点

一般我们想直接对图元进行连线操作，需要开启“显示锚点”。如图所示：

自动锚点

自动锚点，一般需要开启显示锚点，自动锚点操作如下：

自动锚点总是会更新为距离最近的连接锚点。

6 帮助

主要是帮助文档链接，包括产品介绍、快速入门、使用手册、快捷键、企业服务与支持和关于我们等

7 格式刷

7.1 格式刷操作

选中图元，点击'格式化'按钮，再点击其他图元，完成一次格式刷操作。

选中图元，双击'格式化'按钮，可连续点击其他图元，完成多次格式化，再点击'格式化'按钮取消格式刷。

7.2 清除格式

选中图元，点击'清除格式'按钮，格式恢复默认状态，框选多个图元，可以清除多个图元格式。

8 连线

8.1 钢笔

单击'钢笔'按钮，可在画布上绘制一条连线。

双击'钢笔'按钮，可在画布上连续画线，再次点击'连线'按钮，取消连线。

可以配置连线样式、起点样式和终点样式。

锚点显示可以在工具中勾选“显示锚点”

8.2 铅笔

点击“铅笔”，可以开始在画布上连续绘制。再次点击，取消铅笔绘制。

9 数据通信

9.1 数据源（数据获取）

9.1.1 mqtt 通信

9.1.1.1 配置 emqx mqtt 服务器

如果没有自己的 mqtt 服务,这里推荐使用国产开源 emqx mqtt 服务器

9.1.1.2 建立 mqtt 通信

9.1.2 websocket 通信

配置通信

如果没有自己的 ws 服务，可以使用我们本地搭建 [node 测试服务器]，先 npm install，再运行：node index.js

9.1.3 http 轮询

请求方式可以选择 GET/POST,请求头/请求体支持配置动态参数，例如：{"Authorization": "Bearer ${token}"}，动态参数获取优先级：路径参数>本地存储(localStorage)>cookie。官方测试接口：/api/device/data?mock=1

9.1.4 其他

数据通信建立时，勾选'同时保存到我的实时数据'并保存后，下次可以直接在搜索框获取建立的通信连接。

9.2 属性列表（变量列表/数据点列表）

9.2.1 新键属性

9.2.2 excel 导入

下载 Excel 示例

从 Excel 导入，导入刚刚下载的 Excel 示例

9.2.3 在线接口

接口返回格式可以参考下接口格式

9.2.4 我的属性列表导入

建立属性列表后，如果点击了“保存为我的属性列表”后，下次可以直接通过我的属性列表导入。

需要注意：每次点击我的属性列表下拉选项，不会完全替换当前属性列表，而是追加到当前属性列表，如果属性名相同，后者会覆盖前者。如果需要完全替换。可以先点击清空列表，再点击下拉选项。

9.2.5 导出

下载为 json 可以作为在线接口的接口返回参考。

下载为 Excel，可以下次直接从 Excel 导入，方便分享给其他设计人员。

9.3 数据解析

可以拿到数据源返回的数据，做数据解析处理。

10 右键

右键功能包括：置顶、置底、上一个图层、下一个图层、组合、组合为状态、锁定、删除、撤销、恢复、剪切、复制、粘贴等。根据图元类型右键菜单会有不同。

10.1 进入可视化编辑

进入编辑状态，选中中间的场景，右键进入大屏/2d/3d 可视化编辑。

10.2 替换方案

进入编辑状态，选中中间的场景，右键点击“替换方案”，弹框选择要替换的方案。

10.3 选中锚点右键

工具-开启选中锚点后

选中锚点右键支持添加手柄/删除手柄/切换手柄。也可以通过对应的快捷键切换。

11 画布

11.1 设置大屏画布属性

画布尺寸可以调整作图的大屏区域。所有图元应保证都在这个区域内。

背景颜色和背景图片，同时设置的话会先绘制背景颜色再绘制背景图片。

11.2 预览设置

可以配置预览页面大屏缩放方式和是否显示滚动条。

11.3 进阶设置

包括：

可以配图标请求地址,这里推荐阿里字体图标库，仅限 vip 用户,具体操作如图。

图标库字体名查看：

初始化动作

打开图纸后，会执行的脚本。示例如下：

console.log('上下文',context.meta2d);//可以获取到当前的meta2d实例，然后进行操作。

11.4 辅助设置

开启连线相交弯曲设置后，后面绘制的连线如果和其他连线有相交部分，会自动生成“拱形”曲线。拱形曲线只对线段和直线有效。

12 外观

12.1 单选图元

大屏对齐，可以将该图元对齐到大屏边界/中心；
外观，可以配置图元的显示样式；
图元双击设置文本后，可以配置文字的样式；
鼠标提示可以配置图元 hover 提示，支持 markdown 语法。
翻转、禁止等配置。

一些图元，会有自身的属性配置

12.2 多选图元

对齐，可以将多个图元做对齐处理；
外观和文字可以设置选中的图元整体的样式；
多个图元翻转、禁止等配置。

13 动画

13.1 节点动画

设置动画类型、播放次数、结束状态、线性播放、自动播放、下一个动画，一个图元支持添加多个动画。

13.1.1 内置动画

闪烁、缩放、旋转、上下跳动、左右跳动、颜色变化、背景变化、文字变化、状态变化、翻转、自定义。

13.1.2 自定义动画

通过新增动画帧，逐帧自定义动画。

示例：水位变化动画效果；

13.2 连线动画

给连线添加动画，设置动画类型、动画速度、动画颜色、轨迹宽度、正反流动方向、播放次数、是否自动播放、下个动画 tag。

动画类型：水流、水珠、圆点。线段/直线类型支持箭头、水滴动画。

14 数据

14.1 通信（已取消）

配置单个图元的通信，仅支持 http 请求，开启轮询时，配置的 http 请求将加入到全局的通信队列进行轮询请求。关闭开启轮询，则仅在该图元创建时请求一次数据（open 打开图纸时）。

在页面配置通信后，需要保存图纸重新刷新页面，才会开始请求接口数据。

14.2 数据

点击数据面板，鼠标经过"添加动态数据"，可以选择 x、y、宽、高、文本、进度等内置的一些属性，也可以添加自定义属性。

14.2.1 绑定数据点

前提：

1.建立了数据源，数据通信成功。

2.建立了属性列表

绑定过程如下：

这里自定义支持多层属性，可以参考官方图表中图表图元的配置。

例如：

pen:{
  echarts: {
    //...
    option: {
      series: [
        {
          name: "系列1",
          type: 'line',
          data: [40, 20, 90, 60, 70, 80]
        }
        //....
      ],
    }
  }
}
如果想改第一个data数据，可以添加如下属性名:
//echarts.option.series.0.data.0

14.2.2 本地调试

如果没有建立通信，但想要展示一个实时动态数据效果，可以在绑定数据点处配置本地调试。

注意：只支持基本数值类型的模拟，及字符串、整数、浮点数、布尔类型。格式如下：

固定值： 直接填写，例如：10
随机值： 值1,值2,...。例如：1,2,3,4,5
范围数字： 最小值-最大值。例如：0-1.0 或 0-100
随机字符串： [长度]。例如：[8]

14.3 关联设备

关联设备这个属性是一个业务属性，如果配置了，我们在发送数据（下发设备时）会携带这个属性，表示“下发指令到哪个设备”。除此之外，没有其他功能含义。

15 状态

给图元的数据添加状态，可以用于条件告警动画、数据状态等场景。

图元发生数据变化时才会触发状态的执行。

触发条件和动作的配置说明详见：下一章 16 交互

16 交互

选中图元->选择"交互"面板->鼠标经过添加交互事件。

事件类型：单击、双击、鼠标右键、鼠标移入、鼠标移出、获取焦点、失去焦点、鼠标按下、鼠标抬起、监听全局消息。

添加触发条件：当配置的触发条件成立后才能执行动作，支持配置多个条件。

添加动作：事件类型触发且触发条件满足后去执行的动作，包括打开链接、打开视图、播放动画、暂停动画、停止动画、更改属性、打开弹框、发送消息、发送数据、播放视频、暂停视频、停止视频、自定义函数、全局函数、向场景发送消息、向父窗口发送消息。

16.1 触发条件

触发条件：支持添加多个触发条件，触发条件之间可以做“和（&&）”运算（满足全部条件）或者“或（||）”运算（满足任意条件）

16.1.1 条件类型为关系条件

属性名：指该图元的属性

运算对象：可以和固定值比较

关系运算：

“>” - 大于

“>=” - 大于等于

“<” - 小于

“<=” - 小于等于

“=” - 等于

“!=” - 不等于

“[)” - 包含，与数学上相同，例如：[0, 100) 0~100，包含 0 不包含 100； [0,100] 0~100,包含 0 和 100

“![)” - 不包含，“介于”以外的

运算对象：可以是固定值，也可以和其他图元的属性做比较

示例：

① 图元本身的 text 属性数据值大于 50 并且小于 80 时执行动作

② 图元本身的 text 属性数据值大于 50 或者等于 80 时执行动作

③B 图元的 text 文本数据大于 A 图元的 text 文本数据时。注意确保 text 值为数值类型。

16.1.2 条件类型为高级条件

支持自定义脚本，实现更复杂的判断，需要返回 true 表示条件成立，返回 false 表示条件不成立。

示例：

① B 图元的文本属性大于 50 并且 A 图元的文本等于 80

const pen_A = context.meta2d.findOne("a8068d4"); //A图元id
if (pen.text > 50 && pen_A.text === 80) {
  return true;
} else {
  return false;
}

16.2 动作

16.2.1 打开链接

16.2.2 打开视图

打开视图是指打开另外的大屏/组态场景，每个图纸保存后都会生成唯一的 id，可以在地址栏拿到。

这里填写视图 ID 即可。

16.2.3 播放、暂停、停止动画

示例地址：冷源群控系统 2

可以选中一个开关，查看他的事件配置：

及判断当前选中状态，去控制”管路“的动画暂停/播放。

16.2.4 更改属性

项目地址：换热站远程监控系统

16.2.5 打开弹框

支持配置窗口标题，配置后,弹窗会出现边框，未设置标题则不会展示边框。
支持配置弹框位置，未配置则居中展示
支持配置弹框大小，固定值，单位 px，未配置默认画布宽度 80%。

画面 URL 支持动态参数。例如：

https://view.le5le.com/v/?id=${urlid}   //这个urlid将取当前点击图元的urlid属性值。

16.2.6 发送消息

可以从参数中拿到当前配置的消息参数（params）和当前点击的对象图元（pen）。

注意: 消息名称不要和内置消息冲突：内置系统消息

16.2.7 发送数据

发送数据一般用作下发数据到设备，支持 mqtt、websocket、http 三种通信。

具体使用：发送数据指令

16.2.8 播放、暂停、停止视频

可以控制视频控件播放/暂停/停止

16.2.9 自定义函数

支持自定义脚本扩展自己的业务逻辑，仅支持原生 javascript 脚本。

可以拿到当前点击图元对象，和上下文（meta2d 对象）

16.2.10 全局函数

将函数挂在到全局对象下，事件执行时会去调用对应的函数。

16.2.11 向场景发送消息

场景案例：智慧楼宇管理系统-New

对应的事件配置：

16.2.12 向父窗口发送消息

场景案例：智慧楼宇管理系统-New

对应的事件配置：

17 结构

17.1 图层

展示当前图纸中所有图元所在的图层结构。

单击文本可以定位图元位置，如果不再可视区域，将会到移动画布使图元到视图正中心，双击可以设置该图元名称（描述）；
图标可以切换当前图元的锁定状态，具体包括：① 可编辑：可以编辑属性事件；② 禁止编辑：可以执行事件和交互；③ 禁止编辑和移动；④ 禁止所有事件：不能选中，完全不出发任何事件，可以当背景底图。

3.图标可以控制当前图元的显示/隐藏；

17.2 分组

点击新建多个分组，双击可以修改分组名称。分组设置好后，可以选中单个图元，给该图元选择分组。

可以控制某个分组中多个图元的显示/隐藏。

大屏更新 3D 项目

0. 前言

用户只能编辑自己的项目或团队授权的项目。

1、在大屏进入 3D 编辑

在包含 3D 的大屏项目中，在编辑中右键，点击”进入 3D 可视化编辑“

2、更新 3D 可视化或模型

参考 3D 可视化使用手册，可以自行编辑 3D。

编辑或替换 3D 模型：

单击选中模型，在右边属性面板点击编辑或下载模型文件到 3D 建模工具里面编辑后上传替换即可

3、保存 3D

【注意】用户只能编辑自己的项目或团队授权的项目，如果不是自己的项目，可以另存为到自己项目下即可。

4、在大屏中替换 3D 场景

在大屏中，在 3D 场景上右键，选择”替换方案“

核心库教程

# API接口文档（pgsql）

采用前后端分离架构，乐吾乐后端服务提供一整套完整的 web 组态编辑器的所有数据接口，包含 2D/3D 图纸接口服务、文件接口服务和用户接口服务等，安装包版本提供后端可执行程序文件，后端源码版提供 Java 源码。用户也可以自行按照接口文档去实现部分必要的接口，参考接口文档如下：

全局规则

默认：所有接口返回通过是否包含 error 字段来判断结果成功。

•调用调用成功：直接返回数据，不能包含 error 字段

// 例如：请求用户信息返回结构
{
  "id": 1,
  "username": "用户名"
}
•调用失败时，返回： { error: '错误原因'}

// 例如：请求用户信息返回结构
{
  "error": "请先登录",
 	"xxx": "其他可选自定义错误信息"
}

以下接口除非特殊说明都需要携带以下参数

名称	位置	类型	说明
Authorization	header	string	用户登录 token

大屏接口列表

获取登录信息

**URL: **

/api/account/profile

Method：

GET

参数

无需多余参数

名称	类型	必选	中文名
id	string	是	用户 id
account	string	是	账户
avatarUrl	string	是	头像 url
username	string	是	用户名
phone	string	是
email	string	是
teams	[object]	是	团队
id	string	是
name	string	是
company	object	是	公司
id	string	是
name	string	是
department	object	是	部门
id	string	是
name	string	是
roles	[string]	是	角色
inviteCode	string	是	邀请码
wechat	string	是	关联微信账号
github	string	是	关联 GitHub 账号
sina	string	是	关联新浪账号
vip	integer	是	会员有效期截至时间
corporation	object	是	企业
id	string	是
name	string	是
owner	boolean	是
license	string	是	营业执照

示例：

{
  "id": "44",
    "account": "enim dolor",
    "avatarUrl": "http://dummyimage.com/100x100",
    "username": "夏超",
    "phone": "18139363365",
    "email": "e.snrsqift@qq.com",
    "teams": [
    {
      "id": "39",
      "name": "设反下门持"
    },
    {
      "id": "77",
      "name": "院装先口任年"
    },
    {
      "id": "76",
      "name": "研色问严"
    }
  ],
    "company": {
    "id": "31",
      "name": "来教元理但百"
  },
  "department": {
    "id": "94",
      "name": "的分上适传候"
  },
  "roles": [
    "in sit qui",
    "tempor in exercitation aliqua officia"
  ],
    "inviteCode": "32",
    "wechat": "aliqua ut aliquip in",
    "github": "ut aliquip",
    "sina": "consequat exercitation dolor cillum mollit",
    "vip": 1662364456
}

// 例如：请求用户信息返回结构
{
  error: '请先登录',
    xxx: '其他可选自定义错误信息'
}

新增大屏项目

URL：

/api/data/v/add

Method：

POST

Body

名称	位置	类型	必选	中文名	说明
name	body	string	是	数据项	none
image	body	string	是		缩略图地址
data	body	object	是		图纸数据
type	body	string	否		数据分类
case	body	string	否		应用场景
folder	body	string	否		所属文件夹
template	body	boolean	否		是否为模板

示例：

// 下面为通用大屏项目文件示例
{
    "data": {//图纸数据
        "x": 32,
        "y": 32,
        "scale": 1,
        "pens": [
          ...
        ],
        "origin": {
            "x": 0,
            "y": 0
        },
        "center": {
            "x": 0,
            "y": 0
        },
        "paths": {},
        "template": "5580654",
        "enableMock": true,
        "tags": [
            "方案"
        ],
        "scaleMode": "1",
        "groups": [],
        "iconUrls": [],
        "version": "1.0.23",
        "component": false
    },
    "image": "xxx",
    "name": "xxx",
    "folder": "xxx",
    "shared": true,
    "template": false
}

应包含新增大屏文件时，所有数据

// 下面为通用大屏文件示例
{
  "id": "018d16da-33fb-7f5b-80e8-0e3c32c23983",
  "name": "新建项目",
  "image": "xxx",
  "data": {...},
  "shared": true,
  //"userFlag": 1,
  "folder": "新建文件夹",
  "ownerId": "xxx",
  "ownerName": "xxx",
  "createdAt": "2021-01-17T17:56:55.41911+08:00",
  "updatedAt": "2021-01-17T17:56:55.41911+08:00"
}

更新大屏项目

URL：

/api/data/v/update

Method：

POST

Body

名称	位置	类型	必选	中文名	说明
id	body	string	是	数据 Id	none
name	body	string	是	数据项	none
image	body	string	是		缩略图地址
data	body	object	是		图纸数据
type	body	string	否		数据分类
case	body	string	否		应用场景
template	body	string	否		是否为模板

示例：

// 相对完整的更新示例
{
    "id": "xxx",
    "data": {
        "x": 32,
        "y": 32,
        "scale": 1,
        "pens": [
            ...
        ],
        "origin": {
            "x": 0,
            "y": 0
        },
        "center": {
            "x": 0,
            "y": 0
        },
        "paths": {},
        "template": "186fe58c",
        "tags": [
            "方案"
        ],
        "groups": [],
        "version": "1.0.23",
        "iconUrls": [],
        "component": false,
        "scaleMode": "1",
        "enableMock": true,
    },
    "image": "xxx",
    "name": "xxx",
    "folder": "xxx",
    "shared": true,
    "template":false
    //"userFlag": 1 //1 - 用户方案 2 - 用户模板
}

应包含新增大屏文件时，所有数据

// 下面为通用大屏文件示例
{
  "id": "018d16da-33fb-7f5b-80e8-0e3c32c23983",
  "name": "新建项目",
  "image": "xxx",
  "data": {...},
  "shared": true,
  "template":false,
  //"userFlag": 1,
  "folder": "新建文件夹",
  "ownerId": "xxx",
  "ownerName": "xxx",
  "createdAt": "2021-01-17T17:56:55.41911+08:00",
  "updatedAt": "2021-01-17T17:56:55.41911+08:00"
}

获取大屏项目

URL：

/api/data/v/get

Method：

POST

Body

名称	位置	类型	必选	中文名	说明
id	body	string	否		none
projection	body	string	否	返回字段	英文逗号分隔，例如：id,name,data

示例：

{
  "id": "xxx"
}

应包含新增大屏文件时，所有数据

// 下面为通用大屏文件示例
{
    "id": "xxx",
    "name": "xxx",
    "image": "xxx",
    "data": {
        "x": 32,
        "y": 32,
        "pens": [
            ...
        ],
        "tags": [
            "模板"
        ],
        "paths": {},
        "scale": 1,
        "center": {
            "x": 0,
            "y": 0
        },
        "groups": [],
        "origin": {
            "x": 0,
            "y": 0
        },
        "version": "1.0.23",
        "iconUrls": [],
        "template": "2830eac2",
        "component": false,
        "scaleMode": "1",
        "enableMock": true
    },
    "shared": true,
    "folder": "xxx",
    "teams": [],
    "ownerId": "xxx",
    "ownerName": "xxx",
    "updatedAt": "2021-01-17T17:56:55.41911+08:00"
}

删除大屏项目

URL：

/api/data/v/delete

Method：

POST

Body

{
  "id": "大屏项目id"
}

没有特别要求，参考全局规则。

获取大屏项目列表

URL：

/api/data/v/list

Method：

POST

Query

{
  current: 1,
  pageSize: 1000,
}

Body

名称	位置	类型	必选	中文名	说明
name	body	string	否	模糊查询 name 属性	none
folder	body	string	否	所属文件夹	none
system	body	boolean	否	系统标识	是否为系统图纸
template	body	boolean	否	模板标识	是否为模板
ownerId	body	string	否	创建者 ID	none
ownerName	body	string	否	创建者名称	none
departmentId	body	string	否	部门 ID	none
teamId	body	string	否	团队 ID	none
createdStart	body	integer	否	创建时间起始点	none
createdEnd	body	integer	否	创建时间截至点	none
shared	body	boolean	否		false - 未分享 true - 分享，不传 - 全部
sort	body	object	否		none
key	body	integer	否	排序字段名	> 0 升序，其他降序
projection	body	string	否	返回字段	英文逗号分隔，例如：id,name,data

示例：

{
  "template": false,
  "system":false
  "projection":"id,name,image..."//返回字段,不传默认返回所有字段
}

// 下面为通用大屏文件示例
{
    "total": 1,//总共项目数
    "list": [
        {
          "id": "018d16da-33fb-7f5b-80e8-0e3c32c23983",
          "name": "新建项目",
          "image": "xxx",
          "shared": true,
          "folder": "新建文件夹",
          "ownerId": "xxx",
          "ownerName": "xxx",
          "createdAt": "2021-01-17T17:56:55.41911+08:00",
          "updatedAt": "2021-01-17T17:56:55.41911+08:00"
      },
      ...
    ]
}

新增大屏组件

URL：

/api/data/v.component/add

Method：

POST

Body

同“大屏接口列表” - “新增大屏项目”，仅用户组件和系统组件标识不同，详见下方示例

// 下面为通用示例
{
    "data": {
        "x": 32,
        "y": 32,
        "scale": 1,
        "pens": [
            ...
        ],
        "origin": {
            "x": 0,
            "y": 0
        },
        "center": {
            "x": 0,
            "y": 0
        },
        "paths": {},
        "template": "c3e2009",
        "enableMock": true,
        "tags": [
            "组件"
        ],
        "scaleMode": "1",
        "groups": [],
        "iconUrls": [],
        "component": true,
        "version": "1.0.23",
        "componentDatas": [
        	...
        ]
    },
    "image": "xxx",
    "name": "xxx",
    "folder": "xxx",
    "shared": true,
    "template": 1//模板组件
    "system":false //系统组件
}

应包含新增大屏文件时的数据

// 下面为通用大屏文件示例
{
    "id": "018d16e5-9223-7539-bc58-f35a2e20ee8b",
    "name": "新建项目",
    "image": "xxx",
    "data": {
      ...
    },
    "shared": true,
    "userFlag": 1,
    "folder": "新建文件夹",
    "ownerId": "xxx",
    "ownerName": "xx",
    "editorId": "xxx",
    "editorName": "xx",
    "createdAt": "2023-01-17T10:09:20.419817181Z",
    "updatedAt": "2023-01-17T10:09:20.419817181Z"
}

更新大屏组件

URL：

/api/data/v.component/update

Method：

POST

Body

同“大屏接口列表” - “更新大屏项目”，仅用户组件和系统组件标识不同，详见下方示例

// 下面为通用示例
{
    "data": {
        "x": 32,
        "y": 32,
        "scale": 1,
        "pens": [
            ...
        ],
        "origin": {
            "x": 0,
            "y": 0
        },
        "center": {
            "x": 0,
            "y": 0
        },
        "paths": {},
        "template": "c3e2009",
        "enableMock": true,
        "tags": [
            "组件"
        ],
        "scaleMode": "1",
        "groups": [],
        "iconUrls": [],
        "component": true,
        "version": "1.0.23",
        "componentDatas": [
        	...
        ]
    },
    "image": "xxx",
    "name": "xxx",
    "folder": "xxx",
    "shared": true,
    //"template":
    "system":false//是否为系统
}

应包含新增大屏文件时，所有数据

// 下面为通用大屏文件示例
{
    "id": "018d16e5-9223-7539-bc58-f35a2e20ee8b",
    "name": "新建项目",
    "image": "xxx",
    "data": {
      ...
    },
    "shared": true,
    //"userFlag": 1,
    "folder": "新建文件夹",
    "ownerId": "xxx",
    "ownerName": "xx",
    "editorId": "xxx",
    "editorName": "xx",
    "createdAt": "2023-01-17T10:09:20.419817181Z",
    "updatedAt": "2023-01-17T10:09:20.419817181Z"
}

获取大屏组件

URL：

/api/data/v.component/get

Method：

POST

Body

{
  "id": "大屏组件id"
}

应包含新增大屏文件时，所有数据

// 下面为通用示例
{
    "id": "018d16e5-9223-7539-bc58-f35a2e20ee8b",
    "name": "新建项目",
    "image": "xxx",
    "data": {…},
    "shared": true,
    //"userFlag": 1,
    "folder": "新建文件夹",
    "ownerId": "xxx",
    "ownerName": "xx",
    "editorId": "xxx",
    "editorName": "xx",
    "createdAt": "2023-01-17T10:09:20.419817181Z",
    "updatedAt": "2023-01-17T10:09:20.419817181Z"
}

删除大屏组件

URL：

/api/data/v.component/delete

Method：

POST

Body

{
  "id": "大屏组件id"
}

没有特别要求，参考全局规则。

获取大屏组件列表

URL：

/api/data/v.component/list

Method：

POST

Query

{
  "current": 1,//当前第几页，默认1
  "pageSize": 1000,//每页记录数，默认10
}

Body

同“大屏接口列表” - “获取大屏项目列表”

示例：

{
  "system":boolean//是否为系统组件
  "projection":"id,name,image..."//返回字段,不传默认返回所有字段
}

{
  "total":3,
  "list":[
    {
      "id": "018d16e5-9223-7539-bc58-f35a2e20ee8b",
      "name": "新建项目",
      "image": "xxx",
      "shared": true,
     // "userFlag": 1,
      "folder": "新建文件夹",
      "ownerId": "xxx",
      "ownerName": "xx",
      "editorId": "xxx",
      "editorName": "xx",
      "createdAt": "2023-01-17T10:09:20.419817181Z",
      "updatedAt": "2023-01-17T10:09:20.419817181Z"
    },
    ...
  ]
}

获取 3D 组件列表

URL：

/api/data/3d/list

Method：

POST

Query

{
  "current": 1,//当前第几页，默认1
  "pageSize": 1000,//每页记录数，默认10
}

Body

同“大屏接口列表” - “获取大屏项目列表”

示例：

{
  "projection":"id,name,image..."//返回字段,不传默认返回所有字段
}

{
  "total":1,
  "list":[
    {
      "id": "018d16e5-9223-7539-bc58-f35a2e20ee8b",
      "name": "新建项目",
      "image": "xxx",
      "createdAt": "2023-01-17T10:09:20.419817181Z",
      "updatedAt": "2023-01-17T10:09:20.419817181Z"
    }
  ]
}

新建文件夹

URL:

/api/directory/add

Method：

POST

Body

{
    "fullpath": "/大屏/{case}/新建文件夹的名称"//case：方案|模板|组件|图片
  //示例:"fullpath": "/大屏/方案/新建文件夹"
}

{
    "id": "018d16eb-8077-7252-89c9-aad43dd3d72f",//文件夹id
    "ownerId": "0182199f-42e0-70cd-809a-3a35b7e9b39d",//文件夹创建者id
    "fullpath": "/大屏/组件/新建文件夹",//文件夹完整路径
    "createdAt": "2024-01-17T10:15:49.111891848Z",
    "updatedAt": "0001-01-01T00:00:00Z"
}

更新文件夹

URL:

/api/directory/update

Method：

POST

Body

{
    "oldFullpath": "xxx",//旧文件夹
    "newFullpath": "xxx"//新文件夹
}

无特别要求

删除文件夹

URL:

/api/directory/delete

Method：

POST

Body

{
    "fullpaths": [
        "/大屏/方案/新建文件夹"//待删除文件夹
    ],
    "physically": true//true-物理删除 false-逻辑删除
}

无特别要求

获取文件夹列表

不超过 16M 的小文件，使用 mongodb 的二进制存储，非 gridfs

URL：

/api/directory/list

Method：

POST

Query

{
  "current": 1,//当前第几页，默认1
  "pageSize": 1000,//每页记录数，默认10
}

Body

{
    "fullpath": "/大屏/{case}"//case：方案|模板|组件|图片
}

{
  "total":1,
  "list":[
    {
    	"id": "018d16eb-8077-7252-89c9-aad43dd3d72f",
      "ownerId": "0182199f-42e0-70cd-809a-3a35b7e9b39d",
      "fullpath": "/大屏/组件/新建文件夹",
      "createdAt": "2024-01-17T10:15:49.111891848Z",
      "updatedAt": "0001-01-01T00:00:00Z"
		}
  ]
}

上传图片

URL：

/api/image/upload

Method：

POST

FormData

•filename：string 文件名，可选

•shared：string 是否共享，默认为 true

•conflict：string directory+name 如果存在，处理方式：默认不穿覆盖；new-自动重命名为一个新文件；其他-不做任何操作，返回报错

•file：Blob 文件二进制

•directory：string 文件存放文件夹，例如:'/2D/缩略图'

{
    "id": "018d1b1f-eb0b-7ca5-9a31-56269e3095a6",
    "name": "test.png",//图片名称自动获取
    "fullname": "/2021/0118/1/1/3d5_4680f5a0.png",//图片完整文件名
    "url": "/2021/0118/1/1/3d5_4680f5a0.png",//图片路径
    "directory": "/大屏/图片/新建文件夹",//图片所在文件夹
    "shared": true,
    "size": 1871165,
    "ownerId": "xxx",
    "ownerName": "xxx",
    "createdAt": "2021-01-18T05:51:33.131708608Z",
    "updatedAt": "0001-01-01T00:00:00Z"
}

删除图片

URL:

/api/files/delete

Method：

POST

Body

{
    "fullnames": [
        "/2021/0118/1/1/3d5_4680f5a0.png"//图片返回的完整文件名
    ],
    "physically": true//true-物理删除 false-逻辑删除
}

无特别要求

获取文件列表

URL:

/api/file/list

Method：

POST

Query

名称	类型	必选	说明
current	string	否	当前页
pageSize	string	否	每页记录数

Body

名称	类型	必选	说明
tag	string	否	none
shared	boolean	否	false - 未分享 true - 分享，不传 - 全部
type	string	否	none
name	string	否	none
directory	string	否	none
children	boolean	否	包含所有子目录文件，联合 directory 使用
deleted	integer	否	0 - 未删除， 1 - 删除，其他 - 全部
remarks	string	否	备注
sort	object	否	检索结果排序规则，大于 0:升序；小于 0：降序

{
  "tag": "string",
    "shared": true,
    "type": "string",
    "name": "string",
    "directory": "string",
    "children": true,
    "deleted": 0,
    "remarks": "string",
    "sort": {
    "owner_id":   1,
      "created_at": -1
  }
}

{
  "total": 0,
    "list": [
    {
      "filename": "string",
      "metadata": {}
    }
  ]
}

获取素材或 png、svg 分组列表

用于获取远程指定类型（素材、图元（png、svg））的静态图片资源目录

URL：

/api/assets/folders

Method：

POST

Body

获取素材分组列表
{
  "path": "v/material"
}
获取png分组列表
{
  "path": "png"
}
获取svg分组列表
{
  "path": "svg"
}

{
  "list": [
    "常用图标",
    "智能家居",
    "标题",
    "电信机房",
    "装饰",
    "面板"
  ],
  "prefix": false,
  "total":6
}
或
{
  "list": [
    "v/material/常用图标/",
    "v/material/智能家居/",
    "v/material/标题/",
    "v/material/电信机房/",
    "v/material/装饰/",
    "v/material/面板/"
  ],
  "prefix": true,
  "total":6
}

获取素材或 png、svg 文件列表

用于获取远程指定类型（素材、图元（png、svg））的静态图片资源文件列表

URL：

/api/assets/files

Method：

POST

Body

获取素材分组列表
{
  "path": "v/material"
}
获取png分组列表
{
  "path": "png"
}
获取svg分组列表
{
  "path": "svg"
}

{
  "list": [
    "v/material/常用图标/地图标注.svg",
    "v/material/智能家居/太阳能板温度.png",
    "v/material/智能家居/指标.png",
  ],
    "prefix": true,
    "total":3
}
//或者
{
    "total": 2,
    "list": [
        "png/2.5D-采暖系统",
        "png/2.5D-制冷站"
    ],
    "prefix": true
}

新增数据源

URL：

/api/data/datasources/add

Method：

POST

Body

不同类型，数据结构不一样，建议为文档类型

// 订阅实时数据类型
{
    "name": "xxx",
    "type": "subscribe",
    "data": {
        "protocol": "http",
        "url": "/xxx",
        "options": {
            "clientId": "",
            "username": "",
            "password": "",
            "customClientId": false
        },
        "httpTimeInterval": 1000,
        "headers": "",
        "method": "GET",
        "body": ""
    }
}

// 向后台发送类型
{
    "name": "test",
    "data": {
        "body": "",
        "headers": "",
        "httpTimeInterval": 1000,
        "method": "GET",
        "options": {
            "clientId": "test",
            "customClientId": true,
            "password": "test",
            "username": "test"
        },
        "protocol": "mqtt",
        "topics": "test",
        "url": "/xxx"
    },
    "shared": false,
    "type": "publish",
    "createdAt": "2024-01-18T09:30:53.856752442Z",
    "updatedAt": "2024-01-18T09:30:53.856752442Z"
}
// 数据集类型
{
    "name": "test",
    "type": "dataset",
    "data": {
        "devices": [//数据集
            {
                "device": "设备1",
                "label": "整数0-100",
                "id": "data-001",
                "type": "integer",
                "mock": "0-100"
            }
        ],
        "mode": "",//数据方式，默认 api-HTTP请求，空字符串-自定义
        "url": ""//获取数据集的接口，
    }
}

应包含新增时，所有数据

// 下面为通用示例
{
  "id": "018d16f2-55e5-743c-a498-0053afd9b219",
  "name": "test",
  "data": {
      "body": "",
      "headers": "",
      "httpTimeInterval": 1000,
      "method": "GET",
      "options": {
          "clientId": "",
          "customClientId": false,
          "password": "",
          "username": ""
      },
      "protocol": "http",
      "url": "/xxxx"
  },
  "shared": false,
  "type": "subscribe",
  "ownerId": "xxx",
  "ownerName": "xxx",
  "editorId": "xxx",
  "editorName": "xxx",
  "createdAt": "2024-01-17T10:23:16.965635509Z",
  "updatedAt": "2024-01-17T10:23:16.965635509Z"
}

更新数据源

URL：

/api/data/datasources/update

Method：

POST

Body

// 订阅实时数据类型
{
  	"id": "018d1be8-bc20-756d-bf81-7f1218668059",
    "name": "xxx",
    "data": {
        "url": "/xxx",
        "body": "",
        "method": "GET",
        "headers": "",
        "options": {
            "clientId": "",
            "password": "",
            "username": "",
            "customClientId": false
        },
        "protocol": "http",
        "httpTimeInterval": 1000
    },
    "type": "subscribe",
}

// 向后台发送类型
{
  	"id": "018d1be8-bc20-756d-bf81-7f1218668059",
    "type": "publish",
    "name": "xxx"
    "data": {
        "protocol": "http",
        "options": {
          "clientId": "",
          "password": "",
          "username": "",
          "customClientId": false
        },
        "httpTimeInterval": 1000,
        "headers": "",
        "method": "GET",
        "body": "",
        "url": "/xxx"
    },
}

// 数据集类型
{
  	"id": "018d1be8-bc20-756d-bf81-7f1218668059",
    "name": "test",
    "type": "dataset",
    "data": {
        "devices": [//数据集
            {
                "device": "设备1",
                "label": "整数0-100",
                "id": "data-001",
                "type": "integer",
                "mock": "0-100"
            }
        ],
        "mode": "",//数据方式，默认 api-HTTP请求，空字符串-自定义
        "url": ""//获取数据集的接口，
    }
}

新增是配置的所有数据

// 下面为通用大屏文件示例
{
    "id": "018d16f2-55e5-743c-a498-0053afd9b219",
    "name": "test",
    "data": {
        "body": "",
        "headers": "",
        "httpTimeInterval": 1000,
        "method": "GET",
        "options": {
            "clientId": "",
            "customClientId": false,
            "password": "",
            "username": ""
        },
        "protocol": "http",
        "url": "/xxxx"
    },
    "shared": false,
    "type": "subscribe",
    "createdAt": "2024-01-17T10:23:16.965635509Z",
    "updatedAt": "2024-01-17T10:23:16.965635509Z"
}

获取数据源

URL：

/api/data/datasources/get

Method：

POST

Body

{
  "id": "数据源id"
}

应包含新增时，所有数据

// 订阅实时数据类型
{
    "id": "018d16f2-55e5-743c-a498-0053afd9b219",
    "name": "xxx",
    "data": {
        "url": "/xxx",
        "body": "",
        "method": "GET",
        "headers": "",
        "options": {
            "clientId": "",
            "password": "",
            "username": "",
            "customClientId": false
        },
        "protocol": "http",
        "httpTimeInterval": 1000
    },
      "createdAt": "2024-01-17T10:23:16.965635509Z",
    "updatedAt": "2024-01-17T10:23:16.965635509Z"
}

// 向后台发送类型
{
    "id": "018d16f2-55e5-743c-a498-0053afd9b219",
    "name": "test",
    "data": {
        "body": "",
        "headers": "",
        "httpTimeInterval": 1000,
        "method": "GET",
        "options": {
            "clientId": "",
            "customClientId": false,
            "password": "",
            "username": ""
        },
        "protocol": "http",
        "url": "/xxxx"
    },
    "shared": false,
    "type": "subscribe",
    "createdAt": "2024-01-17T10:23:16.965635509Z",
    "updatedAt": "2024-01-17T10:23:16.965635509Z"
}

// 数据集类型
{
  	"id": "xxx",
    "name": "test",
    "data": {
        "devices": [//数据集
            {
                "device": "设备1",
                "label": "整数0-100",
                "id": "data-001",
                "type": "integer",
                "mock": "0-100"
            }
        ],
        "mode": "",//数据方式，默认 api-HTTP请求，空字符串-自定义
        "url": ""//获取数据集的接口，
    }
  "createdAt": "2024-01-17T10:23:16.965635509Z",
  "updatedAt": "2024-01-17T10:23:16.965635509Z"
}

删除数据源

URL：

/api/data/datasources/delete

Method：

POST

Body

{
  "id": "数据源id"
}

没有特别要求，参考全局规则。

后台管理接口列表

2D 图纸列表

URL：

/api/data/2d/list

Method：

POST

Query

{
  "current": 1,//当前第几页，默认1
  "pageSize": 1000,//每页记录数，默认10
}

Body

同“大屏接口列表” - “获取大屏项目列表”

示例：

{
  "name": "文件名"// 模糊查询
}

// 下面为通用文件列表示例
{
    "total": 1,//总共项目数
    "list": [
        {
          "id": "018d16da-33fb-7f5b-80e8-0e3c32c23983",
          "name": "新建项目",
          "image": "xxx",
          "shared": true,
          //"userFlag": 1,
          "folder": "新建文件夹",
          "ownerId": "xxx",
          "ownerName": "xxx",
          "createdAt": "2021-01-17T17:56:55.41911+08:00",
          "updatedAt": "2021-01-17T17:56:55.41911+08:00"
        }
    ]
}

3D 图纸列表

URL：

/api/data/3d/list

Method：

POST

Query

{
  "current": 1,//当前第几页，默认1
  "pageSize": 1000,//每页记录数，默认10
}

Body

同“大屏接口列表” - “获取大屏项目列表”

示例：

{
  "name": "文件名"// 模糊查询
}

// 下面为通用文件列表示例
{
    "total": 1,//总共项目数
    "list": [
        {
          "id": "018d1a96-2d16-7094-b298-fbaee854be36",
          "name": "测试",
          "image": "/2021/0118/1/1/7aa4853c-b93f-4272-96f5-42d8c0e0a189_c1a9dede.png",
          "shared": false,
          "ownerId": "xxx",
          "ownerName": "xxx",
          "createdAt": "2021-01-18T11:21:06.070895+08:00",
          "updatedAt": "2021-01-18T11:21:06.070895+08:00"
      }
    ]
}

大屏项目列表

URL：

/api/data/v/list

Method：

POST

Query

{
  "current": 1,//当前第几页，默认1
  "pageSize": 1000,//每页记录数，默认10
}

Body

同“大屏接口列表” - “获取大屏项目列表”

示例：

{
    "name": "文件名"// 模糊查询
}

// 下面为通用大屏文件示例
{
    "total": 1,//总共项目数
    "list": [
        {
          "id": "018d16da-33fb-7f5b-80e8-0e3c32c23983",
          "name": "新建项目",
          "image": "xxx",
          "shared": true,
          "userFlag": 1,
          "folder": "新建文件夹",
          "ownerId": "xxx",
          "ownerName": "xxx",
          "createdAt": "2021-01-17T17:56:55.41911+08:00",
          "updatedAt": "2021-01-17T17:56:55.41911+08:00"
      },
      ...
    ]
}

更新大屏项目

同“大屏接口列表” - “更新大屏项目”

用户列表

URL：

/api/operation/account/list

Method：

POST

Query

名称	类型	必选	说明
current	string	否	当前页
pageSize	string	否	每页记录数
q	string	否	模糊搜索用户
department	string	否	部门 id
team	string	否	团队 id

示例：

{
  "current": 1,//当前第几页，默认1
  "pageSize": 1000,//每页记录数，默认10
}

Body

{
  "q": "模糊查询，支持用户名、邮箱、手机号等多字段同时模糊查询"
}

名称	类型	必选	中文名
total	number	true	总数
list	[object]	true	用户信息列表

用户信息：

名称	类型	必选	中文名
id	string	是	用户 id
account	string	是	账户
avatarUrl	string	是	头像 url
username	string	是	用户名
phone	string	是
email	string	是
teams	[object]	是	团队
id	string	是
name	string	是
company	object	是	公司
id	string	是
name	string	是
department	object	是	部门
id	string	是
name	string	是
roles	[string]	是	角色
inviteCode	string	是	邀请码
wechat	string	是	关联微信账号
github	string	是	关联 GitHub 账号
sina	string	是	关联新浪账号
vip	integer	是	会员有效期截至时间
corporation	object	是	企业
id	string	是
name	string	是
owner	boolean	是
license	string	是	营业执照

{
  "total":3,
  "list":[
    {
      "id": "xxx",
      "createdAt": "xxx",
      "department": {
          "id": "666666666666666666666666",
          "name": "乐吾乐科技"
      },
      "email": "",
      "phone": "xxxxxxx",
      "roles": [
          "系统管理员",
          "运营管理员"
      ],
      "teams": [],
      "username": "Alsmile",
    }
  ]
}

更新用户信息

URL：

/api/operation/account/update

Method：

POST

Body

同“大屏接口列表” - “用户列表”返回的用户信息字段

{
  "id": "xxx"
  "xxx": "其他可选"
}

{
  "id": "xxx",
  "xxx": "其他可选"
}

获取用户头像

URL：

/api/account/avatar/{id}

Method：

GET

Params

名称	类型	必选	说明
id	string	是	用户 id

头像文件的二进制内容

获取用户统计信息

URL：

/api/account/statistics

Method：

GET

参数

不需要额外参数

名称	类型	必选	中文名	说明
userId	string	否	用户 ID	none
used	integer	否	已使用云盘空间容量	none
capacity	integer	否	可使用云盘空间容量	none
expired	string	否	云盘空间容量到期时间	none
VipDataLimit	object	否	允许保存数据最大个数	VIP 会员用户允许保存数据(2D,3D,大屏)最大个数,普通用户返回免费个数。
VipDataCount	object	否	实际保存数据个数	实际已经保存数据(2D,3D,大屏)个数
DeploymentPackageLimit	object	否	允许下载离线部署包的次数	大屏、3D、2D
DeploymentPackageCount	object	否	已经使用的下载离线部署包次数	none

{
  "userId": "01890b98-2a48-70d0-8002-c2db3cf46b85",
  "used": 26723050,
  "capacity": 10,
  "expired": "2025-10-23T11:28:36.574333+08:00",
  "vipDataLimit": {
    "2d": 1000,
    "3d": 1000,
    "v": 1000
  },
  "vipDataCount": {
    "2d": 17,
    "v": 2
  },
  "deploymentPackageLimit": {
    "2d": 5
  },
  "deploymentPackageCount": {
    "2d": 1
  }
}

获取统计信息

URL：

/api/operation/statistics

Method：

POST

参数

不需要额外参数

名称	类型	必选	中文名
accountCount	number	是	注册用户总数
vipCount	number	是	有效 VIP 用户总数：截止当前查询时间点，还没有过期的 VIP 用户总数
orderCount	number	是	非取消状态的订单总数
total2d	number	是	2D 图纸数据总数(不包含 2D 组件)
last302d	number	是	创建时间为最近 30 天的 2D 图纸数据总数(不包含 2D 组件)
last602d	number	是	创建时间为最近 60 天的 2D 图纸数据总数(不包含 2D 组件)
total3d	number	是	同上(不包含组件)
last303d	number	是	同上(不包含组件)
last603d	number	是	同上(不包含组件)
totalV	number	是	同上(不包含组件)
last30V	number	是	同上(不包含组件)
last60V	number	是	同上(不包含组件)
aggregationSignup	[object]	是	近 10 天，每天的注册账号数。
aggregationVip	[object]	是	近 10 天，每天的充值 VIP 会员数。(订单状态是完成的订单)
aggregationCloud	[object]	是	近 10 天，每天的充值云盘会员数。(订单状态是完成的订单)
aggregation2d	[string]	是	近 10 天，每天的 2D 数据创建数。(不包含组件)
aggregation3d	[object]	是	近 10 天，每天的 3D 数据创建数。(不包含组件)
aggregationV	[object]	是	近 10 天，每天的大屏数据创建数。(不包含组件)

示例

{
    "accountCount": 18660,
    "vipCount": 100,
    "orderCount": 236,
    "total2d": 24776,
    "last302d": 33,
    "last602d": 33,
    "total3d": 545,
    "last303d": 16,
    "last603d": 70,
    "totalV": 199,
    "last30V": 18,
    "last60V": 34,
    "aggregationSignup": [
        {
            "count": 2,
            "date": "2024-01-04T00:00:00-05:00"
        }
    ],
    "aggregationVip": [
        {
            "count": 2,
            "date": "2024-01-09T00:00:00-05:00"
        },
        {
            "count": 7,
            "date": "2024-01-10T00:00:00-05:00"
        },
        {
            "count": 1,
            "date": "2024-01-11T00:00:00-05:00"
        }
    ],
    "aggregationCloud": null,
    "aggregation2d": [
        {
            "count": 5,
            "date": "2024-01-04T00:00:00-05:00"
        },
        {
            "count": 1,
            "date": "2024-01-08T00:00:00-05:00"
        },
        {
            "count": 1,
            "date": "2024-01-09T00:00:00-05:00"
        },
        {
            "count": 3,
            "date": "2024-01-10T00:00:00-05:00"
        },
        {
            "count": 6,
            "date": "2024-01-11T00:00:00-05:00"
        },
        {
            "count": 2,
            "date": "2024-01-12T00:00:00-05:00"
        }
    ],
    "aggregation3d": [
        {
            "count": 1,
            "date": "2024-01-03T00:00:00-05:00"
        },
        {
            "count": 3,
            "date": "2024-01-08T00:00:00-05:00"
        },
        {
            "count": 1,
            "date": "2024-01-10T00:00:00-05:00"
        }
    ],
    "aggregationV": [
        {
            "count": 3,
            "date": "2024-01-07T00:00:00-05:00"
        },
        {
            "count": 6,
            "date": "2024-01-10T00:00:00-05:00"
        },
        {
            "count": 2,
            "date": "2024-01-12T00:00:00-05:00"
        }
    ]
}

新建部门信息

URL：

/api/operation/department/create

Method：

POST

Body

名称	类型	必选	中文名
name	string	是	名称
parentId	string	是	父 id
leader	string	是	负责人

{
  "name": "名称",
  "parentId": "父部门ID",
  "leader":"xxx"
}

{
  "id": "xxx",
  "name": "名称",
  "parentId": "父部门ID",
  "leader":"xxx"
}

更新部门信息

URL：

/api/operation/department/update

Method：

POST

Body

{
  "name": "名称",
  "parentId": "父部门ID",
  "leader":"xxx"
}

{
  "id": "xxx",
  "name": "名称",
  "parentId": "父部门ID",
  "leader":"xxx"
}

删除部门

URL：

/api/operation/department/delete

Method：

POST

Body

{
   "id": "部门ID",
}

无特别要求

获取部门列表

URL：

/api/account/departments

Method：

GET

Query

名称	类型	必选	说明
q	string	否	部门名称，模糊查询
current	string	否	当前页
pageSize	string	否	每页记录数

{
  "total": 1,
  "list": [
    {
      "id": "xxx",
      "name": "名称",
      "parentId": "父部门ID",
      "leader":"xxx"
    }
  ]
}

获取企业信息文件内容

URL：

/api/enterprise

Method：

GET

参数

无需多余参数

{
  "helps": [
    {
      "name": "产品介绍",
      "url": "https://doc.le5le.com/document/118756411"
    },
    {
      "name": "快速上手",
      "url": "https://doc.le5le.com/document/119363000"
    },
    {
      "name": "使用手册",
      "url": "https://doc.le5le.com/document/118764244"
    },
    {
      "divider": true,
      "name": "快捷键",
      "url": "https://doc.le5le.com/document/119620214"
    },
    {
      "divider": true,
      "name": "企业服务与支持",
      "url": "https://doc.le5le.com/document/119296274"
    },
    {
      "name": "关于我们",
      "url": "https://le5le.com/about.html"
    }
  ],
  "home": "https://le5le.com",
  "name": "乐吾乐"
}

用户中心接口列表

2D 图纸列表

URL：

/api/data/2d/list

Method：

POST

Query

{
  "current": 1,//当前第几页，默认1
  "pageSize": 1000,//每页记录数，默认10
}

Body

同“大屏接口列表” - “获取大屏项目列表”

示例：

{
  "name": "文件名",// 模糊查询
  "teamId":""//团队id，可不传
}

// 下面为通用文件列表示例
{
    "total": 1,//总共项目数
    "list": [
        {
          "id": "018d16da-33fb-7f5b-80e8-0e3c32c23983",
          "name": "新建项目",
          "image": "xxx",
          "shared": true,
          "userFlag": 1,
          "folder": "新建文件夹",
          "ownerId": "xxx",
          "ownerName": "xxx",
          "createdAt": "2021-01-17T17:56:55.41911+08:00",
          "updatedAt": "2021-01-17T17:56:55.41911+08:00"
        }
    ]
}

3D 图纸列表

URL：

/api/data/3d/list

Method：

POST

Query

{
  "current": 1,//当前第几页，默认1
  "pageSize": 1000,//每页记录数，默认10
}

Body

同“大屏接口列表” - “获取大屏项目列表”

示例：

{
  "name": "文件名",// 模糊查询
  "teamId":""//团队id，可不传
}

// 下面为通用文件列表示例
{
    "total": 1,//总共项目数
    "list": [
        {
          "id": "018d1a96-2d16-7094-b298-fbaee854be36",
          "name": "测试",
          "image": "/2021/0118/1/1/7aa4853c-b93f-4272-96f5-42d8c0e0a189_c1a9dede.png",
          "shared": false,
          "ownerId": "xxx",
          "ownerName": "xxx",
          "case":"",//场景
          "createdAt": "2021-01-18T11:21:06.070895+08:00",
          "updatedAt": "2021-01-18T11:21:06.070895+08:00"
      }
    ]
}

大屏项目列表

URL：

/api/data/v/list

Method：

POST

Query

{
  "current": 1,//当前第几页，默认1
  "pageSize": 1000,//每页记录数，默认10
}

Body

同“大屏接口列表” - “获取大屏项目列表”

示例：

{
    "name": "文件名"// 模糊查询
    "teamId":""//团队id，可不传
}

// 下面为通用大屏文件示例
{
    "total": 1,//总共项目数
    "list": [
        {
          "id": "018d16da-33fb-7f5b-80e8-0e3c32c23983",
          "name": "新建项目",
          "image": "xxx",
          "shared": true,
          "userFlag": 1,
          "folder": "新建文件夹",
          "ownerId": "xxx",
          "ownerName": "xxx",
          "createdAt": "2021-01-17T17:56:55.41911+08:00",
          "updatedAt": "2021-01-17T17:56:55.41911+08:00"
      },
      ...
    ]
}

获取消息列表

URL：

/api/message/list

Method：

POST

Params:

•current 当前页

•pageSize 每页请求数量

Body:

{
    "q": "",//模糊查询
    "read": false //是否已读  undefind全部消息 true已读消息 fasle未读消息
}

返回：

{
    "list": [
        {
            "id": "", //id
            "title": "a", //标题
            "html": "a", //内容
            "to": null, //接收方用户id
            "from": null,  //发送方用户id
            "data": null, //数据
            "read": null, //是否已读
            "createdAt": "2023-09-14T09:59:33.845377+08:00",
            "deletedAt": null
        }
      //...
    ],
    "total": 2
}

获取未读消息数量

URL：

/api/message/unread/count

Method：

POST

返回:

{
    "unread": 1 //未读数量
}

消息标为已读

URL：

/api/message/read

Method：

POST

Body:

{
    "ids": [
        "" //消息id列表
    ]
}

返回：

{}

全部消息标为已读

URL：

/api/message/read/all

Method：

POST

Body:

{}

返回：

{}

删除消息

URL：

/api/message/delete

Method：

POST

Body:

{
    "ids": [ //消息id列表
        ""
    ]
}

返回：

{}

获取团队列表

URL：

/api/account/teams

Method：

GET

返回：

{
    "list": [
        {
            "id": "018615fb-1188-70b5-8063-534123f564e3",
            "name": "zzz",
            "avatarUrl": "",
            "description": "测试",
            "ownerId": "0178f286-96d0-70cd-809a-3a16f96435e1",
            "inviteLink": null,
            "inviteExpiration": null,
            "inviteApprove": null,
            "createdAt": "0001-01-01T00:00:00Z",
            "isAdmin": 10
        }
      //...
    ],
    "total": 1
}

获取团队成员

URL：

/api/account/team/members

Method：

POST

Params:

•current 当前页

•pageSize 每页数量

Body:

{
  teamId: ""; //团队id
}

返回：

{
    "list": [
        {
            "teamId": "",
            "userId": "用户id",
            "username": "",//用户名
            "isAdmin": 10, //管理员权限， 10 创建者(管理员) 1管理员 0普通用户
            "pending": false,
            "createdAt": null
        },
        //...
    ],
    "total": 2
}

更新团队成员管理权限

URL：

/api/account/team/admin

Method：

POST

Body:

{
  "teamId": "", //团队id
  "userId": "",//团队成员id
  "isAdmin": 1 //权限
}

返回：

{
  "teamId": "", //团队id
  "userId": "",//团队成员id
  "isAdmin": 1 //权限
}

移除团队成员

URL：

/api/account/team/member/delete

Method：

POST

Body:

{
  "teamId": "", //团队id
  "userId": "",//团队成员id
}

返回：

{}

创建团队

URL：

/api/account/team/create

Method：

POST

Body:

{
    "show": true,
    "files": [],
    "avatarUrl": "",//头像
    "name": "",//部门名称
    "saving": true,
    "description": "" //部门描述
}

返回：

{
    "id": "", //团队id
    "name": "",
    "avatarUrl": "",
    "description": "",
    "ownerId": "0178f286-96d0-70cd-809a-3a16f96435e1",
    "inviteLink": null,
    "inviteExpiration": null,
    "inviteApprove": null,
    "createdAt": "2024-01-29T09:37:05.565137203Z",
    "isAdmin": null
}

删除团队

URL：

/api/account/team/delete

Method：

POST

Body:

{
    "id": "" //团队id
}

返回：

{}

更新团队信息

URL：

/api/account/team/update

Method：

POST

Body:

{
    "id": "", //团队id 必传
    "avatarUrl":"",//
    "description":"",//团队描述
    "name":"",//团队名称
    "inviteLink": true,//允许通过邀请链接加入
    "inviteApprove": true,//邀请链接加入规则，true表示需要管理员审核
    "inviteExpiration": ""//邀请链接有效期
     //... 改什么传什么
}

返回：

{
  id: ""; //团队id
}

查找账号

URL：

/api/account/find

Method：

POST

Body:

{
  account: ""; //账号
}

返回：

{
    "id": "",//用户id
    "username": "", //用户名
    "createdAt": "0001-01-01T00:00:00Z",
    "updatedAt": "0001-01-01T00:00:00Z"
}

团队邀请人员

URL：

/api/account/team/invite

Method：

POST

Body:

{
    "teamId": "", //团队id
    "teamName": "",//团队名称
    "memberId": "",//被邀请成员id
    "memberName": ""//被邀请成员用户名
}

返回：

{}

获取账号信息

URL：

/api/account/detail

Method：

POST

返回：

{
    "id": "",
    "phone": "",
    "username": "",
    "avatarUrl":"",//头像地址
    "roles": [],//角色
    "departmentId": "",//部门id
    "departmentName": "", //部门名称
    // "vip": "2027-06-02T09:28:34.053+08:0",//vip到期时间
    // "vipData": { //vip可存图纸数量
    //     "2d": 2000,
    //     "3d": 2000,
    //     "v": 2000
    // },
    "teamList": [
        {
            "id": "",//团队id
            "name": "" //团队名称
        },
        //...
    ],
    "createdAt": "",
    "updatedAt": ""
}

更新账号信息

URL：

/api/account/profile/update

Method：

POST

BODY:

{
  avatarUrl: ""; //改什么传什么，例如改头像
}

返回：

{}

上传头像

URL：

/api/image/upload

Method：

POST

FormData

•file：Blob 文件二进制

•directory：string 文件存放文件夹，'/头像'

{
    "id": "",
    "name": "test.png",//图片名称自动获取
    "fullname": "",//图片完整文件名
    "url": "",//图片路径
    "directory": "/头像",//图片所在文件夹
    "shared": true,
    "size": 1871165,
    "ownerId": "xxx",
    "ownerName": "xxx",
    "createdAt": "2021-01-18T05:51:33.131708608Z",
    "updatedAt": "0001-01-01T00:00:00Z"
}

更新登录账号

URL：

/api/account/account/update

Method：

POST

BODY:

{
    "account": ""//登录账号
}

返回： {}

更新邮箱

URL：

/api/account/email/update

Method：

POST

Body:

{
    "show": true,
    "email": "",//邮箱
    "code": "",//动态验证码
    "captcha": ""//图形验证码
}

返回：

{}

获取图片验证码

URL：

/api/account/captcha?t=时间戳

Method：

GET

返回：

图片资源地址

向邮箱发送动态验证码

URL：

/api/account/email/update

Method：

POST

Body:

{
    "email": "", //邮箱
    // "code": "", //图形验证码
    "type": "email" //类型
}

返回：

{}

修改密码

URL：

/api/account/password/update

Method：

POST

Body:

{
    "code": "",//当前密码
    "password": "" //新密码
}

返回：

{}

图形库清单及定制要求

1.图形库说明

乐吾乐大屏图形库，即“设备”，根据行业和风格分为基础图形库、电力图形库、物联网图形库、2.5D 科技图形库。支持三种格式：原生代码（JS）、阿里字体（iconfont）、图片（svg/gif），企业版已经写好固定的逻辑，支持良好。同时乐吾乐图形库支持自定义拓展，上传自己的图形库资源。

2.图形库查询

https://v.le5le.com/

3.图形库价格

序号	产品或服务	数量	单位	价格（元）	说明
1	乐吾乐 2D 基础图形库	1	套	0	免费赠送
2	乐吾乐 2D 电力图形库	1	套	9900	永久授权（授权不能转卖和二次独立销售）
3	乐吾乐 2D 物联网图形库	1	套	9900	永久授权（授权不能转卖和二次独立销售）
4	乐吾乐 2D 2.5D 科技图形库	1	套	9900	永久授权（授权不能转卖和二次独立销售）

4.图形库清单

4.1 基础图形库

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

4.2 基础图形库应用场景

4.3 电力图形库

序号	类别	格式	数量
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	351
20	SVG 国家电网	svg	272
21	SVG 电气工程	svg	603
合计			2553

4.4 电力图形库应用场景

4.5 物联网图形库

新版

序号	类别	格式	数量
1	废气处理	svg、gif	71
2	工艺控制器	svg	44
3	智能运维	svg	72
4	水利	svg	102
5	暖通	svg	143
6	火电	svg	198
7	核电	svg	100
8	净水厂	svg	74
9	污水厂	svg	45
10	化工厂	svg、gif	93
11	消防	svg	80
合计			1022

旧版

序号	类别	格式	数量
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	5
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
39	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
42	太阳能光伏发电	svg	5
合计			1838

4.6 物联网图形库应用场景

4.7 2.5D 科技图形库

序号	类别	设备明细	格式	数量
1	光伏系统	电网、汇流箱、逆变器、配电柜、太阳能电池板、箱式变压	svg、gif	7
2	制冷站	放冷板块、控制器（远程控制）、控制器、冷却塔（远程控制）、冷却塔、离心机、水泵（远程控制）、水泵	svg	10
3	废水处理	加药箱、沉淀池 1、流量计、排水泵、除铁除锰设备、沉淀池 2、清水池、沉淀池 3、加药箱 2、罗茨风机、分集水器、压滤机、废水池、回流泵、加药泵、污泥收集、温度表、离心污水泵、电磁阀、碳过滤器、耗氧池、压力表、污泥泵、集水池提升泵、重金属捕捉器	svg	35
4	智慧城市	草地、充电桩、风电机、公交车 1、公交车 2、公交车站、红绿灯、货车 1、货车 2、货船 1、货船 2、建筑 1、建筑 2、建筑 3、建筑 4、建筑 5、建筑 6、建筑 7、路灯、马路 1、马路 2、汽车 1、汽车 2、树 1、树 2、水、挖掘机	svg	27
5	电信机房	防火墙、服务器（故障）、服务器、机柜（柜门关）、机柜（柜门关）故障、机柜（柜门关）运行、机柜（柜门开）、机柜（柜门开）故障、机柜（柜门开）运行、交换机（故障）、交换机、交换机 1、精密空调、报警灯（报警）、路由器、门 1、门 2、配电柜、墙体 1、墙体 2、摄像头、水浸、烟感	svg、gif	23
6	废气治理	UV 光解净化器、储罐、单向阀、过滤器、换热器、活性炭吸附箱、集气室、排放风机、排放口、配气台、气动阀、收集风机、手动阀、水帘柜、水喷淋、校验罐、循环泵	svg、gif	20
7	采暖系统	板式换热器、采暖系统、储热水箱、电锅炉、空调、水处理仪、水管温度传感器、水感压力传感器、蓄水箱、循环水泵、大型便携式冷水机、低污染锅炉、反应器产物冷却器、冷却器、撬装锅炉、燃烧室锅炉、燃油锅炉	svg、gif	22
8	锅炉房	除氧器、过滤器、冷凝器、燃气蒸汽炉	svg、gif	5
9	智慧港口	堆取料机、矿石堆场、皮带机、卸船机、转接塔	svg	6
10	矿山	布袋除尘器、除铁器、点式除尘器、鄂式破碎机、铰接式自卸车、轮式转载机、皮带机、竖井、竖井仓、圆振动筛、圆锥破碎机、震动放矿机、重型版式给料机	svg	13
11	风力发电	变桨驱动、变桨轴承、测风装置、齿轮箱、导流罩、发电机、风力发电机（全息）、风力发电机、机舱、控制柜、轮毂、偏航电机、塔架、叶片 1、叶片 2、叶片 3、主轴	svg、gif	17
12	水力发电	发电厂房、发电机组、泄洪道、移动式进水闸门启闭机、右厂房坝段、蝶阀、拦污棚、桥式起重机、水力发电机、通航建筑物、水轮机、尾水管、压力管道、闸门、门式起重机	svg	15
13	火力发电	半球式储煤场、变压器、玻璃钢储罐、除尘板、除尘器、粗粉分离器、低 NOX 燃烧器、低压加热器、多级离心泵、发电机、粉煤式储料罐、钢球磨煤机、高压加热器、给粉机、给煤机、锅炉、锅炉房、化工罐、化工液体真空储存罐、空气预热器、冷凝器、冷却塔、立式棕榈油储存罐、煤场、磨煤机、升压站、省煤器、输煤皮带、水泵、碎煤机室、脱水装置、涡轮、涡轮机、吸收塔、汽轮机厂房、烟囱……	svg	49
14	核力发电	安全阀、安全阀 2、饱和蒸汽管、变电站、调度控制室、反应堆厂房、反应炉、给水泵、给水控制阀、核反应堆压力容器、核辅助厂房、控制棒、励磁机、旁通阀、喷淋泵、喷淋阀、喷射器、屏蔽厂房、其他辅助厂房、汽轮机、汽水分离再热器、燃料厂房、稳压器、卸压隔离阀、循环水泵房、蒸汽发电机、蒸汽发生器、蒸汽分离干燥器、蒸汽隔离阀、蒸汽排放阀、主控制室、主冷泵	svg	32
15	汽车制造	焊接机器人、机器人控制柜、车架 1、车架 2、地面轨道 1、地面轨道 2、电泳、机械臂 1、机械臂 2、烤灯 1、烤灯 2、烤灯 3、升降台、整车	svg、gif	20
合计				301

4.8 2.5D 科技图形库应用场景

4.9 控件

非源码价格 70/个，可通过官方下载离线部署包/组件包下载，源码版可联系商务购买。

大屏

共 36 个,截图说明红色框选内容即为收费的控件。

序号	类别	明细	格式	数量
0	基础	进度条（progress）	js	1
1	音视频	FLV 视频流（flvPlayerDom）、摄像头（rtspPlayerDom）	js	2
2	时间	倒计时（countdown）、时间轴（timeline，包括水平时间轴、垂直时间轴）、日历（calendar，包括日历（日期）、日历（日期时间））	js	3
3	面板	列表（list）、表格+（tablePlus，包括表格、斑马纹表格、滚动表格）、树（tree）	js	3
4	提醒	业务指标（indicator）、通知（notification）	js	2
5	轮播	水平/垂直轮播（ swiperline）、轮播图/轮播页面（swiperDom）	js	2
6	导航	面包屑（breadcrumb）、下拉菜单（headMenuDom ）、导航菜单（menuDom）、分页（pagination）、步骤条（steps）、选项卡/多选选项卡（tab）	js	6
7	输入	单选框（radio）、多选框（checkbox）、时间/日期/颜色选择器（inputDom）	js	3
8	工控	圆柱水位（waterTank）、球形水位（watermeter）、水箱（tank）、指示灯（indicatorLight）、圆形按钮（roundSwitch）、船型开关（rockerSwitch）、转换开关（transferSwitch）、闸刀（knifeSwitch）、拨动开关（toggleSwitch）、空气开关（airSwitch）、水柱温度计（thermometer）、扁平温度计（thermometer1）、电池（battery）	js	13
9	图表-乐吾乐 charts	3d-饼图（pie3D）	js	1

5.自定义图形库的几种方式

https://doc.le5le.com/blog/121844091

6.图形库定制形式

7.图形库定制要求及示例

备注：甲方需要提供

① 设备名称

② 现场照片

③CAD 图纸（有则提供）

④ 设备状态说明

⑤ 动画效果说明

⑥ 其他个性化设计说明

⑦ 选择图元风格

| 甲方提供 | | | | 乙方交付 | 参考案例 | | :-------------: | ------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------- | ------------- | :----------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------: | ------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | | 设备名称 | 现场照片 | CAD 图纸 | 风格确认 | 状态 | | | 动画 | | | | | | | 默认/停止 | 运行 | 告警 | | | | 离心机 | | | 2.5D 科技 | | | | | https://view.le5le.com/v/?id=01902942-7d13-7caf-8e50-da2900e89fa9 | | 光伏板 | | | 2.5D 科技 | | | | | https://view.le5le.com/2d/?id=01840e78-7c40-70d4-804b-9402de84d2eb | | 电制冷 | | | 2D 科技 | | | | | https://view.le5le.com/v/?id=0193063d-847e-72b6-92f5-993ef833ba5e | | 个性化
效果 | | | 2D
个性化 | | | | | https://view.le5le.com/v/?id=018f9a93-e064-7c12-99dc-c8e12dca37c3 |

定制服务咨询：

⬆ 微信扫一扫，即刻咨询	武汉乐吾乐科技有限责任公司联系人：胡女士电话：19107154517 座机：027-63497374 邮箱：business@le5le.com 地址：武汉市东湖新技术开发区金融港四路 18 号光谷汇金中心 15B

云发布

大屏可视化云发布支持使用自定义域名。

填写自定义域名

访问域名输入框填写为自定义域名

自定义域名解析设置

在域名服务商的 DNS 控制台设置自定义域名解析即可，类型为 CNAME，值为乐吾乐域名。

2.1 阿里云

2.2 腾讯云

2.3 其他云

查看相关 DNS 帮助文档。

常见问题

1. 常见商务问答

Q1：软件购买流程是怎样的？

1、选定购买的软件产品；

2、双方签订合同；

3、甲方付款到乙方指定账户；

4、源码版：收到合同款项后乙方 1 个工作日内交付源码和使用手册，甲方只需提供一个指定 Github 账号，加入到乙方项目团队中，一年内甲方可以随时下载最新企业版源码，同时乙方提供专业技术支持服务。开具增值税专用发票或普票。

5、安装包版：收到合同款项后，甲方提供注册账户，乙方根据约定分配授权码数量，甲方在个人中心--我的订单--订单授权中获取和管理授权码，同时乙方提供专业技术支持服务。开具增值税专用发票或普票。

6、企业图形库：收到合同款项后，乙方将图形库发送到甲方指定邮箱，并安排开票。

7、定制开发：甲方将完整需求发送给乙方评估，乙方报价，双方确认并签订合同，付款开发，交付验收。

Q2：什么是商业使用？

包括但不限于对公司商业项目、商业服务、第三方用户收费、项目投标，以及其他直接或间接获取收益或利益。

Q3：企业版（安装包版、源码版）、年会员版区别分别是什么？

	企业版	年会员版
产品（2D 组态可视化、大屏组态可视化、3D 可视化数字孪生、物联网平台）	方式一：安装包交付，永久授权方式二：源码交付，永久授权	在线使用，按年收费
保存项目数量	无限	5-1000 个
下载离线部署包	无限	无限
企业图形库	成套销售，一次购买，永久授权	按使用数量收费，或者成套收费
1V1 技术支持服务	12 个月	无（可加入技术群交流）
1V1 培训服务	1-3 次	无
数据存储	企业自己的服务器	乐吾乐公司的服务器
适用对象	需要产品私有部署，或者源码集成，二次开发，项目多、复杂、周期短、对项目效果和数据安全保密有要求的企业	不需要产品，项目较少、项目周期宽松、有一定时间自学的个人用户和初创团队

•企业版优势：适用于项目多、复杂、周期短、对项目效果和数据安全保密有要求的企业

支持可视化编辑器私有化部署，不限图纸下载次数，支持团队共同使用
数据安全与保密：数据在内部网络，满足对数据安全和保密有严格要求的企业或组织
定制化服务：源码版可以根据客户的实际需求进行定制化开发，更好地满足客户的业务需求
集成：与其他系统集成发布成解决方案，具有更高的灵活性
控制力：客户可以完全控制自己的数据和系统，包括数据的备份、恢复、安全策略等
提供专业的 1V1 技术支持和培训服务
节省开发时间和人力成本

•个人版优势：适用于项目较少、项目周期宽松、有一定时间自学的个人用户和初创团队

随时在线使用乐吾乐可视化最新编辑器绘制组态图
能保存 5-1000 不等的图纸
自动保存历史版本，团队共享图纸
节省编辑器私有化部署的学习过程成本
节省编辑器私有化部署的运维成本（人员成本+设备成本）
节省辑器私有化部署升级成本（新版本部署学习、版本兼容、维护等）
个人 VIP 按年收费，启动成本较低。

•开源版优势：适用于有可视化开发能力和经验、有很强的自学能力、交付周期宽松的团队或对可视化有强烈兴趣的个人

核心库开源免费

Q4：企业版和开源区别

开源版本（meta2d.js）是可视化核心引擎，基于引擎可以二次开发成类似官方企业版或任意其他产品形态。企业版属于核心引擎的上层应用开发的产品之一。

开源版：只是画布 Canvas，可以定制开发各种上层产品

企业版：具有丰富功能的编辑器

Q5：在源码基础上二次开发的出来的产品可以出售么？

和自己的软件平台或硬件设备一起作为解决方案的一部分编译交付是可以的，但不能二次销售我司产品源码。

Q6：升级服务怎么定义？

源码版升级：甲方加入到乙方的项目团队中（Github 仓库），甲方一年内可以随时下载产品最新代码。

安装包升级：甲方获取授权码 1 年内，可以随时下载产品安装包的最新文件。

Q7：支持移动端吗？

支持手机、平板、PC、大屏等多端访问，设备支持 webview 就行。根据屏幕大小等比例放大或缩小。

Q8：年会员与企业版安装包的区别

1）线上的乐吾乐可视化平台(包括 2D、3D、大屏等)提供的是完整的 Web Sass 服务，个人用户开通 Vip 会员，可以在云端享受乐吾乐平台提供的 web 可视化产品，用户相关数据存储在乐吾乐的数据库。

2）企业用户购买产品安装包之后，可以选择将产品部署到内网或者公网，由企业用户自行决定部署的配置，数据在企业用户的数据库。

3）如果 license 没有验证通过，企业版安装包无法导出 Vue 组件、React 组件、HTML 以及 Zip 文件。

2.常见技术问答

(1) 集成相关

Q1：如何集成到自己的 IoT 平台

具体可参考“组态教程” - “集成发布”相关教程。总结就是：

① 编辑器集成：

方式 1：购买源码版，直接按照普通 web 运行，部署为子域名或 iframe 嵌入，编译成 vue3 组件，在 vue3 项目中导入使用；

方式 2：购买安装包版，前端以 iframe 方式嵌入

② 预览页面集成：

方式 1：导出为 html，放到自己项目直接运行，使用乐吾乐后端服务部署，或 nginx 代理部署集成

方式 2：导出为 Vue 组件，放到 Vue 项目中使用

方式 3：导出为 React 组件，放到 React 项目中使用

Q2：企业版编辑器用户如何关联？

具体可参考乐吾安装包的“乐吾乐安装包使用说明.pdf”中的单点登录相关教程

(2) 编辑器相关

(3) 安装包版相关

Q1：支持哪些数据库？

安装包版本默认只支持 PostgreSQL 数据库, Java 后端源码版默认使用 PostgreSQL 数据库，如果想要支持其他 SQL 数据库，如 MySQL，需要在 Java 源码的基础上自行修改。

Q2：支持云数据库吗？

支持云数据库，支持数据库的集群部署，在安装包的 yaml 配置文件中配置正确的数据库连接参数即可

Q3：安装包版能集成到我们项目中吗?

可以，安装包作为一个独立的 web 项目部署，也可以以 iframe 的形式嵌入到其他系统当中使用

Q4：接口文档在哪里？

https://doc.le5le.com/document/7

Q5：支持离线独立部署吗？

支持离线独立部署，部署到单机或者部署到局域网的服务器都可以。

Q6：支持免登录吗

支持，在 config.yaml 文件中配置 jwt 项为空，然后重启服务，就可以看到组态会有一个默认用户"乐乐"，后续的所有图纸和组件等数据都属于这个默认用户下。

Q7：支持云部署和容器部署吗？

安装包支持** 可执行程序(直接以进程运行)和容器部署** 两种方式部署，安装包支持内网部署和云部署。

Q8：机器码和 License 是什么？

机器码：安装包运行在操作系统中唯一标识，结合操作系统和配置文件实现的一机一码。用于生成设备授权码（License），解锁安装包的企业功能，防止非法共享传播，从而保护客户的合法权益。

授权码（License）：根据机器码和购买的功能版本生成的有效认证授权码，用于安装包的认证授权，保障客户的企业功能的正常使用。

Q9：获取机器码和验证授权码有效期？

机器码(MUID)：浏览器访问 http://[部署服务器 IP]:[端口]/license，例如：http://localhost/license 如下图所示，MUID 即为机器码，

授权码(License)：如果购买授权并正确配置 yaml 文件里面的 License 值，然后重启服务，授权成功的结果如下图所示，

Q10：企业客户如何获取和管理授权码

1.企业客户提供乐吾乐官网注册帐号给商务，由商务根据合同约定分配授权码个数

2.企业客户登陆个人中心：https://account.le5le.com/order/list

3.个人中心--订单中心--我的订单--订单授权--输入机器码--获取授权--授权码

Q11：编辑器页面请求资源 404

如果页面请求资源报 404，会有多种原因，以下列出常见的排查原因，

1）文件编码问题

如果是编辑器的资源请求 404，这是由于安装包中包含一些中文的文件夹和文件，文件的编码格式与当前运行环境支持的编码格式不一致导致的，可以尝试设置系统的编码格式支持中文编码或者 utf-8 编码即可。

Q12：可部署服务器数量是怎么限制的？

安装包通过一机一码限制，具体如下：

【一机一码】：一个机器码对应一个授权码。其中，机器码由安装包产生，一个操作系统和数据库配置组成一个唯一机器码（重装系统将生成新机器码，恢复系统机器码不变）；授权码由机器码生成，在乐吾乐官网获取或联系商务获取。

【可部署服务器数量】是指授权码数量，一个授权码可部署一个服务器。默认 3 个授权码，即最多可以将安装包部署到 3 台服务器上。更多数量需求，可以联系商务批量购买。

一个服务器可用于多个 Web 用户访问。

(4）其它

Q1: 后端服务是指什么？

采用前后端分离架构，后端服务提供一整套完整的 web 组态编辑器的所有数据接口，包含 2D/3D 图纸接口服务、文件接口服务和用户接口服务等，安装包版本提供后端可执行程序文件，后端源码版提供 Java 源码。用户也可以自行按照接口文档去实现部分必要的接口，参考接口文档： https://doc.le5le.com/document/155692310

Q2: 2D 编辑器部署在内网环境下是否需要额外配置？

不需要，参考标准的前端单应用部署即可（可百度 nginx 前端单应用部署）

Q3: 导出的 html 可以离线部署吗？

可以的，导出的 html 可以按照普通的静态网页独立部署，里面绑定的动效数据都在。

Q4: 开源版有核心算法没开放

不是的。开源核心库开放了所有完整 API 能力，企业版是基于核心库做的上层 UI 封装。

为什么有不开源的企业版：

1.为了产品更好的长远发展

2.让团队觉得“物有所值”投入更多的热情，回报更好的产品

3.每个人都能基于核心库能开发各式各样的丰富产品，我们企业版只是形态之一

Q5: 开发者常见问题

参考：“开源核心库教程”-“开发者常见问题”文档

Q6: 其他问题

其他问题，欢迎联系我们：

微信： alsmile123

Github： https://github.com/le5le-com/meta2d.js/issues

Email： admin@le5le.com

部署试用

乐吾乐可视化系统安装包，支持云端或内网部署使用。

具体请参考《乐吾乐可视化部署包》中的《乐吾乐可视化系统私有部署安装包使用说明.pdf》安装部署；或参考下面视频教程

0、环境要求

服务器配置

CPU：1 核或以上

内存：4G 或以上

国产化

CPU 处理器

支持国产 CPU 处理器，常见的的 amd64 或 arm64 架构的 CPU 都支持。例如，我们的测试服务器为鲲鹏处理器

操作系统

支持欧拉、麒麟等操作系统。

Linux/Windows/MacOS 均可

数据库

源码版支持：PostgreSQL 、人大金仓数据库、华为高斯数据库、达梦数据库、MySQL 等，任选其一。

安装包版本目前仅支持 PostgreSQL

部署方式

安装包部署
源码版本支持编译集成到自己项目部署
docker 部署

1、下载地址

https://gitee.com/le5le/downloads中的《乐吾乐可视化部署包》文件夹

2、安装

2.1 安装使用说明文档

经验丰富的运维同学参考《乐吾乐可视化部署包》文件夹中的《乐吾乐可视化系统私有部署安装包使用说明.pdf》即可。

2.2 部署安装视频教程

新手推荐参考视频教程了解安装部署过程：

Windows 安装教程

https://www.bilibili.com/video/BV1EA4m1A7yQ/?spm_id_from=333.999.0.0

Linux 安装教程

https://www.bilibili.com/video/BV1Sm421E7zQ/?spm_id_from=333.999.0.0

Docker 安装教程

https://www.bilibili.com/video/BV1CA4m1A7rH/?spm_id_from=333.999.0.0

安装部署配置详情教程

https://www.bilibili.com/video/BV1VJ4m1p7Po/?spm_id_from=333.999.0.0

安装部署单点登录教程

https://www.bilibili.com/video/BV1bm421T7zx/?spm_id_from=333.999.0.0

3、授权

部署包是免费试用版本，启动 1 小时后会提示授权。

企业用户获取官方授权 License 后，需要配置 License，然后重启应用。

3.1 查看机器码(MUID)/授权

浏览器访问：http://[部署服务器 IP]:[端口]/license。

例如：http://localhost/license

1.**未授权时**显示机器码：

2.**已授权时**显示授权信息：

3.2 获取授权

1.获取机器码：未购买官方授权(或不配置授权 License)，访问 *查看机器码/授权 *画面，页面中 MUID 值即为机器码。

2.企业客户提供乐吾乐官网注册帐号给商务，由商务根据合同约定分配授权码个数。

3.企业客户登陆个人中心

4.个人中心--订单中心--我的订单--订单授权--输入机器码--获取授权--授权码

3.3 配置授权

获取官方授权后，把授权码填写到部署包配置文件 config.yaml 中的 licesne 项后，重启应用程序即可。

3.4 使配置生效

浏览器访问：http://[部署服务器 IP]:[端口]/api/admin/config/reload。

例如：http://localhost/api/admin/config/reload

然后重新按照 3.1 查看授权

4、使用访问

浏览器访问：http://[部署服务器 IP]:[端口]
默认端口为 80，访问时可以缺省，例如：http://[部署服务器 IP]。
如果是本地部署，可以使用 localhost 或 127.0.0.1 代替 IP，例如：http://localhost

4.1 登录注册

初始默认账号

初始安装完成后，默认有一个管理员账号：le5le，密码：le5le123

【注意】上面密码为不修改配置文件 config.yaml 的密码盐 secret 的前提下。如果修改了密码盐，注册一个其他账号 A，可以找数据库管理员把 A 的密码字段复制到 le5le 账号下，le5le 的密码变为 A 的密码，然后在个人中心可以自行修改密码。

其他账号

点击右上角”登录“或”登录/注册“按钮自行注册即可

4.2 大屏可视化

4.3 3D 可视化

4.4 2D 可视化

5、常见问答

源码版如何安装部署：

源码版安装部署在交付客户的文档说明中，有任何问题，可以随时咨询企业技术支持。

源码版环境要求：OpenJDK-17 以上、SpringBoot-3.1.2、apache-tomcat-10.1.11 、Nginx

更多常见问答

https://doc.le5le.com/document/1

大屏可视化.md 180 KB Histórico Raw

产品简介

1.简介

2.在线体验

3.特点

3.1 Web 组态，零代码，一键构建，无限可能

3.2 实时展示，自动化连接数据

3.3 丰富的大屏可视化组件

3.4 支持多方式部署和发布

3.5 多端适配能力

3.6 强大的扩展能力

3.7 满足国产化需求

4.应用场景

5.技术路线

6.性能测试

7.解决方案（可在线编辑/预览）

7.1 暖通可视化（2.5D）

7.2 废水处理系统（2.5D）

7.3 废气处理（2D）

7.4 机房可视化运维平台（3D 大屏）

7.5 暖通可视化系统（3D 大屏）

8.在线使用

9.技术咨询

10.商务咨询

大屏与 2D 区别

一、主要差别

1.组态能力及适用场景

2. 数据报表能力

3. 3D/2D 场景交互

4. 方案管理

二、详细功能对比清单

大屏快速入门

一、在线使用

二、步骤

1.创建图纸

2.添加事件

3.设置动效

4.数据通信

5.预览/分享/发布

6.私有部署与集成

7.图纸管理

三、解决方案

组态教程

引言

1、3D 方案的引入

2、嵌入 2D 及网页

3、2D，3D 运行地址查询

4、调整可操作区域并嵌入图表

5、大屏与嵌入的项目之间交互

5.1 3D 向大屏发送消息

5.2 大屏向 3D 发送消息

5.3、本地项目与大屏的消息通信

6、嵌入项目的修改

7.项目部署

使用手册

1 总览

1.1 画布

1.2 菜单栏

1.3 资源、数据和结构

1.4 属性面板

1.4.1 画布属性面板

1.4.2 单选图元属性面板

1.4.3 多选图元属性面板

2 资源

2.1 系统资源

2.2 我的资源

2.2.1 方案/模板

2.2.2 组件

2.2.3 图片

2.2.4 3D

3 文件

3.1 文件夹操作

3.2 文件下载

3.2.1 下载 JSON 文件

3.2.2 导出为 zip 文件

3.2.3 下载离线部署包

3.2.4 下载 vue2 组件包

3.2.5 下载 vue3 组件包

3.2.6 下载 React 组件包

3.2.7 下载为 png

大屏可视化.md 180 KB

Histórico Raw