337 lines
14 KiB
HTML
337 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>WebTools-Web开发者素材</title>
|
|
<meta name="keywords" content="vue,react,组件，插件,模板，echarts,数据可视化,微前端,后台管理系统,免费下载">
|
|
<meta name="description" content="提供vue/react/组件,插件,echarts数据可视化、后台管理系统模板免费下载,微前端解决方案">
|
|
<link rel="icon" href="../../img/logo.png">
|
|
<link rel="stylesheet" href="../../js/layui/css/layui.css">
|
|
<link rel="stylesheet" href="css.css">
|
|
<!--聚合地图-->
|
|
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="systemName">
|
|
重点营运车辆运行监控与安全预警系统
|
|
</div>
|
|
<div class="layout">
|
|
<!--左侧-->
|
|
<div class="layoutLeft">
|
|
<div class="top">
|
|
<div class="inner">
|
|
<li class="name">今日各类事件百分比</li>
|
|
<i class="topL"></i>
|
|
<i class="topR"></i>
|
|
<i class="bottomL"></i>
|
|
<i class="bottomR"></i>
|
|
<div class="numWrap">
|
|
<ul class="num clearfix">
|
|
<li class="num-title">在线车辆</li>
|
|
<li class="dataNum" id="dataNums1" ></li>
|
|
</ul>
|
|
<ul class="num clearfix">
|
|
<li class="num-title">危险品运输</li>
|
|
<li class="dataNum" id="dataNums2" ></li>
|
|
</ul>
|
|
<ul class="num clearfix">
|
|
<li class="num-title">班线客车</li>
|
|
<div class="dataNum" id="dataNums3" ></div>
|
|
</ul>
|
|
<ul class="num clearfix">
|
|
<li class="num-title">旅游包车</li>
|
|
<li class="dataNum" id="dataNums5" ></li>
|
|
</ul>
|
|
<ul class="num clearfix">
|
|
<li class="num-title">外省车辆</li>
|
|
<li class="dataNum" id="dataNums6" ></li>
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
<div class="bottom">
|
|
<div class="inner">
|
|
<li class="name"> 重点路段在线统计</li>
|
|
<i class="topL"></i>
|
|
<i class="topR"></i>
|
|
<i class="bottomL"></i>
|
|
<i class="bottomR"></i>
|
|
<div class="echarts" id="test1"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--左侧-->
|
|
|
|
<!--右侧-->
|
|
<div class="layoutRight">
|
|
<div class="top">
|
|
<div class="inner">
|
|
<li class="name">5分钟内预警信息</li>
|
|
<i class="topL"></i>
|
|
<i class="topR"></i>
|
|
<i class="bottomL"></i>
|
|
<i class="bottomR"></i>
|
|
<div class="events" id="events">
|
|
<ul>
|
|
<li class="item">
|
|
<div class="road">
|
|
<span class="eventType1">超速报警</span>
|
|
<span class="line">线路：<i class="lineName">S60</i></span>
|
|
<span class="position">小王山隧道</span>
|
|
</div>
|
|
</li>
|
|
<li class="item">
|
|
<div class="tunnel">
|
|
<div>
|
|
<span class="eventType2">隧道滞留</span>
|
|
<span class="carId">京A12345</span>
|
|
<span class="line">线路：<i class="lineName">S60</i></span>
|
|
<span class="mileage">桩号：<i class="mileageAmount">K100</i></span>
|
|
</div>
|
|
<div>
|
|
<span class="carType">危：<i class="carAmount">51辆</i></span>
|
|
<span class="carType">客：<i class="carAmount">67辆</i></span>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="item">
|
|
<div class="road">
|
|
<span class="eventType3">疲劳驾驶</span>
|
|
<span class="carId">京A12345</span>
|
|
<span class="line">线路：<i class="lineName">S60</i></span>
|
|
<span class="mileage">桩号：<i class="mileageAmount">K10</i></span>
|
|
</div>
|
|
</li>
|
|
<li class="item">
|
|
<div class="road">
|
|
<span class="eventType4">违规停车</span>
|
|
<span class="carId">京A12345</span>
|
|
<span class="line">线路：<i class="lineName">S60</i></span>
|
|
<span class="mileage">桩号：<i class="mileageAmount">K100</i></span>
|
|
</div>
|
|
</li>
|
|
<li class="item">
|
|
<div class="road">
|
|
<span class="eventType5">凌晨行驶</span>
|
|
<span class="carId">京A12345</span>
|
|
<span class="line">线路：<i class="lineName">S60</i></span>
|
|
<span class="mileage">桩号：<i class="mileageAmount">K100</i></span>
|
|
</div>
|
|
</li>
|
|
<li class="item">
|
|
<div class="road">
|
|
<span class="eventType4">违规停车</span>
|
|
<span class="carId">京A12345</span>
|
|
<span class="line">线路：<i class="lineName">S60</i></span>
|
|
<span class="mileage">桩号：<i class="mileageAmount">K100</i></span>
|
|
</div>
|
|
</li>
|
|
<li class="item">
|
|
<div class="tunnel">
|
|
<div>
|
|
<span class="eventType2">隧道滞留</span>
|
|
<span class="carId">京A12345</span>
|
|
<span class="line">线路：<i class="lineName">S60</i></span>
|
|
<span class="mileage">桩号：<i class="mileageAmount">K100</i></span>
|
|
</div>
|
|
<div>
|
|
<span class="carType">危：<i class="carAmount">5辆</i></span>
|
|
<span class="carType">客：<i class="carAmount">15辆</i></span>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="item">
|
|
<div class="road">
|
|
<span class="eventType3">疲劳驾驶</span>
|
|
<span class="carId">京B88888</span>
|
|
<span class="line">线路：<i class="lineName">S60</i></span>
|
|
<span class="mileage">桩号：<i class="mileageAmount">K100</i></span>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bottom">
|
|
<div class="inner">
|
|
<li class="name"> 今日各类事件百分比</li>
|
|
<i class="topL"></i>
|
|
<i class="topR"></i>
|
|
<i class="bottomL"></i>
|
|
<i class="bottomR"></i>
|
|
<div class="echarts" id="test3"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--右侧-->
|
|
|
|
<!--中间-->
|
|
<div class="layoutCenter clearfix">
|
|
<div class="top">
|
|
<div class="inner">
|
|
<div id="container" class="map" tabindex="0"></div>
|
|
</div>
|
|
</div>
|
|
<div class="bottom">
|
|
<div class="inner">
|
|
<li class="name">今日进入集团高速车辆统计</li>
|
|
<i class="topL"></i>
|
|
<i class="topR"></i>
|
|
<i class="bottomL"></i>
|
|
<i class="bottomR"></i>
|
|
<div class="echarts" id="test2"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--中间-->
|
|
</div>
|
|
|
|
</div>
|
|
<script src="../../js/jquery.min.js"></script>
|
|
<script src="../../js/echarts/echarts.min.js"></script>
|
|
<script src="js/main.js"></script>
|
|
<script src="js/num.js"></script>
|
|
|
|
<script src="//a.amap.com/jsapi_demos/static/china.js"></script>
|
|
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.12&key=d6fbc024e6f2f26eedcaca349eb6575c&plugin=AMap.MarkerClusterer"></script>
|
|
<script>
|
|
$(function(){
|
|
$("#dataNums1").rollNum({
|
|
deVal:6888
|
|
});
|
|
$("#dataNums2").rollNum({
|
|
deVal:6888
|
|
});
|
|
$("#dataNums3").rollNum({
|
|
deVal:6888
|
|
});
|
|
$("#dataNums4").rollNum({
|
|
deVal:9998
|
|
});
|
|
$("#dataNums5").rollNum({
|
|
deVal:1234
|
|
});
|
|
$("#dataNums6").rollNum({
|
|
deVal:4432
|
|
});
|
|
});
|
|
|
|
$(function() {
|
|
var $this = $("#events");
|
|
var scrollTimer;
|
|
$this.hover(function() {
|
|
clearInterval(scrollTimer);
|
|
},
|
|
function() {
|
|
scrollTimer = setInterval(function() {
|
|
scrollNews($this);
|
|
}, 2000);
|
|
}).trigger("mouseleave");
|
|
|
|
function scrollNews(obj) {
|
|
var $self = obj.find("ul");
|
|
var lineHeight = $self.find("li:first").height();
|
|
$self
|
|
.animate({
|
|
"marginTop": -lineHeight + "px"
|
|
}, 600, function() {
|
|
$self
|
|
.css({ marginTop: 0 })
|
|
.find("li:first").appendTo($self);
|
|
})
|
|
}
|
|
})
|
|
</script>
|
|
<script type="text/javascript">
|
|
var cluster, markers = [];
|
|
|
|
var map = new AMap.Map("container", {
|
|
resizeEnable: true,
|
|
center: [116, 28],
|
|
mapStyle: "amap://styles/769710e25c040f17c6bee0b0cd95d9f1",
|
|
zoom: 8
|
|
});
|
|
|
|
for (var i = 0; i < points.length; i += 1) {
|
|
markers.push(new AMap.Marker({
|
|
position: points[i]['lnglat'],
|
|
content: '<div style="background-color: hsla(180, 100%, 50%, 0.7); height: 24px; width: 24px; border: 1px solid hsl(180, 100%, 40%); border-radius: 12px; box-shadow: hsl(180, 100%, 50%) 0px 0px 1px;"></div>',
|
|
offset: new AMap.Pixel(-15, -15)
|
|
}))
|
|
}
|
|
|
|
var count = markers.length;
|
|
var _renderClusterMarker = function (context) {
|
|
var factor = Math.pow(context.count / count, 1 / 18);
|
|
var div = document.createElement('div');
|
|
var Hue = 180 - factor * 180;
|
|
var bgColor = 'hsla(' + Hue + ',100%,50%,0.7)';
|
|
var fontColor = 'hsla(' + Hue + ',100%,20%,1)';
|
|
var borderColor = 'hsla(' + Hue + ',100%,40%,1)';
|
|
var shadowColor = 'hsla(' + Hue + ',100%,50%,1)';
|
|
div.style.backgroundColor = bgColor;
|
|
var size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20);
|
|
div.style.width = div.style.height = size + 'px';
|
|
div.style.border = 'solid 1px ' + borderColor;
|
|
div.style.borderRadius = size / 2 + 'px';
|
|
div.style.boxShadow = '0 0 1px ' + shadowColor;
|
|
div.innerHTML = context.count;
|
|
div.style.lineHeight = size + 'px';
|
|
div.style.color = fontColor;
|
|
div.style.fontSize = '14px';
|
|
div.style.textAlign = 'center';
|
|
context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
|
|
context.marker.setContent(div)
|
|
};
|
|
|
|
addCluster(1);
|
|
|
|
function addCluster(tag) {
|
|
if (cluster) {
|
|
cluster.setMap(null);
|
|
}
|
|
if (tag == 2) {//完全自定义
|
|
cluster = new AMap.MarkerClusterer(map, markers, {
|
|
gridSize: 80,
|
|
renderClusterMarker: _renderClusterMarker
|
|
});
|
|
} else if (tag == 1) {//自定义图标
|
|
var sts = [{
|
|
url: "https://a.amap.com/jsapi_demos/static/images/blue.png",
|
|
size: new AMap.Size(32, 32),
|
|
offset: new AMap.Pixel(-16, -16)
|
|
}, {
|
|
url: "https://a.amap.com/jsapi_demos/static/images/green.png",
|
|
size: new AMap.Size(32, 32),
|
|
offset: new AMap.Pixel(-16, -16)
|
|
}, {
|
|
url: "https://a.amap.com/jsapi_demos/static/images/orange.png",
|
|
size: new AMap.Size(36, 36),
|
|
offset: new AMap.Pixel(-18, -18)
|
|
}, {
|
|
url: "https://a.amap.com/jsapi_demos/static/images/red.png",
|
|
size: new AMap.Size(48, 48),
|
|
offset: new AMap.Pixel(-24, -24)
|
|
}, {
|
|
url: "https://a.amap.com/jsapi_demos/static/images/darkRed.png",
|
|
size: new AMap.Size(48, 48),
|
|
offset: new AMap.Pixel(-24, -24)
|
|
}];
|
|
cluster = new AMap.MarkerClusterer(map, markers, {
|
|
styles: sts,
|
|
gridSize: 80
|
|
});
|
|
} else {//默认样式
|
|
cluster = new AMap.MarkerClusterer(map, markers, {gridSize: 80});
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |