| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386 |
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
- <meta name="full-screen" content="yes">
- <meta name="x5-fullscreen" content="true">
- <meta name="apple-mobile-web-app-capable" content="yes">
- <meta name="apple-mobile-web-app-status-bar-style" content="black">
- <link rel="stylesheet" href="../layui/css/layui.css" />
- <link href="../css/mui.min.css" rel="stylesheet" />
- <link href="../css/mui.picker.min.css" rel="stylesheet" />
- <link rel="stylesheet" href="../css/iconfont.css" />
- <link rel="stylesheet" href="../css/inits.css" />
- <title>工单详情</title>
- <style>
- .sub_title {
- text-align: center;
- width: 80%;
- margin: 0 auto;
- margin-top: 20px;
- font-weight: normal;
- line-height: 24px;
- }
-
- .sub_title:before,
- .sub_title:after {
- display: inline-block;
- content: "";
- width: 13%;
- height: 1px;
- background: #c8b379;
- position: absolute;
- top: 50%;
- }
-
- .sub_title:before {
- left: 25%;
- }
-
- .sub_title:after {
- right: 25%;
- }
-
- .content {
- /*text-indent: 24px;
- font-size: 13px;
- line-height: 23px;
- margin: 20px 0;*/
- /*text-align: center;*/
- /*padding-top: 50px;*/
- }
-
- .img {
- background: url(../img/border2_02.png) no-repeat;
- height: 30px;
- background-size: cover;
- }
-
- @font-face {
- font-family: 'iconfont';
- /* project id 280843 */
- src: url('//at.alicdn.com/t/font_280843_z6lfyq17pjw3tyb9.eot');
- 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');
- }
-
- .iconfont {
- font-family: "iconfont";
- font-size: 18px;
- font-style: normal;
- color: #f49b07;
- -webkit-font-smoothing: antialiased;
- -webkit-text-stroke-width: 0.2px;
- -moz-osx-font-smoothing: grayscale;
- vertical-align: middle;
- /* padding-left:20px*/
- }
-
- .Details-map {
- height: 200px;
- border: 1px solid #ccc;
- width: 100%;
- }
- .map_tips{
- display: inline-block;
- width: 100%;
- margin-top: 80px;
- text-align: center;
- color: #13a7f1;
- }
- .mui-table-view .mui-media-object {
- min-width: 65px;
- height: 65px;
- line-height: 65px;
- }
-
- .mui-popover.mui-popover-action .mui-table-view {
- text-align: inherit;
- }
-
- .PJ_text {
- width: 80%;
- margin: 0 auto;
- }
-
- .PJ_chose {
- width: 80%;
- margin: 0 auto;
- text-align: center;
- }
-
- .PJ_chose ul {
- overflow: hidden;
- }
-
- .PJ_chose li {
- float: left;
- width: 48%;
- }
-
- .PJ_chose li p {
- padding: 6px 12px;
- border: 1px solid #c8c7cc;
- font-size: 12px;
- position: relative;
- /*border-radius: 5px;*/
- }
-
- .PJ_chose li i {
- color: #fff;
- position: absolute;
- right: -3px;
- bottom: 0;
- }
-
- .PJ-Start {
- width: 80%;
- margin: 0 auto;
- margin-bottom: 10px;
- }
-
- .PJ-Start i {
- /*margin-right: 5px;*/
- font-size: 30px;
- display: inline-block;
- width: 18%;
- }
-
- .PJ-Start p {
- width: 18%;
- text-align: center;
- margin-bottom: 0!important;
- }
-
- .mui-popover .mui-table-view {
- background-color: #fff;
- }
-
- .ServeContent .mui-table-view-cell:after {
- background-color: #fff;
- }
-
- .mui-table-view:after {
- background-color: #fff;
- }
-
- .mui-popover.mui-popover-action .mui-table-view .mui-table-view-cell:after {
- background-color: #fff;
- }
-
- h5 {
- margin-top: 15px;
- }
- /*.mui-table-view-cell {
- padding-top: 20px;
- padding-left: 12px;
- }
- */
-
- .size-16 {
- font-size: 16px;
- }
-
- textarea {
- font-size: 12px;
- color: #8f8f94;
- }
-
- .mui-btn {
- /*width: 80px;*/
- border-radius: 40px;
- padding: 6px 20px;
- }
-
- .Servelist {
- margin: 15px;
- padding: 5px;
- margin-bottom: 17px;
- border-left: 5px solid #13a7f1;
- color: #13a7f1;
- }
- /*进程css*/
-
- .ServeContent {
- border-top: 1px solid #c8c7cc;
- border-bottom: 1px solid #c8c7cc;
- /*padding: 12px;*/
- }
-
- .layui-text h3 {
- font-size: 16px;
- }
-
- .layui-timeline-item {
- padding-bottom: 10px;
- }
-
- .Workdeail {
- /*padding: 15px;*/
- width: 90%;
- margin: 0 auto;
- margin-bottom: 10%;
- }
-
- .Workdeail label {
- text-align: right;
- }
-
- .Workdeail li {
- padding: 0;
- }
-
- .fl {
- float: left;
- }
-
- .fr {
- float: right;
- }
-
- .layui-content {
- width: 90%;
- margin: 10px auto;
- }
- /*.img-box {
- float: left;
- width: 65px;
- text-align: center;
- line-height: 65px;
- height: 67px;
- background-color: #fff;
- border: 1px solid #ddd;
- border-radius: 4px;
- margin-right: 20px;
- margin-bottom: 10px;
- }*/
- /*.image-item {
- width: 65px;
- height: 65px;
- background-size: 100% 100%;
- display: inline-block;
- position: relative;
- border-radius: 5px;
- margin-bottom: 10px;
- }
- */
-
- .image-list {
- width: 100%;
- /* height: 85px; */
- background-size: cover;
- padding: 11px 15px;
- overflow: hidden;
- }
-
- .ND_deail {
- line-height: 37px;
- }
-
- .layui-timeline {
- padding-left: 20px;
- }
-
- .fl_ {
- float: left;
- }
-
- .fl_ li {
- float: left;
- width: 33%;
- }
-
- .fl_ li img {
- width: 100%;
- height: 85px;
- padding: 5px;
- }
-
- .fl_ li div {
- text-align: center;
- }
- /*自定义CSS*/
-
- .mui-preview-image.mui-fullscreen {
- position: fixed;
- z-index: 20;
- background-color: #000;
- }
-
- .mui-preview-header,
- .mui-preview-footer {
- position: absolute;
- width: 100%;
- left: 0;
- z-index: 10;
- }
-
- .mui-preview-header {
- height: 44px;
- top: 0;
- }
-
- .mui-preview-footer {
- height: 50px;
- bottom: 0px;
- }
-
- .mui-preview-header .mui-preview-indicator {
- display: block;
- line-height: 25px;
- color: #fff;
- text-align: center;
- margin: 15px auto 4;
- width: 70px;
- background-color: rgba(0, 0, 0, 0.4);
- border-radius: 12px;
- font-size: 16px;
- }
-
- .mui-preview-image {
- display: none;
- -webkit-animation-duration: 0.5s;
- animation-duration: 0.5s;
- -webkit-animation-fill-mode: both;
- animation-fill-mode: both;
- }
-
- .mui-preview-image.mui-preview-in {
- -webkit-animation-name: fadeIn;
- animation-name: fadeIn;
- }
-
- .mui-preview-image.mui-preview-out {
- background: none;
- -webkit-animation-name: fadeOut;
- animation-name: fadeOut;
- }
-
- .mui-preview-image.mui-preview-out .mui-preview-header,
- .mui-preview-image.mui-preview-out .mui-preview-footer {
- display: none;
- }
-
- .mui-zoom-scroller {
- position: absolute;
- display: -webkit-box;
- display: -webkit-flex;
- display: flex;
- -webkit-box-align: center;
- -webkit-align-items: center;
- align-items: center;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- justify-content: center;
- left: 0;
- right: 0;
- bottom: 0;
- top: 0;
- width: 100%;
- height: 100%;
- margin: 0;
- -webkit-backface-visibility: hidden;
- }
-
- .mui-zoom {
- -webkit-transform-style: preserve-3d;
- transform-style: preserve-3d;
- }
-
- .mui-slider .mui-slider-group .mui-slider-item img {
- width: auto;
- height: auto;
- max-width: 100%;
- max-height: 100%;
- }
-
- .mui-android-4-1 .mui-slider .mui-slider-group .mui-slider-item img {
- width: 100%;
- }
-
- .mui-android-4-1 .mui-slider.mui-preview-image .mui-slider-group .mui-slider-item {
- display: inline-table;
- }
-
- .mui-android-4-1 .mui-slider.mui-preview-image .mui-zoom-scroller img {
- display: table-cell;
- vertical-align: middle;
- }
-
- .mui-preview-loading {
- position: absolute;
- width: 100%;
- height: 100%;
- top: 0;
- left: 0;
- display: none;
- }
-
- .mui-preview-loading.mui-active {
- display: block;
- }
-
- .mui-preview-loading .mui-spinner-white {
- position: absolute;
- top: 50%;
- left: 50%;
- margin-left: -25px;
- margin-top: -25px;
- height: 50px;
- width: 50px;
- }
-
- .mui-preview-image img.mui-transitioning {
- -webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease;
- transition: transform 0.5s ease, opacity 0.5s ease;
- }
-
- @-webkit-keyframes fadeIn {
- 0% {
- opacity: 0;
- }
- 100% {
- opacity: 1;
- }
- }
-
- @keyframes fadeIn {
- 0% {
- opacity: 0;
- }
- 100% {
- opacity: 1;
- }
- }
-
- @-webkit-keyframes fadeOut {
- 0% {
- opacity: 1;
- }
- 100% {
- opacity: 0;
- }
- }
-
- @keyframes fadeOut {
- 0% {
- opacity: 1;
- }
- 100% {
- opacity: 0;
- }
- }
-
- p img {
- max-width: 100%;
- height: auto;
- }
-
- .click_btn {
- display: none;
- }
-
- .remind {
- padding: 6px 12px;
- background-color: #fffced;
- color: #f49b07;
- display: none;
- }
-
- .user-img img {
- width: 50px;
- height: 50px;
- border-radius: 50%;
- margin-right: 10px;
- }
-
- .user-img {
- margin-top: 0;
- }
-
- .evaluate-li h5 {
- margin-top: 0;
- }
-
- .evaluate-details {
- color: #0C0C0C;
- }
-
- .eva-message {
- float: left;
- margin-top: 8px;
- }
-
- .eva-message li {
- float: left;
- background-color: #d4effd;
- margin-right: 5px;
- margin-bottom: 5px;
- border-radius: 8px;
- }
-
- .eva-message li p {
- padding: 6px 12px;
- font-size: 12px;
- }
-
- .mui-icon-star-filled {
- color: #FFB400;
- font-size: 20px;
- }
-
- .mui-icon-star {
- color: #B5B5B5;
- font-size: 20px;
- }
-
- .mui-content {
- background-color: #efeff4;
- }
-
- .evaluate-center {
- background-color: #fff;
- padding-top: 5px;
- box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.4);
- margin-bottom: 10px;
- }
-
- .layui-timeline-axiss {
- position: absolute;
- left: -5px;
- top: 0;
- z-index: 10;
- width: 20px;
- height: 20px;
- line-height: 20px;
- background-color: #fff;
- color: color: #ccc;
- border-radius: 50%;
- text-align: center;
- cursor: pointer;
- color: #ccc;
- }
-
- .click_btn {
- display: none;
- }
-
- .Center {
- text-align: center;
- }
-
- .check {
- border-color: #007AFF !important;
- position: relative;
- }
-
- .PJ_chose li p.check:before {
- content: "";
- display: block;
- position: absolute;
- right: 0;
- bottom: 0;
- width: 0;
- height: 0;
- border-bottom: 35px solid #007AFF;
- border-left: 35px solid transparent;
- }
-
- .evaluate-box {
- display: none;
- background-color: #fff;
- padding-top: 5px;
- box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.4);
- margin-bottom: 10px;
- }
-
- .ND_faultdescripe {
- display: inline-block;
- width: 60%;
- padding: 11px 0;
- }
-
- p,
- span {
- word-break: break-all;
- word-wrap: break-word;
- }
-
- .mui-popup-backdrop{
- z-index: 1000;
- }
- </style>
- </head>
- <body>
- <div class="mui-content">
- <div class="content">
- <!--地图-->
- <div class="Details-map" id="container">
- <span id="map_tips" class="map_tips">定 位 中 · · ·</span>
- <!--这是个地图-->
- </div>
- <ul id="logs"></ul>
- <!--工单详情-->
- <div class="evaluate-center">
- <div class="remind">
- <i class="iconfont"></i>
- <span>您的前面还有<span class="count">0</span>条工单待维修,请耐心等待</span>
- <i class="iconfont fr guanbi"></i>
- </div>
- <h5 class='mui-h5 Servelist'>
- <span>服务记录</span>
- </h5>
- <div class="ServeContent">
- <!--<!-工单进度-->
- <div class="layui-content">
- <ul class="layui-timeline">
- <!--
- <li class="layui-timeline-item">
- <i class="layui-icon layui-timeline-axis"></i>
- <div class="layui-timeline-content layui-text">
- <h3 class="layui-timeline-title"> <span style="margin-right:10px;color: #0099ff;">报修</span> </h3>
- <p>2017年8月15日 12:20:56</p>
- <p>
- 张一山通过微信报修
- </p>
- </div>
- </li>
- <li class="layui-timeline-item">
- <i class="layui-icon layui-timeline-axiss"></i>
- <div class="layui-timeline-content layui-text">
- <h3 class="layui-timeline-title"> <span style="margin-right:10px;color: #ccc;">派工</span> </h3>
- <p>2017年8月15日 12:20:56</p>
- <p>
- 已派工给王师傅
- </p>
- </div>
- </li>
- <li class="layui-timeline-item">
- <i class="layui-icon layui-timeline-axiss"></i>
- <div class="layui-timeline-content layui-text">
- <h3 class="layui-timeline-title"> <span style="margin-right:10px;color: #ccc;">接单</span> </h3>
- <p>2017年8月15日 12:20:56</p>
- </div>
- </li>
- <li class="layui-timeline-item">
- <i class="layui-icon layui-timeline-axiss"></i>
- <div class="layui-timeline-content layui-text">
- <h3 class="layui-timeline-title"> <span style="margin-right:10px;color: #ccc;">维修</span> </h3>
- <p>2017年8月15日 12:20:56</p>
- </div>
- </li>
- <li class="layui-timeline-item">
- <i class="layui-icon layui-timeline-axiss"></i>
- <div class="layui-timeline-content layui-text">
- <h3 class="layui-timeline-title"> <span style="margin-right:10px;color: #ccc;">完工</span> </h3>
- <p>2017年8月15日 12:20:56</p>
- </div>
- </li>-->
-
- </ul>
- <div style="padding: 10px;" class="btn-grop">
- <div style="width: 80%;margin: 0 auto;overflow: hidden;" class="btn-gropbox">
- <!--<button type="button" class="mui-btn fl mui-btn-outlined " style="margin-right: 20px;" id="Back">立即返回</button>-->
- <!--<button type="button" id="HY_add" class="mui-btn fr mui-btn-warning mui-btn-outlined click_btn">提交</button>-->
- <button type="button" id="ND_cearl" class="mui-btn fr mui-btn-primary mui-btn-outlined click_btn">取消工单</button>
- <!--<a href="#picture" class="mui-btn mui-btn-primary mui-btn-block mui-btn-outlined" style="padding: 5px 20px;">评价工单</a>-->
- <a href="#picture" id="ND_PJ" class="mui-btn mui-btn-primary fr mui-btn-outlined click_btn" style="font-size: 14px;">评价工单</a>
- </div>
- </div>
- <!--<div style="padding: 10px;" class="btn-grop">
- <div style="width: 80%;margin: 0 auto;overflow: hidden;">
- <a href="#picture" class="mui-btn mui-btn-primary mui-btn-outlined" style="font-size: 14px;">评价工单</a>
- </div>
- </div>
- <div style="padding: 10px;" class="btn-grop">
- <div style="width: 80%;margin: 0 auto;overflow: hidden;">
- <a class="mui-btn mui-btn-primary mui-btn-outlined" style="font-size: 14px;">取消工单</a>
- </div>
- </div>-->
- </div>
- <div id="picture" class="mui-popover mui-popover-action mui-popover-bottom">
- <div style="background-color: #fff; margin-bottom: -7px;">
- <ul class="mui-table-view">
- <!--基本信息-->
- <li class="mui-table-view-cell">
- <div class="mui-table">
- <div class="mui-table-cell mui-col-xs-8">
- <img class="mui-media-object mui-pull-left" src="../img/logo.png">
- <h5 class="serviceman size-16"></h5>
- </div>
- <div class="mui-table-cell mui-col-xs-4 mui-text-right">
- <span class="mui-h5 settime"></span>
- </div>
- </div>
- </li>
- </ul>
- <!--评分-->
- <div class="mui-content-padded mui-text-center PJ-Start">
- <div class="evaluate_world">
- <p class="mui-inline">
- 差
- </p>
- <p class="mui-inline">
- 不满意
- </p>
- <p class="mui-inline">
- 一般
- </p>
- <p class="mui-inline">
- 满意
- </p>
- <p class="mui-inline">
- 很满意
- </p>
- </div>
- <div class="icons">
- <i data-index="1" class="mui-icon mui-icon-star"></i>
- <i data-index="2" class="mui-icon mui-icon-star"></i>
- <i data-index="3" class="mui-icon mui-icon-star"></i>
- <i data-index="4" class="mui-icon mui-icon-star"></i>
- <i data-index="5" class="mui-icon mui-icon-star"></i>
- </div>
- </div>
- <!--意见-->
- <div class="mui-input-row PJ_text">
- <textarea id="textarea" rows="" placeholder="请及时进行评价以免影响您的下次使用,谢谢配合"></textarea>
- </div>
- <div class="mui-input-row PJ_text">
- <input type="text" id="times" placeholder="维修工到场时间" readonly="readonly" />
- </div>
- <!--选项-->
- <div class="mui-input-row PJ_chose">
- <ul>
- <li>
- <p index="维修及时">维修及时
- <i class="mui-icon mui-icon-checkmarkempty"></i>
- </p>
- </li>
- <li style="float: right;">
- <p index="态度特别棒">
- 态度特别棒
- <i class="mui-icon mui-icon-checkmarkempty"></i>
- </p>
- </li>
- <li>
- <p index="服务专业">服务专业
- <i class="mui-icon mui-icon-checkmarkempty"></i>
- </p>
- </li>
- <li style="float: right;">
- <p index="师傅很用心">师傅很用心
- <i class="mui-icon mui-icon-checkmarkempty"></i>
- </p>
- </li>
- </ul>
- </div>
- <!--按钮-->
- <div style="padding: 10px;padding-bottom: 50px;" class="btn-grop mui-text-center">
- <div style="width: 80%;margin: 0 auto;">
- <button type="button" id="Back_" class="mui-btn mui-btn-outlined" style="margin-right: 20px;">取消</button>
- <button type="button" id="HY_add" data-loading-text="评价中" class="mui-btn mui-btn-primary mui-btn-outlined ">评价</button>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <!--基本信息-->
- <div class="evaluate-center">
- <h5 class='mui-h5 Servelist'>
- <span>工单信息</span>
- </h5>
- <div class="ServeContent">
- <div class="Workdeail">
- <ul class="mui-table-view ">
- <li class="mui-table-view-cell">
- <div class="mui-input-row">
- <label class="label">项目名称:</label>
- <span class="ND_deail" id="ND_proname"></span>
- </div>
- </li>
- <li class="mui-table-view-cell">
- <div class="mui-input-row">
- <label class="label">项目类型:</label>
- <span class="ND_deail" id="ND_protype"></span>
- </div>
- </li>
- <li class="mui-table-view-cell">
- <div class="mui-input-row">
- <label class="label">报修地点:</label>
- <span class="ND_deail" id="ND_repairreplace"></span>
- </div>
- </li>
- <li class="mui-table-view-cell">
- <div class="mui-input-row">
- <label class="label">报修时间:</label>
- <span class="ND_deail" id="ND_repairtime"></span>
- </div>
- </li>
- <li class="mui-table-view-cell">
- <div class="mui-input-row">
- <label class="label">报修人:</label>
- <span class="ND_deail" id="ND_repairman"></span>
- </div>
- </li>
- <li class="mui-table-view-cell">
- <div class="mui-input-row">
- <label class="label">联系方式:</label>
- <span class="ND_deail" id="ND_contactway"></span>
- </div>
- </li>
- <!--<li class="mui-table-view-cell">
- <div class="mui-input-row">
- <label class="label">系统名称:</label>
- <span class="ND_deail" id="ND_sysname"></span>
- </div>
- </li>
- <li class="mui-table-view-cell">
- <div class="mui-input-row">
- <label class="label">设备名称:</label>
- <span class="ND_deail ND_equipname"></span>
- </div>
- </li>
- <li class="mui-table-view-cell">
- <div class="mui-input-row">
- <label class="label">故障类型:</label>
- <span class=" ND_deail ND_faulttype"></span>
- </div>
- </li>-->
- <li class="mui-table-view-cell">
- <div class="mui-input-row">
- <label class="label">故障说明:</label>
- <!--<textarea id="ND_faultdescripe" class="" name="" rows="" cols=""></textarea>-->
- <span class="ND_faultdescripe" id="ND_faultdescripe"></span>
- </div>
- </li>
- <li class="mui-table-view-cell pic" style="display:none;">
- <div class="mui-input-row">
- <label class="label">故障图片:</label>
- </div>
- </li>
- <li class="mui-table-view-cell pic" style="display:none;">
- <div class="mui-input-row">
- <div class="image-list faultpic">
- <ul class="fl_"></ul>
- </div>
- </div>
- </li>
- <!--<li class="mui-table-view-cell">
- <div class="mui-input-row">
- <label class="label">预约时间:</label>
- <span class="ND_deail ND_appointtime"></span>
- </div>
- </li>
- <li class="mui-table-view-cell">
- <div class="mui-input-row">
- <label class="label">指定维修人:</label>
- <span class=" ND_deail ND_appointman"></span>
- </div>
- </li>-->
- </ul>
- </div>
- </div>
- </div>
- <!--评价记录-->
- <div class="evaluate-box ">
- <div class="">
- <h5 class='mui-h5 Servelist'>
- <span>用户评价</span>
- </h5>
- </div>
- <ul class="mui-table-view mui-table-view-striped mui-table-view-condensed evaluatelist"></ul>
- </div>
- <input type="hidden" id="woid" />
- <input type="hidden" id="wocode" />
- </div>
- </div>
- <script src="../js/jquery.min.js?1.1"></script>
- <script src="../layui/layui.js?1.1"></script>
- <script src="../js/zepto.js?1.1"></script>
- <script src="../js/mui.min.js?1.1"></script>
- <script src="../js/mui.picker.min.js?1.1"></script>
- <script src="../js/mui.zoom.js?1.1"></script>
- <script src="../js/mui.previewimage.js?1.1"></script>
- <script src="../Script/Common/huayi.config.js?1.1"></script>
- <script src="../Script/Common/huayi.http.js?1.1"></script>
- <script type="text/javascript" src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js?1.1"></script>
- <script type="text/javascript" src="https://map.qq.com/api/js?v=2.exp&key=26KBZ-YBJRO-3RPWW-SUEYL-K2KKQ-BTBYL&libraries=geometry"></script>
- <!--<script src="../js/locations1.js?1.1"></script>-->
- <!--<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js?1.1"></script>-->
- <script>
- function getFormatDate(obj) {
- var nowDate = new Date();
- var year = nowDate.getFullYear();
- var month = nowDate.getMonth() + 1 < 10 ? "0" + (nowDate.getMonth() + 1) : nowDate.getMonth() + 1;
- var date = nowDate.getDate() < 10 ? "0" + nowDate.getDate() : nowDate.getDate();
- obj.text(year + "-" + month + "-" + date);
- }
- mui.previewImage();
- (function($, doc) {
- $.init();
- var options = {
- "beginYear": 1990,
- "endYear": 2099
- }
- doc.getElementById('times').addEventListener('tap', function() {
- var _self = this;
- // var optionsJson = this.getAttribute('data-options') || '{}';
- // var options = JSON.parse(optionsJson);
- // var id = this.getAttribute('id');
- /*
- * 首次显示时实例化组件
- * 示例为了简洁,将 options 放在了按钮的 dom 上
- * 也可以直接通过代码声明 optinos 用于实例化 DtPicker
- */
- _self.picker = new $.DtPicker(options);
- _self.picker.show(function(rs) {
- /*
- * rs.value 拼合后的 value
- * rs.text 拼合后的 text
- * rs.y 年,可以通过 rs.y.vaue 和 rs.y.text 获取值和文本
- * rs.m 月,用法同年
- * rs.d 日,用法同年
- * rs.h 时,用法同年
- * rs.i 分(minutes 的第二个字母),用法同年
- */
- doc.getElementById('times').value = rs.text;
- /*
- * 返回 false 可以阻止选择框的关闭
- * return false;
- */
- /*
- * 释放组件资源,释放后将将不能再操作组件
- * 通常情况下,不需要示放组件,new DtPicker(options) 后,可以一直使用。
- * 当前示例,因为内容较多,如不进行资原释放,在某些设备上会较慢。
- * 所以每次用完便立即调用 dispose 进行释放,下次用时再创建新实例。
- */
- _self.picker.dispose();
- _self.picker = null;
- });
- }, false);
- })(mui, document);
- $(document).ready(function() {
- var id = helper.request.queryString("id");
- //详情
- if(id) {
- bind(id);
- getFormatDate($(".settime"));
- }
- $(".guanbi").on('tap', function() {
- $(".remind").hide();
- })
- $(".PJ_chose p").on('tap', function() {
- if($(this).is('.check')) {
- $(this).removeClass('check')
- } else {
- $(this).addClass('check');
- }
- })
- $("#HY_add").on('tap', function() {
- var that = this;
- var Arr = [];
- $('.check').each(function(i, n) {
- var a = $(this).attr('index');
- Arr.push(a);
- })
- var Star = $(".mui-icon-star-filled").length;
- if(Star == 0) {
- mui.alert('请选择星级!');
- return;
- }
- if(!$("#times").val()) {
- mui.alert('请选择到场时间!');
- return;
- }
- $.ajax({
- type: "post",
- url: huayi.config.callcenter_url + 'equipmentapi/api/worepairbase/evaluate',
- async: true,
- dataType: 'json',
- beforeSend: function() {
- mui(that).button('loading');
- },
- data: {
- woid: $("#woid").val(),
- wocode: $("#wocode").val(),
- channel: 4,
- arrivetime: $("#times").val(),
- evaluate: $("#textarea").val(),
- score: Star,
- label: Arr
- },
- success: function(data) {
- mui(that).button('reset');
- if(data.state == "success") {
- mui.alert('评价成功');
- window.location.replace(window.location);
- }
- },
- error: function(textStatus) {
- mui(that).button('reset');
- mui.toast('网络繁忙,请稍后再试...');
- },
- complete: function(XMLHttpRequest, textStatus) {
- mui(that).button('reset');
- if(textStatus == 'timeout') {
- var xmlhttp = window.XMLHttpRequest ? new window.XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHttp");
- xmlhttp.abort();
- mui.toast('网络超时,请稍后再试...');
- }
- },
- });
- });
- //取消工单
- $("#ND_cearl").on('tap', function() {
- var btnArray = ['否', '是'];
- mui.confirm('确定要取消本次报修吗?', '温馨提示', btnArray, function(e) {
- if(e.index == 1) {
- //请求接口
- $.ajax({
- type: "post",
- url: huayi.config.callcenter_url + 'equipmentapi/api/worepairbase/cancle',
- async: true,
- dataType: 'json',
- data: {
- wocode: $('#wocode').val(),
- channel: 4
- },
- success: function(data) {
- if(data.state == "success") {
- mui.alert('取消成功');
- window.location.replace(window.location);
- }
- }
- });
- }
- })
- })
- //返回工单
- $('#Back').on('tap', function() {
- window.history.back();
- });
- $('#Back_').on('tap', function() {
- //window.history.back();
- mui('.mui-popover').popover('toggle', document.getElementById("ND_PJ"));
- });
- })
- function bind(id) {
- $.ajax({
- type: "get",
- url: huayi.config.callcenter_url + 'equipmentapi/api/worepairbase/getsingle',
- async: true,
- dataType: 'json',
- data: {
- id: id ///测试 ID
- },
- success: function(result) {
- if(result.state == "success") {
- var data = result.data.model;
- var items = result.data.items;
- var evaluate = result.data.evaluate;
- $("#ND_proname").text(data.projectname);
- $("#ND_protype").text(data.protypename);
- $("#ND_repairreplace").text(data.repairreplace + " "+ (data.repairoom || '')); //报修地点
- $("#ND_repairtime").text(data.repairtime); //报修时间
- $("#ND_repairman").text(data.repairman); //报修人
- $("#ND_contactway").text(data.contactway);
- // $("#ND_sysname").text(data.sysname);
- // $(".ND_equipname").text(data.equipname);
- // $(".ND_faulttype").text(data.faulttype);
- $("#ND_faultdescripe").text(data.faultdescripe);
- // $(".ND_appointtime").text(data.appointtime);
- // $(".ND_appointman").text(data.appointman);
- $('.serviceman').text(data.repairman); //
- $('#woid').val(data.id);
- $('#wocode').val(data.wocode);
- //故障图片
- $("#ND_appointtime").text(data.appointtime);
- $("#ND_appointman").text(data.appointman);
- var type = data.wostate;
- if(type == 0) {
- $("#ND_cearl").show();
- } else if(type == 1) {
- $("#Back").removeClass('fl');
- $('.btn-gropbox').addClass('Center');
- if(data.touser) {
- usercode = data.touser;
- }
- } else if(type == 2) {
- $("#ND_PJ").show();
- } else if(type == 3) {
- $("#Back").removeClass('fl');
- $('.btn-gropbox').addClass('Center');
- $('.btn-gropbox').hide();
- } else if(type == 7) {
- $("#Back").removeClass('fl');
- $('.btn-gropbox').addClass('Center');
- $('.btn-gropbox').hide();
- }
- getLocation();
- //
- //图片展示
- var Files = data.faultpic;
- if(Files && Files.length > 0) {
- $(".pic").show();
- $(Files).each(function(i, n) {
- $('<li>' +
- '<div>' +
- '<img class="image-item" alt="" data-preview-group="1" data-preview-src="" src="' + n.fileurl + '" alt="" />' +
- '</div>' +
- '</li>').appendTo('.fl_');
- })
- }
- //工单进度
- var html = '';
- $(items).each(function(i, n) {
- var wostate = n.wostate;
- var State = '';
- switch(n.wostate + '') {
- case '0':
- State = "报修";
- break;
- case '1':
- State = "已接单";
- break;
- case '2':
- State = "已处理";
- break;
- case '3':
- State = "已评价";
- break;
- case '7':
- State = "挂起";
- break;
- case '8':
- State = "已取消";
- break;
- }
- html += '<li class="layui-timeline-item">' +
- '<i class="layui-icon layui-timeline-axis"></i>' +
- '<div class="layui-timeline-content layui-text">' +
- '<h3 class="layui-timeline-title"> <span style="margin-right:10px;color: #0099ff;">' + State + '</span> </h3>' +
- '<p>' +
- '' + n.createtime + '' +
- '</p>' +
- '<p>' +
- '' + n.detail + '' +
- '</p>' +
- '</div>' +
- '</li>'
- });
- $(html).appendTo('.layui-timeline');
- //评价信息
- if(evaluate.length > 0) {
- $('.evaluate-box').show()
- var html = '';
- $(evaluate).each(function(i, n) {
- var score = n.score;
- var label = n.label;
- html += '<li class="mui-table-view-cell evaluate-li">';
- html += '<div class="mui-table">';
- html += '<div class="mui-table-cell mui-col-xs-7">';
- html += '<h5><i class="user-img"><img src="../img/logo.png" alt="" /></i><span>' + n.createusername + '</span></h5>';
- html += '<p class="mui-h6 mui-ellipsis"><span>' + n.createtime + '</span></p>';
- html += '</div>';
- html += '<div class="mui-table-cell mui-col-xs-5 mui-text-right">';
- html += '<div class="mui-content-padded mui-text-center details-Start aaa">';
- html += '<div class="icons mui-inline">';
- for(var i = 0; i < score; i++) {
- html += '<i data-index="1" class="mui-icon mui-icon-star-filled"></i>';
- }
- html += '</div>';
- html += '</div>';
- html += '</div>';
- html += '</div>';
- html += '<div class="mui-table">';
- html += '<p class="mui-h6 ">';
- html += '<span class="evaluate-details">' + n.evaluate + '</span>';
- html += '</p>';
- html += '</div>';
- html += '<div class="mui-table">';
- html += '<ul class="eva-message">';
- for(var i = 0; i < label.length; i++) {
- html += '<li>';
- html += '<p>' + label[i] + '</p>';
- html += '</li>';
- }
- html += '</ul>';
- html += '</div>';
- html += '</li>';
- // $(').appendTo('.evaluatelist ');
- })
- $(html).appendTo('.evaluatelist ');
- }
- }
- }
- });
- }
- var map, curentlatlng, startHeart, markersArray = [],
- usercode;
- //获取当前位置
- function getLocation() {
- var geolocation = new qq.maps.Geolocation("26KBZ-YBJRO-3RPWW-SUEYL-K2KKQ-BTBYL", "myappV1.00");
- var options = {
- timeout: 8000
- };
- geolocation.getLocation(showPosition, showErr, options)
- }
- function showErr(err) {
- // mui.alert("定位失败!");
- getLocation();
- };
- function showPosition(position) {
- var lat = position.lat;
- var lng = position.lng;
- curentlatlng = new qq.maps.LatLng(lat, lng); //当前地理位置
- //创建地图
- map = new qq.maps.Map(document.getElementById("container"), {
- center: curentlatlng,
- zoom: 15,
- zoomControl: true, //设置缩放控制启用
- zoomControlOptions: { //设置缩放控件的样式状态
- style: qq.maps.ZoomControlStyle.SMALL
- },
- //如果为 true,在初始化地图时不会清除地图容器内的内容
- noClear: true,
- //用作地图 div 的背景颜色。当用户进行平移时,如果尚未载入图块,则显示此颜色。仅在地图初始化时,才能设置此选项
- backgroundColor: "#96bffd",
- });
- ////设置当前位置的marker标记
- //var anchor = new qq.maps.Point(6, 6),
- // size = new qq.maps.Size(50, 76),
- // origin = new qq.maps.Point(0, 0),
- // icon = new qq.maps.MarkerImage('../img/myself.png', size, origin, anchor);
- var icon = new qq.maps.MarkerImage('../img/myself.png');
- var marker = new qq.maps.Marker({
- icon: icon,
- map: map,
- position: curentlatlng,
- });
- //setTimeout(function() { $("#container").find('[onresize="return;"]').remove(); $("#container").find('[onpositionupdate="return;"]').remove(); }, 500);
- if(usercode) {
- //实时路况图层
- var tfclayer = new qq.maps.TrafficLayer();
- tfclayer.setMap(map);
- getRepairlatLng();
- startHeart = setInterval(getRepairs, 60000);
- }
- }
- //获取维修工位置
- function getRepairlatLng() {
- if(usercode) {
- //维修工 未处理工单量
- $.getJSON(huayi.config.callcenter_url + 'equipmentapi/api/worepairbase/getservicecount', {
- serviceman: usercode,
- wocode: $('#wocode').val()
- }, function(data) {
- if(data.state == "success") {
- var a = data.data;
- if(a != $(".count").text()) {
- $(".remind").show();
- }
- }
- });
- //维修工的位置
- $.getJSON(huayi.config.callcenter_url + 'wechatapi/api/location/getlocationasync', {
- usercode: usercode
- }, function(res) {
- if(res.state.toLowerCase() == "success") {
- var repairlat = res.data.longitude;
- var repairlng = res.data.latitude;
- if(repairlat && repairlng) {
- var repairlatLng = new qq.maps.LatLng(repairlat, repairlng); //维修工位置这个位置需要每隔 1分钟 动态获取
- //计算两点间的距离
- var distance = qq.maps.geometry.spherical.computeDistanceBetween(curentlatlng, repairlatLng);
- //删除标记
- deleteOverlays();
- //给维修工添加位置标记
- getRepairPoint(repairlatLng);
- //当两者距离小于50米视为到了
- if(Math.ceil(distance) < 50) {
- clearInterval(startHeart);
- }
- }
- }
- });
- }
- }
- //给维修工添加位置标记(自定义标记,添加文本标记,划线)
- function getRepairPoint(latLng) {
- //var anchor = new qq.maps.Point(6, 6),
- // size = new qq.maps.Size(50, 76),
- // origin = new qq.maps.Point(0, 0),
- // icon = new qq.maps.MarkerImage('../img/worker.png', size, origin, anchor);
- var icon = new qq.maps.MarkerImage('../img/worker.png');
- var marker = new qq.maps.Marker({
- icon: icon,
- map: map,
- position: latLng
- });
- markersArray.push(marker);
- }
- //删除覆盖物
- function deleteOverlays() {
- if(markersArray) {
- for(i in markersArray) {
- markersArray[i].setMap(null);
- }
- markersArray.length = 0;
- }
- }
- mui('.icons').on('tap', 'i', function() {
- var index = parseInt(this.getAttribute("data-index"));
- var parent = this.parentNode;
- var children = parent.children;
- if(this.classList.contains("mui-icon-star")) {
- for(var i = 0; i < index; i++) {
- children[i].classList.remove('mui-icon-star');
- children[i].classList.add('mui-icon-star-filled');
- }
- } else {
- for(var i = index; i < 5; i++) {
- children[i].classList.add('mui-icon-star')
- children[i].classList.remove('mui-icon-star-filled')
- }
- }
- });
- </script>
- </body>
- </html>
|