11 种触发 × 18 种行为：ricon 交互编排系统全解析

点击变色、超限报警、图元联动、下发指令——传统开发要写代码的交互，ricon 全部可视化配置。

交互开发的"无底洞"

做过 SCADA 前端的工程师都懂：

• “温度超过 80℃ 变红”——写 watcher
• “点按钮弹出确认框，确认后下发指令”——写 event handler
• “告警时先闪烁 2 秒，再弹窗”——写 setTimeout 链
• “点击图元 A，刷新图元 B 的数据”——写组件通信

每个交互都不复杂，但加起来就是几千行代码。更别说客户改需求：“不要弹窗，改成侧边栏滑出”——又要重写。

ricon 的解法是：把交互抽象成"触发 × 行为"的可视化编排。

核心模型：Trigger × Action

┌──────────────────────────────────┐
│         交互编排系统                │
├──────────────────────────────────┤
│  11 种触发（Trigger）              │
│  ×                               │
│  18 种行为（Action）               │
│  +                               │
│  条件（Condition）+ 顺序 + 延时      │
└──────────────────────────────────┘
        ↓
  任意组合，可视化配置

11 种触发方式

18 种行为类型

条件系统

每个行为都可以附加条件：

• 关系运算：>、<、=、>=、<=、!=
• 代码条件：JavaScript 表达式（复杂逻辑）
• 滞环规则：>80 触发、<78 解除（避免阈值抖动）

顺序 + 延时编排

多个行为可以组合：

触发：值变化（温度 > 90）
  ↓
行为1：变色（红色）       —— 立即
行为2：播放告警音         —— 延时 0ms
行为3：弹窗（严重告警）    —— 延时 2000ms
行为4：上报告警记录       —— 延时 0ms

这就是"先闪烁 2 秒再弹窗"——可视化配置，不写一行代码。

实战场景：4 个真实交互案例

案例 1：温度超限三级告警

业务需求：

• 温度 > 80℃ → 变黄色提示
• 温度 > 90℃ → 变红色 + 告警灯闪烁
• 温度 > 95℃ → 弹窗 + 告警音 + 上报

传统开发：约 100 行 JS 代码 + 状态机

ricon 配置：

配置时间：5 分钟。

案例 2：设备远程控制（带回执）

业务需求：

• 点击"启动"按钮 → 二次确认 → 下发指令 → 等待回执 → 显示结果

ricon 配置：

触发：单击（启动按钮）
  ↓
行为1：弹窗（确认启动？） [类型：确认框]
  ↓ （用户点确认）
行为2：下发控制指令
  - 指令：SET pump.01.status 1
  - 通道：WebSocket
  - 等待回执：是
  - 超时：5s
  ↓
回执处理：
  - 成功 → 提示"启动成功"
  - 失败 → 提示"启动失败：" + msg
  - 超时 → 提示"设备无响应"

全程零代码。

案例 3：点击设备弹详情

业务需求：点击产线上任意一台电机，弹出该电机的实时参数面板。

ricon 配置：

触发：单击（电机图元）
  ↓
行为：弹窗
  - 弹窗画面：设备详情子画面
  - 参数：{ deviceId: ${this.dataId} }
  - 尺寸：600×400
  - 模态：非模态（可同时看主画面）

子画面通过 deviceId 参数动态绑定数据。1 个弹窗模板，复用到 50 台设备。

案例 4：画面跳转（主子画面）

业务需求：从总览画面点击某条产线，进入该产线的子画面。

ricon 配置：

触发：单击（产线图元）
  ↓
行为：打开画面
  - 目标 stageId：line-01-detail
  - 打开方式：替换当前画面
  - 传递参数：{ lineId: "01" }

子画面顶部放一个"返回"按钮，配置"返回"行为即可。

高级玩法：JavaScript 增强

零代码是默认，代码是增强——当可视化配置不够用时，可以用 JavaScript：

触发：值变化
  ↓
行为：执行 JavaScript
  ↓
代码：
  const temp = event.value;
  const prediction = predictNextHour(temp); // 调用预测算法
  $stage.push({ "temp.predict": prediction });
  if (prediction > 100) {
    $stage.emit("ai-warning", { level: "high" });
  }

适用场景：

• 复杂计算（如预测、统计）
• 调用外部库（如算法 SDK）
• 与宿主系统复杂联动

性能优化：事件总线 + 防抖

ricon 的交互系统经过工业场景验证：

• 事件总线：图元间通信用发布订阅，避免 prop drilling
• 滞环防抖：阈值附近反复变化不会触发无限告警
• 行为合并：同一行为连续触发自动合并，避免抖动

实测：500 个图元 + 200 个交互规则，画面依然流畅。

与传统开发的对比

配置即文档

ricon 的交互配置自带文档属性——客户、实施、开发三方看同一份可视化配置，沟通成本指数级下降。

不再有"我以为你说的是……"的扯皮。

结语

交互是工业可视化的灵魂，但不该是开发的负担。

ricon 的 11 × 18 交互编排系统，把"写代码"变成"配规则"，让业务工程师也能做出专业的工业交互。

快速体验

• 🌐 官网地址：https://www.ricon.cloud/
• 🚀 在线演示：https://www.ricon.cloud/editor/