开发自定义组件

允许开发者用户在云平台上开发自定义的组件

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

组件库的维护需要掌握前端开发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函数（注意：每个函数都是可选的，可以根据小部件特定/行为来实现）：

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（...）函数放在widget JavaScript代码的任何部分中。然后单击“运行”按钮以重新启动小部件代码并在Web控制台中观察调试信息。

窗口小部件类型

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

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

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

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

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

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