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

//创建楼层选择器
function creatFloorChoose() {
    var floorsign =
        `
        <div value='close' onclick="handleSide()"  class ="closeIocn"  id='rightSideSwitch'></div>
        <div id="floorChooseDiv" class="showFloorBtn" style="height:95%">         
        
        
        </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;
                overflow-y: auto;
                cursor:pointer;
                scrollbar-width: none; /* firefox */
                -ms-overflow-style: none; /* IE 10+ */
            }
            .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(/uploads/wechat/163607/file/杨浦16/icons/yCR8dP.png);
                background-repeat:no-repeat;
                background-position:center center;
                position: absolute;
                top: calc(50%);
                right: 0;
            }
            .active{
                background-color:red;
            }
            .showFloorBtn::-webkit-scrollbar {
                display: none;
            }
        </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') {
        
        $('.closeIocn').animate({ right: 48 }, 300);
        $('.showFloorBtn').animate({ right: 0 }, 300);
        //  $('#rightSideSwitch').attr('value', 'open');
        $('#rightSideSwitch').attr('value', 'open').css('background-image', 'url(/uploads/wechat/163607/file/杨浦16/icons/yCRGIf.png)');
    } else if ($('#rightSideSwitch').attr('value') == 'open') {
        $('.closeIocn').animate({ right: 0 }, 300);
        $('.showFloorBtn').animate({ right: -52 }, 300);
        $('#rightSideSwitch').attr('value', 'close').css('background-image', 'url(/uploads/wechat/163607/file/杨浦16/icons/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));
    var cont = 1;
    console.log(darray)
    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));
        }else if (name == "YTWG") {
            var yTVAHtml =
                `<div onclick="icon_click('YTWG',` + s + `)" class="bottomBtn" value='网关'>
				<span class="bottomBtnText">网关<span>
			</div>
            	`;
            $('#bottomBtnsRight').append($(yTVAHtml));
        }else if (name == "YTRU") {
            var yTVAHtml =
                `<div onclick="icon_click('YTRU',` + 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>
    `));
}
//创建设备点位标识
function icon_click(deviceType, floorNum) {
    buildingStore;
    deviceList = [];
    for (var i = 0; i < buildingStore.length; i++) {
        if (floorNum == buildingStore[i].min_level) {
            deviceList.push(buildingStore[i]);
        }
    }
    create_ui(deviceType, floorNum, deviceList);
}