大屏组态
低代码大屏编辑器 · 组件库 · 点位替换
大屏组态是平台的低代码可视化编辑器,通过拖拽组件、绑定数据源、配置动画与事件,快速搭建数据监控大屏。本篇还包含点位批量替换功能。
可视化通过低代码交互设计:提供预置模板或空白画布,拖拽调整组件位置与尺寸(支持网格对齐);通过定制 / 动画 / 数据 / 事件四个面板实时调整颜色、动画与交互;数据来源支持静态数据、后端接口、数据绑点等多源驱动。数据变更自动触发图表刷新,业务人员无需编程即可参与设计。
| 维度 | 大屏组态 | 设备组态 | 应用组态 |
|---|---|---|---|
| 定位 | 数据可视化看板 / 指挥中心大屏 | 单类设备的图形化监控与控制界面 | 多页面应用 + 可复用业务组件 |
| 典型场景 | 能耗总览、告警态势、KPI 展示 | 空调温控器界面、设备运行监控 | 子系统门户、设备列表控制页 |
| 绑点维度 | 设备类型 + 设备名称 + 属性(完整) | 仅设备属性(设备类型已关联、设备编码运行时传入) | 绑定产品/设备/属性(含自定义组件封装) |
| 关键差异 | 图表类组件为主,支持虚拟点位 | 画布最佳 220×240,运行时才接收/下发点位;不支持虚拟点位 | 支持多页面、设备列表页、另存为模板、自定义业务组件 |
| 生效方式 | 预览页面即生效 | 需通过「菜单管理 → 系统类型」生成子系统页面 | 预览页面即生效,支持双击组件查看详情弹窗 |
| 操作路径 | 可视化 > 大屏组态 | 可视化 > 设备组态 + 系统类型 + 菜单 | 可视化 > 应用组态(应用/模板/组件) |
展示汇总数据选大屏组态;要按设备类型批量生成监控页选设备组态;要搭多页面门户 + 复用业务组件选应用组态。三者编辑器操作基本一致,主要差别在绑点维度和生效路径。
通过图形化界面和拖拽组件快速构建数据可视化看板,无需编写复杂代码即可实现数据连接、交互设计及动态展示。核心价值:降低技术门槛、缩短开发周期。
大屏管理界面用于组织、创建、复用与迁移大屏。设计好的大屏可存放在文件夹或根目录。


创建成功后在列表可看到组态,点击查看大图与最后编辑时间。右下方编辑进入编辑工作空间,预览查看最终效果(绑点数据获取/下发仅在预览页生效)。


| 操作 | 说明 |
|---|---|
| 新建 | 选择组态或目录类型,输入内容完成创建 |
| 编辑 | 在新标签页打开编辑工作空间 |
| 预览 | 查看组态最终效果,绑点数据在此页才生效 |
| 复制 | 弹出对话框输入新标题,复制组态内容 |
| 设置 | 修改组态名称、描述、所在目录 |
| 删除 | 确认后删除组态(支持勾选批量删除) |
| 导出 / 导入 | 导出生成组态文件;导入时勾选「是否更新已存在数据」则按 ScreenCode 更新,否则忽略同名数据 |
勾选「更新已存在数据」时,相同 ScreenCode 的组态会被更新;若名称相同,则以「名称-导入」方式重命名。不勾选则遇到相同 ScreenCode 直接忽略。
- 进入「可视化 > 大屏组态」,点「新建」,选「组态」,输入名称
- 在列表找到刚建的大屏,点「编辑」进入编辑器
- 从左侧组件库拖一个图表(如「能耗柱状图」)到画布上
- 选中组件,在右侧「数据」面板选数据源(后端接口或绑点)
- 在「定制」面板调颜色/字号,「动画」面板加过渡效果
- 点右上角「预览」查看实时效果——数据会自动加载
满意后回到管理页,大屏已自动保存。后续随时编辑调整。
点击编辑按钮,浏览器会打开新标签页进入编辑工作空间。整体布局:顶部标题栏 + 工具栏、左侧组件/固件列表、中间画布、右侧配置面板、左侧下方操作历史、右侧下方快捷键与缩放。


| 区域 | 功能 |
|---|---|
| 顶部中间 | 标题,点击文字可编辑 |
| 顶部左侧 | 回到主页、显示/隐藏组件面板、图层面板、详情设置面板、撤销、恢复、保存 |
| 顶部右侧 | 预览(绑点在此生效)、主题颜色、深色/浅色风格切换 |
| 左侧 | 组件与固件列表(分类、缩略图、名称),拖入画布使用 |
| 图层列表 | 显示已拖入组件,选中图层与画布组件双向高亮联动 |
| 右侧 | 组件配置:定制 / 动画 / 数据 / 事件 四个面板 |
| 页面配置 | 点击画布空白处显示:背景图/颜色、应用类型、适配方式、滤镜、自定义主题色(滤镜与主题色仅对图表生效) |
| 左下角 | 操作历史记录 + 画布同步状态(有改动时 30 秒自动保存,仅保存画布数据,不更新封面缩略图) |
| 右下角 | 快捷键展示 + 画布缩放比例调整 |
| 导入 / 导出 | 支持 json/txt 文件;导出按时间戳命名 json 文件 |


