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.
596 lines
30 KiB
596 lines
30 KiB
<html>
|
|
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="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>電梯地圖</title>
|
|
<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>
|
|
<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 pointURL = wurl + 'phbbackup/map/point.php';
|
|
var points=[];
|
|
var currentInfoWindow = null;
|
|
$.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']);
|
|
var custormname=result[i]['name'];
|
|
obj['lat']=latitude;
|
|
obj['lng']=longitude;
|
|
|
|
var icon = {
|
|
url: 'icon/lift.png',
|
|
//scaledSize: new google.maps.Size(52, 50), // scaled size
|
|
scaledSize: new google.maps.Size(32.4, 31.2), // scaled size
|
|
origin: new google.maps.Point(0,0), // origin
|
|
anchor: new google.maps.Point(0, 0) // anchor
|
|
};
|
|
const marker = new google.maps.Marker({
|
|
position: obj,
|
|
map,
|
|
title:custormname,
|
|
icon:icon
|
|
});
|
|
|
|
const contentString =
|
|
'<div class="container">' +
|
|
'<div class="row">' +
|
|
'<div class="col-md-12">' +
|
|
'<div id="choosecontent" style="height: 430px;width: 500px">' +
|
|
|
|
'</div>' +
|
|
'</div>'+
|
|
"</div>" +
|
|
"</div>";
|
|
const infowindow = new google.maps.InfoWindow({
|
|
content: contentString
|
|
});
|
|
|
|
clickMarker(marker,latitude,infowindow);
|
|
}
|
|
}
|
|
}
|
|
})
|
|
|
|
|
|
function clickMarker(marker,latitude,infowindow){
|
|
marker.addListener("click", (e) => {
|
|
if (currentInfoWindow != null) {
|
|
currentInfoWindow.close();
|
|
}
|
|
infowindow.open({
|
|
anchor: marker,
|
|
map,
|
|
shouldFocus: false,
|
|
});
|
|
currentInfoWindow = infowindow;
|
|
var chooselat=e.latLng.lat();
|
|
var accountURL = wurl + 'phb/map/account.php?latitude='+chooselat;
|
|
$.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">' +
|
|
'<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">' + address + '</p>' +
|
|
'<ul class="list-group list-group-unbordered mb-3 lead">' +
|
|
'<li class="list-group-item">' +
|
|
'<b>保養員</b> <a class="float-right">' + repairername + '</a>' +
|
|
'</li>' +
|
|
'<li class="list-group-item">' +
|
|
'<b>保養員聯繫電話</b> <a class="float-right" href="tel:' + repairertel + '" >' + repairertel + '</a> ' +
|
|
'</li>' +
|
|
'</ul>' +
|
|
'<p class="lead text-center"><a href="#" onclick=jibnen("'+customerid+'","'+chooselat+'")>查看電梯</a></p>'
|
|
'</div>' +
|
|
'</div>';
|
|
}
|
|
$('#choosecontent').empty().append(htmltai);
|
|
}
|
|
}
|
|
})
|
|
});
|
|
}
|
|
|
|
|
|
//const uluru = { lat:24.9966186 , lng: 121.1594333 };
|
|
//const uluru = { lat:23.974003045820343 , lng: 120.97981583669126 };
|
|
const uluru = { lat:23.633310942708295, lng: 120.77153763992857 };
|
|
const map = new google.maps.Map(document.getElementById("map"), {
|
|
zoom: 8,
|
|
center: uluru,
|
|
// disableDefaultUI: true,
|
|
});
|
|
|
|
const eledata2=document.createElement("div");
|
|
eledata2.className='gm-style-mtc';
|
|
eledata2.style.cssText="float: left; position: relative;";
|
|
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;";
|
|
|
|
const eledata=document.createElement("div");
|
|
eledata.className='gm-style-mtc';
|
|
eledata.style.cssText="float: left; position: relative;";
|
|
const fenbutu = document.createElement("button");
|
|
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;";
|
|
eledata.appendChild(fenbutu);
|
|
|
|
const eledata1=document.createElement("div");
|
|
eledata1.className='gm-style-mtc xia';
|
|
eledata1.style.cssText="width:100px;margin-left: 10px;margin-top: 5px; display:none";
|
|
eledata.appendChild(eledata1);
|
|
|
|
const dainti = document.createElement("button");
|
|
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;";
|
|
|
|
const baoyangyuan = document.createElement("button");
|
|
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;";
|
|
const gongchang = document.createElement("button");
|
|
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;";
|
|
|
|
const gongdi = document.createElement("button");
|
|
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;";
|
|
|
|
|
|
eledata1.appendChild(dainti);
|
|
eledata1.appendChild(baoyangyuan);
|
|
eledata1.appendChild(gongchang);
|
|
eledata1.appendChild(gongdi);
|
|
map.controls[google.maps.ControlPosition.LEFT_TOP].push(eledata);
|
|
map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(eledata2);
|
|
|
|
fenbutu.onmouseover = (() => {
|
|
eledata1.style.display = "block";
|
|
})
|
|
eledata1.onmouseleave = (() => {
|
|
eledata1.style.display = "none";
|
|
})
|
|
dainti.addEventListener('click', () => {
|
|
window.location.href="tw.html";
|
|
});
|
|
baoyangyuan.addEventListener('click', () => {
|
|
window.location.href="person.html";
|
|
});
|
|
gongchang.addEventListener('click', () => {
|
|
window.location.href="factory.html";
|
|
});
|
|
gongdi.addEventListener('click', () => {
|
|
window.location.href="worksite.html";
|
|
});
|
|
|
|
}
|
|
|
|
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+'")>查看作番</a></p>' +
|
|
'<ul class="list-group list-group-unbordered mb-3">' +
|
|
'<li class="list-group-item">' +
|
|
'<b>保養員</b> <a class="float-right">' + repairername + '</a>' +
|
|
'</li>' +
|
|
'<li class="list-group-item">' +
|
|
'<b>保養員聯繫電話</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">電梯</div>' +
|
|
' </div>'+
|
|
'<div class="card-body box-profile" id="facility">' +
|
|
|
|
'</div>' +
|
|
'</div>';
|
|
|
|
|
|
if (result[0].length > 0) {
|
|
var htmlds='';
|
|
// next month
|
|
const date = new Date();
|
|
const ndate = new Date(date.setMonth(date.getMonth()+1));
|
|
let nextDay = String(ndate.getDate()).padStart(2, '0');
|
|
let nextMonth = String(ndate.getMonth()+1).padStart(2,"0");
|
|
let nextYear = ndate.getFullYear();
|
|
//let nextDate = `${nextYear}-${nextMonth}-${nextDay}`;
|
|
let nextDate = `${nextYear}-${nextMonth}-15`;
|
|
|
|
for (i = 0; i < result[0].length; i++) {
|
|
var facilityno = result[0][i]['facilityno'];
|
|
var address = result[0][i]['address'];
|
|
var speed = result[0][i]['speed'];
|
|
var numberoffloor = result[0][i]['numberoffloor'];
|
|
var numberofstop = (result[0][i]['numberofstop'] == 1) ? "2" : result[0][i]['numberofstop']; // 預設2停
|
|
var actualdate = (result[1][facilityno]) ? result[1][facilityno]['actualdate'] : "預計 "+nextDate;
|
|
var sid = (result[1][facilityno]) ? result[1][facilityno]['id'] : "0";
|
|
var schedule_detail = "";
|
|
if (sid > 0) {
|
|
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 += '</li>';
|
|
}
|
|
var ckmore = "";
|
|
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>';
|
|
}
|
|
var baditems = (result[1][facilityno]) ? result[1][facilityno]['baditems'] : "";
|
|
var sresult = "";
|
|
if (baditems) {
|
|
if (result[1][facilityno]['item_detail']) {
|
|
sresult += '<br><a class="float-left" style="margin-top:6px;">'+baditems+'<br>'+result[1][facilityno]['item_detail']+'</a>';
|
|
} else {
|
|
sresult += '<a class="float-right">'+baditems+'</a>';
|
|
}
|
|
} else {
|
|
sresult += '<a class="float-right">新梯待保養</a>';
|
|
}
|
|
var fault_message = '';
|
|
if (result[2][facilityno]) {
|
|
for (j=0; j<result[2][facilityno].length; j++) {
|
|
fault_message += result[2][facilityno][j]+'<br>';
|
|
}
|
|
} else fault_message = '狀態正常';
|
|
htmlds +=
|
|
'<ul class="list-group list-group-unbordered mb-3 lead">' +
|
|
'<li class="list-group-item list-group-item-secondary">' +
|
|
'<b>電梯ID</b> <a class="float-right">'+facilityno+'</a>' +
|
|
'</li>' +
|
|
'<li class="list-group-item">' +
|
|
'<b>速度</b> <a class="float-right">'+speed+'m/min</a>' +
|
|
'</li>' +
|
|
'<li class="list-group-item">' +
|
|
'<b>樓層</b> <a class="float-right">'+numberoffloor+'樓</a>' +
|
|
'</li>' +
|
|
'<li class="list-group-item">' +
|
|
'<b>樓停</b> <a class="float-right">'+numberofstop+'停</a>' +
|
|
'</li>' +
|
|
'<li class="list-group-item">' +
|
|
'<b>地址</b> <a class="float-right">'+address+'</a>' +
|
|
'</li>' +
|
|
'<li class="list-group-item">' +
|
|
'<b>最近一次保養日期</b> <a class="float-right">'+actualdate+'</a>' +
|
|
'</li>' +
|
|
schedule_detail +
|
|
'<li class="list-group-item">' +
|
|
'<b>保養結果</b> '+ckmore+ sresult +
|
|
'</li>' +
|
|
'<li class="list-group-item">' +
|
|
'<b>故障訊息</b> <a class="float-right">'+fault_message+'</a>' +
|
|
//'<br><a class="float-right">' + item_detail + '</a>' +
|
|
'</li>' +
|
|
'</ul>' ;
|
|
/*
|
|
'<li class="list-group-item">' +
|
|
'<a href="#" onclick=jishi("'+facilityno+'","'+customerid+'") class="btn btn-primary width40"><b>及時狀態</b></a>'+
|
|
'<a href="#" onclick=guzhang("'+facilityno+'","'+customerid+'") class="btn btn-primary width40"><b>故障内容</b></a>'+
|
|
'</li>' +
|
|
*/
|
|
}
|
|
$('#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">及時狀態</div>' +
|
|
' </div>'+
|
|
'<div class="chart">' +
|
|
'<canvas id="lineChart" height="200"></canvas>' +
|
|
'</div></div>';
|
|
$('#choosecontent').empty().append(htmlds);
|
|
|
|
|
|
//折线图
|
|
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 // 防止鼠标移上去，数字闪烁
|
|
},
|
|
animation: { // 这部分是数值显示的功能实现
|
|
onComplete: function () {
|
|
var chartInstance = this.chart,
|
|
ctx = chartInstance.ctx;
|
|
// 以下属于canvas的属性（font、fillStyle、textAlign...）
|
|
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">故障內容</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);
|
|
|
|
//折线图
|
|
var guzhangchartCanvas = $('#guzhangchart')
|
|
let guzhanglinedata = {
|
|
"labels": result['labels'],
|
|
"datasets": [{
|
|
"label": "故障內容",
|
|
"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 // 防止鼠标移上去，数字闪烁
|
|
},
|
|
animation: { // 这部分是数值显示的功能实现
|
|
onComplete: function () {
|
|
var chartInstance = this.chart,
|
|
ctx = chartInstance.ctx;
|
|
// 以下属于canvas的属性（font、fillStyle、textAlign...）
|
|
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:"電梯編號", type: "text", },
|
|
{ name: "identifying_code",title:"識別碼", type: "text", },
|
|
{ name: "breakdown_code",title:"故障代碼", type: "text", },
|
|
{ name: "breakdown_content",title:"故障内容", type: "text", },
|
|
{ name: "breakdown_date",title:"故障时间", type: "text", },
|
|
]
|
|
});
|
|
|
|
|
|
|
|
|
|
}
|
|
})
|
|
|
|
|
|
}
|
|
</script>
|
|
|
|
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDCJp-JIcYIyeR_QNpREvsepApvVytZWOs&callback=initMap" async defer></script>
|
|
</body>
|
|
</html>
|
|
|