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

// 创建app
var app = new THING.App({
    url: '/api/scene/00c8b14766e1616e3bf14604',
    // url: '/api/scene/e1137071cd763730846f50ba',//常福医院
    background: '/uploads/wechat/163607/file/广西东盟项目/Image/op0.png'
});

app.camera.xAngleLimitRange = [0, 90];// 限制摄像机不看到场景地面以下
$("#div3d").css("cursor", "pointer");// 设置鼠标箭头样式

var miniMapCtrl = null;  // 小地图控件
var panel;//面板控件
var panel_;//多选面板控制
var ui;//设备数据展示面板
var uis = [] //存放面板数据
var uis_array = []//存放面板数据
var uis_list = [] //存放面板数据
var uis_name = {} //存放物体类型数据
var floorID;//楼层id存放
var ev_name = "";
var floorName = '';
var floorName1 = '';
var truck = null;
var panelArr = []; //设备信息存放
var webSocket;//webSocket
var tileLayer1 = null;  // 加入地图背景后选用的图层
var box = null;  // 鼠标点击第一人称行走按钮时，红色盒子提示
var fpsCtrl = null;  // 第一人称行走控件
var cameraInitPos = null;  // 进入第一人称行走前摄像机位置
var fullScreenState = false;  // 全屏
var skyBox = null;  // 天空盒
var hiddenControlTimer = null;  // 隐藏控制按钮计时器
var showControlTimer = null;  // 显示控制按钮计时器
var cameraDistace = [];
var building = null;  // 建筑
var mainPanle;
var restartTime = 5000;  // 自动旋转停止后重启时间间隔
var rotateTimer = null;  // 自动旋转计时器
var sidebar = {
    znyg: false,
    znjk: false,
    znsx: false,
    enterBuilding: false,
    expandBuilding: false,
    deviceShow: false,
    electricalFire: false,
    equipment: false,
    device_add: false
};//设置侧边栏是否选中
var stateArray = [] //记录每次闪烁设备状态参数

// 创建多选按钮数据对象
var dataObj = {
    checkbox: {},
};
var device = null;// 创建设备
var dome;//设备编辑器面板
var ev_object;//设备信息存储
var position;//记录离地高度初始值


var baseURL = "https://s3.ax1x.com/2021/01/28/";
var iconUrl = "/uploads/wechat/163607/file/广西东盟项目/iconfont/";
var filePath = '/uploads/wechat/5oiR5pyJ5pyA6ZW/55qE572R5ZCN5LiN5L+h5L2g5pWw5pWw/file/ScenePreview/';
var api = 'http://121.40.217.77:8081';
// 需要用到的外部文件
var fileArr = [
    "https://www.layuicdn.com/layui/layui.js",
    'https://www.layuicdn.com/layui/css/layui.css',
    filePath + 'assets/css/index.css',  // 功能按钮样式文件
    filePath + 'assets/font-awesome-4.7.0/css/font-awesome.min.css',  // 功能按钮字体样式
    filePath + 'assets/css/myAlert.css',  // 弹出框样式
    filePath + 'assets/css/sweetalert2.min.css',  // 弹出框样式
    filePath + 'assets/js/sweetalert2.all.min.js',  // 弹出框脚本
    filePath + 'assets/js/myAlert.js',  // 弹出框脚本
    filePath + 'assets/js/posTransform.js',  // 不同坐标系经纬度互相转换的脚本文件
    filePath + 'assets/js/expandFloor.js', // 楼层展开脚本
    '/guide/lib/echarts.min.js',
    '/uploads/wechat/163607/file/广西东盟项目/JS/Character.js',//创建人物走动
    '/uploads/wechat/163607/file/广西东盟项目/JS/UIAnchor.js',//UI界面脚本
    '/uploads/wechat/163607/file/广西东盟项目/JS/FloorClick.js',//创建切换楼层脚本
    '/uploads/wechat/163607/file/广西东盟项目/JS/CreateHtml.js',//创建页面元素脚本  
    // '/uploads/wechat/163607/file/广西东盟项目/JS/MainPanel.js',//公共工具功能脚本
    '/uploads/wechat/163607/file/广西东盟项目/JS/RegisterEvent.js',//公共注册事件脚本
];
/**
 * 说明：加载外部文件
 */

THING.Utils.dynamicLoad(fileArr, function () {
    app.on('load', function (ev) {
        // $(".processcontainer").css("display", "none")
        var campus = ev.campus;
        skyBox = app.skyBox;  // 获取天空盒
        app.level.change(ev.campus);  // 切换至园区层级
        ev.campus.azimuth = '180';
        mainPanle = new MainPanel(app);// 界面的类
        mainPanle.createToolsPanel();
        creatFloorChoose();
        //  setupNavpanel();
        // 获取园区在CampusBuilder编辑时保存的地理位置
        let tjsLnglat = app.root.defaultCampus.extraData;
        if (tjsLnglat != undefined && tjsLnglat != null) {
            tjsLnglat = tjsLnglat.coordinates;
            if (tjsLnglat != undefined && tjsLnglat != null) {
                tjsLnglat = tjsLnglat.split(",");
            }
        } else {
            ev.campus.extraData = { coordinates: "116.4641,39.98606" }  // 园区绑定默认经纬度，地图才生效
        }
        createHtml();  // 创建html
        restarRotate();  // 自动旋转
    });
});

/**
 * 查询设备模型列表
 */
