TDataView_ui/scripts/mod/user/userDraw.js

/**
 * @fileoverview 用户 地点记录 模块
 * @author Song.Huang
 * @version 1.0.0
 */
define([
    'html!templates/user/userDraw',
    'css!styles/user/userDraw',
    'modDir/tools/toolDraw_new'],
function(tplLayout) {
    /**
     * 模块数据 用于数据存储和外部调用
     * @type {Object}
     * 数据存放
     */
    var modValue = {
        options: {
            page: 1,
            pageSize: onemapUrlConfig.showCollectNum
        },
        favData: null,
        bflist: [],
        showAllBf: false
    }
    /**
     * 模块状态，用于存储模块的状态 例如：收起，关闭
     * @type {Object}
     */
    var status = {
        initialized: false,
        addAllBiaohui: false
    }

    //分页
    var pageContainer,
        favPageBtnGroup,
        pageJump;

    /**
     * 初始化
     * @type {Function}
     */
    function init() {
        setLayout();
        subscribe();
        showPage({
            page:1
        });
        bindEvent();
    }

    function bindEvent(){
        $("#toolsBar").unbind("click").bind("click",function(){
            // remove()
        })
    }

    function showAllBf(pagenum){
        var list = modValue.favData.list;
        $("#userCenterContentWrap .showAllBf").unbind("click").bind("click",function(){
            getFavData(pagenum);
            // if(status.addAllBiaohui == false){
                status.addAllBiaohui = true;
                for(var i=0;i<modValue.bfData.length;i++){
                    if(!modValue.bflist[list[i]._id].zhanshi){
                        ONEMAP.M.toolDraw.showDraw(modValue.bfData[i]); 
                        modValue.bflist[list[i]._id].zhanshi = true;                       
                    }
                }
            // }
        })
    }
    function showAllBfC(){
        var list = modValue.favData.list;
        $("#userCenterContentWrap .showAllBf").unbind("click").bind("click",function(){
            // getFavData(pagenum);
            // if(status.addAllBiaohui == false){
                status.addAllBiaohui = true;
                for(var i=0;i<modValue.bfData.length;i++){
                    if(!modValue.bflist[list[i]._id].zhanshi){
                        ONEMAP.M.toolDraw.showDraw(modValue.bfData[i]); 
                        modValue.bflist[list[i]._id].zhanshi = true;                       
                    }
                }
            // }
        })
    }


    /**
     * 设置界面
     */
    function setLayout(){
        $("#usrCenterContent").empty().append(tplLayout);
        pageContainer = $('<div id="userFavPage"></div>').appendTo($("#usrCenterContent"));
        var showAllBf = $('<p class="showAllBf">展示当前页标注</p>');
        $("#userCenterContentWrap .showAllBf").remove();
        showAllBf.appendTo($("#userCenterContentWrap"));
        $("#userFav").mCustomScrollbar({
            scrollInertia: 1000
        });
        layoutResize();
        $(window).resize(function() {
            layoutResize();
        });
    }


    /**
     * 界面重置
     * @return {[type]} [description]
     */
    function layoutResize(){
        $("#userFav").css({height:$(window).height()-154});
        $("#userFav").mCustomScrollbar("update");
    }


    /**
     * 显示指定参数的列表
     * @type {Function}
     * @param options {Object} 参数
     * @see options
     * @private
     */
    function showPage(options){
        ONEMAP.T.objExtend(modValue.options,options,true);
        getFavData(options.page);
    }


    /**
     * 获取收藏数据
     * @type {Function}
     * @private
     */
    function getFavData(zhidingpage) {
        var zdpage = zhidingpage||modValue.options.page;
        ONEMAP.V.loading.load();
        $.ajax({
            type: "get",
            dataType: 'json', 
            url: onemapUrlConfig.userCenterUrl+ '/draw/list'+  
                '?page=' + zdpage + 
                '&size=' + modValue.options.pageSize,
            success: function(data) {
                //console.log(data);
                ONEMAP.V.loading.loaded();
                if(data.code == 4){
                    ONEMAP.T.noPermission('addFav',data.message);
                    return false;
                }
                if(data.code == 500){
                    ONEMAP.T.noPermission('addFav',data.message);
                    return false;
                }
                if(data.code == 3){
                    ONEMAP.T.logout('addFav');
                    return false;
                }
                modValue.favData = data;
                var list = modValue.favData.list;
                for(var i=0;i<list.length;i++){
                    modValue.bflist[list[i]._id] = list[i];
                    modValue.bflist[list[i]._id].zhanshi = false;                       
                }
                if(data.total>0){
                    setTimeout(function(){
                        setFavItem();
                    },100)
                } else {
                    $("#userFavList").html("暂无数据");
                }
                //显示当前页全部标注
                var bfData = data.list;
                modValue.bfData = data.list;
                showAllBfC();
                // showAllBf();
            },
            error:function(errorData){
                ONEMAP.V.loading.loaded();
            }
        });
    }

    /**
    * 下载地图上路线数据
    * 格式为geojson
    */
    function downDrawGeojson(geodata){
        var geojson = {
          "type": "FeatureCollection",
          "features": []
        };

        if(geodata.shape == "Line"){
            var pointLatLng = [];
            for(var i=0;i<geodata.LatLngs.length;i++){
                pointLatLng.push([geodata.LatLngs[i].lng,geodata.LatLngs[i].lat]);
            }
            geojson.features.push({
              "type": "Feature",
              "properties": {
              },
              "geometry": {
                "type": "LineString",
                "coordinates": pointLatLng
              }
            })
        }else if(geodata.shape == "Marker"){
            var pointLatLng = [geodata.LatLngs.lng,geodata.LatLngs.lat];
            geojson.features.push({
              "type": "Feature",
              "properties": {
                name:geodata.zhuji
              },
              "geometry": {
                "type": "Point",
                "coordinates": pointLatLng
              }
            })
        }else if(geodata.shape == "Poly" || geodata.shape == "Rectangle"){
            var pointLatLng = [];
            for(var i=0;i<geodata.LatLngs[0].length;i++){
                var latlng = geodata.LatLngs[0][i];
                pointLatLng.push([latlng.lng,latlng.lat]);
            }

            pointLatLng.push([geodata.LatLngs[0][0].lng,geodata.LatLngs[0][0].lat]);
            
            geojson.features.push({
              "type": "Feature",
              "properties": {
              },
              "geometry": {
                "type": "Polygon",
                "coordinates": [pointLatLng]
              }
            })
        }
        

        var eleLink = document.createElement('a');
        var filename = 'exportRout.geojson';
        eleLink.download = filename;
        var content = JSON.stringify(geojson);
        var blob = new Blob([content]);
        var href = URL.createObjectURL(blob);
        eleLink.href = href;
        $(eleLink)[0].click();
    }

    /**
     * 设置收藏列表item
     * @type {Function}
     * @private
     */
    function setFavItem(){
        var count = 0;
        $("#userFavList").empty();
        if(modValue.favData['list'].length > 0){
            for(var i= 0,l=modValue.favData['list'].length; i<l; i++){
                var da = modValue.favData['list'][i];
                count++;
                var itemHtml;
                // //console.log(da);
                var nming = da.name.split(";")[0];
                var dming = '';
                if(JSON.parse(da.draw_data).smlInfo){
                    itemHtml = $('<dt fid="'+da._id+'" class="'+da._id+'"><span class="num">'+count+'</span><span class="name red" title="'+nming+'">'+nming +'<span style="color:red">*</span></span>'+
                    '<span class="option"><a class="del" title="删除">删除</a><a class="edit" title="编辑">编辑</a></span></dt>');
                } else if(da.info!='newdraw' && da.info){
                    itemHtml = $('<dt fid="'+da._id+'" class="'+da._id+'"><p class="num">'+count+'</p><p class="name" title="'+nming+'">'+nming +'<p class="dmsj">'+da.info.split(";")[1]+'</p></p>'+
                    '<p class="option"><a class="del" title="删除">删除</a><a class="edit" title="编辑">编辑</a><a class="export" title="导出">导出</a></p></dt>');
                } else{
                    itemHtml = $('<dt fid="'+da._id+'" class="'+da._id+'"><span class="num">'+count+'</span><span class="name" title="'+nming+'">'+nming +'</span>'+
                    '<span class="option"><a class="del" title="删除">删除</a><a class="edit" title="编辑">编辑</a></span></dt>');
                }
                

                itemHtml.bind('mouseenter',function(){
                    $(this).addClass('hover');
                }).bind('mouseleave',function(){
                    $(this).removeClass('hover');
                });
                itemHtml.find('.export').bind('click',{da:da},function(e){
                    var drawData = JSON.parse(e.data.da.draw_data);
                    downDrawGeojson(drawData);
                })
                itemHtml.find('.name').bind('click',{da:da},function(e){
                    if($(this).hasClass("red")){
                        // var jbdData = JSON.parse(e.data.da.draw_data);
                        // require(['jbDir/draw/js/jbDraw'], function(jbDraw) {
                        //     jbDraw.openSymbolData(jbdData);
                        // });
                        // ONEMAP.M.jbDraw.openSymbolData(jbdData);
                        require(['modDir/tools/toolSPDraw'], function(toolSPDraw) {
                            toolSPDraw.init(e.data.da._id);
                        });
                    }else if(e.data.da.info.indexOf('newdraw')>-1){
                        if(!modValue.bflist[e.data.da._id].zhanshi){
                            ONEMAP.M.toolDraw.showDraw(e.data.da);
                            modValue.bflist[e.data.da._id].zhanshi = true;
                        }
	                } else{
                        ONEMAP.M.toolDraw.showDrawRecord(e.data.da);
	                }
                    map23DControl.setView({
                        center: {
                            lat: e.data.da.center_lat,
                            lng: e.data.da.center_lon
                        },
                        zoom: e.data.da.zoomleve
                    })                                        
                });
                itemHtml.find('.del').bind('click',{da:da},function(e){
                    delForm(e.data.da,$(this));
                });
                itemHtml.find('.edit').bind('click',{da:da},function(e){
                    editForm(e.data.da,$(this));
                });

                $("#userFavList").append(itemHtml);
            }

            //分页
            pageContainer.empty();

            var countPages = (parseInt(modValue.favData.total % modValue.favData.size)>0?parseInt(modValue.favData.total / modValue.favData.size + 1):parseInt(modValue.favData.total / modValue.favData.size));
            if(countPages==0){
                countPages = 1;
            }
            // pageJump = $('<div id="userFavPageJump" class="count"><span>第</span><input class="page_num input input-small" value="'+modValue.favData.current_page+'" type="text" /><span>/'+countPages+'页</span></div>');
            pageJump = $('<div id="userFavPageJump" class="count"><div class="firstpage"></div><div class="uppage"></div>'+
                '<div class="fg"></div><div id="thematicPageJump" class="count"><span>'+modValue.favData.current_page+'/'+countPages+'页</span>'+
                '</div><div class="fg"></div><div class="nextpage"></div><div class="endpage"></div><div class="btn-group"></div></div>');
            pageJump.appendTo(pageContainer);


            if (modValue.favData.size < modValue.favData.total) {
                $("#userFavPageJump .firstpage").bind('click',function(){
                    showPage({page:1});
                    //显示当前页全部标注
                    var bfData = modValue.favData.list;
                    modValue.bfData = bfData;
                    // modValue.options.page = modValue.favData.current_page;
                    showAllBf(1);
                    setTimeout(function(){
                        showPage({page:1});
                    },200)
                })
                $("#userFavPageJump .uppage").bind('click',function(){
                    var sanum = modValue.favData.current_page;
                    if(modValue.favData.current_page == 1){
                        // return false;
                        showPage({page:1});
                    }else{
                        modValue.favData.current_page = modValue.favData.current_page-1;
                        sanum-=1;
                        showPage({page:modValue.favData.current_page});
                    }
                    //显示当前页全部标注
                    var bfData = modValue.favData.list;
                    modValue.bfData = bfData;
                    // modValue.options.page = modValue.favData.current_page;
                    showAllBf(sanum);
                    setTimeout(function(){
                        showPage({page:modValue.favData.current_page});
                    },200)
                    if(status.addAllBiaohui){
                        ONEMAP.M.myLayerActions.clearLayer();
                        ONEMAP.C.publisher.publish('', 'cleanMap');
                        ONEMAP.C.publisher.publish({
                            modName: 'cleanMap',
                        }, 'tools:active');
                        $("#cleanMap").click();
                    }
                })
                $("#userFavPageJump .nextpage").bind('click',function(){
                    var sanum = modValue.favData.current_page;
                    if(modValue.favData.current_page == countPages){
                        return false;
                    }else{
                       modValue.favData.current_page = modValue.favData.current_page+1;
                       sanum+=1;
                       showPage({page:modValue.favData.current_page}); 
                    }
                   // remove();
                    //显示当前页全部标注
                    var bfData = modValue.favData.list;
                    modValue.bfData = bfData;
                    // modValue.options.page = modValue.favData.current_page;
                    showAllBf(sanum);
                    setTimeout(function(){
                        showPage({page:modValue.favData.current_page});
                    },200)

                    if(status.addAllBiaohui){
                        ONEMAP.M.myLayerActions.clearLayer();
                        ONEMAP.C.publisher.publish('', 'cleanMap');
                        ONEMAP.C.publisher.publish({
                            modName: 'cleanMap',
                        }, 'tools:active');
                        $("#cleanMap").click();
                    }
                })
                $("#userFavPageJump .endpage").bind('click',function(){
                    showPage({page:countPages});
                    //显示当前页全部标注
                    var bfData = modValue.favData.list;
                    modValue.bfData = bfData;
                    // modValue.options.page = modValue.favData.current_page;
                    showAllBf(countPages);
                })
            }
        }else {
            pageContainer.empty();
            $("#userFavList").append('<p class="not-result">暂无数据!</p>');
        }

        $("#userFav").mCustomScrollbar("update");
        
    }


    /**
     * 显示标注信息
     * @param options
     * @private
     */
    function showDraw(drawData){

        //添加编辑器
        require(['modDir/tools/toolDraw'],function(toolDraw){
            toolDraw.init();
            setTimeout(function(){ 
                ONEMAP.M.toolDraw.showDrawRecord(drawData,true);
            },200);
        });
    }


    /**
     * 编辑表单
     * @type {Function}
     * @param data {Object} 表单数据
     * @param self {Object} 父类
     * @private
     */
    function editForm(data,self){
        var parent = self.parent().parent();
        if(data.name.indexOf(";")>-1){ data.name = data.name.split(";")[0] }
        var formHtml = $('<div class="form">' +
            '<input type="text" class="input input-small" maxlength="20" value="'+data.name+'" />' +
            '<button class="btn sure btn2 btn-small">确定</button>' +
            '<button class="btn cancel btn2 btn-small">取消</button>' +
            '</div> ');
        formHtml.find('.cancel').bind('click',function(){
            formHtml.remove();
        });
        parent.append(formHtml);
        formHtml.find('.sure').bind('click',{da:data,self:parent},function(e){
            updateFav(e);
        });
    }

    /**
     * 更新收藏
     * @type {Function}
     * @param e
     * @returns {boolean}
     * @private
     */
    function updateFav(e){
        var name = e.data.self.find('.input').val();
        if(name==''){
                ONEMAP.C.publisher.publish({ type: 'warning', message: '标注名称不能为空' }, 'noteBar::add');

            e.data.self.find('.input').focus();
            return false;
        }
        // if((/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\s]/g).test(name)){
        //         ONEMAP.C.publisher.publish({ type: 'warning', message: '名称只能包含英文、数字、中文' }, 'noteBar::add');
        //     e.data.self.find('.input').focus();
        //     return false;
        // }
        e.data.self.find('.name').text(name);
        var fId = e.data.da._id;
        var ajaxData = {_id:fId,name:name};
        e.data.self.find('.form').remove();
        ONEMAP.V.loading.load();
        $.ajax({
            type:"get",
            dataType:'json',
            url:onemapUrlConfig.userCenterUrl+'/draw/update',
            data:ajaxData,
            success:function(data){
                ONEMAP.V.loading.loaded();
                if(data.code == 4){
                    ONEMAP.T.noPermission('updateFav');
                }
                if(data.code == 3){
                    ONEMAP.T.logout('updateFav');
                }

                if(data.success){
                    ONEMAP.C.publisher.publish({type:'success',message:'更新标注（'+name+'）成功'},'noteBar::add');
                    getFavData();
                }else if(data.hasOwnProperty('success') && !data.success) {
                    ONEMAP.C.publisher.publish({type:'error',message:'更新标注（'+name+'）失败，'+data.msg},'noteBar::add');
                }else{
                    ONEMAP.C.publisher.publish({type:'error',message:'更新标注（'+name+'）失败'},'noteBar::add');
                }
            },
            error:function(errorData){
                ONEMAP.V.loading.loaded();
            }
        });
    }

    /**
     * 删除表单
     * @param  {[type]} data [description]
     * @param  {[type]} self [description]
     * @return {[type]}      [description]
     */
    function delForm(data,self){
        var parent = self.parent().parent();
        var formHtml = $('<div class="form">' +
            '<button class="btn cancel btn2 btn-small" style="float:right;margin-right:18px;">取消</button>' +
            '<button class="btn sure btn2 btn-small" style="float:right">确定</button>' +
            '</div> ');
        formHtml.find('.cancel').bind('click',function(){
            formHtml.remove();
        });
        parent.append(formHtml);
        formHtml.find('.sure').bind('click',{da:data,self:parent},function(e){
            delFav(e.data.da._id);
            $(".leaflet-marker-icon."+data._id).remove();
            // ONEMAP.M.toolDraw.delPoint(ONEMAP.D.transArr[data._id]);
        });
    }


    /**
     * 删除收藏
     * @type {Function}
     * @param id {Number}
     * @private
     */
    function delFav(id){
        var ajaxData = {_id:id};
        ONEMAP.V.loading.load();
        $.ajax({
            type:"get",
            dataType:'json',
            url:onemapUrlConfig.userCenterUrl+'/draw/del',
            data:ajaxData,
            success:function(data){
                ONEMAP.V.loading.loaded();
                if(data.code == 4){
                    ONEMAP.T.noPermission('delFav');
                }
                if(data.code == 3){
                    ONEMAP.T.logout('delFav');
                }
                if(data.success){
                    ONEMAP.C.publisher.publish({type:'success',message:'删除标注成功'},'noteBar::add');
                    getFavData();
                }else if(data.hasOwnProperty('success') && !data.success) {
                    ONEMAP.C.publisher.publish({type:'error',message:'删除标注失败，'+data.msg},'noteBar::add');
                }else{
                    ONEMAP.C.publisher.publish({type:'error',message:'删除标注失败'},'noteBar::add');
                }
            },
            error:function(errorData){
                ONEMAP.V.loading.loaded();
            }
        });
    }

    /**
     * 注册订阅
     * @type {Function}
     * 推送：ONEMAP.C.publisher.publish(options,'userFavuleName::type');
     * 订阅：ONEMAP.C.publisher.subscribe(layoutResize,'sideBarLayoutChange');
     */
    function subscribe(){
        ONEMAP.C.publisher.subscribe(remove,'cleanMap');
    }

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


    /**
     * 模块移除
     * @return {[type]} [description]
     */
    function remove(){
        $(".pubPop").remove();
        // $("#userContent .userInfo .moreLink .linkList li.myBh").removeClass("active");
        
        var list = modValue.favData.list;
        for(var i=0;i<list.length;i++){
            modValue.bflist[list[i]._id] = list[i];
            modValue.bflist[list[i]._id].zhanshi = false;                       
        }

        status.initialized = false;
        status.addAllBiaohui = false;
        modValue.options ={
            page:1,
            pageSize:onemapUrlConfig.showCollectNum
        };

        var favData = map2DViewer.map._layers;
        $.each(favData,function(key,dl){
            if(dl.shape){
                map2DViewer.map.removeLayer(dl);
            }
        })
        // 清除二维标记点
        $(".leaflet-marker-pane").html("")
    }


    return ONEMAP.M.userDraw = {
        init: init,
        remove:remove,
        getFavData:getFavData,
        delFav:delFav

    }
});