前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >智慧园区可视化应用数据源接口问题

智慧园区可视化应用数据源接口问题

原创
作者头像
要不要吃火锅
修改于 2019-12-25 10:45:58
修改于 2019-12-25 10:45:58
1.1K02
代码可运行
举报
文章被收录于专栏:3D可视化3D可视化
运行总次数:2
代码可运行

DIX系统

此处 DIX 使用仅限于在 CamBuilder 中

DIX介绍

DIX是CamBuilder中用于实时对接入数据进行处理后输出到指定目的地的系统。可以用来接入Mysql、ActiveMq,syslog等数据源中存储的数据,可以在接入这些数据源存储的数据后,利用DIX对数据进行简单处理后,输出到指定的数据源,目前支持MySql、ActiveMq等。

通过访问DIX服务器进入dip配置页面,选择JavaScript,点击立即接入按钮之后进入了dip的配置页面,在该页面进行dip的属性配置、脚本配置。

配置完成上述信息之后,点击完成并保存,一个dip便生成了,然后回到数据集成页面找到对应的dip,启动即可。

数据接入

接收MySQL数据

点击JavaScript,进入配置页面,在1处填入dip名字,2处的地址为宿主机地址,默认为dip系统部署机器地址, 点击下一步,填写脚本配置。

dip名称:使用英文且见名知义(最好使用驼峰命名法)。

dip的宿主机:运行该dip的服务器ip地址,也是我们的数据处理服务器。

进入如下界面,在黑窗口的run函数中编写JavaScript脚本,将获取到的数据转换成产品需要的数据结构,最后输出。

首先编写脚本获取数据,获取数据有2种方式,第一种是主动获取,第二种是被动接收,根据实际情况选择对应的获取数据方式。而每一种方式又有多种类型。

对接MySQL我们选择主动获取方式,点击输入-主动获取,选择第一项MySQL ,相应的接入MySQL的代码会自动填写在function run() 里面 ,in 为接入语句,executes为数据处理逻辑,outs处填写数据输出语句。

如下图,在1处添加接入MySQL数据源url,username,password,在2处添加查询简单的查询sql语句,查询自己需要的数据。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function run() {
    var MysqlJdbcAdapter = Java.type("com.uinnova.di.dicom.jdbc.MysqlJdbcAdapter");
    while (true) {
        try {
        var adapter = new MysqlJdbcAdapter("jdbc:mysql://127.0.0.1:3306/database?useUnicode=true&characterEncoding=UTF-8", "root", "root");
        var data = adapter.getDataByTable("select * from ...");
        heartBeat.addInCount(data.size());
        //executes...
        //outs...
        sleep(60000);
        } catch (error) {
        logger.error("脚本执行错误:",error);
        }
    }
} 
接收ActiveMq数据

点击JavaScript,进入配置页面,在1处填入dip名字,2处的地址为宿主机地址,默认为dip系统部署机器地址, 点击下一步,填写脚本配置。

dip名称:使用英文且见名知义(最好使用驼峰命名法)。

dip的宿主机:运行该dip的服务器ip地址,也是我们的数据处理服务器。

进入如下界面,点击输入-被动接受,选择第一项 ,相应的接入ActiveMq 的代码会自动填写在function run() 里面 in 为接入语句,executes为数据处理逻辑,outs处填写数据输出语句。

如下图,在1处依次填入ActiveMq数据源的url,queue,username,pasword,最后一个参数为true,表示接受queue,为false表示接受topic,

URL: MQ的地址,格式为tcp://${ip}:${port},例如tcp://192.168.10.44:61616

对列名queue: 产品接收的指定队列noah_perfs.

用户名username: admin

密码password: admin

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function run() {
    var ActivemqReceiver = Java.type("com.uinnova.di.dip.base.receiver.ActivemqReceiver");
    //url, queue, username, password, queue(true) or topic(false)
    var receiver = new ActivemqReceiver("tcp://127.0.0.1:61616", "queue", "admin", "admin", true);
    startReceiver(receiver);
    while (true) {
        try {
        var data = receiver.getData();
        if (data!=null) {
            heartBeat.addInCount(1);
            //executes...
            //outs...
        }
        } catch (error) {
        logger.error("脚本执行错误:",error);
        }
    }
} 
接收Syslog数据

点击JavaScript,进入配置页面,在1处填入dip名字,2处的地址为宿主机地址,默认为dip系统部署机器地址, 点击下一步,填写脚本配置。

dip名称:使用英文且见名知义(最好使用驼峰命名法)。

dip的宿主机:运行该dip的服务器ip地址,也是我们的数据处理服务器。

进入如下界面,在1处点击输入-被动接受,选择第一项 ,相应的接入Syslog 的代码会自动填写在function run() 里面 in 为接入语句,executes为数据处理逻辑,outs处填写数据输出语句。

IN配置是指接收syslog告警数据必须的一些信息,根据具体的需求调研填写

