[技术讨论] 从零开始学习3D可视化之数据对接（3）

var app; // App对象

var car; // 挂载数据的叉车

 

// 引入样式文件

THING.Utils.dynamicLoad([

 'https://www.thingjs.com/static/lib/stomp.min.js',

 '/guide/examples/css/measure/panel.css'

], function() {

 app = new THING.App({

 url: 'https://www.thingjs.com/static/models/storehouse'

 });

 

 app.on('load', function() {

 // 设置摄像机位置和目标点

 app.camera.position = [44.38316010361372, 22.256383671664036, 37.42310488848945];

 app.camera.target = [19.488379488180318, 0.17527928595920675, 5.827049588512047];

 car = app.query('car01')[0];

 // 物体身上创建monitorData对象 用于存储动态监控数据

 car.monitorData = {

 '温度': ''

 };

 var mqclass = new MQConnection(); // 创建mq服务类

 new THING.widget.Button('开启链接', function() {

 mqclass.initConnection();

 });

 new THING.widget.Button('关闭连接', function() {

 mqclass.disconnection();

 });

 

 createHtml();

 initThingJsTip("MQTT 是一个轻量级协议，使用 MQTT 协议的中心是 broker（服务器/代理），客户端通过订阅消息和发布消息进行数据交互。<br>点击【开启读取】进行数据读取，读取到的数据将在数据详情面板进行显示，当温度值大于30℃时，车辆设置红色效果，点击【关闭读取】停止数据读取！");

 })

})

 

class MQConnection {

 /**

 * 构造器

 */

 constructor() {

 this.init();

 }

 /**

 * 初始化

 */

 init() {

 // 数据推送的url，可修改为自己的服务地址

 this.socketUrl = 'wss://www.3dmmd.cn:8086';

 // 连接

 this.stompClient = null;

 // this.initConnection();

 }

 /**

 * 初始化连接

 */

 initConnection() {

 var _this = this;

 if (_this.stompClient != null) return;

 _this.stompClient = Stomp.client(_this.socketUrl);

 var success = function() {

 _this.successCallback();

 }

 var error = function(error) {

 _this.errorCallback(error);

 }

 _this.stompClient.connect({}, success, error);

 _this.stompClient.debug = null; // 如果需要Stomp日志打印，注释此行代码

 }

 /**

 * 连接成功后的回调，订阅主题

 */

 successCallback(data) {

 var _this = this;

 console.log('连接成功，订阅话题！');

 _this.stompClient.subscribe('/topic/monitor/temperature/one', function(message) {

 if (message.body) {

 let data = message.body;

 console.log('接收温度数据:' + data);

 updateState(data);

 } else {

 console.log('无数据推送！');

 }

 });

 }

 /**

 * 关闭连接

 */

 disconnection() {

 console.log('连接已关闭！');

 this.stompClient.disconnect();

 }

 /**

 * 连接失败后的回调

 */

 errorCallback(error) {

 console.log('连接失败！');

 console.log(error);

 }

}

 

/**

 * 接收推送数据后更新状态

 */

function updateState(data) {

 car.setAttribute("monitorData/温度", data);

 nowDatetime();

 if (($('.empty').length)) {

 $('.empty').remove();

 }

 if (!($('.tj-group').length)) {

 let tbody = `<tbody class="tj-group" id="tb-line"></tbody>`;

 $('.tj-table').prepend(tbody);

 }

 let tr =

 `<tr class="tj-group-content">

 <td class="tj-key">` + dateString + `</td>

 <td class="tj-value">` + data + `℃</td>

 </tr>`;

 $('.tj-group').prepend(tr);

 changeColor(car);

}

 

/**

 * 获取系统日期

 */

function nowDatetime() {

 var date = new Date();

 var hours = (date.getHours()) > 9 ? (date.getHours()) : "0" + (date.getHours());

 var minutes = (date.getMinutes()) > 9 ? (date.getMinutes()) : "0" + (date.getMinutes());

 var seconds = (date.getSeconds()) > 9 ? (date.getSeconds()) : "0" + (date.getSeconds());

 dateString =

 hours + ":" +

 minutes + ":" +

 seconds;

 return dateString;

}

 

/**

 * 当车辆的温度值超过20时，更改小车颜色

 */

function changeColor(obj) {

 var temper = obj.getAttribute("monitorData/温度");

 var value = temper;

 if (value > 30) {

 obj.style.color = 'rgb(255,0,0)';

 } else {

 obj.style.color = null;

 }

}

 

// 创建html界面

function createHtml() {

 // 数据详情界面

 let dataDetails =

 `<div id="dataDetails" class="tj-panel property-panel tj-has-title tj-sizable tj-property-panel tj-pinned" style="position: absolute; right: 10px; top: 220px; width: 315px; height: 416px; transform: none;">

 <div class="tj-close"></div>

 <div class="tj-title" style="cursor: move; user-select: none;">数据详情</div>

 <div class="tj-panel-body" style="padding-top: 0px;">

 <div class="tj-panel-container tj-scroll-bar">

 <table class="tj-table">

  <div class="empty">暂无数据</div>

 </table>

 </div>

 </div>

 </div>`;

 $('#div2d').append(dataDetails);

 // 点击按钮关闭面板

 $('#dataDetails .tj-close').on('click', function() {

 $('#dataDetails').css('display', 'none');

 });

}