메인화면 카운트

src/main/webapp/css/style.css

@@ -122,14 +122,14 @@ a, button {outline:none !important; text-decoration:none !important;}
 #ITP_LOGIN .itp_login_input:not(:placeholder-shown) ~ label{top:0px; font-size:12px;}
 
 /* 메인화면 */
-#ITP_MAIN_HEADER { width:100%; height:60px; display:inline-block;}
-#ITP_MAIN_HEADER .col_3 {background:#eee; width:26%; height:50px; display:inline-block; margin:5px 48px; border-radius:8px;}
-#ITP_MAIN_HEADER .col_3 .itp_header_label {width:160px; padding:13px 16px; font-size:17px; font-weight:700; display:inline-block;}
-#ITP_MAIN_HEADER .col_3 .itp_header_result {width:auto; float: right; display:inline-block; font-size:18px; font-weight:700; color:blue; text-align: right; padding:12px;}
-
-#ITP_MAIN_HEADER .col_4 {background:#eee; width:22%; height:50px; display:inline-block; margin:5px 11px; border-radius:8px;}
-#ITP_MAIN_HEADER .col_4 .itp_header_label {width:125px; padding:13px 16px; font-size:17px; font-weight:700; display:inline-block;}
-#ITP_MAIN_HEADER .col_4 .itp_header_result {width:auto; float: right; display:inline-block; font-size:18px; font-weight:700; color:blue; text-align: right; padding:12px;}
+.itp_main_header { width:100%; height:60px; display:inline-block;}
+.itp_main_header .col_3 {background:#eee; width:26%; height:50px; display:inline-block; margin:5px 48px; border-radius:8px;}
+.itp_main_header .col_3 .itp_header_label {width:160px; padding:13px 16px; font-size:17px; font-weight:700; display:inline-block;}
+.itp_main_header .col_3 .itp_header_result {width:auto; float: right; display:inline-block; font-size:18px; font-weight:700; color:blue; text-align: right; padding:12px;}
+
+.itp_main_header .col_4 {background:#eee; width:22%; height:50px; display:inline-block; margin:5px 11px; border-radius:8px;}
+.itp_main_header .col_4 .itp_header_label {width:130px; padding:13px 16px; font-size:17px; font-weight:700; display:inline-block;}
+.itp_main_header .col_4 .itp_header_result {width:auto; float: right; display:inline-block; font-size:18px; font-weight:700; color:blue; text-align: right; padding:12px;}
 
 #ITP_NOTE_BAR {background:#eee; width:100%; float:right; border-radius:15px;}
 #ITP_NOTE_BAR .itp_side_bar_header {padding-top:12px; text-align:center; font-size:17px;}

src/main/webapp/js/app/main.js

@@ -5,6 +5,7 @@ const MAIN_NOTICE_GRID_PAGER = '#ITP_MAIN_NOTICE_jqGridPager';
 const MAIN_NOTICE_GRID_EMPTY = '#ITP_MAIN_NOTICE_jqGridEmpty';
 
 let NTICE_DETAIL_GRID_LIST = '/api/ntice/main-detail-grid-list';
+let MAIN_CHART_COUNT = '/api/main/chart/count';
 let MAIN_CHART_PCH_REQ_CHART = '/api/main/chart/pch-req-chart';
 let MAIN_CHART_PCH_ODR_CHART = '/api/main/chart/pch-odr-chart';
 let MAIN_CHART_PR_RANK_CHART = '/api/main/chart/pr-rank-chart';
@@ -22,13 +23,10 @@ require(['config'], function() {
 			// 시간지정
 			// $('#ITP_FORM_MAIN_NOTICE_SEARCH_SCH_DT').val(itp_fn_date_format(new Date(), 2));
 			// $('#ITP_FORM_MAIN_NOTICE_SEARCH_USER_ID').val(fn_make_user_info.get('userId'));
-			
-			// 그리드
-			// itp_fn_MAIN_NOTICE_grid.init();
-	    	// itp_fn_fire_window_resize();
 
 			// 조회
 	    	itp_fn_MAIN_NOTICE_search();
+			itp_fn_MAIN_COUNT();
 
 			$('#ITP_FORM_MAIN_SEARCH_PR_TYPE').on('change', function() {
 				drawChartReq();
@@ -58,6 +56,10 @@ require(['config'], function() {
 			google.charts.load('current', {'packages':['corechart']});
 			google.charts.load('current', {'packages':['bar']});
 			
+			$('#ITP_MAIN_HEADER_BRAND').hide();
+			$('#ITP_MAIN_HEADER_STORE').hide();
+			$('#ITP_MAIN_HEADER_SPPLY').hide();
+			
 			$('#ITP_MAIN_DRAW_CHART_REQ').hide();
 			$('#ITP_MAIN_DRAW_CHART_PODR').hide();
 			$('#ITP_MAIN_DRAW_CHART_REQ_UP').hide();
@@ -71,6 +73,8 @@ require(['config'], function() {
 			// console.log('>>>> authTpCd = ' + authTpCd);
 			
 			if( authTpCd == '40' ) { // 브랜드
+				$('#ITP_MAIN_HEADER_BRAND').show();
+			
 				$('#ITP_MAIN_DRAW_CHART_REQ').show();  
 				google.charts.setOnLoadCallback(drawChartReq); // 구매요청
 				
@@ -84,8 +88,11 @@ require(['config'], function() {
 				google.charts.setOnLoadCallback(drawChartcore); // 정산
 			
 				$('#ITP_MAIN_DRAW_LINE').show();	
+				$('#ITP_MAIN_DRAW_LINE .itp_main_draw_line').show();	
 				google.charts.setOnLoadCallback(drawLine); // 안전재고
 			} else if( authTpCd == '50' ) { // 매장
+				$('#ITP_MAIN_HEADER_STORE').show();
+			
 				$('#ITP_MAIN_DRAW_CHART_REQ').show();  
 				google.charts.setOnLoadCallback(drawChartReq); // 구매요청
 				
@@ -99,6 +106,7 @@ require(['config'], function() {
 				google.charts.setOnLoadCallback(drawChartcore); // 정산
 				
 			} else if( authTpCd == '60' ) { // 공급사
+				$('#ITP_MAIN_HEADER_SPPLY').show();
 			
 				$('#ITP_MAIN_DRAW_ORDERS_CHART').show();  
 				google.charts.setOnLoadCallback(drawChartOrders); // 수주내역
@@ -280,6 +288,28 @@ function drawLine() {
   
 }
 
+var itp_fn_MAIN_COUNT = function() {
+	
+	const key = { brandId:fn_make_user_info.get('brandId'), storeId:fn_make_user_info.get('storeId'), spplyId:fn_make_user_info.get('spplyId') };
+	var param = $.param(key);
+	fn_ajax_call(MAIN_CHART_COUNT, param, function(result) {
+		
+		$('#ITP_AJAX_SUMMARY_DETAIL_CONTAINER .fnPr20Count').text( itp_fn_number_comma( result.pr20Count ) + '건' );
+		$('#ITP_AJAX_SUMMARY_DETAIL_CONTAINER .fnDp02Amt').text( itp_fn_number_comma( result.dp02Amt ) + '원' );
+		$('#ITP_AJAX_SUMMARY_DETAIL_CONTAINER .fnUnpaidAmt').text( itp_fn_number_comma( result.unpaidAmt ) + '원' );
+				
+		$('#ITP_AJAX_SUMMARY_DETAIL_CONTAINER .fnPo30Count').text( itp_fn_number_comma( result.po30Count ) + '건' );		
+		$('#ITP_AJAX_SUMMARY_DETAIL_CONTAINER .fnPoEndCount').text( itp_fn_number_comma( result.poEndCount ) + '건' );		
+		$('#ITP_AJAX_SUMMARY_DETAIL_CONTAINER .fnPoPsblAmt').text( itp_fn_number_comma( result.poPsblAmt ) + '원' );
+				
+		$('#ITP_AJAX_SUMMARY_DETAIL_CONTAINER .fnOrdersCount').text( itp_fn_number_comma( result.ordersCount ) + '건' );		
+		$('#ITP_AJAX_SUMMARY_DETAIL_CONTAINER .fnOrdersAmt').text( itp_fn_number_comma( result.ordersAmt ) + '원' );		
+		$('#ITP_AJAX_SUMMARY_DETAIL_CONTAINER .fnSttlReqAmt').text( itp_fn_number_comma( result.sttlReqAmt ) + '원' );		
+		
+	}, 'GET');
+	
+}
+
 var itp_fn_MAIN_NOTICE_search = function() {
 	// itp_fn_MAIN_NOTICE_grid.unload();
 	// itp_fn_MAIN_NOTICE_grid.callBack();

src/main/webapp/main.html

@@ -162,12 +162,40 @@
 										<label>공지사항</label>
 									</div>
 								</div>
-								<div id="ITP_MAIN_HEADER" style="display: inline-block;">
+								
+								<div id="ITP_MAIN_HEADER_BRAND" class="itp_main_header" style="display: none;">
+									<div class="col_3" style="margin-left:0">
+										<div class="itp_header_label">
+										구매요청 건수
+										</div>
+										<div class="itp_header_result fnPr20Count">
+										10건
+										</div>
+									</div>
+									<div class="col_3" style="margin:5px 6%;">
+										<div class="itp_header_label">
+										당일 입금액
+										</div>
+										<div class="itp_header_result fnDp02Amt">
+										10건
+										</div>
+									</div>
+									<div class="col_3" style="margin-right:0; float:right;">
+										<div class="itp_header_label">
+										미납금
+										</div>
+										<div class="itp_header_result fnUnpaidAmt">
+										10건
+										</div>
+									</div>
+								</div>
+								
+								<div id="ITP_MAIN_HEADER_STORE" class="itp_main_header" style="display: none;">
 									<div class="col_4" style="margin-left:0">
 										<div class="itp_header_label">
 										구매요청 
 										</div>
-										<div class="itp_header_result fn">
+										<div class="itp_header_result fnPr20Count">
 										10건
 										</div>
 									</div>
@@ -175,15 +203,15 @@
 										<div class="itp_header_label">
 										발주진행
 										</div>
-										<div class="itp_header_result fn">
+										<div class="itp_header_result fnPo30Count">
 										10건
 										</div>
 									</div>
 									<div class="col_4">
 										<div class="itp_header_label">
-										발주완료
+										당일 발주완료
 										</div>
-										<div class="itp_header_result fn">
+										<div class="itp_header_result fnPoEndCount">
 										10건
 										</div>
 									</div>
@@ -191,39 +219,41 @@
 										<div class="itp_header_label">
 										구매가능금액
 										</div>
-										<div class="itp_header_result fn">
+										<div class="itp_header_result fnPoPsblAmt">
 										1,000,000원
 										</div>
 									</div>
 								</div>
-								<div id="ITP_MAIN_HEADER" style="display: none;">
+								
+								<div id="ITP_MAIN_HEADER_SPPLY" class="itp_main_header" style="display: none;">
 									<div class="col_3" style="margin-left:0">
 										<div class="itp_header_label">
-										구매요청 건수
+										당일 수주건수
 										</div>
-										<div class="itp_header_result fn">
+										<div class="itp_header_result fnOrdersCount">
 										10건
 										</div>
 									</div>
 									<div class="col_3" style="margin:5px 6%;">
 										<div class="itp_header_label">
-										구매요청건수
+										당일 수주금액
 										</div>
-										<div class="itp_header_result fn">
+										<div class="itp_header_result fnOrdersAmt">
 										10건
 										</div>
 									</div>
 									<div class="col_3" style="margin-right:0; float:right;">
 										<div class="itp_header_label">
-										구매요청건수
+										정산요청금액
 										</div>
-										<div class="itp_header_result fn">
+										<div class="itp_header_result fnSttlReqAmt">
 										10건
 										</div>
 									</div>
 								</div>
+								
 								<div id="ITP_MAIN_GRAPH_AREA">
-									<div class="itp_graph_box" id="ITP_MAIN_DRAW_CHART_REQ">
+									<div class="itp_graph_box" id="ITP_MAIN_DRAW_CHART_REQ" style="display: none;">
 										<div class="itp_graph_side">
 											<select id="ITP_FORM_MAIN_SEARCH_PR_TYPE" name="prType">
 												<option value="A">당일</option>
@@ -238,7 +268,7 @@
 										<div id="ITP_PCH_REQ_GRAPH" class="itp_graph_area"></div>
 									</div>
 									
-									<div class="itp_graph_box" id="ITP_MAIN_DRAW_DELI_CHART">
+									<div class="itp_graph_box" id="ITP_MAIN_DRAW_DELI_CHART" style="display: none;">
 										<div class="itp_graph_side">
 											<select id="ITP_FORM_MAIN_SEARCH_DELI_TYPE" name="deliType">
 												<option value="A">당일</option>
@@ -253,7 +283,7 @@
 										<div id="ITP_DELI_GRAPH" class="itp_graph_area"></div>
 									</div>
 									
-									<div class="itp_graph_box" id="ITP_MAIN_DRAW_ORDERS_CHART">
+									<div class="itp_graph_box" id="ITP_MAIN_DRAW_ORDERS_CHART" style="display: none;">
 										<div class="itp_graph_side">
 											<select id="ITP_FORM_MAIN_SEARCH_ORDERS_TYPE">
 												<option value="A">당일</option>
@@ -268,7 +298,7 @@
 										<div id="ITP_ORDERS_GRAPH" class="itp_graph_area"></div>
 									</div>
 									
-									<div class="itp_graph_box" id="ITP_MAIN_DRAW_RELEASE_CHART">
+									<div class="itp_graph_box" id="ITP_MAIN_DRAW_RELEASE_CHART" style="display: none;">
 										<div class="itp_graph_side">
 											<select id="ITP_FORM_MAIN_SEARCH_RELEASE_TYPE">
 												<option value="A">당일</option>
@@ -283,7 +313,7 @@
 										<div id="ITP_RELEASE_GRAPH" class="itp_graph_area"></div>
 									</div>
 									
-									<div class="itp_graph_box" id="ITP_MAIN_DRAW_CHART_PODR">
+									<div class="itp_graph_box" id="ITP_MAIN_DRAW_CHART_PODR" style="display: none;">
 										<div class="itp_graph_side">
 											<select id="ITP_FORM_MAIN_SEARCH_PO_TYPE" name="poType">
 												<option value="A">당일</option>
@@ -298,7 +328,7 @@
 										<div id="ITP_PCH_PODR_GRAPH" class="itp_graph_area"></div>
 									</div>
 									
-									<div class="itp_graph_box" id="ITP_MAIN_DRAW_CHART_REQ_UP">
+									<div class="itp_graph_box" id="ITP_MAIN_DRAW_CHART_REQ_UP" style="display: none;">
 										<div class="itp_graph_side">
 											<select id="ITP_FORM_MAIN_SEARCH_ITEM_CNT_TYPE" name="itemCntType">
 												<option value="A">당일</option>
@@ -312,7 +342,8 @@
 										</div>
 										<div id="ITP_PCH_REQ_UP_ITEM_GRAPH" class="itp_graph_area"></div>
 									</div>
-									<div class="itp_graph_box" id="ITP_MAIN_DRAW_CHART_CORE">
+									
+									<div class="itp_graph_box" id="ITP_MAIN_DRAW_CHART_CORE" style="display: none;">
 										<div class="itp_graph_side">
 											<div class="itp_graph_info_bar">
 												<div class="itp_graph_info" style="padding-top:8px;">&nbsp;정&nbsp;&nbsp;산</div>
@@ -320,8 +351,9 @@
 										</div>
 										<div id="ITP_STTL_GRAPH" class="itp_graph_area"></div>
 									</div>
-									<div class="itp_graph_box" style="width:100%" id="ITP_MAIN_DRAW_LINE">
-										<div class="itp_graph_side" style="width:12%;">
+									
+									<div class="itp_graph_box" style="width:100%" id="ITP_MAIN_DRAW_LINE" style="display: none;">
+										<div class="itp_graph_side itp_main_draw_line" style="width:12%; display: none;" >
 											<div class="itp_graph_info_bar">
 												<div class="itp_graph_info">안전재고</div>
 											</div>