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.
440 lines
17 KiB
440 lines
17 KiB
<!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="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="container">
|
|
|
|
</div>
|
|
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=081fc54ff173f5dfbbce18def8412127"></script>
|
|
<script type="module" src="https://unpkg.com/ionicons@5.0.0/dist/ionicons/ionicons.js"></script>
|
|
<!-- 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 type="text/javascript">
|
|
//创建标记
|
|
var marker, map = new AMap.Map("container", {
|
|
resizeEnable: true,
|
|
center: [121.31424397, 31.14404913],
|
|
zoom: 13
|
|
});
|
|
|
|
// 实例化点标记
|
|
function addMarker() {
|
|
marker = new AMap.Marker({
|
|
icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
|
|
position: [121.31424397, 31.14404913],
|
|
offset: new AMap.Pixel(-13, -30)
|
|
});
|
|
marker.setMap(map);
|
|
AMap.event.addListener(marker, 'click', function () {
|
|
infoWindow.open(map, marker.getPosition());
|
|
});
|
|
}
|
|
addMarker();
|
|
function updateContent() {
|
|
if (!marker) {
|
|
return;
|
|
}
|
|
var positiondata=[];
|
|
if (navigator.geolocation) {
|
|
navigator.geolocation.getCurrentPosition(function (position) {
|
|
positiondata=[];
|
|
var lat = position.coords.latitude;
|
|
var lon = position.coords.longitude;
|
|
positiondata.push(lon);
|
|
positiondata.push(lat);
|
|
if(positiondata.length>0){
|
|
var markerContent = document.createElement("div");
|
|
// 点标记中的图标
|
|
var markerImg = document.createElement("img");
|
|
markerImg.className = "markerlnglat";
|
|
markerImg.src = "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png";
|
|
markerContent.appendChild(markerImg);
|
|
var markerSpan = document.createElement("span");
|
|
markerSpan.className = 'marker';
|
|
// var larbel="位置变了"+positiondata[0]+"--"+positiondata[1];
|
|
// markerSpan.innerHTML = larbel;
|
|
markerContent.appendChild(markerSpan);
|
|
// console.log('开始更新标记内容')
|
|
marker.setContent(markerContent); //更新点标记内容
|
|
// console.log('开始更新标记位置');
|
|
marker.setPosition(positiondata); //更新点标记位置
|
|
AMap.event.addListener(marker, 'click', function () {
|
|
infoWindow.open(map, marker.getPosition());
|
|
});
|
|
|
|
}else{
|
|
alert('获取坐标失败');
|
|
}
|
|
})
|
|
}else{
|
|
console.log('不支持获取定位');
|
|
}
|
|
|
|
}
|
|
//地图初始化时，在地图上添加一个marker标记,鼠标点击marker可弹出自定义的信息窗体
|
|
setInterval("updateContent()", 20000); //每隔20秒执行一次
|
|
//实例化信息窗体
|
|
var title='';
|
|
var leftside='<div class="col-md-3">' +
|
|
'<ul class="listview flush transparent no-line image-listview mt-2">' +
|
|
'<li>' +
|
|
'<a href="#" onclick="jibnen()" class="item">' +
|
|
'<div class="icon-box bg-primary">' +
|
|
'<ion-icon name="home-outline"></ion-icon>' +
|
|
'</div>' +
|
|
'<div class="in">' +
|
|
'基本資料' +
|
|
'</div>' +
|
|
'</a>' +
|
|
'</li>' +
|
|
'<li>' +
|
|
'<a href="#" onclick="jishi()" class="item">' +
|
|
'<div class="icon-box bg-primary">' +
|
|
'<ion-icon name="cube-outline"></ion-icon>' +
|
|
'</div>' +
|
|
'<div class="in">' +
|
|
'及時狀態' +
|
|
'</div>' +
|
|
'</a>' +
|
|
'</li>' +
|
|
'<li>' +
|
|
'<a href="#" onclick="guzhang()" class="item">' +
|
|
'<div class="icon-box bg-primary">' +
|
|
'<ion-icon name="layers-outline"></ion-icon>' +
|
|
'</div>' +
|
|
'<div class="in">' +
|
|
'<div>故障履歷趨勢</div>' +
|
|
'</div>' +
|
|
'</a>' +
|
|
'</li>' +
|
|
'</ul>' +
|
|
'</div>' +
|
|
'<div class="col-md-9">' +
|
|
'<div id="choosecontent" style="height: 330px">' +
|
|
'<div class="card card-primary card-outline">' +
|
|
'<div class="card-body box-profile">' +
|
|
'<h3 class="profile-username text-center">顏明宏</h3>' +
|
|
'<p class="text-muted text-center">034982821</p>' +
|
|
'<p class="text-muted text-center">桃園市觀音區崙平里8鄰崙坪140號</p>' +
|
|
'<ul class="list-group list-group-unbordered mb-3">' +
|
|
'<li class="list-group-item">' +
|
|
'<b>作番编号</b> <a class="float-right">22TX0001301</a>' +
|
|
'</li>' +
|
|
'<li class="list-group-item">' +
|
|
'<b>保养员</b> <a class="float-right">范育偉</a>' +
|
|
'</li>' +
|
|
'<li class="list-group-item">' +
|
|
'<b>保养员联系电话</b> <a class="float-right">0917032999</a>' +
|
|
'</li>' +
|
|
'</ul>' +
|
|
'<a href="tel:0917032999" class="btn btn-primary btn-block"><b>call me</b></a>' +
|
|
'</div>' +
|
|
'</div>'
|
|
'</div>' +
|
|
'</div>' ;
|
|
|
|
content = [];
|
|
content.push(leftside);
|
|
var infoWindow = new AMap.InfoWindow({
|
|
isCustom: true, //使用自定义窗体
|
|
content: createInfoWindow(title, content.join("<br/>")),
|
|
offset: new AMap.Pixel(16, -45)
|
|
});
|
|
//构建自定义信息窗体
|
|
function createInfoWindow(title, content) {
|
|
var info = document.createElement("div");
|
|
info.className = "container";
|
|
//可以通过下面的方式修改自定义窗体的宽高
|
|
info.style.width = "80vw";
|
|
// info.style.height = "30rem";
|
|
|
|
var middle = document.createElement("div");
|
|
middle.className = "row";
|
|
middle.style.backgroundColor = 'white';
|
|
middle.innerHTML = content;
|
|
info.appendChild(middle);
|
|
|
|
// 定义底部内容
|
|
// var bottom = document.createElement("div");
|
|
// bottom.className = "info-bottom";
|
|
// bottom.style.position = 'relative';
|
|
// bottom.style.top = '0px';
|
|
// bottom.style.margin = '0 auto';
|
|
// var sharp = document.createElement("img");
|
|
// sharp.src = "https://webapi.amap.com/images/sharp.png";
|
|
// bottom.appendChild(sharp);
|
|
// info.appendChild(bottom);
|
|
return info;
|
|
}
|
|
//关闭信息窗体
|
|
function closeInfoWindow() {
|
|
map.clearInfoWindow();
|
|
}
|
|
var htmlds = '';
|
|
function jibnen(){
|
|
htmlds ='<div class="card card-primary card-outline">' +
|
|
'<div class="card-body box-profile">' +
|
|
'<h3 class="profile-username text-center">顏明宏</h3>' +
|
|
'<p class="text-muted text-center">034982821</p>' +
|
|
'<p class="text-muted text-center">桃園市觀音區崙平里8鄰崙坪140號</p>' +
|
|
'<ul class="list-group list-group-unbordered mb-3">' +
|
|
'<li class="list-group-item">' +
|
|
'<b>作番编号</b> <a class="float-right">22TX0001301</a>' +
|
|
'</li>' +
|
|
'<li class="list-group-item">' +
|
|
'<b>保养员</b> <a class="float-right">范育偉</a>' +
|
|
'</li>' +
|
|
'<li class="list-group-item">' +
|
|
'<b>保养员联系电话</b> <a class="float-right">0917032999</a>' +
|
|
'</li>' +
|
|
'</ul>' +
|
|
'<a href="tel:0917032999" class="btn btn-primary btn-block"><b>call me</b></a>' +
|
|
'</div>' +
|
|
'</div>';
|
|
$('#choosecontent').empty().append(htmlds);
|
|
}
|
|
function jishi(){
|
|
htmlds = '<div><div class="chart">' +
|
|
'<canvas id="lineChart" height="110"></canvas>' +
|
|
'</div></div>';
|
|
$('#choosecontent').empty().append(htmlds);
|
|
|
|
//折线图
|
|
var lineChartCanvas = $('#lineChart')
|
|
let linedata = {
|
|
"labels": ["11/1", "11/2", "11/3", "11/4", "11/5", "11/6", "11/7","11/8",
|
|
"11/9", "11/10", "11/11", "11/11", "11/13", "11/14","11/15", "11/16", "11/17", "11/18", "11/19", "11/20", "11/21","11/22", "11/23", "11/24", "11/25", "11/26", "11/27", "11/28", "11/29", "11/30"],
|
|
"datasets": [{
|
|
"label": "走行時間",
|
|
"data": [1, 2, 3, 4, 5, 6, 7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30],
|
|
"fill": false,
|
|
"borderColor": "rgb(75, 192, 192)",
|
|
"lineTension": 0.1
|
|
},{
|
|
"label": "走行次數",
|
|
"data": [2, 4, 6, 7, 10, 12, 13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31, 32, 33,34,35,36],
|
|
"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(){
|
|
|
|
htmlds = '<div><div class="chart">' +
|
|
'<canvas id="guzhangchart" ></canvas>' +
|
|
'</div></div>';
|
|
htmlds+='<div style="width: 100%;height:200px;overflow: scroll">' +
|
|
'<div id="jsGrid1" style="height: 300px"></div>' +
|
|
'</div>'
|
|
$('#choosecontent').empty().append(htmlds);
|
|
|
|
//折线图
|
|
var guzhangchartCanvas = $('#guzhangchart')
|
|
var windowwidth=document.body.clientWidth;
|
|
if(windowwidth>1200){
|
|
guzhangchartCanvas.height='80px';
|
|
}else {
|
|
guzhangchartCanvas.height='150px';
|
|
}
|
|
|
|
|
|
let guzhanglinedata = {
|
|
"labels": ["11/1", "11/2", "11/3", "11/4", "11/5", "11/6", "11/7","11/8",
|
|
"11/9", "11/10", "11/11", "11/11", "11/13", "11/14","11/15", "11/16", "11/17", "11/18", "11/19", "11/20", "11/21","11/22", "11/23", "11/24", "11/25", "11/26", "11/27", "11/28", "11/29", "11/30"],
|
|
"datasets": [{
|
|
"label": "故障履歷",
|
|
"data": [6, 0, 2, 1, 3, 8, 0,6, 0, 2, 1, 3, 8, 0,6, 0, 2, 1, 3, 8, 0,6, 0, 2, 1, 3, 8, 0],
|
|
"fill": false,
|
|
"borderColor": "rgb(75, 192, 192)",
|
|
"lineTension": 0.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
|
|
});
|
|
//数据表
|
|
var jsgriddata=[
|
|
{
|
|
"id": 1,
|
|
"日期": '2022-11-1',
|
|
"维修人": "范育偉",
|
|
"维修内容": '基礎保養'
|
|
},
|
|
{
|
|
"id": 2,
|
|
"日期": '2022-11-2',
|
|
"维修人": "范育偉",
|
|
"维修内容": '基礎保養'
|
|
},
|
|
{
|
|
"id": 3,
|
|
"日期": '2022-11-3',
|
|
"维修人": "范育偉",
|
|
"维修内容": '基礎保養'
|
|
},
|
|
{
|
|
"id": 4,
|
|
"日期": '2022-11-1',
|
|
"维修人": "范育偉",
|
|
"维修内容": '基礎保養'
|
|
},
|
|
{
|
|
"id": 5,
|
|
"日期": '2022-11-2',
|
|
"维修人": "范育偉",
|
|
"维修内容": '基礎保養'
|
|
},
|
|
{
|
|
"id": 6,
|
|
"日期": '2022-11-1',
|
|
"维修人": "范育偉",
|
|
"维修内容": '基礎保養'
|
|
},
|
|
{
|
|
"id": 7,
|
|
"日期": '2022-11-2',
|
|
"维修人": "范育偉",
|
|
"维修内容": '基礎保養'
|
|
}
|
|
];
|
|
$("#jsGrid1").jsGrid({
|
|
height: "300px",
|
|
width: "100%",
|
|
sorting: true,
|
|
paging: true,
|
|
data: jsgriddata,
|
|
fields: [
|
|
{ name: "id", type: "text", },
|
|
{ name: "日期", type: "text", },
|
|
{ name: "维修人", type: "text", },
|
|
{ name: "维修内容", type: "text", },
|
|
|
|
]
|
|
});
|
|
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|