更新时间:2024-05-30 GMT+08:00
分享

新建屏幕模板

您可以基于模板来新建站点屏幕,因此在新建屏幕之前您需要在“公共屏幕模板”新建屏幕模板,选择业务所需的页面布局和卡片设置消息联动,从而实现自定义屏幕构建。

前提条件

已创建我的卡片,具体请参见我的卡片

新建屏幕模板

  1. 在开天集成工作台界面中,选择左侧导航栏中的“业务可视化 > 公共屏幕模板”。
  2. 在“我的模板”页签,选择屏幕模板分组,单击“新建屏幕模板”。
  3. 填写屏幕基本信息,具体的参数说明如表1所示。

    表1 参数说明

    参数

    说明

    屏幕模板名称

    必填项。

    填写模板的名称,根据规划自定义。建议您按照一定的命名规则填写屏幕模板名称,方便您快速识别和查找。

    由1~64个字符组成,包含中文、字母、数字及下划线。需满足唯一性且不可重复。

    屏幕模板分组

    必选项。

    从下拉框中选择屏幕模板分组。默认显示2已选择的分组。屏幕模板分组为用户自定义创建的分组,具体操作请参见新建屏幕模板分组

    屏幕模板描述

    选填项。

    屏幕模板描述信息。由0~400个字符组成,包含中文、字母、数字及下划线。

  4. 单击“下一步:选择页面布局”。

    页面布局包含流式布局、自定义布局、可重叠布局、固定布局。用户可根据实际情况选择一个或多个布局。

    其中“流式布局”“自定义布局”“可重叠布局”为系统预置页面布局;“固定布局”为用户自定义的页面布局,具体操作请参考新建布局

    可重叠布局支持自由拖拽卡片位置、对卡片进行缩放、叠加和组合等操作。

    • 大小缩放:选中卡片,使用鼠标拖动卡片右下角边沿,调整卡片大小。
    • 层级叠加:可以选中卡片,右键单击“上移一层”、“下移一层”、“置于顶层”或“置于底层”。
    • 组合:按住Ctrl并选中卡片,然后右键单击“组合”。

  5. 单击“下一步:选择卡片”。

    • 选择卡片时,可以先在下拉列表中选择卡片分组后再选择所需卡片,高效又便捷。
    • 选择卡片时,可以通过搜索框进行查询。输入查询信息时仅支持中文、字母、数字及下划线。
    • 用户可以对搜索框里面的内容进行删除和刷新。

      已选择的卡片如果升级过,您想要使用升级后的卡片,必须先单击右上角的“卡片一键升级”。

  6. 单击“下一步:消息联动设置”。消息联动为可选配置。

    设置卡片消息联动时,需要提前完成如下配置:

    • 在新建卡片时,设置了卡片联动的相关配置。
    • 联动消息发送端卡片需要配置“数据服务”页签的“发送消息事件”。
    • 联动消息接收端卡片需要配置“数据服务”页签的“接收消息”。
    • 在“业务可视化 > 配置管理 > 联动消息”中添加了消息SO,具体操作请参考新增自定义消息SO
    1. 单击“消息列表/新建页面消息”。
    2. 单击“新建页面级消息”,具体的参数说明如表2所示。选择完成后在“操作”列下单击
      图1 新建页面级消息
      表2 参数说明

      参数

      说明

      消息名称

      建议填写卡片中绑定的消息名称。

      消息SO

      此处选择的消息SO字段。

      需要用户自定义消息SO,具体请参考新增自定义消息SO

      消息描述

      消息的相关描述信息。

    3. 选择卡片,添加发布。

      单击“添加发布”,选择“自定义事件”、“消息名”,选择完成后在操作列单击

      图2 添加发布
      表3 添加发布参数说明

      参数

      说明

      自定义事件

      选择默认值“发送消息event1”。

      消息名

      选择已添加的屏幕级消息名。

    4. 选择卡片,添加订阅。

      单击“添加订阅”,选择“消息名”、“自定义方法”,选择完成后在操作列单击

      图3 添加订阅
      表4 添加订阅参数说明

      参数

      说明

      消息名

      选择已添加的屏幕级消息名。

      自定义方法

      选择“接收消息one”。

    5. 完成卡片选择和卡片消息联动设置后,关系图如下。
      图4 卡片发布订阅关系图
    6. 单击“下一步:样例页面构建”。

  7. 样例页面构建。

    1. 拖拽卡片。

      把“我的卡片”按需拖到屏幕构建区域,可重复拖拽多次,一个区域可放多张卡片,可建立区域内的卡片切换。

      鼠标移动至卡片上,在右上角单击删除卡片,单击移动卡片。在卡片右下角当鼠标变为双箭头时,可拖拽设置卡片大小。

    2. 配置“屏幕属性”,具体的参数说明如表5所示。
      表5 参数说明

      参数

      说明

      基础属性

      • 屏幕尺寸:可对屏幕尺寸进行修改,包含默认、2K屏、4K屏和自定义。
      • 编辑状态:可以通过切换编辑状态设置屏幕模板是否可编辑。
      • 主题背景:可以单击“切换主题背景”切换主题风格。系统预置了通用的主题背景,用户也可以自定义主题背景,自定义主题背景的操作请参考新建屏幕主题

      版面属性

      • 屏幕全屏/运行时框线/微前端加载:根据需求开启或关闭。
      • 缩放方式:分为全屏铺满、固定高宽、等比缩放、等比缩放宽度铺满、等比缩放高度铺满。
      • 可对上下左右边距及间距进行自定义调整。

      其他

      屏幕封面包含以下两种:

      • 截取封面:单击“截取封面”,即可自动获取封面。
      • 上传封面:单击“上传封面”后,将本地准备好的封面进行上传。
        说明:

        如果“屏幕封面”未进行设置,样例页面构建则无法保存成功。

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

      参数

      说明

      基本信息

      基础信息

      卡片的基本信息,除了卡片大小,其他不可修改。

      交互

      交互方式

      • 无:无交互方式。
      • 联动:一个区域可有多张卡片,可设置切换。
        • 局部事件:当打开局部事件时,仅对选中卡片的选中区域实现交互效果;反之,则是对选中卡片的全局产生效果。
        • 显示目标:选择相应卡片,与主体卡片产生联动交互效果。
        • 隐藏目标:选择相应卡片,与主体卡片隐藏交互效果。
      • 弹出:可设置屏幕内卡片的弹出方式。
        • 触发方式:可选值为“点击”“流数据”。

          点击:任意单击卡片即可触发弹出效果。

          流数据:“弹出方式”固定为“侧边抽屉”式,“订阅消息”需要选择创建好的“流”,具体创建方式请参考创建流章节。如果想要预览效果,(暂时仅支持)需要手动运行流后,预览才能实现弹出效果。

        • 弹出方式:可选值为“弹窗”“侧边抽屉”。
        • 局部事件:当“触发方式”为“点击”时,才有此参数。当打开局部事件时,仅对选中卡片的选中区域实现交互效果;反之,则是对选中卡片的全局产生效果。
        • 弹出卡片:选择相应卡片,与主体卡片产生弹出交互效果。选择卡片时支持搜索选择。
        • 弹窗宽高/抽屉宽度:设置弹窗或侧边抽屉尺寸。

      卡片特效

      可根据需要对卡片配置“无”“飞入”、“浮入”、“滑入”效果。
      说明:

      Windows操作系统,需要在“我的电脑 > 高级系统设置 > 高级 > 性能 > 设置 > 视觉效果 > 自定义”中勾选“窗口内的动画控件和元素”,才能显示卡片特效。电脑重启后,需要再次设置。

      扩展交互

      支持卡片全屏、卡片显隐、卡片固定位置、卡片折叠展开。

      属性

      可对卡片的内边距、标题、布局、数值及图例样式进行自定义配置。请参考使用在线构建新建卡片的“组件属性”或使用卡片模板新建卡片的“属性配置”。

    4. 配置“屏幕卡片”。

      可对卡片进行删除和隐藏。

  8. 单击“完成”。

    配置完成后的屏幕模板,默认以卡片的形式显示在“我的模板”所选择的屏幕分组列表中。

更多操作

屏幕模板创建完成后,您还可以在“业务可视化 > 公共屏幕模板 >屏幕模板 > 我的模板”界面执行如表7的操作。

表7 相关操作

操作

说明

编辑屏幕模板

在需要编辑的屏幕模板上,单击“编辑”,可以编辑屏幕模板。

查看详情模板

在需要查看的屏幕模板上,单击“更多 > 详情”,可以查看屏幕模板详情。

使用屏幕模板

在需要使用的屏幕模板上,单击“更多 > 使用”,可以将该屏幕模板重命名后同步到“我的屏幕”进行使用。

说明:

该操作仅适用于已发布的屏幕。

预览屏幕模板

在需要预览的屏幕模板上,单击“更多 > 预览”,可以预览屏幕模板配置效果。

移动屏幕模板

在需要移动的屏幕模板上,单击“更多 > 移动”,可以将该屏幕移至其他屏幕模板分组。

删除屏幕模板

在需要删除的屏幕模板上,单击“更多 > 删除”,可以删除该屏幕。

说明:

删除后的屏幕模板会放入回收站,回收站会保存近60天的删除数据。

相关文档