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

src/main/webapp/css/style.css

@@ -121,6 +121,17 @@ a, button {outline:none !important; text-decoration:none !important;}
 #ITP_LOGIN .itp_login_input input:valid + label {top:15px; font-size:8px; color: #2691d9;}
 #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_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_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

@@ -30,6 +30,90 @@ require(['config'], function() {
 	});
 });
 
+//그래프 
+google.charts.load('current', {'packages':['corechart']});
+google.charts.load('current', {'packages':['bar']});
+
+
+google.charts.setOnLoadCallback(drawChartReq);
+google.charts.setOnLoadCallback(drawChartPodr);
+google.charts.setOnLoadCallback(drawChartReqUp);
+google.charts.setOnLoadCallback(drawChartcore);
+
+//구매요청 그래프
+function drawChartReq() {
+  var data = google.visualization.arrayToDataTable([
+    ['구매요청', '대기', '반려', '승인',],
+    ['2014', 4.2 , 2.5 , 2]
+  ]);
+
+  var options = {
+    chart: {
+    }
+  };
+
+  var chart = new google.charts.Bar(document.getElementById('ITP_PCH_REQ_GRAPH'));
+
+  chart.draw(data, google.charts.Bar.convertOptions());
+}
+
+//구매발주 그래프
+function drawChartPodr() {
+	  var data = google.visualization.arrayToDataTable([
+	    ['구매요청', '대기', '반려', '승인'],
+	    ['2014', 1000, 400, 200]
+	  ]);
+
+	  var options = {
+	    chart: {
+	    }
+	  };
+
+	  var chart = new google.charts.Bar(document.getElementById('ITP_PCH_PODR_GRAPH'));
+
+	  chart.draw(data, google.charts.Bar.convertOptions());
+	}
+
+//구매요청 상위 품목 그리드
+function drawChartReqUp() {
+  var data = google.visualization.arrayToDataTable([
+    ['Year', 'Sales', 'Expenses', 'Profit'],
+    ['항목 1', 1000, 400, 200],
+  ]);
+
+  var options = {
+    chart: {
+      title: '구매요청 상위 품목(일주일)',
+    },
+    bars: 'horizontal' // Required for Material Bar Charts.
+  };
+
+  var chart = new google.charts.Bar(document.getElementById('ITP_PCH_REQ_UP_ITEM_GRAPH'));
+
+  chart.draw(data, google.charts.Bar.convertOptions(options));
+}
+
+//정산 그래프
+function drawChartcore() {
+
+    var data = google.visualization.arrayToDataTable([
+      ['Task', 'Hours per Day'],
+      ['Work',     11],
+      ['Eat',      2],
+      ['Commute',  2],
+      ['Watch TV', 2],
+      ['Sleep',    7]
+    ]);
+
+    var options = {
+      title: '정산'
+    };
+
+    var chart = new google.visualization.PieChart(document.getElementById('ITP_STTL_GRAPH'));
+
+    chart.draw(data, options);
+  }
+
 var itp_fn_MAIN_NOTICE_grid = {
 	init: function() {
 		// 데이터 없을때

src/main/webapp/main.html

@@ -145,300 +145,75 @@
 						<h2 class="hidden">메뉴안내</h2>
 						<article class="itp_detail">
 							<div id="ITP_AJAX_SUMMARY_DETAIL_CONTAINER" class="itp_det_in">
-								<div class="itp_boardView">
-								
-									<form id="ITP_FORM_MAIN_NOTICE_SEARCH" class="form-horizontal">
-									<input type="hidden" id="ITP_FORM_MAIN_NOTICE_SEARCH_FROM_DT" name="fromDt" value="">
-									<input type="hidden" id="ITP_FORM_MAIN_NOTICE_SEARCH_TO_DT" name="toDt" value="">
-									<input type="hidden" id="ITP_FORM_MAIN_NOTICE_SEARCH_SCH_DT" name="schDt" value="">
-									<input type="hidden" id="ITP_FORM_MAIN_NOTICE_SEARCH_NTICE_TITL" name="sNticeTitl" value="">
-									<input type="hidden" id="ITP_FORM_MAIN_NOTICE_SEARCH_USER_ID" name="userId" value="">
-									</form>
-									
-									<div class="fix" style="padding-bottom: 15px;">
-										<div id="ITP_MAIN_NOTICE_jqGrid_list" class="itp_tb_list itp_gType1" data-total-cnt="${totalCnt}">
-											<div id="ITP_MAIN_NOTICE_jqGridView" class="itp_views fix"></div>
-											<table id="ITP_MAIN_NOTICE_jqGrid"></table>
-											<div id="ITP_MAIN_NOTICE_jqGridPager"></div>
-											<div id="ITP_MAIN_NOTICE_jqGridEmpty" class="itp_no_data"></div>
+								<div id="ITP_MAIN_HEADER">
+									<div class="col_3">
+										<div class="itp_header_label ">
+										구매요청 건수
+										</div>
+										<div class="itp_header_result ">
+										10건
+										</div>
+									</div>
+									<div class="col_3">
+									<div class="itp_header_label ">
+										구매요청건수
+										</div>
+										<div class="itp_header_result ">
+										10건
+										</div>
+									</div>
+									<div class="col_3">
+									<div class="itp_header_label ">
+										구매요청건수
+										</div>
+										<div class="itp_header_result ">
+										10건
 										</div>
 									</div>
-								
-									<table id="ITP_SUMMARY_jqGrid_list" class="table table-striped table-bordered">
-										<colgroup>
-											<col style="width:15%;">
-											<col style="width:15%;">
-											<col style="width:40%;">
-											<col style="width:15%;">
-											<col style="width:15%;">
-										</colgroup>
-										<thead>
-											<tr>
-								                <th>1Depth</th>
-								                <th>2Depth</th>
-								                <th>화면 정의</th>
-								                <th>가맹담당자 사용</th>
-								                <th>매장담당자 사용</th>
-								            </tr>
-										</thead>
-										<tbody>
-											<tr class="USER_TYPE_N">
-								                <th rowspan="4">누리키 운영관리</th>
-								                <td>브랜드그룹정보관리</td>
-								                <td>브랜드그룹 정보를 등록 관리를 합니다.</td>
-								                <td align="center">-</td>
-								                <td align="center">-</td>
-								            </tr>
-								            <tr class="USER_TYPE_N">
-								                <td>영업운영자관리</td>
-								                <td>외부 영업담당자 정보를 등록 관리합니다.</td>
-								                <td align="center">-</td>
-								                <td align="center">-</td>
-								            </tr>
-								            <tr class="USER_TYPE_N">
-								                <td>VAN관리</td>
-								                <td>카드결재 가능 VAN사 정보를 관리합니다.</td>
-								                <td align="center">-</td>
-								                <td align="center">-</td>
-								            </tr>
-								            <tr class="USER_TYPE_N">
-								                <td>장비환경기본값 설정</td>
-								                <td>키오스크 장비의 환경설정값을 관리합니다.</td>
-								                <td align="center">-</td>
-								                <td align="center">-</td>
-								            </tr>
-								            <tr class="USER_TYPE_N USER_TYPE_P">
-								                <th rowspan="3">브랜드그룹관리</th>
-								                <td>가맹브랜드관리</td>
-								                <td>브랜드그룹별 브랜드 정보를 관리합니다.</td>
-								                <td align="center">●</td>
-								                <td align="center">-</td>
-								            </tr>
-								            <tr class="USER_TYPE_N USER_TYPE_P">
-								                <td>매장관리</td>
-								                <td>브랜드그룹 매장 정보를 관리합니다.</td>
-								                <td align="center">●</td>
-								                <td align="center">-</td>
-								            </tr>
-								            <tr class="USER_TYPE_N USER_TYPE_P">
-								                <td>사용자관리</td>
-								                <td>브랜드그룹별 사용자 정보를 관리합니다.</td>
-								                <td align="center">●</td>
-								                <td align="center">-</td>
-								            </tr>
-								            <tr class="USER_TYPE_N USER_TYPE_P USER_TYPE_B">
-								                <th rowspan="5">브랜드상품관리</th>
-								                <td>카테고리관리</td>
-								                <td>모든 매장에서 공통으로 사용할 상품 카테고리 정보를 관리합니다.</td>
-								                <td align="center">●</td>
-								                <td align="center">-</td>
-								            </tr>
-								            <tr class="USER_TYPE_N USER_TYPE_P USER_TYPE_B">
-								                <td>상품관리</td>
-								                <td>모든 매장에서 공통으로 사용할 상품 정보를 관리합니다.</td>
-								                <td align="center">●</td>
-								                <td align="center">-</td>
-								            </tr>
-								            <tr class="USER_TYPE_N USER_TYPE_P USER_TYPE_B">
-								                <td>옵션관리</td>
-								                <td>모든 매장에서 공통으로 사용할 옵션 정보를 관리합니다.</td>
-								                <td align="center">●</td>
-								                <td align="center">-</td>
-								            </tr>
-								            <tr class="USER_TYPE_N USER_TYPE_P USER_TYPE_B">
-								                <td>추천상품관리</td>
-								                <td>모든 매장에서 공통으로 사용할 추천상품 정보를 관리합니다.</td>
-								                <td align="center">●</td>
-								                <td align="center">-</td>
-								            </tr>
-								            <tr class="USER_TYPE_N USER_TYPE_P USER_TYPE_B">
-								                <td>이벤트관리</td>
-								                <td>모든 매장에서 공통으로 사용할 이벤트를 관리합니다.</td>
-								                <td align="center">●</td>
-								                <td align="center">-</td>
-								            </tr>
-								            <tr class="USER_TYPE_N USER_TYPE_P USER_TYPE_B USER_TYPE_S">
-								                <th rowspan="5">매장상품관리</th>
-								                <td>카테고리관리</td>
-								                <td>매장별 각각 사용할 상품 카테고리 정보를 관리합니다.</td>
-								                <td align="center">●</td>
-								                <td align="center">●</td>
-								            </tr>
-								            <tr class="USER_TYPE_N USER_TYPE_P USER_TYPE_B USER_TYPE_S">
-								                <td>상품관리</td>
-								                <td>매장별 각각 사용할 상품 정보를 관리합니다.</td>
-								                <td align="center">●</td>
-								                <td align="center">●</td>
-								            </tr>
-								            <tr class="USER_TYPE_N USER_TYPE_P USER_TYPE_B USER_TYPE_S">
-								                <td>옵션관리</td>
-								                <td>매장별 각각 사용할 옵션 정보를 관리합니다.</td>
-								                <td align="center">●</td>
-								                <td align="center">●</td>
-								            </tr>
-								            <tr class="USER_TYPE_N USER_TYPE_P USER_TYPE_B USER_TYPE_S">
-								                <td>추천상품관리</td>
-								                <td>매장별 각각 사용할 추천상품 정보를 관리합니다.</td>
-								                <td align="center">●</td>
-								                <td align="center">●</td>
-								            </tr>
-								            <tr class="USER_TYPE_N USER_TYPE_P USER_TYPE_B USER_TYPE_S">
-								                <td>이벤트관리</td>
-								                <td>매장별 각각 사용할 이벤트를 관리합니다.</td>
-								                <td align="center">●</td>
-								                <td align="center">●</td>
-								            </tr>
-								            
-								            <!-- 키오스크관리 시작 -->
-								            <tr class="USER_TYPE_N USER_TYPE_P USER_TYPE_B">
-								                <th rowspan="5">키오스크관리</th>
-								                <td>브랜드 코너관리</td>
-								                <td>모든 매장의 키오스크 장비에 출력할 코너 정보를 관리합니다.</td>
-								                <td align="center">●</td>
-								                <td align="center"></td>
-								            </tr>
-								            <tr class="USER_TYPE_N USER_TYPE_P USER_TYPE_B">
-								                <td>브랜드 코너별 상품정보</td>
-								                <td>모든 매장의 키오스크 장비에 출력할 코너별 상품 정보를 관리합니다.</td>
-								                <td align="center">●</td>
-								                <td align="center"></td>
-								            </tr>
-								            <tr class="USER_TYPE_N USER_TYPE_P USER_TYPE_B">
-								                <td>매장 코너관리</td>
-								                <td>매장별 운영중인 키오스크 장비에 출력할 코너 정보를 관리합니다.</td>
-								                <td align="center">●</td>
-								                <td align="center">●</td>
-								            </tr>
-								            <tr class="USER_TYPE_N USER_TYPE_P USER_TYPE_B">
-								                <td>매장 코너별 상품정보</td>
-								                <td>매장별 운영중인 키오스크 장비에 출력할 코너별 상품 정보를 관리합니다.</td>
-								                <td align="center">●</td>
-								                <td align="center">●</td>
-								            </tr>
-								            <tr class="USER_TYPE_N USER_TYPE_P USER_TYPE_B">
-								                <td>매장 판매상품관리</td>
-								                <td>매장별 키오스크에 판매할 상품정보를 관리합니다.</td>
-								                <td align="center">●</td>
-								                <td align="center">●</td>
-								            </tr>
-								            
-								            <tr class="USER_TYPE_S">
-								                <th rowspan="3">키오스크관리</th>
-								                <td>매장 코너관리</td>
-								                <td>매장별 운영중인 키오스크 장비에 출력할 코너 정보를 관리합니다.</td>
-								                <td align="center">●</td>
-								                <td align="center">●</td>
-								            </tr>
-								            <tr class="USER_TYPE_S">
-								                <td>매장 코너별 상품정보</td>
-								                <td>매장별 운영중인 키오스크 장비에 출력할 코너별 상품 정보를 관리합니다.</td>
-								                <td align="center">●</td>
-								                <td align="center">●</td>
-								            </tr>
-								            <tr class="USER_TYPE_S">
-								                <td>매장 판매상품관리</td>
-								                <td>매장별 키오스크에 판매할 상품정보를 관리합니다.</td>
-								                <td align="center">●</td>
-								                <td align="center">●</td>
-								            </tr>
-								            <!-- 키오스크관리 끝 -->
-								            
-								            <tr class="USER_TYPE_N USER_TYPE_P USER_TYPE_B USER_TYPE_S">
-								                <th rowspan="4">매장장비관리</th>
-								                <td>키오스크정보관리</td>
-								                <td>매장별 사용 관리할 키오스크 장비 정보를 관리합니다.</td>
-								                <td align="center">●</td>
-								                <td align="center">●</td>
-								            </tr>
-								            <tr class="USER_TYPE_N USER_TYPE_P USER_TYPE_B USER_TYPE_S">
-								                <td>키오스크 이미지관리</td>
-								                <td>매장별 사용 관리할 키오스크 화면에 출력할 이미지 또는 동영상 정보를 관리합니다.</td>
-								                <td align="center">●</td>
-								                <td align="center">●</td>
-								            </tr>
-								            <tr class="USER_TYPE_N USER_TYPE_P USER_TYPE_B USER_TYPE_S">
-								                <td>주방프린터설정</td>
-								                <td>매장별 사용하고 있는 주방프린터 설정 정보를 관리합니다.</td>
-								                <td align="center">●</td>
-								                <td align="center">●</td>
-								            </tr>
-								            <tr class="USER_TYPE_N USER_TYPE_P USER_TYPE_B USER_TYPE_S">
-								                <td>KDS설정</td>
-								                <td>매장별 사용하고 있는 KDS설정 정보를 관리합니다.</td>
-								                <td align="center">●</td>
-								                <td align="center">●</td>
-								            </tr>
-								            <tr class="USER_TYPE_N USER_TYPE_P USER_TYPE_B USER_TYPE_S">
-								                <th rowspan="3">DID관리</th>
-								                <td>컨텐츠관리</td>
-								                <td>가맹 브랜드별 컨텐츠 내역 정보를 관리합니다.</td>
-								                <td align="center">●</td>
-								                <td align="center">●</td>
-								            </tr>
-								            <tr class="USER_TYPE_N USER_TYPE_P USER_TYPE_B USER_TYPE_S">
-								                <td>디스플레이정보관리</td>
-								                <td>가맹 브랜드별 디스플레이 화면 구성 정보 및 출력할 컨텐츠 정보를 관리합니다.</td>
-								                <td align="center">●</td>
-								                <td align="center">●</td>
-								            </tr>
-								            <tr class="USER_TYPE_N USER_TYPE_P USER_TYPE_B USER_TYPE_S">
-								                <td>장비관리</td>
-								                <td>매장별 사용중인 DID 장비 정보를 관리합니다.</td>
-								                <td align="center">●</td>
-								                <td align="center">●</td>
-								            </tr>
-								            <tr class="USER_TYPE_N USER_TYPE_P USER_TYPE_B">
-								                <th rowspan="3">브랜드매출관리</th>
-								                <td>일별매출현황</td>
-								                <td>가맹 브랜드별 일일 매출 정보를 출력합니다.</td>
-								                <td align="center">●</td>
-								                <td align="center"></td>
-								            </tr>
-								            <tr class="USER_TYPE_N USER_TYPE_P USER_TYPE_B">
-								                <td>월별매출현황</td>
-								                <td>가맹 브랜드별 월별 매출 정보를 출력합니다.</td>
-								                <td align="center">●</td>
-								                <td align="center"></td>
-								            </tr>
-								            <tr class="USER_TYPE_N USER_TYPE_P USER_TYPE_B">
-								                <td>상품별매출현황</td>
-								                <td>가맹 브랜드별 월별 상품별 매출 정보를 출력합니다.</td>
-								                <td align="center">●</td>
-								                <td align="center"></td>
-								            </tr>
-								            <tr class="USER_TYPE_N USER_TYPE_P USER_TYPE_B USER_TYPE_S">
-								                <th rowspan="4">매장매출관리</th>
-								                <td>매출상세내역</td>
-								                <td>매장 키오스크별 주문 내역 상세정보를 출력합니다.</td>
-								                <td align="center">●</td>
-								                <td align="center">●</td>
-								            </tr>
-								            <tr class="USER_TYPE_N USER_TYPE_P USER_TYPE_B USER_TYPE_S">
-								                <td>일별매출현황</td>
-								                <td>매장별 일일 매출 정보를 출력합니다.</td>
-								                <td align="center">●</td>
-								                <td align="center">●</td>
-								            </tr>
-								            <tr class="USER_TYPE_N USER_TYPE_P USER_TYPE_B USER_TYPE_S">
-								                <td>월별매출현황</td>
-								                <td>매장별 월별 매출 정보를 출력합니다.</td>
-								                <td align="center">●</td>
-								                <td align="center">●</td>
-								            </tr>
-								            <tr class="USER_TYPE_N USER_TYPE_P USER_TYPE_B USER_TYPE_S">
-								                <td>상품별매출현황</td>
-								                <td>매장별 월별 상품별 매출 정보를 출력합니다.</td>
-								                <td align="center">●</td>
-								                <td align="center">●</td>
-								            </tr>
-								            
-										</tbody>
-									</table>
+								</div>
+								<div id="ITP_SIDE_BAR">
+									<div class="itp_side_bar_header">
+										<label>공지사항</label>
+									</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>
+									<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>
+									<div class="itp_side_bar_note">
+										<label class="fn">공지 3제목</label>
+										<label class="fn">2022.11.01</label>
+										<div class="fn">SDVASDFASFASDFASFASDFASFDASDFASFASDFSADFSADF</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>
+								</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>
-		
+					<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
 					<script src="./js/app/summary/ITP_SUMMARY.js"></script>
 					<script src="./js/app/main.js"></script>
 				</section>