定制属性面板
选中组件后右侧默认显示。其中名称、尺寸、对齐方式、位置是所有组件共有属性;其余属性根据组件功能定制开发,调整后画布组件实时响应。

动画面板
给组件配置强调动画和移入动画。一个组件只能选一种动画,点击上方「清除动画」按钮可清除配置。

数据面板(6 种数据源)
数据面板是组件的数据来源,共 6 种方式,前 3 种为组件通用获取方式:
| 数据源 | 说明 | 适用组件 |
|---|---|---|
| 静态数据 | 下载默认数据后按格式编辑再导入 | 通用 |
| 动态请求 | 配置请求方式/地址/参数,全局公共配置可设通用前置 URL;更新间隔为 0 时仅初始化请求 1 次;可用过滤器转换格式 | 通用 |
| 公共接口 | 类似动态请求,适用于多个组件共用;接口变更时所有引用组件同步更新 | 通用 |
| 绑点 | 选设备类型→设备名称→属性完成绑点;预览页才能看到实时值与下发 | 文字/绑点文字/数值加减/图表文字选择器/递加减/滑块/灯具控制/绑点图片 |
| 数据源配置 | 配置设备分组/类型/属性/比较模式/比较值,获取符合条件的设备数量,多条件累计 | 统计文字 |
| 历史数据绑点 | 绑定后返回一组历史记录值作图表数据展示 | 历史记录绑点图固件 |


编辑工作空间没有配置实时推送环境,绑定后面板显示的值为只读状态,不会实时变更。需点击右上角「预览」查看绑点信息和完成下发操作。如需清除绑定,点击绑点旁边的「清除绑点」按钮。
事件面板
提供基础事件(单击、双击、鼠标进入/移出)和高级事件(组件生命周期)两类,通过编写代码实现交互。编辑时右侧「验证结果」实时显示错误,可展开「使用示例」插入代码。


部分控件组件(如选项卡)支持组件交互:选择完成后可配置画布组件或公共接口联动,把当前选项值传递给目标组件的请求参数,触发目标更新。
大屏组态提供一整套从搭建到应用的基础组件,覆盖图表、文本、控件、列表、边框、装饰、图片、图标、固件九大类。下图展示柱状图、线图与其他图表分类。



| 分类 | 组件与说明 |
|---|---|
| 文本组件 | 文本(最常用,可去文字留边框作矩形)、渐变文字(标题/标签)、弹幕文字(循环公告)、绑点文字(按值匹配显示选项)、统计文字(按数据源配置统计设备数量) |
| 控件组件 | 时间选择器(日期时间/范围,仅静态数据)、下拉选择器、标签选择器、分页、输入框、递加/递减/滑块(绑点下发)、图标文字选择器(弹出选择/顺序切换,可配二次确认)、图片/轮播图/视频、远程网页(嵌入网址)、词云(字体大小∝值大小) |
| 列表组件 | 滚动排名(轮播排名数据)、滚动列表(表格循环滚动,支持行号)、基础分页表格(按分页设置分页,斑马条纹/分割线) |
| 边框组件 | 共 14 种,包裹主题信息,可设边框颜色/动画/背景 |
| 装饰组件 | 共 9 种:进度条、分割线、标题背景、流程图(水流动画分支)、数字计数(过程动画/精度/分隔符)、翻牌器、通用时间、时钟、倒计时、全屏按钮、管道(横/纵,正向/反向/停止)、圆点光环 |
| 图片组件 | 绑点图片(按值匹配图片路径)、点击上传图片(点击弹窗上传,生成图片组件可直接拖入,删除不影响已用) |
| 图标组件 | 动画/天气/通用 3 类,可设角度、旋转动画、旋转速度 |
| 固件 | 基于业务场景定制,已配置好数据请求,拖入即用(需手动绑点的除外):历史记录固件、滚动告警固件、告警趋势图、数据统计、用电占比、能耗同环比柱状图、用电排名、用电环比、能耗统计、设备监控组态 |
历史记录固件:一个绑点对应一个图例,最多 5 个,近 1 天间隔 1 分钟、7/30 天间隔 1 小时。滚动告警固件:表头动态选配,数据范围全部/已读/未读。数据统计固件:实例/报警/设备/联动策略/子系统/实时策略/用户/未读告警数量。设备监控组态:环形图展示未使用/数据已更新/数据未更新设备数量。
以下功能位于应用组态模块(非大屏组态)。因与大屏组态的绑点操作相关,此处一并说明。
应用组态中提供两种点位批量替换方式:脚本替换(针对单个组件)和手动批量替换(针对应用/模板/组件)。
在应用编辑页面,选中需要绑点的组件,右侧点击属性绑定图标(以开关组件为例),弹出绑定弹窗,再点击「脚本替换」tab,即可通过脚本方式进行批量点位替换。


在应用 / 模板 / 组件编辑页面中,选中需要替换点位的应用/模板/组件,通过鼠标右键菜单中的「批量点位替换」可打开已有点位数据替换的功能弹窗,批量修改绑定的产品 / 设备 / 属性信息。


脚本替换面向单个组件的多属性批量绑定,适合组件级快速配置;手动批量替换面向整个应用/模板/组件的点位迁移,适合项目复用或设备批量替换场景(如把 demo 应用的点位整体替换为客户实际点位)。