efficiencyDaibanList.html 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  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/OA-style.css" rel="stylesheet" />
  10. <link href="../../css/myxl.css" rel="stylesheet" />
  11. <style type="text/css">
  12. html,
  13. body {
  14. background-color: #efeff4;
  15. }
  16. .mui-segmented-control .mui-control-item.mui-active {
  17. background-color: #00c4cb;
  18. }
  19. .mui-segmented-control {
  20. border: 1px solid #00c4cb;
  21. }
  22. .mui-segmented-control .mui-control-item {
  23. border-left: 1px solid #00c4cb;
  24. color: #00C4CB;
  25. }
  26. .mui-bar~.mui-content .mui-fullscreen {
  27. top: 44px;
  28. height: auto;
  29. }
  30. .mui-pull-top-tips {
  31. position: absolute;
  32. top: -20px;
  33. left: 50%;
  34. margin-left: -25px;
  35. width: 40px;
  36. height: 40px;
  37. border-radius: 100%;
  38. z-index: 1;
  39. }
  40. .mui-bar~.mui-pull-top-tips {
  41. top: 24px;
  42. }
  43. .mui-pull-top-wrapper {
  44. width: 42px;
  45. height: 42px;
  46. display: block;
  47. text-align: center;
  48. background-color: #efeff4;
  49. border: 1px solid #ddd;
  50. border-radius: 25px;
  51. background-clip: padding-box;
  52. box-shadow: 0 4px 10px #bbb;
  53. overflow: hidden;
  54. }
  55. .mui-pull-top-tips.mui-transitioning {
  56. -webkit-transition-duration: 200ms;
  57. transition-duration: 200ms;
  58. }
  59. .mui-pull-top-tips .mui-pull-loading {
  60. /*-webkit-backface-visibility: hidden;
  61. -webkit-transition-duration: 400ms;
  62. transition-duration: 400ms;*/
  63. margin: 0;
  64. }
  65. .mui-pull-top-wrapper .mui-icon,
  66. .mui-pull-top-wrapper .mui-spinner {
  67. margin-top: 7px;
  68. }
  69. .mui-pull-top-wrapper .mui-icon.mui-reverse {
  70. /*-webkit-transform: rotate(180deg) translateZ(0);*/
  71. }
  72. .mui-pull-bottom-tips {
  73. text-align: center;
  74. background-color: #efeff4;
  75. font-size: 15px;
  76. line-height: 40px;
  77. color: #777;
  78. }
  79. .mui-pull-top-canvas {
  80. overflow: hidden;
  81. background-color: #fafafa;
  82. border-radius: 40px;
  83. box-shadow: 0 4px 10px #bbb;
  84. width: 40px;
  85. height: 40px;
  86. margin: 0 auto;
  87. }
  88. .mui-pull-top-canvas canvas {
  89. width: 40px;
  90. }
  91. .mui-slider-indicator.mui-segmented-control {
  92. background-color: #efeff4;
  93. }
  94. .mui-scroll1 {
  95. z-index: 1;
  96. width: 100%;
  97. }
  98. .mui-table-view-cell{padding: 8px 0px;}
  99. .mui-bar-nav {background: #00c4cb;}
  100. </style>
  101. </head>
  102. <body>
  103. <header class="mui-bar mui-bar-nav" id="login">
  104. <a class="mui-action-back back mui-pull-left"><img src="../../images/back.png"></a>
  105. <h1 class="mui-title">待办效率</h1>
  106. </header>
  107. <div class="mui-content">
  108. <div id="slider" class="mui-slider mui-fullscreen">
  109. <div style="padding: 10px 10px;">
  110. <div id="segmentedControl" class="mui-segmented-control">
  111. <div class="mui-scroll1">
  112. <a class="mui-control-item mui-active" href="#item1mobile" style="font-size: 16px;">未签收</a>
  113. <a class="mui-control-item" href="#item2mobile" style="font-size: 16px;">已签收</a>
  114. </div>
  115. </div>
  116. </div>
  117. <div class="mui-slider-group">
  118. <div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
  119. <div class="mui-scroll-wrapper">
  120. <div class="mui-scroll" id="pullrefresh">
  121. <ul class="mui-table-view" id="items1">
  122. <li class="mui-table-view-cell" :data-id="item.xiaolv_id" v-for="item in item1" @tap="open_detail(item)" style="margin: 0px 10px;">
  123. <!--<div class="list_gg_item mui-clearfix">
  124. <div class="mui-card-header tongzhi_title"><b>{{item.duban_name}}</b></div>
  125. <div class="mui-card-content">
  126. <div class="mui-card-content-inner">
  127. <div >
  128. <div class="tongzhi_div"><img class="tongzhi_img" src="../../images/dubanneirong.png" style="width: 15px;"></div>
  129. <div class="tongzhi_div2">{{item.content}}</div><p></p>
  130. <div class="tongzhi_div"><img class="tongzhi_img" src="../../images/dubanneirong.png" style="width: 15px;"></div>
  131. <div class="tongzhi_div2" v-html="item.huanji"></div><p></p>
  132. <span class="tongzhi_div"><img class="tongzhi_img" src="../../images/zhibanshijian.png"style="width: 15px;"></span>
  133. <span class="tongzhi_div1">{{item.duban_date}}至<font v-html="item.yujing_date"></font></span>
  134. </div>
  135. </div>
  136. </div>
  137. </div>-->
  138. <div class="dbxl_div" style="margin-bottom:0px !important; overflow: hidden;">
  139. <div><b>{{item.duban_name}}</b><span class="dbxl_span" v-html="item.huanji"></span></div>
  140. <div class="dbxl_div1" style="overflow: hidden;">
  141. <div class="dbxl_div2">
  142. <div class="dbxl_div_border"style="background-color: #EEEEEE;height:4px;border: #EEEEEE;"></div>
  143. <div class="dbxl_div_border2" ><center>
  144. <div class="dbxl_time1">{{item.duban_date}}</div>
  145. <div class="dbxl_time2"><font v-html="item.yujing_date"></font></div>
  146. </center></div>
  147. </div>
  148. <div class="dbxl_div3">
  149. <div class="dbxl_div_border" style="background-color: #EEEEEE;height:4px;border: #EEEEEE;">
  150. </div>
  151. <div class="dbxl_div_border2" style="overflow:hidden; text-overflow:ellipsis;display:-webkit-box; -webkit-box-orient:vertical;-webkit-line-clamp:3; text-indent: 1em; ">
  152. <div class="dbxl_center">{{item.content}}</div>
  153. </div>
  154. </div>
  155. </div>
  156. </div>
  157. </li>
  158. </ul>
  159. </div>
  160. </div>
  161. </div>
  162. <div id="item2mobile" class="mui-slider-item mui-control-content ">
  163. <div class="mui-scroll-wrapper">
  164. <div class="mui-scroll" id="pullrefresh2">
  165. <ul class="mui-table-view" id="items2">
  166. <li class="mui-table-view-cell" :data-id="item.xiaolv_id" v-for="item in item2" @tap="open_detail(item)">
  167. <!--<div class="list_gg_item mui-clearfix">
  168. <div class="mui-card-header tongzhi_title"><b>{{item.duban_name}}</b></div>
  169. <div class="mui-card-content">
  170. <div class="mui-card-content-inner">
  171. <div >
  172. <div class="tongzhi_div"><img class="tongzhi_img" src="../../images/dubanneirong.png" style="width: 15px;"></div>
  173. <div class="tongzhi_div2">{{item.content}}</div><p></p>
  174. <div class="tongzhi_div"><img class="tongzhi_img" src="../../images/dubanneirong.png" style="width: 15px;"></div>
  175. <div class="tongzhi_div2" v-html="item.huanji"></div><p></p>
  176. <span class="tongzhi_div"><img class="tongzhi_img" src="../../images/zhibanshijian.png"style="width: 15px;"></span>
  177. <span class="tongzhi_div1">{{item.duban_date}}至<font v-html="item.yujing_date"></font></span>
  178. </div>
  179. </div>
  180. </div>
  181. </div>-->
  182. <div class="dbxl_div" style="margin-bottom:0px !important; overflow: hidden;">
  183. <div><b>{{item.duban_name}}</b><span class="dbxl_span" v-html="item.huanji"></span></div>
  184. <div class="dbxl_div1" style="overflow: hidden;">
  185. <div class="dbxl_div2">
  186. <div class="dbxl_div_border" style="background-color: #EEEEEE;height:4px;border: #EEEEEE;"></div>
  187. <div class="dbxl_div_border2"><center>
  188. <div class="dbxl_time1">{{item.duban_date}}</div>
  189. <div class="dbxl_time2"><font v-html="item.yujing_date"></font></div>
  190. </center></div>
  191. </div>
  192. <div class="dbxl_div3">
  193. <div class="dbxl_div_border" style="background-color: #EEEEEE;height:4px;border: #EEEEEE;">
  194. </div>
  195. <div class="dbxl_div_border2" style="overflow:hidden; text-overflow:ellipsis;display:-webkit-box; -webkit-box-orient:vertical;-webkit-line-clamp:3; ">
  196. <div class="dbxl_center">{{item.content}}</div>
  197. </div>
  198. </div>
  199. </div>
  200. </div>
  201. </li>
  202. </ul>
  203. </div>
  204. </div>
  205. </div>
  206. </div>
  207. </div>
  208. </div>
  209. <script type="text/javascript" src="../../js/jquery-1.11.2.min.js"></script>
  210. <script src="../../js/mui.min.js"></script>
  211. <script src="../../js/config.js"></script>
  212. <script src="../../js/app.js"></script>
  213. <script src="../../js/vue.min.js"></script>
  214. <script src="../../js/mui.pullToRefresh.js"></script>
  215. <script src="../../js/mui.pullToRefresh.material.js"></script>
  216. <script>
  217. mui.init();
  218. var pageNo = 1;
  219. var pageNo2 = 1;
  220. var pageNo3 = 1;
  221. (function($) {
  222. //初始化单页的区域滚动
  223. mui('.mui-scroll-wrapper').scroll();
  224. //阻尼系数
  225. var deceleration = mui.os.ios ? 0.003 : 0.0009;
  226. $('.mui-scroll-wrapper').scroll({
  227. bounce: false,
  228. indicators: true, //是否显示滚动条
  229. deceleration: deceleration
  230. });
  231. mui.plusReady(function() {
  232. var self = plus.webview.currentWebview();
  233. id = self.xiaolv_id;
  234. $.each(document.querySelectorAll('.mui-slider-group .mui-scroll'), function(index, pullRefreshEl) {
  235. $(pullRefreshEl).pullToRefresh({
  236. //container: '.list_item',
  237. down: {
  238. // style: 'circle', //必选,下拉刷新样式,目前支持原生5+ ‘circle’ 样式
  239. // color: '#2BD009', //可选,默认“#2BD009” 下拉刷新控件颜色
  240. // height: '50px', //可选,默认50px.下拉刷新控件的高度,
  241. // range: '100px', //可选 默认100px,控件可下拉拖拽的范围
  242. // offset: '0px', //可选 默认0px,下拉刷新控件的起始位置
  243. // auto: true, //可选,默认false.首次加载自动上拉刷新一次
  244. callback: function() {
  245. var self = this;
  246. setTimeout(function() {
  247. var ul = self.element.querySelector('.mui-table-view');
  248. reloadNews(ul, self);
  249. self.endPullDownToRefresh();
  250. }, 1000); //必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据;
  251. }
  252. },
  253. up: {
  254. contentrefresh: '正在加载...',
  255. auto: true, //可选,默认false.自动上拉加载一次
  256. callback: function() {
  257. var self = this;
  258. setTimeout(function() {
  259. var ul = self.element.querySelector('.mui-table-view');
  260. console.log(pullRefreshEl.id);
  261. pullupRefresh(ul, self);
  262. self.endPullUpToRefresh();
  263. }, 1000);
  264. }
  265. }
  266. });
  267. //statusBarBackground: '#FFFFFF', //设置状态栏颜色,仅iOS可用
  268. // preloadLimit:5,
  269. });
  270. });
  271. })(mui);
  272. var vmA = new Vue({
  273. el: '#pullrefresh',
  274. data: {
  275. item1: [] //列表信息流数据
  276. }
  277. });
  278. var vmB = new Vue({
  279. el: '#items2',
  280. data: {
  281. item2: [] //列表信息流数据
  282. }
  283. });
  284. /**
  285. * 下拉刷新具体业务实现
  286. */
  287. function reloadNews(ul,self) {
  288. /*vmA.item1 = [];
  289. addData();*/
  290. var dataType = self.element.id;
  291. if("pullrefresh" == dataType) {
  292. pageNo = 1;
  293. vmA.item1 = [];
  294. addData(ul, self);
  295. } else if("pullrefresh2" == dataType) {
  296. pageNo2 = 1;
  297. vmB.item2 = [];
  298. addData2(ul, self);
  299. }
  300. }
  301. /**
  302. * 上拉加载具体业务实现
  303. */
  304. function pullupRefresh(ul, self) {
  305. var dataType = self.element.id;
  306. if("pullrefresh" == dataType) {
  307. addData(ul, self);
  308. } else if("pullrefresh2" == dataType) {
  309. addData2(ul, self);
  310. }
  311. }
  312. function addData(ul, self) {
  313. var state3= mui('#state');//状态显示
  314. var url = API.API_URL();
  315. var serviceId = "oa_efficiency_2018V0010PHONE003";
  316. var state = app.getState(); //获取登陆信息
  317. var userId = state.user.useId;
  318. var state2 = "0"; //督办状态
  319. var obj = {
  320. currentUser: userId,
  321. pSize: APP.PageSize,
  322. p: pageNo,
  323. state:state2
  324. };
  325. app.ajax(serviceId,obj, function(data) {
  326. //服务器返回响应
  327. console.log(JSON.stringify(data))
  328. var result = data.returnParams;
  329. var totalRow = data.total;
  330. //var totalPage = data.current;
  331. var totalPage = Math.ceil(totalRow / APP.PageSize);
  332. console.log("=====总页数=====" + totalPage);
  333. var list = data.list;
  334. console.log(list.length);
  335. if(list.length > 0) {
  336. vmA.item1 = vmA.item1.concat(convert(list));
  337. }
  338. if(totalPage==0||totalPage==1){
  339. self.endPullUpToRefresh(true);
  340. }else{
  341. self.endPullUpToRefresh(totalPage == pageNo);//参数为true代表没有更多数据了。
  342. }
  343. if(pageNo == 1 && totalPage > 1)
  344. self.refresh(true); //调用.refresh(true)方法,可重置上拉加载控件,注意:refresh()中需传入true
  345. pageNo = pageNo + 1;
  346. });
  347. }
  348. function addData2(ul, self) {
  349. var url = API.API_URL();
  350. var serviceId = "oa_efficiency_2018V0010PHONE003";
  351. var state = app.getState(); //获取登陆信息
  352. var userId = state.user.useId;
  353. var state2 = "1"; //督办状态
  354. var obj = {
  355. currentUser: userId,
  356. pSize: APP.PageSize,
  357. p: pageNo2,
  358. state:state2
  359. };
  360. app.ajax(serviceId,obj, function(data) {
  361. //服务器返回响应
  362. console.log(JSON.stringify(data))
  363. var result = data.returnParams;
  364. var totalRow = data.total;
  365. //var totalPage = data.current;
  366. var totalPage = Math.ceil(totalRow / APP.PageSize);
  367. console.log("=====总页数=====" + totalPage);
  368. var list = data.list;
  369. if(totalPage == 0) {
  370. totalPage = 1;
  371. }
  372. console.log(list.length);
  373. if(list.length > 0) {
  374. vmB.item2 = vmB.item2.concat(convert(list));
  375. }
  376. if(totalPage==0||totalPage==1){
  377. self.endPullUpToRefresh(true);
  378. }else{
  379. self.endPullUpToRefresh(totalPage == pageNo);//参数为true代表没有更多数据了。
  380. }
  381. if(pageNo2 == 1 && totalPage > 1)
  382. self.refresh(true); //调用.refresh(true)方法,可重置上拉加载控件,注意:refresh()中需传入true
  383. pageNo2 = pageNo2 + 1;
  384. });
  385. }
  386. /**
  387. * 1、将服务端返回数据,转换成前端需要的格式
  388. * 2、若服务端返回格式和前端所需格式相同,则不需要改功能
  389. *
  390. * @param {Array} item1
  391. */
  392. function convert(items) {
  393. var newItems = [];
  394. var state2 = "";
  395. items.forEach(function(item) {
  396. var date = item.yujing_date;
  397. var yujing = new Date(Date.parse(date .replace(/-/g,"/")));
  398. if(new Date() > yujing || new Date() == yujing) {
  399. yujing_date='<font color="red">'+date+'</font>';
  400. } else if (new Date(new Date().getTime() + 3*24*60*60*1000)> yujing || new Date(new Date().getTime() + 3*24*60*60*1000) == yujing) {
  401. yujing_date='<font color="#f60">'+date+'</font>';
  402. } else {
  403. yujing_date='<font color="#008000">'+date+'</font>';
  404. }
  405. var huanji = item.huanji;
  406. if("1"==huanji) {
  407. huanji = '<font color="#008000">普通</font>';
  408. }
  409. if("2"==huanji) {
  410. huanji = '<font color="#f60">紧急</font>';
  411. }
  412. if("3"==huanji) {
  413. huanji = '<font color="red">特急</font>';
  414. }
  415. newItems.push({
  416. xiaolv_id: item.xiaolv_id,
  417. duban_name:item.duban_name,
  418. title: item.duban_name,
  419. duban_date:item.duban_date,
  420. yujing_date:yujing_date,
  421. fankui_id:item.fankui_id,
  422. state:state2,
  423. huanji:huanji,
  424. states:item.states,
  425. content: item.content == null ? "" : item.content.substr(0, 60)
  426. });
  427. });
  428. return newItems;
  429. }
  430. /**
  431. * 打开督办详情
  432. *
  433. * @param {Object} item 当前点击的督办对象
  434. */
  435. function open_detail(item) {
  436. if("0"==item.states) {
  437. mui.openWindow({
  438. url: '../../page/efficiency/efficiencySignInfo.html',
  439. id: 'efficiencySignInfo.html',
  440. extras:{'xiaolv_id':item.xiaolv_id,'fankui_id':item.fankui_id}
  441. })
  442. } else {
  443. mui.openWindow({
  444. url: '../../page/efficiency/efficiencyFeedbackInfo.html',
  445. id: 'efficiencyFeedbackInfo.html',
  446. extras:{'xiaolv_id':item.xiaolv_id,'fankui_id':item.fankui_id}
  447. })
  448. }
  449. }
  450. </script>
  451. </body>
  452. </html>