Home Esplora Aiuto
Registrati Accedi
orderqueen
/
oqpo-view
Segui 3
Vota 0
Forka 0
File Problemi 0 Pull Requests 0 Wiki
Sfoglia il codice sorgente

모바일 메인화면 수저

isna 2 anni fa
parent
02d0cf98c6
commit
33be7f6f5b
2 ha cambiato i file con 140 aggiunte e 74 eliminazioni
Visualizzazione separata Mostra Diff Stats
  1. 67 58
      src/main/webapp/mobile/app/main.html
  2. 73 16
      src/main/webapp/mobile/js/app/main.js

+ 67 - 58
src/main/webapp/mobile/app/main.html
Vedi File 

@@ -25,6 +25,36 @@
25 25 
 	<script src="../js/properties.js"></script>
26 26 
 	<script src="../../js/require.min.js" data-main="../js/config.js"></script>
27 27 
 	<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
28 
+	<style>
29 
+		.itp_graph_area {
30 
+			padding: 8px;
31 
+		}
32 
+		.itp_notify_row {
33 
+			display: flex;
34 
+			margin-top: 16px;
35 
+		}
36 
+		.noti_label  {
37 
+			width: 65px;
38 
+			text-align: left;
39 
+			margin-left: 8px;
40 
+		}
41 
+		.noti_text  {
42 
+			width: calc(100vw - 70px);
43 
+			text-overflow: ellipsis;
44 
+			overflow: hidden;
45 
+			text-align: left;
46 
+			margin-left: 10px;
47 
+		}
48 
+		.noti_content  {
49 
+			width: calc(100vw - 70px);
50 
+			overflow: auto;
51 
+			height: 100px;
52 
+			text-align: left;
53 
+			margin-left: 10px;
54 
+		}
55 
+
56 
+
57 
+	</style>
28 58 
 </head>
29 59 
 <body>
30 60 
 <div id="ITP_WRAPPER">
 
@@ -102,66 +132,14 @@
102 132 
 	</div>
103 133
104 134 
 	<div id="ITP_CONTAINER" class="fix">
105 
-		<div class="itp_mobile_contents">
106 
-			<div id="ITP_MAIN_CONTAINER" class="itp_main_box" style="display: none;">
135 
+		<div class="itp_mobile_contents">
136 
+			<div id="ITP_MAIN_CONTAINER" class="itp_main_box" style="display: block;">
107 137 
 				<div class="itp_note_header">
108 138 
 					<h1>> 공지사항</h1>
109 
-				</div>
110 
-				<div id="ITP_MODAL_NOTE_INFO" class="itp_note_popup modal itp_modal" style="display: none">
111 
-					<div class="popup_note">
112 
-						<div class="header">
113 
-							<div class="header_left">
114 
-								<label>공지사항</label>
115 
-							</div>
116 
-							<div class="header_right">
117 
-								<button type="button" id="ITP_BTN_MAIN_POP_NOTE_CLOSE"><img src="../img/close.png"></button>
118 
-							</div>
119 
-						</div>
120 
-						<div class="itp_pop_note_area">
121 
-							<div style="display:flex;">
122 
-								<div class="itp_note_title">
123 
-									<label>공지제목</label>
124 
-									<span>:</span>
125 
-									<div class="fnNoteNm">fasdddddddddddddddddddddddddddddddddddd</div>
126 
-								</div>
127 
-							</div>
128 
-							<div class="itp_pop_note_content">
129 
-								<div class="fnNote">fasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasd</div>
130 
-							</div>
131 
-						</div>
132 
-					</div>
133 
-				</div>
134 
-				<div class="itp_note_bar" style="display: none;">
135 
-					<h1>등록된 게시물이 없습니다.</h1>
136 
-				</div>
139 
+				</div>
137 140 
 				<div class="itp_note_bar">
138 141 
 					<ul id="ITP_NOTE_ROW" class="mb_0 panel-group itp_nav">
139 
-						<div id="ITP_NOTE_ROWCOPY" style="display: block;">
140 
-							<li>
141 
-								<div class="itp_note_info">
142 
-									<label>공지제목</label>
143 
-									<span>:</span>
144 
-									<div class="under fnNoteTitle">공지제목 테스트 ㅁㄴㅇㄻㄴㅇㄻ</div>
145 
-								</div>
146 
-								<div class="itp_note_info">
147 
-									<label>공지일</label>
148 
-									<span>:</span>
149 
-									<div class="fnNoteDt">2020.20.20</div>
150 
-								</div>
151 
-							</li>
152 
-							<li>
153 
-								<div class="itp_note_info">
154 
-									<label>공지제목</label>
155 
-									<span>:</span>
156 
-									<div class="under fnNoteTitle">공지제목 테스트 ㅁㄴㅇㄻㄴㅇㄻ</div>
157 
-								</div>
158 
-								<div class="itp_note_info">
159 
-									<label>공지일</label>
160 
-									<span>:</span>
161 
-									<div class="fnNoteDt">2020.20.20</div>
162 
-								</div>
163 
-							</li>
164 
-						</div>
142 
+
165 143 
 					</ul>
