|
|
@@ -19,13 +19,32 @@
|
|
|
<h2 class="admin-header">접속자 통계</h2>
|
|
|
<div class="admin-content">
|
|
|
<div class="title">
|
|
|
- <select>
|
|
|
- <option value="dd" selected>일별</option>
|
|
|
- <option value="yy">최근 6개월</option>
|
|
|
- <option value="mn">월별</option>
|
|
|
- <option value="yy">년별</option>
|
|
|
+ <select name="type" title="구분" class="type">
|
|
|
+ <option value="date" selected>일별</option>
|
|
|
+ <option value="6">최근 6개월</option>
|
|
|
+ <option value="_month">월별</option>
|
|
|
+ <option value="_year">년별</option>
|
|
|
</select>
|
|
|
- <input id="date" type="text" placeholder="날짜를 선택해주세요.">
|
|
|
+ <select name="year_from" title="연별 시작년" class="_year from_year">
|
|
|
+ <option th:each="year : ${yearList}" th:unless="${year.rate} == ${#calendars.format(#calendars.createNow(), 'yyyy')}" th:value="${year.rate}" th:title="${year.rate + '년'}" th:text="${year.rate + '년'}"></option>
|
|
|
+ <option th:each="year : ${yearList}" th:if="${year.rate} == ${#calendars.format(#calendars.createNow(), 'yyyy')}"
|
|
|
+ th:value="${year.rate}" th:title="${year.rate + '년'}" th:text="${year.rate + '년'}" selected></option>
|
|
|
+ </select>
|
|
|
+ <select name="month" title="월별 시작월" class="_month from_month">
|
|
|
+ <option th:each="num : ${#numbers.sequence(1, month)}" th:unless="${month} == ${num}" th:value="${num}" th:title="${num + '월'}" th:text="${num + '월'}"></option>
|
|
|
+ <option th:each="num : ${#numbers.sequence(1, month)}" th:if="${month} == ${num}" selected th:value="${num}" th:title="${num + '월'}" th:text="${num + '월'}"></option>
|
|
|
+ </select>
|
|
|
+ <div class="wave"> ~ </div>
|
|
|
+ <select name="year_to" title="연별 종료년" class="_year to_year">
|
|
|
+ <option th:each="year : ${yearList}" th:unless="${year.rate} == ${#calendars.format(#calendars.createNow(), 'yyyy')}" th:value="${year.rate}" th:title="${year.rate + '년'}" th:text="${year.rate + '년'}"></option>
|
|
|
+ <option th:each="year : ${yearList}" th:if="${year.rate} == ${#calendars.format(#calendars.createNow(), 'yyyy')}"
|
|
|
+ th:value="${year.rate}" th:title="${year.rate + '년'}" th:text="${year.rate + '년'}" selected></option>
|
|
|
+ </select>
|
|
|
+ <select name="month" title="월별 종료월" class="_month to_month">
|
|
|
+ <option th:each="num : ${#numbers.sequence(1, month)}" th:unless="${month} == ${num}" th:value="${num}" th:title="${num + '월'}" th:text="${num + '월'}"></option>
|
|
|
+ <option th:each="num : ${#numbers.sequence(1, month)}" th:if="${month} == ${num}" selected th:value="${num}" th:title="${num + '월'}" th:text="${num + '월'}"></option>
|
|
|
+ </select>
|
|
|
+ <input id="date" class="date on" type="text" placeholder="날짜를 선택해주세요.">
|
|
|
<label for="date" style="display: none"></label>
|
|
|
<div th:class="button" onclick="searchStat()">조회</div>
|
|
|
<div th:class="excel-button" th:onclick="download()">
|
|
|
@@ -54,7 +73,10 @@
|
|
|
</body>
|
|
|
</html>
|
|
|
|
|
|
-<script>
|
|
|
+<script th:inline="javascript">
|
|
|
+
|
|
|
+ const yearList = [[${yearList}]];
|
|
|
+
|
|
|
const $date = $('#date');
|
|
|
const $list = $('.list-content');
|
|
|
let startDate = new Date(new Date().setDate(new Date().getDate() - 9));
|
|
|
@@ -79,34 +101,65 @@
|
|
|
});
|
|
|
|
|
|
function getConnStatistics(fromDt, toDt) {
|
|
|
- let period = Number(getDateDiff(toDt, fromDt));
|
|
|
+ const $type = $('.type');
|
|
|
+ const typeVal = $type.val()
|
|
|
+ const $fromYear = $('.from_year');
|
|
|
+ const $toYear = $('.to_year');
|
|
|
+ const $fromMonth = $('.from_month');
|
|
|
+ const $toMonth = $('.to_month');
|
|
|
let type = "";
|
|
|
let typeStr = "일";
|
|
|
- let fromDate = dateFormatter(fromDt);
|
|
|
- let toDate = dateFormatter(toDt);
|
|
|
- if (!isNaN(period)) {
|
|
|
- if (period > 30) {
|
|
|
- type = 'week';
|
|
|
- typeStr = "주간";
|
|
|
- }
|
|
|
- if (period > 61) {
|
|
|
- type = 'month';
|
|
|
- typeStr = "월";
|
|
|
- fromDate = fromDate.substring(0,6);
|
|
|
- toDate = toDate.substring(0,6);
|
|
|
- }
|
|
|
+ let fromDate = null;
|
|
|
+ let toDate = null;
|
|
|
+
|
|
|
+ if (typeVal === 'date' || typeVal === '6') {
|
|
|
+ let period = Number(getDateDiff(toDt, fromDt));
|
|
|
|
|
|
- if (period > 365) {
|
|
|
- type = 'year';
|
|
|
- typeStr = "년도";
|
|
|
- fromDate = fromDate.substring(0, 4);
|
|
|
- toDate = toDate.substring(0, 4);
|
|
|
+ fromDate = dateFormatter(fromDt);
|
|
|
+ toDate = dateFormatter(toDt);
|
|
|
+ if (!isNaN(period)) {
|
|
|
+ if (period > 30) {
|
|
|
+ type = 'week';
|
|
|
+ typeStr = "주간";
|
|
|
+ }
|
|
|
+ if (period > 61) {
|
|
|
+ type = 'month';
|
|
|
+ typeStr = "월";
|
|
|
+ fromDate = fromDate.substring(0, 6);
|
|
|
+ toDate = toDate.substring(0, 6);
|
|
|
+ }
|
|
|
+
|
|
|
+ if (period > 365) {
|
|
|
+ type = 'year';
|
|
|
+ typeStr = "년도";
|
|
|
+ fromDate = fromDate.substring(0, 4);
|
|
|
+ toDate = toDate.substring(0, 4);
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
+ else if (typeVal === '_month') {
|
|
|
+ let from = $fromMonth.val();
|
|
|
+ let to = $toMonth.val();
|
|
|
+ if (from < 10) from = "0" + from;
|
|
|
+ if (to < 10) to = "0" + to;
|
|
|
+ type = 'month';
|
|
|
+ typeStr = "월";
|
|
|
+ fromDate = $fromYear.val() + from;
|
|
|
+ toDate = $toYear.val() + to;
|
|
|
+ }
|
|
|
+ else if (typeVal === '_year') {
|
|
|
+ type = 'year';
|
|
|
+ typeStr = "년도";
|
|
|
+ fromDate = $fromYear.val();
|
|
|
+ toDate = $toYear.val();
|
|
|
+ }
|
|
|
|
|
|
startDate = fromDate;
|
|
|
endDate = toDate;
|
|
|
|
|
|
+ if (fromDate > toDate) {
|
|
|
+ return alertError("검색 기간을 확인해주세요.", "접속자 통계 조회", null);
|
|
|
+ }
|
|
|
const param = {
|
|
|
fromDate : fromDate,
|
|
|
toDate : toDate,
|
|
|
@@ -130,7 +183,8 @@
|
|
|
data.push(obj.conn_cnt);
|
|
|
// $list.append($(`<div><div>${obj.conn_dt}</div><div>${obj.conn_cnt}</div></div>`))
|
|
|
$list.append($(`<tr><td>${obj.conn_dt}</td><td>${obj.conn_cnt}</td></tr>`))
|
|
|
- })
|
|
|
+ });
|
|
|
+
|
|
|
Highcharts.chart('chart', {
|
|
|
chart: {
|
|
|
type: 'column'
|
|
|
@@ -216,4 +270,76 @@
|
|
|
link.remove();
|
|
|
}
|
|
|
|
|
|
+ $('.type').on('change', function() {
|
|
|
+ const value = $(this).val();
|
|
|
+ const wave = $('.wave');
|
|
|
+ let arr = ['date', '_month', '_year'];
|
|
|
+ for (let className of arr) {
|
|
|
+ const el = $('.' + className);
|
|
|
+ if (el.hasClass('on')) {
|
|
|
+ el.removeClass('on');
|
|
|
+ }
|
|
|
+ }
|
|
|
+ wave.removeClass('on');
|
|
|
+
|
|
|
+ if (value === '6') {
|
|
|
+ const sixMonthAgo = new Date(new Date().setMonth(new Date().getMonth() - 5));
|
|
|
+ const beforeDate = getDateFormat(sixMonthAgo).substr(0, 8) + '01';
|
|
|
+ const afterDate = getDateFormat(new Date());
|
|
|
+ $date.data('daterangepicker').setStartDate(beforeDate);
|
|
|
+ $date.data('daterangepicker').setEndDate(afterDate);
|
|
|
+ $date.addClass('on');
|
|
|
+ $date.attr('readonly', true);
|
|
|
+ }
|
|
|
+ else {
|
|
|
+
|
|
|
+ const year = $('._year');
|
|
|
+
|
|
|
+ let dateVal;
|
|
|
+ switch (value) {
|
|
|
+ case 'date' :
|
|
|
+ const start = getDateFormat(new Date(new Date().setDate(new Date().getDate() - 9)));
|
|
|
+ const end = getDateFormat(new Date());
|
|
|
+ $date.data('daterangepicker').setStartDate(start);
|
|
|
+ $date.data('daterangepicker').setEndDate(end);
|
|
|
+ $date.attr('readonly', false);
|
|
|
+ //dateVal = start + ' ~ ' + end;
|
|
|
+ break;
|
|
|
+ case '_month' :
|
|
|
+ year.addClass('on');
|
|
|
+ wave.addClass('on');
|
|
|
+ year.val(new Date().getFullYear());
|
|
|
+ dateVal = new Date().getMonth() + 1;
|
|
|
+ break;
|
|
|
+ case '_year' :
|
|
|
+ dateVal = new Date().getFullYear();
|
|
|
+ wave.addClass('on');
|
|
|
+ break;
|
|
|
+ }
|
|
|
+
|
|
|
+ const selected = $('.' + value);
|
|
|
+ selected.addClass('on');
|
|
|
+ if (dateVal) {
|
|
|
+ selected.val(dateVal);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ $('.year_from').on('change', function() {
|
|
|
+ if ($(this).val() === new Date().getFullYear()) {
|
|
|
+
|
|
|
+ }
|
|
|
+ else {
|
|
|
+
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ function getDateFormat(date) {
|
|
|
+ const year = date.getFullYear();
|
|
|
+ let month = date.getMonth() + 1;
|
|
|
+ let day = date.getDate();
|
|
|
+ if (month < 10) month = '0' + month;
|
|
|
+ if (day < 10) day = '0' + day;
|
|
|
+ return year + '-' + month + '-' + day;
|
|
|
+ }
|
|
|
</script>
|
