351 lines
11 KiB
HTML
351 lines
11 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>设备总览</title>
|
||
<meta name="renderer" content="webkit">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||
<link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" media="all">
|
||
<link rel="stylesheet" href="../lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
|
||
<link rel="stylesheet" href="../css/public.css" media="all">
|
||
<style>
|
||
.top-panel {
|
||
border: 1px solid #eceff9;
|
||
border-radius: 5px;
|
||
text-align: center;
|
||
}
|
||
.top-panel > .layui-card-body{
|
||
height: 60px;
|
||
}
|
||
.top-panel-number{
|
||
line-height:60px;
|
||
font-size: 30px;
|
||
border-right:1px solid #eceff9;
|
||
}
|
||
.top-panel-tips{
|
||
line-height:30px;
|
||
font-size: 12px
|
||
}
|
||
|
||
ul li {
|
||
list-style: none;
|
||
}
|
||
.btn-wrap {
|
||
z-index: 999;
|
||
position: fixed;
|
||
bottom: 2rem;
|
||
margin-left: 1rem;
|
||
padding: .5rem .5rem;
|
||
border-radius: .25rem;
|
||
background-color: #fff;
|
||
box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
|
||
}
|
||
.btn {
|
||
width: 75px;
|
||
height: 30px;
|
||
float: left;
|
||
background-color: #fff;
|
||
color: rgba(27, 142, 236, 1);
|
||
font-size: 14px;
|
||
border: 1px solid rgba(27, 142, 236, 1);
|
||
border-radius: 5px;
|
||
margin: 0 5px;
|
||
text-align: center;
|
||
line-height: 30px;
|
||
}
|
||
.btn:hover {
|
||
background-color: rgba(27, 142, 236, 0.8);
|
||
color: #fff;
|
||
}
|
||
</style>
|
||
|
||
<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=4ef46ba62e8fba67b53a0becca4d05da">
|
||
</script>
|
||
</head>
|
||
|
||
<body>
|
||
<div class="layuimini-main">
|
||
|
||
<div class="layui-row layui-col-space30">
|
||
<div class="layui-col-xs12 layui-col-md6">
|
||
<div class="layui-card top-panel">
|
||
<div class="layui-card-header">设备数量</div>
|
||
<div class="layui-card-body">
|
||
<div class="layui-row layui-col-space5">
|
||
<div class="layui-col-xs9 layui-col-md8 top-panel-number">
|
||
<a style="color: #1aa094" th:text="${deviceOnlineNum}">2,020</a><br>
|
||
</div>
|
||
<div class="layui-col-xs3 layui-col-md4">
|
||
<a href="#" onclick="queryDevices('offline')" style="color: #bd3004" th:text="'掉线数 '+${deviceOfflineNum}">0</a><br>
|
||
<div th:if="${noFix>0}"><a href="#" onclick="queryDevices('nofixed')" style="color: #bd3004" th:text="'长期无效解 '+${noFix}">0</a><br></div>
|
||
<a style="color: #000000" th:text="'装机量 '+${deviceDeployedNum}">2020</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-col-xs12 layui-col-md6">
|
||
<div class="layui-card top-panel">
|
||
<div class="layui-card-header">告警统计</div>
|
||
<div class="layui-card-body">
|
||
<div class="layui-row layui-col-space5">
|
||
<div class="layui-col-xs9 layui-col-md8 top-panel-number">
|
||
<a style="color: #f6c102" th:text="${warningTotalNum}">20</a><br>
|
||
</div>
|
||
<div class="layui-col-xs3 layui-col-md4">
|
||
<a href="#" onclick="queryDevices('warning2')" style="color: #bd3004" th:text="'严重 '+${warning2Num}">5</a><br>
|
||
<a href="#" onclick="queryDevices('warning1')" style="color: #f6c102" th:text="'一般 '+${warning1Num}">20</a>
|
||
<div th:if="${noGGA>0}"><a href="#" onclick="queryDevices('nogga')" style="color: #e7be1d" th:text="'无GGA '+${noGGA}">0</a><br></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-row layui-col-space15">
|
||
<div class="layui-card top-panel">
|
||
<ul class="btn-wrap" style="z-index: 99;">
|
||
<li class="light btn" onclick="showAll()">全部</li>
|
||
<li class="night btn" onclick="showWarning1()">一般告警</li>
|
||
<li class="night btn" onclick="showWarning2()">严重告警</li>
|
||
</ul>
|
||
<div id="map-container" class="layui-card-body" style="height: 85vh;weight :100vw"></div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
|
||
<script th:inline="javascript">
|
||
var greenMarkers=[];
|
||
var orangeMarkers=[];
|
||
var redMarkers=[];
|
||
var greenLabels=[];
|
||
var orangeLabels=[];
|
||
var redLabels=[];
|
||
var batch_id = 0;
|
||
var deviceList=
|
||
[
|
||
[# th:each="device : ${deviceList}"]
|
||
{deviceid:[[${device.deviceid}]],
|
||
latitude:[[${device.latitude}]],
|
||
longitude:[[${device.longitude}]],
|
||
warning:[[${device.warning}]]},
|
||
[/]
|
||
];
|
||
var marker_state = 0;//0: translating; 1:all; 2:orange; 3:red
|
||
|
||
var map = new BMapGL.Map("map-container");
|
||
var convertor = new BMapGL.Convertor();
|
||
var loc_green = new BMapGL.Icon("../images/loc1_green.png", new BMapGL.Size(18, 24));
|
||
var loc_red = new BMapGL.Icon("../images/loc1_red.png", new BMapGL.Size(18, 24));
|
||
var loc_orange = new BMapGL.Icon("../images/loc1_orange.png", new BMapGL.Size(18, 24));
|
||
var loc_blue = new BMapGL.Icon("../images/loc_blue.png", new BMapGL.Size(18, 24));
|
||
|
||
initialize();
|
||
myLocation();
|
||
|
||
function initialize() {
|
||
var point = new BMapGL.Point(116.404, 39.915);
|
||
map.centerAndZoom(point, 7);
|
||
map.enableScrollWheelZoom(true);
|
||
//map.setMapType(BMAP_SATELLITE_MAP);
|
||
|
||
var centerLat = 0;
|
||
var centerLon = 0;
|
||
//console.log(deviceList);
|
||
for(var i=0; i<deviceList.length; i++) {
|
||
centerLat += deviceList[i].latitude;
|
||
centerLon += deviceList[i].longitude;
|
||
}
|
||
if(deviceList.length>0) {
|
||
centerLat = centerLat/deviceList.length;
|
||
centerLon = centerLon/deviceList.length;
|
||
map.setCenter(new BMapGL.Point(centerLon,centerLat));
|
||
}
|
||
marker_state = 0;
|
||
|
||
translateCallback = function (data){
|
||
if(data.status === 0) {
|
||
var i=0;
|
||
for(; i<data.points.length; i++){
|
||
var label = new BMapGL.Label(deviceList[batch_id+i].deviceid,
|
||
{
|
||
position: data.points[i], // 指定文本标注所在的地理位置
|
||
offset: new BMapGL.Size(10, 10) // 设置文本偏移量
|
||
}); // 创建文本标注对象
|
||
|
||
var marker;
|
||
if(deviceList[batch_id+i].warning == 2) {
|
||
marker = new BMapGL.Marker(data.points[i], {
|
||
icon: loc_red
|
||
});
|
||
redMarkers.push(marker);
|
||
redLabels.push(label);
|
||
}
|
||
else if(deviceList[batch_id+i].warning == 1) {
|
||
marker = new BMapGL.Marker(data.points[i], {
|
||
icon: loc_orange
|
||
});
|
||
orangeMarkers.push(marker);
|
||
orangeLabels.push(label);
|
||
}
|
||
else {
|
||
marker = new BMapGL.Marker(data.points[i], {
|
||
icon: loc_green
|
||
});
|
||
greenMarkers.push(marker);
|
||
greenLabels.push(label);
|
||
}
|
||
|
||
// 点标记添加点击事件
|
||
map.addOverlay(marker);
|
||
map.addOverlay(label);
|
||
|
||
}
|
||
|
||
}
|
||
batch_id+=10;
|
||
// 函数内定时器的回调函数会继续调用 timer()
|
||
if(batch_id<deviceList.length) {
|
||
setTimeout(() => {
|
||
timer();
|
||
}, 500);
|
||
}
|
||
else marker_state = 1;
|
||
}
|
||
|
||
//每秒转换10个坐标，否则会受百度并发限制
|
||
function timer() {
|
||
var pointArr = [];
|
||
var count = batch_id+10;
|
||
var totalNum = deviceList.length;
|
||
if(count>totalNum) count=totalNum;
|
||
|
||
for (var i = batch_id; i < count; i++) {
|
||
point = new BMapGL.Point(deviceList[i].longitude, deviceList[i].latitude);
|
||
pointArr.push(point);
|
||
}
|
||
|
||
convertor.translate(pointArr, 1, 5, translateCallback);
|
||
}
|
||
|
||
// 启动函数
|
||
timer();
|
||
}
|
||
|
||
function myLocation(){
|
||
var geolocation = new BMapGL.Geolocation();
|
||
geolocation.getCurrentPosition(function(r){
|
||
if(this.getStatus() == BMAP_STATUS_SUCCESS){
|
||
var mk = new BMapGL.Marker(r.point, {
|
||
icon: loc_blue
|
||
});
|
||
map.addOverlay(mk);
|
||
map.panTo(r.point);
|
||
}
|
||
});
|
||
}
|
||
|
||
function showAll(){
|
||
if(marker_state == 2){
|
||
showGreen();
|
||
showRed();
|
||
marker_state = 1;
|
||
}
|
||
else if(marker_state == 3){
|
||
showGreen();
|
||
showOrange();
|
||
marker_state = 1;
|
||
}
|
||
}
|
||
|
||
function showWarning1(){
|
||
if(marker_state == 1){
|
||
hideGreen();
|
||
hideRed();
|
||
marker_state = 2;
|
||
}
|
||
else if(marker_state == 3){
|
||
hideRed();
|
||
showOrange();
|
||
marker_state = 2;
|
||
}
|
||
}
|
||
|
||
function showWarning2(){
|
||
if(marker_state == 1){
|
||
hideGreen();
|
||
hideOrange();
|
||
marker_state = 3;
|
||
}
|
||
else if(marker_state == 2){
|
||
hideOrange();
|
||
showRed();
|
||
marker_state = 3;
|
||
}
|
||
}
|
||
|
||
function showGreen(){
|
||
for(var i=0; i<greenMarkers.length; i++){
|
||
map.addOverlay(greenMarkers[i]);
|
||
map.addOverlay(greenLabels[i]);
|
||
}
|
||
}
|
||
|
||
function showOrange(){
|
||
for(var i=0; i<orangeMarkers.length; i++){
|
||
map.addOverlay(orangeMarkers[i]);
|
||
map.addOverlay(orangeLabels[i]);
|
||
}
|
||
}
|
||
|
||
function showRed(){
|
||
for(var i=0; i<redMarkers.length; i++){
|
||
map.addOverlay(redMarkers[i]);
|
||
map.addOverlay(redLabels[i]);
|
||
}
|
||
}
|
||
|
||
function hideGreen(){
|
||
for(var i=0; i<greenMarkers.length; i++){
|
||
map.removeOverlay(greenMarkers[i]);
|
||
map.removeOverlay(greenLabels[i]);
|
||
}
|
||
}
|
||
|
||
function hideOrange(){
|
||
for(var i=0; i<orangeMarkers.length; i++){
|
||
map.removeOverlay(orangeMarkers[i]);
|
||
map.removeOverlay(orangeLabels[i]);
|
||
}
|
||
}
|
||
|
||
function hideRed(){
|
||
for(var i=0; i<redMarkers.length; i++){
|
||
map.removeOverlay(redMarkers[i]);
|
||
map.removeOverlay(redLabels[i]);
|
||
}
|
||
}
|
||
</script>
|
||
<script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
|
||
<script>
|
||
function queryDevices(status_type){
|
||
var index = layer.open({
|
||
title: '',
|
||
type: 2,
|
||
shade: 0.2,
|
||
maxmin:true,
|
||
shadeClose: true,
|
||
anim: 2,
|
||
offset: 'rb',
|
||
area: ['100%', '50%'],
|
||
content: '../page/gnss_q_status?query='+status_type,
|
||
});
|
||
}
|
||
</script>
|
||
|
||
</body>
|
||
</html> |