使用模板构建新建屏幕

前提条件

已创建公共屏幕模板并发布，具体请参见公共屏幕模板。

新建屏幕

1. 在开天集成工作台界面中，选择左侧导航栏中的“业务可视化 > 我的屏幕”。
2. 选择屏幕分组，单击“新建屏幕”。
3. 在“选择构建方式”页面，在“基于模板构建”下单击“屏幕构建”。
4. 配置新建屏幕基本信息，参数说明请参考表1。单击“确定”，进入选择屏幕模板界面。

   表1 参数说明

   参数	说明
   屏幕名称	必填项。 屏幕的名称。由1~64个字符组成，包含中文、字母、数字及下划线。屏幕名称满足唯一性不可重复。
   屏幕分组	必选项。 选择相应的分组。可以在“我的屏幕”页签，选择项目后添加分组。
   屏幕描述	选填项。 屏幕相关描述。由0~400个字符组成，包含中文、字母、数字及下划线。

5. 在合适的屏幕模板上，单击“使用”。

   如果没有满足要求的屏幕模板，请新建公共屏幕模板或编辑现有的公共屏幕模板，具体请参见新建屏幕模板。

6. 在右侧配置“屏幕属性”，具体的参数说明如表2所示。

   表2 参数说明

   参数	说明
   选用模板	显示选用模板的名称。
   基础属性	屏幕名称/屏幕分组/屏幕描述：可修改。 屏幕尺寸：可对屏幕尺寸进行修改，包含默认、2K屏、4K屏和自定义。 编辑状态：可以通过切换编辑状态设置屏幕是否可编辑。 主题背景：可以单击“切换主题背景”切换主题风格。 屏幕水印/版权信息/悬浮按钮：根据需求开启。
   版面属性	屏幕全屏/运行时框线/微前端加载：根据需求开启或关闭。 缩放方式：分为全屏铺满、固定高宽、等比缩放、等比缩放宽度铺满、等比缩放高度铺满。 可对上下左右边距及间距进行自定义调整。
   其他	屏幕封面包含以下两种： 截取封面：单击“截取封面”，即可自动获取封面。 上传封面：单击“上传封面”后，将本地准备好的封面进行上传。

7. 在右侧配置“卡片属性”，包括“基本信息”、“交互”和“属性”，具体的参数说明如表6 参数说明所示。

   表3 参数说明

   参数		说明
   基本信息	基础信息	卡片的基本信息，不可修改。
   交互	交互方式	无：无交互方式。 联动：一个区域可有多张卡片，可设置切换。 局部事件：当打开局部事件时，仅对选中卡片的选中区域实现交互效果；反之，则是对选中卡片的全局产生效果。 显示目标/隐藏目标：选择相应卡片，与主体卡片产生联动交互效果。 弹出：可设置屏幕内卡片的弹出方式。 触发方式：可选值为“点击”“流数据”。 点击：任意点击卡片即可触发弹出效果。 流数据：“弹出方式”固定为“侧边抽屉”式，“订阅消息”需要选择创建好的“流”，具体创建方式请参考创建流章节。如果想要预览效果，（暂时仅支持）需要手动运行流后，预览才能实现弹出效果。 弹出方式：可选值为“弹窗”“侧边抽屉”。 局部事件：当“触发方式”为“点击”时，才有此参数。当打开局部事件时，仅对选中卡片的选中区域实现交互效果；反之，则是对选中卡片的全局产生效果。 弹出卡片：选择相应卡片，与主体卡片产生弹出交互效果。选择卡片时支持搜索选择。 弹窗宽高/抽屉宽度：设置弹窗或侧边抽屉尺寸。 下钻： 局部事件：请选择已设置发送消息event1的卡片，否则不会生效。 发送消息event1在“屏幕模板 > 消息联动 > 自定义事件”进行设置。 当开启局部事件时，可设置多个下钻屏幕。 当值为：当开启“局部事件”时，才有此参数。卡片局部事件传出来的值。当配置为“*”时，适用于所有局部事件。 下钻屏幕：选择下钻的屏幕。 链接打开于：下钻的屏幕显示窗口。 参数：设置参数。 效果：可选项“无”“滑窗”“翻页”“缩放”。
   	卡片特效	可根据需要对卡片配置“无”“飞入”、“浮入”、“滑入”效果。 说明： Windows操作系统，需要在“我的电脑 > 高级系统设置 > 高级 > 性能 > 设置 > 视觉效果 > 自定义”中勾选“窗口内的动画控件和元素”，才能显示卡片特效。电脑重启后，需要再次设置。
   	扩展交互	支持卡片全屏、卡片显隐、卡片固定位置、卡片折叠展开。
   属性		可对卡片的内边距、标题、布局、数值及图例样式等进行自定义配置。 请参考使用在线构建新建卡片的“组件属性”或使用卡片模板新建卡片的“属性配置”。

