123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242 |
- <!doctype html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport"
- content="width=daily-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
- <link rel="stylesheet" href="/static/bootstrap-3.3.7/css/bootstrap.css">
- <link rel="stylesheet" href="/static/dropload-gh-pages/dropload.css">
- <script type="text/javascript" src="/static/jquery-2.2.4.min.js"></script>
- <script type="text/javascript" src="/static/dropload-gh-pages/dropload.min.js"></script>
- <script type="text/javascript" src="/static/layer/layer.js"></script>
- <title>列表</title>
- <style>
- body{
- background-color: #F1F1F1;
- }
- .container{
- max-width: 750px;
- height: auto;
- margin: 0 auto;
- padding: 0px 6px;
- }
- .daily-lists{
- width: 100%;
- height: auto;
- }
- .daily-info{
- width: 100%;
- height: 100px;
- border-radius: 10px;
- margin-top: 5px;
- background-color: #ffffff;
- padding: 0px 13px;
- }
- .daily-info-title{
- width: 100%;
- height: 40px;
- line-height: 40px;
- font-size: 15px;
- font-weight: 600;
- letter-spacing: 1px;
- color: #148d8f;
- border-bottom:1.2px solid #F1F1F1;
- }
- .daily-info-content{
- width: 100%;
- height: 60px;
- }
- .daily-info-user{
- width: 100%;
- height: 30px;
- line-height: 30px;
- }
- .left{
- width: 30%;
- height: 30px;
- line-height: 30px;
- display: inline-block;
- font-size: 14px;
- float: left;
- }
- .right{
- width: 66%;
- height: 30px;
- line-height: 30px;
- display: inline-block;
- float: right;
- font-size: 13px;
- color: #A9A9A9;
- overflow: hidden;
- text-align: right;
- }
- .daily-info-time{
- width: 100%;
- height: 30px;
- line-height: 30px;
- }
- .nulldata{
- width: 100%;
- height: 200px;
- text-align: center;
- position: fixed;
- top: 22%;
- }
- .nulldata img{
- width: 200px;
- height: 160px;
- text-align: center;
- }
- .nulldata-text{
- margin-top: 15px;
- font-size: 14px;
- letter-spacing: 2px;
- text-align: center;
- }
- .footer-back{
- position: fixed;
- z-index: 1000;
- width: 100%;
- height: 45px;
- line-height: 45px;
- background-color: #ffffff;
- bottom: 0;
- left: 0;
- box-shadow: 0px 0px 10px 0px rgba(26, 25, 26, 0.05);
- display: table-cell;
- vertical-align: middle;
- text-align: center;
- }
- .footer-back a img{
- width: 43px;
- height: 43px;
- }
- </style>
- </head>
- <body>
- {if $list}
- <div class="container">
- <div class="daily-lists">
- {foreach $list as $k=>$v}
- <div class="daily-info">
- <div class="daily-info-title">{$v['title']}</div>
- <div class="daily-info-content">
- <div class="daily-info-user">
- <div class="left">工作人员:</div>
- <div class="right">{$v['work_user']}</div>
- </div>
- {if $v['enable'] == 1}
- <div class="daily-info-time">
- <div class="left">状态:</div>
- <div class="right">可用</div>
- </div>
- {else /}
- <div class="daily-info-time">
- <div class="left">状态:</div>
- <div class="right">不可用</div>
- </div>
- {/if}
- </div>
- </div>
- {/foreach}
- </div>
- </div>
- {else /}
- <div class="nulldata">
- <img src="/img/nulldata.png" alt="">
- <div class="nulldata-text">空空如也 ~</div>
- </div>
- {/if}
- <div class="footer-back">
- <a href="javascript:;" onclick="javascript:history.back(-1);"><img src="/img/back.png"></a>
- </div>
- </body>
- </html>
- <script>
- var orgId = '{$orgId}';
- var day= '{$day}';
- $(function(){
- // 页数
- var page = 1;
- // 每页展示20个
- var size = 20;
- // dropload
- $('.container').dropload({
- scrollArea : window,
- domDown : {
- domClass : 'dropload-down',
- domRefresh : '<div class="dropload-refresh">↑上拉加载更多</div>',
- domLoad : '<div class="dropload-load"><span class="loading"></span>加载中...</div>',
- domNoData : '<div class="dropload-noData"></div>'
- },
- loadDownFn : function(me){
- page++;
- // 拼接HTML
- var result = '';
- var url= "{:url('Statistics/deviceList')}";
- $.ajax({
- type: 'GET',
- url: url+'?page='+page+'&size='+size+'&orgId='+orgId+'&day='+day,
- dataType: 'json',
- success: function(res){
- var data = res.data;
- var arrLen = data.length;
- if(arrLen > 0){
- for(var i = 0; i < data.length; i++){
- if(arrLen > 0){
- result +='<div class="daily-info">';
- result +='<div class="daily-info-title">'+data[i].title+'</div>';
- result +='<div class="daily-info-content">';
- result +='<div class="daily-info-user">';
- result +='<div class="left">工作人员:</div>';
- result +='<div class="right">'+data[i].workUser+'</div>';
- result +='</div>';
- if(data[i].enable == 1){
- result +='<div class="device-info-time">';
- result +='<div class="left">状态:</div>';
- result +='<div class="right">可用</div>';
- }else {
- result +='<div class="device-info-time">';
- result +='<div class="left">状态:</div>';
- result +='<div class="right">不可用</div>';
- }
- result +='</div>';
- result +='</div>';
- result +='</div>';
- }
- }
- // 如果没有数据
- }else{
- // 锁定
- me.lock();
- // 无数据
- me.noData();
- }
- //延迟1秒加载
- setTimeout(function(){
- // 插入数据到页面,放到最后面
- $('.daily-lists').append(result);
- // 每次数据插入,必须重置
- me.resetload();
- },1000);
- },
- error: function(xhr, type){
- // 即使加载出错,也得重置
- me.resetload();
- }
- });
- },
- threshold : 50
- });
- });
- </script>
|