ThingJS-securityHtml/广西东盟项目/JS/FloorClick.js

//创建楼层选择器
function creatFloorChoose() {
    var floorsign =
    `
    <div id="floorChooseDiv" class="showFloorBtn">         

        <div value='close' onclick="handleSide()"  class ="closeIocn"  id='rightSideSwitch'></div>
    </div>
    `;
    

    $('#div2d').append($(floorsign));
    var car = app.query(".Floor")

    var html = ``
    for(let i = 0 ; i < car.length; i++){
        html +=
        `
        <div onclick="floorclick('${car[i].id}')" class = "showFloorBtns" id='${car[i].id}'>${car[i].id}</div> 
        `
    }
    $('#floorChooseDiv').append($(html));
    
    $('head').append($(`
        <style>
        .showFloorBtns{
            margin-bottom:6px;
            border:1px solid rgb(24,118,208);
            border-radius:4px;
            text-align:center;
            height:28px;
            line-height:28px;
            width:40px;
            color:rgba(255,255,255,0.5);
            background-color:rgba(24,144,255,0.3);
            //  display:inline-block;
        }
        .showFloorBtn{
            position: absolute;
            // top:10px;
            top:calc(2%);
            right:-52px;
            // height:800px;
            width:50px;
            border-radius:0px;
            margin-top:0px;
            cursor:pointer;
        }
        .closeIocn{
            //  margin-bottom:6px;
            //  border:1px solid rgb(24,118,208);
            border-radius:4px;
            text-align:center;
            height:30px;
            line-height:28px;
            width:40px;
            color:rgba(255,255,255,0.5);
            background-image: url(https://s3.ax1x.com/2021/01/29/yCR8dP.png);
            background-repeat:no-repeat;
            background-position:center center;
            position: absolute;
            top: calc(50%);
            left: -35px;
        }
        .active{
            background-color:red;
        }
        </style>
    `));
}

//楼层切换
function floorclick(id) {
    var _this = this;
    showAllPanels();
    reset();
    var floor = app.query("#" + id)[0];
    delete_ui();
    sidebar.equipment = false;
    floorID = id;//将当前楼层存放floorID
    click_userData();//调用获取当前楼层设备类型数据
    app.level.change(floor);
    app.query("#" + id)[0].query('.Thing').forEach(function (obj){
        // console.log(obj)
        var car = app.query("#"+obj.id)[0];
        // panelArr.push(uiAnchor(car));
    })
    
    $.ajax({
        type: "GET",
        url:'/uploads/wechat/163607/file/广西东盟项目/JSON/Goods.json',
        dataType: "json",
        async: false,
        success: function (data) {
            for(let i = 0 ; i < data.array.length; i++){
                var array = data.array[i]
                if(id === array.floorID){
                    _this.createTruck(array);
                }
            }
        }
    });
}
// 销毁面板
function showAllPanels() {
	panelArr.forEach(function (car) {
		car.destroy();
	});
}

function createTruck(data) {
    // 创建Thing
    truck = app.create({
        type: data.type,
        name: data.name,
        url: data.url,
        id: data.id,
        position: data.position,
        angle: 0,
        angles: data.angles,
        scale: data.scale
    });
    if(data.uiAnchor == true){
        panelArr.push(uiAnchor(truck));
    }
}
function reset() {
    app.query(/thing/).forEach(function (obj){
        // console.log(obj)
        obj.destroy();
        obj = null;
    })
}

// 点击右侧侧边栏开关
function handleSide() {
    if ($('#rightSideSwitch').attr('value') == 'close') {
        $('.showFloorBtn').animate({ right: 0 }, 300);
        //  $('#rightSideSwitch').attr('value', 'open');
        $('#rightSideSwitch').attr('value', 'open').css('background-image', 'url(https://s3.ax1x.com/2021/01/29/yCRGIf.png)');
    } else if ($('#rightSideSwitch').attr('value') == 'open') {
        $('.showFloorBtn').animate({ right: -52 }, 300);
        $('#rightSideSwitch').attr('value', 'close').css('background-image', 'url(https://s3.ax1x.com/2021/01/29/yCR8dP.png)');
        //  $('#rightSideSwitch').attr('value', 'close');
    }
}