开发自定义组件
允许开发者用户在云平台上开发自定义的组件
最后更新于
这有帮助吗？
组件库的维护需要掌握前端开发js基础语法，进行前端模板的开发与集成，组件库的完善性，将提高设备数据可视化效果，为方便客户自定义组件效果，平台集成在线IDE环境，所有组件在IOT平台都可在线的开发与调试程序效果。
所有与窗口小部件相关的代码都位于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()
重新描述描述用于定义用户操作的可用窗口小部件操作源的对象。
一组API函数，用于处理用户定义的操作。
Function函数
描述
getActionDescriptors(actionSourceId)
返回提供的actionSourceId的操作描述符列表
handleWidgetAction($event, descriptor, entityId, entityName)
处理特定动作源产生的动作。$ event - 与action，descriptor - action descriptor，entityId和entityName相关联的事件对象- 当前实体id和动作源提供的名称（如果可用）。
根据提供的功能，每个窗口小部件定义表示特定窗口小部件类型,目前有五种小部件类型：最新值,时间序列,RPC（控件小部件）,报警小工具,静态的。
每种小部件类型都有自己的特定数据源配置和相应的小部件API。每个小部件都需要数据源来进行数据可视化。可用数据源的类型取决于窗口小部件的窗口小部件类型：
目标设备 - 此数据源类型用于RPC。基本上，您需要为RPC小部件指定目标设备
警报源 - 此数据源类型用于警报窗口小部件。该数据源要求源实体显示相关的警报和相应的警报字段。
实体 - 此数据源类型用于时间序列和最新值窗口小部件。基本上，您需要指定目标实体和时间序列键或属性名称。
函数 - 此数据源类型用于时间序列和最新值小部件以用于调试目的。基本上，您可以指定一个javascript函数，该函数将模拟设备中的数据以调整可视化。
最简单的调试方法是Web控制台输出。只需将函数放在widget JavaScript代码的任何部分中。然后单击“运行”按钮以重新启动小部件代码并在Web控制台中观察调试信息。
