294 lines
14 KiB
HTML
294 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">
|
|
<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="css/show.css">
|
|
</head>
|
|
<body>
|
|
<div class="header">
|
|
<div class="inner">北斗车联网大数据服务平台</div>
|
|
</div>
|
|
<div class="main">
|
|
<div class="right">
|
|
<li class="title">企业车辆统计</li>
|
|
<div class="itemWrap">
|
|
<ul class="item">
|
|
<li class="comName">企业名称1</li>
|
|
<li class="ratio">
|
|
<span class="total" title="车辆总数"></span>
|
|
<span class="register" title="上线数">160</span>
|
|
<span class="online" title="在线数">100</span>
|
|
<span class="totalAmount" title="车辆总数">500</span>
|
|
</li>
|
|
</ul>
|
|
<ul class="item">
|
|
<li class="comName">企业名称1</li>
|
|
<li class="ratio">
|
|
<span class="total" title="车辆总数"></span>
|
|
<span class="register" title="上线数">160</span>
|
|
<span class="online" title="在线数">100</span>
|
|
<span class="totalAmount" title="车辆总数">500</span>
|
|
</li>
|
|
</ul>
|
|
<ul class="item">
|
|
<li class="comName">企业名称1</li>
|
|
<li class="ratio">
|
|
<span class="total" title="车辆总数"></span>
|
|
<span class="register" title="上线数">160</span>
|
|
<span class="online" title="在线数">100</span>
|
|
<span class="totalAmount" title="车辆总数">500</span>
|
|
</li>
|
|
</ul>
|
|
<ul class="item">
|
|
<li class="comName">企业名称1</li>
|
|
<li class="ratio">
|
|
<span class="total" title="车辆总数"></span>
|
|
<span class="register" title="上线数">160</span>
|
|
<span class="online" title="在线数">100</span>
|
|
<span class="totalAmount" title="车辆总数">500</span>
|
|
</li>
|
|
</ul>
|
|
<ul class="item">
|
|
<li class="comName">企业名称1</li>
|
|
<li class="ratio">
|
|
<span class="total" title="车辆总数"></span>
|
|
<span class="register" title="上线数">160</span>
|
|
<span class="online" title="在线数">100</span>
|
|
<span class="totalAmount" title="车辆总数">500</span>
|
|
</li>
|
|
</ul>
|
|
<ul class="item">
|
|
<li class="comName">企业名称1</li>
|
|
<li class="ratio">
|
|
<span class="total" title="车辆总数"></span>
|
|
<span class="register" title="上线数">160</span>
|
|
<span class="online" title="在线数">100</span>
|
|
<span class="totalAmount" title="车辆总数">500</span>
|
|
</li>
|
|
</ul>
|
|
<ul class="item">
|
|
<li class="comName">企业名称1</li>
|
|
<li class="ratio">
|
|
<span class="total" title="车辆总数"></span>
|
|
<span class="register" title="上线数">160</span>
|
|
<span class="online" title="在线数">100</span>
|
|
<span class="totalAmount" title="车辆总数">500</span>
|
|
</li>
|
|
</ul>
|
|
<ul class="item">
|
|
<li class="comName">企业名称1</li>
|
|
<li class="ratio">
|
|
<span class="total" title="车辆总数"></span>
|
|
<span class="register" title="上线数">160</span>
|
|
<span class="online" title="在线数">100</span>
|
|
<span class="totalAmount" title="车辆总数">500</span>
|
|
</li>
|
|
</ul>
|
|
<ul class="item">
|
|
<li class="comName">企业名称1</li>
|
|
<li class="ratio">
|
|
<span class="total" title="车辆总数"></span>
|
|
<span class="register" title="上线数">160</span>
|
|
<span class="online" title="在线数">100</span>
|
|
<span class="totalAmount" title="车辆总数">500</span>
|
|
</li>
|
|
</ul>
|
|
<ul class="item">
|
|
<li class="comName">企业名称1</li>
|
|
<li class="ratio">
|
|
<span class="total" title="车辆总数"></span>
|
|
<span class="register" title="上线数">160</span>
|
|
<span class="online" title="在线数">100</span>
|
|
<span class="totalAmount" title="车辆总数">500</span>
|
|
</li>
|
|
</ul>
|
|
<ul class="item">
|
|
<li class="comName">企业名称1</li>
|
|
<li class="ratio">
|
|
<span class="total" title="车辆总数"></span>
|
|
<span class="register" title="上线数">160</span>
|
|
<span class="online" title="在线数">100</span>
|
|
<span class="totalAmount" title="车辆总数">500</span>
|
|
</li>
|
|
</ul>
|
|
<ul class="item">
|
|
<li class="comName">企业名称1</li>
|
|
<li class="ratio">
|
|
<span class="total" title="车辆总数"></span>
|
|
<span class="register" title="上线数">160</span>
|
|
<span class="online" title="在线数">100</span>
|
|
<span class="totalAmount" title="车辆总数">500</span>
|
|
</li>
|
|
</ul>
|
|
<ul class="item">
|
|
<li class="comName">企业名称1</li>
|
|
<li class="ratio">
|
|
<span class="total" title="车辆总数"></span>
|
|
<span class="register" title="上线数">160</span>
|
|
<span class="online" title="在线数">100</span>
|
|
<span class="totalAmount" title="车辆总数">500</span>
|
|
</li>
|
|
</ul>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
<div class="left">
|
|
<div class="item-1">
|
|
<div class="inner">
|
|
<div class="block block-1">
|
|
<div class="content">
|
|
<div class="com">
|
|
<ul>
|
|
<li class="symbol"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-company"></use> </svg></li>
|
|
<li class="label">接入企业</li>
|
|
<li class="amount">1563 <span>(户)</span></li>
|
|
</ul>
|
|
|
|
</div>
|
|
<div class="car">
|
|
<ul>
|
|
<li class="symbol"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-car_other_1-copy"></use> </svg></li>
|
|
<li class="label">接入车辆</li>
|
|
<li class="amount">624986<span>(辆)</span></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="block block-2">
|
|
<div class="content">
|
|
<div>
|
|
<div class="BOTTOM" id="test3"></div>
|
|
<li class="amount"><span>视频车辆</span> 3487 <span>(辆)</span></li>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="block block-2">
|
|
<div class="content">
|
|
<div>
|
|
<!--<li class="TOP">报警车辆：<span class="amount">12,345</span></li>-->
|
|
<div class="BOTTOM" id="test4"></div>
|
|
<li class="amount"><span>报警车辆</span> 3487 <span>(辆)</span></li>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="block block-2">
|
|
<div class="content">
|
|
<div>
|
|
<!--<li class="TOP">上线车辆：<span class="amount">12,345</span> </li>-->
|
|
<div class="BOTTOM" id="test5"></div>
|
|
<li class="amount"><span>上线车辆</span> 3487<span>(辆)</span></li>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="block block-3">
|
|
<div class="content">
|
|
<div>
|
|
<!--<li class="TOP">在线车辆：<span class="amount">12,345</span> </li>-->
|
|
<div class="BOTTOM" id="test6"></div>
|
|
<li class="amount"><span>在线车辆</span> 3487 <span>(辆)</span></li>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="item-2">
|
|
<div class="block-1">
|
|
<li class="title">车辆类型占比</li>
|
|
<div class="inner" id="test2"></div>
|
|
</div>
|
|
<div class="block-2">
|
|
<li class="title">车辆类型统计</li>
|
|
<div class="inner" id="test1"></div>
|
|
</div>
|
|
<div class="block-3">
|
|
<div class="inner">
|
|
<li class="title">流量统计</li>
|
|
<div class="flowCount">
|
|
<ul class="firstChild" style="margin-bottom: 12px;">
|
|
<li class="flowLabel">
|
|
<span class="symbol"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-day"></use></svg></span>
|
|
<span class="label ">当日流量：</span>
|
|
</li>
|
|
<li id="dataNums1" class="flowAmount flowDay"></li>
|
|
</ul>
|
|
<ul>
|
|
<li class="flowLabel">
|
|
<span class="symbol"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-month"></use></svg></span>
|
|
<span class="label">本月流量：</span>
|
|
</li>
|
|
<li id="dataNums2" class="flowAmount flowTotal"></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="bottom">
|
|
<div class="block-4">
|
|
<div class="inner">
|
|
<li class="title">Product Valuation</li>
|
|
<div class="container" id="test7"></div>
|
|
</div>
|
|
</div>
|
|
<div class="block-5">
|
|
<div class="inner">
|
|
<li class="title">Product Valuation</li>
|
|
<div class="container" id="test8"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="../../js/jquery.min.js"></script>
|
|
<script>
|
|
var data = {
|
|
total: [200, 180, 190, 200, 90, 120, 150, 50, 100, 90, 146, 100, 99, 44],
|
|
register: [190, 150, 190, 100, 90, 110, 100, 40, 80, 60, 120, 88, 70, 44],
|
|
online: [30, 100, 180, 90, 30, 88, 67, 50, 40, 34, 45, 50, 70, 44]
|
|
};
|
|
$('.totalAmount').each(function(m, n) {
|
|
$('.totalAmount').eq(m).text(data.total[m])
|
|
});
|
|
$('.total').each(function(m, n) {
|
|
$('.total').eq(m).animate({
|
|
'width': data.total[m]
|
|
});
|
|
$('.total').eq(m).text(data.total[m]);
|
|
});
|
|
$('.register').each(function(m, n) {
|
|
$('.register').eq(m).animate({
|
|
'width': data.register[m]
|
|
});
|
|
$('.register').eq(m).text(data.register[m]);
|
|
});
|
|
$('.online').each(function(m, n) {
|
|
$('.online').eq(m).animate({
|
|
'width': data.online[m]
|
|
});
|
|
$('.online').eq(m).text(data.online[m]);
|
|
})
|
|
</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>
|
|
$("#dataNums1").rollNum({
|
|
deVal: 111111
|
|
});
|
|
$("#dataNums2").rollNum({
|
|
deVal: 222222
|
|
});
|
|
</script>
|
|
<script src="http://at.alicdn.com/t/font_610679_r9naue0mmo.js"></script>
|
|
</body>
|
|
|
|
</html> |