ThingsX 设备面板：组件式面板 vs 整体面板

ThingsCloud 提供了开箱即用的用户应用通用版 ThingsX。用户登录 ThingsX 后，可以看到自己关联的一个或多个设备，点击设备后进入设备详情页面，这个页面也称为设备面板。

每个设备类型都有自己独立的设备面板，也就是说，同一类设备拥有同样的设备面板，您不需要为每个设备重复编辑设备面板。

因此，用户在 ThingsX 中看到的每个设备面板，是由设备所属设备类型决定的，通过编辑设备类型的设备面板，就可以为用户展示各种不同的设备面板。

如何编辑设备面板？

设备面板是可编辑的，您可以在控制台中，进入任意设备类型的详情页面，在应用配置中可以看到设备面板编辑器的入口，如下图：

进入设备面板编辑器，如下图：

您可以在线编辑设备面板的布局和样式，并选择设备实际数据进行效果预览，完成编辑后点击保存，保存后的设备面板在 ThingsX 上立即生效。

设备面板的类型

设备面板支持以下两种类型：

• 组件式面板（Widget-based Panel）：通过拖放和编排平台提供的各种组件，自由设计面板布局，设置样式。适合希望通过自主设计，实现个性化需求的场景。组件式面板的效果如下图：
• 整体面板（Templated Panel）：平台提供专用的面板布局和样式，界面相对固定，您可以快速选择，直接下载使用。适合希望快速部署或更高定制化的场景。整体面板的效果如下图：

那么，如何选择适合您的面板类型呢？

首先，组件式面板是 ThingsX 的核心优势，由于物联网应用场景的超个性化和快速迭代特性，不同设备有不同的界面需求，甚至同类设备有时也存在差异，能够根据实际需求来自主可视化编辑面板，无需编写程序或投入开发费用，就能快速获得与应用场景匹配的设备面板，并且可以随着项目过程不断修改完善，这为物联网项目落地提供了非常关键的生产力。

另一方面，对于功能相对简单而且成熟的设备，如果您希望直接使用整体性更强的面板风格，或需要高度定制私有面板，整体面板提供了更多的可能性，只需要一键下载，而且支持高度个性化的定制开发。

以下是两种面板的多维度对比，供您参考。

使用组件式面板

添加组件

使用组件式面板时，您可在左侧选择适合的组件，点击“添加组件”，即可将组件放置在设备面板中，如下图：

在设备面板中，选中添加的组件，在右侧可对组件进行各种设置。对于大多数组件，首先要选择关联的设备属性。这里我们选中的是一个开关控制组件，点击右侧的“选择属性”，如下图：

可以看到，在属性选择器中列出的，都是在设备类型的功能定义中已添加的属性，它们有不同的数据类型和属性类型，不同组件对可选的属性的数据类型和属性类型有一定的要求，不符合要求时，属性在选择器中是灰色不可选的状态。您可以选择一个或多个属性，可选的属性数量上限，因组件而异。

对于这里的开关控制组件，只可以选择数据类型为开关量的属性，并且属性支持下发或云端更新，因此，属性类型必须是云端下发、设备云端共享、云端私有这三种之一。对于不符合条件的属性，会显示灰色无法选择。

对于已选择的属性，可以点击属性右侧的箭头，展开属性的选项设置。如下图：

请注意，为组件选择多个属性时，可以分别为每个属性设置不同的样式选项。

面板全局样式

未选中任何组件时，右侧显示面板全局设置。

您可以设置面板的背景色，支持纯色和渐变色背景，如下图：

还可以设置面板的背景底图和背景装饰图，如下图：

管理分页

在全局设置中，还可以创建多个分页，并设置顶部分页栏的可见性和样式，如下图：

除了使用顶部分页栏来切换分页，您还可以在面板中放置分页跳转组件，来实现更加个性化的分页切换功能，如下图：

组件库

目前支持的组件类别包括：

• 数值展示
• 历史数据
• 开关状态
• 文字展示
• 开关控制
• 数值控制
• 多状态控制
• 日期时间控制
• 色彩控制
• 位置地图
• 属性下发
• 命令下发
• 任务运行
• 布局组件
• 跳转组件

ThingsCloud 将持续推出更多的组件，帮助您快速开发适用于各种场景的物联网 App 应用。

组件式面板共享

对于搭建好的组件式面板，可以通过设备类型发布功能，将组件式面板进行模板化，在同项目或其它项目中一键导入。详情请浏览 发布设备类型。

教程&示例

• 为 Modbus 子设备生成 App 界面 🎦
• App 设备面板如何添加多个分页？
• 在App中添加电表历史周期统计组件
• 继电器App零代码开发示例（一）| 显示开关量输入状态和继电器开关
• 继电器App零代码开发示例（二）| 调整配色方案，使用深色主题
• 继电器App零代码开发示例（三）| 展示组件太多？来试试分页组件
• 继电器App零代码开发示例（四）| 展示继电器开关历史
• 继电器App零代码开发示例（五）| 在App中体验最终效果
• App设备面板使用个性化渐变色
• 编辑你喜欢的App主题色
• ThingsX App 组件升级：文字段落、单图、多图，布局设计更加得心应手
• ThingsX App 如何上传自定义背景图？
• 用 ThingsX 跳转组件，实现个性化分页导航
• 熟悉App日期时间控制组件
• 不写一行代码，为 App 添加设备地图组件
• 助力设备出海，ThingsX 全面支持 Google Map 地图组件

使用整体面板

获取整体面板

整体面板目前支持以下的获取方式：

面板市场

面板市场提供公开的整体面板，供您下载直接使用。这些整体面板由 ThingsCloud 以及应用合作伙伴开发和维护，其中大部分面板在付费版项目中可直接使用，也会包含需要单独付费的面板。

ThingsCloud 将携手应用合作伙伴，持续推出更多整体面板。

定制面板

针对有特殊需求或高定制化需求的客户，可购买定制面板开发服务，获得专用的设备面板。

定制面板不会在面板市场中公开，仅在您授权的项目中可用。一旦购买定制面板，您可以将定制面板共享授权给多个项目，或授权给客户以及合作伙伴的项目。

如需购买定制面板开发服务，可联系我们的技术支持。

下载和配置面板

整体面板使用非常简单，您只需点击左侧面板的“下载预览”，然后稍等片刻，便可以看到加载后的整体面板效果。

在右侧的设置区域，您可以设置面板中的属性绑定关系，以便和您的设备类型匹配，您也可以使用面板的默认属性标识符。

由于整体面板已经提供了成熟的整体布局、样式和风格，通常不支持丰富的样式选项，不过同样支持局部样式的配置能力，具体因面板而异，例如：

快来试试吧，我们期待您的反馈和建议。

物联网设备接入 ThingsCloud ，请参考 设备接入指南。