function select_device(){
    var url = ""
    var type = ""
    var bool; 
    $.ajax({
        type: "POST",
        url: api + '/thingjs/thingjsDeviceQuery',
        dataType: "json",
        data:{thingjsFloorId:floorID},
        async: false,
        success: function (object) {
            var data = object.data
            for(let i=0;i<data.length;i++){
                if(data[i].bool === "true"){
                    bool = true
                }else{
                    bool = false
                }
                if (data[i].deviceType === 'IPC') {
                    url = 'https://model.3dmomoda.com/models/2DBD1DCD7B5F49BDA43CC6444FC5CBD0/0/gltf'
                    type = "摄像头"
                }
                var abc = app.query('#' + floorID)[0]
                var deviceUuid = app.query('#' + data[i].deviceUuid)[0]
                if(deviceUuid != undefined){
                    deviceUuid.destroy(); 
                }
                
                var device_array = app.create({
                    name: data[i].name,
                    id: data[i].deviceUuid,
                    type: 'Thing',
                    url: url,
                    position: [parseFloat(data[i].position.split(',')[0]),parseFloat(data[i].position.split(',')[1]),parseFloat(data[i].position.split(',')[2])],
                    angle:  parseFloat(data[i].angle.split(',')[1]),
                    parent: abc,
                    scale:  [parseFloat(data[i].scale.split(',')[0]),parseFloat(data[i].scale.split(',')[1]),parseFloat(data[i].scale.split(',')[2])],
                    complete:function(ev){
                        ev.object.userData.bool = bool;
                        ev.object.userData.物体类型 = type;
                    }
                })
            }
        }
    })
}
/*
    点击按钮创建设备
*/
function btnadd_device(type, name, id) {
    var url = ""
    if (type === '摄像头') {
        url = 'https://model.3dmomoda.com/models/2DBD1DCD7B5F49BDA43CC6444FC5CBD0/0/gltf'
    }
    var abc = app.query('#' + floorID)[0]
    device = app.create({
        name: name,
        id: id,
        type: 'Thing',
        url: url,
        position: [0, 0, 0],
        angle: 180,
        parent: abc,
        scale: [1.7, 1.7, 1.7],
        complete:function(ev){
            ev.object.userData.bool = true;
            ev.object.userData.物体类型 = type;
        }
    });
}

