从零开始学习 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');    });}