组件类型

组件类型包含设备、基础组件、控制、基础图表、表格、媒体和其他。

下面将详细介绍各类组件的用途、使用方法及其各自特有的属性配置，帮助您根据实际需求灵活选择与应用。

设备

本节说明 Aqara Studio 提供的设备组件类型和添加设备组件后的必要配置流程。

支持设备类型

目前可供您使用的设备组件类型如下：

• 灯
• 空调
• 开关插座
• 窗帘

配置流程

当您将设备组件添加到画板上后，请参考以下流程完成配置：

1. （必选）关联真实设备
   在组件被选中后，切换至数据选项卡，找到数据配置部分，将该组件与您实际拥有的设备进行关联。

2. （可选）自定义展示信息
   仍在数据选项卡下，通过卡片信息部分，配置和修改需要在界面中显示的设备相关信息。主要配置项如下：

   配置项	说明
   设备名称	展示于界面的设备名称，可选择继承设备原名（默认）或自定义，方便识别管理。
   房间	设备归属空间，可自动获取实际房间信息（默认），也可按需自定义。
   状态信息	实时展示设备的特定状态（如开关、模式等），如无需求可选择隐藏此项。

3. （可选）样式个性化设置
   若默认样式不符合需求，可前往样式选项卡，在卡片配置处进行自定义。支持两种配置模式：

   • 基础模式：可一键修改所有状态下的主要元素样式，如设备图标、开关图标和字体，简单高效，适合常见需求。
   • 高阶模式：可针对设备不同状态（如开启、关闭、异常等）分别定制外观，并开放更多细化属性（如各类图标、字体、背景色等），适用于更复杂或个性化的视觉呈现。

通过以上步骤，您可以根据实际业务灵活配置并美化设备组件，使其兼具实用性与美观性。

基础组件

基础组件包括 文本、形状、线段、按钮和边框。您可针对这些组件灵活设置样式属性，实现个性化的视觉效果。

文本

文本组件具备以下专属样式配置，即基础样式和文本。

基础样式的属性如下：

分类	属性	说明
字体	字体族	可更换为指定字体。
	字号	设置文本尺寸。
	字重	选择字体粗细。
	颜色	自定义字体颜色。
阴影	X 轴偏移	控制阴影在水平方向上的距离，取值区间为 [-36, 36]，数值越小阴影越靠左。
	Y 轴偏移	控制阴影在垂直方向上的距离，取值区间为 [-36, 36]，数值越小阴影越靠上。
	模糊度	范围 [0, 36]，数值越大阴影越模糊。
	颜色	自定义阴影的颜色。

文本的属性如下：

属性	说明
行高	建议设置为大于字体字号的数值，可防止多行文本重叠，保证可读性。
对齐方式	包括水平对齐（左对齐、居中对齐、右对齐）与垂直对齐（顶部对齐、居中对齐、底部对齐）。

形状

形状组件具备以下专属样式配置，即基础样式。

分类	属性	说明
填充	颜色	设置形状的背景填充色。
描边	粗细	设置描边线条的宽度。
	颜色	设置描边线条的颜色。
	样式	可选描边为实线、虚线或点线。
圆角	-	控制形状的圆角半径，数值越大圆角越明显。
阴影	阴影类型	可选外阴影、内阴影等不同类型。
	X 轴偏移	控制阴影在水平方向上的距离，取值区间为 [-36, 36]，数值越小阴影越靠左。
	Y 轴偏移	控制阴影在垂直方向上的距离，取值区间为 [-36, 36]，数值越小阴影越靠上。
	模糊度	阴影的模糊范围，数值越大越模糊。
	spread	阴影四周的扩散距离。
	颜色	设置阴影的颜色。

线段

线段组件具备以下专属样式配置，即基础样式。

分类	属性	说明
描边	粗细	设置线段的宽度。
	颜色	设置线段的颜色。
	样式	可选线段为实线、虚线或点线。
圆角	圆角半径	控制线段两端的圆角弧度，数值越大圆角越明显。
阴影	所有属性	与 形状 的阴影属性完全一致，包括类型、偏移、模糊、扩散和颜色。

按钮

对于按钮，您需要先 设置按钮需要执行的动作和展示的文本，随后再 设置样式。

设置动作和文本

在画布上添加按钮组件后，请遵循以下步骤完成必要配置：

