1.概述

本文将依次介绍每个控件类组件的配置方式。

2.详细说明

文字


文字组件的入口如下图所示。

控件 - 图1

可以直接修改静态JSON来设置要展示的文字内容。

控件 - 图2

也可以通过API或者数据模型,拖入一个文本字段来展示。

控件 - 图3

可以在样式面板修改文字的样式。

控件 - 图4

滚动文字


滚动文字的入口如下图所示。

控件 - 图5

滚动文字的设置项同文字组件基本类似。在文字组件的基础上,滚动文字支持设置文字的横向滚动效果。通常适合循环轮播显示一段较长的文字内容过。

控件 - 图6

多行文本


多行文本组件的入口如下图所示。

控件 - 图7

相比于文字组件,多行文本适合于展示较长的文字段落,可直接在“样式——>文字——>文字内容”编辑数据。

控件 - 图8

同时,多行文本还支持设置纵向的文字滚动轮播。

控件 - 图9 控件 - 图10

滤镜


滤镜组件如下图所示。

控件 - 图11

滤镜组件在编辑页展示为一个透明的矩形框,通过叠加在别的组件上实现滤镜遮罩的效果。

以黑白滤镜为例,其在图片组件上的覆盖效果对比如下图所示。

控件 - 图12

滤镜的样式设置包括:亮度、对比度、饱和度、复古、灰度、反相、色相和模糊。

控件 - 图13

滤镜组件支持的交互能力配置包括:入场动画、写入参数和响应事件配置。

控件 - 图14

选项卡


选项卡的入口如下图所示。

控件 - 图15

可以直接修改静态JSON数据来调整选项卡的数据项。

控件 - 图16

也可以通过API或者数据模型,接入一个维度字段,读取数据项展示。

控件 - 图17

可以在样式面板中自定义选项卡样式。

POPO-screenshot-20231010-112818.png

图片


图片组件的入口如下图所示。

控件 - 图19

可以在静态数据中设置图片的URL地址。

控件 - 图20

也可以通过API或者数据模型,拖入一个含有图片URL地址的字段。 或者直接上传本地的图片文件。

控件 - 图21

轮播图


轮播图组件的入口如下图所示。

控件 - 图22

可以上传多张图片,并设置自动轮播。

控件 - 图23

热区


热区组件如下图所示。

控件 - 图24

热区组件是一个透明矩形框,一般覆盖在其他没有交互能力的组件上,为热区矩形范围内增加交互行为。

热区可配置的交互能力包括:图表联动、参数写入、入场动画和响应事件。

控件 - 图25

写入参数的触发时机除了点击组件外,还有鼠标移入或移除热区区域。

控件 - 图26

注释框


注释框组件如下图所示。

控件 - 图27

注释框在大屏展示中起到信息提示作用,作用效果如下:光标hover显示提示信息。

控件 - 图28

注释框文本可以通过静态JSON直接编辑。

控件 - 图29

也可以通过连接API或数据模型导入注释文本。

控件 - 图30

注释框的图形样式配置包括:

  • 图标样式:实现提示icon的样式调整,包括类型、颜色、尺寸、位置和边框样式。
  • 注释框样式:配置hover显示的文本框样式,包括上间距、背景颜色和圆角程度。
  • 注释文本:配置注释文本的显示样式,包括文字样式、大小、颜色、对齐、是否缩进、行间距及列表样式。

控件 - 图31

注释框支持的交互配置包括入场动画和响应事件的配置。

控件 - 图32

日期时间


日期时间组件如下图所示。

POPO-screenshot-20231010-114314.png

日期时间组件显示当前日期和时间,可以在样式面板中自定义显示格式,如:YYYY-MM-DD

POPO-screenshot-20231010-114742.png

天气


天气组件如下图所示。

POPO-screenshot-20231010-134206.png

可以在样式面板中设定天气组件修改显示格式。

POPO-screenshot-20231010-134430.png

可以在数据面板中通过设定city值来修改对应城市天气。

POPO-screenshot-20231010-134718.png

