메인화면 수정

src/main/webapp/css/style.css

@@ -126,12 +126,17 @@ a, button {outline:none !important; text-decoration:none !important;}
 #ITP_MAIN_HEADER .col_3 {background:#eee; width:27%; height:80px; display:inline-block; margin:5px 23px; border-radius:8px;}
 #ITP_MAIN_HEADER .col_3 .itp_header_label {padding:12px 18px 3px 18px; font-size:17px; font-weight:700;}
 #ITP_MAIN_HEADER .col_3 .itp_header_result {font-size:18px; font-weight:700; color:blue; text-align: right; padding:4px 18px;}
+
+#ITP_MAIN_HEADER .col_4 {background:#eee; width:22%; height:80px; display:inline-block; margin:5px 11px; border-radius:8px;}
+#ITP_MAIN_HEADER .col_4 .itp_header_label {padding:12px 18px 3px 18px; font-size:17px; font-weight:700;}
+#ITP_MAIN_HEADER .col_4 .itp_header_result {font-size:18px; font-weight:700; color:blue; text-align: right; padding:4px 18px;}
+
 #ITP_SIDE_BAR {background:#eee; width:20%; height:100%; float:right; border-radius:15px;}
 #ITP_SIDE_BAR .itp_side_bar_header {padding-top:15px; text-align:center; font-size:17px;}
 #ITP_SIDE_BAR .itp_side_bar_note {padding:15px;}
 #ITP_SIDE_BAR .itp_side_bar_note label {width:100%; margin-bottom:8px;}
 #ITP_MAIN_GRAPH_AREA {width:80%; height:770px;}
-#ITP_MAIN_GRAPH_AREA .itp_graph_area {border:1px solid #000; width:49.8%; height:380px; display:inline-block;}
+#ITP_MAIN_GRAPH_AREA .itp_graph_area {width:49.8%; height:380px; display:inline-block;}
 /* ITP_HEADER */
 #ITP_HEADER .itp_head {font-family: 'GmarketSansMedium';width:100%; height:50px; position:relative; line-height:50px; z-index:100;}
 #ITP_HEADER .itp_tit {margin:0; padding:0; line-height:50px; font-size:20px;}

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

@@ -49,6 +49,7 @@ function drawChartReq() {
 
   var options = {
     chart: {
+    	width:'100%'
     }
   };
 
@@ -60,12 +61,13 @@ function drawChartReq() {
 //구매발주 그래프
 function drawChartPodr() {
 	  var data = google.visualization.arrayToDataTable([
-	    ['구매요청', '대기', '반려', '승인'],
-	    ['2014', 1000, 400, 200]
+	    ['구매발주', '요청', '진행', '취소'],
+	    ['2014', 3.5, 1.7, 1.2]
 	  ]);
 
 	  var options = {
 	    chart: {
+	    	width:'100%'
 	    }
 	  };
 
@@ -77,13 +79,14 @@ function drawChartPodr() {
 //구매요청 상위 품목 그리드
 function drawChartReqUp() {
   var data = google.visualization.arrayToDataTable([
-    ['Year', 'Sales', 'Expenses', 'Profit'],
-    ['항목 1', 1000, 400, 200],
+    ['Year', '품목5', '품목4', '품목3','품목2','품목1'],
+    ['항목 1', 17, 15, 12, 10, 8],
   ]);
 
   var options = {
     chart: {
       title: '구매요청 상위 품목(일주일)',
+      width:'100%'
     },
     bars: 'horizontal' // Required for Material Bar Charts.
   };
@@ -98,15 +101,14 @@ function drawChartcore() {
 
     var data = google.visualization.arrayToDataTable([
       ['Task', 'Hours per Day'],
-      ['Work',     11],
-      ['Eat',      2],
-      ['Commute',  2],
-      ['Watch TV', 2],
-      ['Sleep',    7]
+      ['요청', 25],
+      ['확인', 65],
+      ['반려', 10],
     ]);
 
     var options = {
-      title: '정산'
+		title: '정산',
+		width:'100%'
     };
 
     var chart = new google.visualization.PieChart(document.getElementById('ITP_STTL_GRAPH'));

src/main/webapp/main.html

@@ -145,7 +145,42 @@
 						<h2 class="hidden">메뉴안내</h2>
 						<article class="itp_detail">
 							<div id="ITP_AJAX_SUMMARY_DETAIL_CONTAINER" class="itp_det_in">
-								<div id="ITP_MAIN_HEADER">
+								<!-- 여기는 공급사 매장 로그인 시 나오는 구간 -->
+								<div id="ITP_MAIN_HEADER" style="display: inline-block;">
+									<div class="col_4">
+										<div class="itp_header_label ">
+										구매요청 
+										</div>
+										<div class="itp_header_result ">
+										10건
+										</div>
+									</div>
+									<div class="col_4">
+										<div class="itp_header_label ">
+										발주진행
+										</div>
+										<div class="itp_header_result ">
+										10건
+										</div>
+									</div>
+									<div class="col_4">
+										<div class="itp_header_label ">
+										발주완료
+										</div>
+										<div class="itp_header_result ">
+										10건
+										</div>
+									</div>
+									<div class="col_4">
+										<div class="itp_header_label ">
+										구매가능금액
+										</div>
+										<div class="itp_header_result ">
+										1,000,000원
+										</div>
+									</div>
+								</div>
+								<div id="ITP_MAIN_HEADER" style="display: none;">
 									<div class="col_3">
 										<div class="itp_header_label ">
 										구매요청 건수