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

//创建面板
function uiAnchor(car){
    panel = new THING.widget.Panel({
        // 设置面板宽度
        width: '170px',
        // cornerType 角标样式
        // 没有角标 none ，没有线的角标 noline ，折线角标 polyline
        cornerType: 'none'
    })

    // 绑定物体身上相应的属性数据

    panel.addString(car, 'name').caption('名称');
    panel.addString(car, 'id').caption('ID');
    panel.addString(car.userData, 'power').caption('设备类型');
    
    // 创建UIAnchor面板
    const uiAnchor = app.create({
        // 类型
        type: 'UIAnchor',
        // 父节点设置
        parent: car,
        // 要绑定的页面的 element 对象
        element: panel.domElement,
        // 设置 localPosition 为 [0, 0, 0]
        localPosition: [0, 0.5, 0],
        // 相对于Element左上角的偏移像素值
        pivotPixel: [-16, 180] // 当前用值是角标的中心点
    });  
    return panel;
}
function init(car,data) {
    uis_array.push(car)
    var templaet =
    `
    <div id="${car.name}" style="width: 190px;font-size: 16px;text-align: center;
    background-color: rgba(0,190,255, .3);border: 1px solid #07befc;border-radius: 8px;
    color: #eee;position: absolute;top: 0;left: 0;z-index: 10;display: none;">
        <a href="#" class='liu'>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </a>
        <div class="s1">
            <span class="span-l icon" style="float: left;width: 30px;height: 30px;
            background:url(${data.iconUrl}) no-repeat center;
            margin: 1px 1px 1px 5px;"></span>
            <span class="span-l font" style="float: left;margin: 0px 0px 0px 3px;">${data.devicetitle}</span>
        </div>
        
    </div>
    `
    //<span class="span-r point" style="float: right;width: 12px;height: 12px;background-color: #18EB20;border-radius: 50%;margin: 10px 5px 10px 0px;"></span>
    //<div class="point-top" style="position: absolute;top: -7px;right: -7px;background-color: #3F6781;width: 10px;height: 10px;border: 3px solid #eee;border-radius: 50%;"></div>
    $('#div3d').append($(templaet));
    var html;
    Object.keys(data.params).forEach(function(key){
        html = `
        <div class="s2">
            <span class="span-l font1" style="width: 60px;"> ${key}：</span>
            ${key === '实时画面' ? 
                `<video class="${car.name}" style="width:40px;float: left;
                margin: 0px 10px 0px 10px;" controls preload="true" autoplay muted>
                </video>` 
                : `<span class="span-l font2" style="float: left; width: 70px;
                    background-color: ${
                        data.params[key] === '在线' ? "#18EB20" :
                        data.params[key] === '离线' ? "red" : 
                        data.params[key] === '异常' ? "yellow" : ""
                    };">
                ${ data.params[key]}</span>`
            }
        </div>
        `
        $('#'+car.name).append($(html));  
    })
    // var name = document.getElementsByClassName(car.name);
    // name.setAttribute("onclick", "deviceIcon_click('"+car.id+"','"+car.name+"')");
    $('head').append($(`
        <style>
            .s1{
                margin: 5px 0px 5px 0px;
                line-height: 32px;
                overflow: hidden;
            }
            .font1{
                float: left;
                margin: 0px 10px 0px 10px;
            }
            .s2{
                margin: 5px 0px 10px 0px;
                line-height: 18px;
                font-size: 10px;
                overflow: hidden;
            }
            @keyframes fade-in {  
                0% {opacity: 0;}/*初始状态 透明度为0*/  
                40% {opacity: 0;}/*过渡状态 透明度为0*/  
                100% {opacity: 1;}/*结束状态 透明度为1*/  
            }  
            @-webkit-keyframes fade-in {/*针对webkit内核*/  
                0% {opacity: 0;}  
                40% {opacity: 0;}  
                100% {opacity: 1;}  
            }  
            #board {    
                padding-right: 10px;
                animation: fade-in;/*动画名称*/  
                animation-duration: 0.5s;/*动画持续时间*/  
                -webkit-animation:fade-in 0.5s;/*针对webkit内核*/  
            }  
            .liu{
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    display: inline-block;
                    // padding: 25px 30px;
                    // margin: 40px 0;
                    left: 0;
                    color: #03e9f4;
                    text-decoration: none;
                    text-transform: uppercase;
                    transition: 0.5s;
                    letter-spacing: 4px;
                    overflow: hidden;
                    // margin-right: 50px;
            }
            .liu:nth-child(1) {
                filter: hue-rotate(270deg);
            }
            .liu:nth-child(2) {
                filter: hue-rotate(110deg);
            }
            .liu span {
                position: absolute;
                display: block;
            }
            .liu span:nth-child(1) {
                top: 0;
                left: 0;
                width: 100%;
                height: 2px;
                background: linear-gradient(90deg, transparent, #03e9f4);
                animation: animate1 1s linear infinite;
            }
            @keyframes animate1 {
                0% {
                    left: -100%;
                }
                50%,
                100% {
                    left: 100%;
                }
            }
            .liu span:nth-child(2) {
                top: -100%;
                right: 0;
                width: 2px;
                height: 100%;
                background: linear-gradient(180deg, transparent, #03e9f4);
                animation: animate2 1s linear infinite;
                animation-delay: 0.25s;
            }
            @keyframes animate2 {
                0% {
                    top: -100%;
                }
                50%,
                100% {
                    top: 100%;
                }
            }
            .liu span:nth-child(3) {
                bottom: 0;
                right: 0;
                width: 100%;
                height: 2px;
                background: linear-gradient(270deg, transparent, #03e9f4);
                animation: animate3 1s linear infinite;
                animation-delay: 0.5s;
            }
            @keyframes animate3 {
                0% {
                    right: -100%;
                }
                50%,
                100% {
                    right: 100%;
                }
            }
            .liu span:nth-child(4) {
                bottom: -100%;
                left: 0;
                width: 2px;
                height: 100%;
                background: linear-gradient(360deg, transparent, #03e9f4);
                animation: animate4 1s linear infinite;
                animation-delay: 0.75s;
            }
            @keyframes animate4 {
                0% {
                    bottom: -100%;
                }
                50%,
                100% {
                    bottom: 100%;
                }
            }
        </style>
    `));
    ui = app.create({
        type: 'UIAnchor',
        parent: car,
        element: create_element(car),
        localPosition: [0, 2, 0],
        pivot: [0.5, 1] //  [0,0]即以界面左上角定位，[1,1]即以界面右下角进行定位
    });
    uis.push(ui);
    uis_list.push({name:car.name})
    if(car.userData.物体类型){
        uis_name[car.userData.物体类型]--
        // console.log(uis_name[car.userData.物体类型])
        if(uis_name[car.userData.物体类型] == 0){
            ev_name = ""
            dataObj.checkbox[car.userData.物体类型] = true
        }
    }
}

function create_element(car) {
    var srcElem = document.getElementById(car.name);
    var newElem = srcElem.cloneNode(true);
    newElem.style.display = "block";
    app.domElement.insertBefore(newElem,srcElem);
    return newElem;
}