发布与部署
更新时间：2023-03-07
发布
制作完成的仪表盘需要先被发布后，才能部署或分享。如果对已经发布过的仪表盘做了修改，也需要再次发布，并重新加载（刷新）已被集成或分享的仪表盘，才会展示更新后的内容。
在“仪表盘管理”页面找到想要发布的仪表盘，点击卡片下方工具栏的“发布”按钮，即可发布仪表盘。
分享
已经发布过的仪表盘可以分享给其他人。
在“仪表盘管理”页面找到想要分享的仪表盘，点击卡片下方工具栏的“分享”按钮，会弹出“分享链接”对话框。
- 点击右侧“生成分享”可以生成一个公开的链接，发送给其他人，就可以让他们查看该仪表盘
- 点击“停止分享”可以取消已生成的分享链接，该仪表盘将无法再公开查看
- 如果已经生成过分享链接，它将会显示在对话框内，同时会有“重新生成”按钮。点击 “重新生成”按钮可以产生一个新的分享链接，其他人只能通过这个新的链接查看该仪表盘，之前的分享链接会作废
集成
通过在前端页面引用物可视JavaScript SDK，并调用特定API接口的方式，可以将已发布的仪表盘嵌入自己的web页面。
快速开始
在“仪表盘管理”页面找到想要发布的仪表盘，点击“生成代码”按钮，会弹出“代码”对话框，其中显示一段简单的HTML代码，演示如何集成物可视仪表盘。
将示例代码复制并保存成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://iotviz2.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>参照上述代码，集成的步骤可总结为：
-
引入物可视的JavaScript SDK：
示例代码第4行：
<script type="text/javascript" src="https://iotviz2.cdn.bcebos.com/bin/prod/sdk/bdiotvizplayer.min.js"></script> -
在要嵌入的页面上预留一个div元素：
示例代码第23行：
<div id="content"></div> -
调用SDK暴露在全局的构造函数，传入：
- containerElement: 上一步预览的div元素，物可视的仪表盘会被渲染在这里
- dashboardId: 集成的物可视仪表盘id
- token: 鉴权信息
- onload：仪表盘加载完成时的回调函数