/** * Created by lenovo on 2016/4/13. */ //定义全局变量,缓存组织结构 var Task = function () { var map = null; var taskMarkers = ""; var drawOverlays = new Array(); var drawTaskOverlays = new Array(); var drawEventOverlays = []; var taskLists; var taskDetailLists = new Array(); var eventBeanList = []; var options = { valueNames: [ 'id', 'patrolerName', 'status', 'deployDate', 'beginDate', 'endDate', 'description', {attr: 'src', name: 'image'} ], item: '<li onclick=""><img class="image" src="" style="float: left;width:20px;height:20px">' + '<a style="float: left;padding:2px 2px" ><p class="patrolerName"></p>' + '<p class="status"></p>' + '<p class="deployDate"></p><p class="time"></p>' + '<p class="beginDate"></p><p class="time"></p>' + '<p class="endDate"></p><p class="time"></p>' + '<p class="description"></p>' + '<p class="id" style="display:none"></p>' + '</a>' + '<div style="clear:both"></div>' + ' </li>', page: 3, plugins: [ ListPagination({}) ] }; function clearAll() { for (var i = 0; i < drawOverlays.length; i++) { map.removeOverlay(drawOverlays[i]); } drawOverlays.length = 0 } function clearAllTaskPoint() { for (var i = 0; i < drawTaskOverlays.length; i++) { map.removeOverlay(drawTaskOverlays[i]); } drawTaskOverlays.length = 0; taskDetailLists.length = 0; } function getTaskInfo(patroler) { taskLists.clear(); $.ajax({ type: "get", url: $('#context').val() + "/task/get-task.do", dataType: "json", cache: false, data: { }, success: function (r) { if (r.success) {//请求成功 // alert(r.data.length); for (var data in r.data) { //alert(r.data[data].id+":"+r.data[data].patrolerName); var icon = $('#context').val() + "/images/accidents/worker.png"; var id = r.data[data].id; var patrolerName = r.data[data].patrolerName; if (patroler && patrolerName != patroler) { continue; } var description = r.data[data].description; var deployDate = r.data[data].deployDate; var beginDate = r.data[data].beginDate; var endDate = r.data[data].endDate; var status = r.data[data].status; var creatorName = r.data[data].creatorName; var task = new TaskBean(id, icon, patrolerName, description, deployDate, beginDate, endDate, status, creatorName); task.patrolerName = "巡检员:" + task.patrolerName; task.description = "任务描述:" + task.description; task.deployDate = "下发时间:" + task.deployDate; task.beginDate = task.beginDate == null ? "开始时间:" : "开始时间:" + task.beginDate; task.endDate = task.endDate == null ? "完成时间:" : "完成时间:" + task.endDate; task.status = "任务状态:" + task.status; taskLists.add(task); } } else { alert(r.message); } }, error: function (d) {//请求出错 alert(d.responseText); } }); } // function eventImgPage(total, page, imgSrc) { // alert("eventImgPage:"+imgSrc); // $('#eventPagination').bootpag({ // total: total, // page: page // }).die().live("page", function (event, num) { // alert("live:"+imgSrc); //// $("#eventImg").children().remove();//avatar1.jpg // $("#eventImg").append("<img src=" + $('#context').val() + "/images/events/" + imgSrc[num - 1] + "?time="+new Date().getTime()+">") // }); // } function showEventInfo(e) { var p = e.target; var imgName = p.Tag.imageName; var images = imgName.split(",");//图片路径数组 // alert(images[0]); var msg2 = "<strong>事件描述:</strong>" + p.Tag.description + "</br>" + "<strong>上传时间:</strong>" + p.Tag.createTime + "</br>"; $("#eventImg").children().remove();//avatar1.jpg var imageDivs=""; var width = 100/images.length;//动态展示 for(var i =0;i<images.length;i++){ imageDivs +="<img height='70%' width='"+width+"%' onclick='enlargeImage()' src=" + $('#context').val() + "/images/events/" + images[i] + ">" } $("#eventImg").append(imageDivs) $("#eventDescription").html(msg2); // $('#eventPagination').remove // $('#eventPagination').children().remove(); $('#eventModal').modal('show').css({width: "300px"}); // alert("showEventInfo:"+images); // eventImgPage(images.length, 1, images); } return { //添加工单 taskAddCallBack: function () { taskMarkers = ""; $('#addTaskModal').modal('show'); }, //添加工单 selectMarkerCallBack: function () { //绘制矩形区域: taskMarkers = ""; if (drawOverlays.length == 0) { alert("请先绘制区域"); return; } for (var i = 0; i < drawOverlays.length; i++) { var layer = drawOverlays[i]; var type = drawOverlays[i].oQ; try { for (var j = 0; j < window.markerData.length; j++) { var emsBean = window.markerData[j]; var bdPoint = gpsBdUtils.gcj2bd(emsBean.latitude, emsBean.longitude); var point = new BMap.Point(bdPoint.longitude, bdPoint.latitude); // var point = new BMap.Point(emsBean.longitude, emsBean.latitude); if (type == "Circle") { if (BMapLib.GeoUtils.isPointInCircle(point, layer)) { taskMarkers = taskMarkers + emsBean.id + ","; } } else { if (BMapLib.GeoUtils.isPointInPolygon(point, layer)) { taskMarkers = taskMarkers + emsBean.id + ","; } } } //alert(taskMarkers); } catch (e) { alert(e); } } if (taskMarkers == "") { alert("请选择标识器点!"); return; } $('#addTaskModal2').modal('show'); clearAll(); }, //qingchu clearCallBack: function () { taskMarkers = ""; clearAll(); }, //上传工单 uploadTaskCallBack: function (areaId, lineId, patrolerId, description) { $.ajax({ type: "get", url: $('#context').val() + "/task/task-Save.do", dataType: "json", cache: false, data: { areaId: areaId, lineId: lineId, markers: taskMarkers, patrolerId: patrolerId, description: description }, success: function (r) { if (r.success) {//请求成功 alert(r.message); Task.updateList(); } else { alert(r.message); } }, error: function (d) {//请求出错 alert(d.message); } }); }, initMap: function () { map = new BMap.Map("container"); // 创建地图实例 var menu = new BMap.ContextMenu(); var txtMenuItem = [ { text: '删除', callback: function (e) { //判断右键位置是否在覆盖物内,如果在就展示菜单,如果不在就不展示 for (var i = 0; i < drawOverlays.length; i++) { var layer = drawOverlays[i]; var type = drawOverlays[i].oQ; if (type == "Circle") { if (BMapLib.GeoUtils.isPointInCircle(e, layer)) { map.removeOverlay(drawOverlays[i]); drawOverlays.splice(i, 1); } } else { if (BMapLib.GeoUtils.isPointInPolygon(e, layer) || BMapLib.GeoUtils.isPointInRect(e, layer)) { map.removeOverlay(drawOverlays[i]); drawOverlays.splice(i, 1); } } } } } ]; for (var i = 0; i < txtMenuItem.length; i++) { menu.addItem(new BMap.MenuItem(txtMenuItem[i].text, txtMenuItem[i].callback, 100)); } map.addContextMenu(menu); var myFun = function (result) {//根据城市名进行定位 var cityName = result.name; map.setCenter(cityName); } //声明全局变量 if (!window.markerData || window.markerData.length == 0) { window.markerData = new Array(); } var point = new BMap.Point(116.404, 39.915); // 创建点坐标 map.centerAndZoom(point, 17); // 初始化地图,设置中心点坐标和地图级别 var myCity = new BMap.LocalCity(); myCity.get(myFun); map.enableScrollWheelZoom(); //启用地图滚轮放大缩小 var ctrl_ove = new BMap.OverviewMapControl({ anchor: BMAP_ANCHOR_BOTTOM_RIGHT }); map.addControl(ctrl_ove); //向地图中添加比例尺控件 var ctrl_sca = new BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT }); map.addControl(ctrl_sca); var offset4 = new BMap.Size(10, 10); var emsEditControl = new EmsEditControl(map, offset4); map.addControl(emsEditControl); //创建工单按钮 var addTaskImage = $('#context').val() + "/images/tasks/singleTask.png"; var offset1 = new BMap.Size(10, 100); var taskAddControl = new EmsControl(map, addTaskImage, Task.taskAddCallBack, offset1, "按线路创建工单"); map.addControl(taskAddControl); //绘制区域创建工单按钮 var addTaskImage = $('#context').val() + "/images/tasks/multi-tasks.png"; var offset2 = new BMap.Size(10, 170); var taskAddControl = new EmsControl(map, addTaskImage, Task.selectMarkerCallBack, offset2, "选择多点创建工单"); map.addControl(taskAddControl); //绘制清除绘制按钮 var clearImage = $('#context').val() + "/images/tasks/clear.png"; var offset3 = new BMap.Size(10, 240); var clearControl = new EmsControl(map, clearImage, Task.clearCallBack, offset3, "清空选择"); map.addControl(clearControl); //添加绘制工具 var overlaycomplete = function (e) { e.overlay.enableEditing(); drawOverlays.push(e.overlay); }; //实例化鼠标绘制工具 var drawingManager = new BMapLib.DrawingManager(map, { isOpen: false, //是否开启绘制模式 enableDrawingTool: true, //是否显示工具栏 drawingToolOptions: { anchor: BMAP_ANCHOR_TOP_LEFT, //位置 offset: new BMap.Size(5, 5), //偏离值 drawingModes: [ BMAP_DRAWING_CIRCLE, BMAP_DRAWING_POLYGON, BMAP_DRAWING_RECTANGLE ] } }); //添加鼠标绘制工具监听事件,用于获取绘制结果 drawingManager.addEventListener('overlaycomplete', overlaycomplete); //加载完毕请求标识点信息 map.addEventListener("tilesloaded", function () { if (window.markerData.length == 0) { $.ajax({ type: "get", url: $('#context').val() + "/marker/all-point-list.do", dataType: "json", cache: false, success: function (r) { if (r.data) {//请求成功,将获取到的数据加载到地图上 //1.解析返回的结果,.设置全局变量data的值 window.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); window.markerData[t] = emsBean; } //2.增加marker Task.addMarker(window.markerData); } }, error: function (d) {//请求出错 alert(d.responseText); } }); } else { Task.addMarker(window.markerData); } }); }, initList: function () { taskLists = new List('worksheets', options); Task.updateList(); //$('.sort').click(); $('#btnSort').trigger("click"); $('#btnSort').trigger("click"); $('#btnSort').css("padding", 0); $('#btnSort').css("padding-left", 10); $('#btnSort').css("padding-right", 15); $('#btnSort').css("margin-bottom", 10); Task.bindClickEvent(); $('#selectPatroler3').live('change', function (e) {//下拉列表更改的时候查询数据,更新列表,待优化为查询条件在后台利用 Task.updateList($("#selectPatroler3").val()); }); }, bindClickEvent: function () { $('#worksheets ul li').live('click', function (e) { if (null == this.getElementsByClassName("id")[0]) { return; } clearAllTaskPoint(); var taskId = this.getElementsByClassName("id")[0].innerHTML; var i = 0; //请求任务 $.ajax({ type: "get", url: $('#context').val() + "/task/get-task-markers.do", dataType: "json", cache: false, data: { taskId: taskId }, success: function (r) { if (r.success) {//请求成功 for (var data in r.data) { var id = r.data[data].id; var markerName = r.data[data].markerName; var latitude = r.data[data].latitude; var longitude = r.data[data].longitude; var finishTime = r.data[data].finishTime == null ? "" : r.data[data].finishTime; var description = r.data[data].description == null ? "" : r.data[data].description; var status = r.data[data].isChecked; var icon = ""; var isChecked = ""; //alert(latitude+":"+longitude); if (status == 0) { icon = $('#context').val() + "/images/ems/marker_0.png"; isChecked = "未巡检"; } else { icon = $('#context').val() + "/images/ems/marker_1.png"; isChecked = "已巡检"; } var taskDetailBean = new TaskDetailBean(id, icon, markerName, latitude, longitude, isChecked, finishTime, description); taskDetailLists.push(taskDetailBean); } Task.addTaskDetailMarker(taskDetailLists); } else { alert(r.message); } }, error: function (d) {//请求出错 alert(d.message); } }); //请求该任务上报的事件 $.ajax({ type: "get", url: $('#context').val() + "/event/get-event-list.do", dataType: "json", cache: false, data: { taskId: taskId }, success: function (r) { if (r.success) {//请求成功 for (var data in r.data) { var id = r.data[data].id; var imageName = r.data[data].imageName; var latitude = r.data[data].latitude; var longitude = r.data[data].longitude; var createTime = r.data[data].createTime == null ? "" : r.data[data].createTime; var description = r.data[data].description == null ? "" : r.data[data].description; var status = r.data[data].status; var eventBean = new EventBean(id, imageName, latitude, longitude, description, status, createTime); eventBeanList.push(eventBean); } Task.addEventMarker(eventBeanList); } else { alert(r.message); } }, error: function (d) {//请求出错 alert(d.message); } }); }); }, /* * 增加报警信息到列表 * */ updateList: function (patroler) { getTaskInfo(patroler); }, initForm: function () { $("#saveTask2").click(function (e) { //alert(taskMarkers); var patrolerId = $("#selectPatroler2").val(); var description = $("#description2").val(); Task.uploadTaskCallBack("", "", patrolerId, description); $('#addTaskModal2').modal('hide'); $("#description2").val(""); }); }, //获取巡检员列表 initPatrolerArray: function () { $.ajax({ type: "POST", url: $('#context').val() + "/user/get-patroler.do", data: {}, dataType: "json", success: function (r) { //获取面的列表,将下拉列表初始化 if (r.data) { for (var user in r.data) { //alert(r.data[user].id+":"+r.data[user].userName); $("#selectPatroler").append(" <option value=" + r.data[user].id + ">" + r.data[user].userName + "</option>"); $("#selectPatroler2").append(" <option value=" + r.data[user].id + ">" + r.data[user].userName + "</option>"); $("#selectPatroler3").append(" <option value=" + r.data[user].userName + ">" + r.data[user].userName + "</option>"); } $("#selectPatroler").chosen(); $("#selectPatroler2").chosen(); $("#selectPatroler3").chosen(); } }, error: function (request) { //提示错误信息 alert(r.message); } }); }, initSelect: function () { Task.initPatrolerArray(); }, addMarker: function (data) { if (document.createElement('canvas').getContext) { // 判断当前浏览器是否支持绘制海量点 var points = []; // 添加海量点数据 for (var i = 0; i < data.length; i++) { var bdPoint = gpsBdUtils.gcj2bd(data[i].latitude, data[i].longitude); var point = new BMap.Point(bdPoint.longitude, bdPoint.latitude); // var point = new BMap.Point(data[i].longitude, data[i].latitude); point.Tag = data[i]; points.push(point); } var options = { size: BMAP_POINT_SIZE_BIG, shape: BMAP_POINT_SHAPE_WATERDROP, color: '#d340c3' }; var pointCollection = new BMap.PointCollection(points, options); // 初始化PointCollection pointCollection.addEventListener('click', function (e) { var emsBean = e.point.Tag; var searchInfoWindow = null; var msg = ""; var height = 0; // alert(emsBean.recordType); if (emsBean.recordType == 1) { msg = msg + "管线种类:" + emsBean.markerObjectType + "<br/>" + "管线直径:" + emsBean.pipeDiameter + "<br/>" + "管线材质:" + emsBean.pipeMaterial + "<br/>" + "埋设方式:" + emsBean.layStyle + "<br/>" + "管线埋深:" + emsBean.depth + "<br/>"; height = 100; } else if (emsBean.recordType == 2) { msg = msg + "附属物名称:" + emsBean.markerObjectType + "<br/>" + "井深:" + emsBean.depth + "<br/>"; height = 40; } else if (emsBean.recordType == 3) { msg = msg + "管点特征:" + emsBean.markerObjectType + "<br/>" + "特征点埋深:" + emsBean.depth + "<br/>"; height = 40; } else { msg = msg + "上层管种类:" + emsBean.markerObjectType + "<br/>" + "上层管直径:" + emsBean.pipeDiameter + "<br/>" + "上层管材料:" + emsBean.pipeMaterial + "<br/>" + "上层管埋深:" + emsBean.depth + "<br/>" + "下层管种类:" + emsBean.belowType + "<br/>" + "下层管直径:" + emsBean.belowDiameter + "<br/>" + "下层管材料:" + emsBean.belowMaterial + "<br/>" + "下层管埋深:" + emsBean.belowDepth + "<br/>"; height = 160; } height = height + 145; var msg = msg + "所属道路:" + emsBean.road + "<br/>" + "建设年代:" + emsBean.constructTime + "<br/>" + "权属单位:" + emsBean.ownerComp + "<br/>" + "标识器ID:" + emsBean.markerId + "<br/>" + "标识器类型:" + emsBean.markerType + "<br/>" + "标识器埋深:" + emsBean.markerDepth + "<br/>" + "备注:" + emsBean.memo + "<br/>"; var imgUrl = $('#context').val() + "/images/ems.jpg"; var content = '<div style="margin:0;line-height:20px;padding:2px;">' + '<img src=' + '"' + imgUrl + '"' + ' alt="" style="float:right;zoom:1;overflow:hidden;width:100px;height:100px;margin-left:3px;"/>' + msg + '</div>'; searchInfoWindow = new BMapLib.SearchInfoWindow(map, content, { title: emsBean.markerName, //标题 width: 290, //宽度 height: height, //高度 panel: "panel", //检索结果面板 enableAutoPan: true //自动平移 }); searchInfoWindow.open(e.point); $(".BMapLib_search_text").css("padding", "0"); $(".BMapLib_search_text").css("margin-bottom", "0"); $(".BMapLib_trans_text").css("padding", "0"); $(".BMapLib_trans_text").css("margin-bottom", "0"); }); map.addOverlay(pointCollection); // 添加Overlay } else { alert('请在chrome、safari、IE8+以上浏览器查看本示例'); } }, //增加事件图片的marker addEventMarker: function () { for (var i = 0; i < eventBeanList.length; i++) { var bdPoint = gpsBdUtils.gcj2bd(eventBeanList[i].latitude, eventBeanList[i].longitude); var point = new BMap.Point(bdPoint.longitude, bdPoint.latitude); var iconImage = $('#context').val() + "/images/tasks/multi-tasks.png"; var myIcon = new BMap.Icon(iconImage, new BMap.Size(20, 50));//图片marker的ICON var msg = "事件描述:" + eventBeanList[i].description + "\r\n" + "上传时间:" + eventBeanList[i].createTime + "\r\n"; var marker = new BMap.Marker(point, {icon: myIcon, title: msg}); // 创建标注 marker.Tag = eventBeanList[i]; marker.addEventListener("click", showEventInfo); map.addOverlay(marker); // 将标注添加到地图中 } }, addTaskDetailMarker: function (data) { for (var i = 0; i < data.length; i++) { var bdPoint = gpsBdUtils.gcj2bd(data[i].latitude, data[i].longitude); var point = new BMap.Point(bdPoint.longitude, bdPoint.latitude); var myIcon = new BMap.Icon(data[i].icon, new BMap.Size(20, 50)); var msg = "标识器名称:" + data[i].markerName + "\r\n" + "巡检状态:" + data[i].isChecked + "\r\n" + "巡检时间:" + data[i].finishTime + "\r\n" + "描述:" + data[i].description + "\r\n"; var marker = new BMap.Marker(point, {icon: myIcon, title: msg}); // 创建标注 drawTaskOverlays.push(marker); map.addOverlay(marker); // 将标注添加到地图中 if (i == 0) { map.centerAndZoom(point, 17); } } // var options = { // size: BMAP_POINT_SIZE_BIG, // shape: BMAP_POINT_SHAPE_STAR, // color: '#d340c3' // }; } }; }(); TaskBean = function (id, icon, patrolerName, description, deployDate, beginDate, endDate, status, creatorName) { this.id = id; this.image = icon; this.patrolerName = patrolerName; this.description = description; this.deployDate = deployDate; this.beginDate = beginDate; this.endDate = endDate; this.status = status; this.creatorName = creatorName; }; TaskDetailBean = function (id, icon, markerName, latitude, longitude, isChecked, finishTime, description) { this.id = id; this.icon = icon; this.markerName = markerName; this.latitude = latitude; this.longitude = longitude; this.isChecked = isChecked; this.finishTime = finishTime; this.description = description; }; EventBean = function (id, imageName, latitude, longitude, description, status, createTime) { this.id = id; this.imageName = imageName; this.latitude = latitude; this.longitude = longitude; this.description = description; this.status = status; this.createTime = createTime; }