shuochen
/
LargeScreenVisualization


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223
							<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>index</title>
<script type="text/javascript" src="js/jquery.js"></script>
<link rel="stylesheet" href="css/comon0.css">
</head>
<body>
<div class="loading">
  <div class="loadbox"> <img src="images/loading.gif"> 页面加载中... </div>
</div>
<div class="head">
  <h1>大数据可视化系统数据分析通用模版</h1>
  <div class="time" id="showTime">2019/11/29 0:12:42</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();//获取秒
		var t = null;
       document.getElementById("showTime").innerHTML = y+"/"+Appendzero(mt)+"/"+Appendzero(day)+" "+Appendzero(h)+":"+Appendzero(m)+":"+Appendzero(s)+"";
        function Appendzero(obj){
			if(obj<10) return "0" +""+ obj;
			else return obj;
		 }
		t = setTimeout(time,1000); //设定定时器，循环运行     
    } 

</script>
	
</div>
<div class="mainbox">
  <ul class="clearfix">
    <li>
      <div class="boxall" style="height: calc(40% - .15rem)">
        <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>19%</h2>
              <span>华南地区</span></li>
         
            <li>
              <h2>1824</h2>
              <span>华北地区</span></li>
           
          </ul>
        </div>
        <div class="boxfoot"></div>
      </div>
      <div class="boxall" style="height: calc(60% - .15rem)">
        <div class="alltitle">模块标题</div>
   <div class="sycm sycm2">
          <ul class="clearfix">
            <li>
              <h2>1824</h2>
              <span>字段名称</span></li>
            <li>
              <h2>1920</h2>
              <span>字段名称</span></li>
            <li>
              <h2>19%</h2>
              <span>字段名称</span></li>
         
            <li>
              <h2>1824</h2>
              <span>字段名称</span></li>
           <li>
              <h2>19%</h2>
              <span>字段名称</span></li>
         
            <li>
              <h2>1824</h2>
              <span>字段名称</span></li>
           
          </ul>
        </div>
        <div class="boxfoot"></div>
      </div>
      
    </li>
    <li>
     <div style="position: relative">
		<div class="barnav">
			
			 <div class="bar">
        <div class="barbox">
          <ul class="clearfix">
            <li class="pulll_left counter">1942</li>
            <li class="pulll_left counter">98612</li>
            <li class="pulll_left counter">2091</li>
          </ul>
        </div>
        <div class="barbox2">
          <ul class="clearfix">
            <li class="pulll_left">字段名称</li>
            <li class="pulll_left">字段名称</li>
            <li class="pulll_left">字段名称</li>
          </ul>
        </div>
		  
      </div>
		</div>
		 </div>
      <div class="mapbox">
		<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>
    </li>
    <li>
      
		<div class="boxall" style="height: calc(50% - .15rem)">
        <div class="alltitle">字段名称 <div class="pulll_right">
			<a href="#"><span></span>已维修</a>
			<a href="#"><span></span>未维修</a>
			</div></div>
        
        <div class="boxnav" id="echart3"></div>
        
        <div class="boxfoot"></div>
      </div>
      <div class="boxall" style="height: calc(50% - .15rem)">
        <div class="alltitle">字段名称</div>
        <div class="wrap boxnav">
          <ul>
            <li><p><span>深圳腾讯科技有限公司</span><span>门禁系统</span><span>在线</span></p></li>
            <li><p><span>网易科技有限公司</span><span>防火系统</span><span>在线</span></p></li>
            <li><p><span>百度科技有限公司</span><span>防火系统</span><span>在线</span></p></li>
            <li><p><span>汽车之家科技有限公司</span><span>定位系统</span><span>在线</span></p></li>
            <li><p><span>小米科技有限公司</span><span>定位系统</span><span>在线</span></p></li>
           
          </ul>
        </div>
        <div class="boxfoot"></div>
      </div>
    </li>
  </ul>
  <div class="copyright">版权所有：深圳市深海时代网络科技有限公司 粤ICP备15031517号-4</div>
</div>
	
	<div class="mainbox2">
  <ul class="clearfix">
    <li>
		
		<div class="boxall" style="height: 100%">
        <div class="alltitle">模块标题
			<div class="pulll_right">
			<a href="#"><span></span>已检点</a>
			<a href="#"><span></span>未检点</a>
			</div>
			</div>
       <div class="boxnav">
		  <ul class="btbox">
		   <li id="bt01"></li>
		   <li id="bt02"></li>
		   <li id="bt03"></li>
		   <li id="bt04"></li>
		   </ul>
		  </div>
        <div class="boxfoot"></div>
      </div>
		
    </li>
	  <li>
		  <div class="boxall" style="height:100%">
        <div class="alltitle">模块标题
			  <div class="pulll_right sebtn" >
			<a href="#" class="active">近七天</a>
			<a href="#">近30天</a>
			<a href="#">12月</a>
			</div>
			  </div>
         <div class="boxnav" id="echart4"></div>
        
        
        <div class="boxfoot"></div>
      </div>
	  </li>
	  
		</ul>
		</div>

<script language="JavaScript" src="js/js.js"></script> 
<script type="text/javascript" src="js/echarts.min.js"></script> 
<script type="text/javascript" src="js/china.js"></script> 
<script type="text/javascript" src="js/area_echarts.js"></script> 
<script src="js/jquery.liMarquee.js"></script> 
<script>
$(function(){
	$('.wrap,.adduser').liMarquee({
		direction: 'up',//身上滚动 
		runshort: false,//内容不足时不滚动
		scrollamount: 20//速度
	});
});
	
</script> 


<script type="text/javascript">
		$('.counter').countUp();
  </script>
</body>
</html>