依次填入Syslog数据源的url,port,protocal,

主机url:部署DIP服务端程序的主机IP

端口port:与第三方厂商syslog确认的syslog数据推送端口,建议填写大于1600的未被其他服务占用的端口,

协议protocal:与第三方厂商syslog确认进行syslog数据传输协议,可选UDP或TCP

接入syslog数据库

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function run() {
    var SyslogReceiver = Java.type("com.uinnova.di.dip.base.receiver.SyslogReceiver");
    //host, port, protocol(TCP or UDP)
    var receiver = new SyslogReceiver("0.0.0.0", 1501, "UDP");
    startReceiver(receiver);
    while (true) {
        try {
        var data = receiver.getData();
        logger.info("[原始数据]" + data);
        if (data != null) {
            heartBeat.addInCount(1);
            //executes...
            //outs...
        }
        } catch (error) {
        logger.error("脚本执行错误:", error);
        }
    }
} 

数据处理

处理MySQL数据

我们可以取出MySQL中的数据进行处理,将他们转为我们需要的格式,在进行输出。

在编写脚本数据转换的时候可以点击数据处理, 就会出现如下图所示的子菜单,可以根据接收到的数据类型(告警/性能)选择对应的菜单,脚本框中会出现对应的模板代码,如下图所示。

以JavaScript处理接入MySQL为例,准备数据接入。

样例数据:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
[
    {
        "id": "1",
        "sceneid": "20170109153114611633853",
        "kpi_key": "temperature",
        "kpi_value": "253"
    }
] 

如下图,1处接入MySQL数据,2处对数据进行处理,可以参考下面数据处理中的性能数据映射代码,3处把处理后的数据同样输出到另外一个MySQL中去,对其他数据源的处理可以参照此处进行处理。

数据处理后,输出到MySQL数据。

DIP代码参考如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function run() {
var MysqlJdbcAdapter = Java.type(
    "com.uinnova.di.dicom.jdbc.MysqlJdbcAdapter"
);
while (true) {
    try {
    var adapter = new MysqlJdbcAdapter(
        "jdbc:mysql://192.168.137.128:3306/inputDB?useUnicode=true&characterEncoding=UTF-8",
        "root",
        "root"
    );
    var data = adapter.getDataByTable(
        "SELECT id,sceneid,kpi_key,kpi_value FROM c_in"
    );
    heartBeat.addInCount(data.size());
    //executes...
    //var javaListData = json2JavaList(data);
    var list = new Array();
    for (var i = 0; i < data.size(); i++) {
        var obj = new Object();
        var temp = data.get(i);
        obj.id = temp.get("id");
        obj.sceneid = temp.get("sceneid");
        obj.kpi_key = temp.get("kpi_key");
        obj.kpi_value = temp.get("kpi_value");
        logger.info("obj处理后数据" + obj.toString());
        list.push(obj);
    }
    //logger.info("listlength="+list.length);
    //outs...
    //下列为操作数据库的几个方法,传入参数sql,执行成功返回1,执行失败返回0
    //out.createTable(sql);创建表
    //out.updateTable(sql);   修改表数据
    //out.deleteTable(sql);删除表
    //out.updateTableStructure(sql); 修改表结构
    //out.selectTable(sql); 查询表
    var MysqlOutCustom = Java.type(
        "com.uinnova.di.dip.customoutmysql.MysqlOutCustom"
    );
    //url, username, passowrd
    var out = new MysqlOutCustom(
        "jdbc:mysql://192.168.137.138:3306/outputDB?useUnicode=true&characterEncoding=UTF-8",
        "root",
        "root"
    );

    //传入数据,数据库表名,主键,其他列
    out.out(
        convertJs2Java(list),
        "c_out",
        "id",
        "sceneid,kpi_key,kpi_value"
    );
    heartBeat.addOutCount(list.length);
    sleep(60000);
    } catch (error) {
    logger.error("脚本执行错误:", error);
    }
}
} 
处理activemq数据

我们可以取出输入ActiveMQ中的数据进行处理,将他们转为我们需要的格式,在进行输出。

以JavaScript处理接入ActiveMQ为例,准备数据接入。

连接配置信息:

url: tcp://{ip}:{port}

用户名: username

密码: password

对列名称:inTopicName

队列数据格式: JSON格式的字符串

数据属性说明:

参数名

必选/可选

参数位置

参数类型

参数名字

ciCode

必选

参数列表

String

配置项唯一标识

Metric

必选

参数列表

String

性能数据所属的指标名称

instance

可选

参数列表

String

性能数据所属的指标实例,若无则填英文字符下划线,"_"

Value

必选

参数列表

String

性能数据的值

timestamp

可选

参数列表

String

数据采集时间,若为空则默认当前时间,时间戳格式

样例数据:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
[
    {
        "ciCode": "P211-E1-01",
        "metric": "CPU使用率",
        "instance": "cup0",
        "value": "50",
        "timestamp": "1500790703007"
    }
] 

