eapim-admin/WebContent/jsp/dashboard-modern/components/dashboard-batch.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"%>

<div class="dashboard-batch">
    <h2 class="section-title">배치 처리 상태</h2>
    <div class="card">
        <div class="batch-grid">
            <div class="batch-card" id="bapBatchCard" style="display: none">
                <div class="batch-header">
                    <h4>일괄 전송 처리 (BAP)</h4>
                </div>
                <div class="batch-content">
                    <div class="batch-metric">
                        <div class="batch-metric-header">
                            <span class="metric-label">송신</span>
                            <div class="metric-values">
                                <span class="metric-value" id="bap-send-success">0</span>
                                <span class="metric-title">성공</span>
                            </div>
                            <div class="metric-values">
                                <span class="metric-value error" id="bap-send-error">0</span>
                                <span class="metric-title">에러</span>
                            </div>
                            <div class="metric-values">
                                <span class="metric-value warning" id="bap-send-waiting">0</span>
                                <span class="metric-title">대기</span>
                            </div>
                        </div>
                        <div class="metric-progress">
                            <div class="progress-bar">
                                <div class="progress-fill success" id="bap-send-success-bar" style="width: 80%"></div>
                                <div class="progress-fill danger" id="bap-send-error-bar" style="width: 10%"></div>
                                <div class="progress-fill warning" id="bap-send-waiting-bar" style="width: 10%"></div>
                            </div>
                            <div class="progress-info">
                                <span class="progress-label">처리율:</span>
                                <span class="progress-value" id="bap-send-rate">0%</span>
                            </div>
                        </div>
                    </div>
                    <div class="batch-metric">
                        <div class="batch-metric-header">
                            <span class="metric-label">수신</span>
                            <div class="metric-values">
                                <span class="metric-value" id="bap-receive-success">0</span>
                                <span class="metric-title">성공</span>
                            </div>
                            <div class="metric-values">
                                <span class="metric-value error" id="bap-receive-error">0</span>
                                <span class="metric-title">에러</span>
                            </div>
                            <div class="metric-values">
                                <span class="metric-value warning" id="bap-receive-waiting">0</span>
                                <span class="metric-title">대기</span>
                            </div>
                        </div>
                        <div class="metric-progress">
                            <div class="progress-bar">
                                <div class="progress-fill success" id="bap-receive-success-bar" style="width: 70%"></div>
                                <div class="progress-fill danger" id="bap-receive-error-bar" style="width: 5%"></div>
                                <div class="progress-fill warning" id="bap-receive-waiting-bar" style="width: 25%"></div>
                            </div>
                            <div class="progress-info">
                                <span class="progress-label">처리율:</span>
                                <span class="progress-value" id="bap-receive-rate">0%</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="batch-card" id="batBatchCard" style="display: none">
                <div class="batch-header">
                    <h4>배치 처리 (BAT)</h4>
                </div>
                <div class="batch-content">
                    <div class="batch-metric">
                        <div class="batch-metric-header">
                            <span class="metric-label">송신</span>
                            <div class="metric-values">
                                <span class="metric-value" id="bat-send-success">0</span>
                                <span class="metric-title">성공</span>
                            </div>
                            <div class="metric-values">
                                <span class="metric-value error" id="bat-send-error">0</span>
                                <span class="metric-title">에러</span>
                            </div>
                            <div class="metric-values">
                                <span class="metric-value warning" id="bat-send-waiting">0</span>
                                <span class="metric-title">대기</span>
                            </div>
                        </div>
                        <div class="metric-progress">
                            <div class="progress-bar">
                                <div class="progress-fill success" id="bat-send-success-bar" style="width: 75%"></div>
                                <div class="progress-fill danger" id="bat-send-error-bar" style="width: 15%"></div>
                                <div class="progress-fill warning" id="bat-send-waiting-bar" style="width: 10%"></div>
                            </div>
                            <div class="progress-info">
                                <span class="progress-label">처리율:</span>
                                <span class="progress-value" id="bat-send-rate">0%</span>
                            </div>
                        </div>
                    </div>
                    <div class="batch-metric">
                        <div class="batch-metric-header">
                            <span class="metric-label">수신</span>
                            <div class="metric-values">
                                <span class="metric-value" id="bat-receive-success">0</span>
                                <span class="metric-title">성공</span>
                            </div>
                            <div class="metric-values">
                                <span class="metric-value error" id="bat-receive-error">0</span>
                                <span class="metric-title">에러</span>
                            </div>
                            <div class="metric-values">
                                <span class="metric-value warning" id="bat-receive-waiting">0</span>
                                <span class="metric-title">대기</span>
                            </div>
                        </div>
                        <div class="metric-progress">
                            <div class="progress-bar">
                                <div class="progress-fill success" id="bat-receive-success-bar" style="width: 65%"></div>
                                <div class="progress-fill danger" id="bat-receive-error-bar" style="width: 10%"></div>
                                <div class="progress-fill warning" id="bat-receive-waiting-bar" style="width: 25%"></div>
                            </div>
                            <div class="progress-info">
                                <span class="progress-label">처리율:</span>
                                <span class="progress-value" id="bat-receive-rate">0%</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    /* 배치 처리 섹션 */
    .batch-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
    }

    .batch-card {
        background-color: white;
        border-radius: var(--rounded-md);
        border: 1px solid var(--color-gray-200);
        overflow: hidden;
        box-shadow: var(--shadow-sm);
    }

    .batch-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.75rem 1.25rem;
        background-color: var(--color-gray-50);
        border-bottom: 1px solid var(--color-gray-200);
    }

    .batch-header h4 {
        margin: 0;
        font-size: 1rem;
        font-weight: 600;
        color: var(--color-gray-800);
    }

    .batch-date {
        font-size: 0.75rem;
        color: var(--color-gray-500);
    }

    .batch-content {
        padding: 0.75rem 1.25rem;
    }

    .batch-metric {
        margin-bottom: 0.75rem;
    }

    .batch-metric:last-child {
        margin-bottom: 0;
    }

    .batch-metric-header {
        display: flex;
        align-items: center;
        margin-bottom: 0.5rem;
    }

    .batch-metric .metric-label {
        font-size: 0.875rem;
        font-weight: 500;
        color: var(--color-gray-700);
        width: 60px;
    }

    .batch-metric .metric-values {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-right: 1.5rem;
    }

    .batch-metric .metric-value {
        font-size: 1rem;
        font-weight: 600;
        color: var(--color-gray-800);
    }

    .batch-metric .metric-value.error {
        color: var(--color-danger);
    }

    .batch-metric .metric-value.warning {
        color: var(--color-warning);
    }

    .batch-metric .metric-title {
        font-size: 0.75rem;
        color: var(--color-gray-500);
        margin-top: 0.25rem;
    }

    .metric-progress {
        margin-top: 0.25rem;
    }

    .progress-bar {
        height: 8px;
        background-color: var(--color-gray-200);
        border-radius: var(--rounded-full);
        display: flex;
        overflow: hidden;
    }

    .progress-fill {
        height: 100%;
        transition: width 0.3s ease;
    }

    .progress-fill.success {
        background-color: var(--color-success);
    }

    .progress-fill.danger {
        background-color: var(--color-danger);
    }

    .progress-fill.warning {
        background-color: var(--color-warning);
    }

    .progress-info {
        display: flex;
        justify-content: space-between;
        font-size: 0.75rem;
        color: var(--color-gray-600);
        margin-top: 0.5rem;
    }

    /* 배치 섹션 스타일 조정 */
    .batch-container .card {
        height: 100%;
    }
