2024-02-05 update

src/main/java/com/its/web/controller/statistics/StatisticsController.java

@@ -1,6 +1,7 @@
 package com.its.web.controller.statistics;
 
 
+import com.its.web.dto.statistics.TrafficStatisticsCongestDto;
 import com.its.web.dto.statistics.TrafficStatisticsDto;
 import com.its.web.service.statistics.StatisticsService;
 import io.swagger.annotations.Api;
@@ -45,4 +46,11 @@ public class StatisticsController {
         return service.findStatisticsCommGrade(paramInfo, searchType);
     }
 
+    @ApiOperation(value = "03.정체 통계 조회", response = TrafficStatisticsCongestDto.TrafficStatisticsCongestDtoReq.class, responseContainer = "ArrayList")
+    @PostMapping(value = "/congest", produces = {"application/json; charset=utf8"})
+    @ResponseBody
+    public List<TrafficStatisticsCongestDto> findStatisticsCommGrad(@Valid final TrafficStatisticsCongestDto.TrafficStatisticsCongestDtoReq paramInfo) {
+        return service.findStatisticsCongest(paramInfo);
+    }
+
 }

src/main/java/com/its/web/controller/view/ViewController.java

@@ -1,5 +1,6 @@
 package com.its.web.controller.view;
 
+import com.its.web.service.common.CommonService;
 import com.its.web.service.statistics.StatisticsService;
 import com.its.web.service.traffic.TrafficService;
 import io.swagger.annotations.Api;