//创建设备选择器 --- 创建模型 （按钮） 
function equipment(key) {
    if (key === "设备选择器") {
        if (sidebar.device_add == true) {
            sidebar.device_add = false
            panel_.destroy();
        }
    } else if (key === "模型创建") {
        if (sidebar.equipment == true) {
            sidebar.equipment = false
            panel_.destroy();
        }
    }

    // 界面组件
    panel_ = new THING.widget.Panel({
        titleText: key,  // 可通过font标签设置标题颜色 例如：'<font color="red">我是红色标题</font>'
        closeIcon: false,  // 是否有关闭按钮
        dragable: true,  // 是否可拖拽
        retractable: true,  // 是否可收缩
        opacity: 1,  // 设置透明度
        hasTitle: true,  // 设置标题
        zIndex: 999  // 设置层级
    });
    // 面板定位
    // 左上角——TL/topleft，左下角——BL/bottomleft
    // 右上角——TR/topright，右下角——BR/bottomright
    panel_.position = [0, '40%'];
    $('head').append($(`
        <style>
            .ThingJS_wrap .panel{
                border: 1px solid rgb(24 118 208 / 55%);
                box-shadow: 0px 2px 21px 0px rgb(24 118 208 / 55%);
                background: rgba(2,17,50,0.9);
            }
            .ThingJS_wrap .panel .title{
                background: rgba(27,57,130,1);
                border-bottom:none;
                text-align: center;
            }
            .ThingJS_wrap .panel .title .text{
                padding-left: 0px;
            }
            
            .ThingJS_wrap .panel .main{
                border: none;
            }
            .ThingJS_wrap .panel .dv-input .dv33{
                border-top:none;
            }
        </style>
    `));
    if (key === "设备选择器") {
        // 加载复选框组件 //.caption({ "设备2": "设备2aaa" })可以修改复选框命名
        if (JSON.stringify(dataObj.checkbox) != "{}") {
            var check = panel_.addCheckbox(dataObj, 'checkbox');
            // 复选框需逐个添加change事件
            for (let i = 0; i < check.length; i++) {
                check[i].on('change', function (ev) {
                    app.query("#" + floorID)[0].query('["userData/物体类型"="' + check[i].property + '"]').forEach(function (obj, index) {
                        if (ev) {
                            var myElement = document.getElementById(obj.name);
                            if (!myElement) {
                                equipment_ajax(obj);
                            }
                        } else {
                            if (ev_name == null || ev_name == "") {
                                equipment_ajax(obj);
                            } else {
                                for (let i = 0; i < uis_list.length; i++) {
                                    if (ev_name === uis_list[i].name) {
                                        var box = document.getElementById(uis_list[i].name);
                                        box.remove();
                                        var box1 = document.getElementById(uis_list[i].name);
                                        box1.remove();
                                        uis_array.splice(i, 1)
                                        uis.splice(i, 1)
                                        uis_list.splice(i, 1)
                                        uis_name[obj.userData.物体类型]++
                                    }
                                }
                            }
                        }
                    })
                });
            }
        }
    } else if (key === "模型创建") {
        var html;
        var type;
        var templaet = `
            <div id="flex_content" style="display:flex;margin-bottom: 15px;flex-wrap:wrap;">
            </div>
        `
        $('.ThingJS_UI').append($(templaet));
        $.ajax({
            type: "POST",
            url: api + '/thingjs/queryLocalDevice',
            dataType: "json",
            data: { thingjsFloorId: floorID },
            async: false,
            success: function (obj) {
                var data = obj.data
                if (data.length > 0) {
                    for (let i = 0; i < data.length; i++) {
                        if (data[i].deviceType === 'IPC') {
                            type = '摄像头'
                        }
                        html = `
                            <button class="custom-btn btn-3" onclick="btnadd_device('${type}','${data[i].deviceName}','${data[i].uuid}')">
                                <span>${data[i].deviceName}</span>
                            </button>
                        `
                        $('#flex_content').append($(html));
                    }
                } else {
                    html = `
                        <div style="width: 100%;color: #fff;text-align: center;margin-top: 1rem;">暂无数据</div>
                    `
                    $('#flex_content').append($(html));
                }
            }
        });

        $('head').append($(`
            <style>
                .custom-btn {
                    width: 130px;
                    height: 40px;
                    color: #fff;
                    border-radius: 5px;
                    padding: 10px 25px;
                    font-family: "Lato", sans-serif;
                    font-weight: 500;
                    background: transparent;
                    cursor: pointer;
                    transition: all 0.3s ease;
                    position: relative;
                    display: inline-block;
                }
                /* 3 */
                .btn-3 {
                    background: #4368ca;
                    width: 130px;
                    height: 40px;
                    line-height: 42px;
                    padding: 0;
                    border: none;
                    margin: 0 auto;
                    margin-top: 15px;
                    overflow: hidden;
                }
                .btn-3 span {
                    position: relative;
                    display: block;
                    width: 100%;
                    height: 100%;
                }
                .btn-3:before,
                .btn-3:after {
                    position: absolute;
                    content: "";
                    right: 0;
                    top: 0;
                    background: rgba(2, 126, 251, 1);
                    transition: all 0.3s ease;
                }
                .btn-3:before {
                    height: 0%;
                    width: 2px;
                }
                .btn-3:after {
                    width: 0%;
                    height: 2px;
                }
                .btn-3:hover {
                    background: transparent;
                    box-shadow: none;
                }
                .btn-3:hover:before {
                    height: 100%;
                }
                .btn-3:hover:after {
                    width: 100%;
                }
                .btn-3 span:hover {
                    color: rgba(2, 126, 251, 1);
                }
                .btn-3 span:before,
                .btn-3 span:after {
                    position: absolute;
                    content: "";
                    left: 0;
                    bottom: 0;
                    background: rgba(2, 126, 251, 1);
                    transition: all 0.3s ease;
                }
                .btn-3 span:before {
                    width: 2px;
                    height: 0%;
                }
                .btn-3 span:after {
                    width: 0%;
                    height: 2px;
                }
                .btn-3 span:hover:before {
                    height: 100%;
                }
                .btn-3 span:hover:after {
                    width: 100%;
                }
            </style>
        `));
    }
}
// 单击模型创建面板
app.on(THING.EventType.SingleClick, function (ev) {
    if (ev.picked) {
        if (ev.object.type === "Thing") {
            if (position == undefined) {
                position = ev.object.position[1]
            }
            ev.pickedPosition[1] = 0
            ev_object = "";
            ev_object = ev
            add_dome(ev);//创建设备编辑器
            ev_name = ev.object.name
            if (dataObj.checkbox[ev.object.userData.物体类型] == true) {
                dataObj.checkbox[ev.object.userData.物体类型] = false
            } else {
                equipment_ajax(ev.object)
            }
        }
    }
});

/*
    创建设备编辑器dome
 */
