PT_WEB/src/main/webapp/WEB-INF/jsp/egovframework/admin/statusNew.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>

<section class="sub-container">
	<article class="menu-history">
		<ul>
			<li><a href="/admin/noticeList.do" class="home">홈</a></li>
			<li><a href="/admin/status.do">접속통계</a></li>
		</ul>
	</article>
	<article class="contents-wrap">
		<div class="title-box">
			<h2 class="h2-title">접속통계</h2>
			<p class="title-info">평택시 교통정보센터 <span>관리자</span></p>
		</div>
		<!--탭버튼-->
		<div class="tab-btn">
			<p><a href="/admin/noticeList.do">공지사항</a></p>
			<p><a href="/admin/popupList.do">팝업창 관리</a></p>
			<p><a href="/admin/modiAdmin.do">관리자 정보변경</a></p>
			<p><a href="/admin/status.do" class="active">접속통계</a></p>
			<p><a href="/admin/logout.do">로그아웃</a></p>
		</div>
		<!--//탭버튼-->
		<div class="area">
			<div class="cont_body">
				<img alt="loading" src="/images/ajax_loading.gif" id="loading" style="display:none;position:absolute;left:50%;z-index:10"/>
				<div class="adminStatsWrap">
					<div class="searchBox" style="background: none; border-bottom: none; position: inherit;">
						<select title="검색 년도" id="year">
							<c:forEach begin="${thisYear-5}" end="${thisYear}" varStatus="status"><option value="<fmt:formatNumber pattern="00" value="${status.current}"/>" <c:if test="${status.current == thisYear}">selected</c:if>>${status.current}년</option>
							</c:forEach>
						</select>
						<select title="검색 월" id="month">
							<c:forEach begin="1" end="12" varStatus="status"><option value="<fmt:formatNumber pattern="00" value="${status.current}"/>" <c:if test="${status.current == thisMonth}">selected</c:if>><fmt:formatNumber pattern="00" value="${status.current}"/>월</option>
							</c:forEach>
						</select>
						<select title="검색 일" id="day">
							<c:forEach begin="1" end="${lastDate}" varStatus="status"><option value="<fmt:formatNumber pattern="00" value="${status.current}"/>" <c:if test="${status.current == thisDate}">selected</c:if>><fmt:formatNumber pattern="00" value="${status.current}"/>일</option>
							</c:forEach>
						</select>
						<a href="javascript:showStatsList()" class="bt">검색</a>
					</div>
					<div class="statsList">
						<ul class="tabUI f-clear">
							<a href="javascript:showStatsList('hhStats')">
								<li class="tab1 on" >
									일 통계
								</li>
							</a>
							<a href="javascript:showStatsList('ddStats')">
								<li class="tab2">
									월 통계
								</li>
							</a>
							<a href="javascript:showStatsList('mnStats')">
								<li class="tab3">
									년 통계
								</li>
							</a>
						</ul>
						<table
								id="ddStatsTb"
								summary="이 표는 접속통계 게시판이며 웹페이지 각 페이지에 대한 일별, 월별, 년별로 접속통계를 보여주는 표입니다.">
							<caption>접속 통계</caption>
							<colgroup class="colgroup">
								<col width="95"/>
								<col width="40"/>
								<c:forEach begin="1" end="31" varStatus="status">
									<col width="25"/>
								</c:forEach>
							</colgroup>
							<thead>
							<tr>
								<th scope="col">웹페이지/일</th>
								<th scope="col">계</th>
								<c:forEach begin="1" end="31" varStatus="status">
									<th scope="col">${status.current }</th>
								</c:forEach>
							</tr>
							</thead>
							<tbody id="ddStats"></tbody>
						</table>
						
						<table
								id="hhStatsTb"
								summary="이 표는 접속통계 게시판이며 웹페이지 각 페이지에 대한 일별, 월별, 년별로 접속통계를 보여주는 표입니다.">
							<caption>접속 통계</caption>
							<colgroup>
								<col width="95"/>
								<col width="40"/>
								<c:forEach begin="0" end="23" varStatus="status">
									<col width="25"/>
								</c:forEach>
							</colgroup>
							<thead>
							<tr>
								<th scope="col">웹페이지/시</th>
								<th scope="col">계</th>
								<c:forEach begin="0" end="23" varStatus="status">
									<th scope="col">${status.current }</th>
								</c:forEach>
							</tr>
							</thead>
							<tbody id="hhStats"></tbody>
						</table>
						<table
								id="mnStatsTb"
								summary="이 표는 접속통계 게시판이며 웹페이지 각 페이지에 대한 일별, 월별, 년별로 접속통계를 보여주는 표입니다.">
							<caption>접속 통계</caption>
							<colgroup>
								<col width="95"/>
								<col width="40"/>
								<c:forEach begin="1" end="12" varStatus="status">
									<col width="25"/>
								</c:forEach>
							</colgroup>
							<thead>
							<tr>
								<th scope="col">웹페이지/월</th>
								<th scope="col">계</th>
								<c:forEach begin="1" end="12" varStatus="status">
									<th scope="col">${status.current }</th>
								</c:forEach>
							</tr>
							</thead>
							<tbody id="mnStats"></tbody>
						</table>
					</div>

				</div>
				<!--  그래프  -->
				<div>
					<article id="highcharts" style="min-width:310px;height:350px;padding:10px;overflow-y:auto;margin:0 auto"></article>
				</div>
			</div>
		</div>
	</article>
