dev

src/main/java/com/its/op/dto/its/link/TbLinkParaDetlDto.java

@@ -185,7 +185,7 @@ public class TbLinkParaDetlDto implements Serializable {
             this.smthWghtAvrgPrst = smth_wght_avrg_prst;
             this.smthWghtAvrgPre1cycl = smth_wght_avrg_pre_1cycl;
             this.smthWghtAvrgPre2cycl = smth_wght_avrg_pre_2cycl;
-            this.ptrnR = ptrn_r;
+            this.ptrnR = (ptrn_r == null) ? 0.2 : ptrn_r;
         }
 
         public TbLinkParaDetl toEntity() {

src/main/resources/mybatis/mapper/its/scrs/ScTfvlStatisticsMapper.xml

@@ -72,7 +72,7 @@
                SUM(A.LRG_RGHT_TFVL) AS lrgRghtTfvl,
                SUM(A.MDDL_RGHT_TFVL) AS mddlRghtTfvl,
                SUM(A.SMAL_RGHT_TFVL) AS smalRghtTfvl,
-               0 AS uturnTfvl,
+               SUM(A.UTURN_TFVL) AS uturnTfvl,
                0 AS sped,
                SUM(A.BUS_DVRS_LANE_GO_TFVL) AS busDvrsLaneGoTfvl,
                SUM(A.BUS_DVRS_LANE_LEFT_TFVL) AS busDvrsLaneLeftTfvl,
@@ -119,7 +119,7 @@
                SUM(A.LRG_RGHT_TFVL) AS lrgRghtTfvl,
                SUM(A.MDDL_RGHT_TFVL) AS mddlRghtTfvl,
                SUM(A.SMAL_RGHT_TFVL) AS smalRghtTfvl,
-               0 AS uturnTfvl,
+               SUM(A.UTURN_TFVL) AS uturnTfvl,
                0 AS sped,
                SUM(A.BUS_DVRS_LANE_GO_TFVL) AS busDvrsLaneGoTfvl,
                SUM(A.BUS_DVRS_LANE_LEFT_TFVL) AS busDvrsLaneLeftTfvl,
@@ -166,7 +166,7 @@
                SUM(A.LRG_RGHT_TFVL) AS lrgRghtTfvl,
                SUM(A.MDDL_RGHT_TFVL) AS mddlRghtTfvl,
                SUM(A.SMAL_RGHT_TFVL) AS smalRghtTfvl,
-               0 AS uturnTfvl,
+               SUM(A.UTURN_TFVL) AS uturnTfvl,
                0 AS sped,
                SUM(A.BUS_DVRS_LANE_GO_TFVL) AS busDvrsLaneGoTfvl,
                SUM(A.BUS_DVRS_LANE_LEFT_TFVL) AS busDvrsLaneLeftTfvl,
@@ -213,7 +213,7 @@
                SUM(A.LRG_RGHT_TFVL) AS lrgRghtTfvl,
                SUM(A.MDDL_RGHT_TFVL) AS mddlRghtTfvl,
                SUM(A.SMAL_RGHT_TFVL) AS smalRghtTfvl,
-               0 AS uturnTfvl,
+               SUM(A.UTURN_TFVL) AS uturnTfvl,
                0 AS sped,
                SUM(A.BUS_DVRS_LANE_GO_TFVL) AS busDvrsLaneGoTfvl,
                SUM(A.BUS_DVRS_LANE_LEFT_TFVL) AS busDvrsLaneLeftTfvl,
@@ -260,7 +260,7 @@
                SUM(A.LRG_RGHT_TFVL) AS lrgRghtTfvl,
                SUM(A.MDDL_RGHT_TFVL) AS mddlRghtTfvl,
                SUM(A.SMAL_RGHT_TFVL) AS smalRghtTfvl,
-               0 AS uturnTfvl,
+               SUM(A.UTURN_TFVL) AS uturnTfvl,
                0 AS sped,
                SUM(A.BUS_DVRS_LANE_GO_TFVL) AS busDvrsLaneGoTfvl,
                SUM(A.BUS_DVRS_LANE_LEFT_TFVL) AS busDvrsLaneLeftTfvl,
@@ -360,7 +360,7 @@
                A.LRG_RGHT_TFVL AS lrgRghtTfvl,
                A.MDDL_RGHT_TFVL AS mddlRghtTfvl,
                A.SMAL_RGHT_TFVL AS smalRghtTfvl,
-               0 AS uturnTfvl,
+               A.UTURN_TFVL AS uturnTfvl,
                0 AS sped,
                A.BUS_DVRS_LANE_GO_TFVL AS busDvrsLaneGoTfvl,
                A.BUS_DVRS_LANE_LEFT_TFVL AS busDvrsLaneLeftTfvl,
@@ -407,7 +407,7 @@
                A.LRG_RGHT_TFVL AS lrgRghtTfvl,
                A.MDDL_RGHT_TFVL AS mddlRghtTfvl,
                A.SMAL_RGHT_TFVL AS smalRghtTfvl,
-               0 AS uturnTfvl,
+               A.UTURN_TFVL AS uturnTfvl,
                0 AS sped,
                A.BUS_DVRS_LANE_GO_TFVL AS busDvrsLaneGoTfvl,
                A.BUS_DVRS_LANE_LEFT_TFVL AS busDvrsLaneLeftTfvl,
@@ -454,7 +454,7 @@
                A.LRG_RGHT_TFVL AS lrgRghtTfvl,
                A.MDDL_RGHT_TFVL AS mddlRghtTfvl,
                A.SMAL_RGHT_TFVL AS smalRghtTfvl,
-               0 AS uturnTfvl,
+               A.UTURN_TFVL AS uturnTfvl,
                0 AS sped,
                A.BUS_DVRS_LANE_GO_TFVL AS busDvrsLaneGoTfvl,
                A.BUS_DVRS_LANE_LEFT_TFVL AS busDvrsLaneLeftTfvl,
@@ -501,7 +501,7 @@
                A.LRG_RGHT_TFVL AS lrgRghtTfvl,
                A.MDDL_RGHT_TFVL AS mddlRghtTfvl,
                A.SMAL_RGHT_TFVL AS smalRghtTfvl,
-               0 AS uturnTfvl,
+               A.UTURN_TFVL AS uturnTfvl,
                0 AS sped,
                A.BUS_DVRS_LANE_GO_TFVL AS busDvrsLaneGoTfvl,
                A.BUS_DVRS_LANE_LEFT_TFVL AS busDvrsLaneLeftTfvl,
@@ -548,7 +548,7 @@
                A.LRG_RGHT_TFVL AS lrgRghtTfvl,
                A.MDDL_RGHT_TFVL AS mddlRghtTfvl,
                A.SMAL_RGHT_TFVL AS smalRghtTfvl,
-               0 AS uturnTfvl,
+               A.UTURN_TFVL AS uturnTfvl,
                0 AS sped,
                A.BUS_DVRS_LANE_GO_TFVL AS busDvrsLaneGoTfvl,
                A.BUS_DVRS_LANE_LEFT_TFVL AS busDvrsLaneLeftTfvl,
@@ -587,7 +587,8 @@
                    NVL(MDDL_RGHT_TFVL, 0) +
                    NVL(SMAL_RGHT_TFVL, 0) +
                    NVL(BUS_DVRS_LANE_GO_TFVL, 0) +
-                   NVL(BUS_DVRS_LANE_LEFT_TFVL, 0)) AS tfvl
+                   NVL(BUS_DVRS_LANE_LEFT_TFVL, 0) +
+                   NVL(UTURN_TFVL, 0)) AS tfvl
         FROM TB_SC_LANE_STAT_15M T
         WHERE T.CLCT_DT BETWEEN TO_CHAR(SYSDATE, 'YYYYMMDD') || '000000' AND TO_CHAR(SYSDATE, 'YYYYMMDD') || '235959'
         GROUP BY T.IXR_ID, T.CMRA_ID

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