function add_dome(ev) {
    dome = document.getElementsByClassName('widget')
    var userData = ev.object.userData
    if ('bool' in userData) {
        if (userData.bool == true) {
            var object = ev_object.object
            //删除设备编辑器
            delete_dome();
            var widget =
                `
            <div class="widget">
                <div class="widget_title">设备编辑器</div>
                <div class="widget_content">
                    <ul style="width: 20%;text-align: center;">
                        <li class="content_li">设备类别:</li>
                        <li class="content_li">设备编号:</li>
                        <li class="content_li">设备位置:</li>
                        <li class="content_li">设备方向:</li>
                        <li class="content_li">设备大小:</li>
                    </ul>
                    <ul style="width: 80%;text-align: center;">
                        <li class="content_li">
                            <input id="userData" class="content_input" type="text" 
                                value="${object.userData.物体类型}" disabled="disabled">
                        </li>
                        <li class="content_li">
                            <input id="device_id" class="content_input" type="text" 
                            value="${object.id}" disabled="disabled">
                        </li>
                        <li class="content_li" style="display:flex;">
                            <input id="position_1" class="content_input" 
                                type="text" value="${object.position[0]}" 
                                style="width:40%;" onchange="change_dome()" 
                                onkeyup="if(isNaN(value))execCommand('undo')" 
                                onafterpaste="if(isNaN(value))execCommand('undo')">
                            <input id="position_2" class="content_input" 
                                type="text" value="${ev.pickedPosition[1]}" 
                                style="width:20%;" onchange="change_dome()" 
                                onkeyup="if(isNaN(value))execCommand('undo')" 
                                onafterpaste="if(isNaN(value))execCommand('undo')">
                            <input id="position_3" class="content_input" type="text" 
                                value="${object.position[2]}" 
                                style="width:40%;" onchange="change_dome()" 
                                onkeyup="if(isNaN(value))execCommand('undo')" 
                                onafterpaste="if(isNaN(value))execCommand('undo')">
                        </li>
                        <li class="content_li">
                            <input id="angles" class="content_input" type="text" 
                                value="${object.angles[1]}" 
                                onchange="change_dome()" 
                                onkeyup="if(isNaN(value))execCommand('undo')" 
                                onafterpaste="if(isNaN(value))execCommand('undo')">
                        </li>
                        <li class="content_li">
                            <input id="scale" class="content_input" 
                                type="text" value="${object.scale[0]}" 
                                onchange="change_dome()" 
                                onkeyup="if(isNaN(value))execCommand('undo')" 
                                onafterpaste="if(isNaN(value))execCommand('undo')">
                        </li>
                    </ul>
                </div>
                <div class="widget_header">
                    <div>
                        <button class="btn_1" onclick="insert_dome()">保存</button>
                    </div>
                    <div>
                        <button class="btn_2" onclick="delete_dome()">取消</button>
                    </div>
                    <div>
                        <button class="btn_3" onclick="delete_device()">删除</button>
                    </div>
                </div>
            </div>
            `
            $('#div2d').append($(widget));
            $('head').append($(`
                <style>
                    .widget{
                        width: 35rem;
                        position: fixed;
                        border-radius: 5px;
                        bottom: 5.5rem;
                        right: 10px;
                        color: #fff;
                    }
                    .widget_title{
                        width: 100%;
                        text-align: center;
                        padding: 10px; 
                        background: rgba(27,57,130,1);
                        border-radius: 5px 5px 0px 0px;
                    }
                    .widget_content{
                        width: 100%;
                        background: rgba(2,17,50,0.9);
                        display: flex;
                    }
                    .content_li{
                        margin-top: 1rem;
                        margin-bottom: 1rem;
                    }
                    .content_input{
                        width: 98%;
                        padding-left: 10px;
                        border: 1px solid #3486da;
                        background: rgba(27,31,81,0.60);
                        color: #fff;
                        margin-right: 10px;
                    }
                    .widget_header{
                        width: 100%;
                        display:flex;
                        background: rgba(2,17,50,0.9);
                        border-radius: 0px 0px 5px 5px;
                        padding-bottom: 1rem;
                    }
                    .widget_header div{
                        width: 33.33%;
                        text-align: center;
                    }
                    .widget_header div button{
                        width: 78px;
                        height: 32px;
                        color: #ffff;
                        cursor: pointer;
                    }
                    .btn_1{   
                        opacity: 1;
                        background: #2f52ae;
                        border-radius: 6px;
                        border: 0px;
                    }
                    .btn_2{
                        background: transparent;
                        border-radius: 6px;
                        border: 1px solid #dadada;
                    }
                    .btn_3{
                        border: 1px solid #ff4848;
                        color: #ff4848 !important;
                        border-radius: 7px;
                        background: transparent;
                    }
                </style>
            `));


        }
    } else {
        //删除设备编辑器
        delete_dome();
    }

}
/**
 * 将设备编辑器数据保存至数据库
 */
function insert_dome(){
    var object=ev_object.object
    var type = "";
    if(object.userData.物体类型 === '摄像头'){
        type = 'IPC'
    }
    $.ajax({
        type: "POST",
        url: api + '/thingjs/thingjsDeviceRegister',
        dataType: "json",
        data:{
            deviceUuid:object.id,
            name:object.name,
            deviceType:type,
            angle:""+object.angles[0]+","+object.angles[1]+","+object.angles[2]+"",
            bool:object.userData.bool,
            position:""+object.position[0]+","+object.position[1]+","+object.position[2]+"",
            scale:""+object.scale[0]+","+object.scale[1]+","+object.scale[2]+"",
            del:0
        },
        async: false,
        success: function (data) {
            object.destroy();
            delete_dome();
            select_device();
        }
    })
}

function delete_device(){
    var object=ev_object.object
    var type = "";
    if(object.userData.物体类型 === '摄像头'){
        type = 'IPC'
    }
    $.ajax({
        type: "POST",
        url: api + '/thingjs/thingjsDeviceRegister',
        dataType: "json",
        data:{
            deviceUuid:object.id,
            name:object.name,
            deviceType:type,
            angle:""+object.angles[0]+","+object.angles[1]+","+object.angles[2]+"",
            bool:object.userData.bool,
            position:""+object.position[0]+","+object.position[1]+","+object.position[2]+"",
            scale:""+object.scale[0]+","+object.scale[1]+","+object.scale[2]+"",
            del:1
        },
        async: false,
        success: function (data) {
            object.destroy();
            delete_dome();
            select_device();
        }
    })
}
/*
    input输入框change事件
 */
function change_dome() {
    var userData_dome = document.getElementById('userData')
    var angles = document.getElementById('angles')
    var scale = document.getElementById('scale')
    var position_1 = document.getElementById('position_1')
    var position_2 = document.getElementById('position_2')
    var position_3 = document.getElementById('position_3')

    if (userData_dome != null && userData_dome != '') {
        angles.value != null && angles.value != "" ? angles = angles.value : angles = 0;//方向
        ev_object.object.angles = [0, angles, 0];//方向

        scale.value != null && scale.value != "" ? scale = scale.value : scale = 1;//大小
        ev_object.object.scale = [scale, scale, scale];//大小

        position_1.value != null && position_1.value != "" ? position_1 = position_1.value : position_1 = 0;//坐标
        //坐标
        if (position_2.value != null && position_2.value != "") {
            ev_object.pickedPosition[1] = position_2.value
            position_2 = position + parseInt(position_2.value)
        } else {
            ev_object.pickedPosition[1] = 0
            position_2 = position
        }
        position_3.value != null && position_3.value != "" ? position_3 = position_3.value : position_3 = 0;//坐标
        ev_object.object.position = [position_1, position_2, position_3]

    }
    add_dome(ev_object);//创建设备编辑器
}
/*
    删除设备编辑器
*/
function delete_dome() {
    if (dome != undefined) {
        if (dome.length > 0) {
            dome[0].remove()
        }
    }
}

