Brak opisu

WorkDeail.html 39KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
  6. <meta name="full-screen" content="yes">
  7. <meta name="x5-fullscreen" content="true">
  8. <meta name="apple-mobile-web-app-capable" content="yes">
  9. <meta name="apple-mobile-web-app-status-bar-style" content="black">
  10. <link rel="stylesheet" href="../layui/css/layui.css" />
  11. <link href="../css/mui.min.css" rel="stylesheet" />
  12. <link href="../css/mui.picker.min.css" rel="stylesheet" />
  13. <link rel="stylesheet" href="../css/iconfont.css" />
  14. <link rel="stylesheet" href="../css/inits.css" />
  15. <title>工单详情</title>
  16. <style>
  17. .sub_title {
  18. text-align: center;
  19. width: 80%;
  20. margin: 0 auto;
  21. margin-top: 20px;
  22. font-weight: normal;
  23. line-height: 24px;
  24. }
  25. .sub_title:before,
  26. .sub_title:after {
  27. display: inline-block;
  28. content: "";
  29. width: 13%;
  30. height: 1px;
  31. background: #c8b379;
  32. position: absolute;
  33. top: 50%;
  34. }
  35. .sub_title:before {
  36. left: 25%;
  37. }
  38. .sub_title:after {
  39. right: 25%;
  40. }
  41. .content {
  42. /*text-indent: 24px;
  43. font-size: 13px;
  44. line-height: 23px;
  45. margin: 20px 0;*/
  46. /*text-align: center;*/
  47. /*padding-top: 50px;*/
  48. }
  49. .img {
  50. background: url(../img/border2_02.png) no-repeat;
  51. height: 30px;
  52. background-size: cover;
  53. }
  54. @font-face {
  55. font-family: 'iconfont';
  56. /* project id 280843 */
  57. src: url('//at.alicdn.com/t/font_280843_z6lfyq17pjw3tyb9.eot');
  58. src: url('//at.alicdn.com/t/font_280843_z6lfyq17pjw3tyb9.eot?#iefix') format('embedded-opentype'), url('//at.alicdn.com/t/font_280843_z6lfyq17pjw3tyb9.woff') format('woff'), url('//at.alicdn.com/t/font_280843_z6lfyq17pjw3tyb9.ttf') format('truetype'), url('//at.alicdn.com/t/font_280843_z6lfyq17pjw3tyb9.svg#iconfont') format('svg');
  59. }
  60. .iconfont {
  61. font-family: "iconfont";
  62. font-size: 18px;
  63. font-style: normal;
  64. color: #f49b07;
  65. -webkit-font-smoothing: antialiased;
  66. -webkit-text-stroke-width: 0.2px;
  67. -moz-osx-font-smoothing: grayscale;
  68. vertical-align: middle;
  69. /* padding-left:20px*/
  70. }
  71. .Details-map {
  72. height: 200px;
  73. border: 1px solid #ccc;
  74. width: 100%;
  75. }
  76. .map_tips{
  77. display: inline-block;
  78. width: 100%;
  79. margin-top: 80px;
  80. text-align: center;
  81. color: #13a7f1;
  82. }
  83. .mui-table-view .mui-media-object {
  84. min-width: 65px;
  85. height: 65px;
  86. line-height: 65px;
  87. }
  88. .mui-popover.mui-popover-action .mui-table-view {
  89. text-align: inherit;
  90. }
  91. .PJ_text {
  92. width: 80%;
  93. margin: 0 auto;
  94. }
  95. .PJ_chose {
  96. width: 80%;
  97. margin: 0 auto;
  98. text-align: center;
  99. }
  100. .PJ_chose ul {
  101. overflow: hidden;
  102. }
  103. .PJ_chose li {
  104. float: left;
  105. width: 48%;
  106. }
  107. .PJ_chose li p {
  108. padding: 6px 12px;
  109. border: 1px solid #c8c7cc;
  110. font-size: 12px;
  111. position: relative;
  112. /*border-radius: 5px;*/
  113. }
  114. .PJ_chose li i {
  115. color: #fff;
  116. position: absolute;
  117. right: -3px;
  118. bottom: 0;
  119. }
  120. .PJ-Start {
  121. width: 80%;
  122. margin: 0 auto;
  123. margin-bottom: 10px;
  124. }
  125. .PJ-Start i {
  126. /*margin-right: 5px;*/
  127. font-size: 30px;
  128. display: inline-block;
  129. width: 18%;
  130. }
  131. .PJ-Start p {
  132. width: 18%;
  133. text-align: center;
  134. margin-bottom: 0!important;
  135. }
  136. .mui-popover .mui-table-view {
  137. background-color: #fff;
  138. }
  139. .ServeContent .mui-table-view-cell:after {
  140. background-color: #fff;
  141. }
  142. .mui-table-view:after {
  143. background-color: #fff;
  144. }
  145. .mui-popover.mui-popover-action .mui-table-view .mui-table-view-cell:after {
  146. background-color: #fff;
  147. }
  148. h5 {
  149. margin-top: 15px;
  150. }
  151. /*.mui-table-view-cell {
  152. padding-top: 20px;
  153. padding-left: 12px;
  154. }
  155. */
  156. .size-16 {
  157. font-size: 16px;
  158. }
  159. textarea {
  160. font-size: 12px;
  161. color: #8f8f94;
  162. }
  163. .mui-btn {
  164. /*width: 80px;*/
  165. border-radius: 40px;
  166. padding: 6px 20px;
  167. }
  168. .Servelist {
  169. margin: 15px;
  170. padding: 5px;
  171. margin-bottom: 17px;
  172. border-left: 5px solid #13a7f1;
  173. color: #13a7f1;
  174. }
  175. /*进程css*/
  176. .ServeContent {
  177. border-top: 1px solid #c8c7cc;
  178. border-bottom: 1px solid #c8c7cc;
  179. /*padding: 12px;*/
  180. }
  181. .layui-text h3 {
  182. font-size: 16px;
  183. }
  184. .layui-timeline-item {
  185. padding-bottom: 10px;
  186. }
  187. .Workdeail {
  188. /*padding: 15px;*/
  189. width: 90%;
  190. margin: 0 auto;
  191. margin-bottom: 10%;
  192. }
  193. .Workdeail label {
  194. text-align: right;
  195. }
  196. .Workdeail li {
  197. padding: 0;
  198. }
  199. .fl {
  200. float: left;
  201. }
  202. .fr {
  203. float: right;
  204. }
  205. .layui-content {
  206. width: 90%;
  207. margin: 10px auto;
  208. }
  209. /*.img-box {
  210. float: left;
  211. width: 65px;
  212. text-align: center;
  213. line-height: 65px;
  214. height: 67px;
  215. background-color: #fff;
  216. border: 1px solid #ddd;
  217. border-radius: 4px;
  218. margin-right: 20px;
  219. margin-bottom: 10px;
  220. }*/
  221. /*.image-item {
  222. width: 65px;
  223. height: 65px;
  224. background-size: 100% 100%;
  225. display: inline-block;
  226. position: relative;
  227. border-radius: 5px;
  228. margin-bottom: 10px;
  229. }
  230. */
  231. .image-list {
  232. width: 100%;
  233. /* height: 85px; */
  234. background-size: cover;
  235. padding: 11px 15px;
  236. overflow: hidden;
  237. }
  238. .ND_deail {
  239. line-height: 37px;
  240. }
  241. .layui-timeline {
  242. padding-left: 20px;
  243. }
  244. .fl_ {
  245. float: left;
  246. }
  247. .fl_ li {
  248. float: left;
  249. width: 33%;
  250. }
  251. .fl_ li img {
  252. width: 100%;
  253. height: 85px;
  254. padding: 5px;
  255. }
  256. .fl_ li div {
  257. text-align: center;
  258. }
  259. /*自定义CSS*/
  260. .mui-preview-image.mui-fullscreen {
  261. position: fixed;
  262. z-index: 20;
  263. background-color: #000;
  264. }
  265. .mui-preview-header,
  266. .mui-preview-footer {
  267. position: absolute;
  268. width: 100%;
  269. left: 0;
  270. z-index: 10;
  271. }
  272. .mui-preview-header {
  273. height: 44px;
  274. top: 0;
  275. }
  276. .mui-preview-footer {
  277. height: 50px;
  278. bottom: 0px;
  279. }
  280. .mui-preview-header .mui-preview-indicator {
  281. display: block;
  282. line-height: 25px;
  283. color: #fff;
  284. text-align: center;
  285. margin: 15px auto 4;
  286. width: 70px;
  287. background-color: rgba(0, 0, 0, 0.4);
  288. border-radius: 12px;
  289. font-size: 16px;
  290. }
  291. .mui-preview-image {
  292. display: none;
  293. -webkit-animation-duration: 0.5s;
  294. animation-duration: 0.5s;
  295. -webkit-animation-fill-mode: both;
  296. animation-fill-mode: both;
  297. }
  298. .mui-preview-image.mui-preview-in {
  299. -webkit-animation-name: fadeIn;
  300. animation-name: fadeIn;
  301. }
  302. .mui-preview-image.mui-preview-out {
  303. background: none;
  304. -webkit-animation-name: fadeOut;
  305. animation-name: fadeOut;
  306. }
  307. .mui-preview-image.mui-preview-out .mui-preview-header,
  308. .mui-preview-image.mui-preview-out .mui-preview-footer {
  309. display: none;
  310. }
  311. .mui-zoom-scroller {
  312. position: absolute;
  313. display: -webkit-box;
  314. display: -webkit-flex;
  315. display: flex;
  316. -webkit-box-align: center;
  317. -webkit-align-items: center;
  318. align-items: center;
  319. -webkit-box-pack: center;
  320. -webkit-justify-content: center;
  321. justify-content: center;
  322. left: 0;
  323. right: 0;
  324. bottom: 0;
  325. top: 0;
  326. width: 100%;
  327. height: 100%;
  328. margin: 0;
  329. -webkit-backface-visibility: hidden;
  330. }
  331. .mui-zoom {
  332. -webkit-transform-style: preserve-3d;
  333. transform-style: preserve-3d;
  334. }
  335. .mui-slider .mui-slider-group .mui-slider-item img {
  336. width: auto;
  337. height: auto;
  338. max-width: 100%;
  339. max-height: 100%;
  340. }
  341. .mui-android-4-1 .mui-slider .mui-slider-group .mui-slider-item img {
  342. width: 100%;
  343. }
  344. .mui-android-4-1 .mui-slider.mui-preview-image .mui-slider-group .mui-slider-item {
  345. display: inline-table;
  346. }
  347. .mui-android-4-1 .mui-slider.mui-preview-image .mui-zoom-scroller img {
  348. display: table-cell;
  349. vertical-align: middle;
  350. }
  351. .mui-preview-loading {
  352. position: absolute;
  353. width: 100%;
  354. height: 100%;
  355. top: 0;
  356. left: 0;
  357. display: none;
  358. }
  359. .mui-preview-loading.mui-active {
  360. display: block;
  361. }
  362. .mui-preview-loading .mui-spinner-white {
  363. position: absolute;
  364. top: 50%;
  365. left: 50%;
  366. margin-left: -25px;
  367. margin-top: -25px;
  368. height: 50px;
  369. width: 50px;
  370. }
  371. .mui-preview-image img.mui-transitioning {
  372. -webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease;
  373. transition: transform 0.5s ease, opacity 0.5s ease;
  374. }
  375. @-webkit-keyframes fadeIn {
  376. 0% {
  377. opacity: 0;
  378. }
  379. 100% {
  380. opacity: 1;
  381. }
  382. }
  383. @keyframes fadeIn {
  384. 0% {
  385. opacity: 0;
  386. }
  387. 100% {
  388. opacity: 1;
  389. }
  390. }
  391. @-webkit-keyframes fadeOut {
  392. 0% {
  393. opacity: 1;
  394. }
  395. 100% {
  396. opacity: 0;
  397. }
  398. }
  399. @keyframes fadeOut {
  400. 0% {
  401. opacity: 1;
  402. }
  403. 100% {
  404. opacity: 0;
  405. }
  406. }
  407. p img {
  408. max-width: 100%;
  409. height: auto;
  410. }
  411. .click_btn {
  412. display: none;
  413. }
  414. .remind {
  415. padding: 6px 12px;
  416. background-color: #fffced;
  417. color: #f49b07;
  418. display: none;
  419. }
  420. .user-img img {
  421. width: 50px;
  422. height: 50px;
  423. border-radius: 50%;
  424. margin-right: 10px;
  425. }
  426. .user-img {
  427. margin-top: 0;
  428. }
  429. .evaluate-li h5 {
  430. margin-top: 0;
  431. }
  432. .evaluate-details {
  433. color: #0C0C0C;
  434. }
  435. .eva-message {
  436. float: left;
  437. margin-top: 8px;
  438. }
  439. .eva-message li {
  440. float: left;
  441. background-color: #d4effd;
  442. margin-right: 5px;
  443. margin-bottom: 5px;
  444. border-radius: 8px;
  445. }
  446. .eva-message li p {
  447. padding: 6px 12px;
  448. font-size: 12px;
  449. }
  450. .mui-icon-star-filled {
  451. color: #FFB400;
  452. font-size: 20px;
  453. }
  454. .mui-icon-star {
  455. color: #B5B5B5;
  456. font-size: 20px;
  457. }
  458. .mui-content {
  459. background-color: #efeff4;
  460. }
  461. .evaluate-center {
  462. background-color: #fff;
  463. padding-top: 5px;
  464. box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.4);
  465. margin-bottom: 10px;
  466. }
  467. .layui-timeline-axiss {
  468. position: absolute;
  469. left: -5px;
  470. top: 0;
  471. z-index: 10;
  472. width: 20px;
  473. height: 20px;
  474. line-height: 20px;
  475. background-color: #fff;
  476. color: color: #ccc;
  477. border-radius: 50%;
  478. text-align: center;
  479. cursor: pointer;
  480. color: #ccc;
  481. }
  482. .click_btn {
  483. display: none;
  484. }
  485. .Center {
  486. text-align: center;
  487. }
  488. .check {
  489. border-color: #007AFF !important;
  490. position: relative;
  491. }
  492. .PJ_chose li p.check:before {
  493. content: "";
  494. display: block;
  495. position: absolute;
  496. right: 0;
  497. bottom: 0;
  498. width: 0;
  499. height: 0;
  500. border-bottom: 35px solid #007AFF;
  501. border-left: 35px solid transparent;
  502. }
  503. .evaluate-box {
  504. display: none;
  505. background-color: #fff;
  506. padding-top: 5px;
  507. box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.4);
  508. margin-bottom: 10px;
  509. }
  510. .ND_faultdescripe {
  511. display: inline-block;
  512. width: 60%;
  513. padding: 11px 0;
  514. }
  515. p,
  516. span {
  517. word-break: break-all;
  518. word-wrap: break-word;
  519. }
  520. .mui-popup-backdrop{
  521. z-index: 1000;
  522. }
  523. </style>
  524. </head>
  525. <body>
  526. <div class="mui-content">
  527. <div class="content">
  528. <!--地图-->
  529. <div class="Details-map" id="container">
  530. <span id="map_tips" class="map_tips">定 位 中 · · ·</span>
  531. <!--这是个地图-->
  532. </div>
  533. <ul id="logs"></ul>
  534. <!--工单详情-->
  535. <div class="evaluate-center">
  536. <div class="remind">
  537. <i class="iconfont">&#xe679;</i>
  538. <span>您的前面还有<span class="count">0</span>条工单待维修,请耐心等待</span>
  539. <i class="iconfont fr guanbi">&#xe8b6;</i>
  540. </div>
  541. <h5 class='mui-h5 Servelist'>
  542. <span>服务记录</span>
  543. </h5>
  544. <div class="ServeContent">
  545. <!--<!-工单进度-->
  546. <div class="layui-content">
  547. <ul class="layui-timeline">
  548. <!--
  549. <li class="layui-timeline-item">
  550. <i class="layui-icon layui-timeline-axis">&#xe643;</i>
  551. <div class="layui-timeline-content layui-text">
  552. <h3 class="layui-timeline-title"> <span style="margin-right:10px;color: #0099ff;">报修</span> </h3>
  553. <p>2017年8月15日 12:20:56</p>
  554. <p>
  555. 张一山通过微信报修
  556. </p>
  557. </div>
  558. </li>
  559. <li class="layui-timeline-item">
  560. <i class="layui-icon layui-timeline-axiss">&#xe643;</i>
  561. <div class="layui-timeline-content layui-text">
  562. <h3 class="layui-timeline-title"> <span style="margin-right:10px;color: #ccc;">派工</span> </h3>
  563. <p>2017年8月15日 12:20:56</p>
  564. <p>
  565. 已派工给王师傅
  566. </p>
  567. </div>
  568. </li>
  569. <li class="layui-timeline-item">
  570. <i class="layui-icon layui-timeline-axiss">&#xe643;</i>
  571. <div class="layui-timeline-content layui-text">
  572. <h3 class="layui-timeline-title"> <span style="margin-right:10px;color: #ccc;">接单</span> </h3>
  573. <p>2017年8月15日 12:20:56</p>
  574. </div>
  575. </li>
  576. <li class="layui-timeline-item">
  577. <i class="layui-icon layui-timeline-axiss">&#xe643;</i>
  578. <div class="layui-timeline-content layui-text">
  579. <h3 class="layui-timeline-title"> <span style="margin-right:10px;color: #ccc;">维修</span> </h3>
  580. <p>2017年8月15日 12:20:56</p>
  581. </div>
  582. </li>
  583. <li class="layui-timeline-item">
  584. <i class="layui-icon layui-timeline-axiss">&#xe643;</i>
  585. <div class="layui-timeline-content layui-text">
  586. <h3 class="layui-timeline-title"> <span style="margin-right:10px;color: #ccc;">完工</span> </h3>
  587. <p>2017年8月15日 12:20:56</p>
  588. </div>
  589. </li>-->
  590. </ul>
  591. <div style="padding: 10px;" class="btn-grop">
  592. <div style="width: 80%;margin: 0 auto;overflow: hidden;" class="btn-gropbox">
  593. <!--<button type="button" class="mui-btn fl mui-btn-outlined " style="margin-right: 20px;" id="Back">立即返回</button>-->
  594. <!--<button type="button" id="HY_add" class="mui-btn fr mui-btn-warning mui-btn-outlined click_btn">提交</button>-->
  595. <button type="button" id="ND_cearl" class="mui-btn fr mui-btn-primary mui-btn-outlined click_btn">取消工单</button>
  596. <!--<a href="#picture" class="mui-btn mui-btn-primary mui-btn-block mui-btn-outlined" style="padding: 5px 20px;">评价工单</a>-->
  597. <a href="#picture" id="ND_PJ" class="mui-btn mui-btn-primary fr mui-btn-outlined click_btn" style="font-size: 14px;">评价工单</a>
  598. </div>
  599. </div>
  600. <!--<div style="padding: 10px;" class="btn-grop">
  601. <div style="width: 80%;margin: 0 auto;overflow: hidden;">
  602. <a href="#picture" class="mui-btn mui-btn-primary mui-btn-outlined" style="font-size: 14px;">评价工单</a>
  603. </div>
  604. </div>
  605. <div style="padding: 10px;" class="btn-grop">
  606. <div style="width: 80%;margin: 0 auto;overflow: hidden;">
  607. <a class="mui-btn mui-btn-primary mui-btn-outlined" style="font-size: 14px;">取消工单</a>
  608. </div>
  609. </div>-->
  610. </div>
  611. <div id="picture" class="mui-popover mui-popover-action mui-popover-bottom">
  612. <div style="background-color: #fff; margin-bottom: -7px;">
  613. <ul class="mui-table-view">
  614. <!--基本信息-->
  615. <li class="mui-table-view-cell">
  616. <div class="mui-table">
  617. <div class="mui-table-cell mui-col-xs-8">
  618. <img class="mui-media-object mui-pull-left" src="../img/logo.png">
  619. <h5 class="serviceman size-16"></h5>
  620. </div>
  621. <div class="mui-table-cell mui-col-xs-4 mui-text-right">
  622. <span class="mui-h5 settime"></span>
  623. </div>
  624. </div>
  625. </li>
  626. </ul>
  627. <!--评分-->
  628. <div class="mui-content-padded mui-text-center PJ-Start">
  629. <div class="evaluate_world">
  630. <p class="mui-inline">
  631. </p>
  632. <p class="mui-inline">
  633. 不满意
  634. </p>
  635. <p class="mui-inline">
  636. 一般
  637. </p>
  638. <p class="mui-inline">
  639. 满意
  640. </p>
  641. <p class="mui-inline">
  642. 很满意
  643. </p>
  644. </div>
  645. <div class="icons">
  646. <i data-index="1" class="mui-icon mui-icon-star"></i>
  647. <i data-index="2" class="mui-icon mui-icon-star"></i>
  648. <i data-index="3" class="mui-icon mui-icon-star"></i>
  649. <i data-index="4" class="mui-icon mui-icon-star"></i>
  650. <i data-index="5" class="mui-icon mui-icon-star"></i>
  651. </div>
  652. </div>
  653. <!--意见-->
  654. <div class="mui-input-row PJ_text">
  655. <textarea id="textarea" rows="" placeholder="请及时进行评价以免影响您的下次使用,谢谢配合"></textarea>
  656. </div>
  657. <div class="mui-input-row PJ_text">
  658. <input type="text" id="times" placeholder="维修工到场时间" readonly="readonly" />
  659. </div>
  660. <!--选项-->
  661. <div class="mui-input-row PJ_chose">
  662. <ul>
  663. <li>
  664. <p index="维修及时">维修及时
  665. <i class="mui-icon mui-icon-checkmarkempty"></i>
  666. </p>
  667. </li>
  668. <li style="float: right;">
  669. <p index="态度特别棒">
  670. 态度特别棒
  671. <i class="mui-icon mui-icon-checkmarkempty"></i>
  672. </p>
  673. </li>
  674. <li>
  675. <p index="服务专业">服务专业
  676. <i class="mui-icon mui-icon-checkmarkempty"></i>
  677. </p>
  678. </li>
  679. <li style="float: right;">
  680. <p index="师傅很用心">师傅很用心
  681. <i class="mui-icon mui-icon-checkmarkempty"></i>
  682. </p>
  683. </li>
  684. </ul>
  685. </div>
  686. <!--按钮-->
  687. <div style="padding: 10px;padding-bottom: 50px;" class="btn-grop mui-text-center">
  688. <div style="width: 80%;margin: 0 auto;">
  689. <button type="button" id="Back_" class="mui-btn mui-btn-outlined" style="margin-right: 20px;">取消</button>
  690. <button type="button" id="HY_add" data-loading-text="评价中" class="mui-btn mui-btn-primary mui-btn-outlined ">评价</button>
  691. </div>
  692. </div>
  693. </div>
  694. </div>
  695. </div>
  696. </div>
  697. <!--基本信息-->
  698. <div class="evaluate-center">
  699. <h5 class='mui-h5 Servelist'>
  700. <span>工单信息</span>
  701. </h5>
  702. <div class="ServeContent">
  703. <div class="Workdeail">
  704. <ul class="mui-table-view ">
  705. <li class="mui-table-view-cell">
  706. <div class="mui-input-row">
  707. <label class="label">项目名称:</label>
  708. <span class="ND_deail" id="ND_proname"></span>
  709. </div>
  710. </li>
  711. <li class="mui-table-view-cell">
  712. <div class="mui-input-row">
  713. <label class="label">项目类型:</label>
  714. <span class="ND_deail" id="ND_protype"></span>
  715. </div>
  716. </li>
  717. <li class="mui-table-view-cell">
  718. <div class="mui-input-row">
  719. <label class="label">报修地点:</label>
  720. <span class="ND_deail" id="ND_repairreplace"></span>
  721. </div>
  722. </li>
  723. <li class="mui-table-view-cell">
  724. <div class="mui-input-row">
  725. <label class="label">报修时间:</label>
  726. <span class="ND_deail" id="ND_repairtime"></span>
  727. </div>
  728. </li>
  729. <li class="mui-table-view-cell">
  730. <div class="mui-input-row">
  731. <label class="label">报修人:</label>
  732. <span class="ND_deail" id="ND_repairman"></span>
  733. </div>
  734. </li>
  735. <li class="mui-table-view-cell">
  736. <div class="mui-input-row">
  737. <label class="label">联系方式:</label>
  738. <span class="ND_deail" id="ND_contactway"></span>
  739. </div>
  740. </li>
  741. <!--<li class="mui-table-view-cell">
  742. <div class="mui-input-row">
  743. <label class="label">系统名称:</label>
  744. <span class="ND_deail" id="ND_sysname"></span>
  745. </div>
  746. </li>
  747. <li class="mui-table-view-cell">
  748. <div class="mui-input-row">
  749. <label class="label">设备名称:</label>
  750. <span class="ND_deail ND_equipname"></span>
  751. </div>
  752. </li>
  753. <li class="mui-table-view-cell">
  754. <div class="mui-input-row">
  755. <label class="label">故障类型:</label>
  756. <span class=" ND_deail ND_faulttype"></span>
  757. </div>
  758. </li>-->
  759. <li class="mui-table-view-cell">
  760. <div class="mui-input-row">
  761. <label class="label">故障说明:</label>
  762. <!--<textarea id="ND_faultdescripe" class="" name="" rows="" cols=""></textarea>-->
  763. <span class="ND_faultdescripe" id="ND_faultdescripe"></span>
  764. </div>
  765. </li>
  766. <li class="mui-table-view-cell pic" style="display:none;">
  767. <div class="mui-input-row">
  768. <label class="label">故障图片:</label>
  769. </div>
  770. </li>
  771. <li class="mui-table-view-cell pic" style="display:none;">
  772. <div class="mui-input-row">
  773. <div class="image-list faultpic">
  774. <ul class="fl_"></ul>
  775. </div>
  776. </div>
  777. </li>
  778. <!--<li class="mui-table-view-cell">
  779. <div class="mui-input-row">
  780. <label class="label">预约时间:</label>
  781. <span class="ND_deail ND_appointtime"></span>
  782. </div>
  783. </li>
  784. <li class="mui-table-view-cell">
  785. <div class="mui-input-row">
  786. <label class="label">指定维修人:</label>
  787. <span class=" ND_deail ND_appointman"></span>
  788. </div>
  789. </li>-->
  790. </ul>
  791. </div>
  792. </div>
  793. </div>
  794. <!--评价记录-->
  795. <div class="evaluate-box ">
  796. <div class="">
  797. <h5 class='mui-h5 Servelist'>
  798. <span>用户评价</span>
  799. </h5>
  800. </div>
  801. <ul class="mui-table-view mui-table-view-striped mui-table-view-condensed evaluatelist"></ul>
  802. </div>
  803. <input type="hidden" id="woid" />
  804. <input type="hidden" id="wocode" />
  805. </div>
  806. </div>
  807. <script src="../js/jquery.min.js?1.1"></script>
  808. <script src="../layui/layui.js?1.1"></script>
  809. <script src="../js/zepto.js?1.1"></script>
  810. <script src="../js/mui.min.js?1.1"></script>
  811. <script src="../js/mui.picker.min.js?1.1"></script>
  812. <script src="../js/mui.zoom.js?1.1"></script>
  813. <script src="../js/mui.previewimage.js?1.1"></script>
  814. <script src="../Script/Common/huayi.config.js?1.1"></script>
  815. <script src="../Script/Common/huayi.http.js?1.1"></script>
  816. <script type="text/javascript" src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js?1.1"></script>
  817. <script type="text/javascript" src="https://map.qq.com/api/js?v=2.exp&key=26KBZ-YBJRO-3RPWW-SUEYL-K2KKQ-BTBYL&libraries=geometry"></script>
  818. <!--<script src="../js/locations1.js?1.1"></script>-->
  819. <!--<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js?1.1"></script>-->
  820. <script>
  821. function getFormatDate(obj) {
  822. var nowDate = new Date();
  823. var year = nowDate.getFullYear();
  824. var month = nowDate.getMonth() + 1 < 10 ? "0" + (nowDate.getMonth() + 1) : nowDate.getMonth() + 1;
  825. var date = nowDate.getDate() < 10 ? "0" + nowDate.getDate() : nowDate.getDate();
  826. obj.text(year + "-" + month + "-" + date);
  827. }
  828. mui.previewImage();
  829. (function($, doc) {
  830. $.init();
  831. var options = {
  832. "beginYear": 1990,
  833. "endYear": 2099
  834. }
  835. doc.getElementById('times').addEventListener('tap', function() {
  836. var _self = this;
  837. // var optionsJson = this.getAttribute('data-options') || '{}';
  838. // var options = JSON.parse(optionsJson);
  839. // var id = this.getAttribute('id');
  840. /*
  841. * 首次显示时实例化组件
  842. * 示例为了简洁,将 options 放在了按钮的 dom 上
  843. * 也可以直接通过代码声明 optinos 用于实例化 DtPicker
  844. */
  845. _self.picker = new $.DtPicker(options);
  846. _self.picker.show(function(rs) {
  847. /*
  848. * rs.value 拼合后的 value
  849. * rs.text 拼合后的 text
  850. * rs.y 年,可以通过 rs.y.vaue 和 rs.y.text 获取值和文本
  851. * rs.m 月,用法同年
  852. * rs.d 日,用法同年
  853. * rs.h 时,用法同年
  854. * rs.i 分(minutes 的第二个字母),用法同年
  855. */
  856. doc.getElementById('times').value = rs.text;
  857. /*
  858. * 返回 false 可以阻止选择框的关闭
  859. * return false;
  860. */
  861. /*
  862. * 释放组件资源,释放后将将不能再操作组件
  863. * 通常情况下,不需要示放组件,new DtPicker(options) 后,可以一直使用。
  864. * 当前示例,因为内容较多,如不进行资原释放,在某些设备上会较慢。
  865. * 所以每次用完便立即调用 dispose 进行释放,下次用时再创建新实例。
  866. */
  867. _self.picker.dispose();
  868. _self.picker = null;
  869. });
  870. }, false);
  871. })(mui, document);
  872. $(document).ready(function() {
  873. var id = helper.request.queryString("id");
  874. //详情
  875. if(id) {
  876. bind(id);
  877. getFormatDate($(".settime"));
  878. }
  879. $(".guanbi").on('tap', function() {
  880. $(".remind").hide();
  881. })
  882. $(".PJ_chose p").on('tap', function() {
  883. if($(this).is('.check')) {
  884. $(this).removeClass('check')
  885. } else {
  886. $(this).addClass('check');
  887. }
  888. })
  889. $("#HY_add").on('tap', function() {
  890. var that = this;
  891. var Arr = [];
  892. $('.check').each(function(i, n) {
  893. var a = $(this).attr('index');
  894. Arr.push(a);
  895. })
  896. var Star = $(".mui-icon-star-filled").length;
  897. if(Star == 0) {
  898. mui.alert('请选择星级!');
  899. return;
  900. }
  901. if(!$("#times").val()) {
  902. mui.alert('请选择到场时间!');
  903. return;
  904. }
  905. $.ajax({
  906. type: "post",
  907. url: huayi.config.callcenter_url + 'equipmentapi/api/worepairbase/evaluate',
  908. async: true,
  909. dataType: 'json',
  910. beforeSend: function() {
  911. mui(that).button('loading');
  912. },
  913. data: {
  914. woid: $("#woid").val(),
  915. wocode: $("#wocode").val(),
  916. channel: 4,
  917. arrivetime: $("#times").val(),
  918. evaluate: $("#textarea").val(),
  919. score: Star,
  920. label: Arr
  921. },
  922. success: function(data) {
  923. mui(that).button('reset');
  924. if(data.state == "success") {
  925. mui.alert('评价成功');
  926. window.location.replace(window.location);
  927. }
  928. },
  929. error: function(textStatus) {
  930. mui(that).button('reset');
  931. mui.toast('网络繁忙,请稍后再试...');
  932. },
  933. complete: function(XMLHttpRequest, textStatus) {
  934. mui(that).button('reset');
  935. if(textStatus == 'timeout') {
  936. var xmlhttp = window.XMLHttpRequest ? new window.XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHttp");
  937. xmlhttp.abort();
  938. mui.toast('网络超时,请稍后再试...');
  939. }
  940. },
  941. });
  942. });
  943. //取消工单
  944. $("#ND_cearl").on('tap', function() {
  945. var btnArray = ['否', '是'];
  946. mui.confirm('确定要取消本次报修吗?', '温馨提示', btnArray, function(e) {
  947. if(e.index == 1) {
  948. //请求接口
  949. $.ajax({
  950. type: "post",
  951. url: huayi.config.callcenter_url + 'equipmentapi/api/worepairbase/cancle',
  952. async: true,
  953. dataType: 'json',
  954. data: {
  955. wocode: $('#wocode').val(),
  956. channel: 4
  957. },
  958. success: function(data) {
  959. if(data.state == "success") {
  960. mui.alert('取消成功');
  961. window.location.replace(window.location);
  962. }
  963. }
  964. });
  965. }
  966. })
  967. })
  968. //返回工单
  969. $('#Back').on('tap', function() {
  970. window.history.back();
  971. });
  972. $('#Back_').on('tap', function() {
  973. //window.history.back();
  974. mui('.mui-popover').popover('toggle', document.getElementById("ND_PJ"));
  975. });
  976. })
  977. function bind(id) {
  978. $.ajax({
  979. type: "get",
  980. url: huayi.config.callcenter_url + 'equipmentapi/api/worepairbase/getsingle',
  981. async: true,
  982. dataType: 'json',
  983. data: {
  984. id: id ///测试 ID
  985. },
  986. success: function(result) {
  987. if(result.state == "success") {
  988. var data = result.data.model;
  989. var items = result.data.items;
  990. var evaluate = result.data.evaluate;
  991. $("#ND_proname").text(data.projectname);
  992. $("#ND_protype").text(data.protypename);
  993. $("#ND_repairreplace").text(data.repairreplace + " "+ (data.repairoom || '')); //报修地点
  994. $("#ND_repairtime").text(data.repairtime); //报修时间
  995. $("#ND_repairman").text(data.repairman); //报修人
  996. $("#ND_contactway").text(data.contactway);
  997. // $("#ND_sysname").text(data.sysname);
  998. // $(".ND_equipname").text(data.equipname);
  999. // $(".ND_faulttype").text(data.faulttype);
  1000. $("#ND_faultdescripe").text(data.faultdescripe);
  1001. // $(".ND_appointtime").text(data.appointtime);
  1002. // $(".ND_appointman").text(data.appointman);
  1003. $('.serviceman').text(data.repairman); //
  1004. $('#woid').val(data.id);
  1005. $('#wocode').val(data.wocode);
  1006. //故障图片
  1007. $("#ND_appointtime").text(data.appointtime);
  1008. $("#ND_appointman").text(data.appointman);
  1009. var type = data.wostate;
  1010. if(type == 0) {
  1011. $("#ND_cearl").show();
  1012. } else if(type == 1) {
  1013. $("#Back").removeClass('fl');
  1014. $('.btn-gropbox').addClass('Center');
  1015. if(data.touser) {
  1016. usercode = data.touser;
  1017. }
  1018. } else if(type == 2) {
  1019. $("#ND_PJ").show();
  1020. } else if(type == 3) {
  1021. $("#Back").removeClass('fl');
  1022. $('.btn-gropbox').addClass('Center');
  1023. $('.btn-gropbox').hide();
  1024. } else if(type == 7) {
  1025. $("#Back").removeClass('fl');
  1026. $('.btn-gropbox').addClass('Center');
  1027. $('.btn-gropbox').hide();
  1028. }
  1029. getLocation();
  1030. //
  1031. //图片展示
  1032. var Files = data.faultpic;
  1033. if(Files && Files.length > 0) {
  1034. $(".pic").show();
  1035. $(Files).each(function(i, n) {
  1036. $('<li>' +
  1037. '<div>' +
  1038. '<img class="image-item" alt="" data-preview-group="1" data-preview-src="" src="' + n.fileurl + '" alt="" />' +
  1039. '</div>' +
  1040. '</li>').appendTo('.fl_');
  1041. })
  1042. }
  1043. //工单进度
  1044. var html = '';
  1045. $(items).each(function(i, n) {
  1046. var wostate = n.wostate;
  1047. var State = '';
  1048. switch(n.wostate + '') {
  1049. case '0':
  1050. State = "报修";
  1051. break;
  1052. case '1':
  1053. State = "已接单";
  1054. break;
  1055. case '2':
  1056. State = "已处理";
  1057. break;
  1058. case '3':
  1059. State = "已评价";
  1060. break;
  1061. case '7':
  1062. State = "挂起";
  1063. break;
  1064. case '8':
  1065. State = "已取消";
  1066. break;
  1067. }
  1068. html += '<li class="layui-timeline-item">' +
  1069. '<i class="layui-icon layui-timeline-axis">&#xe643;</i>' +
  1070. '<div class="layui-timeline-content layui-text">' +
  1071. '<h3 class="layui-timeline-title"> <span style="margin-right:10px;color: #0099ff;">' + State + '</span> </h3>' +
  1072. '<p>' +
  1073. '' + n.createtime + '' +
  1074. '</p>' +
  1075. '<p>' +
  1076. '' + n.detail + '' +
  1077. '</p>' +
  1078. '</div>' +
  1079. '</li>'
  1080. });
  1081. $(html).appendTo('.layui-timeline');
  1082. //评价信息
  1083. if(evaluate.length > 0) {
  1084. $('.evaluate-box').show()
  1085. var html = '';
  1086. $(evaluate).each(function(i, n) {
  1087. var score = n.score;
  1088. var label = n.label;
  1089. html += '<li class="mui-table-view-cell evaluate-li">';
  1090. html += '<div class="mui-table">';
  1091. html += '<div class="mui-table-cell mui-col-xs-7">';
  1092. html += '<h5><i class="user-img"><img src="../img/logo.png" alt="" /></i><span>' + n.createusername + '</span></h5>';
  1093. html += '<p class="mui-h6 mui-ellipsis"><span>' + n.createtime + '</span></p>';
  1094. html += '</div>';
  1095. html += '<div class="mui-table-cell mui-col-xs-5 mui-text-right">';
  1096. html += '<div class="mui-content-padded mui-text-center details-Start aaa">';
  1097. html += '<div class="icons mui-inline">';
  1098. for(var i = 0; i < score; i++) {
  1099. html += '<i data-index="1" class="mui-icon mui-icon-star-filled"></i>';
  1100. }
  1101. html += '</div>';
  1102. html += '</div>';
  1103. html += '</div>';
  1104. html += '</div>';
  1105. html += '<div class="mui-table">';
  1106. html += '<p class="mui-h6 ">';
  1107. html += '<span class="evaluate-details">' + n.evaluate + '</span>';
  1108. html += '</p>';
  1109. html += '</div>';
  1110. html += '<div class="mui-table">';
  1111. html += '<ul class="eva-message">';
  1112. for(var i = 0; i < label.length; i++) {
  1113. html += '<li>';
  1114. html += '<p>' + label[i] + '</p>';
  1115. html += '</li>';
  1116. }
  1117. html += '</ul>';
  1118. html += '</div>';
  1119. html += '</li>';
  1120. // $(').appendTo('.evaluatelist ');
  1121. })
  1122. $(html).appendTo('.evaluatelist ');
  1123. }
  1124. }
  1125. }
  1126. });
  1127. }
  1128. var map, curentlatlng, startHeart, markersArray = [],
  1129. usercode;
  1130. //获取当前位置
  1131. function getLocation() {
  1132. var geolocation = new qq.maps.Geolocation("26KBZ-YBJRO-3RPWW-SUEYL-K2KKQ-BTBYL", "myappV1.00");
  1133. var options = {
  1134. timeout: 8000
  1135. };
  1136. geolocation.getLocation(showPosition, showErr, options)
  1137. }
  1138. function showErr(err) {
  1139. // mui.alert("定位失败!");
  1140. getLocation();
  1141. };
  1142. function showPosition(position) {
  1143. var lat = position.lat;
  1144. var lng = position.lng;
  1145. curentlatlng = new qq.maps.LatLng(lat, lng); //当前地理位置
  1146. //创建地图
  1147. map = new qq.maps.Map(document.getElementById("container"), {
  1148. center: curentlatlng,
  1149. zoom: 15,
  1150. zoomControl: true, //设置缩放控制启用
  1151. zoomControlOptions: { //设置缩放控件的样式状态
  1152. style: qq.maps.ZoomControlStyle.SMALL
  1153. },
  1154. //如果为 true,在初始化地图时不会清除地图容器内的内容
  1155. noClear: true,
  1156. //用作地图 div 的背景颜色。当用户进行平移时,如果尚未载入图块,则显示此颜色。仅在地图初始化时,才能设置此选项
  1157. backgroundColor: "#96bffd",
  1158. });
  1159. ////设置当前位置的marker标记
  1160. //var anchor = new qq.maps.Point(6, 6),
  1161. // size = new qq.maps.Size(50, 76),
  1162. // origin = new qq.maps.Point(0, 0),
  1163. // icon = new qq.maps.MarkerImage('../img/myself.png', size, origin, anchor);
  1164. var icon = new qq.maps.MarkerImage('../img/myself.png');
  1165. var marker = new qq.maps.Marker({
  1166. icon: icon,
  1167. map: map,
  1168. position: curentlatlng,
  1169. });
  1170. //setTimeout(function() { $("#container").find('[onresize="return;"]').remove(); $("#container").find('[onpositionupdate="return;"]').remove(); }, 500);
  1171. if(usercode) {
  1172. //实时路况图层
  1173. var tfclayer = new qq.maps.TrafficLayer();
  1174. tfclayer.setMap(map);
  1175. getRepairlatLng();
  1176. startHeart = setInterval(getRepairs, 60000);
  1177. }
  1178. }
  1179. //获取维修工位置
  1180. function getRepairlatLng() {
  1181. if(usercode) {
  1182. //维修工 未处理工单量
  1183. $.getJSON(huayi.config.callcenter_url + 'equipmentapi/api/worepairbase/getservicecount', {
  1184. serviceman: usercode,
  1185. wocode: $('#wocode').val()
  1186. }, function(data) {
  1187. if(data.state == "success") {
  1188. var a = data.data;
  1189. if(a != $(".count").text()) {
  1190. $(".remind").show();
  1191. }
  1192. }
  1193. });
  1194. //维修工的位置
  1195. $.getJSON(huayi.config.callcenter_url + 'wechatapi/api/location/getlocationasync', {
  1196. usercode: usercode
  1197. }, function(res) {
  1198. if(res.state.toLowerCase() == "success") {
  1199. var repairlat = res.data.longitude;
  1200. var repairlng = res.data.latitude;
  1201. if(repairlat && repairlng) {
  1202. var repairlatLng = new qq.maps.LatLng(repairlat, repairlng); //维修工位置这个位置需要每隔 1分钟 动态获取
  1203. //计算两点间的距离
  1204. var distance = qq.maps.geometry.spherical.computeDistanceBetween(curentlatlng, repairlatLng);
  1205. //删除标记
  1206. deleteOverlays();
  1207. //给维修工添加位置标记
  1208. getRepairPoint(repairlatLng);
  1209. //当两者距离小于50米视为到了
  1210. if(Math.ceil(distance) < 50) {
  1211. clearInterval(startHeart);
  1212. }
  1213. }
  1214. }
  1215. });
  1216. }
  1217. }
  1218. //给维修工添加位置标记(自定义标记,添加文本标记,划线)
  1219. function getRepairPoint(latLng) {
  1220. //var anchor = new qq.maps.Point(6, 6),
  1221. // size = new qq.maps.Size(50, 76),
  1222. // origin = new qq.maps.Point(0, 0),
  1223. // icon = new qq.maps.MarkerImage('../img/worker.png', size, origin, anchor);
  1224. var icon = new qq.maps.MarkerImage('../img/worker.png');
  1225. var marker = new qq.maps.Marker({
  1226. icon: icon,
  1227. map: map,
  1228. position: latLng
  1229. });
  1230. markersArray.push(marker);
  1231. }
  1232. //删除覆盖物
  1233. function deleteOverlays() {
  1234. if(markersArray) {
  1235. for(i in markersArray) {
  1236. markersArray[i].setMap(null);
  1237. }
  1238. markersArray.length = 0;
  1239. }
  1240. }
  1241. mui('.icons').on('tap', 'i', function() {
  1242. var index = parseInt(this.getAttribute("data-index"));
  1243. var parent = this.parentNode;
  1244. var children = parent.children;
  1245. if(this.classList.contains("mui-icon-star")) {
  1246. for(var i = 0; i < index; i++) {
  1247. children[i].classList.remove('mui-icon-star');
  1248. children[i].classList.add('mui-icon-star-filled');
  1249. }
  1250. } else {
  1251. for(var i = index; i < 5; i++) {
  1252. children[i].classList.add('mui-icon-star')
  1253. children[i].classList.remove('mui-icon-star-filled')
  1254. }
  1255. }
  1256. });
  1257. </script>
  1258. </body>
  1259. </html>