treeListFrame.jsp 30 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039
  1. <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
  2. <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
  3. <%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
  4. <%@ page session="false" %>
  5. <!doctype html>
  6. <html lang="ko" style="min-width:300px !important;overflow:hidden">
  7. <head>
  8. <link rel="stylesheet" type="text/css" href="${contextRoot }/css/common.css" />
  9. <link rel="stylesheet" type="text/css" href="${contextRoot }/css/main.css" />
  10. <link rel="stylesheet" href="${contextRoot }/css/themes/default/style.css" />
  11. </head>
  12. <body class="sang" style="min-width:305px !important;overflow:hidden">
  13. <div class="leftMenu">
  14. <ul class="tabs">
  15. <li><a href="javascript:goIntMenu()" class="tab" id="tab1"><img src="images/tab01_on.png" alt="교차로메뉴" /></a></li>
  16. <li><a href="javascript:goGroupMenu()" class="tab" id="tab2"><img src="images/tab02_off.png" alt="신호그룹메뉴" /></a></li>
  17. </ul>
  18. <div class="search-box">
  19. <input type="text" id="searchText" placeholder="검색어를 입력해주세요" style="width: 210px;padding:5px;" onkeyup="searchTreeData(event)">
  20. <div class="search-button" onclick="searchTreeData()">검색</div>
  21. </div>
  22. <div id="onOffTree"></div>
  23. <div id="intTree"></div>
  24. <div id="groupTree"></div>
  25. <div class="treeLoading"><img src="/css/themes/classic/throbber.gif" /></div>
  26. </div>
  27. <script src="${contextRoot }/js/common/common-all.js" type="text/javascript" ></script>
  28. <script src="${contextRoot }/js/common/jstree.min.js" type="text/javascript" ></script>
  29. <script type="text/javascript">
  30. var treeJson = null;
  31. var groupTreeJson = null;
  32. var treeCtrl;
  33. var onlineCenterStatusCheckId;
  34. var offlineCenterStatusCheckId;
  35. var onlineIntStatusCheckId;
  36. var offlineIntStatusCheckId;
  37. var _RegionCdArr = [];
  38. var _GroupNoArr = [];
  39. var intGroupLineArr = [];
  40. var intGroupCircleArr = [];
  41. var _groupTreeListCallBackData;
  42. var onlineCenterStatusData;
  43. var offlineCenterStatusData;
  44. var onlineIntStatusData;
  45. var offlineIntStatusData;
  46. var _searchText = "";
  47. var _Tab = "int";
  48. setTreeList();
  49. getIntTreeList();
  50. function searchTreeData(el) {
  51. if (el && el.code !== "Enter") {
  52. return;
  53. }
  54. const $searchText = $('#searchText');
  55. _searchText = $searchText.val();
  56. if (_Tab === 'int') {
  57. clearIntInterval();
  58. const oldTree = $('#intTree').jstree(true);
  59. if (oldTree) {
  60. oldTree.destroy();
  61. }
  62. setTreeList();
  63. getIntTreeList();
  64. $('#intTree').jstree("refresh");
  65. }
  66. else {
  67. }
  68. //$('#intTree').jstree(true).search(_searchText);
  69. }
  70. function clearIntInterval() {
  71. if(onlineCenterStatusCheckId != null) clearTimeout(onlineCenterStatusCheckId);
  72. if(onlineIntStatusCheckId != null) clearTimeout(onlineIntStatusCheckId);
  73. onlineCenterStatusCheckId = null;
  74. onlineIntStatusCheckId = null;
  75. }
  76. function goIntMenu() {
  77. $('#tab1 img').attr('src','images/tab01_on.png');
  78. $('#tab2 img').attr('src','images/tab02_off.png');
  79. $('.treeLoading').hide();
  80. $('#groupTree').hide();
  81. $('#intTree').show();
  82. $('.search-box').show();
  83. emptyintGroupLineArr();
  84. emptyintGroupCircleArr();
  85. }
  86. function goGroupMenu() {
  87. $('#tab2 img').attr('src','images/tab02_on.png');
  88. $('#tab1 img').attr('src','images/tab01_off.png');
  89. $('#intTree').hide();
  90. $('#groupTree').show();
  91. $('.search-box').hide();
  92. if(groupTreeJson == null)
  93. {
  94. $('.treeLoading').show();
  95. goGroupTreeList();
  96. }
  97. }
  98. function setTreeList()
  99. {
  100. /**
  101. ** ****************************************************
  102. ** 레이어 리스트 Tree 생성
  103. ** ****************************************************
  104. */
  105. treeCtrl = treeCtrl || (function(){
  106. var Node = function( nodeName, data, id, icon ){
  107. return {
  108. id : id,
  109. icon : icon,
  110. text: nodeName,
  111. state: { 'opened' : false, 'selected' : false },
  112. data: data, // @type: ol.Layer
  113. children: []
  114. };
  115. };
  116. var _root = new Node('ROOT','item');
  117. var findChild = function( parent, nodeName ){
  118. for( var i=0; i < parent.children.length; i++ ){
  119. var child = parent.children[i];
  120. if( child.text == nodeName ){
  121. return child;
  122. }
  123. }
  124. return null;
  125. };
  126. // find parent which save item
  127. var getParent = function( parent, group, data, id, icon, opt_make){
  128. opt_make = ( typeof opt_make === 'undefined' ) ? true : false;
  129. for( var i=0; i < group.length; i++ ){
  130. var child = findChild( parent, group[i] );
  131. // 없으면 Node 생성
  132. if( !child )
  133. {
  134. if( !opt_make ) return null;
  135. child = new Node( group[i], data );
  136. parent.children.push( child );
  137. }
  138. parent = child;
  139. }
  140. return parent;
  141. }
  142. // group에 layer 아이템 저장
  143. var _set = function( key, item){
  144. key.forEach(function(el) {
  145. var group = el.split('-');
  146. var parent = getParent( _root, group, item.data, item.id, item.icon);
  147. var child = new Node(item.name, item.data, item.id, item.icon);
  148. parent.children.push(child);
  149. return child;
  150. });
  151. };
  152. // item인 node들만 반환 (=layer)
  153. var _get = function( key ){
  154. var group = key.split('-');
  155. var parent = getParent( _root, group );
  156. return parent.children.filter(function( node ){
  157. return node.type == 'item'
  158. });
  159. };
  160. var _clear = function(){
  161. _root.children = [];
  162. };
  163. var _setState = function( key, state ){
  164. var group = key.split('-');
  165. var node = getParent( _root, group, false );
  166. if( !node ) return false;
  167. node['state'] = state;
  168. return true;
  169. };
  170. var _toTreeJson = function(){
  171. return _root.children;
  172. };
  173. return {
  174. 'root' : _root,
  175. 'set' : _set,
  176. 'get' : _get,
  177. 'setState' : _setState,
  178. 'toTreeJson': _toTreeJson,
  179. 'clear' : _clear,
  180. };
  181. })(treeCtrl);
  182. }
  183. function getIntTreeList()
  184. {
  185. $('.treeLoading').show();
  186. var url = 'getIntTreeList.do';
  187. requestService(url, '', getIntTreeListCallback);
  188. }
  189. function getIntTreeListCallback(data)
  190. {
  191. var regionCd;
  192. var regionNm;
  193. var xCoord;
  194. var yCoord;
  195. var sigunguX;
  196. var sigunguY;
  197. var sigunguCd;
  198. var sigunguNm;
  199. var intNoArr;
  200. var intNmArr;
  201. var mainIntNoArr;
  202. var intXCoordArr;
  203. var intYCoordArr;
  204. var intNoArrTemp = [];
  205. var networkType;
  206. treeCtrl.clear();
  207. //var topTitle = ['유선','무선'];
  208. var nameCntOn = '';
  209. var guTitleOn = '';
  210. var nameCntOff = '';
  211. var guTitleOff = '';
  212. var networkId;
  213. for(var ii = 0; ii < data.length; ii++)
  214. {
  215. regionCd = data[ii].REGION_CD;
  216. regionNm = data[ii].REGION_NM;
  217. xCoord = data[ii].X_COORD;
  218. yCoord = data[ii].Y_COORD;
  219. sigunguX = data[ii].SIGUNGU_X;
  220. sigunguY = data[ii].SIGUNGU_Y;
  221. sigunguCd = data[ii].SIGUNGU_CD;
  222. sigunguNm = data[ii].SIGUNGU_NM;
  223. intNoArr = data[ii].INT_NO.split('|');
  224. intNmArr = data[ii].INT_NM.split('|');
  225. networkType = data[ii].NETWORK_TYPE.split('|');
  226. nodeIdArr = data[ii].NODE_ID.split('|');
  227. if(data[ii].INT_X_COORD != null || data[ii].INT_X_COORD != null)
  228. {
  229. intXCoordArr= data[ii].INT_X_COORD.split('|');
  230. intYCoordArr= data[ii].INT_Y_COORD.split('|');
  231. }
  232. else
  233. {
  234. intXCoordArr= '';
  235. intYCoordArr= '';
  236. }
  237. var searchX = null;
  238. var searchY = null;
  239. var searchText = null;
  240. if (_searchText) {
  241. if (_searchText.indexOf(',') > -1) {
  242. const coordArr = _searchText.split(',');
  243. if (coordArr.length === 2) {
  244. searchX = coordArr[0].trim();
  245. searchY = coordArr[1].trim();
  246. }
  247. }
  248. else {
  249. searchText = _searchText
  250. }
  251. }
  252. for(var jj = 0; jj < intNoArr.length; jj++)
  253. {
  254. var isDraw = true;
  255. if (searchX && searchY) {
  256. if (searchX !== intXCoordArr[jj] || searchY !== intYCoordArr[jj]) {
  257. isDraw = false;
  258. }
  259. }
  260. else if (searchText) {
  261. if ( nodeIdArr[jj] !== searchText
  262. && !regionCd.includes(searchText)
  263. && !regionNm.includes(searchText)
  264. && !intNoArr[jj].includes(searchText)
  265. && !intNmArr[jj].includes(searchText)) {
  266. isDraw = false;
  267. }
  268. else {
  269. }
  270. }
  271. if(isDraw)
  272. //if(networkType[jj] == 0 || networkType[jj] == 2)
  273. {
  274. networkId = 0;
  275. nameCntOn = '<img class="regionComm_'+networkId+'_'+regionCd+'" src="" alt="'+regionCd+'" style="padding:0 0 2px 0" />';
  276. nameCntOn += '&nbsp;<strong class="centerNm_'+regionCd+'">' + regionNm + '</strong>' +
  277. '&nbsp;( 전체 : <span class="intTotal_'+networkId+'_'+regionCd+'" name="'+networkId+'_int" style="color:#0000FF"></span>'+
  278. ' / 이상 : <span class="intErrCnt_'+networkId+'_'+regionCd+'" style="color:#FF0000"></span> )';
  279. if(regionNm == sigunguNm)
  280. {
  281. guTitleOn = nameCntOn;
  282. }
  283. else
  284. {
  285. guTitleOn = nameCntOn + '-' + sigunguNm +
  286. '&nbsp;( 전체 : <span class="guIntTotal_'+networkId+'_'+regionCd+'_'+sigunguCd+'" name="'+networkId+'_int" style="color:#0000FF"></span> / 이상 : '+
  287. '<span class="guIntErrCnt_'+networkId+'_'+regionCd+'_'+sigunguCd+'" style="color:#FF0000"></span> )';
  288. }
  289. if(intNmArr[jj] == 'undefined_undefined') intNmArr[jj] = '';
  290. var intNm = intNoArr[jj]+'_'+intNmArr[jj];
  291. treeCtrl.set([guTitleOn],{
  292. name : intNm,
  293. id : regionCd+'_'+networkId+'_'+intNoArr[jj],
  294. data : {
  295. 'line' : 'online',
  296. 'regionCd' : regionCd ,
  297. 'intNo' : intNoArr[jj] ,
  298. 'intNm' : intNmArr[jj],
  299. 'xCoord' : xCoord ,
  300. 'yCoord' : yCoord ,
  301. 'intXCoord' : intXCoordArr[jj],
  302. 'intYCoord' : intYCoordArr[jj],
  303. 'sigunguX' : sigunguX,
  304. 'sigunguY' : sigunguY ,
  305. 'sigunguCd' : sigunguCd ,
  306. 'networkType' : networkType[jj]
  307. }
  308. });
  309. }
  310. }
  311. }
  312. treeJson = treeCtrl.toTreeJson();
  313. // jsTree 생성
  314. $('#intTree').jstree({
  315. 'core' : {
  316. 'data' : treeJson,
  317. "themes" : { "stripes" : true },
  318. },
  319. "plugins" : [ "wholerow"],
  320. }).on('loaded.jstree', function(e, data) {
  321. onlineCenterStatusCheck();
  322. onlineIntStatusCheck();
  323. parent.document.getElementById('iframeBottomList').contentWindow.showOnlineList();
  324. //if (_searchText) {
  325. // data.instance.open_node('.jstree-last');
  326. //}
  327. });
  328. $('#intTree').bind('open_node.jstree', function(event, data) {
  329. //if(data.node.text == '유선')
  330. //{
  331. //}
  332. //else if(data.node.text == '무선')
  333. //{
  334. // offlineCenterStatusCheck();
  335. // offlineIntStatusCheck();
  336. // parent.document.getElementById('iframeBottomList').contentWindow.showOfflineList();
  337. //}
  338. if(data.node.text.indexOf('name="0_int"') != -1)
  339. { if (data.node.text.indexOf('class="regionComm') != -1) {
  340. _RegionCdArr.push(data.node.data.regionCd);
  341. }
  342. drawCenterStatus(0,onlineCenterStatusData);
  343. onlineIntStatusCheck();
  344. }
  345. //else {
  346. // onlineCenterStatusCheck();
  347. // onlineIntStatusCheck();
  348. // parent.document.getElementById('iframeBottomList').contentWindow.showOnlineList();
  349. // }
  350. //else if(data.node.text.indexOf('name="0_int"') != -1)
  351. //{
  352. // _RegionCdArr.push(data.node.data.regionCd);
  353. // drawCenterStatus(0,onlineCenterStatusData);
  354. // onlineIntStatusCheck();
  355. //}
  356. //else if(data.node.text.indexOf('name="1_int"') != -1)
  357. //{
  358. // _RegionCdArr.push(data.node.data.regionCd);
  359. // drawCenterStatus(1,offlineCenterStatusData);
  360. // offlineIntStatusCheck();
  361. //}
  362. });
  363. $('#intTree').bind('close_node.jstree', function(event, data) {
  364. if(data.node.text == '유선')
  365. {
  366. if(onlineCenterStatusCheckId != null) clearTimeout(onlineCenterStatusCheckId);
  367. if(onlineIntStatusCheckId != null) clearTimeout(onlineIntStatusCheckId);
  368. }
  369. //else if(data.node.text == '무선')
  370. //{
  371. // if(offlineCenterStatusCheckId != null) clearTimeout(offlineCenterStatusCheckId);
  372. // if(offlineIntStatusCheckId != null) clearTimeout(offlineIntStatusCheckId);
  373. //}
  374. else if (data.node.text.indexOf('class="regionComm') != -1) {
  375. const idx = _RegionCdArr.findIndex(regionCd => regionCd === data.node.data.regionCd);
  376. if (idx > -1) {
  377. _RegionCdArr.splice(idx, 1);
  378. }
  379. }
  380. //else if(data.node.text.indexOf('name="0_int"') != -1)
  381. //{
  382. //if(onlineIntStatusCheckId != null) clearTimeout(onlineIntStatusCheckId);
  383. //_RegionCdArr = [];
  384. //}
  385. //else if(data.node.text.indexOf('name="1_int"') != -1)
  386. //{
  387. // if(offlineIntStatusCheckId != null) clearTimeout(offlineIntStatusCheckId);
  388. // _RegionCdArr = [];
  389. //}
  390. });
  391. // jsTree 클릭 이벤트 : 레이어 setVisible
  392. $('#intTree').bind('select_node.jstree', function(event, data) {
  393. var parentNd = data.node.parent;
  394. var children = data.node.children;
  395. parent._RegionCd = data.node.data.regionCd;
  396. if(parentNd == '#') //시도 선택
  397. {
  398. var xCoord = data.node.data.xCoord;
  399. var yCoord = data.node.data.yCoord;
  400. parent.map.setCenter(new parent.kakao.maps.LatLng(yCoord, xCoord));
  401. parent.map.setLevel(3);
  402. parent.getSignalInfo('SIDO');
  403. }
  404. else if(parentNd != '#' && children.length > 0) //구 선택
  405. {
  406. var guX = data.node.data.sigunguX;
  407. var guY = data.node.data.sigunguY;
  408. if(guX != null && guY != null)
  409. {
  410. parent.map.panTo(new parent.kakao.maps.LatLng(guY, guX));
  411. setTimeout(function() {parent.mapZoomBound()},100*3);
  412. }
  413. }
  414. else
  415. {
  416. var intNm = data.node.data.intNm;
  417. var intXCoord = data.node.data.intXCoord;
  418. var intYCoord = data.node.data.intYCoord;
  419. parent.$('#regionCd').val(data.node.data.regionCd);
  420. parent.$('#intNo').val(data.node.data.intNo);
  421. parent.$('#intNm').val(intNm);
  422. parent.$('#treeXCoord').val(intXCoord);
  423. parent.$('#treeYCoord').val(intYCoord);
  424. parent.map.panTo(new parent.kakao.maps.LatLng(intYCoord, intXCoord));
  425. if(parent._Level > 4) parent.map.setLevel(4);
  426. setTimeout(
  427. function() {
  428. parent.getSignalInfo();
  429. parent.customOverlayFnc(intNm,intXCoord,intYCoord);
  430. },100 * 2
  431. );
  432. if(parent._Level == 1)
  433. {
  434. //무선, 유무선인경우 신호등 표시..
  435. parent.getCvibInfo();
  436. }
  437. }
  438. if(data.node.data.line == 'offline') parent.document.getElementById('iframeBottomList').contentWindow.showOfflineList();
  439. else if(data.node.data.line == 'online') parent.document.getElementById('iframeBottomList').contentWindow.showOnlineList();
  440. _Flag = '';
  441. });
  442. $('.treeLoading').hide();
  443. getGroupTreeList();
  444. }
  445. //그룹트리 리스트..
  446. function getGroupTreeList(param) {
  447. treeCtrl.clear();
  448. //지역그룹리스트 가저오기...
  449. var url = 'getGroupTreeList.do';
  450. var param = param;
  451. //requestService(url, param, getGroupTreeListCallback);
  452. requestService(url, param, goGroupTreeList);
  453. }
  454. function getGroupTreeListCallback(data) {
  455. _groupTreeListCallBackData = data;
  456. }
  457. function goGroupTreeList(data) {
  458. //var data = _groupTreeListCallBackData;
  459. var regionCd;
  460. var regionNm;
  461. var sigunguCd;
  462. var sigunguNm;
  463. var xCoord;
  464. var yCoord;
  465. var sigunguX;
  466. var sigunguY;
  467. var networkId = 0;
  468. //var topTitle = ['유선','무선'];
  469. if(typeof data == 'undefined')
  470. {
  471. alert('데이터정렬이 안되었습니다.\n잠시후 다시 선택하십시오.');
  472. return;
  473. }
  474. for(var ii = 0; ii < data.length; ii++)
  475. {
  476. regionCd = data[ii].REGION_CD;
  477. regionNm = data[ii].REGION_NM;
  478. sigunguCd = data[ii].SIGUNGU_CD;
  479. sigunguNm = data[ii].SIGUNGU_NM;
  480. xCoord = data[ii].X_COORD;
  481. yCoord = data[ii].Y_COORD;
  482. sigunguX = data[ii].SIGUNGU_X;
  483. sigunguY = data[ii].SIGUNGU_Y;
  484. if(data[ii].SIGUNGU_NM != '-')
  485. {
  486. var intNoArrUp = data[ii].INT_NO.split('@');
  487. var intNmArrUp = data[ii].INT_NM.split('@');
  488. var groupNmArrUp = data[ii].GROUP_NM.split('@');
  489. var intXCoordArrUp = data[ii].INT_X_COORD.split('@');
  490. var intYCoordArrUp = data[ii].INT_Y_COORD.split('@');
  491. for(var i = 0; i < groupNmArrUp.length; i++)
  492. {
  493. var intNoArr = intNoArrUp[i].split('|');
  494. var intNmArr = intNmArrUp[i].split('|');
  495. var groupNmArr = groupNmArrUp[i].split('-');
  496. var groupXCoord = intXCoordArrUp[i];
  497. var groupYCoord = intYCoordArrUp[i];
  498. var intXCoordArr = intXCoordArrUp[i].split('|');
  499. var intYCoordArr = intYCoordArrUp[i].split('|');
  500. for(var jj = 0; jj < intNoArr.length; jj++)
  501. {
  502. var intNoOr = intNoArr[jj];
  503. var intNm = intNmArr[jj];
  504. var intXCoord = intXCoordArr[jj];
  505. var intYCoord = intYCoordArr[jj];
  506. var intNo = intNoOr.substr(3,(intNoOr.length-3));
  507. var groupStateNm = '<img class="regionComm_0_'+regionCd+'" src="" alt="" style="padding:0 0 2px 0" />' +
  508. '&nbsp;<strong class="centerNm_'+regionCd+'">' + regionNm +
  509. '</strong>&nbsp;( 전체 : <span class="intTotal_' + networkId + '_' + regionCd + '" name="'+networkId+'_int" style="color:#0000FF"></span> / '+
  510. '이상 : <span class="intErrCnt_' + networkId + '_' + regionCd + '" style="color:#FF0000"></span> )';
  511. var groupTitle;
  512. // if(regionNm == sigunguNm) groupTitle = topTitle[0] + '-' + groupStateNm + '-' + groupNmArr[1];
  513. if(regionNm == sigunguNm) groupTitle = groupStateNm + '-' + groupNmArr[1];
  514. // else groupTitle = topTitle[0] + '-' + groupStateNm + '-' +
  515. else groupTitle = groupStateNm + '-' +
  516. sigunguNm + '&nbsp;( 전체 : <span class="guIntTotal_' + networkId +'_'+regionCd+'_'+ sigunguCd + '" style="color:#0000FF"></span> / ' +
  517. '이상 : <span class="guIntErrCnt_' + networkId +'_'+regionCd+'_'+ sigunguCd + '" name="' + networkId + '_int" style="color:#FF0000"></span> )' + '-' +
  518. groupNmArr[1];
  519. intNm = intNo + '_' + intNm;
  520. treeCtrl.set([groupTitle],{
  521. name : intNm,
  522. id : regionCd + '_0_' + intNo,
  523. data : {
  524. 'regionCd' : regionCd , 'intNo' : intNo.substring(3) , 'intNm' : intNm,
  525. 'xCoord' : xCoord , 'yCoord' : yCoord , 'intXCoord' : intXCoord , 'intYCoord' : intYCoord , 'sigunguX' : sigunguX ,
  526. 'sigunguY' : sigunguY , 'groupXCoord' : groupXCoord , 'groupYCoord' : groupYCoord , 'sigunguCd' : sigunguCd
  527. }
  528. });
  529. }
  530. }
  531. }
  532. else
  533. {
  534. treeCtrl.set(data[ii].GROUP_NM,'item',data[ii]);
  535. }
  536. }
  537. groupTreeJson = treeCtrl.toTreeJson();
  538. // 법정경계 펼치고, 선택하기
  539. //treeCtrl.setState( '의왕시', { 'opened' : true, 'selected' : true } );
  540. // jsTree 생성
  541. $('#groupTree').jstree({
  542. 'core' : {
  543. 'data' : groupTreeJson,
  544. "themes" : { "stripes" : true },
  545. },
  546. "plugins" : [ "wholerow", "changed", "types", "themes", "ui" ]
  547. })
  548. .on('loaded.jstree', function(e, data) {
  549. onlineCenterStatusCheck();
  550. });
  551. $('#groupTree').bind('open_node.jstree', function(event, data) {
  552. _RegionCdArr = [];
  553. _GroupNoArr = [];
  554. //else if(data.node.text == '무선')
  555. //{
  556. // offlineCenterStatusCheck();
  557. //}
  558. if(data.node.text.indexOf('name="0_int"') != -1)
  559. {
  560. _RegionCdArr.push(data.node.data.regionCd);
  561. drawCenterStatus(0,onlineCenterStatusData);
  562. onlineIntStatusCheck();
  563. }
  564. else if(data.node.text.indexOf('그룹번호') != -1)
  565. {
  566. _RegionCdArr.push(data.node.data.regionCd);
  567. drawCenterStatus(0,onlineCenterStatusData);
  568. onlineIntStatusCheck();
  569. }
  570. //else {
  571. // onlineCenterStatusCheck();
  572. //}
  573. });
  574. $('#groupTree').bind('close_node.jstree', function(event, data){
  575. if(data.node.text.indexOf('name="0_int"') != -1)
  576. {
  577. if(onlineIntStatusCheckId != null) clearTimeout(onlineIntStatusCheckId);
  578. }
  579. else if(data.node.text.indexOf('그룹번호') != -1)
  580. {
  581. }
  582. else {
  583. if(onlineCenterStatusCheckId != null) clearTimeout(onlineCenterStatusCheckId);
  584. if(onlineIntStatusCheckId != null) clearTimeout(onlineIntStatusCheckId);
  585. }
  586. _RegionCdArr = [];
  587. });
  588. // jsTree 클릭 이벤트 : 레이어 setVisible
  589. $('#groupTree').bind('select_node.jstree', function(event, data){
  590. parent._RegionCd = data.node.data.regionCd;
  591. var parentNd = data.node.parent;
  592. var childrenId = data.node.id;
  593. var nodeNm = data.node.text;
  594. var _groupXCoord;
  595. var _groupYCoord;
  596. if(parentNd == '#') //시도 선택
  597. {
  598. var xCoord = data.node.data.xCoord;
  599. var yCoord = data.node.data.yCoord;
  600. parent.$('#XCoord').val(xCoord);
  601. parent.$('#YCoord').val(yCoord);
  602. parent.map.setCenter(new parent.kakao.maps.LatLng(yCoord, xCoord));
  603. parent.map.setLevel(3);
  604. parent.getSignalInfo('SIDO');
  605. emptyintGroupLineArr();
  606. emptyintGroupCircleArr();
  607. _Flag = '';
  608. }
  609. else if(parentNd != '#' && data.node.children.length > 0 && nodeNm.substr(0,1) !== '그') //구 선택
  610. {
  611. var guX = data.node.data.sigunguX;
  612. var guY = data.node.data.sigunguY;
  613. if(guX != null && guY != null)
  614. {
  615. parent.map.panTo(new parent.kakao.maps.LatLng(guY, guX));
  616. setTimeout(function() {parent.mapZoomBound()},100*3);
  617. }
  618. }
  619. else if(nodeNm.substr(0,1) == '그') //그룹 선택
  620. {
  621. var groupNo = data.node.data.groupNo;
  622. var groupXCoord = data.node.data.groupXCoord;
  623. var groupYCoord = data.node.data.groupYCoord;
  624. var minX;
  625. var minY;
  626. var maxX;
  627. var maxY;
  628. if(groupXCoord != null || groupYCoord != null)
  629. {
  630. _groupXCoord = groupXCoord.split('|');
  631. _groupYCoord = groupYCoord.split('|');
  632. minX = _groupXCoord[0];
  633. minY = _groupYCoord[0];
  634. maxX = _groupXCoord[0];
  635. maxY = _groupYCoord[0];
  636. for(var ii = 0; ii < _groupXCoord.length; ii++)
  637. {
  638. if(_groupXCoord[ii] < minX) minX = _groupXCoord[ii];
  639. if(_groupYCoord[ii] < minY) minY = _groupYCoord[ii];
  640. if(_groupXCoord[ii] > maxX) maxX = _groupXCoord[ii];
  641. if(_groupYCoord[ii] > maxY) maxY = _groupYCoord[ii];
  642. }
  643. }
  644. else
  645. {
  646. alert('TB_INT테이블의 좌표가 없습니다.');
  647. return;
  648. }
  649. var points = [
  650. new parent.kakao.maps.LatLng(minY, minX),
  651. new parent.kakao.maps.LatLng(maxY, maxX)
  652. ];
  653. var bounds = new parent.kakao.maps.LatLngBounds();
  654. for(var jj = 0; jj < points.length; jj++)
  655. {
  656. bounds.extend(points[jj]);
  657. }
  658. parent.map.setBounds(bounds);
  659. parent.getSignalInfo(groupNo);
  660. //그룹라인그리기
  661. drawIntGroupLine(_groupXCoord,_groupYCoord);
  662. }
  663. else if(childrenId.substr(0,1) != 'j') //교차로 선택
  664. {
  665. var intNm = data.node.data.intNm;
  666. var intXCoord = data.node.data.intXCoord;
  667. var intYCoord = data.node.data.intYCoord;
  668. parent.$('#regionCd').val(data.node.data.regionCd);
  669. parent.$('#intNo').val(data.node.data.intNo);
  670. parent.$('#intNm').val(intNm);
  671. parent.$('#treeXCoord').val(intXCoord);
  672. parent.$('#treeYCoord').val(intYCoord);
  673. setTimeout(
  674. function() {
  675. parent.getSignalInfo();
  676. parent.customOverlayFnc(intNm,intXCoord,intYCoord);
  677. },100 * 2
  678. );
  679. parent.map.panTo(new parent.kakao.maps.LatLng(intYCoord, intXCoord));
  680. emptyintGroupCircleArr();
  681. }
  682. });
  683. $('.treeLoading').hide();
  684. }
  685. //유선 센터상테 체크..
  686. function onlineCenterStatusCheck() {
  687. if(onlineCenterStatusCheckId != null) clearTimeout(onlineCenterStatusCheckId);
  688. onlineCenterStatusCheckId = setTimeout('onlineCenterStatusCheck()', 5 * 1000);
  689. var url = 'getOnlineCenterStatus.do';
  690. requestService(url, '', onlineCenterStatusCheckCallback);
  691. }
  692. function onlineCenterStatusCheckCallback(data) {
  693. onlineCenterStatusData = data;
  694. drawCenterStatus(0,data);
  695. }
  696. //무선 센터상테 체크..
  697. function offlineCenterStatusCheck() {
  698. if(offlineCenterStatusCheckId != null) clearTimeout(offlineCenterStatusCheckId);
  699. offlineCenterStatusCheckId = setTimeout('offlineCenterStatusCheck()', 5 * 1000);
  700. var url = 'getOfflineCenterStatus.do';
  701. requestService(url, '', offlineCenterStatusCheckCallback);
  702. }
  703. function offlineCenterStatusCheckCallback(data) {
  704. offlineCenterStatusData = data;
  705. drawCenterStatus(1,data);
  706. }
  707. function drawCenterStatus(network,data) {
  708. var regionCd;
  709. var totCnt;
  710. var errCnt;
  711. var commState;
  712. var commImg = '';
  713. for(var ii = 0; ii < data.length; ii++)
  714. {
  715. regionCd = data[ii].REGION_CD;
  716. totCnt = data[ii].TOT;
  717. errCnt = data[ii].ERR_CNT;
  718. commState = data[ii].COMM_STATE;
  719. simulFlag = data[ii].SIMUL_FLAG;
  720. if(commState == 1)
  721. {
  722. commImg = 'images/commOff.png';
  723. $('.intErrCnt_'+network+'_'+regionCd).text(totCnt);
  724. //$('.intErrCnt_'+network+'_'+regionCd).text(errCnt);
  725. }
  726. else
  727. {
  728. commImg = 'images/commOn.png';
  729. $('.intErrCnt_'+network+'_'+regionCd).text(errCnt);
  730. }
  731. if (simulFlag === 'Y') {
  732. commImg = 'images/comm_2.png';
  733. }
  734. if(network == 0) $('.regionComm_'+network+'_'+regionCd).attr('src',commImg);
  735. $('.intTotal_'+network+'_'+regionCd).text(totCnt);
  736. }
  737. }
  738. //유선 제어기 상태 체크..
  739. function onlineIntStatusCheck() {
  740. if(_RegionCdArr.length > 0)
  741. {
  742. if(onlineIntStatusCheckId != null) clearTimeout(onlineIntStatusCheckId);
  743. onlineIntStatusCheckId = setTimeout('onlineIntStatusCheck()',5 * 1000);
  744. var url = 'getOnlineIntStatus.do';
  745. var param = 'regionCd='+_RegionCdArr;
  746. requestService(url, param, onlineIntStatusCheckCallback);
  747. }
  748. }
  749. function onlineIntStatusCheckCallback(data) {
  750. onlineIntStatusData = data;
  751. drawIntStatus(0,data);
  752. }
  753. //무선 제어기 상태 체크..
  754. function offlineIntStatusCheck() {
  755. if(_RegionCdArr.length > 0)
  756. {
  757. if(offlineIntStatusCheckId != null) clearTimeout(offlineIntStatusCheckId);
  758. offlineIntStatusCheckId = setTimeout('offlineIntStatusCheck()',5 * 1000);
  759. var url = 'getOfflineIntStatus.do';
  760. var param = 'regionCd='+_RegionCdArr;
  761. requestService(url, param, offlineIntStatusCheckCallback);
  762. }
  763. }
  764. function offlineIntStatusCheckCallback(data) {
  765. offlineIntStatusData = data;
  766. drawIntStatus(1,data);
  767. }
  768. function drawIntStatus(network,data) {
  769. var commState;
  770. const onlineCenterMap = new Map();
  771. if(network == 0)
  772. {
  773. for(var i = 0; i < onlineCenterStatusData.length; i++)
  774. {
  775. const {REGION_CD, COMM_STATE} = onlineCenterStatusData[i];
  776. onlineCenterMap.set(REGION_CD, COMM_STATE);
  777. //if(onlineCenterStatusData[i].REGION_CD == data[0].REGION_CD)
  778. //{
  779. // commState = onlineCenterStatusData[i].COMM_STATE;
  780. // break;
  781. //}
  782. }
  783. }
  784. else
  785. {
  786. commState = 0;
  787. }
  788. var regionCd;
  789. var siguguCd;
  790. var intNoArr;
  791. var commOnOffFlagArr;
  792. var commOnOffImg;
  793. for(var ii = 0; ii < data.length; ii++) {
  794. regionCd = data[ii].REGION_CD;
  795. sigunguCd = data[ii].SIGUNGU_CD;
  796. intNoArr = data[ii].INT_NO.split('|');
  797. commOnOffFlagArr = data[ii].COMM_ON_OFF_FLAG.split('|');
  798. $('.guIntTotal_' + network +'_'+regionCd+'_'+ sigunguCd).text(intNoArr.length);
  799. //sigunguCd = 41190 부천시 , 41430 의왕시, 41410 군포시
  800. //commState = 1;
  801. if (onlineCenterMap.size > 0) {
  802. commState = onlineCenterMap.get(regionCd);
  803. }
  804. //시군구 코드가 없으면 상태정보이미지가 없데이트가 안된다...
  805. if(commState == 0)
  806. {
  807. var guIntErrCnt = 0;
  808. for(var jj = 0; jj < intNoArr.length; jj++)
  809. {
  810. if(commOnOffFlagArr[jj] == 1)
  811. {
  812. guIntErrCnt++;
  813. commOnOffImg = 'background-image:url("images/intStatusOff.png");background-position:center center';
  814. }
  815. else
  816. {
  817. commOnOffImg = 'background-image:url("images/intStatusOn.png");background-position:center center';
  818. }
  819. $('#' + regionCd + '_' + network + '_' + intNoArr[jj] + ' .jstree-anchor .jstree-icon').attr('style',commOnOffImg);
  820. }
  821. $('.guIntErrCnt_' + network + '_' + regionCd +'_' + sigunguCd).text(guIntErrCnt);
  822. }
  823. else
  824. {
  825. for(var j = 0; j < intNoArr.length; j++)
  826. {
  827. commOnOffImg = 'background-image:url("images/intStatusOff.png");background-position:center center';
  828. $('#' + regionCd + '_' + network + '_' + intNoArr[j] + ' .jstree-anchor .jstree-icon').attr('style',commOnOffImg);
  829. }
  830. $('.guIntErrCnt_' + network + '_' + regionCd + '_' + sigunguCd).text(intNoArr.length);
  831. }
  832. }
  833. }
  834. //그룹제어기 상태체크..
  835. function emptyintGroupLineArr() {
  836. if(intGroupLineArr != null) {
  837. for(var ii = 0; ii < intGroupLineArr.length; ii++)
  838. {
  839. intGroupLineArr[ii].setMap(null);
  840. }
  841. intGroupLineArr = [];
  842. }
  843. }
  844. function emptyintGroupCircleArr() {
  845. if(intGroupCircleArr != null) {
  846. for(var ii = 0; ii < intGroupCircleArr.length; ii++)
  847. {
  848. intGroupCircleArr[ii].setMap(null);
  849. }
  850. intGroupCircleArr = [];
  851. }
  852. }
  853. function drawIntGroupLine(groupXCoord,groupYCoord)
  854. {
  855. emptyintGroupLineArr();
  856. emptyintGroupCircleArr();
  857. var groupLatLngArr = [];
  858. var groupCircleRadius = 10;
  859. level = parent.map.getLevel();
  860. //if(level == 0 || level == 1) groupCircleRadius = 10;
  861. //else if(level == 2) groupCircleRadius = 20;
  862. //else if(level == 3) groupCircleRadius = 25;
  863. //else if(level == 4) groupCircleRadius = 30;
  864. //else if(level == 5) groupCircleRadius = 80;
  865. //else if(level == 6) groupCircleRadius = 120;
  866. if(level < 3) groupCircleRadius = 30;
  867. else if(level === 3) groupCircleRadius = 35;
  868. else if(level === 4) groupCircleRadius = 50;
  869. else if(level === 5) groupCircleRadius = 80;
  870. for(var ii = 0; ii < groupXCoord.length; ii++)
  871. {
  872. groupLatLngArr.push(new parent.kakao.maps.LatLng(groupYCoord[ii], groupXCoord[ii]));
  873. var intGroupCircle = new parent.kakao.maps.Circle({
  874. center : new parent.kakao.maps.LatLng(groupYCoord[ii], groupXCoord[ii]),
  875. radius: groupCircleRadius,
  876. strokeWeight: 2,
  877. strokeColor: '#000000',
  878. strokeOpacity: 1,
  879. strokeStyle: 'solid',
  880. fillColor: 'yellow',
  881. fillOpacity:0.5,
  882. zIndex: 10
  883. });
  884. if (level < 6) {
  885. intGroupCircle.setMap(parent.map);
  886. }
  887. intGroupCircleArr.push(intGroupCircle);
  888. }
  889. var intGroupLine = new parent.kakao.maps.Polyline({
  890. path: groupLatLngArr,
  891. strokeWeight: 30,
  892. strokeColor: '#FF0000',
  893. strokeOpacity: 0.3,
  894. strokeStyle: 'solid',
  895. endArrow: false,
  896. zIndex: 10
  897. });
  898. //intGroupLine.setMap(parent.map);
  899. //intGroupLineArr.push(intGroupLine);
  900. }
  901. function getIntGroupCircle() {
  902. return intGroupCircleArr;
  903. }
  904. </script>
  905. </body>
  906. </html>