zhoufan
/
SQ12345_Web


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703
							<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<script src="../js/mui.min.js"></script>
		<style>
			/*通过CSS*/
			
			.mui-bar-nav {
				background-color: #00a1cb;
			}
			
			.mui-title {
				color: #fff;
			}
			
			.mui-action-back {
				color: #fff;
			}
			
			.Phone img {
				width: 13px;
				height: 13px;
				border-radius: 50%;
				/*		 vertical-align: text-bottom;*/
				margin-right: 3px;
				vertical-align: initial;
			}
			
			.size-16 {
				font-size: 16px;
			}
			
			.States {
				background: #fd7c7d;
				color: #fff;
				padding: 3px 6px;
				border-radius: 5px;
			}
			
			.mui-table-view-cell {
				padding-right: 20px!important;
			}
			
			.Active {
				color: #00a1cb;
			}
			
			.Active p {
				color: #000;
				font-weight: 400;
			}
			
			.size-12 {
				font-size: 12px;
			}
			
			.size-14 {
				font-size: 14px;
			}
			
			.size-16 {
				font-size: 16px;
			}
			
			.mui-card-footer a {
				display: inline-block;
				text-align: center;
				font-size: 14px;
			}
			
			.mui-card-footer a:active {
				color: #00a1cb;
			}
			
			.mui-padding {
				padding: 11px 15px;
				padding-right: 20px!important;
				/*border-bottom: 1px solid #c8c7cc;*/
			}
			
			.GDgz {
				background-color: #fff;
			}
			
			.GDgz span {
				line-height: 18px;
				margin-right: 3px;
			}
			
			.mui-modal {
				display: block
			}
			
			.work-content {
				padding: 5px 12px;
			}
			
			.work-content span {
				line-height: 20px;
			}
			
			.Caozuo a {
				color: #000;
			}
			
			#Popover_0 {
				top: 50px;
				background-color: #fff;
			}
			
			#next-header {
				background-color: #fff;
			}
			
			.mui-grid-view.mui-grid-9 {
				background: #fff;
				border: none;
			}
			
			.mui-grid-view.mui-grid-9 .mui-table-view-cell {
				border: none;
			}
			
			#F_ComContent {
				line-height: 20px;
				font-size: 14px;
				text-indent: 20px;
				padding-bottom: 10px;
			}
			
			.message-box {
				padding-top: 20px;
			}
			
			.message-box li {
				padding-top: 5px;
			}
			
			.mui-card-footer:before,
			.mui-card-header:after {
				background-color: #fff;
			}
			
			.DIV {
				margin-bottom: 20px;
			}
			
			.BTS {
				display: none;
			}
			.img-box {
				float: left;
				width: 20%;
				height:60px;
				margin: 2%;
				text-align: center;
			}
			.img-box img{
				width: 100%;
				height: 100%;
			}
			.image-list {
				display: none;
				overflow: hidden;
			}
			.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;
			}
			.BTS ul{
				overflow: hidden;
			}
			.BTS ul li{
				float: left;
				
			}
			.BTS ul li a{
				
			}
			.btn_agree{
				text-align: center;
				width: 80%;
				font-size: 14px !important;
				margin: 10px 10%;
				height: 30px;
				line-height: 4px !important;
				border: 1px solid #007aff;
				color: #FFFFFF;
				-moz-border-radius: 5px; /* Firefox */ 
				-webkit-border-radius: 5px; /* Safari 和 Chrome */
				border-radius: 5px; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav" style="padding-right: 15px;height: 50px;color: #fff;">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">工单详情</h1>
		</header>
		<div class="mui-content">
			<!--<ul class="mui-table-view mui-table-view-chevron">-->
			<!--<li class="mui-padding">-->
			<div class=" mui-table mui-table-view mui-padding" style="margin-top: 0;">
				<div class="mui-table-cell mui-col-xs-10">
					<h4 class="mui-ellipsis size-16">
		                    	
		                    	<span>工单编号:</span><span id="ID" style="-webkit-user-select:text;"></span>
		                    </h4>

				</div>
				<div class="mui-table-cell mui-col-xs-2 mui-text-right">
					<span class="mui-h5 States" style="display: none;">待解决</span>
				</div>
			</div>
			<!--<div class="mui-table mui-table-view work-content ">
				<h5 class=" Active size-16">		                    	
		                    	<span >投诉标题:<p id="F_ComTitle" ></p></span>
		                    	
				</h5>
				<h5 class="Active size-16 " style="line-height: 15px;">		                    	
		                    	<span>投诉内容:</span><h5 id="F_ComContent"></h5>
				</h5>
			</div>-->
			<!--信息展示-->
			<ul class="mui-table-view size-14 message-box">
				<li class="work-content">
					<span >投诉标题:</span>
		            <span style="color:#000000;" id="F_ComTitle" ></span>
				</li>
				<li class="work-content">
					<span >投诉内容:</span>
		            <span style="color:#989898;" id="F_ComContent" ></span>  
				</li>
				<li class="work-content">
					<span>
						<i class="mui-icon mui-icon-location size-16"></i>
						投诉地址:
					</span>
					<span id="AreaName"></span>
					<span id="AreaName_deta"></span>

				</li>
				<li class="work-content">
					<span>
						<i class="mui-icon  mui-icon-person size-16"></i>
						投诉人:
					</span>
					<span id="F_CusName"></span>
				</li>
				<li class="work-content">
					<span>
						<i class="mui-icon mui-icon-phone size-16"></i>
						投诉人电话:
					</span>
					<span id="F_CusPhone">
					</span>
				</li>
				<li class="work-content">
					<span>
						<i class="mui-icon mui-icon-compose size-16"></i>
						工单类型:
					</span>
					<span id="TypeName1"></span>
				</li>
				<li class="work-content" style="padding-bottom: 20px;">
					<span>
						<i class="mui-icon mui-icon-paperclip size-16"></i>
						提交时间:
					</span><span id="F_CreateTime"></span>
				</li>
				<!--图片展示-->
				<li class="work-content" style="padding-bottom: 20px;">
					<div id='image-list' class="row image-list"></div>
				</li>
			</ul>
			<div class="mui-table-view  BTS">
				<h4 class="mui-ellipsis size-16" style="padding: 20px 0px 0px 10px; margin: 0px;">操作按钮：</h4>
				<div class="mui-card-footer">
					<ul class="mui-table-view mui-grid-view mui-grid-9">
					</ul>
				</div>
			</div>
			<!--工单进程-->
			<div class="mui-table-view work-content ">
				<div class="mui-table-cell mui-col-xs-10">
					<h4 class="mui-ellipsis size-16" style="padding: 6px ;">工单跟踪信息</h4>
				</div>
			</div>
			<!--工单进度-->
			<div class="mui-padding GDgz">

			</div>

			<!--<nav class="mui-bar mui-bar-tab ">
				<a href="#Popover_0" class="mui-tab-item">
					<span class="mui-icon mui-icon-compose"></span>添加评论</a>
			</nav>-->
		</div>
		<script src="../js/app.js"></script>
		<script src="../js/zepto.js"></script>
		<script src="../js/huayi.config.js"></script>
		<script src="../js/huayi.http.js"></script>
		<script src="../js/mui.zoom.js"></script>
		<script src="../js/mui.previewimage.js"></script>
		<script type="text/javascript">
			mui.init();
			mui.previewImage();
			mui.init({
				swipeBack: true //启用右滑关闭功能
			});
			var id = helper.request.queryString("id");
			mui.plusReady(function() {
				var wv = plus.webview.currentWebview();
				var vText = wv.name;

				var token = localStorage.getItem("token");
				var ID = document.getElementById("ID").innerHTML = vText;
				//工单详情
				mui.ajax(huayi.config.callcenter_url + '/WorkOrder/GetWorkOrder', {
					data: {
						workorderid: vText,
						"token": localStorage.getItem("token")
					},
					dataType: 'json', //服务器返回json格式数据
					type: 'get', //HTTP请求类型
					timeout: 10000, //超时时间设置为10秒；
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8'
					},
					success: function(data) {
						var Data = data.data.data;
						document.getElementById("F_ComTitle").innerHTML = Data[0].F_ComTitle; //标题
						document.getElementById("F_ComContent").innerHTML = Data[0].F_ComContent; //内容
						//地址
						document.getElementById("AreaName").innerHTML = Data[0].AreaName;
						//地址详情
						document.getElementById("AreaName_deta").innerHTML = Data[0].F_SourceAddress;
						//投诉人
						document.getElementById("F_CusName").innerHTML = Data[0].F_CusName;
						//电话
						document.getElementById("F_CusPhone").innerHTML = Data[0].F_CusPhone;
						//类型
						document.getElementById("TypeName1").innerHTML = Data[0].TypeName1;
						//时间
						document.getElementById("F_CreateTime").innerHTML = Data[0].F_CreateTime;
						//办理过程
						for(var i = 0; i < data.data.gcdata.length; i++) {
							var table = document.body.querySelector('.GDgz');
							var div = document.createElement('div');
							div.className = 'DIV';
//							if (data.data.gcdata[i].UserName == null) {
//		                            Agree = "市民";
//		                        } else{
//		                            Agree =data.data.gcdata[i].UserName
//		                        }
							var oldmsg=data.data.gcdata[i].F_Message;
		                        var jqmsg="";
			                        var jqmsgnew;
			                        if(oldmsg.match(/-(\S*)\)/)==null){
//			                        	alert("ddd");
			                        	jqmsgnew=data.data.gcdata[i].F_Message;
//			                            jqmsg=oldmsg.match(/-(\S*)\)/)[0];
			                        }else{
			                        	jqmsg=oldmsg.match(/-(\S*)\)/)[0];
			                        	jqmsgnew=oldmsg.replace(jqmsg,"");
			                        }
							div.innerHTML =
								'<h5 class="mui-badge-success mui-badge-inverted">' + data.data.gcdata[i].F_CreateTime + ' ' +
//								'<h5><span>操作人:</span><span>' + Agree + '</span></h5>' +
								'<h5><span>备注信息:</span><span class="Font">' + jqmsgnew + '</span></h5>';
							table.appendChild(div);
						}
						//按钮显示
						if(data.data.btndata.length > 0) {
							$('.BTS').show();

							for(var i = 0; i < data.data.btndata.length; i++) {
								$('<li class=" mui-media mui-col-xs-4">' +
									'<button type="button" data-loading-text="提交中" index="' + data.data.btndata[i].key + '" class="mui-btn mui-btn-primary mui-btn-block block_button btn_agree Biaoqian">' + data.data.btndata[i].value + '</button>' +
									'</li>').appendTo(".mui-grid-9")

							}
						}
						//图片展示
						if(Data[0].File) {
							$(Data[0].File).each(function(i, n) {
								if(n.F_FileType == '.jpg'||n.F_FileType == '.png') {

									$('<div class="img-box"><img src="' + n.F_FileUrl + 
									'" alt="" class="image-item" data-preview-src="" data-preview-group="1" /><div>').appendTo("#image-list");
									$(".image-list").show();
								} else if(n.F_FileType == '.docx') {
									mui.toast('猜猜我是谁')
								}

							})
						}
						$(".Biaoqian").on("tap", function() {
							var a = $(this).attr("index");
							if(a == 14) {
								YS(); //延时
							} else if(a == 11) {
								CS(); //查收
							} else if(a == 12) {
								TH(); //退回
							} else if(a == 13) {
								Bl(); //办理
								//领导权限
							} else if(a == 15) {
								THSH(); //退回审核
							} else if(a == 17) {
								YSsh(); //延时审核
							} else if(a == 22) {
								QZ(); //强制结案
							} else if(a == 21) {
								HT(); //回退
							} else if(a == 5) {
								JB(); //交办
							} else if(a == 6) {
								LD(); //领导批示
							} else if(a == 7) {
								SZ(); //市长批示
							} else if(a == 8) {
								DB(); //督办
							} else if(a == 9) {
								JC(); //监察
							} else if(a == 10) {
								BacK(); //回收
							} else if(a == 1) {
								CK(); //查看
							} else if(a == 2) {
								BJ(); //编辑
							} else if(a == 23) {
								PD(); //重办
							} else if(a == 25) {
								SIGN(); //重办
							}

						})
					},
					error: function(xhr, type, errorThrown) {
						//异常处理；

					}
				});
				//交办
				function JB() {
					mui.openWindow({
						id: 'jiaoban1',
						url: 'jiaoban1.html',
						show: {
							aniShow: 'pop-in'
						},
						styles: {
							popGesture: 'hide'
						},
						waiting: {
							autoShow: false
						},
						extras: {
							name: vText,
							token: token

						}
					});
				}
				//签收工单
				function SIGN() {
					var btnArray = ['否', '是'];
					mui.confirm('确定要签收工单？', '提示', btnArray, function(e) {
						if(e.index == 1) {
							mui.ajax(huayi.config.callcenter_url + 'WorkOrder/SignWorkOrder', {
								data: {
									workorderid: $("#ID").text(),
									token: localStorage.getItem("token")
								},
								dataType: 'json', //服务器返回json格式数据
								type: 'post', //HTTP请求类型
								timeout: 10000, //超时时间设置为10秒；
								headers: {
									'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8'
								},
								success: function(data) {
									if(data.state.toLowerCase() == "success") {

										mui.toast("签收成功");
										var wobj = plus.webview.getWebviewById("WorkDetails");
										wobj.reload(true);
									} else {
										mui.toast(data.massage);
									}
								}
							})
						} else {
							mui.toast("取消签收");
						}
					})
				}
				//查看
				function CK() {
					mui.openWindow({
						id: 'Work-yijian',
						url: 'Work-yijian.html',
						show: {
							aniShow: 'pop-in'
						},
						styles: {
							popGesture: 'hide'
						},
						waiting: {
							autoShow: true
						},
						extras: {
							name: vText,

						}
					});

				}
				//办理工单
				function Bl() {
					mui.openWindow({
						id: 'Work-banli',
						url: 'Work-banli.html',
						show: {
							aniShow: 'pop-in'
						},
						styles: {
							popGesture: 'hide'
						},
						waiting: {
							autoShow: true
						},
						extras: {
							name: vText,
							token: token

						}
					});

				}

			})
		</script>
	</body>

</html>