观远 BI

前端 OpenSDK 能力说明

创建于 2024-03-04 / 最近更新于 2024-08-15 / 1568
字体: [默认] [大] [更大]

1. 能力概览

观远 BI 自 6.3 版本开始提供全新的 OpenSDK , 可以通过调用特定方法实现数据获取、信息交互、页面改造、样式修改等定制化改造需求。  

适用范围:自定义图表、StarNova 集成、前端插件。  

示例代码:https://github.com/GuandataOSS/sdk-demo  

适用开发语言:Javascript  

能力列表:

接口类别接口中文名生效版本
数据获取获取当前用户信息6.3.0
交互触达信息通知6.3.0

路由跳转6.3.0
样式修改隐藏特定元素6.3.0

插入或者删除样式6.3.0
事件注册事件注册6.3.0
web-component注册web-component元素注册5.2.0

特别说明:window, document, Function, globalThis, navigator, fetch, XMLHttpRequest 操作目前只允许在自定义图表、StarNova里使用;前端插件基于安全原因暂未开放相关能力。

2. 接口详情

2.1. 数据获取

获取当前登录用户信息

生效版本:6.3.0

使用方法

GD.getUser()

请求参数

返回值

Object

字段类型说明

domId

string

域id

domainName

string

域名

uId

string

用户id

loginId

string

账号

role

string[]

角色列表

userProperties

Object[]

用户属性

其中 userProperties 的接口如下:

字段

类型说明
keystring字段名
aliasstring别名
valuestring字段值
isUserDefinedboolean是否为用户自定义属性

2.2. 交互触达

注意:

SDK 和插件加载会在 BI 渲染完成前,请勿在加载完成后直接调用 event- 的事件方法

调用消息通知

功能描述:支持特定操作后,提示用户操作的结果,如提示成功或者失败。消息样式与观远 BI 完全一致。  

生效版本:6.3.0

使用方法

GD.dispatch(msgType, { msg, ntfType: 0 })

请求参数

字段类型说明
msgTypestring

消息类型:

 ·event-SYS_FETCH_SUCCESS 成功消息

 ·event-SYS_FETCH_FAIL 失败消息

msgstring消息内容
ntfTypeint默认为0 ,必填

调用示例

GD.dispatch('event-SYS_FETCH_SUCCESS', { msg: '操作成功', ntfType: 0 })
GD.dispatch('event-SYS_FETCH_FAIL', { msg: '操作失败:原因是……', ntfType: 0 })

路由跳转

生效版本:6.3.0

使用方法

跳转:GD.dispatch('event-SYS_ROUTE_PUSH', url)

替换:GD.dispatch('event-SYS_ROUTE_REPLACE', url)

返回:GD.dispatch('event-SYS_ROUTE_BACK')

请求参数

字段类型说明
urlstring跳转地址

2.3. 样式修改

页面展示内容隐藏

功能描述: 隐藏页面特定元素,比如仪表板页面导出按钮等  

生效版本:6.3.0

使用方法

GD.dispatch('config-display-control', { hiddenKeys })

请求参数

字段类型说明
hiddenKeysstring[]隐藏内容标识的数组

可识别的标识列表

标识名展示内容生效版本
webapp_export桌面端应用头部导出
page_operation_batch_export仪表板页面头部菜单【批量导出 PDF、批量导出 Excel 】

请求示例

GD.dispatch('config-display-control', { hiddenKeys: ['webapp_export'] })

插入或者删除样式

生效版本:6.3.0

使用方法

GD.dispatch('style', { title, content })

请求参数

字段类型说明
titlestring样式标题
contentstring样式内容(支持url,不填则删除对应标题的插入样式内容)

常规的css,如 a、h1 均可以进行修改。

请求示例

// 插入标题为黑白的样式
GD.dispatch('style', { title: '黑白', content: 'body{ filter: grayscale(1); }' })
// 删除已插入的黑白样式
GD.dispatch('style', { title: '黑白' })


// 通过外链引入样式
GD.dispatch('style', { title: '外链1', content: 'http*' })

2.4. 事件注册

事件注册基础方法

生效版本:6.3.0

使用方法

GD.on(eventKey, callback, introduce)

请求参数

字段类型说明
eventKeystring事件名称
callbackfunction注册方法

introduce

string方法介绍(选填)

可识别的事件名称  

方法介绍(选填)事件用途生效版本
open-page自定义路由加载完成6.3.0
gd-readysdk初始化完成6.5.0
gd-route-change页面路由变化6.5.0

