利用阵列容器快速排列多个容器卡片


阵列容器根据对比需求,自动阵列平铺多个容器卡片,以容器卡片的形式展示多组数值信息,对比出不同资产设备的详情情况。在容器卡片中,能承载多个组件,可以灵活满足多设备场景。使用阵列容器可以快速构建多个相同布局的容器卡片,构建清晰的数据对比页面,提高 EnOS 数字孪生可视化效率。


阵列容器可用于多个场景,如:

  • 使用相同的图表展示多个设备/场站的不同数据进行对比。

  • 使用相同的图表展示多个月份/年份的不同数据进行对比。


../../_images/container_array.png


添加阵列容器


通过以下步骤,添加阵列容器:

  1. 页面编辑器 中,将光标移动到 添加 上并选择 阵列容器

  2. 根据需要配置 基本选项 中的设置。

    • 标题:指定阵列容器的标题。

    • 隐藏标题:选中此项可隐藏标题。

    • 标题字体:配置标题的字体。

    • 描述:简要描述你的阵列容器。

  3. 根据需要配置 阵列设置 中的设置。

    • 阵列方式:配置阵列为基于数据源或时间日历进行阵列。

      • 数据源方式

        • 数据源、类别与阵列字段:指定用于生成阵列的数据字段,即决定生成的容器卡片的个数与每个卡片的名称。例如,选择场站名称字段,则会为所有场站生成对应的单独容器卡片。

        • 卡片布局:配置一页显示的容器卡片的个数与布局。

      • 日历方式

        • 时间粒度:配置阵列显示格式。

        • 显示工作日:勾选后仅显示工作日。

        • 一周起始日:设置周一或周日为起始日。

        • 日期格式:设置时间数据的格式。

    • 标题跳转:配置标题跳转的名称、打开与跳转方式。可使用参数。更多信息,参见 配置页面参数

    • 作用字段:配置选择联动容器内组件数据源中的字段,即根据作用字段筛选该容器卡片内组件的数据。例如,选择场站名称字段,则该容器卡片将以场站名称筛选数据,即仅显示该容器卡片对应场站的单个场站数据。

  4. 根据需要配置 卡片样式 中的设置。

    • 卡内布局:选择卡片内组件的布局。

    • 名称字体:配置卡片标题。

    • 显示卡片名称:是否显示卡片名称。

    • 卡片装饰:配置标题装饰、上装饰线、下装饰线、卡片颜色以及卡片间距。

    • 分页器:是否配置分页器,根据卡片布局分页。

    • 组件间距:配置卡片内组件的间距。

  5. 根据需要配置 容器样式 中的设置。

    • 允许最大化:选中此项可支持阵列容器在预览或发布页面中最大化。更多信息,参见 最大化组件

    • 图表内边距:指定阵列容器的和内容的每个边界之间的空间大小。

    • 背景色:选择阵列容器的背景色。

    • 背景图片:上传要作为阵列容器背景展示的图片。它根据阵列容器的大小自适应地填充容器。

    • 标题装饰:选择阵列容器标题的装饰方式。

    • 上装饰线:添加阵列容器的上边界装饰线。

    • 下装饰线:添加阵列容器的下边界装饰线。

  6. 根据需要配置 过滤器设置 中的设置。更多信息,参见 添加容器过滤器

  7. 选择 确定 完成阵列容器的创建。

在容器卡片中添加组件


将阵列容器添加到页面后,可以开始将组件添加到容器卡片中。


通过以下步骤,将组件添加到容器卡片:

  1. 选择卡片中的 +添加组件,进入组件选择弹窗。

  2. 选择组件类型:

    • 新组件 页签中选择所需创建的组件类型,创建全新组件。

    • 组件模板 页签中选择现有组件模板,在组件模板基础上开始创建。更多信息,参见 组件模板

  3. 将光标移动到组件上,然后移动到省略号(…)上,此时将显示下拉菜单。

  4. 选择 编辑,访问 图表编辑器 进行组件配置。


备注

  1. 当卡片中可放置大于等于 2 个组件时,可选中组件拖拽至卡片中的其他位置。

  2. 在编辑态中,仅展示第一个卡片的数据。如需查看所有卡片数据,则需选择 预览 或发布页面查看。

../../_images/container_array2.png