如下图,1处接入MQ数据,2处对数据进行处理,3处把处理后的数据同样输出到另外一个MQ中去,对其他数据源的处理可以参照此处进行处理。

输出到ActiveMq

Dip代码参考示例:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function run() {
var ActivemqReceiver = Java.type(
    "com.uinnova.di.dip.base.receiver.ActivemqReceiver"
);
//url, queue, username, password, queue(true) or topic(false)
var receiver = new ActivemqReceiver(
    "tcp://192.168.137.128:8094",
    "testIn123",
    "admin",
    "admin",
    true
);
startReceiver(receiver);
while (true) {
    try {
    var data = receiver.getData();
    if (data != null) {
        heartBeat.addInCount(1);
        //executes...
        var listData = JSON.parse(data);
        var list = new Array();
        for (var i = 0; i < listData.length; i++) {
        var obj = new Object();
        var temp = listData[i];
        obj.ciCode = temp["ciCode"];
        obj.metric = temp["metric"];
        obj.value = temp["value"];
        obj.timestamp = temp["timestamp"];
        obj.unit = temp["instance"];
        list.push(obj);
        }
        //logger.info("listlength="+list.length);
        //outs...
        var mqurl =
        "failover://(tcp://192.168.137.138:8094)?randomize=false&timeout=5000&maxReconnectAttempts=-1";
        var ActiveMqOut = Java.type("com.uinnova.di.dicom.amq.AMQProducer");
        //url, 用户名,密码,topic=1或queue=2,Topic或者Queue名称,非持久化=1或持久化=2,最晚提交时间秒
        var out = ActiveMqOut.getInstance(
        mqurl,
        "admin",
        "admin",
        "1",
        "testOut123",
        2,
        1
        );
        out.sendList(convertJs2Java(list), 1);
        heartBeat.addOutCount(list.length);
    }
    } catch (error) {
    logger.error("脚本执行错误:" + error.message);
    }
}
} 
处理syslog数据

我们选择发送syslog数据,Syslog消息体

属性分隔符: |

数据定义:sceneid|kpi_key|kpi_value|value|id

样例数据:20170109153114611633853|temperature|56|1

说明:syslog在发送数据时会在数据前自动添加发送时间,主机名称等内容,需要根据产品是需要该数据进行处理,实际发送数据如下所示:Feb1909:32:16 DESKTOP-PDH3O88 20170109153114611633853 | temperature|56|12

在executes... 对输入数据进行解析,获得所需要的数据格式,输出到指定的MySQL或者ActiveMq数据源中,如下图所示

数据输出

输出到MySQL

进入如下界面,在编写脚本数据输出的时候可以点击输出, 就会出现如下图所示的子菜单,可以根据发送方式选择对应的菜单,脚本框中会出现对应的模板代码,只需要修改一下连接信息配置参数,如下图所示。

点击输出,选择第二项MySQL ,相应的接入MySQL的代码会自动填写在function run() 里面 outs处填写数据输出语句,in 为接入语句,executes为数据处理逻辑,

如图,展示了关键处理逻辑:

1、为查询MySQL数据源所得数据,

2、对数据进行处理,

3、是一些操作数据库的函数,可以对输出数据库进行创建表,更新表结构等操作,4处填写输出到目的地MySQL的配置信息。

输出ActiveMq

进入如下界面,点击 输出,选择第一项 ,相应的接入ActiveMQ 的代码会自动填写在function run() 里面 outs处填写数据输出语句,in 为接入语句,executes为数据处理逻辑。

如下图,在1处为填入参数的含义,2处为要填写参数的值。填写完成后保存dip

DIP启动

保存

填写完以上配置信息后,点击完成,进入该dip的保存界面,如下图所示。

然后点击保存会在 di主页看到接入javascript的dip已经存在,如下图所示。点击启动按钮,便可以获取数据了。

启动

配置完dip后,点击完成,保存好,回到dip主界面,显示所有的dip列表,如下图所示,点击启动,启动一个dip。

运行

刚启动时状态,已接入、已处理、待发送、已发送为0,启动一会后,如果已接入和已发送有数值,则表示dip正在传输数据。

查看日志

Dip运行后点击监控按钮,进入dip详细页面,点击日志下载,查看dip运行日志。

场景接入数据源

CamBuilder API调试环境实时数据接口接入

第三方行业应用如需驱动特定3D场景各类信息动态变化,实现实时状态可视化展示,需使用“实时数据”接口向场景内推送数据。

CamBuilder调试环境使用介绍

可以客户端中点击CB调试进入客户端离线调试环境

也可访问模模搭官网(www.3dmomoda.com),通过点击开发、在线调试进入在线调试界面。

也可以直接访问如下网址进入调试界面,下载链接: http://www.3dmomoda.com/mmdclient/script/examples/examples.html