@@ -23,6 +24,8 @@ public class ViewController {
 
     private final StatisticsService statisticsService;
 
+    private final CommonService commonService;
+
     @ApiOperation(value = "01.메인화면")
     @GetMapping("/")
     public String Main(Model model) {
@@ -100,6 +103,23 @@ public class ViewController {
     public String trafficCongestStatistics(Model model) {
         model.addAttribute("selected", "statistics");
         model.addAttribute("active", "congest");
-        return "statistics/tfvl-stat-amount";
+        model.addAttribute("list", commonService.findDayList());
+        return "statistics/congest-stat";
+    }
+
+    @ApiOperation(value = "04.교통정보센터 - 01.센터 소개")
+    @GetMapping("/center/center")
+    public String center(Model model) {
+        model.addAttribute("selected", "center");
+        model.addAttribute("active", "center");
+        return "center/center";
+    }
+
+    @ApiOperation(value = "04.교통정보센터 - 02.오시는 길")
+    @GetMapping("/center/way")
+    public String way(Model model) {
+        model.addAttribute("selected", "center");
+        model.addAttribute("active", "way");
+        return "center/way";
     }
 }

src/main/java/com/its/web/dto/common/CodeDto.java

@@ -0,0 +1,23 @@
+package com.its.web.dto.common;
+
+import com.fasterxml.jackson.annotation.JsonProperty;
+import io.swagger.annotations.ApiModel;
+import io.swagger.annotations.ApiModelProperty;
+import lombok.AllArgsConstructor;
+import lombok.Data;
+import lombok.NoArgsConstructor;
+
+@Data
+@NoArgsConstructor
+@AllArgsConstructor
+@ApiModel("CodeDto(코드 정보 DTO)")
+public class CodeDto {
+
+    @ApiModelProperty("코드 ID")
+    @JsonProperty("code")
+    private String code;
+
+    @ApiModelProperty("한글 명칭")
+    @JsonProperty("name")
+    private String name;
+}

src/main/java/com/its/web/dto/statistics/TrafficStatisticsCongestDto.java

@@ -0,0 +1,57 @@
+package com.its.web.dto.statistics;
+
+import com.fasterxml.jackson.annotation.JsonProperty;
+import io.swagger.annotations.ApiModel;
+import io.swagger.annotations.ApiModelProperty;
+import lombok.*;
+
+import javax.validation.constraints.NotNull;
+
+@Data
+@NoArgsConstructor
+@AllArgsConstructor
+@ApiModel("TrafficStatisticsCongestDto(정체 통계 DTO)")
+public class TrafficStatisticsCongestDto {
+
+    @ApiModelProperty("도로명")
+    @JsonProperty("road_nm")
+    private String roadNm;
+
+    @ApiModelProperty("시작지점명")
+    @JsonProperty("strt_nm")
+    private String strtNm;
+
+    @ApiModelProperty("끝지점명")
+    @JsonProperty("end_nm")
+    private String endNm;
+
+    @ApiModelProperty("시작 시각")
+    @JsonProperty("strt_tm")
+    private String strtTm;
+
+    @ApiModelProperty("종료 시각")
+    @JsonProperty("end_tm")
+    private String endTm;
+
+    @ApiModelProperty("평균속도")
+    @JsonProperty("sped")
+    private String sped;
+
+
+    @ApiModel("TrafficStatisticsDtoReq(교통량 파리미터)")
+    @Getter
+    @Setter
+    @ToString
+    @NoArgsConstructor
+    public static class TrafficStatisticsCongestDtoReq {
+        @ApiModelProperty("검색 기준 년월, Nullable = N")
+        @JsonProperty("STAT_YM")
+        @NotNull
+        private String statYm;
+
+        @ApiModelProperty("요일 코드, Nullable = N")
+        @JsonProperty("day")
+        @NotNull
+        private String day;
+    }
+}

src/main/java/com/its/web/mapper/itcs/IntersectionMapper.java

@@ -21,5 +21,5 @@ public interface IntersectionMapper {
 
     List<TrafficStatisticsDto> findStatisticsTrafficAmountByMonth(Map<String, Object> paramMap);
 
-    List<TrafficStatisticsDto> findStatisticsTrafficAmountByDays(Map<String, Object> paramMap);
+    List<TrafficStatisticsDto> findStatisticsTrafficAmountByDay(Map<String, Object> paramMap);
 }

src/main/java/com/its/web/mapper/its/common/CommonMapper.java

@@ -1,5 +1,6 @@
 package com.its.web.mapper.its.common;
 
+import com.its.web.dto.common.CodeDto;
 import com.its.web.dto.common.TbWebOrgDto;
 import org.apache.ibatis.annotations.Mapper;
 
@@ -8,4 +9,6 @@ import java.util.List;
 @Mapper
 public interface CommonMapper {
     List<TbWebOrgDto> findAllOrganization();
+
+    List<CodeDto> findDayList();
 }

src/main/java/com/its/web/mapper/its/statistics/StatisticsMapper.java

@@ -1,5 +1,6 @@
 package com.its.web.mapper.its.statistics;
 
+import com.its.web.dto.statistics.TrafficStatisticsCongestDto;
 import com.its.web.dto.statistics.TrafficStatisticsDto;
 import org.apache.ibatis.annotations.Mapper;
 
@@ -15,5 +16,7 @@ public interface StatisticsMapper {
     List<TrafficStatisticsDto> findStatisticsCommGradeMonth(Map<String, String> paramMap);
 
     List<TrafficStatisticsDto> findStatisticsCommGradeDay(Map<String, String> paramMap);
+
+    List<TrafficStatisticsCongestDto> findStatisticsCongest(Map<String, String> paramMap);
 }
 

src/main/java/com/its/web/service/common/CommonService.java

@@ -1,5 +1,6 @@
 package com.its.web.service.common;
 
+import com.its.web.dto.common.CodeDto;
 import com.its.web.dto.common.TbWebOrgDto;
 import com.its.web.mapper.its.common.CommonMapper;
 import lombok.RequiredArgsConstructor;
@@ -15,6 +16,10 @@ public class CommonService {
     private final CommonMapper mapper;
 
     public List<TbWebOrgDto> findAllOrganization() {
-        return mapper.findAllOrganization();
+        return this.mapper.findAllOrganization();
+    }
+
+    public List<CodeDto> findDayList() {
+        return this.mapper.findDayList();
     }
 }

src/main/java/com/its/web/service/statistics/StatisticsService.java

@@ -1,6 +1,7 @@
 package com.its.web.service.statistics;
 
 import com.its.web.dto.statistics.DaeroMngmDto;
+import com.its.web.dto.statistics.TrafficStatisticsCongestDto;
 import com.its.web.dto.statistics.TrafficStatisticsDto;
 import com.its.web.mapper.itcs.IntersectionMapper;
 import com.its.web.mapper.its.statistics.StatisticsMapper;
@@ -36,7 +37,7 @@ public class StatisticsService {
                 result = ixrMapper.findStatisticsTrafficAmountByMonth(paramMap);
             }
             else if (searchType.equals("dd")) {
-                result = ixrMapper.findStatisticsTrafficAmountByDays(paramMap);
+                result = ixrMapper.findStatisticsTrafficAmountByDay(paramMap);
             }
         }
         return result;
@@ -87,4 +88,11 @@ public class StatisticsService {
         }
         return result;
     }
+
+    public List<TrafficStatisticsCongestDto> findStatisticsCongest(TrafficStatisticsCongestDto.TrafficStatisticsCongestDtoReq paramInfo) {
+        Map<String, String> paramMap = new HashMap<>();
+        paramMap.put("STAT_YM",paramInfo.getStatYm());
+        paramMap.put("DAY",paramInfo.getDay());
+        return this.mapper.findStatisticsCongest(paramMap);
+    }
 }

src/main/resources/mybatis/mapper/itcs/InterSectionMapper.xml

@@ -145,7 +145,7 @@
     </select>
 
 
-    <select id="findStatisticsTrafficAmountByDays" parameterType="java.util.HashMap" resultType="com.its.web.dto.statistics.TrafficStatisticsDto">
+    <select id="findStatisticsTrafficAmountByDay" parameterType="java.util.HashMap" resultType="com.its.web.dto.statistics.TrafficStatisticsDto">
         SELECT
             L.STRT_IXR AS strt_name,
             L.END_IXR AS end_name,

src/main/resources/mybatis/mapper/its/common/CommonMapper.xml

@@ -5,4 +5,12 @@
     <select id="findAllOrganization" resultType="com.its.web.dto.common.TbWebOrgDto">
         SELECT organ_id, name, url FROM TB_WEB_ORGAN
     </select>
