dbsw.html 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
  6. <meta name="apple-mobile-web-app-capable" content="yes">
  7. <meta name="apple-mobile-web-app-status-bar-style" content="black">
  8. <title>江苏港口智能监管信息平台</title>
  9. <link href="../css/mui.min.css" rel="stylesheet">
  10. <script type="text/javascript" src="../js/zepto.min.js"></script>
  11. <script type="text/javascript" src="../js/iscroll.js" charset="utf-8"></script>
  12. <script type="text/javascript">
  13. var page =1;
  14. var rows =10;
  15. $(function(){
  16. $.ajax({
  17. type: 'post',
  18. url: '../../swcontroller/dbsw.do',
  19. data:{uid:"402881e44e86c26d014e86c9ae8c0008",page:page,rows:rows,title:$("#title").val(),code:getQueryString("code")},
  20. dataType: 'json',
  21. success: function(data){
  22. console.log(data)
  23. var result = '';
  24. if(data.length==0)
  25. { layer.open({
  26. shade:false,
  27. content: '没有相关数据',
  28. style: 'background-color:rgba(0,0,0,0.5); color:white; border:none;font-size:20px;text-align:center',
  29. time: 1
  30. });
  31. $('.lists').html('');
  32. return;
  33. }
  34. for(var i = 0; i < data.length; i++){
  35. if(data[i].viewflag=="0"){
  36. result += '<li class="mui-table-view-cell mui-media" style="font-weight: bold;"><a onclick="window.open(\'info.html?hname=db&isDone=1&id='+data[i].id+'\')" href="javascript:void(0)" >'+
  37. '<div class="mui-media-body">'+data[i].title+
  38. '<p class="mui-ellipsis">当前环节:<span style="color:rgb(33, 150, 243);">'+data[i].status+'</span> 来文日期 :<span style="color:rgb(33, 150, 243);">'+todata(data[i].addDate)+'</span></p>'+
  39. '</div>'+
  40. '</a></li>';
  41. }else{
  42. result += '<li class="mui-table-view-cell mui-media"><a onclick="window.open(\'info.html?hname=db&isDone=1&id='+data[i].id+'\')" href="javascript:void(0)" >'+
  43. '<div class="mui-media-body">'+data[i].title+
  44. '<p class="mui-ellipsis">当前环节:<span style="color:rgb(33, 150, 243);">'+data[i].status+'</span> 来文日期 :<span style="color:rgb(33, 150, 243);">'+todata(data[i].addDate)+'</span></p>'+
  45. '</div>'+
  46. '</a></li>';
  47. }
  48. }
  49. $('.lists').html('');
  50. $('.lists').prepend(result);
  51. if(data.length>=rows){
  52. showJZ();
  53. }else{
  54. hideJZ();
  55. }
  56. myScroll.refresh();
  57. }})
  58. $("#sousuo").on("click",function(){
  59. // var title=$("#title").val();
  60. page = 1;
  61. $.ajax({
  62. type: 'post',
  63. url: '../../swcontroller/dbsw.do',
  64. data:{uid:"402881e44e86c26d014e86c9ae8c0008",page:page,rows:rows,title:$("#title").val()},
  65. dataType: 'json',
  66. success: function(data){
  67. console.log(data)
  68. var result = '';
  69. if(data.length==0)
  70. {
  71. layer.open({
  72. shade:false,
  73. content: '没有搜索到相关数据',
  74. style: 'background-color:rgba(0,0,0,0.5); color:white; border:none;font-size:20px;text-align:center',
  75. time: 1
  76. });
  77. $('.lists').html('');
  78. return;
  79. }
  80. for(var i = 0; i < data.length; i++){
  81. if(data[i].viewflag=="0"){
  82. result += '<li class="mui-table-view-cell mui-media" style="font-weight: bold;"><a onclick="window.open(\'info.html?hname=db&isDone=1&id='+data[i].id+'\')" href="javascript:void(0)" >'+
  83. '<div class="mui-media-body">'+data[i].title+
  84. '<p class="mui-ellipsis">当前环节:<span style="color:rgb(33, 150, 243);">'+data[i].status+'</span> 来文日期 :<span style="color:rgb(33, 150, 243);">'+todata(data[i].addDate)+'</span></p>'+
  85. '</div>'+
  86. '</a></li>';
  87. }else{
  88. result += '<li class="mui-table-view-cell mui-media"><a onclick="window.open(\'info.html?hname=db&isDone=1&id='+data[i].id+'\')" href="javascript:void(0)" >'+
  89. '<div class="mui-media-body">'+data[i].title+
  90. '<p class="mui-ellipsis">当前环节:<span style="color:rgb(33, 150, 243);">'+data[i].status+'</span> 来文日期 :<span style="color:rgb(33, 150, 243);">'+todata(data[i].addDate)+'</span></p>'+
  91. '</div>'+
  92. '</a></li>';
  93. }
  94. }
  95. $('.lists').html('');
  96. $('.lists').prepend(result);
  97. if(data.length>=rows){
  98. showJZ();
  99. }else{
  100. hideJZ();
  101. }
  102. myScroll.refresh();
  103. }})
  104. })
  105. })
  106. var myScroll,
  107. pullDownEl, pullDownOffset,
  108. pullUpEl, pullUpOffset,
  109. generatedCount = 0;
  110. function pullDownAction () {
  111. page = 1;
  112. rows = 8;
  113. $.ajax({
  114. type: 'post',
  115. url: '../../swcontroller/dbsw.do',
  116. data:{uid:"402881e44e86c26d014e86c9ae8c0008",page:page,rows:rows,title:$("#title").val()},
  117. dataType: 'json',
  118. success: function(data){
  119. var result = '';
  120. for(var i = 0; i < data.length; i++){
  121. if(data[i].viewflag=="0"){
  122. result += '<li class="mui-table-view-cell mui-media" style="font-weight: bold;"><a onclick="window.open(\'info.html?hname=db&isDone=1&id='+data[i].id+'\')" href="javascript:void(0)" >'+
  123. '<div class="mui-media-body">'+data[i].title+
  124. '<p class="mui-ellipsis">当前环节:<span style="color:rgb(33, 150, 243);">'+data[i].status+'</span> 来文日期 :<span style="color:rgb(33, 150, 243);">'+todata(data[i].addDate)+'</span></p>'+
  125. '</div>'+
  126. '</a></li>';
  127. }else{
  128. result += '<li class="mui-table-view-cell mui-media"><a onclick="window.open(\'info.html?hname=db&isDone=1&id='+data[i].id+'\')" href="javascript:void(0)" >'+
  129. '<div class="mui-media-body">'+data[i].title+
  130. '<p class="mui-ellipsis">当前环节:<span style="color:rgb(33, 150, 243);">'+data[i].status+'</span> 来文日期 :<span style="color:rgb(33, 150, 243);">'+todata(data[i].addDate)+'</span></p>'+
  131. '</div>'+
  132. '</a></li>';
  133. }
  134. }
  135. $('.lists').html('');
  136. $('.lists').prepend(result);
  137. if(data.length>=rows){
  138. showJZ();
  139. }else{
  140. hideJZ();
  141. }
  142. myScroll.refresh();
  143. }})
  144. }
  145. function pullUpAction () {
  146. page+=1;
  147. $.ajax({
  148. type: 'post',
  149. url: '../../swcontroller/dbsw.do',
  150. data:{uid:"402881e44e86c26d014e86c9ae8c0008",page:page,rows:rows,title:$("#title").val()},
  151. dataType: 'json',
  152. success: function(data){
  153. var result = '';
  154. for(var i = 0; i < data.length; i++){
  155. if(data[i].viewflag=="0"){
  156. result += '<li class="mui-table-view-cell mui-media" style="font-weight: bold;"><a onclick="window.open(\'info.html?hname=db&isDone=1&id='+data[i].id+'\')" href="javascript:void(0)" >'+
  157. '<div class="mui-media-body">'+data[i].title+
  158. '<p class="mui-ellipsis">当前环节:<span style="color:rgb(33, 150, 243);">'+data[i].status+'</span> 来文日期 :<span style="color:rgb(33, 150, 243);">'+todata(data[i].addDate)+'</span></p>'+
  159. '</div>'+
  160. '</a></li>';
  161. }else{
  162. result += '<li class="mui-table-view-cell mui-media"><a onclick="window.open(\'info.html?hname=db&isDone=1&id='+data[i].id+'\')" href="javascript:void(0)" >'+
  163. '<div class="mui-media-body">'+data[i].title+
  164. '<p class="mui-ellipsis">当前环节:<span style="color:rgb(33, 150, 243);">'+data[i].status+'</span> 来文日期 :<span style="color:rgb(33, 150, 243);">'+todata(data[i].addDate)+'</span></p>'+
  165. '</div>'+
  166. '</a></li>';
  167. }
  168. }
  169. $('.lists').append(result);
  170. if(data.length<rows){
  171. wcJZ();
  172. myScroll.refresh();
  173. }
  174. }})
  175. }
  176. function loaded() {
  177. pullDownEl = document.getElementById('pullDown');
  178. pullDownOffset = pullDownEl.offsetHeight;
  179. pullUpEl = document.getElementById('pullUp');
  180. pullUpOffset = pullUpEl.offsetHeight;
  181. myScroll = new iScroll('wrapper', {
  182. useTransition: true,
  183. topOffset: pullDownOffset,
  184. onRefresh: function () {
  185. if (pullDownEl.className.match('loading')) {
  186. pullDownEl.className = '';
  187. pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...';
  188. } else if (pullUpEl.className.match('loading')) {
  189. pullUpEl.className = '';
  190. pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多...';
  191. }
  192. },
  193. onScrollMove: function () {
  194. if (this.y > 5 && !pullDownEl.className.match('flip')) {
  195. pullDownEl.className = 'flip';
  196. pullDownEl.querySelector('.pullDownLabel').innerHTML = '松手刷新...';
  197. this.minScrollY = 0;
  198. } else if (this.y < 5 && pullDownEl.className.match('flip')) {
  199. pullDownEl.className = '';
  200. pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...';
  201. this.minScrollY = -pullDownOffset;
  202. } else if (this.y < (this.maxScrollY - 5) && !pullUpEl.className.match('flip')) {
  203. pullUpEl.className = 'flip';
  204. pullUpEl.querySelector('.pullUpLabel').innerHTML = '松手加载...';
  205. this.maxScrollY = this.maxScrollY;
  206. } else if (this.y > (this.maxScrollY + 5) && pullUpEl.className.match('flip')) {
  207. pullUpEl.className = '';
  208. pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多...';
  209. this.maxScrollY = pullUpOffset;
  210. }
  211. },
  212. onScrollEnd: function () {
  213. if (pullDownEl.className.match('flip')) {
  214. pullDownEl.className = 'loading';
  215. pullDownEl.querySelector('.pullDownLabel').innerHTML = '载入中...';
  216. pullDownAction(); // Execute custom function (ajax call?)
  217. } else if (pullUpEl.className.match('flip')) {
  218. pullUpEl.className = 'loading';
  219. pullUpEl.querySelector('.pullUpLabel').innerHTML = '载入中...';
  220. pullUpAction(); // Execute custom function (ajax call?)
  221. }
  222. }
  223. });
  224. setTimeout(function () { document.getElementById('wrapper').style.left = '0'; }, 800);
  225. }
  226. document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
  227. document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);
  228. </script>
  229. <style type="text/css" media="all">
  230. #header {
  231. position:absolute; z-index:2;
  232. top:0; left:0;
  233. width:100%;
  234. height:45px;
  235. line-height:45px;
  236. padding:0;
  237. color:#eee;
  238. font-size:22px;
  239. text-align:center;
  240. color:white;
  241. background: #2196f3;
  242. }
  243. #header a {
  244. color:white;
  245. text-decoration:none;
  246. }
  247. #wrapper {
  248. position:absolute; z-index:1;
  249. top:110px; bottom:0px; left:-9999px;
  250. width:100%;
  251. overflow:auto;
  252. }
  253. .sousuotiaojian{
  254. position: absolute;
  255. left:0px;
  256. margin:0px;
  257. top:45px;
  258. height:48px;
  259. line-height:48px;
  260. text-align: center
  261. ;padding-left: 5px;
  262. padding-right: 5px;
  263. position: relative;
  264. border: 1px solid gray;
  265. border-radius:5px;
  266. }
  267. #scroller {
  268. position:absolute; z-index:1;
  269. /* -webkit-touch-callout:none;*/
  270. -webkit-tap-highlight-color:rgba(0,0,0,0);
  271. width:100%;
  272. padding:0;
  273. }
  274. #myFrame {
  275. position:absolute;
  276. top:0; left:0;
  277. }
  278. /**
  279. *
  280. * Pull down styles
  281. *
  282. */
  283. #pullDown, #pullUp {
  284. background:#fff;
  285. height:45px;
  286. line-height:45px;
  287. font-weight:bold;
  288. font-size:14px;
  289. color:#888;
  290. padding-left: 50%;
  291. margin-left:-54.5px;
  292. }
  293. #pullDown .pullDownIcon, #pullUp .pullUpIcon {
  294. display:block; float:left;
  295. width:40px; height:40px;
  296. background:url(../images/pull-icon@2x.png) 0 0 no-repeat;
  297. -webkit-background-size:40px 80px; background-size:40px 80px;
  298. -webkit-transition-property:-webkit-transform;
  299. -webkit-transition-duration:250ms;
  300. }
  301. #pullDown .pullDownIcon {
  302. -webkit-transform:rotate(0deg) translateZ(0);
  303. }
  304. #pullUp .pullUpIcon {
  305. -webkit-transform:rotate(-180deg) translateZ(0);
  306. }
  307. #pullDown.flip .pullDownIcon {
  308. -webkit-transform:rotate(-180deg) translateZ(0);
  309. }
  310. #pullUp.flip .pullUpIcon {
  311. -webkit-transform:rotate(0deg) translateZ(0);
  312. }
  313. #pullDown.loading .pullDownIcon, #pullUp.loading .pullUpIcon {
  314. background-position:0 100%;
  315. -webkit-transform:rotate(0deg) translateZ(0);
  316. -webkit-transition-duration:0ms;
  317. -webkit-animation-name:loading;
  318. -webkit-animation-duration:2s;
  319. -webkit-animation-iteration-count:infinite;
  320. -webkit-animation-timing-function:linear;
  321. }
  322. @-webkit-keyframes loading {
  323. from { -webkit-transform:rotate(0deg) translateZ(0); }
  324. to { -webkit-transform:rotate(360deg) translateZ(0); }
  325. }
  326. ul,li{padding: 0px;margin: 0px;}
  327. </style>
  328. </head>
  329. <body>
  330. <div id="header"><a>待办收文</a></div>
  331. <div class="sousuotiaojian">
  332. <input id="title" value="" type="text" style="width: 100%;background: white;color: gray;border: 0px">
  333. <img id="sousuo" alt="" src="../images/search-icon.png" style="width: 26px;height: 26px;position: absolute;top: 10px;right: 10px">
  334. </div>
  335. <div id="wrapper">
  336. <div id="scroller">
  337. <div id="pullDown" >
  338. <div><span class="pullDownIcon"></span><span class="pullDownLabel">下拉刷新...</span></div>
  339. </div>
  340. <div id="mui-content">
  341. <ul id="thelist mui-table-view" class="lists">
  342. </ul>
  343. </div>
  344. <div id="pullUp">
  345. </div>
  346. </div>
  347. </div>
  348. </body>
  349. </html>