166 144 
 				</div>
167 145 
 				<div class="itp_note_header">
 
@@ -309,7 +287,6 @@
309 287 
 				</div>
310 288 
 			</div>
311 289 
 		</div>
312 
-
313 290 
 		<script src="../js/app/main.js"></script>
314 291 
 	</div>
315 292 
 	<footer id="ITP_FOOTER">
 
@@ -367,6 +344,38 @@
367 344 
 		</div>
368 345 
 	</footer>
369 346 
 	<aside id="ITP_ASIDE"></aside>
370 
-</div>
347 
+	<section>
348 
+		<div id="ITP_POP_NOTICE" class="popup2 mobile-pop-close" style="display: none;">
349 
+			<div class="pop" style="height:330px;">
350 
+				<div class="header">
351 
+					<div class="header_left">
352 
+						<label>공지내용</label>
353 
+					</div>
354 
+					<div class="header_right">
355 
+						<button type="button" class="btn-pop-close"><img src="../img/close.png"></button>
356 
+					</div>
357 
+				</div>
358 
+
359 
+				<div id="ITP_POP_NOTICE_AREA" class="popup_scroll">
360 
+					<div class="itp_notify_row">
361 
+						<span class="noti_label">공지제목</span>
362 
+						<span>:</span>
363 
+						<div class="fnNoteNm noti_text"></div>
364 
+					</div>
365 
+					<div class="itp_notify_row">
366 
+						<span class="noti_label">공지내용</span>
367 
+						<span>:</span>
368 
+						<div class="fnNote noti_content"></div>
369 
+					</div>
370 
+					<div class="itp_notify_row">
371 
+						<span class="noti_label">공지일</span>
372 
+						<span>:</span>
373 
+						<div class="fnNoteFromTo noti_text"></div>
374 
+					</div>
375 
+				</div>
376 
+			</div>
377 
+		</div>
378 
+	</section>
379 
+
371 380 
 </body>
372 381 
 </html>

+ 73 - 16
src/main/webapp/mobile/js/app/main.js
Vedi File 

@@ -22,7 +22,11 @@ let MAIN_CHART_SFT_STCK_CHART = '/api/main/chart/sft-stck-chart';
22 22 
 let MAIN_CHART_DELI_CHART = '/api/main/chart/deli-chart';
23 23
24 24 
 var chartCnt=0;