1. 在配置抽屉切换至动作，设置点击该按钮后需要执行的动作，详情请参考 组件与素材的通用属性 - 动作。
2. 双击该按钮，编辑按钮上的文本。

样式配置

按钮组件具备以下专属样式配置，即基础样式和 Hover（悬停效果）。

基础样式的属性如下：

分类	属性	说明
填充	颜色	与 形状 的填充属性完全一致。
描边	所有属性	与 形状 的描边属性完全一致，包括粗细、颜色和样式。
圆角	-	与 形状 的圆角属性完全一致。
阴影	所有属性	与 形状 的阴影属性完全一致，包括类型、偏移、模糊、扩散和颜色。
字体	所有属性	与 文本 的字体属性完全一致，包括字体族、字号、字重和颜色。

Hover 的属性如下：

属性	说明
颜色	悬停时按钮文字的颜色。
背景色	悬停时按钮的填充色。
边框颜色	悬停时按钮描边的颜色。

边框

边框组件具备以下专属样式配置，即基础样式和边框样式。

基础样式的属性如下：

分类	属性	说明
填充	颜色	与 形状 的填充属性完全一致。
描边	所有属性	与 形状 的描边属性完全一致，包括粗细、颜色和样式。

边框样式的属性如下：

属性	说明
颜色	支持分别设置主、副边框颜色，实现边框不同区域的颜色区分。
比例	可配置边框的比例。
类型	选择边框样式。

控制

当 Aqara Studio 内置的设备组件无法满足您的特殊需求时，您可以通过添加控制组件，自定义实现与真实设备的数据交互。

本节将介绍控制组件的通用配置流程及各类控制组件的功能和专属属性，帮助您灵活构建定制化的设备控制界面。

为控制组件配置数据

1. 在画板中添加任意需要的控制组件，选中该组件，打开其设置抽屉。
2. 切换到数据选项卡，将类型设置为数据源。
3. 单击更改数据源，在弹窗中，左侧双击目标功能点数据文件夹，右侧勾选所需属性，最后点击完成进行绑定。

完成以上操作后，您的控制组件便已成功关联到真实设备的数据，可用于交互。

布尔开关

此组件用于切换设备的开/关状态。

布尔开关组件由以下四种元素组成：图片、功能名称、开关和背景。

图片的属性如下：

属性	说明
图片	如果您不满意 Aqara Studio 提供的默认图标，您可以在此处选择 您在素材库上传的图片或图标。
填充	当上述图片为 PNG 格式时，可以在此处配置图片的背景颜色。
圆角	与 形状 的圆角属性完全一致。
尺寸	在此处设置图片的宽与高。

功能名称的属性如下：

属性	说明
功能名称	设置组件展示的功能名称。
颜色	设置功能名称文本的颜色。
字体	可配置文本的字体族、字号和字重。

开关（Toggle 类型控件）的属性如下：

属性	说明
尺寸	设置控件的整体尺寸。
开启颜色	设置控件开启状态下的填充颜色。
关闭颜色	设置控件关闭状态下的填充颜色。
滑块颜色	设置滑块部分的填充颜色。

背景的属性如下：

分类	属性	说明
填充	颜色	与 形状 的填充属性完全一致。
描边	所有属性	与 形状 的描边属性完全一致，包括粗细、颜色和样式。
圆角	-	与 形状 的圆角属性完全一致。

布尔图片开关

此组件通过图片进行状态切换，直观展示开/关。

布尔图片开关组件由以下三种元素组成：功能名称、图片和背景。

布尔图片开关组件的功能名称属性和背景属性与布尔开关组件一致。

图片的属性如下：

属性	说明
开启图片	表示状态为开启的图片。如果您不满意 Aqara Studio 提供的默认图标，您可以在此处选择 您在素材库上传的图片或图标。
开启关闭	表示状态为关闭的图片。如果您不满意 Aqara Studio 提供的默认图标，您可以在此处选择 您在素材库上传的图片或图标。
尺寸	与 布尔开关 的 尺寸 属性完全一致。
圆角	与 形状 的圆角属性完全一致。

字符串值

此组件用于显示字符串型数据。

字符串值组件由以下四种元素组成：图片、功能名称、参数和背景。

字符串组件的图片、功能名称与背景属性，均与布尔开关组件保持一致。

参数是指字符串值，属性如下：

