dev

src/main/java/com/its/op/entity/its/code/TbCmmnCd.java

@@ -29,7 +29,7 @@ public class TbCmmnCd implements Serializable {
 
     @ApiModelProperty("공통 분류 코드")  // N VARCHAR(5)
     @Id
-    @Column(name = "CMMN_CLSF_CD", nullable = false, length = 5)
+    @Column(name = "CMMN_CLSF_CD", nullable = false, length = 7)
     private String cmmnClsfCd;
 
     @ApiModelProperty("공통 코드 한글 명")  // Y VARCHAR(100)

src/main/java/com/its/op/entity/its/code/TbCmmnClsfCd.java

@@ -26,7 +26,7 @@ public class TbCmmnClsfCd implements Serializable {
 
     @ApiModelProperty("공통 분류 코드")  // N VARCHAR(5)
     @Id
-    @Column(name = "CMMN_CLSF_CD", nullable = false, length = 5)
+    @Column(name = "CMMN_CLSF_CD", nullable = false, length = 7)
     private String cmmnClsfCd;
 
     @ApiModelProperty("메시지 유형 코드")  // Y VARCHAR(7)

src/main/resources/static/application/op/00.main/main-func.js

@@ -9,12 +9,12 @@ let _webSocket = null;
 export let _cctvMap = new Map();
 export let _vmsMap = new Map();
 let _trafficMap = new Map();
-const _crdnMap  = new Map();
+const _crdnMap = new Map();
 window.$trafficMap = _trafficMap;
 let _timerFetchFcltStts = null; // 시설물 상태정보 요청 타이머
 let _timerFetchTraffic = null; // 교통정보 요청 타이머
 let _timerFetchIncdData = null; // 돌발정보 요청 타이머
-export const drctMap   = new Map();
+export const drctMap = new Map();
 drctMap.set(1, 0);
 drctMap.set(2, 90);
 drctMap.set(3, 180);
@@ -54,6 +54,7 @@ function onSocketReceived(AClientType, AMessage) {
     //console.log(`${currDt()}: onSocketReceived, ${AClientType}, `, AMessage);
     const command = AMessage.command;
     const jsonData = AMessage.data;
+    console.log(`${currDt()}: command: `, command);
     if (command === "itsFcltStts" || command === "bisFcltStts") {
         updateFcltStts(jsonData);
         if (command === "bisFcltStts") {
@@ -105,9 +106,9 @@ export function doMap() {
     // 지도객체 먼저 생성 하여야 함
     _mapManager = new TMapMngr("map", "tooltip");
     websocketConnect("op");
-    _mapManager.onMapMoveEndFunc  = onMapMoveEndFunc;     // 지도 이동/줌 변경 이벤트 반환
-    _mapManager.onMouseClickFunc  = onMouseClickFunc;     // 객체 마우스 클릭 이벤트 반환
-    _mapManager.onContextMenuFunc = onContextMenuFunc;    // 객체 컨텍스트 이벤트 반환
+    _mapManager.onMapMoveEndFunc = onMapMoveEndFunc; // 지도 이동/줌 변경 이벤트 반환
+    _mapManager.onMouseClickFunc = onMouseClickFunc; // 객체 마우스 클릭 이벤트 반환
+    _mapManager.onContextMenuFunc = onContextMenuFunc; // 객체 컨텍스트 이벤트 반환
     //_mapManager.onSelectObjFunc   = onSelectObjFunc;      // 객체 선택 이벤트 반환
     //_mapManager.onFcltDragEndFunc = onFcltDragEndFunc;    // 객체(시설물) 편집시 객체 이동후 좌표 반환
 
@@ -118,14 +119,14 @@ export function doMap() {
 }
 function onMapMoveEndFunc(AZoom, ACenterX, ACenterY, ALeft, ABottom, ARight, ATop) {
     console.log(`${currDt()}: onMapMoveEndFunc, ${AZoom}, ${ACenterX}, ${ACenterY}, ${ALeft}, ${ABottom}, ${ARight}, ${ATop}`);
-    $('.cctv-right-btn-click').remove();
-    $('.vms-right-btn-click').remove();
+    $(".cctv-right-btn-click").remove();
+    $(".vms-right-btn-click").remove();
 }
 function onMouseClickFunc(ALyrIdx, ALyrName, ANmbr, ACoordX, ACoordY, X, Y) {
     //console.log(`${currDt()}: onMouseClickFunc, ${ALyrIdx}, ${ALyrName}, ${ANmbr}, ${ACoordX}, ${ACoordY}, ${X}, ${Y}`);
     if (ALyrIdx === -1) {
-        $('.cctv-right-btn-click').remove();
-        $('.vms-right-btn-click').remove();
+        $(".cctv-right-btn-click").remove();
+        $(".vms-right-btn-click").remove();
     }
     // const obj = _mapManager.findLayerObject(ALyrIdx, ANmbr);
     // if (!obj) {
@@ -138,38 +139,36 @@ function onMouseClickFunc(ALyrIdx, ALyrName, ANmbr, ACoordX, ACoordY, X, Y) {
     //  else if (ALyrName === "BIT") {
     // }
 
-    let option = 'width = 580, height = 550, top = 200, left = 674, resizable=no, scrollbars=no';
+    let option = "width = 580, height = 550, top = 200, left = 674, resizable=no, scrollbars=no";
     if (ALyrIdx >= LayerIndex.Link1 && ALyrIdx <= LayerIndex.Link5) {
-        window.open('./detail-traffic-pop-up.html?id=' + encodeURIComponent(ANmbr) + '&type=link', '구간선택', option);
-    }
-    else if (ALyrIdx >= LayerIndex.Ifsc1 && ALyrIdx <= LayerIndex.Ifsc5) {
-        window.open('./detail-traffic-pop-up.html?id=' + encodeURIComponent(ANmbr) + '&type=ifsc', '구간선택', option);
-    }
-    else if (ALyrIdx >= LayerIndex.Road1 && ALyrIdx <= LayerIndex.Road5) {
-        window.open('./detail-traffic-pop-up.html?id=' + encodeURIComponent(ANmbr) + '&type=road', '구간선택', option);
+        window.open("./detail-traffic-pop-up.html?id=" + encodeURIComponent(ANmbr) + "&type=link", "구간선택", option);
+    } else if (ALyrIdx >= LayerIndex.Ifsc1 && ALyrIdx <= LayerIndex.Ifsc5) {
+        window.open("./detail-traffic-pop-up.html?id=" + encodeURIComponent(ANmbr) + "&type=ifsc", "구간선택", option);
+    } else if (ALyrIdx >= LayerIndex.Road1 && ALyrIdx <= LayerIndex.Road5) {
+        window.open("./detail-traffic-pop-up.html?id=" + encodeURIComponent(ANmbr) + "&type=road", "구간선택", option);
     }
 }
 
 function onContextMenuFunc(ALyrIdx, ALyrName, ANmbr, ACoordX, ACoordY, X, Y) {
     console.log(`${currDt()}: onContextMenuFunc, ${ALyrIdx}, ${ALyrName}, ${ANmbr}, ${ACoordX}, ${ACoordY}, ${X}, ${Y}`);
-    $('.cctv-right-btn-click').remove();
-    $('.vms-right-btn-click').remove();
+    $(".cctv-right-btn-click").remove();
+    $(".vms-right-btn-click").remove();
     //cctv 우클릭 이벤트
     if (ALyrIdx === LayerIndex.Cctv || ALyrIdx === LayerIndex.WCam || ALyrIdx === LayerIndex.CCam) {
         const cctvObj = _mapManager.findLayerObject(ALyrIdx, ANmbr);
         let type;
         switch (ALyrIdx) {
             case LayerIndex.Cctv:
-                type = 'CCTV';
+                type = "CCTV";
                 break;
             case LayerIndex.WCam:
-                type = '웹카메라';
+                type = "웹카메라";
                 break;
             case LayerIndex.CCam:
-                type = '교차로카메라';
+                type = "교차로카메라";
                 break;
         }
-        
+
         if (cctvObj) {
             let div = $(`<div class='cctv-right-btn-click'>
                             <div>
@@ -177,31 +176,34 @@ function onContextMenuFunc(ALyrIdx, ALyrName, ANmbr, ACoordX, ACoordY, X, Y) {
                                 <div>카메라 영상</div>
                             </div>
                         </div>`);
-            $('body').append(div);
-            
-            if ($('#drawer')[0].offsetWidth - X < div[0].offsetWidth){
-                div.css('left', $('#drawer')[0].offsetWidth - div[0].offsetWidth + 12);
-            } 
-            else {
-                div.css('left', X);
+            $("body").append(div);
+
+            if ($("#drawer")[0].offsetWidth - X < div[0].offsetWidth) {
+                div.css("left", $("#drawer")[0].offsetWidth - div[0].offsetWidth + 12);
+            } else {
+                div.css("left", X);
             }
 
-            if ($('#drawer')[0].offsetHeight - Y < div[0].offsetHeight){
-                div.css('top', $('#drawer')[0].offsetHeight - div[0].offsetHeight + 59);
-            } 
-            else {
-                div.css('top', Y);
+            if ($("#drawer")[0].offsetHeight - Y < div[0].offsetHeight) {
+                div.css("top", $("#drawer")[0].offsetHeight - div[0].offsetHeight + 59);
+            } else {
+                div.css("top", Y);
             }
-            
-            if (!_cctvMap.get(cctvObj.ID)){
+
+            if (!_cctvMap.get(cctvObj.ID)) {
                 _cctvMap.set(cctvObj.ID, new Map());
             }
 
-            $(div).children().eq(0).children().eq(1).on('click',function(e){
-                $('.cctv-right-btn-click').remove();
-                let src = cctvObj.strmHttpAddr;
-                camCtrl(_cctvMap, createVideoDiv, cctvObj, src, X, Y);
-            })
+            $(div)
+                .children()
+                .eq(0)
+                .children()
+                .eq(1)
+                .on("click", function (e) {
+                    $(".cctv-right-btn-click").remove();
+                    let src = cctvObj.strmHttpAddr;
+                    camCtrl(_cctvMap, createVideoDiv, cctvObj, src, X, Y);
+                });
         }
     }
     //vms 우클릭 이벤트
@@ -215,47 +217,55 @@ function onContextMenuFunc(ALyrIdx, ALyrName, ANmbr, ACoordX, ACoordY, X, Y) {
                                 <div>표출메시지</div>
                             </div>
                         </div>`);
-            $('body').append(div);
+            $("body").append(div);
 
-            if ($('#drawer')[0].offsetWidth - X < div[0].offsetWidth){
-                div.css('left', $('#drawer')[0].offsetWidth - div[0].offsetWidth + 12);
-            } 
-            else {
-                div.css('left', X);
+            if ($("#drawer")[0].offsetWidth - X < div[0].offsetWidth) {
+                div.css("left", $("#drawer")[0].offsetWidth - div[0].offsetWidth + 12);
+            } else {
+                div.css("left", X);
             }
 
-            if ($('#drawer')[0].offsetHeight - Y < div[0].offsetHeight){
-                div.css('top', $('#drawer')[0].offsetHeight - div[0].offsetHeight + 59);
-            } 
-            else {
-                div.css('top', Y);
+            if ($("#drawer")[0].offsetHeight - Y < div[0].offsetHeight) {
+                div.css("top", $("#drawer")[0].offsetHeight - div[0].offsetHeight + 59);
+            } else {
+                div.css("top", Y);
             }
 
-            if (!_cctvMap.get(vmsObj.ID)){
+            if (!_cctvMap.get(vmsObj.ID)) {
                 _cctvMap.set(vmsObj.ID, new Map());
             }
-            if (!_vmsMap.get(vmsObj.ID)){
+            if (!_vmsMap.get(vmsObj.ID)) {
                 _vmsMap.set(vmsObj.ID, new Map());
             }
-            
+
             // 카메라 영상 클릭 이벤트
-            $(div).children().eq(0).children().eq(1).on('click',function(){
-                $('.vms-right-btn-click').remove();
-                let src = vmsObj.strmHttpAddr;
-                camCtrl(_cctvMap, createVideoDiv, vmsObj, src, X, Y, true);
-            });
+            $(div)
+                .children()
+                .eq(0)
+                .children()
+                .eq(1)
+                .on("click", function () {
+                    $(".vms-right-btn-click").remove();
+                    let src = vmsObj.strmHttpAddr;
+                    camCtrl(_cctvMap, createVideoDiv, vmsObj, src, X, Y, true);
+                });
 
             //표출메시지 클릭 이벤트
-            $(div).children().eq(0).children().eq(2).on('click',function(){
-                    $('.vms-right-btn-click').remove();
-
-                    if(!_vmsMap.get(vmsObj.ID).get('div')){
-                        vmsMessageCtrl(vmsObj,X, Y);
+            $(div)
+                .children()
+                .eq(0)
+                .children()
+                .eq(2)
+                .on("click", function () {
+                    $(".vms-right-btn-click").remove();
+
+                    if (!_vmsMap.get(vmsObj.ID).get("div")) {
+                        vmsMessageCtrl(vmsObj, X, Y);
                     }
-            })
+                });
         }
     }
-}  
+}
 
 /**
  * 표출메시지 이벤트
@@ -263,12 +273,11 @@ function onContextMenuFunc(ALyrIdx, ALyrName, ANmbr, ACoordX, ACoordY, X, Y) {
  * @param {*} X 마우스 X 좌표
  * @param {*} Y 마우스 Y 좌표
  */
-export function vmsMessageCtrl(obj, X, Y){
+export function vmsMessageCtrl(obj, X, Y) {
     let vmsData = [];
     //vms 데이터 수신
-    getData('/api/vms/common/vms-form/dspl-prst', vmsData, {id:obj.NMBR});
-    if (vmsData[0]  && vmsData[0].length > 0) {
-        
+    getData("/api/vms/common/vms-form/dspl-prst", vmsData, { id: obj.NMBR });
+    if (vmsData[0] && vmsData[0].length > 0) {
         vmsData = vmsData[0];
         //vms 이미지 데이터
         let msgs = vmsData[0].msgs;
@@ -285,38 +294,42 @@ export function vmsMessageCtrl(obj, X, Y){
         let vmsLeft = X;
         let vmsTop = Y;
 
-        $('body').append(vmsDiv);
-        vmsDiv.children().eq(1).css('height', imgBoxHeight);
-        vmsDiv.children().eq(1).children().eq(0).css({height: imgBoxHeight, width: width - 20});
-        if ($('#drawer')[0].offsetWidth - X < width){
-            vmsLeft = $('#drawer')[0].offsetWidth - width + 12;
-        } 
-        if ($('#drawer')[0].offsetHeight - Y < height){
-            vmsTop = $('#drawer')[0].offsetHeight - height + 59;
+        $("body").append(vmsDiv);
+        vmsDiv.children().eq(1).css("height", imgBoxHeight);
+        vmsDiv
+            .children()
+            .eq(1)
+            .children()
+            .eq(0)
+            .css({ height: imgBoxHeight, width: width - 20 });
+        if ($("#drawer")[0].offsetWidth - X < width) {
+            vmsLeft = $("#drawer")[0].offsetWidth - width + 12;
+        }
+        if ($("#drawer")[0].offsetHeight - Y < height) {
+            vmsTop = $("#drawer")[0].offsetHeight - height + 59;
         }
 
-        vmsDiv.css({left:vmsLeft, top:vmsTop, height: height});
+        vmsDiv.css({ left: vmsLeft, top: vmsTop, height: height });
 
-        let imgPosition         = vmsDiv.children().eq(1).children().eq(0);
-        let phaseNumPosition    = vmsDiv.children().eq(2).children().eq(0);
+        let imgPosition = vmsDiv.children().eq(1).children().eq(0);
+        let phaseNumPosition = vmsDiv.children().eq(2).children().eq(0);
         let intervalNumPosition = vmsDiv.children().eq(2).children().eq(1);
-        let closePosition       = vmsDiv.children().eq(0).children().eq(0);
+        let closePosition = vmsDiv.children().eq(0).children().eq(0);
         let vmsInfo = _vmsMap.get(obj.ID);
-        vmsInfo.set('div', vmsDiv);
+        vmsInfo.set("div", vmsDiv);
         setVmsInterval(msgs, imgPosition, phaseNumPosition, intervalNumPosition, 0, obj.ID);
         //vmsInfo.set('intervalArr', intervalArr);
-        $('.vms-box').draggable({ containment: "body" });
+        $(".vms-box").draggable({ containment: "body" });
         //dragEvent(vmsDiv, 'vms-box');
-        
-        closePosition.on('click', function(){
-            clearTimeout(vmsInfo.get('interval'));
-            vmsInfo.get('div').remove();
-            vmsInfo.delete('div');
+
+        closePosition.on("click", function () {
+            clearTimeout(vmsInfo.get("interval"));
+            vmsInfo.get("div").remove();
+            vmsInfo.delete("div");
         });
-    }
-    else {
+    } else {
         //현재 시각
-        let now = '표출메시지가 없습니다.';
+        let now = "표출메시지가 없습니다.";
         //이미지 높이에 따른 박스 높이
         let height = 144;
         //이미지 높이
@@ -328,30 +341,35 @@ export function vmsMessageCtrl(obj, X, Y){
         let vmsLeft = X;
         let vmsTop = Y;
 
-        $('body').append(vmsDiv);
-        vmsDiv.children().eq(1).css('height', imgBoxHeight);
-        vmsDiv.children().eq(1).children().eq(0).css({height: imgBoxHeight, width: width - 20});
-        if ($('#drawer')[0].offsetWidth - X < width){
-            vmsLeft = $('#drawer')[0].offsetWidth - width + 12;
-        } 
+        $("body").append(vmsDiv);
+        vmsDiv.children().eq(1).css("height", imgBoxHeight);
+        vmsDiv
+            .children()
+            .eq(1)
+            .children()
+            .eq(0)
+            .css({ height: imgBoxHeight, width: width - 20 });
+        if ($("#drawer")[0].offsetWidth - X < width) {
+            vmsLeft = $("#drawer")[0].offsetWidth - width + 12;
+        }
 
-        if ($('#drawer')[0].offsetHeight - Y < height){
-            vmsTop = $('#drawer')[0].offsetHeight - height + 59;
+        if ($("#drawer")[0].offsetHeight - Y < height) {
+            vmsTop = $("#drawer")[0].offsetHeight - height + 59;
         }
 
-        vmsDiv.css({left:vmsLeft, top:vmsTop, width:width, height: height});
+        vmsDiv.css({ left: vmsLeft, top: vmsTop, width: width, height: height });
 
-        let imgPosition         = vmsDiv.children().eq(1).children().eq(0);
-        let closePosition       = vmsDiv.children().eq(0).children().eq(0);
-        imgPosition.css('background-color', 'black');
+        let imgPosition = vmsDiv.children().eq(1).children().eq(0);
+        let closePosition = vmsDiv.children().eq(0).children().eq(0);
+        imgPosition.css("background-color", "black");
         let vmsInfo = _vmsMap.get(obj.ID);
-        vmsInfo.set('div', vmsDiv);
+        vmsInfo.set("div", vmsDiv);
         //dragEvent(vmsDiv, 'vms-box');
-        $('.vms-box').draggable({ containment: "body" });
-        
-        closePosition.on('click', function(){
-            vmsInfo.get('div').remove();
-            vmsInfo.delete('div');
+        $(".vms-box").draggable({ containment: "body" });
+
+        closePosition.on("click", function () {
+            vmsInfo.get("div").remove();
+            vmsInfo.delete("div");
         });
     }
 }
@@ -363,28 +381,28 @@ export function vmsMessageCtrl(obj, X, Y){
  * @param {*} phase phase 번호 텍스트 위치
  * @param {*} num 카운트 텍스트 위치
  */
-export function setVmsInterval(data, position, phase, num, idx, id){
+export function setVmsInterval(data, position, phase, num, idx, id) {
     if (data[idx]) {
-        $(position).prop('src', 'data:image/png;base64,'+ data[idx].vms_dspl_msg_imag);
+        $(position).prop("src", "data:image/png;base64," + data[idx].vms_dspl_msg_imag);
         let time = data[idx].dspl_hh;
         let intervalNum = data[idx].dspl_hh;
         idx++;
         $(num).text(intervalNum--);
-        $(phase).text(idx + '/' + data.length);
-        let timeInterval = setInterval(()=>{
+        $(phase).text(idx + "/" + data.length);
+        let timeInterval = setInterval(() => {
             $(num).text(intervalNum--);
-            if(intervalNum === 0){
+            if (intervalNum === 0) {
                 clearInterval(timeInterval);
             }
         }, 1000);
-        if(idx === data.length){
+        if (idx === data.length) {
             idx = 0;
         }
         let interval = setTimeout(() => {
             window.clearTimeout(interval);
             setVmsInterval(data, position, phase, num, idx, id);
         }, time * 1000);
-        _vmsMap.get(id).set('interval', interval);
+        _vmsMap.get(id).set("interval", interval);
     }
 }
 
@@ -396,35 +414,49 @@ export function setVmsInterval(data, position, phase, num, idx, id){
  * @param {*} X X좌표
  * @param {*} Y Y좌표
  */
- export function camCtrl(map, method, obj, src, X, Y, vmsTrue){
-        let cctvBox = method(obj);
-        $("body").append(cctvBox);
-        let cctvLeft = X;
-        let cctvTop  = Y;
-        if ($('#drawer')[0].offsetWidth - X < cctvBox[0].offsetWidth){
-            cctvLeft = $('#drawer')[0].offsetWidth - cctvBox[0].offsetWidth + 12;
-        } 
-
-        if ($('#drawer')[0].offsetHeight - Y < cctvBox[0].offsetHeight){
-            cctvTop = $('#drawer')[0].offsetHeight - cctvBox[0].offsetHeight + 59;
-        }
-        cctvBox.css({left:cctvLeft, top:cctvTop});
+export function camCtrl(map, method, obj, src, X, Y, vmsTrue) {
+    let cctvBox = method(obj);
+    $("body").append(cctvBox);
+    let cctvLeft = X;
+    let cctvTop = Y;
+    if ($("#drawer")[0].offsetWidth - X < cctvBox[0].offsetWidth) {
+        cctvLeft = $("#drawer")[0].offsetWidth - cctvBox[0].offsetWidth + 12;
+    }
 
-        let cctvInfo = map.get(obj.ID);
-        cctvInfo.set('div', cctvBox);
-        let player = webRtcConnector(obj, $('#' + obj.ID).children().eq(1).children().eq(0), 'video' + obj.ID, vmsTrue);
-        if (player) {
-            cctvInfo.set('video', player);
-        }
-        cctvBox.children().eq(0).children().eq(0).on('click',function(){
+    if ($("#drawer")[0].offsetHeight - Y < cctvBox[0].offsetHeight) {
+        cctvTop = $("#drawer")[0].offsetHeight - cctvBox[0].offsetHeight + 59;
+    }
+    cctvBox.css({ left: cctvLeft, top: cctvTop });
+
+    let cctvInfo = map.get(obj.ID);
+    cctvInfo.set("div", cctvBox);
+    let player = webRtcConnector(
+        obj,
+        $("#" + obj.ID)
+            .children()
+            .eq(1)
+            .children()
+            .eq(0),
+        "video" + obj.ID,
+        vmsTrue
+    );
+    if (player) {
+        cctvInfo.set("video", player);
+    }
+    cctvBox
+        .children()
+        .eq(0)
+        .children()
+        .eq(0)
+        .on("click", function () {
             cctvBox.remove();
-            if (cctvInfo.get('video')) {
-                cctvInfo.get('video').Stop();
+            if (cctvInfo.get("video")) {
+                cctvInfo.get("video").Stop();
             }
         });
 
-        //dragEvent(cctvBox, 'cctv-box');
-        $('.cctv-box').draggable({ containment: "body" });
+    //dragEvent(cctvBox, 'cctv-box');
+    $(".cctv-box").draggable({ containment: "body" });
 }
 
 /**
@@ -432,7 +464,7 @@ export function setVmsInterval(data, position, phase, num, idx, id){
  * @param {*} obj 데이터 객체
  * @returns 생성 div
  */
- export function createVideoDiv(obj){
+export function createVideoDiv(obj) {
     let div = $(`<div class="cctv-box dx-nav-item" id=${obj.ID} draggable="true">
         <div class="b2 dx-theme-border-color">${obj.ID} - ${obj.NAME} <span class="b0 dx-theme-border-color" title="닫기">X</span></div>
         <div>
@@ -442,7 +474,7 @@ export function setVmsInterval(data, position, phase, num, idx, id){
     return div;
 }
 
-function webRtcConnector(obj, videoBox, id, vmsTrue){
+function webRtcConnector(obj, videoBox, id, vmsTrue) {
     //let { web_rtc_svr_ip, web_rtc_svr_port, web_rtc_id } = obj;
     let { rtc_svr_ip, rtc_svr_port, rtc_id } = obj;
     if (vmsTrue) {
@@ -452,13 +484,14 @@ function webRtcConnector(obj, videoBox, id, vmsTrue){
     }
     let isNull = nullArrChecker([rtc_svr_ip, rtc_svr_port, rtc_id]);
     if (!isNull) {
-        videoBox.append($(`<video id="${id}" class="cctv-body" style="width:100%; height:100%;" autoplay playsinline muted></video>`))
+        videoBox.append($(`<video id="${id}" class="cctv-body" style="width:100%; height:100%;" autoplay playsinline muted></video>`));
         let video = new HiVeWebRtcPlayer(id, rtc_svr_ip, rtc_svr_port, rtc_id);
         video.Play();
         return video;
     } else {
-        videoBox.css('background-color', '');
-        videoBox.append($(`<div class="empty-body" id="${id}">
+        videoBox.css("background-color", "");
+        videoBox.append(
+            $(`<div class="empty-body" id="${id}">
                             <h5>영상 스트리밍 정보를 확인해주세요.</h5> 
                             <br>
                             <div class="error-content">
@@ -490,7 +523,8 @@ function webRtcConnector(obj, videoBox, id, vmsTrue){
                                     </div>
                                 </div>
                             </div>
-                        </div>`))
+                        </div>`)
+        );
     }
 }
 /**
@@ -499,8 +533,8 @@ function webRtcConnector(obj, videoBox, id, vmsTrue){
  * @param {*} now 현재 시각
  * @returns 생성 div
  */
- export function createMessageDiv(obj, now, cmncSttsDesc){
-    const procClass = cmncSttsDesc === "통신두절" || !cmncSttsDesc ? 't-red' : '';
+export function createMessageDiv(obj, now, cmncSttsDesc) {
+    const procClass = cmncSttsDesc === "통신두절" || !cmncSttsDesc ? "t-red" : "";
     let div = $(`<div draggable="true" class="vms-box dx-nav-item">
                     <div class="b2 dx-theme-border-color">${obj.ID} - ${obj.NAME} &nbsp;&nbsp;<span class="b0 dx-theme-border-color" title="닫기">X</span></div>
                     <div>
@@ -512,31 +546,31 @@ function webRtcConnector(obj, videoBox, id, vmsTrue){
 }
 
 /**
- * 드래그 이벤트 
+ * 드래그 이벤트
  * @param {*} position 드래그 상자 위치
  */
-export function dragEvent(position, classNm){
-    $(position).on('mousedown', function(){
-        for (let ii = 0; ii < $('.' + classNm).length; ii++ ){
-            $($('.' + classNm)[ii]).css('z-index', '100');
-        };
-        $(position).css('z-index', '101');
-    })
-    
-    position.on("dragstart", function(ev){
+export function dragEvent(position, classNm) {
+    $(position).on("mousedown", function () {
+        for (let ii = 0; ii < $("." + classNm).length; ii++) {
+            $($("." + classNm)[ii]).css("z-index", "100");
+        }
+        $(position).css("z-index", "101");
+    });
+
+    position.on("dragstart", function (ev) {
         let offsetX = ev.offsetX;
         let offsetY = ev.offsetY;
-        $('#drawer').off('drop');
-        $('#drawer').off('dragover');
-        
-        $('#drawer').on('dragover', function(ev){
+        $("#drawer").off("drop");
+        $("#drawer").off("dragover");
+
+        $("#drawer").on("dragover", function (ev) {
             ev.preventDefault();
-        })
-        
-        $('#drawer').on('drop',function(ev){
+        });
+
+        $("#drawer").on("drop", function (ev) {
             ev.preventDefault();
-            $(position).css({left : ev.clientX - offsetX, top : ev.clientY - offsetY});
-        })
+            $(position).css({ left: ev.clientX - offsetX, top: ev.clientY - offsetY });
+        });
     });
 }
 
@@ -570,7 +604,7 @@ async function fetchBaseData() {
     const link = apiGet("/api/database/link/list"); // 링크정보 요청
     const ifsc = apiGet("/api/database/ifsc/list"); // 링크정보 요청
     const road = apiGet("/api/database/road/list"); // 도로정보 요청
-   
+
     Promise.all([node, link, ifsc, road])
         .then((results) => Promise.all(results.map((r) => r.json())))
         .then((values) => {
@@ -579,17 +613,17 @@ async function fetchBaseData() {
             _mapManager.makeTrafficObject(LayerType.LINK, values[1]);
             _mapManager.makeTrafficObject(LayerType.IFSC, values[2]);
             _mapManager.makeTrafficObject(LayerType.ROAD, values[3]);
-            _trafficMap.set('node', values[0]);
-            _trafficMap.set('link', values[1]);
-            _trafficMap.set('ifsc', values[2]);
-            _trafficMap.set('road', values[3]);
+            _trafficMap.set("node", values[0]);
+            _trafficMap.set("link", values[1]);
+            _trafficMap.set("ifsc", values[2]);
+            _trafficMap.set("road", values[3]);
             fetchTraffic();
             fetchBaseVrtx();
         })
         .catch((err) => {
             console.error(`${currDt()}: Error in fetchBaseData ${err}`);
-        })
-        //.finally(() => console.timeEnd("***** fetchBaseData: "));
+        });
+    //.finally(() => console.timeEnd("***** fetchBaseData: "));
 }
 
 async function fetchTraffic() {
@@ -597,7 +631,7 @@ async function fetchTraffic() {
     const link = apiGet("/api/manage/main/traffic/link"); // 링크소통정보 요청
     const ifsc = apiGet("/api/manage/main/traffic/ifsc"); // 링크소통정보 요청
     const road = apiGet("/api/manage/main/traffic/road"); // 도로소통정보 요청
-    
+
     // 결측구간, 반복정체구간은 async 로 조회한다.
     requestGet("/api/manage/main/syst-opr/miss-link-traf", recvMissLinkTraf);
     requestGet("/api/manage/main/syst-opr/repeat-congest", recvRepeatCongest);
@@ -611,8 +645,8 @@ async function fetchTraffic() {
         })
         .catch((err) => {
             console.error(`Error in fetchTraffic ${err}`);
-        })
-        //.finally(() => console.timeEnd("***** fetchTraffic: "));
+        });
+    //.finally(() => console.timeEnd("***** fetchTraffic: "));
 
     // 요청시간을 기준으로 교통정보 요청 타이머 리셋
     requestFetchTraffic();
@@ -634,9 +668,9 @@ async function fetchBaseVrtx() {
     _mapManager.setLayerVisible(LayerIndex.Ifsc2, 15);
     _mapManager.setLayerVisible(LayerIndex.Road1, 10);
     _mapManager.setLayerVisible(LayerIndex.Road2, 11, 12, 13);
-//feature.setGeometry(bufferedFeature.getGeometry());
+    //feature.setGeometry(bufferedFeature.getGeometry());
 
-//console.error("***** fetchBaseVrtx_1: ");
+    //console.error("***** fetchBaseVrtx_1: ");
     //const link1 = apiGet("/api/manage/main/map/vrtx/link/1"); // 버텍스정보 요청(1 => 16)
     const link2 = apiGet("/api/manage/main/map/vrtx/link/2"); // 버텍스정보 요청(2 => 17,18,19)
     //const ifsc3 = apiGet("/api/manage/main/map/vrtx/ifsc/3"); // 버텍스정보 요청(3 => 15)
@@ -665,17 +699,17 @@ async function fetchBaseVrtx() {
             //console.error("***** fetchBaseVrtx_7: ");
             _mapManager.makeLayer(LayerIndex.Road2, values[2]);
             //console.error("***** fetchBaseVrtx_8: ");
-            _trafficMap.set('link1', values[0]);
+            _trafficMap.set("link1", values[0]);
             //console.error("***** fetchBaseVrtx_9: ");
-            _trafficMap.set('link2', values[0]);
+            _trafficMap.set("link2", values[0]);
             //console.error("***** fetchBaseVrtx_10: ");
-            _trafficMap.set('ifsc1', values[1]);
+            _trafficMap.set("ifsc1", values[1]);
             //console.error("***** fetchBaseVrtx_11: ");
-            _trafficMap.set('ifsc2', values[1]);
+            _trafficMap.set("ifsc2", values[1]);
             //console.error("***** fetchBaseVrtx_12: ");
-            _trafficMap.set('road1', values[2]);
+            _trafficMap.set("road1", values[2]);
             //console.error("***** fetchBaseVrtx_13: ");
-            _trafficMap.set('road2', values[2]);
+            _trafficMap.set("road2", values[2]);
             //console.error("***** fetchBaseVrtx_14: ");
             fetchFcltStts();
         })
@@ -683,15 +717,15 @@ async function fetchBaseVrtx() {
             console.error(`Error in fetchBaseVrtx ${err}`);
         })
         .finally(() => {
-            $('.loading-box').css('display','none');
+            $(".loading-box").css("display", "none");
         });
 }
 
 async function fetchFcltData() {
     //console.time("***** fetchFcltData: ");
     const cctv = apiGet("/api/cctv/common/cctv-list"); // CCTV
-    const vms  = apiGet("/api/vms/common/vms-list"); // VMS
-    const vds  = apiGet("/api/vds/common/vds-list"); // VDS
+    const vms = apiGet("/api/vms/common/vms-list"); // VMS
+    const vds = apiGet("/api/vds/common/vds-list"); // VDS
     const dsrc = apiGet("/api/rse/tb_rse_ctlr"); // RSE
     const sig = apiGet("/api/scrs/tb_sc_sgnl_ctlr"); // 신호제어기(SIG)
     const ccam = apiGet("/api/scrs/tb_sc_ixr_cmra_mngm/list"); // 교차로 카메라
@@ -710,20 +744,20 @@ async function fetchFcltData() {
             _mapManager.makeLayer(LayerIndex.Dsrc, values[3]);
             _mapManager.makeLayer(LayerIndex.Sig, values[4]);
             _mapManager.makeLayer(LayerIndex.WCam, values[6]);
-            values[5].map((obj)=>{
+            values[5].map((obj) => {
                 let deg = drctMap.get(obj.drct_dvsn_cd);
                 const crdn = getDestinationPoint(obj.cmra_y_crdn, obj.cmra_x_crdn, deg, 25);
                 obj.cmra_y_crdn = crdn[1];
                 obj.cmra_x_crdn = crdn[0];
-                _crdnMap.set(obj.cmra_id, [obj.cmra_x_crdn, obj.cmra_y_crdn]); 
+                _crdnMap.set(obj.cmra_id, [obj.cmra_x_crdn, obj.cmra_y_crdn]);
             });
             _mapManager.makeLayer(LayerIndex.CCam, values[5]);
             fetchFcltStts();
         })
         .catch((err) => {
             console.error(`Error in fetchFcltData ${err}`);
-        })
-        //.finally(() => console.timeEnd("***** fetchFcltData: "));
+        });
+    //.finally(() => console.timeEnd("***** fetchFcltData: "));
 }
 // 시설물 상태정보 요청(타이머 또는 웹소켓에 의해 실행됨)
 async function fetchFcltStts() {
@@ -739,17 +773,17 @@ async function fetchFcltStts() {
             //console.log(`${currDt()}: FcltStts, ITS(${values[0].fclt_list.length}))`);
             //console.log(`${currDt()}: FcltStts, ITS(${values[0].fclt_list.length}), BIT(${values[1].fclt_list.length})`);
             if (values[0] && values[0].fclt_list && values[0].fclt_list.length > 0) {
-                values[0].fclt_list.map((item)=>{
-                    if (item.fclt_type === 'CCAM') {
-                        item.fclt_objs.map((obj)=>{
+                values[0].fclt_list.map((item) => {
+                    if (item.fclt_type === "CCAM") {
+                        item.fclt_objs.map((obj) => {
                             let crdn = _crdnMap.get(obj.fclt_id);
                             if (crdn) {
                                 obj.x_crdn = crdn[0];
                                 obj.y_crdn = crdn[1];
                             }
-                        })
+                        });
                     }
-                })
+                });
             }
             updateFcltStts(values[0]);
             //updateFcltStts(values[1]);
@@ -760,8 +794,8 @@ async function fetchFcltStts() {
         })
         .catch((err) => {
             console.error(`Error in fetchFcltStts ${err}`);
-        })
-        //.finally(() => console.timeEnd("***** fetchFcltStts: "));
+        });
+    //.finally(() => console.timeEnd("***** fetchFcltStts: "));
 
     // 요청시간을 기준으로 상태정보 요청 타이머 리셋
     requestFetchFcltStts();
@@ -786,15 +820,12 @@ function updateFcltStts(jsonData) {
         } else if (el.fclt_type === "DSRC") {
             lyrInfo = _mapManager.getLayer(LayerIndex.Dsrc);
             toNumber = true;
-        } 
-        else if (el.fclt_type === "SIG") {
+        } else if (el.fclt_type === "SIG") {
             lyrInfo = _mapManager.getLayer(LayerIndex.Sig);
             toNumber = true;
-        }
-        else if (el.fclt_type === "CCAM") {
+        } else if (el.fclt_type === "CCAM") {
             lyrInfo = _mapManager.getLayer(LayerIndex.CCam);
-        }
-        else if (el.fclt_type === "WCAM") {
+        } else if (el.fclt_type === "WCAM") {
             lyrInfo = _mapManager.getLayer(LayerIndex.WCam);
             toNumber = true;
         }
@@ -808,7 +839,6 @@ function updateFcltStts(jsonData) {
                 const fclt = lyrInfo.findObject(toNumber ? Number(obj.fclt_nmbr) : obj.fclt_nmbr);
                 if (fclt) {
                     fclt.updateStts(obj.stts_cd, obj.updt_dt, obj.fclt_info1, obj.fclt_info2);
-
                 } else {
                     console.warn(`fetchFcltStts: Not Found Object, ${obj.fclt_type}, ${obj.fclt_nmbr}, ${obj.fclt_id}`);
                 }
@@ -836,8 +866,8 @@ export async function fetchUnitStts() {
         })
         .catch((err) => {
             console.error(`Error in fetchUnitStts ${err}`);
-        })
-        //.finally(() => console.timeEnd("***** fetchUnitStts: "));
+        });
+    //.finally(() => console.timeEnd("***** fetchUnitStts: "));
 
     // 요청시간을 기준으로 상태정보 요청 타이머 리셋
     requestFetchUnitStts();
@@ -1132,27 +1162,24 @@ function recvParkInfo(AJsonData) {
 //     stts.error = stts.total - stts.normal;
 //     console.log(`${currDt()} recvBitSttsInfo: ${AJsonData.length} EA.`);
 
-    // 시설물 상태정보 요청 타이머 설정
-    //_timerLoadingFcltStts = window.setTimeout(function() {
-    //  loadingFcltStts();
-    //}, (60 * 1000));
+// 시설물 상태정보 요청 타이머 설정
+//_timerLoadingFcltStts = window.setTimeout(function() {
+//  loadingFcltStts();
+//}, (60 * 1000));
 //     return stts;
 // }
 
-
 window.selectLink = function selectLink(linkId) {
     const map = _mapManager.getInfo();
     let lyrIdx = LayerIndex.Link2;
     let zoom = map.zoom;
     if (map.zoom == 16) {
         lyrIdx = LayerIndex.Link1;
-    }
-    else if (map.zoom >= 17) {
+    } else if (map.zoom >= 17) {
         lyrIdx = LayerIndex.Link2;
-    }
-    else {
+    } else {
         zoom = 17;
         lyrIdx = LayerIndex.Link2;
     }
     _mapManager.selectLayerObject(lyrIdx, linkId, zoom);
-}
+};

src/main/resources/static/js/websocket/websocket.js

@@ -46,7 +46,7 @@ export class TWebSocket {
 
         this.sockJs.onmessage = (payload) => {
             const recvMessage = JSON.parse(payload.data);
-            console.log(`${this.clientType}: Websocket onmessage, `, recvMessage);
+            //console.log(`${this.clientType}: Websocket onmessage, `, recvMessage);
             this.recvFunc.forEach((func) => {
                 if (func) {
                     func(this.clientType, recvMessage);