当前位置: 首页 > news >正文

thingsboard 自定义动作JS编程

在 ThingsBoard 中实现 自定义动作(Custom Action)的 JavaScript 编程,主要通过“Custom action (with HTML template)”方式完成,适用于创建弹窗、编辑实体、控制设备等交互行为。

实现步骤(以添加设备或资产为例)

1、进入部件编辑模式 → 点击“+”添加动作。

2、选择动作来源(如:Widget header button 或 Action cell button)。

3、动作类型选择:Custom action (with HTML template)

4、配置四个标签页:
Resources:引入外部 JS/CSS(可选);
CSS:自定义样式;
HTML:弹窗或交互界面结构;
JavaScript:核心逻辑代码。

 5、JavaScript 示例:添加设备/资产弹窗逻辑(精简版)

    var targetStateId = '';// 防止 entityLabel 为 nullif (entityLabel) {                               //entityLabel 是否包含“用电保护器” if (entityLabel.includes('用电保护器')) {targetStateId = 'state_air';             // 用电保护器} else if (entityLabel.includes('数字量')) {targetStateId = 'state_output';          // 数字量输入输出}else if (entityLabel.includes('DTU')) {targetStateId = 'state_dtu';          // DTU}}/* 2. 可选:额外参数,随状态一起带过去 */const params = {entityId: entityId.id,entityName: entityName,entityLabel: entityLabel};/* 3. 获取仪表盘所有已定义的状态列表 *///const states = widgetContext.dashboardCtrl.dashboard.configuration.states || {};//alert(JSON.stringify(states, null, 2));if (targetStateId) {widgetContext.stateController.openState(targetStateId, params, true);} else {widgetContext.showErrorToast('状态 "' + targetStateId + '" 未定义。');}

“自定义动作(Custom Action)” 的 JS 编程不是“炫技”,而是解决实际业务痛点的关键手段。它的好处和解决的问题可以总结为:


✅ 1. 解决“标准动作”无法满足的业务需求

  • 痛点:ThingsBoard 自带的动作(如“打开仪表盘”、“打开详情”)只能做固定的事情,无法处理复杂业务逻辑。

  • 例子

    • 点击按钮后需要弹窗输入设备参数(如 SIM 卡号、固件版本)再保存;

    • 点击“报警确认”按钮时,需要调用外部 API(钉钉/微信)通知运维人员;

    • 点击“重启设备”按钮时,需要先弹窗确认,再下发 RPC 命令并记录日志。


✅ 2. 解决“多步骤交互”问题

  • 痛点:标准动作是“一步完成”,而实际业务需要“多步交互”(如表单验证、异步加载数据)。

  • 例子

    • 添加设备时,先选择设备类型 → 动态加载对应的属性模板 → 再填写参数 → 最后保存;

    • 点击“批量下发配置”时,先选择配置模板 → 再选择目标设备 → 最后确认执行。


✅ 3. 解决“跨系统集成”问题

  • 痛点:ThingsBoard 无法直接调用外部系统(如 ERP、CRM、工单系统)。

  • 例子

    • 点击“创建工单”按钮时,调用 Jira/ServiceNow API 创建问题单;

    • 点击“同步库存”按钮时,调用 ERP 接口获取最新库存数据并更新 ThingsBoard 属性。


✅ 4. 解决“用户体验差”问题

  • 痛点:标准动作的弹窗样式固定,无法根据品牌或业务需求定制。

  • 例子

    • 自定义弹窗的标题、按钮颜色、布局,使其符合公司 UI 规范;

    • 在弹窗中嵌入图表(如历史数据趋势)辅助用户决策。


✅ 5. 解决“重复劳动”问题

  • 痛点:多个仪表盘需要相同的“添加/编辑”功能,但标准动作无法复用。

  • 例子

    • 封装一个“通用设备添加弹窗”,所有仪表盘只需引用,无需重复造轮子;

    • 将复杂逻辑(如设备注册流程)封装成可复用的自定义动作模板。


✅ 6. 解决“权限控制”问题

  • 痛点:标准动作无法根据用户角色动态控制按钮显隐。

  • 例子

    • 只有“管理员”角色才能看到“删除设备”按钮;

    • 只有“维修工程师”角色才能看到“远程调试”按钮。

http://www.xdnf.cn/news/1208269.html

相关文章:

  • 【高阶版】R语言空间分析、模拟预测与可视化高级应用
  • 【C++算法】82.BFS解决FloodFill算法_被围绕的区域
  • Java抽Oracle数据时编码问题
  • SpringBoot整合RocketMQ(阿里云ONS)
  • CentOS安装ffmpeg并转码视频为mp4
  • 【腾讯云】EdgeOne免费版实现网站加速与安全防护
  • 通缩漩涡中的测量突围:新启航如何以国产 3D 白光干涉仪劈开半导体成本困局?
  • 橡胶制品加工:塑造生活的柔韧力量
  • SketchUp纹理贴图插件Architextures安装使用图文教程
  • 【Linux】环境变量
  • 字符串函数安全解析成执行函数
  • 【Spring Boot 快速入门】三、分层解耦
  • 论文阅读--射频电源在半导体领域的应用
  • 【nerf处理视频数据】Instant-NGP项目NeRF模型训练数据集准备指南
  • 机器学习线性回归:从基础到实践的入门指南
  • Golang语言如何高效使用字符串
  • VLA--Gemini Robotics On-Device: 将AI带到本地机器人设备上
  • 字节序详解
  • Windows下基于 SenseVoice模型的本地语音转文字工具
  • 重塑浏览器!微软在Edge加入AI Agent,自动化搜索、预测、整合
  • 数据结构【红黑树】
  • SeeMoE:从零开始实现一个MoE视觉语言模型
  • 【学习笔记】Lean4 定理证明 ing
  • OCR 技术识别全解析:原理、主流方案与实战应用
  • 基于JavaWeb的兼职发布平台的设计与实现
  • React函数组件的“生活管家“——useEffect Hook详解
  • [学习记录]URP流程解析(2)--初始化阶段
  • Rust 实战二 | 开发简易版命令行工具 grep
  • Java程序数据库连接满问题排查指南
  • napping-1.0.1靶机练习