自定义路由加载完成 open-page 

事件可用参数

字段类型说明
paramsobject参数对象

params参数格式

字段类型说明
pathnamestringurl路径
searchstringurl参数
stateobject状态对象

事件调用示例

function openRedirect ({ pathname, search }) {
  if (pathname !== '/open/redirect') return
  const obj = {};
  const searchParams = new URLSearchParams(search);
  const userInfo = GD.getUser()


  for (const [key, value] of searchParams) {
    obj[key] = value;
  }
  if (!obj.get('redirectUrl')) return
  location.href = `${obj.get('redirectUrl')}?loginId=${userInfo.loginId}`
}


GD.on('open-page', openRedirect, '用户id拼接跳转')

SDK初始化完成 gd-ready

事件调用示例

let userInfo = GD.getUser()
console.log('userInfo-1', userInfo) // 无法获取到用户信息
GD.on('gd-ready', () => {
    userInfo = GD.getUser()
    console.log('userInfo-2', userInfo) // 能够获取到用户信息
})

页面路由变化 gd-route-change


事件可用参数

字段类型说明
paramsobject跳转路由信息

params参数格式

字段类型说明
pathnamestring当前url的路径部分
hashstring当前url的锚点部分
searchstring当前url的参数部分


事件调用示例

class PortalFloatActionButton {
  // ...
}
customElements.define('portal-float-action-button', PortalFloatActionButton)

GD.on('gd-route-change', params => {
    const { pathname } = params
    console.log('params', params)
    if (['/home', '/m/portal'].includes(pathname)) {
        if (compDiv) return
        compDiv = document.createElement('div');
        compDiv.className = 'pos-absolute scroll-hidden';
        compDiv.style.right = '0';
        compDiv.style.bottom = '80px';
        compDiv.style.zIndex = '999';
        compDiv.style.width = '48px';
        compDiv.style.height = '48px';
        
        // 创建portal-float-action-button元素
        const portalFloatActionButton = document.createElement('portal-float-action-button');
        const userInfo = GD.getUser()
        
        portalFloatActionButton.setAttribute('loginid', userInfo.loginId);
        portalFloatActionButton.setAttribute('userid', userInfo.uId);
        
        // 将portal-float-action-button元素添加到新的div元素中
        compDiv.appendChild(portalFloatActionButton);
        
        // 将新的div元素添加到body元素中
        document.getElementById('app').appendChild(compDiv);
    } else if (compDiv) {
        compDiv.remove()
        compDiv = null
    }
})

2.5. web-component注册

基础方法

生效版本:6.3.0

使用方法

window.customElements.define(elementKey, CustomElement)

请求参数

字段类型说明
elementKeystring元素名称
Componentelement自定义元素

请求示例 - 开放性路由

元素名称:open-page

支持版本:6.3.0

渲染场景:/open/* 路由页面中

渲染参数

字段类型说明
pathnamestringurl路径
searchstringurl参数

示例代码

class MyListComponent extends HTMLElement {
  async renderPage1() {
    this.innerHTML = `
      这是一个页面    `
  }


  async renderPage2() {
    this.innerHTML = `
      这是另一个页面,只有管理员能看到    `
    
  }


  connectedCallback() {
    const pathname = this.getAttribute('pathname')
    const userInfo = GD.getUser()
    if (pathname ==='/open/page1') {
      this.renderPage1();
    } else if (pathname === '/open/page2' && userInfo.role.includes('admin')) {
      this.renderPage2()
    } else {
      this.innerHTML = '该页面不存在'
    }
  }
}


customElements.define('open-page', MyListComponent);

请求示例 - 仪表板悬浮按钮  

元素名称:page-feedback

支持版本:5.2.0

渲染场景:仪表板页面右下角悬浮(支持移动端)

渲染参数

字段类型说明
pgidstring页面id

请求示例 - 仪表板/数据大屏 无权限

元素名称:request-permission

支持版本:6.3.0

渲染场景:【暂无访问权限】文案下方插入

渲染参数

字段类型说明
ridstring资源id

示例代码

class MyComponent extends HTMLElement {
  connectedCallback() {
    // 获取渲染参数
    const rId = this.getAttribute('rId');
    this.innerHTML = `
                      页面id: ${rId}        跳转                     `;
  }
}


customElements.define('request-permission', MyComponent);
3 人点赞过