轮播组


轮播组组件如下图所示。

控件 - 图38

与轮播图组件功能相同,用于展示多个图片,区别是展示形式有所区别。

  • 轮播图:一次只展示一张图片,切换器在下方。
  • 轮播组:一次可展示多张图片,切换器在两侧。

可以在数据配置区域配置待展示的图片URL。可以通过直接修改静态JSON,也可以通过接入API或数据模型的方式写入图片URL。

控件 - 图39

控件 - 图40

也可以在样式配置区域从本地上传图片。从样式配置区上传的图片展示优先级高于数据配置区写入的图片,因此如果样式区传入了图片,轮播组将展示上传图片而非数据区写入的图片。

控件 - 图41

轮播组的样式配置包括:

  • 展示区配置:调整展示区尺寸、一次展示的图片个数、图片间距和不透明度。
  • 切换器配置:调整背景样式及颜色,切换器button样式、粗细和颜色,是否展示缩略图。
  • 动画效果配置:调整轮播动画效果,包括动画类型、轮播动画持续时间、停留时长。

控件 - 图42

轮播组支持的交互配置包括入场动画和响应事件。

全屏切换


全屏切换如下图所示。

控件 - 图43

全屏切换常用于对大屏展示状态的切换。阅览大屏时,点击即可进入全屏状态,再次点击,退出全屏状态。

图形样式的设置支持更改按钮样式,如下图所示,可以通过上传图片实现全屏和退出按钮的样式自定义。

控件 - 图44

全屏切换的交互事件配置支持:入场动画和响应事件。

控件 - 图45

开关


开关如下图所示。

控件 - 图46

开关用于联动控制其他组件。例如,利用开关控制图表的显示或隐藏状态。

可以在图形样式配置区域修改开关颜色,如下图所示。

控件 - 图47

开关目前支持的交互事件包括:入场动画、参数写入、以及响应事件配置。

控件 - 图48

开关组件的交互参数配置过程与其他组件有些许不同。开关组件在传递参数值时,不再需要选择字段,通过开关状态自动传入true或false,数据类型为布尔型。以下图为例,开关组件的传参逻辑为:当开关状态切换为”开启“时,”将true写入参数test“的动作被触发;当开关状态切换为”开启“时,”将false写入参数test“的动作被触发。

控件 - 图49

事件时间轴


事件时间轴的入口如下图所示。
控件 - 图50

事件时间轴往往被用来轮播呈现大事记。

相关的数据配置如下图所示。

  • 时间标题:大事节点的日期。
  • 描述文字:大事节点的相关描述。

数据可来自静态JSON、API或数据模型。

事件时间轴-1.png

事件时间轴可配置的图形样式如下图所示:

  • 布局:设置时间轴的方向和节点分布。
  • 轴线样式:设置轴线的线型、粗细和颜色。
  • 点样式:设置选中以及未选中的节点形状和尺寸。
  • 时间标题样式:设置时间标题的样式。
  • 描述文字样式:设置描述文字的样式。
  • 动效:设置组件的轮播效果,包括:是否轮播、轮播间隔、动画时长、是否联动。

控件 - 图52

事件时间轴的交互事件配置支持:联动、入场动画、写入参数、响应事件。

控件 - 图53

下拉单选


下拉单选组件的入口如下图所示。

控件 - 图54

下拉单选组件的图形样式设置包括:

  • 选择框:配置下拉框未展开时,选择框的样式,包括边框、背景、文字内容及样式。
  • 下拉框:配置下拉框的边框、背景和字体样式。

POPO-screenshot-20231010-141506.png

数据可来自静态JSON、API或数据模型。

POPO-screenshot-20231010-141619.png

下拉多选


下拉多选组件的入口如下图所示。

控件 - 图57

相比下拉单选组件,下拉多选提供多选项同时选择,增加额外按钮设置,可添加清空,全选按钮。

POPO-screenshot-20231010-142059.png

时间选择器


时间选择器组件的入口如下图所示。

控件 - 图59

