Skip to content

集成信数报表

信马平台支持通过 iframe 的方式将信数报表嵌入到页面中,通过信数平台的BI工具制作并发布的报表都可以使用该方式进行集成和展示。

前提

  1. 需要集成的信数报表需要已经在信数平台发布上架并获取到报表ID,才能正常配置和显示
  2. 需要在信数平台将原报表的权限配置好才能正常的展示,只配置信马平台的权限可能会造成能进入页面但是展示不出报表的情况。

1. 创建自定义页面

创建一个自定义页面作为报表展示的页面。

2. 引入配置json模板

进入刚刚创建的页面的设计器,点击头部导航栏右上角的JSON按钮,打开「查看JSON」窗口。

清空「查看JSON」窗口中的所有代码,并将如下代码粘帖到窗口中并点击保存,完成配置模板的引入。

特别注意

移动端JSON需要将"code": "HiIframe",替换为"code": "HiMIframe",

json
{
  "pages": [
    {
      "key": 0,
      "type": "default",
      "name": "默认页",
      "code": "",
      "display": "",
      "props": {
        "margin": "0",
        "padding": "0",
        "backgroundColor": "white",
        "display": {},
        "events": {}
      },
      "bindProps": {},
      "coms": [
        {
          "key": 1669860807912,
          "type": "node",
          "name": "iframe",
          "code": "HiIframe",
          "display": "",
          "props": {
            "title": "iframe",
            "validate": {},
            "append": {},
            "invisibleBtn": true,
            "display": {},
            "background": {},
            "boxShadow": {},
            "loop": {
              "data": []
            },
            "width": {
              "value": "100",
              "unit": "%"
            },
            "autoHeight": true,
            "height": {
              "value": "100",
              "unit": "%"
            },
            "baseStyle": "height: calc(100vh - 56px);"
          },
          "bindProps": {
            "loop": {},
            "url": "state.path"
          },
          "coms": []
        }
      ]
    }
  ],
  "params": [
    {
      "id": 0,
      "name": "path",
      "desc": "",
      "default": "",
      "loop": false
    }
  ],
  "apis": [
    {
      "id": 0,
      "name": "getPath",
      "isInit": true,
      "url": "/api/system/common/getDtUrl?resourceId=替换报表ID",
      "method": "get",
      "willFetch": null,
      "fit": null,
      "didFetch": "function didFetch(response, ctx) {\n  // 这里可将返回结果进行存储\n  // 调用ctx.setState(\"变量名\", \"变量值\")\n\n  ctx.setState({\n    path: response\n  })\n}"
    }
  ]
}

3. 输入报表ID

点击设计器左侧第3个图标打开「数据源」面板,并进入「API」列表,点击列表中的getPathAPI的编辑按钮,在请求地址处,将信数报表的ID放到=后面,即将实际的报表ID替换替换报表ID,替换完成后点击保存。

示例

假设从信数那边拿到的报表ID为d575f804-a657-11eb-bdb5-005056a99ec5,那替换完之后的请求地址应该为:

/api/system/common/getDtUrl?resourceId=d575f804-a657-11eb-bdb5-005056a99ec5

4. 保存页面

完成上述配置后保存页面,即可完成信数报表的集成。