编辑器教程

本章将将详细介绍编辑器的各个功能区域及使用方法。

左侧组件栏

基础组件

基础组件是组态界面的功能交互核心，是具备数据绑定、状态变化、人机交互能力的 “活控件”，是整个监控界面的功能骨架。

• 交互控制类：包含按钮、开关、输入框、视频监控等，用于实现用户对设备的远程控制、参数输入、画面切换等操作。

• 数据展示类：包含仪表盘、折线图、饼图、液位显示、状态文本等，用于实时呈现设备温度、压力、流量、电流等采集数据。

• 辅助基础类：包含方形、圆形、箭头、时间、天气等基础图形与通用组件，用于界面布局分隔、信息补充与场景完善。

基础组件的核心价值是实现数据实时展示 + 人机双向交互，让监控界面不仅能 “看”，还能 “控”。

图元图库

图元图库是面向各行业的专业场景素材库，以高度仿真的静态图形还原真实设备与设施，是组态界面的场景血肉。

• 电力行业：包含断路器、互感器、变压器、刀闸、母线等二次接线标准符号，适配电力监控、配电房可视化等场景。

• 工业行业：包含风机、水泵、锅炉、管道、罐体、搅拌装置等设备图标，适配工厂、水务、化工等生产监控场景。

• 仪表设备：包含流量计、压力表、温度表、液位计等测量仪表图形，直观对应现场采集设备。

图元图库让监控画面与现场物理布局高度一致，降低理解成本，提升场景还原度与专业性。

画面装饰

画面装饰是组态界面的视觉美化工具，用于提升界面美观度、优化信息层次、突出重点内容，是界面的 “颜值皮肤”。

• 头部与分割装饰：包含标题栏、横幅、分割线等，用于明确界面分区、强化标题信息。

• 边框与容器装饰：包含圆形、方形、多边形边框，以及渐变、发光、立体效果框，用于包裹组件、提升视觉质感。

• 提示与动态装饰：包含对话气泡、标注框、动态 GIF、告警标识等，用于提醒关键信息、增强告警辨识度与画面生动性。

画面装饰不直接参与数据交互，但能让界面更整洁美观、专业、易读。

画面模板/我的图库

画面模板与我的图库是高效复用解决方案，提供可直接套用的成品界面与自定义素材管理能力，是提升设计效率的 “加速器”。

• 平台预设模板：提供通用深色/浅色主题界面，一键套用快速起步。

• 我的模板：用户可将自行设计完成的优秀界面保存为模板，重复使用于同类项目。

• 我的图库：支持用户自定义上传、分组、管理专属素材，实现个性化素材的统一维护与快速调用。

该模块大幅减少重复设计工作，统一项目风格，缩短组态画面搭建周期。

顶部工具栏

顶部工具栏是画布编辑的快捷操作中心，按功能分为操作类、层级类、排版对齐类，满足设计过程中高频编辑需求。

• 操作类

  撤销/恢复：支持回退上一步误操作、重做已撤销步骤，提升设计容错性。

  复制：快速克隆选中组件，无需重复添加与配置，显著提升设计效率。

• 层级类

  上移一层/下移一层：逐步调整组件叠加顺序，解决元素遮挡问题。

  置于顶层/置于底层：一键将组件置顶或置底，快速完成多层级布局调整。

• 排版对齐类

  提供左对齐、右对齐、水平居中、垂直居中、顶端对齐、底端对齐、等间距分布等功能，批量规整多组件位置，让布局整齐统一、专业规范。

右侧属性区

右侧属性区是组件个性化配置的核心面板，会根据所选组件类型动态展示对应的配置项，整体可归纳为5 大核心配置模块：数据配置，外观配置，动效配置，事件与行为配置公共属性配置。

数据配置

数据配置是右侧属性区的核心功能，用于将界面组件与现场设备采集变量进行绑定，实现 “数据驱动界面变化”。

以历史表格组件为例：将组件拖拽至画布后，在属性区进入数据配置页面，可选择对应站点、设备及采集变量，完成数据源绑定。配置完成后，表格可自动加载历史数据、展示趋势、支持筛选查询，实现数据可视化呈现。

