ThingJS-securityHtml/杨浦16 2021.08.09/杨浦.js

// 创建app
var app = new THING.App({
    url: '/api/scene/0b75dc5f4460f22c329afd96',
    // url: '/api/scene/ab93bd9640a9db05a4937351',
    background: 'https://www.thingjs.com/static/images/background_img_03.png'
});

//设备列表
var buildingStore;
$.ajax({
    type: "GET",
    url:'/uploads/wechat/163607/file/杨浦16/buildingStore.json',
    dataType: "json",
    async: false,
    success: function (data) {
        console.log(data)
        buildingStore = data.buildingStore
    }
});

app.camera.xAngleLimitRange = [0, 90];
var campusUrl;//场景列表
var dataObj = { progress: 0 };  // 场景加载进度条数据对象
var loadingPanel;  // 进度条界面组件
var curCampus;//存放园区url路径
var company_code;

var buildingStore;
var miniMapCtrl = null;  // 小地图控件
var webSocket;//webSocket
var tileLayer1 = null;  // 加入地图背景后选用的图层
var box = null;  // 鼠标点击第一人称行走按钮时，红色盒子提示
var fpsCtrl = null;  // 第一人称行走控件
var cameraInitPos = null;  // 进入第一人称行走前摄像机位置
var fullScreenState = false;  // 全屏
var skyBox = null;  // 天空盒
var hiddenControlTimer = null;  // 隐藏控制按钮计时器
var showControlTimer = null;  // 显示控制按钮计时器
var cameraDistace = [];
var building = null, mainPanle;  // 建筑
var restartTime = 5000;  // 自动旋转停止后重启时间间隔
var rotateTimer = null;  // 自动旋转计时器
//var baseURL = "http://47.103.74.123/ThingjsIcon/";
var baseURL = "https://s3.ax1x.com/2021/01/28/";
var filePath = '/uploads/wechat/5oiR5pyJ5pyA6ZW/55qE572R5ZCN5LiN5L+h5L2g5pWw5pWw/file/ScenePreview/';
// 需要用到的外部文件
var fileArr = [
    "https://www.layuicdn.com/layui/layui.js",
    'https://www.layuicdn.com/layui/css/layui.css',
    filePath + 'assets/css/index.css',  // 功能按钮样式文件
    filePath + 'assets/font-awesome-4.7.0/css/font-awesome.min.css',  // 功能按钮字体样式
    filePath + 'assets/css/myAlert.css',  // 弹出框样式
    filePath + 'assets/css/sweetalert2.min.css',  // 弹出框样式
    filePath + 'assets/js/sweetalert2.all.min.js',  // 弹出框脚本
    filePath + 'assets/js/myAlert.js',  // 弹出框脚本
    filePath + 'assets/js/posTransform.js',  // 不同坐标系经纬度互相转换的脚本文件
    filePath + 'assets/js/expandFloor.js', // 楼层展开脚本
    '/guide/lib/echarts.min.js',
    '/uploads/wechat/163607/file/杨浦16/removeMark.js',//清除标注脚本
    '/uploads/wechat/163607/file/杨浦16/UIAnchor.js',//UI界面脚本
    '/uploads/wechat/163607/file/杨浦16/FloorClick.js',//创建切换楼层脚本
    '/uploads/wechat/163607/file/杨浦16/MainPanel.js',//公共工具功能脚本
    '/uploads/wechat/163607/file/杨浦16/CreateHtml.js',//创建页面元素脚本
    '/uploads/wechat/163607/file/杨浦16/public.js',//公共场景功能脚本  
    '/uploads/wechat/163607/file/杨浦16/ChangeScene.js',//场景切换脚本
];

/**
 * 说明：加载外部文件
 */
THING.Utils.dynamicLoad(fileArr, function () {
    app.on('load', function (ev) {
        skyBox = app.skyBox;  // 获取天空盒
        app.level.change(ev.campus);  // 切换至园区层级
        ev.campus.azimuth = '180';
        mainPanle = new MainPanel(app);// 界面的类
        //  setupNavpanel();
        // creatFloorChoose();  //======================================本地数据测试===============================================
        // 获取园区在CampusBuilder编辑时保存的地理位置
        let tjsLnglat = app.root.defaultCampus.extraData;
        if (tjsLnglat != undefined && tjsLnglat != null) {
            tjsLnglat = tjsLnglat.coordinates;
            if (tjsLnglat != undefined && tjsLnglat != null) {
                tjsLnglat = tjsLnglat.split(",");
            }
        } else {
            ev.campus.extraData = { coordinates: "116.4641,39.98606" }  // 园区绑定默认经纬度，地图才生效
        }
        createHtml();  // 创建html
        restarRotate();  // 自动旋转

        curCampus = ev.campus;
        // 进入层级切换
        app.level.change(ev.campus);
    });
});

