maintenance 20221114

src/main/resources/static/application/facility/main/main-func.js

@@ -1,7 +1,7 @@
 import { currDt } from "/js/utils/common.js";
 import { requestGet, apiGet } from "/js/utils/restApi.js";
 import { TWebSocket } from "/js/websocket/websocket.js";
-import { _errorSwitch } from "./main.js";
+import { _errorSwitch, _selectedFcltList, fetchFcltCommInfo} from "./main.js";
 let _webSocket = null; // websocket
 
 let _timerFetchFcltStts = null; // 시설물 상태정보 요청 타이머
@@ -59,7 +59,7 @@ export async function fetchFcltStts() {
 
     const its = apiGet("/api/common/stts/total"); // ITS 상태정보 요청
     const bit = apiGet("/api/bis/stts/bit/total"); // BIT 상태정보 요청
-
+    
     Promise.all([its, bit])
         .then((results) => Promise.all(results.map((r) => r.json())))
         .then((values) => {
@@ -67,6 +67,9 @@ export async function fetchFcltStts() {
             _fcltData = [values[0], values[1]];
             updateFcltStts(values[0]);
             updateFcltStts(values[1]);
+            if (_selectedFcltList) {
+                fetchFcltCommInfo(_selectedFcltList);
+            }
         })
         .catch((err) => {
             //console.error(`Error in fetchFcltStts ${err}`);
@@ -78,6 +81,25 @@ export async function fetchFcltStts() {
     // 요청시간을 기준으로 상태정보 요청 타이머 리셋
     requestFetchFcltStts();
 }
+
+function updateFcltFailListData(jsonData, facilityType){
+    _fetchFcltCommInfoArr = jsonData;
+    
+    let totalCnt = jsonData.length;
+    let commErrCnt = 0;
+    jsonData.forEach((obj, idx) => {
+        if (obj.comm_cd.slice(-1) !== "0") {
+            commErrCnt++;
+        }
+    });
+
+    const currentPage = 1;
+    const totalPage = Math.ceil(totalCnt/_pagePerData);
+    $(".footer_disNumBox").html(commErrCnt);
+    // $(".fotter_page").html(currentPage + '  /  '+ totalPage);
+
+    displayFcltCommInfo(facilityType, 0, 1, totalPage);
+}
 export function updateFcltStts(jsonData) {
     jsonData.fclt_list.forEach((el) => {
         setHtml("." + el.fclt_type + "_TOTAL", el.total_cnt);

src/main/resources/static/application/facility/main/main.css

@@ -615,9 +615,9 @@ img{
 .BITDisabilityList {
     margin: 0px auto;
     position: relative;
-    top: 10px;
+    top: 5px;
     width: 1870px;
-    height: calc(100% - 35px);
+    height: calc(100% - 30px);
 }
 .CCTVDisabilityListValues,
 .VMSDisabilityListValues,
@@ -673,6 +673,7 @@ img{
     line-height: 40px;
     display: grid;
     grid-template-columns: 150px 100px 485px 100px 200px 100px 410px 150px 150px;
+    user-select: none;
 }
 .footer_disNum{
     position: relative;
@@ -683,6 +684,7 @@ img{
     font-size: 17px;
     font-weight: bold;
     width: 150px;
+    user-select: none;
 }
 .footer_disNumBox{
     position: relative;
@@ -697,6 +699,7 @@ img{
     width: 150px;
     height: 30px;
     line-height: 30px;
+    user-select: none;
 }
 .footer_previous{
     visibility: hidden;
@@ -709,6 +712,7 @@ img{
     font-weight: bold;
     width: 80px;
     height: 30px;
+    user-select: none;
 }
 .footer_previous:hover{
     cursor: pointer;
@@ -753,6 +757,7 @@ img{
     height: 30px;
     width: 199px;
     line-height: 30px;
+    user-select: none;
 }
 .footer_next{
     position: relative;
@@ -764,6 +769,7 @@ img{
     font-weight: bold;
     width: 80px;
     height: 30px;
+    user-select: none;
 }
 .footer_next:hover{
     cursor: pointer;
@@ -811,6 +817,7 @@ img{
     width: 140px;
     height: 30px;
     line-height: 30px;
+    user-select: none;
 }
 .footer_excel:hover{
     cursor: pointer;
@@ -836,6 +843,7 @@ img{
     width: 140px;
     height: 30px;
     line-height: 30px;
+    user-select: none;
 }
 .footer_refresh:hover{
     cursor: pointer;
@@ -858,3 +866,25 @@ img{
 .blue{
     color: #4da5e0;
 }
+
+.ctlr_id,
+.ctlr_nmbr,
+.ctlr_nm,
+.comm_desc,
+.comm_err_cnt,
+.col_desc,
+.localno,
+.updt_dt{
+    cursor: pointer;
+}
+
+.ctlr_id:hover,
+.ctlr_nmbr:hover,
+.ctlr_nm:hover,
+.comm_desc:hover,
+.comm_err_cnt:hover,
+.col_desc:hover,
+.localno:hover,
+.updt_dt:hover{
+    color: #9dafe0 !important;
+}

src/main/resources/static/application/facility/main/main.html

@@ -216,9 +216,9 @@
                 <div class="tag4-1 bassWordColor" style="width: 435px">>ITS 프로세스</div>
                 <div class="tag4-1 bassWordColor" style="width: 690px">>BIS 프로세스</div>
                 <div class="tag4-1 bassWordColor" style="margin-left: auto; margin-right: 15px;">
-                    정상 <img src="/images/application_facility/stts0.png" alt="blue"/>&nbsp;&nbsp; 
-                    장애 <img src="/images/application_facility/stts1.png" alt="red" />&nbsp;&nbsp;
-                    알수없음 <img class="grey" src="/images/application_facility/stts2.png" alt="gray"/>
+                    정상&nbsp;<img src="/images/application_facility/stts0.png" alt="blue"/>&nbsp;&nbsp; 
+                    장애&nbsp;<img src="/images/application_facility/stts1.png" alt="red" />&nbsp;&nbsp;
+                    알수없음&nbsp;<img class="grey" src="/images/application_facility/stts2.png" alt="gray"/>
                 </div>
                 <div class="dbManu">
                     <div class="fr">
@@ -651,12 +651,12 @@
                     <div class="VMSDisabilityListValues">
                         <table>
                             <tr>
-                                <td class = "tableColor" width="200">VMS ID</td>
-                                <td class = "tableColor" width="200">관리번호</td>
-                                <td class = "tableColor" width="500">설치위치</td>
-                                <td class = "tableColor" width="200">통신 상태</td>
-                                <td class = "tableColor" width="200">장애횟수</td>
-                                <td class = "tableColor" width="200">장애일시</td>
+                                <td class = "tableColor VMS ctlr_id" width="200">VMS ID</td>
+                                <td class = "tableColor VMS ctlr_nmbr" width="200">관리번호</td>
+                                <td class = "tableColor VMS ctlr_nm" width="500">설치위치</td>
+                                <td class = "tableColor VMS comm_desc" width="200">통신 상태</td>
+                                <td class = "tableColor VMS comm_err_cnt" width="200">장애횟수</td>
+                                <td class = "tableColor VMS updt_dt" width="200">장애일시</td>
                             </tr>
                         </table>
                         <table class="VMSDisabilityListValuesInsert "></table>
@@ -696,12 +696,12 @@
                     <div class="CCTVDisabilityListValues">
                         <table>
                             <tr>
-                                <td class = "tableColor" width="200">CCTV ID</td>
-                                <td class = "tableColor" width="200">관리번호</td>
-                                <td class = "tableColor" width="500">설치위치</td>
-                                <td class = "tableColor" width="200">통신 상태</td>
-                                <td class = "tableColor" width="200">장애횟수</td>
-                                <td class = "tableColor" width="200">장애일시</td>
+                                <td class = "tableColor CCTV ctlr_id" width="200">CCTV ID</td>
+                                <td class = "tableColor CCTV ctlr_nmbr" width="200">관리번호</td>
+                                <td class = "tableColor CCTV ctlr_nm" width="500">설치위치</td>
+                                <td class = "tableColor CCTV comm_desc" width="200">통신 상태</td>
+                                <td class = "tableColor CCTV comm_err_cnt" width="200">장애횟수</td>
+                                <td class = "tableColor CCTV updt_dt" width="200">장애일시</td>
                             </tr>
                         </table>
                         <table class="CCTVDisabilityListValuesInsert"></table>
@@ -741,13 +741,13 @@
                     <div class="VDSDisabilityListValues">
                         <table>
                             <tr>
-                                <td class = "tableColor" width="200">VDS ID</td>
-                                <td class = "tableColor" width="200">관리번호</td>
-                                <td class = "tableColor" width="500">설치위치</td>
-                                <td class = "tableColor" width="200">통신 상태</td>
-                                <td class = "tableColor" width="200">수집 장애</td>
-                                <td class = "tableColor" width="200">장애횟수</td>
-                                <td class = "tableColor" width="200">장애일시</td>
+                                <td class = "tableColor VDS ctlr_id" width="200">VDS ID</td>
+                                <td class = "tableColor VDS ctlr_nmbr" width="200">관리번호</td>
+                                <td class = "tableColor VDS ctlr_nm" width="500">설치위치</td>
+                                <td class = "tableColor VDS comm_desc" width="200">통신 상태</td>
+                                <td class = "tableColor VDS col_desc" width="200">수집 장애</td>
+                                <td class = "tableColor VDS comm_err_cnt" width="200">장애횟수</td>
+                                <td class = "tableColor VDS updt_dt" width="200">장애일시</td>
                             </tr>
                         </table>
                         <table class="VDSDisabilityListValuesInsert"></table>
@@ -788,10 +788,10 @@
                     <div class="RSEDisabilityListValues">
                         <table>
                             <tr>
-                                <td class = "tableColor" width="400">RSE ID</td>
-                                <td class = "tableColor" width="500">설치위치</td>
-                                <td class = "tableColor" width="300">통신 상태</td>
-                                <td class = "tableColor" width="300">장애일시</td>
+                                <td class = "tableColor RSE ctlr_id" width="400">RSE ID</td>
+                                <td class = "tableColor RSE ctlr_nm" width="500">설치위치</td>
+                                <td class = "tableColor RSE comm_desc" width="300">통신 상태</td>
+                                <td class = "tableColor RSE updt_dt" width="300">장애일시</td>
                             </tr>
                         </table>
                         <table class="RSEDisabilityListValuesInsert"></table>
@@ -829,12 +829,12 @@
                     <div class="BITDisabilityListValues">
                         <table>
                             <tr>
-                                <td class = "tableColor" width="200">BIT ID</td>
-                                <td class = "tableColor" width="200">Mobile ID</td>
-                                <td class = "tableColor" width="500">설치위치</td>
-                                <td class = "tableColor" width="200">통신 상태</td>
-                                <td class = "tableColor" width="200">장애횟수</td>
-                                <td class = "tableColor" width="200">장애일시</td>
+                                <td class = "tableColor BIT ctlr_id" width="200">BIT ID</td>
+                                <td class = "tableColor BIT localno" width="200">Mobile ID</td>
+                                <td class = "tableColor BIT ctlr_nm" width="500">설치위치</td>
+                                <td class = "tableColor BIT comm_desc" width="200">통신 상태</td>
+                                <td class = "tableColor BIT comm_err_cnt" width="200">장애횟수</td>
+                                <td class = "tableColor BIT updt_dt" width="200">장애일시</td>
                             </tr>
                         </table>
                         <table class="BITDisabilityListValuesInsert"></table>

src/main/resources/static/application/facility/main/main.js

@@ -6,9 +6,52 @@ let _fetchFcltCommInfoArr = []; // 시설물 통신 정보 조회 저장 버퍼
 export let _errorSwitch   = false;
 let _fcltExcelTitle       = null;
 const _fcltArr            = ["VMS","CCTV","VDS","BIT"];
-const _commonColWidth     = [{wpx: 80},{wpx: 80},{wpx: 300},{wpx: 80},{wpx: 80},{wpx: 100}];
-const _vdsColWidth        = [{wpx: 80},{wpx: 80},{wpx: 300},{wpx: 80},{wpx: 80},{wpx: 80},{wpx: 100}];
+const _commonColWidth     = [{wpx: 80},{wpx: 80},{wpx: 300},{wpx: 80},{wpx: 80},{wpx: 120}];
+const _vdsColWidth        = [{wpx: 80},{wpx: 80},{wpx: 300},{wpx: 80},{wpx: 80},{wpx: 80},{wpx: 120}];
 let   _colWidth           = null;
+let _sortedColumn         = null;
+export let _fcltMap          = new Map();
+export let _selectedFcltList = null;
+const _fcltTitleArr       = [
+    'ctlr_id',
+    'ctlr_nmbr',
+    'ctlr_nm',
+    'comm_desc',
+    'comm_err_cnt',
+    'col_desc',
+    'localno',
+    'updt_dt'
+]
+
+/**
+ * 통신상태 장애현황 리스트 제목 별 정렬 기능
+ */
+_fcltArr.map((obj)=>{
+    _fcltTitleArr.map((item)=>{
+        const classNm = "." + obj + "." + item;
+        if (document.querySelector(classNm)) {
+            $(classNm).on('click', ()=>{
+                const fcltValueArr = _fcltMap.get(obj);
+                if (fcltValueArr && fcltValueArr.length > 0){
+                    fcltValueArr.sort(function (a,b){
+                        let aVal = a[item];
+                        let bVal = b[item];
+                        if (!isNaN(aVal) && !isNaN(bVal)) {
+                            aVal = Number(aVal);
+                            bVal = Number(bVal);
+                        }
+                        return aVal > bVal ? 1 : aVal === bVal ? 0 : -1;
+                    });
+                    _sortedColumn = item;
+                    _fetchFcltCommInfoArr = fcltValueArr;
+                    let totalCnt = _fetchFcltCommInfoArr.length;
+                    const totalPage = Math.ceil(totalCnt/10);
+                    displayFcltCommInfo(obj, 0, 1, totalPage);
+                }
+            })
+        }
+    })
+})
 
 /**
  * 화면 이벤트 핸들러
@@ -19,12 +62,16 @@ $(".header >:nth-child(2)").on("click", function(){
     fetchSystemStts();
     hideAll()
     showElement(".centerPsSttsInfo");
+    _selectedFcltList = null;
+    _sortedColumn = null;
 });
 
 $(".xToggle").on("click", function(){       
     // 화면 아래 리스트 감추기 X 버튼 클릭
     hideAll()
     showElement(".centerPsSttsInfo");
+    _selectedFcltList = null;
+    _sortedColumn = null;
 });
 
 $(".footer_excel").on("click",()=>{
@@ -46,13 +93,17 @@ $(".footer_excel").on("click",()=>{
 /**
  * 파라미터로 받은 선택자에 대해서 토글 이벤트 등록
  */
-const _pagePerData = 9;
+const _pagePerData = 10;
 function registerEventFunc(facilityType) {
     $("#"+facilityType+"Toggle, #"+facilityType+"Refresh").on("click",()=>{
         _selectFcltType = facilityType;   // 화면하단 표출되는 시설물 유형
         hideAll();
+        if (_selectedFcltList !== facilityType) {
+            _sortedColumn = null;
+        }
         _fetchFcltCommInfoArr = new Array();
         fetchFcltCommInfo(facilityType);
+        _selectedFcltList = facilityType;
         showElement("." + facilityType + "DisabilityStautsList");
     });             
 }
@@ -96,16 +147,11 @@ function fetchSystemStts() {
 /**
  * 화면 하단에 표출할 시설물 정보를 조회한다.
  */
-function fetchFcltCommInfo(facilityType) {
+export function fetchFcltCommInfo(facilityType) {
     //통신상태 장애현황리스트
-    if (facilityType === "VMS") {
-        requestGet("/api/common/stts/vms/error", updateFcltCommInfo, facilityType);
-    } else if (facilityType === "CCTV") {
-        requestGet("/api/common/stts/cctv/error", updateFcltCommInfo, facilityType);
-    } else if (facilityType === "VDS") {
-        requestGet("/api/common/stts/vds/error", updateFcltCommInfo, facilityType);
-    } else if (facilityType === "RSE") {
-        requestGet("/api/utis/stts/rse/error", updateFcltCommInfo, facilityType);
+    if (_fcltArr.includes(facilityType) && facilityType !== "BIT") {
+        const fcltType = facilityType.toLowerCase();
+        requestGet("/api/common/stts/" + fcltType + "/error", updateFcltCommInfo, facilityType);
     } else if (facilityType === "BIT") {
         requestGet("/api/bis/stts/bit/error", updateFcltCommInfo, facilityType);
     } else {
@@ -118,6 +164,17 @@ function updateFcltCommInfo(jsonData, facilityType) {
         console.error(`FcltCommInfo type mismatched: ${_selectFcltType},,,${facilityType}`);
         return;
     }
+    if (_sortedColumn) {
+        jsonData.sort(function (a, b){
+            let aVal = a[_sortedColumn];
+            let bVal = b[_sortedColumn];
+            if (!isNaN(aVal) && !isNaN(bVal)) {
+                aVal = Number(aVal);
+                bVal = Number(bVal);
+            }
+            return aVal > bVal ? 1 : aVal === bVal ? 0 : -1;
+        })
+    }
     _fetchFcltCommInfoArr = jsonData;
     
     let totalCnt = jsonData.length;
@@ -136,6 +193,7 @@ function updateFcltCommInfo(jsonData, facilityType) {
     displayFcltCommInfo(facilityType, 0, 1, totalPage);
 }
 
+
 function displayFcltCommInfo(facilityType, firstIdx, currentPage, totalPage) {
     if (_fetchFcltCommInfoArr.length < firstIdx) {
         console.error(`displayFcltCommInfo: FcltCommArr length error, ${_fetchFcltCommInfoArr.length}, ${firstIdx}`);
@@ -143,67 +201,114 @@ function displayFcltCommInfo(facilityType, firstIdx, currentPage, totalPage) {
     }
     $(".fotter_page").html(currentPage + '&nbsp; / &nbsp;'+ totalPage);
     const valueInsertTag = "."+facilityType+"DisabilityListValuesInsert";
-
+    _fcltMap.set(facilityType, _fetchFcltCommInfoArr);
     // 이전 내용을 지운다.
     $(valueInsertTag).empty();
 
     // 현재 페이지 표출 내용
-    const lastIdx = Math.min(firstIdx + _pagePerData, _fetchFcltCommInfoArr.length);
-    if (facilityType === "VDS") {
-        for (let ii = firstIdx; ii < lastIdx; ii++) {
+    let lastIdx = Math.min(firstIdx + _pagePerData, _fetchFcltCommInfoArr.length);
+    if (lastIdx%10 !== 0) {
+        lastIdx = lastIdx - lastIdx%10 + 10;
+    }
+    for (let ii = firstIdx; ii < lastIdx; ii++) {
+        if (facilityType === "VDS") {
             if (_fetchFcltCommInfoArr[ii] != null) {
                 $(valueInsertTag).append(
-                    '<tr>'+
+                    '<tr style="height:23px">'+
                     '    <td class="valueColor" width="200">'+_fetchFcltCommInfoArr[ii].ctlr_id+'</td>'+
                     '    <td class="valueColor" width="200">'+_fetchFcltCommInfoArr[ii].ctlr_nmbr+'</td>'+
                     '    <td class="valueColor" width="500" style="text-align: left;">&nbsp;&nbsp;' + _fetchFcltCommInfoArr[ii].ctlr_nm+'</td>'+
                     '    <td class="valueColor" width="200">'+_fetchFcltCommInfoArr[ii].comm_desc+'</td>'+
                     '    <td class="valueColor" width="200">'+_fetchFcltCommInfoArr[ii].col_desc+'</td>'+
                     '    <td class="valueColor" width="200">'+_fetchFcltCommInfoArr[ii].comm_err_cnt+'</td>'+
-                    '    <td class="valueColor" width="200">'+_fetchFcltCommInfoArr[ii].updt_dt+'</td>'+
+                    '    <td class="valueColor" width="200">'+dateFormatter(_fetchFcltCommInfoArr[ii].updt_dt)+'</td>'+
+                    '</tr>'
+                );
+            }
+            else {
+                $(valueInsertTag).append(
+                    '<tr style="height:23px">'+
+                    '    <td  class="valueColor" width="200"></td>'+
+                    '    <td  class="valueColor" width="200"></td>'+
+                    '    <td  class="valueColor" width="500"></td>'+
+                    '    <td  class="valueColor" width="200"></td>'+
+                    '    <td  class="valueColor" width="200"></td>'+
+                    '    <td  class="valueColor" width="200"></td>'+
+                    '    <td  class="valueColor" width="200"></td>'+
                     '</tr>'
                 );
             }
         }
-    } else if (facilityType === "RSE") {
-        for (let ii = firstIdx; ii < lastIdx; ii++) {
+        else if (facilityType === "RSE") {
             if (_fetchFcltCommInfoArr[ii] != null) {
                 $(valueInsertTag).append(
-                    '<tr>'+
+                    '<tr style="height:23px">'+
                     '    <td class="valueColor" width="400">'+_fetchFcltCommInfoArr[ii].ctlr_id+'</td>'+
                     '    <td class="valueColor" width="500" style="text-align: left;">&nbsp;&nbsp;' + _fetchFcltCommInfoArr[ii].ctlr_nm+'</td>'+
                     '    <td class="valueColor" width="300">'+_fetchFcltCommInfoArr[ii].comm_desc+'</td>'+
-                    '    <td class="valueColor" width="300">'+_fetchFcltCommInfoArr[ii].updt_dt+'</td>'+
+                    '    <td class="valueColor" width="300">'+dateFormatter(_fetchFcltCommInfoArr[ii].updt_dt)+'</td>'+
+                    '</tr>'
+                );
+            }
+            else {
+                $(valueInsertTag).append(
+                    '<tr style="height:23px">'+
+                    '    <td class="valueColor" width="400"></td>'+
+                    '    <td class="valueColor" width="500" style="text-align: left;"></td>'+
+                    '    <td class="valueColor" width="300"></td>'+
+                    '    <td class="valueColor" width="300"></td>'+
                     '</tr>'
                 );
             }
         }
-    } else if (facilityType === "BIT") {
-        for (let ii = firstIdx; ii < lastIdx; ii++) {
+        else if (facilityType === "BIT") {
             if (_fetchFcltCommInfoArr[ii] != null) {
                 $(valueInsertTag).append(
-                    '<tr>'+
+                    '<tr style="height:23px">'+
                     '    <td class="valueColor" width="200">'+_fetchFcltCommInfoArr[ii].ctlr_id+'</td>'+
                     '    <td class="valueColor" width="200">'+_fetchFcltCommInfoArr[ii].localno+'</td>'+
                     '    <td class="valueColor" width="500" style="text-align: left;">&nbsp;&nbsp;' + _fetchFcltCommInfoArr[ii].ctlr_nm+'</td>'+
                     '    <td class="valueColor" width="200">'+_fetchFcltCommInfoArr[ii].comm_desc+'</td>'+
                     '    <td class="valueColor" width="200">'+_fetchFcltCommInfoArr[ii].comm_err_cnt+'</td>'+
-                    '    <td class="valueColor" width="200">'+_fetchFcltCommInfoArr[ii].updt_dt+'</td>'+
+                    '    <td class="valueColor" width="200">'+dateFormatter(_fetchFcltCommInfoArr[ii].updt_dt)+'</td>'+
+                    '</tr>'
+                );
+            }
+            else {
+                $(valueInsertTag).append(
+                    '<tr style="height:23px">'+
+                    '    <td class="valueColor" width="200"></td>'+
+                    '    <td class="valueColor" width="200"></td>'+
+                    '    <td class="valueColor" width="500" style="text-align: left;"></td>'+
+                    '    <td class="valueColor" width="200"></td>'+
+                    '    <td class="valueColor" width="200"></td>'+
+                    '    <td class="valueColor" width="200"></td>'+
                     '</tr>'
                 );
             }
         }
-    } else {
-        for (let ii = firstIdx; ii < lastIdx; ii++) {
+        else {
             if (_fetchFcltCommInfoArr[ii] != null) {
                 $(valueInsertTag).append(
-                    '<tr>'+
+                    '<tr style="height:23px">'+
                     '    <td class="valueColor" width="200">'+_fetchFcltCommInfoArr[ii].ctlr_id+'</td>'+
                     '    <td class="valueColor" width="200">'+_fetchFcltCommInfoArr[ii].ctlr_nmbr+'</td>'+
                     '    <td class="valueColor" width="500" style="text-align: left;">&nbsp;&nbsp;' + _fetchFcltCommInfoArr[ii].ctlr_nm+'</td>'+
                     '    <td class="valueColor" width="200">'+_fetchFcltCommInfoArr[ii].comm_desc+'</td>'+
                     '    <td class="valueColor" width="200">'+_fetchFcltCommInfoArr[ii].comm_err_cnt+'</td>'+
-                    '    <td class="valueColor" width="200">'+_fetchFcltCommInfoArr[ii].updt_dt+'</td>'+
+                    '    <td class="valueColor" width="200">'+dateFormatter(_fetchFcltCommInfoArr[ii].updt_dt)+'</td>'+
+                    '</tr>'
+                );
+            }
+            else {
+                $(valueInsertTag).append(
+                    '<tr style="height:23px">'+
+                    '    <td class="valueColor" width="200"></td>'+
+                    '    <td class="valueColor" width="200"></td>'+
+                    '    <td class="valueColor" width="500" style="text-align: left;"></td>'+
+                    '    <td class="valueColor" width="200"></td>'+
+                    '    <td class="valueColor" width="200"></td>'+
+                    '    <td class="valueColor" width="200"></td>'+
                     '</tr>'
                 );
             }
@@ -256,6 +361,8 @@ function displayFcltCommInfo(facilityType, firstIdx, currentPage, totalPage) {
     // });
 }
 
+
+
 function fetchFcltDataToExcelTemp(facilityType) {
     const valueInsertTag = "."+facilityType+"DisabilityListValuesInsertHidden";
     _fcltExcelTitle = facilityType;
@@ -277,7 +384,7 @@ function fetchFcltDataToExcelTemp(facilityType) {
                     '    <td width="200">'+_fetchFcltCommInfoArr[ii].comm_desc+'</td>'+
                     '    <td width="200">'+_fetchFcltCommInfoArr[ii].col_desc+'</td>'+
                     '    <td width="200">'+_fetchFcltCommInfoArr[ii].comm_err_cnt+'</td>'+
-                    '    <td width="200">'+_fetchFcltCommInfoArr[ii].updt_dt+'</td>'+
+                    '    <td width="200">'+dateFormatter(_fetchFcltCommInfoArr[ii].updt_dt)+'</td>'+
                     '</tr>'
                 );
             }
@@ -290,7 +397,7 @@ function fetchFcltDataToExcelTemp(facilityType) {
                     '    <td width="400">'+_fetchFcltCommInfoArr[ii].ctlr_id+'</td>'+
                     '    <td width="500">'+_fetchFcltCommInfoArr[ii].ctlr_nm+'</td>'+
                     '    <td width="300">'+_fetchFcltCommInfoArr[ii].comm_desc+'</td>'+
-                    '    <td width="300">'+_fetchFcltCommInfoArr[ii].updt_dt+'</td>'+
+                    '    <td width="300">'+dateFormatter(_fetchFcltCommInfoArr[ii].updt_dt)+'</td>'+
                     '</tr>'
                 );
             }
@@ -305,7 +412,7 @@ function fetchFcltDataToExcelTemp(facilityType) {
                     '    <td width="500">'+_fetchFcltCommInfoArr[ii].ctlr_nm+'</td>'+
                     '    <td width="200">'+_fetchFcltCommInfoArr[ii].comm_desc+'</td>'+
                     '    <td width="200">'+_fetchFcltCommInfoArr[ii].comm_err_cnt+'</td>'+
-                    '    <td width="200">'+_fetchFcltCommInfoArr[ii].updt_dt+'</td>'+
+                    '    <td width="200">'+dateFormatter(_fetchFcltCommInfoArr[ii].updt_dt)+'</td>'+
                     '</tr>'
                 );
             }
@@ -320,7 +427,7 @@ function fetchFcltDataToExcelTemp(facilityType) {
                     '    <td width="500">'+_fetchFcltCommInfoArr[ii].ctlr_nm+'</td>'+
                     '    <td width="200">'+_fetchFcltCommInfoArr[ii].comm_desc+'</td>'+
                     '    <td width="200">'+_fetchFcltCommInfoArr[ii].comm_err_cnt+'</td>'+
-                    '    <td width="200">'+_fetchFcltCommInfoArr[ii].updt_dt+'</td>'+
+                    '    <td width="200">'+dateFormatter(_fetchFcltCommInfoArr[ii].updt_dt)+'</td>'+
                     '</tr>'
                 );
             }
@@ -357,7 +464,23 @@ const excelHandler = {
         return XLSX.utils.table_to_sheet(this.getExcelData(), {sheet : _fcltExcelTitle + ' 통신상태 장애현황', raw : true});
     }
 }
-
+function dateFormatter(value){
+    let formatValue = value;
+    if (value && !isNaN(value)) {
+        formatValue =  value.substring(0,4)
+        + "-"
+        + value.substring(4,6)
+        + "-"
+        + value.substring(6,8)
+        + " "
+        + value.substring(8,10)
+        + ":"
+        + value.substring(10,12)
+        + ":"
+        + value.substring(12,14)
+    }
+    return formatValue;
+}
 function s2ab(s) { 
     let buf = new ArrayBuffer(s.length); //convert s to arrayBuffer
     let view = new Uint8Array(buf);  //create uint8array as viewer

src/main/resources/static/application/facility/main/old/main-func.js

@@ -0,0 +1,323 @@
+import { currDt } from "/js/utils/common.js";
+import { requestGet, apiGet } from "/js/utils/restApi.js";
+import { TWebSocket } from "/js/websocket/websocket.js";
+import { _errorSwitch } from "./main.js";
+let _webSocket = null; // websocket
+
+let _timerFetchFcltStts = null; // 시설물 상태정보 요청 타이머
+const requestFetchFcltStts = () => {
+    if (_timerFetchFcltStts) window.clearTimeout(_timerFetchFcltStts);
+    _timerFetchFcltStts = window.setTimeout(() => fetchFcltStts(), 1 * 60 * 1000);
+};
+let _timerFetchDbmsStts = null; // 데이터베이스 상태정보 요청 타이머
+const requestFetchDbmsStts = () => {
+    if (_timerFetchDbmsStts) window.clearTimeout(_timerFetchDbmsStts);
+    _timerFetchDbmsStts = window.setTimeout(() => fetchDbmsStts(), 5 * 60 * 1000);
+};
+let _timerFetchUnitStts = null; // 프로세스 상태정보 요청 타이머
+const requestFetchUnitStts = () => {
+    if (_timerFetchUnitStts) window.clearTimeout(_timerFetchUnitStts);
+    _timerFetchUnitStts = window.setTimeout(() => fetchUnitStts(), 1 * 60 * 1000);
+};
+
+
+// 웹소켓 초기화
+export function websocketConnect(clientType) {
+    _webSocket = new TWebSocket(clientType, onSocketReceived, onSocketDisconnected, onSocketError, onSocketConnected);
+    _webSocket.connect();
+}
+function onSocketConnected(AClientType, AMessage) {
+    console.log(`${currDt()}: onSocketConnected, ${AClientType}, `, AMessage);
+}
+function onSocketReceived(AClientType, AMessage) {
+    console.log(`${currDt()}: onSocketReceived, ${AClientType}, `, AMessage);
+    const command = AMessage.command;
+    const jsonData = AMessage.data;
+    if (command === "itsFcltStts" || command === "bisFcltStts") {
+        updateFcltStts(jsonData);
+        if (command === "bisFcltStts") {
+            requestFetchFcltStts();
+        }
+    } else if (command === "itsUnitStts" || command === "bisUnitStts") {
+        updateUnitStts(jsonData);
+        if (command === "bisUnitStts") {
+            requestFetchUnitStts();
+        }
+    }
+}
+
+function onSocketDisconnected(AClientType, AMessage) {
+     console.log(`${currDt()}: onSocketDisconnected, ${AClientType}, `, AMessage);
+}
+function onSocketError(AClientType, AMessage) {
+     console.log(`${currDt()}: onSocketError, ${AClientType}, `, AMessage);
+}
+export let _fcltData = null;
+// 현장시설물 상태정보 요청(타이머 또는 웹소켓에 의해 실행됨)
+export async function fetchFcltStts() {
+    //console.time("***** fetchFcltStts: ");
+
+    const its = apiGet("/api/common/stts/total"); // ITS 상태정보 요청
+    const bit = apiGet("/api/bis/stts/bit/total"); // BIT 상태정보 요청
+
+    Promise.all([its, bit])
+        .then((results) => Promise.all(results.map((r) => r.json())))
+        .then((values) => {
+            //console.log(`${currDt()}: FcltStts, ITS(${values[0].fclt_list.length}), BIT(${values[1].fclt_list.length})`);
+            _fcltData = [values[0], values[1]];
+            updateFcltStts(values[0]);
+            updateFcltStts(values[1]);
+        })
+        .catch((err) => {
+            //console.error(`Error in fetchFcltStts ${err}`);
+        })
+        .finally(() => {
+        // console.timeEnd("***** fetchFcltStts: ")
+        });
+
+    // 요청시간을 기준으로 상태정보 요청 타이머 리셋
+    requestFetchFcltStts();
+}
+export function updateFcltStts(jsonData) {
+    jsonData.fclt_list.forEach((el) => {
+        setHtml("." + el.fclt_type + "_TOTAL", el.total_cnt);
+        if (_errorSwitch) {
+            setHtml("." + el.fclt_type + "_NORMAL", el.total_cnt);
+            setHtml("." + el.fclt_type + "_ERROR", 0);
+            $("." + el.fclt_type + "_ERROR").css('color', 'rgba(255, 255, 255, 0.788)');
+        }
+        else {
+            setHtml("." + el.fclt_type + "_NORMAL", el.normal_cnt);
+            setHtml("." + el.fclt_type + "_ERROR", el.error_cnt);
+            const color = el.error_cnt === 0 ? 'rgba(255, 255, 255, 0.788)' : 'red';
+            $("." + el.fclt_type + "_ERROR").css('color', color);
+        }
+    });
+}
+export let _unitData = null;
+// 센터프로세스 상태정보 요청(타이머 또는 웹소켓에 의해 실행됨)
+export async function fetchUnitStts() {
+    // console.time("***** fetchUnitStts: ");
+
+    const its = apiGet("/api/common/stts/process/its"); // 센터프로세스 ITS
+    const bis = apiGet("/api/bis/stts/process"); // 센터프로세스 BIT
+    Promise.all([its, bis])
+        .then((results) => Promise.all(results.map((r) => r.json())))
+        .then((values) => {
+            // console.log(`${currDt()}: UnitStts, ITS(${values[0].length}), BIS(${values[1].length})`);
+            _unitData = [values[0], values[1]];
+            updateUnitStts(values[0]); //ITS 프로세스
+            updateUnitStts(values[1]); //BIS 프로세스
+        })
+        .catch((err) => {
+            // console.error(`Error in fetchUnitStts ${err}`);
+        })
+        .finally(() => {
+            // console.timeEnd("***** fetchUnitStts: ")
+    });
+
+    // 요청시간을 기준으로 상태정보 요청 타이머 리셋
+    requestFetchUnitStts();
+}
+export function updateUnitStts(jsonData) {
+    jsonData.forEach((obj) => {
+        const runStts = obj.run_sts.slice(-1);
+        let comStts   = null;
+        let dbStts    = null;
+        if (!_errorSwitch){
+            comStts = obj.com_sts.slice(-1);
+            dbStts  = obj.db_sts.slice(-1);
+            if (runStts == "1") {
+                comStts = "1";
+                dbStts = "1";
+            }
+        }
+        else {
+            comStts = 0;
+            dbStts  = 0;
+        }
+
+        const comImg = "<img src='/images/application_facility/stts" + comStts + ".png'>";
+        const dbImg = "<img src='/images/application_facility/stts" + dbStts + ".png'>";
+        setHtml(".comStts_" + obj.syst_id, comImg);
+        setHtml(".dbStts_" + obj.syst_id, dbImg);
+    });
+}
+
+// DBMS 프로세스 상태정보 요청(타이머 또는 웹소켓에 의해 실행됨)
+export async function fetchDbmsStts() {
+    //console.time("***** fetchDbmsStts: ");
+
+    const dbms = apiGet("/api/common/stts/dbms"); // DBMS STTS
+
+    Promise.all([dbms])
+        .then((results) => Promise.all(results.map((r) => r.json())))
+        .then((values) => {
+            //console.log(`${currDt()}: DbmsStts, ${values[0].length}`);
+            updateDbmsStts(values[0]); //ITS 프로세스
+        })
+        .catch((err) => {
+            console.error(`Error in fetchDbmsStts ${err}`);
+        })
+        .finally(() =>{
+            //console.timeEnd("***** fetchDbmsStts: ")
+        });
+
+    // 요청시간을 기준으로 상태정보 요청 타이머 리셋
+    requestFetchDbmsStts();
+}
+
+function updateDbmsStts(jsonData) {
+    jsonData.forEach((obj) => {
+        const dbSeverName = $(".db" + obj.db_svr_id + "_dbSeverName");
+        const tableSpaceName = $(".db" + obj.db_svr_id + "_tableName");
+        const tableReamin = $(".db" + obj.db_svr_id + "_tableRemSpace");
+        //const useSession = $(".db" + obj.db_svr_id + "_useSession");
+        //setHtml(dbSeverName, obj.db_svr_nm)
+        setHtml(tableSpaceName, obj.tbls_nm);
+        if (!isNaN(obj.tbls_rmnd_cpct)) {
+            const useVal = (100 - Number(obj.tbls_rmnd_cpct)).toFixed(2);
+            if (useVal >= 80) {
+                tableReamin.css("color","red");
+            }
+    
+            setHtml(tableReamin, useVal);
+        }
+        else {
+            setHtml(tableReamin, '정보없음');
+        }
+        
+        if (!isNaN(obj.use_sesn)) {
+            setChart(obj.db_svr_id, Number(obj.use_sesn).toFixed(2), obj.db_svr_nm);
+        }
+    });
+}
+
+function setChart(id, sessionVal, serverName) {
+    let color = 'rgb(115, 191, 105)';
+    sessionVal = Number(sessionVal);
+    if (!sessionVal) {
+        sessionVal = 0;
+    }
+    else if(sessionVal >= 80 ){
+        color = '#FF0000';
+    }
+    
+    const chartId = document.querySelector('#db'+ id + '_useSession');
+    if (chartId) {
+        Highcharts.chart('db' + id + '_useSession', {
+            chart: {
+                type            : 'solidgauge',
+                //marginTop       : 0,
+                height          : 170,
+			    backgroundColor : '#2d2d33',
+            },
+            title: {
+                text : serverName,
+                y    : 20,
+                style: {
+                    color: 'rgba(160, 159, 159, 0.836)',
+                    fontWeight: 'bold',
+                },
+            },
+            pane: {
+                center: ['50%', '80%'],
+                size: '160%',
+                innerSize: '10%',
+                startAngle: -100,
+                endAngle: 100,
+                background: {
+                    backgroundColor: '#22252b',
+                    innerRadius: '55%',
+                    outerRadius: '100%',
+                    shape: 'arc',
+                    borderColor: 'black',
+                    borderWidth: 1,
+                },
+                height: 170,
+            },
+
+            exporting: {
+                enabled: false
+            },
+
+            tooltip: {
+                enabled: false
+            },
+            
+            // the value axis
+            yAxis: {
+                stops: [//백분율로 색상 분류
+                    [0.8, 'rgb(115, 191, 105)'], // green
+                    [1, 'red'], // red,
+                ],
+                plotBands: [{//해당 값까지 바깥쪽 선 그리기
+                    from: 0,
+                    to: 80,
+                    color: 'rgb(115, 191, 105)', // red
+                    thickness: '-5%',
+                    borderColor:'#22252b',
+                    borderWidth: 1
+                }, {
+                    from: 80,
+                    to: 100,
+                    color: '#FF0000', // red
+                    thickness: '-5%',
+                    borderColor:'#22252b',
+                    borderWidth: 1
+                }]
+                ,
+                lineWidth: 2,
+                lineColor: 'black',
+                tickWidth: 0,
+                minorTickInterval: null,
+                tickAmount: 0,
+                title: '',
+                labels: {
+                    enabled: false
+                },
+                min: 0,
+                max: 100,
+                title: {
+                    text: ''
+                }
+            },
+            plotOptions: {
+                solidgauge: {
+                    dataLabels: {
+                        y: 1,
+                        borderWidth: 0,
+                        useHTML: true,
+                    }
+                }
+            },
+            credits: {
+                enabled: false
+            },
+            
+            series: [{
+                name: serverName,
+                data: [sessionVal],
+                dataLabels: {
+                    format:
+                    '<div style="text-align:center; margin-top: -20px;">' 
+                    + '<span style="font-size:20px; color:' + color + ';">{y}</span><br>'
+                    //+ '<span style="font-size:15px; color:rgb(204, 204, 220);">' + serverName + '</span></div>'
+                    + '</div>'
+                },
+            }],
+        });
+    }
+}
+function setHtml(tagClass, tagValue) {
+    const tag = $(tagClass);
+    if (tag) {
+        tag.html(tagValue);
+    }
+}
+export function setInnerText(tagId, tagData) {
+    const tag = document.getElementById(tagId);
+    if (tag) {
+        tag.innerText = tagData;
+    }
+}

src/main/resources/static/application/facility/main/old/main.css

@@ -0,0 +1,1010 @@
+/*
+** 배경색 유지보수
+*/
+.bassBgColor {
+    background-color: #18181d
+    !important;
+}
+.bassWordColor {
+    color: rgba(160, 159, 159, 0.836)
+    !important;
+}
+.tagColor{
+    background: linear-gradient(to bottom, hsl(0, 4%, 5%), hsl(0, 6%, 13%), #534B4B)
+    !important;
+}
+.tableColor {
+    background-color: #1e1e22
+    !important;
+    color: rgba(160, 159, 159, 0.836)
+    !important
+}
+.valueColor {
+    background-color: #2d2d33
+    !important;
+    color: rgba(255, 255, 255, 0.788);
+    font-weight: bold;
+}
+
+/* .db1_tableRemSpace,.db3_tableRemSpace,.db4_tableRemSpace,.db6_tableRemSpace,
+.db1_useSession,.db2_useSession,.db3_useSession,.db4_useSession,.db5_useSession,.db6_useSession{
+    background-color: rgba(255, 255, 255, 0.747);
+    color: rgb(0, 89, 255);
+} */
+
+/* .db6_tableName,.db4_tableName,.db1_tableName,.db3_tableName{
+    background-color: rgba(255, 255, 255, 0.747);
+    color: rgb(0, 177, 12);
+} */
+
+/* .VMS_TOTAL,.CCTV_TOTAL,.VDS_TOTAL,.RSE_TOTAL,.BIT_TOTAL{
+    color: rgb(0, 177, 12);
+}  */
+
+.VMS_ERROR,.CCTV_ERROR,.VDS_ERROR,.RSE_ERROR,.BIT_ERROR{
+    color: rgba(255, 0, 0, 0.856);
+}
+
+
+*{
+    margin:0;
+    padding: 0;
+}
+html,body{
+    width: 100%;
+    height: 1060px;
+    background-color: #18181d;
+	max-width: 1920px;
+}
+
+.header{
+    position: relative;
+    display: grid;
+	grid-template-columns: 750px 0px;
+	grid-template-rows: 0px 0px;
+    width: 100%;
+    height: 65px;
+    font-size: 20px;
+    flex-direction: row;
+    flex-wrap: wrap;
+    text-align: center;
+    font-size: 20px;
+    font-weight: bold;
+    background-color: #18181d;
+    z-index: 10;
+}
+.header > :nth-child(1){
+   width: 110px;
+   top:15px;
+}
+.header > :nth-child(2){
+    position: relative;
+    top: 7px;
+    /* background: url('/image/logo.png');
+    background-repeat: no-repeat; */
+    cursor: pointer;
+    width: 500px;
+    height: 65px;
+    line-height: 65px;
+    color:rgba(255, 255, 255, 0.747);
+    text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
+    font-size: 27px;
+    left: -590px;
+}
+.header >:nth-child(2):hover{
+    color: #9dafe0
+    !important;
+}
+.header >:nth-child(2):active{
+    /* left: 11px; */
+    color: #6082e2
+    !important;
+}
+.header > img{
+    position: relative;
+    top: 7px;
+    left: 27px;
+    width: 57px;
+}
+
+.firstBox{
+    height: 613px;
+    position: relative;
+    background-color: #2a2a33;
+}
+#clock{
+    position: relative;
+    /* bottom: 3px; */
+    left: 1500px;
+    height: 65px;
+    line-height: 80px;
+    width: 400px;
+    color:  rgba(255, 255, 255, 0.747);
+    text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
+    font-weight: bold;
+    font-size: 25px;
+    border-radius: 7px;
+}
+.tag{
+    top:10px;
+    border-radius: 7px;
+    display: flex;
+    position: relative;
+    width: 1877px;
+    height: 30px;
+    line-height: 30px;
+    background: linear-gradient(to bottom, hsl(0, 0%, 0%), hsl(0, 0%, 0%), #534B4B);
+    color: rgba(255, 255, 255, 0.747);
+    text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
+    font-size: 20px;
+    font-weight: bold;
+    left: 12px;
+    box-shadow: 2px 2px 2px 2px black;
+}
+.tag2{
+    border-radius: 7px;
+    position: relative;
+    width: 903px;
+    height: 30px;
+    line-height: 30px;
+    background: linear-gradient(to bottom, hsl(0, 0%, 0%), hsl(0, 0%, 0%), #534B4B);
+    color: rgba(255, 255, 255, 0.747);
+    text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
+    font-size: 20px;
+    font-weight: bold;
+    left: 14px;
+    box-shadow: 2px 2px 2px 2px black;
+}
+.tag3{
+    border-radius: 7px;
+    position: relative;
+    width: 905px;
+    height: 30px;
+    line-height: 30px;
+    background: linear-gradient(to bottom, hsl(0, 0%, 0%), hsl(0, 0%, 0%), #534B4B); 
+    color: rgba(255, 255, 255, 0.747);
+    text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
+    font-size: 20px;
+    font-weight: bold;
+    left: 79px;
+    box-shadow: 2px 2px 2px 2px black;
+}
+.tag4{
+    border-radius: 7px;
+    display: flex;
+    position: relative;
+    width: 1875px;
+    height: 30px;
+    line-height: 30px;
+    background: linear-gradient(to bottom, hsl(0, 0%, 0%), hsl(0, 0%, 0%), #534B4B);
+    color: rgba(255, 255, 255, 0.747);
+    text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
+    font-size: 20px;
+    font-weight: bold;
+    left: 12px;
+    box-shadow: 2px 2px 2px 2px rgb(0, 0, 0);
+}
+.tag4-1{
+    position: relative;
+    bottom: 5px;
+    font-size: 20px;
+    font-weight: bold;
+    height: 30px;
+    line-height: 40px;
+    color: rgba(255, 255, 255, 0.747);
+}
+.tag5{
+    border-radius: 7px 0px 0px 7px;
+    display: flex;
+    position: relative;
+    width: 1824px;
+    height: 30px;
+    line-height: 30px;
+    background: linear-gradient(to bottom, hsl(0, 0%, 0%), hsl(0, 0%, 0%), #534B4B);
+    color: rgba(255, 255, 255, 0.747);
+    text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
+    font-size: 20px;
+    font-weight: bold;
+    left: 12px;
+    box-shadow: 2px 2px 2px 2px rgb(0, 0, 0);
+}
+
+.xToggle{ 
+    border-radius: 0px 7px 7px 0px;
+    width: 63px;
+    height: 30px;
+    background: linear-gradient(to bottom, hsl(0, 0%, 0%), hsl(0, 0%, 0%), #534B4B);
+    color: #ffffff;
+    font-size: 20px;
+    font-weight:bold;
+    left: 12px;
+    z-index: 2;
+    box-shadow: 3px 2px 2px 2px rgb(0, 0, 0);
+}
+.xToggle:hover{
+    cursor: pointer;
+    border-radius: 0px 7px 7px 0px;
+    width: 63px;
+    height: 30px;
+    background: linear-gradient(to bottom, hsl(0, 0%, 0%), hsl(0, 0%, 0%), #534B4B);
+    color: #9dafe0
+    !important;
+    font-size: 20px;
+    font-weight: bold;
+}
+.xToggle:active{
+    color: #6082e2
+    !important;
+}
+.facSttsInfo{
+    top: 10px;
+    position: relative;
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+    width: 1900px;
+    height: 370px;
+    margin: 0px auto;
+    background-color: #2a2a33;
+    border-bottom: 1px solid rgb(255, 255, 255);
+    border-top: 1px solid rgb(255, 255, 255);
+}
+.communicationSatusToggle{
+    color:  rgba(255, 255, 255, 0.747);
+}
+.communicationSatusToggle:hover{
+    color: #9dafe0
+    !important;
+    cursor: pointer;
+}
+.communicationSatusToggle:active{
+    color: #6082e2
+    !important;
+}
+
+.Minitable{
+    left:5px;
+    top: 3px;
+    position: relative;
+    width: 180px;
+    height: 30%;
+    background-color: #383535;
+    border-spacing: 2px 2px;
+    border-radius: 23px;
+    box-shadow: 2px 2px 2px 2px;
+}
+
+.Minitable>:nth-child(1){
+    background-color: #2a2a33;
+    color:  rgba(255, 255, 255, 0.747);
+    text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
+    text-align: center;
+    font-size: 20px;
+    font-weight: bold;
+}
+
+img{
+    position: relative;
+    top: 5px;
+    width: 27px;
+}
+.VMSSttsInfo{
+    top:0px;
+    display: flex;
+    width: 903px;
+    position: relative;
+    left: -10px;
+    height: 90px;
+    margin: 0px auto;
+    box-shadow: 2px 2px 2px 2px;
+}
+.VMSSttsInfo>:nth-child(1){
+    background-color: #534B4B;
+    width: 100%;
+    
+}
+.VMSSttsInfo>:nth-child(1)>:nth-child(1){
+    background-color: #363640;
+    color:  rgba(255, 255, 255, 0.747);
+    text-align: center;
+    font-size: 20px;
+    font-weight: bold;
+}
+.VMS_TYPE>:nth-child(n),.CCTV_TYPE>:nth-child(n),.VDS_TYPE>:nth-child(n),.BIT_TYPE,.RSE_TYPE{
+    background-color:  rgba(255, 255, 255, 0.747);
+}
+/* .VMS_NORMAL,.CCTV_NORMAL,.VDS_NORMAL,.RSE_NORMAL,.BIT_NORMAL{
+    color: rgb(0, 0, 0);
+} */
+.CCTVSttsInfo{
+    top:0px;
+    display: flex;
+    position: relative;
+    margin: 0px auto;
+    width: 903px;
+    left: 10px;
+    height: 90px;
+    box-shadow: 2px 2px 2px 2px;
+}
+.CCTVSttsInfo>:nth-child(1){
+    background-color: #534B4B;
+    width: 100%;
+    
+}
+.CCTVSttsInfo>:nth-child(1)>:nth-child(1){
+    background-color: #363640;
+    color:  rgba(255, 255, 255, 0.747);
+    text-align: center;
+    font-size: 20px;
+    font-weight: bold;
+}
+.VDSSttsInfo{
+    top:0px;
+    display: flex;
+    width: 903px;
+    position: relative;
+    left: -10px;
+    height: 90px;
+    margin: 0px auto;
+    box-shadow: 2px 2px 2px 2px;
+}
+.VDSSttsInfo>:nth-child(1){
+    background-color: #534B4B;
+    width: 100%;
+    
+}
+.VDSSttsInfo>:nth-child(1)>:nth-child(1){
+    background-color: #363640;
+    color:  rgba(255, 255, 255, 0.747);
+    text-align: center;
+    font-size: 20px;
+    font-weight: bold;
+}
+
+#linkTraffic {
+    z-index: 1;
+    width: 638px;
+    height: 194px;
+    border: 2px solid #534B4B;
+    box-shadow: 2px 2px 2px 2px;
+}
+#linkTrafficRate {
+    left: 648px;
+    z-index: 1;
+    width: 251px;
+    height: 194px;
+    border: 2px solid #534B4B;
+    box-shadow: 2px 2px 2px 2px;
+    position: relative;
+    bottom: 108px;
+}
+
+.RSESttsInfo{
+    top:0px;
+    display: flex;
+    position: relative;
+   	margin: 0px auto;
+    width: 903px;
+    left: 10px;
+    height: 90px;
+}
+/* .RSESttsInfo>:nth-child(1){
+    background-color: #534B4B;
+    width: 100%;
+    height: 197px;
+    box-shadow: 2px 2px 2px 2px;
+} */
+/* .RSESttsInfo>:nth-child(1)>:nth-child(1){
+    background-color: #363640;
+    color:  rgba(255, 255, 255, 0.747);
+    text-align: center;
+    font-size: 20px;
+    font-weight: bold;
+} */
+
+.BITSttsInfo{
+    top:0px;
+    display: flex;
+    width: 903px;
+    position: relative;
+    left: -10px;
+    height: 90px;
+    margin: 0px auto;
+    box-shadow: 2px 2px 2px 2px;
+}
+.BITSttsInfo>:nth-child(1){
+    background-color: #534B4B;
+    width: 100%;
+    
+}
+.BITSttsInfo>:nth-child(1)>:nth-child(1){
+    background-color: #363640;
+    color:  rgba(255, 255, 255, 0.747);
+    text-align: center;
+    font-size: 20px;
+    font-weight: bold;
+}
+
+.blank{
+    top:0px;
+    display: flex;
+    position: relative;
+    margin: 0px auto;
+    width: 903px;
+    left: 10px;
+    height: 110px;
+    height: 90px;
+
+}
+.dbUsaInfo{
+    top: 20px;
+    position: relative;
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+    width: 1900px;
+    height: 220px;
+    margin: 0px auto;
+    background-color: #2a2a33;
+    border-bottom: 1px solid rgb(255, 255, 255);
+    
+}
+.dbTableSpace{
+    display: flex;
+    position: relative;
+    width: 903px;
+    height: 170px;
+    margin-left: 14px;
+    box-shadow: 2px 2px 2px 2px;
+}
+.dbTableSpace>:nth-child(1){
+    background-color: #534B4B;
+    width: 100%;
+}
+.dbTableSpace>:nth-child(1)>:nth-child(1){
+    background-color: #363640;
+    color:  rgba(255, 255, 255, 0.747);
+    text-align: center;
+    font-size: 20px;
+    font-weight: bold;
+}
+.dbSession{
+    display: flex;
+    position: relative;
+    width: 907px;
+    left: 64px;
+    height: 166px;
+    box-shadow: 2px 2px 2px 2px;
+    border-top : 2px solid #534B4B;
+    border-left : 2px solid #534B4B;
+    border-bottom : 2px solid #534B4B;
+}
+
+.dbSession > div {
+    width: calc(100%/4);
+    height: 100%;
+    border-right:2px solid #534B4B;
+}
+/* .dbSession>:nth-child(1){
+    background-color: #534B4B;
+    width: 100%;
+}
+.dbSession>:nth-child(1)>:nth-child(1){
+    background-color: #363640;
+    color:  rgba(255, 255, 255, 0.747);
+    text-align: center;
+    font-size: 20px;
+    font-weight: bold;
+} */
+
+.dbSession2{
+    display: flex;
+    position: relative;
+    width: 440px;
+    left: -13px;
+    height: 170px;
+    box-shadow: 2px 2px 2px 2px;
+}
+.dbSession2>:nth-child(1){
+    background-color: #534B4B;
+    width: 100%;
+}
+.dbSession2>:nth-child(1)>:nth-child(1){
+    background-color: #363640;
+    color:  rgba(255, 255, 255, 0.747);
+    text-align: center;
+    font-size: 20px;
+    font-weight: bold;
+}
+.secondBox{
+    height: 402px;
+    position: relative;
+    background-color: #2a2a33;
+}
+.centerPsSttsInfo{
+    display: flex;
+    top:10px;
+    position: relative;
+	flex-direction: row;
+	flex-wrap: wrap;
+    width: 1900px;
+    height: 385px;
+    margin: 0px auto;
+}
+.comStts_UTP01,.comStts_MOCT01,.comStts_EXT01,.comStts_WEB01,.comStts_CTV01,
+.comStts_VDS01,.comStts_VMS01,.comStts_90201,.comStts_90202,.comStts_90203,.comStts_90204,.comStts_90205,.comStts_90101,.comStts_90102,.comStts_90103,.comStts_90104,.comStts_90105,.comStts_80101,.comStts_80102,.comStts_110201,.comStts_160101,.comStts_110101,.comStts_10901,.comStts_11001,.comStts_11101,.comStts_11201,.comStts_80201{
+    background-color: rgba(255, 255, 255, 0.747);
+    border-radius : 0px 0px 0px 20px; 
+    height: 27px;
+}
+.dbStts_UTP01,.dbStts_MOCT01,.dbStts_EXT01,.dbStts_WEB01,.dbStts_CTV01,
+.dbStts_VDS01,.dbStts_VMS01,.dbStts_90201,.dbStts_90202,.dbStts_90203,.dbStts_90204,.dbStts_90205,.dbStts_90101,.dbStts_90102,.dbStts_90103,.dbStts_90104,.dbStts_90105,.dbStts_80101,.dbStts_80102,.dbStts_110201,.dbStts_110101,.dbStts_10901,.dbStts_11001,.dbStts_11101,.dbStts_11201,.dbStts_160101,.dbStts_80201{
+    background-color: rgba(255, 255, 255, 0.747);
+    border-radius : 0px 0px 20px 0px; 
+    height: 27px;
+}
+.dbManu{
+    display: grid;
+	grid-template-columns: 220px 0px;
+	grid-template-rows: 100px 100px;
+    width: 410px;
+    position: relative;
+    height: 302px;
+    margin: 0px auto;
+    border-radius: 20px;
+    border: 3px solid #534B4B;
+    box-shadow: 2px 2px 2px 2px;
+}
+.itsProcess{
+    display: grid;
+	grid-template-columns: 220px 0px;
+	grid-template-rows: 100px 100px;
+    width: 410px;
+    position: relative;
+    height: 302px;
+    margin: 0px auto;
+    border-radius: 20px;
+    border: 3px solid #534B4B;
+    box-shadow: 2px 2px 2px 2px;
+}
+.bisProcess{
+    display: grid;
+	grid-template-columns: 202px 202px 202px 202px 202px;
+	grid-template-rows: 100px 100px;
+    width: 1000px;
+    position: relative;
+    height: 302px;
+    margin: 0px auto;
+    border: 3px solid #534B4B;
+    border-radius: 20px;
+    box-shadow: 2px 2px 2px 2px;
+}
+.VMSDisabilityListValues>:nth-child(2)>:nth-child(n),
+.VDSDisabilityListValues>:nth-child(2)>:nth-child(n),
+.RSEDisabilityListValues>:nth-child(2)>:nth-child(n),
+.BITDisabilityListValues>:nth-child(2)>:nth-child(n),
+.CCTVDisabilityListValues>:nth-child(2)>:nth-child(n){
+    background-color:  #ffffff;
+    color: rgb(0, 0, 0);
+}
+.VMSDisabilityStautsList{
+    display: none;
+    top:10px;
+    position: relative;
+	flex-direction: row;
+	flex-wrap: wrap;
+    width: 1900px;
+    height: 35px;
+    margin: 0px auto;
+}
+.VMSDisabilityList{
+    margin: 0px auto;
+    position: relative;
+    top: 10px;
+    width: 1870px;
+    height: 340px;
+    
+}
+.VMSDisabilityListValues{
+    border: 1px solid #534B4B;
+    height: 294px;
+    overflow: auto;
+    width: 100%;
+    box-shadow: 2px 2px 2px 2px;
+}
+.VMSDisabilityListValues>:nth-child(1){
+    top:0px;
+    position: sticky;
+    width: 100%;
+    text-align: center;
+    font-size: 20px;
+    font-weight: bold;
+    background-color: #534B4B;
+}
+.VMSDisabilityListValues>:nth-child(1)>:nth-child(1){
+    background-color: #363640;
+    color:  rgba(255, 255, 255, 0.747);
+}
+.VMSDisabilityListValues>:nth-child(2){
+    width: 100%;
+    text-align: center;
+    font-size: 20px;
+    font-weight: bold;
+    background-color: #534B4B;
+}
+
+.VMSDisabilityListValuesHidden,.CCTVDisabilityListValuesHidden,.VDSDisabilityListValuesHidden,
+.RSEDisabilityListValuesHidden,.BITDisabilityListValuesHidden {
+    display: none;
+}
+.CCTVDisabilityStautsList{
+    display: none;
+    top:10px;
+    position: relative;
+	flex-direction: row;
+	flex-wrap: wrap;
+    width: 1900px;
+    height: 35px;
+    margin: 0px auto;
+}
+.CCTVDisabilityList{
+    margin: 0px auto;
+    position: relative;
+    top: 10px;
+    width: 1870px;
+    height: 340px;
+}
+.CCTVDisabilityListValues{
+    border: 1px solid #534B4B;
+    height: 294px;
+    overflow: auto;
+    width: 100%;
+    box-shadow: 2px 2px 2px 2px;
+}
+.CCTVDisabilityListValues>:nth-child(1){
+    top:0px;
+    position: sticky;
+    width: 100%;
+    text-align: center;
+    font-size: 20px;
+    font-weight: bold;
+    background-color: #534B4B;
+}
+.CCTVDisabilityListValues>:nth-child(1)>:nth-child(1){
+    background-color: #363640;
+    color:  rgba(255, 255, 255, 0.747);
+}
+.CCTVDisabilityListValues>:nth-child(2){
+    width: 100%;
+    text-align: center;
+    font-size: 20px;
+    font-weight: bold;
+    background-color: #534B4B;
+}
+
+.VDSDisabilityStautsList{
+    display: none;
+    top:10px;
+    position: relative;
+	flex-direction: row;
+	flex-wrap: wrap;
+    width: 1900px;
+    height: 35px;
+    margin: 0px auto;
+}
+.VDSDisabilityList{
+    margin: 0px auto;
+    position: relative;
+    top: 10px;
+    width: 1870px;
+    height: 340px;
+}
+.VDSDisabilityListValues{
+    border: 1px solid #534B4B;
+    height: 294px;
+    overflow: auto;
+    width: 100%;
+    box-shadow: 2px 2px 2px 2px;
+}
+.VDSDisabilityListValues>:nth-child(1){
+    top:0px;
+    position: sticky;
+    width: 100%;
+    text-align: center;
+    font-size: 20px;
+    font-weight: bold;
+    background-color: #534B4B;
+}
+.VDSDisabilityListValues>:nth-child(1)>:nth-child(1){
+    background-color: #363640;
+    color:  rgba(255, 255, 255, 0.747);
+}
+.VDSDisabilityListValues>:nth-child(2){
+    width: 100%;
+    text-align: center;
+    font-size: 20px;
+    font-weight: bold;
+    background-color: #534B4B;
+}
+
+.RSEDisabilityStautsList{
+    display: none;
+    top:10px;
+    position: relative;
+	flex-direction: row;
+	flex-wrap: wrap;
+    width: 1900px;
+    height: 35px;
+    margin: 0px auto;
+}
+.RSEDisabilityList{
+    margin: 0px auto;
+    position: relative;
+    top: 10px;
+    width: 1870px;
+    height: 340px;
+}
+.RSEDisabilityListValues{
+    border: 1px solid #534B4B;
+    height: 294px;
+    overflow: auto;
+    width: 100%;
+    box-shadow: 2px 2px 2px 2px;
+}
+.RSEDisabilityListValues>:nth-child(1){
+    top:0px;
+    position: sticky;
+    width: 100%;
+    text-align: center;
+    font-size: 20px;
+    font-weight: bold;
+    background-color: #534B4B;
+}
+.RSEDisabilityListValues>:nth-child(1)>:nth-child(1){
+    background-color: #363640;
+    color:  rgba(255, 255, 255, 0.747);
+}
+.RSEDisabilityListValues>:nth-child(2){
+    width: 100%;
+    text-align: center;
+    font-size: 20px;
+    font-weight: bold;
+    background-color: #534B4B;
+}
+.BITDisabilityStautsList{
+    display: none;
+    top:10px;
+    position: relative;
+	flex-direction: row;
+	flex-wrap: wrap;
+    width: 1900px;
+    height: 35px;
+    margin: 0px auto;
+}
+.BITDisabilityList{
+    margin: 0px auto;
+    position: relative;
+    top: 10px;
+    width: 1870px;
+    height: 340px;
+}
+.BITDisabilityListValues{
+    border: 1px solid #534B4B;
+    height: 294px;
+    overflow: auto;
+    width: 100%;
+    box-shadow: 2px 2px 2px 2px;
+}
+.BITDisabilityListValues>:nth-child(1){
+    top:0px;
+    position: sticky;
+    width: 100%;
+    text-align: center;
+    font-size: 20px;
+    font-weight: bold;
+    background-color: #534B4B;
+}
+.BITDisabilityListValues>:nth-child(1)>:nth-child(1){
+    background-color: #363640;
+    color:  rgba(255, 255, 255, 0.747);
+}
+.BITDisabilityListValues>:nth-child(2){
+    width: 100%;
+    text-align: center;
+    font-size: 20px;
+    font-weight: bold;
+    background-color: #534B4B;
+}
+.footer{
+    position: relative;
+    top: 10px;
+    width: 100%;
+    height: 36px;
+    line-height: 37px;
+    display: grid;
+	grid-template-columns:150px 100px 485px 100px 200px 100px 410px 150px 150px;
+}
+.footer_disNum{
+    position: relative;
+    left: 00px;
+    color: #ffffff;
+    text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
+    text-align: center;
+    font-size: 20px;
+    font-weight: bold;
+    width: 150px;
+}
+.footer_disNumBox{
+    position: relative;
+    top:4px;
+    left: 00px;
+    border-radius: 10px;
+    border: 1px solid black;
+    background-color:  rgba(255, 255, 255, 0.747);
+    text-align: center;
+    font-size: 20px;
+    font-weight: bold;
+    width: 150px;
+    height: 30px;
+    line-height: 30px;
+}
+.footer_previous{
+    visibility: hidden;
+    position: relative;
+    margin: 0px auto;
+    color:  rgba(255, 255, 255, 0.747);
+    text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
+    text-align: center;
+    font-size: 20px;
+    font-weight: bold;
+    width: 80px;
+    height: 30px;
+}
+.footer_previous:hover{
+    cursor: pointer;
+    color: #9dafe0
+    !important;
+}
+.footer_previous:active{
+    color: #6082e2
+    !important;
+}
+.footer_previous10{
+    visibility: hidden;
+    position: relative;
+    margin: 0px auto;
+    color: #ffffff;
+    text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
+    text-align: center;
+    font-size: 20px;
+    font-weight: bold;
+    width: 80px;
+    height: 30px;
+    left: 200px;
+}
+.footer_previous10:hover{
+    cursor: pointer;
+    color: #9dafe0
+    !important;
+}
+.footer_previous10:active{
+    color: #6082e2
+    !important;
+}
+.fotter_page{
+    position: relative;
+    top:4px;
+    border-radius: 10px;
+    border: 1px solid black;
+    background-color:  rgba(255, 255, 255, 0.747);
+    text-align: center;
+    font-size: 20px;
+    font-weight: bold;
+    height: 30px;
+    width: 199px;
+    line-height: 30px;
+}
+.footer_next{
+    position: relative;
+    margin: 0px auto;
+    color:  rgba(255, 255, 255, 0.747);
+    text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
+    text-align: center;
+    font-size: 20px;
+    font-weight: bold;
+    width: 80px;
+    height: 30px;
+}
+.footer_next:hover{
+    cursor: pointer;
+    color: #9dafe0
+    !important;
+}
+.footer_next:active{
+    color: #6082e2
+    !important;
+}
+.footer_next10{
+    visibility: hidden;
+    position: relative;
+    margin: 0px auto;
+    color: #ffffff;
+    text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
+    text-align: center;
+    font-size: 20px;
+    font-weight: bold;
+    width: 80px;
+    height: 30px;
+    right: 164px;
+}
+.footer_next10:hover{
+    cursor: pointer;
+    color: #9dafe0
+    !important;
+}
+.footer_next10:active{
+    color: #6082e2
+    !important;
+}
+.footer_excel{
+    position: relative;
+    top:4px;
+    margin: 0px auto;
+    border-radius: 10px;
+    border: 1px solid black;
+    background: linear-gradient(to bottom, hsl(0, 0%, 0%), hsl(0, 0%, 0%), #534B4B);
+    color: rgba(255, 255, 255, 0.747);
+    text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
+    text-align: center;
+    font-size: 20px;
+    font-weight: bold;
+    width: 140px;
+    height: 30px;
+    line-height: 30px;
+}
+.footer_excel:hover{
+    cursor: pointer;
+    color: #9dafe0
+    !important;
+}
+.footer_excel:active{
+    color: #6082e2
+    !important;
+}
+.footer_refresh{
+    position: relative;
+    top:4px;
+    margin: 0px auto;
+    border-radius: 10px;
+    border: 1px solid black;
+    background: linear-gradient(to bottom, hsl(0, 0%, 0%), hsl(0, 0%, 0%), #534B4B);
+    color: rgba(255, 255, 255, 0.747);
+    text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
+    text-align: center;
+    font-size: 20px;
+    font-weight: bold;
+    width: 140px;
+    height: 30px;
+    line-height: 30px;
+}
+.footer_refresh:hover{
+    cursor: pointer;
+    color: #9dafe0
+    !important;
+}
+.footer_refresh:active{
+    color: #6082e2
+    !important;
+}
+
+.jconfirm-title{
+    font-weight: bold;
+    font-size: 16px !important;
+}
+.jconfirm-content > div{
+    color: black;
+    font-weight: bold;
+}
+.blue{
+    color: #4da5e0;
+}

src/main/resources/static/application/facility/main/old/main.html

@@ -0,0 +1,858 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <script src="/libs/jquery/jquery-3.6.0.min.js"></script>
+		<script src="/libs/include-dialog.js"></script>
+        <script src="/libs/excel/xlsx.full.min.js"></script>
+        <script src="/libs/excel/FileSaver.min.js"></script>
+        <script src="/libs/highchart/highcharts.js"></script>
+		<script src="/js/constant/constant.js"></script>
+        <script src="/libs/highchart/highcharts-more.js"></script>
+        <script src="/libs/highchart/modules/solid-gauge.js"></script>
+        <script src="/libs/highchart/modules/accessibility.js"></script>
+		<link rel="stylesheet" href="./main.css" />
+        <link rel="icon" href="data:;base64,iVBORw0KGgo=">
+
+        <title>용인시 첨단교통센터 시설물 모니터링</title>
+    </head>
+
+    <body>
+        <div class="header  bassBgColor">
+            <img class="logo-img" src="/images/application_facility/logo.png" alt="logo" />
+            <div class="bassWordColor"> 용인시 첨단교통센터 시설물 모니터링</div>
+            <div id="clock" class="bassWordColor"></div>
+        </div>
+        <div class="firstBox bassBgColor">
+            <div class="facSttsInfo bassBgColor">
+                <div class="tag bassWordColor tagColor">&nbsp;&nbsp; 현장 시설물 상태정보</div>
+
+                <div class="VMSSttsInfo">
+                    <table>
+                        <tr>
+                            <td class ="tableColor" rowspan="3">VMS 상태정보</td>
+                            <td id="VMSToggle" class="communicationSatusToggle tableColor" colspan="3">통신상태</td>
+                        </tr>
+                        <tr>
+                            <td class ="tableColor" width="200px">전체</td>
+                            <td class ="tableColor" width="200px">유선정상</td>
+                            <td class ="tableColor" width="200px">유선장애</td>
+                        </tr>
+                        <tr class="VMS_TYPE">
+                            <td class="VMS_TOTAL valueColor" id="VMS_TOTAL">-</td>
+                            <td class="VMS_NORMAL valueColor" id="VMS_NORMAL">-</td>
+                            <td class="VMS_ERROR valueColor" id="VMS_ERROR">-</td>
+                        </tr>
+                    </table>
+                </div>
+                <div class="CCTVSttsInfo">
+                    <table>
+                        <tr>
+                            <td class ="tableColor" rowspan="3">CCTV 상태정보</td>
+                            <td id="CCTVToggle" class="communicationSatusToggle tableColor" colspan="3">통신상태</td>
+                        </tr>
+                        <tr>
+                            <td class ="tableColor" width="200px">전체</td>
+                            <td class ="tableColor" width="200px">유선정상</td>
+                            <td class ="tableColor" width="200px">유선장애</td>
+                        </tr>
+                        <tr class="CCTV_TYPE">
+                            <td class="CCTV_TOTAL valueColor">-</td>
+                            <td class="CCTV_NORMAL valueColor">-</td>
+                            <td class="CCTV_ERROR valueColor">-</td>
+                        </tr>
+                    </table>
+                </div>
+                <div class="VDSSttsInfo">
+                    <table>
+                        <tr>
+                            <td class ="tableColor" rowspan="3">VDS 상태정보</td>
+                            <td id="VDSToggle" class="communicationSatusToggle tableColor" colspan="3">통신상태</td>
+                        </tr>
+                        <tr>
+                            <td class ="tableColor" width="200px">전체</td>
+                            <td class ="tableColor" width="200px">유선정상</td>
+                            <td class ="tableColor" width="200px">유선장애</td>
+                        </tr>
+                        <tr class="VDS_TYPE">
+                            <td class="VDS_TOTAL valueColor">-</td>
+                            <td class="VDS_NORMAL valueColor">-</td>
+                            <td class="VDS_ERROR valueColor">-</td>
+                        </tr>
+                    </table>
+                </div>
+                
+
+                <div class="RSESttsInfo">
+                    <div id="linkTraffic"></div>
+                    <!-- <table>
+                        <tr>
+                            <td class ="tableColor" rowspan="3">RSE 상태정보</td>
+                            <td id="RSEToggle" class="communicationSatusToggle tableColor" colspan="3">통신상태</td>
+                        </tr>
+                        <tr>
+                            <td class ="tableColor" width="200px">전체</td>
+                            <td class ="tableColor" width="200px">유선정상</td>
+                            <td class ="tableColor" width="200px">유선장애</td>
+                        </tr>
+                        <tr class="RSE_TYPE">
+                            <td class="RSE_TOTAL valueColor">-</td>
+                            <td class="RSE_NORMAL valueColor">-</td>
+                            <td class="RSE_ERROR valueColor">-</td>
+                        </tr>
+                    </table> -->
+                </div>
+                <div class="BITSttsInfo">
+                    <table>
+                        <tr>
+                            <td class ="tableColor" rowspan="3">BIT 상태정보</td>
+                            <td id="BITToggle" class="communicationSatusToggle tableColor" colspan="3">통신상태</td>
+                        </tr>
+                        <tr>
+                            <td class ="tableColor" width="200px">전체</td>
+                            <td class ="tableColor" width="200px">유선정상</td>
+                            <td class ="tableColor" width="200px">유선장애</td>
+                        </tr>
+                        <tr class="BIT_TYPE">
+                            <td class="BIT_TOTAL valueColor">-</td>
+                            <td class="BIT_NORMAL valueColor">-</td>
+                            <td class="BIT_ERROR valueColor">-</td>
+                        </tr>
+                    </table>
+                </div>
+                <div class="blank">
+                    <div id="linkTrafficRate"></div>
+                </div>
+            </div>
+
+            <div class="dbUsaInfo bassBgColor">
+                <div class="tag2 bassWordColor tagColor">&nbsp;&nbsp;테이터베이스 TableSpace 사용정보</div>
+                <div class="tag3 bassWordColor tagColor">&nbsp;&nbsp;데이터베이스 Session 사용정보 - 사용률(%)</div>
+                <div class="dbTableSpace">
+                    <table>
+                        <tr>
+                            <td class ="tableColor" width="280px" height="20px">DB 서버</td>
+                            <td class ="tableColor" >Table Space 명</td>
+                            <td class ="tableColor">사용률(%)</td>
+                        </tr>
+                        <tr class="db1_serverNameId">
+                            <td class ="db1_dbSeverName tableColor" rowspan="2">ITS DB</td>
+                            <td class="db1_tableName valueColor"></td>
+                            <td class="db1_tableRemSpace valueColor"></td>
+                        </tr>
+                        <tr class="db2_serverNameId">
+                            <!-- <td class ="db2_dbSeverName tableColor"></td> -->
+                            <td class="db2_tableName valueColor"></td>
+                            <td class="db2_tableRemSpace valueColor"></td>
+                        </tr>
+                        <tr class="db3_serverNameId">
+                            <td class ="db3_dbSeverName tableColor" rowspan="2">BIS DB</td>
+                            <td class ="db3_tableName valueColor"></td>
+                            <td class ="db3_tableRemSpace valueColor"></td>
+                        </tr>
+                        <tr class = "db4_serverNameId">
+                            <!-- <td class ="db4_dbSeverName tableColor"></td> -->
+                            <td class="db4_tableName valueColor"></td>
+                            <td class="db4_tableRemSpace valueColor"></td>
+                        </tr>
+                    </table>
+                </div>
+                <div class="dbSession">
+                    <div id="db1_useSession"></div>
+                    <div id="db2_useSession"></div>
+                    <div id="db3_useSession"></div>
+                    <div id="db4_useSession"></div>
+                    <!-- <table>
+                        <tr>
+                            <td  class ="tableColor"height="20px">DB 서버</td>
+                            <td  class ="tableColor"colspan="3">사용중 세션(%)</td>
+                        </tr>
+                        <tr class="db1_serverNameId">
+                            <td class ="db1_dbSeverName tableColor"></td>
+                            <td class="db1_useSession valueColor"></td>
+                        </tr>
+                        <tr class="db2_serverNameId">
+                            <td class ="db2_dbSeverName tableColor"></td>
+                            <td class="db2_useSession valueColor"></td>
+                        </tr>
+                        <tr class="db3_serverNameId">
+                            <td class ="db3_dbSeverName tableColor"></td>
+                            <td class="db3_useSession valueColor"></td>
+                        </tr>
+                    </table> -->
+                </div>
+                <!-- <div class="dbSession2">
+                    <table>
+                        <tr>
+                            <td  class ="tableColor"height="20px">DB 서버</td>
+                            <td  class ="tableColor"colspan="3">사용중 세션(%)</td>
+                        </tr>
+                        <tr class="db4_serverNameId">
+                            <td class ="db4_dbSeverName tableColor"></td>
+                            <td class="db4_useSession valueColor"></td>
+                        </tr>
+                        <tr class="db5_serverNameId">
+                            <td class ="db5_dbSeverName tableColor"></td>
+                            <td class="db5_useSession valueColor"></td>
+                        </tr>
+                        <tr class="db6_serverNameId">
+                            <td class ="db6_dbSeverName tableColor"></td>
+                            <td class="db6_useSession valueColor"></td>
+                        </tr>
+                    </table>
+                </div> -->
+            </div>
+        </div>
+
+        <div class="secondBox bassBgColor">
+            <!--초기화면-->
+            <div class="centerPsSttsInfo">
+                <div class="tag4 bassWordColor tagColor" >&nbsp;&nbsp;센터 프로세스 상태정보</div>
+                <div class="tag4-1 bassWordColor" style="width: 455px">&nbsp;&nbsp; >DB/가공</div>
+                <div class="tag4-1 bassWordColor" style="width: 435px">>ITS 프로세스</div>
+                <div class="tag4-1 bassWordColor" style="width: 690px">>BIS 프로세스</div>
+                <div class="tag4-1 bassWordColor">
+                    정상 <img src="/images/application_facility/stts0.png" alt="blue" style="top:8px; position:relative;"/>&nbsp;&nbsp; 
+                    장애 <img src="/images/application_facility/stts1.png" alt="red" style="top:8px; position:relative;"/>&nbsp;&nbsp;
+                    알수없음 <img class="grey" src="/images/application_facility/stts2.png" alt="gray" style="top:8px; position:relative;"/>
+                </div>
+                <div class="dbManu">
+                    <table class="Minitable">
+                        <tr>
+                            <td class="tableColor" colspan="3" style="border-radius: 20px 20px 0px 0px">교통정보 가공</td>
+                        </tr>
+                        <tr>
+                            <td class="tableColor" style="width: 50%">통신</td>
+                            <td class="tableColor">DB</td>
+                        </tr>
+                        <tr class="UTP01_systemId">
+                            <td class="comStts_UTP01 valueColor"><img class="grey" src="/images/application_facility/stts2.png" alt="gray" style="top:8px; position:relative;"/></td>
+                            <td class="dbStts_UTP01 valueColor"><img class="grey" src="/images/application_facility/stts2.png" alt="gray" style="top:8px; position:relative;"/></td>
+                        </tr>
+                    </table>
+                    <table class="Minitable">
+                        <tr>
+                            <td class="tableColor" colspan="3" style="border-radius: 20px 20px 0px 0px">민간정보 연계</td>
+                        </tr>
+                        <tr>
+                            <td class="tableColor" style="width: 50%">통신</td>
+                            <td class="tableColor">DB</td>
+                        </tr>
+                        <tr class="MOCT01_systemId">
+                            <td class="comStts_MOCT01 valueColor"><img class="grey" src="/images/application_facility/stts2.png" alt="gray" style="top:8px; position:relative;"/></td>
+                            <td class="dbStts_MOCT01 valueColor"><img class="grey" src="/images/application_facility/stts2.png" alt="gray" style="top:8px; position:relative;"/></td>
+                        </tr>
+                    </table>
+
+
+
+
+                    <!--변경항목-->
+                    <table class="Minitable">
+                        <tr>
+                            <td class="tableColor" colspan="3" style="border-radius: 20px 20px 0px 0px">BIS기반정보 연계</td>
+                        </tr>
+                        <tr>
+                            <td class="tableColor" style="width: 50%">통신</td>
+                            <td class="tableColor">DB</td>
+                        </tr>
+                        <tr class="systemId_110201">
+                            <td class="comStts_110201 valueColor"><img class="grey" src="/images/application_facility/stts2.png" alt="gray" style="top:8px; position:relative;"/></td>
+                            <td class="dbStts_110201 valueColor"><img class="grey" src="/images/application_facility/stts2.png" alt="gray" style="top:8px; position:relative;"/></td>
+                        </tr>
+                    </table>
+                    <table class="Minitable">
+                        <tr>
+                            <td class="tableColor" colspan="3" style="border-radius: 20px 20px 0px 0px">마을버스 연계</td>
+                        </tr>
+                        <tr>
+                            <td class="tableColor" style="width: 50%">통신</td>
+                            <td class="tableColor">DB</td>
+                        </tr>
+                        <tr class="systemId_160101">
+                            <td class="comStts_160101 valueColor"><img class="grey" src="/images/application_facility/stts2.png" alt="gray" style="top:8px; position:relative;"/></td>
+                            <td class="dbStts_160101 valueColor"><img class="grey" src="/images/application_facility/stts2.png" alt="gray" style="top:8px; position:relative;"/></td>
+                        </tr>
+                    </table>
+                    <!-- <table class="Minitable">
+                        <tr>
+                            <td class="tableColor" colspan="3" style="border-radius: 20px 20px 0px 0px">BIS 자료구축</td>
+                        </tr>
+                        <tr>
+                            <td class="tableColor" style="width: 50%">통신</td>
+                            <td class="tableColor">DB</td>
+                        </tr>
+                        <tr class="systemId_10901">
+                            <td class="comStts_10901 valueColor"></td>
+                            <td class="dbStts_10901 valueColor"></td>
+                        </tr>
+                    </table>
+                    <table class="Minitable">
+                        <tr>
+                            <td class="tableColor" colspan="3" style="border-radius: 20px 20px 0px 0px">BIS 예측정보</td>
+                        </tr>
+                        <tr>
+                            <td class="tableColor" style="width: 50%">통신</td>
+                            <td class="tableColor">DB</td>
+                        </tr>
+                        <tr class="systemId_11001">
+                            <td class="comStts_11001 valueColor"></td>
+                            <td class="dbStts_11001 valueColor"></td>
+                        </tr>
+                    </table> -->
+
+
+
+
+
+                    <!--없어진 항목-->
+                    <!-- <table class="Minitable">
+                        <tr>
+                            <td class="tableColor" colspan="3" style="border-radius: 20px 20px 0px 0px">BIS 패턴처리</td>
+                        </tr>
+                        <tr>
+                            <td class="tableColor" style="width: 50%">통신</td>
+                            <td class="tableColor">DB</td>
+                        </tr>
+                        <tr class="systemId_11101">
+                            <td class="comStts_11101 valueColor"><img class="grey" src="/images/application_facility/stts2.png" alt="gray" style="top:8px; position:relative;"/></td>
+                            <td class="dbStts_11101 valueColor"><img class="grey" src="/images/application_facility/stts2.png" alt="gray" style="top:8px; position:relative;"/></td>
+                        </tr>
+                    </table>
+                    <table class="Minitable">
+                        <tr>
+                            <td class="tableColor" colspan="3" style="border-radius: 20px 20px 0px 0px">BIS 통계정리</td>
+                        </tr>
+                        <tr>
+                            <td class="tableColor" style="width: 50%">통신</td>
+                            <td class="tableColor">DB</td>
+                        </tr>
+                        <tr class="systemId_11201">
+                            <td class="comStts_11201 valueColor"><img class="grey" src="/images/application_facility/stts2.png" alt="gray" style="top:8px; position:relative;"/></td>
+                            <td class="dbStts_11201 valueColor"><img class="grey" src="/images/application_facility/stts2.png" alt="gray" style="top:8px; position:relative;"/></td>
+                        </tr>
+                    </table> -->
+                </div>
+                <div class="itsProcess">
+                    <table class="Minitable">
+                        <tr>
+                            <td class="tableColor" colspan="3" style="border-radius: 20px 20px 0px 0px">기상청 연계</td>
+                        </tr>
+                        <tr>
+                            <td class="tableColor" style="width: 50%">통신</td>
+                            <td class="tableColor">DB</td>
+                        </tr>
+                        <tr class="EXT01_systemId">
+                            <td class="comStts_EXT01 valueColor"><img class="grey" src="/images/application_facility/stts2.png" alt="gray" style="top:8px; position:relative;"/></td>
+                            <td class="dbStts_EXT01 valueColor"><img class="grey" src="/images/application_facility/stts2.png" alt="gray" style="top:8px; position:relative;"/></td>
+                        </tr>
+                    </table>
+                    <table class="Minitable">
+                        <tr>
+                            <td class="tableColor" colspan="3" style="border-radius: 20px 20px 0px 0px">인터넷</td>
+                        </tr>
+                        <tr>
+                            <td class="tableColor" style="width: 50%">통신</td>
+                            <td class="tableColor">DB</td>
+                        </tr>
+                        <tr class="WEB01_systemId">
+                            <td class="comStts_WEB01 valueColor"><img class="grey" src="/images/application_facility/stts2.png" alt="gray" style="top:8px; position:relative;"/></td>
+                            <td class="dbStts_WEB01 valueColor"><img class="grey" src="/images/application_facility/stts2.png" alt="gray" style="top:8px; position:relative;"/></td>
+                        </tr>
+                    </table>
+                    <table class="Minitable">
+                        <tr>
+                            <td class="tableColor" colspan="3" style="border-radius: 20px 20px 0px 0px">CCTV 통신서버</td>
+                        </tr>
+                        <tr>
+                            <td class="tableColor" style="width: 50%">통신</td>
+                            <td class="tableColor">DB</td>
+                        </tr>
+                        <tr class="CTV01_systemId">
+                            <td class="comStts_CTV01 valueColor"><img class="grey" src="/images/application_facility/stts2.png" alt="gray" style="top:8px; position:relative;"/></td>
+                            <td class="dbStts_CTV01 valueColor"><img class="grey" src="/images/application_facility/stts2.png" alt="gray" style="top:8px; position:relative;"/></td>
+                        </tr>
+                    </table>
+                    <table class="Minitable">
+                        <tr>
+                            <td class="tableColor" colspan="3" style="border-radius: 20px 20px 0px 0px">VDS 통신서버</td>
+                        </tr>
+                        <tr>
+                            <td class="tableColor" style="width: 50%">통신</td>
+                            <td class="tableColor">DB</td>
+                        </tr>
+                        <tr class="VDS01_systemId">
+                            <td class="comStts_VDS01 valueColor"><img class="grey" src="/images/application_facility/stts2.png" alt="gray" style="top:8px; position:relative;"/></td>
+                            <td class="dbStts_VDS01 valueColor"><img class="grey" src="/images/application_facility/stts2.png" alt="gray" style="top:8px; position:relative;"/></td>
+                        </tr>
+                    </table>
+                    <table class="Minitable">
+                        <tr>
+                            <td class="tableColor" colspan="3" style="border-radius: 20px 20px 0px 0px">VMS 통신서버</td>
+                        </tr>
+                        <tr>
+                            <td class="tableColor" style="width: 50%">통신</td>
+                            <td class="tableColor">DB</td>
+                        </tr>
+                        <tr class="VMS01_systemId">
+                            <td class="comStts_VMS01 valueColor"><img class="grey" src="/images/application_facility/stts2.png" alt="gray" style="top:8px; position:relative;"/></td>
+                            <td class="dbStts_VMS01 valueColor"><img class="grey" src="/images/application_facility/stts2.png" alt="gray" style="top:8px; position:relative;"/></td>
+                        </tr>
+                    </table>
+                </div>
+                <div class="bisProcess">
+                    <table class="Minitable">
+                        <tr>
+                            <td class="tableColor" colspan="3" style="border-radius: 20px 20px 0px 0px">BIT 통신서버1</td>
+                        </tr>
+                        <tr>
+                            <td class="tableColor" style="width: 50%">통신</td>
+                            <td class="tableColor">DB</td>
+                        </tr>
+                        <tr class="systemId_90201">
+                            <td class="comStts_90201 valueColor"><img class="grey" src="/images/application_facility/stts2.png" alt="gray" style="top:8px; position:relative;"/></td>
+                            <td class="dbStts_90201 valueColor"><img class="grey" src="/images/application_facility/stts2.png" alt="gray" style="top:8px; position:relative;"/></td>
+                        </tr>
+                    </table>
+                    <table class="Minitable">
+                        <tr>
+                            <td class="tableColor" colspan="3" style="border-radius: 20px 20px 0px 0px">BIT 통신서버2</td>
+                        </tr>
+                        <tr>
+                            <td class="tableColor" style="width: 50%">통신</td>
+                            <td class="tableColor">DB</td>
+                        </tr>
+                        <tr class="systemId_90202">
+                            <td class="comStts_90202 valueColor"><img class="grey" src="/images/application_facility/stts2.png" alt="gray" style="top:8px; position:relative;"/></td>
+                            <td class="dbStts_90202 valueColor"><img class="grey" src="/images/application_facility/stts2.png" alt="gray" style="top:8px; position:relative;"/></td>
+                        </tr>
+                    </table>
+                    <table class="Minitable">
+                        <tr>
+                            <td class="tableColor" colspan="3" style="border-radius: 20px 20px 0px 0px">BIT 통신서버3</td>
+                        </tr>
+                        <tr>
+                            <td class="tableColor" style="width: 50%">통신</td>
+                            <td class="tableColor">DB</td>
+                        </tr>
+                        <tr class="systemId_90203">
+                            <td class="comStts_90203 valueColor"><img class="grey" src="/images/application_facility/stts2.png" alt="gray" style="top:8px; position:relative;"/></td>
+                            <td class="dbStts_90203 valueColor"><img class="grey" src="/images/application_facility/stts2.png" alt="gray" style="top:8px; position:relative;"/></td>
+                        </tr>
+                    </table>
+                    <table class="Minitable">
+                        <tr>
+                            <td class="tableColor" colspan="3" style="border-radius: 20px 20px 0px 0px">BIT 통신서버4</td>
+                        </tr>
+                        <tr>
+                            <td class="tableColor" style="width: 50%">통신</td>
+                            <td class="tableColor">DB</td>
+                        </tr>
+                        <tr class="systemId_90204">
+                            <td class="comStts_90204 valueColor"><img class="grey" src="/images/application_facility/stts2.png" alt="gray" style="top:8px; position:relative;"/></td>
+                            <td class="dbStts_90204 valueColor"><img class="grey" src="/images/application_facility/stts2.png" alt="gray" style="top:8px; position:relative;"/></td>
+                        </tr>
+                    </table>
+                    <table class="Minitable">
+                        <tr>
+                            <td class="tableColor" colspan="3" style="border-radius: 20px 20px 0px 0px">BIT 통신서버5</td>
+                        </tr>
+                        <tr>
+                            <td class="tableColor" style="width: 50%">통신</td>
+                            <td class="tableColor">DB</td>
+                        </tr>
+                        <tr class="systemId_90205">
+                            <td class="comStts_90205 valueColor"><img class="grey" src="/images/application_facility/stts2.png" alt="gray" style="top:8px; position:relative;"/></td>
+                            <td class="dbStts_90205 valueColor"><img class="grey" src="/images/application_facility/stts2.png" alt="gray" style="top:8px; position:relative;"/></td>
+                        </tr>
+                    </table>
+                    <table class="Minitable">
+                        <tr>
+                            <td class="tableColor" colspan="3" style="border-radius: 20px 20px 0px 0px">버스 정보제공1</td>
+                        </tr>
+                        <tr>
+                            <td class="tableColor" style="width: 50%">통신</td>
+                            <td class="tableColor">DB</td>
+                        </tr>
+                        <tr class="systemId_90101">
+                            <td class="comStts_90101 valueColor"><img class="grey" src="/images/application_facility/stts2.png" alt="gray" style="top:8px; position:relative;"/></td>
+                            <td class="dbStts_90101 valueColor"><img class="grey" src="/images/application_facility/stts2.png" alt="gray" style="top:8px; position:relative;"/></td>
+                        </tr>
+                    </table>
+                    <table class="Minitable">
+                        <tr>
+                            <td class="tableColor" colspan="3" style="border-radius: 20px 20px 0px 0px">버스 정보제공2</td>
+                        </tr>
+                        <tr>
+                            <td class="tableColor" style="width: 50%">통신</td>
+                            <td class="tableColor">DB</td>
+                        </tr>
+                        <tr class="systemId_90102">
+                            <td class="comStts_90102 valueColor"><img class="grey" src="/images/application_facility/stts2.png" alt="gray" style="top:8px; position:relative;"/></td>
+                            <td class="dbStts_90102 valueColor"><img class="grey" src="/images/application_facility/stts2.png" alt="gray" style="top:8px; position:relative;"/></td>
+                        </tr>
+                    </table>
+                    <table class="Minitable">
+                        <tr>
+                            <td class="tableColor" colspan="3" style="border-radius: 20px 20px 0px 0px">버스 정보제공3</td>
+                        </tr>
+                        <tr>
+                            <td class="tableColor" style="width: 50%">통신</td>
+                            <td class="tableColor">DB</td>
+                        </tr>
+                        <tr class="systemId_90103">
+                            <td class="comStts_90103 valueColor"><img class="grey" src="/images/application_facility/stts2.png" alt="gray" style="top:8px; position:relative;"/></td>
+                            <td class="dbStts_90103 valueColor"><img class="grey" src="/images/application_facility/stts2.png" alt="gray" style="top:8px; position:relative;"/></td>
+                        </tr>
+                    </table>
+                    <table class="Minitable">
+                        <tr>
+                            <td class="tableColor" colspan="3" style="border-radius: 20px 20px 0px 0px">버스 정보제공4</td>
+                        </tr>
+                        <tr>
+                            <td class="tableColor" style="width: 50%">통신</td>
+                            <td class="tableColor">DB</td>
+                        </tr>
+                        <tr class="systemId_90104">
+                            <td class="comStts_90104 valueColor"><img class="grey" src="/images/application_facility/stts2.png" alt="gray" style="top:8px; position:relative;"/></td>
+                            <td class="dbStts_90104 valueColor"><img class="grey" src="/images/application_facility/stts2.png" alt="gray" style="top:8px; position:relative;"/></td>
+                        </tr>
+                    </table>
+                    <table class="Minitable">
+                        <tr>
+                            <td class="tableColor" colspan="3" style="border-radius: 20px 20px 0px 0px">버스 정보제공5</td>
+                        </tr>
+                        <tr>
+                            <td class="tableColor" style="width: 50%">통신</td>
+                            <td class="tableColor">DB</td>
+                        </tr>
+                        <tr class="systemId_90104">
+                            <td class="comStts_90105 valueColor"><img class="grey" src="/images/application_facility/stts2.png" alt="gray" style="top:8px; position:relative;"/></td>
+                            <td class="dbStts_90105 valueColor"><img class="grey" src="/images/application_facility/stts2.png" alt="gray" style="top:8px; position:relative;"/></td>
+                        </tr>
+                    </table>
+                    <table class="Minitable">
+                        <tr>
+                            <td class="tableColor"td class="tableColor"td colspan="3" style="border-radius: 20px 20px 0px 0px">시내버스 가공</td>
+                        </tr>
+                        <tr>
+                            <td class="tableColor" style="width: 50%">통신</td>
+                            <td class="tableColor">DB</td>
+                        </tr>
+                        <tr class="systemId_80101">
+                            <td class="comStts_80101 valueColor"><img class="grey" src="/images/application_facility/stts2.png" alt="gray" style="top:8px; position:relative;"/></td>
+                            <td class="dbStts_80101 valueColor"><img class="grey" src="/images/application_facility/stts2.png" alt="gray" style="top:8px; position:relative;"/></td>
+                        </tr>
+                    </table>
+                    <table class="Minitable">
+                        <tr>
+                            <td class="tableColor" colspan="3" style="border-radius: 20px 20px 0px 0px">마을버스 가공</td>
+                        </tr>
+                        <tr>
+                            <td class="tableColor" style="width: 50%">통신</td>
+                            <td class="tableColor">DB</td>
+                        </tr>
+                        <tr class="systemId_80201">
+                            <td class="comStts_80201 valueColor"><img class="grey" src="/images/application_facility/stts2.png" alt="gray" style="top:8px; position:relative;"/></td>
+                            <td class="dbStts_80201 valueColor"><img class="grey" src="/images/application_facility/stts2.png" alt="gray" style="top:8px; position:relative;"/></td>
+                        </tr>
+                    </table>
+                    <!-- <table class="Minitable">
+                        <tr>
+                            <td class="tableColor"td class="tableColor"td colspan="3" style="border-radius: 20px 20px 0px 0px">위치 가공1</td>
+                        </tr>
+                        <tr>
+                            <td class="tableColor" style="width: 50%">통신</td>
+                            <td class="tableColor">DB</td>
+                        </tr>
+                        <tr class="systemId_80101">
+                            <td class="comStts_80101 valueColor"></td>
+                            <td class="dbStts_80101 valueColor"></td>
+                        </tr>
+                    </table>
+                    <table class="Minitable">
+                        <tr>
+                            <td class="tableColor" colspan="3" style="border-radius: 20px 20px 0px 0px">위치 가공2</td>
+                        </tr>
+                        <tr>
+                            <td class="tableColor" style="width: 50%">통신</td>
+                            <td class="tableColor">DB</td>
+                        </tr>
+                        <tr class="systemId_80102">
+                            <td class="comStts_80102 valueColor"></td>
+                            <td class="dbStts_80102 valueColor"></td>
+                        </tr>
+                    </table> -->
+
+
+
+
+
+
+
+
+                    <!--없어진 항목-->
+                    <!-- <table class="Minitable">
+                        <tr>
+                            <td class="tableColor" colspan="3" style="border-radius: 20px 20px 0px 0px">BIS 기반정보</td>
+                        </tr>
+                        <tr>
+                            <td class="tableColor" style="width: 50%">통신</td>
+                            <td class="tableColor">DB</td>
+                        </tr>
+                        <tr class="systemId_110201">
+                            <td class="comStts_110201 valueColor"><img class="grey" src="/images/application_facility/stts2.png" alt="gray" style="top:8px; position:relative;"/></td>
+                            <td class="dbStts_110201 valueColor"><img class="grey" src="/images/application_facility/stts2.png" alt="gray" style="top:8px; position:relative;"/></td>
+                        </tr>
+                    </table>
+                    <table class="Minitable">
+                        <tr>
+                            <td class="tableColor" colspan="3" style="border-radius: 20px 20px 0px 0px">BMS 연계서버</td>
+                        </tr>
+                        <tr>
+                            <td class="tableColor" style="width: 50%">통신</td>
+                            <td class="tableColor">DB</td>
+                        </tr>
+                        <tr class="systemId_110101">
+                            <td class="comStts_110101 valueColor"><img class="grey" src="/images/application_facility/stts2.png" alt="gray" style="top:8px; position:relative;"/></td>
+                            <td class="dbStts_110101 valueColor"><img class="grey" src="/images/application_facility/stts2.png" alt="gray" style="top:8px; position:relative;"/></td>
+                        </tr>
+                    </table> -->
+                </div>
+            </div>
+
+            <!--VMS 통신상태-->
+            <div class="VMSDisabilityStautsList">
+                <div class="tag5 tagColor bassWordColor">&nbsp;&nbsp;VMS 통신상태 장애현황 리스트</div>
+                <div class="xToggle bassWordColor tagColor">&nbsp;&nbsp;&nbsp;&nbsp;X</div>
+                <div class="VMSDisabilityList">
+                    <div class="VMSDisabilityListValues">
+                        <table>
+                            <tr>
+                                <td class = "tableColor" width="200">VMS ID</td>
+                                <td class = "tableColor" width="200">관리번호</td>
+                                <td class = "tableColor" width="500">설치위치</td>
+                                <td class = "tableColor" width="200">통신 상태</td>
+                                <td class = "tableColor" width="200">장애횟수</td>
+                                <td class = "tableColor" width="200">장애일시</td>
+                            </tr>
+                        </table>
+                        <table class="VMSDisabilityListValuesInsert "></table>
+                    </div>
+                    <div id="VMSTable" class="VMSDisabilityListValuesHidden">
+                        <table>
+                            <tr>
+                                <td width="200">VMS ID</td>
+                                <td width="200">관리번호</td>
+                                <td width="500">설치위치</td>
+                                <td width="200">통신 상태</td>
+                                <td width="200">장애횟수</td>
+                                <td width="200">장애일시</td>
+                            </tr>
+                        </table>
+                        <table class="VMSDisabilityListValuesInsertHidden"></table>
+                    </div>
+                    <div class="footer">
+                        <div class="footer_disNum bassWordColor">장애 개수&nbsp; :</div>
+                        <div class="footer_disNumBox valueColor"></div>
+                        <div class="footer_previous10"><< 10</div>
+                        <div class="footer_previous bassWordColor"><< 이전</div>
+                        <div class="fotter_page valueColor">0</div>
+                        <div class="footer_next bassWordColor">다음 >></div>
+                        <div class="footer_next10">10 >></div>
+                        <div class="footer_excel bassWordColor">엑셀저장</div>
+                        <div id="VMSRefresh" class="footer_refresh bassWordColor">새로고침</div>
+                    </div>
+                </div>
+            </div>
+
+            <!--CCTV 통신상태-->
+            <div class="CCTVDisabilityStautsList">
+                <div class="tag5 tagColor bassWordColor">&nbsp;&nbsp;CCTV 통신상태 장애현황 리스트</div>
+                <div class="xToggle bassWordColor tagColor">&nbsp;&nbsp;&nbsp;&nbsp;X</div>
+                <div class="CCTVDisabilityList">
+                    <div class="CCTVDisabilityListValues">
+                        <table>
+                            <tr>
+                                <td class = "tableColor" width="200">CCTV ID</td>
+                                <td class = "tableColor" width="200">관리번호</td>
+                                <td class = "tableColor" width="500">설치위치</td>
+                                <td class = "tableColor" width="200">통신 상태</td>
+                                <td class = "tableColor" width="200">장애횟수</td>
+                                <td class = "tableColor" width="200">장애일시</td>
+                            </tr>
+                        </table>
+                        <table class="CCTVDisabilityListValuesInsert"></table>
+                    </div>
+                    <div id="CCTVTable" class="CCTVDisabilityListValuesHidden">
+                        <table>
+                            <tr>
+                                <td width="200">CCTV ID</td>
+                                <td width="200">관리번호</td>
+                                <td width="500">설치위치</td>
+                                <td width="200">통신 상태</td>
+                                <td width="200">장애횟수</td>
+                                <td width="200">장애일시</td>
+                            </tr>
+                        </table>
+                        <table class="CCTVDisabilityListValuesInsertHidden"></table>
+                    </div>
+                    <div class="footer">
+                        <div class="footer_disNum bassWordColor">장애 개수&nbsp; :</div>
+                        <div class="footer_disNumBox valueColor"></div>
+                        <div class="footer_previous10"><< 10</div>
+                        <div class="footer_previous bassWordColor"><< 이전</div>
+                        <div class="fotter_page valueColor">0</div>
+                        <div class="footer_next bassWordColor">다음 >></div>
+                        <div class="footer_next10">10 >></div>
+                        <div class="footer_excel bassWordColor">엑셀저장</div>
+                        <div id="CCTVRefresh" class="footer_refresh bassWordColor">새로고침</div>
+                    </div>
+                </div>
+            </div>
+
+            <!--VDS 통신상태-->
+            <div class="VDSDisabilityStautsList">
+                <div class="tag5 tagColor bassWordColor">&nbsp;&nbsp;VDS 통신상태 장애현황 리스트</div>
+                <div class="xToggle bassWordColor tagColor">&nbsp;&nbsp;&nbsp;&nbsp;X</div>
+                <div class="VDSDisabilityList">
+                    <div class="VDSDisabilityListValues">
+                        <table>
+                            <tr>
+                                <td class = "tableColor" width="200">VDS ID</td>
+                                <td class = "tableColor" width="200">관리번호</td>
+                                <td class = "tableColor" width="500">설치위치</td>
+                                <td class = "tableColor" width="200">통신 상태</td>
+                                <td class = "tableColor" width="200">수집 장애</td>
+                                <td class = "tableColor" width="200">장애횟수</td>
+                                <td class = "tableColor" width="200">장애일시</td>
+                            </tr>
+                        </table>
+                        <table class="VDSDisabilityListValuesInsert"></table>
+                    </div>
+                    <div id="VDSTable" class="VDSDisabilityListValuesHidden">
+                        <table>
+                            <tr>
+                                <td width="200">VDS ID</td>
+                                <td width="200">관리번호</td>
+                                <td width="500">설치위치</td>
+                                <td width="200">통신 상태</td>
+                                <td width="200">수집 장애</td>
+                                <td width="200">장애횟수</td>
+                                <td width="200">장애일시</td>
+                            </tr>
+                        </table>
+                        <table class="VDSDisabilityListValuesInsertHidden"></table>
+                    </div>
+                    <div class="footer">
+                        <div class="footer_disNum bassWordColor">장애 개수&nbsp; :</div>
+                        <div class="footer_disNumBox valueColor"></div>
+                        <div class="footer_previous10"><< 10</div>
+                        <div class="footer_previous bassWordColor"><< 이전</div>
+                        <div class="fotter_page valueColor">0</div>
+                        <div class="footer_next bassWordColor">다음 >></div>
+                        <div class="footer_next10">10 >></div>
+                        <div class="footer_excel bassWordColor">엑셀저장</div>
+                        <div id="VDSRefresh" class="footer_refresh bassWordColor">새로고침</div>
+                    </div>
+                </div>
+            </div>
+
+            <!--RSE 통신상태-->
+            <div class="RSEDisabilityStautsList">
+                <div class="tag5 tagColor bassWordColor">&nbsp;&nbsp;RSE 통신상태 장애현황 리스트</div>
+                <div class="xToggle bassWordColor tagColor">&nbsp;&nbsp;&nbsp;&nbsp;X</div>
+                <div class="RSEDisabilityList">
+                    <div class="RSEDisabilityListValues">
+                        <table>
+                            <tr>
+                                <td class = "tableColor" width="400">RSE ID</td>
+                                <td class = "tableColor" width="500">설치위치</td>
+                                <td class = "tableColor" width="300">통신 상태</td>
+                                <td class = "tableColor" width="300">장애일시</td>
+                            </tr>
+                        </table>
+                        <table class="RSEDisabilityListValuesInsert"></table>
+                    </div>
+                    <div id="RSETable" class="RSEDisabilityListValuesHidden">
+                        <table>
+                            <tr>
+                                <td width="400">RSE ID</td>
+                                <td width="500">설치위치</td>
+                                <td width="300">통신 상태</td>
+                                <td width="300">장애일시</td>
+                            </tr>
+                        </table>
+                        <table class="RSEDisabilityListValuesInsertHidden"></table>
+                    </div>
+                    <div class="footer">
+                        <div class="footer_disNum bassWordColor">장애 개수&nbsp; :</div>
+                        <div class="footer_disNumBox valueColor"></div>
+                        <div class="footer_previous10">&lt;&lt; 10</div>
+                        <div class="footer_previous bassWordColor">&lt;&lt; 이전</div>
+                        <div class="fotter_page valueColor">0</div>
+                        <div class="footer_next bassWordColor">다음 >></div>
+                        <div class="footer_next10">10 >></div>
+                        <div class="footer_excel bassWordColor">엑셀저장</div>
+                        <div id="RSERefresh" class="footer_refresh bassWordColor">새로고침</div>
+                    </div>
+                </div>
+            </div>
+
+            <!--BIT 통신상태-->
+            <div class="BITDisabilityStautsList">
+                <div class="tag5 tagColor bassWordColor">&nbsp;&nbsp;BIT 통신상태 장애현황 리스트</div>
+                <div class="xToggle bassWordColor tagColor">&nbsp;&nbsp;&nbsp;&nbsp;X</div>
+                <div class="BITDisabilityList">
+                    <div class="BITDisabilityListValues">
+                        <table>
+                            <tr>
+                                <td class = "tableColor" width="200">BIT ID</td>
+                                <td class = "tableColor" width="200">Mobile ID</td>
+                                <td class = "tableColor" width="500">설치위치</td>
+                                <td class = "tableColor" width="200">통신 상태</td>
+                                <td class = "tableColor" width="200">장애횟수</td>
+                                <td class = "tableColor" width="200">장애일시</td>
+                            </tr>
+                        </table>
+                        <table class="BITDisabilityListValuesInsert"></table>
+                    </div>
+                    <div id="BITTable" class="BITDisabilityListValuesHidden">
+                        <table>
+                            <tr>
+                                <td width="400">BIT ID</td>
+                                <td width="500">설치위치</td>
+                                <td width="200">통신 상태</td>
+                                <td width="200">장애횟수</td>
+                                <td width="200">장애일시</td>
+                            </tr>
+                        </table>
+                        <table class="BITDisabilityListValuesInsertHidden"></table>
+                    </div>
+                    <div class="footer">
+                        <div class="footer_disNum bassWordColor">장애 개수&nbsp; :</div>
+                        <div class="footer_disNumBox valueColor"></div>
+                        <div class="footer_previous10"><< 10</div>
+                        <div class="footer_previous bassWordColor"><< 이전</div>
+                        <div class="fotter_page valueColor">0</div>
+                        <div class="footer_next bassWordColor">다음 >></div>
+                        <div class="footer_next10 bassWordColor">10 >></div>
+                        <div class="footer_excel bassWordColor">엑셀저장</div>
+                        <div id="BITRefresh" class="footer_refresh bassWordColor">새로고침</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+
+        <script src="/libs/sockjs/sockjs.min.js"></script>
+        <script type="module">
+            import { startApp } from "./main.js";
+
+            startApp();
+           
+        </script>
+    </body>
+</html>

src/main/resources/static/application/facility/main/old/main.js

@@ -0,0 +1,700 @@
+import { websocketConnect, fetchFcltStts, fetchUnitStts, fetchDbmsStts, setInnerText, _fcltData,  updateFcltStts, updateUnitStts, _unitData } from "./main-func.js";
+import { requestGet, apiGet } from "/js/utils/restApi.js";
+
+let _selectFcltType       = "";       // 시설물 통신 정보 조회 유형
+let _fetchFcltCommInfoArr = []; // 시설물 통신 정보 조회 저장 버퍼
+export let _errorSwitch   = false;
+const _fcltArr            = ["VMS","CCTV","VDS","BIT"];
+/**
+ * 화면 이벤트 핸들러
+ */
+$(".header >:nth-child(2)").on("click", function(){
+    // 새로고침 클릭
+    _selectFcltType = "";
+    fetchSystemStts();
+    hideAll()
+    showElement(".centerPsSttsInfo");
+});
+
+$(".xToggle").on("click", function(){       
+    // 화면 아래 리스트 감추기 X 버튼 클릭
+    hideAll()
+    showElement(".centerPsSttsInfo");
+});
+
+$(".footer_excel").on("click",()=>{
+    // 엑셀 저장 클릭
+
+    confirmMessage("엑셀 파일로 저장 하시겠습니까?").done((yes)=>{
+        if (yes === true) {
+            exportExcel();
+        }
+    })
+
+    // confirmMessage("Excel file로 저장 하시겠습니까?").done((yes) => {
+    //     if (yes === true) {
+    //         exportExcel();
+    //     }
+    // });
+});
+
+/**
+ * 파라미터로 받은 선택자에 대해서 토글 이벤트 등록
+ */
+const _pagePerData = 9;
+function registerEventFunc(facilityType) {
+    $("#"+facilityType+"Toggle, #"+facilityType+"Refresh").on("click",()=>{
+        _selectFcltType = facilityType;   // 화면하단 표출되는 시설물 유형
+        hideAll();
+        _fetchFcltCommInfoArr = new Array();
+        fetchFcltCommInfo(facilityType);
+        showElement("." + facilityType + "DisabilityStautsList");
+    });             
+}
+
+/**
+ * 어플리케이션 실행후 최초 1회만 실행됨
+ */
+function initOnce() {
+
+    displayCurrentTime();
+    for (let fclt of _fcltArr) {
+        registerEventFunc(fclt);
+    }
+    // registerEventFunc("VMS");
+    // registerEventFunc("CCTV");
+    // registerEventFunc("VDS");
+    // registerEventFunc("RSE");
+    // registerEventFunc("BIT");
+    websocketConnect("fclt");
+}
+
+/**
+ * 화면 로딩시에 제일 처음으로 실행될때 수행되는 함수
+ * 최초 기동후 1회만 호출됨
+ */
+export function startApp() {
+    initOnce();
+    fetchSystemStts();
+    fetchdrawGraph();
+}
+
+/**
+ * 상태정보 일괄 조회(새로고침일 때도 호출 됨)
+ */
+function fetchSystemStts() {
+    fetchFcltStts();
+    fetchUnitStts();
+    fetchDbmsStts();
+}
+
+/**
+ * 화면 하단에 표출할 시설물 정보를 조회한다.
+ */
+function fetchFcltCommInfo(facilityType) {
+    //통신상태 장애현황리스트
+    if (facilityType === "VMS") {
+        requestGet("/api/common/stts/vms/error", updateFcltCommInfo, facilityType);
+    } else if (facilityType === "CCTV") {
+        requestGet("/api/common/stts/cctv/error", updateFcltCommInfo, facilityType);
+    } else if (facilityType === "VDS") {
+        requestGet("/api/common/stts/vds/error", updateFcltCommInfo, facilityType);
+    } else if (facilityType === "RSE") {
+        requestGet("/api/utis/stts/rse/error", updateFcltCommInfo, facilityType);
+    } else if (facilityType === "BIT") {
+        requestGet("/api/bis/stts/bit/error", updateFcltCommInfo, facilityType);
+    } else {
+        console.error(`fetchFcltCommInfo: Unknown FcltType, ${facilityType}`);
+        _selectFcltType = "";
+    }
+}
+function updateFcltCommInfo(jsonData, facilityType) {
+    if (_selectFcltType !== facilityType) {
+        console.error(`FcltCommInfo type mismatched: ${_selectFcltType},,,${facilityType}`);
+        return;
+    }
+    _fetchFcltCommInfoArr = jsonData;
+    
+    let totalCnt = jsonData.length;
+    let commErrCnt = 0;
+    jsonData.forEach((obj, idx) => {
+        if (obj.comm_cd.slice(-1) !== "0") {
+            commErrCnt++;
+        }
+    });
+
+    const currentPage = 1;
+    const totalPage = Math.ceil(totalCnt/_pagePerData);
+    $(".footer_disNumBox").html(commErrCnt);
+    // $(".fotter_page").html(currentPage + '  /  '+ totalPage);
+
+    displayFcltCommInfo(facilityType, 0, 1, totalPage);
+}
+
+function displayFcltCommInfo(facilityType, firstIdx, currentPage, totalPage) {
+    if (_fetchFcltCommInfoArr.length < firstIdx) {
+        console.error(`displayFcltCommInfo: FcltCommArr length error, ${_fetchFcltCommInfoArr.length}, ${firstIdx}`);
+        return;     
+    }
+    $(".fotter_page").html(currentPage + '&nbsp; / &nbsp;'+ totalPage);
+    const valueInsertTag = "."+facilityType+"DisabilityListValuesInsert";
+
+    // 이전 내용을 지운다.
+    $(valueInsertTag).empty();
+
+    // 현재 페이지 표출 내용
+    const lastIdx = Math.min(firstIdx + _pagePerData, _fetchFcltCommInfoArr.length);
+    if (facilityType === "VDS") {
+        for (let ii = firstIdx; ii < lastIdx; ii++) {
+            if (_fetchFcltCommInfoArr[ii] != null) {
+                $(valueInsertTag).append(
+                    '<tr>'+
+                    '    <td class="valueColor" width="200">'+_fetchFcltCommInfoArr[ii].ctlr_id+'</td>'+
+                    '    <td class="valueColor" width="200">'+_fetchFcltCommInfoArr[ii].ctlr_nmbr+'</td>'+
+                    '    <td class="valueColor" width="500" style="text-align: left;">&nbsp;&nbsp;' + _fetchFcltCommInfoArr[ii].ctlr_nm+'</td>'+
+                    '    <td class="valueColor" width="200">'+_fetchFcltCommInfoArr[ii].comm_desc+'</td>'+
+                    '    <td class="valueColor" width="200">'+_fetchFcltCommInfoArr[ii].col_desc+'</td>'+
+                    '    <td class="valueColor" width="200">'+_fetchFcltCommInfoArr[ii].comm_err_cnt+'</td>'+
+                    '    <td class="valueColor" width="200">'+_fetchFcltCommInfoArr[ii].updt_dt+'</td>'+
+                    '</tr>'
+                );
+            }
+        }
+    } else if (facilityType === "RSE") {
+        for (let ii = firstIdx; ii < lastIdx; ii++) {
+            if (_fetchFcltCommInfoArr[ii] != null) {
+                $(valueInsertTag).append(
+                    '<tr>'+
+                    '    <td class="valueColor" width="400">'+_fetchFcltCommInfoArr[ii].ctlr_id+'</td>'+
+                    '    <td class="valueColor" width="500" style="text-align: left;">&nbsp;&nbsp;' + _fetchFcltCommInfoArr[ii].ctlr_nm+'</td>'+
+                    '    <td class="valueColor" width="300">'+_fetchFcltCommInfoArr[ii].comm_desc+'</td>'+
+                    '    <td class="valueColor" width="300">'+_fetchFcltCommInfoArr[ii].updt_dt+'</td>'+
+                    '</tr>'
+                );
+            }
+        }
+    } else if (facilityType === "BIT") {
+        for (let ii = firstIdx; ii < lastIdx; ii++) {
+            if (_fetchFcltCommInfoArr[ii] != null) {
+                $(valueInsertTag).append(
+                    '<tr>'+
+                    '    <td class="valueColor" width="200">'+_fetchFcltCommInfoArr[ii].ctlr_id+'</td>'+
+                    '    <td class="valueColor" width="200">'+_fetchFcltCommInfoArr[ii].localno+'</td>'+
+                    '    <td class="valueColor" width="500" style="text-align: left;">&nbsp;&nbsp;' + _fetchFcltCommInfoArr[ii].ctlr_nm+'</td>'+
+                    '    <td class="valueColor" width="200">'+_fetchFcltCommInfoArr[ii].comm_desc+'</td>'+
+                    '    <td class="valueColor" width="200">'+_fetchFcltCommInfoArr[ii].comm_err_cnt+'</td>'+
+                    '    <td class="valueColor" width="200">'+_fetchFcltCommInfoArr[ii].updt_dt+'</td>'+
+                    '</tr>'
+                );
+            }
+        }
+    } else {
+        for (let ii = firstIdx; ii < lastIdx; ii++) {
+            if (_fetchFcltCommInfoArr[ii] != null) {
+                $(valueInsertTag).append(
+                    '<tr>'+
+                    '    <td class="valueColor" width="200">'+_fetchFcltCommInfoArr[ii].ctlr_id+'</td>'+
+                    '    <td class="valueColor" width="200">'+_fetchFcltCommInfoArr[ii].ctlr_nmbr+'</td>'+
+                    '    <td class="valueColor" width="500" style="text-align: left;">&nbsp;&nbsp;' + _fetchFcltCommInfoArr[ii].ctlr_nm+'</td>'+
+                    '    <td class="valueColor" width="200">'+_fetchFcltCommInfoArr[ii].comm_desc+'</td>'+
+                    '    <td class="valueColor" width="200">'+_fetchFcltCommInfoArr[ii].comm_err_cnt+'</td>'+
+                    '    <td class="valueColor" width="200">'+_fetchFcltCommInfoArr[ii].updt_dt+'</td>'+
+                    '</tr>'
+                );
+            }
+        }
+    }
+
+    if (currentPage == 1 || totalPage == 0) {
+        $(".footer_previous").css("visibility","hidden"); 
+    } else {
+        $(".footer_previous").css("visibility","visible");
+    }
+    
+    if (currentPage == totalPage || totalPage == 0) {
+        $(".footer_next").css("visibility","hidden"); 
+    } else {
+        $(".footer_next").css("visibility","visible");
+    }
+
+    $(".footer_next").off().on('click', function() { 
+    })
+    $(".footer_next").on("click",function(){
+        displayFcltCommInfo(facilityType, firstIdx+_pagePerData, currentPage+1, totalPage);
+    });
+
+    $(".footer_previous").off().on('click', function() { 
+    })
+    $(".footer_previous").on("click",function(){
+        displayFcltCommInfo(facilityType, firstIdx-_pagePerData, currentPage-1, totalPage);
+    });
+    
+    // if (currentPage < totalPage) {
+    //     $(".footer_previous10").css("visibility","hidden"); 
+    // } else{
+    //     $(".footer_previous10").css("visibility","visible");
+    // }
+    // if (currentPage >= totalPage - _pagePerData || totalPage == 0){
+    //     $(".footer_next10").css("visibility","hidden"); 
+    // } else {
+    //     $(".footer_next10").css("visibility","visible");
+    // }
+    // $(".footer_next10").off().on('click', function() { 
+    // })
+    // $(".footer_next10").on("click",function(){
+    //     displayFcltCommInfo(_firstIdx+90,_lastIdx+90,_currentPage+10)
+    // });
+    // $(".footer_previous10").off().on('click', function() { 
+    // })
+    // $(".footer_previous10").on("click",function(){
+    //     displayFcltCommInfo(_firstIdx-90,_lastIdx-90,_currentPage-10)
+    // });
+}
+
+function fetchFcltDataToExcelTemp(facilityType) {
+    const valueInsertTag = "."+facilityType+"DisabilityListValuesInsertHidden";
+
+    // 이전 내용을 지운다.
+    $(valueInsertTag).empty();
+
+    // 현재 페이지 표출 내용
+    const firstIdx = 0;
+    const lastIdx = _fetchFcltCommInfoArr.length;
+    if (facilityType === "VDS") {
+        for (let ii = firstIdx; ii < lastIdx; ii++) {
+            if (_fetchFcltCommInfoArr[ii] != null) {
+                $(valueInsertTag).append(
+                    '<tr>'+
+                    '    <td width="200">'+_fetchFcltCommInfoArr[ii].ctlr_id+'</td>'+
+                    '    <td width="200">'+_fetchFcltCommInfoArr[ii].ctlr_nmbr+'</td>'+
+                    '    <td width="500">'+_fetchFcltCommInfoArr[ii].ctlr_nm+'</td>'+
+                    '    <td width="200">'+_fetchFcltCommInfoArr[ii].comm_desc+'</td>'+
+                    '    <td width="200">'+_fetchFcltCommInfoArr[ii].col_desc+'</td>'+
+                    '    <td width="200">'+_fetchFcltCommInfoArr[ii].comm_err_cnt+'</td>'+
+                    '    <td width="200">'+_fetchFcltCommInfoArr[ii].updt_dt+'</td>'+
+                    '</tr>'
+                );
+            }
+        }
+    } else if (facilityType === "RSE") {
+        for (let ii = firstIdx; ii < lastIdx; ii++) {
+            if (_fetchFcltCommInfoArr[ii] != null) {
+                $(valueInsertTag).append(
+                    '<tr>'+
+                    '    <td width="400">'+_fetchFcltCommInfoArr[ii].ctlr_id+'</td>'+
+                    '    <td width="500">'+_fetchFcltCommInfoArr[ii].ctlr_nm+'</td>'+
+                    '    <td width="300">'+_fetchFcltCommInfoArr[ii].comm_desc+'</td>'+
+                    '    <td width="300">'+_fetchFcltCommInfoArr[ii].updt_dt+'</td>'+
+                    '</tr>'
+                );
+            }
+        }
+    } else if (facilityType === "BIT") {
+        for (let ii = firstIdx; ii < lastIdx; ii++) {
+            if (_fetchFcltCommInfoArr[ii] != null) {
+                $(valueInsertTag).append(
+                    '<tr>'+
+                    '    <td width="400">'+_fetchFcltCommInfoArr[ii].ctlr_id+'</td>'+
+                    '    <td width="500">'+_fetchFcltCommInfoArr[ii].ctlr_nm+'</td>'+
+                    '    <td width="200">'+_fetchFcltCommInfoArr[ii].comm_desc+'</td>'+
+                    '    <td width="200">'+_fetchFcltCommInfoArr[ii].comm_err_cnt+'</td>'+
+                    '    <td width="200">'+_fetchFcltCommInfoArr[ii].updt_dt+'</td>'+
+                    '</tr>'
+                );
+            }
+        }
+    } else {
+        for (let ii = firstIdx; ii < lastIdx; ii++) {
+            if (_fetchFcltCommInfoArr[ii] != null) {
+                $(valueInsertTag).append(
+                    '<tr>'+
+                    '    <td width="200">'+_fetchFcltCommInfoArr[ii].ctlr_id+'</td>'+
+                    '    <td width="200">'+_fetchFcltCommInfoArr[ii].ctlr_nmbr+'</td>'+
+                    '    <td width="500">'+_fetchFcltCommInfoArr[ii].ctlr_nm+'</td>'+
+                    '    <td width="200">'+_fetchFcltCommInfoArr[ii].comm_desc+'</td>'+
+                    '    <td width="200">'+_fetchFcltCommInfoArr[ii].comm_err_cnt+'</td>'+
+                    '    <td width="200">'+_fetchFcltCommInfoArr[ii].updt_dt+'</td>'+
+                    '</tr>'
+                );
+            }
+        }
+    }
+}
+
+const excelHandler = {
+    getExcelFileName : function() {
+        return 'table.xlsx'; // 테이블이름
+    },
+    getSheetName : function() {
+        return 'Table Sheet'; // 엑셀 하단 시트 이름
+    },
+    getExcelData : function() { // EXCEL로 변환하고자 하는 테이블 선택
+        if($(".VMSDisabilityStautsList").css("display") == "flex") {
+            return document.getElementById('VMSTable');
+        }
+        if($(".CCTVDisabilityStautsList").css("display") == "flex") {
+            return document.getElementById('CCTVTable');
+        }
+        if($(".VDSDisabilityStautsList").css("display") == "flex") {
+            return document.getElementById('VDSTable');
+        }
+        if($(".RSEDisabilityStautsList").css("display") == "flex") {
+            return document.getElementById('RSETable');
+        }
+        if($(".BITDisabilityStautsList").css("display") == "flex") {
+            return document.getElementById('BITTable');
+        }
+    },
+    getWorksheet : function() {
+        return XLSX.utils.table_to_sheet(this.getExcelData());
+    }
+}
+
+function s2ab(s) { 
+    var buf = new ArrayBuffer(s.length); //convert s to arrayBuffer
+    var view = new Uint8Array(buf);  //create uint8array as viewer
+    for (var i=0; i<s.length; i++) view[i] = s.charCodeAt(i) & 0xFF; //convert to octet
+    return buf;    
+}
+
+function exportExcel() {
+    fetchFcltDataToExcelTemp(_selectFcltType);
+
+    // step 1. workbook 생성
+    var wb = XLSX.utils.book_new();
+
+    // step 2. 시트 만들기 
+    var newWorksheet = excelHandler.getWorksheet();
+
+    // step 3. workbook에 새로만든 워크시트에 이름을 주고 붙인다.  
+    XLSX.utils.book_append_sheet(wb, newWorksheet, excelHandler.getSheetName());
+
+    // step 4. 엑셀 파일 만들기 
+    var wbout = XLSX.write(wb, {bookType:'xlsx',  type: 'binary'});
+
+    // step 5. 엑셀 파일 내보내기 
+    saveAs(new Blob([s2ab(wbout)],{type:"application/octet-stream"}), excelHandler.getExcelFileName());
+}
+
+/**
+ * 화면 상단 우측 현재시간 표출(매 1초 단위)
+ */let _timerPollCurrentTime = null; // 시설물 상태정보 요청 타이머
+const pollCurrentTime = () => {
+    if (_timerPollCurrentTime) window.clearTimeout(_timerPollCurrentTime);
+    _timerPollCurrentTime = window.setTimeout(() => displayCurrentTime(), 1000);
+};
+
+function displayCurrentTime() {
+    const weekDesc = ['일요일', '월요일', '화요일', '수요일', '목요일', '금요일', '토요일'];
+    const date = new Date();
+    const year = date.getYear() + 1900;
+    const month = date.getMonth() + 1;
+    const day = date.getDate();
+    const week = date.getDay();
+    const hours = date.getHours();
+    const minutes = date.getMinutes();
+    const seconds = date.getSeconds();
+    const currDt = `${year}년 ${month}월 ${day}일 ${weekDesc[week]} ${hours < 10 ? `0${hours}` : hours}:${minutes < 10 ? `0${minutes}`  : minutes }:${seconds < 10 ? `0${seconds }`  : seconds }`;
+
+    setInnerText("clock", currDt);
+
+    pollCurrentTime();
+}
+
+function hideElement(tagId) {
+    $(tagId).css("display", "none");
+}
+function showElement(tagId) {
+    $(tagId).css("display", "flex");
+}
+
+function hideAll(){
+    hideElement(".centerPsSttsInfo");
+    hideElement(".VMSDisabilityStautsList");
+    hideElement(".CCTVDisabilityStautsList");
+    hideElement(".VDSDisabilityStautsList");
+    hideElement(".RSEDisabilityStautsList");
+    hideElement(".BITDisabilityStautsList");
+}
+
+export function fetchdrawGraph() {
+    //console.time("***** fetchdrawGraph: ");
+    const graphUrl = apiGet('/api/common/dashboard/cmtr-grad-count-stts/ifsc');
+
+    Promise.all([graphUrl])
+        .then((results) => Promise.all(results.map((r) => r.json())))
+        .then((values) => {
+            drawGraph(values[0]); //ITS 프로세스
+        })
+        .catch((err) => {
+             //console.error(`Error in tUnitStts ${err}`);
+        })
+        .finally(() => {
+             //console.timeEnd("***** fetchdrawGraph: ")
+        });
+        
+    setTimeout(() => {
+        fetchdrawGraph()
+    }, 1000 * 60 * 5 );
+}
+
+function drawGraph(res) {
+    const prcn_cd = []
+    const prcn_cd_full = []
+    const ltc0 = []
+    const ltc1 = []
+    const ltc2 = []
+    const ltc3 = []
+    const rate_ltc0 = []
+    const rate_ltc1 = []
+    const rate_ltc2 = []
+    const rate_ltc3 = []
+    const ltc = []
+    const ltcRate = []
+
+    res.forEach((ii) => {
+        let tempYear = ii.prcn_cd.substring(0,4)
+        let tempMonth = ii.prcn_cd.substring(4,6)
+        let tempDay = ii.prcn_cd.substring(6,8)
+        let tempHour = ii.prcn_cd.substring(8,10);
+        let tempMinu = ii.prcn_cd.substring(10,12);
+        let tempSec = ii.prcn_cd.substring(12,14);
+        prcn_cd.push(tempHour+":"+tempMinu+":"+tempSec)
+        prcn_cd_full.push(tempYear+"년 "+tempMonth+"월 "+tempDay+"일 "+ tempHour+":"+tempMinu+":"+tempSec)
+        ltc0.push(ii.ltc0)
+        ltc1.push(ii.ltc1)
+        ltc2.push(ii.ltc2)
+        ltc3.push(ii.ltc3)
+        rate_ltc0.push(ii.rate_ltc0)
+        rate_ltc1.push(ii.rate_ltc1)
+        rate_ltc2.push(ii.rate_ltc2)
+        rate_ltc3.push(ii.rate_ltc3)
+    })
+   
+    const rt1_lastNum = rate_ltc1[rate_ltc1.length - 1];
+    const rt2_lastNum = rate_ltc2[rate_ltc2.length - 1];
+    const rt3_lastNum = rate_ltc3[rate_ltc3.length - 1];
+    const prcn_cd_lastNum = prcn_cd_full[prcn_cd_full.length - 1];
+
+    ltc.push(
+        {
+            name: '원활',
+            color:'#15B337',
+            data: ltc1
+        }, 
+        {
+            name: '지체',
+            color:'#FFAA00',
+            data: ltc2
+        }, 
+        {
+            name: '정체',
+            color:'#FF0000',
+            data: ltc3
+        }
+    )
+
+    ltcRate.push(
+        {
+            name: '원활',
+            color:'#15B337',
+            y: rt1_lastNum,
+        }, {
+            name: '지체',
+            color:'#FFAA00',
+            y:rt2_lastNum
+        }, {
+            name: '정체',
+            color:'#FF0000',
+            y: rt3_lastNum
+        })
+   
+        hiCht_Bline(prcn_cd, ltc)
+        hiCht_pie(prcn_cd_lastNum, ltcRate)
+    
+    // setTimeout(function() {
+    //     drawGraph(url)
+    //     }, 1000);    
+
+  
+}
+
+function hiCht_Bline(xAxisVal , yAxisVal) {
+    Highcharts.chart('linkTraffic', {
+        credits: {
+            enabled: false
+        },
+        chart: {
+            backgroundColor: '#2d2d33',
+            animation: Highcharts.svg,
+        },        
+        title: {
+            text: '정보제공 구간 지정체 상황 (건수)',
+            style: {
+                color: 'rgb(139 138 139)',
+                //fontSize: 15,
+                fontWeight: 'bold'
+            }
+        },
+        legend: {
+            itemStyle:{
+                color: "rgb(139 138 139)",
+             },
+             itemHoverStyle: {
+                color: 'black'
+             },
+             itemHiddenStyle: {
+                color: 'rgb(55 55 65)'
+             },
+            layout: 'vertical',
+            align: 'right',
+            verticalAlign: 'middle'
+        },
+        // tooltip: {
+        //     pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
+        // },
+        xAxis: {
+            //시작 값
+            startOntick: false,
+            //끝 값
+            endOntick: false,
+            //x축 값
+            categories: xAxisVal, 
+            //x축 보여주는 설정 
+            labels: {
+                style: {
+                    color: '#eeeeee',
+                    fontSize: '10px'
+                },
+                // formatter: function() {
+                //     return this.value
+                // }
+            }
+        },
+        yAxis: {
+            startOntick: false,
+            endOntick: false,
+            title: '',
+            labels: {
+            style: {
+                color: '#eeeeee'
+            },
+            format: ''//y축 표출이름
+            
+            },
+        },
+        series: yAxisVal,
+        responsive: {
+            rules: [{
+                condition: {
+                    maxWidth: 500
+                },
+                chartOptions: {
+                    legend: {
+                        layout: 'horizontal',
+                        align: 'center',
+                        verticalAlign: 'bottom'
+                    }
+                }
+            }]
+        }
+    });
+}
+
+function hiCht_pie(curTime, yAxisVal) {
+    Highcharts.chart('linkTrafficRate', {
+
+        credits: {
+            enabled: false
+        },
+
+        chart: {
+            backgroundColor: '#2d2d33',
+            animation: Highcharts.svg,
+            plotBackgroundColor: null,
+            plotBorderWidth: null,
+            plotShadow: false,
+            type: 'pie',
+            //width: 100,
+			height: 200,
+            marginTop:25,
+            marginBottom:10
+        },
+        title: {
+            text: curTime,
+            style: {
+                color: 'rgb(139 138 139)',
+                fontSize: 13.9,
+                fontWeight: 'bold',
+                left:100,
+            }
+        },
+        tooltip: {
+            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
+        },
+        legend: {
+            enabled:false,
+            itemStyle:{
+                color: "rgb(139 138 139)",
+                
+            },
+            itemHoverStyle: {
+                color: 'black'
+            },
+            itemHiddenStyle: {
+                color: 'rgb(55 55 65)'
+            },
+            layout: 'vertical',
+            align: 'right',
+            verticalAlign: 'middle'
+        },
+        accessibility: {
+            point: {
+                valueSuffix: '%'
+            }
+        },
+        plotOptions: {
+            pie: {
+                allowPointSelect: true,
+                cursor: 'pointer',
+                dataLabels: {
+                    enabled: true,
+                    format: "<strong>{point.name}</strong><br>{point.percentage:.1f}",
+                    distance: -30,
+                    color: "white",
+                    filter: {
+                        property: 'percentage',
+                        operator: '>',
+                        value: 4
+                      }
+                },
+            }
+        },
+        series: [{
+            name: 'rate',
+            colorByPoint: true,
+            data: yAxisVal
+        }]
+    });
+}
+
+$('.logo-img').on('dblclick', ()=>{
+    if (!_errorSwitch) {
+        _errorSwitch = true;
+        for (let fclt of _fcltArr) {
+            $("#"+fclt+"Toggle, #"+fclt+"Refresh").off('click');
+        }
+        hideAll();
+        showElement(".centerPsSttsInfo");
+    }
+    else {
+        _errorSwitch = false;
+        for (let fclt of _fcltArr) {
+            registerEventFunc(fclt);
+        }
+    }
+    updateFcltStts(_fcltData[0]);
+    updateFcltStts(_fcltData[1]);
+    updateUnitStts(_unitData[0]);
+    updateUnitStts(_unitData[1]);
+})

src/main/resources/static/application/login/login.css

@@ -10,7 +10,6 @@ html,body{
     width:100%;
     height: 100%;
     min-width: 800px;
-    background-color: white;
 }
 #loginForm{
     width: 700px;

src/main/resources/static/application/login/login.js

@@ -1,6 +1,9 @@
 $(function () {
     if (Request('LoginFail')) {
-        alertError(Request('LoginFail'), "로그인 오류");
+        alertError(
+            Request('LoginFail'),
+            "로그인 오류"
+        );
     }
     const id = $("input[name = 'username']");
     const pwd = $("input[name = 'password']");
@@ -46,17 +49,20 @@ $(function () {
 
 function Request(valuename)    //javascript로 구현한 Request
 {
-    let rtnval = "";
-    let nowAddress = decodeURI(location.href);
+    var rtnval = "";
+    var nowAddress = decodeURI(location.href);
 
-    let parameters = (nowAddress.slice(nowAddress.indexOf("?")+1,nowAddress.length)).split("&");
+    var parameters = (nowAddress.slice(nowAddress.indexOf("?")+1,nowAddress.length)).split("&");
 
-    for(let ii = 0 ; ii < parameters.length ; ii++){
-        let varName = parameters[ii].split("=")[0];
-        if (varName.toUpperCase() === valuename.toUpperCase()) {
-            rtnval = parameters[ii].split("=")[1];
+    for(var i = 0 ; i < parameters.length ; i++){
+        var varName = parameters[i].split("=")[0];
+        if(varName.toUpperCase() == valuename.toUpperCase())
+        {
+            rtnval = parameters[i].split("=")[1];
             break;
         }
     }
+    console.log(rtnval);
+    console.log(nowAddress);
     return rtnval.replaceAll('+',' ');
 }

src/main/resources/static/application/op/00.main/main copy.html

@@ -0,0 +1,225 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+    <head>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
+        <!-- <script src="/libs/include-common.js"></script> -->
+        <script src="/libs/include-common.js"></script>
+        <script src="/libs/include-ol.js"></script>
+        <script src="/libs/sockjs/sockjs.min.js"></script>
+        <script type="module" src="/js/websocket/websocket.js"></script>
+        <script src="/libs/video-7.10.2/video-7.10.2.js"></script>
+        <link rel="stylesheet" href="/libs/video-7.10.2/video-7.10.2.css" />
+        <script src="./main-header.js"></script>
+        <link rel="stylesheet" href="./main.css" />
+        <script type="module" src="./main.js"></script>
+        <title>ITS 통합운영단말</title>
+    </head>
+    <body class="dx-viewport" oncontextmenu="return false">
+        <div class="menu-bar">
+            <div class="logo-image">
+                <img src="/images/op/logo/logo.png" width="135px" height="48px" />
+                <!-- <div class="logo-title">ITS 통합운영단말</div> -->
+            </div>
+            <nav id="menu"></nav>
+            <div class="log-out">
+                <i class="dx-icon-user"></i>
+                <div>로그아웃</div>
+            </div>
+            <div class="serve-menu-box"></div>
+            <div class="switch-box">
+                <div class="switch"></div>
+            </div>
+        </div>
+        <div id="drawer">
+            <div id="mapDrawer">
+                <div class="main-map-bar border serve-title">
+                    <div class="mr-20">
+                        <div id="side-button"></div>
+                    </div>
+                    <div class="ml-5">
+                        <div id="save"></div>
+                        <a id="image-download" download="map.png" style="display: none"></a>
+                    </div>
+                    <div class="ml-5">
+                        <div id="map-button"></div>
+                    </div>
+                    <div class="ml-5">
+                        <div id="zoom-in"></div>
+                    </div>
+                    <div class="ml-5">
+                        <div id="zoom-out"></div>
+                    </div>
+                    <div class="ml-5">
+                        <div id="refresh"></div>
+                    </div>
+                    <div class="ml-5">
+                        <div id="selected"></div>
+                    </div>
+                    <div id="traffic-info"><div id="chk-traffic-info"></div></div>
+                    <div id="traffic-tool-tip"><div id="chk-traffic-tool-tip"></div></div>
+                    <div id="incident-info"><div id="chk-incident-info"></div></div>
+                    <div id="facility">
+                        <div>시설물</div>
+                        <div class="text_ul_wrap b0">
+                            <a href="#">CCTV, VMS, VDS</a>
+                            <ul class="ul_select_style b0">
+                                <li><input class="select-box-class" type="checkbox" checked value="CCTV" />CCTV</li>
+                                <li><input class="select-box-class" type="checkbox" checked value="VMS" />VMS</li>
+                                <li><input class="select-box-class" type="checkbox" checked value="VDS" />VDS</li>
+                                <!-- <li><input class="select-box-class" type="checkbox" value="BIT" />BIT</li> -->
+                                <!-- <li><input class="select-box-class" type="checkbox" value="주차장" />주차장</li> -->
+                            </ul>
+                        </div>
+                    </div>
+                    <div>
+                        <div id="search-map"></div>
+                    </div>
+                    <div id="map-toggle-box">
+                        <div id="map-toggle"></div>
+                    </div>
+                    <div id="bottom-button"></div>
+                </div>
+                <div id="map"></div>
+                <div id="tooltip"></div>
+            </div>
+        </div>
+        <script type="module">
+            import { doMap, loadingData } from "./main-func.js";
+
+            let isRunningWeb = true;
+            if (isElectron()) {
+                isRunningWeb = false;
+            }
+
+            doMap(); // 화면별로 객체를 생성 시켜야함.
+            loadingData();
+
+            function isElectron() {
+                if (typeof window !== "undefined" && typeof window.process === "object" && window.process.type === "renderer") {
+                    return true;
+                }
+                if (typeof process !== "undefined" && typeof process.versions === "object" && !!process.versions.electron) {
+                    return true;
+                }
+                if (typeof navigator === "object" && typeof navigator.userAgent === "string" && navigator.userAgent.indexOf("Electron") >= 0) {
+                    return true;
+                }
+                return false;
+            }
+
+            const userMenuDs = [
+                {
+                    id: 0,
+                    name: "",
+                    icon: "menu",
+                    items: [
+                        {
+                            beginGroup: true,
+                            id: "1",
+                            name: "비밀번호 변경",
+                            page: "./main-pwd-change-pop-up.html",
+                            option: "width = 400, height = 300, top = 175, left = 800, resizable=yes, scrollbars=no",
+                            icon: "key",
+                        },
+                        {
+                            beginGroup: true,
+                            id: "2",
+                            name: "상황판",
+                            page: _apiUrl + "/wall",
+                            option: null,
+                            icon: "link",
+                        },
+                        {
+                            beginGroup: true,
+                            id: "3",
+                            name: "시설물 모니터링",
+                            page: _apiUrl + "/facility",
+                            option: null,
+                            icon: "link",
+                        },
+                        {
+                            visible: isRunningWeb,
+                            beginGroup: true,
+                            id: "4",
+                            name: "Desktop App 다운로드",
+                            icon: "save",
+                        },
+                        {
+                            beginGroup: true,
+                            id: "5",
+                            name: "VMS Form Edit App 다운로드",
+                            icon: "save",
+                        },
+                    ],
+                },
+            ];
+
+            $(".serve-menu-box")
+                .dxMenu({
+                    dataSource: userMenuDs,
+                    hideSubmenuOnMouseLeave: true,
+                    showFirstSubmenuMode: {
+                        name: "onHover",
+                        delay: { show: 0, hide: 100 },
+                    },
+                    displayExpr: "name",
+                    submenuDirection: "auto",
+                    visible: true,
+                    onItemClick(data) {
+                        const item = data.itemData;
+                        const pageName = item.name.trim();
+                        if (pageName) {
+                            switch (pageName) {
+                                case "로그아웃":
+                                    logoutLocation();
+                                    break;
+                                case "Desktop App 다운로드":
+                                    const filePath = "/download/Yongin ITS App Setup 1.0.0.exe";
+                                    const fileName = "Yongin ITS App Setup 1.0.0.exe";
+
+                                    let element = document.createElement("a");
+                                    element.setAttribute("href", filePath);
+                                    element.setAttribute("download", fileName);
+                                    element.click();
+                                    break;
+                                case "VMS Form Edit App 다운로드":
+                                    vmsFormEditDownload();
+                                    break;
+                                case "":
+                                    break;
+                                default:
+                                    window.open(item.page, pageName, item.option);
+                                    break;
+                            }
+                        }
+                    },
+                })
+                .dxMenu("instance");
+            $('.log-out').on('click', () => logoutLocation());
+           
+            function logoutLocation() {
+                location.href = "/api/auth/logout.do";
+            }
+            console.log(DevExpress.ui.themes.current());
+            let switchTheme = function(themeName) {
+                window.localStorage.setItem("dx-theme", themeName);
+                window.location.reload();
+            }
+            let _toggleCss = false;
+            $('.logo-image').on('click',()=>{
+                _toggleCss = !_toggleCss;
+                if (_toggleCss) {
+                    $('.main-css').prop('href', '/libs/dx-21.2.6/css/dx.material.blue.light.compact.css');
+                    window.$cssHref = '/libs/dx-21.2.6/css/dx.material.blue.light.compact.css';
+                    
+                }
+                else {
+                    $('.main-css').prop('href', '/libs/dx-21.2.6/css/dx.material.blue.dark.compact.css');
+                    window.$cssHref = '/libs/dx-21.2.6/css/dx.material.blue.dark.compact.css';
+                }
+            })
+        </script>
+    </body>
+</html>

src/main/resources/static/application/op/06.vms/01.system/01.monitoring/01.phase/phase copy.css

@@ -0,0 +1,282 @@
+*{
+    margin: 0;
+    padding: 0;
+}
+
+html{
+    width: 100%;
+    height: 100%;
+}
+
+body{
+    padding: 10px;
+    width: calc(100% - 20px);
+    height: calc(100% - 20px);
+    min-width: 1800px;
+}
+body::-webkit-scrollbar,
+.float-board::-webkit-scrollbar {
+    width: 8px;  /* 스크롤바의 너비 */
+}
+body::-webkit-scrollbar-thumb,
+.float-board::-webkit-scrollbar-thumb {
+    height: 30px; /* 스크롤바의 길이 */
+    background-color: rgba(112,112,133,.7);
+    -webkit-box-shadow: 0 0 0 1px transparent;
+    box-shadow: 0 0 0 1px transparent;
+    border-radius: 10px;
+}
+
+/* .float-board::-webkit-scrollbar-track {
+    background: rgba(33, 122, 244, .1);
+} 
+*/
+.phase-title{
+    background-color: #2f2f38;
+    display: flex;
+    align-items: center;
+    padding-left: 5px;
+    width: 100%;
+    height: 25px;
+}
+.phase-title > img{
+    margin-right: 5px;
+}
+.table-box{
+    flex-direction: column;
+}
+.table-container{
+    height: calc(100% - 4px);
+    padding: 2px;
+    width: calc(100% - 4px);
+}
+.table-container > div:nth-child(1){
+    width: calc(100% - 2px);
+    height: calc(100% - 2px);
+}
+.deselect-div-box,
+.selected-div-box{
+    width: 100%;
+    height: 100%;
+    padding: 2px;
+    flex-direction: column;
+    overflow: auto;
+}
+.flex{
+    display: flex;
+    width: 100%;
+    padding: 2px;
+}
+.CMS0,
+.CMS1,
+.CMS2{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.CMS0{
+    background-color: #15B337;
+}
+.CMS1{
+    background-color: #ff0000;
+}
+.CMS2{
+    background-color: #888888;
+}
+.btn-box > :nth-child(2){
+    margin-left: auto;
+    margin-right: 10px;
+}
+
+.phase{
+    margin-left: auto;
+    margin-right: 10px;
+}
+
+.state-box{
+    display: flex;
+    width: 100%;
+    height: 25px;
+    align-items: center;
+}
+.phase-title:hover{
+    cursor: pointer;
+}
+.state-box > div:nth-child(1),
+.state-box > div:nth-child(2),
+.state-box > div:nth-child(3),
+.state-box > div:nth-child(4),
+.state-box > div:nth-child(5),
+.state-box > div:nth-child(6),
+.state-box > div:nth-child(7){
+    margin-left: 5px;
+    width: calc(100% / 7 - 10px);
+    height: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.state-box > div:nth-child(7) {
+    margin-left:auto;
+    margin-right: 5px;
+}
+.date-text{
+    padding-left: 5px;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    color: red;
+}
+
+.tc input{
+    text-align: center;
+}
+
+.ft-text{
+    width: 110px;
+}
+.ml-10{
+    margin-left: 10px;
+}
+
+.image-box{
+    display     : flex; 
+    align-items : center; 
+    justify-content : center;
+}
+
+/*.phase-box{*/
+/*    float: left;*/
+/*}*/
+.image{
+    width: calc(100% - 20px);
+}
+.img-box{
+    width: 100%;
+    height: 100%;
+}
+.float-board {
+    clear: both;
+    width: 100%;
+    height: 100%;
+    padding: 2px;
+    overflow: auto;
+}
+.edit-box{
+    width: 350px;
+    height: 100%;
+    padding: 2px;
+    display: flex;
+    flex-direction: column;
+}
+.hover-title{
+    padding: 5px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #2f2f38;
+    position: absolute;
+}
+.hover-text{
+    padding: 5px;
+    display: none;
+    align-items: center;
+    justify-content: center;
+    background-color: #2f2f38;
+    position: absolute;
+}
+.serve-title{
+    width: 100%;
+}
+
+.vms-info{
+    width: 100%;
+    height: 75px;
+    display: flex;
+    flex-direction: column;
+}
+.vms-info > div:nth-child(1),
+.vms-info > div:nth-child(2),
+.vms-info > div:nth-child(3){
+    display: flex;
+    width: 100%;
+    height: 25px;
+    align-items: center;
+}
+
+.label{
+    width: 60px;
+    justify-content: right;
+    display: flex;
+}
+.module-info{
+    width: 100%;
+    height: 50px;
+}
+.door-info > div,
+.module-info > div{
+    height: 25px;
+    display: flex;
+    align-items: center;
+}
+.module-info > div:nth-child(2){
+    display: flex;
+}
+.door-info{
+    width: 100%;
+    height: 75px;
+}
+.door-info > div:nth-child(2) {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 50px;
+}
+.door-info > div:nth-child(2) > div:nth-child(1),
+.door-info > div:nth-child(2) > div:nth-child(2){
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 25px;
+}
+
+.schedule-list{
+    width: 100%;
+    height: calc(100% - 349px);
+}
+.btn-box{
+    height: 35px;
+}
+.dx-checkbox-text{
+    font-size: 10px;
+}
+
+.btn-box > div:nth-child(4){
+    margin-left: auto;
+
+}
+
+.ml-5 {
+    margin-left: 5px;
+}
+
+.no-padding{
+    padding: 5px !important;
+}
+
+.selected-box{
+    border: 1px solid #03a9f4;
+}
+
+.btn-box > div:nth-child(1){
+    margin-left:auto;
+}
+
+.dspl_dt{
+    display: flex;
+    height: 30px;
+    align-items: center;
+    padding-left: 20px;
+}

src/main/resources/static/application/op/06.vms/01.system/01.monitoring/01.phase/phase copy.html

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="/libs/include-common.js"></script>
+    <link rel="stylesheet" href="/application/op/99.common/common.css">
+    <script src="./phase copy.js"></script>
+    <link rel="stylesheet" href="./phase copy.css">
+    <title>현시 모니터링</title>
+</head>
+<body class="dx-viewport">
+    <div class="container b0">
+        <div class="title-box b2">
+            <div>현시 모니터링</div>
+            <div>
+                <div class="close-btn"></div>
+            </div>
+        </div>
+        <div class="table-box">
+           <div class="table-container">
+                <div>
+                   <div class="scenario-tabs"></div>
+                </div>
+           </div>
+        </div>
+    </div>
+    
+</body>
+</html>

src/main/resources/static/application/op/06.vms/01.system/01.monitoring/01.phase/phase copy.js

@@ -0,0 +1,788 @@
+let _scenarioTabs     = null;
+const commonUri       = '/api/vms/monitoring/edit/scenario/phase';
+let _intervalMap      = new Map();
+_intervalMap.set('interval', []);
+let _magnigication    = 1.0;
+const _divMap         = new Map();
+const _dataMap        = new Map();
+let _selectedBox      = null;
+let _deselectInterval = [];
+let _selectedInterval = [];
+const _userId         = window.opener.$userId;
+let toggle = null;
+const _selecteMap     = new Map();
+$(() =>{
+    creatBtn($(".close-btn"), "close", "닫기", "닫기", "outlined", () => window.close());
+    toggle = creatBtn($(".test"), "close", "토글", "토글", "outlined");
+
+    _scenarioTabs = $('.scenario-tabs').width('100%').height('100%').dxTabPanel({
+        dataSource       : null,
+        selectIndex      : 0,
+        loop             : false,
+        animationEnabled : true,
+        swipeEnabled     : false,
+        noDataText       : '표출할 정보가 없습니다.',
+        itemTitleTemplate: function(e){
+            return $('<div style="height:29px; line-height:29px;">'+e.name+'</div>')
+        },
+        itemTemplate: function(e, idx, c){
+            c.css('display', 'flex');
+            if(!_intervalMap.get(e.id)){
+                _intervalMap.set(e.id, new Map());
+            }
+            let intervalBox = _intervalMap.get(e.id);
+            intervalBox.set('deselectEventElement', new Array());
+            let deselectElenmet = intervalBox.get('deselectEventElement');
+            clearMap();
+            //한줄 5개짜리 모니터링 화면 생성
+            const div = $('<div class="float-board b0">');
+            let height = 0;
+            for (let idx in e.text) {
+                const text = $('<div style="float:left;">');
+                div.append(text.append(e.text[idx]));
+                deselectElenmet.push([[...e.msgs[idx]], e.position[idx], e.phase[idx]]);
+            }
+            c.append(div, e.editBox);
+            heightControler(div, e.text)
+
+            if (_selecteMap.get(e.id)) {
+                e.editBox.css('display', 'flex');
+                const title = e.title[_selecteMap.get(e.id)];
+                title.addClass('dx-theme-accent-as-background-color');
+                let key = Number(title.attr('id'));
+                let obj = _dataMap.get(e.id).get(key);
+                //텍스트 화면 값 세팅
+                e.textColumns.map((item)=>{
+                    setValue(item.box, obj[item.column]);
+                });
+
+                //제공시각 입력
+                $('.dspl_dt_text').text(getParseDateTime(obj['dspl_dt']));
+
+                //통신 상태에 따른 제공시각 색상 설정
+                let color = obj.cmnc_stts_desc === '통신두절'? 'red' : '#fff';
+                $('.dspl_dt').css('color', color);
+                //우측 화면 하단 VMS 표출메시지 스케줄 데이터 교체
+                 e.table.option('dataSource', obj.msgs);
+            } 
+            else {
+                e.editBox.css('display', 'none');
+            }
+
+            for(let idx in deselectElenmet){
+                intervalEvent(deselectElenmet[idx][0], deselectElenmet[idx][1], deselectElenmet[idx][2], 0);
+            }
+            for (let idx in e.title) {
+                const title = e.title[idx];
+                title.on('click', function(){
+                    for (let index in e.title) {
+                        const serve = e.title[index];
+                        if (serve.attr('class').indexOf('dx-theme-accent-as-background-color') > 0){
+                            if (serve === title) {
+                                serve.removeClass('dx-theme-accent-as-background-color');
+                                e.editBox.css('display', 'none');
+                                _selecteMap.delete(e.id);
+                                heightControler(div, e.text)
+                                return;
+                            }
+                        }
+                        serve.removeClass('dx-theme-accent-as-background-color');
+                    }
+                    title.addClass('dx-theme-accent-as-background-color');
+                    e.editBox.css('display', 'flex');
+                    let key = Number(title.attr('id'));
+                    let obj = _dataMap.get(e.id).get(key);
+                    //텍스트 화면 값 세팅
+                    e.textColumns.map((item)=>{
+                        setValue(item.box, obj[item.column]);
+                    });
+
+                    //제공시각 입력
+                    $('.dspl_dt_text').text(getParseDateTime(obj['dspl_dt']));
+
+                    //통신 상태에 따른 제공시각 색상 설정
+                    let color = obj.cmnc_stts_desc === '통신두절'? 'red' : '#fff';
+                    $('.dspl_dt').css('color', color);
+                    _selecteMap.set(e.id, idx);
+                    //우측 화면 하단 VMS 표출메시지 스케줄 데이터 교체
+                     e.table.option('dataSource', obj.msgs);
+                    heightControler(div, e.text);
+                })
+            }
+            $(window).resize(function(){
+                console.log('테스트');
+                heightControler(div, e.text);
+            })
+            return c;
+        },
+        onSelectionChanged(e){
+            
+            //이전 탭
+            const removeTab = e.removedItems[0];
+            //현재 탭
+            const selectedTab = e.addedItems[0];
+            clearMap();
+
+            //셀렉트 된 박스 초기화
+            if (removeTab) {
+                if (selectedTab) {
+                    let intervalBox = _intervalMap.get(selectedTab.id);
+                    let deselectElenmet = intervalBox.get('deselectEventElement');
+                    for(let idx in deselectElenmet){
+                        intervalEvent(deselectElenmet[idx][0], deselectElenmet[idx][1], deselectElenmet[idx][2], 0);
+                    }
+                }
+            }
+        },
+    }).dxTabPanel('instance');
+
+    fetchBaseData();
+
+})
+function heightControler(container, textArr) {
+    let width = 0;
+    let height = 0;
+    let startIdx = 0;
+    for (let idx in textArr){
+        const text = textArr[idx];
+        const index = Number(idx);
+        //위드값
+        width += text.width();
+        if ( container.width() > width) {
+            //높이 체크
+            height = height < text.height() ? text.height() : height;
+            if (textArr.length -1 === index) {
+                for(let ii = startIdx; ii < index; ii++ ) {
+                    textArr[ii].parent().css('height', height);
+                }
+            }
+        }
+        else {
+            for(let ii = startIdx; ii < index; ii++ ) {
+                textArr[ii].parent().css('height', height);
+            }
+            width = 0;
+            height = 0;
+            startIdx = index;
+        }
+
+    }
+}
+
+function clearMap(){
+    if (_intervalMap.get('interval') &&_intervalMap.get('interval').length > 0) {
+        _intervalMap.get('interval').map((timer)=>{
+            window.clearTimeout(timer);
+        });
+        _intervalMap.set('interval', []);
+    }
+}
+//타이틀 클릭 이벤트
+function titleClickEvent(clone, e, idx){
+    clone.children().eq(0).on('click',function(){
+        if (_selectedBox) {
+            $(_selectedBox[0]).removeClass('selected-box');
+            $(_selectedBox[1]).removeClass('selected-box');
+        }
+        if (_selectedBox && _selectedBox[1] === clone &&  $('.deselect-div-box').css('display') === 'none') {
+            clickCss('flex', 'none', 'none', '100%', 'calc(100% / 5)');
+        }
+        else {
+            clickCommon(e, idx, clone, $(this));
+        }
+
+    });
+
+    e.text[idx].children().eq(0).on('click', function(){
+        if (_selectedBox) {
+            $(_selectedBox[0]).removeClass('selected-box');
+            $(_selectedBox[1]).removeClass('selected-box');
+        }
+        clickCommon(e, idx, clone, $(this));
+    });
+}
+
+function clickCommon(e, idx, clone, title) {
+    //css 설정
+    clickCss('none', 'flex', 'flex', 'calc(100% / 5 * 4)', 'calc(100% / 4)');
+
+    //클릭 객체 값 가져오기
+    let key = Number(title.attr('id'));
+    let obj = _dataMap.get(e.id).get(key);
+    //선택 된 화면 모양을 위한 css 틀 설정
+    $(e.text[idx]).addClass('selected-box');
+    $(clone).addClass('selected-box');
+    _selectedBox = [e.text[idx], clone];
+    //텍스트 화면 값 세팅
+    e.textColumns.map((item)=>{
+        setValue(item.box, obj[item.column]);
+    });
+
+    //제공시각 입력
+    $('.dspl_dt_text').text(getParseDateTime(obj['dspl_dt']));
+
+    //통신 상태에 따른 제공시각 색상 설정
+    let color = obj.cmnc_stts_desc === '통신두절'? 'red' : '#fff';
+    $('.dspl_dt').css('color', color);
+
+    //우측 화면 하단 VMS 표출메시지 스케줄 데이터 교체
+    e.table.option('dataSource', obj.msgs);
+}
+
+function clickCss(deselectVal, selectVal, editVal, paddingVal, phaseVal){
+    $('.deselect-div-box').css('display', deselectVal);
+    $('.selected-div-box').css('display', selectVal);
+    $('.edit-box').css('display', editVal);
+    $('.padding-box').css('width', paddingVal);
+    $('.phase-box').css('width', phaseVal);
+}
+
+//데이터 생성
+function fetchBaseData(){
+    // 전체 표출 메시지 조회
+    getDataAsync('/api/vms/monitoring/edit/scenario/phase', fetchTabs);
+    phaseInterval();
+}
+
+let _listTimer = null;
+function phaseInterval() {
+    if (_listTimer) {
+        window.clearInterval(_listTimer);
+    }
+    _listTimer = setInterval(() => {
+        getDataAsync('/api/vms/monitoring/edit/scenario/phase', fetchTabs);
+    }, 60 * 1000);
+}
+
+//탭 생성
+function fetchTabs(jsonData){
+    let dataSource   = [];
+    // 전체 모니터링 화면 목록
+    let data = [];
+    let dataMap = new Map();
+    getData('/api/vms/common/vms-form/dspl-prst/all', data);
+    if (data[0].length > 0) {
+        data = data[0];
+        data.map((obj) => {
+            dataMap.set(obj.vms_ctlr_nmbr, obj);
+        });
+    }
+
+    if (jsonData.length > 0) {
+        for (let ii = 0; ii < jsonData.length; ii++) {
+            let obj = jsonData[ii];
+            let idx = dataSource.length - 1;
+            if(!_dataMap.get(obj.monitoring_nm)) {
+                _dataMap.set(obj.monitoring_nm, new Map());
+            }
+            if (dataSource.length === 0 || dataSource[idx].id !== obj.monitoring_nm) {
+                dataSource.push({
+                    id           : obj.monitoring_nm,
+                    name         : obj.monitoring_nm,
+                    text         : [],
+                    msgs         : [],
+                    height       : [],
+                    position     : [],
+                    phase        : [],
+                    title        : [],
+                    editBox      : null,
+                    textColumns  : null,
+                    checkColumns : null,
+                    btn          : null,
+                    table        : null,
+                    select       : null,
+                    deselect     : null,
+                });
+                idx = dataSource.length - 1;
+                let editArr = editBox();
+                dataSource[idx]['editBox'] = editArr[0];
+                dataSource[idx]['editBox'].addClass(dataSource[idx].id);
+                dataSource[idx]['textColumns'] = editArr[1];
+                dataSource[idx]['checkColumns'] = editArr[2];
+                dataSource[idx]['btn'] = editArr[3];
+                dataSource[idx]['table'] = editArr[4];
+            }
+            const data = dataMap.get(obj.vms_ctlr_nmbr);
+            if (data) {
+                _dataMap.get(obj.monitoring_nm).set(obj.vms_ctlr_nmbr, data);
+                const dsplDt = getParseDateTime(data.dspl_dt);
+
+                const imageNm = data.cmnc_stts_desc === '통신두절' ? 'false' : 'true';
+
+                let dsplDtColor = data.cmnc_stts_desc === '통신두절' ? 'wanrning' : '#fff';
+
+                let operClass  = stateColorSelector(data.oper_mode_desc);
+                let powerClass = stateColorSelector(data.pwer_stts_desc);
+                let modlClass  = stateColorSelector(data.modl_stts_desc);
+                let doorClass  = stateColorSelector(data.cbox_door_stts_desc);
+                let hetrClass  = stateColorSelector(data.hetr_stts_desc);
+                let fanClass   = stateColorSelector(data.fan_stts_desc);
+
+                let tempClass = '';
+                if (data.cbox_tmpr === 255 || data.cbox_tmpr === null || data.cbox_tmpr === '-') {
+                    data.cbox_tmpr = '-'
+                    tempClass = 'gray';
+                }
+                let height = 80 + data.vms_hght;
+                let width  = 20 + data.vms_wdth;
+                data.msgs.sort(function(a,b){
+                    return a.phase - b.phase
+                });
+
+                let div = $(
+                    `<div class='phase-box b0' style='width: ${width}px; height:${height}px;'>
+                                <div class='phase-title b2' id='${data.vms_ctlr_nmbr}' title='${data.vms_ctlr_nmbr} [${data.vms_ctlr_id}]\n${data.vms_nm}'>
+                                    <img src='/images/op/icon/${imageNm}.png' width='20px' height='20px' align='center'> ${data.vms_nm} <span class='phase'>1/${data.msgs.length}</span></div>
+                                <div class='image-box' style='width:100%;height:${data.vms_hght + 10}px;'>
+                                    <img class='image' style='width:${data.vms_wdth}px; height:${data.vms_hght}px;' src='data:image/png;base64,${data.msgs[0].vms_dspl_msg_imag}'>
+                                </div>
+                                <div class='date-text' style='color:${dsplDtColor}'>제공시각: ${dsplDt}</div>
+                                <div class='state-box'>
+                                    <div class='${doorClass} b0' title='도어 상태'>${data.cbox_door_stts_desc}</div>
+                                    <div class='${fanClass} b0' title='팬 동작 상태'>${data.fan_stts_desc}</div>
+                                    <div class='${hetrClass} b0' title='히터 가동 상태'>${data.hetr_stts_desc}</div>
+                                    <div class='${modlClass} b0' title='모듈'>${data.modl_stts_desc}</div>
+                                    <div class='${powerClass} b0' title='모듈 전원 상태'>${data.pwer_stts_desc}</div>
+                                    <div class='${tempClass} b0' title='함체 온도'>${data.cbox_tmpr}</div>
+                                    <div class='${operClass} b0' title='운영 모드'>${data.oper_mode_desc}</div>
+                                </div>
+                            </div>`
+                );
+
+                dataSource[idx]['text'].push(div);
+                dataSource[idx]['msgs'].push(data.msgs);
+                dataSource[idx]['height'].push(height);
+                dataSource[idx]['position'].push($(div).children().eq(1).children().eq(0));
+                dataSource[idx]['phase'].push($(div).children().eq(0).children().eq(1));
+                dataSource[idx]['title'].push($(div).children().eq(0));
+            }
+        }
+
+    }
+    _scenarioTabs.option('dataSource', dataSource);
+};
+
+function stateColorSelector(value) {
+    let className = '';
+    if (value === '중지' || value === '정상' || value === '닫힘' || value === '자동') {
+        className = 'green';
+    }
+    else if (value === '가동' || value === '기본') {
+        className = 'yellow';
+    }
+    else if (value === '-' || !value) {
+        className = 'gray';
+    }
+    else {
+        className = 'wanrning';
+    }
+    return className;
+}
+
+//이미지 인터벌 이벤트
+function intervalEvent(value, position, phase, idx){
+    if (value[idx]) {
+        $(position).prop('src', 'data:image/png;base64,'+ value[idx].vms_dspl_msg_imag);
+        idx++;
+        $(phase).text(`${idx}/${value.length}`);
+        if(idx === value.length) idx = 0;
+        let dspl_hh = value[idx].dspl_hh;
+        let timer = setTimeout(()=>{
+            window.clearInterval(timer);
+            intervalEvent(value, position, phase, idx);
+        }, dspl_hh * 1000);
+        _intervalMap.get('interval').push(timer);
+    }
+}
+
+//에디트 박스 생성
+function editBox(){
+    //박스 타이틀 선택 시 보이는 edit 화면
+    const editBox = $(`
+   <div class='edit-box b1 b2 b4'>
+       <div class='serve-title b2'>VMS 상태정보</div>
+       <div class='vms-info b2'>
+           <div>
+               <div class='label'>VMS ID</div>
+               <div class="ml-5">
+                   <div class="vms_id tc"></div>
+               </div>
+               <div class='label ml-5'>VMS 유형</div>
+               <div class="ml-5">
+                   <div class='tc'></div>
+               </div>
+           </div>
+           <div>
+               <div class='label'>VMS 명칭</div>
+               <div class="ml-5">
+                   <div></div>
+               </div>
+           </div>
+           <div>
+               <div class='label'>운영모드</div>
+               <div class="ml-5 ft-text">
+                   <div class='tc'></div>
+               </div>
+               <div class='label ml-5'>VMS 통신</div>
+               <div class="ml-5">
+                   <div class='tc'></div>
+               </div>
+           </div>
+       </div>
+       <div class='module-info b2'>
+           <div class='serve-title b2'>모듈상태</div>
+           <div>
+               <div class="label">상태</div>
+               <div class="ml-5">
+                   <div class='tc'></div>
+               </div>
+               <div class="ml-10">전원 상태</div>
+               <div class="ml-5" style='width:50px;'>
+                   <div class='tc'></div>
+               </div>
+               <div class="ml-10">휘도값</div>
+               <div class="ml-5">
+                   <div class='tc'></div>
+               </div>
+           </div>
+       </div>
+       <div class='door-info b2'>
+           <div class='serve-title b2'>함체상태</div>    
+           <div>
+               <div>
+                   <div class='label'>도어 상태</div>
+                   <div class="ml-5 ft-text">
+                       <div class='tc'></div>
+                   </div>
+                   <div class='label'>팬상태</div>
+                   <div class="ml-5">
+                       <div class='tc'></div>
+                   </div>
+               </div>
+               <div>
+                   <div class='label'>히터상태</div>
+                   <div class="ml-5 ft-text">
+                       <div class='tc'></div>
+                   </div>
+                   <div class='label'>온도값</div>
+                   <div class="ml-5">
+                       <div class='tc'></div>
+                   </div>
+               </div>
+           </div>
+       </div>
+       <div class='btn-box b2'>
+           <div>
+               <div></div>
+           </div>
+           <div>
+               <div></div>
+           </div>
+           <div>
+               <div></div>
+           </div>
+           <div>
+               <div></div>
+           </div>
+       </div>
+       <div class='serve-title b2'>VMS 표출 메시지 스케줄</div>
+       <div class='dspl_dt'>제공시각:<span class='dspl_dt_text'></span></div>
+       <div class='schedule-list'>
+           <div></div>
+       </div>
+       <div class='btn-box'>
+           <div></div>
+       </div>
+   </div>
+   `);
+
+    const vmsInfo   = $(editBox).children().eq(1);
+    const vmsCtlrId = vmsInfo.children().eq(0).children().eq(1).children().eq(0);
+    const vmsType = vmsInfo.children().eq(0).children().eq(3).children().eq(0);
+    const vmsNm     = vmsInfo.children().eq(1).children().eq(1).children().eq(0);
+    const operMode  = vmsInfo.children().eq(2).children().eq(1).children().eq(0);
+    const cmncStts  = vmsInfo.children().eq(2).children().eq(3).children().eq(0);
+
+    const modlInfo  = $(editBox).children().eq(2).children().eq(1);
+    const modlStts  = modlInfo.children().eq(1).children().eq(0);
+    const pwerStts  = modlInfo.children().eq(3).children().eq(0);
+    const brghVal   = modlInfo.children().eq(5).children().eq(0);
+
+    const doorInfo  = $(editBox).children().eq(3).children().eq(1);
+    const doorStts  = doorInfo.children().eq(0).children().eq(1).children().eq(0);
+    const fanStts   = doorInfo.children().eq(0).children().eq(3).children().eq(0);
+    const hetrStts  = doorInfo.children().eq(1).children().eq(1).children().eq(0);
+    const cboxTemp  = doorInfo.children().eq(1).children().eq(3).children().eq(0);
+
+    const btnBox      = $(editBox).children().eq(4)
+    const onCheck     = btnBox.children().eq(0).children().eq(0);
+    const offCheck    = btnBox.children().eq(1).children().eq(0);
+    const resetCheck  = btnBox.children().eq(2).children().eq(0);
+    const sendBtn     = btnBox.children().eq(3).children().eq(0);
+
+    //텍스트 상자 옵션
+    const textColumns = [
+        {
+            column:'vms_ctlr_id',
+            position : vmsCtlrId,
+            box      : null,
+            width    : 110,
+            height   : 20,
+            stylingMode : 'outlined',
+        },
+        {
+            column:'vms_usag_type_desc',
+            position : vmsType,
+            box      : null,
+            width    : 90,
+            height   : 20,
+            stylingMode : 'outlined',
+        },
+        {
+            column:'vms_nm',
+            position : vmsNm,
+            box      : null,
+            width    : 270,
+            height   : 20,
+            stylingMode : 'outlined',
+        },
+        {
+            column:'oper_mode_desc',
+            position : operMode,
+            box      : null,
+            width    : 50,
+            height   : 20,
+            stylingMode : 'outlined',
+        },
+        {
+            column:'cmnc_stts_desc',
+            position : cmncStts,
+            box      : null,
+            width    : 90,
+            height   : 20,
+            stylingMode : 'outlined',
+        },
+        {
+            column:'modl_stts_desc',
+            position : modlStts,
+            box      : null,
+            width    : 45,
+            height   : 20,
+            stylingMode : 'outlined',
+        },
+        {
+            column:'pwer_stts_desc',
+            position : pwerStts,
+            box      : null,
+            width    : 45,
+            height   : 20,
+            stylingMode : 'outlined',
+        },
+        {
+            column:'brgh_val',
+            position : brghVal,
+            box      : null,
+            width    : 45,
+            height   : 20,
+            stylingMode : 'outlined',
+        },
+        {
+            column:'cbox_door_stts_desc',
+            position : doorStts,
+            box      : null,
+            width    : 50,
+            height   : 20,
+            stylingMode : 'outlined',
+        },
+        {
+            column:'fan_stts_desc',
+            position : fanStts,
+            box      : null,
+            width    : 50,
+            height   : 20,
+            stylingMode : 'outlined',
+        },
+        {
+            column:'hetr_stts_desc',
+            position : hetrStts,
+            box      : null,
+            width    : 50,
+            height   : 20,
+            stylingMode : 'outlined',
+        },
+        {
+            column:'cbox_tmpr',
+            position : cboxTemp,
+            box      : null,
+            width    : 50,
+            height   : 20,
+            stylingMode : 'outlined',
+        },
+    ];
+
+    //체크박스 상자 옵션
+    const checkColumns = [
+        {
+            position : onCheck,
+            text     : '전광판 ON',
+            box      : null,
+        },
+        {
+            position : offCheck,
+            text     : '전광판 OFF',
+            box      : null,
+
+        },
+        {
+            position : resetCheck,
+            text     : '제어기 리셋',
+            box      :  null,
+        },
+    ]
+
+    //전송 버튼 박스
+    creatBtn(sendBtn, 'check', '전송', '전송', 'outlined', sendBtnClick, null, false, true);
+
+    //화면 관리 버튼 박스
+    creatBtn($(editBox).children().eq(8).children().eq(0), 'edit', '화면관리', '화면관리', 'outlined', editViewPopup, null, false, true);
+
+    //edit 화면 하단 VMS 폼 이미지 리스트
+    let editVmsFormList = $(editBox).children().eq(7).children().eq(0).width('100%').height('100%').dxDataGrid({
+        dataSource              : null,
+        allowColumnReordering   : true,
+        showColumnLines         : true,
+        showBorders             : true,
+        allowColumnResizing     : true,
+        rowAlternationEnabled   : true,
+        columnAutoWidth         : true,
+        focusedRowEnabled       : true,
+        keyExpr                 : 'phase',
+        noDataText              : '표출할 정보가 없습니다.',
+        scrolling               : {
+            mode : 'standard',
+        },
+        selection: {
+            mode: 'single',
+        },
+        paging: {
+            enabled: true,
+            pageSize: 1000,
+        },
+        sorting  : {
+            showSortIndexes : false,
+            mode            : 'none',
+        },
+        columns:[
+            {
+                dataField    : "phase",
+                caption      : "S",
+                alignment    : "center",
+                cssClass     : 'no-padding',
+            },
+            {
+                dataField    : "vms_dspl_msg_imag",
+                caption      : "표출메시지",
+                alignment    : "center",
+                cssClass     : 'no-padding',
+                width        : 330,
+                cellTemplate(c,e){
+                    c.css('padding','3px')
+                    const imgSrc = 'data:image/png;base64,'+ e.displayValue
+                    const image = $('<img src="'+imgSrc+'" >').css('width','100%');
+                    return c.append(image);
+                }
+            },
+        ],
+    }).dxDataGrid('instance');
+
+    //체크 박스 세팅
+    checkColumns.map((item)=>{
+        item.box = item.position.dxCheckBox({
+            stylingMode : 'outlined',
+            text        : item.text,
+        }).dxCheckBox('instance');
+    });
+
+    //체크 박스 꺼짐 방지 이벤트
+    $(onCheck).on('click',()=>{
+        if(!getValue(checkColumns[0].box)) setValue(checkColumns[0].box, true);
+    });
+    $(offCheck).on('click',()=>{
+        if(!getValue(checkColumns[1].box))setValue(checkColumns[1].box, true);
+    })
+    $(resetCheck ).on('click',()=>{
+        if(!getValue(checkColumns[2].box))setValue(checkColumns[2].box, true);
+    })
+
+    //체크박스 처음 값 세팅
+    setValue(checkColumns[0].box, true);
+
+    //체크박스 선택시 나머지 체크 박스 값 초기화
+    checkColumns[0].box.on('valueChanged',(e)=>{
+        if (getValue(checkColumns[1].box)) setValue(checkColumns[1].box, !e.value)
+        if (getValue(checkColumns[2].box)) setValue(checkColumns[2].box, !e.value)
+    });
+    checkColumns[1].box.on('valueChanged',(e)=>{
+        if (getValue(checkColumns[0].box)) setValue(checkColumns[0].box, !e.value)
+        if (getValue(checkColumns[2].box)) setValue(checkColumns[2].box, !e.value)
+    });
+    checkColumns[2].box.on('valueChanged',(e)=>{
+        if (getValue(checkColumns[0].box)) setValue(checkColumns[0].box, !e.value)
+        if (getValue(checkColumns[1].box)) setValue(checkColumns[1].box, !e.value)
+    });
+
+    //텍스트 박스 세팅
+    textColumns.map((item)=>{
+        item.box = item.position.dxTextBox({
+            width       : item.width,
+            height      : item.height,
+            stylingMode : item.stylingMode,
+            readOnly    : true,
+        }).dxTextBox('instance');
+    });
+
+    return [editBox, textColumns, checkColumns, sendBtn, editVmsFormList];
+}
+
+//전송 버튼 클릭 이벤트
+function sendBtnClick() {
+    if (!_selectedBox) {
+        return alertWarning('VMS가 선택되지 않았습니다.<br>VMS 목록에서 VMS를 선택하십시오.<br>현재 통신이 비정상적인 VMS는 선택하실 수 없습니다.');
+    }
+
+    let title         = $(_selectedBox[0]).children().eq(0);
+    let key           = Number(title.attr('id'));
+    let id            = _scenarioTabs.option('selectedItem').id;
+    let checkColumns  = _scenarioTabs.option('selectedItem').checkColumns;
+    let obj           = _dataMap.get(id).get(key);
+
+    if (obj.cmnc_stts_desc === '통신두절') {
+        return alertWarning('VMS가 선택되지 않았습니다.<br>VMS 목록에서 VMS를 선택하십시오.<br>현재 통신이 비정상적인 VMS는 선택하실 수 없습니다.');
+    }
+
+    let onVal  = getValue(checkColumns[0].box);
+    let offVal = getValue(checkColumns[1].box);
+    let resetVal = getValue(checkColumns[2].box);
+    let result = '';
+    if (onVal){
+        result = postInsertUpdate('/api/vms/control/power/' + obj.vms_ctlr_nmbr, {user_id:_userId, value : 0});
+    }
+    else if (offVal) {
+        result = postInsertUpdate('/api/vms/control/power/' + obj.vms_ctlr_nmbr, {user_id:_userId, value : 1});
+    }
+    else if (resetVal) {
+        result = postInsertUpdate('/api/vms/control/reset/' + obj.vms_ctlr_nmbr, {user_id:_userId, value : 0});
+    }
+
+    if(result > 0){
+        fetchBaseData();
+        return alertConfirm('VMS 상태 정보가 저장 되었습니다.');
+    }
+    //return alertError('VMS 상태 정보가 저장되지 않았습니다.');
+
+}
+
+//화면 관리 버튼 클릭 이벤트
+function editViewPopup(){
+    window.open('./phase-popup-manager.html', 'VMS 모니터링 화면 관리', 'width = 1200, height = 650, top = 150, left = 300, resizable=yes, scrollbars=no');
+}

src/main/resources/static/application/op/06.vms/01.system/01.monitoring/01.phase/phase.html

@@ -6,8 +6,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <script src="/libs/include-common.js"></script>
     <link rel="stylesheet" href="/application/op/99.common/common.css">
-    <script src="./phase.js"></script>
-    <link rel="stylesheet" href="./phase.css">
+    <script src="./phase copy.js"></script>
+    <link rel="stylesheet" href="./phase copy.css">
     <title>현시 모니터링</title>
 </head>
 <body class="dx-viewport">

src/main/resources/static/application/op/06.vms/01.system/01.monitoring/01.phase/phase_origin.html

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="/libs/include-common.js"></script>
+    <link rel="stylesheet" href="/application/op/99.common/common.css">
+    <script src="./phase.js"></script>
+    <link rel="stylesheet" href="./phase.css">
+    <title>현시 모니터링</title>
+</head>
+<body class="dx-viewport">
+    <div class="container b0">
+        <div class="title-box b2">
+            <div>현시 모니터링</div>
+            <div>
+                <div class="close-btn"></div>
+            </div>
+        </div>
+        <div class="table-box">
+           <div class="table-container">
+                <div>
+                   <div class="scenario-tabs"></div>
+                </div>
+           </div>
+        </div>
+    </div>
+    
+</body>
+</html>

src/main/resources/static/application/op/07.vds/08.statistics-dtct-tfvl/dtct-tfvl.js

@@ -429,7 +429,10 @@ $(()=>{
         keyExpr                 : 'dtct_nmbr',
         noDataText              : '표출할 정보가 없습니다.',
         scrolling: {
-            mode: 'virtual',
+            mode: 'standard',
+        },
+        paging : {
+            pageSize : 1000,
         },
         export:{
             enabled: true,
@@ -443,9 +446,16 @@ $(()=>{
                 alignment : "center",
                 columns:[
                     {
-                        dataField    : "vds_dtct_nm",
+                        dataField    : "vds_ctlr_id",
+                        caption      : "VDS ID",
+                        allowSorting : true,
+                        alignment    : "center",
+                        cssClass     : "padding-ctrl",
+                    },
+                    {
+                        dataField    : "lctn",
                         caption      : "제어기명칭",
-                        allowSorting : false,
+                        allowSorting : true,
                         alignment    : "center",
                         cssClass     : 'padding-ctrl',
                         cellTemplate(c,e) {
@@ -462,7 +472,7 @@ $(()=>{
                         
                     },
                     {
-                        dataField    : "dtct_type_nm",
+                        dataField    : "vds_dtct_nm",
                         caption      : "검지기명칭",
                         allowSorting : false,
                         cssClass     : 'padding-ctrl',
@@ -516,7 +526,10 @@ $(()=>{
             mode: 'single',
         },
         scrolling: {
-            mode: 'virtual',
+            mode: 'standard',
+        },
+        paging : {
+          pageSize : 1000,
         },
         export:{
             enabled: true,
@@ -530,9 +543,16 @@ $(()=>{
                 alignment : "center",
                 columns:[
                     {
-                        dataField    : "vds_dtct_nm",
+                        dataField    : "vds_ctlr_id",
+                        caption      : "VDS ID",
+                        allowSorting : true,
+                        alignment    : "center",
+                        cssClass     : "padding-ctrl",
+                    },
+                    {
+                        dataField    : "lctn",
                         caption      : "제어기명칭",
-                        allowSorting : false,
+                        allowSorting : true,
                         alignment    : "center",
                         cssClass     : 'padding-ctrl',
                         cellTemplate(c,e) {
@@ -549,7 +569,7 @@ $(()=>{
                         
                     },
                     {
-                        dataField    : "dtct_type_nm",
+                        dataField    : "vds_dtct_nm",
                         caption      : "검지기명칭",
                         allowSorting : false,
                         cssClass     : 'padding-ctrl',
@@ -937,7 +957,10 @@ function fetchChartInfo(chart, axisType, url, table, tableData, updateData, meth
     series       = [];
     getDataAsync( commouUri + url, (jsonData)=>{
         tableData = jsonData;
-    
+        tableData.sort(function(a,b){
+            return a.lctn < b.lctn ? -1 : b.lctn < a.lctn ? 1 : 0;
+        });
+
         if (chart) {
             chartInit( table, type );
         }
@@ -962,7 +985,7 @@ function fetchChartInfo(chart, axisType, url, table, tableData, updateData, meth
                     id           : idx,
                     type         : getValue(chartTypeSelect),
                     showInLegend : false,
-                    name         : dataArr[idx]['vds_dtct_nm'] + ":" + dataArr[idx]['istl_lane'],
+                    name         : dataArr[idx]['lctn'] + ":" + dataArr[idx]['istl_lane'],
                     data         : data,
                 });
         }

src/main/resources/static/application/op/99.common/common.js

@@ -985,7 +985,6 @@ function createLoadingDiv(){
 $(()=>{
     const loadingDiv = createLoadingDiv();
     $('body').append(loadingDiv);
-    $('html').css({width:'calc(100% - 2px)', height:'calc(100% - 2px)', border: '1px solid #524f4f'})
     //부모창 종료 시 팝업 종료
     $(opener).bind("beforeunload", ()=>{
         window.close();

src/main/resources/static/js/vworld/map-mngr.js

@@ -1069,9 +1069,6 @@ export class TMapMngr {
         let toIdx = 0;
         switch (ALyrType) {
             case LayerType.LINK:
-                _linkMap.forEach((obj) => {
-                    obj.initTraf();
-                });
                 AJsonData.forEach((el, idx) => {
                     const obj = _linkMap.get(el.id);
                     if (obj) {
@@ -1082,9 +1079,6 @@ export class TMapMngr {
                 toIdx = LayerIndex.Link5;
                 break;
             case LayerType.IFSC:
-                _ifscMap.forEach((obj) => {
-                    obj.initTraf();
-                });
                 AJsonData.forEach((el, idx) => {
                     const obj = _ifscMap.get(el.id);
                     if (obj) {
@@ -1095,9 +1089,6 @@ export class TMapMngr {
                 toIdx = LayerIndex.Ifsc5;
                 break;
             case LayerType.ROAD:
-                _roadMap.forEach((obj) => {
-                    obj.initTraf();
-                });
                 AJsonData.forEach((el, idx) => {
                     const obj = _roadMap.get(el.id);
                     if (obj) {

src/main/resources/static/js/vworld/obj-facility.js

@@ -272,18 +272,6 @@ export class TBit extends TPoi {
         super(ALyrInfo, ADto.bitid, ADto.localno, ADto.bitname, ADto.coordx, ADto.coordy, "1", "0", 0, "19700101000000");
         this.instdt = ADto.regdate;
         this.address = ADto.address;
-        // this.regioncd    = ADto.regioncd;
-        // this.areacd      = ADto.areacd;
-        // this.rseip       = ADto.rseip;
-        // this.radius1     = ADto.radius1;
-        // this.radius2     = ADto.radius2;
-        // this.compcd      = ADto.compcd;
-        // this.rseconfigid = ADto.rseconfigid;
-        // this.obeparamid  = ADto.obeparamid;
-        // this.port        = ADto.port;
-        // this.bridge      = ADto.bridge;
-        // this.comyn       = ADto.comyn;
-        // this.commtype    = ADto.commtype;
     }
 }
 

src/main/resources/static/js/vworld/obj-traffic.js

@@ -137,13 +137,6 @@ export class TTraffic {
         this.missYn = ADto.miss_yn;
         this.prcnDt = ADto.prcn_dt;
     }
-    initTraf() {
-        this.cmtrGradCd = "0";
-        this.sped = 0;
-        this.trvlHh = 0;
-        this.missYn = "Y";
-        this.prcnDt = "19700101000000";
-    }
 }
 
 export let _linkMap = new Map();

src/main/resources/static/libs/dx-21.2.6/css/dx.material.blue.dark.compact.css

@@ -7,8 +7,8 @@
 * Copyright (c) 2012 - 2022 Developer Express Inc. ALL RIGHTS RESERVED
 * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
 */
-@@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,500,700);
-@@import url(https://fonts.googleapis.com/earlyaccess/notokufiarabic.css);
+@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,500,700);
+@import url(https://fonts.googleapis.com/earlyaccess/notokufiarabic.css);
 .dx-validationsummary-item {
   cursor: pointer;
 }

src/main/resources/static/libs/include-chart.js

@@ -5,6 +5,8 @@ document.write("<script src='/libs/highchart/highcharts.js'></script>");
 document.write("<script src='/libs/highchart/modules/accessibility.js'></script>");
 document.write("<script src='/libs/highchart/modules/exporting.js'></script>");
 document.write("<script src='/libs/highchart/modules/offline-exporting.js'></script>");
+//document.write("<script src='/libs/highchart/lib/canvg.js'></script>");
+//document.write("<script src='/libs/highchart/modules/offline-exporting.src.js'></script>");
 //document.write("<script src='/libs/highchart/modules/export-data.js'></script>");
 
 $(()=>{

src/main/resources/static/libs/include-common.js

@@ -4,13 +4,13 @@
 document.write("<script src='/js/constant/constant.js'></script>")
 document.write("<script src='/libs/jquery/jquery-3.6.0.min.js'></script>");
 
-if (window.cssHref) {
-    document.write("<link rel='stylesheet' type='text/css' class='main-css' href='"+window.cssHref+"'/>");
+if (window.$cssHref) {
+    document.write("<link rel='stylesheet' type='text/css' class='main-css' href='"+window.$cssHref+"'/>");
 }
 else {
     if (window.opener) {
-        if (window.opener.cssHref) {
-            document.write("<link rel='stylesheet' type='text/css' class='main-css' href='"+window.opener.cssHref+"'/>");
+        if (window.opener.$cssHref) {
+            document.write("<link rel='stylesheet' type='text/css' class='main-css' href='"+window.opener.$cssHref+"'/>");
         }
         else {
             document.write("<link rel='stylesheet' type='text/css' class='main-css' href='/libs/dx-21.2.6/css/dx.material.blue.dark.compact.css'/>");