Merge branch 'master' of http://106.246.249.162:13000/orderqueen/oqpo-view

src/main/webapp/app/popup/biz/BIZPOP_PO_PAYMENT.html

@@ -8,7 +8,7 @@
 			<div class="modal-body">
 			
 				<div class="itp_form itp_type1 fix">
-					<div class="col-xs-12">
+					<div class="col-xs-12 itp_ip">
 					수발주 <b><span id="ITP_BIZPOP_PO_PAYMENT_PAY_TP_NM"></span></b>을 위해 아래 항목을 입력을 한 후에 결제 버튼을 클릭하여 PG사 결제 절차에 따라 결재을 진행해 주시기 바랍니다.
 					<br>
 					<br>
@@ -38,25 +38,25 @@
 							
 								<div class="form-group">
 									<label class="col-xs-2 itp_lb">주문번호</label>
-									<div class="col-xs-10 itp_ip fnPoOrdNo"></div>									
+									<div class="col-xs-9 itp_ip fnPoOrdNo"></div>									
 								</div>
 								<div class="form-group">
 									<label class="col-xs-2 itp_lb">구매자명</label>
-									<div class="col-xs-10 itp_ip fnOrdNm"></div>									
+									<div class="col-xs-9 itp_ip fnOrdNm"></div>									
 								</div>
 								<div class="form-group">
 									<label class="col-xs-2 itp_lb">상품명</label>
-									<div class="col-xs-10 itp_ip fnGoodsNm"></div>									
+									<div class="col-xs-9 itp_ip fnGoodsNm"></div>									
 								</div>
 								<div class="form-group">
 									<label class="col-xs-2 itp_lb">결제금액*</label>
-									<div class="col-xs-10 itp_ip">
+									<div class="col-xs-9 itp_ip">
 									<input type="text" id="ITP_FORM_PO_PAYMENT_POPUP_GOODS_AMT" class="form-control itp_input" name="goodsAmt" />
 									</div>									
 								</div>
 								<div class="form-group">
 									<label class="col-xs-2 itp_lb">결제방법*</label>
-									<div class="col-xs-10 itp_ip">
+									<div class="col-xs-9 itp_ip">
 										<div class="col-xs-5 itp_ip">
 											<select id="ITP_FORM_PO_PAYMENT_POPUP_PAY_METHOD" class="form-control itp_input" name="payMethod">
 												<option value="11">신용카드</option>
@@ -67,13 +67,13 @@
 								</div>								
 								<div class="form-group">
 									<label class="col-xs-2 itp_lb">휴대폰번호*</label>
-									<div class="col-xs-10 itp_ip">
+									<div class="col-xs-9 itp_ip">
 									<input type="text" id="ITP_FORM_PO_PAYMENT_POPUP_ORD_TEL" class="form-control itp_input" name="ordTel" placeholder="010-0000-0000" />
 									</div>									
 								</div>
 								<div class="form-group">
 									<label class="col-xs-2 itp_lb">이메일</label>
-									<div class="col-xs-10 itp_ip">
+									<div class="col-xs-9 itp_ip">
 									<input type="text" id="ITP_FORM_PO_PAYMENT_POPUP_ORD_EMAIL" class="form-control itp_input" name="ordEmail" />
 									</div>									
 								</div>								

src/main/webapp/css/style.css

@@ -122,21 +122,28 @@ 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:80%; height:100px; display:inline-block;}
-#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 {width:49.8%; height:380px; display:inline-block;}
+#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_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;}
+#ITP_NOTE_BAR .itp_side_bar_note {padding:0 15px;}
+#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: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([
@@ -47,14 +47,12 @@ function drawChartReq() {
   ]);
 
   var options = {
-    chart: {
-     legend: { position: 'bottom' }
-    }
+    	legend: { position: 'left' }
   };
 
   var chart = new google.charts.Bar(document.getElementById('ITP_PCH_REQ_GRAPH'));
 
-  chart.draw(data, google.charts.Bar.convertOptions());
+  chart.draw(data, options);
 }
 
 //구매발주 그래프
@@ -65,14 +63,12 @@ function drawChartPodr() {
 	  ]);
 
 	  var options = {
-	    chart: {
-	    	legend: { position: 'bottom' }
-	    }
+	    	legend: { position: 'left' }	
 	  };
 
 	  var chart = new google.charts.Bar(document.getElementById('ITP_PCH_PODR_GRAPH'));
 