25 
-
25 
+var chartWidth=window.offsetWidth-16;
26 
+function clickNotify(nticeNo) {
27 
+	mobPopObj.popNotice.open(nticeNo);
28 
+}
29 
+
26 30 
 var mobMainObj = {
27 31 
 	init: function () {
28 32 
 		this.ui();
 
@@ -30,7 +34,7 @@ var mobMainObj = {
30 34 
 		this.count.init();
31 35 
 		this.chart.init();
32 36 
 	},
33 
-	ui: function() {
37 
+	ui: function() {
34 38 
 		var authTpCd = fn_make_user_info.get('authTpCd');
35 39 
 		if(authTpCd === '40' || authTpCd === '10') {
36 40 
 			$('#ITP_MAIN_HEADER_BRAND').show();
 
@@ -38,23 +42,40 @@ var mobMainObj = {
38 42 
 			$('#ITP_MAIN_HEADER_STORE').show();
39 43 
 		} else if(authTpCd === '60') {
40 44 
 			$('#ITP_MAIN_HEADER_SPPLY').show();
41 
-		}
45 
+		}
42 46 
 	},
43 47 
 	notice: {
44 48 
 		init: function () {
45 49 
 			this.load();
46 50 
 		},
47 51 
 		load: function () {
48 
-			var searchFn = function (result) {
49 
-				console.log(result);
50 
-				if(result.gridRecords > 0) {
51 
-
52 
+			var searhFn = function(result) {
53 
+				if(Array.isArray(result.gridRows) && result.gridRows.length ) {
54 
+					var s='', idx=1;
55 
+					for(var c of result.gridRows ) {
56 
+						let title=c.nticeTitl;
57 
+						if(title.length>62) {
58 
+							title=title.substr(0,62)+'...';
59 
+						}
60 
+						s+=`<li>
61 
+							<div class="itp_note_info">
62 
+								<label>공지제목</label>
63 
+								<span>:</span>
64 
+								<div class="under fnNoteTitle"><a href="javascript:clickNotify('${c.nticeNo}')">${title}</a></div>
65 
+							</div>
66 
+							<div class="itp_note_info">
67 
+								<label>공지일</label>
68 
+								<span>:</span>
69 
+								<div class="fnNoteDt">${c.addDt}</div>
70 
+							</div>
71 
+						</li>`;
72 
+					}
73 
+					$('#ITP_NOTE_ROW').html(s);
52 74 
 				} else {
53 
-
54 
-				}
75 
+					$('#ITP_NOTE_ROW').html('<div class="itp_note_bar" style="display: block;"> <h1>등록된 게시물이 없습니다.</h1> </div>')
76 
+				}
55 77 
 			};
56 
-			const param = {};
57 
-			fn_ajax_call(NTICE_DETAIL_GRID_LIST, JSON.stringify(param), searchFn, 'POST');
78 
+			fn_ajax_call(NTICE_DETAIL_GRID_LIST, "{}", searhFn, 'POST');
58 79 
 		}
59 80 
 	},
60 81 
 	count: {
 
@@ -140,7 +161,7 @@ var mobMainObj = {
140 161 
 					var options = {
141 162 
 						legend: { position: 'left' },
142 163 
 						bar: { groupWidth: "50%" },
143 
-						width: chartCnt==4? 245: 300,
164 
+						width: chartWidth,
144 165 
 					};
145 166 
 					var chart = new google.charts.Bar(document.getElementById('ITP_PCH_REQ_GRAPH'));
146 167 
 					// chart.draw(data, options);
 
@@ -159,7 +180,7 @@ var mobMainObj = {
159 180 
 					var options = {
160 181 
 						legend: { position: 'left' },
161 182 
 						bar: { groupWidth: "50%" },
162 
-						width: chartCnt==4? 245: 300,
183 
+						width: chartWidth,
163 184 
 					};
164 185 
 					var chart = new google.charts.Bar(document.getElementById('ITP_PCH_PODR_GRAPH'));
165 186 
 					// chart.draw(data, options);
 
@@ -178,7 +199,7 @@ var mobMainObj = {
178 199 
 						title: '구매요청 상위 품목',
179 200 
 						legend: { position: 'left' },
180 201 
 						bars: 'horizontal',
181 
-						width: 300,
202 
+						width: chartWidth,
182 203 
 					};
183 204 
 					console.log("xxxxxxxxxxx drawChartReqUp xxxxxxxxxxx")
184 205 
 
@@ -198,7 +219,7 @@ var mobMainObj = {
198 219 
 					var options = {
199 220 
 						// title: '정산',
200 221 
 						legend: { position: 'left' },
201 
-						width: 300,
222 
+						width: chartWidth,
202 223 
 					};
203 224 
 					var chart = new google.visualization.PieChart(document.getElementById('ITP_STTL_GRAPH'));
204 225 
 					console.log("xxxxxxxxxxx drawChartcore xxxxxxxxxxx", data, options )
 
@@ -215,7 +236,7 @@ var mobMainObj = {
215 236
216 237 
 					var options = {
217 238 
 						title: '',
218 
-						width: 900,
239 
+						width: chartWidth + 100,
219 240 
 						legend: { position: 'top' }
220 241 
 					};
221 242 
 
@@ -242,3 +263,39 @@ function appCallFnVersion(version) {
242 263 
 	MOBILE_APP_VERSION = version;
243 264 
 	console.log(MOBILE_APP_VERSION);
244 265 
 }
266 
+
267 
+let mobPopObj = {
268 
+	popNotice: {
269 
+		popId: 'ITP_POP_NOTICE',
270 
+		open: function (nticeNo) {
271 
+			mobPopObj.show(this.popId);
272 
+			this.search(nticeNo);
273 
+		},
274 
+		close: function() {
275 
+			mobPopObj.hide(this.popId);
276 
+		},
277 
+		search: function (nticeNo) {
278 
+			fn_ajax_call('/api/ntice/info-ntice', {nticeNo}, function(result) {
279 
+				// 브랜드그룹 셋팅
280 
+				$('#ITP_POP_NOTICE_AREA .fnNoteNm').html(result.nticeTitl);
281 
+				$('#ITP_POP_NOTICE_AREA .fnNote').html(result.nticeDesc);
282 
+				$('#ITP_POP_NOTICE_AREA .fnNoteFromTo').html(result.notiStDay+' ~ '+result.notiEdDay);
283 
+				/*
284 
+				$('#ITP_FORM_NOTICE_INFO_POPUP_AFFL_SHOP_NM').html(result.afflShopNm);
285 
+				$('#ITP_FORM_NOTICE_INFO_POPUP_BRAND_NM').html(result.brandNm);
286 
+				*/
287 
+			}, 'GET');
288 
+		},
289 
+
290 
+	},
291 
+	show: function(popId) {
292 
+		 console.log("popup show id=="+popId)
293 
+		$('#' + popId+' .btn-pop-close').on('click', function() {
294 
+			mobPopObj.hide(popId);
295 
+		});
296 
+		$('#' + popId).show();
297 
+	},
298 
+	hide: function(popId) {
299 
+		$('#' + popId).closest('.mobile-pop-close').hide();
300 
+	}
301 
+};