Newer
Older
EMS-WEB-3.0 / src / main / webapp / s / app / ems / ems-gd.js
/**
 * Created by lenovo on 2016/4/13.
 */
//定义全局变量,缓存组织结构

var EmsGd = function () {
    var isSaveStatus = false;
    var map = null;
    var mouseTool = null;
    var drawOverlays = new Array();
    var readyToUploadMarkers = new Array();
    var vectorMarkers = [];
    var markerData = [];
    var hadRequest = false;
    var viewMarkers = []; //视域范围内的点

    var style = [{
        url: $('#context').val() + '/images/drop/0.png',  // 蓝色图标地址
        anchor: new AMap.Pixel(15, 20), // 图标显示位置偏移量,基准点为图标左上角
        size: new AMap.Size(15, 20)      // 图标大小
    }, {
        url: $('#context').val() + '/images/drop/1.png',  // 橙色图标地址
        anchor: new AMap.Pixel(15, 20), // 图标显示位置偏移量,基准点为图标左上角
        size: new AMap.Size(15, 20)      // 图标大小
    }, {
        url: $('#context').val() + '/images/drop/2.png',  // 红色图标地址
        anchor: new AMap.Pixel(15, 20), // 图标显示位置偏移量,基准点为图标左上角
        size: new AMap.Size(15, 20)      // 图标大小
    }, {
        url: $('#context').val() + '/images/drop/3.png',  // 黑色图标地址
        anchor: new AMap.Pixel(15, 20), // 图标显示位置偏移量,基准点为图标左上角
        size: new AMap.Size(15, 20)      // 图标大小
    }, {
        url: $('#context').val() + '/images/drop/4.png',  // 粉色图标地址
        anchor: new AMap.Pixel(15, 20), // 图标显示位置偏移量,基准点为图标左上角
        size: new AMap.Size(15, 20)      // 图标大小
    }, {
        url: $('#context').val() + '/images/drop/5.png',  // 黄色图标地址
        anchor: new AMap.Pixel(15, 20), // 图标显示位置偏移量,基准点为图标左上角
        size: new AMap.Size(15, 20)      // 图标大小
    }, {
        url: $('#context').val() + '/images/drop/6.png',  // 绿色图标地址
        anchor: new AMap.Pixel(15, 20), // 图标显示位置偏移量,基准点为图标左上角
        size: new AMap.Size(15, 20)      // 图标大小
    }];

    var handleDatePickers = function () {

        if (jQuery().datepicker) {
            $('.date-picker').datepicker({
                rtl: App.isRTL()
            });
        }
    }

    function requestMarkers() {
        if (markerData.length == 0&!hadRequest) {
            hadRequest = true;
            $.ajax({
                type: "get",
                url: $('#context').val() + "/marker/all-point-list.do",
                dataType: "json",
//                async:false,
                cache: false,
                success: function (r) {
                    if (r.data) {//请求成功,将获取到的数据加载到地图上
                        //1.解析返回的结果,.设置全局变量data的值
                        markerData = [];//清空原来的数据
                        for (var t = 0; t < r.data.length; t++) {
                            var markerDto = r.data[t];
                            var emsBean = new EMSBean(markerDto.markerObjectType, markerDto.pipeMaterial, markerDto.pipeDiameter, markerDto.layStyle,
                                markerDto.depth, markerDto.belowType, markerDto.belowDepth, markerDto.belowDiameter,
                                markerDto.belowMaterial, markerDto.road, markerDto.constructTime, markerDto.ownerComp,
                                markerDto.markerObjectId, markerDto.markerId, markerDto.markerType, markerDto.markerDepth,
                                markerDto.creator, markerDto.createTime, markerDto.memo, markerDto.latitude, markerDto.longitude,
                                markerDto.recordType, markerDto.id,markerDto.line,markerDto.area,markerDto.colorType, markerDto.photos);
                            markerData[t] = emsBean;
                        }
                        //2.增加marker
                        EmsGd.addMarker(markerData);
                    }
                    hadRequest = false;
                    map.off("complete", requestMarkers());
                },
                error: function (d) {//请求出错
                    hadRequest = false;
                    map.off("complete", requestMarkers());
                }
            });
        } else if(!hadRequest){
            EmsGd.addMarker(markerData);
        }

    }

    // 处理鼠标单击事件
    function processClickInfo(emsBean){
        var msg = "";
        if (emsBean.recordType == 1) {
            msg = msg + "管线种类:" + emsBean.markerObjectType + "<br/>" +
                "管线直径(mm):" + emsBean.pipeDiameter + "<br/>" +
                "管线材质:" + emsBean.pipeMaterial + "<br/>" +
                "埋设方式:" + emsBean.layStyle + "<br/>" +
                "管线埋深(mm):" + emsBean.depth + "<br/>";
        } else if (emsBean.recordType == 2) {
            msg = msg + "附属物名称:" + emsBean.markerObjectType + "<br/>" +
                "井深(mm):" + emsBean.depth + "<br/>";
        } else if (emsBean.recordType == 3) {
            msg = msg + "管点特征:" + emsBean.markerObjectType + "<br/>" +
                "特征点埋深(mm):" + emsBean.depth + "<br/>";
        } else {
            msg = msg + "上层管种类:" + emsBean.markerObjectType + "<br/>" +
                "上层管埋深(mm):" + emsBean.depth + "<br/>" +
                "上层管直径(mm):" + emsBean.pipeDiameter + "<br/>" +
                "上层管材料:" + emsBean.pipeMaterial + "<br/>" +
                "下层管种类:" + emsBean.belowType + "<br/>" +
                "下层管埋深(mm):" + emsBean.belowDepth + "<br/>"+
                "下层管直径(mm):" + emsBean.belowDiameter + "<br/>" +
                "下层管材料:" + emsBean.belowMaterial + "<br/>" ;
        }
        msg = msg + "所属区域:" + emsBean.area + "<br/>" +
            "所属线路:" + emsBean.line + "<br/>" +
            "所属道路:" + emsBean.road + "<br/>" +
            "建设年代:" + emsBean.constructTime + "<br/>" +
            "权属单位:" + emsBean.ownerComp + "<br/>" +
            "标识器ID:" + emsBean.markerId + "<br/>" +
            "标识器类型:" + emsBean.markerType + "<br/>" +
            "标识器埋深(mm):" + emsBean.markerDepth + "<br/>" +
            "安装部门:" + emsBean.creator + "<br/>" +
            "最后修改时间:"+emsBean.createTime + "<br/>" +
            "备注:" + emsBean.memo + "<br/>";
        if(emsBean.photos){
            msg = msg + '<div class="info-img">'
            var imgs = emsBean.photos.split(",");
            for (var i = 0;i<imgs.length; i++){
                var path = "http://"+window.location.host+ $('#context').val()+ imgs[i];
                msg = msg + '<img style="float:left;width: auto;height: 100%;" src="' + path +'"/>'
            }
            msg = msg + '</div>'
        }
        return msg;
    }

    return {

        //添加标识器
        emsAddCallBack: function () {
            $('#addModal').modal('show');
        },

        //删除标识器
        emsDelCallBack: function () {
            console.log("1111")
            //绘制矩形区域:
            if (drawOverlays.length == 0) {
                swal("请先绘制区域", "", "warning");
                return;
            }
            var pointArray = new Array();
            var readyToDel = "";
            for (var i = 0; i < drawOverlays.length; i++) {
                // debugger
                var layer = drawOverlays[i];
                try {
                    // 生成判断是否在多边形内的数据格式
                    var path = [];
                    for (var k = 0; k < layer.Ce.path.length; k++) {
                        var pos = [];
                        pos.push(layer.Ce.path[k].lng, layer.Ce.path[k].lat);
                        path.push(pos);
                    }
                    console.log("path"+path);
                    for (var j = 0; j < markerData.length; j++) {
                        var emsBean = markerData[j];
                        var point = new AMap.LngLat(emsBean.longitude, emsBean.latitude);
                        var isPointInRing = AMap.GeometryUtil.isPointInRing(point, path);
                        if (isPointInRing) {
                            pointArray.push(point);
                            readyToDel = readyToDel + emsBean.id + ",";
                        }
                    }
                } catch (e) {
                    swal("脚本异常", e.message, "error");
                }
                if (pointArray.length <= 0) {
                    swal("选择区域没有要删除的点", "", "warning");
                    for (var i in drawOverlays) {
                        map.remove(drawOverlays[i]);
                    }
                    return;
                }

                swal({
                    title: "是否确认删除?",
                    text: "删除是不可恢复的",
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonText: "确认",
                    cancelButtonText: "取消",
                    closeOnConfirm: false
                }, function() {
                    $.ajax({
                        type: "get",
                        url: $('#context').val() + "/marker/delMarkerByIds.do",
                        dataType: "json",
                        cache: false,
                        data: {
                            "ids": readyToDel
                        },
                        success: function (r) {
                            if (r.success) {//请求成功
                                swal({
                                    title: "删除标识器成功",
                                    text: "",
                                    type: "success",
                                    confirmButtonText: "确认",
                                    closeOnConfirm: false
                                }, function() {
                                    location.href = $('#context').val() + "/content/ems/ems-gd.jsp";
                                });
                            }
                        },
                        error: function (d) {//请求出错
                            swal("请求异常", d.responseText, "error");
                        }
                    });
                });
            }
        },

        //保存标识器
        emsSaveCallBack: function () {

            if (readyToUploadMarkers.length == 0) {
                return;
            }
            if (isSaveStatus) {
                swal("保存过于频繁", "请稍后操作", "warning");
                return;
            }
            isSaveStatus = true;
            //TODO LIST:上传
            var uploadMaker = new Array();
            for (var i = 0; i < readyToUploadMarkers.length; i++) {
                var emsBean = readyToUploadMarkers[i].Tag;

                if (!emsBean.depth) {
                    emsBean.depth = 0;
                }
                uploadMaker.push(emsBean);
            }
            $.ajax({
                type: "get",
                url: $('#context').val() + "/marker/batchSave.do",
                dataType: "json",
                cache: false,
                data: {
                    markers: JSON.stringify(uploadMaker)
                },
                success: function (r) {
                    console.log(r)
                    if (r.success === true) {//请求成功
                        swal({
                            title: "保存标识器成功",
                            text: "",
                            type: "success",
                            confirmButtonText: "确认",
                            closeOnConfirm: false
                        }, function() {
                            location.href = $('#context').val() + "/content/ems/ems-gd.jsp";
                        });
                    }else{
                        swal(r.message,"", "error");
                        isSaveStatus = false;
                    }
                },
                error: function (d) {//请求出错
                    swal("请求出错", d.responseText, "error");
                    isSaveStatus = false;
                }
            });
        },

        emsUploadCallBack: function () {
            //  map.zoomTo(map.getZoom() + 2);
            //TODO LIST:弹出对应的对话框
            $('#uploadModal').modal('show');
        },

        emsExportCallBack: function () {
            //TODO LIST:选择导出的文件
//            map.zoomTo(map.getZoom() + 2);
            location.href = $('#context').val() + "/marker/export.do";

        },

        // 清除地图上所有后添加的标记点
        clearOverlays: function () {
            mouseTool.close(true)//关闭,并清除覆盖物

            for (var i = 0; i < drawOverlays.length; i++) {
                map.remove(drawOverlays[i]);
            }
            for (var i = 0; i < readyToUploadMarkers.length; i++) {
                map.remove(readyToUploadMarkers[i]);
            }
            for (var i = 0; i < vectorMarkers.length; i++) {
                map.remove(vectorMarkers[i]);
            }

            drawOverlays = [];
            readyToUploadMarkers = [];
            vectorMarkers = [];
        },

        initMap: function () {

            // 创建地图实例
            map = new AMap.Map("container", {
                zoom: 13,
                resizeEnable: true,
                zooms: [4,18],//设置地图级别范围
            });

            //声明全局变量
            if (!markerData || markerData.length == 0) {
                markerData = new Array();
            }

            // 鼠标操作工具栏
            mouseTool = new AMap.MouseTool(map);
            mouseTool.on('draw',function(e){
                drawOverlays.push(e.obj);
            })

            //加载完毕请求标识点信息
            map.on("complete", requestMarkers);
        },

        // 绘制区域矩形框
        drawRect: function () {
            mouseTool.rectangle();
        },

        //取消绘制区域矩形框
        moveMap: function () {
            mouseTool.close(true)//关闭,并清除覆盖物
            for (var i = 0; i < drawOverlays.length; i++) {
                map.remove(drawOverlays[i]);
            }
            drawOverlays = [];
        },

        initForm: function () {
            handleDatePickers();
            $("#selectObjectType").chosen();
            $("#resetEms").live("click", function (e) {
                $("#markerObjectType").val("");
                $("#pipeDiameter").val("");
                $("#pipeMaterial").val("");
                $("#belowPipeType").val("");
                $("#belowPipeDepth").val("");
                $("#belowPipeDiameter").val("");
                $("#belowPipeMaterial").val("");
                $("#pipeDepth").val("");
                $("#layStyle").val("");
                $("#line").val("");
                $("#area").val("");
                $("#road").val("");
                $("#constructTime").val("");
                $("#ownerComp").val("");
                $("#markerObjectId").val("");
                $("#markerId").val("");
                $("#markerType").val("");
                $("#markerDepth").val("");
                $("#creator").val("");
                $("#memo").val("");

            });

            $('#localize').click(function (e) {
                $('#addModal').modal('hide');

                //注册地图点击事件
                function showInfo(e) {
                    map.off("click", showInfo);
                    var lng = e.lnglat.lng;
                    var lat = e.lnglat.lat;
                    //TODO LIST:获取填写表单的信息 所属区域也需要保存的
                    var selectObjectType = $("#selectObjectType").val();//判断是哪个类别
                    var markerObjectType = $("#markerObjectType").val();
                    var pipeDiameter = $("#pipeDiameter").val();
                    var pipeMaterial = $("#pipeMaterial").val();
                    var belowPipeType = $("#belowPipeType").val();
                    var belowPipeDepth = $("#belowPipeDepth").val();
                    var belowPipeDiameter = $("#belowPipeDiameter").val();
                    var belowPipeMaterial = $("#belowPipeMaterial").val();
                    var pipeDepth = $("#pipeDepth").val();
                    var layStyle = $("#layStyle").val();
                    var road = $("#road").val();
                    var constructTime = $("#constructTime").val();
                    var ownerComp = $("#ownerComp").val();
                    var markerObjectId = $("#markerObjectId").val();
                    var markerId = $("#markerId").val();
                    var markerType = $("#markerType").val();
                    var markerDepth = $("#markerDepth").val();
                    var creator = $("#creator").val();
                    var memo = $("#memo").val();
                    var line = $("#line").val();
                    var area = $("#area").val();
                    var emsBean = new EMSBean(markerObjectType, pipeMaterial, pipeDiameter, layStyle, pipeDepth, belowPipeType, belowPipeDepth, belowPipeDiameter, belowPipeMaterial,
                        road, constructTime, ownerComp, markerObjectId, markerId, markerType, markerDepth, creator, null, memo, lat, lng, selectObjectType,null,line,area);
                    var marker = new AMap.Marker({
                        position: [lng, lat],
                        draggable: true
                    });

                    marker.on("click", attribute);
                    marker.Tag = emsBean;
                    map.add(marker);    //增加点
                    readyToUploadMarkers.push(marker);
                    function attribute() {
                        var emsBean2 = marker.Tag;
                        var searchInfoWindow = null;
                        var msg = "";
                        var height = 0;
                        var titleName ="";
                        if (emsBean.recordType == 1) {
                            titleName = "<div class='info-title'>管线</div>";
                            msg = msg + "管线种类:" + emsBean2.markerObjectType + "<br/>" +
                                "管线直径(mm):" + emsBean2.pipeDiameter + "<br/>" +
                                "管线材质:" + emsBean2.pipeMaterial + "<br/>" +
                                "埋设方式:" + emsBean2.layStyle + "<br/>" +
                                "管线埋深(mm):" + emsBean2.depth + "<br/>";
                            height = 100;
                        } else if (emsBean.recordType == 2) {
                            titleName = "<div class='info-title'>管线附属物</div>";
                            msg = msg + "附属物名称:" + emsBean2.markerObjectType + "<br/>" +
                                "井深(mm):" + emsBean2.depth + "<br/>";
                            height = 40;
                        } else if (emsBean.recordType == 3) {
                            titleName = "<div class='info-title'>管线特征管点</div>";
                            msg = msg + "管点特征:" + emsBean2.markerObjectType + "<br/>" +
                                "特征点埋深(mm):" + emsBean2.depth + "<br/>";
                            height = 40;
                        } else {
                            titleName = "<div class='info-title'>交叉穿越点</div>";
                            msg = msg + "上层管种类:" + emsBean2.markerObjectType + "<br/>" +
                                "上层管埋深(mm):" + emsBean2.depth + "<br/>" +
                                "上层管直径(mm):" + emsBean2.pipeDiameter + "<br/>" +
                                "上层管材料:" + emsBean2.pipeMaterial + "<br/>" +
                                "下层管种类:" + emsBean2.belowType + "<br/>" +
                                "下层管埋深(mm):" + emsBean2.belowDepth + "<br/>"+
                                "下层管直径(mm):" + emsBean2.belowDiameter + "<br/>" +
                                "下层管材料:" + emsBean2.belowMaterial + "<br/>" ;
                            height = 160;
                        }
                        height = height +225;
                        msg = msg + "所属区域:" + emsBean2.area + "<br/>" +
                            "所属线路:" + emsBean2.line + "<br/>" +
                            "所属道路:" + emsBean2.road + "<br/>" +
                            "建设年代:" + emsBean2.constructTime + "<br/>" +
                            "权属单位:" + emsBean2.ownerComp + "<br/>" +
                            "标识器ID:" + emsBean2.markerId + "<br/>" +
                            "标识器类型:" + emsBean2.markerType + "<br/>" +
                            "标识器埋深(mm):" + emsBean2.markerDepth + "<br/>" +
                            "安装部门:" + emsBean2.creator + "<br/>" +
                            "最后修改时间:"+emsBean2.createTime + "<br/>" +
                            "备注:" + emsBean2.memo + "<br/>";
                        var imgUrl = $('#context').val() + "/images/ems.jpg";
                        var content = titleName + '<div class="info-content">' +
                            '<img src=' + '"' + imgUrl + '"' + ' />' + msg +
                            '</div>';

                        var infowindow = new AMap.AdvancedInfoWindow({
                            content: content,
                            width: 290,             //宽度
                            height: height,         //高度
                            panel: "panel",         //检索结果面板
                            enableAutoPan: true    //自动平移
                        });

                        infowindow.open(map, [e.lnglat.lng, e.lnglat.lat]);
                    }

                }
                map.on("click", showInfo);
            });

            $("#searchMarker").click(function (e) {
                var Marker = {};
                if (vectorMarkers.length != 0) {
                    for (var i = 0; i < vectorMarkers.length; i++) {
                        map.remove(vectorMarkers[i]);
                    }
                }
                vectorMarkers = [];
                Marker.road = $("#roadCondition").val();
                Marker.memo = $("#memoCondition").val();
                Marker.area = $("#select_area").val();
                Marker.line = $("#select_line").val();
                Marker.ownerComp = $("#company").val();
                Marker.creator = $("#department").val();
                Marker.sDate = $("#txt_begin_day").val();
                Marker.eDate = $("#txt_end_day").val();
                //请求后台的id列表,然后遍历marker列表,修改marker的颜色
                $.ajax({
                    type: "POST",
                    url: $('#context').val() + "/marker/getMarkerListByCondition.do",
                    data: {"strMarkerDto": JSON.stringify(Marker)},
                    dataType: "json",
                    success: function (r) {
                        if (r.data) {
                            var pointArray = new Array();
                            if (r.data.length > 1000) {
                                swal("有超过一千个点符合筛选条件", "会造成浏览器卡顿,请重新选择", "warning");
                            } else {
                                if (r.data.length == 0) {
                                    swal("没有搜到符合条件的标识器", "请重新选择", "warning");
                                    return;
                                }
                                for (var a in r.data) {//遍历列表,添加marker
                                    var vectorMarker = new AMap.Marker({
                                        position: [r.data[a].longitude,r.data[a].latitude],
                                        size: new AMap.Size(30, 30), // size不生效
                                        offset: new AMap.Pixel(-27, -38), //相对于基点的偏移位置
                                        icon: $('#context').val() + '/images/marker3.svg',
                                        zIndex: -10000
                                    });
                                    vectorMarkers.push(vectorMarker);
                                    map.add(vectorMarker);
                                }
                                map.setFitView(vectorMarkers);
                            }

                        }
                    },
                    error: function (request) {
                        //提示错误信息
                        swal("脚本异常", r.message, "error");
                    }
                });
            });

            //控制不同种类对象的标签信息显示
            $("#selectObjectType").die().live("change", function (e) {
                var type = $("#selectObjectType").val();
                OptionItemProcess.initPipeTypeList(type);
                if (type == 1) {//管线
                    $("#pipeTypeLabel").text("管线种类");
                    $(".up-pipe").show();
                    $("#pipeDiameterLabel").text("管线直径");
                    $("#pipeMaterialLabel").text("管线材质");
                    $(".below").addClass("hidden");
                    $("#pipeDepthLabel").text("管线埋深");
                    $(".pipeOnly").show();
                } else if (type == 2) {//管线附属物
                    $("#pipeTypeLabel").text("附属物名称");
                    $(".up-pipe").hide();
                    $(".below").addClass("hidden");
                    $("#pipeDepthLabel").text("井深");
                    $(".pipeOnly").hide();
                } else if (type == 3) {//管线特征点
                    $("#pipeTypeLabel").text("管点特征");
                    $(".up-pipe").hide();
                    $(".below").addClass("hidden");
                    $("#pipeDepthLabel").text("特征点埋深");
                    $(".pipeOnly").hide();
                } else {//交叉穿越点
                    $("#pipeTypeLabel").text("上层管种类");
                    $(".up-pipe").show();
                    $("#pipeDiameterLabel").text("上层管直径");
                    $("#pipeMaterialLabel").text("上层管材料");
                    $(".below").removeClass("hidden");
                    $("#pipeDepthLabel").text("上层管埋深");
                    $(".pipeOnly").hide();
                }
            });

            OptionItemProcess.initPipeTypeList($("#selectObjectType").val());
            OptionItemProcess.initBelowPipeTypeList();
            OptionItemProcess.initAreaList();
            OptionItemProcess.initLayStyleList();
            OptionItemProcess.initMaterialList();
        },

        initSelect: function () {
            $("#selectObjectType").chosen();
        },

        addMarker: function (data) {
            var points = [];
            for (var i = 0; i < data.length; i++) {
                var point = {};
                var lnglat = [data[i].longitude, data[i].latitude];
                var name = data[i].markerId;
                var id = i;
                var styleIndex = parseInt(data[i].colorType);
                if (styleIndex < 1 || styleIndex > 6) styleIndex = 0;

                point.lnglat = lnglat;
                point.name = name;
                point.id = id;
                point.style = styleIndex;
                points.push(point);

                var marker = new AMap.Marker({
                    position: [data[i].longitude, data[i].latitude]
                });
                marker.Tag = data[i];

                viewMarkers.push(marker);
            }

            var mass = new AMap.MassMarks(points, {
                zIndex: 5000,  // 海量点图层叠加的顺序
                zooms: [3, 19],  // 在指定地图缩放级别范围内展示海量点图层
                style: style  // 设置样式对象
            });
            mass.setMap(map);

            map.setFitView(viewMarkers);

            mass.on("click", function(e) {
                var index = parseInt(e.data.id);
                var emsBean = viewMarkers[index].Tag;
                console.log(emsBean)
                var msg = processClickInfo(emsBean);
                var titleName ="";
                var height = 0;
                if (emsBean.recordType == 1) {
                    titleName = "<div class='info-title'>管线</div>";
                    height = 100;
                } else if (emsBean.recordType == 2) {
                    titleName = "<div class='info-title'>管线附属物</div>";
                    height = 40;
                } else if (emsBean.recordType == 3) {
                    titleName = "<div class='info-title'>管线特征管点</div>";
                    height = 40;
                } else if (emsBean.recordType == 4) {
                    titleName = "<div class='info-title'>交叉穿越点</div>";
                    height = 160;
                }
                height = height +225;
                var imgUrl = $('#context').val() + "/images/ems.jpg";
                var content = titleName + '<div class="info-content">' +
                    '<img src=' + '"' + imgUrl + '"' + ' />' + msg +
                    '</div>';
                var infowindow = new AMap.AdvancedInfoWindow({
                    content: content,
                    width: 290,             //宽度
                    height: height,
                    panel: "panel",         //检索结果面板
                    enableAutoPan: true    //自动平移
                });

                infowindow.open(map, [e.data.lnglat.lng, e.data.lnglat.lat]);
            });
        }
    };
}();