You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
293 lines
7.6 KiB
293 lines
7.6 KiB
<!doctype html>
|
|
<html lang="en">
|
|
|
|
<!-- 主頁header -->
|
|
<?php
|
|
|
|
/*--- 處理session ----*/
|
|
include "include-session-security.php"; #確認session
|
|
/*
|
|
if(isset($_SESSION['user_id'])){
|
|
#echo $_SESSION['user_id'];
|
|
$customerid = $_SESSION['user_id'];
|
|
}
|
|
*/
|
|
/*--- 處理session ----*/
|
|
|
|
#$customerid = "A000000001";
|
|
|
|
include "include-header.php";
|
|
|
|
$off_line_time = 43200; #預設不可離線 12 hrs
|
|
|
|
require_once "db/database.php"; # 載入db.php來連結資料庫
|
|
$data = array(); # 設置一個空陣列來放資料
|
|
$data_1 = array();
|
|
$sql = "SELECT * FROM location_last where ((latitude IS NOT NULL) and (longitude IS NOT NULL))"; # sql語法存在變數中
|
|
$data = mysqli_query($link,$sql); # 用mysqli_query方法執行(sql語法)將結果存在變數中
|
|
$row_num = mysqli_num_rows($data); #找出共有幾筆
|
|
$data_1 = $data;
|
|
|
|
/*
|
|
$j=0; #{text:顯示文字, color:顏色}
|
|
$lat_sum=0;
|
|
$lng_sum=0;
|
|
$lat_center=0 ;
|
|
$lng_center=0 ;
|
|
$latitude_array = array();
|
|
$longitude_array = array();
|
|
foreach($data as $data){
|
|
$j = $j + 1;
|
|
if ($j <> count($data)){
|
|
echo "{label:'" . $data['name'] . "',lat:" . $data['latitude'] . ",lng:" . $data['longitude'] . "},";
|
|
}else{
|
|
echo "{label:'" . $data['name'] . "',lat:" . $data['latitude'] . ",lng:" . $data['longitude'] . "}";
|
|
}
|
|
$lat_sum = $lat_sum + $data['latitude'];
|
|
$lng_sum = $lng_sum + $data['longitude'];
|
|
array_push($latitude_array, $data['latitude']);
|
|
array_push($longitude_array, $data['longitude']);
|
|
}
|
|
$lat_center=$lat_sum / $j;
|
|
$lng_center=$lng_sum / $j;
|
|
print_r($latitude_array);
|
|
print_r($longitude_array);
|
|
echo max($latitude_array) . min($latitude_array);
|
|
echo max($longitude_array) . min($longitude_array);
|
|
*/
|
|
|
|
/*
|
|
foreach($data as $data){
|
|
echo $data['facilityno'] . "-" . $data['contractno'] . "-". $data['repairerid'] . "-". $data['repairername'] . "-". "<br>";
|
|
}
|
|
*/
|
|
|
|
?>
|
|
<!-- * 主頁header -->
|
|
|
|
<style>
|
|
html,
|
|
body {
|
|
height: 100%;
|
|
width: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
#map {
|
|
height: 600px;
|
|
width: 100%;
|
|
background: #000;
|
|
}
|
|
</style>
|
|
|
|
<body>
|
|
|
|
<!-- loader -->
|
|
<div id="loader">
|
|
<div class="spinner-border text-primary" role="status"></div>
|
|
</div>
|
|
<!-- * loader -->
|
|
|
|
<!-- App Header -->
|
|
<div class="appHeader bg-primary text-light">
|
|
<!--
|
|
<div class="left">
|
|
<a href="javascript:;" class="headerButton goBack">
|
|
<ion-icon name="chevron-back-outline"></ion-icon>
|
|
</a>
|
|
</div>
|
|
-->
|
|
<div class="pageTitle">人員定位</div>
|
|
<!--
|
|
<div class="right">
|
|
</div>
|
|
-->
|
|
</div>
|
|
<!-- * App Header -->
|
|
|
|
<!-- App Capsule -->
|
|
<div id="appCapsule">
|
|
|
|
<!-- Simple Multi Listview -->
|
|
<div id="map"></div>
|
|
<script>
|
|
var map;
|
|
var markers = [];
|
|
|
|
var position = [
|
|
<?php
|
|
$j=0; #{text:顯示文字, color:顏色}
|
|
$lat_sum=0;
|
|
$lng_sum=0;
|
|
$lat_center=0 ;
|
|
$lng_center=0 ;
|
|
$latitude_array = array();
|
|
$longitude_array = array();
|
|
foreach($data as $data){
|
|
$j = $j + 1;
|
|
if ($j <> $row_num){
|
|
echo "{label:'" . $data['name'] . "',lat:" . $data['latitude'] . ",lng:" . $data['longitude'] . "},";
|
|
}else{
|
|
echo "{label:'" . $data['name'] . "',lat:" . $data['latitude'] . ",lng:" . $data['longitude'] . "}";
|
|
}
|
|
$lat_sum = $lat_sum + $data['latitude'];
|
|
$lng_sum = $lng_sum + $data['longitude'];
|
|
array_push($latitude_array, $data['latitude']);
|
|
array_push($longitude_array, $data['longitude']);
|
|
}
|
|
$lat_center=$lat_sum / $j;
|
|
$lng_center=$lng_sum / $j;
|
|
|
|
?>];
|
|
|
|
var lat_center = <?php echo $lat_center; ?>;
|
|
var lng_center = <?php echo $lng_center; ?>;
|
|
|
|
//此處是計算最佳zoom的程式
|
|
var GLOBE_WIDTH = 256; // a constant in Google's map projection
|
|
var west = <?php echo min($longitude_array); ?>;
|
|
var east = <?php echo max($longitude_array); ?>;
|
|
var north = <?php echo max($latitude_array); ?>;
|
|
var south = <?php echo min($latitude_array); ?>;
|
|
var angle = east - west;
|
|
if (angle < 0) {
|
|
angle += 360;
|
|
}
|
|
var angle2 = north - south;
|
|
if (angle2 > angle) angle = angle2;
|
|
var zoomfactor = Math.round(Math.log(960 * 360 / angle / GLOBE_WIDTH) / Math.LN2) - 3;
|
|
//此處是計算最佳zoom的程式
|
|
|
|
function initMap() {
|
|
map = new google.maps.Map(document.getElementById('map'), {
|
|
zoom: zoomfactor,
|
|
center: {
|
|
lat: lat_center,
|
|
lng: lng_center
|
|
},
|
|
mapTypeControl:true,
|
|
fullscreenControl:true,
|
|
rotateControl:true,
|
|
scaleControl:true,
|
|
streetViewControl:true,
|
|
zoomControl:true,
|
|
mapTypeControlOptions:{position:google.maps.ControlPosition.TOP_CENTER},
|
|
fullscreenControlOptions:{position:google.maps.ControlPosition.TOP_RIGHT},
|
|
rotateControlOptions:{position:google.maps.ControlPosition.RIGHT_CENTER},
|
|
scaleControlOptions:{position:google.maps.ControlPosition.RIGHT_BOTTOM},
|
|
streetViewControlOptions:{position:google.maps.ControlPosition.TOP_LEFT},
|
|
zoomControlOptions:{position:google.maps.ControlPosition.RIGHT_BOTTOM}
|
|
});
|
|
|
|
for (var i = 0; i < position.length; i++) {
|
|
addMarker(i);
|
|
}
|
|
}
|
|
|
|
function addMarker(e) {
|
|
markers[e] = new google.maps.Marker({
|
|
position: {
|
|
lat: position[e].lat,
|
|
lng: position[e].lng
|
|
},
|
|
map: map,
|
|
label: position[e].label,
|
|
animation: google.maps.Animation.BOUNCE //marker跳動
|
|
});
|
|
}
|
|
|
|
</script>
|
|
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDCJp-JIcYIyeR_QNpREvsepApvVytZWOs&callback=initMap" async defer></script>
|
|
|
|
<style>
|
|
#info {
|
|
position: fixed;
|
|
z-index: 999;
|
|
bottom: 20px;
|
|
left: 0px;
|
|
background: #222;
|
|
padding: 20px 30px;
|
|
color: #fff;
|
|
box-shadow: rgba(0, 0, 0, .5) 0 0 10px;
|
|
border-radius: 0 5px 5px 0;
|
|
}
|
|
|
|
#info a {
|
|
color: #0bf;
|
|
transition: .2s;
|
|
}
|
|
|
|
#info a:hover {
|
|
color: #6df;
|
|
}
|
|
</style>
|
|
<!-- <div id="info">相關參考：<a id="infoLink" href="#" target="_blank"></a></div> -->
|
|
<script>
|
|
var href = location.href;
|
|
var page = href.split("demo/");
|
|
var name = page[1].split("-demo")[0];
|
|
var title = document.querySelector('title').innerHTML;
|
|
document.getElementById('infoLink').setAttribute('href', '/articles/' + name + '.html');
|
|
document.getElementById('infoLink').innerHTML = title.split("demo")[0];
|
|
</script>
|
|
<!-- * Simple Multi Listview -->
|
|
|
|
|
|
<div class="section full mb-2">
|
|
<div class="section-title">定位狀態</div>
|
|
<div class="wide-block p-0">
|
|
|
|
<div class="input-list">
|
|
<?php
|
|
date_default_timezone_set("Asia/Taipei");
|
|
foreach($data_1 as $data_1){
|
|
$upload_date = strtotime($data_1['upload_time']);//开始时间 时间戳
|
|
$now_date = strtotime(date("Y-m-d H:i:s"));//结束时间 时间戳
|
|
$diff_sec = $now_date - $upload_date; //得出时间戳差值
|
|
#echo $diff_sec;
|
|
|
|
echo "<div class='custom-control custom-checkbox'>";
|
|
|
|
if ($diff_sec < $off_line_time){
|
|
echo "<input type='checkbox' class='custom-control-input' id='customCheck1' checked disabled>";
|
|
echo "<label class='custom-control-label' for='customCheck1'>" . $data_1['name'] . "(定位中)</label>";
|
|
}else{
|
|
echo "<input type='checkbox' class='custom-control-input' id='customCheck1' disabled>";
|
|
echo "<label class='custom-control-label' for='customCheck1'>" . $data_1['name'] . "(離線)</label>";
|
|
}
|
|
|
|
echo "</div>";
|
|
}
|
|
?>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
<!-- * App Capsule -->
|
|
|
|
<!-- 主頁頁尾 -->
|
|
<?php
|
|
include "include-footer.php";
|
|
mysqli_close($link); #代表結束連線
|
|
?>
|
|
<!-- * 主頁頁尾 -->
|
|
|
|
<!-- 主頁頁尾按鈕 -->
|
|
<?php
|
|
# include "include-bottom-menu.php";
|
|
?>
|
|
<!-- * 主頁頁尾按鈕 -->
|
|
|
|
<!-- ///////////// Js Files //////////////////// -->
|
|
<!-- Jquery -->
|
|
<?php
|
|
include "include-jsfiles.php";
|
|
?>
|
|
|
|
</body>
|
|
|
|
</html>
|