<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>XXX有限公司公司</title>
<script src="https://www.jq22.com/jquery/jquery-1.10.2.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=''>
<div class="loading">
<div class="loadbox"> <img src="images/loading.gif"> 页面加载中... </div>
</div>
<div class="head">
<h1>XXX有限公司公司</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="ba
基于ECharts消防监控预警可视化大屏源码.rar
版权申诉
76 浏览量
2023-08-15
09:08:32
上传
评论
收藏 319KB RAR 举报
基于ECharts消防监控预警可视化大屏源码.rar （14个子文件） 
基于ECharts消防监控预警可视化大屏源码 js 
jquery.countup.min.js 1KB echarts-tool.js 62KB jquery.waypoints.min.js 9KB timelineOption.js 16KB echarts-gl.min.js 672KB css comon0.css 8KB
index.html 8KB images 
jt.png 15KB lbx.png 25KB
loading.gif 701B line.png 346B
bg.jpg 23KB head_bg.png 2KB map.png 46KB资源评论
五星资源
- 粉丝: 5657
- 资源: 1565
最新资源
- 基于python开发使用深度学习去预测股票后续的价格+源码+文档（毕业设计&课程设计&项目开发）
- flowable-designer-5.22.0.zip
- threadmanager.cpp
- 腾讯云小程序 - 一站式开发与部署平台
- 基于JSP＋Java＋Servlet采用MVC模式开发的购物网站+源码（毕业设计&课程设计&项目开发）
- fastgestures安装包，模拟mac的触控板收拾，两指代表右击， 三指拖拽
- 基于组态王的升降式横移立体车库控制系统+源码（毕业设计&课程设计&项目开发）
- 基于python+Django和协同过滤算法的电影推荐系统+源码（毕业设计&课程设计&项目开发）
- 环境配置 vscode+jupyter
- 项目全部代码，还包含使用到的图片
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
