123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267 |
- <!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>
- <div class="mainbox">
- <ul class="clearfix">
- <li>
- <div class="boxall" style="height:calc(33.3333% - .25rem)">
- <div class="tit01">模块标题</div>
- <div class="boxnav nav01" id="echart1"></div>
- <div class="boxfoot"></div>
- </div>
- <div style="height:calc(33.3333% - .25rem); margin-bottom: .25rem;">
-
- <div class="boxall" style="height: 100%; width:calc(50% - .08rem); float: left;">
- <div class="tit01">模块标题</div>
- <div class="boxnav nav01" id="echart2"></div>
- <div class="boxfoot"></div>
- </div>
-
- <div class="boxall" style="height: 100%; width:calc(50% - .08rem); float: right;">
- <div class="tit01">模块标题</div>
- <div class="boxnav nav01" style="display: flex; align-items: center;">
- <p class="p2"><span class="counter">19</span>/<span class="counter">25</span></p>
- </div>
- <div class="boxfoot"></div>
- </div>
-
-
- </div>
-
-
-
-
- <div class="boxall" style="height:calc(33.3333% - .25rem)">
- <div class="tit01">模块标题</div>
- <div class="boxnav nav01" id="echart3"></div>
- <div class="boxfoot"></div>
- </div>
- </li>
- <li>
-
- <div class="boxall" style="height:calc(33.33333% - .25rem)">
- <div class="tit02">本月计划</div>
- <div class="boxnav nav02">
- <div>
- <p class="p1">完成/计划</p>
- <p class="p2"><span class="counter">15633</span>/<span class="counter">68000</span></p>
- <p class="p3">
- <span><i class="dot dot1"></i>未完成:52367</span>
- <span><i class="dot dot2"></i>完成率:22.9%</span>
- </p></div>
- </div>
- <div class="boxfoot"></div>
- </div>
- <div class="boxall" style="height:calc(66.666666% - .25rem)">
- <div class="tit03">模块标题</div>
- <div class="boxnav nav03">
-
- <div class="listhead listhead1">
- <span>字段1</span>
- <span>字段名称</span>
- <span>字段名称</span>
- <span>字段名称</span>
- <span>字段名称</span>
- <span>字段名称</span>
- </div>
- <div class="listnav listnav1 scrollDiv">
- <ul>
- <li> <span>201910-01</span> <span>2658/2658</span> <span>2658/2658</span> <span>2658/2658</span> <span>2658/2658</span> <span class="text-green">100%</span></li>
- <li><span>201910-02</span> <span>2334/2334</span> <span>2334/2334</span> <span>2334/2334</span> <span>2334/2334</span> <span class="text-green">100%</span></li>
- <li> <span>201910-02</span> <span>2334/2334</span> <span>2334/2334</span> <span>2334/2334</span> <span>2334/2334</span> <span class="text-green">100%</span></li>
- <li> <span>201910-02</span> <span>2334/2334</span> <span>2334/2334</span> <span>2334/2334</span> <span>2334/2334</span> <span class="text-green">100%</span></li>
- <li> <span>201910-02</span> <span>2334/2334</span> <span>2334/2334</span> <span>2334/2334</span> <span>2334/2334</span> <span class="text-green">100%</span></li>
- <li> <span>201910-02</span> <span>2334/2334</span> <span>2334/2334</span> <span>2334/2334</span> <span>2334/2334</span> <span class="text-green">100%</span></li>
- <li> <span>201910-02</span> <span>2334/2334</span> <span>2334/2334</span> <span>2334/2334</span> <span>2334/2334</span> <span class="text-green">100%</span></li>
- <li> <span>201910-02</span> <span>2334/2334</span> <span>2334/2334</span> <span>2334/2334</span> <span>2334/2334</span> <span class="text-green">100%</span></li>
- <li> <span>201910-02</span> <span>2334/2334</span> <span>2334/2334</span> <span>2334/2334</span> <span>2334/2334</span> <span class="text-green">100%</span></li>
- <li> <span>201910-02</span> <span>2334/2334</span> <span>2334/2334</span> <span>2334/2334</span> <span>2334/2334</span> <span>70%</span></li>
- </ul>
- </div>
-
-
- </div>
- <div class="boxfoot"></div>
- </div>
- </li>
- <li>
- <div class="boxall" style="height:calc(100% - .25rem); padding: 0;">
- <div class="tit04">模块标题</div>
- <div class="boxnav nav04">
-
- <div class="listhead listhead2">
- <span>字段名称</span>
- <span>字段名称</span>
- <span>字段名称</span>
-
- </div>
-
- <div class="listnav listnav2 scrollDiv">
-
- <ul class="smjl">
- <li>
- <span>设备名称</span>
- <span class="text-green">正常</span>
- <span> <input type="hidden" name="countDown" value="2019/09/10 13:29:12"> <span></span></span>
- </li>
- <li>
- <span>设备名称</span>
- <span class="text-red">异常</span>
- <span><span> <input type="hidden" name="countDown" value="2019/10/30 3:23:00"> <span></span></span></span>
- </li>
-
- <li>
- <span>设备名称</span>
- <span class="text-green">正常</span>
- <span> <input type="hidden" name="countDown" value="2019/09/10 13:29:12"> <span></span></span>
- </li>
- <li>
- <span>设备名称</span>
- <span class="text-green">正常</span>
- <span> <input type="hidden" name="countDown" value="2019/09/10 13:29:12"> <span></span></span>
- </li>
- <li>
- <span>设备名称</span>
- <span class="text-green">正常</span>
- <span> <input type="hidden" name="countDown" value="2019/09/10 13:29:12"> <span></span></span>
- </li>
- <li>
- <span>设备名称</span>
- <span class="text-green">正常</span>
- <span> <input type="hidden" name="countDown" value="2019/09/10 13:29:9"> <span></span></span>
- </li>
- <li>
- <span>设备名称</span>
- <span class="text-green">正常</span>
- <span> <input type="hidden" name="countDown" value="2019/09/10 13:29:12"> <span></span></span>
- </li>
- <li>
- <span>设备名称</span>
- <span class="text-green">正常</span>
- <span> <input type="hidden" name="countDown" value="2019/09/10 13:29:11"> <span></span></span>
- </li>
- <li>
- <span>设备名称</span>
- <span class="text-green">正常</span>
- <span> <input type="hidden" name="countDown" value="2019/09/10 13:29:12"> <span></span></span>
- </li>
- <li>
- <span>设备名称</span>
- <span class="text-green">正常</span>
- <span> <input type="hidden" name="countDown" value="2019/09/10 13:29:13"> <span></span></span>
- </li>
- <li>
- <span>设备名称</span>
- <span class="text-green">正常</span>
- <span> <input type="hidden" name="countDown" value="2019/09/10 13:29:14"> <span></span></span>
- </li>
- <li>
- <span>设备名称</span>
- <span class="text-green">正常</span>
- <span> <input type="hidden" name="countDown" value="2019/09/10 13:29:15"> <span></span></span>
- </li>
- <li>
- <span>设备名称</span>
- <span class="text-green">正常</span>
- <span> <input type="hidden" name="countDown" value="2019/09/10 13:29:12"> <span></span></span>
- </li>
- <li>
- <span>设备名称</span>
- <span class="text-green">正常</span>
- <span> <input type="hidden" name="countDown" value="2019/09/10 13:29:12"> <span></span></span>
- </li>
- <li>
- <span>设备名称</span>
- <span class="text-green">正常</span>
- <span> <input type="hidden" name="countDown" value="2019/09/10 13:29:16"> <span></span></span>
- </li>
- <li>
- <span>设备名称</span>
- <span class="text-green">正常</span>
- <span> <input type="hidden" name="countDown" value="2019/09/10 13:29:12"> <span></span></span>
- </li>
- <li>
- <span>设备名称</span>
- <span class="text-green">正常</span>
- <span> <input type="hidden" name="countDown" value="2019/09/10 13:29:12"> <span></span></span>
- </li>
- <li>
- <span>设备名称</span>
- <span class="text-green">正常</span>
- <span> <input type="hidden" name="countDown" value="2019/09/10 13:29:22"> <span></span></span>
- </li>
- <li>
- <span>设备名称</span>
- <span class="text-green">正常</span>
- <span> <input type="hidden" name="countDown" value="2019/09/10 13:29:42"> <span></span></span>
- </li>
- <li>
- <span>设备名称</span>
- <span class="text-green">正常</span>
- <span> <input type="hidden" name="countDown" value="2019/09/10 13:29:19"> <span></span></span>
- </li>
- <li>
- <span>设备名称</span>
- <span class="text-green">正常</span>
- <span> <input type="hidden" name="countDown" value="2019/09/10 13:29:17"> <span></span></span>
- </li>
-
- </ul>
- </div>
- </div>
- <div class="boxfoot"></div>
- </div>
- </li>
- </ul>
- </div>
- <script type="text/javascript" src="js/echarts.min.js"></script>
- <script src="js/jquery.liMarquee.js"></script>
- <script language="JavaScript" src="js/js.js"></script>
- <script type="text/javascript" src="js/jquery.countup.min.js"></script>
- <script type="text/javascript" src="js/jquery.waypoints.min.js"></script>
- <script type="text/javascript">
- $('.counter').countUp();
- $(function(){
- $('.scrollDiv').liMarquee({
- direction: 'up',//身上滚动
- runshort: false,//内容不足时不滚动
- scrollamount: 20//速度
- });
- });
- </script>
-
- <script src="js/countDown.js"></script>
- <script type="text/javascript">
- $("input[name='countDown']").each(function () {
- var time_end=this.value;
- var con=$(this).next("span");
- var _=this.dataset;
- countDown(con,{
- time_end:time_end//开始时间
- })
- //提供3个事件分别为:启动,重启,停止
- .on("countDownStarted countDownRestarted countDownEnded ",function (arguments) {
- console.info(arguments);
- });
- });
- </script>
- </body>
- </html>
|