bigscene/service/static/js/edit.js

var ceshi = 'http://space3d.4dage.com/back';

//新编辑界面
var EditTools = function (n) {
    //main2018 里面的主要对象
    this.n = n;
    //当前状态	
    this.atPanel = null;
    //场景信息
    this.sceneInformation = new SceneInformation();
    //热点
    this.hotpoint = new Hotpoint();
    //导览
    this.editGuide = new EditGuide();
    //音乐
    this.editMiuse = new EditMiuse();
    //初始化界面
    this.init();
}
EditTools.prototype.init = function () {
    this.hotpoint.init(this.n);

    var that = this;
    this.saveAll();
    this.active();
    //请求数据someData.js
    $.ajax(g_Prefix + "data/" + window.number + "/someData.json" + "?" + Date.now(), { dataType: "json" })
        .done(function (data) {
            //创建导览
            that.editMiuse.init(data);
            //请求完someData.js 之后再请求data2.js
            data2(data, that.sceneInformation.init);
        })
    //请求热点数据 data2.js
    function data2(data, callback) {
        $.ajax(g_Prefix + "data/" + window.number + "/data2.js" + "?" + Date.now(), { dataType: "json" })
            .done(function (data2) {
                callback(data, data2);
                // fyz 初始化导览需要两部分数据, 其中data2为data.js中的数据
                that.editGuide.init(data, data2);
            }).fail(
                callback(data, data2)
            )
    }
    $("body").on("click", function () {
        $(".DelConfirm").removeClass("active");
    })

}
//点击的时候激活状态
EditTools.prototype.active = function () {
    var that = this;
    var confirmSnap = $(".confirmSnap.innerBtn");
    var snapshotGui = $(".snapshotGui.overlayGui");
    $('.toolBottom .toolLeft li').click(function () {
        var name = $(this).data("name");
        $('.toolLeft li[data-name=' + name + ']').addClass("active").siblings().removeClass("active");
        $('.toolRight .' + name).removeClass("hide").siblings().addClass("hide");
        that.atPanel = name;
        if (name === "screen") {
            confirmSnap.removeClass("hide");
            snapshotGui.show();
        } else {
            confirmSnap.addClass("hide");
            snapshotGui.hide();
        }

    })

    //滚动阻止事件
    $(".toolRight div.content").on("mousewheel", function (event) {
        event.stopPropagation()
    });
    // 输入框阻止事件
    $('.toolRight').on('keydown', function (ev) {
        ev.stopPropagation();
    })

}
//保存按钮
EditTools.prototype.saveAll = function () {
    var that = this;

    $('#save').on('click', function () {
        $(".edit-loading").removeClass("hide");
        //导览的数据
        var guides = Array.from($('.tourList ul li')).map(function (dom) {
            return dom.data
        })
        var hots = {}
        Array.from($('.spotList ul li')).forEach(function (dom) {
            hots[dom.hotAttribute.belongHot.sid] = {
                position: {
                    x: dom.hotAttribute.position.x,
                    y: dom.hotAttribute.position.y,
                    z: dom.hotAttribute.position.z
                },
                rotation: {
                    x: dom.hotAttribute.rotation.x,
                    y: dom.hotAttribute.rotation.y,
                    z: dom.hotAttribute.rotation.z
                },
                infoAttribute: dom.infoAttribute
            }
        })

        var info = {
            name: $('#pjtName').val(),
            summary: $('#info-summary').val(),
            backgroundMusic: $('#query-bgm').attr('href'),
            hoticon: JSON.parse($(".hotStyle-item li.active").attr("data-val")),
            camera_start: $('#camera-start')[0].data,
            loadlogo: $("#loadlogo").is(':checked'),
            special: $("#g_specialScene").is(':checked'),
            vision_version: $("#twoData").is(':checked') ? "1.1.562.17209" : false,
            /************************************** 方奕卓 场景可配置项 ******************************************/
            hotImageScale: $("#hotImgScale").is(':checked'),  // 热点图片可放大
            hideFloorMarker: $("#hideFloorMarker").is(':checked'),  // 地面标记
            hideMouseMarker: $("#hideMouseMarker").is(':checked'),  // 鼠标标记
            floorMarkerColor: $('#floorMarkerColor').val(),      // 地面/导览标志颜色
            mouseMarkerColor: $('#mouseMarkerColor').val(),      // 鼠标标志颜色
            momentTour: $('#tourSwitch input').is(':checked') ? 'black' : 'walk',   // 导览瞬间过渡
            showHotListSta: $('#hotListSwitch input').is(':checked'),   // 开启热点列表
            hotIconScale: $('#hotIconScale input').val(),      // 热点缩放
            supportsVR: $('#VRSwitch input').is(':checked'),   // 开启VR功能
        }

        info.weixinDesc = $('#weixin-summary').val();
        $.ajax({
            method: 'POST',
            url: ceshi + '/savesetting',
            data: {
                hots: hots,
                name: number,
                guides: guides,
                info: info,
                tourAudio: that.editGuide.tourAudio
            },
            success: function (data) {
                if (data.code === 200) {
                    location.reload()
                }
            }
        })
    });
}


