开发大屏-华为云

数据可视化 DLV-发布大屏:发布大屏

发布大屏登录 DLV 控制台。在“我的大屏”页面，找到需要发布的大屏，将鼠标移至该大屏图标之上，界面上将显示大屏的管理按钮，单击发布按钮。图1 发布大屏您也可以在大屏开发页面右上方，单击发布按钮发布大屏。图2 大屏发布在弹出的“发布”页面，配置发布参数。图3 配置发布参数发布状态开启发布按钮（如图3所示），让其他用户也能访问该大屏。当大屏开启发布状态后，其他用户想要访问大屏时，不需要登录到DLV系统中，只要打开浏览器并在地址栏中输入“分享”参数中的链接就可以访问大屏了。版本管理设置用户通过分享链接访问大屏时，允许查看的大屏版本。实时更新发布：当大屏内容有修改时，用户可以即时查看到最新的大屏内容。系统默认选项，不支持删除。历史快照：将当前的大屏内容作为一个版本进行存档，存档后大屏内容的修改不会同步到该历史快照中。当某一个历史快照设置为“分享中”时，用户可以查看该版本的大屏内容。分享密钥设置大屏的分享方式。公开分享：不设置密码访问和Token验证时，即为公开分享，用户通过分享链接直接访问大屏。DLV基础版只支持公开分享方式，不支持其他分享方式。密码访问：在“设置访问密码”选项卡开启密码访问，开启后按钮显示为，然后在输入框中设置发布密码。设置密码成功后，用户在浏览器中通过分享链接访问大屏时，需要输入该密码才能访问。您也可以开启“验证有效期”，开启后，当用户登录验证成功后，在所设置的有效期内访问大屏无需再次验证，超过时间需要重新验证。关闭后，每次访问都需要通过验证。图4 输入发布密码 Token访问：在“设置Token验证”选项卡开启Token验证访问。系统会随机生成验证码，您需要记录下这个Token。您也可以开启“验证有效期”，开启后，使用该Token访问大屏验证成功后，在所设置的有效期内无需再次验证，超过时间需要重新验证。关闭后，每次访问都需要通过验证。图5 设置Token验证在这个时候，如果您尝试直接打开您所分享的页面，您会收到一个认证失败提示。表示您的访问被拒绝了。如果您想要打开您所分享的页面，需要完成如下几个步骤：为了防止重放攻击，请确保您的服务器时间为东8区标准时间，DLV只会提供1分钟的误差，如果时间误差超过1分钟将会验证失败。发布大屏，记录分享的大屏编码（分享链接中share后面的一串字符串）。将大屏编码和当前时间（毫秒）连起来，并用 |（竖线）分隔开。使用 token 通过 HMAC-SHA256 base64 对3.b中的字符串进行加密。将时间和加密后的签名分别命名为dlv_time，dlv_signature。将它们依次放入分享链接的querystring中。示例如下： Java: package com.test; import java.security.*; import javax.crypto.*; import javax.crypto.spec.SecretKeySpec; import org.apache.commons.codec.binary.Base64; import java.net.URLEncoder; public class ShareWithTokenTest { public static void main(String[] args) throws Exception { System.out.println(getShareUrlWithToken("********722467a9477b5b*******", "*******r1tyy1C7Jenni3p*********")); } public static String getShareUrlWithToken(String shareID, String token){ long time = System.currentTimeMillis(); String data = shareID + "|" + time; String signature = HMA CS HA256(data.getBytes(), token.getBytes()); String url = "https://console.huaweicloud.com/dlv/vision/share/?id="+shareID +"&dlv_time="+time+"&dlv_signature="+ signature+"&locale=zh-cn®ion=cn-north-4"; return url; } //采用HmacSHA256进行签名 public static String HMACSHA256(byte[] data, byte[] key) { try { SecretKeySpec signingKey = new SecretKeySpec(key, "HmacSHA256"); Mac mac = Mac.getInstance("HmacSHA256"); mac.init(signingKey); return URLEncoder.encode(Base64.encodeBase64String(mac.doFinal(data))); } catch (NoSuchAlgorithmException e) { e.printStackTrace(); } catch (InvalidKeyException e) { e.printStackTrace(); } return null; } } 上述代码中的以下参数，请根据实际情况进行替换： System.out.println(getShareUrlWithToken("*****3b44722********5b888211bca", "******er1tyy1C7J*******JxeIlPz8P")中的*******4722467a9477*******11bca为分享链接中share后的参数，*****er1tyy1C7******pzJxe***8P为分享密钥中的参数。 String url = "https://console.huaweicloud.com/dlv/vision/share/?id="+shareID +"&dlv_time="+time+"&dlv_signature="+ signature+"&locale=zh-cn®ion=cn-north-4"中的locale=zh-cn为语言标识，英文为en-us；region=cn-north-4为服务所在区域，cn-north-4为华北-北京四，您也可以在华北-北京一和华南-广州区域中分享大屏。

数据可视化 DLV 开发大屏

数据可视化 DLV-编辑大屏:辅助线

辅助线添加辅助线：当画布左上角的按钮显示为状态时，将鼠标移至画布顶端或左侧的标尺处，当鼠标变为双向箭头且画布中出现一条红色辅助线时，单击鼠标左键就可以添加一条红色的辅助线。在画布中可以添加多条水平或垂直的辅助线。图6 辅助线调整辅助线的位置：在画布中，将鼠标移至某一条红色辅助线上，然后按住鼠标左键不放可以拖动辅助线，将它拖动到画布的其他位置后放开鼠标左键。在标尺上会显示辅助线距离画布左右/上下边界的距离。显示/隐藏辅助线：单击画布左上角的按钮，可以隐藏所有的辅助线，此时您无法添加辅助线。辅助线被隐藏后，单击画布左上角的按钮，可以显示所有的辅助线，此时您也可以添加辅助线。图7 显示/隐藏辅助线删除辅助线：在画布中，将鼠标移至某一条红色辅助线上，当鼠标变为双向箭头形状时，按住鼠标左键不放，拖动辅助线将它拖出画布区域（或单击鼠标右键并选择弹出菜单“删除”），就可以删掉辅助线。

数据可视化 DLV 开发大屏

数据可视化 DLV-编辑大屏:编辑大屏

编辑大屏登录DLV控制台。在“我的大屏”页面，找到需要编辑的大屏，将鼠标移至该大屏图标上，然后单击编辑按钮进入大屏开发页面。图2 编辑大屏选中画布，在右侧的“页面设置”面板中设置大屏参数。屏幕大小：画布的宽度和高度。单位为px。背景色：大屏的背景色。背景图：用户可以上传自定义图片作为大屏的背景图。如果未设置该配置项，则默认无背景图。缩放模式：大屏的缩放模式。缩略图：单击“截取封面”可以截取大屏的缩略图作为大屏的封面，然后在“我的大屏”页面查找大屏时，该大屏将显示此处截取的封面。请合理谨慎使用截取封面功能，该功能可能使你的封面数据泄露！重置：单击“恢复默认背景”，大屏的“背景色”和“背景图”都将恢复为默认值。贴合灵敏度：设置为“无”时，关闭贴合功能。设置为其他值时，使用鼠标拖拽一个组件靠近另一个组件或辅助线时，当两者之间的距离小于等于该参数所指定的距离时，该组件将自动与另一个组件或辅助线相贴合。单位为px。允许导出：勾选该参数后，可将大屏导出为图片或者PDF格式。全局参数：用于设置交互全局参数。图3 大屏页面设置添加组件和管理组件。在画布中添加所需要的组件，具体操作请参见管理组件。管理图层。完成组件的添加后，可以对图层进行管理，具体操作请参见管理图层。

数据可视化 DLV 开发大屏

数据可视化 DLV-编辑大屏:大屏开发页面总览

大屏开发页面总览登录DLV控制台，在“我的大屏”页面，找到需要编辑的大屏，将鼠标移至该大屏图标上，然后单击编辑按钮进入大屏开发页面。在大屏开发页面中，您可以根据业务需求设计和开发大屏，完成添加组件、页面布局、关联数据源和发布大屏等操作。图1 大屏开发页面表1 功能区说明序号功能区描述 1 组件区在组件区，DLV提供了丰富的组件，用户可以选择所需要的组件添加到画布中。关于组件的详细介绍，请参见组件概述。 2 图层区图层区可以显示大屏中的各个图层的名称及缩略图，这样可以方便查找图层。关于图层管理的详细介绍，请参见管理图层。 3 画布大屏的画布。 4 画布缩放控制条使用鼠标拖动缩放控制条，或单击、按钮，可以放大或缩小画布。单击，可以让画布自适应屏幕大小。 5 横向标尺当画布左上角的按钮显示为状态时，将鼠标移至横向标尺处，当鼠标变为双向箭头且画布中出现一条红色辅助线时，单击鼠标左键就可以添加一条红色的辅助线。 6 纵向标尺当画布左上角的按钮显示为状态时，将鼠标移至纵向标尺处，当鼠标变为双向箭头且画布中出现一条红色辅助线时，单击鼠标左键就可以添加一条红色的辅助线。 7 配置面板选中大屏或某个组件时，在配置面板中将显示相关的配置信息。关于大屏的配置指导，请参见编辑大屏。关于组件的配置指导，请参见组件指南。 8 发布区发布区的各功能按钮说明如下：：返回DLV控制台首页。在大屏开发页面所做的编辑修改，系统会自动保存。：预览大屏。在大屏开发过程中，您可以通过预览功能查看大屏的显示效果。详细介绍请参见预览大屏。：发布大屏。大屏开发完成后，您可以通过发布功能向其他用户分享大屏。详细介绍请参见发布大屏。 9 面板控制区用于控制整个大屏开发面板显示或隐藏的区域。 10 排列布局可以选中多个组件对组件进行排列布局。

数据可视化 DLV 开发大屏

云服务器内容精选

开发大屏

7*24

备案

专业服务

退订

建议反馈

售前咨询热线