thingsboard 自定义静态部件

aliceyang2012

已于 2022-04-25 17:55:17 修改

阅读量734

点赞数

CC 4.0 BY-SA版权

文章标签： javascript

于 2022-04-25 17:54:04 首次发布

本文链接：https://blog.csdn.net/aliceyang2012/article/details/124410747

这个博客介绍了如何在不熟悉Angular的情况下，在HTML、CSS和JS中创建一个发送HTTP请求的组件。HTML部分展示了带有开/关按钮的简单UI，CSS定义了样式，JS部分包含了初始化设置和`deviceControl`函数，该函数根据设备ID和批量设置来构造URL并发送GET请求到指定的服务器地址。此外，还展示了一个JSON配置用于设置组件的参数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需要弄一个能发送http请求的组件，在源代码里捣鼓一圈，但是对angular实在不熟悉，最后还是在平台里创建吧

html:

<div class="cmBtns box">
<h4 id="btnTitle" class="btnTitle">{{labelTitle}}</h4>
<button id="btnOn" ng-click="deviceControl('on')" class="simpleBtn">开</button>
<button id="btnOff" ng-click="deviceControl('off')" class="simpleBtn">关</button>
<video preload="auto" name="media" hidden="true" class="myVideo">
<source src="http://www.szqhhjbj.com/aigei_pao.mp3" type="audio/mpeg">
</video>
</div>

css:

.box {
text-align: center;
}

.simpleBtn {
width: 90%;
padding: 8px 0;
background: #305680;
border-radius: 10px;
border: none;
color:#fff;
margin-bottom: 10px;
}
.simpleBtn:hover,.simpleBtn:active {
background: #4171a7;
}
.btnTitle{margin-top:0;margin-bottom:0; font-size:20px;}

设置模式：

{

"schema": {

"type": "object",
"title": "Settings",
"properties": {
"deviceId":{
"title":"设备id",
"type":"string"
},
"btntype":{
"title":"是否批量(默认否)",
"type":"boolean",
"default":false
},
"labelTitle": {
"title": "标题文字",
"type": "string",
"default": "标题文字"
}
},
"required": ["deviceId"]
},
"form": [
"btntype",
"deviceId",
"labelTitle"
]
}

js:

self.onInit = function() {
var scope = self.ctx.$scope;

self.ctx.$scope.labelTitle = self.ctx.settings.labelTitle || '标题文字';

scope.deviceControl = function(status) {
var baseurl = "http://192.168.1.17:6405/service/code/action";
var url="";
var btnType = self.ctx.settings.btntype;
var deviceId = self.ctx.settings.deviceId;
if (deviceId) {
if (btnType) {
url = baseurl + "/batch?id=" +deviceId + "&cmd=" + status;
} else {
url = baseurl + "/single?id=" +deviceId + "&cmd=" + status;
}
}
$('.myVideo')[0].load();
$('.myVideo')[0].play();

var xhr = new XMLHttpRequest();

       xhr.open('GET',url,true);
       xhr.send(null);
       //return promise
       return new Promise(function (resolve, reject) {
           //onload are executed just after the sync request is comple，
           //please use 'onreadystatechange' if need support IE9-
           xhr.onload = function () {
               if (xhr.status === 200) {
                   var result;
                   try {
                       result = JSON.parse(xhr.response);
                   } catch (e) {
                       result = xhr.response;
                   }
                   resolve(result);
               } else {
                   reject(xhr.response);
               }
           };

       });

};

}