djb-eapim/eapim-admin
1
0
Fork 0
Code Issues Pull Requests Actions 4 Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
Rinjae
2025-09-05 17:16:26 +09:00
commit c54ef1903f
4947 changed files with 817291 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
WebContent/jsp/onl/apim/portalstatistics/portalStatisticsApiTableMan.jsp
+269
View File
@@ -0,0 +1,269 @@
<%@ page language="java" contentType="text/html; charset=utf-8"%>
<%@ page import="java.io.*"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@ include file="/jsp/common/include/localemessage.jsp" %>
<%
response.setHeader("Pragma", "No-cache");
response.setHeader("Cache-Control", "no-cache");
response.setHeader("Expires", "0");
%>
<!DOCTYPE html>
<html>
<head>
<title>API 통계 목록</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<jsp:include page="/jsp/common/include/css.jsp"/>
<jsp:include page="/jsp/common/include/script.jsp"/>
<jsp:include page="/jsp/common/include/portal.jsp"/>
<script language="javascript">
var url = '<c:url value="/onl/apim/portalstatistics/portalStatisticsApiTableMan.json" />';
var grid;
$(document).ready(function() {
// Datepicker 초기화
$("input[name=startDate], input[name=endDate]").datepicker({
format: "yyyy-mm-dd",
autoclose: true,
todayHighlight: true,
language: "ko"
});
function setActiveDateRangeButton() {
var startDate = $("input[name=startDate]").datepicker('getDate');
var endDate = $("input[name=endDate]").datepicker('getDate');
var diffDays = Math.floor((endDate - startDate) / (1000 * 60 * 60 * 24));
$('.btn-date-range').removeClass('active');
if (diffDays === 30) {
$('#btn_month').addClass('active');
} else if (diffDays === 7) {
$('#btn_week').addClass('active');
} else if (diffDays === 0) {
$('#btn_today').addClass('active');
}
}
function setDateRange(days) {
var now = new Date();
var endDate = now;
var startDate = new Date(now.getFullYear(), now.getMonth(), now.getDate() - days);
$("input[name=startDate]").datepicker('setDate', startDate);
$("input[name=endDate]").datepicker('setDate', endDate);
setActiveDateRangeButton();
}
$("#btn_month").click(function() {
setDateRange(30);
loadData();
});
$("#btn_week").click(function() {
setDateRange(7);
loadData();
});
$("#btn_today").click(function() {
setDateRange(0);
loadData();
});
setDateRange(0);
function initGrid(data) {
if (grid) {
grid.destroy();
}
var columns = [
{ id: 'apiName', name: 'API 명', sort: true,
formatter: (cell) => gridjs.html('<b>'+cell+'</b>')},
{
id: 'totalRequests',
name: '총 요청 수',
sort: true,
formatter: (cell) => gridjs.html('<span style="color: #0a53be;">'+cell+'</span>')
},
{
id: 'totalFailures',
name: '오류 건수',
sort: true,
formatter: (cell) => gridjs.html('<span style="color: #dc3545;">'+cell+'</span>')
},
{
id: 'successRate',
name: '성공 률 (%)',
sort: true
}
];
grid = new gridjs.Grid({
columns: columns,
data: data,
sort: true,
pagination: {
limit: 10
},
search: true,
style: {
table: {
border: '3px solid #ccc'
},
th: {
'background-color': 'rgba(0, 0, 0, 0.1)',
color: '#000',
'border-bottom': '3px solid #ccc',
'text-align': 'center'
},
td: {
'text-align': 'center'
}
}
}).render(document.getElementById('wrapper'));
addExportButton(grid);
}
function updateSummary(summary) {
$("#totalApis").text(summary.totalApis);
$("#totalRequests").text(summary.totalRequests.toLocaleString());
$("#totalFailures").text(summary.totalFailures.toLocaleString());
$("#overallSuccessRate").text(summary.overallSuccessRate.toFixed(2));
}
function loadData() {
var startDate = $("input[name=startDate]").val().replace(/-/g, '');
var endDate = $("input[name=endDate]").val().replace(/-/g, '');
$.ajax({
url: url,
type: "POST",
data: {
cmd: "LIST",
startDate: startDate,
endDate: endDate
},
success: function(response) {
updateSummary(response.summary);
initGrid(response.apiStats);
},
error: function(xhr, status, error) {
console.error("Error fetching data:", error);
alert("데이터를 불러오는 중 오류가 발생했습니다.");
}
});
}
$("#btn_search").click(function (){
setActiveDateRangeButton();
loadData();
});
loadData(); // 초기 데이터 로드
});
</script>
</head>
<body>
<div class="right_box">
<div class="content_top">
<ul class="path">
<li><a href="#">${rmsMenuPath}</a></li>
</ul>
</div>
<div class="content_middle" id="content_middle">
<h2 class="mb-4">API 별 통계 목록</h2>
<div class="row mb-4">
<div class="col-md-3 mb-3">
<div class="card text-center h-100">
<div class="card-body">
<i class="bi bi-hdd-stack card-icon text-primary"></i>
<h5 class="card-title">총 API 수</h5>
<p class="card-text">
<span id="totalApis">0</span> 개
</p>
</div>
</div>
</div>
<div class="col-md-3 mb-3">
<div class="card text-center h-100">
<div class="card-body">
<i class="bi bi-arrow-repeat card-icon text-success"></i>
<h5 class="card-title">총 요청 수</h5>
<p class="card-text">
<span id="totalRequests">0</span>
</p>
</div>
</div>
</div>
<div class="col-md-3 mb-3">
<div class="card text-center h-100">
<div class="card-body">
<i class="bi bi-exclamation-triangle card-icon text-danger"></i>
<h5 class="card-title">총 실패 수</h5>
<p class="card-text">
<span id="totalFailures">0</span>
</p>
</div>
</div>
</div>
<div class="col-md-3 mb-3">
<div class="card text-center h-100">
<div class="card-body">
<i class="bi bi-graph-up card-icon text-info"></i>
<h5 class="card-title">전체 성공률</h5>
<p class="card-text">
<span id="overallSuccessRate">0</span>%
</p>
</div>
</div>
</div>
</div>
<div class="search-panel mb-4">
<h5 class="mb-3">검색 조건</h5>
<div class="row g-3 align-items-center">
<div class="col-md-3">
<div class="input-group">
<span class="input-group-text"><i class="bi bi-calendar"></i></span>
<input type="text" name="startDate" class="form-control" data-required data-warning="시작 날짜를 입력하여 주십시오." placeholder="시작 날짜"/>
</div>
</div>
<div class="col-auto">
<span>~</span>
</div>
<div class="col-md-3">
<div class="input-group">
<span class="input-group-text"><i class="bi bi-calendar"></i></span>
<input type="text" name="endDate" class="form-control" data-required data-warning="종료 날짜를 입력하여 주십시오." placeholder="종료 날짜"/>
</div>
</div>
<div class="col-auto">
<button type="button" id="btn_month" class="btn btn-outline-secondary btn-date-range">
<i class="bi bi-calendar-month"></i> 한달
</button>
<button type="button" id="btn_week" class="btn btn-outline-secondary btn-date-range">
<i class="bi bi-calendar-week"></i> 한주
</button>
<button type="button" id="btn_today" class="btn btn-outline-secondary btn-date-range">
<i class="bi bi-calendar-day"></i> 금일
</button>
</div>
<div class="col-auto">
<button type="button" id="btn_search" class="btn btn-primary">
<i class="bi bi-search"></i> 조회
</button>
</div>
</div>
</div>
<div id="wrapper"></div>
</div>
</div>
</body>
</html>
WebContent/jsp/onl/apim/portalstatistics/portalStatisticsAppTableMan.jsp
+262
View File
@@ -0,0 +1,262 @@
<%@ page language="java" contentType="text/html; charset=utf-8"%>
<%@ page import="java.io.*"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@ include file="/jsp/common/include/localemessage.jsp" %>
<%
response.setHeader("Pragma", "No-cache");
response.setHeader("Cache-Control", "no-cache");
response.setHeader("Expires", "0");
%>
<!DOCTYPE html>
<html>
<head>
<title>앱별 통계 목록</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<jsp:include page="/jsp/common/include/css.jsp"/>
<jsp:include page="/jsp/common/include/script.jsp"/>
<jsp:include page="/jsp/common/include/portal.jsp"/>
<script language="javascript">
var url = '<c:url value="/onl/apim/portalstatistics/portalStatisticsAppTableMan.json" />';
var grid;
$(document).ready(function() {
// Datepicker 초기화
$("input[name=startDate], input[name=endDate]").datepicker({
format: "yyyy-mm-dd",
autoclose: true,
todayHighlight: true,
language: "ko"
});
function setActiveDateRangeButton() {
var startDate = $("input[name=startDate]").datepicker('getDate');
var endDate = $("input[name=endDate]").datepicker('getDate');
var diffDays = Math.floor((endDate - startDate) / (1000 * 60 * 60 * 24));
$('.btn-date-range').removeClass('active');
if (diffDays === 30) {
$('#btn_month').addClass('active');
} else if (diffDays === 7) {
$('#btn_week').addClass('active');
} else if (diffDays === 0) {
$('#btn_today').addClass('active');
}
}
function setDateRange(days) {
var now = new Date();
var endDate = now;
var startDate = new Date(now.getFullYear(), now.getMonth(), now.getDate() - days);
$("input[name=startDate]").datepicker('setDate', startDate);
$("input[name=endDate]").datepicker('setDate', endDate);
setActiveDateRangeButton();
}
$("#btn_month").click(function() {
setDateRange(30);
loadData();
});
$("#btn_week").click(function() {
setDateRange(7);
loadData();
});
$("#btn_today").click(function() {
setDateRange(0);
loadData();
});
setDateRange(0);
function initGrid(data) {
if (grid) {
grid.destroy();
}
var columns = [
{ id: 'appName', name: 'APP 명', sort: true,
formatter: (cell) => gridjs.html('<b>'+cell+'</b>')
},
{ id: 'totalRequests', name: '총 요청 수', sort: true,
formatter: (cell) => gridjs.html('<span style="color: #0a53be;">'+cell+'</span>')
},
{ id: 'totalFailures', name: '오류 건수', sort: true,
formatter: (cell) => gridjs.html('<span style="color: #dc3545;">'+cell+'</span>')
},
{ id: 'successRate', name: '성공 률 (%)', sort: true,
formatter: (cell) => gridjs.html('<span style="color: #198754;">'+cell+'%</span>')
}
];
grid = new gridjs.Grid({
columns: columns,
data: data,
sort: true,
pagination: {
limit: 10
},
search: true,
style: {
table: {
border: '3px solid #ccc'
},
th: {
'background-color': 'rgba(0, 0, 0, 0.1)',
color: '#000',
'border-bottom': '3px solid #ccc',
'text-align': 'center'
},
td: {
'text-align': 'center'
}
}
}).render(document.getElementById('wrapper'));
addExportButton(grid);
}
function updateSummary(summary) {
$("#totalApps").text(summary.totalApps);
$("#totalRequests").text(summary.totalRequests.toLocaleString());
$("#totalFailures").text(summary.totalFailures.toLocaleString());
$("#overallSuccessRate").text(summary.overallSuccessRate.toFixed(2));
}
function loadData() {
var startDate = $("input[name=startDate]").val().replace(/-/g, '');
var endDate = $("input[name=endDate]").val().replace(/-/g, '');
$.ajax({
url: url,
type: "POST",
data: {
cmd: "LIST",
startDate: startDate,
endDate: endDate
},
success: function(response) {
updateSummary(response.summary);
initGrid(response.appStats);
},
error: function(xhr, status, error) {
console.error("Error fetching data:", error);
alert("데이터를 불러오는 중 오류가 발생했습니다.");
}
});
}
$("#btn_search").click(function (){
setActiveDateRangeButton();
loadData();
});
loadData(); // 초기 데이터 로드
});
</script>
</head>
<body>
<div class="right_box">
<div class="content_top">
<ul class="path">
<li><a href="#">${rmsMenuPath}</a></li>
</ul>
</div>
<div class="content_middle" id="content_middle">
<h2 class="mb-4">APP 별 통계 목록</h2>
<div class="row mb-4">
<div class="col-md-3 mb-3">
<div class="card text-center h-100">
<div class="card-body">
<i class="bi bi-window-stack card-icon text-primary"></i>
<h5 class="card-title">총 앱 수</h5>
<p class="card-text">
<span id="totalApps">0</span> 개
</p>
</div>
</div>
</div>
<div class="col-md-3 mb-3">
<div class="card text-center h-100">
<div class="card-body">
<i class="bi bi-arrow-repeat card-icon text-success"></i>
<h5 class="card-title">총 요청 수</h5>
<p class="card-text">
<span id="totalRequests">0</span>
</p>
</div>
</div>
</div>
<div class="col-md-3 mb-3">
<div class="card text-center h-100">
<div class="card-body">
<i class="bi bi-exclamation-triangle card-icon text-danger"></i>
<h5 class="card-title">총 실패 수</h5>
<p class="card-text">
<span id="totalFailures">0</span>
</p>
</div>
</div>
</div>
<div class="col-md-3 mb-3">
<div class="card text-center h-100">
<div class="card-body">
<i class="bi bi-graph-up card-icon text-info"></i>
<h5 class="card-title">전체 성공률</h5>
<p class="card-text">
<span id="overallSuccessRate">0</span>%
</p>
</div>
</div>
</div>
</div>
<div class="search-panel mb-4">
<h5 class="mb-3">검색 조건</h5>
<div class="row g-3 align-items-center">
<div class="col-md-3">
<div class="input-group">
<span class="input-group-text"><i class="bi bi-calendar"></i></span>
<input type="text" name="startDate" class="form-control" data-required data-warning="시작 날짜를 입력하여 주십시오." placeholder="시작 날짜"/>
</div>
</div>
<div class="col-auto">
<span>~</span>
</div>
<div class="col-md-3">
<div class="input-group">
<span class="input-group-text"><i class="bi bi-calendar"></i></span>
<input type="text" name="endDate" class="form-control" data-required data-warning="종료 날짜를 입력하여 주십시오." placeholder="종료 날짜"/>
</div>
</div>
<div class="col-auto">
<button type="button" id="btn_month" class="btn btn-outline-secondary btn-date-range">
<i class="bi bi-calendar-month"></i> 한달
</button>
<button type="button" id="btn_week" class="btn btn-outline-secondary btn-date-range">
<i class="bi bi-calendar-week"></i> 한주
</button>
<button type="button" id="btn_today" class="btn btn-outline-secondary btn-date-range">
<i class="bi bi-calendar-day"></i> 금일
</button>
</div>
<div class="col-auto">
<button type="button" id="btn_search" class="btn btn-primary">
<i class="bi bi-search"></i> 조회
</button>
</div>
</div>
</div>
<div id="wrapper"></div>
</div>
</div>
</body>
</html>
WebContent/jsp/onl/apim/portalstatistics/portalStatisticsDailyApiTableMan.jsp
+288
View File
@@ -0,0 +1,288 @@
<%@ page language="java" contentType="text/html; charset=utf-8"%>
<%@ page import="java.io.*"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@ include file="/jsp/common/include/localemessage.jsp" %>
<%
response.setHeader("Pragma", "No-cache");
response.setHeader("Cache-Control", "no-cache");
response.setHeader("Expires", "0");
%>
<!DOCTYPE html>
<html>
<head>
<title>일별 API 통계 목록</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<jsp:include page="/jsp/common/include/css.jsp"/>
<jsp:include page="/jsp/common/include/script.jsp"/>
<jsp:include page="/jsp/common/include/portal.jsp"/>
<script language="javascript">
var url = '<c:url value="/onl/apim/portalstatistics/portalStatisticsDailyApiTableMan.json" />';
var url_view = '<c:url value="/onl/apim/portalstatistics/portalStatisticsDailyApiTableMan.view" />';
var grid;
$(document).ready(function() {
// Datepicker 초기화
$("input[name=startDate], input[name=endDate]").datepicker({
format: "yyyy-mm-dd",
autoclose: true,
todayHighlight: true,
language: "ko"
});
function setActiveDateRangeButton() {
var startDate = $("input[name=startDate]").datepicker('getDate');
var endDate = $("input[name=endDate]").datepicker('getDate');
var diffDays = Math.floor((endDate - startDate) / (1000 * 60 * 60 * 24));
$('.btn-date-range').removeClass('active');
if (diffDays === 30) {
$('#btn_month').addClass('active');
} else if (diffDays === 7) {
$('#btn_week').addClass('active');
}
}
function setDateRange(days) {
var now = new Date();
var endDate = now;
var startDate = new Date(now.getFullYear(), now.getMonth(), now.getDate() - days);
$("input[name=startDate]").datepicker('setDate', startDate);
$("input[name=endDate]").datepicker('setDate', endDate);
setActiveDateRangeButton();
}
$("#btn_month").click(function() {
setDateRange(30);
loadData();
});
$("#btn_week").click(function() {
setDateRange(7);
loadData();
});
setDateRange(30);
function initGrid(data) {
if (grid) {
grid.destroy();
}
var columns = [
{ id: 'apiName', name: 'API 명', sort: true,
formatter: (cell) => gridjs.html('<b>'+cell+'</b>'),
width: '150px' // Set a fixed width for the name column
}
];
var dates = Object.keys(data[0]).filter(key => key !== 'apiName');
dates.forEach(date => {
columns.push({
id: date,
name: date,
sort: true,
formatter: (cell) => {
if (cell === undefined || cell === null) {
return '0';
}
return gridjs.html('<span style="color: #0a53be;">'+cell.toLocaleString()+'</span>');
},
width: '100px' // Set a fixed minimum width
});
});
grid = new gridjs.Grid({
columns: columns,
data: data,
sort: true,
pagination: {
limit: 10
},
search: true,
style: {
table: {
border: '3px solid #ccc'
},
th: {
'background-color': 'rgba(0, 0, 0, 0.1)',
color: '#000',
'border-bottom': '3px solid #ccc',
'text-align': 'center'
},
td: {
'text-align': 'center'
}
}
}).render(document.getElementById('wrapper'));
addExportButton(grid);
}
function updateSummary(summary) {
$("#totalApis").text(summary.totalApis);
$("#monthlyRequests").text(summary.monthlyRequests.toLocaleString());
$("#weeklyRequests").text(summary.weeklyRequests.toLocaleString());
$("#dailyRequests").text(summary.dailyRequests.toLocaleString());
$("#topApis").html(summary.topApis.join("<br>"));
}
function loadData() {
var startDate = $("input[name=startDate]").val().replace(/-/g, '');
var endDate = $("input[name=endDate]").val().replace(/-/g, '');
var appId = $("select[name=appSelect]").val();
$.ajax({
url: url,
type: "POST",
data: {
cmd: "LIST",
startDate: startDate,
endDate: endDate,
appId: appId === "all" ? null : appId
},
success: function(response) {
updateSummary(response.summary);
initGrid(response.dailyStats);
},
error: function(xhr, status, error) {
console.error("Error fetching data:", error);
alert("데이터를 불러오는 중 오류가 발생했습니다.");
}
});
}
$("#btn_search").click(function (){
setActiveDateRangeButton();
loadData();
});
// 초기 콤보박스 데이터 로드
$.ajax({
url: url,
type: "POST",
data: { cmd: "LIST_INIT_COMBO" },
success: function(response) {
var appSelect = $("select[name=appSelect]");
appSelect.empty();
appSelect.append($("<option>").val("all").text("전체"));
response.appList.forEach(function(app) {
appSelect.append($("<option>").val(app.appId).text(app.appName));
});
appSelect.select2({
theme: 'bootstrap'
});
},
error: function(xhr, status, error) {
console.error("Error loading combo data:", error);
alert("콤보박스 데이터를 불러오는 중 오류가 발생했습니다.");
}
});
loadData(); // 초기 데이터 로드
});
</script>
</head>
<body>
<div class="right_box">
<div class="content_top">
<ul class="path">
<li><a href="#">${rmsMenuPath}</a></li>
</ul>
</div>
<div class="content_middle" id="content_middle">
<h2 class="mb-4">일자 별 API 통계 목록</h2>
<div class="row mb-4">
<div class="col-md-4 mb-3">
<div class="card text-center h-100">
<div class="card-body">
<i class="bi bi-hdd-stack card-icon text-primary"></i>
<h5 class="card-title">이용 API</h5>
<p class="card-text">
<span id="totalApis">0</span> 건
</p>
</div>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card text-center h-100">
<div class="card-body">
<i class="bi bi-graph-up card-icon text-success"></i>
<h5 class="card-title">API 사용량</h5>
<div class="row">
<div class="col-sm-4">
<p class="card-text"><span id="monthlyRequests">0</span></p>
<p class="text-muted">월간</p>
</div>
<div class="col-sm-4">
<p class="card-text"><span id="weeklyRequests">0</span></p>
<p class="text-muted">주간</p>
</div>
<div class="col-sm-4">
<p class="card-text"><span id="dailyRequests">0</span></p>
<p class="text-muted">일간</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card text-center h-100">
<div class="card-body">
<i class="bi bi-star card-icon text-warning"></i>
<h5 class="card-title">주 사용 API</h5>
<p class="text-muted" id="topApis"></p>
</div>
</div>
</div>
</div>
<div class="search-panel mb-4">
<h5 class="mb-3">검색 조건</h5>
<div class="row g-3 align-items-center">
<div class="col-md-3">
<select name="appSelect" class="form-select">
<option value="all">전체</option>
</select>
</div>
<div class="col-md-3">
<div class="input-group">
<span class="input-group-text"><i class="bi bi-calendar"></i></span>
<input type="text" name="startDate" class="form-control" data-required data-warning="시작 날짜를 입력하여 주십시오." placeholder="시작 날짜"/>
</div>
</div>
<div class="col-auto">
<span>~</span>
</div>
<div class="col-md-3">
<div class="input-group">
<span class="input-group-text"><i class="bi bi-calendar"></i></span>
<input type="text" name="endDate" class="form-control" data-required data-warning="종료 날짜를 입력하여 주십시오." placeholder="종료 날짜"/>
</div>
</div>
<div class="col-auto">
<button type="button" id="btn_month" class="btn btn-outline-secondary btn-date-range">
<i class="bi bi-calendar-month"></i> 한달
</button>
<button type="button" id="btn_week" class="btn btn-outline-secondary btn-date-range">
<i class="bi bi-calendar-week"></i> 한주
</button>
</div>
<div class="col-auto">
<button type="button" id="btn_search" class="btn btn-primary">
<i class="bi bi-search"></i> 조회
</button>
</div>
</div>
</div>
<div id="wrapper"></div>
</div>
</div>
</body>
</html>
WebContent/jsp/onl/apim/portalstatistics/portalStatisticsDailyAppTableMan.jsp
+258
View File
@@ -0,0 +1,258 @@
<%@ page language="java" contentType="text/html; charset=utf-8"%>
<%@ page import="java.io.*"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@ include file="/jsp/common/include/localemessage.jsp" %>
<%
response.setHeader("Pragma", "No-cache");
response.setHeader("Cache-Control", "no-cache");
response.setHeader("Expires", "0");
%>
<!DOCTYPE html>
<html>
<head>
<title>일별 앱 통계 목록</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<jsp:include page="/jsp/common/include/css.jsp"/>
<jsp:include page="/jsp/common/include/script.jsp"/>
<jsp:include page="/jsp/common/include/portal.jsp"/>
<script language="javascript">
var url = '<c:url value="/onl/apim/portalstatistics/portalStatisticsDailyAppTableMan.json" />';
var grid;
$(document).ready(function() {
// Datepicker 초기화
$("input[name=startDate], input[name=endDate]").datepicker({
format: "yyyy-mm-dd",
autoclose: true,
todayHighlight: true,
language: "ko"
});
function setActiveDateRangeButton() {
var startDate = $("input[name=startDate]").datepicker('getDate');
var endDate = $("input[name=endDate]").datepicker('getDate');
var diffDays = Math.floor((endDate - startDate) / (1000 * 60 * 60 * 24));
$('.btn-date-range').removeClass('active');
if (diffDays === 30) {
$('#btn_month').addClass('active');
} else if (diffDays === 7) {
$('#btn_week').addClass('active');
}
}
function setDateRange(days) {
var now = new Date();
var endDate = now;
var startDate = new Date(now.getFullYear(), now.getMonth(), now.getDate() - days);
$("input[name=startDate]").datepicker('setDate', startDate);
$("input[name=endDate]").datepicker('setDate', endDate);
setActiveDateRangeButton();
}
$("#btn_month").click(function() {
setDateRange(30);
loadData();
});
$("#btn_week").click(function() {
setDateRange(7);
loadData();
});
setDateRange(30);
function initGrid(data) {
if (grid) {
grid.destroy();
}
var columns = [
{ id: 'appName', name: 'APP 명', sort: true,
formatter: (cell) => gridjs.html('<b>'+cell+'</b>'),
width: '150px'
}
];
var dates = Object.keys(data[0]).filter(key => key !== 'appName');
dates.forEach(date => {
columns.push({
id: date,
name: date,
sort: true,
formatter: (cell) => {
if (cell === undefined || cell === null) {
return '0';
}
return gridjs.html('<span style="color: #0a53be;">'+cell.toLocaleString()+'</span>');
},
width: '100px' // Set a fixed minimum width
});
});
grid = new gridjs.Grid({
columns: columns,
data: data,
sort: true,
pagination: {
limit: 10
},
search: true,
style: {
table: {
border: '3px solid #ccc'
},
th: {
'background-color': 'rgba(0, 0, 0, 0.1)',
color: '#000',
'border-bottom': '3px solid #ccc',
'text-align': 'center'
},
td: {
'text-align': 'center'
}
}
}).render(document.getElementById('wrapper'));
addExportButton(grid);
}
function updateSummary(summary) {
$("#totalApps").text(summary.totalApps);
$("#monthlyRequests").text(summary.monthlyRequests.toLocaleString());
$("#weeklyRequests").text(summary.weeklyRequests.toLocaleString());
$("#dailyRequests").text(summary.dailyRequests.toLocaleString());
$("#topApps").html(summary.topApps.join("<br>"));
}
function loadData() {
var startDate = $("input[name=startDate]").val().replace(/-/g, '');
var endDate = $("input[name=endDate]").val().replace(/-/g, '');
$.ajax({
url: url,
type: "POST",
data: {
cmd: "LIST",
startDate: startDate,
endDate: endDate
},
success: function(response) {
updateSummary(response.summary);
initGrid(response.dailyStats);
},
error: function(xhr, status, error) {
console.error("Error fetching data:", error);
alert("데이터를 불러오는 중 오류가 발생했습니다.");
}
});
}
$("#btn_search").click(function (){
setActiveDateRangeButton();
loadData();
});
loadData(); // 초기 데이터 로드
});
</script>
</head>
<body>
<div class="right_box">
<div class="content_top">
<ul class="path">
<li><a href="#">${rmsMenuPath}</a></li>
</ul>
</div>
<div class="content_middle" id="content_middle">
<h2 class="mb-4">일자 별 APP 통계 목록</h2>
<div class="row mb-4">
<div class="col-md-3 mb-3">
<div class="card text-center h-100">
<div class="card-body">
<i class="bi bi-window-stack card-icon text-primary"></i>
<h5 class="card-title">총 앱 수</h5>
<p class="card-text">
<span id="totalApps">0</span> 개
</p>
</div>
</div>
</div>
<div class="col-md-5 mb-3">
<div class="card text-center h-100">
<div class="card-body">
<i class="bi bi-graph-up card-icon text-success"></i>
<h5 class="card-title">앱 사용량</h5>
<div class="row">
<div class="col-sm-4">
<p class="card-text"><span id="monthlyRequests">0</span></p>
<p class="text-muted">월간</p>
</div>
<div class="col-sm-4">
<p class="card-text"><span id="weeklyRequests">0</span></p>
<p class="text-muted">주간</p>
</div>
<div class="col-sm-4">
<p class="card-text"><span id="dailyRequests">0</span></p>
<p class="text-muted">일간</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card text-center h-100">
<div class="card-body">
<i class="bi bi-star card-icon text-warning"></i>
<h5 class="card-title">주 사용 앱</h5>
<p class="text-muted" id="topApps"></p>
</div>
</div>
</div>
</div>
<div class="search-panel mb-4">
<h5 class="mb-3">검색 조건</h5>
<div class="row g-3 align-items-center">
<div class="col-md-3">
<div class="input-group">
<span class="input-group-text"><i class="bi bi-calendar"></i></span>
<input type="text" name="startDate" class="form-control" data-required data-warning="시작 날짜를 입력하여 주십시오." placeholder="시작 날짜"/>
</div>
</div>
<div class="col-auto">
<span>~</span>
</div>
<div class="col-md-3">
<div class="input-group">
<span class="input-group-text"><i class="bi bi-calendar"></i></span>
<input type="text" name="endDate" class="form-control" data-required data-warning="종료 날짜를 입력하여 주십시오." placeholder="종료 날짜"/>
</div>
</div>
<div class="col-auto">
<button type="button" id="btn_month" class="btn btn-outline-secondary btn-date-range">
<i class="bi bi-calendar-month"></i> 한달
</button>
<button type="button" id="btn_week" class="btn btn-outline-secondary btn-date-range">
<i class="bi bi-calendar-week"></i> 한주
</button>
</div>
<div class="col-auto">
<button type="button" id="btn_search" class="btn btn-primary">
<i class="bi bi-search"></i> 조회
</button>
</div>
</div>
</div>
<div id="wrapper"></div>
</div>
</div>
</body>
</html>
WebContent/jsp/onl/apim/portalstatistics/portalStatisticsDailyMan.jsp
+308
View File
@@ -0,0 +1,308 @@
<%@ page language="java" contentType="text/html; charset=utf-8"%>
<%@ page import="java.io.*"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@ include file="/jsp/common/include/localemessage.jsp" %>
<%
response.setHeader("Pragma", "No-cache");
response.setHeader("Cache-Control", "no-cache");
response.setHeader("Expires", "0");
%>
<!DOCTYPE html>
<html>
<head>
<title>API 통계</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<jsp:include page="/jsp/common/include/css.jsp"/>
<style>
.chart-container {
display: flex;
justify-content: space-between;
}
.chart {
width: 48%;
height: 500px;
}
.filter-container {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.select-group {
display: flex;
gap: 10px;
}
.date-group {
display: flex;
gap: 10px;
}
.date-picker {
width: 120px;
}
</style>
</head>
<body>
<div class="right_box">
<div class="content_top">
<ul class="path">
<li><a href="#">${rmsMenuPath}</a></li>
</ul>
</div>
<div class="content_middle" id="content_middle">
<div class="title">API 통계</div>
<%--<div class="filter-container">
<div class="select-group">
<div class="select-style">
<select name="searchOrgId">
<option value="">기관 선택</option>
<!-- 동적으로 옵션이 추가 -->
</select>
</div>
<div class="select-style">
<select name="searchAppId">
<option value="">APP 선택</option>
<option value="app1">앱1</option>
<option value="app2">앱2</option>
<option value="app3">앱3</option>
</select>
</div>
<div class="select-style">
<select name="searchApiId">
<option value="">API 선택</option>
<option value="api1">API1</option>
<option value="api2">API2</option>
<option value="api3">API3</option>
</select>
</div>
<div class="select-style">
<select name="searchTimeUnit">
<option value="">시간 단위</option>
<option value="hour">시간별</option>
<option value="day">일별</option>
<option value="month">월별</option>
</select>
</div>
</div>
<div class="date-group">
<input type="text" name="searchStartYYYYMMDD" id="startDatepicker" readonly="readonly" class="date-picker" placeholder="시작일">
<input type="text" name="searchEndYYYYMMDD" id="endDatepicker" readonly="readonly" class="date-picker" placeholder="종료일">
<button type="button" class="cssbtn" id="btn_search" level="R">
<i class="material-icons">search</i> <%= localeMessage.getString("button.search") %>
</button>
</div>
</div>--%>
<div class="chart-container">
<div id="normalChart" class="chart"></div>
<div id="errorChart" class="chart"></div>
</div>
</div>
</div>
<jsp:include page="/jsp/common/include/script.jsp"/>
<script src="<c:url value="/addon/echarts/echarts.min.js"/>"></script>
<script type="text/javascript">
var url = '<c:url value="/onl/apim/portalstatistics/portalStatisticsDailyMan.json" />';
var normalChart, errorChart;
var hours = ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11',
'12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23'];
var todayNormal = new Array(24).fill(0);
var todayError = new Array(24).fill(0);
var yesterdayNormal = new Array(24).fill(0);
var yesterdayError = new Array(24).fill(0);
function initializeCharts() {
normalChart = echarts.init(document.getElementById('normalChart'));
errorChart = echarts.init(document.getElementById('errorChart'));
var normalOption = {
title: { text: '정상 호출 통계' },
tooltip: {
trigger: 'axis',
axisPointer: { type: 'cross', label: { backgroundColor: '#6a7985' } }
},
legend: { data: ['금일 정상', '전일 정상'] },
toolbox: { feature: { saveAsImage: {} } },
grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
xAxis: [{ type: 'category', boundaryGap: false, data: hours }],
yAxis: [{ ype: 'value', minInterval: 1 }],// 최소 간격을 1로 설정
series: [
{
name: '전일 정상',
type: 'line',
showSymbol: false,
itemStyle: { color: '#b9bcc4' },
lineStyle: { width: 2 },
areaStyle: { color: '#b9bcc4', opacity: 0.08 },
data: yesterdayNormal
},
{
name: '금일 정상',
type: 'line',
showSymbol: false,
itemStyle: { color: '#5470C6' },
lineStyle: { width: 3 },
areaStyle: { color: '#5470C6', opacity: 0.5 },
data: todayNormal
}
]
};
var errorOption = {
title: { text: '오류 호출 통계' },
tooltip: {
trigger: 'axis',
axisPointer: { type: 'cross', label: { backgroundColor: '#6a7985' } }
},
legend: { data: ['금일 오류', '전일 오류'] },
toolbox: { feature: { saveAsImage: {} } },
grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
xAxis: [{ type: 'category', boundaryGap: false, data: hours }],
yAxis: [{ type: 'value', minInterval: 1 }],
series: [
{
name: '전일 오류',
type: 'line',
showSymbol: false,
itemStyle: { color: '#b9bcc4' },
lineStyle: { width: 2 },
areaStyle: { color: '#b9bcc4', opacity: 0.08 },
data: yesterdayError
},
{
name: '금일 오류',
type: 'line',
showSymbol: false,
itemStyle: { color: '#EE6666' },
lineStyle: { width: 3 },
areaStyle: { color: '#EE6666', opacity: 0.5 },
data: todayError
}
]
};
normalChart.setOption(normalOption);
errorChart.setOption(errorOption);
}
function updateCharts() {
normalChart.setOption({
series: [
{ data: yesterdayNormal },
{ data: todayNormal }
]
});
errorChart.setOption({
series: [
{ data: yesterdayError },
{ data: todayError }
]
});
}
function fetchData(startDate, endDate) {
$.ajax({
url: url,
type: 'POST',
data: {
cmd: 'LIST',
startDate: startDate,
endDate: endDate,
serviceType: 'APIGW'
},
success: function(response) {
console.log(response);
// 데이터 초기화
todayNormal = new Array(24).fill(0);
todayError = new Array(24).fill(0);
yesterdayNormal = new Array(24).fill(0);
yesterdayError = new Array(24).fill(0);
// 응답 데이터 처리
if (response.today) {
response.today.forEach(function(item) {
var hour = parseInt(item.statisticsTime.substring(8, 10));
todayNormal[hour] = item.requestCount;
todayError[hour] = item.failureCount;
});
}
if (response.yesterday) {
response.yesterday.forEach(function(item) {
var hour = parseInt(item.statisticsTime.substring(8, 10));
yesterdayNormal[hour] = item.requestCount;
yesterdayError[hour] = item.failureCount;
});
}
updateCharts();
},
error: function(xhr, status, error) {
console.error('Error fetching data:', error);
}
});
}
function getPreviousDay(date) {
var d = new Date(date.substring(0, 4) + "-" + date.substring(4, 6) + "-" + date.substring(6, 8));
d.setDate(d.getDate() - 1);
return d.toISOString().split('T')[0].replace(/-/g, "");
}
function initCombo() {
$.ajax({
url: url,
type: 'POST',
data: {
cmd: 'LIST_INIT_COMBO'
},
success: function(response) {
var orgList = response.orgList;
var selectOrg = $("select[name=searchOrgId]");
selectOrg.empty().append($('<option>').val('').text('기관 선택'));
$.each(orgList, function(i, item) {
selectOrg.append($('<option>').val(item.CODE).text(item.NAME));
});
},
error: function(xhr, status, error) {
console.error('Error initializing combo boxes:', error);
}
});
}
$(document).ready(function() {
$("input[name=searchStartYYYYMMDD],input[name=searchEndYYYYMMDD]").inputmask("yyyy-mm-dd",{'autoUnmask':true});
initializeCharts();
initCombo();
$("#startDatepicker").datepicker({
dateFormat: 'yy-mm-dd'
});
$("#endDatepicker").datepicker({
dateFormat: 'yy-mm-dd'
});
$("#btn_search").click(function(){
var start = $("input[name=searchStartYYYYMMDD]").val().replace(/-/g, "");
var end = $("input[name=searchEndYYYYMMDD]").val().replace(/-/g, "");
if(start > end){
alert("조회기간을 확인해주세요.");
return false;
}
fetchData(start, end);
});
var today = new Date().toISOString().split('T')[0].replace(/-/g, "");
$('#startDatepicker').val(today);
$('#endDatepicker').val(today);
fetchData(today, today);
});
</script>
</body>
</html>
WebContent/jsp/onl/apim/portalstatistics/portalStatisticsDailyOrgTableMan.jsp
+263
View File
@@ -0,0 +1,263 @@
<%@ page language="java" contentType="text/html; charset=utf-8"%>
<%@ page import="java.io.*"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@ include file="/jsp/common/include/localemessage.jsp" %>
<%
response.setHeader("Pragma", "No-cache");
response.setHeader("Cache-Control", "no-cache");
response.setHeader("Expires", "0");
%>
<!DOCTYPE html>
<html>
<head>
<title>일별 기관 통계 목록</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<jsp:include page="/jsp/common/include/css.jsp"/>
<jsp:include page="/jsp/common/include/script.jsp"/>
<jsp:include page="/jsp/common/include/portal.jsp"/>
<script language="javascript">
var url = '<c:url value="/onl/apim/portalstatistics/portalStatisticsDailyOrgTableMan.json" />';
var grid;
$(document).ready(function() {
// Datepicker 초기화
$("input[name=startDate], input[name=endDate]").datepicker({
format: "yyyy-mm-dd",
autoclose: true,
todayHighlight: true,
language: "ko"
});
function setActiveDateRangeButton() {
var startDate = $("input[name=startDate]").datepicker('getDate');
var endDate = $("input[name=endDate]").datepicker('getDate');
var diffDays = Math.floor((endDate - startDate) / (1000 * 60 * 60 * 24));
$('.btn-date-range').removeClass('active');
if (diffDays === 30) {
$('#btn_month').addClass('active');
} else if (diffDays === 7) {
$('#btn_week').addClass('active');
}
}
function setDateRange(days) {
var now = new Date();
var endDate = now;
var startDate = new Date(now.getFullYear(), now.getMonth(), now.getDate() - days);
$("input[name=startDate]").datepicker('setDate', startDate);
$("input[name=endDate]").datepicker('setDate', endDate);
setActiveDateRangeButton();
}
$("#btn_month").click(function() {
setDateRange(30);
loadData();
});
$("#btn_week").click(function() {
setDateRange(7);
loadData();
});
$("#btn_today").click(function() {
setDateRange(0);
loadData();
});
setDateRange(30);
function initGrid(data) {
if (grid) {
grid.destroy();
}
var columns = [
{ id: 'orgName', name: '법인명', sort: true,
formatter: (cell) => gridjs.html('<b>'+cell+'</b>'),
width: '150px'
}
];
var dates = Object.keys(data[0]).filter(key => key !== 'orgName');
dates.forEach(date => {
columns.push({
id: date,
name: date,
sort: true,
formatter: (cell) => {
if (cell === undefined || cell === null) {
return '0';
}
return gridjs.html('<span style="color: #0a53be;">'+cell.toLocaleString()+'</span>');
},
width: '100px' // Set a fixed minimum width
});
});
grid = new gridjs.Grid({
columns: columns,
data: data,
sort: true,
pagination: {
limit: 10
},
search: true,
style: {
table: {
border: '3px solid #ccc'
},
th: {
'background-color': 'rgba(0, 0, 0, 0.1)',
color: '#000',
'border-bottom': '3px solid #ccc',
'text-align': 'center'
},
td: {
'text-align': 'center'
}
}
}).render(document.getElementById('wrapper'));
addExportButton(grid);
}
function updateSummary(summary) {
$("#totalOrgs").text(summary.totalOrgs);
$("#monthlyRequests").text(summary.monthlyRequests.toLocaleString());
$("#weeklyRequests").text(summary.weeklyRequests.toLocaleString());
$("#dailyRequests").text(summary.dailyRequests.toLocaleString());
$("#topOrgs").html(summary.topOrgs.join("<br>"));
}
function loadData() {
var startDate = $("input[name=startDate]").val().replace(/-/g, '');
var endDate = $("input[name=endDate]").val().replace(/-/g, '');
$.ajax({
url: url,
type: "POST",
data: {
cmd: "LIST",
startDate: startDate,
endDate: endDate
},
success: function(response) {
updateSummary(response.summary);
initGrid(response.dailyStats);
},
error: function(xhr, status, error) {
console.error("Error fetching data:", error);
alert("데이터를 불러오는 중 오류가 발생했습니다.");
}
});
}
$("#btn_search").click(function (){
setActiveDateRangeButton();
loadData();
});
loadData(); // 초기 데이터 로드
});
</script>
</head>
<body>
<div class="right_box">
<div class="content_top">
<ul class="path">
<li><a href="#">${rmsMenuPath}</a></li>
</ul>
</div>
<div class="content_middle" id="content_middle">
<h2 class="mb-4">일자별 법인 통계 목록</h2>
<div class="row mb-4">
<div class="col-md-3 mb-3">
<div class="card text-center h-100">
<div class="card-body">
<i class="bi bi-building card-icon text-primary"></i>
<h5 class="card-title">총 법인 수</h5>
<p class="card-text">
<span id="totalOrgs">0</span> 개
</p>
</div>
</div>
</div>
<div class="col-md-5 mb-3">
<div class="card text-center h-100">
<div class="card-body">
<i class="bi bi-graph-up card-icon text-success"></i>
<h5 class="card-title">법인 사용량</h5>
<div class="row">
<div class="col-sm-4">
<p class="card-text"><span id="monthlyRequests">0</span></p>
<p class="text-muted">월간</p>
</div>
<div class="col-sm-4">
<p class="card-text"><span id="weeklyRequests">0</span></p>
<p class="text-muted">주간</p>
</div>
<div class="col-sm-4">
<p class="card-text"><span id="dailyRequests">0</span></p>
<p class="text-muted">일간</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card text-center h-100">
<div class="card-body">
<i class="bi bi-star card-icon text-warning"></i>
<h5 class="card-title">주 사용 법인</h5>
<p class="text-muted" id="topOrgs"></p>
</div>
</div>
</div>
</div>
<div class="search-panel mb-4">
<h5 class="mb-3">검색 조건</h5>
<div class="row g-3 align-items-center">
<div class="col-md-3">
<div class="input-group">
<span class="input-group-text"><i class="bi bi-calendar"></i></span>
<input type="text" name="startDate" class="form-control" data-required data-warning="시작 날짜를 입력하여 주십시오." placeholder="시작 날짜"/>
</div>
</div>
<div class="col-auto">
<span>~</span>
</div>
<div class="col-md-3">
<div class="input-group">
<span class="input-group-text"><i class="bi bi-calendar"></i></span>
<input type="text" name="endDate" class="form-control" data-required data-warning="종료 날짜를 입력하여 주십시오." placeholder="종료 날짜"/>
</div>
</div>
<div class="col-auto">
<button type="button" id="btn_month" class="btn btn-outline-secondary btn-date-range">
<i class="bi bi-calendar-month"></i> 한달
</button>
<button type="button" id="btn_week" class="btn btn-outline-secondary btn-date-range">
<i class="bi bi-calendar-week"></i> 한주
</button>
</div>
<div class="col-auto">
<button type="button" id="btn_search" class="btn btn-primary">
<i class="bi bi-search"></i> 조회
</button>
</div>
</div>
</div>
<div id="wrapper"></div>
</div>
</div>
</body>
</html>
WebContent/jsp/onl/apim/portalstatistics/portalStatisticsMan.jsp
+170
View File
@@ -0,0 +1,170 @@
<%@ page language="java" contentType="text/html; charset=utf-8"%>
<%@ page import="java.io.*"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@ include file="/jsp/common/include/localemessage.jsp" %>
<%
response.setHeader("Pragma", "No-cache");
response.setHeader("Cache-Control", "no-cache");
response.setHeader("Expires", "0");
%>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<jsp:include page="/jsp/common/include/css.jsp"/>
<jsp:include page="/jsp/common/include/script.jsp"/>
<script language="javascript">
var url = '<c:url value="/onl/apim/portalstatistics/portalStatisticsMan.json" />';
var url_view = '<c:url value="/onl/apim/portalstatistics/portalStatisticsMan.view" />';
$(document).ready(function() {
$("input[name=startDate], input[name=endDate]").inputmask("9999-99-99 99:99", {'autoUnmask': true});
var typingTimer;
var doneTypingInterval = 500; // 1초
$("input[name=startDate]").on('input', function() {
clearTimeout(typingTimer);
typingTimer = setTimeout(function() {
updateEndTime();
}, doneTypingInterval);
});
function updateEndTime() {
var startDateStr = $("input[name=startDate]").val();
if (isValidDateTimeFormat(startDateStr)) {
var startDate = parseDate(startDateStr);
var endDate = new Date(startDate.getTime() + 10 * 60000); // 10분 추가
var endDateStr = formatDate(endDate);
$("input[name=endDate]").val(endDateStr);
}
}
function isValidDateTimeFormat(dateStr) {
return /^\d{12}$/.test(dateStr);
}
function parseDate(dateStr) {
var year = parseInt(dateStr.substr(0, 4));
var month = parseInt(dateStr.substr(4, 2)) - 1; // JavaScript의 월은 0-11
var day = parseInt(dateStr.substr(6, 2));
var hour = parseInt(dateStr.substr(8, 2));
var minute = parseInt(dateStr.substr(10, 2));
return new Date(year, month, day, hour, minute);
}
function formatDate(date) {
return date.getFullYear() +
String(date.getMonth() + 1).padStart(2, '0') +
String(date.getDate()).padStart(2, '0') +
String(date.getHours()).padStart(2, '0') +
String(date.getMinutes()).padStart(2, '0');
}
function setCurrentTime() {
var now = new Date();
var year = now.getFullYear();
var month = String(now.getMonth() + 1).padStart(2, '0');
var day = String(now.getDate()).padStart(2, '0');
var hour = String(now.getHours()).padStart(2, '0');
var minute = String(Math.floor(now.getMinutes() / 10) * 10).padStart(2, '0');
var startDate = year + '-' + month + '-' + day + ' ' + hour + ':' + minute;
$("input[name=startDate]").val(startDate);
// 시작 시간을 Date 객체로 변환
var startDateTime = new Date(year, month - 1, day, hour, minute);
// 10분을 추가
var endDateTime = new Date(startDateTime.getTime() + 10 * 60000);
var endYear = endDateTime.getFullYear();
var endMonth = String(endDateTime.getMonth() + 1).padStart(2, '0');
var endDay = String(endDateTime.getDate()).padStart(2, '0');
var endHour = String(endDateTime.getHours()).padStart(2, '0');
var endMinute = String(endDateTime.getMinutes()).padStart(2, '0');
var endDateStr = endYear + '-' + endMonth + '-' + endDay + ' ' + endHour + ':' + endMinute;
$("input[name=endDate]").val(endDateStr);
}
$("#btn_current").click(function() {
setCurrentTime();
});
setCurrentTime(); // 초기 로드 시 현재 시간 설정
$("#btn_new").click(function(){
var startDate = $("input[name=startDate]").val().replace(/[^0-9]/g, '').slice(0, 12);
var postData = {
cmd: "INSERT",
startDate: startDate
};
$.ajax({
type: "POST",
url: url,
data: postData,
success: function(response) {
if (response.success) {
if (response.dataExists) {
alert(response.message + " 저장된 데이터 수: " + response.count);
} else {
alert(response.message);
}
} else {
alert("처리 중 오류가 발생했습니다: " + response.message);
}
},
error: function(e){
alert("서버 통신 오류: " + e.responseText);
}
});
});
$("input[name^=search]").keydown(function(key){
if (key.keyCode == 13){
$("#btn_new").click();
}
});
buttonControl();
});
</script>
</head>
<body>
<div class="right_box">
<div class="content_top">
<ul class="path">
<li><a href="#">${rmsMenuPath}</a></li>
</ul>
</div><!-- end content_top -->
<div class="content_middle" id="content_middle">
<div class="search_wrap">
<button type="button" class="cssbtn" id="btn_new" level="W"><i class="material-icons">add</i> 등록</button>
</div>
<div class="title">로그 통계조회</div>
<table class="search_condition" cellspacing=0;>
<tbody>
<tr>
<th style="width:10%; min-width:90px;">10분 통계</th>
<td>
<input type="text" name="startDate" data-required data-warning="시작 날짜와 시간을 입력하여 주십시오." style="width:150px;"/>
~
<input type="text" name="endDate" data-required data-warning="종료 날짜와 시간을 입력하여 주십시오." style="width:150px;" disabled="disabled" />
<button type="button" id="btn_current" class="cssbtn">현재</button>
</td>
</tr>
</tbody>
</table>
<table id="grid"></table>
</div><!-- end content_middle -->
</div><!-- end right_box -->
</body>
</html>
WebContent/jsp/onl/apim/portalstatistics/portalStatisticsOrgTableMan.jsp
+262
View File
@@ -0,0 +1,262 @@
<%@ page language="java" contentType="text/html; charset=utf-8"%>
<%@ page import="java.io.*"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@ include file="/jsp/common/include/localemessage.jsp" %>
<%
response.setHeader("Pragma", "No-cache");
response.setHeader("Cache-Control", "no-cache");
response.setHeader("Expires", "0");
%>
<!DOCTYPE html>
<html>
<head>
<title>법인별 통계 목록</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<jsp:include page="/jsp/common/include/css.jsp"/>
<jsp:include page="/jsp/common/include/script.jsp"/>
<jsp:include page="/jsp/common/include/portal.jsp"/>
<script language="javascript">
var url = '<c:url value="/onl/apim/portalstatistics/portalStatisticsOrgTableMan.json" />';
var grid;
$(document).ready(function() {
// Datepicker 초기화
$("input[name=startDate], input[name=endDate]").datepicker({
format: "yyyy-mm-dd",
autoclose: true,
todayHighlight: true,
language: "ko"
});
function setActiveDateRangeButton() {
var startDate = $("input[name=startDate]").datepicker('getDate');
var endDate = $("input[name=endDate]").datepicker('getDate');
var diffDays = Math.floor((endDate - startDate) / (1000 * 60 * 60 * 24));
$('.btn-date-range').removeClass('active');
if (diffDays === 30) {
$('#btn_month').addClass('active');
} else if (diffDays === 7) {
$('#btn_week').addClass('active');
} else if (diffDays === 0) {
$('#btn_today').addClass('active');
}
}
function setDateRange(days) {
var now = new Date();
var endDate = now;
var startDate = new Date(now.getFullYear(), now.getMonth(), now.getDate() - days);
$("input[name=startDate]").datepicker('setDate', startDate);
$("input[name=endDate]").datepicker('setDate', endDate);
setActiveDateRangeButton();
}
$("#btn_month").click(function() {
setDateRange(30);
loadData();
});
$("#btn_week").click(function() {
setDateRange(7);
loadData();
});
$("#btn_today").click(function() {
setDateRange(0);
loadData();
});
setDateRange(0);
function initGrid(data) {
if (grid) {
grid.destroy();
}
var columns = [
{ id: 'orgName', name: '법인명', sort: true,
formatter: (cell) => gridjs.html('<b>'+cell+'</b>')
},
{ id: 'totalRequests', name: '총 요청 수', sort: true,
formatter: (cell) => gridjs.html('<span style="color: #0a53be;">'+cell+'</span>')
},
{ id: 'totalFailures', name: '오류 건수', sort: true,
formatter: (cell) => gridjs.html('<span style="color: #dc3545;">'+cell+'</span>')
},
{ id: 'successRate', name: '성공 률 (%)', sort: true,
formatter: (cell) => gridjs.html('<span style="color: #198754;">'+cell+'%</span>')
}
];
grid = new gridjs.Grid({
columns: columns,
data: data,
sort: true,
pagination: {
limit: 10
},
search: true,
style: {
table: {
border: '3px solid #ccc'
},
th: {
'background-color': 'rgba(0, 0, 0, 0.1)',
color: '#000',
'border-bottom': '3px solid #ccc',
'text-align': 'center'
},
td: {
'text-align': 'center'
}
}
}).render(document.getElementById('wrapper'));
addExportButton(grid);
}
function updateSummary(summary) {
$("#totalOrgs").text(summary.totalOrgs);
$("#totalRequests").text(summary.totalRequests.toLocaleString());
$("#totalFailures").text(summary.totalFailures.toLocaleString());
$("#overallSuccessRate").text(summary.overallSuccessRate.toFixed(2));
}
function loadData() {
var startDate = $("input[name=startDate]").val().replace(/-/g, '');
var endDate = $("input[name=endDate]").val().replace(/-/g, '');
$.ajax({
url: url,
type: "POST",
data: {
cmd: "LIST",
startDate: startDate,
endDate: endDate
},
success: function(response) {
updateSummary(response.summary);
initGrid(response.orgStats);
},
error: function(xhr, status, error) {
console.error("Error fetching data:", error);
alert("데이터를 불러오는 중 오류가 발생했습니다.");
}
});
}
$("#btn_search").click(function (){
setActiveDateRangeButton();
loadData();
});
loadData(); // 초기 데이터 로드
});
</script>
</head>
<body>
<div class="right_box">
<div class="content_top">
<ul class="path">
<li><a href="#">${rmsMenuPath}</a></li>
</ul>
</div>
<div class="content_middle" id="content_middle">
<h2 class="mb-4">법인별 통계 목록</h2>
<div class="row mb-4">
<div class="col-md-3 mb-3">
<div class="card text-center h-100">
<div class="card-body">
<i class="bi bi-building card-icon text-primary"></i>
<h5 class="card-title">총 법인 수</h5>
<p class="card-text">
<span id="totalOrgs">0</span> 개
</p>
</div>
</div>
</div>
<div class="col-md-3 mb-3">
<div class="card text-center h-100">
<div class="card-body">
<i class="bi bi-arrow-repeat card-icon text-success"></i>
<h5 class="card-title">총 요청 수</h5>
<p class="card-text">
<span id="totalRequests">0</span>
</p>
</div>
</div>
</div>
<div class="col-md-3 mb-3">
<div class="card text-center h-100">
<div class="card-body">
<i class="bi bi-exclamation-triangle card-icon text-danger"></i>
<h5 class="card-title">총 실패 수</h5>
<p class="card-text">
<span id="totalFailures">0</span>
</p>
</div>
</div>
</div>
<div class="col-md-3 mb-3">
<div class="card text-center h-100">
<div class="card-body">
<i class="bi bi-graph-up card-icon text-info"></i>
<h5 class="card-title">전체 성공률</h5>
<p class="card-text">
<span id="overallSuccessRate">0</span>%
</p>
</div>
</div>
</div>
</div>
<div class="search-panel mb-4">
<h5 class="mb-3">검색 조건</h5>
<div class="row g-3 align-items-center">
<div class="col-md-3">
<div class="input-group">
<span class="input-group-text"><i class="bi bi-calendar"></i></span>
<input type="text" name="startDate" class="form-control" data-required data-warning="시작 날짜를 입력하여 주십시오." placeholder="시작 날짜"/>
</div>
</div>
<div class="col-auto">
<span>~</span>
</div>
<div class="col-md-3">
<div class="input-group">
<span class="input-group-text"><i class="bi bi-calendar"></i></span>
<input type="text" name="endDate" class="form-control" data-required data-warning="종료 날짜를 입력하여 주십시오." placeholder="종료 날짜"/>
</div>
</div>
<div class="col-auto">
<button type="button" id="btn_month" class="btn btn-outline-secondary btn-date-range">
<i class="bi bi-calendar-month"></i> 한달
</button>
<button type="button" id="btn_week" class="btn btn-outline-secondary btn-date-range">
<i class="bi bi-calendar-week"></i> 한주
</button>
<button type="button" id="btn_today" class="btn btn-outline-secondary btn-date-range">
<i class="bi bi-calendar-day"></i> 금일
</button>
</div>
<div class="col-auto">
<button type="button" id="btn_search" class="btn btn-primary">
<i class="bi bi-search"></i> 조회
</button>
</div>
</div>
</div>
<div id="wrapper"></div>
</div>
</div>
</body>
</html>