//面板数据调用
function equipment_ajax(object) {
    var myElement = document.getElementById(object.name);
    if (myElement) {
        for (let i = 0; i < uis_list.length; i++) {
            if (object.name === uis_list[i].name) {
                var box = document.getElementById(object.name);
                box.remove();
                var box1 = document.getElementById(object.name);
                box1.remove();
                uis_array.splice(i, 1)
                uis.splice(i, 1)
                uis_list.splice(i, 1)
                uis_name[object.userData.物体类型]++
            }
        }
    } else {
        $.ajax({
            type: "GET",
            url: '/uploads/wechat/163607/file/广西东盟项目/测试.json',
            dataType: "json",
            async: false,
            success: function (data) {
                for (let i = 0; i < data.length; i++) {
                    if (data[i].deviceid === object.id && data[i].devicetype === object.userData.物体类型) {
                        init(object, data[i]);
                    }
                }
            }
        });
    }
}
//删除所有已有的面板
function delete_ui() {
    for (let i = 0; i < uis_array.length;) {
        equipment_ajax(uis_array[i])
    }
}

/*
    查询楼层类型设备
*/
function click_userData() {

    var userData = []
    var user_array = {}
    uis_name = {}
    dataObj.checkbox = {}
    //双击查找当前楼层
    app.query("#" + floorID)[0].query('["userData/物体类型"]').forEach(function (obj) {
        userData.push(obj.userData.物体类型)
        var array = app.query("#" + floorID)[0].query('["userData/物体类型"="' + obj.userData.物体类型 + '"]').length
        uis_name[obj.userData.物体类型] = array
    })
    //数组去重
    for (var i = 0; i < userData.length; i++) {
        for (var j = i + 1; j < userData.length;) {
            userData[i] == userData[j] ? userData.splice(j, 1) : j++;
        }
    }
    userData.forEach(function (obj, index) {
        dataObj.checkbox[obj] = false;
    })
}

window.addEventListener("message", (event) => {
    var that = this;
    // 监听父窗口发送过来的数据向服务器发送post请求
    var name = event.data.name;
    var state = event.data.state;
    if (name === '17楼监控2' || name === '17楼监控1') {
        // app.query(name).forEach(function (obj) {
        //     app.camera.flyTo({
        //         object: obj,
        //         xAngle: 0, // 绕物体自身X轴旋转角度
        //         yAngle: 0, // 绕物体自身Y轴旋转角度
        //         radiusFactor: 5, // 物体包围盒半径的倍数
        //         time: 2 * 1000,
        //         complete: function () {
        //             console.log("飞行结束");
        //         }
        //     });
        //     app.level.change(car);
        // });
    } else {
        stateArray.push(state)
        if (stateArray.length > 1) {
            for (let i = 0; i < stateArray.length; i++) {
                if (stateArray[i - 1] === stateArray[i]) {
                    if (sidebar.deviceShow == true) {
                        sidebar.deviceShow = false
                    } else {
                        sidebar.deviceShow = true
                    }
                    stateArray = [];
                }
            }
        } else {
            sidebar.deviceShow = true
        }
        var devList = []
        var deviceArray = app.query('["userData/物体类型"="' + name + '"]');
        devList.push(deviceArray)
        flash(devList, state);
    }
}, false);


/**
 * 向父窗体(用户主页面)发送消息
 */
function deviceIcon_click(id, name) {
    let funcName = "icon_click";
    var data = { id, name }
    var message = {
        'funcName': funcName, // 所要调用父页面里的函数名
        'param': data
    }
    // 向父窗体(用户主页面)发送消息
    // 第一个参数是具体的信息内容，
    // 第二个参数是接收消息的窗口的源（origin），即"协议 + 域名 + 端口"。也可以设为*，表示不限制域名，向所有窗口发送
    window.parent.postMessage(message, '*');
}

// var floorsign =
//     `
//         <div class="processcontainer" style="z-index: 2021;">  
//             <iframe src="/uploads/wechat/163607/file/广西东盟项目/index.html"></iframe>
//         </div>  
//     `;
// $('#div2d').append($(floorsign));
// $('head').append($(`
//     <style>
//     .processcontainer{  
//         position: fixed;
//         bottom: 3rem;
//         right: 0;
//         left: 0;
//         width: 500px;
//         border:1px solid #3486da;
//         height: 16px;
//         margin: 0 auto;
//         padding: 4px;
        
//     }
//     .processcontainer iframe{
//         position: fixed;
//         width:100%;
//         height: 100%;
//         right: 0;
//         left: 0;
//         bottom: 0;
//         top:0;
//         border: 0px;
//     }
//     </style>
// `));