// 监听建筑层级的 LeaveLevel 事件
app.on(THING.EventType.LeaveLevel, ".Building", function (ev) {
    // 要进入的层级对象
    var current = ev.current;
    // 上一层级对象（退出的层级）
    var preObject = ev.previous;
    if (current.parent === preObject) {
        removeMark();
    }
    else {
        removeMark();
    }
})

/**
 * 说明：注册事件
 */
function registerEvent() {
    var _this = this
    // 楼层横向展开按钮的点击事件，楼层展开只在建筑有2层或2层以上的楼层才会生效
    $('#horizontalExpansion').on('click', function () {
        stopRotate();
        checkBtnActives(['#mapBg', '#sceneSetting']);
        let expandState = building.getAttribute('expandState');
        if ($(this).hasClass('active')) {
            // 楼层横向展开关闭
            if (expandState == 'horizontal') {
                $(this).removeClass('active');
                horizontalExpand(building, 'close');
            }
        } else {
            // 楼层横向展开前应判断楼层是否处于垂直展开状态，是，则应先关闭垂直展开，然后横向展开
            if (expandState != 'moving') {
                $(this).addClass('active');
                $('#verticalExpansion').removeClass('active');
                if (expandState == 'vertical') {
                    verticalToHorizontal(building);
                } else {
                    horizontalExpand(building, 'horizontal');
                }
            }
        }
        restarRotate();
    });
    // 楼层垂直展开按钮的点击事件，楼层展开只在建筑有2层或2层以上的楼层才会生效
    $('#verticalExpansion').on('click', function () {
        stopRotate();
        checkBtnActives(['#mapBg', '#sceneSetting']);
        let expandState = building.getAttribute('expandState');
        if ($(this).hasClass('active')) {
            // 楼层垂直展开关闭
            if (expandState == 'vertical') {
                $(this).removeClass('active');
                verticalExpand(building, 'close');
            }
        } else {
            // 楼层垂直展开前应判断楼层是否处于横向展开状态，是，则应先关闭横向展开，然后垂直展开
            if (expandState != 'moving') {
                $(this).addClass('active');
                $('#horizontalExpansion').removeClass('active');
                if (expandState == 'horizontal') {
                    horizontalToVertical(building);
                } else {
                    verticalExpand(building, 'vertical');
                }
            }
        }
        restarRotate();
    });
    // 设置按钮点击事件，按钮的tip与功能面板的互相切换
    $('#sceneSetting').on('click', function () {
        checkBtnActives(['#mapBg']);
        if ($(this).hasClass('active')) {
            $(this).removeClass('active');
            $(this).children('.control-menu').removeClass('actives');
            $(this).find('.tooltiptext').css({ "visibility": "visible" });
        } else {
            $(this).addClass('active');
            $(this).children('.control-menu').addClass('actives');
            $(this).find('.tooltiptext').css({ "visibility": "hidden" });
        }
    }).hover(function () {
        if (!$(this).hasClass('active')) {
            $(this).find('.tooltiptext').css({ "visibility": "visible" });
        }
    }, function () {
        $(this).find('.tooltiptext').css({ "visibility": "hidden" });
    });
    // 设置li标签添加点击事件
    $('#sceneSetting .control-menu-pane li').on('click', function (ev) {
        //ev.stopPropagation();
        if ($(this).hasClass('selected')) {
            stopRotate();
            $(this).removeClass('selected');
        } else {
            $(this).addClass('selected');
            restarRotate();
        }
    });
    // 小地图的开启/关闭按钮的鼠标点击事件
    $('#miniMap').on('click', function () {
        if ($(this).hasClass('active')) {
            $(this).removeClass('active');
            destoryMiniMap();
        } else {
            $(this).addClass('active');
            createMiniMap();
        }
        checkBtnActives(['#mapBg', '#sceneSetting']);
    });
    // 地图背景的开启/关闭按钮的鼠标点击事件，按钮的tip与功能面板的互相切换
    $('#mapBg').on('click', function () {
        checkBtnActives(['#sceneSetting']);
        if ($(this).hasClass('active')) {
            $(this).removeClass('active');
            $(this).children('.control-menu').removeClass('actives');
            $(this).find('.tooltiptext').css({ "visibility": "visible" });
        } else {
            $(this).addClass('active');
            $(this).children('.control-menu').addClass('actives');
            $(this).find('.tooltiptext').css({ "visibility": "hidden" });
        }
    }).hover(function () {
        if (!$(this).hasClass('active')) {
            $(this).find('.tooltiptext').css({ "visibility": "visible" });
        }
    }, function () {
        $(this).find('.tooltiptext').css({ "visibility": "hidden" });
    });
    // 进入层级事件
    app.on(THING.EventType.EnterLevel, function (ev) {
        stopRotate();
        // 进入建筑层级
        if (ev.object.type == 'Building') {
            //清除设备列表和面板
            _this.delMydiv();
            _this.destroy_ui();
            let floors = ev.object.floors;
            if (floors.length > 1) {
                building = ev.object;
                addFloorPos(building);
                let expandState = building.getAttribute('expandState');
                if (expandState == null) {
                    building.setAttribute('expandState', 'close');
                }
                $('#horizontalExpansion').css({ 'display': 'block' });
                $('#verticalExpansion').css({ 'display': 'block' });
            }
        } else {
            $('#horizontalExpansion').css({ 'display': 'none' });
            $('#verticalExpansion').css({ 'display': 'none' });
            // 进入园区层级
            if (ev.object.type == 'Campus') {
                if (building != null) {
                    exitBuildingCloseFloor(building);
                    $('#horizontalExpansion').removeClass('active');
                    $('#verticalExpansion').removeClass('active');
                    building = null;
                }
            }
        }
        if (skyBox != null) {
            app.skyBox = skyBox;
        }
        // 重新创建小地图
        if ($('#miniMap').hasClass('active')) {
            destoryMiniMap();
            createMiniMap();
        }
    });
    // 行走按钮的鼠标点击事件
    $('#moveByFps').on('click', function () {
        stopRotate();
        if ($(this).hasClass('active')) {
            $(this).removeClass('active');
            if (box != null) {
                // 恢复默认双击进入层级事件
                app.resumeEvent(THING.EventType.DBLClick, '*', THING.EventTag.LevelEnterOperation);
                // 恢复默认右键退出层级事件
                app.resumeEvent(THING.EventType.Click, '*', THING.EventTag.LevelBackOperation);
                box.destroy();
                box = null;
            }
            if (fpsCtrl != null) {
                exitFps();
            }
        } else {
            $(this).addClass('active');
            // 禁用默认双击进入层级事件
            app.pauseEvent(THING.EventType.DBLClick, '*', THING.EventTag.LevelEnterOperation);
            // 禁用默认右键退出层级事件
            app.pauseEvent(THING.EventType.Click, '*', THING.EventTag.LevelBackOperation);
            // 记录摄像机当前位置
            cameraInitPos = [app.camera.position, app.camera.target];
            createBox();
        }
        checkBtnActives(['#mapBg', '#sceneSetting']);
    });
    // 全屏按钮的鼠标抬起事件
    $('#fullScreen').mouseup(function () {
        if (!fullScreenState) {
            $('.btn-full-screen').css('display', 'none');
            $('.btn-narrow').css('display', 'block');
            $('#fullScreen span').text('退出全屏');
            fullScreen();
            fullScreenState = true;
        } else {
            $('.btn-full-screen').css('display', 'block');
            $('.btn-narrow').css('display', 'none');
            $('#fullScreen span').text('全屏');
            exitFullScreen();
            fullScreenState = false;
            if ($('#mapBg').hasClass('active')) {
                destoryMiniMap();
                createMiniMap();
            }
        }
        checkBtnActives(['#mapBg', '#sceneSetting']);
    });
    // 鼠标键按下事件，功能按钮隐藏
    app.on(THING.EventType.MouseDown, function () {
        app.pauseEvent(THING.EventType.CameraZoom, null, '摄像机前后滚动，功能图片隐藏');
        if (showControlTimer != null) {
            clearTimeout(showControlTimer);
            showControlTimer = null;
        }
        stopRotate();
        if (hiddenControlTimer == null) {
            clearTimeout(showControlTimer);
            hiddenControlTimer = setTimeout(function () {
                $('#all-controls').css('display', 'none');
                clearTimeout(hiddenControlTimer);
                hiddenControlTimer = null;
            }, 300);
        }
    });
    // 鼠标键抬起事件，功能按钮显示
    app.on(THING.EventType.MouseUp, function () {
        app.resumeEvent(THING.EventType.CameraZoom, null, '摄像机前后滚动，功能图片隐藏');
        if (hiddenControlTimer != null) {
            clearTimeout(hiddenControlTimer);
            hiddenControlTimer = null;
        }
        if (showControlTimer == null) {
            showControlTimer = setTimeout(function () {
                $('#all-controls').css('display', 'block');
                clearTimeout(showControlTimer);
                showControlTimer = null;
                restarRotate();
            }, 300);
        }
    });
    let count = 0;
    // 鼠标滑轮滚动
    app.on(THING.EventType.CameraZoom, function () {
        if (showControlTimer != null) {
            count = 0;
            return;
        }
        stopRotate();
        if (showControlTimer == null) {
            $('#all-controls').css('display', 'none');
            showControlTimer = setInterval(function () {
                count++;
                if (count >= 2) {
                    $('#all-controls').css('display', 'block');
                    restarRotate();
                    clearInterval(showControlTimer);
                    showControlTimer = null;
                }
            }, 300);
        }
    }, '摄像机前后滚动，功能图片隐藏');

    // 鼠标移动事件，已创建的红色胶囊跟随鼠标移动
    app.on(THING.EventType.MouseMove, function (ev) {
        if (box != null) {
            if (ev.picked) {
                box.position = ev.pickedPosition;
            }
        }
    });
    // 摄像机位置改变结束事件，记录当前摄像机位置与目标点x，y，z的差
    app.on(THING.EventType.CameraChangeEnd, function () {
        if (cameraDistace.length > 0) {
            let caPos = app.camera.position;
            let scePos = app.root.defaultCampus.position;
            cameraDistace = [caPos[0] - scePos[0], caPos[1] - scePos[1], caPos[2] - scePos[2]];
        }
        restarRotate();
    });
    // 点击事件，放置红色胶囊，进入第一人称行走
    app.on(THING.EventType.Click, function (ev) {
        stopRotate();
        if (ev.button == 0 && box != null) {
            let pos = box.position;
            box.destroy();
            box = null;
            app.camera.flyTo(pos);
            enterFps([pos[0], pos[1] + 2, pos[2]]);
        }
        checkBtnActives(['#mapBg', '#sceneSetting']);
    });
    // 进入层级事件，退出第一人称行走
    app.on(THING.EventType.EnterLevel, function () {
        if (fpsCtrl != null) {
            exitFps();
        }
    });
    // 离开层级事件，停止旋转
    app.on(THING.EventType.LeaveLevel, function () {
        stopRotate();
    })
    // 鼠标滑轮事件，停止旋转
    app.on(THING.EventType.MouseWheel, function () {
        stopRotate();
    })
    // 场景添加键盘按下事件，当进入第一人称行走时，按下esc键退出第一人称行走
    app.on(THING.EventType.KeyDown, function (ev) {
        if (ev.code == 'Escape') {
            if (box != null) {
                app.resumeEvent(THING.EventType.DBLClick, '*', THING.EventTag.LevelEnterOperation);
                app.resumeEvent(THING.EventType.Click, '*', THING.EventTag.LevelBackOperation);
                box.destroy();
                box = null;
                $('#moveByFps').removeClass('active');
                restarRotate();
            }
            if (fpsCtrl != null) {
                exitFps();
                restarRotate();
            }
            checkBtnActives(['#mapBg', '#sceneSetting']);
        }
    });
    window.onresize = function () {
        if (!checkFull()) {
            //要执行的动作
            if (fullScreenState == true) {
                $('.btn-full-screen').css('display', 'block');
                $('.btn-narrow').css('display', 'none');
                $('#fullScreen span').text('全屏');
                fullScreenState = false;
            }
        }
    }
}


