# 基于屏幕模板构建屏幕 通过选择运营中心公共模板新建屏幕，完成卡片交互功能的配置，还可二次定义相关属性配置。保存后通过预览可以看大屏上卡片间弹出、联动、卡片全屏、区域切换、下钻等交互效果。 #### 前提条件 - 需要具备AppStage指标开发者或运营管理员权限，权限申请的操作请参见[权限管理](https://support.huaweicloud.com/usermanual-appstage/appstage_04_0009.html)。 - 已完成[新建项目](https://support.huaweicloud.com/usermanual-wiseoperation/appstage_04_0567.html)。 #### 操作步骤 1. 登录[AppStage业务控制台](https://appstage.huaweicloud.com/portal/home)。 2. 在快捷入口选择"运营中心"，进入运营中心。 3. 在左侧导航栏选择"看板管理 \> 我的屏幕"。 4. 选择屏幕分组，单击"新建屏幕"。 5. 在"选择构建方式"页面，在"基于模板构建"下单击"屏幕构建"。 6. 配置新建屏幕基本信息，参数说明请参考[表1]。 图1新建屏幕 ![](https://support.huaweicloud.com/usermanual-wiseoperation/zh-cn_image_0000002021909229.png) 表1参数说明 | **参数** | **说明** | |:---|:---| | 屏幕名称 | 屏幕的名称，由1\~64个字符组成，包含中文、字母、数字及下划线。屏幕名称满足唯一性。 | | 屏幕分组 | 选择相应的分组。可以在"我的屏幕"页签，选择项目后添加分组。 | | 屏幕描述 | 屏幕相关描述，由1\~400个字符组成，包含中文、字母、数字及下划线。 | 7. 单击"确定"，进入选择屏幕模板界面。 8. 在合适的屏幕模板上，单击"使用"。 如果没有满足要求的屏幕模板，请新建公共屏幕模板或编辑现有的公共屏幕模板，具体请参见[新建屏幕模板](https://support.huaweicloud.com/usermanual-wiseoperation/appstage_04_0639.html)。 9. 在右侧配置"屏幕属性"，具体的参数说明如[表2 参数说明]所示。 表2参数说明 | **参数** | **说明** | |:---|:---| | 基础属性 | - 屏幕名称/屏幕分组/屏幕描述：可修改。 - 屏幕尺寸：可对屏幕尺寸进行修改，包含默认、2K屏、4K屏和自定义。 - 编辑状态：可以通过切换编辑状态设置屏幕是否可编辑。 - 主题背景：可以单击"切换主题背景"切换主题风格。 - 渐进渲染/屏幕水印/版权信息/悬浮按钮：根据需求开启。 | | 版面属性 | - 屏幕全屏/平台渲染/微前端加载：根据需求开启或关闭。 - 缩放方式：分为全屏铺满、固定高宽、等比缩放、等比缩放宽度铺满、等比缩放高度铺满。 - 可对上下左右边距进行自定义调整。 | | 其他 | 屏幕封面包含以下两种： - 截取封面：单击"截取封面"，即可自动获取封面。 - 上传封面：单击"上传封面"后，将本地准备好的封面进行上传。 | 10. 在右侧配置"卡片属性"，包括"基本信息"、"交互"和"属性"，具体的参数说明如[表6 参数说明]所示。 表3参数说明 | **参数** || **说明** | |:---|---|:---| | 基本信息 | 基础信息 | 卡片的基本信息，不可修改。 | | 交互 | 交互方式 | - 无：无交互方式。 - 联动：一个区域可有多张卡片，可设置切换。 - 局部事件：当打开局部事件时，仅对选中卡片的选中区域实现交互效果；反之，则是对选中卡片的全局产生效果。 - 显示目标：选择相应卡片，与主体卡片产生联动交互效果。 - 隐藏目标：选择相应卡片，隐藏卡片。 - 弹出：可设置屏幕内卡片的弹出方式。 - 触发方式：可选值为"点击"。 点击：任意点击卡片即可触发弹出效果。 - 弹出方式：可选值为"弹窗""侧边抽屉"。 - 局部事件：当"触发方式"为"点击"时，才有此参数。当打开局部事件时，仅对选中卡片的选中区域实现交互效果；反之，则是对选中卡片的全局产生效果。 - 弹出卡片：选择相应卡片，与主体卡片产生弹出交互效果。选择卡片时支持搜索选择。 - 弹窗宽高：设置弹窗尺寸。 - 下钻： - 局部事件：请选择已设置发送消息event1的卡片，否则不会生效。 发送消息event1在"屏幕模板 \> 消息联动 \> 自定义事件"进行设置。 当开启局部事件时，可设置多个下钻屏幕。 - 当值为：当开启局部事件时，才有此参数。卡片局部事件传出来的值。当配置为"\*"时，适用于所有局部事件。 - 下钻屏幕：选择下钻的屏幕。 - 链接打开：下钻的屏幕显示窗口。 - 参数：设置参数。 - 效果：可选项"无""滑窗""翻页""缩放"。 | | 交互 | 卡片特效 | 可根据需要对卡片配置"无""飞入"、"浮入"、"滑入"效果。 Windows操作系统，需要在"我的电脑 \> 高级系统设置 \> 高级 \> 性能 \> 设置 \> 视觉效果 \> 自定义"中勾选"窗口内的动画控件和元素"，才能显示卡片特效。电脑重启后，需要再次设置。 | | 交互 | 扩展交互 | 支持卡片全屏、卡片显隐、卡片固定位置。 | | 属性 || 可对卡片的内边距、标题、布局、数值及柱状样式等进行自定义配置。 | 11. 在右侧配置"屏幕卡片"，可以对卡片进行升级、删除、隐藏、展示等操作。 选择的屏幕模板中的卡片如果已升级，您想要使用升级后的卡片，必须在"屏幕卡片"页签下单击"卡片一键升级"或在对应的卡片右侧单击![](https://support.huaweicloud.com/usermanual-wiseoperation/zh-cn_image_0000002021988753.png)。 12. 配置完成后，单击"完成"。 配置完成后的屏幕，会展示在"我的屏幕"。 13. 在"我的屏幕"界面，选择创建的屏幕，单击"编辑"，可以再次返回屏幕构建页面对相关配置进行修改。 14. （可选）单击![](https://support.huaweicloud.com/usermanual-wiseoperation/zh-cn_image_0000001985389438.png)预览，预览屏幕配置效果。 15. 单击![](https://support.huaweicloud.com/usermanual-wiseoperation/zh-cn_image_0000001985549146.png)发布，在"发布"界面，根据需求开启分享状态，单击"确定"。 - 关闭分享状态：屏幕不分享，仅该租户下的用户可查看此屏幕。 - 开启分享状态：屏幕分享，该租户及其他租户下的用户均可查看此屏幕。 - 无限制：发布时，复制分享链接。发布后，输入分享链接查看此屏幕。 - 分享码：发布时需要设置分享码及分享码的有效期，复制分享链接及分享码。发布后，输入分享链接及分享码查看此屏幕。 - 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 + "®ion=" + 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=\®ion=cn-north-7#/screen/share/18cd21df7bc-WPgj_GqRc #### 更多操作 屏幕创建完成后，您还可以在"我的屏幕"界面执行如[表4]的操作。 表4相关操作 | 操作 | 说明 | |:---|:---| | 编辑屏幕 | 在需要编辑的屏幕上，单击"编辑"，可以对相关配置进行修改。 | | 查看详情 | 在需要查看的屏幕上，单击"更多 \> 详情"，可以查看屏幕详情。 | | 预览效果 | 在需要预览的屏幕上，单击"更多 \> 预览"，可以预览屏幕配置效果。 | | 发布屏幕 | 在需要发布的屏幕上，单击"更多 \> 发布"，在"发布"界面，根据需求开启分享状态，单击"确定"。 - 关闭分享状态：屏幕不分享，仅该租户下的用户可查看此屏幕。 - 开启分享状态：屏幕分享，该租户及其他租户下的用户均可查看此屏幕。 - 无限制：发布时，复制分享链接。发布后，输入分享链接查看此屏幕。 - 分享码：发布时需要设置分享码及分享码的有效期，复制分享链接及分享码。发布后，输入分享链接及分享码查看此屏幕。 - token：发布时，自动生成Token，复制分享链接及Token。发布后，通过Token校验获取新的访问链接，使用新的访问链接查看此屏幕。Token校验方法请参考"Token校验"。 - 动态token：用户获取动态Token查看此屏幕。 当屏幕中存在非在线构建的卡片，屏幕不能分享。 | | 移动屏幕 | 在需要移动的屏幕上，单击"更多 \> 移动"，可以将该屏幕移至该项目下的其他屏幕分组。 | | 删除屏幕 | 在需要删除的屏幕上，单击"更多 \> 删除"，可以删除该屏幕。 |