组件系统概述
Ricon组态系统提供了丰富的组件库，涵盖工业可视化所需的各种组件类型，支持灵活的配置和扩展。
📦 组件分类
基础组件（Basic Components）
| 组件类型 | 说明 | 配置文件 |
|---|---|---|
| 文本组件 | 支持字体、颜色、大小配置 | basic.json |
| 按钮组件 | 支持点击事件、写值、跳转 | basic.json |
| 图片组件 | 支持静态图片、状态切换 | basic.json |
| 日期组件 | 当前日期时间显示 | basic.json |
| 天气组件 | 实时天气信息展示 | basic.json |
| 视频组件 | 视频播放、监控画面 | basic.json |
| 表格组件 | 数据表格展示 | basic.json |
| iframe组件 | 嵌入网页、图表 | basic.json |
图表组件（Chart Components）
基于ECharts 5.3.2构建：
| 图表类型 | 说明 | 应用场景 |
|---|---|---|
| 折线图 | 数据趋势展示 | 温度、压力趋势 |
| 柱状图 | 数据对比分析 | 产量对比 |
| 饼图 | 占比关系展示 | 能源消耗占比 |
| 面积图 | 数据累积展示 | 流量累计 |
| 仪表盘 | 实时数值显示 | 转速、压力 |
| 雷达图 | 多维数据展示 | 设备状态评分 |
图元组件（Graphic Components）
工业电气图元库：
| 分类 | 说明 | 数量 |
|---|---|---|
| 电气图元 | 开关、接触器、继电器等 | 50+ |
| 设备图元 | 泵、风机、阀门等 | 30+ |
| 管道图元 | 管道、弯头、三通等 | 20+ |
| 仪表图元 | 压力表、温度计等 | 15+ |
动画组件（Animation Components）
| 组件类型 | 说明 | 配置参数 |
|---|---|---|
| 旋转组件 | 图片旋转动画 | 速度、方向 |
| 流动组件 | 流动条动画 | 速度、颜色 |
| 闪烁组件 | 闪烁提示效果 | 频率、颜色 |
| 脉冲组件 | 脉冲扩散效果 | 半径、速度 |
🎨 组件配置
组件JSON结构
json
{
"id": "text_001",
"type": "text",
"name": "文本组件",
"icon": "text.svg",
"category": "basic",
"defaultConfig": {
"x": 0,
"y": 0,
"width": 200,
"height": 30,
"text": "默认文本",
"fontSize": 14,
"color": "#333333",
"bold": false
},
"properties": [
{
"name": "text",
"label": "文本内容",
"type": "input"
},
{
"name": "fontSize",
"label": "字体大小",
"type": "slider",
"min": 10,
"max": 48
},
{
"name": "color",
"label": "文字颜色",
"type": "color"
}
]
}数据绑定配置
json
{
"dataBind": {
"enabled": true,
"dataKey": "d1a001",
"dataSource": "hardware",
"scale": {
"enabled": true,
"inputMin": 0,
"inputMax": 1000,
"outputMin": 0,
"outputMax": 100
},
"condition": {
"enabled": true,
"rules": [
{
"operator": ">",
"value": 80,
"color": "#dc3545"
},
{
"operator": ">",
"value": 60,
"color": "#ffc107"
}
]
}
}
}🔧 组件开发
添加新组件步骤
┌─────────────────────────────────────────────┐
│ 1. 创建编辑模块 │
│ modules/edit/edit-xxx.html │
│ modules/edit/editXxx.js │
├─────────────────────────────────────────────┤
│ 2. 注册组件 │
│ assets/json/basic.json │
│ 配置图标、默认属性、属性面板 │
├─────────────────────────────────────────────┤
│ 3. 实现渲染逻辑 │
│ assets/js/core/stageOperation.js │
│ assets/js/core/stageView.js │
├─────────────────────────────────────────────┤
│ 4. 实现动画处理 │
│ assets/js/core/moduleAnimation.js │
├─────────────────────────────────────────────┤
│ 5. 实现数据更新 │
│ assets/js/core/stageView.js │
└─────────────────────────────────────────────┘组件开发示例
javascript
// 自定义组件创建逻辑
function createCustomComponent(config) {
// 创建Konva节点
const group = new Konva.Group({
x: config.x,
y: config.y,
width: config.width,
height: config.height
});
// 添加子元素
const rect = new Konva.Rect({
width: config.width,
height: config.height,
fill: config.fill,
stroke: config.stroke,
strokeWidth: 2
});
group.add(rect);
// 添加文本
const text = new Konva.Text({
text: config.text,
x: 10,
y: 10,
fontSize: config.fontSize,
fill: config.color
});
group.add(text);
return group;
}🎯 组件最佳实践
性能优化建议
- 图层分组 - 将静态组件和动态组件分开管理
- 缓存复用 - 复用相同配置的组件实例
- 懒加载 - 按需加载非可见区域组件
- 事件节流 - 避免频繁的事件触发
组件复用技巧
- 使用模板功能保存常用配置
- 导出组件配置JSON复用
- 使用复制粘贴快速创建相似组件
数据绑定最佳实践
- 合理命名数据点（如：d1a001表示设备1的温度）
- 配置数据缩放适应显示范围
- 设置合理的更新频率
组件展示
基础组件展示
- 文本组件：支持富文本配置
- 按钮组件：支持多种交互事件
- 图片组件：支持状态切换
- 日期组件：自动更新时间
图表组件展示
- 实时折线图：动态更新数据点
- 仪表盘：实时数值显示
- 饼图：数据占比分析
图元组件展示
- 电气图元：标准工业符号
- 设备图元：泵、风机等
- 管道图元：连接管线
动画组件展示
- 旋转动画：设备运转效果
- 流动动画：物料流动效果
- 闪烁动画：告警提示
立即体验
👉 演示地址 : http://www.ricon.cloud:81
🌐 官网地址 : http://www.ricon.cloud