需要弄一个能发送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);
}
};
});
};
}