ThingsBoard - APP首页修改为手工选择组织

问题描述

移动端的主页是通过一个仪表板移动视图实现的,打开后会显示一个默认组织的电量。管理员有多个组织的权限,用户要求先弹出选择框,一边手动选择一个组织。

问题分析

移动视图仪表板中,使用了一个自定义的InitEntity部件,其作用是在仪表板加载时,若当前用户有一个或多个组织的权限,则设置任意一个组织为默认实体。

javascript 复制代码
self.onInit = function() {
    if (self.ctx.stateController.getStateParams().entityId == null && self.ctx.data.length) {
        var o = self.ctx.data[0];
        var params = { 
            entityId: {
                entityId: o.datasource.entity.id,
                entityName: o.datasource.entityName, 
                entityLabel: o.datasource.entityLabel
            },
            targetEntityParamName: "entityId"
        };
        //for (var i=0; i < o.dataKeys.length; i++) 先写个死的
        if (o.data && o.data.length > 0) {
            var tvPair = o.data[o.data.length - 1];
            params.entityId.entityProfile = tvPair[1];
        }
        self.ctx.stateController.updateState(self.ctx.stateController.getStateId(), params, false);
    }
}

问题解决

根据用户需求,InitEntity部件的逻辑应当修改为,当用户只有一个组织的权限时,将该组织指定为默认实体,当用户有多个组织的权限时,则弹出选择窗口,让用户先选择。代码修改如下

javascript 复制代码
self.onInit = function() {
    console.info("init", self.ctx.stateController.getStateParams(),self.ctx.stateController);
    window.initentity_ctx = self.ctx;
    if (self.ctx.stateController.getStateParams().entityId == null && self.ctx.data.length) {
        //增加本行及else段
        if (self.ctx.data.length == 1) {
            var o = self.ctx.data[0];
            var params = { 
                entityId: {
                    entityId: o.datasource.entity.id,
                    entityName: o.datasource.entityName, 
                    entityLabel: o.datasource.entityLabel
                },
                targetEntityParamName: "entityId"
            };
            //for (var i=0; i < o.dataKeys.length; i++) 先写个死的
            if (o.data && o.data.length > 0) {
                var tvPair = o.data[o.data.length - 1];
                params.entityId.entityProfile = tvPair[1];
            }
            self.ctx.stateController.updateState(self.ctx.stateController.getStateId(), params, false);
        } else {
            self.ctx.stateController.updateState("select", {}, false);
        }
    }
}

注意代码最后一句的写法

javascript 复制代码
self.ctx.stateController.updateState("select", {}, false); //正常
self.ctx.stateController.openState("select", {}, false); //点击详情时报错,提示entityProfile为null
相关推荐
这是个栗子1 小时前
前端开发中的常用工具函数(六)
javascript·every
码云数智-园园1 小时前
从输入 URL 到页面展示:一场精密的互联网交响乐
前端
秋水无痕2 小时前
# 手把手教你从零搭建 AI 对话系统 - React + Spring Boot 实战(一)
前端·后端
高桥凉介发量惊人2 小时前
基础与工程篇-多环境配置(dev/test/prod)与打包策略
前端
墨鱼笔记2 小时前
前端必看:Vite.config.js 最全配置指南 + 实战案例
前端·vite
kyriewen2 小时前
异步编程:从“回调地狱”到“async/await”的救赎之路
前端·javascript·面试
前端Hardy2 小时前
别再手动写 loading 了!封装一个自动防重提交的 Hook
前端·javascript·vue.js
前端Hardy2 小时前
前端如何实现“无感刷新”Token?90% 的人都做错了
前端·javascript·vue.js
秋水无痕2 小时前
# 手把手教你从零搭建 AI 对话系统 - React + Spring Boot 实战(二)
前端·后端·面试
SuperEugene2 小时前
Vue Router 实战规范:path/name/meta 配置 + 动态 / 嵌套路由,统一团队标准|状态管理与路由规范篇
开发语言·前端·javascript·vue.js·前端框架