update 2024-02-27

src/main/java/com/its/web/service/traffic/TrafficService.java

@@ -102,6 +102,9 @@ public class TrafficService {
                     resultList = this.mapper.findLinkVertexByRange(paramMap);
                 }
                 else if (level < 6) {
+                    if (level == 3) {
+                        level = 4;
+                    }
                     paramMap.put("levl",  level);
                     resultList = this.mapper.findIfscVertexByRange(paramMap);
                 }

src/main/resources/mybatis/mapper/its/traffic/TrafficMapper.xml

@@ -209,7 +209,6 @@
         SELECT
             AA.ROADWAY_ID,
             AA.ROADWAY_NM,
-            AA.ATRD_ID,
             AA.STRT_NM_NODE,
             AA.END_NM_NODE,
             AA.X_CRDN,
@@ -234,8 +233,7 @@
                     B.X_CRDN_MIN,
                     B.Y_CRDN_MIN,
                     B.X_CRDN_MAX,
-                    B.Y_CRDN_MAX,
-                    C.ATRD_ID
+                    B.Y_CRDN_MAX
                 FROM
                     TB_LINK A,
                     (
@@ -253,18 +251,10 @@
                           AND #{neLat} >= Y_CRDN_MIN
                           AND #{swLng} <= X_CRDN_MAX
                           AND #{neLng} >= X_CRDN_MIN
-                    ) B,
-                    TB_ATRD C,
-                    TB_ATRD_ROAD_RLTN D,
-                    TB_ROAD_IFSC_RLTN E,
-                    TB_IFSC_LINK_RLTN F
+                    ) B
                 WHERE A.LINK_ID = B.LINK_ID
-                  AND F.LINK_ID = B.LINK_ID
-                  AND E.IFSC_ID = F.IFSC_ID
-                  AND E.ROAD_ID = D.ROAD_ID
-                  AND C.ATRD_ID = D.ATRD_ID
             ) AA LEFT OUTER JOIN TB_LINK_TRAF BB ON AA.ROADWAY_ID = BB.LINK_ID
-                 INNER JOIN TB_CMMN_CD CC ON BB.CMTR_GRAD_CD = CC.CMMN_CD;
+                 INNER JOIN TB_CMMN_CD CC ON BB.CMTR_GRAD_CD = CC.CMMN_CD
     ]]>
     </select>
 

src/main/resources/static/css/traffic.css

