TDataView_ui/scripts/meteo/c/popup.js

/**
 *  弹窗类
 */
define([
    'html!templates/meteo/popup_station',       //弹窗
], function (html) {
    var popup = {
        options: [],
        length: [],
        chart: null,
        initImage: function () {
            for (var i = 0; i < 100; i++) {
                var image = new Image();
                var dayUrl = "";
                if (i < 10) {
                    dayUrl = 'images/meteo/weatherIcon/cww0' + i + '.png';
                } else {
                    dayUrl = 'images/meteo/weatherIcon/cww' + i + '.png';
                }
                image.src = dayUrl;
            }
            var dayAndNightImageId = [0, 1, 2, 3, 25, 26, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90];
            for (var j = 0; j < dayAndNightImageId.length; j++) {
                var image = new Image();
                var nightUrl = "";
                if (dayAndNightImageId[i] < 10) {
                    nightUrl = 'images/meteo/weatherIcon/cww0' + i + 'n.png';
                } else {
                    nightUrl = 'images/meteo/weatherIcon/cww' + i + 'n.png';
                }
                image.src = nightUrl;
            }
        },
        init: function () {
            //初始化弹窗
            //---------------step1 添加弹窗布局
            $('body').append(html);
            //---------------step2 弹窗加入拖动功能
            require(['meteoDir/other/jquery.easyui.min'], function () {
                $('.meteo-popup').draggable();
            });
            //---------------设置弹窗的23维地图样式切换
            ONEMAP.C.publisher.subscribe(function (type) {
                if (type == '2d') {
                    $(".meteo-popup .popup_html").removeClass('TD');
                } else if (type == '3d') {
                    $(".meteo-popup .popup_html").addClass('TD');
                }
            }, 'change23D');

            //滚动条功能
            $(".content_scrollx").mCustomScrollbar({
                axis: "x",
                advanced: {
                    autoExpandHorizontalScroll: true,
                }
            });

            //------------添加/删除TD为星图添加（用于3D地图显示弹窗)---------------
            $('.meteo-weather-dot').click(function (event) {
                $('.meteo-popup').show();
                if (map23DData.display.map2D) {
                    $(".meteo-popup .popup_html").removeClass('TD');
                } else {
                    $(".meteo-popup .popup_html").addClass('TD');
                }
            });
            //----------------------------------------------------------------------

            //实况 菜单切换
            $('.meteo-popup #meteo-popup-bt1').addClass('current');
            $('.meteo-popup .meteo-popup-chart>div').eq(0).show().siblings().hide();

            $('.meteo-popup .meteo-popup-buttons a').click(function () {
                $(this).addClass('current').siblings().removeClass('current');
                $('.meteo-popup .meteo-popup-chart>div').eq($(this).index()).show().siblings().hide();
            })

            $('.meteo-popup .metie-popup-buttons-main').click(function (event) {
                $(this).addClass('current').siblings().removeClass('current');
                $('.meteo-popup .meteo-popup-main-warp').addClass('current').siblings().removeClass('current');
            });

            $('.meteo-popup .metie-popup-buttons-chart').click(function (event) {
                $(this).addClass('current').siblings().removeClass('current');
                $('.meteo-popup .meteo-popup-chart').addClass('current').siblings().removeClass('current');
            });

            //关闭按钮可关闭弹窗
            $('.meteo-popup .meteo-delete').click(function (event) {
                popup.hidePopup();

            });


            //点击地图关闭弹窗 2D
            map2DViewer.map.on('click', function () {
                $('.meteo-popup').hide();
            })
            //todo 点击地图关闭弹窗 3D
            // locaSpaceMap.attachEvent('Click', function () {
            //     PubSub.publish('map3D.click', {
            //         from:'3D'
            //     });
            //     // $('#meteo-popup').hide();
            // })

        },
        getUrlForType: function (type) {
            var urls =
                //地面站
                type == 0 ? [meteo.c.http.stationInfo, meteo.c.http.stationReal,
                        meteo.c.http.stationFcst, meteo.c.http.stationFcstDay] :
                    //5000站点
                    type == 1 ? [meteo.c.http.stationGInfo, meteo.c.http.stationGReal, meteo.c.http.stationGFcst] :
                        //JD站
                        type == 2 ? [meteo.c.http.amsuInfo, meteo.c.http.amsuReal, meteo.c.http.amsuFcst] :
                            //自动站
                            type == 3 ? [meteo.c.http.awsInfo, meteo.c.http.awsReal, meteo.c.http.amsuFcst] :
                                //船舶报
                                type == 4 ? [meteo.c.http.shipInfo] :
                                    null;
            return urls;
        },
        showPopup: function (station, name, type) {
            var urls = popup.getUrlForType(type);
            if (!urls) return;

            //---------------------重置为基础位置,重置第一按钮--------------------
            $('.meteo-station-popup').css('left', '260px');
            $('.meteo-station-popup').css('top', '100px');


            $('.meteo-station-popup #meteo-popup-bt1').addClass('current').siblings().removeClass('current');
            $('#meteo-popup-cdiv1').hide();
            $('#meteo-popup-cdiv2').hide();

            $('.meteo-station-popup').show();

            //-------------------step2 填充弹窗内数据-----------------------
            switch (type) {
                case 0:
                    popup.setContent(station, name, urls[0], function () {
                        $('.meteo-shikuang-div').show();
                    },0);
                    popup.setFcst(station, urls[2]);
                    popup.setFcstD(station, urls[3]);
                    break;
                case 1:
                    popup.setContent(station, name, urls[0], function () {
                        $('.meteo-shikuang-div').show();
                    },1);
                    popup.setFcst(station, urls[3]);
                    popup.setGlobalFcstD(station, urls[2]);
                    break;
                case 2:
                    popup.setContent(station, name, urls[0], function () {
                        $('.meteo-shikuang-div').show();
                    },2);
                    popup.setFcst(station, urls[2]);
                    popup.setFcstD(station, urls[3]);
                    break;
                case 3:
                    popup.setContent(station, name, urls[0], function () {
                        $('.meteo-shikuang-div').show();
                    },3);
                    popup.setFcst(station, urls[2]);
                    popup.setFcstD(station, urls[3]);
                    break;
                default:
                    break;
            }
        },
        setContent: function (station, name, url, callback,type, day) {
            var par = null;
            if (day) {
                par = {
                    odate: day
                }
            }
            meteo.c.http.httpFunction(url, station, par, function (json) {
                if (json) {
                    var date = json.ldate;
                    popup.setTitle('#meteo-popup-title', name, station, date);
                    var wth = meteo.c.process.setWth(json.wth);
                    popup.setPopupData('#meteo-popup-wth', wth);
                    var tt = meteo.c.process.setTt(json.tt);
                    popup.setPopupData('#meteo-popup-tt', tt);
                    var wth1 = meteo.c.process.setWth(json.wth1);
                    popup.setPopupData('#meteo-popup-wth1', wth1);
                    var wth2 = meteo.c.process.setWth(json.wth2);
                    popup.setPopupData('#meteo-popup-wth2', wth2);
                    var td = meteo.c.process.setTt(json.td);
                    popup.setPopupData('#meteo-popup-td', td);
                    var pr = meteo.c.process.setPr(json.pr);
                    popup.setPopupData('#meteo-popup-pr', pr);
                    var vis = meteo.c.process.setVis(json.vis);
                    popup.setPopupData('#meteo-popup-vis', vis);
                    var rh = meteo.c.process.setRh(json.rh);
                    popup.setPopupData('#meteo-popup-rh', rh);
                    var cn = meteo.c.process.setCn(json.cn);
                    popup.setPopupData('#meteo-popup-cn', cn);
                    var wd = meteo.c.process.setWd(json.wd);
                    var rn = meteo.c.process.setRn(json.rn06);
                    if(type == 1){
                        wd = meteo.c.process.setShipWd(json.wd);
                        $('#meteo-popup-rn06').parent().hide();
                        $('#meteo-popup-ch').parent().hide();
                        $('#meteo-popup-rh').parent().show();
                        $('#meteo-popup-cn').parent().show();
                        var cf = meteo.c.process.setRh(json.cF);
                        popup.setPopupData('#meteo-popup-cn', cf);
                        $('#meteo-popup-cn').prev().html('云覆盖率');
                        $('.meteo-popup-shikuangUl li').width('24.7%');
                    }else if(type == 2){
                        rn = meteo.c.process.setRn(json.rn);
                        $('#meteo-popup-cn').parent().show();
                        $('#meteo-popup-ch').parent().hide();
                        $('#meteo-popup-rh').parent().hide();
                        $('#meteo-popup-rn06').parent().show();
                        $('#meteo-popup-cn').prev().html('总云量');
                        $('.meteo-popup-shikuangUl li').width('24.7%');
                    }else if(type == 3){
                        rn = meteo.c.process.setRn(json.rn);
                        $('#meteo-popup-cn').parent().hide();
                        $('#meteo-popup-ch').parent().hide();
                        $('#meteo-popup-rh').parent().show();
                        $('#meteo-popup-rn06').parent().show();
                        $('.meteo-popup-shikuangUl li').width('24.7%');
                    }else if(type == 0){
                        $('#meteo-popup-cn').parent().show();
                        $('#meteo-popup-ch').parent().show();
                        $('#meteo-popup-rh').parent().show();
                        $('#meteo-popup-rn06').parent().show();
                        $('#meteo-popup-cn').prev().html('总云量');
                        $('.meteo-popup-shikuangUl li').width('19.7%');
                    }

                    popup.setPopupData('#meteo-popup-rn06', rn);
                    var ws = meteo.c.process.setWs(json.ws);
                    popup.setPopupData('#meteo-popup-wd', wd);
                    popup.setPopupData('#meteo-popup-ws', ws);
                    var dp = meteo.c.process.setPr(json.dp03);
                    popup.setPopupData('#meteo-popup-dp03', dp);
                    var cm = meteo.c.process.setCn(json.cm);
                    popup.setPopupData('#meteo-popup-cm', cm);
                    var ch = meteo.c.process.setCh(json.ch);
                    popup.setPopupData('#meteo-popup-ch', ch);
                    callback ? callback() : null;
                } else {
                    ONEMAP.C.publisher.publish({type: 'warning', message: '暂无当前站点数据'}, 'noteBar::add');
                    popup.hidePopup();
                }
            })
        },
        setReal: function (station, url, day) {
            if (!url) {
                return;
            }
            var par = null;
            if (day) {
                par = {
                    ldate: day,
                    odate: day
                }
            }
            meteo.c.http.httpFunction(url, station, par, function (json) {
                if (json.length > 0) {
                    $('#meteo-popup-bt1').show();
                    $('#meteo-popup-cdiv1').show();

                    var chartWidth = json.length * 50;
                    chartWidth = chartWidth < 740 ? 740 : chartWidth;
                    $('#meteo-popup-chart').css('width', chartWidth); //设置宽度

                    var chart = meteo.c.chart.getChart('meteo-popup-chart');
                    var option = meteo.c.chart.getChartOption(json, "实况");

                    chart.resize();
                    chart.setOption(option);
                    $(".content_scrollx").mCustomScrollbar('update');
                }
            }, function () {
            });
        },

        setFcst: function (station, url, day) {
            if (!url) {
                $('#meteo-popup-bt2').hide();
                return;
            }
            var par = null;
            if (day) {
                par = {
                    ldate: day,
                    odate: day
                }
            }
            meteo.c.http.httpFunction(url, station, par, function (json) {
                if (json.length > 0) {
                    $('#meteo-popup-bt2').show();

                    var chartWidth = json.length * 60;
                    chartWidth = chartWidth < 740 ? 740 : chartWidth;
                    $('#meteo-popup-chart').css('width', chartWidth); //设置宽度

                    var chart = meteo.c.chart.getChart('meteo-popup-chart');
                    chart.clear();
                    var option = meteo.c.chart.getSurfHourChartOption(json, "预报");
                    chart.setOption(option);

                    $(".content_scrollx").mCustomScrollbar('update');
                } else {
                    $('#meteo-popup-cdiv1').hide();
                    $('#meteo-popup-bt2').hide();
                }
            }, function () {
                $('#meteo-popup-bt2').hide();
            })
        },

        setFcstD: function (station, url, day) {
            if (!url) {
                $('#meteo-popup-bt3').hide();
                return;
            }
            var par = null;
            if (day) {
                par = {
                    ldate: day,
                    odate: day
                }
            }
            meteo.c.http.httpFunction(url, station, par, function (json) {
                if (json.length > 0) {
                    $('#meteo-popup-bt3').show();

                    var chartWidth = json.length * 40;
                    chartWidth = chartWidth < 740 ? 740 : chartWidth;
                    $('#meteo-popup-chart2').css('width', chartWidth); //设置宽度

                    var chart = meteo.c.chart.getChart('meteo-popup-chart2');
                    chart.clear();
                    var option = meteo.c.chart.getChartOption(json, "七天预报");
                    chart.setOption(option);

                    $(".content_scrollx").mCustomScrollbar('update');
                } else {
                    $('#meteo-popup-cdiv2').hide();
                    $('#meteo-popup-bt3').hide();
                }
            }, function () {
                $('#meteo-popup-bt3').hide();
            })
        },
        setGlobalFcstD: function (station, url, day) {
            if (!url) {
                $('#meteo-popup-bt3').hide();
                return;
            }
            var par = null;
            if (day) {
                par = {
                    ldate: day,
                    odate: day
                }
            }
            meteo.c.http.httpFunction(url, station, par, function (json) {
                if (json.length > 0) {
                    $('#meteo-popup-bt3').show();

                    var chartWidth = json.length * 40;
                    chartWidth = chartWidth < 740 ? 740 : chartWidth;
                    $('#meteo-popup-chart2').css('width', chartWidth); //设置宽度

                    var chart = meteo.c.chart.getChart('meteo-popup-chart2');
                    chart.clear();
                    var option = meteo.c.chart.getGlobalDaysChartOption(json, "七天预报");

                    chart.setOption(option);

                    $(".content_scrollx").mCustomScrollbar('update');
                } else {
                    $('#meteo-popup-bt3').hide();
                    $('#meteo-popup-chart2').hide();
                }
            }, function () {
                $('#meteo-popup-bt3').hide();
            })
        },

        hidePopup: function () {
            $('.meteo-station-popup').hide();
        },

        setPopupData: function (id, data) {
            var html = data ? data : "--";
            $(id).html(html);
        },

        setTitle: function (id, name, station, ldate) {
            // var html = data == 0 || data ? data + company : "--";
            if (name == "undefined" || !name) name = null;
            var html = name ? name + " (" + station + ")" : "(" + station + ")";
            html = ldate ? html + " " + ldate : html;
            $(id).html(html);
        },
    }


    popup.init();
    // popup.initImage();

    return popup;
});