257 lines
9.5 KiB
HTML
257 lines
9.5 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>WebTools-Web开发者素材</title>
|
||
<link rel="icon" href="../../img/logo.png">
|
||
<script type="text/javascript" src="./js/jquery.js"></script>
|
||
<link rel="stylesheet" href="css/comon0.css">
|
||
<style>
|
||
|
||
|
||
.grid {
|
||
margin-top:5%;
|
||
width:80%;
|
||
height: 10px;
|
||
display: grid;
|
||
grid-template-columns: repeat(20, 1fr);
|
||
grid-column-gap: 14px;
|
||
}
|
||
|
||
.line {
|
||
position: relative;
|
||
width: 90%;
|
||
height: 7px;
|
||
}
|
||
.line::before, .line::after {
|
||
content: '';
|
||
position: absolute;
|
||
width: 4.5rem;
|
||
height: 100%;
|
||
border-radius: 7px;
|
||
background-color: #FF0000;
|
||
}
|
||
.line::before {
|
||
animation: first-line ease-in-out 4s var(--delay) infinite alternate;
|
||
}
|
||
.line::after {
|
||
bottom: 0;
|
||
background-color: #B22222;
|
||
width: calc(80% - 10px);
|
||
animation: second-line ease-in-out 4s var(--delay) infinite alternate;
|
||
}
|
||
.line:nth-child(1) {
|
||
--delay: calc(-0.1s);
|
||
}
|
||
|
||
|
||
@keyframes first-line {
|
||
70% {
|
||
width: calc(80% - 10px);
|
||
}
|
||
100% {
|
||
background-color: #FF0000;
|
||
}
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<script type="text/javascript">
|
||
$(document).ready(function(){
|
||
var html=$(".wrap ul").html()
|
||
$(".wrap ul").append(html)
|
||
var ls=$(".wrap li").length/2+1
|
||
i=0
|
||
ref = setInterval(function(){
|
||
i++
|
||
if(i==ls){
|
||
i=1
|
||
$(".wrap ul").css({marginTop:0})
|
||
$(".wrap ul").animate({marginTop:-'.52'*i+'rem'},1000)
|
||
}
|
||
$(".wrap ul").animate({marginTop:-'.52'*i+'rem'},1000)
|
||
|
||
|
||
},2400);
|
||
|
||
|
||
|
||
var html2=$(".adduser ul").html()
|
||
$(".adduser ul").append(html2)
|
||
var ls2=$(".adduser li").length/2+1
|
||
a=0
|
||
ref = setInterval(function(){
|
||
a++
|
||
if(a==ls2){
|
||
a=1
|
||
$(".adduser ul").css({marginTop:0})
|
||
$(".adduser ul").animate({marginTop:-'.5'*a+'rem'},800)
|
||
}
|
||
$(".adduser ul").animate({marginTop:-'.5'*a+'rem'},800)
|
||
|
||
|
||
},4300);
|
||
})
|
||
</script>
|
||
<body style='overflow:-Scroll;overflow-y:hidden'>
|
||
<div class="loading">
|
||
<div class="loadbox"> <img src="images/loading.gif"> 页面加载中... </div>
|
||
</div>
|
||
<div class="head">
|
||
<h1><a href="http://www.anydo.wang" style="color: white">翼兴消防监控</a></h1>
|
||
<div class="weather"><span id="showTime"></span></div>
|
||
<script>
|
||
var t = null;
|
||
t = setTimeout(time, 1000);
|
||
function time() {
|
||
clearTimeout(t);
|
||
dt = new Date();
|
||
var y = dt.getFullYear();
|
||
var mt = dt.getMonth() + 1;
|
||
var day = dt.getDate();
|
||
var h = dt.getHours();
|
||
var m = dt.getMinutes();
|
||
var s = dt.getSeconds();
|
||
document.getElementById("showTime").innerHTML = y + "年" + mt + "月" + day + "-" + h + "时" + m + "分" + s + "秒";
|
||
t = setTimeout(time, 1000);
|
||
}
|
||
|
||
</script>
|
||
</div>
|
||
<div class="mainbox">
|
||
<ul class="clearfix">
|
||
<li>
|
||
<div class="boxall" style="height: 5.2rem">
|
||
<div class="alltitle">消防主机报警</div>
|
||
|
||
<div class="sycm">
|
||
<ul class="clearfix">
|
||
<li><h2>1824</h2><span>本月报警数量</span></li>
|
||
<li><h2>1920</h2><span>上月报警数量</span></li>
|
||
<li><h2>5%</h2><span>环比增长</span></li>
|
||
</ul>
|
||
<div style="border-bottom: 1px solid rgba(255,255,255,.1)"></div>
|
||
<ul class="clearfix">
|
||
<li><h2>824</h2><span>主机(20001)</span></li>
|
||
<li><h2>710</h2><span>主机(20003)</span></li>
|
||
<li><h2>200</h2><span>主机(20002)</span></li>
|
||
</ul>
|
||
|
||
|
||
</div>
|
||
<div class="addnew" >
|
||
<div class="tit02"><span>误报种类</span></div>
|
||
<div class="allnav" style="height: 2.2rem" id="wbzl"></div>
|
||
</div>
|
||
<div class="boxfoot"></div>
|
||
</div>
|
||
<div class="boxall" style="height: 4.9rem">
|
||
<div class="alltitle">无线烟感报警</div>
|
||
<div class="allnav" style="height: 1.5rem" id="wxyg"></div>
|
||
<div class="addnew" >
|
||
<div class="tit02"><span>误报种类</span></div>
|
||
<div class="allnav" style="height: 2.0rem" id="wwbzl"></div>
|
||
</div>
|
||
<div class="boxfoot"></div>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div class="bar">
|
||
<div class="barbox ">
|
||
<ul class="clearfix">
|
||
<li class="pulll_left counter">
|
||
6069
|
||
</li>
|
||
<li class="pulll_left counter">410</li>
|
||
</ul>
|
||
</div>
|
||
<div class="barbox2">
|
||
<ul class="clearfix">
|
||
<li class="pulll_left">联网单位数量</li>
|
||
<li class="pulll_left">联网消防主机数量</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="bar">
|
||
<div class="barbox">
|
||
<ul class="clearfix">
|
||
<li class="pulll_left counter">81189</li>
|
||
<li class="pulll_left counter">39410</li>
|
||
</ul>
|
||
</div>
|
||
<div class="barbox2">
|
||
<ul class="clearfix">
|
||
<li class="pulll_left">总点位数量</li>
|
||
<li class="pulll_left">总报警数量</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="map">
|
||
<div class="map1"><img src="images/lbx.png"></div>
|
||
<div class="map2"><img src="images/jt.png"></div>
|
||
<div class="map3"><img src="images/map.png"></div>
|
||
<div class="map4" id="map_1"></div>
|
||
</div>
|
||
<div class="boxall" style="height: 3.4rem">
|
||
<div class="alltitle">电报警</div>
|
||
<div class="allnav" id="dbj" style="width:7.2rem;height:3rem;margin-top: 0.3rem"></div>
|
||
<div class="boxfoot"></div>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div class="boxall" style="height:5.2rem">
|
||
<div class="alltitle">燃气报警</div>
|
||
|
||
<div class="clearfix">
|
||
<div class="sy" style="width:300px;" id="yqbj"></div>
|
||
</div>
|
||
<div class="addnew" >
|
||
<div class="tit02"><span>最新报警</span></div>
|
||
<div class="adduser" style="height: 2.0rem">
|
||
<ul >
|
||
<li class="clearfix"> <span class="pulll_left">大连市XX医院</span> <span class="pulll_right">一楼 - 吸烟 - 2019-10-11 09:58:58 </span> </li>
|
||
<li class="clearfix"> <span class="pulll_left">大连市XX集团</span> <span class="pulll_right">二楼 - 误报 - 2019-10-11 09:58:58 </span> </li>
|
||
<li class="clearfix"> <span class="pulll_left">开发区医院</span> <span class="pulll_right">三楼 - 粉尘 - 2019-10-11 09:58:58 </span> </li>
|
||
<li class="clearfix"> <span class="pulll_left">时代广场</span> <span class="pulll_right">四楼 - 误报 - 2019-10-11 09:58:58 </span> </li>
|
||
<li class="clearfix"> <span class="pulll_left">海昌物业</span> <span class="pulll_right">四楼 - 误报 - 2019-10-11 09:58:58 </span> </li>
|
||
<li class="clearfix"> <span class="pulll_left">海昌物业</span> <span class="pulll_right">四楼 - 误报 - 2019-10-11 09:58:58 </span> </li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="boxfoot"></div>
|
||
</div>
|
||
<div class="boxall" style="height: 1.4rem">
|
||
<div class="alltitle">红外报警</div>
|
||
<div class="grid">
|
||
<span class="line"></span>
|
||
</div>
|
||
<div >
|
||
<span style="color: #fff;opacity:.5">本月报警数量 ：</span><span style="color: #DC143C;font-size:.1rem; font-weight: bold;">809</span>
|
||
<span style="margin-left:15%;color: #fff;opacity:.5">上月报警数量 ：</span><span style="color: #ffeb7b;font-size:.1rem; font-weight: old;">109</span>
|
||
|
||
</div>
|
||
<div class="boxfoot"></div>
|
||
</div>
|
||
<div class="boxall" style="height: 3.4rem">
|
||
<div class="alltitle">水报警</div>
|
||
<div class="allnav" style="height: 3.0rem" id="sbj"></div>
|
||
|
||
<div class="boxfoot"></div>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
|
||
</div>
|
||
<div class="back"></div>
|
||
<script type="text/javascript" src="../../js/echarts/echarts.min.js"></script>
|
||
<script type="text/javascript" src="js/echarts-gl.min.js"></script>
|
||
<script language="JavaScript" src="js/echarts-tool.js"></script>
|
||
<script type="text/javascript" src="js/timelineOption.js"></script>
|
||
<script type="text/javascript" src="js/jquery.waypoints.min.js"></script>
|
||
<script type="text/javascript" src="js/jquery.countup.min.js"></script>
|
||
<script type="text/javascript">
|
||
$('.counter').countUp();
|
||
</script>
|
||
</body>
|
||
</html>
|