//====设备闪烁提示====
function flash(objArray, state) {
    var color = ''
    var opacity;
    objArray.forEach(function (obj, index) {
        obj.on('update', function () {
            if (state === 'total') {
                color = sidebar.deviceShow == true ? '#008000' : '#F8F8FF'
            } else if (state === 'error') {
                color = sidebar.deviceShow == true ? '#FFF000' : '#F8F8FF'
            } else if (state === "none") {
                color = '#F8F8FF'
            }

            opacity = sidebar.deviceShow == true ? 0.5 + 0.5 * Math.sin(2 * app.elapsedTime / 500) : 1
            obj.style.alwaysOnTop = true
            obj.style.color = color
            obj.style.opacity = opacity
        }, '每帧改变透明度');
    })
}


function queryDeviceStatus(evt) {
    // debugger
    objArray = evt.data;
    // objArray.forEach(function (deviceobj) {
    //     obj = app.query("#" + deviceobj.ownerCode)[0];
    //     obj.on('update', function () {
    //         obj.style.color = '#FF0000'
    //         obj.style.opacity = 0.5 + 0.5 * Math.sin(2 * app.elapsedTime / 500);
    //     }, '每帧改变透明度');
    // })
    obj = app.query("#" + objArray)[0];
    obj.on('update', function () {
        obj.style.color = '#FF0000'
        obj.style.opacity = 0.5 + 0.5 * Math.sin(2 * app.elapsedTime / 500);
    }, '每帧改变透明度');
}


function reset(objArray) {
    objArray.forEach(function (obj) {
        obj.style.opacity = 1.0;
        obj.style.color = null;
        obj.off('update', null, '每帧改变透明度');
    })
}
// 当前停车位状态
// function showParkingInfo() {
//     var parkingTotalNum = 16;
//     var emptyNum = 3;
//     var parkOption = {
//         title: { text: '测试图表', x: 'center', textStyle: { color: '#cccccc' } },
//         tooltip: {
//             trigger: 'item',
//             formatter: "{a} <br/>{b} : {c} ({d}%)"
//         },
//         legend: {
//             orient: 'vertical',
//             top: 60,
//             x: 'left',
//             data: ['测试', '测试'],
//             textStyle: {
//                 color: '#cccccc'
//             }
//         },
//         calculable: true,
//         series: [
//             {
//                 name: '车位', type: 'pie', radius: '55%', center: ['50%', '60%'],
//                 data: [
//                     { value: parkingTotalNum - emptyNum, name: '测试', itemStyle: { color: "#ff6c00" } },
//                     { value: emptyNum, name: '测试', itemStyle: { color: "#4a8cff" } }
//                 ]
//             }
//         ]
//     };
//     createChart(parkOption, "车位状态");
// }

var timer = null;
// 创建图表
function createChart(option, type) {
    var bottomBackground = document.createElement('div');// 创建背景 div
    bottomBackground.setAttribute('id', 'bottomBackground');
    var bottomDom = document.createElement('div');// 图表 div

    // 设置背景div和图表div的样式
    if (type == "车位状态") {
        var backgroundStyle = 'position: absolute;top:3px;right:3px;height:300px;width:380px;background: rgba(22,24,63,0.3); border-radius:3px';
        var chartsStyle = 'position: absolute;top:10px;right:0px;width:360px;height:250px;margin:0 10px;';


    }
    bottomBackground.setAttribute('style', backgroundStyle);
    bottomDom.setAttribute('style', chartsStyle);
    // echarts 初始化
    var bottomCharts = window.echarts.init(bottomDom);
    bottomCharts.setOption(option);

    // 图表交互 当点击图图表时触发，params是点击位置信息参数
    bottomCharts.on('click', function (params) {
        clearTimeout(timer);
        // 清除上次点击事件产生的场景变化
        cancelOutline();
        reset();
        clearUIAnchorArr();

        // 根据鼠标点击时的参数，控制场景中物体变化
        if (params.name == "测试") {
            app.query("测试======").style.outlineColor = "#4a8cff"
        }

        // 场景中信息显示5s后消失
        timer = setTimeout(function () {
            cancelOutline();
            reset();
            clearUIAnchorArr();
        }, 5000)
    });

    bottomBackground.appendChild(bottomDom);
    app.domElement.appendChild(bottomBackground);// 添加到app dom下
}
function getTabledata(d) {
    var ygArray = [];
    d.forEach(function (d) {
        var deviceInfo = {
            "设备编号": d.ownerCode,
            "设备名称": d.ownerName,
            "安装位置": d.unitinfo,
        };
        ygArray.push(deviceInfo)
    })
    // 表格数据//创建对象 book
    var tableData = {

        // 列标题
        props: ['设备编号', '设备名称', '安装位置'],
        // 列数据
        items: ygArray

    };
    return tableData;
}
function createPerson(name, age, family) {
    var o = new Object();
    o.name = name;
    o.age = age;
    o.family = family;
    o.say = function () {
        alert(this.name);
    }
    return o;
}
//创建监控列表
function createmonitorlist() {
    mycreat();
    function mycreat() {
        let sign1 =
            `   
            <div id="mymonitor" style='position: absolute;top:50px;left:3px;height:330px;width:400px;background: rgba(255,255,255,1); border-radius:0px; margin-top:0px'>
            <div style="">监控设备</div>
            <div id="deviceListTable1" lay-filter="test" ></div>
            </div>
            `;
        $('#div2d').append($(sign1));
    };
}
function destroyMonitor() {
    var mymonitor = document.getElementById('mymonitor')
    mymonitor.remove();
}
function destroyPanel() {
    var mydiv = document.getElementById('mydiv')
    mydiv.remove();
}
//====================
// 创建设备列表
function createDeviceListTable(option, type) {
    mycreat();
    function mycreat() {
        let sign =
            `   
                <div id="mydiv" style='position: absolute;top:50px;left:3px;height:330px;width:480px;background: rgba(255,255,255,1); border-radius:0px; margin-top:0px'>
                <div style="">烟感设备</div>
                <div id="deviceListTable" lay-filter="test" ></div>
                </div>
            `;
        $('#div2d').append($(sign));
        (function () {
            let loginUser = {
                "V_LOGINNAME": "admin",
                "V_PASSWORD": "e10adc3949ba59abbe56e057f20f883e",
            }
            var queryData = {}
            queryData.queryJson = JSON.stringify(loginUser);
            layui.use('table', function () {
                var table = layui.table;
                table.render({
                    elem: '#deviceListTable',
                    size: 'sm', //小尺寸的表格
                    height: 300, //固定值
                    skin: 'nob ',
                    where: queryData //如果无需传递额外参数，可不加该参数
                    , method: 'post' //如果无需自定义HTTP类型，可不加该参数
                    , url: 'http://101.133.214.75:8080/Device_Manager/thingjs/queryYgList',
                    cols: [
                        [{
                            field: 'ownerName',
                            title: '设备名称',
                            fixed: 'left',
                            unresize: true,
                            sort: true
                        }, {
                            field: 'ownerCode',
                            title: '设备编号'
                        }, {
                            field: 'unitinfo',
                            title: '详细地址',
                            sort: true
                        }, {
                            field: 'ownerXh',
                            title: '型号'
                        }
                        ]
                    ]
                    , page: true
                });
                //监听行单击事件（双击事件为：rowDouble）
                table.on('row(test)', function (obj) {
                    app.level.change(app.buildings[0]);
                    var ownerCode = obj.data.ownerCode;
                    deviceID = app.query("#" + ownerCode)[0];
                    // debugger
                    var domDiv = document.getElementById('bottomBackground');
                    if (domDiv) {
                        domDiv.remove();
                    }
                    app.camera.flyTo({
                        object: deviceID,
                        xAngle: 45, // 绕物体自身X轴旋转角度
                        yAngle: -45, // 绕物体自身Y轴旋转角度
                        radiusFactor: 4, // 物体包围盒半径的倍数
                        time: 2 * 1000,
                        complete: function () {
                        }
                    });


                    // debugger
                    // layer.alert(JSON.stringify(ownerCode), {
                    //     title: '当前行数据：'
                    // });
                    //标注选中样式
                    obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
                });
            });
        })();
    };
}


