dataserver_management_map_ui_sh2000/scripts/vendor/video/video.js

define(['html!vendorDir/video/video.html','css!vendorDir/video/css/video.css'],function(video){
    var video_stus={
        //渲染div的id
        id:"",
        //定时器
        timer:"",
        //时间轴移动的位置
        x : 0,
        //时间轴移动的当前时间
        StartTime :0,
        //时间轴移动的总时间
        totalTime:"",
        //每秒移动的像素
        perTime:"",
        //播放时间间隔（秒）
        t:2 ,
        //播放总页数
        dataCount : 0,
        //开始时间
        startT:"",
        //结束时间
        endT:"",
        //每页数据的时间段（小时）
        timeInter:1,
        //播放的当前页数
        nowPage:1
    }
    //播放器初始化
    function init(id,callback){
        video_stus.id=id;
        initPlayData();
        $("#"+id+" .cover-content").html(video);
        initTime();
        measurTotalTime();
        bingEvents(video_stus);
        btnDisabled();
        if(typeof callback === "function"){
            callback.call();
        }
    }
    //查询数据初始化
    function dataInit(){
        clearInterval(video_stus.timer);
        video_stus.StartTime = 0;
        video_stus.x = 0;
        $(".video-progress_btn").css("left",video_stus.x-12);
        initTime();
        measurTotalTime();
        btnDisabled();
    }
    function initPlayData(){
        video_stus.x=0;
        video_stus.StartTime = 0;
        video_stus.nowPage=1;
    }
    function initTime(){
        var nowDate = new Date();
        var endDate = nowDate.getTime();
        var startDate = $("#video-query-startDate").val();
        if(!startDate){
            startDate = nowDate.setHours(nowDate.getHours()-(24*7));
            $("#video-query-startDate").val(getTimeStr(startDate,2))
            $("#video-query-endDate").val(getTimeStr(endDate,2))
        }
        video_stus.startT=getTimeStr(startDate)
        video_stus.endT=getTimeStr(endDate)
        $(".start-time").html(video_stus.startT)
        $(".end-time").html(video_stus.endT)
        $(".title-left-c").html("北斗用户分布态势-<span style='color:#03e3fa;font-weight: 800'>"+video_stus.endT+"</span>");
        var t = new Date(video_stus.startT);
        var s = new Date(video_stus.endT);
        video_stus.dataCount=Math.ceil(Math.abs(t - s)/1000/60/(60*video_stus.timeInter));
    }
    function bingEvents(){
        $(".video-btn-stop").off("click").on("click",function(){
            var o = $(this)
            if(o.hasClass("video-stop-img")){return;}
            stop();
            ONEMAP.C.publisher.publish({
                action:'stop',
                data:video_stus
            }, video_stus.id);
        });
        $(".video-btn-back").off("click").on("click",function(){
            var o = $(this);
            $(".video-progress_btn").show();
            if(o.hasClass("video-back-img")){return;}
            back();
            ONEMAP.C.publisher.publish({
                action:'back',
                data:video_stus
            }, video_stus.id);
        });
        $(".video-btn-play").off("click").on("click",function(){
            var o = $(this);
            $(".video-progress_btn").show();
            if(o .hasClass("video-play-img")){
                if(video_stus.dataCount==0){return;}
                ONEMAP.C.publisher.publish({
                    action:'play',
                    data:video_stus
                }, video_stus.id);
                play();
                o.removeClass("video-play-img").addClass("video-parse-img");
            }else{
                clearInterval(video_stus.timer);
                ONEMAP.C.publisher.publish({
                    action:'parse',
                    data:video_stus
                }, video_stus.id);
                o.removeClass("video-parse-img").addClass("video-play-img");
            }
        });
        $(".video-btn-next").off("click").on("click",function(){
            var  o = $(this);
            $(".video-progress_btn").show();
            if(o.hasClass('video-next-img')){return;}
            next()
            ONEMAP.C.publisher.publish({
                action:'next',
                data:video_stus
            }, video_stus.id);
        });
        $(".video-query-btns").off("click").on("click",function(){
            dataInit();
            ONEMAP.C.publisher.publish({
                action:'query',
                data:video_stus
            }, video_stus.id);
        });
        $(".title-right-close").off("click").on("click",function(){
            $("#"+video_stus.id).hide();
            clearInterval(video_stus.timer);
            ONEMAP.C.publisher.publish({
                action:'close',
                data:video_stus
            }, video_stus.id);
        });
        $(".video-progress_btn").off("mousedown").on("mousedown",function(event){
            clearInterval(video_stus.timer);
            $(".video-btn-play").removeClass("video-parse-img").addClass("video-play-img");
            var o = $(this)
            var yuanleft = 0;
            var leftVal = event.clientX - this.offsetLeft;
            var op = $(".video-progress")
            document.onmousemove = function(event){
                var event = event || window.event;
                yuanleft = event.clientX - leftVal;
                if(yuanleft < 0){
                    yuanleft =-12;
                }else if(yuanleft > op.width()-12){
                    yuanleft = op.width()-12;
                }
                o.css("left",yuanleft);
                $(".video-progress-tip").css("left",yuanleft-22).show();
                video_stus.x = yuanleft;
                //接近时间段的值
                var  pos =Math.floor(Math.abs((yuanleft)%(video_stus.perTime*video_stus.t)));
                // measureNowTime();
                var index = Math.floor((yuanleft+12)/(video_stus.perTime*video_stus.t));
                video_stus.nowPage = (index<0?0:index);
                if(pos==0){
                    ONEMAP.C.publisher.publish({
                        action:'onmousemove',
                        data:video_stus
                    }, video_stus.id);
                }
                measureNowTime();
                if(video_stus.nowPage==video_stus.dataCount){
                    $(".title-left-c").html("北斗用户分布态势-<span style='color:#03e3fa;font-weight: 800'>"+video_stus.endT+"</span>");
                }else{
                    var nowdate = new Date(video_stus.startT);
                    nowdate = nowdate.setHours(nowdate.getHours()+video_stus.nowPage);
                    $(".video-progress-tip").html(getTimeStr(nowdate,1))
                    $(".title-left-c").html("北斗用户分布态势-<span style='color:#03e3fa;font-weight: 800'>"+getTimeStr(nowdate)+"</span>");
                }
                window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
            }
            document.onmouseup = function(){
                document.onmousemove = null; //弹起鼠标不做任何操作
            }
        })
        $(".video-progress_btn").off("mouseenter").on("mouseenter",function(e){
            var o = $(this);
            var nowdate = new Date(video_stus.startT);
            nowdate = nowdate.setHours(nowdate.getHours()+video_stus.nowPage);
            // var x = $(".video-progress_btn").css("left");
            $(".video-progress-tip").html(getTimeStr(nowdate,1));
            // $(".video-progress-tip").css("left",x+20);
            // $(".video-progress-tip").show()
        });
        $(".video-progress_btn").off("mouseleave").on("mouseleave",function(e){
            var nowdate = new Date(video_stus.startT);
            // var x = $(".video-progress_btn").css("left");
            // $(".video-progress-tip").css("left",x-12);
            nowdate = nowdate.setHours(nowdate.getHours()+video_stus.nowPage);
            $(".video-progress-tip").html(getTimeStr(nowdate,1));
            $(".video-progress-tip").hide()
        })
        // $(".video-progress_btn").off("mouseup").on("click",function(e){
        //     console.info(e.offsetX)
        //     console.info($(this).is(':hidden'))
        //     if($('.video-progress-tip').is(':hidden')){
        //         $(".video-progress-tip").css("left",e.offsetX-45).show();
        //     }else{
        //         $(".video-progress-tip").css("left",e.offsetX-45).hide();
        //     }
        // })
        // $(".video-progress").off("click").on("click",function(e){
        //         video_stus.x=e.offsetX;
        //     $(".video-progress_btn").css("left",e.offsetX-12);
        //     measureNowTime();
        //     if(video_stus.nowPage==video_stus.dataCount){
        //         $(".title-left-c").html("北斗用户分布态势-<span style='color:#03e3fa;font-weight: 800'>"+video_stus.endT+"</span>");
        //     }else{
        //         var nowdate = new Date(video_stus.startT);
        //         nowdate = nowdate.setHours(nowdate.getHours()+video_stus.nowPage);
        //         $(".title-left-c").html("北斗用户分布态势-<span style='color:#03e3fa;font-weight: 800'>"+getTimeStr(nowdate)+"</span>");
        //     }
        //     ONEMAP.C.publisher.publish({
        //         action:'progressClick',
        //         data:video_stus
        //     }, video_stus.id);
        // })
    }
    function play(){
        $(".video-progress-tip").hide();
        time();
    }
    function time(){
        video_stus.timer = window.setInterval(timeStart,1000);
    }
    //开始事件启动定时器
    function timeStart(){
        video_stus.StartTime ++;
        var proWidth = $(".video-progress").width();
        video_stus.x += video_stus.perTime;
        if(video_stus.StartTime >= video_stus.totalTime){
            video_stus.StartTime = video_stus.totalTime;
            clearInterval(video_stus.timer);
            stop();
            return;
        }
        if(isNaN(video_stus.StartTime)){
            video_stus.StartTime = 1;
        }
        var per = video_stus.t;
        var now = (video_stus.StartTime - video_stus.StartTime%per)/per;
        if(now > video_stus.totalTime){
            now = video_stus.totalTime;
        }
        if(now>video_stus.dataCount){
            now=video_stus.dataCount;
        }
        $(".video-progress-nowtime").empty();
        $(".video-progress-nowtime").text(now);
        video_stus.nowPage=now;
        $(".video-progress_btn").css("left",(video_stus.x>388?388:video_stus.x));
        var tip_left = $(".video-progress_btn").css("left");
        $(".video-progress-tip").css("left",tip_left);
        //每video_stus.t秒平播放一次
        if((video_stus.StartTime%video_stus.t) == 0){
            ONEMAP.C.publisher.publish({
                action:'show',
                data:video_stus
            }, video_stus.id);
            if(video_stus.nowPage==video_stus.dataCount){
                $(".title-left-c").html("北斗用户分布态势-<span style='color:#03e3fa;font-weight: 800'>"+video_stus.endT+"</span>");
            }else{
                var nowdate = new Date(video_stus.startT);
                nowdate = nowdate.setHours(nowdate.getHours()+video_stus.nowPage);
                $(".title-left-c").html("北斗用户分布态势-<span style='color:#03e3fa;font-weight: 800'>"+getTimeStr(nowdate)+"</span>");
            }
        }
        btnDisabled();
    }
    function getTimeStr(d,type){
        var now = new Date(d);
        var year = now.getFullYear();
        var month = (now.getMonth()+1) < 10 ? '0'+(now.getMonth()+1) : (now.getMonth()+1);
        var date = now.getDate() < 10 ? '0' + now.getDate() : now.getDate();
        var hours = now.getHours() < 10 ? '0' + now.getHours() : now.getHours();
        var minutes = now.getMinutes() < 10 ? '0' + now.getMinutes() : now.getMinutes();
        var seconds = now.getSeconds() < 10 ? '0' + now.getSeconds() : now.getSeconds();
        if(type==1){
            return hours +':'+ minutes+':'+seconds;
        }else if(type==2){
            return year + '-' + month +'-' + date + ' ' +hours +':'+ minutes+':'+seconds;
        }else{
            return year + '/' + month +'/' + date + ' ' +hours +':'+ minutes+':'+seconds;
        }

    }
    function btnDisabled(){
        if(video_stus.dataCount>0){
            $(".video-btn-next").removeClass("video-next-img").addClass("video-next-img-blue");
            if(video_stus.StartTime==0){
                $(".video-btn-back").removeClass("video-back-img-blue").addClass("video-back-img");
                $(".video-btn-stop").removeClass("video-stop-img-blue").addClass("video-stop-img");
                $(".video-btn-play").removeClass("video-parse-img").addClass("video-play-img");
            }else if(video_stus.StartTime>0){
                if(video_stus.nowPage>=video_stus.dataCount){
                    $(".video-btn-next").removeClass("video-next-img-blue").addClass("video-next-img");
                }
                $(".video-btn-back").removeClass("video-back-img").addClass("video-back-img-blue");
                $(".video-btn-stop").removeClass("video-stop-img").addClass("video-stop-img-blue");
            }
        }else{
            $(".video-btn-next").removeClass("video-next-img").addClass("video-next-img-blue");
            $(".video-btn-back").removeClass("video-back-img-blue").addClass("video-back-img");
            $(".video-btn-stop").removeClass("video-stop-img-blue").addClass("video-stop-img");
            $(".video-btn-play").removeClass("video-parse-img").addClass("video-play-img");
        }
    }
    function stop(){
        clearInterval(video_stus.timer);
        video_stus.StartTime = 0;
        video_stus.x = 0;
        $(".video-progress_btn").css("left",video_stus.x-12);
        measureNowTime();
        btnDisabled();
    }
    function next(){
        $(".video-progress-tip").hide();
        var per = video_stus.t;
        if(video_stus.StartTime == video_stus.totalTime-per){
            video_stus.StartTime = video_stus.totalTime;
            video_stus.x = $(".video-progress").width()-12;
            $(".video-progress_btn").css("left",$(".video-progress").width()-12);
            var tip_left = $(".video-progress_btn").css("left");
            $(".video-progress-tip").css("left",tip_left-20);
        }else{
            video_stus.StartTime += per;
            video_stus.x += video_stus.perTime*per;
            $(".video-progress_btn").css("left",video_stus.x>388?388:video_stus.x);
            var tip_left = $(".video-progress_btn").css("left");
            $(".video-progress-tip").css("left",tip_left-20);
        }
        measureNowTime();
        btnDisabled();
        var nowdate = new Date(video_stus.startT);
        nowdate = nowdate.setHours(nowdate.getHours()+(video_stus.nowPage+1));
        $(".title-left-c").html("北斗用户分布态势-<span style='color:#03e3fa;font-weight: 800'>"+getTimeStr(nowdate)+"</span>");
    }
    function back(){
        $(".video-progress-tip").hide();
        var per = video_stus.t;
        if(video_stus.StartTime < per){
            video_stus.StartTime = 0;
            video_stus.x = 0;
        }else{
            video_stus.StartTime -= per;
            video_stus.x -= video_stus.perTime*per;
        }
        $(".video-progress_btn").css("left",(video_stus.x==0?video_stus.x-12:video_stus.x));
        var tip_left = $(".video-progress_btn").css("left");
        $(".video-progress-tip").css("left",tip_left-20);
        measureNowTime();
        btnDisabled();
        var nowdate = new Date(video_stus.startT);
        nowdate = nowdate.setHours(nowdate.getHours()-(video_stus.nowPage-1));
        $(".title-left-c").html("北斗用户分布态势-<span style='color:#03e3fa;font-weight: 800'>"+getTimeStr(nowdate)+"</span>");
    }
    //计算当前页数
    function measureNowTime(){
        var tmp = video_stus.x/($(".video-progress").width()-12);
        video_stus.StartTime = Math.floor(video_stus.totalTime * tmp);
        var per = video_stus.t;
        var now = (video_stus.StartTime - video_stus.StartTime%per)/per;
        if(now >= video_stus.dataCount){
            now = video_stus.dataCount;
        }
        $(".video-progress-nowtime").empty();
        $(".video-progress-nowtime").text((now<0?0:now));
        video_stus.nowPage=now;
    }
    function measurTotalTime(){
        var total = video_stus.dataCount*video_stus.t;
        var totMin = Math.floor(total/60);
        var totSecond = total%60;
        var totTime = pad(totMin) + ":" + pad(totSecond);
        var totTime = pad(totMin) + ":" + pad(totSecond);
        $(".video-progress-lasttime").empty();
        $(".video-progress-lasttime").val(totTime);
        $(".video-progress-lasttime").text(video_stus.dataCount);
        if(video_stus.dataCount > 0){
            $(".video-progress-nowtime").text(0);
            video_stus.nowPage=1;
        }
        meaurePerTime();
    }
    //计算圆点每隔一秒前进的像素数
    function meaurePerTime(){
        var totString = $(".video-progress-lasttime").val();
        var totArr = totString.split(":");
        var totMin = parseInt(totArr[0]);
        var totSecond = parseInt(totArr[1]);
        var proWidth = $(".video-progress").width();
        video_stus.totalTime = totMin*60 + totSecond;
        video_stus.perTime = (proWidth-12)/video_stus.totalTime;
    }
    function pad(m){
        if(m.length<2){
            m="0"+m;
            return pad(m)
        }else{
            return m
        }
    }
    function clearTimer(){
        clearInterval(video_stus.timer);
    }
    return   ONEMAP.M.video={
        init:init,
        dataInit:dataInit,
        clearTimer:clearTimer,
        videoData:video_stus
    }
})