虞城12345_前端

Work-shenhebf.html 14KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514
  1. <!doctype html>
  2. <html lang="en" class="feedback">
  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. <title>办理工单</title>
  7. <link rel="stylesheet" type="text/css" href="../css/mui.min.css" />
  8. <link rel="stylesheet" href="../css/inits.css" />
  9. <style>
  10. body {
  11. background: #F6F6F6;
  12. }
  13. p {
  14. font-size: 16px;
  15. color: #fe6604;
  16. }
  17. .mui-bar-nav {
  18. background-color: #00a1cb;
  19. color: #fff!important;
  20. }
  21. .Servelist {
  22. line-height: 30px;
  23. /*border-bottom: 1px solid #e9e9e9;*/
  24. color: #282828;
  25. }
  26. .evaluate-center {
  27. background-color: #fff;
  28. padding-top: 5px;
  29. padding-left: 15px;
  30. box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.4);
  31. }
  32. .mui-table-view-cell:after {
  33. height: 0px;
  34. }
  35. .mui-table-cell label {
  36. color: #909090;
  37. }
  38. .Workdeail {
  39. font-size: 14px;
  40. }
  41. .Workdeail_1{
  42. padding-bottom:10px;
  43. }
  44. .Workdeail_1 .mui-table-view-cell {
  45. padding: 5px 15px 0px 15px;
  46. font-size: 14px;
  47. }
  48. .Workdeail_1 .mui-table-view-cell .mui-table-cell span {
  49. color: #909090;
  50. }
  51. .submit{
  52. position: fixed;
  53. bottom: 0px;
  54. margin-bottom: 0px;
  55. z-index: 3;
  56. display: none;
  57. }
  58. .sub{
  59. position: fixed;
  60. bottom: 0px;
  61. margin-bottom: 0px;
  62. z-index: 3;
  63. }
  64. .submit_div{
  65. position: fixed;
  66. bottom: 0px;
  67. height: 285px;
  68. background: #FFFFFF;
  69. width: 100%;
  70. display: none;
  71. z-index: 3;
  72. font-size: 14px;
  73. }
  74. .bj_body{
  75. position: fixed;
  76. top: 0;
  77. left: 0;
  78. width: 100%;
  79. height: 100%;
  80. background: #000000;
  81. filter:alpha(opacity=50);
  82. -moz-opacity:0.5;
  83. -khtml-opacity: 0.5;
  84. opacity: 0.5;
  85. z-index: 1;
  86. display: none;
  87. }
  88. .delete_iocn{
  89. color: #00b4ff;
  90. position: absolute;
  91. right: 10px;
  92. top: 10px;
  93. font-size: 20px;
  94. }
  95. .btn_agree{
  96. text-align: center;
  97. width: 80%;
  98. margin: 10px 10%;
  99. height: 30px;
  100. line-height: 4px !important;
  101. border: 1px solid #007aff;
  102. color: #FFFFFF;
  103. -moz-border-radius: 15px; /* Firefox */
  104. -webkit-border-radius: 15px; /* Safari 和 Chrome */
  105. border-radius: 15px; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */
  106. }
  107. .btn_unagree{
  108. text-align: center;
  109. width: 80%;
  110. margin: 10px 10%;
  111. height: 30px;
  112. line-height: 4px !important;
  113. border: 1px solid #007aff;
  114. color: #FFFFFF;
  115. -moz-border-radius: 15px; /* Firefox */
  116. -webkit-border-radius: 15px; /* Safari 和 Chrome */
  117. border-radius: 15px; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */
  118. }
  119. .ztext{
  120. /*border: 1px solid #CCCCCC;*/
  121. border: none;
  122. }
  123. .text_bor{
  124. border-top:1px solid #CCCCCC ;
  125. border-bottom: 1px solid #CCCCCC;
  126. width: 100%;
  127. margin: 0;
  128. padding: 0;
  129. }
  130. .size-14{
  131. font-size: 14px;
  132. }
  133. .img-box {
  134. float: left;
  135. width: 20%;
  136. height:60px;
  137. margin: 2%;
  138. text-align: center;
  139. }
  140. .img-box img{
  141. width: 100%;
  142. height: 100%;
  143. }
  144. .image-list {
  145. display: none;
  146. overflow: hidden;
  147. }
  148. .mui-preview-image.mui-fullscreen {
  149. position: fixed;
  150. z-index: 20;
  151. background-color: #000;
  152. }
  153. .mui-preview-header,
  154. .mui-preview-footer {
  155. position: absolute;
  156. width: 100%;
  157. left: 0;
  158. z-index: 10;
  159. }
  160. .mui-preview-header {
  161. height: 44px;
  162. top: 0;
  163. }
  164. .mui-preview-footer {
  165. height: 50px;
  166. bottom: 0px;
  167. }
  168. .mui-preview-header .mui-preview-indicator {
  169. display: block;
  170. line-height: 25px;
  171. color: #fff;
  172. text-align: center;
  173. margin: 15px auto 4;
  174. width: 70px;
  175. background-color: rgba(0, 0, 0, 0.4);
  176. border-radius: 12px;
  177. font-size: 16px;
  178. }
  179. .mui-preview-image {
  180. display: none;
  181. -webkit-animation-duration: 0.5s;
  182. animation-duration: 0.5s;
  183. -webkit-animation-fill-mode: both;
  184. animation-fill-mode: both;
  185. }
  186. .mui-preview-image.mui-preview-in {
  187. -webkit-animation-name: fadeIn;
  188. animation-name: fadeIn;
  189. }
  190. .mui-preview-image.mui-preview-out {
  191. background: none;
  192. -webkit-animation-name: fadeOut;
  193. animation-name: fadeOut;
  194. }
  195. .mui-preview-image.mui-preview-out .mui-preview-header,
  196. .mui-preview-image.mui-preview-out .mui-preview-footer {
  197. display: none;
  198. }
  199. .mui-zoom-scroller {
  200. position: absolute;
  201. display: -webkit-box;
  202. display: -webkit-flex;
  203. display: flex;
  204. -webkit-box-align: center;
  205. -webkit-align-items: center;
  206. align-items: center;
  207. -webkit-box-pack: center;
  208. -webkit-justify-content: center;
  209. justify-content: center;
  210. left: 0;
  211. right: 0;
  212. bottom: 0;
  213. top: 0;
  214. width: 100%;
  215. height: 100%;
  216. margin: 0;
  217. -webkit-backface-visibility: hidden;
  218. }
  219. .mui-zoom {
  220. -webkit-transform-style: preserve-3d;
  221. transform-style: preserve-3d;
  222. }
  223. .mui-slider .mui-slider-group .mui-slider-item img {
  224. width: auto;
  225. height: auto;
  226. max-width: 100%;
  227. max-height: 100%;
  228. }
  229. .mui-android-4-1 .mui-slider .mui-slider-group .mui-slider-item img {
  230. width: 100%;
  231. }
  232. .mui-android-4-1 .mui-slider.mui-preview-image .mui-slider-group .mui-slider-item {
  233. display: inline-table;
  234. }
  235. .mui-android-4-1 .mui-slider.mui-preview-image .mui-zoom-scroller img {
  236. display: table-cell;
  237. vertical-align: middle;
  238. }
  239. .mui-preview-loading {
  240. position: absolute;
  241. width: 100%;
  242. height: 100%;
  243. top: 0;
  244. left: 0;
  245. display: none;
  246. }
  247. .mui-preview-loading.mui-active {
  248. display: block;
  249. }
  250. .mui-preview-loading .mui-spinner-white {
  251. position: absolute;
  252. top: 50%;
  253. left: 50%;
  254. margin-left: -25px;
  255. margin-top: -25px;
  256. height: 50px;
  257. width: 50px;
  258. }
  259. .mui-preview-image img.mui-transitioning {
  260. -webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease;
  261. transition: transform 0.5s ease, opacity 0.5s ease;
  262. }
  263. @-webkit-keyframes fadeIn {
  264. 0% {
  265. opacity: 0;
  266. }
  267. 100% {
  268. opacity: 1;
  269. }
  270. }
  271. @keyframes fadeIn {
  272. 0% {
  273. opacity: 0;
  274. }
  275. 100% {
  276. opacity: 1;
  277. }
  278. }
  279. @-webkit-keyframes fadeOut {
  280. 0% {
  281. opacity: 1;
  282. }
  283. 100% {
  284. opacity: 0;
  285. }
  286. }
  287. @keyframes fadeOut {
  288. 0% {
  289. opacity: 1;
  290. }
  291. 100% {
  292. opacity: 0;
  293. }
  294. }
  295. p img {
  296. max-width: 100%;
  297. height: auto;
  298. }
  299. </style>
  300. </head>
  301. <body>
  302. <header class="mui-bar mui-bar-nav" style="">
  303. <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: #fff;"></a>
  304. <h1 class="mui-title" style="color: #fff;">处理审核</h1>
  305. </header>
  306. <div class="mui-content">
  307. <!--基本信息-->
  308. <div class="evaluate-center">
  309. <h5 class='mui-h5 Servelist'>
  310. <span style="font-size: 16px;">办理信息</span>
  311. </h5>
  312. <div class="ServeContent">
  313. <div class="Workdeail BLNR">
  314. <!--<ul class="mui-table-view ">
  315. <li class="mui-table-view-cell">
  316. <div class="mui-table">
  317. <div class="mui-table-cell mui-col-xs-4 ">
  318. <label class="label">:</label>
  319. </div>
  320. <div class="mui-table-cell mui-col-xs-8 Mf">
  321. <span class="ND_deail" id="ND_name">消防水泵</span>
  322. </div>
  323. </div>
  324. </li>
  325. <li class="mui-table-view-cell">
  326. <div class="mui-table">
  327. <div class="mui-table-cell mui-col-xs-4 ">
  328. <label class="label">设备名称:</label>
  329. </div>
  330. <div class="mui-table-cell mui-col-xs-8 Mf">
  331. <span class="ND_deail" id="ND_name">消防水泵</span>
  332. </div>
  333. </div>
  334. </li>
  335. </ul>-->
  336. </div>
  337. <ul class="mui-table-view ">
  338. <li class="work-content" style="padding-bottom: 20px;">
  339. <div id='image-list' class="row image-list"></div>
  340. </li>
  341. </ul>
  342. </div>
  343. <!--评价记录-->
  344. </div>
  345. </div>
  346. <button type="button" data-loading-text="提交中" class="mui-btn mui-btn-primary mui-btn-block block_button sub">立即审核</button>
  347. <div class="submit_div">
  348. <div class="mui-title" style="color: #000;"></div>
  349. <ul class="mui-table-view ">
  350. <li class="mui-table-view-cell" style="text-align: center; font-size: 16px; font-weight: bold;">
  351. 填写审核信息
  352. </li>
  353. <li class="mui-table-view-cell">
  354. <div class="mui-input-row text_bor">
  355. <textarea class="ztext content size-14" name="" id="question" rows="5" cols="" placeholder="请详细描述您的问题和建议..."></textarea>
  356. </div>
  357. </li>
  358. <li>
  359. <div class="mui-table">
  360. <div class="mui-table-cell mui-col-xs-6 ">
  361. <button type="button" data-loading-text="提交中" class="mui-btn mui-btn-primary mui-btn-block block_button btn_agree BC">同意</button>
  362. <!--<div class="btn_agree BC">同意</div>-->
  363. </div>
  364. <div class="mui-table-cell mui-col-xs-6 Mf">
  365. <button type="button" data-loading-text="提交中" class="mui-btn mui-btn-primary mui-btn-block block_button btn_unagree Submit">拒绝</button>
  366. </div>
  367. </div>
  368. </li>
  369. </ul>
  370. <a class="mui-icon mui-icon-closeempty delete_iocn"></a>
  371. </div>
  372. <div style="width: 100%; height: 57px;"></div>
  373. <div class="bj_body" style=""></div>
  374. <script src="../js/huayi.config.js"></script>
  375. <script src="../js/zepto.js"></script>
  376. <script src="../js/jquery.min.js"></script>
  377. <script src="../js/mui.min.js"></script>
  378. <script src="../js/mui.zoom.js"></script>
  379. <script src="../js/mui.previewimage.js"></script>
  380. <script type="text/javascript">
  381. mui.init(
  382. );
  383. mui.previewImage();
  384. mui.plusReady(function() {
  385. var wv = plus.webview.currentWebview();
  386. var vText = wv.name;
  387. var token = wv.token;
  388. //办理信息
  389. mui.ajax(huayi.config.callcenter_url + 'WorkOrder/GetNewSecondDealInfo', {
  390. data: {
  391. workorderid: vText,
  392. token: token
  393. },
  394. dataType: 'json', //服务器返回json格式数据
  395. type: 'get', //HTTP请求类型
  396. timeout: 10000, //超时时间设置为10秒;
  397. success: function(result) {
  398. var temp;
  399. $.each(result.data, function(i, n) {
  400. ccc=n.F_Id;
  401. temp =
  402. '<ul class="mui-table-view "><li class="mui-table-view-cell"><div class="mui-table"><div class="mui-table-cell mui-col-xs-4 "><label class="label">办理人:</label></div><div class="mui-table-cell mui-col-xs-8 Mf"><span class="ND_deail" id="ND_name">' + n.F_DealUser +
  403. '</span></div></div></li><div class="BLNR"></div><li class="mui-table-view-cell"><div class="mui-table"><div class="mui-table-cell mui-col-xs-4 "><label class="label">办理期限:</label></div><div class="mui-table-cell mui-col-xs-8 Mf"><span class="ND_deail" id="ND_name">' + n.F_CreateTime +
  404. '</span></div></div></li><li class="mui-table-view-cell"><div class="mui-table"><div class="mui-table-cell mui-col-xs-4 "><label class="label">办理内容:</label></div><div class="mui-table-cell mui-col-xs-8 Mf"><span class="ND_deail" id="ND_name">' + n.F_Result +
  405. '</span></div></div></li></ul>'
  406. });
  407. $('.BLNR').append(temp);
  408. //图片展示
  409. var imgurl=result.data[0].File;
  410. // if(imgurl.F_FileType == '.jpg'||imgurl.F_FileType == '.png') {
  411. // $('<div class="img-box"><img src="' + imgurl.F_FileUrl + '" alt="" class="image-item" data-preview-src="" data-preview-group="1" /><div>').appendTo("#image-list");
  412. // $(".image-list").show();
  413. // } else if(n.F_FileType == '.docx') {
  414. //
  415. // }
  416. if(imgurl) {
  417. $(imgurl).each(function(i, n) {
  418. if(n.F_FileType == '.jpg'||n.F_FileType == '.png') {
  419. $('<div class="img-box"><img src="' + n.F_FileUrl + '" alt="" class="image-item" data-preview-src="" data-preview-group="1" /><div>').appendTo("#image-list");
  420. $(".image-list").show();
  421. } else if(n.F_FileType == '.docx') {
  422. mui.toast('猜猜我是谁')
  423. }
  424. })
  425. }
  426. },
  427. error: function(xhr, type, errorThrown) {
  428. }
  429. });
  430. //立即办理
  431. $(".sub").click(function(){
  432. $(".submit_div").slideDown();
  433. $(".bj_body").slideDown();
  434. $(".submit").show();
  435. $(".sub").hide();
  436. });
  437. //背景关闭弹框
  438. $(".bj_body").click(function(){
  439. $(".submit_div").slideUp();
  440. $(".bj_body").slideUp();
  441. $(".sub").show();
  442. $(".submit").hide();
  443. });
  444. //图标关闭弹框
  445. $(".delete_iocn").click(function(){
  446. $(".submit_div").slideUp();
  447. $(".bj_body").slideUp();
  448. $(".sub").show();
  449. $(".submit").hide();
  450. });
  451. $('.BC').click(function() {
  452. if($("#question").val()==""){
  453. plus.nativeUI.toast('输入内容');
  454. }else{
  455. State = 1;
  456. JA();
  457. }
  458. })
  459. $('.Submit').click(function() {
  460. if($("#question").val()==""){
  461. plus.nativeUI.toast('输入内容');
  462. }else{
  463. State = 2;
  464. JA();
  465. }
  466. })
  467. //提交办理
  468. //$(".submit").click(function(){
  469. //});
  470. function JA() {
  471. var question = $("#question").val();
  472. $.post(huayi.config.callcenter_url + 'WorkOrder/AuditSplitWorkOrder', {
  473. workorderid: vText,
  474. reason: question, //办理内容
  475. state: State,
  476. backid:ccc,
  477. token: token
  478. }, function(result) {
  479. result = JSON.parse(result);
  480. if(result.state.toLowerCase() == "success") {
  481. var wobj = plus.webview.getWebviewById("Work-list");
  482. wobj.reload(true);
  483. // window.location.reload();
  484. // var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
  485. // parent.layer.close(index); //再执行关闭
  486. // parent.load();
  487. plus.nativeUI.toast('办理成功');
  488. }
  489. })
  490. }
  491. })
  492. </script>
  493. </body>
  494. </html>