可视化应用数据接口部署问题看这里

回复

　　一个可视化应用通过程序高手们开发之后肯定是要使用起来的，这就涉及到了数据接口的问题，今天有人问如果后台处理数据也是java写的，能打包成jar文件，直接放到离线版的system lib目录下吗?

　　thingjs技术支持不建议大家这样做哈~

　　ThingJS的离线部署包目前而言，需要单独运行，不要在该服务器上手工修改东西。

ThingJS API参考手册了解一下https://www.thingjs.com/guide/cn/apidocs/index.html

/**
 * 说明：
 * 通过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;
    }
}

[分享] 可视化应用数据接口部署问题看这里

可视化应用数据接口部署问题看这里

相关帖子