건설현장 관리>건설현장 조회: 엑셀다운로드 처리시 progress 표시

src/main/java/geoinfo/admins/constructionProjectManagement/ConstructionProjectManagementController.java

@@ -4,13 +4,13 @@ import java.io.IOException;
 import java.io.OutputStream;
 import java.io.UnsupportedEncodingException;
 import java.net.URLEncoder;
-import java.security.SecureRandom;
 import java.text.SimpleDateFormat;
 import java.util.Date;
 import java.util.HashMap;
 import java.util.List;
 import java.util.Locale;
 import java.util.Map;
+import java.util.UUID;
 
 import javax.annotation.Resource;
 import javax.servlet.ServletOutputStream;
@@ -22,6 +22,9 @@ import org.apache.poi.ss.usermodel.Sheet;
 import org.json.simple.JSONArray;
 import org.json.simple.JSONObject;
 import org.json.simple.parser.JSONParser;
+import org.springframework.http.HttpHeaders;
+import org.springframework.http.HttpStatus;
+import org.springframework.http.MediaType;
 import org.springframework.http.ResponseEntity;
 import org.springframework.stereotype.Controller;
 import org.springframework.ui.ModelMap;
@@ -883,63 +886,101 @@ public class ConstructionProjectManagementController {
     }
     
 	/**
-     * 발주기관 건설현장 CSV 다운로드 처리
+     * 발주기관 건설현장 엑셀 다운로드 처리(진행률 표시)
 	 * @param workbook
 	 * @param request
 	 * @param response
 	 * @throws Exception
 	 */