属性	说明
颜色	设置字符串值文本的颜色。
字体	可配置字体族、字号和字重。
是否显示值	控制该组件是否显示字符串的实时值。

执行自动化

此组件用于基于字符串值触发制定 Logic 类型自动化。

字符串动作组件包含图片、功能名称和背景三个元素。

该组件的图片、功能名称与背景属性的说明，与布尔开关组件一致。

数字输入

此组件支持手动输入数字，实现精确调整。

数字输入组件包含图片、功能名称和背景三个元素。

该组件的图片、功能名称与背景属性的说明，与布尔开关组件一致。

数字滑块

此组件可通过拖动滑块调整数值，适用于连续型参数控制。

数字滑块组件包含图片、功能名称、参数、滑动条和背景五个元素。

该组件的图片、功能名称与背景属性的说明，与布尔开关组件一致。

参数用于显示滑条的当前值：

属性	说明
字体颜色	配置数值的文本颜色。
字体	配置字体类型、大小、字重等。

滑动条相关属性：

属性	说明
滑条	设置整体滑动条的颜色。
滑槽	设置已滑过（当前值左侧）部分的颜色。

数字卡片

此组件以卡片形式展示数字信息。

数字卡片组件包含数字、数字图片、和背景三个元素。

该组件的背景属性的说明，与布尔开关组件一致。

数字相关属性：

属性	说明
颜色	配置数字的文本颜色。
字体	配置字体类型、大小、字重等。

数字图片是指每个数字背后的图片，如果您不希望使用 Aqara Studio 提供的默认图片，单击 + 按钮，即可选择 您在素材库上传的图片或图标。

数字加减

此组件通过加减按钮修改实际设备的数值，操作便捷。

数字加减组件包含图片、功能名称、调节和背景四个元素。

该组件的图片、功能名称与背景属性的说明，与布尔开关组件一致。

调节会显示设备当前数值，并允许用户通过增减按钮改变数值。其可配置属性包括：

属性	说明
尺寸	设置此元素的的整体宽度与高度。
字体	配置数字的字体族、大小、字重等。
字体颜色	配置数值文本颜色。
按钮背景	设置此元素的背景颜色。
描边颜色	设置此元素的描边颜色

数字进度

此组件以进度条的形式展示并设置当前设备的数值。

数字进度组件包含参数、内容样式、按钮、图片、功能名称和背景六个元素。

参数是指当前设备的数值，相关说明与 数字滑块 组件一致。

内容样式是指进度条的样式，相关属性：

属性	说明
样式	设置整体的样式，支持线条、圆形和仪表盘等。
滑条颜色	设置已滑过（当前值左侧）部分的颜色。
轨道颜色	设置整体滑动条的颜色。
粗细	设置进度条的宽度。
半径	当样式为圆形或仪表盘时，通过此值修改它的大小。
描边端点样式	设置进度条两端的样式。

按钮是指增减数值的两个按钮，相关属性如下：

属性	说明
尺寸	按钮的宽和高。
加-位置	“+”按钮的位置。
减-位置	“-”按钮的位置。
填充	按钮的填充颜色。
圆角	按钮的圆角。
描边	按钮的粗细、颜色和类型。
字号	“+”和“-”的字号和颜色。

枚举开关

此组件可用于通过点击按钮切换枚举，适用于枚举型数据。

枚举开关组件包含枚举值、图片、功能名称、按钮文本、按钮背景和背景六个元素。

该组件的图片、功能名称与背景属性的说明，与布尔开关组件一致。

枚举值的数量和具体内容将自动根据已绑定的数据源生成，无需手动添加。您可通过拖拽方式灵活调整其显示顺序。

按钮文本的相关属性：

属性	说明
选中颜色	按钮被选中时文本的颜色。
默认颜色	按钮未被选中时文本的颜色。
字体	可设置字体族、字号和字重。

按钮背景的相关属性：

属性	说明
选中颜色	按钮被选中时的背景颜色。
默认颜色	按钮未被选中时的背景颜色。

枚举图片

此组件通过图片直观展示当前选中的枚举项，仅显示被选中的枚举对应的图片，其它枚举项不会显示。

枚举图片组件包含枚举值、图片、文本和背景四个元素。

该组件的背景属性的说明，与布尔开关组件一致。

枚举值的数量和内容会根据已绑定的数据源自动生成，无需手动添加。同时，您可修改每个枚举项的名称，更换对应的图片，以及拖动调整枚举项的位置。

