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

/**
 * 创建UIAnchor界面
 * @param {Object} obj - 创建界面的父物体
 * @param {String} value - 创建界面的类型
 */
function createUIAnchor(floorNum) {
    let anchorCreateJson = {
        type: "UIAnchor",
        //   element: $(".pictureMarker")[0],
        //  position: [100, -10, -21],
        //  parent: app.query('#1F1FS01')[0],
        //  pivotPixel: [parseFloat($(".textAndPictureMarker").css("width")) / 2, parseFloat($(".textAndPictureMarker").css("height"))],
    }
    var s = app.query('#' + floorNum)[0];
    let n = Math.ceil(Math.random() * 10)
    anchorCreateJson.element = $(".textAndPictureMarker")[0];
    //anchorCreateJson.position = [5, 2, n];
    anchorCreateJson.parent = app.query('#' + floorNum)[0];
    anchorCreateJson.pivotPixel = [parseFloat($(".textAndPictureMarker").css("width")) / 2, parseFloat($(".textAndPictureMarker").css("height"))];
    let tempTopCard = app.create(anchorCreateJson);  // 创建顶牌
    tempTopCard.visible = true;  // 设置初始顶牌状态
}
function deviceIcon_click(dwtype, floorNum, ownercode) {
    let funcName = "icon_click";
    var data = {
        'dwtype': dwtype,
        'level': floorNum,
        'id': ownercode
    }
    var message = {
        'funcName': funcName, // 所要调用父页面里的函数名
        'param': data
    }
    // 向父窗体(用户主页面)发送消息
    // 第一个参数是具体的信息内容，
    // 第二个参数是接收消息的窗口的源（origin），即"协议 + 域名 + 端口"。也可以设为*，表示不限制域名，向所有窗口发送
    window.parent.postMessage(message, '*');
}
//======================================================================================================================
// 添加html
function create_html() {
    var sign =
        `<div 
		</div>`
    $('#div3d').append($(sign));
}
function create_element(dName, deviceTypes, floorNum, ownercode) {

    var srcElem = document.getElementById('board');

    if (deviceTypes == 'YTVA') {
        var sign =
            `<div class="sign" id=${dName} style="font-size: 12px;width: 120px;text-align: center;background-color: rgba(0, 0, 0, .6);border: 0px solid #eeeeee;border-radius: 8px;color: #eee;position: absolute;top: 0;left: 0;z-index: 10;display: none;">
			<div class="s1" style="margin: 5px 0px 5px 0px;line-height: 32px;overflow: hidden;">
				<span class="span-l icon" style="float: left;width: 30px;height: 30px;background:url(https://s3.ax1x.com/2021/03/10/6J9mvD.png) no-repeat center;margin: 1px 1px 1px 5px;"></span>
				<span class="span-l font" style="float: left;margin: 0px 0px 0px 1px;">${dName}</span>
			</div>
		</div>`
    } else if (deviceTypes == 'YTWP') {
        var sign =
            `<div class="sign" id=${dName} style="font-size: 12px;width: 120px;text-align: center;background-color: rgba(0, 0, 0, .6);border: 0px solid #eeeeee;border-radius: 8px;color: #eee;position: absolute;top: 0;left: 0;z-index: 10;display: none;">
			<div class="s1" style="margin: 5px 0px 5px 0px;line-height: 32px;overflow: hidden;">
				<span class="span-l icon" style="float: left;width: 30px;height: 30px;background:url(https://s3.ax1x.com/2021/03/10/6J9GPP.png) no-repeat center;margin: 1px 1px 1px 5px;"></span>
				<span class="span-l font" style="float: left;margin: 0px 0px 0px 1px;">${dName}</span>
			</div>
		</div>`
    } else if (deviceTypes == 'YTCI') {
        var sign =
            `<div class="sign" id=${dName} style="font-size: 12px;width: 120px;text-align: center;background-color: rgba(0, 0, 0, .6);border: 0px solid #eeeeee;border-radius: 8px;color: #eee;position: absolute;top: 0;left: 0;z-index: 10;display: none;">
			<div class="s1" style="margin: 5px 0px 5px 0px;line-height: 32px;overflow: hidden;">
				<span class="span-l icon" style="float: left;width: 30px;height: 30px;background:url(https://s3.ax1x.com/2021/03/10/6J935t.png) no-repeat center;margin: 1px 1px 1px 5px;"></span>
				<span class="span-l font" style="float: left;margin: 0px 0px 0px 1px;">${dName}</span>
			</div>
		</div>`
    } else if (deviceTypes == 'YTEF') {
        var sign =
            `<div class="sign" id=${dName} style="font-size: 12px;width: 120px;text-align: center;background-color: rgba(0, 0, 0, .6);border: 0px solid #eeeeee;border-radius: 8px;color: #eee;position: absolute;top: 0;left: 0;z-index: 10;display: none;">
			<div class="s1" style="margin: 5px 0px 5px 0px;line-height: 32px;overflow: hidden;">
				<span class="span-l icon" style="float: left;width: 30px;height: 30px;background:url(https://s3.ax1x.com/2021/03/10/6J91UI.png) no-repeat center;margin: 1px 1px 1px 5px;"></span>
				<span class="span-l font" style="float: left;margin: 0px 0px 0px 1px;">${dName}</span>
			</div>
		</div>`
    } else if (deviceTypes == 'YTFC') {
        var sign =
            `<div class="sign" id=${dName} style="font-size: 12px;width: 120px;text-align: center;background-color: rgba(0, 0, 0, .6);border: 0px solid #eeeeee;border-radius: 8px;color: #eee;position: absolute;top: 0;left: 0;z-index: 10;display: none;">
			<div class="s1" style="margin: 5px 0px 5px 0px;line-height: 32px;overflow: hidden;">
				<span class="span-l icon" style="float: left;width: 30px;height: 30px;background:url(https://s3.ax1x.com/2021/03/10/6J9lVA.png) no-repeat center;margin: 1px 1px 1px 5px;"></span>
				<span class="span-l font" style="float: left;margin: 0px 0px 0px 1px;">${dName}</span>
			</div>
		</div>`
    } else if (deviceTypes == 'YTSM') {
        var sign =
            `<div class="sign" id=${dName} style="font-size: 12px;width: 120px;text-align: center;background-color: rgba(0, 0, 0, .6);border: 0px solid #eeeeee;border-radius: 8px;color: #eee;position: absolute;top: 0;left: 0;z-index: 10;display: none;">
			<div class="s1" style="margin: 5px 0px 5px 0px;line-height: 32px;overflow: hidden;">
				<span class="span-l icon" style="float: left;width: 30px;height: 30px;background:url(https://s3.ax1x.com/2021/03/10/6J9Mbd.png) no-repeat center;margin: 1px 1px 1px 5px;"></span>
				<span class="span-l font" style="float: left;margin: 0px 0px 0px 1px;">${dName}</span>
			</div>
		</div>`
    } else if (deviceTypes == 'YTLL') {
        var sign =
            `<div class="sign" id=${dName} style="font-size: 12px;width: 120px;text-align: center;background-color: rgba(0, 0, 0, .6);border: 0px solid #eeeeee;border-radius: 8px;color: #eee;position: absolute;top: 0;left: 0;z-index: 10;display: none;">
			<div class="s1" style="margin: 5px 0px 5px 0px;line-height: 32px;overflow: hidden;">
				<span class="span-l icon" style="float: left;width: 30px;height: 30px;background:url(https://s3.ax1x.com/2021/03/10/6J9J8f.png) no-repeat center;margin: 1px 1px 1px 5px;"></span>
				<span class="span-l font" style="float: left;margin: 0px 0px 0px 1px;">${dName}</span>
			</div>
		</div>`

    } else if (deviceTypes == 'YTWI') {
        var sign =
            `<div class="sign" id=${dName} style="font-size: 12px;width: 120px;text-align: center;background-color: rgba(0, 0, 0, .6);border: 0px solid #eeeeee;border-radius: 8px;color: #eee;position: absolute;top: 0;left: 0;z-index: 10;display: none;">
			<div class="s1" style="margin: 5px 0px 5px 0px;line-height: 32px;overflow: hidden;">
				<span class="span-l icon" style="float: left;width: 30px;height: 30px;background:url(https://s3.ax1x.com/2021/03/10/6J9Y28.png) no-repeat center;margin: 1px 1px 1px 5px;"></span>
				<span class="span-l font" style="float: left;margin: 0px 0px 0px 1px;">${dName}</span>
			</div>
		</div>`
    } else if (deviceTypes == 'YTWG') {
        var sign =
            `<div class="sign" id=${dName} style="font-size: 12px;width: 120px;text-align: center;background-color: rgba(0, 0, 0, .6);border: 0px solid #eeeeee;border-radius: 8px;color: #eee;position: absolute;top: 0;left: 0;z-index: 10;display: none;">
			<div class="s1" style="margin: 5px 0px 5px 0px;line-height: 32px;overflow: hidden;">
				<span class="span-l icon" style="float: left;width: 30px;height: 30px;background:url('/uploads/wechat/163607/file/杨浦16/icons/YTWG.png') no-repeat center;margin: 1px 1px 1px 5px;"></span>
				<span class="span-l font" style="float: left;margin: 0px 0px 0px 1px;">${dName}</span>
			</div>
		</div>`
    } else if (deviceTypes == 'YTRU') {
        var sign =
            `<div class="sign" id=${dName} style="font-size: 12px;width: 120px;text-align: center;background-color: rgba(0, 0, 0, .6);border: 0px solid #eeeeee;border-radius: 8px;color: #eee;position: absolute;top: 0;left: 0;z-index: 10;display: none;">
			<div class="s1" style="margin: 5px 0px 5px 0px;line-height: 32px;overflow: hidden;">
				<span class="span-l icon" style="float: left;width: 30px;height: 30px;background:url('/uploads/wechat/163607/file/杨浦16/icons/YTRU.png') no-repeat center;margin: 1px 1px 1px 5px;"></span>
				<span class="span-l font" style="float: left;margin: 0px 0px 0px 1px;">${dName}</span>
			</div>
		</div>`
    }


    $('#div3d').append($(sign));
    var newElem = document.getElementById(dName);
    // var newElem = srcElem.cloneNode(true);
    newElem.style.display = "block";
    newElem.setAttribute("onclick", "deviceIcon_click('" + deviceTypes + "','" + floorNum + "','" + ownercode + "')");
    app.domElement.insertBefore(newElem, srcElem);
    return newElem;
}
// 物体顶界面
var ui = null;
var uis = [];
var position = []
var list = []
function create_ui(deviceType, floorNum, deviceList) {
    var deviceTypes = deviceType;
    destroy_ui();
    create_html();
    deviceIcon = [];
    for (var j = 0; j < deviceList.length; j++) {
        if (deviceList[j].dwtype == deviceType) {
            deviceIcon.push(deviceList[j]);
        }
    }
    if (deviceType == 'YTVA') {
        deviceType = '摄像头';
    } else if (deviceType == 'YTWP') {
        deviceType = '水表';
    } else if (deviceType == 'YTCI') {
        deviceType = '环境监测';
    } else if (deviceType == 'YTEF') {
        deviceType = '电气火灾';
    } else if (deviceType == 'YTFC') {
        deviceType = '消防控制柜';
    } else if (deviceType == 'YTSM') {
        deviceType = '烟感';
    } else if (deviceType == 'YTLL') {
        deviceType = '液位';
    } else if (deviceType == 'YTWI') {
        deviceType = '水浸';
    } else if (deviceType == 'YTWG') {
        deviceType = '网关';
    } else if (deviceType == 'YTRU') {
        deviceType = '4G路由';
    }
    let num;
    if (floorNum == -1) {
        num = 'B1'
    } else {
        num = 'F' + floorNum;
    }


    var carList = app.query("#" + num)[0].query(deviceType)
    var carList1 = app.query("#" + num)[0]
    var carList2 = app.query(".Room")[0]
    var url = '';
    var scale; //物体大小
    var parent;
    for (var i = 0; i < deviceIcon.length; i++) {
        // console.log(deviceIcon[i])
        dName = deviceIcon[i].device_name;
        var ownercode = deviceIcon[i].owner_code
        if (carList[i] == undefined) {
            if (deviceType == '烟感') {
                url = '/api/models/641A9B800DE5431E8C84DC290F8EFDE6/0/gltf/'
                scale = [2, 2, 2]
            } else if (deviceType == '摄像头') {
                url = '/api/models/2DBD1DCD7B5F49BDA43CC6444FC5CBD0/0/gltf/'
                scale = [2, 2, 2]
            } else {
                url = '/api/models/5BD84A6968384A3F919DE8B82DD7D7DC/0/gltf/'; //万能圆球
                scale = [0.1, 0.1, 0.1]
            }
            var position_1 = [carList1.position[0], carList1.position[1] + 3, carList1.position[2] + i - 3]

            if (carList2 == undefined) {
                position = position_1
            } else {
                if (num == 'B1') {
                    if (carList2.name == '水泵房') {
                        position = [carList2.position[0], carList2.position[1] + 3, carList2.position[2] + i - 3]
                    } else {
                        position = position_1
                    }
                } else {
                    position = position_1
                }

            }


            // console.log(carList2)

            truck = app.create({
                type: 'Thing',
                name: deviceType,
                url: url,
                id: deviceType + i,
                position: position,
                angle: 0,
                angles: [0, 270, 0],
                scale: scale
            });
            list.push(truck)
            parent = truck

        } else {
            parent = carList[i]
        }
        ui = app.create({
            type: 'UIAnchor',
            parent: parent,
            element: create_element(dName, deviceTypes, floorNum, ownercode),
            localPosition: [0, 2, 0],
            pivot: [0.5, 1] //  [0,0]即以界面左上角定位，[1,1]即以界面右下角进行定位
        });
        uis.push(ui);
    }

}
// 删除界面
function destroy_ui() {
    if (uis) {
        for (var i = 0; i < uis.length; i++) {
            uis[i].destroy();
        }
        uis = [];
    }
    if (list) {
        for (var i = 0; i < list.length; i++) {
            list[i].destroy();
        }
        list = [];
    }

}