所有文档

          物可视 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:仪表盘加载完成时的回调函数
          上一篇
          仪表盘数据绑定
          下一篇
          仪表盘版本管理