//场景信息编辑
var SceneInformation = function () {
}
SceneInformation.prototype.init = function (data, data2) {
    var $options = $('.hotStyle-item li');
    var $loadlogo = $("#loadlogo");
    var $hotImageScale = $("#hotImgScale");
    var $hideFloorMarker = $("#hideFloorMarker");
    var $hideMouseMarker = $("#hideMouseMarker");
    var $g_specialScene = $("#g_specialScene");
    var $twoData = $("#twoData");

    /*******************方奕卓 其他项需要用到data来初始化, 故一并放到这里 ******************/
    let momentTour = $('#tourSwitch input');   // 导览瞬间过渡开关
    let hotListSwitch = $('#hotListSwitch input');   // 热点列表开关
    let hotIconScale = $('#hotIconScale input');  // 热点图标缩放
    let VRSwitch = $('#VRSwitch input');    // VR功能开启
    /***********************************************************************************/

    $(".model-title2").text(data.model.name);
    $('#pjtName').val(data.model.name);
    $('#info-summary').val(data.model.summary);
    if (data2) $('#weixin-summary').val(data2.weixinDesc);

    for (var i = 0; i < $options.length; i++) {
        if ($options.eq(i).attr('data-val') === JSON.stringify(data.hoticon)) {
            $options.eq(i).addClass("active").siblings().removeClass("active");
        }
    }

    $('#camera-start')[0].data = data.model.camera_start;

    /*************方奕卓 其他项的初始化操作 ************/
    initColorElem(data);
    addListener();  // 给其他元素绑定事件
    if (data.momentTour === 'black') {
        momentTour.prop('checked', true);
    }
    if (data.showHotListSta === 'true') {
        hotListSwitch.prop('checked', true);
    }
    if (data.hotIconScale && parseFloat(data.hotIconScale) < 1.5 && parseFloat(data.hotIconScale) > 0.3) {
        hotIconScale.val(parseFloat(data.hotIconScale));
    }
    if(data.supportsVR === 'true'){
        VRSwitch.prop('checked', true);
    }
    /************************************************/

    //隐藏公司logo
    if (data.loadlogo) {
        $loadlogo[0].checked = true
        showLogo();
    }

    // 热点图片放大
    if (data.hotImageScale === 'true') {
        $hotImageScale[0].checked = true
    }

    // 隐藏地面标记
    if (data.hideFloorMarker === 'true') {
        $hideFloorMarker[0].checked = true
    }

    // 隐藏鼠标标记
    if (data.hideMouseMarker === 'true') {
        $hideMouseMarker[0].checked = true
    }

    //特殊大场景
    if (data.special === "true" || data.model.special) {
        $g_specialScene[0].checked = true
    }

    //启动二代的数据
    if (data.vision_version === "1.1.562.17209" || data.model.vision_version) {
        $twoData[0].checked = true
    }

}

function initColorElem(data, elem) {
    let $floorMarkerColor = $('#floorMarkerColor');
    let $mouseMarkerColor = $('#mouseMarkerColor');
    let $floorMarkerColorTex = $('#floorMarkerColorTex');
    let $mouseMarkerColorTex = $('#mouseMarkerColorTex');

    var colorRe = /^#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})$/;

    data.floorMarkerColor ? $floorMarkerColor.val(data.floorMarkerColor) : $floorMarkerColor.val('#4bcdfc');
    data.mouseMarkerColor ? $mouseMarkerColor.val(data.mouseMarkerColor) : $mouseMarkerColor.val('#4bcdfc');
    $floorMarkerColor.on('change', function (e) {
        $('#floorMarkerColorTex').attr('placeholder', e.target.value)
    })
    $floorMarkerColorTex.on('blur keydown', function (e) {
        (e.type === 'blur' || e.type === 'keydown' && e.keyCode === 13) && setColor(e, $floorMarkerColor, this);
    })
    $mouseMarkerColor.on('change', function (e) {
        $('#mouseMarkerColorTex').attr('placeholder', e.target.value)
    })
    $mouseMarkerColorTex.on('blur keydown', function (e) {
        (e.type === 'blur' || e.type === 'keydown' && e.keyCode === 13) && setColor(e, $mouseMarkerColor, this);
    })

    function setColor(e, colorElem, inputElem) {
        var isColor = colorRe.test(e.target.value);
        isColor && colorElem.val(e.target.value);
        // isColor ? colorElem.val(e.target.value): (inputElem.placeholder = colorElem.val());
    }

}

function addListener(){
    // let customizeHot = $('#customizeHot');        // 自定义热点
    // customizeHot.on('click', function(){
    // })
}


