ARTICLE DETAIL

资讯详情

深耕网站建设与运营推广的一线实战洞察。

ThingsBoard 仪表板状态 ID 解析函数(Parse Value Function)实战指南:基于当前状态实现小组件激活判断

ThingsBoard 仪表板状态 ID 解析函数(Parse Value Function)实战指南:基于当前状态实现小组件激活判断 物联网后端数据可视化消息队列【免费下载链接】thingsboardAll-in-one IoT Platform - Device management, data collection, processing and visualization.项目地址https://gitcode.com/GitHub_Trending/th/thingsboard点击查看免费下载导读本文围绕 ThingsBoard 前端仓库ui-ngx中Get value action获取值动作配置面板所提供的Parse value function解析值函数展开。该函数以 JavaScript 形式将当前仪表板状态 IDdashboard state id转换为布尔值用于决定小组件widget是否处于激活状态如布尔型值小组件的开/关、选中态等。阅读本文后你将掌握该函数的签名、参数与返回值语义、在配置界面中的入口位置、底层执行链路从状态控制器到数据转换器并能直接套用文中示例编写自己的解析逻辑。函数签名与语义官方帮助文档 parse_value_get_dashboard_state_id_fn.md 给出的函数约定如下function (data): boolean参数datastring类型表示当前的仪表板状态 ID。它来自仪表板配置中 states 字典的 key例如默认状态的 ID 通常为default。返回值boolean。返回true表示小组件应当处于激活activated状态返回false则相反。该函数是值小组件配置体系中dataToValue结果转换环节的一部分当获取值动作类型选择GET_DASHBOARD_STATE时系统先把当前状态 ID 作为原始数据取出再经由本函数转换为目标值最终在ValueType.BOOLEAN场景下与比较值compareToValue比对驱动小组件的显示状态。使用场景Get value action 配置面板1. 入口位置在 ThingsBoard 中需要根据仪表板状态决定小组件显示状态的场景例如布尔值指示灯、开关类值小组件都可以通过Get value action获取值动作配置实现。相关配置面板源码位于设置面板组件get-value-action-settings-panel.component.ts面板模板get-value-action-settings-panel.component.html动作选项定义action-widget-settings.models.ts其中动作枚举定义了两个与仪表板状态相关的取值类型GET_DASHBOARD_STATE GET_DASHBOARD_STATE // 取当前状态 ID字符串 GET_DASHBOARD_STATE_OBJECT GET_DASHBOARD_STATE_OBJECT // 取当前状态对象含 ID 与参数当动作选择GET_DASHBOARD_STATE且结果转换类型选择FUNCTION时配置面板会渲染一个 JavaScript 函数编辑器tb-js-func其functionArgs固定为[data]标题为Parse value function并根据当前动作动态指定帮助文档 ID// get-value-action-settings-panel.component.ts L157-L164 getParseValueFunctionHelpId(): string { const action: GetValueAction this.getValueSettingsFormGroup.get(action).value; if (action GetValueAction.GET_DASHBOARD_STATE_OBJECT) { return widget/config/parse_value_get_dashboard_state_object_fn; } else if (action GetValueAction.GET_DASHBOARD_STATE) { return widget/config/parse_value_get_dashboard_state_id_fn; } return widget/lib/rpc/parse_value_fn; }可以看到本篇所讲的文档正是GET_DASHBOARD_STATE动作对应的帮助内容与GET_DASHBOARD_STATE_OBJECT变体处理状态对象及 RPC/属性/时序数据解析函数widget/lib/rpc/parse_value_fn互为补充。2. 函数编辑器的渲染逻辑对应模板片段get-value-action-settings-panel.component.htmlif (getValueSettingsFormGroup.get(dataToValue).get(type).value dataToValueType.FUNCTION) { tb-js-func formControlNamedataToValueFunction withModules required [globalVariables]functionScopeVariables [functionArgs][data] functionTitle{{ widgets.value-action.parse-value-function | translate }} [helpId]getParseValueFunctionHelpId() /tb-js-func }即编辑器约定函数参数名data当前状态 ID并支持使用 ThingsBoard 的全局函数作用域变量。同时当目标值类型为BOOLEAN时面板还会提供结果等于某状态值时小组件处于指定状态的比较项见模板中state-when-result-is相关逻辑。底层执行链路函数是如何被编译与调用的1. 从动作到取值器ValueGetter获取值动作由工厂方法ValueGetter.fromSettings根据动作类型实例化对应的取值器action-widget.models.tscase GetValueAction.GET_DASHBOARD_STATE: return new DashboardStateGetterV(ctx, settings, valueType, valueObserver, simulated); case GetValueAction.GET_DASHBOARD_STATE_OBJECT: return new DashboardStateWithParamsGetterV(ctx, settings, valueType, valueObserver, simulated);2. 当前状态 ID 的数据来源DashboardStateGetter的核心实现action-widget.models.tsprotected doGetValue(): Observablestring { if (this.simulated) { return of(default); // 模拟模式固定返回 default } else { return this.ctx.stateController.dashboardCtrl.dashboardCtx.stateId; } }在仪表板编辑模拟模式下固定返回字符串default便于在配置界面实时预览函数效果在运行模式下数据源是stateController状态控制器暴露的状态 ID 可观察对象。状态控制器接口IStateController定义在 widget-api.models.ts其中包含stateId(): Observablestring、getStateId(): string、openState()、updateState()、stateChanged()等方法。也就是说当用户通过小组件动作如 openDashboardState、updateDashboardState切换仪表板状态时该可观察对象会发出新的状态 ID从而触发本解析函数重新求值。与之对照的DashboardStateWithParamsGetter处理GET_DASHBOARD_STATE_OBJECT则合并监听stateId与stateChanged经debounceTime(10)后输出{ id, params }状态对象params通过deepClone复制这就是另一篇帮助文档 parse_value_get_dashboard_state_object_fn.md 中data参数的实际来源。3. 函数编译与调用DataToValueConverter取到的状态 ID 字符串会交给DataToValueConverter处理action-widget.models.tscase DataToValueType.FUNCTION: this.dataToValueFunction$ compileTbFunction(this.http, settings.dataToValueFunction, data).pipe( catchError(() of(new CompiledTbFunction((data: any) data, []))), ... );dataToValue(data)的执行细节若原始data非空先尝试JSON.parse(data)——对状态 ID 这类字符串通常解析失败而维持原值但这一机制保证了函数对类 JSON 字符串输入的健壮性调用dataToValueFunction.execute(input)执行你编写的解析函数若执行抛错catchError兜底返回原始data当valueType ValueType.BOOLEAN时最终结果与compareToValue严格相等比较if (this.valueType ValueType.BOOLEAN) { result result.pipe( map(val (val this.compareToValue) as V) ); }因此在布尔值场景下完整的判定逻辑是你的函数把当前状态 ID 映射为某个值再与该值小组件的比较值compareToValue做比较从而得到小组件是否激活的最终布尔结果。这也解释了为什么官方文档中返回值语义为trueif the widget should be in an activated state。官方示例与扩展写法1. 官方示例判断当前状态是否为 default来自 parse_value_get_dashboard_state_id_fn.md 的完整示例return data default ? true : false; {:copy-code}等价简写return data default;。当compareToValue设为true时该小组件只有在仪表板处于default状态时才处于激活状态。2. 状态 ID 匹配的更多写法// 判断是否处于多个指定状态之一 return [default, settings].includes(data) ? true : false; {:copy-code} // 使用前缀匹配状态 ID 命名规范时很实用 return data.startsWith(view_) ? true : false; {:copy-code} // 基于正则判断 return /^monitor/.test(data) ? true : false; {:copy-code} // 状态 ID 为空或未定义时一律视为非激活 return (data data.length 0) ? true : false; {:copy-code}3. 与状态对象变体的对比若选择GET_DASHBOARD_STATE_OBJECT动作data将变为StateObject类型widget-api.models.tsexport interface StateObject { id?: string; params?: StateParams; // 含 entityName、entityLabel、entityId、targetEntityParamName 等 }对应示例来源同上篇姊妹文档// 判断当前状态 ID 是否为 default return data.id default ? true : false; {:copy-code} // 判断当前状态参数是否为空 return Object.keys(data.params).length ? true : false; {:copy-code}当需要基于状态参数如打开该状态时携带的实体、过滤条件做判断时应选用状态对象变体仅需按状态 ID判定时本文主题的GET_DASHBOARD_STATE即足够。易错点与行为说明模拟模式固定输入仪表板编辑/预览模拟模式下DashboardStateGetter固定返回default此时函数结果即为data default的判定便于立即验证。运行模式下则跟随真实状态切换实时更新。函数异常有兜底编译期失败语法错误会回退为恒等函数(data) data执行期异常会被catchError捕获并返回原始数据因此不会导致小组件整体报错但可能造成激活状态不符合预期建议函数体内尽量写全分支。布尔比较是严格相等最终激活与否取决于函数返回值 compareToValue请确保函数返回值与比较值类型一致如都返回true/false而非1/0或字符串。区分另一组Parse value functionRPC 开关、LED 指示灯等小组件中还有一组同名解析函数帮助文档 parse_value_fn.md相关实现见 switch.component.ts 与 led-indicator.component.ts通过new Function(data, settings.parseValueFunction)编译默认return data ? true : false;。那一组处理的是 RPC 响应、设备属性或时序数据与本文处理仪表板状态 ID的取值器函数在数据来源上完全不同配置时注意区分。小结Parse value function基于仪表板状态 ID 的解析值函数是 ThingsBoard 值小组件实现跟随仪表板状态联动显示的关键配置它接收当前状态 ID 字符串、返回布尔值并与compareToValue共同决定小组件的激活状态。其底层由DashboardStateGetter从stateController获取状态、由DataToValueConverter编译执行用户函数整个链路在 action-widget.models.ts 中清晰可查。配置时只需在获取值动作中选择GET_DASHBOARD_STATE、转换类型选择FUNCTION即可用一段简短的 JavaScript 将仪表板状态映射为小组件的开/关与选中状态实现如仅在默认视图显示按状态前缀开启指示等场景。赞分享物联网后端数据可视化消息队列【免费下载链接】thingsboardAll-in-one IoT Platform - Device management, data collection, processing and visualization.项目地址https://gitcode.com/GitHub_Trending/th/thingsboard点击查看免费下载相关推荐ThingsBoard 仪表盘解析值函数详解Parse Value FunctionDashboard State Object 版ThingsBoard 仪表盘解析值函数详解Parse Value FunctionDashboard State Object 版 导读 本篇文章以 T物联网后端数据可视化消息队列ThingsBoard 仪表板自定义动作按实体类型条件切换状态并携带状态参数openState 实战指南ThingsBoard 仪表板自定义动作按实体类型条件切换状态并携带状态参数openState 实战指南 导读 在 ThingsBoard 仪表板中 w物联网后端数据可视化消息队列x64dbg 插件开发指南使用 DbgIsDebugging 判断当前调试会话状态x64dbg 插件开发指南使用 DbgIsDebugging 判断当前调试会话状态 导读 DbgIsDebugging 是 x64dbg 桥接层bridge逆向工程调试器开发工具应用安全上一篇Dragonfly数据库完整指南如何快速部署高性能内存数据存储下一篇MusePose虚拟人生成框架如何用姿态引导技术创造数字舞者创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表