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
16 KiB
440 lines
16 KiB
<!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="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">
|
|
//³Ð«Ø¼Ð°O
|
|
var marker, map = new AMap.Map("container", {
|
|
resizeEnable: true,
|
|
center: [121.31424397, 31.14404913],
|
|
zoom: 13
|
|
});
|
|
|
|
// ¹ê¨Ò¤ÆÂI¼Ð°O
|
|
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");
|
|
// ÂI¼Ð°O¤¤ªº¹Ï¼Ð
|
|
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="¦ì¸mÅܤF"+positiondata[0]+"--"+positiondata[1];
|
|
// markerSpan.innerHTML = larbel;
|
|
markerContent.appendChild(markerSpan);
|
|
// console.log('¶}©l§ó·s¼Ð°O¤º®e')
|
|
marker.setContent(markerContent); //§ó·sÂI¼Ð°O¤º®e
|
|
// console.log('¶}©l§ó·s¼Ð°O¦ì¸m');
|
|
marker.setPosition(positiondata); //§ó·sÂI¼Ð°O¦ì¸m
|
|
AMap.event.addListener(marker, 'click', function () {
|
|
infoWindow.open(map, marker.getPosition());
|
|
});
|
|
|
|
}else{
|
|
alert('Àò¨ú§¤¼Ð¥¢±Ñ');
|
|
}
|
|
})
|
|
}else{
|
|
console.log('¤£¤ä«ùÀò¨ú©w¦ì');
|
|
}
|
|
|
|
}
|
|
//¦a¹Ïªì©l¤Æ®É¡A¦b¦a¹Ï¤W²K¥[¤@Ómarker¼Ð°O,¹«¼ÐÂIÀ»marker¥i¼u¥X¦Û©w¸qªº«H®§µ¡Åé
|
|
setInterval("updateContent()", 20000); //¨C¹j20¬í°õ¦æ¤@¦¸
|
|
//¹ê¨Ò¤Æ«H®§µ¡Åé
|
|
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">' +
|
|
'¤Î®Éª¬ºA' +
|
|
'</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>¬G»Ù¼i¾úÁͶÕ</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">ÃC©ú§»</h3>' +
|
|
'<p class="text-muted text-center">034982821</p>' +
|
|
'<p class="text-muted text-center">®ç¶é¥«Æ[µ°Ï±[¥¸Ì8¾F±[©W140¸¹</p>' +
|
|
'<ul class="list-group list-group-unbordered mb-3">' +
|
|
'<li class="list-group-item">' +
|
|
'<b>§@µf½s¸¹</b> <a class="float-right">22TX0001301</a>' +
|
|
'</li>' +
|
|
'<li class="list-group-item">' +
|
|
'<b>«O¾iû</b> <a class="float-right">S¨|°¶</a>' +
|
|
'</li>' +
|
|
'<li class="list-group-item">' +
|
|
'<b>«O¾iûÁpô¹q¸Ü</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, //¨Ï¥Î¦Û©w¸qµ¡Åé
|
|
content: createInfoWindow(title, content.join("<br/>")),
|
|
offset: new AMap.Pixel(16, -45)
|
|
});
|
|
//ºc«Ø¦Û©w¸q«H®§µ¡Åé
|
|
function createInfoWindow(title, content) {
|
|
var info = document.createElement("div");
|
|
info.className = "container";
|
|
//¥i¥H³q¹L¤U±ªº¤è¦¡×§ï¦Û©w¸qµ¡Å骺¼e°ª
|
|
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);
|
|
|
|
// ©w¸q©³³¡¤º®e
|
|
// 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;
|
|
}
|
|
//Ãö³¬«H®§µ¡Åé
|
|
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">ÃC©ú§»</h3>' +
|
|
'<p class="text-muted text-center">034982821</p>' +
|
|
'<p class="text-muted text-center">®ç¶é¥«Æ[µ°Ï±[¥¸Ì8¾F±[©W140¸¹</p>' +
|
|
'<ul class="list-group list-group-unbordered mb-3">' +
|
|
'<li class="list-group-item">' +
|
|
'<b>§@µf½s¸¹</b> <a class="float-right">22TX0001301</a>' +
|
|
'</li>' +
|
|
'<li class="list-group-item">' +
|
|
'<b>«O¾iû</b> <a class="float-right">S¨|°¶</a>' +
|
|
'</li>' +
|
|
'<li class="list-group-item">' +
|
|
'<b>«O¾iûÁpô¹q¸Ü</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);
|
|
|
|
//§é½u¹Ï
|
|
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 // ¨¾¤î¹«¼Ð²¾¤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(){
|
|
|
|
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);
|
|
|
|
//§é½u¹Ï
|
|
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": "¬G»Ù¼i¾ú",
|
|
"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 // ¨¾¤î¹«¼Ð²¾¤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
|
|
});
|
|
//¼Æ¾Úªí
|
|
var jsgriddata=[
|
|
{
|
|
"id": 1,
|
|
"¤é´Á": '2022-11-1',
|
|
"ºûפH": "S¨|°¶",
|
|
"ºûפº®e": '°ò¦«O¾i'
|
|
},
|
|
{
|
|
"id": 2,
|
|
"¤é´Á": '2022-11-2',
|
|
"ºûפH": "S¨|°¶",
|
|
"ºûפº®e": '°ò¦«O¾i'
|
|
},
|
|
{
|
|
"id": 3,
|
|
"¤é´Á": '2022-11-3',
|
|
"ºûפH": "S¨|°¶",
|
|
"ºûפº®e": '°ò¦«O¾i'
|
|
},
|
|
{
|
|
"id": 4,
|
|
"¤é´Á": '2022-11-1',
|
|
"ºûפH": "S¨|°¶",
|
|
"ºûפº®e": '°ò¦«O¾i'
|
|
},
|
|
{
|
|
"id": 5,
|
|
"¤é´Á": '2022-11-2',
|
|
"ºûפH": "S¨|°¶",
|
|
"ºûפº®e": '°ò¦«O¾i'
|
|
},
|
|
{
|
|
"id": 6,
|
|
"¤é´Á": '2022-11-1',
|
|
"ºûפH": "S¨|°¶",
|
|
"ºûפº®e": '°ò¦«O¾i'
|
|
},
|
|
{
|
|
"id": 7,
|
|
"¤é´Á": '2022-11-2',
|
|
"ºûפH": "S¨|°¶",
|
|
"ºûפº®e": '°ò¦«O¾i'
|
|
}
|
|
];
|
|
$("#jsGrid1").jsGrid({
|
|
height: "300px",
|
|
width: "100%",
|
|
sorting: true,
|
|
paging: true,
|
|
data: jsgriddata,
|
|
fields: [
|
|
{ name: "id", type: "text", },
|
|
{ name: "¤é´Á", type: "text", },
|
|
{ name: "ºûפH", type: "text", },
|
|
{ name: "ºûפº®e", type: "text", },
|
|
|
|
]
|
|
});
|
|
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|