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

UI 조정
eapim-admin CI / build (push) Has been cancelled
Details

Browse Source
This commit is contained in:
eastargh
2026-09-01 10:07:32 +09:00
parent a1d2058bca
commit 5fd8334ea8
7 changed files with 200 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
WebContent/jsp/common/screen/top_04.jsp
+1 -1
View File
@@ -596,7 +596,7 @@
<ul>
<li style="width:240px;">
<a style="width:240px; cursor: default"
href="#"><span><%=SessionManager.getUserName(request) %>(<%=SessionManager.getUserId(request) %></span>
href="#"><span><%=SessionManager.getUserName(request) %>(<%=SessionManager.getUserId(request) %>)</span>
<span onClick="javascript:openColorPopup();"><%=localeMessage.getString("screen.customer") %></span>
<% if (!"".equals(LastLoginYms.trim())) { %>
<span style="display:block;font-size:10px;"><%=localeMessage.getString("screen.lastLogin") %> : <%=LastLoginYms%></span>
WebContent/jsp/onl/kjb/statistics/apiStatsDayMan.jsp
+48 -2
View File
@@ -33,6 +33,18 @@
width: 100%;
height: 250px;
}
/* 달력 팝업이 파이차트 가운데 숫자(z-index:10) 위로 오도록 */
#ui-datepicker-div {
z-index: 9999 !important;
}
.cssbtn.small {
height: 24px;
border-radius: 2px;
min-width: 24px;
box-shadow: none;
border-color: #ebebec;
font-size: 11px;
}
</style>
<jsp:include page="/jsp/common/include/script.jsp"/>
<script src="<c:url value="/addon/echarts/echarts.min.js"/>"></script>
@@ -286,6 +298,28 @@
fetchChartData();
}
// 조회기간을 시작일 기준 이전/다음 달의 1일~말일로 변경 후 조회 (direction: -1 이전달, 1 다음달)
function shiftMonthRange(direction) {
var v = $("input[name=searchStartDateTime]").val().replace(/-/g, "");
if (!v || v.length < 6) return;
var year = parseInt(v.substring(0, 4));
var month = parseInt(v.substring(4, 6)) - 1; // 0-based
var first = new Date(year, month + direction, 1);
var last = new Date(year, month + direction + 1, 0); // 해당 달의 말일
function pad(n) { return String(n).padStart(2, '0'); }
function fmt(d) {
return d.getFullYear() + '-' + pad(d.getMonth() + 1) + '-' + pad(d.getDate());
}
$("input[name=searchStartDateTime]").val(fmt(first));
$("input[name=searchEndDateTime]").val(fmt(last));
search();
}
function exportToExcel(isSummary) {
var cmdType = isSummary ? 'EXCEL_EXPORT_SUMMARY' : 'EXCEL_EXPORT';
console.log('[Excel Export] Starting... (type: ' + cmdType + ')');
@@ -416,7 +450,7 @@
mtype: 'POST',
postData: gridPostData,
colNames: [
'API ID', 'API 명',
'API ID', 'API명',
'총건수', '성공', 'Timeout', '시스템오류',
'평균응답(ms)', '최소응답(ms)', '최대응답(ms)'
],
@@ -506,6 +540,8 @@
$("input[name=searchStartDateTime]").inputmask("9999-99-99", { 'autoUnmask': true });
$("input[name=searchEndDateTime]").inputmask("9999-99-99", { 'autoUnmask': true });
$("input[name=searchStartDateTime], input[name=searchEndDateTime]").datepicker();
// 기본값 설정 (어제 기준 해당 월 1일 ~ 어제)
var today = getToday();
var todayStr = today.replace(/-/g, '');
@@ -545,6 +581,14 @@
search();
});
$("#btnPrevMonth").click(function() {
shiftMonthRange(-1);
});
$("#btnNextMonth").click(function() {
shiftMonthRange(1);
});
$("#btn_excel_export_summary").click(function() {
exportToExcel(true);
});
@@ -599,6 +643,8 @@
<input type="text" name="searchStartDateTime" value="${param.searchStartDateTime}" style="width:100px;">
~
<input type="text" name="searchEndDateTime" value="${param.searchEndDateTime}" style="width:100px;">
<button type="button" id="btnPrevMonth" class="cssbtn small">&lt;</button>
<button type="button" id="btnNextMonth" class="cssbtn small">&gt;</button>
<span style="color:#888; font-size:12px; margin-left:10px;">(최대 31일)</span>
</td>
</tr>
@@ -644,7 +690,7 @@
<!-- 요약 그리드 -->
<div style="margin-top: 20px;">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
<div class="title" style="margin: 0;">API명별 요약 통계</div>
<div class="title" style="margin: 0;">API별 요약 통계</div>
<button type="button" class="cssbtn" id="btn_excel_export_summary" level="R">
<i class="material-icons">file_download</i> Excel 다운로드 (요약)
</button>
WebContent/jsp/onl/kjb/statistics/apiStatsHourMan.jsp
+45 -2
View File
@@ -33,6 +33,18 @@
width: 100%;
height: 250px;
}
/* 달력 팝업이 파이차트 가운데 숫자(z-index:10) 위로 오도록 */
#ui-datepicker-div {
z-index: 9999 !important;
}
.cssbtn.small {
height: 24px;
border-radius: 2px;
min-width: 24px;
box-shadow: none;
border-color: #ebebec;
font-size: 11px;
}
</style>
<jsp:include page="/jsp/common/include/script.jsp"/>
<script src="<c:url value="/addon/echarts/echarts.min.js"/>"></script>
@@ -292,6 +304,25 @@
fetchChartData();
}
// 조회일자를 하루 이동 후 조회 (direction: -1 이전날, 1 이후날)
function shiftSearchDate(direction) {
var v = $("input[name=searchDate]").val().replace(/-/g, "");
if (!v || v.length !== 8) return;
var d = new Date(
parseInt(v.substring(0, 4)),
parseInt(v.substring(4, 6)) - 1,
parseInt(v.substring(6, 8))
);
d.setDate(d.getDate() + direction);
function pad(n) { return String(n).padStart(2, '0'); }
$("input[name=searchDate]").val(
d.getFullYear() + '-' + pad(d.getMonth() + 1) + '-' + pad(d.getDate()));
search();
}
function exportToExcel(isSummary) {
var cmdType = isSummary ? 'EXCEL_EXPORT_SUMMARY' : 'EXCEL_EXPORT';
console.log('[Excel Export] Starting... (type: ' + cmdType + ')');
@@ -461,7 +492,7 @@
mtype: 'POST',
postData: gridPostData,
colNames: [
'통계시간', 'API명', '인스턴스', '업무구분', '클라이언트ID',
'통계시간', 'API ID', '인스턴스', '업무구분', '클라이언트ID',
'Inbound Adapter', 'Outbound Adapter',
'총건수', '성공', 'Timeout', '시스템오류',
'평균응답(ms)', '최소응답(ms)', '최대응답(ms)'
@@ -507,6 +538,8 @@
// 날짜 입력 마스크
$("input[name=searchDate]").inputmask("9999-99-99", { 'autoUnmask': true });
$("input[name=searchDate]").datepicker();
// 기본값 설정 (오늘)
var today = getToday();
if (!$("input[name=searchDate]").val()) {
@@ -525,6 +558,14 @@
search();
});
$("#btnPrevDate").click(function() {
shiftSearchDate(-1);
});
$("#btnNextDate").click(function() {
shiftSearchDate(1);
});
$("#btn_excel_export_summary").click(function() {
exportToExcel(true);
});
@@ -577,6 +618,8 @@
<th>조회일자</th>
<td colspan="5">
<input type="text" name="searchDate" value="${param.searchDate}" style="width:100px;">
<button type="button" id="btnPrevDate" class="cssbtn small">&lt;</button>
<button type="button" id="btnNextDate" class="cssbtn small">&gt;</button>
<span style="color:#888; font-size:12px; margin-left:10px;">(선택일 00시 ~ 23시 조회)</span>
</td>
</tr>
@@ -622,7 +665,7 @@
<!-- 요약 그리드 -->
<div style="margin-top: 20px;">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
<div class="title" style="margin: 0;">API명별 요약 통계</div>
<div class="title" style="margin: 0;">API별 요약 통계</div>
<button type="button" class="cssbtn" id="btn_excel_export_summary" level="R">
<i class="material-icons">file_download</i> Excel 다운로드 (요약)
</button>
WebContent/jsp/onl/kjb/statistics/apiStatsMinuteMan.jsp
+95 -31
View File
@@ -26,6 +26,18 @@
border: 1px solid #ddd;
background: #fff;
}
.cssbtn.small {
height: 24px;
border-radius: 2px;
min-width: 24px;
box-shadow: none;
border-color: #ebebec;
font-size: 11px;
}
/* 달력 팝업이 파이차트 가운데 숫자(z-index:10) 위로 오도록 */
#ui-datepicker-div {
z-index: 9999 !important;
}
</style>
<jsp:include page="/jsp/common/include/script.jsp"/>
<script src="<c:url value="/addon/echarts/echarts.min.js"/>"></script>
@@ -203,7 +215,6 @@
function validateAndAdjustDateRange() {
var startDate = $("input[name=searchStartDate]").val().replace(/-/g, "");
var startTime = $("input[name=searchStartTime]").val().replace(/:/g, "");
var endDate = $("input[name=searchEndDate]").val().replace(/-/g, "");
var endTime = $("input[name=searchEndTime]").val().replace(/:/g, "");
if (!startDate || !startTime) return null;
@@ -219,35 +230,43 @@
);
}
// UI 업데이트 헬퍼
function updateEndDateTime(dt) {
var d = dt.getFullYear() +
// 종료일시(yyyyMMddHHmm) 포맷 헬퍼
function formatDateTime(dt) {
return dt.getFullYear() +
String(dt.getMonth() + 1).padStart(2, '0') +
String(dt.getDate()).padStart(2, '0');
var t = String(dt.getHours()).padStart(2, '0') +
String(dt.getDate()).padStart(2, '0') +
String(dt.getHours()).padStart(2, '0') +
String(dt.getMinutes()).padStart(2, '0');
$("input[name=searchEndDate]").val(d.substring(0, 4) + '-' + d.substring(4, 6) + '-' + d.substring(6, 8));
$("input[name=searchEndTime]").val(t.substring(0, 2) + ':' + t.substring(2, 4));
return d + t;
}
// 종료시각 UI 업데이트 헬퍼
function updateEndTime(dt) {
$("input[name=searchEndTime]").val(
String(dt.getHours()).padStart(2, '0') + ':' + String(dt.getMinutes()).padStart(2, '0'));
return formatDateTime(dt);
}
var start = parseDateTime(startDate, startTime);
var startDateTime = startDate + startTime;
var endDateTime;
if (endDate && endTime) {
var end = parseDateTime(endDate, endTime);
if (endTime) {
// 종료일은 시작일 기준. 종료시각이 시작시각보다 이르면 자정을 넘긴 것으로 보고 +1일
var end = parseDateTime(startDate, endTime);
if (end < start) {
end = new Date(end.getTime() + 24 * 60 * 60 * 1000);
}
var diffMinutes = (end - start) / (1000 * 60);
if (diffMinutes > 60) {
// 1시간 초과 시 시작 + 1시간으로 조정
endDateTime = updateEndDateTime(new Date(start.getTime() + 60 * 60 * 1000));
endDateTime = updateEndTime(new Date(start.getTime() + 60 * 60 * 1000));
} else {
endDateTime = endDate + endTime;
endDateTime = formatDateTime(end);
}
} else {
// 종료시간 미입력 시 시작 + 1시간으로 설정
endDateTime = updateEndDateTime(new Date(start.getTime() + 60 * 60 * 1000));
endDateTime = updateEndTime(new Date(start.getTime() + 60 * 60 * 1000));
}
return { start: startDateTime, end: endDateTime };
@@ -302,6 +321,44 @@
fetchChartData(range);
}
// 조회기간을 정시 단위 1시간 구간으로 이동 (direction: -1 이전, 1 이후)
// ex) 시작 08:35, 이전 클릭 -> 08:00~09:00, 다시 -> 07:00~08:00
// ex) 시작 08:35, 이후 클릭 -> 09:00~10:00, 다시 -> 10:00~11:00
function shiftTimeRange(direction) {
var startDate = $("input[name=searchStartDate]").val().replace(/-/g, "");
var startTime = $("input[name=searchStartTime]").val().replace(/:/g, "");
if (!startDate || !startTime) return;
var start = new Date(
parseInt(startDate.substring(0, 4)),
parseInt(startDate.substring(4, 6)) - 1,
parseInt(startDate.substring(6, 8)),
parseInt(startTime.substring(0, 2)),
parseInt(startTime.substring(2, 4))
);
if (direction < 0) {
// 분 단위가 있으면 정시로 내림, 이미 정시면 1시간 전
if (start.getMinutes() === 0) start.setHours(start.getHours() - 1);
else start.setMinutes(0);
} else {
// 분 단위가 있으면 다음 정시로 올림, 이미 정시면 1시간 후
start.setMinutes(0);
start.setHours(start.getHours() + 1);
}
var end = new Date(start.getTime() + 60 * 60 * 1000);
function pad(n) { return String(n).padStart(2, '0'); }
$("input[name=searchStartDate]").val(
start.getFullYear() + '-' + pad(start.getMonth() + 1) + '-' + pad(start.getDate()));
$("input[name=searchStartTime]").val(pad(start.getHours()) + ':' + pad(start.getMinutes()));
$("input[name=searchEndTime]").val(pad(end.getHours()) + ':' + pad(end.getMinutes()));
search();
}
function exportToExcel(isSummary) {
var cmdType = isSummary ? 'EXCEL_EXPORT_SUMMARY' : 'EXCEL_EXPORT';
console.log('[Excel Export] Starting... (type: ' + cmdType + ')');
@@ -317,13 +374,10 @@
serviceType: '${param.serviceType}'
};
var startDate = $("input[name=searchStartDate]").val().replace(/-/g, "");
var startTime = $("input[name=searchStartTime]").val().replace(/:/g, "");
var endDate = $("input[name=searchEndDate]").val().replace(/-/g, "");
var endTime = $("input[name=searchEndTime]").val().replace(/:/g, "");
if (startDate && startTime) {
postData.searchStartDateTime = startDate + startTime;
postData.searchEndDateTime = endDate + endTime;
var range = validateAndAdjustDateRange();
if (range) {
postData.searchStartDateTime = range.start;
postData.searchEndDateTime = range.end;
}
console.log('[Excel Export] Request data:', postData);
@@ -474,7 +528,7 @@
mtype: 'POST',
postData: gridPostData,
colNames: [
'통계시간', 'API명', '인스턴스', '업무구분', '클라이언트ID',
'통계시간', 'API ID', '인스턴스', '업무구분', '클라이언트ID',
'Inbound Adapter', 'Outbound Adapter',
'총건수', '성공', 'Timeout', '시스템오류',
'평균응답(ms)', '최소응답(ms)', '최대응답(ms)'
@@ -518,9 +572,11 @@
$(document).ready(function() {
// 날짜/시간 입력 마스크
$("input[name=searchStartDate], input[name=searchEndDate]").inputmask("9999-99-99", { 'autoUnmask': true });
$("input[name=searchStartDate]").inputmask("9999-99-99", { 'autoUnmask': true });
$("input[name=searchStartTime], input[name=searchEndTime]").inputmask("99:99", { 'autoUnmask': true });
$("input[name=searchStartDate]").datepicker();
// 기본값 설정 (현재 시간(분) 기준 1시간 전 ~ 현재 시간(분))
var now = new Date();
var oneHourAgo = new Date(now.getTime() - 60 * 60 * 1000);
@@ -538,8 +594,7 @@
$("input[name=searchStartDate]").val(formatDate(oneHourAgo));
$("input[name=searchStartTime]").val(formatTime(oneHourAgo));
}
if (!$("input[name=searchEndDate]").val()) {
$("input[name=searchEndDate]").val(formatDate(now));
if (!$("input[name=searchEndTime]").val()) {
$("input[name=searchEndTime]").val(formatTime(now));
}
@@ -555,6 +610,14 @@
search();
});
$("#btnPrevTime").click(function() {
shiftTimeRange(-1);
});
$("#btnNextTime").click(function() {
shiftTimeRange(1);
});
$("#btn_excel_export_summary").click(function() {
exportToExcel(true);
});
@@ -569,8 +632,8 @@
}
});
// 종료일/시간 변경 시 1시간 초과 검증
$("input[name=searchEndDate], input[name=searchEndTime]").on('change blur', function() {
// 종료시각 변경 시 1시간 초과 검증
$("input[name=searchEndTime]").on('change blur', function() {
validateAndAdjustDateRange();
});
@@ -603,11 +666,12 @@
<tr>
<th style="width:100px;">조회기간</th>
<td style="width:400px">
<input type="text" name="searchStartDate" value="${param.searchStartDate}" style="width:100px;">
<input type="text" name="searchStartTime" value="${param.searchStartTime}" style="width:60px;">
<input type="text" name="searchStartDate" value="${param.searchStartDate}" style="width:80px;">
<input type="text" name="searchStartTime" value="${param.searchStartTime}" style="width:40px;">
~
<input type="text" name="searchEndDate" value="${param.searchEndDate}" style="width:100px;">
<input type="text" name="searchEndTime" value="${param.searchEndTime}" style="width:60px;">
<input type="text" name="searchEndTime" value="${param.searchEndTime}" style="width:40px;">
<button type="button" id="btnPrevTime" class="cssbtn small">&lt;</button>
<button type="button" id="btnNextTime" class="cssbtn small">&gt;</button>
<span style="color:#888; font-size:12px; margin-left:10px;">(최대 1시간, 초과시 자동 조정)</span>
</td>
<th style="width:100px;">API ID</th>
WebContent/jsp/onl/kjb/statistics/apiStatsMonthMan.jsp
+1 -1
View File
@@ -646,7 +646,7 @@
<!-- 요약 그리드 -->
<div style="margin-top: 20px;">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
<div class="title" style="margin: 0;">API명별 요약 통계</div>
<div class="title" style="margin: 0;">API별 요약 통계</div>
<button type="button" class="cssbtn" id="btn_excel_export_summary" level="R">
<i class="material-icons">file_download</i> Excel 다운로드 (요약)
</button>
WebContent/jsp/onl/kjb/statistics/apiStatsYearMan.jsp
+1 -1
View File
@@ -605,7 +605,7 @@
<!-- 요약 그리드 -->
<div style="margin-top: 20px;">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
<div class="title" style="margin: 0;">API명별 요약 통계</div>
<div class="title" style="margin: 0;">API별 요약 통계</div>
<button type="button" class="cssbtn" id="btn_excel_export_summary" level="R">
<i class="material-icons">file_download</i> Excel 다운로드 (요약)
</button>
WebContent/jsp/onl/transaction/tracking/trackingManDetail.jsp
+6 -1
View File
@@ -23,6 +23,9 @@
white-space: normal;
}
.table_row td { padding: 0 5px; }
.table_row input { box-sizing: border-box; }
</style>
<script language="javascript" >
// var eaiBzwkDstcd = window.dialogArguments["eaiBzwkDstcd"];
@@ -985,7 +988,9 @@ html,hbody {
</colgroup>
<tr>
<th><%=localeMessage.getString("trackingDetail.eaiSvcSerno")%></th>
<td colspan="3"><input type="text" name="eaiSvcSerno" readonly="readonly"/> </td>
<td><input type="text" name="eaiSvcSerno" readonly="readonly"/> </td>
<th><%=localeMessage.getString("trackingDetail.rspnsErrcdName")%></th>
<td><input type="text" name="rspnsErrcdName" readonly="readonly"/> </td>
</tr>
<tr>
<th><%=localeMessage.getString("trackingDetail.eaiBzwkDstcd")%></th>