物可视IOTVIZ

    发布与部署

    发布

    制作完成的仪表盘需要先被发布后,才能部署或分享。如果对已经发布过的仪表盘做了修改,也需要再次发布,并重新加载(刷新)已被集成或分享的仪表盘,才会展示更新后的内容。

    在“仪表盘管理”页面找到想要发布的仪表盘,点击卡片下方工具栏的“发布”按钮,即可发布仪表盘。

    image.png

    分享

    已经发布过的仪表盘可以分享给其他人。

    在“仪表盘管理”页面找到想要分享的仪表盘,点击卡片下方工具栏的“分享”按钮,会弹出“分享链接”对话框。

    image.png

    image.png

    • 点击右侧“生成分享”可以生成一个公开的链接,发送给其他人,就可以让他们查看该仪表盘
    • 点击“停止分享”可以取消已生成的分享链接,该仪表盘将无法再公开查看
    • 如果已经生成过分享链接,它将会显示在对话框内,同时会有“重新生成”按钮。点击 “重新生成”按钮可以产生一个新的分享链接,其他人只能通过这个新的链接查看该仪表盘,之前的分享链接会作废

    image.png

    集成

    通过在前端页面引用物可视JavaScript SDK,并调用特定API接口的方式,可以将已发布的仪表盘嵌入自己的web页面。

    快速开始

    在“仪表盘管理”页面找到想要发布的仪表盘,点击“生成代码”按钮,会弹出“代码”对话框,其中显示一段简单的HTML代码,演示如何集成物可视仪表盘。

    image.png

    image.png

    将示例代码复制并保存成index.html文件,部署给任意http服务器即可访问。

    集成代码

    “示例代码”对话框中的代码如下(注意,由于物可视SDK会不定期更新,以下示例代码可能与最新的代码不一致,请以实际显示的代码为准):

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <meta name="renderer" content="webkit">
    
            <!-- 加载 物可视SDK -->
            <script type="text/javascript" src="https://iotviz.cdn.bcebos.com/bin/prod/sdk/bdiotvizplayer.min.js"></script>
    
            <style>
                html, body {
                    font-size: 12px;
                    font-family: "PingFang SC";
                    display: block;
                    margin: 0;
                    width: 100%;
                    height: 100%;
                }
    
                #content {
                    width: 100%;
                    height: 100%;
                }
            </style>
        </head>
    
        <body>
            <div id="content"></div>
    
            <script type="text/javascript">
                const bdIotVizPlayer = window.BDIotVizPlayer;
                const container = document.getElementById('content');
                const myDashboard = bdIotVizPlayer({
                    containerElement: container,
                    dashboardId: '5de7**************d96ea3',
                    fillMode: 'none', // <-- Optional, Possible value: 'none', 'contain', 'cover', 'responsive'
                    token: {
                        type: 'embedded', // <-- Must be 'embedded'
                        value: 'b014******************32a2350663' // <-- Access Token for current dashboard
                    }
                });
                myDashboard.getDashboardConfig().then(function(config){
                    console.log(config); // <--- Current Dashboard Config
                });
                // 'myDashboard' exposes the API to the dashboard loaded
                // refer to API doc for complete API description
            </script>
        </body>
    </html>

    参照上述代码,集成的步骤可总结为:

    1. 引入物可视的JavaScript SDK:

      示例代码第4行: <script type="text/javascript" src="https://iotviz.cdn.bcebos.com/bin/prod/sdk/bdiotvizplayer.min.js"></script>

    2. 在要嵌入的页面上预留一个div元素:

      示例代码第23行:<div id="content"></div>

    3. 调用SDK暴露在全局的构造函数,传入:

      • containerElement: 上一步预览的div元素,物可视的仪表盘会被渲染在这里
      • dashboardId: 集成的物可视仪表盘id
      • token: 鉴权信息
      • onload:仪表盘加载完成时的回调函数
    上一篇
    仪表盘数据绑定
    下一篇
    仪表盘版本管理