当前位置：首页 > news >正文

Ricon组态可视化编辑器 - 所见即所得的工业画布

news 2026/7/8 9:45:31

编辑器功能详解

Ricon组态系统提供了强大的可视化编辑器，让您能够轻松创建专业的工业监控画面。编辑器采用直观的拖拽式操作，无需编程经验即可上手。

🎯 核心编辑功能

1. 组件库管理

编辑器提供了丰富的组件库，涵盖以下类别：

基础组件

📊图表组件- ECharts图表（柱状图、折线图、饼图等）
📝文本组件- 支持字体、颜色、大小等配置
🔘按钮组件- 支持点击事件、写值、画面跳转、脉冲信号
🖼️图片组件- 支持静态图片、图片切换、状态图片
📅日期组件- 当前日期显示
🌤️天气组件- 天气信息展示
📺视频组件- 视频播放、监控画面
🔄动画组件- 旋转、流动条、闪烁等

图元组件

⚡电气图元- 丰富的工业电气图元库
🔌开关组件- 开关图标、开关状态
💡指示灯- 状态指示灯
🔧工业设备- 各类工业设备图元

高级组件

📊表格组件- 数据表格展示
🌐iframe组件- 嵌入网页、ECharts、表格
📡数据绑定- 硬件设备数据点绑定
🎯条件配置- 数据条件判断和状态变化
⚙️事件行为- 组件交互事件配置

2. 图层管理

支持多层级图层管理
图层上下移动
图层显示/隐藏控制
图层锁定保护

3. 对齐工具

水平对齐（左对齐、居中、右对齐）
垂直对齐（顶部、居中、底部）
等间距分布
组件尺寸统一

4. 撤销/恢复系统

基于ArrayStack实现的完整操作历史记录：

支持无限撤销/恢复
快捷键：Ctrl+Z（撤销）、Ctrl+Y（恢复）
操作历史可视化

⌨️ 快捷键支持

功能	快捷键	说明
保存	`Ctrl + S`	保存当前场景
预览	`Ctrl + P`	预览场景效果
撤销	`Ctrl + Z`	撤销上一步操作
恢复	`Ctrl + Y`	恢复撤销的操作
复制	`Ctrl + C`	复制选中组件
粘贴	`Ctrl + V`	粘贴组件
删除	`Delete`	删除选中组件
全选	`Ctrl + A`	选中所有组件
放大	`Ctrl + 滚轮上`	放大画布视图
缩小	`Ctrl + 滚轮下`	缩小画布视图
全屏	`F11`	切换全屏模式
适应屏幕	`Ctrl + 0`	自适应画布大小

🎨 编辑操作流程

┌─────────────────────────────────────────────┐ │ 1. 打开编辑器 │ │ http://www.ricon.cloud:81/editor.html │ ├─────────────────────────────────────────────┤ │ 2. 添加组件 │ │ 从左侧组件库拖拽到画布 │ ├─────────────────────────────────────────────┤ │ 3. 编辑属性 │ │ 选中组件，在右侧属性面板配置 │ ├─────────────────────────────────────────────┤ │ 4. 数据绑定 │ │ 配置硬件设备数据点连接 │ ├─────────────────────────────────────────────┤ │ 5. 保存作品 │ │ Ctrl+S 或点击保存按钮 │ ├─────────────────────────────────────────────┤ │ 6. 预览效果 │ │ Ctrl+P 或点击预览按钮 │ └─────────────────────────────────────────────┘

📁 导入/导出功能

导出场景

// 场景JSON结构示例{"stageId":"BY0001","stageName":"车间监控","width":1920,"height":1080,"children":[{"type":"text","name":"标题","x":100,"y":50,"text":"生产监控中心","fontSize":24,"color":"#333"}]}

导入场景

支持JSON格式场景文件导入
自动解析组件配置
保持原有布局和属性

🔧 属性配置面板

组件属性采用JSON配置，支持以下属性类型：

属性类型	说明
input	文本输入框
color	颜色选择器
selectAdvanced	下拉选择框
slider	滑块
hardwareInputNew	硬件设备选择
whereStatusColorTable	状态颜色配置表
fontNew	字体配置
BORDER	边框配置
RotatImage	旋转图片选择
valueZoomTableNew	数据缩放配置表