TDataView_ui/scripts/meteo/other/meteoVideo/meteoVideo.js

define(['html!meteoDir/other/meteoVideo/meteoVideo.html',
    'css!meteoDir/other/meteoVideo/css/video.css'], function (video) {
    var video_stus = {
        //渲染div的id
        id: "",
        //时间轴移动的位置
        x: 0,
        //播放的当前页数
        nowPage: 0,
        //播放总页数
        dataCount: 0,
        //每秒移动的像素
        perTime: "",

        //播放间隔
        intervalTime: 800,
        //定时事件ID
        intervalId: null,

        //启报时间毫秒数
        qbTime: 0,
        //vti
        vti: ["000", "003", "006", "009", "012", "015", "018", "021", "024", "027", "030", "033",
            "036", "039", "042", "045", "048", "051", "054", "057", "060", "063", "066", "069",
            "072", "075", "078", "081", "084", "087", "090", "093", "096", "099", "102", "105",
            "108", "111", "114", "117", "120", "123", "126", "129", "132", "135", "138", "141",
            "144", "147", "150", "153", "156", "159", "162", "165", "168"]

    }

    //播放器初始化
    function init(id, callback) {
        video_stus.id = id;
        $("#" + id).html(video);
        video_stus.dataCount = video_stus.vti.length - 1;

        initVti();
        meaurePerTime();
        bingEvents();

        if (typeof callback === "function") {
            callback.call();
        }

        //设置最初默认时间
        clearTime();
    }

    //设置最大vti值
    function initVti() {
        $(".meteo-video-progress-lasttime").html(video_stus.vti[video_stus.vti.length - 1]);
        $(".meteo-video-progress-nowtime").html(video_stus.vti[0]);
        $(".meteo-title-left-c").html("大气海洋数值预报-<span style='color:#03e3fa;font-weight: 800'></span>");
    }

    //计算纵轴单个刻度长度
    function meaurePerTime() {
        var proWidth = $(".meteo-video-progress").width();
        video_stus.perTime = proWidth / (video_stus.vti.length - 1);
    }

    /**
     * 设置起报时间
     * @param time  当前时间
     * @param isSea 是否为海洋
     */
    function setQbTime(time, isSea) {
        if (time == null) {
            time = new Date().getTime();
        }

        var qbTime = isSea? getQBTime20(time) : getQbTimeStr(time); //如果是海洋，取20时起报，否则取最近起报

        var t = qbTime.split(' ');
        var t1 = t[0].split('-');
        var t2 = t[1].split(':');
        var now = new Date();
        now.setFullYear(t1[0], t1[1] - 1, t1[2]);
        now.setHours(t2[0], 0, 0);

        video_stus.qbTime = now.getTime();
        $("#meteo-video-query-startDate").val(qbTime);
    }

    //更换起报时间
    function updateQbTime() {
        stop();
        var startDate = $("#meteo-video-query-startDate").val();

        var t = startDate.split(' ');
        var t1 = t[0].split('-');
        var t2 = t[1].split(':');
        var newQbTime = new Date();
        newQbTime.setFullYear(t1[0], t1[1] - 1, t1[2]);
        newQbTime.setHours(t2[0], 0, 0);
        newQbTime = newQbTime.getTime();

        setQbTime(newQbTime, false);
        setVti(0);              //更换起报时间时，重置vti为0
    }

    /**
     * 设置距离当前时间最合适的起报时间
     * @param isSea 是否为海洋
     */
    function clearTime(isSea) {      //
        var date = new Date();          //取当前时间
        // date = new Date("2018/7/13 05:00");  //todo 默认时间修改为样例数据时间
        // var qbDate = new Date().setTime(date.getTime() - 43200000);  //当前时间12小时前为起报时间
        var qbDate = new Date().setTime(date.getTime());  //当前时间12小时前为起报时间
        //10800000 = 3 * 60 * 60 * 1000
        //43200000 = 12 * 60 * 60 * 1000
        setQbTime(qbDate, isSea);

        var hours = (date - video_stus.qbTime) / 3600000;       //根据当前时间及最近起报时间算出小时差值
        //3600000 = 60 * 60 * 1000
        var index = (hours / 3) >> 0;                           //计算vti索引
        setVti(index);
    }

    //按钮绑定事件
    function bingEvents() {
        //上一个
        $(".meteo-video-btn-back").off("click").on("click", function () {
            back();
        });

        //播放
        $(".meteo-video-btn-play").off("click").on("click", function () {
            if (!video_stus.intervalId) {    //播放
                play();
            } else {                    //暂停
                stop();
            }
        });

        //下一个
        $(".meteo-video-btn-next").off("click").on("click", function () {
            next();
        });

        //进度轴时间点
        $(".meteo-video-progress_btn").off("mousedown").on("mousedown", function (event) {
            stop();
            var yuanleft = 0;
            var leftVal = event.clientX - this.offsetLeft - event.offsetX;
            var width = $(".meteo-video-progress").width();
            var pt = video_stus.perTime / 2;
            document.onmousemove = function (event) {
                var event = event || window.event;
                yuanleft = event.clientX - leftVal;
                if (yuanleft < 0) yuanleft = 0;
                if (yuanleft > width) yuanleft = width;

                var index = ((yuanleft + pt) / video_stus.perTime) >> 0;
                if (index != video_stus.nowPage) setVti(index);
                window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
            }
            document.onmouseup = function () {
                document.onmousemove = null; //弹起鼠标不做任何操作
            }
        })
    }

    function play() {
        if (video_stus.nowPage == video_stus.vti.length - 1) return;
        if (video_stus.intervalId) stop();
        $(".meteo-video-btn-play").removeClass("meteo-video-play-img");
        $(".meteo-video-btn-play").addClass("meteo-video-parse-img");
        video_stus.intervalId = window.setInterval(playNext, video_stus.intervalTime);
    }

    function playNext() {
        setVti(video_stus.nowPage + 1);
        if (video_stus.nowPage >= video_stus.vti.length - 1) {
            stop();
            return;
        }
    }

    function stop() {
        if (!video_stus.intervalId) return;
        $(".meteo-video-btn-play").removeClass("meteo-video-parse-img");
        $(".meteo-video-btn-play").addClass("meteo-video-play-img");
        clearInterval(video_stus.intervalId);
        video_stus.intervalId = null;
    }


    //时间格式化
    function getTimeStr(d) {
        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();
        return year + '-' + month + '-' + date + ' ' + hours + ':00';//+ minutes+':'+seconds;
    }

    /**
     * 获取最近的起报时间（08或20）
     * @param d
     * @returns {string}
     */
    function getQbTimeStr(d) {
        var time = new Date(d);
        var hour = time.getHours();
        var vtiHour = "08";
        if (hour < 8) {
            vtiHour = "20";
            d = d - 60 * 1000 * 60 * 24;
        } else if (hour < 20) {
            vtiHour = "08"
        } else {
            vtiHour = "20";
        }
        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();
        return year + '-' + month + '-' + date + ' ' + vtiHour + ':00';
    }

    /**
     * 获取20时的起报时间
     * @param d 要寻找起报时间的时间
     * @returns {string}
     */
    function getQBTime20(d) {
        var time = new Date(d);
        var hour = time.getHours();
        var vtiHour = "08";
        if (hour < 20) {
            vtiHour = "20";
            d = d - 60 * 1000 * 60 * 24;
        } else {
            vtiHour = "20";
        }
        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();
        return year + '-' + month + '-' + date + ' ' + vtiHour + ':00';
    }

    //调整按钮样式
    function btnDisabled() {
        if (video_stus.nowPage > 0) {
            $(".meteo-video-btn-next").removeClass("meteo-video-next-img");
            $(".meteo-video-btn-next").addClass("meteo-video-next-img-blue");
            $(".meteo-video-btn-back").removeClass("meteo-video-back-img");
            $(".meteo-video-btn-back").addClass("meteo-video-back-img-blue");
            if (video_stus.nowPage >= video_stus.vti.length - 1) {
                $(".meteo-video-btn-next").removeClass("meteo-video-next-img-blue");
                $(".meteo-video-btn-next").addClass("meteo-video-next-img");
            }
        } else {
            $(".meteo-video-btn-next").removeClass("meteo-video-next-img");
            $(".meteo-video-btn-next").addClass("meteo-video-next-img-blue");
            $(".meteo-video-btn-back").removeClass("meteo-video-back-img-blue");
            $(".meteo-video-btn-back").addClass("meteo-video-back-img");
        }
    }

    function next() {
        stop();     //点击下一时次按钮时，先停止播放
        setVti(video_stus.nowPage + 1);
    }

    function back() {
        stop();     //点击上一时次按钮时，先停止播放
        setVti(video_stus.nowPage - 1);
    }

    function setVti(index) {        //设置当前显示的vti
        if (isNaN(index)) index = 0;
        if (index >= video_stus.vti.length) return;
        if (index < 0) return;

        video_stus.nowPage = index;
        video_stus.x = video_stus.nowPage * video_stus.perTime;
        $(".meteo-video-progress_btn").css("left", video_stus.x - 12);
        $(".meteo-video-progress-nowtime").html(video_stus.vti[video_stus.nowPage]);

        setTimeout(function() {
            var firTimeVal = $("#meteo-video-query-startDate").val();
            firTimeVal = new Date(firTimeVal).getTime();
            var nowdate = getTimeStr(firTimeVal + parseInt(video_stus.vti[video_stus.nowPage]) * 60 * 60 * 1000);

            // var nowdate = getTimeStr(video_stus.qbTime + parseInt(video_stus.vti[video_stus.nowPage]) * 60 * 60 * 1000);
            $(".meteo-title-left-c span").html(nowdate);
        }, 300);
        
        btnDisabled();
        timeChangeEvent();
    }

    return ONEMAP.M.video = {
        init: init,
        updateQbTime: updateQbTime,
        clearTime: clearTime,
        stop: stop
    }

    //当前时间改变
    function timeChangeEvent() {
        if (meteo.c.time)
            meteo.c.time.timeUpdate();
    }
})