//设置初始界面
function getSeft(seft) {
    $('#camera-start').on('click', function () {
        var snap = JSON.parse("{" + seft.getSnapAngleInfo() + "}")
        this.data.camera.quaternion = snap.metadata.camera_quaternion;
        this.data.pano.uuid = snap.metadata.scan_id;

        var ev = document.createEvent("MouseEvent");//点击截取视图
        g_snapShotWidth = 240;
        g_snapShotHeight = 118;
        window.screenSta = 'startScreen';
        ev.initMouseEvent("snapshotBegin", true, true, document.defaultView, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
        ev.__callback = function (imgData, info) {
            initialPicture(imgData, info)
        }.bind(this);
        window.dispatchEvent(ev);
    });
    //上传图片
    function initialPicture(imgData) {
        uploadImg(imgData, function (rs) {
            if (rs.code === 200) {
                $(".shotImg.innerBtn").css("background-image", "url('//" + rs.content + "')")
            }
        }) 
    }
}


//热点编辑
var Hotpoint = function () {
    this.spotList = $(".spotList");
    this.hotpointDetail = $("#hotpointDetail");  // fyz 导览编辑页面同样采取热点编辑的样式, 这里确保只查找到热点编辑
}
Hotpoint.prototype.init = function (n) {
    this.active();
    this.addmedia();
    this.addMusic();
    this.addModel();
    this.addwebPack();
    this.saveHot();
    var that = this;

    let hotIconScale = $('#hotIconScale');


    //点击添加热点按钮
    $('#addHotSpots').on("click", function () {//点击添加热点
        g_HotStatus = g_HotStatus === "add" ? null : "add";
        $("#player").css("cursor", "cell");
    });
    //点解热点列表删除按钮
    this.spotList.on("click", function (e) {
        var target = $(e.target);
        if (target.hasClass("del")) {
            e.stopPropagation();
            target.siblings(".DelConfirm").addClass("active");
            that.spotList.find("i").text(that.spotList.find("ul li").length);
        } else {
            if (target.hasClass("DelConfirm")) {
                e.stopPropagation();
                that.remHot(target, n);
            } else {
                //点击热点列表弹出编辑热点窗口
                if (target.hasClass("title") || target.hasClass("icon")) {
                    that.editHot(target)
                }
            }
        }
    });

    //点击热点编辑窗口右上角的关闭按钮
    this.hotpointDetail.find("a.close, button.cancel").on("click", function () {
        that.hotpointDetail.addClass("atRight");
    });

    //遍历热点 初始话加载热点数据
    for (var i = 0; i < g_HotMeshes.length; i++) {
        this.spotList.children("ul").append(this.addHotList(g_HotMeshes[i], i));
    }
    this.spotList.find("i").text(g_HotMeshes.length);
    // 初始话的时候把热点信息添加到对应的热点中
    $.ajax(g_Prefix + "data/" + window.number + "/hot/js/data.js" + "?" + Date.now(), { dataType: "json" })
        .then(function (infos) {
            Object.keys(infos).forEach(function (key) {
                that.spotList.find("ul li[data-spid=" + key + "]")[0] && (that.spotList.find("ul li[data-spid=" + key + "]")[0].infoAttribute = infos[key])
            })
        })
}
//显示编辑热点的窗口和初始化热点窗口的数据
Hotpoint.prototype.editHot = function (target) {
    this.hotpointDetail.removeClass("atRight");
    $("#hotpointDetail .audio.mediaUpload").find("input").val('');  // 点击编辑导览清空上一次文件
    var playIcon = '139.159.225.37:85/images/play.png';
    var $layout = $("#hotpointDetail")[0];
    $layout.targetDOM = target.closest("li")[0];
    var info = $layout.targetDOM.infoAttribute || {}

    info.title = info.title || '';
    info.content = info.content || '';
    info.iframe = info.iframe || [];
    info.model = info.model || [];
    info.images = info.images || [];
    info.video = info.video || [];

    var iframesHTML = info.iframe.map(function (iframe) {
        return this.inputList("请填写网页链接", iframe)
    }.bind(this))

    var modulesHTML = info.model.map(function (module) {
        return this.inputList("请填写网页链接", module)
    }.bind(this))

    var imagesHTML = info.images.map(function (image) {
        return '<div><a class=" result success"><span></span><img src="//' + image + '"></a></div>'
    })

    var videosHTML = info.video.map(function (ly) {
        var imgDom = (!ly.img || ly.img === "undefined") ? '' : 'success';
        var imgUrl = (!ly.img || ly.img === "undefined") ? playIcon : ly.img;
        return '<div><a class=" result success"><span></span><img class="play-video" videoURL="//' + ly.url + '" src="//' + imgUrl + '"></a  ><span class="upload-thum ' + imgDom + ' result" attr-thum="' + ly.img + '">上传封面<i><input type="file"></i></span></div>'
    })

    this.hotpointDetail.find(".name > input").val(info.title);
    this.hotpointDetail.find(".editText").val(info.content);
    this.hotpointDetail.find(".photo .list").html(imagesHTML);
    this.hotpointDetail.find(".video .list").html(videosHTML);
    this.hotpointDetail.find(".model .list").html(modulesHTML);
    this.hotpointDetail.find(".webPage .list").html(iframesHTML);
    let bgName = info.bgName || '热点背景音乐';
    if (info.backgroundMusic) {
        this.hotpointDetail.find(".audio .playBox").removeClass("hide");
        this.hotpointDetail.find("#upload-hotBgm").attr('data-hotBgm', info.backgroundMusic)
        this.hotpointDetail.find(".audio .playBox a").attr("href", "//" + info.backgroundMusic);
        this.hotpointDetail.find('#hotBgName')[0].innerHTML = bgName;
        this.hotpointDetail.find(".audio .submit").text("替换");
    } else {
        this.hotpointDetail.find(".audio .playBox").addClass("hide");
        this.hotpointDetail.find("#upload-hotBgm").removeAttr('data-hotBgm')   // 没有背景音乐,则移除该属性, 避免其他热点的干扰
    }

}
//添加图片和视频
Hotpoint.prototype.addmedia = function () {
    // 视频预览控制
    var $videoLayout = $('.fun-view-video')
    $videoLayout.find('span').on('click', function () {
        $videoLayout.hide();
        $videoLayout.find('video').attr('src', '')[0].pause()
    });

    // 图片加载回调
    function imageSuccess(file) {
        if (!/image\/\w+/.test(file.type)) {
            alert("文件必须为图片！");
            return false;
        }
        if (!restrictedSize(file, 2)) {
            return false;
        }

        var img = new Image()
        img.src = URL.createObjectURL(file);
        return img
    }

    // 视频加载回调
    function videoSuccess(file, $elayout) {
        if (!/video\/\w+/.test(file.type)) {
            alert("视频必须为map4格式！");
            return false;
        }

        $elayout.append('<span class="upload-thum">上传封面<i><input type="file"></i></span>')

        return '<img src="./images/play.png" class="play-video" videoURL="' + URL.createObjectURL(file) + '">'
    }

    // 视频封面回调
    function thumSuccess(file, $elayout, $seft) {
        if (!/image\/\w+/.test(file.type)) {
            alert("文件必须为图片！");
            return false;
        }
        if (!restrictedSize(file, 2)) {
            return false;
        }

        $seft.closest('div').find('img').attr('src', URL.createObjectURL(file));
    }

    // 图片与视频加载
    function fileHandle() {
        var $seft = $(this)
        var $layout = $seft.closest("li");
        var type = $seft.parent().attr('data-type');
        var file = this.files[0];
        var $din = $(document.createElement('div'));
        var fnc = type === 'photo' ? imageSuccess :
            type === 'video' ? videoSuccess : thumSuccess
        var $dom = fnc(file, $din, $seft)


        if (type === 'photo' || type === 'video') {
            if (!$dom) return $seft.val('');
            var $addLayout = $(document.createElement('a'));
            var $addInput = $('<input type="file">')
            var $close = $(document.createElement('span'));
            $addInput[0].files = this.files;
            $addLayout.append($addInput)
            $addLayout.append($close);
            $addLayout.append($dom);
            $addLayout.addClass("result");
            $din.prepend($addLayout);
            $layout.find('.edit-fun-images').append($din);
        }
    };
    // 图片与视频加载
    $('.upload, .edit-fun-images').on('change', function (ev) {
        if (ev.target.tagName.toUpperCase() === 'INPUT') {
            fileHandle.call(ev.target)
        }
    })
    $('.edit-fun-images').on('click', function (ev) {
        var $tag = $(ev.target)
        var tagName = ev.target.tagName.toUpperCase()
        if (tagName === 'SPAN') {
            var $resf = $(ev.target)
            $resf.parent().parent().remove()
        } else if (tagName === 'IMG' && $tag.hasClass('play-video')) {
            $videoLayout
                .css('display', 'flex')
                .find('video')
                .attr('src', $tag.attr('videoURL'))[0]
                .play()
        }
    })
}
//选择热点的样式
Hotpoint.prototype.active = function () {
    $(".hotStyle-item li").on('click', function () {
        $(this).addClass('active').siblings().removeClass('active');
    })
}
//当前处于的状态，比如是否是添加热点的状态
Hotpoint.prototype.state = function (that, Hot) {
    if (g_HotStatus === "add") {
        this.addHot(that, Hot, function () {
            this.addHotList(g_HotMeshes, g_HotMeshes.length - 1);
            this.spotList.find("i").text(this.spotList.find("ul li").length);
        });
    }
}
//删除热点
Hotpoint.prototype.remHot = function (that, thisScene) {
    var hotId = that.closest("li").attr("data-spid");
    for (var i = 0; i < g_HotMeshes.length; i++) {
        if (g_HotMeshes[i].belongHot.sid === hotId) {
            //在场景中删除这个热点模型
            thisScene.scene.remove(g_HotMeshes[i]);
            g_HotMeshes[i].visible = false;
            //如果热点数据中有这个热点数据就删除
            //g_HotMeshes.splice(i, 1);
        }
    }
    that.closest("li").remove();
    this.spotList.find(".hotNum").text(this.spotList.find("ul li").length);
    console.log("删除成功：" + hotId);
}
//添加热点模型
Hotpoint.prototype.addHot = function (that, Hot, fn) {
    if (!window.hotPointPos) return;    // 没有正确的热点位置, return
    // console.log(that.reticule.position);
    var position = that.reticule.position.toArray();
    // window.hotPointPos.z -= 0.05
    // var position = window.hotPointPos.toArray();
    var rotation = that.reticule.rotation.toArray().slice(0, 3);
    // var rotation = new THREE.Quaternion();
    // rotation.setFromAxisAngle( new THREE.Vector3( 0, 1, 0 ), Math.PI / 2 );
    // var rotation = [-3.1415914628953048, ]
    var sid = g_HotMeshes.length > 0 ? "sprite_" + (parseInt(g_HotMeshes[g_HotMeshes.length - 1].name.substring(7)) + 1) : "sprite_" + g_HotMeshes.length;
    var hot = new Hot(sid, { position: position, rotation: rotation, size: 1.05 }, that.model);

    that.model.hots[sid] = hot;

    g_HotStatus = false;
    that.mouseCouldBeClickToMove = false;
    $("#player").css("cursor", "");
    //添加完热点之后的回调函数
    if (g_HotMeshes && g_newHot.length === g_newHot.length++) {
        var thisScene = that;
        fn && fn.call(this, thisScene);
    }
}
//创建热点列表的dom
Hotpoint.prototype.creatDom = function (data, index) {
    var _index = +index + 1;
    return "<li data-spid=" + data.name + " id=ggg_s" + index + ">" +
        "<div class=icon></div>" +
        "<div class=title>热点" + _index + "</div>" +
        "<div class=DelConfirm>确定删除</div>" +
        "<div class=del></div>" +
        "</li>";
}
//添加热点列表
Hotpoint.prototype.addHotList = function (data, index) {
    if (!data) return;
    this.spotList.children("ul").append(this.creatDom(data, index));
    //保存热点信息到热点dom元素中
    var spotList = $(".spotList ul").children("#ggg_s" + index);
    spotList[0].hotAttribute = g_HotMeshes[index];
    spotList.attr('data-spid', g_HotMeshes[index].belongHot.sid);
}
//添加热点音乐
Hotpoint.prototype.addMusic = function () {
    var mediaUpload = $("#hotpointDetail .audio.mediaUpload");
    mediaUpload.find("input").on("change", function () {
        var file = this.files[0];
        mediaUpload.find(".innerBtn").text("替换");
        mediaUpload.find(".playBox").removeClass("hide");
        mediaUpload.find(".title").text(file.name);
        mediaUpload.find('#query-bgm').attr('href', URL.createObjectURL(file));
    });
    //删除音乐
    mediaUpload.on("click", ".delete", function () {
        mediaUpload.find('#query-bgm').attr('href', "");
        mediaUpload.find(".playBox").addClass("hide");
        mediaUpload.find(".innerBtn").text("上传");
        mediaUpload.find("input").val("").removeAttr("data-hotbgm");
    })
}
//添加热点模型列表dom
Hotpoint.prototype.inputList = function (text, val) {
    var _val = '';
    if (arguments[1]) {
        _val = 'value=' + val;
    }
    return '<div class="link"> <input class="text" type="text" placeholder=' + text + '  spellcheck="false" ' + _val + ' > </div>'
}
//添加热点模型
Hotpoint.prototype.addModel = function () {
    var text = this.inputList("请填写模型链接");
    this.hotpointDetail.find(".model .add").on('click', function () {
        $(this).closest(".model").find(".list").append(text)
    });
    this.hotpointDetail.find(".model .delete").on('click', function () {
        $(this).closest(".model").find(".list > div:last").remove();
    });
}
//添加网页链接
Hotpoint.prototype.addwebPack = function () {
    var text = this.inputList("请填写网页链接", "");
    this.hotpointDetail.find(".webPage .add").on('click', function () {
        $(this).closest(".webPage").find(".list").append(text)
    });
    this.hotpointDetail.find(".webPage .delete").on('click', function () {
        $(this).closest(".webPage").find(".list > div:last").remove();
    });
}
// 保存热点信息
Hotpoint.prototype.saveHot = function () {
    var $layout = $(".edit-loading");
    var hotpointDetail = this.hotpointDetail;


    hotpointDetail.find(".tail .submit").on('click', function () {
        //显示loading
        $layout.removeClass('hide');
        var args = {};
        //热点标题
        var $title = hotpointDetail.find(".info input");
        //热点内容
        var $content = hotpointDetail.find(".info textarea");
        //热点图片
        var $images = hotpointDetail.find(".photo .edit-fun-images a.result");
        //热点视频
        var $videos = hotpointDetail.find(".video .edit-fun-images a.result");
        //热点视频的图片
        var $thums = hotpointDetail.find(".video .edit-fun-images .upload-thum");
        //热点模型
        var $modules = hotpointDetail.find(".model input");
        //热点内嵌网页
        var $iframes = hotpointDetail.find(".webPage input");
        //热点音乐
        var $miusc = hotpointDetail.find("#upload-hotBgm");

        let $bgName = hotpointDetail.find('.title');


        new Promise(function (resolve, reject) {
            //获取热点图片所有的路径
            upload($images, 'images', resolve)
        }).then(function (imgUrls) {
            args.images = imgUrls
            //获取热点视频所有的路径
            return new Promise(function (resolve, reject) {
                upload($videos, 'images', resolve)
            })
        }).then(function (videoUrls) {
            args.video = videoUrls
            //获取热点视频图片所有的路径
            return new Promise(function (resolve, reject) {
                upload($thums, 'images', resolve)
            })
        }).then(function (thums) {
            args.video = args.video.map(function (video, index) {
                return {
                    url: video,
                    img: thums[index]
                }
            })
        }).then(function () {
            //获取热点音乐所有的路径
            //console.log($miusc)
            if ($miusc[0].files.length > 0) {
                return new Promise(function (resolve) {
                    upload($miusc, 'miusc', function (res) {
                        resolve(res[0])
                    })
                })
            } else {
                return $miusc.attr('data-hotBgm')
            }
        }).then(function (src) {
            args.backgroundMusic = src
            args.bgName = $bgName[0].innerHTML;
        }).then(function () {
            //获取热点标题、内容、内嵌网页、模型网页。
            args.title = $title.val()
            args.content = $content.val()

            var iframes = []
            for (var i = 0; i < $iframes.length; i++) {
                var iframe = $iframes.eq(i).val()
                iframe && iframes.push(iframe)
            }
            args.iframe = iframes

            var modules = []
            for (var i = 0; i < $modules.length; i++) {
                var module = $modules.eq(i).val()
                module && modules.push(module)
            }
            args.model = modules

            return args
        }).then(function (args) {
            //把获取的所有信息都保存在对应热点的dom元素里面
            hotpointDetail[0].targetDOM.infoAttribute = args;
            $layout.addClass('hide');
            hotpointDetail.addClass("atRight");
        })
    })


}


//背景音乐
var EditMiuse = function () {
    this.mediaUpload = $(".music .audio.mediaUpload");
    this.success = function (text, url) {
        this.mediaUpload.find(".innerBtn").text("替换");
        this.mediaUpload.find(".playBox").removeClass("hide");
        this.mediaUpload.find(".title").text(text);
        this.mediaUpload.find('#query-bgm').attr('href', "//" + url)
    };
    this.delete = function () {
        this.mediaUpload.find('#query-bgm').attr('href', "");
        this.mediaUpload.find(".playBox").addClass("hide");
        this.mediaUpload.find(".innerBtn").text("上传");
        this.mediaUpload.find("input").val("");
    };
    var that = this;
    $('#upload-bgm').on('change', function () {
        var file = this.files[0];
        uploadMiuse(file, function (rs, file) {
            if (rs.code === 200) {
                that.success(file.name, rs.content)
            }
        })
    });
    //删除音乐
    this.mediaUpload.on("click", ".delete", function () {
        that.delete();
    })
}
EditMiuse.prototype.init = function (data) {
    if (!data.backgroundMusic) return;
    this.success("backgound", data.backgroundMusic);
}


//导览编辑
var EditGuide = function () {
    this.$list = $('#guide-list')
    this.tourDetail = $('#tourEdit');   // 导览编辑
    this.targetTourPoint = null;  // fyz 记录当前编辑的导览点
    // fyz 导览音乐队列
    this.tourAudio = {};
}

/**
 * @author fyz 2019.07.31
 * @description 新增参数data2, 表示data2.js中的数据
 */
EditGuide.prototype.init = function (data, data2) {
    this.creatDom(data, data2);
    this.addTourMusic();  // 添加导览音乐
    this.tourAudio = data2.tourAudio || {};
    var that = this;

    //点击添加导览
    $('.addTour .innerBtn').on("click", function () {//点击截取视图
        addTour(this);
    }.bind(this));

    // 重新录制导览
    $('#renewTourBtn').on("click", function () {//点击截取视图
        addTour(this, true);
    }.bind(this));

    // 确认并保存导览信息
    $('#tourSubmit').on("click", function () {//点击截取视图
        this.saveGuide();
    }.bind(this));

    function addTour(that, renew) {
        var ev = document.createEvent("MouseEvent");//"MouseEvent"
        ev.initMouseEvent("snapshotBegin", true, true, document.defaultView, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
        g_snapShotWidth = 200;
        g_snapShotHeight = 140;
        window.screenSta = 'tour';   // 记录当前哪个功能截屏, 因为导览截屏需要做额外的校对调整, 初始画面截屏不需要
        ev.__callback = function (imgData, info) {
            that.uploadGuide(imgData, info, renew, that.targetTourPoint)
        }.bind(that);
        window.dispatchEvent(ev);
    }


    // fyz 点击导览名字, 对导览进行详细编辑
    $('.tourList ul').on('click', function (ev) {
        var $seft = $(ev.target)
        if ($seft.attr('data-oper') === 'tour-text') {
            // $seft.siblings('input').removeClass('hide').closest('li').siblings().find('input').addClass('hide');
            // $seft.siblings('input').focus();
            that.editGuideData($seft);
        }
        if ($seft.attr('data-oper') === 'tour-delete') {
            var choice = confirm("你确定删除吗？");
            if (choice) {
                $seft.closest('li').remove();
            }
            else {
                return false
            }
        }
    }).on("change", function (ev) {
        this.inputDone(ev)
    }.bind(this))
    $('.tourList ul input').on('blur', function (ev) {
        this.inputDone(ev)
    }.bind(this)).on('keydown', function (ev) {
        ev.stopPropagation()
    })

    //点击导览编辑窗口右上角的关闭按钮
    this.tourDetail.find("a.close, button.cancel").on("click", function () {
        that.targetTourPoint[0].musicSta = true;   // 取消操作, 重置状态
        that.tourDetail.addClass("atRight");
    });

    /*fyz 导览列表拖拽以改变导览点的顺序 */
    let tourListNode = document.querySelector('#tourListWrap');
    let draging = null;
    tourListNode.ondragstart = function (event) {
        event.dataTransfer.setData("te", event.target.innerText); //不能使用text，firefox会打开新tab
        draging = event.target;
    }
    tourListNode.ondragover = function (event) {
        event.preventDefault();
        let target = event.target.parentNode.parentNode;
        let dragingIndex = draging.querySelector('#index');
        let targetIndex = target.querySelector('#index');
        // 判断dragover是否发生在LI元素上
        if (target.nodeName === 'LI' && target !== draging) {
            var targetRect = target.getBoundingClientRect();
            var dragingRect = draging.getBoundingClientRect();
            if (target && target.animated) {
                return;
            }

            let ulElem = target.parentNode; // 寻找到 ul节点
            if (getIndex(draging) < getIndex(target)) {
                dragingIndex.innerText = [targetIndex.innerText, targetIndex.innerText = dragingIndex.innerText][0];  // 交换两个节点的序号
                ulElem.insertBefore(draging, target.nextSibling);
            } else {
                dragingIndex.innerText = [targetIndex.innerText, targetIndex.innerText = dragingIndex.innerText][0];
                ulElem.insertBefore(draging, target);
            }
            _animate(dragingRect, draging);
            _animate(targetRect, target);
        }
    }
}

/**
 * @author fyz 编辑导览数据
 * @param {any} target 所点击的导览点
 */
EditGuide.prototype.editGuideData = function (target) {
    this.targetTourPoint = target;  // 记录当前编辑的导览点
    var that = this;
    $('#tourEdit').removeClass('atRight');   // 显示导览编辑的工具栏
    document.querySelector('#tourName input').value = target.context.textContent;  // 显示已有的导览名字
    $("#tourEdit .audio.mediaUpload").find("input").val('');  // 点击编辑导览清空上一次文件
    target[0].musicSta = true;

    // 判断当前点是否有导览音频 
    var audio = this.tourAudio[target.closest('li')[0].data.sid];
    var musicUrl = audio ? audio.music : null;
    if (musicUrl) {
        var musicName = audio.name || '导览音频.mp3'  // 获取音频的文件名
        this.tourDetail.find(".audio .playBox").removeClass("hide");
        this.tourDetail.find("#upload-hotBgm").attr('data-hotBgm', musicUrl)
        this.tourDetail.find(".audio .playBox a").attr("href", "//" + musicUrl);
        this.tourDetail.find(".audio .submit").text("替换");
        this.tourDetail.find("#tourMusicName").text(musicName);
    } else {
        this.tourDetail.find(".audio .playBox").addClass("hide");
        this.tourDetail.find(".audio .submit").text("上传");
    }

}

/**
 * @author fyz 保存导览数据
 */
EditGuide.prototype.saveGuide = function () {
    var $layout = $(".edit-loading");
    $layout.removeClass('hide');

    var that = this;
    var tourDetail = this.tourDetail;
    var tourName = tourDetail.find('#tourNameInput').val() || this.targetTourPoint.context.innerText;
    var curTourPoint = this.targetTourPoint.context.closest('li');
    this.targetTourPoint.text(tourName);  // 输入框未输入数据则保留原来的值
    curTourPoint.data.name = tourName;

    // 导览音乐
    var tourAudio = this.tourDetail.find('#uploadTourBgm');
    var tourName = this.tourDetail.find("#tourMusicName").text();  // 记录音频名称
    var sid = curTourPoint.data.sid;
    // 判断当前编辑的导览点位是否已上传音乐
    if (tourAudio[0].files.length > 0 && this.targetTourPoint[0].musicSta) {  // 已添加导览音乐
        new Promise(function (resolve, reject) {
            uploadMiuse(tourAudio[0].files[0], function (res) {
                resolve(res.content);
            })
        }).then(function (src) {
            var audio = new Audio();
            audio.src = '//' + src;
            audio.onloadedmetadata = function () {
                // 对返回的src进行处理, 去掉前面域名, 尽量避免修改main.js
                var srcArr = src.split('/');
                srcArr[0] = '';
                src = srcArr.join('/');
                that.tourAudio[sid] = {
                    "name": tourName,
                    "music": '/' + src,
                    "time": Math.round(audio.duration * 1000 + 1000)
                }
                $layout.addClass('hide');
                $('#tourEdit').addClass('atRight');   // 显示导览编辑的工具栏
            }
        })
    } else if (!this.targetTourPoint[0].musicSta) {  // 删除导览音乐, 将数据重置
        this.tourAudio[sid] = {
            "music": "",
            "time": 0
        }
        $layout.addClass('hide');
        $('#tourEdit').addClass('atRight');   // 显示导览编辑的工具栏
    } else {  // 未添加导览音乐
        $layout.addClass('hide');
        $('#tourEdit').addClass('atRight');   // 显示导览编辑的工具栏
    }
}

//添加导览音乐
EditGuide.prototype.addTourMusic = function () {
    var mediaUpload = $("#tourEdit .audio.mediaUpload");
    var that = this;
    mediaUpload.find("input").on("change", function () {
        var file = this.files[0];
        mediaUpload.find(".innerBtn").text("替换");
        mediaUpload.find(".playBox").removeClass("hide");
        mediaUpload.find(".title").text(file.name);
        mediaUpload.find('#query-bgm').attr('href', URL.createObjectURL(file));
        that.targetTourPoint[0].musicSta = true;
    });
    mediaUpload.find("input").on("click", function () {
        mediaUpload
    });
    //删除音乐
    mediaUpload.on("click", ".delete", function () {
        mediaUpload.find('#query-bgm').attr('href', "");
        mediaUpload.find(".playBox").addClass("hide");
        mediaUpload.find(".innerBtn").text("上传");
        mediaUpload.find("input").val("").removeAttr("data-hotbgm");
        that.targetTourPoint[0].musicSta = false;
    })
}

/**
 * @author fyz 2019.07.31
 * @description 新增参数data2
 * @param {object} data someData.js中的模型数据
 * @param {object} data2 data2.js中的导览和热点数据
 */
EditGuide.prototype.creatDom = function (data, data2) {
    var $lis = [];
    var that = this;
    var tourAudio = data2.tourAudio || {};
    data.model.images.forEach(function (i, index) {
        if (i.thumbnail_signed_src) {
            var $li = $(that.dom(index, i.name, i.thumbnail_signed_src));
            $li[0].data = i
            // 挂载当前导览点对应的音频链接
            if (i.sid in tourAudio && tourAudio[i.sid].music && tourAudio[i.sid].music !== '') {
                $li[0].musicUrl = tourAudio[i.sid].music;
            }
            $lis.push($li)
        }
    })
    $(".tourList > ul").append($lis)
}
EditGuide.prototype.dom = function (index, title, img) {
    return '<li draggable="true">' +
        '<div>' +
        '<span id="index">' + index + '</span>' +
        '<div class="line"></div>' +
        '</div>' +
        '<div>' +
        '<span class="guide-name"  data-oper=tour-text>' + title + '</span>' +
        '<input maxlength="14" class="hide" data-oper=tour-input>' +
        '</div>' +
        '<div class="preview" >' +
        '<div id="tourBg" style="background-image: url(//' + img + ');" data-oper=tour-delete>' +
        '</div>' +
        '</div>' +
        '</li >';
}
/**
 * @author fyz 
 * @param target 当前导览点的父级li元素
 */
EditGuide.prototype.inputDone = function (ev, target) {
    var $seft = $(ev.target)
    if ($seft.attr('data-oper') === 'tour-input') {
        // $seft.addClass('hide') // fyz 现有的实现方式不隐藏输入框
        var name = target.siblings('span').context.innerText;
        $seft.text($seft.val() || name);  // fyz 如果未输入数据, 则保留原来的导览名字
        //更改导览横向列表的名字：
        target.siblings('span').context.innerText = $seft.val() || name;
        target.closest('li')[0].data.name = $seft.val() || name;
    }
}

/**
 * @author fyz 2019.07.31
 * @description uploadGuide方法新增参数renew状态码, 表示是否重新录制当前导览, 新增targetTourPoint, 记录当前的导览点元素
 */
EditGuide.prototype.uploadGuide = function (urlData, guide, renew, target) {
    var that = this;

    uploadImg(urlData, function (rs) {
        if (rs.code === 200) {
            var editGuide = new EditGuide();
            var sid = rs.content.substring(rs.content.lastIndexOf('/') + 1, rs.content.lastIndexOf('.'));
            var thumbnail_signed_src = rs.content;
            var args = JSON.parse("{" + guide + "}");

            args.sid = sid;
            args.name = sid;
            args.thumbnail_signed_src = thumbnail_signed_src;
            args.metadata = JSON.stringify({
                camera_mode: 0,
                camera_position: {
                    x: args.metadata.camera_position[0],
                    y: args.metadata.camera_position[1],
                    z: args.metadata.camera_position[2]
                },
                camera_quaternion: {
                    x: args.metadata.camera_quaternion[0],
                    y: args.metadata.camera_quaternion[1],
                    z: args.metadata.camera_quaternion[2],
                    w: args.metadata.camera_quaternion[3]
                },
                ortho_zoom: -1,
                scan_id: args.metadata.scan_id,
                final_angle: 110,
                is_ortho: false,
                zoom: args.metadata.zoom  // fyz zoom是内部计算的zoomLevel, 乘以系数1.06才是实际缩放倍数
            })

            if (renew && target) {  // 重新录制导览
                var oldId = target.closest('li')[0].data.sid;
                that.tourAudio[args.sid] = that.tourAudio[oldId];  // 新生成的id指向以前的导览音频
                delete that.tourAudio[oldId];  // 删除导览音频中的旧导览id
                target.closest('li')[0].data = args;  // 更新数据
                target.closest('li').find('#tourBg')[0].style.backgroundImage = 'url(//' + args.thumbnail_signed_src + ')';
                target.text(args.name);  // 更新导览列表中的导览名称
                $('#tourEdit').find('#tourNameInput').val(args.name);   // 修改输入框内容
            } else {
                var index = $(".tourList ul li").length + 1;
                var $li = $(editGuide.dom(index, args.name, args.thumbnail_signed_src));

                $li[0].data = args;


                $(".tourList ul").append($li);
            }
        }
    })
}


/* -- 以下是一些公用的方法  -- */
//限制大小
var restrictedSize = function (file, _size) {
    //限制大小不大于8m
    var fileSize = 0;
    var isIE = /msie/i.test(navigator.userAgent) && !window.opera;
    if (isIE && !file) {
        var fileSystem = new ActiveXObject("Scripting.FileSystemObject");
        var _file = fileSystem.GetFile(filepath);
        fileSize = _file.Size;
    } else {
        fileSize = file.size;
    }
    var size = fileSize / 1024;
    var RSize = _size * 1024;
    if (size > RSize) {
        alert("文件不能大于" + _size + "M");
        return false;
    }
    if (size <= 0) {
        alert("文件大小不能为0M！");
        return false;
    }
    return true
}


//上传音乐
var uploadMiuse = function (file, callback) {

    if (!/audio\/\w+/.test(file.type)) {
        alert("文件必须为音乐！");
        return false;
    }
    //限制大小不大于8m
    if (!restrictedSize(file, 8)) {
        return false
    }

    uploadFile(file, 'audio', callback);
}


//上传图片
function uploadImg(urlData, callback) {
    var bytes = window.atob(urlData.split(',')[1]);        //去掉url的头，并转换为byte  

    //处理异常,将ascii码小于0的转换为大于0  
    var ab = new ArrayBuffer(bytes.length);
    var ia = new Uint8Array(ab);
    for (var i = 0; i < bytes.length; i++) {
        ia[i] = bytes.charCodeAt(i);
    }

    var blob = new Blob([ab], { type: 'image/jpeg' });

    uploadFile(blob, 'hot/images', callback);
}


//上传文件
function uploadFile(file, type, callback) {
    $(".edit-loading").removeClass("hide");
    var formData = new FormData()
    formData.append('name', number)
    formData.append('dir', type)
    formData.append('random', true)
    formData.append('file', file)

    $.ajax({
        url: ceshi + '/uploadFile',
        data: formData,
        dataType: 'json',
        type: 'POST',
        cache: false,//上传文件无需缓存
        processData: false,//用于对data参数进行序列化处理 这里必须false
        contentType: false, //必须
        success: function (rs) {
            callback(rs, file);
            $(".edit-loading").addClass("hide");
        }
    })
}

function _animate(prevRect, target) {
    var ms = 300;

    if (ms) {
        var currentRect = target.getBoundingClientRect();

        if (prevRect.nodeType === 1) {
            prevRect = prevRect.getBoundingClientRect();
        }

        _css(target, 'transition', 'none');
        _css(target, 'transform', 'translate3d(' +
            (prevRect.left - currentRect.left) + 'px,' +
            (prevRect.top - currentRect.top) + 'px,0)'
        );

        target.offsetWidth; // 触发重绘
        //放在timeout里面也可以
        // setTimeout(function() {
        //     _css(target, 'transition', 'all ' + ms + 'ms');
        //     _css(target, 'transform', 'translate3d(0,0,0)');
        // }, 0);
        _css(target, 'transition', 'all ' + ms + 'ms');
        _css(target, 'transform', 'translate3d(0,0,0)');

        clearTimeout(target.animated);
        target.animated = setTimeout(function () {
            _css(target, 'transition', '');
            _css(target, 'transform', '');
            target.animated = false;
        }, ms);
    }
}
//给元素添加style
function _css(el, prop, val) {
    var style = el && el.style;

    if (style) {
        if (val === void 0) {
            if (document.defaultView && document.defaultView.getComputedStyle) {
                val = document.defaultView.getComputedStyle(el, '');
            } else if (el.currentStyle) {
                val = el.currentStyle;
            }

            return prop === void 0 ? val : val[prop];
        } else {
            if (!(prop in style)) {
                prop = '-webkit-' + prop;
            }

            style[prop] = val + (typeof val === 'string' ? '' : 'px');
        }
    }
}

function upload($files, type, cb) {
    var length = $files.length
    var rcount = 0
    var result = []

    Array.from($files).forEach(function (dFile) {
        //a 标签的success 是用来判断是否是已经上传过的文件
        //attr-thum 属性是视频的图片
        //videoURL 是判断是否有视频
        var $file = $(dFile)
        var $image = $file.find('img')

        if ($file.hasClass('success')) {
            if ($file.attr('attr-thum')) {
                result.push($file.attr('attr-thum'))
            } else if ($image.attr('videoURL')) {
                result.push($image.attr('videoURL'))
            } else {
                result.push($image.attr('src'))
            }
            return success(++rcount);
        } else {
            switch ($file[0].localName) {
                case "input":
                    dFile = $file[0]
                    break;
                case "span":
                    dFile = $file.find('input')[0];
                    break;
                case "a":
                    dFile = $file.find('input')[0];
                    break;
                default:
                    dFile = $file.closest("li").find('.upload input')[0];
                    break;
            }
            // dFile = $file[0].localName === "input" ? $file[0] : $file[0].localName === "span" ? $file.find('input')[0] :  $file.closest("li").find('.upload input')[0];
        }

        var file = (dFile.files && dFile.files[0]) || '';
        if (!file) return success(++rcount);

        uploadFile(file, 'hot/' + type, function (rs) {
            if (rs.code === 200) {
                result.push(rs.content)
            };
            success(++rcount);
        })

    })
    //判断当前队列元素是否处理成功
    function success() {
        if (rcount === length) {
            cb(result)
        }
    }
    success()
}

function getIndex(el) {
    let index = 0;
    if (!el || !el.parentNode) {
        return -1;
    }
    while (el && (el = el.previousElementSibling)) {
        index++;
    }
    return index;
}