> 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函数，该函数将模拟设备中的数据以调整可视化。


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://doc.yuncitys.com/guan-li-jie-mian/yi-biao-zu-jian/kai-fa-zi-ding-yi-zu-jian.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.