+
+    <select id="findDayList" resultType="com.its.web.dto.common.CodeDto">
+        SELECT
+            CMMN_CD AS code,
+            CMMN_CD_KOR_NM AS name
+        FROM TB_CMMN_CD
+        WHERE CMMN_CLSF_CD = 'DTW'
+    </select>
 </mapper>

src/main/resources/mybatis/mapper/its/statistics/StatisticsMapper.xml

@@ -110,6 +110,7 @@
                               ) A,
                               (
                                   SELECT
+                                      B.IFSC_ID
                                       B.IFSC_ID,
                                       G.CMTR_GRAD_CD AS TRFGRADE
                                   FROM TB_ATRD_ROAD_RLTN A,
@@ -530,4 +531,19 @@
         ORDER BY DIRECTION,ORD1,ORD2
     </select>
 
+    <select id="findStatisticsCongest" resultType="com.its.web.dto.statistics.TrafficStatisticsCongestDto" parameterType="java.util.HashMap">
+        SELECT
+            A.IFSC_ID AS LINKID,
+            B.IFSC_NM AS road_nm,
+            B.STRT_NM AS strt_nm,
+            B.END_NM AS end_nm,
+            A.CNFS_STRT_HM AS strt_tm,
+            A.CNFS_END_HM AS end_tm,
+            A.AVRG_SPED AS sped
+        FROM TB_REPT_CNGS_SECT A, TB_IFSC B
+        WHERE A.IFSC_ID = B.IFSC_ID
+        AND DAY_TYPE_CD = #{DAY}
+        AND A.STAT_YM > #{STAT_YM}
+        ORDER BY A.IFSC_ID DESC
+    </select>
 </mapper>

src/main/resources/static/css/center.css

@@ -0,0 +1,262 @@
+
+.menu {
+    max-width: 1200px;
+    width: 100%;
+    margin: 1.5rem auto 0 auto;
+    display: flex;
+    -webkit-box-pack: center;
+    justify-content: center;
+}
+.menu > div {
+    width: 100px;
+    word-break: keep-all;
+    text-align: center;
+    line-height: 1.1;
+    font-weight: bold;
+    font-size: 18px;
+}
+.menu > div:not(:first-child) {
+    margin-left: 30px;
+}
+
+.menu > div.active {
+    color: rgb(51, 102, 171);
+}
+
+.menu > div:hover{
+    color: rgb(51, 102, 171);
+    cursor: pointer;
+}
+
+.mobile-menu {
+    display: none;
+    padding: 0.6rem 1rem;
+    border-top: 1px solid rgb(230, 230, 230);
+    justify-content: space-around;
+    width: 100%;
+    height: 80px;
+}
+.mobile-menu > div > div {
+    filter: grayscale(1);
+    background-size: 35px 35px;
+    width: 100%;
+    height: 35px;
+    background-position: center;
+    background-repeat: no-repeat;
+}
+.mobile-menu > div {
+    font-weight: bold;
+    padding-top : 5px;
+    font-size: 11px;
+}
+.mobile-menu > div.active > div {
+    filter: grayscale(0);
+}
+.mobile-menu > div.active {
+    color: rgb(51, 102, 171);
+}
+
+.mobile-menu > div:nth-child(1) > div {
+    background-image: url("/images/icon/menu_icon5-2.png");
+}
+
+.mobile-menu > div:nth-child(2) > div {
+    background-image: url("/images/icon/way.png");
+}
+
+.centerWrap {
+    width: 100%;
+    height: calc(100% - 243.8px);
+    display: flex;
+    justify-content: center;
+    overflow: auto;
+    min-height: 500px;
+}
+
+.centerWrap .container {
+    max-width: 1200px;
+    width: 95%;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+}
+
+.centerWrap .header {
+    padding: 2rem 0;
+    margin-bottom: 0;
+    color: rgb(51, 102, 171);
+    text-align: center;
+    border-bottom: 1px solid rgb(33, 84, 153);
+    font-size: 2rem;
+    font-weight: 500;
+}
+.centerWrap .way-content,
+.centerWrap .content1 {
+    display: flex;
+    flex-direction: row;
+}
+
+.centerWrap .way-content a:hover {
+    color : rgb(51, 102, 171);
+}
+
+.centerWrap .way-content{
+    padding : 1rem 0;
+    height: calc(100% - 101px);
+}
+.centerWrap .way-content > div {
+    width: 50%;
+    height: 100%;
+}
+.centerWrap .way-content > div:nth-child(2) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    font-weight: bold;
+}
+
+.centerWrap .way-content > div:nth-child(2) > div {
+    display: flex;
+    flex-direction: column;
+    height: 60%;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.centerWrap .content1 > div {
+    padding : 10px;
+}
+.centerWrap .way-content > div:nth-child(2) > p,
+.centerWrap .content1 > div > p {
+    padding : 10px 0;
+}
+.centerWrap .way-content > div:nth-child(2) img {
+    width: 20px;
+    height: 20px;
+}
+
+.centerWrap .way-content > div:nth-child(2) h2 {
+    padding : 2rem 0 0 0;
+    width: 100%;
+    text-align: center;
+    color: rgb(51, 102, 171);
+}
+.centerWrap .content1 h2 {
+    padding : 1rem;
+    width: 100%;
+    text-align: center;
+    color: rgb(51, 102, 171);
+}
+
+.centerWrap .content1 p {
+    font-weight: bold;
+    font-size: 15px;
+}
+
+.centerWrap table, .centerWrap td, .centerWrap th {
+    border: 1px solid black;
+}
+
+.centerWrap table {
+    border-collapse: collapse;
+    width: 100%;
+}
+
+.centerWrap table .bt-dbl {
+    border-bottom: double;
+}
+
+.centerWrap .content2{
+    padding : 10px;
+    width: 100%;
+    height: auto;
+}
+.centerWrap table thead tr th {
+    color : white;
+    background-color: rgb(51, 102, 171);
+    font-size: 16px;
+    padding: 10px;
+}
+
+.centerWrap table tbody tr:first-child td {
+    font-weight: bold;
+}
+.centerWrap table tr td {
+    font-size: 16px;
+    padding: 10px;
+    text-align: center;
+}
+
+@media (max-width: 720px) {
+}
+
+@media (max-width: 920px) {
+    .centerWrap {
+        height: calc(100% - 253.19px);
+    }
+
+    .centerWrap .container .content1 {
+        flex-direction: column;
+    }
+
+    .centerWrap .container .content1 img{
+        width: 100%;
+    }
+
+}
+
+@media (max-height: 765px) {
+    .centerWrap {
+        height: calc(100% - 234.19px);
+    }
+}
+
+@media (max-height: 765px) {
+    .centerWrap {
+        height: calc(100% - 234.19px);
+    }
+}
+
+@media (max-width: 750px) {
+    .centerWrap {
+        height: calc(100% - 249.19px);;
+    }
+}
+
+@media (max-width: 547px) {
+    .centerWrap {
+        height: calc(100% - 260.19px);
+    }
+}
+
+@media (max-width: 420px) {
+    .mobile-menu {
+        display: flex;
+    }
+
+    .menu {
+        display:  none;
+    }
+
+    .centerWrap {
+        height: calc(100% - 228.19px);
+        padding: 5px 0;
+    }
+
+    .centerWrap .header {
+        font-size: 1.5rem;
+    }
+
+    .centerWrap h2 {
+        font-size: 14px;
+    }
+
+    .centerWrap .content1 p {
+        font-size: 12px;
+    }
+    .centerWrap table tr td,
+    .centerWrap table thead tr th {
+        font-size: 14px;
+    }
+}

src/main/resources/static/css/common.css

@@ -243,7 +243,6 @@ footer {
     width: 100%;
     display: flex;
     flex-direction: column;
-    position: fixed;
     z-index: 108;
 }
 
@@ -523,10 +522,13 @@ footer .mobile-footer {
 @media (max-width: 450px) {
     /* 헤더 */
     header {
-        padding: 0.6rem 1rem;
+        padding: 0;
         border-top: 1px solid rgb(230, 230, 230);
     }
 
+    header .header-menu {
+        padding: 0.6rem 1rem;
+    }
     header .logo > div > img {
         margin-top: 3px;
         width: auto;

src/main/resources/static/css/statistics.css

@@ -1,16 +1,28 @@
 
 .menu {
+    /*width: 100%;*/
+    /*display: flex;*/
+    /*-webkit-box-pack: center;*/
+    /*justify-content: center;*/
+    /*align-items: center;*/
+    /*border-bottom: 1px solid rgba(0, 0, 0, 0.15);*/
+    max-width: 1200px;
     width: 100%;
+    margin: 1.5rem auto 0 auto;
     display: flex;
     -webkit-box-pack: center;
     justify-content: center;
-    align-items: center;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
 }
 .menu > div {
-    padding: 20px;
-    font-size: 2vh;
+    width: 100px;
+    word-break: keep-all;
+    text-align: center;
+    line-height: 1.1;
     font-weight: bold;
+    font-size: 18px;
+}
+.menu > div:not(:first-child) {
+    margin-left: 30px;
 }
 
 .menu > div.active {
@@ -26,13 +38,55 @@
     display: none;
     padding: 0.6rem 1rem;
     border-top: 1px solid rgb(230, 230, 230);
+    justify-content: space-around;
+    width: 100%;
+    height: 80px;
+}
+.mobile-menu > div > div {
+    filter: grayscale(1);
+    background-size: 35px 35px;
+    width: 100%;
+    height: 35px;
+    background-position: center;
+    background-repeat: no-repeat;
+}
+.mobile-menu > div {
+    font-weight: bold;
+    padding-top : 5px;
+    font-size: 11px;
+}
+.mobile-menu > div.active > div {
+    filter: grayscale(0);
+}
+.mobile-menu > div.active {
+    color: rgb(51, 102, 171);
+}
+
+.mobile-menu > div:nth-child(1) > div {
+    background-image: url("/images/icon/menu_icon1-2.png");
+}
+
+.mobile-menu > div:nth-child(2) > div {
+    background-image: url("/images/icon/traffic-legend2.png");
+}
+
+.mobile-menu > div:nth-child(3) > div {
+    background-image: url("/images/icon/incident-legend2.png");
 }
 
+.button div {
+    display: block;
+}
 .statisticWrap {
     width: 100%;
-    height: calc(100% - 263px);
+
+    /*height: calc(100% - 242.19px);*/
+    height: calc(100% - 243.8px);
     display: flex;
     justify-content: center;
+    overflow: auto;
+    min-height: 500px;
+    padding: 30px 0px;
 }
 
 .statisticWrap .container {
@@ -42,7 +96,7 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    padding: 30px 0;
+    height: 100%;
 }
 .statisticWrap .search-bar {
     display: flex;
@@ -116,16 +170,18 @@
 }
 .search-content {
     width: 100%;
+    height: calc(100% - 42px);
     overflow: hidden;
 }
+
 .table-box {
     position: relative;
-    height: calc(-385px + 100vh);
+    height: 100%;
     overflow: auto;
 }
 
 .table-box table {
-    height: calc(-400px + 100vh);
+    height: 100%;
     width: 100%;
     text-align: center;
     border-collapse: separate;
@@ -149,7 +205,7 @@
 }
 
 .table-box.comm {
-    height: calc(-428px + 100vh);
+    height: calc(100% - 38px);
 }
 
 .table-box table.comm{
@@ -220,3 +276,81 @@
     color: rgb(235, 38, 12);
 }
 
+
+
+@media (max-width: 720px) {
+    .button div {
+        display: none;
+    }
+}
+
+@media (max-width: 920px) {
+    .menu > div {
+        font-size : 12px;
+    }
+    .statisticWrap {
+        height: calc(100% - 253.19px);
+    }
+}
+
+@media (max-height: 765px) {
+    .statisticWrap {
+        height: calc(100% - 234.19px);
+    }
+}
+
+@media (max-height: 765px) {
+    .statisticWrap {
+        height: calc(100% - 234.19px);
+    }
+}
+
+@media (max-width: 750px) {
+    .search-content.congest {
+        height: calc(100% - 48px);
+    }
+    .search-content{
+        height: calc(100% - 92px);
+    }
+    .statisticWrap {
+        height: calc(100% - 237.19px);;
+    }
+}
+
+@media (max-width: 547px) {
+    .statisticWrap {
+        height: calc(100% - 256.19px);
+    }
+}
+
+@media (max-width: 420px) {
+    .mobile-menu {
+        display: flex;
+    }
+
+    .menu {
+        display:  none;
+    }
+
+    .statisticWrap {
+        height: calc(100% - 228.19px);
+        padding: 5px 0;
+    }
+    .table-box table td,
+    .table-box table th {
+        font-size: 11px;
+    }
+
+    .table-box table td:first-child,
+    .table-box table th:first-child {
+        min-width : 100px;
+    }
+    .statisticWrap .search-bar .label{
+        font-size: 11px;
+    }
+
+    .statisticWrap .search-bar > div:nth-child(1) > div:nth-child(2) select.date,
+    .statisticWrap .search-bar > div:nth-child(1) > div:nth-child(2) select.month {
+        min-width: 65px;
+    }
+}

src/main/resources/static/js/statistics/statistics.js

@@ -1,4 +1,6 @@
-
+const emptyStr = `<tr>
+                    <td><span>조회 된 항목이 없습니다.</span></td>
+                  </tr>`;
 $(()=>{
     init();
 })
@@ -10,6 +12,7 @@ function init () {
     const $type   = $('.type');
     const $amBtn  = $('.button.amount');
     const $comBtn = $('.button.comm');
+    const $conBtn = $('.button.congest');
     const $toggle = $('.table-toggle');
 
     const now      = new Date();
@@ -19,9 +22,13 @@ function init () {
 
     $amBtn.on('click', () => searchStatisticsAmount());
     $comBtn.on('click', ()=> searchStatisticsComm());
+    $conBtn.on('click', ()=> searchStatisticsCongest());
+
     $type.on('change', function(){
         const isDisabled = !($(this).val() === 'dd');
         $date.attr('disabled', isDisabled);
+        const opacity = isDisabled ? 0 : 1;
+        $date.css('opacity', opacity);
     })
 
     if ($year[0]) {
@@ -93,7 +100,7 @@ function init () {
     if ($date[0]) {
         let options = getDateOptions(1, nowDate, '일');
         $date.html(options);
-        $date.val(nowMonth);
+        $date.val(nowDate);
     }
 
     if ($toggle[0]) {
@@ -104,6 +111,7 @@ function init () {
             $(this).addClass("active");
         })
     }
+
 }
 
 /**
@@ -167,13 +175,10 @@ function searchStatisticsAmount() {
         toDt     : toDt,
     }
 
-    let height = 'calc(-400px + 100vh)';
-    $table.css('height', height);
+    // let height = 'calc(-400px + 100vh)';
+    // $table.css('height', height);
     $tbody.html('<tr><td><span><img src="/images/icon/loading.gif"></span></td></tr>');
     getDataAsync('/api/statistics/amount/' + type, "POST", param, null, (jsonData)=>{
-        let emptyStr = `<tr>
-                            <td><span>조회 된 항목이 없습니다.</span></td>
-                        </tr>`;
         let str = emptyStr;
         let thead = "";
 
@@ -193,8 +198,8 @@ function searchStatisticsAmount() {
                 }
                 str += `</tr>`
             });
-            height = 'auto';
-            $table.css('height', height);
+            // height = 'auto';
+            // $table.css('height', height);
         }
         if (limit) {
             thead = '<th>구간</th>';
@@ -251,16 +256,12 @@ function searchStatisticsComm() {
         toDt     : toDt,
     }
 
-    let height = 'calc(-443px + 100vh)';
+    // let height = 'calc(-443px + 100vh)';
     let url = "/speed";
-    $table.css('height', height);
+    // $table.css('height', height);
     $tbody.html('<tr><td><span><img src="/images/icon/loading.gif"></span></td></tr>');
-    console.log(active);
     if (active === '지/정체통계') url = '/grade';
 
-    let emptyStr = `<tr>
-                        <td><span>조회 된 항목이 없습니다.</span></td>
-                    </tr>`;
     let thead = "";
     if (limit) {
         thead = '<th>구간</th>';
@@ -296,8 +297,8 @@ function searchStatisticsComm() {
                 }
                 str += `</tr>`
             });
-            height = 'auto';
-            $table.css('height', height);
+            // height = 'auto';
+            // $table.css('height', height);
         }
 
         $thead.html(thead);
@@ -309,6 +310,61 @@ function searchStatisticsComm() {
     });
 }
 
+/**
+ * 정체 통계 조회
+ */
+function searchStatisticsCongest() {
+    const $type     = $('.type');
+    const $day      = $('.day');
+    const $thead    = $('.thead');
+    const $tbody    = $('.table-content');
+    const $table    = $('.table-box table');
+    const type      = $type.val();
+    const day       = $day.val();
+    const now       = new Date();
+    const year      = now.getFullYear();
+    let month       = (Number(now.getMonth()) - 1) - Number(type);
+    if (month < 10) {
+        month = "0" + month;
+    }
+    const statYm    = year + month;
+
+    const param = {
+        statYm   : statYm,
+        day      : day,
+    }
+
+    // let height = 'calc(-443px + 100vh)';
+    // $table.css('height', height);
+    $tbody.html('<tr><td><span><img src="/images/icon/loading.gif"></span></td></tr>');
+
+
+    getDataAsync('/api/statistics/congest' , "POST", param, null, (jsonData)=>{
+        let str = emptyStr;
+
+        if (jsonData && jsonData.length > 0) {
+            str = "";
+            jsonData.forEach((obj)=>{
+                const { road_nm, strt_nm, end_nm, strt_tm, end_tm, sped} = obj;
+
+                str += `<tr>
+                            <td>${road_nm}</td>
+                            <td>${strt_nm}</td>
+                            <td>${end_nm}</td>
+                            <td>${strt_tm}</td>
+                            <td>${end_tm}</td>
+                            <td>${sped} km</td>
+                        </tr>`
+            });
+            // height = 'auto';
+            // $table.css('height', height);
+        }
+        $tbody.html(str);
+    }, ()=>{
+        $tbody.html(emptyStr);
+    });
+}
+
 /**
  * 조회 날짜 값 포맷
  * @param year 년도

src/main/resources/templates/center/center.html

@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th=http://www.thymeleaf.org>
+<head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width,initial-scale=1"/>
+    <meta name="theme-color" content="#000000"/>
+    <meta name="description" content="포항시 교통정보센터입니다"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
+    <title>포항시 교통정보센터</title>
+    <th:block th:include="/include/head.html"></th:block>
+    <link rel="stylesheet" th:href="@{/css/center.css}">
+</head>
+<body id="body">
+<th:block th:include="/include/header.html"></th:block>
+<div class="centerWrap">
+    <div class="container">
+        <h2 class="header">포항교통정보센터 소개</h2>
+        <div class="content1">
+            <div>
+                <h2>설립 목적</h2>
+                <p>
+                    포항시의 각종 교통정보를 연계 및 제공하여 시민들이 더욱 편리하게 교통시설을 이용하고 교통 서비스의 질적 개선을 도모하고자 설립되었습니다.
+                </p>
+                <h2>역할</h2>
+                <p>포항시 교통정보센터는 교통정보 수집·가공·분석·정보제공 등 교통 운영 및 관리에 대한 업무를 수행하며, 교통정보시스템의 효율적인 운영과 유지관리,
+                    현장 시설물과 센터 시설물의 예방정비 및 유지보수 업무를 담당하고 있습니다.</p>
+            </div>
+            <div>
+                <img src="/images/background/bg_center.jpg">
+            </div>
+        </div>
+        <div class="content2">
+            <table>
+                <thead>
+                    <tr>
+                        <th colspan="3">시스템안내</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr class="bt-dbl">
+                        <td>도시교통정보시스템</td>
+                        <td>신호제어시스템</td>
+                        <td>스마트교차로시스템</td>
+                    </tr>
+                    <tr>
+                        <td>도로교통전광판, 교통관제 CCTV 운영</td>
+                        <td>포항시 신호 제어기 운영·관리</td>
+                        <td>교통량 수집분석을 통한 교차로 최적 주기 산출</td>
+                    </tr>
+                    <tr>
+                        <td>차량탑재장치(OBE), 노변기지국(RSE) 간 교통정보 수집</td>
+                        <td>교차로 신호 주기 조정 및 운영</td>
+                        <td>대기행렬 분석 및 소통정보 제공</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+</div>
+<th:block th:include="/include/footer.html"></th:block>
+</body>
+</html>

src/main/resources/templates/center/way.html

@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th=http://www.thymeleaf.org>
+<head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width,initial-scale=1"/>
+    <meta name="theme-color" content="#000000"/>
+    <meta name="description" content="포항시 교통정보센터입니다"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
+    <title>포항시 교통정보센터</title>
+    <th:block th:include="/include/head.html"></th:block>
+    <link rel="stylesheet" th:href="@{/css/center.css}">
+</head>
+<body id="body">
+<th:block th:include="/include/header.html"></th:block>
+<div class="centerWrap">
+    <div class="container">
+        <h2 class="header">오시는 길</h2>
+        <div class="way-content">
+            <div>
+                <div id="map"></div>
+            </div>
+            <div>
+                <h2>센터정보</h2>
+                <p>
+                    경상북도 포항시 남구 시청로 1<br>
+                    (2층 포항시청 어린이집 맞은편)
+                </p>
+                <h2>버스노선 안내</h2>
+                <p>
+                    <a>포항시 버스정보시스템 <img src="/images/icon/direction.png"></a>
+                </p>
+            </div>
+        </div>
+    </div>
+</div>
+<th:block th:include="/include/footer.html"></th:block>
+</body>
+</html>

src/main/resources/templates/include/center-menu.html

@@ -0,0 +1,22 @@
+<div class="menu">
+    <div class="center" onclick="movePath('/center/center')">센터 소개</div>
+    <div class="way" onclick="movePath('/center/way')">오시는 길</div>
+</div>
+<div class="mobile-menu">
+    <div id="center" onclick="movePath('/center/center')">
+        <div></div>
+        센터 소개
+    </div>
+    <div id="way" onclick="movePath('/center/way')">
+        <div></div>
+        오시는 길
+    </div>
+</div>
+
+<script th:inline="javascript">
+    const active = [[${active}]];
+    if (active) {
+        $('.' +  active).addClass('active');
+        $('#' +  active).addClass('active');
+    }
+</script>

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

@@ -44,23 +44,23 @@
     </div>
     <div class="mobile-footer">
         <div>
-            <a>
+            <a href="/trafficMap/cctvMap">
                 <div>
-                    <img src="/images/icon/menu_icon1.png" alt="신호 아이콘" width="30" height="30">
+                    <img th:src="${selected eq 'traffic'} ? @{/images/icon/menu_icon1-2.png} : @{/images/icon/menu_icon1.png}" alt="신호 아이콘" width="30" height="30">
                 </div>
                 <span>교통정보</span>
             </a>
         </div>
         <div>
-            <a>
+            <a href="/statistics/traffic01">
                 <div>
-                    <img src="/images/icon/menu_icon2.png" alt="통계 아이콘" width="30" height="30">
+                    <img th:src="${selected eq 'statistics'} ? @{/images/icon/menu_icon2-2.png} : @{/images/icon/menu_icon2.png}" alt="통계 아이콘" width="30" height="30">
                 </div>
                 <span>교통통계</span>
             </a>
         </div>
         <div>
-            <a target="_blank" rel="noopener noreferrer" th:href="@{https://www.pohang.go.kr/bis/busLineSearch.do}">
+            <a target="_blank" rel="noopener noreferrer" th:href="@{https://www.pohang.go.kr/bis/busRoute.do}">
                 <div>
                     <img src="/images/icon/menu_icon3.png" alt="버스 아이콘" width="30" height="30">
                 </div>
@@ -70,7 +70,7 @@
         <div>
             <a>
                 <div>
-                    <img src="/images/icon/menu_icon5.png" alt="센터 아이콘" width="30" height="30">
+                    <img th:src="${selected eq 'center'} ? @{/images/icon/menu_icon5-2.png} : @{/images/icon/menu_icon5.png}" alt="센터 아이콘" width="30" height="30">
                 </div>
                 <span>교통정보센터</span>
             </a>
@@ -82,17 +82,6 @@
     <div class="relate_org">
         <span class="relate_org_close" title="닫기" onclick="closeModal('.modal.relate_modal')"></span>
         <div class="relate_org_content">
-<!--            <div th:onclick="relateOrgClick(0)">포항시청</div>-->
-<!--            <div th:onclick="relateOrgClick(1)">국토교통부</div>-->
-<!--            <div th:onclick="relateOrgClick(2)">경북지방경찰청</div>-->
-<!--            <div th:onclick="relateOrgClick(3)">포항북부소방서</div>-->
-<!--            <div th:onclick="relateOrgClick(4)">포항남부소방서</div>-->
-<!--            <div th:onclick="relateOrgClick(5)">포항시 재난안전대책본부</div>-->
-<!--            <div th:onclick="relateOrgClick(6)">포항시설공단</div>-->
-<!--            <div th:onclick="relateOrgClick(7)">한국도로공사</div>-->
-<!--            <div th:onclick="relateOrgClick(8)">포항공항</div>-->
-<!--            <div th:onclick="relateOrgClick(9)">경북보건환경연구원</div>-->
-<!--            <div th:onclick="relateOrgClick(10)">안전신문고</div>-->
         </div>
     </div>
 </div>

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

@@ -96,10 +96,10 @@
                         <div class="sub-number">
                             <h1>05</h1>
                         </div>
-                        <p>
+                        <p onclick="movePath('/center/center')">
                             센터소개
                         </p>
-                        <p>
+                        <p onclick="movePath('/center/way')">
                             오시는길
                         </p>
                     </div>
@@ -107,6 +107,8 @@
             </div>
         </div>
     </div>
+    <th:block th:if="${selected == 'statistics'}" th:include="/include/statistics-menu"></th:block>
+    <th:block th:if="${selected == 'center'}" th:include="/include/center-menu"></th:block>
 </header>
 
 <script th:inline="javascript">

src/main/resources/templates/include/statistics-menu.html

@@ -4,15 +4,15 @@
     <div class="congest" onclick="movePath('/statistics/congestion')">정체 통계</div>
 </div>
 <div class="mobile-menu">
-    <div id="traffic01">
+    <div id="traffic01" onclick="movePath('/statistics/traffic01')">
         <div></div>
         교통량 통계
     </div>
-    <div id="traffic02">
+    <div id="traffic02" onclick="movePath('/statistics/traffic02')">
         <div></div>
         소통 통계
     </div>
-    <div id="congest">
+    <div id="congest" onclick="movePath('/statistics/congestion')">
         <div></div>
         정체 통계
     </div>

src/main/resources/templates/main/main.html

@@ -61,7 +61,7 @@
                         <div class="incd-content" th:if="${notice == null} or ${notice.size() == 0}">데이터가 없습니다.</div>
                     </div>
                 </div>
-                <div class="center">
+                <div class="center" onclick="movePath('/center/center')">
                     <div>교통정보센터 소개 ></div>
                 </div>
             </div>

src/main/resources/templates/statistics/congest-stat.html

@@ -12,8 +12,52 @@
 </head>
 <body id="body">
 <th:block th:include="/include/header.html"></th:block>
-<th:block th:include="/include/statistics-menu"></th:block>
 <div class="statisticWrap">
+    <div class="container">
+        <div class="search-bar">
+            <div>
+                <div>
+                    <div class="label">구분</div>
+                    <select class="type" name="type">
+                        <option value="1">1개월</option>
+                        <option value="3">3개월</option>
+                        <option value="6">6개월</option>
+                    </select>
+                    <div class="label">요일</div>
+                    <select class="day" name="day">
+                        <option th:each="item : ${list}" th:value="${item.getCode()}" th:text="${item.getName()}"></option>
+                    </select>
+                </div>
+                <div></div>
+            </div>
+            <div class="button congest">
+                <div>조회</div>
+                <img width="20" height="20" src="/images/icon/search.png">
+            </div>
+        </div>
+        <div class="search-content congest">
+            <div class="table-box">
+                <table>
+                    <colgroup>
+                        <col width="25%">
+                    </colgroup>
+                    <thead class="thead">
+                        <th>도로명</th>
+                        <th>진입지점</th>
+                        <th>끝지점</th>
+                        <th>시작</th>
+                        <th>종료</th>
+                        <th>속도</th>
+                    </thead>
+                    <tbody class="table-content">
+                    <tr>
+                        <td><span>조회 된 항목이 없습니다.</span></td>
+                    </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
 </div>
 <th:block th:include="/include/footer.html"></th:block>
 </body>

src/main/resources/templates/statistics/tfvl-stat-amount.html

@@ -12,7 +12,6 @@
 </head>
 <body id="body">
 <th:block th:include="/include/header.html"></th:block>
-<th:block th:include="/include/statistics-menu"></th:block>
 <div class="statisticWrap">
     <div class="container">
         <div class="search-bar">
@@ -36,7 +35,7 @@
                 </div>
             </div>
             <div class="button amount">
-                조회
+                <div>조회</div>
                 <img width="20" height="20" src="/images/icon/search.png">
             </div>
         </div>

src/main/resources/templates/statistics/tfvl-stat-speed.html

@@ -12,7 +12,6 @@
 </head>
 <body id="body">
 <th:block th:include="/include/header.html"></th:block>
-<th:block th:include="/include/statistics-menu"></th:block>
 <div class="statisticWrap">
     <div class="container">
         <div class="search-bar">
@@ -36,7 +35,7 @@
                 </div>
             </div>
             <div class="button comm">
-                조회
+                <div>조회</div>
                 <img width="20" height="20" src="/images/icon/search.png">
             </div>
         </div>