shuochen
/
LargeScreenVisualization


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298
							<!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="back"></div>
		<script src="https://www.jq22.com/jquery/echarts-4.2.1.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">

		</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>