aiot/3dModeling/zhhry7/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;
                    }
        .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) {
    // test();
    //  delMydiv();
    //  floormen = id.id;
    //  building = app.buildings[0];
    //  var num = floormen.substring(1, 3);
    //  var s = parseInt(num);
    //  var floor = building.floors[s - 1];
    var floor = app.query("#" + id)[0];
    app.level.change(floor);
    // creatbutType(s);
    creatbutElement(id)
}
// 点击右侧侧边栏开关
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');
    }
}
//设备类型div删除
function delMydiv() {
    var mydiv = document.getElementById("bottomBtnsRight")
    if (mydiv) {
        if (mydiv != null)
            mydiv.parentNode.removeChild(mydiv);
    }
}
//设备类型选择器
function creatbutElement(floorNum) {
    if(floorNum == "B1"){
        floorNum = "F-1"
    }
    delMydiv();
    var devType = [];
    var data = cleanObj(buildingStore);
    for (var i = 0; i < data.length; i++) {
        var floorData = data[i]
        var floorId = floorData.min_level;
        var num = floorNum.substring(1, 3);
        var s = parseInt(num)
        if (floorId == s) {
            var dataArray = floorData.item;
            if (dataArray) {
                for (var q = 0; q < dataArray.length; q++) {
                    var eee = dataArray[q].dwtype;
                    devType.push(eee);
                }
            }
            break;
        }
    }
    var darray = uniq(devType);
    var textAndPictureMarkerHtml =
        `<div class="bottomBtnsRight" id="bottomBtnsRight">
		</div>`;
    $('#div2d').append($(textAndPictureMarkerHtml));
    darray.forEach(function (name) {
        if (name == "YTVA") {
            var yTVAHtml =
                `<div onclick="icon_click('YTVA',` + s + `)" class="bottomBtn" value='视频告警监测'>
				<span class="bottomBtnText">视频告警监测<span>
			</div>
            	`;
            $('#bottomBtnsRight').append($(yTVAHtml));
        } else if (name == "YTWP") {
            var yTVAHtml =
                `<div onclick="icon_click('YTWP',` + s + `)" class="bottomBtn" value='水压检测'>
				<span class="bottomBtnText">水压监测<span>
			</div>
            	`;
            $('#bottomBtnsRight').append($(yTVAHtml));
        } else if (name == "YTCI") {
            var yTVAHtml =
                `<div onclick="icon_click('YTCI',` + s + `)" class="bottomBtn" value='环境监测'>
				<span class="bottomBtnText">环境监测<span>
			</div>
            	`;
            $('#bottomBtnsRight').append($(yTVAHtml));
        } else if (name == "YTEF") {
            var yTVAHtml =
                `<div onclick="icon_click('YTEF',` + s + `)" class="bottomBtn" value='电气火灾监测'>
				<span class="bottomBtnText">电气火灾监测<span>
			</div>
            	`;
            $('#bottomBtnsRight').append($(yTVAHtml));
        } else if (name == "YTFC") {
            var yTVAHtml =
                `<div onclick="icon_click('YTFC',` + s + `)" class="bottomBtn" value='消防控制柜'>
				<span class="bottomBtnText">消防控制柜<span>
			</div>
            	`;
            $('#bottomBtnsRight').append($(yTVAHtml));
        } else if (name == "YTSM") {
            var yTVAHtml =
                `<div onclick="icon_click('YTSM',` + s + `)" class="bottomBtn" value='烟感'>
				<span class="bottomBtnText">烟感<span>
			</div>
            	`;
            $('#bottomBtnsRight').append($(yTVAHtml));
        }

        else if (name == "YTLL") {
            var yTVAHtml =
                `<div onclick="icon_click('YTLL',` + s + `)" class="bottomBtn" value='液位'>
				<span class="bottomBtnText">液位<span>
			</div>
            	`;
            $('#bottomBtnsRight').append($(yTVAHtml));
        }
        else if (name == "YTWI") {
            var yTVAHtml =
                `<div onclick="icon_click('YTWI',` + s + `)" class="bottomBtn" value='水浸'>
				<span class="bottomBtnText">水浸<span>
			</div>
            	`;
            $('#bottomBtnsRight').append($(yTVAHtml));
        }
    })
    $('head').append($(`
        <style>
          .bottomBtn{
	        text-align: center;
            left:200px;
	        width: 100px;
    	    height: 31px;
        	margin-top: 7px;
            top:650px;
           // display: inline-block;
        	background-image: url(${baseURL}ySL6MT.png);
                    }
        .bottomBtnsRight{
            position: relative;
         //   top:481px;
            bottom:-459px;
	        justify-content: left;
	      //  width: calc(100% - 203px);
	        height: 40px;
                }
         .bottomBtnText{
            font-size: 12px;
            display: inline-block;
            text-align:center；
            padding-left: 15px;
            color:rgba(255,255,255,0.5);
            letter-spacing: 2px;
            line-height: 36px;
                  }
        </style>
    `));