</style>

<script>
    // 숫자 형식화 함수 (천 단위 콤마 추가)
    function formatNumber(num) {
        return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    }

    // 배치 프로세스 업데이트 함수
    function updateBatchProcess(data) {
        if (!data || !data.batchData) return;

        // BAP 배치 데이터 업데이트
        var bapData = data.batchData.filter(function(batch) {
            return batch.serviceType === 'BAP';
        })[0];

        if (bapData) {
            // 송신 데이터 설정
            $('#bap-send-success').text(formatNumber(bapData.sendSuccess));
            $('#bap-send-error').text(formatNumber(bapData.sendError));
            $('#bap-send-waiting').text(formatNumber(bapData.sendWaiting));

            // 총 합계 계산
            var sendTotal = bapData.sendSuccess + bapData.sendError + bapData.sendWaiting;

            // 바 너비 계산
            var sendSuccessPercent = sendTotal > 0 ? (bapData.sendSuccess / sendTotal * 100) : 0;
            var sendErrorPercent = sendTotal > 0 ? (bapData.sendError / sendTotal * 100) : 0;
            var sendWaitingPercent = sendTotal > 0 ? (bapData.sendWaiting / sendTotal * 100) : 0;

            // 바 너비 설정
            $('#bap-send-success-bar').css('width', sendSuccessPercent + '%');
            $('#bap-send-error-bar').css('width', sendErrorPercent + '%');
            $('#bap-send-waiting-bar').css('width', sendWaitingPercent + '%');

            // 처리율 설정
            var sendCompletedPercent = sendTotal > 0 ?
                Math.round((bapData.sendSuccess + bapData.sendError) / sendTotal * 100) : 0;
            $('#bap-send-rate').text(sendCompletedPercent + '%');

            // 수신 데이터 설정
            $('#bap-receive-success').text(formatNumber(bapData.receiveSuccess));
            $('#bap-receive-error').text(formatNumber(bapData.receiveError));
            $('#bap-receive-waiting').text(formatNumber(bapData.receiveWaiting));

            // 총 합계 계산
            var receiveTotal = bapData.receiveSuccess + bapData.receiveError + bapData.receiveWaiting;

            // 바 너비 계산
            var receiveSuccessPercent = receiveTotal > 0 ? (bapData.receiveSuccess / receiveTotal * 100) : 0;
            var receiveErrorPercent = receiveTotal > 0 ? (bapData.receiveError / receiveTotal * 100) : 0;
            var receiveWaitingPercent = receiveTotal > 0 ? (bapData.receiveWaiting / receiveTotal * 100) : 0;

            // 바 너비 설정
            $('#bap-receive-success-bar').css('width', receiveSuccessPercent + '%');
            $('#bap-receive-error-bar').css('width', receiveErrorPercent + '%');
            $('#bap-receive-waiting-bar').css('width', receiveWaitingPercent + '%');

            // 처리율 설정
            var receiveCompletedPercent = receiveTotal > 0 ?
                Math.round((bapData.receiveSuccess + bapData.receiveError) / receiveTotal * 100) : 0;
            $('#bap-receive-rate').text(receiveCompletedPercent + '%');
            document.getElementById("bapBatchCard").style.display = "block";
        }

        // BAT 배치 데이터 업데이트
        var batData = data.batchData.filter(function(batch) {
            return batch.serviceType === 'BAT';
        })[0];

        if (batData) {
            // 송신 데이터 설정
            $('#bat-send-success').text(formatNumber(batData.sendSuccess));
            $('#bat-send-error').text(formatNumber(batData.sendError));
            $('#bat-send-waiting').text(formatNumber(batData.sendWaiting));

            // 총 합계 계산
            var sendTotal = batData.sendSuccess + batData.sendError + batData.sendWaiting;

            // 바 너비 계산
            var sendSuccessPercent = sendTotal > 0 ? (batData.sendSuccess / sendTotal * 100) : 0;
            var sendErrorPercent = sendTotal > 0 ? (batData.sendError / sendTotal * 100) : 0;
            var sendWaitingPercent = sendTotal > 0 ? (batData.sendWaiting / sendTotal * 100) : 0;

            // 바 너비 설정
            $('#bat-send-success-bar').css('width', sendSuccessPercent + '%');
            $('#bat-send-error-bar').css('width', sendErrorPercent + '%');
            $('#bat-send-waiting-bar').css('width', sendWaitingPercent + '%');

            // 처리율 설정
            var sendCompletedPercent = sendTotal > 0 ?
                Math.round((batData.sendSuccess + batData.sendError) / sendTotal * 100) : 0;
            $('#bat-send-rate').text(sendCompletedPercent + '%');

            // 수신 데이터 설정
            $('#bat-receive-success').text(formatNumber(batData.receiveSuccess));
            $('#bat-receive-error').text(formatNumber(batData.receiveError));
            $('#bat-receive-waiting').text(formatNumber(batData.receiveWaiting));

            // 총 합계 계산
            var receiveTotal = batData.receiveSuccess + batData.receiveError + batData.receiveWaiting;

            // 바 너비 계산
            var receiveSuccessPercent = receiveTotal > 0 ? (batData.receiveSuccess / receiveTotal * 100) : 0;
            var receiveErrorPercent = receiveTotal > 0 ? (batData.receiveError / receiveTotal * 100) : 0;
            var receiveWaitingPercent = receiveTotal > 0 ? (batData.receiveWaiting / receiveTotal * 100) : 0;

            // 바 너비 설정
            $('#bat-receive-success-bar').css('width', receiveSuccessPercent + '%');
            $('#bat-receive-error-bar').css('width', receiveErrorPercent + '%');
            $('#bat-receive-waiting-bar').css('width', receiveWaitingPercent + '%');

            // 처리율 설정
            var receiveCompletedPercent = receiveTotal > 0 ?
                Math.round((batData.receiveSuccess + batData.receiveError) / receiveTotal * 100) : 0;
            $('#bat-receive-rate').text(receiveCompletedPercent + '%');
            document.getElementById("batBatchCard").style.display = "block";
        }
    }

    // 배치 처리 데이터 로드 및 업데이트 함수
    function loadBatchProcessData() {
        ModernDashboardApi.getBatchProcess(function(data) {
            updateBatchProcess(data);
        });
    }

    // 초기 로드
    $(document).ready(function() {
        loadBatchProcessData();

        // 대시보드 새로고침 이벤트에 배치 처리 데이터 로드 함수 등록
        DashboardEventManager.on('refresh', function() {
            loadBatchProcessData();
        });
    });
</script>