代码拉取完成，页面将自动刷新
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>青大科技数据展示</title>
<link rel="stylesheet" href="css/1.css">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/default.css">
<link href="http://cdn.bootcss.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">
<link href="css/Icomoon/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-2.0.2.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<!-- <meta http-equiv="refresh" content="3600">每过一个小时刷新网页 -->
</head>
<body class="beijing">
<div id="loading">
<div id="loading-center">
<div id="loading-center-absolute">
<div class="object" id="object_one"></div>
<div class="object" id="object_two"></div>
<div class="object" id="object_three"></div>
<div class="object" id="object_four"></div>
<div class="object" id="object_five"></div>
<div class="object" id="object_six"></div>
<div class="object" id="object_seven"></div>
<div class="object" id="object_eight"></div>
</div>
</div>
</div>
<div class="container-fluid bg" id="app">
<div class="row clearfix">
<div class="col-md-12 col-lg-12 col-xs-12 column">
<div class="row clearfix">
<div class="col-md-3 col-xs-3 col-lg-3 column">
<div class="row clearfix">
<div class="col-md-12 col-xs-12 col-lg-12 column logo">
</div>
</div>
<div class="row clearfix">
<div class="col-md-12 col-xs-12 col-lg-12 column lm">
<div class="row clearfix">
<div class="col-md-12 col-xs-12 col-lg-12 column lmt">
<div class="sbhyd">设备活跃度<span>（开锁次数）</span></div>
</div>
</div>
<div class="row clearfix">
<div class="col-md-12 col-xs-12 col-lg-12 column">
<div id="zhuzt" class="zhu"></div>
</div>
</div>
</div>
</div>
<div class="row clearfix">
<div class="col-md-12 col-xs-12 col-lg-12 column lb">
<div class="row clearfix">
<div class="col-md-12 col-xs-12 col-lg-12 column lbt">
<div class="sblx">设备类型</div>
</div>
</div>
<div class="row clearfix">
<div class="col-md-12 col-xs-12 col-lg-12 column">
<div id="bingzt" class="bing"></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-xs-6 col-lg-6 column">
<div class="row clearfix">
<div class="col-md-12 col-xs-12 col-lg-12 column mt">
<div class="biaoti">分散网点行为安全信息管理平台</div>
</div>
</div>
<div class="row clearfix">
<div class="col-md-12 col-xs-12 col-lg-12 column mm">
<div class="row clearfix">
<div class="col-md-12 col-xs-12 col-lg-12 column">
<div class="qgwdfgt">全国网点覆盖图</div>
</div>
</div>
<div class="row clearfix">
<div class="col-md-12 col-xs-12 col-lg-12 column">
<div id="mainMap" class="xuanguang">
</div>
<div class="biaoqian">
<span class="span1"> </span> <span>已覆盖区域</span>
<br>
<span class="span2"> </span> <span>即将进入区域</span>
</div>
</div>
</div>
</div>
</div>
<div class="row clearfix">
<div class="col-md-12 col-xs-12 col-lg-12 column mb">
<div class="row clearfix">
<div class="col-md-5 col-xs-5 col-lg-5 column">
<div class="ptljfw">平台累计访问</div>
</div>
<div class="col-md-6 col-xs-6 col-lg-6 column mbm">
<div class="number">
<ul class="runNum" id="test"></ul>
</div>
</div>
<div class="col-md-1 col-xs-1 col-lg-1 column mbr">
<div class="ren">人</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3 col-xs-3 col-lg-3 column">
<div class="row clearfix">
<div class="col-md-12 col-xs-12 col-lg-12 column rt">
<div class="row clearfix">
<div class="col-md-12 col-xs-12 col-lg-12 column rtt">
<div class="sbssyxzt">设备实时运行状态</div>
</div>
</div>
<div class="row clearfix">
<div class="col-md-12 col-xs-12 col-lg-12 column rtc" id="example">
</div>
</div>
</div>
</div>
<div class="row clearfix">
<div class="col-md-12 col-xs-12 col-lg-12 column rb">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/3.7.2/echarts-en.min.js"></script>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
<script src="http://mockjs.com/dist/mock.js"></script>
<script type="text/javascript" src="js/jquery-1.8.0.js"></script>
<script src="js/china.js" charset="UTF-8"></script>
<script src="js/zhejiang.js" charset="UTF-8"></script>
<script src="js/anhui.js" charset="UTF-8"></script>
<script src="js/aomen.js" charset="UTF-8"></script>
<script src="js/beijing.js" charset="UTF-8"></script>
<script src="js/chongqing.js" charset="UTF-8"></script>
<script src="js/fujian.js" charset="UTF-8"></script>
<script src="js/gansu.js" charset="UTF-8"></script>
<script src="js/guangdong.js" charset="UTF-8"></script>
<script src="js/guangxi.js" charset="UTF-8"></script>
<script src="js/guizhou.js" charset="UTF-8"></script>
<script src="js/hainan.js" charset="UTF-8"></script>
<script src="js/hebei.js" charset="UTF-8"></script>
<script src="js/heilongjiang.js" charset="UTF-8"></script>
<script src="js/henan.js" charset="UTF-8"></script>
<script src="js/hubei.js" charset="UTF-8"></script>
<script src="js/hunan.js" charset="UTF-8"></script>
<script src="js/jiangsu.js" charset="UTF-8"></script>
<script src="js/jiangxi.js" charset="UTF-8"></script>
<script src="js/jilin.js" charset="UTF-8"></script>
<script src="js/liaoning.js" charset="UTF-8"></script>
<script src="js/neimenggu.js" charset="UTF-8"></script>
<script src="js/ningxia.js" charset="UTF-8"></script>
<script src="js/qinghai.js" charset="UTF-8"></script>
<script src="js/shandong.js" charset="UTF-8"></script>
<script src="js/shanghai.js" charset="UTF-8"></script>
<script src="js/shanxi.js" charset="UTF-8"></script>
<script src="js/shanxi1.js" charset="UTF-8"></script>
<script src="js/sichuan.js" charset="UTF-8"></script>
<script src="js/taiwan.js" charset="UTF-8"></script>
<script src="js/tianjin.js" charset="UTF-8"></script>
<script src="js/xianggang.js" charset="UTF-8"></script>
<script src="js/xinjiang.js" charset="UTF-8"></script>
<script src="js/xizang.js" charset="UTF-8"></script>
<script src="js/yunnan.js" charset="UTF-8"></script>
<script>
var url = 'https://zlb.safeok.net.cn/portal/';
setInterval(function () {
//柱状图刷新
$.ajax({
url: url+'system/deviceActivity?days=7',
type: 'get',
dataType: 'json',
contentType: "application/json;charset=utf-8",
async : false,//需要改成同步的
success:function(res){
datazhu = JSON.stringify(res, null, 4);
datazhu = JSON.parse(datazhu);
}
});
//表格刷新
$.ajax({
url: url+'system/deviceRealtimeOperation',
type: 'get',
dataType: 'json',
contentType: "application/json;charset=utf-8",
async : false,//需要改成同步的
}).done(function(data, status, jqXHR){
var content = data.content;
// console.log(content);
// abcabc=[];
data1=[];
// console.log(kx);
let sskx = new Set([]);
content.map(x=>sskx.add(x));
// for (let i of sskx) {
// shan.add(i);
// };
// console.log(sskx);
let abcabc = [...sskx].filter(x=>!kx.has(x));
// console.log(abcabc);
// console.log(shan);
kx.clear();
content.map(x=>kx.add(x));
sskx.clear();
// console.log(kx);
// for (let i of shan) {
// date1.push({name:})
// };
// abcabc = Array.from(shan);
for (var i = 0;i < abcabc.length; i++){
data1.push(
{
'name':abcabc[i].stationName,
'value':
[
abcabc[i].stationName,
abcabc[i].masterName,
abcabc[i].createDate,
abcabc[i].status,
[abcabc[i].longitude,abcabc[i].latitude]
]
}
);
}
for(var i = 0;i < data1.length; i++){
geoCoordMap1[data1[i].name] = data1[i].value[4];
}
// shan.clear();
// geoCoordMap1 = {
// '四川': [104.07,30.68],
// };
// var status = 1;
var len = content.length;
var con = {};
var htmlStr = "<table class='table' style='table-layout:fixed;'><thead><tr><th>站点</th><th style='width:4vw;'>站长</th><th style='width:9vw;'>开启时间</th><th style='width:3vw;'>状态</th></tr></thead><tbody>";
for(var i = 0; i < len; i++){
con = content[i];
htmlStr += "<tr><td>"+con.stationName+"</td><td>"+con.masterName+"</td><td>"+con.createDate+"</td><td>"+con.status+"</td></tr>";
}
htmlStr += "</tbody></table>";
$("#example").html(htmlStr);
});
zhuZT.dispose();//销毁原来的图表
zhuZT = echarts.init(document.getElementById('zhuzt'));
datazhu = datazhu.content;
zhuoption = {
textStyle: {
color: '#fff'//柱状图每条数据的字体颜色
},
xAxis: {
data: dataAxis,
axisLabel: {
inside: true,
textStyle: {
color: '#fff'//柱状图横坐标字体颜色
}
},
axisTick: {
show: false
},
axisLine: {
show: false
},
z: 10
},
yAxis: {
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
textStyle: {
color: '#fff'//柱状图纵坐标颜色
}
}
},
dataZoom: [{
type: 'inside'
}],
series: [
{
type: 'bar',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1, [{
offset: 0,
color: '#83bff6'
}, {
offset: 0.5,
color: '#188df0'
}, {
offset: 1,
color: '#188df0'
}]
)
},
emphasis: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1, [{
offset: 0,
color: '#2378f7'
}, {
offset: 0.7,
color: '#2378f7'
}, {
offset: 1,
color: '#83bff6'
}]
)
}
},
data: datazhu,
}],
label: {
normal: {
show: true,
position: 'top',
formatter: '{c}'//formatter: '{c}次'可以在数据后面显示单位
}
},
};
zhuZT.setOption(zhuoption,true);
ditu.dispose();//销毁原来的图表
ditu = echarts.init(document.getElementById('mainMap'));
$.ajax({
url: url+'system/globalNetData',
type: 'get',
dataType: 'json',
async : false,//需要改成同步的
success:function(res){
datacity = JSON.stringify(res, null, 4);
datacity = JSON.parse(datacity);
for(var i=0;i<datacity.content.length;i++){
geoCoordMap[datacity.content[i].name] = datacity.content[i].location;
}
}
});
for (var i = 0; i < datacity.content.length; i++) {
BJData.push([ningbo,datacity.content[i]]);
}
option = {
backgroundColor: 'rgba(0,0,0,0)',//大背景透明
tooltip: {
trigger: 'item'
},
// toolbox: {
// show: true,
// // orient: 'vertical',
// left: 'right',
// top: 'bottom',
// feature: {
// saveAsImage: {}
// }
// },
geo: {
regions: [{
name: '浙江',
itemStyle: {
normal: {
areaColor: fgcolor//特定区域的颜色
}
}
},
{
name: '江西',
itemStyle: {
normal: {
areaColor: fgcolor
}
}
},
{
name: '重庆',
itemStyle: {
normal: {
areaColor: fgcolor
}
}
},
{
name: '四川',
itemStyle: {
normal: {
areaColor: fgcolor
}
}
},
{
name: '上海',
itemStyle: {
normal: {
areaColor: fgcolor
}
}
},
{
name: '河南',
itemStyle: {
normal: {
areaColor: fgcolor
}
}
},
{
name: '福建',
itemStyle: {
normal: {
areaColor: fgcolor
}
}
}],
zoom:1.2,//默认1，初始地图缩放比例
// zlevel: 2,
map: 'china',
label: {
emphasis: {
show: true, //鼠标移上去以后是否显示省份名字
color: 'white',
fontSize: 20
}
},
roam: true,
itemStyle: {
normal: {
areaColor: '#2580C3',//地图底色
borderColor: '#094579'//省份边界色
},
emphasis: {
areaColor: '#094579'//鼠标移上去以后的省份颜色
}
}
},
series: [
{
name: '1',
type: 'effectScatter',
coordinateSystem: 'geo',//地理坐标系
zlevel: 2,//显示的图层上下优先级，数字越大显示在越上层,默认0
rippleEffect: {
//period:4,//动画时间，默认4
//scale:2.5,//最大缩放比例，默认2.5
brushType: 'stroke',//涟漪效果，还有一种是fill
},
label: {
normal: {
show: false,//目的地城市名称是否显示
position: 'right',//地名显示在坐标点右边
formatter: '{b}'
}
},
tooltip: {
trigger: 'item',
show: true,
borderWidth: 2,
borderColor: '#19A3C6',
textStyle:{
fontSize: 18, //提示框文字大小
},
formatter: function (params) {
var res='<p>智联保</p>';
res+='<div>'+ params.name +'：'+params.value[2]+' 台'+'</div>'
return res;
}
},//感觉是echarts 的问题，不写这个tooltip就一定会显示坐标什么的
symbolSize: function(val) {
return val[2] / 10+3;//产品数量的多少，决定城市点的大小
},
itemStyle: {
normal: {
color: '#E62129',//城市点的颜色
}
},
data: BJData.map(function(dataItem) {
// var temp = geoCoordMap[dataItem[1].name].concat([dataItem[1].value]).concat('台');
return {
name: dataItem[1].name,
value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
};
})
},
// {
// type: 'map',
// map: 'china',
// zoom:1.2,
// zlevel:4,
// label: {
// emphasis: {
// show: true, //鼠标移上去以后是否显示省份名字
// color: 'white',
// fontSize: 20
// }
// },
// roam: true,
// tooltip:{
// show:false
// },
// itemStyle: {
// normal: {
// areaColor: 'rgba(0,0,0,0)',//地图底色
// borderColor: 'rgba(0,0,0,0)'//省份边界色
// },
// emphasis: {
// areaColor: 'rgba(0,0,0,0)'//鼠标移上去以后的省份颜色
// }
// }
// },
{
name: '2',
type: 'effectScatter',
coordinateSystem: 'geo',
data: convertData1(data1),
symbolSize: pointSize,
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
tooltip: {
trigger: 'item',
show: true,
borderWidth: 2,
borderColor: '#19A3C6',
textStyle:{
fontSize: 18, //提示框文字大小
},
formatter: function (params) {
console.log(params);
var res='<div>'+params.value[2]+'</div>';
res+='<div>' + params.value[3] + '</div>';
res+='<div>' + params.value[4] + '</div>';
res+='<div>' + '开箱 ' + params.value[5] + '</div>';
return res;
}
},
label: {
normal: {
formatter: '{b}',
position: 'top',
show: false
}
},
itemStyle: {
normal: {
color: 'green',//地图圆点的样式
shadowBlur: 10,
shadowColor: 'black'
}
},
zlevel: 3
}
]
};
ditu.setOption(option);
},10000);
window.addEventListener("resize",function(){
zhuZT.resize();
});
</script>
<script src="js/ditu.js"></script>
<script src="js/3.js"></script>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手