LeeWeiCheng
/
altob.st123
1
0
Fork 0
Código Incidencias 0 Pull Requests 0 Lanzamientos 0 Wiki Actividad
VM暫存
No puede seleccionar más de 25 temas Los temas deben comenzar con una letra o número, pueden incluir guiones ('-') y pueden tener hasta 35 caracteres de largo.
3 Commits
5 Ramas
790KB
Árbol: 3bbc85e280
Ramas Etiquetas
${ item.name }
Crear rama ${ searchTerm }
desde '3bbc85e280'
${ noResults }
altob.st123/views/pks/status_map.php

463 líneas
21KB
Original Blame Histórico 

  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>停車場使用狀態  (<?=STATION_NAME?>)</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-2.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.         <!-- Navigation -->

  27.         <nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">

  28.             <div class="navbar-header">

  29.                 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

  30.                     <span class="sr-only">Toggle navigation</span>

  31.                     <span class="icon-bar"></span>

  32.                     <span class="icon-bar"></span>

  33.                     <span class="icon-bar"></span>

  34.                 </button>

  35.                 <a class="navbar-brand" href="#">停車場使用狀態  (<?=STATION_NAME?>)</a>

  36.             </div>

  37. 

  38.             <!-- /.navbar-top-links(左側選單) -->

  39.             <div class="navbar-default sidebar" role="navigation">

  40.                 <div class="sidebar-nav navbar-collapse">

  41.                     <ul class="nav" id="side-menu">

  42.                         <li>

  43.                             <a href="#"><i class="fa fa-user fa-fw"></i>服務項目<span class="fa arrow"></span></a>

  44.                             <ul class="nav nav-second-level">

  45. 								<li>

  46.                                     <a href="#" onclick="show_item('homepage');">首頁</a>

  47.                                 </li>

  48.                                 <li>

  49.                                     <a href="#" onclick="show_item('B1');">B1 樓層 - 車位使用狀態</a>

  50.                                 </li>

  51. 								<li>

  52.                                     <a href="#" onclick="show_item('F1');">F1 樓層 - 車位使用狀態</a>

  53.                                 </li>

  54. 								<li>

  55.                                     <a href="#" onclick="show_item('F2');">F2 樓層 - 車位使用狀態</a>

  56.                                 </li>

  57. 								<li>

  58.                                     <a href="#" onclick="show_item('F3');">F3 樓層 - 車位使用狀態</a>

  59.                                 </li>

  60. 								<li>

  61.                                     <a href="#" onclick="show_item('F4');">F4 樓層 - 車位使用狀態</a>

  62.                                 </li>

  63. 								<li>

  64.                                     <a href="#" onclick="show_item('F5');">F5 樓層 - 車位使用狀態</a>

  65.                                 </li>

  66. 								<li>

  67.                                     <a href="#" onclick="show_item('F6');">F6 樓層 - 車位使用狀態</a>

  68.                                 </li>

  69. 								<li>

  70.                                     <a href="#" onclick="show_item('F7');">F7 樓層 - 車位使用狀態</a>

  71.                                 </li>

  72. 								<!--li>

  73.                                     <a href="#" onclick="stopAlertSound();">[ 解除警報聲 ]</a>

  74.                                 </li>

  75. 								<li>

  76.                                     <a href="#" onclick="cleanMapSOS();">[ 清除位置標示 ]</a>

  77.                                 </li-->

  78. 								<!--li>

  79.                                     <a href="#" onclick="test();">test</a>

  80.                                 </li-->

  81.                             </ul>

  82.                             <!-- /.nav-second-level -->

  83.                         </li>

  84.                     </ul>

  85.                 </div>

  86.                 <!-- /.sidebar-collapse -->

  87.             </div>

  88.             <!-- /.navbar-static-side -->

  89.         </nav>

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

  91.             <div class="row">

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

  93.                     <h2 class="page-header">車位使用狀態</h2><?php /* 右側小表頭 */ ?>

  94.                 </div>

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

  96.             </div>

  97.             <!-- /.row -->

  98.             <?php /* ----- 首頁 ----- */ ?>

  99.             <div data-items="homepage" class="row">

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

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

  102.                         <div class="panel-heading"><?php /* 資料顯示區灰色小表頭 */ ?>

  103.                             首頁

  104.                         </div>

  105.                         <!-- /.panel-heading -->

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

  107.                             <div class="dataTable_wrapper">

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

  109.                                         <tr>

  110.                                             <td style="text-align:center;"><input type="button" value="B1 樓層 - 車位使用狀態" onclick="show_item('B1');" /></td>

  111.                                         </tr>

  112. 										<tr>

  113.                                             <td style="text-align:center;"><input type="button" value="F1 樓層 - 車位使用狀態" onclick="show_item('F1');" /></td>

  114.                                         </tr>

  115. 										<tr>

  116.                                             <td style="text-align:center;"><input type="button" value="F2 樓層 - 車位使用狀態" onclick="show_item('F2');" /></td>

  117.                                         </tr>

  118. 										<tr>

  119.                                             <td style="text-align:center;"><input type="button" value="F3 樓層 - 車位使用狀態" onclick="show_item('F3');" /></td>

  120.                                         </tr>

  121. 										<tr>

  122.                                             <td style="text-align:center;"><input type="button" value="F4 樓層 - 車位使用狀態" onclick="show_item('F4');" /></td>

  123.                                         </tr>

  124. 										<tr>

  125.                                             <td style="text-align:center;"><input type="button" value="F5 樓層 - 車位使用狀態" onclick="show_item('F5');" /></td>

  126.                                         </tr>

  127. 										<tr>

  128.                                             <td style="text-align:center;"><input type="button" value="F6 樓層 - 車位使用狀態" onclick="show_item('F6');" /></td>

  129.                                         </tr>

  130. 										<tr>

  131.                                             <td style="text-align:center;"><input type="button" value="F7 樓層 - 車位使用狀態" onclick="show_item('F7');" /></td>

  132.                                         </tr>

  133.                                 </table>

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

  135.                         </div><?php /* ----- end of panel-body ----- */?>

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

  137.                     </div>

  138.                     <!-- /.panel -->

  139.                 </div>

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

  141.             </div>

  142.             <?php /* ----- 首頁(結束) ----- */ ?>

  143. 			

  144. 			<?php /* ----- B1 樓層 ----- */ ?>

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

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

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

  148.                         <div class="panel-heading"><?php /* 資料顯示區灰色小表頭 */ ?>

  149. 							<span>B1 車位使用狀態 - 操作：</span>

  150. 							<button id="zoom0b1canvas">還原</button>

  151. 							<button id="zoomInb1canvas">放大</button>

  152. 							<button id="zoomOutb1canvas">縮小</button>

  153. 							<span> ( 點撃車位圖示, 取得更多訊息 )</span>

  154.                         </div>

  155.                         <!-- /.panel-heading -->

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

  157.                             <canvas id="b1canvas"></canvas>

  158.                         </div><?php /* ----- end of panel-body ----- */?>

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

  160.                     </div>

  161.                     <!-- /.panel -->

  162.                 </div>

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

  164.             </div>

  165.             <?php /* ----- B1 樓層(結束) ----- */ ?>

  166. 			

  167. 			<?php /* ----- F1 樓層 ----- */ ?>

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

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

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

  171.                         <div class="panel-heading"><?php /* 資料顯示區灰色小表頭 */ ?>

  172. 							<span>F1 車位使用狀態 - 操作：</span>

  173. 							<button id="zoom0f1canvas">還原</button>

  174. 							<button id="zoomInf1canvas">放大</button>

  175. 							<button id="zoomOutf1canvas">縮小</button>

  176. 							<span> ( 點撃車位圖示, 取得更多訊息 )</span>

  177.                         </div>

  178.                         <!-- /.panel-heading -->

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

  180.                             <canvas id="f1canvas"></canvas>

  181.                         </div><?php /* ----- end of panel-body ----- */?>

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

  183.                     </div>

  184.                     <!-- /.panel -->

  185.                 </div>

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

  187.             </div>

  188.             <?php /* ----- F1 樓層(結束) ----- */ ?>

  189. 			

  190. 			<?php /* ----- F2 樓層 ----- */ ?>

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

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

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

  194.                         <div class="panel-heading"><?php /* 資料顯示區灰色小表頭 */ ?>

  195. 							<span>F2 車位使用狀態 - 操作：</span>

  196. 							<button id="zoom0f2canvas">還原</button>

  197. 							<button id="zoomInf2canvas">放大</button>

  198. 							<button id="zoomOutf2canvas">縮小</button>

  199. 							<span> ( 點撃車位圖示, 取得更多訊息 )</span>

  200.                         </div>

  201.                         <!-- /.panel-heading -->

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

  203.                             <canvas id="f2canvas"></canvas>

  204.                         </div><?php /* ----- end of panel-body ----- */?>

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

  206.                     </div>

  207.                     <!-- /.panel -->

  208.                 </div>

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

  210.             </div>

  211.             <?php /* ----- F2 樓層(結束) ----- */ ?>

  212. 			

  213. 			<?php /* ----- F3 樓層 ----- */ ?>

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

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

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

  217.                         <div class="panel-heading"><?php /* 資料顯示區灰色小表頭 */ ?>

  218. 							<span>F3 車位使用狀態 - 操作：</span>

  219. 							<button id="zoom0f3canvas">還原</button>

  220. 							<button id="zoomInf3canvas">放大</button>

  221. 							<button id="zoomOutf3canvas">縮小</button>

  222. 							<span> ( 點撃車位圖示, 取得更多訊息 )</span>

  223.                         </div>

  224.                         <!-- /.panel-heading -->

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

  226.                             <canvas id="f3canvas"></canvas>

  227.                         </div><?php /* ----- end of panel-body ----- */?>

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

  229.                     </div>

  230.                     <!-- /.panel -->

  231.                 </div>

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

  233.             </div>

  234.             <?php /* ----- F3 樓層(結束) ----- */ ?>

  235. 			

  236. 			<?php /* ----- F4 樓層 ----- */ ?>

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

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

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

  240.                         <div class="panel-heading"><?php /* 資料顯示區灰色小表頭 */ ?>

  241. 							<span>F4 車位使用狀態 - 操作：</span>

  242. 							<button id="zoom0f4canvas">還原</button>

  243. 							<button id="zoomInf4canvas">放大</button>

  244. 							<button id="zoomOutf4canvas">縮小</button>

  245. 							<span> ( 點撃車位圖示, 取得更多訊息 )</span>

  246.                         </div>

  247.                         <!-- /.panel-heading -->

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

  249.                             <canvas id="f4canvas"></canvas>

  250.                         </div><?php /* ----- end of panel-body ----- */?>

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

  252.                     </div>

  253.                     <!-- /.panel -->

  254.                 </div>

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

  256.             </div>

  257.             <?php /* ----- F4 樓層(結束) ----- */ ?>

  258. 			

  259. 			<?php /* ----- F5 樓層 ----- */ ?>

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

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

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

  263.                         <div class="panel-heading"><?php /* 資料顯示區灰色小表頭 */ ?>

  264. 							<span>F5 車位使用狀態 - 操作：</span>

  265. 							<button id="zoom0f5canvas">還原</button>

  266. 							<button id="zoomInf5canvas">放大</button>

  267. 							<button id="zoomOutf5canvas">縮小</button>

  268. 							<span> ( 點撃車位圖示, 取得更多訊息 )</span>

  269.                         </div>

  270.                         <!-- /.panel-heading -->

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

  272.                             <canvas id="f5canvas"></canvas>

  273.                         </div><?php /* ----- end of panel-body ----- */?>

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

  275.                     </div>

  276.                     <!-- /.panel -->

  277.                 </div>

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

  279.             </div>

  280.             <?php /* ----- F5 樓層(結束) ----- */ ?>

  281. 			

  282. 			<?php /* ----- F6 樓層 ----- */ ?>

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

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

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

  286.                         <div class="panel-heading"><?php /* 資料顯示區灰色小表頭 */ ?>

  287. 							<span>F6 車位使用狀態 - 操作：</span>

  288. 							<button id="zoom0f6canvas">還原</button>

  289. 							<button id="zoomInf6canvas">放大</button>

  290. 							<button id="zoomOutf6canvas">縮小</button>

  291. 							<span> ( 點撃車位圖示, 取得更多訊息 )</span>

  292.                         </div>

  293.                         <!-- /.panel-heading -->

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

  295.                             <canvas id="f6canvas"></canvas>

  296.                         </div><?php /* ----- end of panel-body ----- */?>

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

  298.                     </div>

  299.                     <!-- /.panel -->

  300.                 </div>

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

  302.             </div>

  303.             <?php /* ----- F6 樓層(結束) ----- */ ?>

  304. 			

  305. 			<?php /* ----- F7 樓層 ----- */ ?>

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

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

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

  309.                         <div class="panel-heading"><?php /* 資料顯示區灰色小表頭 */ ?>

  310. 							<span>F7 車位使用狀態 - 操作：</span>

  311. 							<button id="zoom0f7canvas">還原</button>

  312. 							<button id="zoomInf7canvas">放大</button>

  313. 							<button id="zoomOutf7canvas">縮小</button>

  314. 							<span> ( 點撃車位圖示, 取得更多訊息 )</span>

  315.                         </div>

  316.                         <!-- /.panel-heading -->

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

  318.                             <canvas id="f7canvas"></canvas>

  319.                         </div><?php /* ----- end of panel-body ----- */?>

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

  321.                     </div>

  322.                     <!-- /.panel -->

  323.                 </div>

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

  325.             </div>

  326.             <?php /* ----- F7 樓層(結束) ----- */ ?>

  327. 

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

  329.     </div>

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

  331.     <!-- jQuery -->

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

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

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

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

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

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

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

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

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

  341. 

  342. 

  343. 

  344. 

  345.     <!-- virtual keyboard -->

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

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

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

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

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

  351. 

  352. 	<!-- jQuery validate -->

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

  354. 	<!-- alertify -->

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

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

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

  358. 	<!-- moment -->

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

  360. 	

  361. 	

  362. 	<!-- altob status map -->

  363. 	<script src="<?=WEB_LIB?>js/altob-status-map.js"></script> 

  364. 	

  365. 

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

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

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

  369. </body>

  370. </html>

  371. 

  372. <script>

  373. 

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

  375. function show_item(tags)

  376. {

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

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

  379.     return false;

  380. }

  381. 

  382. $(document).ready(function()

  383. {

  384. 	<?php /* validate  設定start */ ?>

  385. 	$.validate(

  386. 		{

  387. 			modules : 'security',

  388. 		}

  389. 	);

  390. 	<?php /* validate  設定end */ ?>

  391. 	

  392. 	

  393. 	<?php /* 樓層平面圖 */ ?>

  394. 	AltobObject.StatusMap({

  395. 		queryStationPksUrl: "http://192.168.10.201/pks.html/query_station_pks/<?=STATION_NO?>/",		// 廠站車位資料 API

  396. 		queryStationStatusUrl: "http://192.168.10.201/pks.html/query_station_status/<?=STATION_NO?>",	// 廠站地圖資料 API

  397. 		dataReloadIntervalTimeMillis: 30000,	// 資料, 自動更新週期 ( 30 sec )

  398. 		dataReloadErrorLimit: 5,				// 資料, 連線容錯次數

  399. 		mapBaseRadius: 18,						// 地圖, 圈圈大小基數

  400. 		mapInfo: {

  401. 			map1: {

  402. 				floorName: 'B1',

  403. 				canvasId: 'b1canvas',

  404. 				src: '<?=SERVER_URL?>i3/pics/b1_map.png'

  405. 			},

  406. 			map2: {

  407. 				floorName: 'F1',

  408. 				canvasId: 'f1canvas',

  409. 				src: '<?=SERVER_URL?>i3/pics/f1_map.png'

  410. 			},

  411. 			map3: {

  412. 				floorName: 'F2',

  413. 				canvasId: 'f2canvas',

  414. 				src: '<?=SERVER_URL?>i3/pics/f2_map.png'

  415. 			},

  416. 			map4: {

  417. 				floorName: 'F3',

  418. 				canvasId: 'f3canvas',

  419. 				src: '<?=SERVER_URL?>i3/pics/f3_map.png'

  420. 			},

  421. 			map5: {

  422. 				floorName: 'F4',

  423. 				canvasId: 'f4canvas',

  424. 				src: '<?=SERVER_URL?>i3/pics/f4_map.png'

  425. 			},

  426. 			map6: {

  427. 				floorName: 'F5',

  428. 				canvasId: 'f5canvas',

  429. 				src: '<?=SERVER_URL?>i3/pics/f5_map.png'

  430. 			},

  431. 			map7: {

  432. 				floorName: 'F6',

  433. 				canvasId: 'f6canvas',

  434. 				src: '<?=SERVER_URL?>i3/pics/f6_map.png'

  435. 			},

  436. 			map8: {

  437. 				floorName: 'F7',

  438. 				canvasId: 'f7canvas',

  439. 				src: '<?=SERVER_URL?>i3/pics/f7_map.png'

  440. 			}

  441. 		}

  442. 	});

  443. 	

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

  445. 	(function autoReloadPage(){

  446. 		var pageReloadTimeMillis = 600000;			// 頁面, 自動重新載入週期 ( 10 min )

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

  448. 		var aliveTime = moment();

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

  450. 			aliveTime = moment();

  451. 		});

  452. 		function refresh() {

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

  454. 				window.location.reload(true);

  455. 			else 

  456. 				setTimeout(refresh, pageCheckReloadTimeMillis);

  457. 		}

  458. 		setTimeout(refresh, pageCheckReloadTimeMillis);

  459. 	})();

  460. 	

  461. });

  462. </script>