<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>消防监控</title>
<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="https://gitee.com/iGaoWei/big-data-view" 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
【前端模板】070 翼兴消防监控.zip
版权申诉
46 浏览量
2024-03-19
23:39:39
上传
评论
收藏 6.5MB ZIP 举报
【前端模板】070 翼兴消防监控.zip （43个子文件） 
070 翼兴消防监控 
翼兴消防监控.png 2.38MB js 
echarts.simple.js 1.23MB jquery.countup.min.js 1KB echarts-tool1.js 74KB echarts-tool.js 62KB jquery.waypoints.min.js 9KB echarts.simple.min.js 305KB common.js.bak 61KB echarts.common.min.js 471KB echarts-gl.js 1.86MB echarts.blank.js 888B echarts.common.js 1.84MB common.js 117KB echarts.all.js 6KB timelineOption.js 16KB echarts.js 2.84MB china.js 117KB echarts.js.map 5.03MB echarts.min.js 744KB area_echarts.js 11KB echarts-tool.js.bak 74KB echarts-gl.min.js 672KB jquery.js 82KB css comon0.css.bak 8KB comon0.css 8KB
index.html 10KB images weather.png 2KB bg02big2index.png 1KB jt.png 72KB lbx.png 81KB
loading.gif 701B logo.png 6KB bg03bigindex.png 1KB line.png 4KB jzxz2.png 4KB
bg.jpg 252KB bg04bigindex.png 1021B head.jpg 3KB head_bg.png 8KB jzxz1.png 4KB bg02bigindex_.png 3KB map.png 302KB bg02bigindex.png 1KB资源评论
