chenxuan/visual-vue-v1
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

no message

Browse Source
This commit is contained in:
陈银军
2026-07-26 14:07:47 +08:00
parent c3831a0568
commit fe5546aab2
5025 changed files with 180002 additions and 97654 deletions
Download Patch File Download Diff File Expand all files Collapse all files
bak/resource/html/01vehicles/04/index.html
+260
View File
@@ -0,0 +1,260 @@
<!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">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<linK rel="stylesheet" href="../../js/layui/css/layui.css">
<link rel="stylesheet" href="js/numbergd/globle.css">
<link rel="stylesheet" href="js/clusterer/clusterer.css"/> <!--聚合地图样式-->
<link rel="stylesheet" href="css/show.css">
</head>
<body>
<div class="header">
<li class="left"></li>
<li class="right"></li>
<li class="center"></li>
<li class="date">2018-01-01 18:00:00</li>
</div>
<div class="main">
<div class="layout-left">
<div class="item">
<div class="left-1 corner">
<li class="title">车辆统计</li>
<div class="carCount">
<div class="labelLeft">
<ul>
<li class="sb"></li>
<li class="carTotal">车辆总数(辆)</li>
<li class="carTotalAmount">1,234,567</li>
</ul>
<ul>
<li class="sb"></li>
<li class="carTotal">车辆在线(辆)</li>
<li class="carTotalAmount">1,234,567</li>
</ul>
</div>
<div class="chartsRight" id="test5"></div>
</div>
</div>
</div>
<div class="item">
<div class="left-2 corner">
<li class="title">流量统计</li>
<div class="flowCount">
<div class="labelRight">
<ul>
<li class="today"></li>
<li class="legend">今日定位数量(条)</li></li>
<li class="amount">123,456</li>
</ul>
<ul>
<li class="month"></li>
<li class="legend">本月累计定位数量(条)</li>
<li class="amount">123,456,789</li>
</ul>
</div>
</div>
</div>
</div>
<div class="item">
<div class="left-3 corner">
<li class="title">上线率/在线率</li>
<div class="line-off-on-wrap">
<div class="line-off-on">
<li class="online">56%</li>
<li class="offline">68%</li>
</div>
</div>
</div>
</div>
</div>
<div class="layout-right">
<div class="item" style="height: 66.6%;overflow: hidden;">
<div class="right-1 corner">
<li class="title">单位终端类型统计</li>
<div class="right-1-wrap">
<div class="organization">
<li class="organization-name">中山市城市行政管理执法局<span>(1200)</span></li>
<ul class="equipment">
<ul>
<li class="equipment-progress _0048eb"></li>
<li class="equipment-amount">0/200</li>
</ul>
<li class="equipment-name">北斗手持终端</li>
</ul>
<ul class="equipment">
<ul>
<li class="equipment-progress _16ceb4"></li>
<li class="equipment-amount">0/200</li>
</ul>
<li class="equipment-name">北斗手持终端</li>
</ul>
<ul class="equipment">
<ul>
<li class="equipment-progress f77a7a"></li>
<li class="equipment-amount">0/200</li>
</ul>
<li class="equipment-name">北斗手持终端</li>
</ul>
<ul class="equipment">
<ul>
<li class="equipment-progress _17adef"></li>
<li class="equipment-amount">0/200</li>
</ul>
<li class="equipment-name">北斗手持终端</li>
</ul>
<ul class="equipment">
<ul>
<li class="equipment-progress f5c847"></li>
<li class="equipment-amount">0/200</li>
</ul>
<li class="equipment-name">北斗手持终端</li>
</ul>
<ul class="equipment">
<ul>
<li class="equipment-progress af89d6"></li>
<li class="equipment-amount">0/200</li>
</ul>
<li class="equipment-name">北斗手持终端</li>
</ul>
</div>
<div class="organization">
<li class="organization-name">中山市城市行政管理执法局<span>(1200)</span></li>
<ul class="equipment">
<ul>
<li class="equipment-progress _0048eb"></li>
<li class="equipment-amount">0/200</li>
</ul>
<li class="equipment-name">北斗手持终端</li>
</ul>
<ul class="equipment">
<ul>
<li class="equipment-progress _16ceb4"></li>
<li class="equipment-amount">0/200</li>
</ul>
<li class="equipment-name">北斗手持终端</li>
</ul>
<ul class="equipment">
<ul>
<li class="equipment-progress f77a7a"></li>
<li class="equipment-amount">0/200</li>
</ul>
<li class="equipment-name">北斗手持终端</li>
</ul>
<ul class="equipment">
<ul>
<li class="equipment-progress _17adef"></li>
<li class="equipment-amount">0/200</li>
</ul>
<li class="equipment-name">北斗手持终端</li>
</ul>
<ul class="equipment">
<ul>
<li class="equipment-progress f5c847"></li>
<li class="equipment-amount">0/200</li>
</ul>
<li class="equipment-name">北斗手持终端</li>
</ul>
<ul class="equipment">
<ul>
<li class="equipment-progress af89d6"></li>
<li class="equipment-amount">0/200</li>
</ul>
<li class="equipment-name">北斗手持终端</li>
</ul>
</div>
</div>
</div>
</div>
<div class="item">
<div class="right-2 corner">
<li class="title">类型统计</li>
<div class="typeCount" id="test3"></div>
</div>
</div>
</div>
<div class="layout-center">
<div class="item" style="height: 66.6%;position: relative;overflow: hidden">
<div class="center-1" id="container"></div>
</div>
<div class="item">
<div class="center-2 corner">
<li class="title">各终端在线率</li>
<div class="terminalOnline" id="test2"></div>
</div>
</div>
</div>
</div>
<script src="../../js/jquery.min.js"></script>
<script>
$('.layout-left,.layout-right,.layout-center').css({'height':$(window).height()-58,'min-height':'520px'});
$(window).resize(function () {
$('.layout-left,.layout-right,.layout-center').css({'height':$(window).height()-58,'min-height':'520px'});
});
$(function () {
var arr=[100,130,240,200,260,60,45,240,60,100,260,80];
$('.equipment-progress').each(function (m,n) {
$('.equipment-progress').eq(m).animate({
'width':arr[m]
},600,'linear')
})
})
</script>
<script src="../../js/echarts/echarts.min.js"></script>
<script src="js/main.js"></script>
<script src="js/numbergd/num_1.js"></script>
<script src="js/numbergd/num_2.js"></script>
<script>
function data_example0(){
$("#dataNums1").rollNum({
deVal:0
});
$("#dataNums2").rollNum({
deVal:0
});
}
function data_example1(){
$("#dataNums1").rollNum({
deVal:12345
,digit: 5
});
$("#dataNums2").rollNum({
deVal:12345
,digit: 5
});
}
function data_example2(){
$("#dataNums1").rollNum({
deVal:555555555
,digit: 9
});
$("#dataNums2").rollNum({
deVal:888888888
,digit: 9
});
}
data_example0();
// setTimeout(data_example1,8000);
setTimeout(data_example2,8000)
</script>
<script src="http://webapi.amap.com/maps?v=1.4.6&key=d86f44f58592518cbcd2a4e4c3b7e662&plugin=AMap.MarkerClusterer"></script> <!--聚合地图key-->
<script type="text/javascript" src="js/clusterer/addToolbar.js"></script> <!--基础控件-->
<script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script> <!--ui控件库-->
<script src="http://a.amap.com/jsapi_demos/static/china.js"></script> <!--中国地图-->
<script src="js/clusterer/clusterer.js"></script>
</body>
</html>