//====设备闪烁提示====
function flash(objArray) {
    objArray.forEach(function (obj) {
        obj.on('update', function () {
            obj.style.color = '#FFF000'
            obj.style.opacity = 0.5 + 0.5 * Math.sin(2 * app.elapsedTime / 500);
        }, '每帧改变透明度');
    })
}
function queryDeviceStatus(evt) {
    objArray = evt.data;
    // objArray.forEach(function (deviceobj) {
    //     obj = app.query("#" + deviceobj.ownerCode)[0];
    //     obj.on('update', function () {
    //         obj.style.color = '#FF0000'
    //         obj.style.opacity = 0.5 + 0.5 * Math.sin(2 * app.elapsedTime / 500);
    //     }, '每帧改变透明度');


    // })
    obj = app.query("#" + objArray)[0];
    obj.on('update', function () {
        obj.style.color = '#FF0000'
        obj.style.opacity = 0.5 + 0.5 * Math.sin(2 * app.elapsedTime / 500);
    }, '每帧改变透明度');
}
function reset(objArray) {
    objArray.forEach(function (obj) {
        obj.style.opacity = 1.0;
        obj.style.color = null;
        obj.off('update', null, '每帧改变透明度');
    })
}
var timer = null;
function getTabledata(d) {
    var ygArray = [];
    d.forEach(function (d) {
        var deviceInfo = {
            "设备编号": d.ownerCode,
            "设备名称": d.ownerName,
            "安装位置": d.unitinfo,
        };
        ygArray.push(deviceInfo)
    })
    // 表格数据//创建对象 book
    var tableData = {

        // 列标题
        props: ['设备编号', '设备名称', '安装位置'],
        // 列数据
        items: ygArray
    };
    return tableData;
}
function createPerson(name, age, family) {
    var o = new Object();
    o.name = name;
    o.age = age;
    o.family = family;
    o.say = function () {
        alert(this.name);
    }
    return o;
}
function destroyPanel() {
    var mydiv = document.getElementById('mydiv')
    mydiv.remove();
}
//====================
function updateData(obj) {

    /** ******************* 以下为websoket数据对接 ********************/
    // 对接自有websoket服务器
    if (!webSocket) {
        // 如果网站是 https 则对应 wss
        // 如果网站是 http 则对应 ws 即可
        webSocket = new WebSocket('ws://101.133.214.75:8080/Device_Manager/socket');
        // 建立 websocket 连接成功触发事件
        webSocket.onopen = function () {

        };
        // 接收服务端数据时触发事件
        webSocket.onmessage = function (evt) {
            queryDeviceStatus(evt);
        };
        webSocket.onclose = function (evt) {

            webSocket = null;
        }
    }
}