如上图,进入调试页面后,在右侧输入自己想要调试的场景ID,点击场景预览按钮,右侧会显示场景,在左侧点击官方列表,在头顶牌子选择固定位置物体,接下来我们选择这个官方示例代码来进行场景实时接入数据的演示。

点击执行代码后,会在右侧场景中场景一个头顶牌,显示hello!我们可以利用数据接入接口接入所需要得数据,在调试代码中把数据赋值给对应的物体,达到头顶牌中的数据可以根据接入数据的变化而变化。

接入MySQL数据

进入调试环境,选择官方列表中头顶牌,选择固定位置,使用如下图所示的Ajax数据对接(支持跨域请求)。

请求参数说明:

参数名

必选/可选

参数类型

参数说明

参数示例

requestUrl

必选

String

请求接口

http://192.168.10.67:8090/ajax/getDbData

username

必选

String

数据库用户名

root

password

必选

String

数据库密码

root

dburl

必选

String

数据库地址

jdbc:mysql://192.168.137.138:3306/outputDB

sql

必选

String

查询sql

SELECT id , sceneid, kpi_key,kpi_value from scene_data WHERE id = 1

样例数据:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
[
    {
        "id": "1",
        "sceneid": "20170109153114611633853",
        "kpi_key": "temperature",
        "kpi_value": "253"
    }
] 

返回结构说明:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
{
    "state": true,
    "data": [
        {
            "kpi_value": "253",
            "sceneid": "20170109153114611633853",
            "kpi_key": "temperature",
            "id": "1"
        }
    ]
} 

调试代码示例:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
//**********---最后保存时间:2018-12-24 13:50:09 保存人:13824---**********//
    // ---------------------------------------------------------
    // 创建牌子,跟踪位置、设置文字、改变颜色、注册事件、显示隐藏
    // ---------------------------------------------------------
    
    var ui = null;
    function init_balloon(res) {
        ui = gui.create(res);
    
        ui.trackPos(0, 2, 0);
        ui.setScale(0.3, 0.3);
        ui.setText("Button/Text", "Hello!");
    
        ui.setImageColor("Button", Color.red);
        ui.setTextColor("Button/Text", Color.yellow);
    
        ui.regButtonEvent("Button", function() {
            console.log("click ui button");
        });
    };
    
    util.download({
        "url": "http://www.3dmomoda.com/mmdclient/script/examples/demos/message_button.bundle", 
        "success": init_balloon
    });
    
    // 测试显示隐藏:
    // util.setInterval(function(){
    //  if (ui != null) {
    //      ui.show(!ui.isShow);
    //  }
    // }, 1000);
        
        
        //设置定时器
    util.setInterval(function(){
            //请求参数
    var requestUrl= "http://192.168.10.67:9090/ajax/getDbData";
    var dburl="jdbc:mysql://192.168.137.138:3306/outputDB";
    var username="root";
    var password="root";
    var sql="SELECT id , sceneid, kpi_key,kpi_value from scene_data WHERE id = 1";
    
    util.download({
            "url": requestUrl+"?dburl="+dburl+"&username="+username+"&password="+password+"&sql="+sql, 
            "type":"text", 
            "success": function(res){
                        ////打印返回结果
                        console.log(res);
                                    //json转换为table类型
                        var tableres = json.decode(res);
                                    // 取得自己需要的值
                        var kpi_value=tableres.data[0].kpi_value;
                        
                        console.log("kpi_value:"+kpi_value);
                        //把结果复制给场景中头顶牌中    
                    ui.setText("Button/Text",kpi_value);
            },
            "error":function(error){
                    console.log(error)
            }
    });
},3000); //每三秒 

调试结果,在1处是请求数据实时渲染到场景中,2处为接口地址和请求参数,3处为通过图中方法获得请求结果,请求成功后对于返回数据可以使用标准API语法解析,获取需要的指标参数,赋值到场景对象中。

接入ActiveMq数据

对于ActiveMq数据,同样采用Ajax请求获取数据源数据,支持跨域请求,请求地址可以是自己部署的ActiveMq服务器地址。

请求参数说明:

参数名

必选/可选

参数类型

参数说明

参数示例

requestUrl

必选

String

请求接口地址

http://192.168.10.67:9090/ajax/getMqData

mqurl

必选

String

ActiveMq 地址

tcp://192.168.137.138:8094

username

必选

String

ActiveMq 用户名

admin

password

必选

String

ActiveMq 密码

admin

chanelMode

可选,默认1

String

订阅类型,topic=1 queue=2

2

topicOrQueue

必选

String

待接收 topic 或queue 名字

testOut789

timeout

可选,默认3000

String

收到下一条消息时间,单位ms

3000

请求示例数据:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
[
    {
        "ciCode":"P211-E1-01",
        "metric":"CPU使用率",
        "instance":"cup0",
        "value":"50",
        "timestamp":"1500790703007"
    }
] 

