> For the complete documentation index, see [llms.txt](https://doc.yuncitys.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://doc.yuncitys.com/guan-li-jie-mian/yi-biao-zu-jian/kai-fa-zi-ding-yi-zu-jian.md).

# 开发自定义组件

![](/files/-MK4KibmO-uUXo9bPrFc)

### **组件库的集成（开发人员）**

组件库的维护需要掌握前端开发js基础语法，进行前端模板的开发与集成，组件库的完善性，将提高设备数据可视化效果，为方便客户自定义组件效果，平台集成在线IDE环境，所有组件在IOT平台都可在线的开发与调试程序效果。

### **基本小组件JS API**

所有与窗口小部件相关的代码都位于JavaScript部分。作为对小部件实例的引用的内置变量self也是可用的。应将每个窗口小部件函数定义为自变量的属性。 

自变量具有属性ctx - 对窗口小部件上下文的引用，其具有窗口小部件实例使用的所有必需的API和数据。

以下是窗口小部件上下文属性的简要说明

| **Property**        | **Type**      | **js函数**                                            |
| ------------------- | ------------- | --------------------------------------------------- |
| $container          | jQuery Object | 小部件的容器元素。可用于使用jQuery API动态访问或修改窗口小部件DOM。            |
| $scope              | Object        | 当前窗口小部件元素的角度范围对象。使用Angular方法构建窗口小部件时，可用于访问/修改范围属性。  |
| width               | Number        | widget容器的当前宽度（以像素为单位）                               |
| height              | Number        | 窗口小部件容器的当前高度，以像素                                    |
| isEdit              | Boolean       | 指示仪表板是处于视图还是编辑状态。                                   |
| isMobile            | Boolean       | 指示仪表板视图是否小于960px宽度（默认移动断点）。                         |
| widgetConfig        | Object        | 包含颜色（文本颜色），backgroundColor（窗口小部件背景颜色）等属性的常用窗口小部件配置。 |
| settings            | Object        | 根据定义的设置json模式包含小部件特定属性的小组件设置                        |
| units               | String        | 可选属性定义单元格显示的值的文本。适用于简单的小部件，如卡片或仪表。                  |
| decimals            | Number        | 可选属性，用于定义应使用多少个位置来显示值编号的小数部分。                       |
| hideTitlePanel      | Boolean       | 管理小部件标题面板的可见性。适用于具有自定义标题面板或不同状态的小部件。                |
| defaultSubscription | Object        | 请参阅订阅对象                                             |
| timewindowFunctions | Object        | 请参阅Timewindow功能                                     |
| controlApi          | Object        | 请参阅Control API                                      |
| actionsApi          | Object        | 请参阅Actions API                                      |
| stateController     | Object        | 见状态控制器                                              |

为了实现新的小部件，应该定义以下JavaScript函数（注意：每个函数都是可选的，可以根据小部件特定/行为来实现）：

![](/files/-MK3cznZJzBn4KwyddeK)

| **Function函数**             | **描述**                                                              |
| -------------------------- | ------------------------------------------------------------------- |
| onInit()                   | 当widget准备好初始化时调用的第一个函数。应该用于准备小部件DOM，处理小部件设置和初始订阅信息。                 |
| onDataUpdated()            | 在窗口小部件订阅中提供新数据时调用。可以从窗口小部件上下文（**ctx**）的defaultSubscription对象访问最新数据。 |
| onResize()                 | 调整窗口小部件容器的大小时调用。最新的宽度和高度可以从窗口小部件上下文（**ctx**）获得。                     |
| onEditModeChanged()        | 更改仪表板编辑模式时调用。最新模式由**ctx**的isEdit属性处理。                               |
| onMobileModeChanged()      | 仪表板视图宽度越过移动断点时调用。最新状态由**ctx**的isMobile属性处理。                         |
| onDestroy()                | 在widget元素被销毁时调用。如有必要，应该用于清理所有资源。                                    |
| getSettingsSchema()        | 可选函数返回窗口小部件设置架构json，作为Settings schema部分的**Settings选项卡**的替代。         |
| getDataKeySettingsSchema() | 可选函数返回特定数据键设置架构json，作为“设置架构”部分的“ **数据键设置架构”**选项卡的替代。         |
| typeParameters()           | 重新描述描述窗口小部件数据源参数的对象。请参见类型参数对象。                                      |
| actionSources()            | 重新描述描述用于定义用户操作的可用窗口小部件操作源的对象。                                       |

### **动作JS API**

一组API函数，用于处理用户定义的操作。

| **Function函数**                                               | **描述**                                                                                                            |
| ------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------- |
| getActionDescriptors(actionSourceId)                         | 返回提供的actionSourceId的操作描述符列表                                                                                       |
| handleWidgetAction($event, descriptor, entityId, entityName) | 处理特定动作源产生的动作。$ event - 与action，descriptor - action descriptor，entityId和entityName相关联的事件对象- 当前实体id和动作源提供的名称（如果可用）。 |

### **小部件代码调试技巧**

最简单的调试方法是Web控制台输出。只需将[console.log（...）](https://developer.mozilla.org/en-US/docs/Web/API/Console/log)函数放在widget JavaScript代码的任何部分中。然后单击“运行”按钮以重新启动小部件代码并在Web控制台中观察调试信息。

###  **窗口小部件类型**

根据提供的功能，每个窗口小部件定义表示特定窗口小部件类型,目前有五种小部件类型：**最新值,时间序列,RPC（控件小部件）,报警小工具,静态的。**

每种小部件类型都有自己的特定数据源配置和相应的小部件API。每个小部件都需要数据源来进行数据可视化。可用数据源的类型取决于窗口小部件的窗口小部件类型：

**目标设备** - 此数据源类型用于RPC。基本上，您需要为RPC小部件指定目标设备

**警报源** - 此数据源类型用于警报窗口小部件。该数据源要求源实体显示相关的警报和相应的警报字段。

**实体** - 此数据源类型用于时间序列和最新值窗口小部件。基本上，您需要指定目标实体和时间序列键或属性名称。

**函数** - 此数据源类型用于时间序列和最新值小部件以用于调试目的。基本上，您可以指定一个javascript函数，该函数将模拟设备中的数据以调整可视化。