1 var map = null;
2 var MAP_CENTER_LAT = 51.518345;
3 var MAP_CENTER_LNG = 8.4208345;
4 var StationMarkerArr = new Array();
5 var OrderMarkerArr = new Array();
6
7 var service;
8 var directionsDisplayArray =new Array() ;
9 var directionsDisplay ;
10 var table1 ;
11 var staffTable = null;
12
13 var staionMarker=new Object();
14 var staffMarkers=new Array();
15 var staffMarkerStaffs = new Array();
16
17
18 var stationPostion;
19
20 $(function() {
21 // 初始化地图
22 try{
23 var defaultZoom = 10;
24 var mapProp = {
25 center : new google.maps.LatLng(MAP_CENTER_LAT, MAP_CENTER_LNG),
26 zoom : defaultZoom,
27 mapTypeId : google.maps.MapTypeId.ROADMAP
28 };
29 map = new google.maps.Map(document.getElementById("wfm_gmap"), mapProp);
30
31 directionsDisplay = new google.maps.DirectionsRenderer({ 'draggable': true ,suppressInfoWindows:true,suppressMarkers:true});
32
33 google.maps.event.addListener(map, 'zoom_changed', function () {
34 if (map.getZoom() > defaultZoom){
35 map.setZoom(defaultZoom);
36 }
37 });
38 }catch(err){
39 alert("google map initialize failed: <br>"+err);
40 }
41
42 table1 = $('#example').DataTable({
43 "bPaginate": true, //翻页功能
44 "bLengthChange": true, //改变每页显示数据数量
45 "bSort": false, //排序功能
46 "bInfo": true,//页脚信息
47 "autoWidth": false,
48 "sScrollY":"450px",
49 "sScrollX": "100%",
50 "aoColumns": [
51 {"mData": "ROW_SEQ","sTitle":"SEQ"},
52 {"mData": "WORK_ITEM","sTitle":"workitem"},
53 {"mData": "ORD_NO","sTitle":"ord_no"},
54 {"mData": "TASK_TITLE","sTitle":"task_title","defaultContent":""},
55 {"mData": "WORKORDER_NO","sTitle":"WORKORDER_NO","defaultContent":""},
56 {"mData": "STATION_ID","sTitle":"STATION_ID","defaultContent":""},
57 {"mData": "NE_ID","sTitle":"NE_ID","defaultContent":""}
58 ],
59 "bProcessing": true,
60 "paging": true,
61 "searching": true,
62 "ordering": true,
63 "bScrollInfinite": true,
64 "bScrollCollapse": true,
65 "renderer": "bootstrap",
66 "deferRender": true,
67 "showRowNumber": true,
68 "pagingType": "simple",
69 "aLengthMenu": [50,100,150],
70 "sAjaxSource": ctx+"/gisDispatch/searchWorkOrder.do",
71 "fnServerData": function ( sSource, aoData, fnCallback ) {
72 $.ajax( {
73 "dataType": 'json',
74 "type": "POST",
75 "url": sSource,
76 "data": aoData,
77 "success": function(data){
78 var aaData = data;
79 initMapData(data);
80 fnCallback(aaData);
81 }
82 });
83 }
84 });
85
86 staffTable = $('#example2').DataTable({
87 "bSort": false, //排序功能
88 "bInfo": false,//页脚信息
89 "paging": false,
90 "autoWidth": false,
91 "sScrollY":"450px",
92 "sScrollX": "100%",
93 "aoColumns": [
94 {"mData": "ROW_SEQ","sTitle":"SEQ"},
95 {"mData": "STAFF_NAME","sTitle":"STAFFNAME"},
96 {"mData": "DISTANCE","sTitle":"DISTANCES"},
97 {"mData": "ORD_NUM","sTitle":"ORDER_NUMBER"},
98 {"mData": "STAFF_ID","sTitle":"STAFF_ID","visible":false}
99
100 ],
101 "searching": false,
102 "ordering": true,
103 "bScrollCollapse": true,
104 "renderer": "bootstrap",
105 "deferRender": true,
106 "sAjaxSource": ctx+"/gisDispatch/searchTeamStaff.do",
107 "fnServerData": function ( sSource, aoData, fnCallback ) {
108 var paramData = table1.row().data();
109 if(!paramData){
110 return;
111 }
112 aoData.push({name:"NE_ID",value:paramData.NE_ID});
113 aoData.push({name:"LATITUDE",value:paramData.LATITUDE});
114 aoData.push({name:"LONGITUDE",value:paramData.LONGITUDE});
115 $.ajax( {
116 "dataType": 'json',
117 "type": "POST",
118 "url": sSource,
119 "data": aoData,
120 "success": function(data){
121
122 if(!!staionMarker.marker){
123 staionMarker.marker.setMap(null);
124 }
125 if(!!staionMarker.markerlabel){
126 staionMarker.markerlabel.clear();
127 }
128 staionMarker = new Object();
129
130 func_cleanMarkers(staffMarkers);
131 staffMarkers = new Array();
132
133 var markerPos = new google.maps.LatLng(StationMarkerArr[paramData.STATION_ID].lati, StationMarkerArr[paramData.STATION_ID].lngi);
134 stationPostion = markerPos;
135 var marker = new google.maps.Marker({
136 position : markerPos,
137 animation : google.maps.Animation.DROP,
138 draggable : false,
139 cursor : 'hand',
140 title:paramData.WORKORDER_NO,
141 icon:ctx+'/google/cabin.png'
142 });
143
144 staionMarker.marker=marker;
145 staionMarker.markerlabel = new MarkerLable(marker.position, marker.title, map);
146 staionMarker.marker.setMap(map);
147 staionMarker.markerlabel.show();
148 var bounds = new google.maps.LatLngBounds();
149 bounds.extend(markerPos);
150 map.panToBounds(bounds);
151 map.setCenter(markerPos);
152
153 for(var i in data.aaData){
154 var staffmarkerPos = new google.maps.LatLng(data.aaData[i].LATITUDE,data.aaData[i].LONGITUDE);
155 var staffmarkId = data.aaData[i].STAFF_ID;
156 var staffmarker = new google.maps.Marker({
157 position : staffmarkerPos,
158 animation : google.maps.Animation.DROP,
159 draggable : false,
160 cursor : 'hand',
161 title:data.aaData[i].STAFF_NAME,
162 icon:ctx+'/google/normal-staff.png',
163
164 });
165 var sm = new Object();
166 sm.marker=staffmarker;
167 sm.markerlabel = new MarkerLable(staffmarker.position, staffmarker.title, map);
168 sm.marker.setMap(map);
169 sm.markerlabel.show();
170 //重新添加标记就将分派按钮置为不可用
171 disabledAssginBtn();
172 (function (staffmarker,markerlable,staffmarkId) {
173 google.maps.event.addListener(staffmarker, 'click', function() {
174 //将分派按钮置为可用
175 undisabledAssginBtn();
176 //规划路线图
177 getRoute(staffmarker.position,marker.position,map);
178 //得到详情
179 getDetailsRoutes(staffmarker.position,marker.position,map);
180 //显示对话框
181 $('#siteinfo_modal').modal('show');
182 //改变颜色 变红
183 markerlable.changeColor('red');
184 //把其他颜色改为蓝色
185 changeColorBlue(staffMarkers,staffmarker);
186 //表格联动
187 changeTableSelect(staffmarkId);
188 });
189 })(sm.marker,sm.markerlabel,staffmarkId);
190
191 staffMarkerStaffs[data.aaData[i].STAFF_ID]=sm;
192 staffMarkers.push(sm);
193 var bounds = new google.maps.LatLngBounds();
194 bounds.extend(staffmarkerPos);
195 map.panToBounds(bounds);
196 }
197 fnCallback(data);
198 }
199 });
200 }
201 });
202
203 $('#example tbody').on('mousedown', 'tr', function (e) {
204 if(3 == e.which){
205 if ( $(this).hasClass('selected') ) {
206 }else {
207 table1.$('tr.selected').removeClass('selected');
208 $(this).addClass('selected');
209 }
210 }else if(1 == e.which){
211 if ( $(this).hasClass('selected') ) {
212 } else {
213 table1.$('tr.selected').removeClass('selected');
214 $(this).addClass('selected');
215 }
216 }
217 });
218
219
220 //staffTable的选中改变颜色
221 $('#example2 tbody').on('mousedown', 'tr', function (e) {
222 if(3 == e.which){
223 if ( $(this).hasClass('selected') ) {
224 }else {
225 staffTable.$('tr.selected').removeClass('selected');
226 $(this).addClass('selected');
227 }
228 }else if(1 == e.which){
229 if ( $(this).hasClass('selected') ) {
230 } else {
231 staffTable.$('tr.selected').removeClass('selected');
232 $(this).addClass('selected');
233 }
234 }
235 });
236
237 //表格和图标联动
238 function changeTableSelect(staffId){
239 var data = $('#example2').DataTable().rows().nodes();
240 var data2 = $('#example2').DataTable().rows().data();
241 $(data).each(function(index,item){
242 if(data2[index].STAFF_ID==staffId){
243 $(item).addClass('selected');
244 }else{
245 $(item).removeClass('selected');
246 }
247 });
248 }
249
250 //工单表点击事件
251 $('#example tbody').on('dblclick', 'tr', function(e){
252 var obj = table1.row($(this)).data();
253 loadStaffTable();
254 //清除原来规划的路径
255 clearRoute();
256 });
257
258 //staffTable点击事件
259 $('#example2 tbody').on('click', 'tr', function(e){
260 var objstaff = staffTable.row($(this)).data();
261 var staffPostion = new google.maps.LatLng(objstaff.LATITUDE, objstaff.LONGITUDE);
262 var staffId = objstaff.STAFF_ID;
263 getRoute(staffPostion,stationPostion,map);
264 getDetailsRoutes(staffPostion,stationPostion,map);
265 $('#siteinfo_modal').modal('show');
266 staffMarkerStaffs[staffId].markerlabel.changeColor('red');
267 changeColorBlue(staffMarkers,staffMarkerStaffs[staffId].marker);
268 });
269
270
271 $("#tbar_btn_stationscan").click(function() {
272 stationScan();
273 });
274
275 var mapdiv = document.getElementById("wfm_gmap");
276 mapdiv.style.height = (screen.availHeight - 300) + "px";
277 });
278
279 function initMapData(data){
280 var aaData = data.aaData;
281 StationMarkerArr = new Array();
282 for(var i=0;i<aaData.length;i++){
283 if(!StationMarkerArr[aaData[i].STATION_ID]){
284 StationMarkerArr[aaData[i].STATION_ID] = new Array();
285 StationMarkerArr[aaData[i].STATION_ID].name = aaData[i].STATION_NAME;
286 StationMarkerArr[aaData[i].STATION_ID].id = aaData[i].STATION_ID;
287 StationMarkerArr[aaData[i].STATION_ID].lati = aaData[i].LATITUDE;
288 StationMarkerArr[aaData[i].STATION_ID].lngi = aaData[i].LONGITUDE;
289 StationMarkerArr[aaData[i].STATION_ID].orderArr = new Array();
290 }
291 StationMarkerArr[aaData[i].STATION_ID].orderArr[aaData[i].WORKORDER_NO] = aaData[i];
292 }
293 }
294
295 function showMarkers(){
296
297 }
298 var stationMarkers=[];
299 // 站点查看
300 function stationScan() {
301 // first clear old markers
302 func_cleanMarkers();
303 stationMarkers=[];
304 var marker = null;
305 var infoWindow = new google.maps.InfoWindow();
306 for ( var i in StationMarkerArr) {
307 var markerPos = new google.maps.LatLng(StationMarkerArr[i].lati, StationMarkerArr[i].lngi);
308
309 var length = StationMarkerArr[i].orderArr.length;
310 var iconpath = '<%=path%>/google/cabin.png';
311 if(length > 0){
312 if(length <= 10){
313 iconpath = '<%=path%>/plugins/google-map/img/m1.png';
314 } else if(length > 10 && length <= 50){
315 iconpath = '<%=path%>/plugins/google-map/img/m2.png';
316 } else if(length > 50 && length <= 100){
317 iconpath = '<%=path%>/plugins/google-map/img/m3.png';
318 } else if(length > 100 && length <= 200){
319 iconpath = '<%=path%>/plugins/google-map/img/m4.png';
320 } else {
321 iconpath = '<%=path%>/plugins/google-map/img/m5.png';
322 }
323 }
324
325 marker = new google.maps.Marker({
326 position : markerPos,
327 animation : google.maps.Animation.DROP,
328 draggable : false,
329 cursor : 'hand',
330 _id:i,
331 title:StationMarkerArr[i].name,
332 icon:iconpath,
333 ordernum:length
334 });
335 stationMarkers[i] = new Array();
336 stationMarkers[i].marker=marker;
337 stationMarkers[i].markerlable=new MarkerLable(marker.position, marker.title, map);
338 marker.setMap(map);
339 stationMarkers[i].markerlable.show();
340
341 (function (marker) {
342 google.maps.event.addListener(marker, "click", function (e) {
343 infoWindow.setContent("<div style = 'width:200px;min-height:40px'> has" + marker.ordernum+ " records </div>");
344 infoWindow.open(map, marker);
345 });
346 })(marker);
347 }
348 // 调整视阈
349 setAutoZoom(map,stationMarkers);
350 }
351
352
353 function setAutoZoom(gmap,markers){
354 var bounds = new google.maps.LatLngBounds();
355 for ( var i in stationMarkers) {
356 bounds.extend(new google.maps.LatLng(markers[i].marker.getPosition().lat(),markers[i].marker.getPosition().lng()));
357 }
358 gmap.fitBounds(bounds);
359 }
360
361 // 清理掉站点marker
362 function func_cleanMarkers(markers) {
363 var arrSize = markers.length;
364 for ( var i in markers) {
365 var marker = markers[i].marker;
366 if (marker && marker != null) {
367 if(!!markers[i].markerlabel){
368 markers[i].markerlabel.clear();
369 markers[i].markerlabel = null;
370 }
371 marker.setMap(null);
372 }
373 }
374 }
375
376
377
378 function reloadWorkOrder(){
379 table1.ajax.reload();
380 table1.draw();
381 }
382
383
384 function loadStaffTable(){
385 staffTable.ajax.reload();
386 staffTable.draw();
387 }
388
389 //分派按钮变灰
390 function disabledAssginBtn(){
391 $("#tbar_btn_assgin").attr("disabled",true);
392 $("#i_assgin").attr("class","fa fa-flag-o text-gray");
393 }
394
395 //分派按钮可用
396 function undisabledAssginBtn(){
397 $("#tbar_btn_assgin").attr("disabled",false);
398 $("#i_assgin").attr("class","fa fa-flag-o text-blue");
399 }
400
401 //得到规划路线
402 function getRoute(source,destination,map){
403 var directionsService = new google.maps.DirectionsService();
404 directionsDisplay.setMap(map);
405 var request = {
406 origin: source,
407 destination: destination,
408 travelMode: google.maps.TravelMode.DRIVING
409 };
410 directionsService.route(request, function (response, status) {
411 if (status == google.maps.DirectionsStatus.OK) {
412 directionsDisplay.setDirections(response);
413 }
414 });
415 }
416
417 //得到规划路径的详细些信息
418 function getDetailsRoutes(source,destination,map){
419 service = new google.maps.DistanceMatrixService();
420 service.getDistanceMatrix({
421 origins: [source],
422 destinations: [destination],
423 travelMode: google.maps.TravelMode.DRIVING,
424 unitSystem: google.maps.UnitSystem.METRIC,
425 avoidHighways: false,
426 avoidTolls: false
427 }, function (response, status) {
428 if (status == google.maps.DistanceMatrixStatus.OK && response.rows[0].elements[0].status != "ZERO_RESULTS") {
429 var distance = response.rows[0].elements[0].distance.text;
430 var duration = response.rows[0].elements[0].duration.text;
431 var dvDistance = document.getElementById("siteinfo_modal_label");
432 dvDistance.innerHTML = "";
433 dvDistance.innerHTML += "Distance: " + distance + "<br />";
434 dvDistance.innerHTML += "Duration:" + duration;
435
436 } else {
437 alert("Unable to find the distance via road.");
438 }
439 });
440
441
442 }
443 //把不是本mark的颜色置为蓝色
444 function changeColorBlue(staffMarkers,staffmarker){
445 for(var i =0;i<staffMarkers.length;i++){
446 if(staffMarkers[i].marker!=staffmarker){
447 staffMarkers[i].markerlabel.changeColor('blue');
448 }
449 }
450 }
451 //清除掉规划的路径
452 function clearRoute(){
453 directionsDisplay.setMap(null);
454 }
