|
@ -1,28 +1,29 @@ |
|
|
<html> |
|
|
<html> |
|
|
<!doctype html> |
|
|
<!doctype html> |
|
|
<html> |
|
|
<html> |
|
|
|
|
|
|
|
|
<head> |
|
|
<head> |
|
|
<meta charset="utf-8"> |
|
|
<meta charset="utf-8"> |
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
|
|
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> |
|
|
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> |
|
|
<title>電梯地圖</title> |
|
|
<title>電梯地圖</title> |
|
|
<link rel="stylesheet" href="map.css"/> |
|
|
<link rel="stylesheet" href="map.css" /> |
|
|
<link rel="stylesheet" href="style.css"/> |
|
|
<link rel="stylesheet" href="style.css" /> |
|
|
<link rel="stylesheet" href="jsgrid.css"> |
|
|
<link rel="stylesheet" href="jsgrid.css"> |
|
|
<link rel="stylesheet" href="jsgrid-theme.css"> |
|
|
<link rel="stylesheet" href="jsgrid-theme.css"> |
|
|
</head> |
|
|
</head> |
|
|
|
|
|
|
|
|
<body> |
|
|
<body> |
|
|
<div id="map" style="height: 100%"></div> |
|
|
<div id="map" style="height: 100%"></div> |
|
|
|
|
|
|
|
|
<!-- Jquery --> |
|
|
<!-- Jquery --> |
|
|
<script src="js/lib/jquery-3.4.1.min.js"></script> |
|
|
<script src="js/lib/jquery-3.4.1.min.js"></script> |
|
|
<!-- Bootstrap--> |
|
|
<!-- Bootstrap--> |
|
|
<script src="js/lib/popper.min.js"></script> |
|
|
<script src="js/lib/popper.min.js"></script> |
|
|
<script src="js/lib/bootstrap.min.js"></script> |
|
|
<script src="js/lib/bootstrap.min.js"></script> |
|
|
<script src="../da/chart.js/Chart.js"></script> |
|
|
<script src="../da/chart.js/Chart.js"></script> |
|
|
<script src="js/jsgrid.js"></script> |
|
|
<script src="js/jsgrid.js"></script> |
|
|
<script> |
|
|
<script> |
|
|
// This example displays a marker at the center of Australia. |
|
|
// This example displays a marker at the center of Australia. |
|
|
// When the user clicks the marker, an info window opens. |
|
|
// When the user clicks the marker, an info window opens. |
|
|
const urll = location.href; |
|
|
const urll = location.href; |
|
@ -30,7 +31,7 @@ |
|
|
function initMap() { |
|
|
function initMap() { |
|
|
var pointURL = wurl + 'phb/map/point.php'; |
|
|
var pointURL = wurl + 'phb/map/point.php'; |
|
|
// var pointURL = wurl + 'phbbackup/map/point.php'; |
|
|
// var pointURL = wurl + 'phbbackup/map/point.php'; |
|
|
var points=[]; |
|
|
var points = []; |
|
|
var currentInfoWindow = null; |
|
|
var currentInfoWindow = null; |
|
|
$.ajax({ |
|
|
$.ajax({ |
|
|
type: "GET", |
|
|
type: "GET", |
|
@ -39,25 +40,25 @@ |
|
|
var result = eval("(" + msg + ")"); |
|
|
var result = eval("(" + msg + ")"); |
|
|
if (result.length > 0) { |
|
|
if (result.length > 0) { |
|
|
for (i = 0; i < result.length; i++) { |
|
|
for (i = 0; i < result.length; i++) { |
|
|
var obj={}; |
|
|
var obj = {}; |
|
|
var longitude= Number(result[i]['longitude']); |
|
|
var longitude = Number(result[i]['longitude']); |
|
|
var latitude = Number(result[i]['latitude']); |
|
|
var latitude = Number(result[i]['latitude']); |
|
|
var custormname=result[i]['name']; |
|
|
var custormname = result[i]['name']; |
|
|
obj['lat']=latitude; |
|
|
obj['lat'] = latitude; |
|
|
obj['lng']=longitude; |
|
|
obj['lng'] = longitude; |
|
|
|
|
|
|
|
|
var icon = { |
|
|
var icon = { |
|
|
url: 'icon/lift.png', |
|
|
url: 'icon/lift.png', |
|
|
//scaledSize: new google.maps.Size(52, 50), // scaled size |
|
|
//scaledSize: new google.maps.Size(52, 50), // scaled size |
|
|
scaledSize: new google.maps.Size(32.4, 31.2), // scaled size |
|
|
scaledSize: new google.maps.Size(32.4, 31.2), // scaled size |
|
|
origin: new google.maps.Point(0,0), // origin |
|
|
origin: new google.maps.Point(0, 0), // origin |
|
|
anchor: new google.maps.Point(0, 0) // anchor |
|
|
anchor: new google.maps.Point(0, 0) // anchor |
|
|
}; |
|
|
}; |
|
|
const marker = new google.maps.Marker({ |
|
|
const marker = new google.maps.Marker({ |
|
|
position: obj, |
|
|
position: obj, |
|
|
map, |
|
|
map, |
|
|
title:custormname, |
|
|
title: custormname, |
|
|
icon:icon |
|
|
icon: icon |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const contentString = |
|
|
const contentString = |
|
@ -67,21 +68,21 @@ |
|
|
'<div id="choosecontent" style="height: 430px;width: 500px">' + |
|
|
'<div id="choosecontent" style="height: 430px;width: 500px">' + |
|
|
|
|
|
|
|
|
'</div>' + |
|
|
'</div>' + |
|
|
'</div>'+ |
|
|
'</div>' + |
|
|
"</div>" + |
|
|
"</div>" + |
|
|
"</div>"; |
|
|
"</div>"; |
|
|
const infowindow = new google.maps.InfoWindow({ |
|
|
const infowindow = new google.maps.InfoWindow({ |
|
|
content: contentString |
|
|
content: contentString |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
clickMarker(marker,latitude,infowindow); |
|
|
clickMarker(marker, latitude, infowindow); |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
}) |
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function clickMarker(marker,latitude,infowindow){ |
|
|
function clickMarker(marker, latitude, infowindow) { |
|
|
marker.addListener("click", (e) => { |
|
|
marker.addListener("click", (e) => { |
|
|
if (currentInfoWindow != null) { |
|
|
if (currentInfoWindow != null) { |
|
|
currentInfoWindow.close(); |
|
|
currentInfoWindow.close(); |
|
@ -92,15 +93,15 @@ |
|
|
shouldFocus: false, |
|
|
shouldFocus: false, |
|
|
}); |
|
|
}); |
|
|
currentInfoWindow = infowindow; |
|
|
currentInfoWindow = infowindow; |
|
|
var chooselat=e.latLng.lat(); |
|
|
var chooselat = e.latLng.lat(); |
|
|
var accountURL = wurl + 'phb/map/account.php?latitude='+chooselat; |
|
|
var accountURL = wurl + 'phb/map/account.php?latitude=' + chooselat; |
|
|
$.ajax({ |
|
|
$.ajax({ |
|
|
type: "GET", |
|
|
type: "GET", |
|
|
url: accountURL, |
|
|
url: accountURL, |
|
|
success: function (msg) { |
|
|
success: function (msg) { |
|
|
var result = eval("(" + msg + ")"); |
|
|
var result = eval("(" + msg + ")"); |
|
|
console.log(result); |
|
|
console.log(result); |
|
|
var htmltai=''; |
|
|
var htmltai = ''; |
|
|
if (result.length > 0) { |
|
|
if (result.length > 0) { |
|
|
for (i = 0; i < result.length; i++) { |
|
|
for (i = 0; i < result.length; i++) { |
|
|
var name = result[i]['name']; |
|
|
var name = result[i]['name']; |
|
@ -108,13 +109,13 @@ |
|
|
var address = result[i]['address']; |
|
|
var address = result[i]['address']; |
|
|
var repairername = result[i]['repairername']; |
|
|
var repairername = result[i]['repairername']; |
|
|
var repairertel = result[i]['repairertel']; |
|
|
var repairertel = result[i]['repairertel']; |
|
|
var customerid=result[i]['customerid']; |
|
|
var customerid = result[i]['customerid']; |
|
|
|
|
|
|
|
|
htmltai += |
|
|
htmltai += |
|
|
'<div class="card card-primary card-outline mt-05">' + |
|
|
'<div class="card card-primary card-outline mt-05">' + |
|
|
'<div class="card-body box-profile">' + |
|
|
'<div class="card-body box-profile">' + |
|
|
'<h2 class="profile-username text-center">'+name+'</h2>' + |
|
|
'<h2 class="profile-username text-center">' + name + '</h2>' + |
|
|
'<p class="lead text-center"><a href="tel:' + tel + '">' + tel+ '</a></p>' + |
|
|
'<p class="lead text-center"><a href="tel:' + tel + '">' + tel + '</a></p>' + |
|
|
'<p class="lead text-center">' + address + '</p>' + |
|
|
'<p class="lead text-center">' + address + '</p>' + |
|
|
'<ul class="list-group list-group-unbordered mb-3 lead">' + |
|
|
'<ul class="list-group list-group-unbordered mb-3 lead">' + |
|
|
'<li class="list-group-item">' + |
|
|
'<li class="list-group-item">' + |
|
@ -124,7 +125,7 @@ |
|
|
'<b>保養員聯繫電話</b> <a class="float-right" href="tel:' + repairertel + '" >' + repairertel + '</a> ' + |
|
|
'<b>保養員聯繫電話</b> <a class="float-right" href="tel:' + repairertel + '" >' + repairertel + '</a> ' + |
|
|
'</li>' + |
|
|
'</li>' + |
|
|
'</ul>' + |
|
|
'</ul>' + |
|
|
'<p class="lead text-center"><a href="#" onclick=jibnen("'+customerid+'","'+chooselat+'")>查看電梯</a></p>' |
|
|
'<p class="lead text-center"><a href="#" onclick=jibnen("' + customerid + '","' + chooselat + '")>查看電梯</a></p>' |
|
|
'</div>' + |
|
|
'</div>' + |
|
|
'</div>'; |
|
|
'</div>'; |
|
|
} |
|
|
} |
|
@ -138,46 +139,46 @@ |
|
|
|
|
|
|
|
|
//const uluru = { lat:24.9966186 , lng: 121.1594333 }; |
|
|
//const uluru = { lat:24.9966186 , lng: 121.1594333 }; |
|
|
//const uluru = { lat:23.974003045820343 , lng: 120.97981583669126 }; |
|
|
//const uluru = { lat:23.974003045820343 , lng: 120.97981583669126 }; |
|
|
const uluru = { lat:23.633310942708295, lng: 120.77153763992857 }; |
|
|
const uluru = { lat: 23.633310942708295, lng: 120.77153763992857 }; |
|
|
const map = new google.maps.Map(document.getElementById("map"), { |
|
|
const map = new google.maps.Map(document.getElementById("map"), { |
|
|
zoom: 8, |
|
|
zoom: 8, |
|
|
center: uluru, |
|
|
center: uluru, |
|
|
// disableDefaultUI: true, |
|
|
// disableDefaultUI: true, |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const eledata2=document.createElement("div"); |
|
|
const eledata2 = document.createElement("div"); |
|
|
eledata2.className='gm-style-mtc'; |
|
|
eledata2.className = 'gm-style-mtc'; |
|
|
eledata2.style.cssText="float: left; position: relative;"; |
|
|
eledata2.style.cssText = "float: left; position: relative;"; |
|
|
eledata2.innerHTML = "新竹以南、台南以北建置中。"; |
|
|
eledata2.innerHTML = "新竹以南、台南以北建置中。"; |
|
|
eledata2.style.cssText="background: none padding-box rgb(255, 255, 255);border: 0px; margin-left: 10px;text-transform: none; -webkit-appearance: none; position: relative; cursor: pointer; user-select: none; direction: ltr; overflow: hidden; text-align: center; height: 24px;width:200px; vertical-align: middle; color: rgb(0, 0, 0); font-family: Roboto, Arial, sans-serif; font-size: 15px; border-bottom-left-radius: 2px; border-top-left-radius: 2px; -webkit-background-clip: padding-box; box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px; min-width: 36px; font-weight: 500;"; |
|
|
eledata2.style.cssText = "background: none padding-box rgb(255, 255, 255);border: 0px; margin-left: 10px;text-transform: none; -webkit-appearance: none; position: relative; cursor: pointer; user-select: none; direction: ltr; overflow: hidden; text-align: center; height: 24px;width:200px; vertical-align: middle; color: rgb(0, 0, 0); font-family: Roboto, Arial, sans-serif; font-size: 15px; border-bottom-left-radius: 2px; border-top-left-radius: 2px; -webkit-background-clip: padding-box; box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px; min-width: 36px; font-weight: 500;"; |
|
|
|
|
|
|
|
|
const eledata=document.createElement("div"); |
|
|
const eledata = document.createElement("div"); |
|
|
eledata.className='gm-style-mtc'; |
|
|
eledata.className = 'gm-style-mtc'; |
|
|
eledata.style.cssText="float: left; position: relative;"; |
|
|
eledata.style.cssText = "float: left; position: relative;"; |
|
|
const fenbutu = document.createElement("button"); |
|
|
const fenbutu = document.createElement("button"); |
|
|
fenbutu.textContent = "分佈圖"; |
|
|
fenbutu.textContent = "分佈圖"; |
|
|
fenbutu.style.cssText="background: none padding-box rgb(255, 255, 255);border: 0px; margin-left: 10px;text-transform: none; -webkit-appearance: none; position: relative; user-select: none; direction: ltr; overflow: hidden; text-align: center; height: 40px;width:70px; vertical-align: middle; color: rgb(0, 0, 0); font-family: Roboto, Arial, sans-serif; font-size: 18px; border-bottom-left-radius: 2px; border-top-left-radius: 2px; -webkit-background-clip: padding-box; box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px; min-width: 36px; font-weight: 500;"; |
|
|
fenbutu.style.cssText = "background: none padding-box rgb(255, 255, 255);border: 0px; margin-left: 10px;text-transform: none; -webkit-appearance: none; position: relative; user-select: none; direction: ltr; overflow: hidden; text-align: center; height: 40px;width:70px; vertical-align: middle; color: rgb(0, 0, 0); font-family: Roboto, Arial, sans-serif; font-size: 18px; border-bottom-left-radius: 2px; border-top-left-radius: 2px; -webkit-background-clip: padding-box; box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px; min-width: 36px; font-weight: 500;"; |
|
|
eledata.appendChild(fenbutu); |
|
|
eledata.appendChild(fenbutu); |
|
|
|
|
|
|
|
|
const eledata1=document.createElement("div"); |
|
|
const eledata1 = document.createElement("div"); |
|
|
eledata1.className='gm-style-mtc xia'; |
|
|
eledata1.className = 'gm-style-mtc xia'; |
|
|
eledata1.style.cssText="width:100px;margin-left: 10px;margin-top: 5px; display:none"; |
|
|
eledata1.style.cssText = "width:100px;margin-left: 10px;margin-top: 5px; display:none"; |
|
|
eledata.appendChild(eledata1); |
|
|
eledata.appendChild(eledata1); |
|
|
|
|
|
|
|
|
const dainti = document.createElement("button"); |
|
|
const dainti = document.createElement("button"); |
|
|
dainti.textContent = "電梯"; |
|
|
dainti.textContent = "電梯"; |
|
|
dainti.style.cssText="background: none padding-box rgb(255, 255, 255); border: 0px; margin-top: 2px;text-transform: none; -webkit-appearance: none; position: relative; cursor: pointer; user-select: none; direction: ltr; overflow: hidden; text-align: center; height: 40px;width:70px; vertical-align: middle; color: rgb(0, 0, 0); font-family: Roboto, Arial, sans-serif; font-size: 18px; border-bottom-left-radius: 2px; border-top-left-radius: 2px; -webkit-background-clip: padding-box; box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px; min-width: 36px; font-weight: 500;"; |
|
|
dainti.style.cssText = "background: none padding-box rgb(255, 255, 255); border: 0px; margin-top: 2px;text-transform: none; -webkit-appearance: none; position: relative; cursor: pointer; user-select: none; direction: ltr; overflow: hidden; text-align: center; height: 40px;width:70px; vertical-align: middle; color: rgb(0, 0, 0); font-family: Roboto, Arial, sans-serif; font-size: 18px; border-bottom-left-radius: 2px; border-top-left-radius: 2px; -webkit-background-clip: padding-box; box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px; min-width: 36px; font-weight: 500;"; |
|
|
|
|
|
|
|
|
const baoyangyuan = document.createElement("button"); |
|
|
const baoyangyuan = document.createElement("button"); |
|
|
baoyangyuan.textContent = "保養員"; |
|
|
baoyangyuan.textContent = "保養員"; |
|
|
baoyangyuan.style.cssText="background: none padding-box rgb(255, 255, 255);border: 0px;margin-top: 2px; text-transform: none; -webkit-appearance: none; position: relative; cursor: pointer; user-select: none; direction: ltr; overflow: hidden; text-align: center; height: 40px;width:70px; vertical-align: middle; color: rgb(0, 0, 0); font-family: Roboto, Arial, sans-serif; font-size: 18px; border-bottom-left-radius: 2px; border-top-left-radius: 2px; -webkit-background-clip: padding-box; box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px; min-width: 36px; font-weight: 500;"; |
|
|
baoyangyuan.style.cssText = "background: none padding-box rgb(255, 255, 255);border: 0px;margin-top: 2px; text-transform: none; -webkit-appearance: none; position: relative; cursor: pointer; user-select: none; direction: ltr; overflow: hidden; text-align: center; height: 40px;width:70px; vertical-align: middle; color: rgb(0, 0, 0); font-family: Roboto, Arial, sans-serif; font-size: 18px; border-bottom-left-radius: 2px; border-top-left-radius: 2px; -webkit-background-clip: padding-box; box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px; min-width: 36px; font-weight: 500;"; |
|
|
const gongchang = document.createElement("button"); |
|
|
const gongchang = document.createElement("button"); |
|
|
gongchang.textContent = "工廠"; |
|
|
gongchang.textContent = "工廠"; |
|
|
gongchang.style.cssText="background: none padding-box rgb(255, 255, 255); border: 0px; margin-top: 2px;text-transform: none; -webkit-appearance: none; position: relative; cursor: pointer; user-select: none; direction: ltr; overflow: hidden; text-align: center; height: 40px;width:70px; vertical-align: middle; color: rgb(0, 0, 0); font-family: Roboto, Arial, sans-serif; font-size: 18px; border-bottom-left-radius: 2px; border-top-left-radius: 2px; -webkit-background-clip: padding-box; box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px; min-width: 36px; font-weight: 500;"; |
|
|
gongchang.style.cssText = "background: none padding-box rgb(255, 255, 255); border: 0px; margin-top: 2px;text-transform: none; -webkit-appearance: none; position: relative; cursor: pointer; user-select: none; direction: ltr; overflow: hidden; text-align: center; height: 40px;width:70px; vertical-align: middle; color: rgb(0, 0, 0); font-family: Roboto, Arial, sans-serif; font-size: 18px; border-bottom-left-radius: 2px; border-top-left-radius: 2px; -webkit-background-clip: padding-box; box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px; min-width: 36px; font-weight: 500;"; |
|
|
|
|
|
|
|
|
const gongdi = document.createElement("button"); |
|
|
const gongdi = document.createElement("button"); |
|
|
gongdi.textContent = "工地"; |
|
|
gongdi.textContent = "工地"; |
|
|
gongdi.style.cssText="background: none padding-box rgb(255, 255, 255); border: 0px; margin-top: 2px;text-transform: none; -webkit-appearance: none; position: relative; cursor: pointer; user-select: none; direction: ltr; overflow: hidden; text-align: center; height: 40px;width:70px; vertical-align: middle; color: rgb(0, 0, 0); font-family: Roboto, Arial, sans-serif; font-size: 18px; border-bottom-left-radius: 2px; border-top-left-radius: 2px; -webkit-background-clip: padding-box; box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px; min-width: 36px; font-weight: 500;"; |
|
|
gongdi.style.cssText = "background: none padding-box rgb(255, 255, 255); border: 0px; margin-top: 2px;text-transform: none; -webkit-appearance: none; position: relative; cursor: pointer; user-select: none; direction: ltr; overflow: hidden; text-align: center; height: 40px;width:70px; vertical-align: middle; color: rgb(0, 0, 0); font-family: Roboto, Arial, sans-serif; font-size: 18px; border-bottom-left-radius: 2px; border-top-left-radius: 2px; -webkit-background-clip: padding-box; box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px; min-width: 36px; font-weight: 500;"; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
eledata1.appendChild(dainti); |
|
|
eledata1.appendChild(dainti); |
|
@ -194,32 +195,32 @@ |
|
|
eledata1.style.display = "none"; |
|
|
eledata1.style.display = "none"; |
|
|
}) |
|
|
}) |
|
|
dainti.addEventListener('click', () => { |
|
|
dainti.addEventListener('click', () => { |
|
|
window.location.href="tw.html"; |
|
|
window.location.href = "tw.html"; |
|
|
}); |
|
|
}); |
|
|
baoyangyuan.addEventListener('click', () => { |
|
|
baoyangyuan.addEventListener('click', () => { |
|
|
window.location.href="person.html"; |
|
|
window.location.href = "person.html"; |
|
|
}); |
|
|
}); |
|
|
gongchang.addEventListener('click', () => { |
|
|
gongchang.addEventListener('click', () => { |
|
|
window.location.href="factory.html"; |
|
|
window.location.href = "factory.html"; |
|
|
}); |
|
|
}); |
|
|
gongdi.addEventListener('click', () => { |
|
|
gongdi.addEventListener('click', () => { |
|
|
window.location.href="worksite.html"; |
|
|
window.location.href = "worksite.html"; |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
window.initMap = initMap; |
|
|
window.initMap = initMap; |
|
|
|
|
|
|
|
|
function kehu(chooselng){ |
|
|
function kehu(chooselng) { |
|
|
|
|
|
|
|
|
var accountURL = wurl + 'phb/map/account.php?latitude='+chooselng; |
|
|
var accountURL = wurl + 'phb/map/account.php?latitude=' + chooselng; |
|
|
$.ajax({ |
|
|
$.ajax({ |
|
|
type: "GET", |
|
|
type: "GET", |
|
|
url: accountURL, |
|
|
url: accountURL, |
|
|
success: function (msg) { |
|
|
success: function (msg) { |
|
|
var result = eval("(" + msg + ")"); |
|
|
var result = eval("(" + msg + ")"); |
|
|
console.log(result); |
|
|
console.log(result); |
|
|
var htmltai=''; |
|
|
var htmltai = ''; |
|
|
if (result.length > 0) { |
|
|
if (result.length > 0) { |
|
|
for (i = 0; i < result.length; i++) { |
|
|
for (i = 0; i < result.length; i++) { |
|
|
var name = result[i]['name']; |
|
|
var name = result[i]['name']; |
|
@ -227,14 +228,14 @@ |
|
|
var address = result[i]['address']; |
|
|
var address = result[i]['address']; |
|
|
var repairername = result[i]['repairername']; |
|
|
var repairername = result[i]['repairername']; |
|
|
var repairertel = result[i]['repairertel']; |
|
|
var repairertel = result[i]['repairertel']; |
|
|
var customerid=result[i]['customerid']; |
|
|
var customerid = result[i]['customerid']; |
|
|
|
|
|
|
|
|
htmltai += |
|
|
htmltai += |
|
|
'<div class="card card-primary card-outline mt-05">' + |
|
|
'<div class="card card-primary card-outline mt-05">' + |
|
|
'<div class="card-body box-profile">' + |
|
|
'<div class="card-body box-profile">' + |
|
|
'<h3 class="profile-username text-center">'+name+'</h3>' + |
|
|
'<h3 class="profile-username text-center">' + name + '</h3>' + |
|
|
'<p class="text-muted text-center"><a href="tel:' + tel + '">' + tel+ '</a</p>' + |
|
|
'<p class="text-muted text-center"><a href="tel:' + tel + '">' + tel + '</a</p>' + |
|
|
'<p class="text-muted text-center">' + address + ' <a href="#" onclick=jibnen("'+customerid+'","'+chooselng+'")>查看作番</a></p>' + |
|
|
'<p class="text-muted text-center">' + address + ' <a href="#" onclick=jibnen("' + customerid + '","' + chooselng + '")>查看作番</a></p>' + |
|
|
'<ul class="list-group list-group-unbordered mb-3">' + |
|
|
'<ul class="list-group list-group-unbordered mb-3">' + |
|
|
'<li class="list-group-item">' + |
|
|
'<li class="list-group-item">' + |
|
|
'<b>保養員</b> <a class="float-right">' + repairername + '</a>' + |
|
|
'<b>保養員</b> <a class="float-right">' + repairername + '</a>' + |
|
@ -254,24 +255,24 @@ |
|
|
}) |
|
|
}) |
|
|
|
|
|
|
|
|
} |
|
|
} |
|
|
function jibnen(customerid,chooselng){ |
|
|
function jibnen(customerid, chooselng) { |
|
|
var facilityURL = wurl + 'phb/map/facility.php?customerid='+customerid; |
|
|
var facilityURL = wurl + 'phb/map/facility.php?customerid=' + customerid; |
|
|
$.ajax({ |
|
|
$.ajax({ |
|
|
type: "GET", |
|
|
type: "GET", |
|
|
url: facilityURL, |
|
|
url: facilityURL, |
|
|
success: function (msg) { |
|
|
success: function (msg) { |
|
|
var result = eval("(" + msg + ")"); |
|
|
var result = eval("(" + msg + ")"); |
|
|
console.log(result); |
|
|
console.log(result); |
|
|
var htmlfacility=''; |
|
|
var htmlfacility = ''; |
|
|
htmlfacility = '<div class="card card-primary card-outline">' + |
|
|
htmlfacility = '<div class="card card-primary card-outline">' + |
|
|
' <div class="appHeader bg-primary text-light">' + |
|
|
' <div class="appHeader bg-primary text-light">' + |
|
|
' <div class="left">' + |
|
|
' <div class="left">' + |
|
|
' <a href="#" onclick=kehu("'+chooselng+'") class="headerButton">' + |
|
|
' <a href="#" onclick=kehu("' + chooselng + '") class="headerButton">' + |
|
|
' <ion-icon name="chevron-back-outline"></ion-icon>' + |
|
|
' <ion-icon name="chevron-back-outline"></ion-icon>' + |
|
|
' </a>' + |
|
|
' </a>' + |
|
|
' </div>' + |
|
|
' </div>' + |
|
|
' <div class="pageTitle">電梯</div>' + |
|
|
' <div class="pageTitle">電梯</div>' + |
|
|
' </div>'+ |
|
|
' </div>' + |
|
|
'<div class="card-body box-profile" id="facility">' + |
|
|
'<div class="card-body box-profile" id="facility">' + |
|
|
|
|
|
|
|
|
'</div>' + |
|
|
'</div>' + |
|
@ -279,12 +280,12 @@ |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (result[0].length > 0) { |
|
|
if (result[0].length > 0) { |
|
|
var htmlds=''; |
|
|
var htmlds = ''; |
|
|
// next month |
|
|
// next month |
|
|
const date = new Date(); |
|
|
const date = new Date(); |
|
|
const ndate = new Date(date.setMonth(date.getMonth()+1)); |
|
|
const ndate = new Date(date.setMonth(date.getMonth() + 1)); |
|
|
let nextDay = String(ndate.getDate()).padStart(2, '0'); |
|
|
let nextDay = String(ndate.getDate()).padStart(2, '0'); |
|
|
let nextMonth = String(ndate.getMonth()+1).padStart(2,"0"); |
|
|
let nextMonth = String(ndate.getMonth() + 1).padStart(2, "0"); |
|
|
let nextYear = ndate.getFullYear(); |
|
|
let nextYear = ndate.getFullYear(); |
|
|
//let nextDate = `${nextYear}-${nextMonth}-${nextDay}`; |
|
|
//let nextDate = `${nextYear}-${nextMonth}-${nextDay}`; |
|
|
let nextDate = `${nextYear}-${nextMonth}-15`; |
|
|
let nextDate = `${nextYear}-${nextMonth}-15`; |
|
@ -295,64 +296,68 @@ |
|
|
var speed = result[0][i]['speed']; |
|
|
var speed = result[0][i]['speed']; |
|
|
var numberoffloor = result[0][i]['numberoffloor']; |
|
|
var numberoffloor = result[0][i]['numberoffloor']; |
|
|
var numberofstop = (result[0][i]['numberofstop'] == 1) ? "2" : result[0][i]['numberofstop']; // 預設2停 |
|
|
var numberofstop = (result[0][i]['numberofstop'] == 1) ? "2" : result[0][i]['numberofstop']; // 預設2停 |
|
|
var actualdate = (result[1][facilityno]) ? result[1][facilityno]['actualdate'] : "預計 "+nextDate; |
|
|
var actualdate = (result[1][facilityno]) ? result[1][facilityno]['actualdate'] : "預計 " + nextDate; |
|
|
var sid = (result[1][facilityno]) ? result[1][facilityno]['id'] : "0"; |
|
|
var sid = (result[1][facilityno]) ? result[1][facilityno]['id'] : "0"; |
|
|
var schedule_detail = ""; |
|
|
var schedule_detail = ""; |
|
|
|
|
|
|
|
|
|
|
|
// 補丁 actualdate = 展示太久沒更新保養日期做假資料 |
|
|
|
|
|
actualdate = fakeActualdate(actualdate); |
|
|
|
|
|
|
|
|
if (sid > 0) { |
|
|
if (sid > 0) { |
|
|
schedule_detail += '<li class="list-group-item"><b>保養明細</b> '; |
|
|
schedule_detail += '<li class="list-group-item"><b>保養明細</b> '; |
|
|
schedule_detail += '<a href="/app/app-maintenance-uploadsuccess-survey.php?id_schedule='+sid+'&view=Y" class="float-right" target="_self">連結</a>'; |
|
|
schedule_detail += '<a href="/app/app-maintenance-uploadsuccess-survey.php?id_schedule=' + sid + '&view=Y&actualdate=' + actualdate + '" class="float-right" target="_self">連結</a>'; |
|
|
schedule_detail += '</li>'; |
|
|
schedule_detail += '</li>'; |
|
|
} |
|
|
} |
|
|
var ckmore = ""; |
|
|
var ckmore = ""; |
|
|
if (sid > 0) { |
|
|
if (sid > 0) { |
|
|
ckmore = '<a href="/app/app-maintenance-uploadsuccess-photo-review_v2.php?id_schedule='+sid+'" target="_self" title="瀏覽保養照片"><img src="icon/camera.png" width="25" style="vertical-align:middle;"></a>'; |
|
|
ckmore = '<a href="/app/app-maintenance-uploadsuccess-photo-review_v2.php?id_schedule=' + sid + '" target="_self" title="瀏覽保養照片"><img src="icon/camera.png" width="25" style="vertical-align:middle;"></a>'; |
|
|
} |
|
|
} |
|
|
var baditems = (result[1][facilityno]) ? result[1][facilityno]['baditems'] : ""; |
|
|
var baditems = (result[1][facilityno]) ? result[1][facilityno]['baditems'] : ""; |
|
|
var sresult = ""; |
|
|
var sresult = ""; |
|
|
if (baditems) { |
|
|
if (baditems) { |
|
|
if (result[1][facilityno]['item_detail']) { |
|
|
if (result[1][facilityno]['item_detail']) { |
|
|
sresult += '<br><a class="float-left" style="margin-top:6px;">'+baditems+'<br>'+result[1][facilityno]['item_detail']+'</a>'; |
|
|
sresult += '<br><a class="float-left" style="margin-top:6px;">' + baditems + '<br>' + result[1][facilityno]['item_detail'] + '</a>'; |
|
|
} else { |
|
|
} else { |
|
|
sresult += '<a class="float-right">'+baditems+'</a>'; |
|
|
sresult += '<a class="float-right">' + baditems + '</a>'; |
|
|
} |
|
|
} |
|
|
} else { |
|
|
} else { |
|
|
sresult += '<a class="float-right">新梯待保養</a>'; |
|
|
sresult += '<a class="float-right">新梯待保養</a>'; |
|
|
} |
|
|
} |
|
|
var fault_message = ''; |
|
|
var fault_message = ''; |
|
|
if (result[2][facilityno]) { |
|
|
if (result[2][facilityno]) { |
|
|
for (j=0; j<result[2][facilityno].length; j++) { |
|
|
for (j = 0; j < result[2][facilityno].length; j++) { |
|
|
fault_message += result[2][facilityno][j]+'<br>'; |
|
|
fault_message += result[2][facilityno][j] + '<br>'; |
|
|
} |
|
|
} |
|
|
} else fault_message = '狀態正常'; |
|
|
} else fault_message = '狀態正常'; |
|
|
htmlds += |
|
|
htmlds += |
|
|
'<ul class="list-group list-group-unbordered mb-3 lead">' + |
|
|
'<ul class="list-group list-group-unbordered mb-3 lead">' + |
|
|
'<li class="list-group-item list-group-item-secondary">' + |
|
|
'<li class="list-group-item list-group-item-secondary">' + |
|
|
'<b>電梯ID</b> <a class="float-right">'+facilityno+'</a>' + |
|
|
'<b>電梯ID</b> <a class="float-right">' + facilityno + '</a>' + |
|
|
'</li>' + |
|
|
'</li>' + |
|
|
'<li class="list-group-item">' + |
|
|
'<li class="list-group-item">' + |
|
|
'<b>速度</b> <a class="float-right">'+speed+'m/min</a>' + |
|
|
'<b>速度</b> <a class="float-right">' + speed + 'm/min</a>' + |
|
|
'</li>' + |
|
|
'</li>' + |
|
|
'<li class="list-group-item">' + |
|
|
'<li class="list-group-item">' + |
|
|
'<b>樓層</b> <a class="float-right">'+numberoffloor+'樓</a>' + |
|
|
'<b>樓層</b> <a class="float-right">' + numberoffloor + '樓</a>' + |
|
|
'</li>' + |
|
|
'</li>' + |
|
|
'<li class="list-group-item">' + |
|
|
'<li class="list-group-item">' + |
|
|
'<b>樓停</b> <a class="float-right">'+numberofstop+'停</a>' + |
|
|
'<b>樓停</b> <a class="float-right">' + numberofstop + '停</a>' + |
|
|
'</li>' + |
|
|
'</li>' + |
|
|
'<li class="list-group-item">' + |
|
|
'<li class="list-group-item">' + |
|
|
'<b>地址</b> <a class="float-right">'+address+'</a>' + |
|
|
'<b>地址</b> <a class="float-right">' + address + '</a>' + |
|
|
'</li>' + |
|
|
'</li>' + |
|
|
'<li class="list-group-item">' + |
|
|
'<li class="list-group-item">' + |
|
|
'<b>最近一次保養日期</b> <a class="float-right">'+actualdate+'</a>' + |
|
|
'<b>最近一次保養日期</b> <a class="float-right">' + actualdate + '</a>' + |
|
|
'</li>' + |
|
|
'</li>' + |
|
|
schedule_detail + |
|
|
schedule_detail + |
|
|
'<li class="list-group-item">' + |
|
|
'<li class="list-group-item">' + |
|
|
'<b>保養結果</b> '+ckmore+ sresult + |
|
|
'<b>保養結果</b> ' + ckmore + sresult + |
|
|
'</li>' + |
|
|
'</li>' + |
|
|
'<li class="list-group-item">' + |
|
|
'<li class="list-group-item">' + |
|
|
'<b>故障訊息</b> <a class="float-right">'+fault_message+'</a>' + |
|
|
'<b>故障訊息</b> <a class="float-right">' + fault_message + '</a>' + |
|
|
//'<br><a class="float-right">' + item_detail + '</a>' + |
|
|
//'<br><a class="float-right">' + item_detail + '</a>' + |
|
|
'</li>' + |
|
|
'</li>' + |
|
|
'</ul>' ; |
|
|
'</ul>'; |
|
|
/* |
|
|
/* |
|
|
'<li class="list-group-item">' + |
|
|
'<li class="list-group-item">' + |
|
|
'<a href="#" onclick=jishi("'+facilityno+'","'+customerid+'") class="btn btn-primary width40"><b>及時狀態</b></a>'+ |
|
|
'<a href="#" onclick=jishi("'+facilityno+'","'+customerid+'") class="btn btn-primary width40"><b>及時狀態</b></a>'+ |
|
@ -370,10 +375,10 @@ |
|
|
|
|
|
|
|
|
} |
|
|
} |
|
|
// 及時狀態 |
|
|
// 及時狀態 |
|
|
function jishi(facilityno,customerid){ |
|
|
function jishi(facilityno, customerid) { |
|
|
|
|
|
|
|
|
var htmlds=""; |
|
|
var htmlds = ""; |
|
|
var facilitystatusURL = wurl + 'phb/map/facility_status.php?facilityno='+facilityno; |
|
|
var facilitystatusURL = wurl + 'phb/map/facility_status.php?facilityno=' + facilityno; |
|
|
$.ajax({ |
|
|
$.ajax({ |
|
|
type: "GET", |
|
|
type: "GET", |
|
|
url: facilitystatusURL, |
|
|
url: facilitystatusURL, |
|
@ -385,12 +390,12 @@ |
|
|
htmlds = '<div>' + |
|
|
htmlds = '<div>' + |
|
|
' <div class="appHeader bg-primary text-light">' + |
|
|
' <div class="appHeader bg-primary text-light">' + |
|
|
' <div class="left">' + |
|
|
' <div class="left">' + |
|
|
' <a href="#" onclick=jibnen("'+customerid+'") class="headerButton">' + |
|
|
' <a href="#" onclick=jibnen("' + customerid + '") class="headerButton">' + |
|
|
' <ion-icon name="chevron-back-outline"></ion-icon>' + |
|
|
' <ion-icon name="chevron-back-outline"></ion-icon>' + |
|
|
' </a>' + |
|
|
' </a>' + |
|
|
' </div>' + |
|
|
' </div>' + |
|
|
' <div class="pageTitle">及時狀態</div>' + |
|
|
' <div class="pageTitle">及時狀態</div>' + |
|
|
' </div>'+ |
|
|
' </div>' + |
|
|
'<div class="chart">' + |
|
|
'<div class="chart">' + |
|
|
'<canvas id="lineChart" height="200"></canvas>' + |
|
|
'<canvas id="lineChart" height="200"></canvas>' + |
|
|
'</div></div>'; |
|
|
'</div></div>'; |
|
@ -400,14 +405,14 @@ |
|
|
//折线图 |
|
|
//折线图 |
|
|
var lineChartCanvas = $('#lineChart') |
|
|
var lineChartCanvas = $('#lineChart') |
|
|
let linedata = { |
|
|
let linedata = { |
|
|
"labels":result['labels'], |
|
|
"labels": result['labels'], |
|
|
"datasets": [{ |
|
|
"datasets": [{ |
|
|
"label": "走行時間", |
|
|
"label": "走行時間", |
|
|
"data":result['walking_hours'] , |
|
|
"data": result['walking_hours'], |
|
|
"fill": false, |
|
|
"fill": false, |
|
|
"borderColor": "rgb(75, 192, 192)", |
|
|
"borderColor": "rgb(75, 192, 192)", |
|
|
"lineTension": 0.1 |
|
|
"lineTension": 0.1 |
|
|
},{ |
|
|
}, { |
|
|
"label": "走行次數", |
|
|
"label": "走行次數", |
|
|
"data": result['walking_times'], |
|
|
"data": result['walking_times'], |
|
|
"fill": false, |
|
|
"fill": false, |
|
@ -453,7 +458,7 @@ |
|
|
var meta = chartInstance.controller.getDatasetMeta(i); |
|
|
var meta = chartInstance.controller.getDatasetMeta(i); |
|
|
meta.data.forEach(function (bar, index) { |
|
|
meta.data.forEach(function (bar, index) { |
|
|
var data = dataset.data[index]; |
|
|
var data = dataset.data[index]; |
|
|
ctx.fillText(data, bar._model.x, bar._model.y-5); |
|
|
ctx.fillText(data, bar._model.x, bar._model.y - 5); |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
} |
|
|
} |
|
@ -473,10 +478,10 @@ |
|
|
|
|
|
|
|
|
} |
|
|
} |
|
|
// 故障內容 |
|
|
// 故障內容 |
|
|
function guzhang(facilityno,customerid){ |
|
|
function guzhang(facilityno, customerid) { |
|
|
|
|
|
|
|
|
var htmlds=''; |
|
|
var htmlds = ''; |
|
|
var facilitybreakdownURL = wurl + 'phb/map/facility_breakdown.php?facilityno='+facilityno; |
|
|
var facilitybreakdownURL = wurl + 'phb/map/facility_breakdown.php?facilityno=' + facilityno; |
|
|
$.ajax({ |
|
|
$.ajax({ |
|
|
type: "GET", |
|
|
type: "GET", |
|
|
url: facilitybreakdownURL, |
|
|
url: facilitybreakdownURL, |
|
@ -487,16 +492,16 @@ |
|
|
htmlds = '<div>' + |
|
|
htmlds = '<div>' + |
|
|
' <div class="appHeader bg-primary text-light">' + |
|
|
' <div class="appHeader bg-primary text-light">' + |
|
|
' <div class="left">' + |
|
|
' <div class="left">' + |
|
|
' <a href="#" onclick=jibnen("'+customerid+'") class="headerButton">' + |
|
|
' <a href="#" onclick=jibnen("' + customerid + '") class="headerButton">' + |
|
|
' <ion-icon name="chevron-back-outline"></ion-icon>' + |
|
|
' <ion-icon name="chevron-back-outline"></ion-icon>' + |
|
|
' </a>' + |
|
|
' </a>' + |
|
|
' </div>' + |
|
|
' </div>' + |
|
|
' <div class="pageTitle">故障內容</div>' + |
|
|
' <div class="pageTitle">故障內容</div>' + |
|
|
' </div>'+ |
|
|
' </div>' + |
|
|
'<div class="chart">' + |
|
|
'<div class="chart">' + |
|
|
'<canvas id="guzhangchart" height="100" ></canvas>' + |
|
|
'<canvas id="guzhangchart" height="100" ></canvas>' + |
|
|
'</div></div>'; |
|
|
'</div></div>'; |
|
|
htmlds+='<div style="width: 100%;height:200px;overflow: scroll">' + |
|
|
htmlds += '<div style="width: 100%;height:200px;overflow: scroll">' + |
|
|
'<div id="jsGrid1" style="height: 300px;font-size: 12px"></div>' + |
|
|
'<div id="jsGrid1" style="height: 300px;font-size: 12px"></div>' + |
|
|
'</div>' |
|
|
'</div>' |
|
|
$('#choosecontent').empty().append(htmlds); |
|
|
$('#choosecontent').empty().append(htmlds); |
|
@ -551,7 +556,7 @@ |
|
|
var meta = chartInstance.controller.getDatasetMeta(i); |
|
|
var meta = chartInstance.controller.getDatasetMeta(i); |
|
|
meta.data.forEach(function (bar, index) { |
|
|
meta.data.forEach(function (bar, index) { |
|
|
var data = dataset.data[index]; |
|
|
var data = dataset.data[index]; |
|
|
ctx.fillText(data, bar._model.x, bar._model.y-5); |
|
|
ctx.fillText(data, bar._model.x, bar._model.y - 5); |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
} |
|
|
} |
|
@ -572,12 +577,12 @@ |
|
|
paging: false, |
|
|
paging: false, |
|
|
data: result['tables'], |
|
|
data: result['tables'], |
|
|
fields: [ |
|
|
fields: [ |
|
|
{ name: "id",title:"項次", type: "text", }, |
|
|
{ name: "id", title: "項次", type: "text", }, |
|
|
{ name: "facilityno",title:"電梯編號", type: "text", }, |
|
|
{ name: "facilityno", title: "電梯編號", type: "text", }, |
|
|
{ name: "identifying_code",title:"識別碼", type: "text", }, |
|
|
{ name: "identifying_code", title: "識別碼", type: "text", }, |
|
|
{ name: "breakdown_code",title:"故障代碼", type: "text", }, |
|
|
{ name: "breakdown_code", title: "故障代碼", type: "text", }, |
|
|
{ name: "breakdown_content",title:"故障内容", type: "text", }, |
|
|
{ name: "breakdown_content", title: "故障内容", type: "text", }, |
|
|
{ name: "breakdown_date",title:"故障时间", type: "text", }, |
|
|
{ name: "breakdown_date", title: "故障时间", type: "text", }, |
|
|
] |
|
|
] |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
@ -589,8 +594,44 @@ |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
} |
|
|
</script> |
|
|
|
|
|
|
|
|
|
|
|
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDCJp-JIcYIyeR_QNpREvsepApvVytZWOs&callback=initMap" async defer></script> |
|
|
// 補丁 actualdate = 展示太久沒更新保養日期做假資料 |
|
|
|
|
|
function fakeActualdate(actualdate) { |
|
|
|
|
|
|
|
|
|
|
|
if (actualdate.substring(0, 2) == '預計') { |
|
|
|
|
|
return actualdate; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
const today = new Date(); |
|
|
|
|
|
const currentYear = today.getFullYear(); |
|
|
|
|
|
const currentMonth = today.getMonth() - 1; |
|
|
|
|
|
|
|
|
|
|
|
let datetimeArr = actualdate.split(' '); |
|
|
|
|
|
let dateArr = datetimeArr[0].split('-'); |
|
|
|
|
|
let timeArr = datetimeArr[1].split(':'); |
|
|
|
|
|
let year = parseInt(dateArr[0]); |
|
|
|
|
|
let month = parseInt(dateArr[1]); |
|
|
|
|
|
let day = parseInt(dateArr[2]); |
|
|
|
|
|
let hour = parseInt(timeArr[0]); |
|
|
|
|
|
let minute = parseInt(timeArr[1]); |
|
|
|
|
|
let second = parseInt(timeArr[2]); |
|
|
|
|
|
if (day > 30) { |
|
|
|
|
|
day = day - 1; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// return "2020-01-01 00:00:00"; |
|
|
|
|
|
if (year <= currentYear && month <= currentMonth) { |
|
|
|
|
|
return year + '-' + (currentMonth + 1) + '-' + day + ' ' + hour + ':' + minute + ':' + second; |
|
|
|
|
|
} else { |
|
|
|
|
|
return actualdate; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
|
|
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDCJp-JIcYIyeR_QNpREvsepApvVytZWOs&callback=initMap" |
|
|
|
|
|
async defer></script> |
|
|
</body> |
|
|
</body> |
|
|
|
|
|
|
|
|
</html> |
|
|
</html> |