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.
474 lines
20 KiB
474 lines
20 KiB
<html>
|
|
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset=big5"utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
|
|
<title>¹q±è¦a¹Ï</title>
|
|
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" crossorigin="anonymous">
|
|
<link rel="stylesheet" href="map.css"/>
|
|
<link rel="stylesheet" href="style.css"/>
|
|
<link rel="stylesheet" href="jsgrid.css">
|
|
<link rel="stylesheet" href="jsgrid-theme.css">
|
|
</head>
|
|
|
|
<body>
|
|
<div id="map" style="height: 100%"></div>
|
|
|
|
<!-- Jquery -->
|
|
<script src="js/lib/jquery-3.4.1.min.js"></script>
|
|
<!-- Bootstrap-->
|
|
<script src="js/lib/popper.min.js"></script>
|
|
<script src="js/lib/bootstrap.min.js"></script>
|
|
<!-- Ionicons -->
|
|
<script type="module" src="https://unpkg.com/ionicons@5.0.0/dist/ionicons/ionicons.js"></script>
|
|
<!-- Owl Carousel -->
|
|
<!--<script src="assets/js/plugins/owl-carousel/owl.carousel.min.js"></script>-->
|
|
<!-- jQuery Circle Progress -->
|
|
<!--<script src="assets/js/plugins/jquery-circle-progress/circle-progress.min.js"></script>-->
|
|
<!-- Base Js File -->
|
|
<script src="js/base.js"></script>
|
|
<script src="../da/chart.js/Chart.js"></script>
|
|
<script src="js/jsgrid.js"></script>
|
|
<script>
|
|
// This example displays a marker at the center of Australia.
|
|
// When the user clicks the marker, an info window opens.
|
|
const urll = location.href;
|
|
const wurl = urll.split('phb')[0];
|
|
function initMap() {
|
|
|
|
var pointURL = wurl + 'phb/map/point.php';
|
|
var points=[];
|
|
$.ajax({
|
|
type: "GET",
|
|
url: pointURL,
|
|
success: function (msg) {
|
|
var result = eval("(" + msg + ")");
|
|
if (result.length > 0) {
|
|
for (i = 0; i < result.length; i++) {
|
|
var obj={};
|
|
var longitude= Number(result[i]['longitude']);
|
|
var latitude = Number(result[i]['latitude']);
|
|
|
|
obj['lat']=longitude;
|
|
obj['lng']=latitude;
|
|
const marker = new google.maps.Marker({
|
|
position: obj,
|
|
map,
|
|
title:'¹q±è'
|
|
});
|
|
|
|
const contentString =
|
|
'<div class="container">' +
|
|
'<div class="row">' +
|
|
'<div class="col-md-12">' +
|
|
'<div id="choosecontent" style="height: 330px;width: 400px">' +
|
|
|
|
'</div>' +
|
|
'</div>'+
|
|
"</div>" +
|
|
"</div>";
|
|
const infowindow = new google.maps.InfoWindow({
|
|
content: contentString
|
|
});
|
|
|
|
|
|
|
|
clickMarker(marker,latitude,infowindow);
|
|
}
|
|
}
|
|
}
|
|
})
|
|
|
|
|
|
function clickMarker(marker,latitude,infowindow){
|
|
infowindow.close();
|
|
marker.addListener("click", (e) => {
|
|
infowindow.open({
|
|
anchor: marker,
|
|
map,
|
|
shouldFocus: false,
|
|
});
|
|
var chooselng=e.latLng.lng();
|
|
var accountURL = wurl + 'phb/map/account.php?latitude='+chooselng;
|
|
$.ajax({
|
|
type: "GET",
|
|
url: accountURL,
|
|
success: function (msg) {
|
|
var result = eval("(" + msg + ")");
|
|
console.log(result);
|
|
var htmltai='';
|
|
if (result.length > 0) {
|
|
for (i = 0; i < result.length; i++) {
|
|
var name = result[i]['name'];
|
|
var tel = result[i]['tel'];
|
|
var address = result[i]['address'];
|
|
var repairername = result[i]['repairername'];
|
|
var repairertel = result[i]['repairertel'];
|
|
var customerid=result[i]['customerid'];
|
|
|
|
htmltai +=
|
|
'<div class="card card-primary card-outline mt-05">' +
|
|
'<div class="card-body box-profile">' +
|
|
'<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">' + address + ' <a href="#" onclick=jibnen("'+customerid+'","'+chooselng+'")>¬d¬Ý§@µf</a></p>' +
|
|
'<ul class="list-group list-group-unbordered mb-3">' +
|
|
'<li class="list-group-item">' +
|
|
'<b>«O¾iû</b> <a class="float-right">' + repairername + '</a>' +
|
|
'</li>' +
|
|
'<li class="list-group-item">' +
|
|
'<b>«O¾iûÁpô¹q¸Ü</b> <a class="float-right" href="tel:' + repairertel + '" >' + repairertel + '</a> ' +
|
|
'</li>' +
|
|
'</ul>' +
|
|
'</div>' +
|
|
'</div>';
|
|
}
|
|
$('#choosecontent').empty().append(htmltai);
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
})
|
|
|
|
|
|
}
|
|
);
|
|
}
|
|
|
|
|
|
const uluru = { lat:24.9966186 , lng: 121.1594333 };
|
|
const map = new google.maps.Map(document.getElementById("map"), {
|
|
zoom: 9,
|
|
center: uluru,
|
|
});
|
|
|
|
|
|
}
|
|
|
|
window.initMap = initMap;
|
|
|
|
function kehu(chooselng){
|
|
|
|
var accountURL = wurl + 'phb/map/account.php?latitude='+chooselng;
|
|
$.ajax({
|
|
type: "GET",
|
|
url: accountURL,
|
|
success: function (msg) {
|
|
var result = eval("(" + msg + ")");
|
|
console.log(result);
|
|
var htmltai='';
|
|
if (result.length > 0) {
|
|
for (i = 0; i < result.length; i++) {
|
|
var name = result[i]['name'];
|
|
var tel = result[i]['tel'];
|
|
var address = result[i]['address'];
|
|
var repairername = result[i]['repairername'];
|
|
var repairertel = result[i]['repairertel'];
|
|
var customerid=result[i]['customerid'];
|
|
|
|
htmltai +=
|
|
'<div class="card card-primary card-outline mt-05">' +
|
|
'<div class="card-body box-profile">' +
|
|
'<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">' + address + ' <a href="#" onclick=jibnen("'+customerid+'","'+chooselng+'")>¬d¬Ý§@µf</a></p>' +
|
|
'<ul class="list-group list-group-unbordered mb-3">' +
|
|
'<li class="list-group-item">' +
|
|
'<b>«O¾iû</b> <a class="float-right">' + repairername + '</a>' +
|
|
'</li>' +
|
|
'<li class="list-group-item">' +
|
|
'<b>«O¾iûÁpô¹q¸Ü</b> <a class="float-right" href="tel:' + repairertel + '" >' + repairertel + '</a> ' +
|
|
'</li>' +
|
|
'</ul>' +
|
|
'</div>' +
|
|
'</div>';
|
|
}
|
|
$('#choosecontent').empty().append(htmltai);
|
|
|
|
}
|
|
|
|
}
|
|
})
|
|
|
|
}
|
|
function jibnen(customerid,chooselng){
|
|
var facilityURL = wurl + 'phb/map/facility.php?customerid='+customerid;
|
|
$.ajax({
|
|
type: "GET",
|
|
url: facilityURL,
|
|
success: function (msg) {
|
|
var result = eval("(" + msg + ")");
|
|
console.log(result);
|
|
var htmlfacility='';
|
|
htmlfacility = '<div class="card card-primary card-outline">' +
|
|
' <div class="appHeader bg-primary text-light">' +
|
|
' <div class="left">' +
|
|
' <a href="#" onclick=kehu("'+chooselng+'") class="headerButton">' +
|
|
' <ion-icon name="chevron-back-outline"></ion-icon>' +
|
|
' </a>' +
|
|
' </div>' +
|
|
' <div class="pageTitle">§@µf</div>' +
|
|
' </div>'+
|
|
'<div class="card-body box-profile" id="facility">' +
|
|
|
|
'</div>' +
|
|
'</div>';
|
|
|
|
|
|
if (result.length > 0) {
|
|
var htmlds='';
|
|
for (i = 0; i < result.length; i++) {
|
|
var facilityno = result[i]['facilityno'];
|
|
var address = result[i]['address'];
|
|
htmlds +=
|
|
'<ul class="list-group list-group-unbordered mb-3">' +
|
|
'<li class="list-group-item">' +
|
|
'<b>§@µf½s¸¹</b> <a class="float-right">'+facilityno+'</a>' +
|
|
'</li>' +
|
|
'<li class="list-group-item">' +
|
|
'<b>§@µf¦a§}</b> <a class="float-right">'+address+'</a>' +
|
|
'</li>' +
|
|
'<li class="list-group-item">' +
|
|
'<a href="#" onclick=jishi("'+facilityno+'","'+customerid+'") class="btn btn-primary width40"><b>¤Î®Éª¬ºA</b></a>'+
|
|
'<a href="#" onclick=guzhang("'+facilityno+'","'+customerid+'") class="btn btn-primary width40"><b>¬G»Ù¤º®e</b></a>'+
|
|
'</li>' +
|
|
'</ul>' ;
|
|
}
|
|
$('#choosecontent').empty().append(htmlfacility);
|
|
$('#facility').append(htmlds);
|
|
|
|
}
|
|
}
|
|
})
|
|
|
|
|
|
}
|
|
function jishi(facilityno,customerid){
|
|
|
|
var htmlds="";
|
|
var facilitystatusURL = wurl + 'phb/map/facility_status.php?facilityno='+facilityno;
|
|
$.ajax({
|
|
type: "GET",
|
|
url: facilitystatusURL,
|
|
success: function (msg) {
|
|
var result = eval("(" + msg + ")");
|
|
console.log(result);
|
|
console.log(result['labels']);
|
|
|
|
htmlds = '<div>' +
|
|
' <div class="appHeader bg-primary text-light">' +
|
|
' <div class="left">' +
|
|
' <a href="#" onclick=jibnen("'+customerid+'") class="headerButton">' +
|
|
' <ion-icon name="chevron-back-outline"></ion-icon>' +
|
|
' </a>' +
|
|
' </div>' +
|
|
' <div class="pageTitle">¤Î®Éª¬ºA</div>' +
|
|
' </div>'+
|
|
'<div class="chart">' +
|
|
'<canvas id="lineChart" height="200"></canvas>' +
|
|
'</div></div>';
|
|
$('#choosecontent').empty().append(htmlds);
|
|
|
|
|
|
//§é½u¹Ï
|
|
var lineChartCanvas = $('#lineChart')
|
|
let linedata = {
|
|
"labels":result['labels'],
|
|
"datasets": [{
|
|
"label": "¨«¦æ®É¶¡",
|
|
"data":result['walking_hours'] ,
|
|
"fill": false,
|
|
"borderColor": "rgb(75, 192, 192)",
|
|
"lineTension": 0.1
|
|
},{
|
|
"label": "¨«¦æ¦¸¼Æ",
|
|
"data": result['walking_times'],
|
|
"fill": false,
|
|
"borderColor": "rgb(192,75,126)",
|
|
"lineTension": 0.1
|
|
}]
|
|
};
|
|
const optsLineChart = {
|
|
scales: {
|
|
x: {
|
|
time: false,
|
|
},
|
|
y: {
|
|
range: [0, 100],
|
|
},
|
|
},
|
|
series: [
|
|
{},
|
|
{
|
|
fill: 'transparent',
|
|
width: 5,
|
|
stroke: 'rgba(60,141,188,1)',
|
|
},
|
|
{
|
|
stroke: '#c1c7d1',
|
|
width: 5,
|
|
fill: 'transparent',
|
|
},
|
|
],
|
|
hover: {
|
|
animationDuration: 0 // ¨¾¤î¹«¼Ð²¾¤W¥h¡A¼Æ¦r°{Ã{
|
|
},
|
|
animation: { // ³o³¡¤À¬O¼ÆÈÅã¥Üªº¥\¯à¹ê²{
|
|
onComplete: function () {
|
|
var chartInstance = this.chart,
|
|
ctx = chartInstance.ctx;
|
|
// ¥H¤UÄÝ©ócanvasªºÄÝ©Ê¡]font¡BfillStyle¡BtextAlign...¡^
|
|
ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
|
|
ctx.fillStyle = "black";
|
|
ctx.textAlign = 'center';
|
|
ctx.textBaseline = 'bottom';
|
|
this.data.datasets.forEach(function (dataset, i) {
|
|
var meta = chartInstance.controller.getDatasetMeta(i);
|
|
meta.data.forEach(function (bar, index) {
|
|
var data = dataset.data[index];
|
|
ctx.fillText(data, bar._model.x, bar._model.y-5);
|
|
});
|
|
});
|
|
}
|
|
}
|
|
};
|
|
|
|
new Chart(lineChartCanvas, {
|
|
type: 'line',
|
|
data: linedata,
|
|
options: optsLineChart
|
|
});
|
|
|
|
|
|
|
|
}
|
|
})
|
|
|
|
}
|
|
function guzhang(facilityno,customerid){
|
|
|
|
var htmlds='';
|
|
var facilitybreakdownURL = wurl + 'phb/map/facility_breakdown.php?facilityno='+facilityno;
|
|
$.ajax({
|
|
type: "GET",
|
|
url: facilitybreakdownURL,
|
|
success: function (msg) {
|
|
var result = eval("(" + msg + ")");
|
|
console.log(result);
|
|
|
|
htmlds = '<div>' +
|
|
' <div class="appHeader bg-primary text-light">' +
|
|
' <div class="left">' +
|
|
' <a href="#" onclick=jibnen("'+customerid+'") class="headerButton">' +
|
|
' <ion-icon name="chevron-back-outline"></ion-icon>' +
|
|
' </a>' +
|
|
' </div>' +
|
|
' <div class="pageTitle">¬G»Ù¤º®e</div>' +
|
|
' </div>'+
|
|
'<div class="chart">' +
|
|
'<canvas id="guzhangchart" height="100" ></canvas>' +
|
|
'</div></div>';
|
|
htmlds+='<div style="width: 100%;height:200px;overflow: scroll">' +
|
|
'<div id="jsGrid1" style="height: 300px;font-size: 12px"></div>' +
|
|
'</div>'
|
|
$('#choosecontent').empty().append(htmlds);
|
|
|
|
//§é½u¹Ï
|
|
var guzhangchartCanvas = $('#guzhangchart')
|
|
let guzhanglinedata = {
|
|
"labels": result['labels'],
|
|
"datasets": [{
|
|
"label": "¬G»Ù¤º®e",
|
|
"data": result['data'],
|
|
"fill": true,
|
|
"borderColor": "rgb(75, 192, 192)",
|
|
"lineTension": 1
|
|
}]
|
|
};
|
|
const optsguzhangLineChart = {
|
|
scales: {
|
|
x: {
|
|
time: false,
|
|
},
|
|
y: {
|
|
range: [0, 100],
|
|
},
|
|
},
|
|
series: [
|
|
{},
|
|
{
|
|
fill: 'transparent',
|
|
width: 5,
|
|
stroke: 'rgba(60,141,188,1)',
|
|
},
|
|
{
|
|
stroke: '#c1c7d1',
|
|
width: 5,
|
|
fill: 'transparent',
|
|
},
|
|
],
|
|
hover: {
|
|
animationDuration: 0 // ¨¾¤î¹«¼Ð²¾¤W¥h¡A¼Æ¦r°{Ã{
|
|
},
|
|
animation: { // ³o³¡¤À¬O¼ÆÈÅã¥Üªº¥\¯à¹ê²{
|
|
onComplete: function () {
|
|
var chartInstance = this.chart,
|
|
ctx = chartInstance.ctx;
|
|
// ¥H¤UÄÝ©ócanvasªºÄÝ©Ê¡]font¡BfillStyle¡BtextAlign...¡^
|
|
ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
|
|
ctx.fillStyle = "black";
|
|
ctx.textAlign = 'center';
|
|
ctx.textBaseline = 'bottom';
|
|
this.data.datasets.forEach(function (dataset, i) {
|
|
var meta = chartInstance.controller.getDatasetMeta(i);
|
|
meta.data.forEach(function (bar, index) {
|
|
var data = dataset.data[index];
|
|
ctx.fillText(data, bar._model.x, bar._model.y-5);
|
|
});
|
|
});
|
|
}
|
|
}
|
|
};
|
|
|
|
new Chart(guzhangchartCanvas, {
|
|
type: 'line',
|
|
data: guzhanglinedata,
|
|
options: optsguzhangLineChart
|
|
});
|
|
//¼Æ¾Úªí
|
|
|
|
$("#jsGrid1").jsGrid({
|
|
height: "300px",
|
|
width: "100%",
|
|
sorting: true,
|
|
paging: false,
|
|
data: result['tables'],
|
|
fields: [
|
|
{ name: "id",title:"¶µ¦¸", type: "text", },
|
|
{ name: "facilityno",title:"¹q±è½s¸¹", type: "text", },
|
|
{ name: "identifying_code",title:"ÃѧO½X", type: "text", },
|
|
{ name: "breakdown_code",title:"¬G»Ù¥N½X", type: "text", },
|
|
{ name: "breakdown_content",title:"¬G»Ù¤º®e", type: "text", },
|
|
{ name: "breakdown_date",title:"¬G»Ù®É¶¡", type: "text", },
|
|
]
|
|
});
|
|
|
|
|
|
|
|
|
|
}
|
|
})
|
|
|
|
|
|
}
|
|
</script>
|
|
|
|
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDCJp-JIcYIyeR_QNpREvsepApvVytZWOs&callback=initMap" async defer></script>
|
|
</body>
|
|
</html>
|
|
|