图片属性用于设置枚举项图片的显示效果，包括宽度、高度和圆角等参数。

文本属性包含颜色、字体族、字号和字重。

枚举图片开关

您可以在此组件上点击不同的图片进行枚举切换。

枚举图片开关组件包含枚举值、图片、文本和背景四个元素。

该组件的背景属性的说明，与布尔开关组件一致。

该组件的图片和文本属性的说明，与枚举图片组件一致。

枚举值的数量和内容会根据已绑定的数据源自动生成，无需手动添加。同时，您可修改每个枚举项的名称，更换选中状态和未选中状态的图片，以及拖动调整枚举项的位置。

枚举选择

此组件支持使用下拉列表切换枚举。

枚举图片开关组件包含枚举值、文本和背景四个元素。

该组件的背景属性的说明，与布尔开关组件一致。

枚举值的数量和内容会根据已绑定的数据源自动生成，无需手动添加。同时，您可修改每个枚举项的名称，以及拖动调整枚举项的位置。

文本属性包含默认颜色、字体族、字号、字重和被选中时的文本颜色。

基础图表

基础图表组件用于将数据以直观、易读的方式呈现于画布中，帮助用户快速洞察设备状态、运行趋势和关键信息。Aqara Studio 支持多种常用图表类型，如折线图、柱状图、雷达图、仪表盘和饼图等，满足不同场景下的数据可视化需求。所有图表组件均支持灵活配置样式、数据源绑定和实时刷新，助力您高效搭建个性化的可视化界面。

为基础图表配置数据

添加基础图表组件后，请按照以下步骤配置真实设备数据：

1. 选中图表组件，在其设置抽屉切换至数据选项卡，。
2. 在数据源类型处选择ord数据查询 (static-history)，点击添加。此时会新增一个 static-history 数据源。
3. 点击编辑数据源按钮，在弹窗内双击所需数据源并点击确定完成绑定。
4. 在设置抽屉中找到周期，选择枚举选项，并设置希望图表展示的数据时间范围（如当天、24小时、昨日等）。

配置完上述数据后，如果图表的默认外观不能很好地展示数据，你可以调整图表的样式。

调整图表样式

您可以在样式选项卡的组件配置部分细致调整图表的外观，配置分为基础配置和高阶配置。

所有图表的基础配置是统一的：可以设置所有文字内容的字体样式，以及提示框和图例文字的字号。

高阶配置则会根据不同图表类型，提供针对性的配置选项：

图表类别	图表类型	高阶可配置内容说明
折线图	基础折线图 折线面积图 阶梯折线图 双轴折线图	样式：自定义全部文字的字体。 标题：设置标题文字、显示与否、位置和字体样式。 提示框：配置鼠标悬停/点击时的数据说明框，包括触发方式和样式。 图例：开关图例显示，调整字体、位置与间距。 坐标轴：X/Y 轴支持显示/隐藏、类型、单位、格式、轴线与网格线等设置。 缩放：可开启区域缩放，方便查看细节。 系列：为每个数据序列（如“数据1”、“数据2”等）定制名称与样式，顺序与数据选项卡一致。
仪表盘	仪表盘	配置：调整仪表盘整体大小和画布位置。 标题：同折线图。 范围：自定义刻度条范围和分段数。 指针：调整指针长度和位置。 轴：设置外轴宽度、主/次刻度样式。 标签：控制主刻度文本的显示、字体与相对位置。 值：配置当前值显示、字体样式和位置。 内部标题：控制仪表内部标题的显示、字体、内容和位置。
雷达图	基础雷达图	标题、提示框、图例：同折线图。 雷达图：可设置雷达图的形状和分割数。 轴：支持轴和网格样式设置。 指示器：自定义每项指标的名称与最大值。 系列：同折线图。
柱状图	基础柱状图 叠加柱状图	配置方式与折线图完全一致。
条形图	基础条形图 叠加条形图	配置方式与折线图完全一致。
散点图	散点图	配置方式与折线图完全一致。
饼图	基础饼图 玫瑰图 环形图	样式、标题、提示框、图例和系列的配置与折线图一致。 极轴：可调整饼图的大小和位置。

表格

表格组件用于在画布中以结构化形式展示各类设备或业务数据，适合用于信息对比、批量呈现、数据明细查看等场景。Aqara Studio 提供数据表格和告警表格，支持您灵活配置显示内容和样式，实现数据的高效管理和可视化。