-	@RequestMapping(value = "admins/drilling/inquiry/excel.do")
+    @RequestMapping(value = "admins/drilling/inquiry/excel.do")
-	public void downloadDrillingInquiryListExcel(HttpServletRequest request, HttpServletResponse response, HSSFWorkbook workbook, @RequestParam HashMap<String, Object> params) throws Exception {
+    public void downloadDrillingInquiryListExcel(HttpServletRequest request, HttpServletResponse response, @RequestParam HashMap<String, Object> params) throws Exception {
 
-		HashMap<String, Object> map = new HashMap<String, Object>();
+        // =========================
+        // 1. 엑셀 헤더 정보 구성
+        // =========================
+        String[] headers = {
+                "cid","constName","projectStateCodeName","constStartDate",
+                "constStateCodeName","inquiryDist","masterCompanyDept",
+                "masterCompanyAdmin","masterCompanyTel","coinstCompanyDept",
+                "constCompanyAdmin","constCompanyTel"
+        };
 
-		String[] headers = {"cid","constName","projectStateCodeName","constStartDate","constStateCodeName","inquiryDist" ,"masterCompanyDept","masterCompanyAdmin","masterCompanyTel","coinstCompanyDept","constCompanyAdmin","constCompanyTel"};
+        String[][] headerNames = {
-		String[][] headerNames = {{"연번", "사업명", "입력상태", "사업내용", "",       "발주기관현황", "", "", "",                      "건설사현황", "", ""},
+                {"연번", "사업명", "입력상태", "사업내용", "", "발주기관현황", "", "", "", "건설사현황", "", ""},
-                				  {"",    "",     "",       "사업기간", "사업단계", "발주처",     "담당부서",    "담당자", "담당자연락처", "건설사명",   "담당자", "담당자연락처"}};
+                {"", "", "", "사업기간", "사업단계", "발주처", "담당부서",
+                        "담당자", "담당자연락처", "건설사명", "담당자", "담당자연락처"}
+        };
 
-		final int[] headerWidths = {1325, 15900, 4240, 6360, 5830, 8830, 6890, 2915, 3710, 5035, 2915, 3710};
+        final int[] headerWidths = {
-		String[] columnType = {"String", "String", "String", "String", "String", "String", "String", "String", "String", "String", "String", "String"};
+                1325,15900,4240,6360,5830,8830,
-		String sheetName = "Sheet1";
+                6890,2915,3710,5035,2915,3710
+        };
 
-		String excelFileName = "발주기관 건설현장 목록";
+        String[] columnType = {
+                "String","String","String","String","String","String",
+                "String","String","String","String","String","String"
+        };
 
-//    	int startIndex = 0;
+        String sheetName = "Sheet1";
-    	Long totalCount = 0L;
+        String excelFileName = "발주기관 건설현장 목록";
-        // DB 조회
+
+        // =========================
+        // 2. DB 조회
+        // =========================
         JSONObject resultObj = drillingInquiryService.drillingInquiryList(request, params);
 
-        // 여기에서 list 꺼내기
         List<EgovMap> list = (List<EgovMap>) resultObj.get("datas");
-        totalCount = (Long) resultObj.get("count");
+        Long totalCount = (Long) resultObj.get("count");
-        
-        int idx = 0;
-        for (EgovMap rowData : list) {
-            // 공사기간 형식 처리: startDate ~ endDate
-            String constStartDate = (String) rowData.get("constStartDate");
-            String constEndDate = (String) rowData.get("constEndDate");
-            rowData.put("constStartDate", constStartDate + " ~ " + constEndDate);	// 공사기간을 'startDate ~ endDate' 형식으로 변환
-            rowData.put("cid", (totalCount) - (idx++));
-
-            String glName = "";
-            String gmName = "";
-            String gsName = "";
-            String inquiryDist = "";	// 발주처 
-            if ((String)rowData.get("glName") != null) {
-            	glName = (String)rowData.get("glName");
-            	inquiryDist = inquiryDist + glName + " "; 
-            }if ((String)rowData.get("gmName") != null) {
-            	gmName = (String)rowData.get("gmName");
-            	inquiryDist = inquiryDist + gmName + " "; 
-            }if ((String)rowData.get("gsName") != null) {
-            	gsName = (String)rowData.get("gsName");
-            	inquiryDist = inquiryDist + gsName; 
-            }
-            rowData.put("inquiryDist", inquiryDist);
 
+        // =========================
+        // 3. 데이터 없으면 리턴
+        // =========================
+        if (list == null || list.isEmpty()) {
+            response.setContentType("text/html;charset=UTF-8");
+            response.getWriter().write("<script>alert('데이터가 없습니다.');</script>");
+            return;
         }
 
-        ExcelMergeHeaderUtil.listToExcelMergeHeader(list, response, headers, headerNames, headerWidths, columnType, sheetName, excelFileName);
+        // =========================
+        // 4. 리스트 후처리
+        // =========================
+        int idx = 0;
+        for (EgovMap rowData : list) {
+
+            String constStartDate = (String) rowData.get("constStartDate");
+            String constEndDate = (String) rowData.get("constEndDate");
+
+            rowData.put("constStartDate",
+                    (constStartDate == null ? "" : constStartDate)
+                            + " ~ "
+                            + (constEndDate == null ? "" : constEndDate));
+
+            rowData.put("cid", (totalCount) - (idx++));
+
+            String inquiryDist = "";
+            if (rowData.get("glName") != null)
+                inquiryDist += rowData.get("glName") + " ";
+            if (rowData.get("gmName") != null)
+                inquiryDist += rowData.get("gmName") + " ";
+            if (rowData.get("gsName") != null)
+                inquiryDist += rowData.get("gsName");
+
+            rowData.put("inquiryDist", inquiryDist.trim());
+        }
+
+        // =========================
+        // 5. 엑셀 유틸 호출
+        // =========================
+        ExcelMergeHeaderUtil.listToExcelMergeHeader(
+                list,
+                response,
+                headers,
+                headerNames,
+                headerWidths,
+                columnType,
+                sheetName,
+                excelFileName
+        );
     }
     
 	/**

src/main/webapp/WEB-INF/views/admins/constructionProjectManagement/construction-site-index.jsp

@@ -574,6 +574,7 @@
 	
 	// 엑셀 다운로드
 	function clickExcelDownload(){
+		/*
 	    const params = new URLSearchParams();
 
 	    params.append("constTag", trim($('#const-tag').val()));
@@ -595,7 +596,203 @@
 	    // AJAX가 아닌 직접 다운로드 요청
 	    window.location.href = "/admins/drilling/inquiry/excel.do?" + params.toString();
 		$('#excelDownload').val("");
+		*/
+
+	    const params = new URLSearchParams();
+	    params.append("constTag", trim($('#const-tag').val()));
+	    params.append("constName", trim($('#const-name').val()));
+	    params.append("excelDownload", "Y");
+
+	    parent[1].showLoadingBar();
+
+	    fetch("/admins/drilling/inquiry/excel.do", {
+	        method: "POST",
+	        headers: {
+	            "Content-Type": "application/x-www-form-urlencoded"
+	        },
+	        body: params.toString()
+	    })
+	    .then(response => {
+	        if (!response.ok) throw new Error("다운로드 실패");
+
+	        const disposition = response.headers.get("Content-Disposition");
+	        let fileName = "excel.xlsx";
+
+	        if (disposition && disposition.includes("filename=")) {
+	            fileName = disposition.split("filename=")[1].replace(/"/g, "");
+	        }
+
+	        return response.blob().then(blob => ({ blob, fileName }));
+	    })
+	    .then(({ blob, fileName }) => {
+
+	        const url = window.URL.createObjectURL(blob);
+	        const a = document.createElement("a");
+	        a.href = url;
+	        a.download = fileName;
+	        document.body.appendChild(a);
+	        a.click();
+	        a.remove();
+	        window.URL.revokeObjectURL(url);
+	    })
+	    .catch(err => {
+	        alert("엑셀 다운로드 중 오류 발생");
+	        console.error(err);
+	    })
+	    .finally(() => {
+			$('#excelDownload').val("");
+			parent.hideLoadingBar();
+	    });
 	}
+	
+	let currentJobId = null;
+
+	function startExcelDownload() {
+
+	    const params = new URLSearchParams();
+	    params.append("constTag", trim($('#const-tag').val()));
+	    params.append("constName", trim($('#const-name').val()));
+	    params.append("excelDownload", "Y");
+
+
+	    parent.showLoadingBar();
+// 	    parent.document.getElementById("progressWrap").style.display = "block";
+
+	    fetch("/admins/drilling/inquiry/excel/start.do", {
+	        method: "POST",
+	        headers: {"Content-Type":"application/x-www-form-urlencoded"},
+	        body: params.toString()
+	    })
+	    .then(res => res.json())
+	    .then(data => {
+	        currentJobId = data.jobId;
+	        pollProgress();
+	    });
+
+		$('#excelDownload').val("");
+	}
+
+	function pollProgress() {
+
+	    fetch("/admins/drilling/inquiry/excel/progress.do?jobId=" + currentJobId)
+	    .then(res => res.json())
+	    .then(data => {
+
+	        let percent = data.progress;
+
+	        if(percent < 0){
+	            alert("엑셀 생성 중 오류 발생");
+	            return;
+	        }
+
+	        parent.document.getElementById("progressBar").style.width = percent + "%";
+	        parent.document.getElementById("progressText").innerText = percent + "%";
+
+	        if(percent < 100){
+	            setTimeout(pollProgress, 500);
+	        } else {
+	            setTimeout(function(){
+	                window.location = "/admins/drilling/inquiry/excel/download.do?jobId=" + currentJobId;
+	                parent.hideLoadingBar();
+	            }, 700);
+	        }
+	    });
+	}
+
+	$(document).ready(function() {
+		$(document).on("click", '#btnSubmit', function(e) {
+				
+		    var canvasModal = parent.document.getElementById("canvasModal");
+		    var canvas = parent.document.getElementById("canvas");
+		    var ctx = canvas.getContext("2d");
+	
+		    function showPer(per) {
+		        ctx.clearRect(0, 0, canvas.width, canvas.height);
+	
+		        // 원형 진행률
+		        ctx.strokeStyle = "#f66";
+		        ctx.lineWidth = 10;
+		        ctx.beginPath();
+		        ctx.arc(canvas.width/2, canvas.height/2, 50, -Math.PI/2, (-Math.PI/2 + 2*Math.PI*per/100));
+		        ctx.stroke();
+	
+		        // 숫자 표시
+		        ctx.font = '20px Arial';
+		        ctx.fillStyle = "#fff";
+		        ctx.textAlign = 'center';
+		        ctx.textBaseline = 'middle';
+		        ctx.fillText(per + '%', canvas.width/2, canvas.height/2);
+		    }
+		    
+		    const params = new URLSearchParams();
+		    params.append("constTag", trim($('#const-tag').val()));
+		    params.append("constName", trim($('#const-name').val()));
+		    params.append("excelDownload", "Y");
+		    
+		    var xhr = new XMLHttpRequest();
+		    xhr.open("GET", "/admins/drilling/inquiry/excel.do?" + params.toString(), true);
+		    xhr.responseType = "blob";
+
+		    var fakePer = 0;
+		    var fakeInterval;
+		    
+		    xhr.onloadstart = function () {
+		        canvasModal.style.display = "flex"; // 모달 표시
+		        fakePer = 0;
+		        showPer(4);
+		        
+		        // fake progress 시작 (0~90%)
+		        fakeInterval = setInterval(function() {
+		            if (fakePer < 90) {
+		                fakePer += Math.random() * 3; // 0~3%씩 증가
+		                showPer(Math.floor(fakePer));
+		            }
+		        }, 100); // 0.1초마다 증가
+		    };
+
+		    xhr.onprogress = function (e) {
+		        if (e.lengthComputable) {
+		            showPer(Math.floor((e.loaded / e.total) * 100));
+		        }
+		    };
+
+		    xhr.onload = function () {
+		        if (xhr.status === 200) {
+		            var blob = xhr.response;
+
+		            // 서버에서 보낸 Content-Disposition 헤더 확인
+		            var disposition = xhr.getResponseHeader('Content-Disposition');
+		            var fileName = "excel.xlsx"; // 기본 파일명
+		            if (disposition && disposition.indexOf('filename*=') !== -1) {
+		                var matches = disposition.match(/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/);
+		                if (matches != null && matches[1]) {
+		                    fileName = decodeURIComponent(matches[1]);
+		                    // 접두사 UTF-8'' 제거
+		                    fileName = fileName.replace(/^UTF-8''/, '');
+		                }
+		            }
+
+		            // Blob 다운로드
+		            var link = document.createElement("a");
+		            link.href = window.URL.createObjectURL(blob);
+		            link.download = fileName; // 서버에서 가져온 이름 사용
+		            document.body.appendChild(link); // Firefox에서 필요
+		            link.click();
+		            document.body.removeChild(link);
+		        }
+		    };
+
+		    xhr.onloadend = function () {
+		        clearInterval(fakeInterval); // fake progress 중지
+		        showPer(100);
+		        setTimeout(function () {
+		            canvasModal.style.display = "none"; // 모달 숨김
+		        }, 500);
+		    };
+
+		    xhr.send();
+		});
+	});
 </script><style>
 .drilling .page-content-inner {
     padding: 30px 0;
@@ -780,7 +977,7 @@ li {
                         </div>
                         <div class="table-info-group">
                         	<span>Total: <span id="count">-</span>건</span>
-                        	<span class="pull-right"><img src="${pageContext.request.contextPath}/images/admins/excel.gif" style="cursor:hand" onClick="javascript:clickExcelDownload()"></span>
+                        	<span class="pull-right" id="btnSubmit"><img src="${pageContext.request.contextPath}/images/admins/excel.gif" style="cursor:hand"</span>
                         </div>
                         <div class="table-wrap">
                             <table>
@@ -835,7 +1032,6 @@ li {
     </div>
 </section>
 <!-- 페이지 컨테이너 끝 -->
-
 </form>
 </body>
 </html>

src/main/webapp/WEB-INF/views/admins/frame/mainframe.jsp

@@ -7,7 +7,92 @@
 <script>
 var waitWin;
 
+function showLoadingBar() {
+    document.getElementById("loadingModal").style.display = "flex";
+    document.getElementById("progressBar").style.width = "0%";
+    document.getElementById("progressText").innerText = "0%";
+}
+
+function hideLoadingBar() {
+    document.getElementById("loadingModal").style.display = "none";
+}
 </script>
+<style type="text/css">
+/* 전체 화면 반투명 배경 */
+#loadingModal {
+    display: none; /* 기본 숨김 */
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+/*     background: rgba(0,0,0,0.5); /* 반투명 검정 */ */
+    z-index: 9999;
+/*     display: flex; */
+    align-items: center;
+    justify-content: center;
+}
+
+/* 내용 박스 */
+#loadingContent {
+    background: #fff;
+    padding: 30px 50px;
+    border-radius: 10px;
+    text-align: center;
+    min-width: 300px;
+    box-shadow: 0 0 20px rgba(0,0,0,0.3);
+}
+
+/* 로딩 스피너 */
+.spinner {
+    border: 6px solid #f3f3f3; 
+    border-top: 6px solid #3498db; 
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    animation: spin 1s linear infinite;
+    margin: 0 auto 15px;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg);}
+    100% { transform: rotate(360deg);}
+}
+
+/* 진행률 바 */
+#progressWrap {
+    width: 100%;
+    height: 20px;
+    background: #eee;
+    border-radius: 10px;
+    margin: 10px 0;
+}
+
+#progressBar {
+    width: 0%;
+    height: 100%;
+    background: #4caf50;
+    border-radius: 10px;
+}
+
+#progressText {
+    margin-top: 5px;
+    font-weight: bold;
+}
+
+#canvasModal {
+	display:none; 
+	position:fixed; 
+	top:0; 
+	left:0; 
+	width:100%; 
+	height:100%; 
+    background: rgba(0,0,0,0.5); 
+    z-index:9999; 
+    align-items:center; 
+    justify-content:center;
+}
+</style>
 </head>
 <body leftmargin="0" topmargin="0" marginheight="0" marginwidth="0">
 <!--
@@ -18,5 +103,20 @@ var waitWin;
 
 <iframe src="${pageContext.request.contextPath}/admins/${menuId}/${pId}.do?isFirst=true" frameborder="0" height="740" width="100%" scrolling="yes" name="iframeMain" style="overflow-x: hidden;"></iframe>
 
+<!-- 로딩 모달 -->
+<div id="loadingModal">
+    <div id="loadingContent">
+        <div class="spinner"></div>
+        <div id="loadingText">엑셀 파일 생성 중...</div>
+        <div id="progressWrap">
+            <div id="progressBar"></div>
+        </div>
+        <div id="progressText">0%</div>
+    </div>
+</div>
+<!-- Canvas Modal -->
+<div id="canvasModal">
+    <canvas id="canvas" width="120" height="120" style="background:none;"></canvas>
+</div>
 </body>
 </html>