8. 在右侧配置“屏幕卡片”，可以对卡片进行升级、删除、隐藏、展示等操作。

   选择的屏幕模板中的卡片如果已升级，您想要使用升级后的卡片，必须在“屏幕卡片”页签下单击“卡片一键升级”或在对应的卡片右侧单击。

9. 配置完成后，单击“完成”。

   配置完成后的屏幕，会展示在“我的屏幕”。

10. （可选）单击预览，预览屏幕配置效果。
11. 单击发布，在“发布”界面，根据需求开启分享状态，单击“确定”。
    • 关闭分享状态：屏幕不分享，仅该租户下的用户可查看此屏幕。
    • 开启分享状态：屏幕分享，该租户及其他租户下的用户均可查看此屏幕。
      • 无限制：发布时，复制分享链接。发布后，输入分享链接查看此屏幕。
      • 分享码：发布时需要设置分享码及分享码的有效期，复制分享链接及分享码。发布后，输入分享链接及分享码查看此屏幕。
      • token：发布时，自动生成Token，复制分享链接及Token。发布后，通过Token校验获取新的访问链接，使用新的访问链接查看此屏幕。Token校验方法请参考Token校验。
    

    • 当屏幕中的卡片使用了连接器或流，屏幕不能分享。
    • 当屏幕中存在非在线构建的卡片，屏幕不能分享。

    屏幕发布成功后，可在我的屏幕轮播中使用。

Token校验

客户端在使用Token校验的流程如下。

已获取大屏分享链接和Token。

例如，分享链接https://console.ulanqab.huawei.com/sve/preview.html?region=cn-north-7#/screen/share/18cd21df7bc-WPgj_GqRc。其中“region”的值为“cn-north-7”，“pageId”的值为“18cd21df7bc-WPgj_GqRc”。

1. 使用代码开发工具将大屏分享链接中的pageId和region拼接成如下格式的字符串。

   pageId|region；

2. 使用HmacSHA256算法对拼接的字符串进行签名，并将签名后的字符串使用Base64进行转换。签名时需要使用对应的Token。
   HmacSHA256签名和Base64转换的示例如下：

    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*******", "cn-7", "*******r1tyy1C7Jenni3p*********"));
        }
   
        public static String getShareUrlWithToken(String pageId, String region, String token){
            String data = pageId + "|" + region;
            String signature = HMACSHA256(data.getBytes(), token.getBytes());
            String url = "https://console.huaweicloud.com/sve/share/page.html?id=" + pageId + "&region=" + region + "&sve_signature=" + signature;
            return url;
        }
   
        //采用HmacSHA256进行签名并进行Base64转换
        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;
        }
    }

3. 将转换后的字符串赋值给sveSignature，sveSignature参数拼接到大屏分享链接中获取新的访问链接。

   例如，新的访问链接https://console.ulanqab.huawei.com/sve/preview.html?sveSignature=1OP99N6yxCDmEiH4aNMU1GAwtKspSg4fJ/zh0679k=&region=cn-north-7#/screen/share/18cd21df7bc-WPgj_GqRc

更多操作

屏幕创建完成后，您还可以在“我的屏幕”界面执行如表4的操作。