追求改进：Thingsboard UI —— 深入探索ThingsBoard UI-Vue3开源项目

ThingsBoard作为一款高性能的物联网平台，其原生的Angular前端在功能上固然强大，但在国内开发者群体中，Vue的易用性和灵活性更受欢迎。因此，ThingsBoard UI-Vue3应运而生，旨在结合Vue3的轻量级特性和高性能，打造符合中国用户习惯的物联网前端解决方案

本项目为基于Vue3开发的 ThingsBoard 前台

AntDesginVue、VbenVueAdmin、AntV X6、

规则链代码已全部开放

开源地址：https://gitee.com/oliver225/thingsboard-ui-vue3

项目亮点概览

• Vue3技术栈：利用Vue3的Composition API和更高效的组件系统，实现更快的页面渲染与更佳的用户体验。
• 规则链代码全面开放：项目不仅提供了丰富的前端组件，还开放了规则链代码，方便开发者定制逻辑，满足复杂业务需求。
• 多场景开发中：涵盖web组态、大屏组态、uniapp小程序以及仪表板开发，适应不同应用场景。
• 边缘计算与协议支持：支持边缘网关、Modbus、BACnet等多种工业协议接入，无缝对接云端，实现数据实时传输。

代码分享：

usewebsocket

方便时序数据以及一些实体的 websocket 订阅与发布，封装了useWebsocketStore。参考/src/views/things/telemetry/timeseriesChart;

规则链：

规则链使用了蚂蚁开源的 antv x6 组件，灵活的拓扑，拖拽功能。

在 /src/views/things/ruleChain/nodeForm.vue 中，我们使用 component 来动态的 绑定不同的规则节点，不同的配置参数， 再/src/views/things/ruleChain/flow/nodeTpl/ 包中，我们花费大量时间实现的很多规则节点的配置参数， 动态绑定到component 中去。

效果展示：

http://thingsboard.yantsing.com/

 用户名: [email protected]

 密码：17621315188

   

基于antvx6 的规则链

仪表盘

时序数据