@@ -202,7 +202,7 @@ $(()=>{
             },
             {
                 dataField: "incd_orgn_desc",
-                caption: "동발상황 구분",
+                caption: "돌발상황 구분",
                 alignment: "center",
                 cssClass : 'p-5',
             },

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

@@ -0,0 +1,12 @@
+<!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" />
+    <meta http-equiv="refresh" content="0; url=/application/facility/main/main.html" />
+    <title>시설물 모니터링</title>
+
+</head>
+<body></body>
+</html>

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

@@ -0,0 +1,322 @@
+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       : -120,
+                height          : '100%',
+			    backgroundColor : '#2d2d33',
+            },
+            title: {
+                text : serverName,
+                y    : 20,
+                style: {
+                    color: 'rgba(160, 159, 159, 0.836)',
+                    fontWeight: 'bold',
+                },
+            },
+            pane: {
+                center: ['50%', '80%'],
+                size: '80%',
+                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,
+                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/main.css

@@ -0,0 +1,860 @@
+/*
+** 배경색 유지보수
+*/
+.bassBgColor {
+    background-color: #363640
+    !important;
+}
+.bassWordColor {
+    color: #fff
+    !important;
+}
+.tagColor{
+    background: linear-gradient(to bottom, hsl(0, 4%, 5%), hsl(0, 6%, 13%), #534B4B)
+    !important;
+}
+.tableColor {
+    background-color: #2d2d33
+    !important;
+    color: rgba(160, 159, 159, 0.836)
+    !important
+}
+.valueColor {
+    background-color: #35353b
+    !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: 100%;
+    background-color: #18181d;
+	max-width: 1920px;
+}
+
+.header{
+    position: relative;
+    display: flex;
+    width: 100%;
+    height: 60px;
+    flex-direction: row;
+    align-items: center;
+    font-weight: bold;
+    background-color: #18181d;
+    z-index: 10;
+}
+
+.header > img:nth-child(1){
+   width: 135px;
+   height: 48px;
+   margin-left: 27px;
+   top: 0px !important;
+}
+.header > div:nth-child(2){
+    cursor: pointer;
+    width: 500px;
+    min-width: 500px;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    color:rgba(255, 255, 255, 0.747);
+    text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
+    font-size: 27px;
+    margin-left: 50px;
+}
+.header >:nth-child(2):hover{
+    color: #9dafe0
+    !important;
+}
+.header >:nth-child(2):active{
+    /* left: 11px; */
+    color: #6082e2
+    !important;
+}
+.container {
+    display: flex;
+    flex-direction: column;
+    height: calc(100% - 60px);
+}
+
+.firstBox{
+    height: 59%;
+    position: relative;
+    background-color: #2a2a33;
+}
+#clock{
+    position: relative;
+    /* bottom: 3px; */
+    margin-left: auto;
+    height: 65px;
+    display: flex;
+    align-items: center;
+    width: 420px;
+    min-width: 420px;
+    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{
+    display: flex;
+    position: relative;
+    width: 1877px;
+    height: 25px;
+    align-items: center;
+    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: 17px;
+    font-weight: bold;
+    left: 12px;
+    border-radius: 7px;
+    box-shadow: 2px 2px 2px 2px black;
+}
+.tag2{
+    border-radius: 7px;
+    position: relative;
+    width: 903px;
+    height: 25px;
+    display: flex;
+    align-items: center;
+    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: 17px;
+    font-weight: bold;
+    left: 14px;
+    box-shadow: 2px 2px 2px 2px black;
+}
+.tag3{
+    border-radius: 7px;
+    position: relative;
+    width: 905px;
+    height: 25px;
+    display: flex;
+    align-items: center;
+    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: 17px;
+    font-weight: bold;
+    left: 79px;
+    box-shadow: 2px 2px 2px 2px black;
+}
+.tag4{
+    border-radius: 7px;
+    display: flex;
+    position: relative;
+    width: 1875px;
+    height: 25px;
+    align-items: center;
+    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: 17px;
+    font-weight: bold;
+    left: 12px;
+    box-shadow: 2px 2px 2px 2px rgb(0, 0, 0);
+}
+.tag4-1{
+    position: relative;
+    display: flex;
+    align-items: center;
+    font-size: 17px;
+    font-weight: bold;
+    height: 25px;
+    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: 17px;
+    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: 17px;
+    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: 17px;
+    font-weight: bold;
+}
+.xToggle:active{
+    color: #6082e2
+    !important;
+}
+.facSttsInfo{
+    position: relative;
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+    width: 1900px;
+    height: calc(60% - 9px);
+    margin: 0px auto;
+    padding-top : 5px;
+    background-color: #2a2a33;
+    border-bottom: 2px solid #515159;
+    border-top: 2px solid #515159;
+}
+.communicationSatusToggle{
+    color:  rgba(255, 255, 255, 0.747);
+}
+.communicationSatusToggle:hover{
+    color: #9dafe0
+    !important;
+    cursor: pointer;
+}
+.communicationSatusToggle:active{
+    color: #6082e2
+    !important;
+}
+
+.Minitable{
+    position: relative;
+    width: 180px;
+    height: 30%;
+    background-color: #515159;
+    border-spacing: 2px 2px;
+    border-radius: 23px;
+    box-shadow: 2px 2px 2px 2px;
+}
+.Minitable-empty{
+    width: 180px;
+    height: 30%;
+}
+.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: 17px;
+    font-weight: bold;
+}
+
+img{
+    position: relative;
+    top: 5px;
+    width: 27px;
+}
+.VMSSttsInfo{
+    top:0px;
+    display: flex;
+    width: 903px;
+    position: relative;
+    left: -10px;
+    height: calc(33.3% - 20px);
+    margin: 0px auto;
+    box-shadow: 2px 2px 2px 2px;
+}
+.VMSSttsInfo>:nth-child(1){
+    background-color: #515159;
+    width: 100%;
+    
+}
+.VMSSttsInfo>:nth-child(1)>:nth-child(1){
+    background-color: #363640;
+    color:  rgba(255, 255, 255, 0.747);
+    text-align: center;
+    font-size: 17px;
+    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: calc(33.3% - 20px);
+    box-shadow: 2px 2px 2px 2px;
+}
+.CCTVSttsInfo>:nth-child(1){
+    background-color: #515159;
+    width: 100%;
+    
+}
+.CCTVSttsInfo>:nth-child(1)>:nth-child(1){
+    background-color: #363640;
+    color:  rgba(255, 255, 255, 0.747);
+    text-align: center;
+    font-size: 17px;
+    font-weight: bold;
+}
+.VDSSttsInfo{
+    top:0px;
+    display: flex;
+    width: 903px;
+    position: relative;
+    left: -10px;
+    height: calc(33.3% - 20px);
+    margin: 0px auto;
+    box-shadow: 2px 2px 2px 2px;
+}
+.VDSSttsInfo>:nth-child(1){
+    background-color: #515159;
+    width: 100%;
+    
+}
+.VDSSttsInfo>:nth-child(1)>:nth-child(1){
+    background-color: #363640;
+    color:  rgba(255, 255, 255, 0.747);
+    text-align: center;
+    font-size: 17px;
+    font-weight: bold;
+}
+
+#linkTraffic {
+    z-index: 1;
+    width: 638px;
+    height: calc(200% + 5px);
+    border: 2px solid #515159;
+    box-shadow: 2px 2px 2px 2px;
+}
+#linkTrafficRate {
+    z-index: 1;
+    width: 251px;
+    height: calc(200% + 5px);
+    margin-left: 5px;
+    border: 2px solid #515159;
+    box-shadow: 2px 2px 2px 2px;
+    position: relative;
+}
+.RSESttsInfo{
+    top:0px;
+    display: flex;
+    position: relative;
+   	margin: 0px auto;
+    width: 903px;
+    left: 10px;
+    height: calc(33.3% - 20px);
+}
+/* .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: 17px;
+    font-weight: bold;
+} */
+
+.BITSttsInfo{
+    top:0px;
+    display: flex;
+    width: 903px;
+    position: relative;
+    left: -10px;
+    height: calc(33.3% - 20px);
+    margin: 0px auto;
+    box-shadow: 2px 2px 2px 2px;
+}
+.BITSttsInfo>:nth-child(1){
+    background-color: #515159;
+    width: 100%;
+    
+}
+.BITSttsInfo>:nth-child(1)>:nth-child(1){
+    background-color: #363640;
+    color:  rgba(255, 255, 255, 0.747);
+    text-align: center;
+    font-size: 17px;
+    font-weight: bold;
+}
+
+.blank{
+    top:0px;
+    display: flex;
+    position: relative;
+    margin: 0px auto;
+    width: 903px;
+    left: 10px;
+    height: 110px;
+    height: 90px;
+
+}
+.dbUsaInfo{
+    position: relative;
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+    width: 1900px;
+    height: calc(40% - 7px);
+    margin: 0px auto;
+    padding-top: 5px;
+    background-color: #2a2a33;
+    border-bottom: 2px solid #515159;
+}
+.dbTableSpace{
+    display: flex;
+    position: relative;
+    width: 903px;
+    height: calc(100% - 40px);
+    margin-left: 14px;
+    box-shadow: 2px 2px 2px 2px;
+}
+.dbTableSpace>:nth-child(1){
+    background-color: #515159;
+    width: 100%;
+}
+.dbTableSpace>:nth-child(1)>:nth-child(1){
+    background-color: #363640;
+    color:  rgba(255, 255, 255, 0.747);
+    text-align: center;
+    font-size: 17px;
+    font-weight: bold;
+}
+.dbSession{
+    display: flex;
+    position: relative;
+    width: 907px;
+    left: 64px;
+    height: calc(100% - 44px);
+    box-shadow: 2px 2px 2px 2px;
+    border-top : 2px solid #515159;
+    border-left : 2px solid #515159;
+    border-bottom : 2px solid #515159;
+}
+
+.dbSession > div {
+    width: calc(100%/4);
+    height: 100%;
+    border-right:2px solid #515159;
+}
+/* .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: 17px;
+    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: 17px;
+    font-weight: bold;
+}
+.secondBox{
+    height: 40%;
+    position: relative;
+    padding-top: 5px;
+    background-color: #2a2a33;
+}
+.centerPsSttsInfo{
+    display: flex;
+    position: relative;
+	flex-direction: row;
+	flex-wrap: wrap;
+    width: 1900px;
+    height: 100%;
+    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: flex;
+    flex-direction: column;
+    width: 410px;
+    position: relative;
+    height: calc(100% - 70px);
+    margin: 0px auto;
+    border-radius: 20px;
+    border: 3px solid #515159;
+    box-shadow: 2px 2px 2px 2px;
+}
+.fr{
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    padding: 10px;
+    width: calc(100% - 20px);
+    height: calc(32% - 20px);
+
+}
+.itsProcess{
+    display: flex;
+    flex-direction: column;
+    width: 410px;
+    position: relative;
+    height: calc(100% - 70px);
+    margin: 0px auto;
+    border-radius: 20px;
+    border: 3px solid #515159;
+    box-shadow: 2px 2px 2px 2px;
+}
+.bisProcess{
+    display: flex;
+    flex-direction: column;
+    width: 1000px;
+    position: relative;
+    height: calc(100% - 70px);
+    margin: 0px auto;
+    border: 3px solid #515159;
+    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);
+}
+
+.VMSDisabilityListValuesHidden,.CCTVDisabilityListValuesHidden,.VDSDisabilityListValuesHidden,
+.RSEDisabilityListValuesHidden,.BITDisabilityListValuesHidden {
+    display: none;
+}
+.CCTVDisabilityStautsList,
+.VMSDisabilityStautsList,
+.RSEDisabilityStautsList,
+.BITDisabilityStautsList,
+.VDSDisabilityStautsList{
+    display: none;
+    position: relative;
+	flex-direction: row;
+	flex-wrap: wrap;
+    width: 1900px;
+    height: calc(100% - 5px);
+    margin: 0px auto;
+}
+
+.CCTVDisabilityList,
+.VMSDisabilityList,
+.VDSDisabilityList,
+.RSEDisabilityList,
+.BITDisabilityList {
+    margin: 0px auto;
+    position: relative;
+    top: 10px;
+    width: 1870px;
+    height: calc(100% - 35px);
+}
+.CCTVDisabilityListValues,
+.VMSDisabilityListValues,
+.VDSDisabilityListValues,
+.RSEDisabilityListValues,
+.BITDisabilityListValues
+{
+    border: 1px solid #534B4B;
+    height: calc(100% - 50px);
+    overflow: auto;
+    width: 100%;
+    box-shadow: 2px 2px 2px 2px;
+}
+.CCTVDisabilityListValues>:nth-child(1),
+.VMSDisabilityListValues>:nth-child(1),
+.VDSDisabilityListValues>:nth-child(1),
+.RSEDisabilityListValues>:nth-child(1),
+.BITDisabilityListValues>:nth-child(1){
+    top:0px;
+    position: sticky;
+    width: 100%;
+    text-align: center;
+    font-size: 17px;
+    font-weight: bold;
+    background-color: #534B4B;
+}
+.CCTVDisabilityListValues>:nth-child(1)>:nth-child(1),
+.VMSDisabilityListValues>:nth-child(1)>:nth-child(1),
+.VDSDisabilityListValues>:nth-child(1)>:nth-child(1),
+.RSEDisabilityListValues>:nth-child(1)>:nth-child(1),
+.BITDisabilityListValues>:nth-child(1)>:nth-child(1) {
+    background-color: #363640;
+    color:  rgba(255, 255, 255, 0.747);
+}
+.CCTVDisabilityListValues>:nth-child(2),
+.VMSDisabilityListValues>:nth-child(2),
+.VDSDisabilityListValues>:nth-child(2),
+.RSEDisabilityListValues>:nth-child(2),
+.BITDisabilityListValues>:nth-child(2){
+    width: 100%;
+    text-align: center;
+    font-size: 17px;
+    font-weight: bold;
+    background-color: #534B4B;
+    height: calc(100% - 27px);
+}
+
+.footer {
+    position: relative;
+    top: 6px;
+    width: 100%;
+    height: 40px;
+    line-height: 40px;
+    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: 17px;
+    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: 17px;
+    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: 17px;
+    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: 17px;
+    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: 17px;
+    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: 17px;
+    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: 17px;
+    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: 17px;
+    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: 17px;
+    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/main.html

@@ -0,0 +1,883 @@
+<!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="container">
+            <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>
+                    <div id="linkTrafficRate"></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>
+            </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" 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"/>
+                </div>
+                <div class="dbManu">
+                    <div class="fr">
+                        <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>
+                    </div>
+                    <div class="fr">
+                        <!--변경항목-->
+                        <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>
+                    </div>
+                    <!-- <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">
+                    <div class="fr">
+                        <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>
+                    </div>
+                    <div class="fr">
+                        <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>
+                    </div>
+                    <div class="fr">
+                        <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>
+                <div class="bisProcess">
+                    <div class="fr">
+                        <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>
+                    </div>
+                    <div class="fr">
+                        <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>
+                    </div>
+                    <div class="fr">
+                        <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-empty">
+                        </table>
+                        <table class="Minitable-empty">
+                        </table>
+                        <table class="Minitable-empty">
+                        </table>
+                    </div>
+                    <!-- <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="200">BIT ID</td>
+                                <td width="200">Mobile 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>
+    </div>
+
+    <script src="/libs/sockjs/sockjs.min.js"></script>
+    <script type="module">
+        import { startApp } from "./main.js";
+        Highcharts.setOptions({
+            lang:{
+                thousandsSep: ',',
+            },
+        });
+        startApp();
+        
+    </script>
+    </body>
+</html>

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

@@ -0,0 +1,710 @@
+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;
+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}];
+let   _colWidth           = null;
+
+/**
+ * 화면 이벤트 핸들러
+ */
+$(".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";
+    _fcltExcelTitle = facilityType;
+    // 이전 내용을 지운다.
+    $(valueInsertTag).empty();
+    _colWidth = _commonColWidth;
+    // 현재 페이지 표출 내용
+    const firstIdx = 0;
+    const lastIdx = _fetchFcltCommInfoArr.length;
+    if (facilityType === "VDS") {
+        _colWidth = _vdsColWidth;
+        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="200">'+_fetchFcltCommInfoArr[ii].ctlr_id+'</td>'+
+                    '    <td width="200">'+_fetchFcltCommInfoArr[ii].localno+'</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 _fcltExcelTitle + ' 통신상태 장애현황 리스트.xlsx'
+        //return 'table.xlsx'; // 테이블이름
+    },
+    getSheetName : function() {
+        return _fcltExcelTitle + ' 통신상태 장애현황'; // 엑셀 하단 시트 이름
+    },
+    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(), {sheet : _fcltExcelTitle + ' 통신상태 장애현황', raw : true});
+    }
+}
+
+function s2ab(s) { 
+    let buf = new ArrayBuffer(s.length); //convert s to arrayBuffer
+    let view = new Uint8Array(buf);  //create uint8array as viewer
+    for (let i=0; i<s.length; i++) view[i] = s.charCodeAt(i) & 0xFF; //convert to octet
+    return buf;    
+}
+
+function exportExcel() {
+    fetchFcltDataToExcelTemp(_selectFcltType);
+
+    // step 1. workbook 생성
+    let wb = XLSX.utils.book_new();
+
+    // step 2. 시트 만들기 
+    let newWorksheet = excelHandler.getWorksheet();
+
+    newWorksheet["!cols"] = _colWidth;
+    // step 3. workbook에 새로만든 워크시트에 이름을 주고 붙인다.  
+    XLSX.utils.book_append_sheet(wb, newWorksheet, excelHandler.getSheetName());
+
+    // step 4. 엑셀 파일 만들기 
+    let 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: '',
+            tickInterval: 100,
+            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: '80%',
+            marginTop: 35,
+            // marginBottom:25,
+        },
+        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: {
+                size: '110%',
+                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/manual/index.html

@@ -0,0 +1,13 @@
+<!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">
+    <meta http-equiv="refresh" content="0; url=/application/manual/manual.html" />
+    <title>도움말</title>
+</head>
+<body>
+
+</body>
+</html>

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

@@ -0,0 +1,60 @@
+*{
+    margin: 0;
+    padding: 0;
+}
+html, body{
+    width: 100%;
+    height: 100%;
+}
+
+.header {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 80px;
+    font-size: 27px;
+    font-weight: bold;
+}
+.section {
+    width: 100%;
+    height: calc(100% - 81px);
+    display: flex;
+}
+
+ul, li, dd, dl, dt{
+    list-style: none;
+}
+a{
+    color: black;
+    text-decoration: none;
+}
+dt {
+    font-size: 18px;
+    font-weight: bold;
+    margin-bottom: 5px;
+    cursor: pointer;
+}
+dd {
+    margin-left: 20px;
+    font-size: 16px;
+    font-weight: 500;
+    margin-bottom: 5px;
+}
+.list {
+    width: 360px;
+    height: calc(100%  - 40px);
+    padding: 20px;
+}
+.content-box {
+    width: calc(100% - 400px);
+    height: calc(100%  - 40px);
+    padding: 20px;
+    overflow: auto;
+}
+.content {
+    width: 100%;
+    height: 100%;
+}
+.b1, .b2, .b3, .b4 {
+    border-color: #e0e0e0!important;
+}

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

@@ -0,0 +1,2 @@
+$(()=> {
+})