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.
637 lines
33 KiB
637 lines
33 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 = "";
|
|
|
|
// 補丁 actualdate = 展示太久沒更新保養日期做假資料
|
|
// actualdate = fakeActualdate(actualdate);
|
|
|
|
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&actualdate=' + actualdate + '" 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", },
|
|
]
|
|
});
|
|
|
|
|
|
|
|
|
|
}
|
|
})
|
|
|
|
|
|
}
|
|
|
|
// 補丁 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>
|
|
|
|
</html>
|