规则链前端实现方式

402 阅读1分钟

本文介绍ThingsBoard前端规则链如何实现,看起来和nodered一样,其实是tb自己实现的。

1698733317589.jpg

相关资料

ngx-flowchart ngx-flowchart/projects/ngx-flowchart是源码、ngx-flowchart/src是演示代码。主要使用<fc-canvas></fc-canvas>
model中存放已有节点,selectedObjects存放已选择节点,还可以设置回调,拖拽动画等

image.png

ThingsBoard规则链

ui-ngx/package.json加入了ngx-flowchart依赖

 "dependencies": {
   "ngx-flowchart": "git://github.com/thingsboard/ngx-flowchart.git#master",
 }

image.png

image.png

ui-ngx/src/app/modules/home/pages/rulechain/rulechain-page.component.ts
中实现了很多方法,如果对规则链实现感兴趣的可以看下源码。保存删除复制节点等都有。

效果

ruleChain2.gif