返回结构说明:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
{
    "state": true,
    "data": "[\n {\n \"ciCode\":\"P211-E1-01\",\n \"metric\":\"CPU使用率\",\n \"instance\":\"cup0\",\n \"value\":\"50\",\n \"timestamp\":\"1500790703007\"\n }\n]\n"
} 

调试代码示例:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// ---------------------------------------------------------
// 创建牌子,跟踪位置、设置文字、改变颜色、注册事件、显示隐藏
// ---------------------------------------------------------

var ui = null;
function init_balloon(res) {
    ui = gui.create(res);
    
    ui.trackPos(0, 2, 0);
    ui.setScale(0.3, 0.3);
    ui.setText("Button/Text", "Hello!");

    ui.setImageColor("Button", Color.red);
    ui.setTextColor("Button/Text", Color.yellow);

    ui.regButtonEvent("Button", function() {
        console.log("click ui button");
    });
};

util.download({
    "url": "http://www.3dmomoda.com/mmdclient/script/examples/demos/message_button.bundle", 
    "success": init_balloon
});
// 测试显示隐藏:
// util.setInterval(function(){
//  if (ui != null) {
//      ui.show(!ui.isShow);
//  }
// }, 1000);
    //设置定时器
util.setInterval(function(){
    
        //请求参数
var requestUrl= "http://192.168.10.67:9090/ajax/getMqData"; //请求url
var mqurl="tcp://192.168.137.138:8094"; //ActiveMq 地址
var username="admin"; // ActiveMq 用户名
var password="admin";//topic=1 queue=2
var chanelMode="1";     //  topic=1 queue=2
var topicOrQueue="testOut123";//待接收 topic 或 queue 
var timeout="3000";     //设置收到下一条消息时间,单位ms,默认3000ms 
util.download({
        "url": requestUrl+"?mqurl="+mqurl+"&username="+username+"&password="+password+"&chanelMode="+chanelMode
            +"&topicOrQueue="+topicOrQueue+"&timeout="+timeout, 
        "type":"text", 
        "success": function(res){
                    ////打印返回结果
                    console.log(res);
                                //json转换为table类型
                    var tableres = json.decode(res);
                    console.log("tableres : "+tableres);
                                // 取得自己需要的值
                    var value=json.decode(tableres.data)[0].value;
            
                    console.log( "value: "+json.decode(tableres.data)[0].value);
                    //把结果复制给场景中头顶牌中    
                ui.setText("Button/Text",json.decode(tableres.data)[0].value);
        },
        "error":function(error){
                console.log(error)
        }
});
},3000); //每三秒
发布模模搭场景

代码调试完成后,点击下图1处发布按钮,复制2处地址可以在浏览器中访问,本机地址是指调试场景的机器所在地址,局域网地址是该场景变化处于同一个局域网内的用户可以访问

ThingJS调试环境接入

ThingJS调试环境使用介绍

打开客户端,点击ThingJS调试进入ThingJS调试环境

选择右侧官方列表中的数据,点击第一项数据对接。

接入MySQL数据

进入调试环境,选择官方列表中的数据,选择数据对接,使用如下图所示的Ajax数据对接(支持跨域请求)。

在1处填写接口地址,目前为CamBuilder官方提供,在2中的填写请求参数,请求参数规则如表格所示

参数名

必选/可选

参数类型

参数说明

参数示例

username

必选

String

数据库用户名

root

password

必选

String

数据库密码

root

dburl

必选

String

数据库地址

jdbc:mysql://192.168.137.138:3306/outputDB

sql

必选

String

查询sql

SELECT id , sceneid, kpi_key,kpi_value from scene_data WHERE id = 1

请求成功后对于返回结果可以使用标准JS语法解析,获取需要的指标参数,使用ThingJS特有的API语法,赋值到场景对象中。

调试代码示例:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
/**
    * 说明:为模拟数据对接,ThingJS平台部署单独部署了一台服务器3dmmd.cn,模拟合作商的后端服务器
    * 端口82 为websoket 接口,优势实时性好,每秒上传一个温度数值(-10 - 30 的随机数)
    * 端口83 为ajax接口,优势服务器压力小,每次读数的时候返回一个温度数值 (-10 - 30 的随机数)
    * 本例子演示如何做ajax 和websoket数据对接
    */
    var app = new THING.App({
        url: 'models/storehouse'
    });
    // 界面组件
    var panel = new THING.widget.Panel({ name: '温度面板', hasTitle: true, });
    var dataObj = {
        t1: '21°C',
        t2: '21°C',
    };
    panel.add(dataObj, 't1').name('水温').isChangeValue(true);
    panel.add(dataObj, 't2').name('气温').isChangeValue(true);
    /********************* 以下为ajax数据对接 ********************/
    // 接收服务端数据时触发事件
    update = function (evt) {
        // ***如设置服务器的CORS,实现跨域访问。会更简单***
        // ***下例采用的不设置CORS的跨域实现方案*** 
        $.ajax({
            type: "get",
            url: "http://192.168.10.67:9090/ajax/getDbData",
            data: {
            "dburl":"jdbc:mysql://192.168.137.138:3306/outputDB?useUnicode=true&characterEncoding=UTF-8", //mysql地址
                "username":"root",  //mysql 用户名
                "password":"root",  //mysql 密码
                "sql":"select id,sceneid,kpi_key,kpi_value from scene_data where id=1",//设置收到下一条消息时间,单位ms,默认3000ms
                },
            dataType: "jsonp",
            jsonpCallback: "callback",
            success: function (d) {
                console.log('拉取数据:' +d);
                console.log('拉取数据:' + JSON.stringify(d));
                
                console.log('拉取数据:' +  d.data[0].kpi_value);
                // ***将获得的数据赋值到场景中***
                dataObj.t2 = d.data[0].kpi_value + '°C';
            }
        });
    };
    //每1秒更新一个数据
    setInterval(update, 5000);
