编辑器功能详解
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
// 场景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 | 数据缩放配置表 |
🎯 实战案例
创建工业监控面板
- 从组件库拖拽仪表盘组件到画布
- 在属性面板配置数据绑定
- 设置阈值和颜色映射
- 添加指示灯组件显示设备状态
- 配置动态图表展示趋势数据
创建工艺流程画面
- 使用工业图元组件绘制设备
- 添加流动动画模拟物料流转
- 设置状态切换显示不同颜色
- 添加按钮组件实现远程控制
立即体验
👉 演示地址 : http://www.ricon.cloud:81
🌐 官网地址 : http://www.ricon.cloud