商丘12345 前端

Work-yijian.html 13KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Hello MUI</title>
  6. <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
  7. <meta name="apple-mobile-web-app-capable" content="yes">
  8. <meta name="apple-mobile-web-app-status-bar-style" content="black">
  9. <link rel="stylesheet" href="../css/mui.min.css">
  10. <style>
  11. html,
  12. body {
  13. background-color: #efeff4;
  14. }
  15. .mui-bar~.mui-content .mui-fullscreen {
  16. top: 44px;
  17. height: auto;
  18. }
  19. .mui-pull-top-tips {
  20. position: absolute;
  21. top: -20px;
  22. left: 50%;
  23. margin-left: -25px;
  24. width: 40px;
  25. height: 40px;
  26. border-radius: 100%;
  27. z-index: 1;
  28. }
  29. .mui-bar~.mui-pull-top-tips {
  30. top: 24px;
  31. }
  32. .mui-pull-top-wrapper {
  33. width: 42px;
  34. height: 42px;
  35. display: block;
  36. text-align: center;
  37. background-color: #efeff4;
  38. border: 1px solid #ddd;
  39. border-radius: 25px;
  40. background-clip: padding-box;
  41. box-shadow: 0 4px 10px #bbb;
  42. overflow: hidden;
  43. }
  44. .mui-pull-top-tips.mui-transitioning {
  45. -webkit-transition-duration: 200ms;
  46. transition-duration: 200ms;
  47. }
  48. .mui-pull-top-tips .mui-pull-loading {
  49. /*-webkit-backface-visibility: hidden;
  50. -webkit-transition-duration: 400ms;
  51. transition-duration: 400ms;*/
  52. margin: 0;
  53. }
  54. .mui-pull-top-wrapper .mui-icon,
  55. .mui-pull-top-wrapper .mui-spinner {
  56. margin-top: 7px;
  57. }
  58. .mui-pull-top-wrapper .mui-icon.mui-reverse {
  59. /*-webkit-transform: rotate(180deg) translateZ(0);*/
  60. }
  61. .mui-pull-bottom-tips {
  62. text-align: center;
  63. background-color: #efeff4;
  64. font-size: 15px;
  65. line-height: 40px;
  66. color: #777;
  67. }
  68. .mui-pull-top-canvas {
  69. overflow: hidden;
  70. background-color: #fafafa;
  71. border-radius: 40px;
  72. box-shadow: 0 4px 10px #bbb;
  73. width: 40px;
  74. height: 40px;
  75. margin: 0 auto;
  76. }
  77. .mui-pull-top-canvas canvas {
  78. width: 40px;
  79. }
  80. .mui-slider-indicator.mui-segmented-control {
  81. background-color: #efeff4;
  82. }
  83. .time{
  84. /*text-align: right;*/
  85. }
  86. .mui-bar-nav {
  87. background-color: #00a1cb;
  88. }
  89. .mui-title{
  90. color: #fff;
  91. }
  92. </style>
  93. </head>
  94. <body>
  95. <header class="mui-bar mui-bar-nav">
  96. <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: #fff;"></a>
  97. <h1 class="mui-title">意见详情</h1>
  98. </header>
  99. <div class="mui-content">
  100. <div id="slider" class="mui-slider mui-fullscreen">
  101. <div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
  102. <div class="mui-scroll">
  103. <a class="mui-control-item mui-active" href="#item1mobile">
  104. 交办信息
  105. </a>
  106. <a class="mui-control-item" href="#item2mobile">
  107. 监察意见
  108. </a>
  109. <a class="mui-control-item" href="#item3mobile">
  110. 领导批示
  111. </a>
  112. <a class="mui-control-item" href="#item4mobile">
  113. 办理情况
  114. </a>
  115. <a class="mui-control-item" href="#item5mobile">
  116. 延时审核
  117. </a>
  118. <a class="mui-control-item" href="#item6mobile">
  119. 退回审核
  120. </a>
  121. <a class="mui-control-item" href="#item7mobile">
  122. 回访信息
  123. </a>
  124. <a class="mui-control-item" href="#item8mobile">
  125. 督办信息
  126. </a>
  127. </div>
  128. </div>
  129. <div class="mui-slider-group">
  130. <div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
  131. <div id="scroll1" class="mui-scroll-wrapper">
  132. <div class="mui-scroll">
  133. <!--交办-->
  134. <ul class="mui-table-view JBXX" >
  135. <li class="mui-table-view-cell mui-media">
  136. <div class="mui-media-body">
  137. <p></p>
  138. <p class="time"><span>调度</span></p>
  139. <p class="time"><span>对对对</span></p>
  140. </div>
  141. </li>
  142. </ul>
  143. </div>
  144. </div>
  145. </div>
  146. <div id="item2mobile" class="mui-slider-item mui-control-content">
  147. <div class="mui-scroll-wrapper">
  148. <div class="mui-scroll">
  149. <!--监察-->
  150. <ul class="mui-table-view JC">
  151. </ul>
  152. </div>
  153. </div>
  154. </div>
  155. <div id="item3mobile" class="mui-slider-item mui-control-content">
  156. <div class="mui-scroll-wrapper">
  157. <div class="mui-scroll">
  158. <!--/领导批示-->
  159. <ul class="mui-table-view LDPS">
  160. </ul>
  161. </div>
  162. </div>
  163. </div>
  164. <div id="item4mobile" class="mui-slider-item mui-control-content">
  165. <div class="mui-scroll-wrapper">
  166. <div class="mui-scroll ">
  167. <!--办理过程-->
  168. <ul class="mui-table-view BLGC">
  169. </ul>
  170. </div>
  171. </div>
  172. </div>
  173. <div id="item5mobile" class="mui-slider-item mui-control-content">
  174. <div class="mui-scroll-wrapper">
  175. <div class="mui-scroll">
  176. <!--延时审核-->
  177. <ul class="mui-table-view YSSHS">
  178. </ul>
  179. </div>
  180. </div>
  181. </div>
  182. <div id="item6mobile" class="mui-slider-item mui-control-content">
  183. <div class="mui-scroll-wrapper">
  184. <div class="mui-scroll">
  185. <!--退回审核-->
  186. <ul class="mui-table-view YTHHS">
  187. </ul>
  188. </div>
  189. </div>
  190. </div>
  191. <div id="item7mobile" class="mui-slider-item mui-control-content">
  192. <div class="mui-scroll-wrapper">
  193. <div class="mui-scroll">
  194. <!--回访信息-->
  195. <ul class="mui-table-view HGXX">
  196. </ul>
  197. </div>
  198. </div>
  199. </div>
  200. <div id="item8mobile" class="mui-slider-item mui-control-content">
  201. <div class="mui-scroll-wrapper">
  202. <div class="mui-scroll">
  203. <!--回访信息-->
  204. <ul class="mui-table-view DBXX">
  205. </ul>
  206. </div>
  207. </div>
  208. </div>
  209. </div>
  210. </div>
  211. </div>
  212. <script src="../js/mui.min.js"></script>
  213. <script src="../js/zepto.js"></script>
  214. <script src="../js/huayi.config.js"></script>
  215. <script src="../js/mui.pullToRefresh.js"></script>
  216. <script src="../js/mui.pullToRefresh.material.js"></script>
  217. <script>
  218. mui.init();
  219. mui.plusReady(function(){
  220. var wv = plus.webview.currentWebview();
  221. var vText = wv.name;
  222. var token = wv.token;
  223. console.log(vText);
  224. mui.ajax(huayi.config.callcenter_url + 'WorkOrder/GetWorkOrder', {
  225. data: {
  226. workorderid: vText,
  227. token: localStorage.getItem("token"),
  228. },
  229. dataType: 'json', //服务器返回json格式数据
  230. type: 'get', //HTTP请求类型
  231. timeout: 10000, //超时时间设置为10秒;
  232. headers: {
  233. 'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8'
  234. },
  235. success: function(result) {
  236. //交办信息
  237. var jbxx = '';
  238. $(".JBXX").empty();
  239. $(result.data.jbdata).each(function(i, n) {
  240. var time = n.F_LimitTime.substring(0, n.F_LimitTime.indexOf(' '));
  241. jbxx +='<li class="mui-table-view-cell mui-media">' +
  242. '<div class="mui-media-body">' +
  243. '<p>交办信息:' + n.F_AssignedOpinion + '</p>' +
  244. '<p class="time">交办单位:'+n.DeptName+'</p>' +
  245. '<p class="time">办理时间:'+ time+'</p>' +
  246. '</div>' +
  247. '</li>';
  248. });
  249. $(jbxx).appendTo($(".JBXX"));
  250. //监察
  251. var html_ = '';
  252. $(".JC").empty();
  253. $(result.data.jcdata).each(function(i, n) {
  254. html_ += '<li class="mui-table-view-cell mui-media">' +
  255. '<div class="mui-media-body">' +
  256. '<p>监察意见:' + n.F_Content+ '</p>' +
  257. '<p class="time">监察人:'+n.UserName+'</p>' +
  258. '</div>' +
  259. '</li>';
  260. });
  261. $(html_).appendTo($(".JC"));
  262. //领导批示
  263. $(".LDPS").empty();
  264. $(result.data.psdata).each(function(i, n) {
  265. var str= '<li class="mui-table-view-cell mui-media">' +
  266. '<div class="mui-media-body">' +
  267. '<p>批示内容:' + n.F_SuperOpinion+ '</p>' +
  268. '<p class="time">批示人:'+n.F_BatchReason+'</p>' +
  269. '</div>' +
  270. '</li>';
  271. $(str).appendTo($(".LDPS"));
  272. })
  273. //办理情况
  274. $(".BLGC").empty();
  275. $(result.data.bldata).each(function(i, n) {
  276. var html= '<li class="mui-table-view-cell mui-media">' +
  277. '<div class="mui-media-body">' +
  278. '<p>办理内容:' + n.F_Result+ '</p>' +
  279. '<p class="time">办理单位:'+n.DeptName+'</p>' +
  280. '</div>' +
  281. '</li>';
  282. $(html).appendTo($(".BLGC"));
  283. })
  284. //延时审核
  285. var Ysh = '';
  286. $(".YSSHS").empty();
  287. $(result.data.ysdata).each(function(i, n) {
  288. if (n.F_AuditReason == null) {
  289. shenhe = "";
  290. $(".YSSHS").hide()
  291. } else{
  292. shenhe =n.F_RefuseReason
  293. }
  294. if (n.F_AuditTime == null) {
  295. shenhe11 = "";
  296. } else{
  297. shenhe11 =n.F_AuditTime
  298. }
  299. Ysh += '<li class="mui-table-view-cell mui-media">' +
  300. '<div class="mui-media-body">' +
  301. '<p>审核意见:' + n.F_RefuseReason+ '</p>' +
  302. '<p class="time">审核时间:'+n.F_AgreeTime+'</p>' +
  303. '</div>' +
  304. '</li>';
  305. })
  306. $(Ysh).appendTo($(".YSSHS"));
  307. //退回审核
  308. var Ths='';
  309. $(".YTHHS").empty();
  310. $(result.data.thdata).each(function(i, n) {
  311. if (n.F_AuditReason == null) {
  312. Agree = "";
  313. } else{
  314. Agree =n.F_AuditReason
  315. }
  316. if (n.F_AuditTime == null) {
  317. Agree11 = "";
  318. } else{
  319. Agree11 =n.F_AuditTime
  320. }
  321. Ths+= '<li class="mui-table-view-cell mui-media">' +
  322. '<div class="mui-media-body">' +
  323. '<p>审核意见:' +Agree+ '</p>' +
  324. '<p class="time">审核时间:'+Agree11+'</p>' +
  325. '</div>' +
  326. '</li>';
  327. })
  328. $(Ths).appendTo($(".YTHHS"));
  329. //回访信息
  330. var htmlss = '';
  331. $(".HGXX").empty();
  332. $(result.data.hfdata).each(function(i, n) {
  333. alert()
  334. var a;
  335. if(n.F_IsSatisfie == 0) {
  336. a = "不满意";
  337. } else {
  338. a = "满意";
  339. }
  340. htmlss+= '<li class="mui-table-view-cell mui-media">' +
  341. '<div class="mui-media-body">' +
  342. '<p>回访内容:' +n.F_Result+ '</p>' +
  343. '<p class="time">回访结果:'+a+'</p>' +
  344. '</div>' +
  345. '</li>';
  346. })
  347. $(htmlss).appendTo($(".HGXX"));
  348. //督办信息
  349. var htmlsss = '';
  350. $(".DBXX").empty();
  351. $(result.data.dbdata).each(function(i, n) {
  352. htmlsss+= '<li class="mui-table-view-cell mui-media">' +
  353. '<div class="mui-media-body">' +
  354. '<p>督办内容:' +n.F_Content+ '</p>' +
  355. '<p class="time">督办时间:'+n.F_CreateTime+'</p>' +
  356. '</div>' +
  357. '</li>';
  358. })
  359. $(htmlsss).appendTo($(".DBXX"));
  360. },
  361. error: function(xhr, type, errorThrown) {
  362. //异常处理;
  363. }
  364. })
  365. });
  366. (function($) {
  367. //阻尼系数
  368. var deceleration = mui.os.ios ? 0.003 : 0.0009;
  369. $('.mui-scroll-wrapper').scroll({
  370. bounce: false,
  371. indicators: true, //是否显示滚动条
  372. deceleration: deceleration
  373. });
  374. // $.ready(function() {
  375. // //循环初始化所有下拉刷新,上拉加载。
  376. // $.each(document.querySelectorAll('.mui-slider-group .mui-scroll'), function(index, pullRefreshEl) {
  377. // $(pullRefreshEl).pullToRefresh({
  378. // down: {
  379. // callback: function() {
  380. // var self = this;
  381. // setTimeout(function() {
  382. // var ul = self.element.querySelector('.mui-table-view');
  383. // ul.insertBefore(createFragment(ul, index, 10, true), ul.firstChild);
  384. // self.endPullDownToRefresh();
  385. // }, 1000);
  386. // }
  387. // },
  388. // up: {
  389. // callback: function() {
  390. // var self = this;
  391. // setTimeout(function() {
  392. // var ul = self.element.querySelector('.mui-table-view');
  393. // ul.appendChild(createFragment(ul, index, 5));
  394. // self.endPullUpToRefresh();
  395. // }, 1000);
  396. // }
  397. // }
  398. // });
  399. // });
  400. // var createFragment = function(ul, index, count, reverse) {
  401. // var length = ul.querySelectorAll('li').length;
  402. // var fragment = document.createDocumentFragment();
  403. // var li;
  404. // for (var i = 0; i < count; i++) {
  405. // li = document.createElement('li');
  406. // li.className = 'mui-table-view-cell';
  407. // li.innerHTML = '第' + (index + 1) + '个选项卡子项-' + (length + (reverse ? (count - i) : (i + 1)));
  408. // fragment.appendChild(li);
  409. // }
  410. // return fragment;
  411. // };
  412. // });
  413. })(mui);
  414. </script>
  415. </body>
  416. </html>