yongin commit

src/main/java/com/its/op/service/its/cctv/CctvControlService.java

@@ -80,7 +80,7 @@ public class CctvControlService {
     public CctvControlDto.CctvControlRes requestHttpPostProbe(CctvControlDto.CctvControlRes result, String controlUri, String ipAddr, String userId, String userPswd) {
         String encoding = Base64.getEncoder().encodeToString((userId + ":" + userPswd).getBytes());
         String apiUrl = "http://" + ipAddr + controlUri;
-        log.info("{}", apiUrl);
+        log.info("{}, Basis: {}", apiUrl, encoding);
 
         HttpURLConnection connection = null;
         try {
@@ -191,7 +191,7 @@ public class CctvControlService {
     public CctvControlDto.CctvControlRes requestHttpPostZeno(CctvControlDto.CctvControlRes result, byte[] controlData, String ipAddr, String userId, String userPswd) {
         String encoding = Base64.getEncoder().encodeToString((userId + ":" + userPswd).getBytes());
         String apiUrl = "http://" + ipAddr + "/cgi-bin/admin/uartctrl.cgi";
-        log.info("{}, {}", apiUrl, SysUtils.byteArrayToHex(controlData));
+        log.info("{}, Basis: {}, {}", apiUrl, encoding, SysUtils.byteArrayToHex(controlData));
 
         HttpURLConnection connection = null;
         try {

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

@@ -995,4 +995,15 @@ img{
 .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.js

@@ -23,15 +23,15 @@ $(".xToggle").on("click", function(){
 $(".footer_excel").on("click",()=>{
     // 엑셀 저장 클릭
 
-    if (confirm("Excel file로 저장 하시겠습니까?")) {
-        exportExcel();
-    }
+    // if (confirm("Excel file로 저장 하시겠습니까?")) {
+    //     exportExcel();
+    // }
 
-    // confirmMessage("Excel file로 저장 하시겠습니까?").done((yes) => {
-    //     if (yes === true) {
-    //         exportExcel();
-    //     }
-    // });
+    confirmMessage("엑셀 파일로 저장 하시겠습니까?").done((yes) => {
+        if (yes === true) {
+            exportExcel();
+        }
+    });
 });
 
 /**

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

@@ -748,7 +748,7 @@ $(() => {
                     $(".main-css").attr("href", "./css/" + item.theme);
                 }
 
-                if (item.name === "메인") {
+                if (item.name === "통합모니터링") {
                     document.location.reload();
                     return;
                 }

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

@@ -139,12 +139,19 @@ function onFcltDragEndFunc(ALyrIdx, ALyrName, ANmbr, ACoordX, ACoordY) {
     console.log(`${currDt()}: onFcltDragEndFunc, ${ALyrIdx}, ${ALyrName}, ${ANmbr}, ${ACoordX}, ${ACoordY}`);
 }
 
+let _timerFetchWeatherStts = null;
+const requestFetchWeatherStts = () => {
+    if (_timerFetchWeatherStts) window.clearTimeout(_timerFetchWeatherStts);
+    _timerFetchWeatherStts = window.setTimeout(() => fetchWeatherStts(), 5 * 60 * 1000)
+}
+
 function loadingData() {
     fetchBaseData(); //vertex, traffic(clock)
     fetchFcltData();
     fetchIncdData(); // 돌발정보 요청
     fetchUnitStts();
     fetchDbmsStts();
+    fetchWeatherStts();
 }
 
 /**
@@ -177,6 +184,65 @@ async function fetchBaseData() {
         ();
 }
 
+
+const gradMap = new Map();
+gradMap.set("1", {
+    text : '좋음',
+    color : '#03a9f4',
+});
+gradMap.set("2", {
+    text : '보통',
+    color : '#15B337',
+});
+gradMap.set("3", {
+    text : '보통',
+    color : '#FFAA00',
+});
+gradMap.set("4", {
+    text : '매우나쁨',
+    color : '#ff0000',
+});
+
+function atmpInterval(jsonData){
+    const data = jsonData;
+    if (!data) {
+
+    }
+    else {
+
+        $('.atmpsttnnm').text(data.atmpsttnnm); 
+        const pm10Color = gradMap.get(data.pm10_1hh_grad).color
+        const pm25Color = gradMap.get(data.pm25_1hh_grad).color
+        const pm10Val   = $('.pm10_val');
+        const pm10Grad  = $('.pm10_grad');
+        const pm25Val   = $('.pm25_val');  
+        const pm25Grad  = $('.pm25_grad') ;
+        
+        const pm10Arr = [
+            pm10Val,
+            pm10Grad,
+        ]
+        const pm25Arr = [
+            pm25Val,
+            pm25Grad,
+        ]
+        
+        for(let obj of pm10Arr) {
+            obj.css('color', pm10Color);
+        }
+        for(let obj of pm25Arr) {
+            obj.css('color', pm25Color);
+        }
+        $('.pm10_title').html('미세먼지 : ');   
+        pm10Val.html(data.pm10_val + ' ㎍/㎥ '); 
+        pm10Grad.html(gradMap.get(data.pm10_1hh_grad).text); 
+        $('.pm25_title').text('초미세먼지 : ');
+        pm25Val.text(data.pm10_val + ' ㎍/㎥');
+        pm25Grad.text(gradMap.get(data.pm25_1hh_grad).text)
+    }
+    }
+
+
 async function fetchTraffic() {
     //console.time("***** fetchTraffic: ");
     const ifsc = apiGet("/api/manage/main/traffic/ifsc"); // 링크소통정보 요청
@@ -197,7 +263,39 @@ async function fetchTraffic() {
         ();
 
     requestGet("/api/its/common/congest-traffic", recvCongestTraffic);
-    requestGet("/api/its/common/weather/frcs/status", recvWeatherInfo);
+    //requestGet("/api/its/common/weather/frcs/status", recvWeatherInfo);
+    //requestGet("/api/its/common/weather/atmp/status", recvAtmpInfo);
+}
+
+async function fetchWeatherStts() {
+    const frcs = apiGet("/api/its/common/weather/frcs/status"); // 링크소통정보 요청
+    const atmp = apiGet("/api/its/common/weather/atmp/status"); // 도로소통정보 요청
+    Promise.all([frcs, atmp])
+        .then((results) => Promise.all(results.map((r) => r.json())))
+        .then((values) => {
+            recvWeatherInfo(values[0]);
+            recvAtmpInfo(values[1]);
+        })
+        .catch((err) => {
+            console.error(`Error in fetchTraffic ${err}`);
+        })
+    requestFetchWeatherStts();
+}
+
+let atmpTimer = null;
+function recvAtmpInfo(jsonData) {
+    if (atmpTimer) {
+        window.clearInterval(atmpTimer);
+    }
+    let cnt = 0;
+    atmpInterval(jsonData[cnt++]);
+    atmpTimer = setInterval(() => {
+        const data = jsonData[cnt++];
+        atmpInterval(data);
+        if (cnt === jsonData.length) {
+            cnt = 0;
+        }
+    }, 6000);
 }
 
 let _rollingCongestTimer = null;
@@ -261,66 +359,131 @@ function trafficRolling() {
     //setInterval(visualTime, 3 * 1000);
 }
 
+// function recvWeatherInfo(jsonData) {
+//     let imgUrl = null;
+//     let str = "";
+//     let cnt = 0;
+//     if (jsonData.length == 0) {
+//         imgUrl = "정보없음";
+//         str += "<span style='font-size: 20px;'> " + imgUrl + "</span>";
+//         setHtml(".weather", str);
+//     }
+//     const data = jsonData[cnt++];
+//     if (data) {
+//         if      (data.wtcd_kor_cd == "DB01") imgUrl = "맑음";
+//         else if (data.wtcd_kor_cd == "DB02") imgUrl = "구름조금";
+//         else if (data.wtcd_kor_cd == "DB03") imgUrl = "구름많음";
+//         else if (data.wtcd_kor_cd == "DB04") imgUrl = "흐림";
+//         else if (data.wtcd_kor_cd == "DB05") imgUrl = "비";
+//         else if (data.wtcd_kor_cd == "DB06") imgUrl = "비/눈";
+//         else if (data.wtcd_kor_cd == "DB07") imgUrl = "눈";
+//         else imgUrl = "정보없음";
+//         str += "<li style='height:100%;''>";
+//         str += "<span style='font-size: 20px;'>" + data.vilg_frcs_zone_nm + "</span> ";
+//         str += "<span style='font-size: 21px;'>" + data.prst_tmpr + "℃ </span>";
+//             //str += "<span style='font-size: 20px;'> , " + imgUrl + "</span>";
+//         str += '<img src="/images/application_wall/weather/' + data.wtcd_kor_cd + '.png" style="padding-left:2px;padding-top:3px" alt="날씨이미지" />';
+//         str += "</li>";
+//     } 
+//     else {
+//         str += "<span> 0℃ </span>";
+//         str += '<img src="/images/application_wall/weather/DB99.png" style="padding-left:10px;padding-top:5px" alt="날씨이미지" />';
+//     }
+    
+//     jsonData.forEach((el) => {
+//         if (el.length != 0) {
+//             if (el.wtcd_kor_cd == "DB01") imgUrl = "맑음";
+//             else if (el.wtcd_kor_cd == "DB02") imgUrl = "구름조금";
+//             else if (el.wtcd_kor_cd == "DB03") imgUrl = "구름많음";
+//             else if (el.wtcd_kor_cd == "DB04") imgUrl = "흐림";
+//             else if (el.wtcd_kor_cd == "DB05") imgUrl = "비";
+//             else if (el.wtcd_kor_cd == "DB06") imgUrl = "비/눈";
+//             else if (el.wtcd_kor_cd == "DB07") imgUrl = "눈";
+//             else imgUrl = "정보없음";
+
+//             str += "<li style='height:100%;''>";
+//             str += "<span style='font-size: 20px;'>" + el.vilg_frcs_zone_nm + "</span> ";
+//             str += "<span style='font-size: 21px;'>" + el.prst_tmpr + "℃ </span>";
+//             //str += "<span style='font-size: 20px;'> , " + imgUrl + "</span>";
+//             str += '<img src="/images/application_wall/weather/' + el.wtcd_kor_cd + '.png" style="padding-left:2px;padding-top:3px" alt="날씨이미지" />';
+//             str += "</li>";
+//         } else {
+//             str += "<span> 0℃ </span>";
+//             str += '<img src="/images/application_wall/weather/DB99.png" style="padding-left:10px;padding-top:5px" alt="날씨이미지" />';
+//         }
+//     });
+
+//     setHtml(".weather", str);
+// }
+
+
+let _weatherTimer = null;
 function recvWeatherInfo(jsonData) {
-    let imgUrl = null;
-    let str = "";
-    if (jsonData.length == 0) {
-        imgUrl = "정보없음";
-        str += "<span style='font-size: 20px;'> " + imgUrl + "</span>";
-        setHtml(".weather", str);
+    if (_weatherTimer) {
+        window.clearInterval(_weatherTimer);
     }
-
-    jsonData.forEach((el) => {
-        if (el.length != 0) {
-            if (el.wtcd_kor_cd == "DB01") imgUrl = "맑음";
-            else if (el.wtcd_kor_cd == "DB02") imgUrl = "구름조금";
-            else if (el.wtcd_kor_cd == "DB03") imgUrl = "구름많음";
-            else if (el.wtcd_kor_cd == "DB04") imgUrl = "흐림";
-            else if (el.wtcd_kor_cd == "DB05") imgUrl = "비";
-            else if (el.wtcd_kor_cd == "DB06") imgUrl = "비/눈";
-            else if (el.wtcd_kor_cd == "DB07") imgUrl = "눈";
-            else imgUrl = "정보없음";
-
-            str += "<li style='height:100%;''>";
-            str += "<span style='font-size: 20px;'>" + el.vilg_frcs_zone_nm + "</span> ";
-            str += "<span style='font-size: 21px;'>" + el.prst_tmpr + "℃ </span>";
-            //str += "<span style='font-size: 20px;'> , " + imgUrl + "</span>";
-            str += '<img src="/images/application_wall/weather/' + el.wtcd_kor_cd + '.png" style="padding-left:2px;padding-top:3px" alt="날씨이미지" />';
-            str += "</li>";
-        } else {
-            str += "<span> 0℃ </span>";
-            str += '<img src="/images/application_wall/weather/DB99.png" style="padding-left:10px;padding-top:5px" alt="날씨이미지" />';
+    let cnt = 0;
+    const empty = $('.weather-empty');
+    const stts  = $('.weather-status');
+    stts.css('display', 'flex');
+    empty.css('display', 'none');
+    console.log(jsonData);
+    const data = jsonData[cnt++];
+    weatherInterval(data);
+    
+    _weatherTimer = setInterval(() => {
+        weatherInterval(jsonData[cnt++]);
+        if (cnt === jsonData.length) {
+            cnt = 0;
         }
-    });
-
-    setHtml(".weather", str);
-}
-
-// .weather에 li값이 없을경우 weatherRolling()을 호출하면 값이 없어서 무의미. 그래서 settime 걸어줌
-let wetherLiNum = $(".weather").children("li").length;
-if (wetherLiNum == 0) {
-    setTimeout(weatherRolling, 1 * 1000);
-} else {
-    weatherRolling();
+    }, 6000);
 }
-function weatherRolling() {
-    let liNum; // li태그 size의 수
-    let visualNum = 0; //화면에 보여지는 li 갯수 (1묶음 1개)
-    liNum = $(".weather").children("li").length;
 
-    function visualTime() {
-        if (visualNum < liNum - 1) {
-            visualNum++;
-        } else if (visualNum == liNum - 1) {
-            visualNum = 0;
+function weatherInterval(data) {
+    if (data) {
+        if (data.vilg_frcs_zone_nm) {
+            $('.weather-text').text(data.vilg_frcs_zone_nm + ' ' + data.prst_tmpr + "℃" );
+            $('.weather-img').prop('src',"/images/application_wall/weather/" + data.wtcd_kor_cd + ".png");
         }
-
-        $(".weather").animate({ top: -32 * visualNum + "px" }, 600, "swing");
+        else {
+            $('.weather-text').text(" 0℃ " );
+            $('.weather-img').prop('src',"/images/application_wall/weather/DB99.png");
+        }
+    } 
+    else {
+        empty.css('display', 'felx');
+        stts.css('display', 'none');
     }
-
-    setInterval(visualTime, 6 * 1000);
 }
 
+// .weather에 li값이 없을경우 weatherRolling()을 호출하면 값이 없어서 무의미. 그래서 settime 걸어줌
+// let wetherLiNum = $(".weather").children("li").length;
+// if (wetherLiNum == 0) {
+//     setTimeout(weatherRolling, 1 * 1000);
+// } else {
+//     weatherRolling();
+// }
+// function weatherRolling() {
+//     let liNum; // li태그 size의 수
+//     let visualNum = 0; //화면에 보여지는 li 갯수 (1묶음 1개)
+//     liNum = $(".weather").children("li").length;
+
+//     function visualTime() {
+//                // weather.animate({ opacity: 0 }, 500);
+//         if (visualNum < liNum - 1) {
+//             visualNum++;
+//         } else if (visualNum == liNum - 1) {
+//             visualNum = 0;
+//         }
+//        // weather.css({top: - 32 * visualNum + "px"});
+        
+//        // weather.animate({ opacity: 1 }, 500);
+//        $(".weather").animate({ top: -32 * visualNum + "px" }, 600, "swing");
+//     }
+
+//     setInterval(visualTime, 6 * 1000);
+// }
+
 async function fetchBaseVrtx() {
     //console.time("***** fetchBaseVrtx: ");
 
@@ -383,6 +546,7 @@ async function fetchFcltData() {
         //() => console.timeEnd("***** fetchFcltData: ")
         ();
 }
+
 // 시설물현황 상태정보 요청(타이머 또는 웹소켓에 의해 실행됨)
 async function fetchFcltStts() {
     //console.time("***** fetchFcltStts: ");
@@ -661,6 +825,7 @@ let _vmsDsplMsgArr = [];
 let _vmsDsplMsgPhase = 0;
 const _vmsWidthReserved = 10;
 function initVmsMsgDsplMsg(name, x, y) {
+    console.log(name);
     if (_timerVmsMsgDslp) window.clearTimeout(_timerVmsMsgDslp);
     _timerVmsMsgDslp = null;
     _vmsDsplMsgArr = [];
@@ -699,6 +864,7 @@ function initVmsMsgDsplMsg(name, x, y) {
     });
 }
 function recvVmsDsplMsg(jsonData) {
+    console.log(jsonData);
     if (jsonData.length == 0) {
         return;
     }
@@ -722,10 +888,10 @@ function recvVmsDsplMsg(jsonData) {
         '<p style="float:right;color:#000"><a href="#" id="vmsImg"><img src="/images/application_wall/xbtn.png"/></a></p>' +
         "</dt>" +
         "<dd>";
-    iwContent += '<p><img id="vmsPhaseImg" src="data:image/png;base64,' + jsonData[0].vms_dspl_msg_imag + '" height="' + imgHeight + '" class="vmsPic"/></p>';
+    iwContent += '<p><img id="vmsPhaseImg" src="data:image/png;base64,' + _vmsDsplMsgArr[0].vms_dspl_msg_imag + '" height="' + imgHeight + '" class="vmsPic"/></p>';
     iwContent += "</dd>" + "</dl>" + "</div>";
     $("#vmsOverlay").html(iwContent);
-
+    
     $("#vmsImg").on("click", function () {
         if (_timerVmsMsgDslp) window.clearTimeout(_timerVmsMsgDslp);
         _timerVmsMsgDslp = null;
@@ -782,7 +948,6 @@ function cctvPopupInfoBox(ISTL_LCTN_NM, STRM_RTMP_ADDR, x, y) {
 
     $("#cctvOverlay").html(coordHtml);
     BIS._cctvOverlay.setPosition([x, y]);
-
     openCCTV(STRM_RTMP_ADDR);
 
     $("#cctvImg").on("click", function () {

src/main/resources/static/application/wall/main/main-top.html

@@ -1,13 +1,38 @@
 
 <div class="header">
-    <div class="logo">
+    <!-- <div class="logo"> -->
         <img class="headerImg" alt="logo" src="/images/application_wall/header/header_logo.png" usemap="#title" />
-        <img class="headerImg2" alt="logo" src="/images/application_wall/header/header_logo_bak.png" usemap="#title" />
+        <!-- <img class="headerImg2" alt="logo" src="/images/application_wall/header/header_logo_bak.png" usemap="#title" /> -->
+        <span class="title-text ml-20">오늘날씨</span><img src="/images/application_wall/Header_Window.png">
+        <span class="title-text">대기환경</span><img class="atmp-img" src="/images/application_wall/Header-Window2.png">
+        <span class="title-text">현재시각</span><img src="/images/application_wall/Header_Window.png">
         <map name="title"><area shape="rect" coords="30,10,170,40" id="resetStts" />
         </map>
         <div class="weather_con">
-            <ul class="weather"></ul>
+            <div class="weather">
+                <div class="weather-status">
+                    <div class="weather-text"></div>
+                    <img class="weather-img"></img>
+                </div>
+                <div class="weather-empty">정보 없음</div>
+            </div>
         </div>
+        <div class="atmp-status">
+            <div class="atmpsttnnm"></div>
+            <div>
+                <div>
+                    <div class="pm10_title"></div>
+                    <div class="pm10_val"></div>
+                    <div class="pm10_grad"></div>
+                </div>
+                <div>
+                    <div class="pm25_title"></div>
+                    <div class="pm25_val"></div>
+                    <div class="pm25_grad"></div>
+                </div>
+            </div>
+        </div>
+        <div class="atmp-empty">정보 없음</div>
         <div id="clockTime"></div>
         <div class="headerBtn">
             <img class="itsBtn" alt="its보기" style="visibility: hidden;" src="/images/application_wall/header/itsOnBtn.png" />
@@ -24,7 +49,7 @@
             <img class="itsBIT" alt="bit보기" src="/images/application_wall/header/btnBITOff.png" />
             <!-- <img class="itsRSE" alt="rse보기" src="/images/application_wall/header/btnRSEOff.png" /> -->
         </div>
-    </div>
+    <!-- </div> -->
 </div>
 
 <script type="text/javascript">
@@ -81,19 +106,19 @@
         $(".bis_90205").attr("src", "/images/application_wall/checkerSPS1.png");
         //$('.bis_110101 img').attr('src','/images/application_wall/checkerSPS1.png');
 
-        let rse = "";
-        rse += '<span style="position:absolute;width:50px">' + rseCntTot + "</span>";
-        rse += '<span style="position:absolute;width:50px;left:63px">' + rseCntTot + "</span>";
-        rse += '<span style="position:absolute;width:50px;left:140px;color:#f90000">0</span>';
-        rse += '<span style="position:absolute;width:50px;left:227px;color:#f90000">-</span>';
-        $(".rseCtlrStts").html(rse);
+        // let rse = "";
+        // rse += '<span style="position:absolute;width:50px">' + rseCntTot + "</span>";
+        // rse += '<span style="position:absolute;width:50px;left:63px">' + rseCntTot + "</span>";
+        // rse += '<span style="position:absolute;width:50px;left:140px;color:#f90000">0</span>';
+        // rse += '<span style="position:absolute;width:50px;left:227px;color:#f90000">-</span>';
+        // $(".rseCtlrStts").html(rse);
 
-        let avi = "";
-        avi += '<span style="position:absolute;width:50px">' + aviCntTot + "</span>";
-        avi += '<span style="position:absolute;width:50px;left:63px">' + aviCntTot + "</span>";
-        avi += '<span style="position:absolute;width:50px;left:140px;color:#f90000">0</span>';
-        avi += '<span style="position:absolute;width:50px;left:227px;color:#f90000">0</span>';
-        $(".aviCtlrStts").html(avi);
+        // let avi = "";
+        // avi += '<span style="position:absolute;width:50px">' + aviCntTot + "</span>";
+        // avi += '<span style="position:absolute;width:50px;left:63px">' + aviCntTot + "</span>";
+        // avi += '<span style="position:absolute;width:50px;left:140px;color:#f90000">0</span>';
+        // avi += '<span style="position:absolute;width:50px;left:227px;color:#f90000">0</span>';
+        // $(".aviCtlrStts").html(avi);
 
         let vds = "";
         vds += '<span style="position:absolute;width:50px">' + vdsCntTot + "</span>";

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

@@ -1,7 +1,7 @@
 @charset "utf-8";
 
 * html { height:1px; } /* IE6 */
-html { filter:expression(document.execCommand("BackgroundImageCache", false, true)); } /* IE6 */
+/* html { filter:expression(document.execCommand("BackgroundImageCache", false, true)); } IE6 */
 html:first-child select { padding-right:6px; height:20px; } /* Opera 9 & Below Fix */
 html { overflow-y:hidden; }
 html { overflow-x:hidden; }
@@ -173,21 +173,22 @@ hr { display:none !important; visibility:hidden; }
 .header {
     width: 100%;
     height: 50px;
+    display: flex;
+    align-items: center;
     background-color: #313131;
     border-bottom: 5px groove #a9a9a9;
 }
 /* .header{width:100%;height:65px;background-img:url('/images/application_wall/header.png');border-bottom:5px groove #a9a9a9} */
-.logo {
+/* .logo {
     position: absolute;
     width: 1600px;
     left: 50%;
     height: 50px;
     margin: 0 0 0 -800px;
-}
+} */
 .headerImg {
-    position: absolute;
-    left: -50px;
     height: 40px;
+    margin-left  : 20px;
     top:6px;
 }
 .headerImg2 {
@@ -212,14 +213,18 @@ hr { display:none !important; visibility:hidden; }
     overflow: hidden;
 }
 .weather{
+    width: 100%;
     height: 100%;
     position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 #clockTime {
     position: absolute;
     top: 9px;
-    left: 580px;
+    left: 1055px;
     width: 175px;
     color: white;
     font-size: 24px;
@@ -229,11 +234,23 @@ hr { display:none !important; visibility:hidden; }
 /* ie */
 /* .weather{position:absolute;top:19px;left:380px;color:white;font-size:20px;font-family:'RixSGo EB'} */
 /* #clockTime{position:absolute;top:18px;left:96px;color:white;font-size:20px;font-family:'RixSGo EB'} */
-
+.ml-20 {
+    margin-left: 50px;
+}
+.title-text {
+    height: 100%;
+    width: 80px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #eee;
+    font-size: 14.5px;
+    font-weight: bold;
+}
 .headerBtn {
     position: absolute;
     top: 5px;
-    left: 855px;
+    left: 1275px;
 }
 .itsBtn {
     cursor: pointer;
@@ -254,9 +271,9 @@ hr { display:none !important; visibility:hidden; }
 }
 
 .itsFclt {
-    position: relative;
-    left: 1277px;
+    position: absolute;
     width: 600px;
+    left : 1550px;
 }
 .bisFclt {
     position: relative;
@@ -1371,3 +1388,77 @@ body {
     scrollbar-shadow-color: #adadad;
     scrollbar-track-color: #adadad;
 }
+.atmp-status{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    height: 50px;
+    overflow: hidden;
+    width: 340px;
+    position: absolute;
+    left: 600px;
+    color: white;
+    font-family: "RixSGo EB";
+}
+
+.atmp-empty{
+    display: none;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    height: 50px;
+    overflow: hidden;
+    width: 340px;
+    position: absolute;
+    left: 590px;
+    color: white;
+    font-weight: bold;
+    font-size: 20px;
+}
+.atmp-status > div:nth-child(2) {
+    display: flex;
+    flex-direction: column;
+}
+.atmp-status > div:nth-child(2) > div:nth-child(1),
+.atmp-status > div:nth-child(2) > div:nth-child(2) {
+    display: flex;
+    align-items: center;
+
+}
+.atmpsttnnm {
+    width: 100px;
+    height: 100%;
+    display: flex; 
+    justify-content: right;
+    align-items: center;
+    font-size: 24px;
+    margin-right: 5px;
+}
+.pm25_title,
+.pm10_title {
+    width: 80px;
+    display: flex;
+    justify-content: right;
+    font-weight: bold;
+}
+.pm10_val,
+.pm25_val {
+    width: 70px;
+    display: flex;
+    justify-content: right;
+    font-weight: bold;
+}
+.pm25_grad,
+.pm10_grad {
+    margin-left: 5px;
+    font-weight: bold;
+}
+
+.atmp-img {
+    width: 360px;
+    height: 49px;
+}
+
+.weather-empty {
+    display: none;
+}

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

@@ -155,7 +155,7 @@
             <div id="include"></div>
 
             <script type="text/javascript">
-                $("#include").load("./main-top.html");
+                $("#include").load("./main-top.html?1=1");
             </script>
 
             <div id="windowPop">
@@ -172,7 +172,7 @@
                 <div id="overlay" class="overlay"></div>
                 <div id="polylineOverlay" class="polylineOverlay"></div>
                 <div id="cctvOverlay" class="cctvOverlay"></div>
-                <div id="vmsOverlay" class="vmsOverlay" style="z-index: 10"></div>
+                <div id="vmsOverlay" class="vmsOverlay"></div>
                 <div id="busOverlay" class="busOverlay"></div>
                 <div id="bitOverlay" class="bitOverlay"></div>
                 <div id="incdOrccOverlay" class="incdOrccOverlay"></div>