function updateData(obj) {
    // debugger
    /** ******************* 以下为websoket数据对接 ********************/
    // 对接自有websoket服务器
    if (!webSocket) {
        // 如果网站是 https 则对应 wss
        // 如果网站是 http 则对应 ws 即可
        webSocket = new WebSocket('ws://101.133.214.75:8080/Device_Manager/socket');
        // 建立 websocket 连接成功触发事件
        webSocket.onopen = function () {
            console.log("websoket服务器连接成功...");
        };

        // 接收服务端数据时触发事件
        webSocket.onmessage = function (evt) {
            queryDeviceStatus(evt);

        };

        webSocket.onclose = function (evt) {
            console.log("websoket关闭...");
            webSocket = null;
        }
    }
}

class MainPanel {
    constructor(app) {
        this.app = app;
        this.panels_znyg = [];
        this.panels_znjk = [];
        this.panels_znef = [];
        this.toolBar = null;
        this.toolImgs = {};
        this.isExpandBuilding = false;
        this.building = this.app.buildings[0];
    }
    // 创建工具面板
    createToolsPanel() {
        var that = this;
        var baseURL = "http://47.103.74.123/ThingjsIcon/";


        //  this.toolBar = THING.widget.ToolBar({ width: '12%', media: true,captionPos:'hover',opacity:0.5});
        this.toolBar = THING.widget.Banner({ column: 'left', width: '20px', media: true, captionPos: 'hover', opacity: 0.5 });
        this.toolBar.data = sidebar
        this.toolBar.setPosition({ right: 0, top: 60 });


        this.toolImgs.img1 = this.toolBar.addImageBoolean(this.toolBar.data, 'znyg').name('智能烟感').imgUrl(iconUrl + '智能烟感.png');
        this.toolImgs.img2 = this.toolBar.addImageBoolean(this.toolBar.data, 'znjk').name('监控').imgUrl(iconUrl + '摄像头.png');
        this.toolImgs.img3 = this.toolBar.addImageBoolean(this.toolBar.data, 'enterBuilding').name('进入建筑').imgUrl(iconUrl + '建筑.png');
        this.toolImgs.img4 = this.toolBar.addImageBoolean(this.toolBar.data, 'expandBuilding').name('楼层展开').imgUrl(iconUrl + '多楼层.png');
        this.toolImgs.img5 = this.toolBar.addImageBoolean(this.toolBar.data, 'deviceShow').name('建筑透视').imgUrl(iconUrl + '透视.png');

        this.toolImgs.img1.on('change', function (boolValue) { that.onChangeImageButton('znyg', boolValue); });
        this.toolImgs.img2.on('change', function (boolValue) { that.onChangeImageButton('znjk', boolValue); });
        this.toolImgs.img3.on('change', function (boolValue) { that.onChangeImageButton('enterBuilding', boolValue); });
        this.toolImgs.img4.on('change', function (boolValue) { that.onChangeImageButton('expandBuilding', boolValue); });
        this.toolImgs.img5.on('change', function (boolValue) { that.onChangeImageButton('deviceShow', boolValue); });

    }
    addButton(name) {
        var that = this;
        if (this.toolImgs.img6) {
            this.toolImgs.img6.remove()
        }
        if (this.toolImgs.img7) {
            this.toolImgs.img7.remove()
        }
        this.toolImgs.img6 = this.toolBar.addImageBoolean(this.toolBar.data, 'equipment').name('设备选择器').imgUrl(iconUrl + '设备.png');
        this.toolImgs.img6.on('change', function (boolValue) { that.onChangeImageButton('equipment', boolValue); });
        this.toolImgs.img7 = this.toolBar.addImageBoolean(this.toolBar.data, 'device_add').name('模型创建').imgUrl(iconUrl + '设备.png');
        this.toolImgs.img7.on('change', function (boolValue) { that.onChangeImageButton('device_add', boolValue); });
        if (name != "Floor") {
            this.toolImgs.img6.remove();
            this.toolImgs.img7.remove();
        }
    }
    // 处理工具条按钮
    onChangeImageButton(key, boolValue) {
        var that = this;
        if (key == "enterBuilding") { // 进入建筑/室外
            this.goinBuild(boolValue, key);

        } else if (key == "deviceShow") {//展示全部设备隐藏楼层
            var devicList = [];

            var build = app.buildings[0]
            var opacity = build.style.opacity;// 0 为全透明 ，1 为不透明
            build.style.opacity = (opacity > 0.8) ? 0.1 : 1.0;
            if (boolValue) {
                this.goinBuild(boolValue);
                // updateData();
            }
            else {
                flash(devicList, "none");
                reset(devicList);
            }
        }
        else if (key == "expandBuilding") { // 楼层横向展开
            this.app.level.change(app.buildings[0]); // 进入建筑
            if ($(this).hasClass('active')) {
                horizontalExpand(building, 'close');
                verticalExpand(building, 'close');
            }
            if (boolValue) {
                coordinate = [24.7179997, 111.99999690000001, -3.2360001];
                coordinate_1 = [37.5919984, 111.99999690000001, -3.2140001000000002];
                coordinate_2 = [37.6669991, 111.99999690000001, -10.439000400000001];
                coordinate_3 = [24.8049996, 111.99999690000001, -10.434000300000001];
                this.personclick(coordinate, coordinate_1, coordinate_2, coordinate_3)
                this.building.expandFloors({
                    'time': 1000,
                    'length': 4,
                    'horzMode': false,
                    'hideRoof': true,
                    'complete': function () {
                        that.isExpandBuilding = true;
                    }
                })
            } else {
                coordinate = [24.7179997, 59.9999969, -3.2360001];
                coordinate_1 = [37.5919984, 59.9999969, -3.2140001000000002];
                coordinate_2 = [37.6669991, 59.9999969, -10.439000400000001];
                coordinate_3 = [24.8049996, 59.9999969, -10.434000300000001];
                this.personclick(coordinate, coordinate_1, coordinate_2, coordinate_3)
                this.building.unexpandFloors({
                    'time': 500,
                    'complete': function () { that.isExpandBuilding = false; }
                })
            }
        } else if (key == "znyg") {
            if (boolValue) {//智能烟感
                createDeviceListTable();
            } else {
                destroyPanel();
            }
        } else if (key == "equipment") {
            boolValue ? equipment("设备选择器") : panel_.destroy(); //设备选择器
        } else if (key == "device_add") {
            //模型创建
            if (boolValue) {
                equipment("模型创建")
            } else {
                panel_.destroy()
            }
            deviceIcon_click("iframe", "iframe");
        } else {
            if (key == "znjk") { //监控
                // came(boolValue)
                if (boolValue) {
                    createmonitorlist();
                } else {
                    destroyMonitor();
                }
            }
        }
    }
    personclick(coordinate, coordinate_1, coordinate_2, coordinate_3) {
        var car = app.query(new_name)[0];
        if (car != null && car != "") {
            person.playAnimation({ name: new_animationNames, loopType: 'repeat' });
            var path = [coordinate, coordinate_1, coordinate_2, coordinate_3, coordinate];

            car.movePath({
                orientToPath: true, // 物体移动时沿向路径方向
                path: path, // 路径坐标点数组
                time: 50 * 1000, // 路径总时间 毫秒
                delayTime: 1000, // 延时 1s 执行
                lerpType: null, // 插值类型（默认为线性插值）此处设置为不插值
                // 循环类型
                // THING.LoopType.Repeat 不断循环
                // THING.LoopType.PingPong 往复循环
                loopType: THING.LoopType.Repeat,

            })

        }

    }
    // 展开的楼层收回去
    resetExpand() {
        var that = this;
        if (this.isExpandBuilding) {
            this.toolBar.data.expandBuilding = false;
            this.building.unexpandFloors({
                'time': 500,
                'complete': function () { that.isExpandBuilding = false; }
            })
        }
    }

    goinBuild(boolValue) {
        this.resetExpand();
        var name = boolValue ? '返回室外' : '进入建筑';
        this.toolImgs.img3.name(name);
        if (boolValue) {
            this.app.level.change(app.buildings[0]);
            var domDiv = document.getElementById('bottomBackground');
            if (domDiv) {
                domDiv.remove();
            }
        }
        else {
            this.app.level.change(app.root.campuses[0]);
            // showParkingInfo();
        }

    }
}