-	  chart.draw(data, google.charts.Bar.convertOptions());
+	  chart.draw(data, options);
 	}
 
 //구매요청 상위 품목 그리드
@@ -83,16 +79,14 @@ function drawChartReqUp() {
   ]);
 
   var options = {
-    chart: {
       title: '구매요청 상위 품목(일주일)',
-      legend: { position: 'bottom' }
-    },
-    bars: 'horizontal' // Required for Material Bar Charts.
+	  legend: { position: 'left' },
+	  bars: 'horizontal'
   };
 
   var chart = new google.charts.Bar(document.getElementById('ITP_PCH_REQ_UP_ITEM_GRAPH'));
 
-  chart.draw(data, google.charts.Bar.convertOptions(options));
+  chart.draw(data, options);
 }
 
 //정산 그래프
@@ -107,7 +101,7 @@ function drawChartcore() {
 
     var options = {
 		title: '정산',
-		legend: { position: 'bottom' }
+		legend: { position: 'left' }	
     };
 
     var chart = new google.visualization.PieChart(document.getElementById('ITP_STTL_GRAPH'));
@@ -115,6 +109,27 @@ function drawChartcore() {
     chart.draw(data, options);
   }
 
+
+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/js/app/oper/ITP_OPER01010.js

@@ -54,18 +54,22 @@ const gridColModel = {
 			index: 'AFFL_SHOP_NM', name: 'afflShopNm',
 			label: ITP_MSG_LOCALE.label.afflShopNm, //브랜드그룹
 			width: '10', fixed: false, align: 'left',
+			minwidth: 150, maxwidth: 250,
 			sortable: false, hidden: false
 		},
 		{
 			index: 'BRAND_NM', name: 'brandNm',
 			label: ITP_MSG_LOCALE.label.brandNm, //브랜드
 			width: '13', fixed: false, align: 'left',
+			minwidth: 150, maxwidth: 250,
 			sortable: false, hidden: false
 		},
 		{
 			index: 'USER_ID', name: 'userId',
 			label: ITP_MSG_LOCALE.label.userId, //사용자ID
 			width: '10', fixed: false, align: 'left',
+			minwidth: 120, maxwidth: 200,
+
 			sortable: false, hidden: false
 		},
 		{
@@ -84,6 +88,7 @@ const gridColModel = {
 			index: 'TEL_NO', name: 'telNo',
 			label: ITP_MSG_LOCALE.label.telephone, //휴대폰 번호
 			width: '10', fixed: false, align: 'center',
+			minwidth: 150, maxwidth: 250,
 			sortable: false, hidden: false
 		},
 		{
@@ -108,6 +113,7 @@ const gridColModel = {
 			index: 'LAST_LOGIN_DT', name: 'lastLoginDt',
 			label: ITP_MSG_LOCALE.label.lastLogin, //마지막 로그인
 			width: '10', fixed: false, align: 'center',
+			minwidth: 150, maxwidth: 250,
 			sortable: false, hidden: false
 		}
 	],

src/main/webapp/js/app/oper/ITP_OPER02010.js

@@ -43,6 +43,7 @@ const gridColModel = {
 			index: 'AFFL_SHOP_NM', name: 'afflShopNm',
 			label: ITP_MSG_LOCALE.label.afflShopNm, //브랜드그룹
 			width: '10', fixed: false, align: 'center',
+			minwidth: 150, maxwidth: 250,
 			sortable: false, hidden: false
 		},
 		{
@@ -66,13 +67,14 @@ const gridColModel = {
 		{
 			index: 'NTICE_STAT_NM', name: 'nticeStatNm',
 			label: ITP_MSG_LOCALE.label.status, //상태
-			width: '6', fixed: false, align: 'center',
+			width: '7', fixed: false, align: 'center',
 			sortable: false, hidden: false
 		},
 		{
 			index: 'NOTI_ST_DAY', name: 'notiStDay',
 			label: ITP_MSG_LOCALE.label.viewDt, //노출일
 			width: '12', fixed: false, align: 'center',
+			minwidth: 180, maxwidth: 250,
 			sortable: false, hidden: false
 		},
 		{

src/main/webapp/main.html

@@ -146,97 +146,137 @@
 						<article class="itp_detail">
 							<div id="ITP_AJAX_SUMMARY_DETAIL_CONTAINER" class="itp_det_in">
 								<!-- 여기는 공급사 매장 로그인 시 나오는 구간 -->
+								<div id="ITP_NOTE_BAR">
+									<div class="itp_side_bar_header">
+										<label>공지사항</label>
+									</div>
+									<div class="itp_side_bar_note">
+										<label class="fn">공지 1제목 조금 긴 제목</label>
+										<label class="date fn">2022.11.01</label>
+										<div class="fn">공지1 내용 들어가는곳fasdfdddddddddddddddasdfasdfsfdasdasdsadsaasdasdasdadsadaasdasdafddddddddddddddddddddddsdsfsdfdsfsdfddasdsadasdssds </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 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: inline-block;">
-									<div class="col_4">
-										<div class="itp_header_label ">
+									<div class="col_4" style="margin-left:0">
+										<div class="itp_header_label">
 										구매요청 
 										</div>
-										<div class="itp_header_result ">
+										<div class="itp_header_result fn">
 										10건
 										</div>
 									</div>
-									<div class="col_4">
-										<div class="itp_header_label ">
+									<div class="col_4" style="margin:0 3%;">
+										<div class="itp_header_label">
 										발주진행
 										</div>
-										<div class="itp_header_result ">
+										<div class="itp_header_result fn">
 										10건
 										</div>
 									</div>
 									<div class="col_4">
-										<div class="itp_header_label ">
+										<div class="itp_header_label">
 										발주완료
 										</div>
-										<div class="itp_header_result ">
+										<div class="itp_header_result fn">
 										10건
 										</div>
 									</div>
-									<div class="col_4">
-										<div class="itp_header_label ">
+									<div class="col_4" style="margin-right:0; float:right;">
+										<div class="itp_header_label">
 										구매가능금액
 										</div>
-										<div class="itp_header_result ">
+										<div class="itp_header_result fn">
 										1,000,000원
 										</div>
 									</div>
 								</div>
 								<div id="ITP_MAIN_HEADER" style="display: none;">
-									<div class="col_3">
-										<div class="itp_header_label ">
+									<div class="col_3" style="margin-left:0">
+										<div class="itp_header_label">
 										구매요청 건수
 										</div>
-										<div class="itp_header_result ">
+										<div class="itp_header_result fn">
 										10건
 										</div>
 									</div>
-									<div class="col_3">
-									<div class="itp_header_label ">
+									<div class="col_3" style="margin:5px 6%;">
+										<div class="itp_header_label">
 										구매요청건수
 										</div>
-										<div class="itp_header_result ">
+										<div class="itp_header_result fn">
 										10건
 										</div>
 									</div>
-									<div class="col_3">
-									<div class="itp_header_label ">
+									<div class="col_3" style="margin-right:0; float:right;">
+										<div class="itp_header_label">
 										구매요청건수
 										</div>
-										<div class="itp_header_result ">
+										<div class="itp_header_result fn">
 										10건
 										</div>
 									</div>
 								</div>
-								<div id="ITP_SIDE_BAR">
-									<div class="itp_side_bar_header">
-										<label>공지사항</label>
+								<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_side_bar_note">
-										<label class="fn">공지 1제목</label>
-										<label class="fn">2022.11.01</label>
-										<div class="fn">공지1 내용 들어가는곳 </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_side_bar_note">
-										<label class="fn">공지 2제목</label>
-										<label class="fn">2022.11.01</label>
-										<div class="fn">공지 1 내용 가나다라마바상라ㅣㅁㄴ리ㅏㄴ멀ㄴ얾너ㅣㅏ럼나ㅣ럼니ㅏ;ㅓ리만;ㅓ라ㅣ;ㅁ너라ㅣ;먼리ㅏFASDFASDFASDFASDFASFDASDFASDFASDFASFASDFDASF;머리ㅏ;머라ㅣ;ㅁ너ㅣㅏ런ㅁ이ㅏ;러</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_side_bar_note">
-										<label class="fn">공지 3제목</label>
-										<label class="fn">2022.11.01</label>
-										<div class="fn">SDVASDFASFASDFASFASDFASFDASDFASFASDFSADFSADF</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_side_bar_note">
-										<label class="fn">공지 4제목</label>
-										<label class="fn">2022.11.01</label>
-										<div class="fn">ASDFASDFASFDASDFSDFSDAFSDAFSDAFSDFSDFASDFASDFASDFASDFASDFASDFDASF</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 id="ITP_MAIN_GRAPH_AREA">
-									<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>
 							</div>
 						</article>
 					</div>