Ricon组态组件生态 - 丰富的可视化组件库

原创于 2026-06-22 12:27:44 发布 · 143 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#组态软件 #组态 #物联网 #架构 #前端

组件系统概述

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结构

{
    "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"
        }
    ]
}

数据绑定配置

{
    "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             │
└─────────────────────────────────────────────┘

组件开发示例

// 自定义组件创建逻辑
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;
}