LeeWeiCheng
/
altob.st123
1
0
Förgrening 0
Kod Ärenden 0 Pull-förfrågningar 0 Släpp 0 Wiki Aktiviteter
VM暫存
Du kan inte välja fler än 25 ämnen Ämnen måste starta med en bokstav eller siffra, kan innehålla bindestreck ('-') och vara max 35 tecken långa.
8 Incheckningar
5 Grenar
790KB
Träd: b504ce584f
Grenar Taggar
${ item.name }
Skapa branchen ${ searchTerm }
från 'b504ce584f'
${ noResults }
altob.st123/views/qcar2/main_page.php

455 lines
16KB
Rå Blame Historik 

  1. <!DOCTYPE html>

  2. <html lang="zh-TW">

  3. <head>

  4.     <meta charset="utf-8">

  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">

  6.     <meta name="viewport" content="width=device-width, initial-scale=1">

  7.     <meta name="description" content="">

  8.     <meta name="author" content="">

  9.     <title>歐特儀自動化服務機</title>

  10.     <!-- Bootstrap Core CSS -->

  11.     <link href="<?=BOOTSTRAPS?>bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">

  12.     <!-- MetisMenu CSS -->

  13.     <link href="<?=BOOTSTRAPS?>bower_components/metisMenu/dist/metisMenu.min.css" rel="stylesheet">

  14.     <!-- Timeline CSS -->

  15.     <link href="<?=BOOTSTRAPS?>dist/css/timeline.css" rel="stylesheet">

  16.     <!-- Custom CSS -->

  17.     <link href="<?=BOOTSTRAPS?>dist/css/sb-admin-3.css" rel="stylesheet">

  18.     <!-- Morris Charts CSS -->

  19.     <link href="<?=BOOTSTRAPS?>bower_components/morrisjs/morris.css" rel="stylesheet">

  20.     <!-- Custom Fonts -->

  21.     <link href="<?=BOOTSTRAPS?>bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">

  22. 

  23. </head>

  24. <body style="font-family:Microsoft JhengHei;">

  25.     <div id="wrapper">

  26.         

  27.         <div id="page-wrapper"><?php /* 主要資料顯示區 */ ?>

  28.             <div class="row">

  29.                 <div class="col-lg-12">

  30.                     <h1 class="page-header">歐特儀自動化服務機</h1><?php /* 右側小表頭 */ ?>

  31.                 </div>

  32.                 <!-- /.col-lg-12 -->

  33.             </div>

  34.             <!-- /.row -->

  35.             

  36.             <?php /* ----- 查車作業 ----- */ ?>

  37.             <div data-items="input_lpr" class="row">

  38.                 <div class="col-lg-12">

  39.                     <div class="panel panel-default">

  40.                         <div class="panel-heading" style="font-size:28px;"><?php /* 資料顯示區灰色小表頭 */ ?>

  41.                             車位查詢

  42.                         </div>

  43.                         <div class="panel-body">

  44. 							<div data-rows class="row" style="font-size:28px;">

  45. 								<div class="col-lg-8">

  46. 									<form id="fuzzy_search_lpr" role="form" method="post">

  47. 										<div class="form-group">

  48. 											<input type="text" id="fuzzy_input" name="fuzzy_input" class="form-control" style="text-transform:uppercase;height:64px;font-size:32px"

  49. 												placeholder="請輸入車牌關鍵字 ( 3 到 7 碼 ex. 111)"

  50. 												autofocus required pattern="[A-Za-z0-9]*"

  51. 												data-validation="length"

  52. 												data-validation-length="3-7"

  53. 												data-validation-error-msg="請輸入車牌關鍵字 ( 3 到 7 碼  ex. 111)">

  54. 										</div>

  55. 										

  56. 										&nbsp;&nbsp;

  57. 										<button type="reset" class="btn btn-default" style="font-size:28px;" onclick="$('#fuzzy_search_lpr_msg').text('');">清除</button>

  58. 										&nbsp;&nbsp;

  59. 										<span id='fuzzy_search_lpr_msg' style="font-size:28px;color:red;"></span>

  60. 										&nbsp;&nbsp;

  61. 										<button type="submit" class="btn btn-large btn-success pull-right" style="font-size:28px;">搜尋車牌</button>

  62. 									</form>

  63. 								</div>

  64. 							</div>

  65. 

  66. 							<br/>

  67. 

  68. 							<div id="carin_query_list" class="col-lg-12 dataTable_wrapper" style="display:none; font-size:28px;">

  69.                                 <table id="lpr_query_list" class="table table-striped table-bordered table-hover">

  70.                                 <thead>

  71.                                         <tr>

  72. 											<th style="text-align:center;">車號</th>

  73.                                             <th style="text-align:center;">進場時間</th>

  74. 											<th style="text-align:center;">在席照片</th>

  75. 											<th style="text-align:center;">功能</th>

  76.                                         </tr>

  77.     							</thead>

  78.     							<tbody id="carin_query_tbody" style="font-size:28px;"></tbody>

  79.                                 </table>

  80.                             </div><?php /* ----- end of dataTable_wrapper ----- */?>

  81.                         </div>

  82.                         <!-- /.panel-body -->

  83.                     </div>

  84.                     <!-- /.panel -->

  85.                 </div>

  86.                 <!-- /.col-lg-12 -->

  87.             </div>

  88.             <?php /* ----- 查詢作業(結束) ----- */ ?>

  89. 

  90. 			<?php /* ----- 查詢結果 ----- */ ?>

  91.             <!-- div data-items="rent_sync" class="row" style="display:none;"-->

  92.             <div data-items="output_pks" class="row" style="display:none;">

  93.                 <div class="col-lg-6">

  94.                     <div class="panel panel-default">

  95.                         <div class="panel-heading" style="font-size:28px;"><?php /* 資料顯示區灰色小表頭 */ ?>

  96.                             查車結果

  97.                         </div>

  98.                         <div class="panel-body" style="margin: 0px auto;">

  99.                             <div data-rows class="row">

  100.                                 <div class="col-lg-12" style="margin: 0px auto;">

  101.                                 <table class="table table-striped table-bordered table-hover"">

  102.                                     <tbody style="font-size:28px;">

  103.                                         <tr>

  104.                                             <td style="text-align:right;vertical-align: middle;">車號</td>

  105.                                             <td id="show_lpr" style="text-align:left;vertical-align: middle;"></td>

  106.                                         </tr>

  107.                                         <tr>

  108.                                             <td style="text-align:right;vertical-align: middle;">所在樓層</td>

  109.                                             <td id="show_floors" style="text-align:left;vertical-align: middle; font-size:28px; color:blue;"></td>

  110.                                         </tr>

  111.                                         <tr>

  112.                                             <td style="text-align:right;vertical-align: middle;">停入時間</td>

  113.                                             <td id="show_update_time" style="text-align:left;vertical-align: middle;"></td>

  114.                                         </tr>

  115.                                         <tr>

  116.                                             <td colspan="2" style="text-align:center;vertical-align: middle;">

  117. 												<button type="button" class="btn btn-large btn-success pull-right" style="font-size:28px;" onclick="show_item('input_lpr');">結束查詢</button>

  118.                                             </td>

  119.                                         </tr>

  120.                                         </tbody>

  121.                                 </table>

  122.                                 </div>

  123.                                 <!-- /.col-lg-6 (nested) -->

  124.                             </div>

  125.                             <!-- /.row (nested) -->

  126.                         </div>

  127.                         <!-- /.panel-body -->

  128.                     </div>

  129.                     <!-- /.panel -->

  130.                 </div>

  131. 				<div class="col-lg-6">

  132. 					<div class="panel panel-default">

  133.                         <div class="panel-heading" style="font-size:28px;">

  134.                             在席照片

  135.                         </div>

  136. 					</div>

  137. 					<div class="panel-body" style="margin: 0px auto;">

  138. 						<div class="col-lg-12" style="margin: 0px auto;">

  139. 							<table class="table table-striped table-bordered table-hover"">

  140. 								<tbody>

  141. 									<tr>

  142. 										<td colspan="2" style="text-align:center;vertical-align: middle;">

  143. 											<img id="show_img" height="280" width="400" />

  144.                                         </td>

  145. 									</tr>

  146. 								</tbody>

  147. 							</table>

  148. 						</div>

  149. 					</div>

  150. 				</div>

  151.                 <!-- /.col-lg-12 -->

  152. 

  153. 		</div>

  154. 

  155. 

  156. 

  157. 

  158.         <!-- /#page-wrapper -->

  159.     </div>

  160.     <!-- /#wrapper -->

  161.     <!-- jQuery -->

  162.     <script src="<?=BOOTSTRAPS?>bower_components/jquery/dist/jquery.min.js"></script>

  163.     <!-- Bootstrap Core JavaScript -->

  164.     <script src="<?=BOOTSTRAPS?>bower_components/bootstrap/dist/js/bootstrap.min.js"></script>

  165.     <!-- Metis Menu Plugin JavaScript -->

  166.     <script src="<?=BOOTSTRAPS?>bower_components/metisMenu/dist/metisMenu.min.js"></script>

  167.     <!-- Morris Charts JavaScript -->

  168.     <script src="<?=BOOTSTRAPS?>bower_components/raphael/raphael-min.js"></script>

  169.     <!--script src="<?=BOOTSTRAPS?>bower_components/morrisjs/morris.min.js"></script-->

  170.     <!--script src="<?=BOOTSTRAPS?>js/morris-data.js"></script-->

  171. 

  172. 	<!-- virtual keyboard -->

  173.   	<link href="<?=WEB_LIB?>virtual-keyboard/css/jquery-ui.min.css" rel="stylesheet">

  174. 	<link href="<?=WEB_LIB?>virtual-keyboard/css/keyboard.css" rel="stylesheet">

  175.   	<script src="<?=WEB_LIB?>virtual-keyboard/js/jquery-ui.min.js"></script>

  176.   	<script src="<?=WEB_LIB?>virtual-keyboard/js/jquery.keyboard.js"></script>

  177.   	<script src="<?=WEB_LIB?>virtual-keyboard/js/jquery.keyboard.extension-caret.js"></script>

  178. 

  179. 	<!-- alertify -->

  180. 	<link href="<?=WEB_LIB?>css/alertify.core.css" rel="stylesheet">

  181. 	<link href="<?=WEB_LIB?>css/alertify.bootstrap.css" rel="stylesheet">

  182. 	<script src="<?=WEB_LIB?>js/alertify.min.js"></script>

  183. 	<!-- moment -->

  184. 	<script src="<?=WEB_LIB?>js/moment.min.js"></script>

  185. 	

  186. 	<!-- jQuery validate -->

  187. 	<script src="<?=WEB_LIB?>form-validator/jquery.form-validator.min.js"></script>

  188. 

  189.     <!-- Custom Theme JavaScript -->

  190.     <script src="<?=BOOTSTRAPS?>dist/js/sb-admin-2.js"></script>

  191.     <div id="works" style="display:none;"></div><?php /* 作為浮動顯示區之用 */ ?>

  192. </body>

  193. </html>

  194. 

  195. <script>

  196. 

  197. <?php /* alertify function */ ?>

  198. function alertify_count_down($msg, $delay)

  199. {

  200. 	alertify.set({delay : $delay});

  201. 	alertify.log($msg);

  202. }

  203. function alertify_log($msg)

  204. {

  205. 	alertify.set({delay : 2000});

  206. 	alertify.log($msg);

  207. }

  208. function alertify_error($msg)

  209. {

  210. 	alertify.set({delay : 2000});

  211. 	alertify.error($msg);

  212. }

  213. function alertify_success($msg)

  214. {

  215. 	alertify.set({delay : 2000});

  216. 	alertify.success($msg);

  217. }

  218. 

  219. function alertify_msg($msg)

  220. {

  221. 	alertify.set({ labels: {

  222. 		ok     : "確定"

  223. 	} });

  224. 	alertify.alert($msg, function (e){

  225. 		// do nothing

  226. 	});

  227. }

  228. 

  229. function reset_query()

  230. {

  231. 	$("#fuzzy_input").val("");

  232. 	$("#carin_query_list").hide();

  233. 	return false;

  234. }

  235. 

  236. var refreshIntervalId = 0; // timer id

  237. 

  238. <?php /* 顯示指定項目 */ ?>

  239. function show_item(tags)

  240. {

  241. 	// 查車

  242. 	reset_query();

  243. 

  244. 	// 付款

  245. 	$("#payment_lpr").val("");<?php /* 清除車號欄位 */ ?>

  246. 	$("#show_member_name").val("");

  247. 	$("#show_payment_lpr").val("");

  248. 	$("#show_end_date").val("");

  249. 	$("#show_next_start").val("");

  250. 	$("#show_next_end").val("");

  251. 	$("#show_amt").val("");

  252. 	$("#invoice_receiver").val("");

  253. 	$("#company_no").val("");

  254. 	$("#email").val("");

  255. 	$("#mobile").val("");

  256. 	$("#show_order_no").val("");

  257. 	$("#show_amt_detail").val("");

  258. 	$("#show_balance_time_limit_countdown").val("");

  259. 

  260. 	if(tags.indexOf('payment_data') < 0 && tags.indexOf('price_data') < 0){

  261. 		clearInterval(refreshIntervalId); // 消除倒數計時timer

  262. 	}

  263. 

  264. 	$("[data-items]").hide();

  265. 	$("[data-items="+tags+"]").show();

  266.     return false;

  267. }

  268. 

  269. <?php /* 顯示指定項目, 不修改資料 */ ?>

  270. function show_item_without_change(tags)

  271. {

  272. 	$("[data-items]").hide();

  273. 	$("[data-items="+tags+"]").show();

  274.     return false;

  275. }

  276. 

  277. // 查車牌

  278. function check_lpr(idx)

  279. {

  280. 	$.ajax

  281.     	({

  282.         	url: "<?=APP_URL?>q_pks",

  283.         	dataType:"json",

  284.         	type:"post",

  285.         	data:{ "lpr" : $("#lpr_"+idx).text() },

  286.         	success:function(jdata)

  287.         	{

  288. 				if(!jdata)

  289. 				{

  290. 					//alertify_msg("您的愛車可能在頂樓！ 謝謝");

  291. 					alertify_msg("找不到。。謝謝");

  292.                 	return false;

  293. 				}

  294.         		else if (jdata["pksno"] == "0")

  295.             	{

  296. 					alertify_msg("查無資料，請鍵入正確資料");

  297.                 	return false;

  298.             	}

  299. 

  300. 				$("#show_lpr").text($("#lpr_"+idx).text());

  301.             	//$("#show_floors").html(jdata["group_name"]+"<br/> ( 車格: " + jdata["pksno"].charAt(0) + "-" + jdata["pksno"].substr(2) +" )");

  302. 				//$("#show_floors").html(jdata["group_name"]+"<br/> ( 車格: " + jdata["pksno"] +" )");

  303. 				$("#show_floors").html(jdata["group_name"]+"<br/> ( 車格: " + jdata["pksno"].substr(-3, 3) +" )");

  304. 				$("#show_update_time").text(jdata["in_time"]);

  305.             	$("#show_img").attr("src", "<?=SERVER_URL?>pkspic/"+jdata["pic_name"]);

  306.             	show_item("output_pks");

  307. 

  308. 				// 顯示位置圖

  309. 				if (jdata["group_id"]){

  310. 					//var groupSplit = jdata["group_id"].split('-'); // ex. B3-3

  311. 					//var floor = groupSplit[0];

  312. 					var floor = jdata["floors"];

  313. 					var x = jdata["posx"];

  314. 					var y = jdata["posy"];

  315. 

  316. 					// 畫出指定位置

  317. 					AltobObject.AtsMap.drawPosition(floor, x, y);

  318. 

  319. 					// show map

  320. 					$("[data-items="+floor+"]").show();

  321. 				}

  322.     		}

  323.     	});

  324. 

  325. 	return false;

  326. }

  327. 

  328. $(document).ready(function()

  329. {

  330. 	<?php /* 鎖右鍵 */ ?>

  331. 	$(document).bind('contextmenu', function (e) {

  332. 	  e.preventDefault();

  333. 	});

  334. 

  335. 	<?php /* 車牌模糊搜尋 */ ?>

  336. 	$("#fuzzy_search_lpr").submit(function(event)

  337. 	{

  338.     	event.preventDefault();

  339. 		

  340. 		// 清除搜尋提示訊息

  341. 		$("#fuzzy_search_lpr_msg").text('');

  342. 

  343. 		if(! $("#fuzzy_search_lpr").isValid()) return false;

  344. 

  345.         $.ajax

  346.         ({

  347.         	url: "<?=APP_URL?>q_fuzzy_pks",

  348.             type: "post",

  349.             dataType:"json",

  350.             data: $(this).serialize(),

  351.             success: function(jdata)

  352.             {

  353. 				if (!jdata)

  354. 				{

  355. 					//alert("查無此車 !");

  356. 					$("#fuzzy_search_lpr_msg").text('查無此車');

  357. 					return false;

  358. 				}

  359. 				

  360. 				// 清除搜尋提示訊息

  361. 				$("#fuzzy_search_lpr_msg").text('');

  362. 

  363. 				var tmp_str_array = [];

  364. 

  365. 				for(idx in jdata.result)

  366. 				{

  367. 					tmp_str_array = tmp_str_array.concat(

  368. 						[

  369. 							"<tr><td id='lpr_", idx, "' style='text-align:center;vertical-align:middle;'>", jdata.result[idx]['lpr'] ,

  370. 							"</td><td id='in_time_", idx, "'style='text-align:center;vertical-align:middle;'>", jdata.result[idx]['in_time'],

  371. 							"</td><td id='pks_pic_path_", idx, "'style='text-align:center;vertical-align:middle;'><img height='57' width='150' src='", jdata.result[idx]['pks_pic_path'],  "' />",

  372. 							"</td><td style='text-align:center;vertical-align:middle;'><button class='btn btn-large btn-success' style='font-size:28px;' onclick='check_lpr(", idx, ");'>查詢</button>" ,

  373. 							"</td></tr>"

  374. 						]);

  375. 				}

  376. 

  377. 				$("#carin_query_tbody").html(tmp_str_array.join(''));

  378. 

  379. 				$("#carin_query_list").show();

  380.             }

  381.         });

  382.     });

  383. 	

  384. 	// Custom: altob-input

  385.   	// ********************

  386.   	$('#fuzzy_input').keyboard({

  387. 

  388. 		css : {

  389. 		  // input & preview styles

  390. 		  input          : 'ui-widget-content ui-corner-all',

  391. 		  // keyboard container - this wraps the preview area (if `usePreview` is true) and all keys

  392. 		  container      : 'ui-widget-content ui-widget ui-corner-all ui-helper-clearfix',

  393. 		  // default keyboard button state, these are applied to all keys, the remaining css options are toggled as needed

  394. 		  buttonDefault  : 'ui-state-default ui-corner-all',

  395. 		  // hovered button

  396. 		  buttonHover    : 'ui-state-hover',

  397. 		  // Action keys (e.g. Accept, Cancel, Tab, etc); this replaces the "actionClass" option

  398. 		  buttonAction   : 'ui-state-active',

  399. 		  // used when disabling the decimal button {dec} when a decimal exists in the input area

  400. 		  buttonDisabled : 'ui-state-disabled'

  401. 		},

  402. 

  403.   		display: {

  404.   			'bksp'    : '\u2190',

  405.   			'default' : 'ABC',

  406.   			'accept'  : '確 認'

  407.   		},

  408. 

  409.   		layout: 'custom',

  410. 

  411.   		customLayout: {

  412. 

  413.   			'default': [

  414.   				'1 2 3 4 5 6 7 8 9 0 {bksp}',

  415.   				'Q W E R T Y U I O P',

  416.   				'A S D F G H J K L',

  417.   				'Z X C V B N M {accept}'

  418.   			]

  419. 

  420.   		}

  421. 

  422.   	});

  423. 

  424. 	// 定時自動更新頁面

  425. 	(function autoReloadPage(){

  426. 		var pageReloadTimeMillis = 60000;			// 頁面, 自動重新載入週期 ( 1 min )

  427. 		var pageCheckReloadTimeMillis = 10000;		// 頁面, 判斷重新載入週期 ( 10 sec )

  428. 		var pageShowReloadTimeMillis = 50000;		// 頁面, 開始顯示倒數週期 ( 50 sec )

  429. 		var aliveTime = moment();

  430. 		var countdownTimeMillis = pageReloadTimeMillis;

  431. 		$(document.body).bind("mousemove keypress", function(e) {

  432. 			aliveTime = moment();

  433. 			countdownTimeMillis = pageReloadTimeMillis;

  434. 		});

  435. 		function refresh() {

  436. 			if(moment() - aliveTime >= pageReloadTimeMillis) // 如果頁面沒動作, 才更新

  437. 				window.location.reload(true);

  438. 			else{

  439. 				countdownTimeMillis -= pageCheckReloadTimeMillis;

  440. 				if(countdownTimeMillis < pageCheckReloadTimeMillis)

  441. 				{

  442. 					alertify_count_down("重新載入中..請稍候..", pageCheckReloadTimeMillis);	

  443. 				}

  444. 				else if(countdownTimeMillis < pageShowReloadTimeMillis){

  445. 					alertify_count_down("倒數: " + (countdownTimeMillis / 1000) + " 秒, 重新載入畫面..", pageCheckReloadTimeMillis);	

  446. 				}

  447. 				setTimeout(refresh, pageCheckReloadTimeMillis);

  448. 			}

  449. 		}

  450. 		setTimeout(refresh, pageCheckReloadTimeMillis);

  451. 	})();

  452. 

  453. });

  454. </script>