//接收父级页面数据
function userListener(data) {
    
    buildingStore = data.data;
}

// 监听用户页面传回的数据 并调用 ThingJS 页面方法
window.addEventListener('message', function (e) {
    var _this=this;
    var array;
    var data = e.data;
    var funcName = data.funcName;
    var param = data.param;
    var company_code = e.data.param.company_code
    // 调用 ThingJS 页面方法
    window[funcName](param);
    
    //请求场景url的json文件
    $.ajax({
        type: "GET",
        url:'/uploads/wechat/163607/file/杨浦16/park.json',
        dataType: "json",
        success: function (data) {
            for(let i = 0; i < data.array.length; i++){
                if(company_code === data.array[i].id){
                    campusUrl = data.array[i]
                    _this.changeScene(campusUrl);
                    _this.createWidgets();
                }
            }
        }
    });
});

//父级页面数据处理
function cleanObj(arr, key) {
    var map = {},
        dest = [];
    for (var i = 0; i < arr.length; i++) {
        var ai = arr[i];
        if (!map[ai.min_level]) {
            dest.push({
                min_level: ai.min_level,
                item: [ai]
            });
            map[ai.min_level] = ai;
        } else {
            for (var j = 0; j < dest.length; j++) {
                var dj = dest[j];
                if (dj.min_level == ai.min_level) {
                    dj.item.push(ai);
                    break;
                }
            }
        }
    }
    return dest;
}
function uniq(array) {
    var temp = []; //一个新的临时数组
    for (var i = 0; i < array.length; i++) {
        if (temp.indexOf(array[i]) == -1) {
            temp.push(array[i]);
        }
    }
    return temp;
}
//设备点位标识
// function createDeviceElement(deviceType, floorNum) {
//     removeMark();
//     let data = cleanObj(buildingStore);
//     for (var i = 0; i < data.length; i++) {
//         if (data[i].min_level == floorNum) {
//             let arry = data[i].item;
//             for (var q = 0; q < arry.length; q++) {
//                 if (arry[q].dwtype == deviceType) {
//                     let devicename = arry[q].device_name;
//                     let dwtype = arry[q].dwtype;
//                     var ownercode = arry[q].owner_code
//                     var textAndPictureMarkerHtml =
//                         `<div  class="textAndPictureMarker" onclick="deviceIcon_click('${dwtype}','${floorNum}','${ownercode}')" style="position: absolute;">
// 			<div class="text" style="color: #FF0000;font-size: 12px;text-shadow: white  0px 2px, white  2px 0px, white  -2px 0px, white  0px -2px, white  -1.4px -1.4px, white  1.4px 1.4px, white  1.4px -1.4px, white  -1.4px 1.4px;margin-bottom: 5px;">
// 				`+ devicename + `
// 			</div>
// 			<div class="picture" style="height: 30px;width: 30px;margin: auto;">
// 				<img src="/guide/examples/images/navigation/pointer.png" style="height: 100%;width: 100%;">
// 			</div>
// 		</div>`;
//                     $('#div3d').append($(textAndPictureMarkerHtml));
//                     createUIAnchor(floorNum);
//                 }

//             }
//         }
//     }
// }