TDataView_ui/scripts/mod/atlas/atlasCategory.js

/**
 * [ATLAS.M.atlasCategory]
 * @return {[object]}
 */
define(['html!templates/atlas/atlasCategory',
    'css!styles/atlas/atlasCategory'],
    function (tplLayout) {
        /**
         * 模块数据 用于数据存储和外部调用
         * @type {Object}
         */
        var modValue = {
            options: {
                type: 1,
                page: 1,
                pageSize: 20,
                searchWord: ''
            },
            //图集列表
            atlasCategoryData: null,
            simpleCampare: false
        }

        var ditukuStatu = false;

        /**
         * 初始化并订阅事件
         * @return {[type]} [description]
         */
        function init(type, data) {

            if (data == "search") {
                //console.log("search rightArea");
                //console.log(ONEMAP.D.user.searchKeyWord);
                modValue.options.searchWord = ONEMAP.D.user.searchKeyWord;
            }
            else {
                modValue.options.searchWord = "";
            }

            modValue.options.page = 1;
            // bindEvent();
            subscribe();

            if (type == 22) {
                modValue.options.type = 2;
                modValue.simpleCampare = true;
                showCompare(dataArr);
            }
            else if (type == 203) {
                // 搜索那边过来的
                // console.log("from search");
                ONEMAP.C.ditukuSearchResult = false;
                for (var i = 2; i < 5; i++) {
                    modValue.options.type = i;
                    getAtlasCategoryGai(i);
                }

            }
            else {
                modValue.options.type = parseInt(type);
                getAtlasCategory();
            }

        }

        /**
         * 界面事件绑定
         * @return {[type]} [description]
         */
        function bindEvent() {
            getAtlasCategory();
        }

        /**
         * 界面重置
         * @return {[type]} [description]
         */
        function layoutResize() {
            var marginWidth = (parseInt($('#atlasList').width() - 10) % 308 / parseInt($('#atlasList').width() / 308) / 2);
            $('#atlasList li').css({ marginLeft: marginWidth, marginRight: marginWidth });

            $("#thematicResultsList").css({ height: $("#sideBar").height() - $('#thematicCategoryList').height() - 180 });

            $('.atlas-list').css({ height: $('body').height() - 190 });

            $(".atlas-list").mCustomScrollbar('update');
        }

        /**
         * 面板的比对
         * @private
         */
        function simpleCampare(dataArr) {

            var openUrl, layerNum;
            var num = 0;
            var rightData = {};
            var getRightData = $("#layerControlMenu .myLayers .mn-content li:eq(" + dataArr[1] + ") .data-save").html();
            var leftData = JSON.parse($("#layerControlMenu .myLayers .mn-content li:eq(" + dataArr[0] + ") .data-save").html());
            var cid = $("#mapBaseLayerControl .choosemap .map-list li.active").attr("mid");

            if (typeof (getRightData) == "undefined") {    // 单图层时与底图比较(需添加未选中时的条件)
                rightData = leftData;
                layerNum = "1&base=" + cid;
            }
            else {
                rightData = JSON.parse(getRightData);
                layerNum = 2;
            }

            // 此处放入地图对数据(guid)
            openUrl = 'atlasView.html?viewType=' + modValue.options.type +
                '&left=' + leftData.guid +
                '&right=' + rightData.guid +
                '&serialize=' + ONEMAP.C.encryption.enCode(JSON.stringify(modValue.options)) +
                '&layerNum=' + layerNum;

            var href = window.location.href;
            openUrl = href + openUrl;
            var utime = setInterval(function () {
                if (openUrl) {
                    var windowOpen = window.open(openUrl);
                    clearInterval(utime);
                } else if (num > 20) {
                    windowOpen.close();
                    clearInterval(utime);
                }
                num++
            }, 200);
        }

        /**
         * 获取图集列表
         * @type {Function}
         * @private
         */
        function getAtlasCategory() {
            ONEMAP.V.loading.load();
            var ajaxUrl = onemapUrlConfig.thematicDataUrl +
                '/shelf/products?types=[' + modValue.options.type + ']' +
                '&page=' + modValue.options.page +
                '&pagesize=' + modValue.options.pageSize +
                '&search=' + encodeURIComponent(modValue.options.searchWord);
            //console.log(ajaxUrl);
            $.ajax({
                type: "get",
                dataType: 'jsonp',
                url: ajaxUrl,
                success: function (data) {
                    ONEMAP.V.loading.loaded();
                    if (data.length > 0) {
                        // console.log(data);
                        if (data[0]['type'] === modValue.options.type) {
                            modValue.atlasCategoryData = data[0];
                            setAtlasCategoryList();
                        }
                        if (data[0]['products'].length <= 0) {
                            // ONEMAP.C.publisher.publish({ type: 'warning', message: '暂无此搜索结果' }, 'noteBar::add');
                        }
                    } else {
                        ONEMAP.C.publisher.publish({ type: 'error', message: '获取图集列表数据失败！' }, 'noteBar::add');
                    }
                },
                error: function (data) {
                    ONEMAP.V.loading.loaded();
                    ONEMAP.C.publisher.publish({ type: 'error', message: '获取图集列表数据失败！' }, 'noteBar::add');
                }
            });
        }

        function getAtlasCategoryGai(typeF) {
            ONEMAP.V.loading.load();
            var ajaxUrl = onemapUrlConfig.thematicDataUrl +
                '/shelf/products?types=[' + modValue.options.type + ']' +
                '&page=' + modValue.options.page +
                '&pagesize=' + modValue.options.pageSize +
                '&search=' + encodeURIComponent(modValue.options.searchWord);
            //console.log(ajaxUrl);
            $.ajax({
                type: "get",
                dataType: 'jsonp',
                url: ajaxUrl,
                success: function (data) {
                    ONEMAP.V.loading.loaded();
                    if (data.length > 0) {
                        // console.log(data);
                        if (data[0]['type'] === modValue.options.type) {
                            modValue.atlasCategoryData = data[0];
                            setAtlasCategoryList();
                        }
                        if (data[0]['total'] == 0) {
                            // console.log("无结果");
                            $("#placePanel .thematic-content .thematic-title li").eq(typeF - 1).hide();
                        }
                        else {
                            // console.log("youjieguo");
                            ONEMAP.C.ditukuSearchResult = true;
                            $("#placePanel .thematic-content .thematic-title li").eq(typeF - 1).show();
                            // setTimeout(function(){

                            if (ditukuStatu == false && parseInt($("#placePanel .thematic-content .thematic-title li").eq(0).css("height")) == 0) { //异步error
                                // if(ditukuStatu == false){
                                // console.log("xi")
                                ditukuStatu = true;
                                $("#placePanel .thematic-content .thematic-title li").eq(typeF - 1).addClass("active");
                                $("#placePanel .thematic-content .thematic-title li").eq(typeF - 1).click();
                            }
                            // },300)
                        }
                        if (typeF == 4) {
                            var ph = parseInt($("#placePanel .thematic-content .thematic-search-list").css("height"));
                            // console.log(ph);
                            // console.log(ONEMAP.C.ditukuSearchResult);
                            var li = $("#placePanel .thematic-content .thematic-title li");
                            // for(if())
                            if (ph == 0 && ONEMAP.C.ditukuSearchResult == false) {
                                // if(ph == 0 && ONEMAP.C.ditukuSearchResult == false && !li.eq(0).hasClass("active")){
                                // console.log("asdf0")
                                $("#placePanel .thematic-content").hide();
                            }
                            else {
                                $("#placePanel .thematic-content").show();
                            }
                            if ($(".meteo-search-result-list").text() == "") {
                                $(".meteo-search").hide();
                            }
                            else {
                                $(".meteo-search").show();
                            }
                        }


                    } else {
                        ONEMAP.C.publisher.publish({ type: 'error', message: '获取图集列表数据失败！' }, 'noteBar::add');
                    }
                },
                error: function (data) {
                    ONEMAP.V.loading.loaded();
                    ONEMAP.C.publisher.publish({ type: 'error', message: '获取图集列表数据失败！' }, 'noteBar::add');
                }
            });
        }
        /**
         * 获取地图对信息并直接跳转地图对比
         * @private
         */
        function showCompare(aid) {
            ONEMAP.V.loading.load();
            var ajaxUrl = onemapUrlConfig.thematicDataUrl + '/production/product_category?' +
                'production_id=' + aid;
            var windowOpen = window.open();
            var atlasUrl = onemapUrlConfig.atlasLibraryUrl;
            var openUrl;
            var num = 0;

            $.ajax({
                type: "get",
                dataType: 'jsonp',
                url: ajaxUrl,
                success: function (data) {
                    // console.log(data);
                    ONEMAP.V.loading.loaded();
                    if (data.category.length > 1) {
                        openUrl = atlasUrl + '/atlasView.html?viewType=' + modValue.options.type +
                            '&left=' + data.category[0].list[0]['guid'] +
                            '&right=' + data.category[1].list[0]['guid'] +
                            '&serialize=' + ONEMAP.C.encryption.enCode(JSON.stringify(modValue.options));
                    } else {
                        openUrl = atlasUrl + '/atlasView.html?viewType=' + modValue.options.type +
                            '&left=' + data.category[0].list[0]['guid'] +
                            '&right=' + data.category[0].list[1]['guid'] +
                            '&serialize=' + ONEMAP.C.encryption.enCode(JSON.stringify(modValue.options));
                    }

                },
                error: function (data) {
                    ONEMAP.V.loading.loaded();
                    ONEMAP.C.publisher.publish({ type: 'error', message: '获取地图对数据失败！' }, 'noteBar::add');
                }
            });

            var utime = setInterval(function () {
                if (openUrl) {
                    windowOpen.location = openUrl;
                    clearInterval(utime);
                } else if (num > 20) {
                    windowOpen.close();
                    clearInterval(utime);
                }
                num++
            }, 200);
        }

        /**
         * 设置地图集列表
         * @type {Function}
         * @private
         */
        function setAtlasCategoryList() {

            if (modValue.atlasCategoryData.products.length > 0) {

                var ul = $('<ul class="thematic-list"></ul>');
                $("#thematicCategoryList").hide();
                $.each(modValue.atlasCategoryData.products, function (index, val) {
                    var atlas = val;
                    var li = $('<li aid="' + atlas.guid + '">' +
                        '<img src="' + map23DConfig.map23DAssetsUrl + '/images/atlas/bookImg.png"/>' +
                        '<span class="cover"></span><span class="name">' + atlas.name + '</span></li>');
                    li.bind('click', { da: atlas, page: modValue.atlasCategoryData.page }, function (e) {
                        $('#atlasList .li-select').removeClass('li-select');
                        $(this).addClass('li-select');

                        //如果是地图对，直接进入对比阅读
                        if (modValue.options.type === 2) {
                            if (modValue.simpleCampare == true) {
                                simpleCampare($(this).attr('aid'))
                            }
                            else {
                                showCompare($(this).attr('aid'));
                            }

                        } else if (modValue.options.type === 1) {//进入单幅图
                            $("#thematicCategoryList").show();
                            showSingleAtlas($(this).attr('aid'), e.data.page);
                        } else {//进入图集
                            showAtlas($(this).attr('aid'));
                        }
                    });
                    li.appendTo(ul);
                });
                $("#thematicResultsList .item-list").empty().append(ul);
                $("#thematicResultsList").attr("layerType", modValue.options.type);
                // // 从搜索条中读入
                // if(ONEMAP.D.user.searchInsert){
                //     $("#thematicResultsList .item-list").empty().append(ONEMAP.D.user.searchKeyWordAtlasResult);
                //     ONEMAP.D.user.searchKeyWordAtlasResult = null;
                // }
                layoutResize();

                //分页
                //
                if ((modValue.options.page * modValue.options.pagesize) >= modValue.atlasCategoryData.total) {
                    // console.log("page test");
                    $("#thematicPage").hide();
                    return;
                }

                $("#thematicPage").empty();
                var countPages = (parseInt(modValue.atlasCategoryData.total % modValue.atlasCategoryData.pagesize) > 0 ? parseInt(modValue.atlasCategoryData.total / modValue.atlasCategoryData.pagesize + 1) : parseInt(modValue.atlasCategoryData.total / modValue.atlasCategoryData.pagesize));
                if (countPages == 0) {
                    countPages = 1;
                }
                var _pageJump = $('<div class="firstpage"></div>' +
                    '<div class="uppage"></div>' +
                    '<div class="fg"></div>' +
                    '<div id="thematicPageJump" class="count">' +
                    '   <span>' + modValue.atlasCategoryData.page + '/' + countPages + '页</span>' +
                    '</div>' +
                    '<div class="fg"></div>' +
                    '<div class="nextpage"></div>' +
                    '<div class="endpage"></div>'
                );
                _pageJump.appendTo($("#thematicPage"));
                if (modValue.atlasCategoryData.page == 1) {
                    $("#thematicPage .firstpage").css("background", "url(../images/layout/page_11.png) no-repeat 7px 11px")
                    $("#thematicPage .uppage").css("background", "url(../images/layout/page_13.png) no-repeat 10px 11px")
                    $("#thematicPage .nextpage").css("background", "url(../images/layout/page_06ch.png) no-repeat 10px 11px")
                    $("#thematicPage .endpage").css("background", "url(../images/layout/page_08ch.png) no-repeat 7px 11px")
                } else if (modValue.atlasCategoryData.page == countPages) {
                    $("#thematicPage .firstpage").css("background", "url(../images/layout/page_11ch.png) no-repeat 7px 11px")
                    $("#thematicPage .uppage").css("background", "url(../images/layout/page_13ch.png) no-repeat 10px 11px")
                    $("#thematicPage .nextpage").css("background", "url(../images/layout/page_06.png) no-repeat 10px 11px")
                    $("#thematicPage .endpage").css("background", "url(../images/layout/page_08.png) no-repeat 7px 11px")
                } else {
                    $("#thematicPage .firstpage").css("background", "url(../images/layout/page_11ch.png) no-repeat 7px 11px")
                    $("#thematicPage .uppage").css("background", "url(../images/layout/page_13ch.png) no-repeat 10px 11px")
                    $("#thematicPage .nextpage").css("background", "url(../images/layout/page_06ch.png) no-repeat 10px 11px")
                    $("#thematicPage .endpage").css("background", "url(../images/layout/page_08ch.png) no-repeat 7px 11px")
                }
                $(".firstpage").bind("click", function () {
                    modValue.atlasCategoryData.page = 1;
                    var op = "f";
                    clickpage(modValue.atlasCategoryData.page, countPages);
                    $("#thematicPageJump span").html(modValue.atlasCategoryData.page + "/" + countPages + "页");
                })
                $(".uppage").bind("click", function () {
                    modValue.atlasCategoryData.page--
                    var op = "u";
                    if (modValue.atlasCategoryData.page < 1) {
                        modValue.atlasCategoryData.page = 1
                    } else {
                        clickpage(modValue.atlasCategoryData.page, countPages);
                        $("#thematicPageJump span").html(modValue.atlasCategoryData.page + "/" + countPages + "页");
                    }

                })
                $(".nextpage").bind("click", function () {
                    modValue.atlasCategoryData.page++
                    var op = "n";
                    if (modValue.atlasCategoryData.page > countPages) {
                        modValue.atlasCategoryData.page = countPages
                    } else {
                        clickpage(modValue.atlasCategoryData.page, countPages);
                        $("#thematicPageJump span").html(modValue.atlasCategoryData.page + "/" + countPages + "页");
                    }
                })
                $(".endpage").bind("click", function () {
                    modValue.atlasCategoryData.page = countPages;
                    var op = "e";
                    clickpage(modValue.atlasCategoryData.page, countPages);
                    $("#thematicPageJump span").html(modValue.atlasCategoryData.page + "/" + countPages + "页");
                })
                $("#thematicSearchKey").bind('input porpertychange', function (e) {
                    var searchVal = $("#thematicSearchKey").val();
                    if (searchVal == "") {
                        modValue.options.searchWord = "";
                        getAtlasCategory();
                    }
                })
                $("#thematicPageJump .page_num").bind('keydown', function (e) {
                    if (e.keyCode === 13) {
                        var pageJump = parseInt($("#thematicPageJump .page_num").val());
                        if (!pageJump || pageJump > countPages) {
                            return;
                        } else {
                            showThematic({ page: parseInt(pageJump), });
                        }
                    }
                });

                var _themtiicPageBtnGroup = $('<div class="btn-group"></div>').appendTo($("#thematicPage"));

                if (modValue.atlasCategoryData.pagesize < modValue.atlasCategoryData.total) {
                    if (modValue.atlasCategoryData.page == 1) {
                        var abtnNext = $('<button type="button" class="btn btn2 btn-small next" pid=' + (modValue.atlasCategoryData.page + 1) + '>下一页</button>');

                    } else if (countPages == modValue.atlasCategoryData.page && modValue.atlasCategoryData.total > modValue.atlasCategoryData.pagesize) {
                        var abtnPrev = $('<button type="button" class="btn btn2 btn-small prev" pid=' + (modValue.atlasCategoryData.page - 1) + '>上一页</button>');

                    } else {
                        var abtnPrev = $('<button type="button" class="btn btn2 btn-small prev" pid=' + (modValue.atlasCategoryData.page - 1) + '>上一页</button>');
                        var abtnNext = $('<button type="button" class="btn btn2 btn-small next" pid=' + (modValue.atlasCategoryData.page + 1) + '>下一页</button>');
                    }

                    $("#thematicPage .btn").on("click", function () {
                        showThematic({ page: parseInt($(this).attr('pid')) });
                    });
                }
                $("#thematicPage").show();
            }
            else {
                $("#thematicResultsList .item-list").empty()
                var tp;
                if (modValue.atlasCategoryData.type == 2) {
                    tp = "地图对"
                } else if (modValue.atlasCategoryData.type == 3) {
                    tp = "系列图"
                } else if (modValue.atlasCategoryData.type == 4) {
                    tp = "地图集"
                }
                // $('<div id="noListData">地图库暂无此数据!</div>').appendTo($('#atlasList'));
                $('<div id="noListData">' + tp + '暂无此数据!</div>').appendTo($("#thematicResultsList .item-list").empty());
                //ONEMAP.C.publisher.publish({ type: 'warning', message: '地图库暂无此数据！' }, 'noteBar::add');
            }
        }

        /**
         * 换页点击事件
         */
        function clickpage(op, allp) {
            if (op == 1) {
                $("#thematicPage .firstpage").css("background", "url(../images/layout/page_11.png) no-repeat 7px 11px")
                $("#thematicPage .uppage").css("background", "url(../images/layout/page_13.png) no-repeat 10px 11px")
                $("#thematicPage .nextpage").css("background", "url(../images/layout/page_06ch.png) no-repeat 10px 11px")
                $("#thematicPage .endpage").css("background", "url(../images/layout/page_08ch.png) no-repeat 7px 11px")
            } else if (op == allp) {
                $("#thematicPage .firstpage").css("background", "url(../images/layout/page_11ch.png) no-repeat 7px 11px")
                $("#thematicPage .uppage").css("background", "url(../images/layout/page_13ch.png) no-repeat 10px 11px")
                $("#thematicPage .nextpage").css("background", "url(../images/layout/page_06.png) no-repeat 10px 11px")
                $("#thematicPage .endpage").css("background", "url(../images/layout/page_08.png) no-repeat 7px 11px")
            } else {
                $("#thematicPage .firstpage").css("background", "url(../images/layout/page_11ch.png) no-repeat 7px 11px")
                $("#thematicPage .uppage").css("background", "url(../images/layout/page_13ch.png) no-repeat 10px 11px")
                $("#thematicPage .nextpage").css("background", "url(../images/layout/page_06ch.png) no-repeat 10px 11px")
                $("#thematicPage .endpage").css("background", "url(../images/layout/page_08ch.png) no-repeat 7px 11px")
            }
            modValue.options.page = parseInt(op);
            showThematic({ page: parseInt(op), searchType: 'byPage' });
        };

        /**
         * 显示指定参数的专题列表
         * @type {Function}
         * @param options {Object} {}
         */
        function showThematic(options) {
            ONEMAP.T.objExtend(modValue.options, options, true);
            getPageResult(modValue.options);
        };

        /**
         * 根据options查询专题图
         * @type {Function}
         * @param options {Object} {page:页数，`:每页条数，searchType:查询类型 "byPage"/"byId"/"byKeyWord}
         * @private
         */
        function getPageResult(options) {
            switch (options.searchType) {
                case "byPage":
                    ONEMAP.V.loading.load();
                    byDefault(function (data) {
                        ONEMAP.V.loading.loaded();
                        // if (!data.hasOwnProperty('map_list')) {
                        //     setNotResultHtml('没有搜索到相关的信息。');
                        //     $("#thematicPage").hide();
                        // } else {
                        //     modValue.thematicDataResult = data;
                        // console.log(data);
                        modValue.atlasCategoryData = data[0];
                        setAtlasCategoryList();
                        //     setAtlasCategoryList();
                        // }
                    });
                    break;
                case "byKeyWord":
                    ONEMAP.V.loading.load();
                    byKeyWord(options.searchKeyWord, function (data) {
                        ONEMAP.V.loading.loaded();
                        // if (!data.hasOwnProperty('map_list')) {
                        //     setNotResultHtml('没有搜索到 ' + options.searchKeyWord + ' 的信息。');
                        //     $("#thematicPage").hide();
                        // } else {
                        //     modValue.thematicDataResult = data;
                        //     setAtlasCategoryList();
                        // }
                        modValue.atlasCategoryData = data[0];
                        setAtlasCategoryList();
                    });
                    break;
            }
        };

        /**
         * 根据 options 参数获取 图集信息
         * @param callback_func {Function} 回调方法
         * @return {Object}
         */
        function byDefault(callback_func) {

            var ajaxUrl = onemapUrlConfig.thematicDataUrl +
                '/shelf/products?types=[' + modValue.options.type + ']' +
                '&page=' + modValue.options.page +
                '&pagesize=' + modValue.options.pageSize +
                '&search=' + encodeURIComponent(modValue.options.searchWord);


            // var ajaxUrl = onemapUrlConfig.thematicDataUrl + '/map/list' + '?types=[1,2,4]&page=' + modValue.options.page + '&pagesize=' + modValue.options.pageSize + '&region=' + modValue.options.region + '&area=' + modValue.options.area;
            // if (modValue.options.theme != null && modValue.options.theme != 'undefined') {
            //     ajaxUrl += '&theme=' + modValue.options.theme;
            // }
            ONEMAP.V.loading.load();
            $.ajax({
                url: ajaxUrl,
                type: 'GET',
                dataType: 'jsonp'
            })
                .done(function (data) {
                    ONEMAP.V.loading.loaded();
                    callback_func(data);
                })
                .fail(function () {
                    ONEMAP.V.loading.loaded();
                });
        };

        function showAtlas(aid) {
            var atlasUrl = onemapUrlConfig.atlasLibraryUrl;
            var windowOpen = window.open();
            var openUrl = atlasUrl + '/atlasView.html?viewType=' + modValue.options.type + '&' +
                'productionId=' + aid + '&serialize=' + ONEMAP.C.encryption.enCode(JSON.stringify(modValue.options));
            windowOpen.location = openUrl;
        }

        /**
         * 注册订阅
         * @type {Function}
         * 推送：ATLAS.C.publisher.publish(options,'atlasCategory::type');
         * 订阅：ATLAS.C.publisher.subscribe(layoutResize,'sideBarLayoutChange');
         */
        function subscribe() {
            ONEMAP.C.publisher.subscribe(function () {
                map.invalidateSize();
            }, 'atlasView::layoutResize');
        }

        /**
         * 取消订阅
         * @type {Function}
         * 取消订阅：ATLAS.C.publisher.unSubscribe(layoutResize,'sideBarLayoutChange');
         */
        function unSubscribe() { }

        /**
         * 模块移除
         * @return {[type]} [description]
         */
        function remove() {

            //取消订阅
            //unSubscribe();
        }

        return ONEMAP.M.atlasCategory = {
            init: init,
            layoutResize: layoutResize
        }
    });