接入ActiveMq数据

进入调试环境,选择官方列表中的数据,选择数据对接,使用如下图所示的ajax数据对接(支持跨域请求)。

目前对接ActiveMq支持使用ajax方式,在1处添加请求接口地址,2处对返回数据进行解析,接口格式定义如下

调试接口请求地址: http://192.168.10.67:9090/ajax/getMqData

如进行网络部署则为服务器实际IP及端口。

请求参数

必选/可选

参数类型

参数说明

参数示例

mqurl

必选

String

Mq地址

tcp://192.168.137.138:8094

username

必选

Int

ActiveMq 用户名

9090

password

必选

String

ActiveMq 密码

ws

chanelMode

必选

String

topic=1 queue=2

1

topicOrQueue

必须

String

订阅topic或queue名字

testOut123

timeout

必须

String

设置收到下一条消息时间,单位ms,默认3000ms

3000

请求数据示例:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
[
    {
        "ciCode": "P211-E1-01",
        "metric": "CPU使用率",
        "instance": "cup0",
        "value": "50",
        "timestamp": "1500790703007"
    }
] 

返回数据示例:

[{"kpi_value":"251","sceneid":"20170109153114611633853","kpi_key":"temperature","id":"1"}]

调试代码示例;

1、ajax请求数据:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
/**
* 说明:为模拟数据对接,ThingJS平台部署单独部署了一台服务器3dmmd.cn,模拟合作商的后端服务器
* 端口82 为websoket 接口,优势实时性好,每秒上传一个温度数值(-10 - 30 的随机数)
* 端口83 为ajax接口,优势服务器压力小,每次读数的时候返回一个温度数值 (-10 - 30 的随机数)
* 本例子演示如何做ajax 和websoket数据对接
**/
var app = new THING.App({
    url: 'models/storehouse'
});
// 界面组件
var panel = new THING.widget.Panel({ name: '温度面板', hasTitle: true, });
var dataObj = {
    t1: '21°C',
    t2: '21°C',
};
panel.add(dataObj, 't1').name('水温').isChangeValue(true);
panel.add(dataObj, 't2').name('气温').isChangeValue(true);


/********************* 以下为ajax数据对接 ********************/
// 接收服务端数据时触发事件
update = function (evt) {
    // ***如设置服务器的CORS,实现跨域访问。会更简单***
    // ***下例采用的不设置CORS的跨域实现方案*** 
    // 服务器返回的数据格式为 callback({"state":"success","data":29})
    $.ajax({
        type: "get",
        url: "http://192.168.10.67:9090/ajax/getMqData",

        data: {
            "mqurl":"tcp://192.168.137.138:8094", //mq地址
            "username":"admin",  //ActiveMq 用户名
            "password":"admin",  //ActiveMq 密码
            "chanelMode":"1",  //topic=1 queue=2
            "topicOrQueue":"testOut123",// 订阅tppic名字
            "timeout":"3000",//设置收到下一条消息时间,单位ms,默认3000ms
            },
        dataType: "jsonp",
        jsonpCallback: "callback",
        success: function (d) {
            console.log('拉取数据:' +d);
            console.log('拉取数据:' + JSON.stringify(d));
            console.log('拉取数据:' +  JSON.parse(d.data)[0].value);
            // ***将获得的数据赋值到场景中***
            dataObj.t2 =JSON.parse(d.data)[0].value+ '°C';
        }
    });
};
//每1秒更新一个数据
setInterval(update, 6000);

