sex_trap_detail_list.html 7.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title></title>
  6. <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  7. <link href="../css/mui.min.css" rel="stylesheet" />
  8. <link href="../css/common.css" rel="stylesheet" />
  9. <link rel="stylesheet" href="../css/mescroll.min.css">
  10. <link rel="stylesheet" href="../css/reset.css">
  11. <link rel="stylesheet" href="../css/mobiscroll.custom-3.0.0-beta6.min.css">
  12. <link rel="stylesheet" type="text/css" href="../css/mui.picker.min.css" />
  13. <link rel="stylesheet" type="text/css" href="../css/timeLine.css"/>
  14. </head>
  15. <body>
  16. <header class="mui-bar mui-bar-nav">
  17. <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
  18. <h1 class="mui-title">性诱器列表</h1>
  19. </header>
  20. <div class="mui-content">
  21. <div class="faxSearchBox">
  22. <div class="mui-input-row mui-search">
  23. <div id="timeSelect">请选择时间段</div>
  24. <!--<input type="hidden" name="begin" id="begin" value="" />
  25. <input type="hidden" name="end" id="end" value="" />-->
  26. </div>
  27. <!--<div class="searchBtnBox">
  28. <span class="cutline">&nbsp;</span>
  29. <button id="searchBtn">搜索</button>
  30. </div>-->
  31. </div>
  32. <div id="scrollPlace" class="mescroll"> <!--id可以改,而"mescroll"的class不能删-->
  33. <ul id="dataList">
  34. <!--<li>
  35. <div class="equipItem blue">
  36. <div class="upl_time">2018-12-13 09:13:02</div>
  37. </div>
  38. </li>
  39. <li>
  40. <div class="equipItem purple">
  41. <div class="upl_time">2018-12-13 09:13:02</div>
  42. </div>
  43. </li>-->
  44. </ul>
  45. </div>
  46. <div class="calendarBox" style="display:none">
  47. <p>开始时间:<input id="start" placeholder="Please Select ..." readonly /></p>
  48. <p>结束时间:<input id="end" placeholder="Please Select ..." readonly /></p>
  49. </div>
  50. </div>
  51. <script src="../js/mui.min.js"></script>
  52. <script src="../js/jquery-2.1.0.js"></script>
  53. <script src="../js/common.js"></script>
  54. <script src="../js/mescroll.min.js" charset="utf-8"></script>
  55. <script src="../js/mobiscroll.custom-3.0.0-beta6.min.js" type="text/javascript" charset="utf-8"></script>
  56. <script src="../js/mui.picker.min.js"></script>
  57. <script type="text/javascript">
  58. var equipId;
  59. var begin = '',
  60. end = '',
  61. flag = 1;
  62. mui.init();
  63. var mescroll;
  64. document.addEventListener('plusready',function () {
  65. var self = plus.webview.currentWebview();
  66. equipId = self.equipId;
  67. //创建MeScroll对象,内部已默认开启下拉刷新,自动执行up.callback,重置列表数据;
  68. mescroll = new MeScroll("scrollPlace", {
  69. up: {
  70. callback: getListData, //上拉回调,此处可简写; 相当于 callback: function (page) { getListData(page); }
  71. isBounce: false, //此处禁止ios回弹,解析(务必认真阅读,特别是最后一点): http://www.mescroll.com/qa.html#q10
  72. clearEmptyId: "dataList", //1.下拉刷新时会自动先清空此列表,再加入数据; 2.无任何数据时会在此列表自动提示空
  73. toTop:{ //配置回到顶部按钮
  74. src : "../images/totop.png", //默认滚动到1000px显示,可配置offset修改
  75. offset : 700
  76. },
  77. empty: {
  78. //列表第一页无任何数据时,显示的空提示布局; 需配置warpId才显示
  79. warpId: "dataList", //父布局的id (1.3.5版本支持传入dom元素)
  80. icon: "../images/listNull.png", //图标,默认null,支持网络图
  81. tip: "暂无相关数据~" //提示
  82. },
  83. htmlNodata: '<p class="upwarp-nodata">-- 没有更多内容了 --</p>',
  84. noMoreSize: 5, //如果列表已无数据,可设置列表的总数量要大于5才显示无更多数据;
  85. lazyLoad: {
  86. use: true // 是否开启懒加载,默认false
  87. }
  88. }
  89. });
  90. },false);
  91. /*联网加载列表数据 page = {num:1, size:10}; num:当前页 从1开始, size:每页数据条数 */
  92. function getListData(page){
  93. //联网加载数据
  94. getListDataFromNet(page.num, page.size, function(curPageData,totalSize){
  95. //联网成功的回调,隐藏下拉刷新和上拉加载的状态;
  96. //mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;
  97. //方法二(推荐): 后台接口有返回列表的总数据量 totalSize
  98. mescroll.endSuccess(curPageData.length);
  99. //设置列表数据,因为配置了emptyClearId,第一页会清空dataList的数据,所以setListData应该写在最后;
  100. setListData(curPageData);
  101. }, function(){
  102. //联网失败的回调,隐藏下拉刷新和上拉加载的状态;
  103. mescroll.endErr();
  104. mui.toast('数据请求失败');
  105. });
  106. }
  107. /*设置列表数据*/
  108. function setListData(curPageData){
  109. var html = '';
  110. var dat = curPageData;
  111. for(var i = 0; i < dat.length; i++) {
  112. var className;
  113. if(i%2 == 0){
  114. className = 'blue';
  115. }else{
  116. className = 'purple';
  117. }
  118. html += '<li data-ybqData="'+dat[i].ybq_data+'" data-time="'+dat[i].upl_time+'">'+
  119. '<div class="equipItem '+className+'"><div class="upl_time">'+dat[i].upl_time+'</div></div></li>';
  120. }
  121. $('#dataList').append(html);
  122. }
  123. /*联网加载列表数据*/
  124. function getListDataFromNet(pageNum,pageSize,successCallback,errorCallback) {
  125. $.ajax({
  126. type: 'POST',
  127. url: 'http://120.27.222.26/app_reportmanage_detail',
  128. timeout : 10000, //超时时间设置,单位毫秒
  129. data:{
  130. 'etype': 'xycb',
  131. 'page': pageNum,
  132. 'equip_id': equipId,
  133. 'filter_begin':begin,
  134. 'filter_end':end
  135. },
  136. dataType: 'json',
  137. success: function(data){
  138. successCallback(data.dat,data.nums);
  139. },
  140. error: function(){
  141. errorCallback();
  142. console.log(11111)
  143. }
  144. });
  145. }
  146. //页面跳转
  147. mui('#dataList').on('tap', 'li', function() {
  148. var time = this.getAttribute('data-time');
  149. var ybq_data = this.getAttribute('data-ybqData');
  150. console.log(ybq_data)
  151. var stat = eval('(' + ybq_data + ')');
  152. console.log(stat.proj)
  153. if (stat.proj == 'SEX_TRAP_1') {
  154. mui.openWindow({
  155. url: 'sex_trap_detail_list_detail1.html',
  156. id: 'sex_trap_detail_list_detail',
  157. extras: {
  158. equipId: equipId,
  159. upl_time:time,
  160. ybq_data:ybq_data,
  161. }
  162. })
  163. } else if (stat.proj == 'SEX_TRAP_2') {
  164. mui.openWindow({
  165. url: 'sex_trap_detail_list_detail2.html',
  166. id: 'sex_trap_detail_list_detail',
  167. extras: {
  168. equipId: equipId,
  169. upl_time:time,
  170. ybq_data:ybq_data,
  171. }
  172. })
  173. }
  174. })
  175. //日历
  176. mobiscroll.settings = {
  177. theme: 'ios'
  178. ,lang: 'zh',
  179. };
  180. $('.mui-search').mobiscroll().range({
  181. startInput: '#start',
  182. endInput: '#end',
  183. onSet: function (event, inst) {
  184. begin = getYMDHMS(inst.getVal()[0]);
  185. end = getYMDHMS(inst.getVal()[1]);
  186. $('#timeSelect').html(getYMDHMS(inst.getVal()[0])+' '+getYMDHMS(inst.getVal()[1]))
  187. //请求图表数据:
  188. $('#dataList').html('');
  189. getListData({num:1, size:10})
  190. },
  191. });
  192. function getYMDHMS(time) {
  193. var time = new Date(time);
  194. var year = time.getFullYear(),
  195. month = time.getMonth() + 1,
  196. date = time.getDate();
  197. if (month < 10) { month = '0' + month; }
  198. if (date < 10) { date = '0' + date; }
  199. return year+'-'+ month+'-'+ date //不想
  200. }
  201. </script>
  202. </body>
  203. </html>