feat: 발주기관 통계 도우말 적용

src/main/webapp/WEB-INF/views/drilling/statistics/drilling_statistics.jsp

@@ -155,21 +155,21 @@ if (request.getSession().getAttribute("CLS") == null || "2".equals(request.getSe
                         <li class="category-item"></li>
                         <li class="category-item">통계</li>
                     </ul>
-                    <a href="#" class="btn btn-help">도움말</a>
+                    <a href="javascript:;" class="btn btn-help start-tour" onClick="fn_help_tour();">도움말</a>
                 </div>
                 <h1 class="page-title-1depth">통계</h1>
-                <div class="content-wrapper">
+                <div class="content-wrapper" data-target="content-wrapper">
                     <main class="flex flex-col lg:flex-row gap-4">
                         <aside class="w-full flex flex-col gap-4">
                             <div class="flex flex-col lg:flex-row gap-4">
-                                <div id="project-status-section" class="w-full lg:w-1/2 bg-white p-4 rounded-lg shadow-md">
+                                <div id="project-status-section" data-target="project-status-section" class="w-full lg:w-1/2 bg-white p-4 rounded-lg shadow-md">
                                     <h3 class="font-semibold text-gray-800 mb-2 text-4xl">건설현장 프로젝트 입력상태 별 그래프</h3>
                                     <div class="w-full h-[28rem] flex justify-center items-center">
                                         <canvas id="projectStatusChart"></canvas>
                                     </div>
                                 </div>
 		
-                                <div class="w-full lg:w-1/2 bg-white p-4 rounded-lg shadow-md flex flex-col">
+                                <div data-target="project-status-notice" class="w-full lg:w-1/2 bg-white p-4 rounded-lg shadow-md flex flex-col">
                                     <div class="flex justify-between items-center mb-2">
                                         <h3 class="font-semibold text-gray-800 text-4xl">알림 내역</h3>
                                         <a href="/drilling/notice.do" class="text-3xl text-blue-600 hover:underline">모두 보기</a>
@@ -180,23 +180,23 @@ if (request.getSession().getAttribute("CLS") == null || "2".equals(request.getSe
                                 </div>
                             </div>
 		
-							<div id="company-performance-section" class="bg-white p-4 rounded-lg shadow-md">
+							<div id="company-performance-section" data-target="company-performance-section" class="bg-white p-4 rounded-lg shadow-md">
 	                            <h3 class="font-semibold text-gray-800 mb-4 text-4xl">수주기관별 성과 현황</h3>
 	                            <div id="company-performance-list" class="overflow-x-auto">
 	                                <div class="p-4 text-center text-gray-500">성과 현황을 불러오는 중입니다...</div>
 	                            </div>
 	                        </div>      
 
-							<div id="data-quality-section" class="bg-white p-4 rounded-lg shadow-md">
+							<div id="data-quality-section" data-target="data-quality-section" class="bg-white p-4 rounded-lg shadow-md">
 								<h3 class="font-semibold text-gray-800 mb-4 text-4xl">데이터 품질 현황 (수정 요청 횟수)</h3>
 								<div class="flex flex-col lg:flex-row gap-4">
-									<div class="w-full lg:w-2/3">
+									<div class="w-full lg:w-2/3" data-target="data-quality-section-by-const" >
 										<h4 class="text-3xl font-medium text-gray-700 mb-2">수주기관별 누적 수정 요청 횟수</h4>
 										<div id="revision-by-company-list" class="overflow-x-auto">
 											<div class="p-4 text-center text-gray-500">데이터를 불러오는 중입니다...</div>
 										</div>
 									</div>
-									<div class="w-full lg:w-1/3">
+									<div class="w-full lg:w-1/3" data-target="data-quality-section-top5-const" >
 										<h4 class="text-3xl font-medium text-gray-700 mb-2">수정 요청 많은 프로젝트 Top 5</h4>
 										<div id="revision-by-project-list" class="overflow-x-auto">
 											<div class="p-4 text-center text-gray-500">데이터를 불러오는 중입니다...</div>
@@ -211,7 +211,7 @@ if (request.getSession().getAttribute("CLS") == null || "2".equals(request.getSe
                                 
                                                                                                 
                                 <div class="flex justify-center">
-									    <button id="export-pdf-btn" class="w-full md:w-[15%] bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded-lg flex items-center justify-center transition duration-300 text-3xl">
+									    <button id="export-pdf-btn" data-target="export-pdf-btn" class="w-full md:w-[15%] bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded-lg flex items-center justify-center transition duration-300 text-3xl">
                                         <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
                                         PDF로 내보내기
                                     </button>
@@ -643,6 +643,49 @@ function displayHistoryList(response) {
         console.error("Error fetching history list:", response.resultMessage);
     }
 }
+
+/* 도움말 시작 */
+function fn_help_tour(){
+	var pageTitle = "시추정보 관리";
+	iGuider({
+		tourTitle: pageTitle,
+		intro:{
+			title: '통계 사용방법이 궁금하신가요?',
+			content: '통계 사용설명을 진행하겠습니다.'
+		},
+		steps:[{
+			title:'Step 1',
+			content: '통계는 등록된 건설현장의 시추정보 입력 현황을 확인하는데 목적이 있습니다. <span style="color: #ff2032">이를 위해, 발주기관에서 입력한 건설현장이 수주기관의 기업 사용자 계정과 연결되어야 합니다.</span>',
+			target:'content-wrapper'
+		},{
+			title:'Step 2',
+			content: '건설현장 상태별 그래프를 보여줍니다.<br /><ul style="list-style-type: circle;"><li style="margin-left: 10px;">미입력 : 발주기관에 의해 건설현장(프로젝트)만 등록된 상태입니다.</li><li style="margin-left: 10px;">입력중 : 수주기관에서 시추정보를 입력중인 상태입니다.</li><li style="margin-left: 10px;">검수준비중 : 수주기관에서 시추정보입력이 완료되어 등록 요청한 상태입니다.</li><li style="margin-left: 10px;">검수중 : 국토지반정보 포털시스템에서 등록을 위해 검수중입니다.</li><li style="margin-left: 10px;">수정요청 : 국토지반정보 포털시스템에서 작성자에게 수정을 요청한 상태입니다.</li><li style="margin-left: 10px;">검수완료 : 건설현장 시추정보 입력이 검수되어 등록이 완료된 상태입니다.</li></ul>',
+			target:'project-status-section'
+		},{
+			title:'Step 3',
+			content: '건설현장 상태 변화 이력을 보여줍니다.',
+			target:'project-status-notice'
+		},{
+			title:'Step 4',
+			content: '수주기관별 건설현장 상태 보기 기능을 제공합니다. 수주기관별 시추정보 입력 상황을 한눈에 보실 때 사용됩니다.',
+			target:'company-performance-section'
+		},{
+			title:'Step 5',
+			content: '수주기관에서 시추정보를 입력하여 등록을 요청하면 국토지반정보 포털시스템 검수자는 입력된 내용에 대하여 검수를 진행합니다. 이때 등록을 허용할지 아니면 잘못된 부분이 있어서 수정을 요청할지 결정합니다. 때로는 여러 번 등록을 거절당하여 여러 번 수정을 진행하는 경우도 존재합니다. 지반보고서에 오탈자가 있는 경우, 이를 그대로 입력하여 수정요청이 발생하기도 합니다. 그 횟수를 보여줍니다.',
+			target:'data-quality-section-by-const'
+		},{
+			title:'Step 6',
+			content: '프로젝트별 가장 많은 수정요청을 받은 프로젝트 Top 5개를 보여줍니다.',
+			target:'data-quality-section-top5-const'
+		},{
+			title:'Step 7',
+			content: '통계화면을 그대로 PDF로 다운로드합니다.',
+			target:'export-pdf-btn'
+		}],
+	});
+	return false;
+}
+/* 도움말 끝 */
 </script>
 
 <%@ include file="/include/inc_footer_2021_new.jsp" %>