本节将介绍各类表格组件的配置，帮助您根据实际业务需求快速完成数据表格的搭建。

数据表格

数据表格组件可用于展示静态数据，具体配置步骤如下：

1. 选中数据表格组件，进入设备抽屉，切换至数据选项卡。
2. 编辑自定义表格数据。在弹窗中添加或删除表格的行与列，自由编辑每个单元格的内容。
3. 编辑完成后，点击确认，即可在画布上实时预览表格效果。

告警表格

告警表格组件是用于展示 Aqara Studio 告警数据的组件，即拖即用，无需额外配置或绑定数据，用户就能在这个表格查看告警时间、告警 ID、告警源状态等信息。用户可以直接查看和监控告警情况，便于快速定位和处理异常，提升系统运维效率。

如需在表格中展示更多告警信息（如告警确认用户、确认状态等），请按以下步骤操作：

1. 选中告警表格组件，进入设备抽屉，切换到数据选项卡。
2. 点击表格设置 > 列配置的按钮。
3. 在弹窗中点击添加列，底部会新增一行列信息。此时可为新列命名，选择数据类型为 Basic column，并绑定所需的数据源。
4. 配置完成后，点击确定，即可成功为告警表格添加新列并绑定相应数据。

通用表格配置

数据表格和告警表格的 表格设置 均支持以下数据项配置：

属性	说明
过滤属性	针对不同的数据设置过滤规则。
功能设置	调整表格的交互、布局和样式。
周期	配置表格中所展示数据的时间范围（如：当天、24小时、最近7天等）。
限制	设置表格最多展示的行数。
排序	配置数据的升序或降序显示方式。
自动刷新	是否定时自动刷新表格数据。
刷新间隔	启用自动刷新后，定义刷新时间间隔。

媒体

媒体组件用于在大屏中展示丰富的多媒体内容，目前主要包括视频播放器。通过媒体组件，您可以在界面中嵌入外部视频，支持多种主流视频格式，增强大屏的展示效果和互动性。配置时可灵活设置视频来源，以满足不同场景下的多媒体展示需求。

视频播放器

该组件支持在大屏上播放外部视频，配置方式如下：

1. 单击该组件，进入设备抽屉，切换到数据选项卡。
2. 选择类型为自定义，在自定义数据传入外部视频的 URL（需符合以下要求）。
   提示

   视频 URL 需满足以下要求：

   • 可直接访问：URL 必须直接指向视频文件本身（仅支持 .mp4、.flv 和 .m3u8 格式），确保资源可通过公网直接获取，不支持视频网站如优酷、腾讯视频等的页面地址。
   • 协议一致性：如大屏访问为 HTTPS，视频 URL 也需为 HTTPS，避免因协议不一致产生的混合内容问题。
   • 跨域设置：如视频存储在第三方服务器，请确保已设置允许跨域访问（CORS），否则播放器可能无法正常播放视频。
   • 播放流畅：建议视频文件大小适中、码率合理，以保障播放流畅，提升用户体验。
3. 切换到样式选项卡，根据视频资源的格式，设置与之匹配的视频模式，以确保视频能够正常播放和最佳显示效果。

其他

除了上述类型的组件外，Aqara Studio 还提供了一些用于丰富大屏功能的扩展组件，包含下拉框和时间器。

下拉框

下拉框组件为大屏提供便捷的下拉菜单，用户可通过选择不同选项，实现跳转访问指定外部网页，灵活满足页面联动和多样化扩展需求。

添加下拉框组件后，按以下流程完成 URL 配置：

1. 选中组件，进入设备抽屉，切换到数据选项卡。
2. 在标签配置中点击**+**按钮，为下拉框新增一个选项卡。
3. 展开该选项卡，可自定义名称、配置 URL，并选择 URL 打开方式。
4. 如需添加更多选项卡，按上述步骤继续操作即可。

时间器

时间器组件可用于在大屏上实时显示当前时间，增强信息的时效性和可读性。

添加时间器组件后，可按照如下步骤设置时间显示格式：

1. 选中时间器组件，进入设备抽屉，切换至样式选项卡。
2. 在时间器 > 格式处，选择您所需的时间格式（例如：yyyy/mm/dd hh:mm），满足不同展示需求。