点击数据配置中的“选择数据点”，弹出站点与变量选择窗口。用户可按站点—传感器—变量层级结构，精准勾选需要展示或控制的采集数据，确保组件展示内容与现场设备实时同步。选择完成后返回属性区，即可完成组件与数据点的关联。

完成组件拖拽、数据绑定与属性配置后点击【保存】按钮，保存画面。返回表格点击 【查看画面】，进入运行模式。此时组件已与真实数据联动，可实时展示设备状态、历史曲线、数值变化等监控信息，验证组态画面效果是否符合预期。

外观配置

外观配置用于自定义组件视觉样式，让界面更美观、更贴合场景。

以“液位”组件为例，可配置液体颜色、背景色、边框粗细与颜色、透明度、圆角样式、尺寸比例等，使液位显示更贴近现场罐体视觉效果。外观配置适用于所有图形、容器、显示类组件，统一界面视觉风格。

动效配置

动效配置让组件具备动态展示能力，直观反映数据变化与设备运行状态。

支持流动动画、闪烁告警、显隐控制、路径移动等效果。例如挂钩组件可配置升降路径动画，模拟现场吊装动作；流动条可配置流体方向与速度，模拟管道物料传输。动效让监控画面更生动、状态更易识别。

事件与行为配置

事件与行为配置实现组件与人、组件与页面的交互逻辑，赋予组态画面操作能力。

以多功能开关为例：可配置点击事件、状态切换事件、鼠标悬停提示、页面跳转、指令下发等行为。用户在运行画面中操作开关，可直接触发对应控制逻辑，实现远程操控与联动跳转。

完成事件与行为配置后，进入画面运行界面即可查看实际效果。将鼠标悬浮在组件上方，即可显示预先配置的提示文字信息，便于运维人员快速了解设备含义与参数说明。

对组件单击/双击事件进行配置后，在预览画面中执行对应操作，可触发页面跳转、弹窗显示、指令发送等设定效果，交互逻辑清晰、响应直观。

公共属性配置

公共属性是所有组件通用的基础设置，用于统一控制组件基础状态，保障界面规范一致，随组件类型变化，是控制组件在画布中基础状态的核心设置，也是界面布局排版的基础保障。

• 位置：用于精准定义组件在画布中的坐标（X轴/水平坐标、Y轴/垂直坐标），可手动输入数值，实现组件的精准定位，避免拖拽摆放的位置偏差，保障多组件布局的整齐度。

• 大小：用于自定义组件的宽、高尺寸（单位为像素），可手动输入数值，按需调整组件的显示比例，适配不同画布尺寸与界面布局需求，让组件大小与整体画面风格统一。

画布配置

画布配置是针对整个组态的画布显示的全局基础设置面板，用于统一配置画面的尺寸大小、视觉效果等，是搭建标准化监控界面的全局配置核心，所有设置均作用于整个画布，而非单个组件。

• 画布分辨率：预设了标准比例，也支持自定义分辨率，用于定义监控画面的最终显示尺寸，适配不同终端的显示需求，保证画面在各类设备上的显示完整性。

• 画布辅助线：可开启/关闭网格辅助线，搭配自定义辅助线颜色，用于组件的精准对齐、等距排版，大幅提升界面布局的规整度与设计效率，是专业排版的核心辅助工具。

• 背景颜色：自定义画布的底色，可设置纯色背景，统一界面视觉基调。

• 背景图片：支持上传自定义背景图，可选择是否强制铺满屏幕，用于快速搭建场景化背景，让监控画面更贴合现场实际场景。

• 横屏画面在手机端强制旋转：控制移动端访问时，是否自动将横屏画面旋转为适配手机的显示状态，保障移动端查看体验。

• 画面缩放平移：开启后，支持在预览/运行状态下对画面进行缩放、拖拽操作，方便查看大屏画面的细节内容。

• 画面缓存(监控页)：控制监控页面的缓存策略，优化页面加载速度，提升访问流畅度。

• 条件弹框是否启用：控制条件弹框功能的开关。

• 条件弹框配置：自定义触发条件、弹框内容与样式，实现当满足特定条件时，自动弹出提示、告警、操作窗口，是实现智能化告警、交互提醒的核心功能。