@@ -41,8 +41,29 @@ ul, li {
     font-size: 12px;
     font-weight: bold;
     border-bottom: 1px solid #c3c1c1;
-    color: white;
-    background-color: black;
+    /*color: white;*/
+    /*background-color: black;*/
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+}
+
+.tab-title > div {
+    padding: 5px;
+    border: 1px solid #c3c1c1;
+    background-color: white;
+    color: black;
+    user-select: none;
+}
+.tab-title > div:hover{
+    cursor: pointer;
+    filter: brightness(1.1);
+}
+
+.tab-title > div.active {
+    background-color: rgb(51, 102, 171);
+    color : white;
+    border: 1px solid rgb(51, 102, 171);
 }
 .toggle-button:hover{
     filter: brightness(1.1);
@@ -118,6 +139,10 @@ ul, li {
     overflow: auto;
 }
 
+.left-list-area .list-content.spot {
+    display: none;
+}
+
 .left-list-area .list-content > li {
     width: 100%;
     min-height: 35px;
@@ -329,8 +354,8 @@ ul, li {
 }
 
 .cctv-info-window{
-    width: 430px;
-    height: 322px;
+    width: 370px;
+    height: 300px;
     background-color: white;
     box-shadow: 2px 2px 2px 2px #2b333f;
     padding: 5px;
@@ -373,7 +398,7 @@ ul, li {
 .vms-info-window .title,
 .cctv-info-window .title {
     width: 100%;
-    height: 35px;
+    height: 25px;
     display: flex;
     align-items: center;
     border-bottom: 1px solid #c7c6c6;
@@ -412,7 +437,7 @@ ul, li {
 }
 .cctv-info-window .content{
     width: 100%;
-    height: 278px;
+    height: calc(100% - 25px);
  }
 .cctv-info-window .content > div:nth-child(1){
     width: 100%;
@@ -425,7 +450,7 @@ ul, li {
 }
 .cctv-info-window .content > div:nth-child(2){
     width: 100%;
-    height: 35px;
+    height: 25px;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -437,10 +462,10 @@ ul, li {
 }
 .cctv-info-window .content > div > div:nth-child(2) {
     margin-left: 5px;
-    width: 120px;
-    height: 35px;
+    width: 100px;
+    height: 25px;
     text-align: center;
-    line-height: 35px;
+    line-height: 25px;
     background-color: rgb(51, 102, 171);
     color: white;
     cursor: pointer;
@@ -702,7 +727,7 @@ ul, li {
     .incident-info-window .title > div:nth-child(2),
     .vms-info-window .title > div:nth-child(2),
     .cctv-info-window .title > div:nth-child(2) {
-        width: 20px;
+        width: 30px;
     }
 }
 

src/main/resources/static/js/traffic/traffic.js

@@ -60,6 +60,7 @@ $(()=>{
             atrdMarkerResize();
         }
         getVertex();
+        console.log('level', _Map.getLevel());
     });
 
     kakao.maps.event.addListener(_Map, 'dragend', function() {
@@ -94,7 +95,7 @@ $(()=>{
             _AtrdData = [];
             let upHillArr = [];
             let downHillArr = [];
-            const $selectedLi = $(".left-list-area .list-content > li.click");
+            const $selectedLi = $(".left-list-area .list-content.list > li.click");
             let id;
             let idArr;
             if ($selectedLi[0]) {
@@ -368,31 +369,155 @@ $(()=>{
         //     }
         // });
     // }, 10000)
+    let _MakerArr = [];
+    $('.tab-title > div').on('click', function(){
+        let searchType = $('.tab-title > div.active').text();
+        if (searchType === $(this).text()) return;
+        $('.tab-title > div').toggleClass("active");
+        searchType = $(this).text();
+        let list;
+        let spot;
+        if (searchType === '지점 검색') {
+            list = 'none';
+            spot = 'block';
+            $('.list-content.spot').html("");
+        }
+        else {
+            list = 'block';
+            spot = 'none';
+            $('.list-content.list > li').css('display', 'block');
+        }
+
+        $('#search-box').val("");
+        $('.list-content.list').css('display', list);
+        $('.list-content.spot').css('display', spot);
+        if (_MakerArr.length > 0) {
+            _MakerArr.forEach((obj)=>{
+                obj.setMap(null);
+            });
+            _MakerArr = [];
+        }
+    })
 
 
     $('#search-box').on('keyup', function () {
+        const searchType = $('.tab-title > div.active').text();
         const searchText = $(this).val();
-        if (!$('.list-content > li').length) return;
 
-        for (let ii = 0; ii < $('.list-content > li').length; ii++) {
-            const li = $('.list-content > li').eq(ii);
-            if ($(this).val().length === 0) {
-                li.css('display', 'block');
-            }
-            else {
-                let text = $('.list-content > li').eq(ii).text().toLowerCase();
-                if (text.includes(searchText.toLowerCase())) {
+        if (searchType === '리스트') {
+            if (!$('.list-content.list > li').length) return;
+
+            for (let ii = 0; ii < $('.list-content.list > li').length; ii++) {
+                const li = $('.list-content.list > li').eq(ii);
+                if ($(this).val().length === 0) {
                     li.css('display', 'block');
                 }
                 else {
-                    li.css('display', 'none');
+                    let text = $('.list-content.list > li').eq(ii).text().toLowerCase();
+                    if (text.includes(searchText.toLowerCase())) {
+                        li.css('display', 'block');
+                    }
+                    else {
+                        li.css('display', 'none');
+                    }
                 }
             }
         }
-    })
+        else {
+            if (_MakerArr.length > 0) {
+                _MakerArr.forEach((obj)=>{
+                    obj.setMap(null);
+                });
+                _MakerArr = [];
+            }
+            $('.list-content.spot').html("");
+            $.ajax({
+                url: 'https://dapi.kakao.com/v2/local/search/address.json',
+                headers: { 'Authorization': 'KakaoAK 4896b94398b96949d349881d004835cf'},
+                data :{
+                    query : searchText,
+                },
+                type: 'GET'
+            }).done(function(data) {
+                if (data && data.documents.length > 0) {
+                    let str = "";
+                    const setMap = new Map();
+
+                    const bounds = new daum.maps.LatLngBounds();
+                    let minX;
+                    let minY;
+                    let maxX;
+                    let maxY;
+                    let idx = 0;
+                    data.documents.forEach((obj)=>{
+                        if (!setMap.get(obj.address_name) && obj.address_name.includes("경북 포항시")) {
+                            idx++;
+                            let addr = obj.address_name;
+                            if (obj.x && obj.y) {
+                                const position = new kakao.maps.LatLng(obj.y, obj.x);
+                                let marker = new kakao.maps.Marker({
+                                    position : position,
+                                    title : addr ,
+                                    content : addr
+                                });
+
+                                new kakao.maps.event.addListener(marker, 'click', function() {
+                                    moveLocation(obj.x, obj.y, idx);
+                                })
+                                if (!minX) {
+                                    minX = obj.x;
+                                }
+
+                                if (!maxX) {
+                                    maxX = obj.x;
+                                }
+                                if (!minY) {
+                                    minY = obj.y;
+                                }
+
+                                if (!maxY) {
+                                    maxY = obj.y;
+                                }
+
+                                minX = minX <= obj.x ? minX : obj.x;
+                                maxX = maxX >= obj.x ? maxX : obj.x;
+                                minY = minY <= obj.y ? minY : obj.y;
+                                maxY = maxY >= obj.y ? maxY : obj.y;
+
+                                marker.setMap(_Map);
+                                _MakerArr.push(marker);
+                                setMap.set(addr, obj);
+
+                                str+= `<li id="spot-${idx}" onclick="moveLocation(${obj.x}, ${obj.y}, ${idx})">
+                                            ${obj.address_name}
+                                       </li>`;
+                            }
+                        }
+                    });
 
+                    if (minX && minY && maxX && maxY) {
+                        bounds.extend(new daum.maps.LatLng(minY, minX));
+                        bounds.extend(new daum.maps.LatLng(maxY, maxX));
+                        _Map.setBounds(bounds);
+                        $('.list-content.spot').html(str);
+                        getVertex();
+                    }
+                }
+            });
+        }
+    })
 });
 
+function moveLocation(xCoordinate, yCoordinate, listIndex) {
+    const position = new kakao.maps.LatLng(yCoordinate, xCoordinate);
+
+    _Map.setCenter(position);
+    _Map.setLevel(3);
+    $('.list-content.spot > li.click').removeClass('click');
+    $('#spot-' +listIndex).addClass('click');
+    getVertex();
+}
+
 function getVertex() {
     if (_TrafficArray.length > 0) {
         _TrafficArray.forEach((obj) => {
@@ -535,7 +660,7 @@ function initFaicilityData() {
                         }
                     }
                 })
-                const listSection = $('.left-list-area .list-content');
+                const listSection = $('.left-list-area .list-content.list');
                 listSection.empty();
                 listSection.html(listStr);
             }
@@ -556,7 +681,7 @@ function atrdClickEvent(AupHillId, AdownHillId) {
         _AtrdArray = [];
     }
     _AtrdData = [];
-    const $selectedLi = $('.left-list-area .list-content > li.click');
+    const $selectedLi = $('.left-list-area .list-content.list > li.click');
     if ($selectedLi) {
         $selectedLi.removeClass('click');
     }
@@ -879,7 +1004,7 @@ class TbCCtvObj {
         this.infoWindow.draggable({containment : 'body'});
         // this.infoWindow = new kakao.maps.CustomOverlay({position: coordinates, content: iwContent, zindex: 15, yAnchor: 1.1});
         // this.infoWindow.setMap(_Map);
-        const video = videojs("video-" + this.ID, {
+        let video = videojs("video-" + this.ID, {
             sources: [
                 {
                     src: this.obj.strm_http_addr,
@@ -893,6 +1018,23 @@ class TbCCtvObj {
             preload: "metadata",
         });
 
+        video.on('error', ()=>{
+            if (video.error().code === 4) {
+                video.pause();
+                video.dispose();
+                if (this.timer) {
+                    clearTimeout(this.timer);
+                }
+                $('.content > div:nth-child(1)').append($('<img src="/images/icon/error.png">'));
+                $('.content > div:nth-child(1)').css({
+                    display : 'flex',
+                    alignItems : 'center',
+                    justifyContent : 'center',
+                });
+                video = null;
+            }
+        })
+
         this.timer = setTimeout(()=>{
             if (video) {
                 video.pause();
@@ -1048,6 +1190,7 @@ class TbVmsObj {
         const headerH = $('header').height();
         const wrapH   = $('.trafficWrap').innerHeight();
         let top = headerH + (wrapH/2) - this.infoWindow.innerHeight() + 10;
+
         let left = (window.innerWidth / 2) - (this.infoWindow.width() / 2);
         this.infoWindow.css({
             top : top + 'px',
@@ -1168,7 +1311,8 @@ class TbIncdObj {
         const headerH   = $('header').height();
         const wrapH     = $('.trafficWrap').innerHeight();
         let top = headerH + (wrapH/2) - this.infoWindow.innerHeight() + 10;
-        let left = (window.innerWidth / 2) - (this.infoWindow.width() / 2);
+        let left = (window.innerWidth / 2) - (this.infoWindow.innerWidth() / 2);
+        console.log(this.infoWindow.width());
         this.infoWindow.css({
             top : top + 'px',
             left : left + 'px',
@@ -1362,12 +1506,8 @@ class IntersectionCameraObj {
         //     yAnchor: 1.1
         // });
         // this.infoWindow.setMap(_Map);
-        const videoEl = document.getElementById("video-" + this.ID);
-        videoEl.addEventListener("error", function(event){
-            console.log(event);
-        })
 
-        const video = videojs("video-" + this.ID, {
+        let video = videojs("video-" + this.ID, {
             sources: [
                 {
                     src: this.obj.hmpg_cmra_url,
@@ -1381,6 +1521,20 @@ class IntersectionCameraObj {
             preload: "metadata",
         });
 
+        video.on('error', ()=>{
+            if (video.error().code === 4) {
+                video.pause();
+                video.dispose();
+                $('.content > div:nth-child(1)').append($('<img src="/images/icon/error.png">'));
+                $('.content > div:nth-child(1)').css({
+                    display : 'flex',
+                    alignItems : 'center',
+                    justifyContent : 'center',
+                });
+                video = null;
+            }
+        });
+
 
         this.timer = setTimeout(() => {
             if (video) {
@@ -1401,7 +1555,10 @@ class IntersectionCameraObj {
             }
         });
         this.isClick = true;
-        $('.close-window').on('click', ()=> this.close());
+        $('.close-window').on('click', (event)=> {
+            event.preventDefault();
+            this.close();
+        });
     }
 
     close() {
@@ -1429,6 +1586,7 @@ class IntersectionCameraObj {
  * @param event 이벤트 종류 (click, close)
  */
 function infoWindowEvent(type, id, event) {
+    window.event.preventDefault();
     let array = [];
     switch (type) {
         case 'cctv':
@@ -1678,7 +1836,7 @@ function setMarkerImage(obj, type) {
 function getScrollTop(selectIndex) {
     let scrollTop = 0;
     for (let ii=0; ii < selectIndex; ii++) {
-        let height = $('.left-list-area .list-content').children().eq(ii).css('height');
+        let height = $('.left-list-area .list-content.list').children().eq(ii).css('height');
         if (height) {
             height = Number(height.replace('px', ''));
             if (!isNaN(height)) {
@@ -1699,7 +1857,7 @@ function moveToScroll(flag, array, id) {
     if (flag) {
         let selectIndex = array.findIndex((obj)=> obj.ID == id);
         let scrollTop = getScrollTop(selectIndex);
-        $('.left-list-area .list-content').animate({
+        $('.left-list-area .list-content.list').animate({
             scrollTop : scrollTop + 'px'
         });
         $('.mobile-select').val(id);
@@ -1750,7 +1908,7 @@ function receiveFacilityData(jsonData, array, facilityClass, listFlag, type) {
     });
 
     if (listFlag === true) {
-        const listSection  = $('.left-list-area .list-content');
+        const listSection  = $('.left-list-area .list-content.list');
         listSection.empty();
         listSection.html(listStr);
         const $mobileSelect = $('.mobile-select');

src/main/resources/templates/include/traffic.html

@@ -21,13 +21,17 @@
             <div>소통정보</div>
         </li>
     </ul>
-    <div class="tab-title" th:text="${listTitle}"></div>
+<!--    <div class="tab-title" th:text="${listTitle}">-->
+    <div class="tab-title">
+        <div class="active">리스트</div>
+        <div>지점 검색</div>
+    </div>
     <div class="list-search">
         <div>검색</div>
         <input id="search-box" name="search-list" type="text" placeholder="검색어를 입력하세요">
     </div>
-    <ul class="list-content">
-    </ul>
+    <ul class="list-content list"></ul>
+    <ul class="list-content spot"></ul>
 </div>
 <div class="toggle-button" title="보이기/숨기기" th:onclick="toggleEvent()">
     &lt;