和下拉单选类似,时间选择器可以选择日期,在样式面板中可以在选择形式中修改粒度。

POPO-screenshot-20231010-142942.png

范围选择器


范围选择器组件的入口如下图所示。

POPO-screenshot-20231010-143442.png

与时间选择器类似,范围选择器可以选择日期时间段,如:2023-01-01 ~ 2023-02-02

POPO-screenshot-20231010-143729.png 控件 - 图63

树形选择器


树形选择器组件如下图所示。

控件 - 图64

树形选择器常用于选项间存在层级关系的场景,通过将选项分组展示,提高选项展示的清晰与美观程度。

可以在静态JSON区域直接写入选项。

控件 - 图65

也可以通过连接API或数据模型实现数据写入。

控件 - 图66

选中字段并将其拖入层级区域,字段中的值将按拖入顺序实现层级嵌套。以下图“地区-省份”为例,地区为一级字段,省份为二级字段。

控件 - 图67

树形选择器的图形样式设置包括:

  • 选择框:配置下拉框未展开时,选择框的样式,包括边框、背景、文字内容及样式。
  • 下拉框:配置下拉框的边框、背景和字体样式。

控件 - 图68

矩形卡片


矩形卡片的入口如下图所示。

控件 - 图69

矩形卡片通常可以作为一些图表的背景装饰。在样式面板,可以设置矩形卡片的标题、背景、边框、圆角等样式。

控件 - 图70

线条


线条的入口如下图所示。
控件 - 图71

线条组件常用于装饰大屏。

可为线条组件配置线条样式,包括线条的粗细、线型、颜色以及端点形状。

控件 - 图72

线条的交互事件配置支持:入场动画和响应事件。

控件 - 图73

视频


视频组件如下图所示。

控件 - 图74

视频组件用于在大屏中实现视频播放。

可以在数据配置区写入URL完成视频插入,如下图所示。可以直接修改静态jSON,也可以通过接入API或数据模型实现数据写入。需要注意,视频组件只能读入一个字段的一个数值,多余数据将不生效。

控件 - 图75

也可以从视频样式配置区域进入,在“上传视频”区域选择本地视频导入。

控件 - 图76

视频的样式配置包括视频配置和滤镜配置:

  • 视频配置:支持视频及封面上传、显示设置和播放设置。
  • 滤镜配置:包括高斯哦胡、亮度。对比度、灰度、色相、饱和度和褐色调整。

控件 - 图77

视频组件支持的交互能力包括入场动画和响应事件设置。

控件 - 图78

视频流


视频流组件的入口如下图所示。

控件 - 图79

视频流组件的典型应用场景,是接入监控摄像头拍摄到的实时视频流。支持HTTP-FLV,HLS,MP4,webm四种协议。

POPO-screenshot-20231010-150013.png

网页iframe


网页iframe组件的入口如下图所示。

控件 - 图81

可以在大屏中嵌入一个网页。

控件 - 图82

网页轮播


网页轮播组件如下图所示。
控件 - 图83

网页轮播组件功能一般用于需要展示多个网页的情况,较于网页iframe组件,网页轮播组件多了轮播能力。

网页轮播通过识别URL来实现网页的识别与展示。可以通过直接修改静态JSON或连接API或数据模型的方式实现数据更改。数据格式上,仅支持拖入一个有多值的字符串字段。

控件 - 图84

可以在样式配置区域对轮播效果进行配置。轮播设置内容如下图所示,可以改变轮播的时间间隔、切换速度、转场动画、以及切换器的显示。

控件 - 图85

网页轮播目前支持入场动画和响应事件的交互配置,如下图所示。

控件 - 图86

倒计时


倒计时组件如下图所示。

POPO-screenshot-20231010-150752.png

可以在样式面板中设置文字样式,背景,标签。

POPO-screenshot-20231010-151011.png

倒计时组件数据可来自静态JSON、API或数据模型,下方为静态JSON,数据为日期格式:YYYY-MM-DD hh:mm:ss。

POPO-screenshot-20231010-151323.png