서버 인스턴스 늘어나면 sms가 서버카드 높이 따라가도록 수정, adapter 쪽 카드 꽉 채우도록 수정.
This commit is contained in:
@@ -115,10 +115,15 @@
|
||||
.adapter-summary-card {
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.adapter-summary-container {
|
||||
padding: 0.5rem 1rem;
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.adapter-summary-header {
|
||||
@@ -130,8 +135,10 @@
|
||||
}
|
||||
|
||||
.adapter-summary-body {
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around; /* 내용을 수직으로 균등 배분 */
|
||||
}
|
||||
|
||||
.adapter-summary-row {
|
||||
|
||||
@@ -33,11 +33,9 @@
|
||||
.dashboard-sms-summary .card {
|
||||
border-radius: 0.35rem;
|
||||
box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
|
||||
height: 337px; /* servers 카드와 강제로 높이 맞춤 */
|
||||
}
|
||||
|
||||
.sms-table-container {
|
||||
max-height: 220px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
@@ -56,8 +54,6 @@
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
|
||||
/* 텍스트 정렬, 균등하게 */
|
||||
}
|
||||
|
||||
.sms-table td {
|
||||
|
||||
@@ -126,12 +126,8 @@
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* 2025.12.08 광주은행
|
||||
1. 모든 카드를 7:3 기준으로 변경함.
|
||||
2. 자동으로 높이를 맞추지않고 왼쪽 요소 기준으로 오른쪽 높이를 강제로 설정함.
|
||||
3. 중요도에 따라 각 카드 위치 변경.
|
||||
*/
|
||||
|
||||
/* 모든 카드는 7:3 기준으로 수정, 광주은행 요청사항 */
|
||||
|
||||
/* 1번 줄 (5:3 비율) - 서버 상태, 배치 처리 상태 */
|
||||
.first-row {
|
||||
grid-template-columns: 7fr 3fr;
|
||||
@@ -182,7 +178,7 @@
|
||||
<div class="container">
|
||||
<!-- 헤더 영역 -->
|
||||
<jsp:include page="components/dashboard-header.jsp" />
|
||||
|
||||
|
||||
<!-- 1번 줄 (5:3 비율) - 서버 상태, 배치 처리 상태 -->
|
||||
<div class="dashboard-row first-row">
|
||||
<!-- 서버 상태 섹션 (5/8 비율) -->
|
||||
@@ -205,7 +201,7 @@
|
||||
|
||||
<!-- 2번 줄 (1:1 비율) - 거래 처리 집계, 실시간 트랜잭션 현황 -->
|
||||
<div class="dashboard-row second-row">
|
||||
<!-- 어댑터 섹션 (8/10 비율) -->
|
||||
<!-- 어댑터 섹션 (8/10 비율) -->
|
||||
<div class="adapters-container">
|
||||
<jsp:include page="components/dashboard-adapter.jsp">
|
||||
<jsp:param name="serverTypeMap" value="<%= serverTypeMap %>" />
|
||||
@@ -222,6 +218,7 @@
|
||||
|
||||
<!-- 3번 줄 (8:2 비율) - 어댑터 상태, 장애통보(SMS) -->
|
||||
<div class="dashboard-row third-row">
|
||||
|
||||
<!-- 실시간 트랜잭션 현황 섹션 (좌측) -->
|
||||
<div class="transaction-overview-container">
|
||||
<jsp:include page="components/dashboard-tran-chart.jsp" />
|
||||
@@ -239,19 +236,33 @@
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
// 서버 데이터 초기화
|
||||
<%= serverDataJS.toString() %>
|
||||
// 행의 높이를 맞추는 함수 (카드를 직접 타겟)
|
||||
function matchRowHeights() {
|
||||
$('.dashboard-row').each(function() {
|
||||
var maxHeight = 0;
|
||||
// 각 행에 있는 .card 요소를 직접 찾음
|
||||
var $cards = $(this).find('.card');
|
||||
|
||||
// 자동 새로고침 타이머 변수 (window 객체에 할당)
|
||||
window.refreshTimer = null;
|
||||
window.refreshInterval = 5; // 기본값 10초
|
||||
if ($cards.length > 1) {
|
||||
// 자식 요소의 자연 높이를 얻기 위해 min-height 초기화
|
||||
$cards.css('min-height', '0');
|
||||
|
||||
// 숫자 포맷 유틸리티 함수
|
||||
function formatNumber(num) {
|
||||
return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
|
||||
// 자식 카드들의 최대 높이를 찾음
|
||||
$cards.each(function() {
|
||||
var currentHeight = $(this).outerHeight();
|
||||
if (currentHeight > maxHeight) {
|
||||
maxHeight = currentHeight;
|
||||
}
|
||||
});
|
||||
|
||||
// 모든 자식 카드에 최대 높이를 min-height로 적용
|
||||
if (maxHeight > 0) {
|
||||
$cards.css('min-height', maxHeight + 'px');
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 서버 데이터 설정 및 대시보드 초기화
|
||||
$(document).ready(function() {
|
||||
// 대시보드 초기화
|
||||
initDashboard('<%=request.getContextPath()%>');
|
||||
@@ -275,6 +286,25 @@
|
||||
// modern-dashboard.js의 함수 호출
|
||||
window.startRefreshTimer();
|
||||
window.updateRefreshStatus();
|
||||
|
||||
// --- 높이 맞춤 로직 ---
|
||||
// 초기 렌더링 후 높이 맞춤 (약간의 지연 후)
|
||||
setTimeout(function() { matchRowHeights(); }, 300);
|
||||
|
||||
// 데이터 로딩이 끝날 때마다 높이 다시 맞춤
|
||||
if (window.DashboardEventManager) {
|
||||
window.DashboardEventManager.on('loading-end', function() {
|
||||
// 데이터 렌더링을 위한 약간의 지연 후 높이 맞춤
|
||||
setTimeout(function() { matchRowHeights(); }, 100);
|
||||
});
|
||||
}
|
||||
|
||||
// 창 크기 조절 시 높이 다시 맞춤 (디바운싱 적용)
|
||||
var resizeTimeout;
|
||||
$(window).on('resize', function() {
|
||||
clearTimeout(resizeTimeout);
|
||||
resizeTimeout = setTimeout(function() { matchRowHeights(); }, 200);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
Reference in New Issue
Block a user