页面与卡片内嵌方案 - Web SDK
观远数据支持将开发好的仪表板页面与卡片详情页面快速内嵌到甲方其他系统中。 技术层面主要采用iframe内嵌方式，具体实现上提供两种方式：
方式一：直接进行页面的内嵌，通过URL传递用户token与特定筛选器参数 **
方式二：通过观远数据Web SDK快速引入页面与卡片，支持传递复杂筛选过滤参数 **
方式一 直接页面内嵌
具体方式请参考此处说明。 该方案对于传递的参数不多情况下适用。
方式二 通过Web SDK方式内嵌页面与卡片
SDK提供下述能力：
-
通过卡片ID与页面ID快速内嵌
-
宿主主窗口与内嵌页面进行通信，实现筛选过滤参数的传递
SDK 下载地址：**https://www.npmjs.com/package/gd-sdk
代码示例
内嵌一个卡片
import React, { useEffect, useImperativeHandle, useState, forwardRef, useRef } from 'react'
import { Card } from 'gd-sdk'
function BICard(props, ref) {
const { cdId } = props
const [ card, setCard ] = useState(null)
const iframeRef = useRef()
const [ configInfo, setConfigInfo ] = useState(null)
useImperativeHandle(ref, () => ({
// 向卡片传入条件信息
updateFilter: (filter) => {
card && card.updateFilter(filter)
},
// 刷新方法, 支持带条件传入刷新（钻取之后返回）
refresh: (filter) => {
const newCard = new Card(configInfo.base, configInfo.params)
setCard(newCard)
filter && newCard.updateFilter(filter)
},
}))
useEffect(() => {
// fetchData 方法需要返回如下数据结构：
// {
// address: 'https://demo.gundata.com',
// dominId: 'demo',
// ssoToken: 'xxxxxx',
// }
fetchData().then((data) => {
const conf = {
base: {
host: data.address, // BI 地址
domain: data.domainId, // BI 公司域
ssoToken: data.ssoToken, // BI SSOToken
},
params: {
ps: 'embed', // 不同的内嵌场景
container: iframeRef.current, // 卡片渲染容器
cdId,// 卡片 Id，（用于生成 iframe 的 src）
},
}
setConfigInfo(conf)
setCard(new Card(conf.base, conf.params))
})
}, [ cdId ])
return}
export default forwardRef(BICardIframe)
联动卡片
import React, { useRef, useEffect } from 'react'
// filter示例, 多个条件的数组
// [{
// fdId: 'xxxx',// BI卡片数据对应字段的 fdId
// name: '字段名称',// 非必传
// filterValue: ['20'], //
// filterType: FilterTypes.IN,
// },{
// ...
//}]
const filter = [{
fdId: 'eefc3d11461514365b065b41', // fdId 即为筛选器所对应的数据集字段
name: 'province',
filterValue: ['浙江'],
filterType: 'IN',
}]
export default TableView(){
const BICard = useRef()
useEffect(() => {
BICard.updateFilter(filter) // 此处filter 为示例数据，实际需要根据业务场景调整
}, [])
const onRefresh = () => {
BICard.refresh(filter)
}
return (
)
}
内嵌页面并触发联动
import { Page } from 'gd-sdk'
const instanse = new Page(
{
host: 'xxx', // BI 地址
domain: 'domainId', // BI 公司域
ssoToken: 'ssoToken', // BI SSOToken
},
{
ps: 'iframe2', // 内嵌参数
container: dom, // 页面渲染容器
pgId: 'xxxx', // 页面 Id，（用于生成 iframe 的 src）
query: { name: 'value' }, // 非必传，url query参数
}
)
// 触发联动
instanse.updateFilter([
{
fdId: '字段id',
cdId: '筛选器卡片id',
name: '筛选器名称',
filterValue: [ '筛选值' ],
filterType: 'IN', // 筛选类型
},
])
使用时需要先创建一个实例instanse，在触发联动时，需要调用instanse的updateFilter方法。updateFilter接受一个数组作为联动参数，如果是页面，可以同时联动多个筛选器，如果是卡片，则可以同时查询多个筛选条件。
联动参数传递说明
匹配筛选器
对于内嵌的页面，外部触发的联动，会先和当前页面中的筛选器匹配后再触发筛选器的联动。匹配规则是，页面筛选器中的fdId、cdId和name这三个字段中任意一个和外部的联动参数相同，则判定为匹配成功。fdId为筛选器所引用的数据集字段的id，cdId为筛选器卡片的id，name为筛选器卡片的名称。
匹配筛选条件
对于内嵌的卡片，外部触发的联动将直接联动卡片。同时支持不传fdId，而使用name匹配当前卡片所使用的数据集所有字段的别名或名称。name匹配成功将作为有效的筛选条件。
筛选类型和筛选值
filterType表示筛选类型，其中的值有如下可选。filterValue表示筛选值，必须是一个字符串数组，它根据filterType的不同表示筛选条件也不同。
-
IN：表示选择筛选，filterValue可以是多个值，表示选择多个筛选值。
-
EQ: 表示相等，filterValue只能是一个值。
-
NE: 表示不相等，filterValue只能是一个值。
-
CONTAINS: 表示包含，filterValue只能是一个值。
-
NOT_CONTAINS: 表示不包含，filterValue只能是一个值。
-
STARTSWITH: 表示以...开始，filterValue只能是一个值。
-
ENDSWITH: 表示以...结束，filterValue只能是一个值。
-
NOT_STARTSWITH: 表示不以...开始，filterValue只能是一个值。
-
NOT_ENDSWITH: 表示不以...结束，filterValue只能是一个值。
-
BT: 表示区间，filterValue只能是两个值，表示区间范围。
-
GT: 表示大于，filterValue只能是一个值。
-
GE: 表示大于等于，filterValue只能是一个值。
-
LT: 表示小于，filterValue只能是一个值。
-
LE: 表示小于等于，filterValue只能是一个值。
-
IS_NULL: 表示为空，filterValue中没有值。
-
NOT_NULL: 表示不为空，filterValue中没有值。
注意事项
当内嵌页面时，所传入的筛选参数中的filterType和filterValue需要与所要匹配的内部筛选器相匹配。比如内部筛选器为选择筛选器，则传入的filterType必须是“IN”。**
安全性起见，SSOToken的生产方式应该在后端完成，具体实现方式参考此处说明。