ws请求数据:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
/**
* 说明:为模拟数据对接,ThingJS平台部署单独部署了一台服务器3dmmd.cn,模拟合作商的后端服务器
* 端口82 为websoket 接口,优势实时性好,每秒上传一个温度数值(-10 - 30 的随机数)
* 端口83 为ajax接口,优势服务器压力小,每次读数的时候返回一个温度数值 (-10 - 30 的随机数)
* 本例子演示如何做ajax 和websoket数据对接
*/
var app = new THING.App({
    url: 'models/storehouse'
});
// 界面组件
var panel = new THING.widget.Panel({ name: '温度面板', hasTitle: true, });
var dataObj = {
    t1: '21°C',
    t2: '21°C',
};
panel.add(dataObj, 't1').name('水温').isChangeValue(true);
panel.add(dataObj, 't2').name('气温').isChangeValue(true);
/********************* 以下为websoket数据对接 ********************/
// 对接自有websoket服务器
var ws = new WebSocket('ws://192.168.10.67:9090/ws/testOut789');
// 建立 web socket 连接成功触发事件
ws.onopen = function () {
    console.log("websoket服务器连接成功...");
};
// 接收服务端数据时触发事件
ws.onmessage = function (evt) {
    console.log(evt+'');
    console.log("websoket接收数据:" + toString(evt));
    var s =JSON.stringify(evt.data)
    console.log('拉取数据ss:' + s);
            console.log('拉取数据:' + JSON.parse(evt.data)[0].kpi_value );
    // ***将获得的数据赋值到场景中***
    dataObj.t1 = JSON.parse(evt.data)[0].kpi_value + '°C';
};   
发布ThingJS场景

代码调试完成后,点击下图1处演示按钮,2处电脑演示会弹出新的浏览器窗口,复制下图3处地址栏中的url地址给其他人就可以看到场景中的数据变化

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
从零开始学习3D可视化之数据对接(2)
在日常使用的互联网产品中,很多都是前后端数据的交互来完成的,说到数据交互就不得不提Ajax和WebSocket,它们可是数据交互的利器,那么它们分别是什么?Ajax上篇文章已经讲过了,那WebSocket又是什么呢?
thingjs
2021/07/22
3650
Echarts图表结合webgl可视化平台进行数据对接
使用Echarts图表结合webgl可视化平台进行数据对接,3D物联网开发选哪个?前端人员能不能跑来搞3D可视化开发?用什么可以简单快速建模?开发中遇到问题不知道如何解决?别急,使用ThingJS物联网可视化平台就能解决这些问题!
要不要吃火锅
2019/11/12
3K0
Echarts图表结合webgl可视化平台进行数据对接
物联网可视化园区搭建步骤图示
ThingJS 场景中可以加载园区,加载后系统自动创建了园区、建筑、楼层、房间等物体对象,这些对象也自然把场景分成了不同的层级。
要不要吃火锅
2019/11/07
7410
物联网可视化园区搭建步骤图示
万物可视之智能可视化管理平台
  Tarsier是优锘科技推出的一款可视化+大数据的IT运维管理产品,针对当前业务环境和技术环境下企业IT运维面临的结构复杂、数据碎片、变化常态、机制板结等问题,Tarsier提供以可视化、场景化为核心理念的系列产品助力企业解决问题
