Thingsboard二次开发系列拷贝篇10widget（03创建简单的小部件）

　　素材和版本
　　tb-release：3.2.2小部件（Widget类型）
　　最新值小部件
　　在 Widgets Bundle视图中，单击屏幕右下角的大＂+＂按钮，然后单击＂创建新的小部件类型＂按钮。 单击 选择小部件类型弹出 窗口上 的  最新值按钮 。 该 控件编辑器将打开，预先填充默认的内容 最新值小部件模板。
　　清除＂资源＂部分 CSS 选项卡的内容。
　　将以下 HTML 代码放在＂资源＂部分的 HTML 选项卡中：        My first latest values widget.              {{dataKeyData.dataKey.label}}:         {{(dataKeyData.data[0] && dataKeyData.data[0][0]) | date : ＂yyyy-MM-dd HH:mm:ss＂ }}         {{dataKeyData.data[0] && dataKeyData.data[0][1]}}        
　　将以下 JavaScript 代码放入＂JavaScript＂部分：     self.onInit = function() {        self.ctx.$scope.data = self.ctx.defaultSubscription.data;     }              self.onDataUpdated = function() {         self.ctx.detectChanges();     }
　　单击 小部件编辑器工具栏上 的  运行按钮 ，以便在 小部件预览部分 查看结果 。
　　在这个例子中，订阅的数据属性被分配给$scope并且可以在 HTML 模板中访问。在 HTML 中，使用特殊的*ngFor结构角度指令来迭代可用的数据键和数据点，然后使用相应的时间戳呈现最新值。
　　时间序列小部件
　　在  Widgets Bundle视图中，单击屏幕右下角的大＂+＂按钮，然后单击＂创建新的小部件类型＂按钮。 单击 选择小部件类型弹出 窗口上 的  时间序列按钮 。 该 控件编辑器将打开，预先填充默认 时间序列模板控件的内容。
　　将＂资源＂部分中 CSS 选项卡的内容替换为以下内容： .my-data-table th {     text-align: left;}
　　将以下 HTML 代码放在＂资源＂部分的 HTML 选项卡中：                                                                              Timestamp                       {{dataKeyData.dataKey.label}}                                                                                                     {{data[0] | date : ＂yyyy-MM-dd HH:mm:ss＂}}                       {{dataKeyData.data[$dataIndex] && dataKeyData.data[$dataIndex][1]}}                                                                                        
　　将以下 JavaScript 代码放入＂JavaScript＂部分： self.onInit = function() {     self.ctx.widgetTitle = ＂My first Time-Series widget＂;     self.ctx.$scope.datasources = self.ctx.defaultSubscription.datasources;     self.ctx.$scope.data = self.ctx.defaultSubscription.data;          self.ctx.$scope.datasourceData = [];          var currentDatasource = null;     var currentDatasourceIndex = -1;          for (var i=0;i　　3.my-alarm-table th {
　　text-align: left;}
　　将以下 HTML 代码放在＂资源＂部分的 HTML 选项卡中：
　　My first Alarm widget.
　　{{dataKey.label}}
　　[ngStyle]=＂getAlarmCellStyle(alarm, dataKey)＂>
　　{{getAlarmValue(alarm, dataKey)}}
　　将以下 JSON 内容放在设置架构部分的＂设置架构＂选项卡中：{
　　＂schema＂: {
　　＂type＂: ＂object＂,
　　＂title＂: ＂AlarmTableSettings＂,
　　＂properties＂: {
　　＂alarmSeverityColorFunction＂: {
　　＂title＂: ＂Alarm severity color function: f(severity)＂,
　　＂type＂: ＂string＂,
　　＂default＂: ＂if(severity == ＂CRITICAL＂) {return ＂red＂;} else if (severity == ＂MAJOR＂) {return ＂orange＂;} else return ＂green＂; ＂
　　}
　　},
　　＂required＂: []
　　},
　　＂form＂: [
　　{
　　＂key＂: ＂alarmSeverityColorFunction＂,
　　＂type＂: ＂javascript＂
　　}
　　]}
　　将以下 JavaScript 代码放入＂JavaScript＂部分：self.onInit = function() {
　　var pageLink = self.ctx.pageLink();
　　pageLink.typeList = self.ctx.widgetConfig.alarmTypeList;
　　pageLink.statusList = self.ctx.widgetConfig.alarmStatusList;
　　pageLink.severityList = self.ctx.widgetConfig.alarmSeverityList;
　　pageLink.searchPropagatedAlarms = self.ctx.widgetConfig.searchPropagatedAlarms;
　　self.ctx.defaultSubscription.subscribeForAlarms(pageLink, null);
　　self.ctx.$scope.alarmSource = self.ctx.defaultSubscription.alarmSource;
　　var alarmSeverityColorFunctionBody = self.ctx.settings.alarmSeverityColorFunction;
　　if (typeof alarmSeverityColorFunctionBody === ＂undefined＂ || !alarmSeverityColorFunctionBody.length) {
　　alarmSeverityColorFunctionBody = ＂if(severity == ＂CRITICAL＂) {return ＂red＂;} else if (severity == ＂MAJOR＂) {return ＂orange＂;} else return ＂green＂;＂;
　　}
　　var alarmSeverityColorFunction = null;
　　try {
　　alarmSeverityColorFunction = new Function(＂severity＂, alarmSeverityColorFunctionBody);
　　} catch (e) {
　　alarmSeverityColorFunction = null;
　　}
　　self.ctx.$scope.getAlarmValue = function(alarm, dataKey) {
　　var alarmKey = dataKey.name;
　　if (alarmKey === ＂originator＂) {
　　alarmKey = ＂originatorName＂;
　　}
　　var value = alarm[alarmKey];
　　if (alarmKey === ＂createdTime＂) {
　　return self.ctx.date.transform(value, ＂yyyy-MM-dd HH:mm:ss＂);
　　} else {
　　return value;
　　}
　　}
　　self.ctx.$scope.getAlarmCellStyle = function(alarm, dataKey) {
　　var alarmKey = dataKey.name;
　　if (alarmKey === ＂severity＂ && alarmSeverityColorFunction) {
　　var severity = alarm[alarmKey];
　　var color = alarmSeverityColorFunction(severity);
　　return {
　　color: color
　　};
　　}
　　return {};
　　}}self.onDataUpdated = function() {
　　self.ctx.$scope.alarms = self.ctx.defaultSubscription.alarms.data;
　　self.ctx.detectChanges();}
　　单击小部件编辑器工具栏上的运行按钮，以便在小部件预览部分查看结果。
　　在这个例子中，订阅的alarmSource和alarms属性被分配给$scope并且可以在 HTML 模板中访问。在 HTML 中，使用了一个特殊的*ngFor结构角度指令，以便迭代alarmSource的可用警报dataKeys并呈现相应的列。表格行通过迭代警报数组呈现，相应的单元格通过迭代dataKeys呈现。该功能getAlarmValue被取报警值和格式化createdTime使用报警属性DatePipe可通过ctx 的date属性访问角管。函数getAlarmCellStyle用于为每个警报单元格分配自定义单元格样式。在此示例中，我们引入了名为alarmSeverityColorFunction 的新设置属性，其中包含根据警报严重性返回颜色的函数体。在getAlarmCellStyle函数中，有相应的调用带有严重性值的alarmSeverityColorFunction以获取警报严重性单元格的颜色。请注意，在此代码中实现了onDataUpdated函数，以便使用来自订阅的最新警报更新警报属性并使用调用更改检测检测更改（）函数。