/**
* 说明：
* 通过CORS解决跨域问题
* 并将数据挂接到物体（car01）身上，与panel面板进行数据绑定
* 当温度>25℃时 car01变红
* 教程：ThingJS教程——>数据对接——>Ajax对接
* 难度：★★☆☆☆
*/
var app = new THING.App({
url: 'https://www.thingjs.com/static/models/storehouse'
});
// 定时器
var timer;
app.on('load', function () {
var car = app.query('car01')[0];
// 物体身上创建monitorData对象 用于存储动态监控数据
car.monitorData = {
'温度': ''
};
updateData(car);
createPanel(car);
})
/** ******************* 以下为ajax数据对接 ********************/
// 服务器程序端 通过设置 Access-Control-Allow-Origin 解决跨域问题
// 更多关于 CORS "跨域资源共享"（Cross-origin resource sharing）的技术细节 请自行搜索
// 请求传入参数为 { "id": id }
// 服务器返回的数据格式为 {"state":"success","data":{"id":"4967","temper":"15℃","humi":"59%","power":"20kWh"}}
function updateData(obj) {
// 如果网站是 https 接口则对应 https 请求
// 如果网站是 http 接口则对应 http 请求即可
$.ajax({
type: "get",
url: "https://3dmmd.cn/getMonitorDataById",
data: { "id": obj.id },
dataType: "json", // 返回的数据类型 json
success: function (d) {
console.log(d);
var temper = d.data.temper;
// 设置物体身上的监控数据
obj.setAttribute("monitorData/温度", temper);
changeColor(obj);
// 每隔3s 请求一次数据
timer = setTimeout(function () {
updateData(obj)
}, 3000);
}
});
}
// 停止请求数据
function stopUpdate() {
clearTimeout(timer);
}
function createPanel(obj) {
// 界面组件
var panel = new THING.widget.Panel({
titleText: 'car01温度',
hasTitle: true
});
var monitorControl = panel.addBoolean({ 'isOpen': true }, "isOpen").caption("监控开关");
// 将物体的monitor对象中的数据 与 panel 进行绑定
panel.add(obj.monitorData, '温度').name('温度');
monitorControl.on('change', function (ev) {
if (ev) {
updateData(obj);
}
else {
stopUpdate();
}
})
}
// 如果温度>25 改变颜色
function changeColor(obj) {
var temper = obj.getAttribute("monitorData/温度");
var value = temper.substr(0, temper.indexOf("℃"));
if (value > 25) {
obj.style.color = 'rgb(255,0,0)';
}
else {
obj.style.color = null;
}
}
4725
0