要不要吃火锅
2019/12/25
1.5K0
从零开始学习3D可视化之数据对接(1)
基于数字孪生可视化场景,使用在线开发或离线开发SDK进行数字孪生可视化场景开发完毕后,在所开发的数字孪生可视化可视化应用中,对接物联网或业务数据,实时驱动数字孪生可视化场景动态变化或图表数据更新。ThingJS支持以下四种数据对接方式,可与第三方物联网系统进行通信(数据传输),分别为Ajax、JSONP、WebSocket、MQTT。
thingjs
2021/07/20
4790
从零开始学习3D可视化之数据对接(3)
MQTT是ThingJS平台支持的四种数据对接方式之一,MQTT又称Message Queuing Telemetry Transport,消息队列遥测传输,是 ISO 标准(ISO/IEC PRF 20922)下基于发布 (Publish)或订阅 (Subscribe)范式的消息协议,可视为“资料传递的桥梁”。MQTT是一个轻量级协议,使用MQTT协议的中心是broker(服务器/代理),客户端通过订阅消息和发布消息进行数据交互。
thingjs
2021/07/23
3810
仅需三步学会使用低代码ThingJS与森数据DIX数据对接
森数据DIX拥有强大的数据处理能力,内置主流集成插件,分钟级集成IT运维场景和IoT管理场景数据,提升效率。针对非主流系统,支持在线JS脚本编辑,提供灵活、规范的接口,满足低代码个性化需求,轻松实现物联数据一键对接。
thingjs
2022/06/10
4010
仅需三步学会使用低代码ThingJS与森数据DIX数据对接
基于WebGL的3D可视化告警系统关键技术解析 ThingJS
WebGL是一种在网页浏览器中渲染3D图形的 JavaScript API,无需加装插件,只需编写网页代码即可实现3D图形的展示。WebGL技术相较于传统的Web3D技术有两大优点:第一,通过JavaScript脚本语言实现网络交互式三维动画制作,无需依赖任何浏览器插件;第二,WebGL基于底层的 OpenGL接口实现,具有底层图形硬件(GPU)加速功能。
森友鹿锘
2020/12/04
2.3K0
基于WebGL的3D可视化告警系统关键技术解析 ThingJS
物联网可视化领域,如何将图表数据与三维场景进行交互?
随着时代的发展,人们对于事物的处理方式发生了巨大改变,从书信交流到如今视频通话,人们日常生活中的交流方式也发生了改变,尤其是人们对于图像的接受能力远远大于文字,很多时候,几十上百字的归纳说明还没有一张图给人带来的直观,这种将文字变成表格,表格变成图表的过程却并不算漫长,随着互联网的蓬勃生长、对于千万条乃至数百亿条数据的处理之后,如何让管理者更加直观便捷的查看出大数据下隐藏的信息,这就不仅仅是文字能够表述的清楚,或者这样说,在如今这个时代,任何可以被节约下来的时间都不能去浪费,以至于表格逐渐代替了文字账本,在互联网中使用图表来展示数据也逐渐成为了主流趋势,当我们把目光放向物联网时,其实也是这样,随着互联网的壮大,物联网也在迅速崛起,而物联网可视化的万物可视也成为了当前的一大需求,将三维实景与数据结合起来也成为了可视化的一大亮点。
要不要吃火锅
2019/11/08
8440
Grafana 随笔:接入数据源
Zabbix 数据源接入需要安装第三方插件,名称为 alexanderzobnin-zabbix-app,这个插件可以在 Grafana 官网入口找到。
IT小白Kasar
2022/02/16
2.5K0
Grafana 随笔:接入数据源
Flask 数据可视化大屏
该项目利用 Flask框架结合echarts将MySQL数据库中的相关数据进行可视化大屏展示,其中MySQL数据采用虚拟实时更新数据
码农GT038527
2024/08/27
3960
Flask 数据可视化大屏
数据可视化大屏使用什么技术开发的?
      还记得双十一某宝的数据大屏吗?还记得你剁手了多少吗?他每年都在突破,而企业这历史性的时刻用可视化数据大屏是否更有意义?答案是肯定的!那么数据可视化大屏于企业来说有什么重要意义及用处呢?
要不要吃火锅
2019/12/12
4K0
数据可视化大屏使用什么技术开发的?
福建省大数据职业技能大赛电商数据可视化-接口数据源
此项目基于vue3,结合echarts获取接口(根据跨域文件获取相关数据),数据进行数据可视化
码农GT038527
2024/08/31
3854
福建省大数据职业技能大赛电商数据可视化-接口数据源
前端开发人员用它就能做可视化应用!
有人说我一个前端工程师,只懂怎么写页面,如何能开发企业可视化应用?近几年可视化应用已经渗透到各行各业中,科技园、医院、学校、工厂、消防、安保、仓储无不涉猎!作为一个前端开发人员,你有必要再往前迈一步,多了解webgl技术,再沉淀一下Javascript。thingjs是一个面向物联网的3D可视化开发平台,可在线开发、对接数据、项目部署、实际应用~如果你想进步不妨一步哦!
要不要吃火锅
2019/12/12
7890
前端开发人员用它就能做可视化应用!
【jquery Ajax 】form表单教学+评论案例
表单在网页中主要负责数据采集功能,HTML中的<form>标签,就是用于采集用户输入的信息,并通过<form>标签的提交操作,把采集到的信息提交到服务器端进行处理。
坚毅的小解同志的前端社区
2022/11/28
2.3K1
【jquery Ajax 】form表单教学+评论案例
大数据可视化顶视图放大方法是?
  new THING.widget.Button('顶视图', function() {
要不要吃火锅
2019/12/10
4810
【转】在 Grafana 中通过 Infinity 数据源可视化接口数据
原文 https://tendcode.com/subject/article/Grafana-Infinity/
保持热爱奔赴山海
2025/04/26
1650
51.Qt-使用ajax获取ashx接口的post数据
由于当前C++项目需要使用ajax库去post调用ashx接口,接口地址如下所示:
诺谦
2019/12/26
2K0
51.Qt-使用ajax获取ashx接口的post数据
九、英雄管理(cqmanager)系统
由于多个页面都是需要判断用户是否登陆,因此需要单独写一个接口,用于判断用户有没有登陆。
Dreamy.TZK
2020/07/08
2.1K0
九、英雄管理(cqmanager)系统
可视化搭建系统之数据源
接上一篇文章 前端工程实践之可视化搭建系统(一)鸽了比较久,看过的同学应该也都已经不记得了,也是又看到两年前文章下热评一位同学问的问题,两年后我们换个形式来讨论下这个问题(手动艾特水白泉同学)。
政采云前端团队
2022/12/01
5750
可视化搭建系统之数据源
推荐阅读
相关推荐
从零开始学习3D可视化之数据对接(2)
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验