메인화면 수정

src/main/webapp/css/style.css

@@ -127,9 +127,9 @@ a, button {outline:none !important; text-decoration:none !important;}
 #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: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_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_NOTE_BAR {background:#eee; width:100%; height:160px; float:right; border-radius:15px;}
 #ITP_NOTE_BAR .itp_side_bar_header {padding-top:12px; text-align:center; font-size:17px;}
@@ -137,8 +137,13 @@ a, button {outline:none !important; text-decoration:none !important;}
 #ITP_NOTE_BAR .itp_side_bar_note label {width:15%; margin-bottom:8px;}
 #ITP_NOTE_BAR .itp_side_bar_note label.date {width:10%;}
 #ITP_NOTE_BAR .itp_side_bar_note div {position:relative; top:7px; width:74%; display:inline-block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
-#ITP_MAIN_GRAPH_AREA {width:80%; height:770px;}
-#ITP_MAIN_GRAPH_AREA .itp_graph_area {width:49.8%; height:380px; display:inline-block;}
+#ITP_MAIN_GRAPH_AREA {width:100%; height:1200px;}
+#ITP_MAIN_GRAPH_AREA .itp_graph_box {width:49.8%; height:400px; display:inline-block;}
+#ITP_MAIN_GRAPH_AREA .itp_graph_box .itp_graph_area {width:75%; height:400px; display:inline-block; float:right;}
+#ITP_MAIN_GRAPH_AREA .itp_graph_box .itp_graph_side {width:24%; height:400px; display:inline-block; }
+#ITP_MAIN_GRAPH_AREA .itp_graph_box .itp_graph_side select {width:88%; margin:12px; height:30px;}
+#ITP_MAIN_GRAPH_AREA .itp_graph_box .itp_graph_info_bar {width:50%; height:300px; margin:0 auto;}
+#ITP_MAIN_GRAPH_AREA .itp_graph_box .itp_graph_info_bar .itp_graph_info {margin-top:40px; padding: 24px 26px; background:#eee; width:80px; font-size:26px; height:205px; display:inline-block; border:1px solid #ccc; border-radius:15px;}
 /* 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

@@ -38,7 +38,7 @@ google.charts.setOnLoadCallback(drawChartReq);
 google.charts.setOnLoadCallback(drawChartPodr);
 google.charts.setOnLoadCallback(drawChartReqUp);
 google.charts.setOnLoadCallback(drawChartcore);
-
+google.charts.setOnLoadCallback(drawLine);
 //구매요청 그래프
 function drawChartReq() {
   var data = google.visualization.arrayToDataTable([
@@ -80,7 +80,8 @@ function drawChartReqUp() {
 
   var options = {
       title: '구매요청 상위 품목(일주일)',
-	  legend: { position: 'left' }
+	  legend: { position: 'left' },
+	  bars: 'horizontal'
   };
 
   var chart = new google.charts.Bar(document.getElementById('ITP_PCH_REQ_UP_ITEM_GRAPH'));
@@ -109,6 +110,25 @@ function drawChartcore() {
   }
 
 
+function drawLine() {
+  var data = google.visualization.arrayToDataTable([
+    ['Year', '안전재고수량', '현재재고수량'],
+    ['품목1',  1000,      400],
+    ['품목2',  1170,      460],
+    ['품목3',  660,       1120],
+    ['품목4',  1660,      120],
+    ['품목5',  660,       520],
+  ]);
+
+  var options = {
+    title: '',
+    legend: { position: 'top' }
+  };
+
+  var chart = new google.visualization.LineChart(document.getElementById('ITP_SAFE_STCK_GRAPH'));
+
+  chart.draw(data, options);
+}
 
 var itp_fn_MAIN_NOTICE_grid = {
 	init: function() {

src/main/webapp/main.html

@@ -160,9 +160,14 @@
 										<label class="date fn">2022.11.01</label>
 										<div class="fn">공지 1 내용 가나다라마바상라ㅣㅁㄴ리ㅏㄴ멀ㄴ얾ㅣ;ㅁ너ㅣㅏ런ㅁ이ㅏ;러</div>
 									</div>
+									<div class="itp_side_bar_note">
+										<label class="fn">공지 2제목</label>
+										<label class="date fn">2022.11.01</label>
+										<div class="fn">공지 1 내용 가나다라마바상라ㅣㅁㄴ리ㅏㄴ멀ㄴ얾ㅣ;ㅁ너ㅣㅏ런ㅁ이ㅏ;러</div>
+									</div>
 								</div>
-								<div id="ITP_MAIN_HEADER" style="display: none;">
-									<div class="col_4">
+								<div id="ITP_MAIN_HEADER" style="display: inline-block;">
+									<div class="col_4" style="margin-left:0">
 										<div class="itp_header_label">
 										구매요청 
 										</div>
@@ -170,7 +175,7 @@
 										10건
 										</div>
 									</div>
-									<div class="col_4">
+									<div class="col_4" style="margin:0 3%;">
 										<div class="itp_header_label">
 										발주진행
 										</div>
@@ -186,7 +191,7 @@
 										10건
 										</div>
 									</div>
-									<div class="col_4">
+									<div class="col_4" style="margin-right:0; float:right;">
 										<div class="itp_header_label">
 										구매가능금액
 										</div>
@@ -195,7 +200,7 @@
 										</div>
 									</div>
 								</div>
-								<div id="ITP_MAIN_HEADER" style="display: inline-block;">
+								<div id="ITP_MAIN_HEADER" style="display: none;">
 									<div class="col_3" style="margin-left:0">
 										<div class="itp_header_label">
 										구매요청 건수
@@ -221,11 +226,56 @@
 										</div>
 									</div>
 								</div>
-								<div id="ITP_MAIN_GRAPH_AREA" style="display:none;">
-									<div id="ITP_PCH_REQ_GRAPH" class="itp_graph_area"></div>
-									<div id="ITP_PCH_PODR_GRAPH" class="itp_graph_area"></div>
-									<div id="ITP_PCH_REQ_UP_ITEM_GRAPH" class="itp_graph_area"></div>
-									<div id="ITP_STTL_GRAPH" class="itp_graph_area"></div>
+								<div id="ITP_MAIN_GRAPH_AREA">
+									<div class="itp_graph_box">
+										<div class="itp_graph_side">
+											<select>
+												<option>fasdf</option>
+											</select>
+											<div class="itp_graph_info_bar">
+												<div class="itp_graph_info">구매요청</div>
+											</div>
+										</div>
+										<div id="ITP_PCH_REQ_GRAPH" class="itp_graph_area"></div>
+									</div>
+									<div class="itp_graph_box">
+										<div class="itp_graph_side">
+											<select>
+												<option>fasdf</option>
+											</select>
+											<div class="itp_graph_info_bar">
+												<div class="itp_graph_info">구매발주</div>
+											</div>
+										</div>
+										<div id="ITP_PCH_PODR_GRAPH" class="itp_graph_area"></div>
+									</div>
+									<div class="itp_graph_box">
+										<div class="itp_graph_side">
+											<select>
+												<option>fasdf</option>
+											</select>
+											<div class="itp_graph_info_bar">
+												<div class="itp_graph_info">매출순위</div>
+											</div>
+										</div>
+										<div id="ITP_PCH_REQ_UP_ITEM_GRAPH" class="itp_graph_area"></div>
+									</div>
+									<div class="itp_graph_box">
+										<div class="itp_graph_side">
+											<div class="itp_graph_info_bar">
+												<div class="itp_graph_info" style="padding-top:8px;">&nbsp;정&nbsp;&nbsp;산</div>
+											</div>
+										</div>
+										<div id="ITP_STTL_GRAPH" class="itp_graph_area"></div>
+									</div>
+									<div class="itp_graph_box" style="width:100%">
+										<div class="itp_graph_side" style="width:12%;">
+											<div class="itp_graph_info_bar">
+												<div class="itp_graph_info">안전재고</div>
+											</div>
+										</div>
+										<div id="ITP_SAFE_STCK_GRAPH" class="itp_graph_area" style="width:87%;"></div>
+									</div>
 								</div>
 							</div>
 						</article>