</section>



            <!--//contents-->
<script src="/js/highcharts/highcharts.js"  type="text/javascript"></script>
<script src="/js/highcharts/exporting.js"   type="text/javascript"></script>
<script type="text/javascript">
const tab1 = $('.tab1');
const tab2 = $('.tab2');
const tab3 = $('.tab3');
showStatsList('hhStats');
var _DateType = null;

function showStatsList(type) {
	if (typeof type == 'undefined') {
		if(_DateType == null) type = 'hhStats'; 
		else type = _DateType;
	}
	
	var date = $('#year').val();
	
	if(type == 'mnStats') {
		tab1.removeClass('on');
		tab2.removeClass('on');
		tab3.addClass('on');
		$('#ddStatsTb').hide();
		$('#hhStatsTb').hide();
		$('#mnStatsTb').show();
		$('#year').show();
		$('#month').hide();
		$('#day').hide();
		date = $('#year').val();
	}
	else if(type == 'ddStats') {
		tab1.removeClass('on');
		tab2.addClass('on');
		tab3.removeClass('on');
		$('#mnStatsTb').hide();
		$('#hhStatsTb').hide();
		$('#ddStatsTb').show();
		$('#year').show();
		$('#month').show();
		$('#day').hide();
		date += $('#month').val();
	}
	else if(type == 'hhStats') {
		tab1.addClass('on');
		tab2.removeClass('on');
		tab3.removeClass('on');
		$('#mnStatsTb').hide();
		$('#ddStatsTb').hide();
		$('#hhStatsTb').show();
		$('#year').show();
		$('#month').show();
		$('#day').show();
		date += $('#month').val() + $('#day').val();
	}
	
	_DateType = type;
	
	$.ajax({
		type:"POST",
		url:'/admin/getStatsList.do',
		//data: 'dateType='+_DateType+'&date='+date,
		data: {"dateType":_DateType, "date": date},
		success: function(data) {
			var str = '';
			if (data.length > 0) {
				//el.title : 메인페이지 , el.total_connCnt : 총접속수 , el.statsInArr : 일 ,월,년  각각 통계수
				var title;
				var statsHour = ['00','01','02','03','04','05','06','07','08','09','10','11','12','13','14','15','16','17','18','19','20','21','22','23'];
				if(_DateType=='ddStats'){
					statsHour = ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30','31'];
				}else if(_DateType == 'mnStats'){
					statsHour = ['1','2','3','4','5','6','7','8','9','10','11','12'];
				}
				var series = [];
				
				data.forEach(function(el) {
					title = el.title;
					str += '<tr>';
					str += '<td style="text-align:center">'+el.title+'</td>';
					str += '<td style="text-align:center">'+el.total_connCnt+'</td>';
					el.statsInArr.forEach(function(cnt) {
						str += '<td style="text-align:center">'+cnt+'</td>';
						
					});
					series.push({name: el.title , data:el.statsInArr});
					str += '</tr>';
					
					
				});
				var info='시간';
				if(_DateType=='ddStats'){
					info = '일';
				}else if(_DateType == 'mnStats'){
					info = '월';
				}
				$('#'+type).empty().html(str);
				$('#highcharts').show();
				drawCharts('홈페이지 접속통계 그래프',
							statsHour,
							info,
							'접속통계',
							series
						  );
				
			}
			else {
				$('#highcharts').hide();
				str += '<tr><td colspan="31" style="text-align:center">데이터가 없습니다.</td></tr>';
				$('#'+type).empty().html(str);
			}
		}, beforeSend: function () {
            $('#loading').show();
        },
        complete: function () {
            $('#loading').hide();
        },
		error: function(e) {
			alert('getDayStats ajax error');
		}
	});
}

function drawCharts(title, xAxis, xTitle, yTitle, series) {
    Highcharts.chart('highcharts', {
        chart: {
            type: 'line'
        },
        title: {
            text: title
        },
        xAxis: {
            categories: xAxis,
            title: {
                text: xTitle
            }
        },
        yAxis: {
            title: {
                text: yTitle
            }
        },
        plotOptions: {
            line: {
                dataLabels: {
                    enabled: true
                },
                enableMouseTracking: false
            }
        },
        series: series
    });
}

</script>