zhoufan
/
SQ12345_Web


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306
							<!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 {
				line-height: 50px;
				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;
			}
			
			.size-12 {
				font-size: 12px;
			}
			
			.size-14 {
				font-size: 14px;
			}
			
			.mui-card-footer a {
				display: inline-block;
				width: 30%;
				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 a {
				color: #00a1cb;
				line-height: 50px;
			}
			
			#Popover_0 {
				top: 50px;
				background-color: #fff;
			}
			
			#next-header {
				background-color: #fff;
			}
		</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">
		                    	<i class="mui-icon  Phone">
													<img src="images/start.png" alt="" />
												</i>
		                    	<span>工单编号:</span><span id="ID"></span>
		                    </h4>

				</div>
				<div class="mui-table-cell mui-col-xs-2 mui-text-right">
					<span class="mui-h5 States">待解决</span>
				</div>
			</div>
			<div class="mui-table mui-table-view work-content ">
				<h5 class=" Active size-14">		                    	
		                    	<span >投诉标题:</span><span id="F_ComTitle" class="mui-ellipsis"></span>
		                    </h5>
				<h5 class="size-14 " style="line-height: 15px;">		                    	
		                    	<span>投诉内容:</span><span id="F_ComContent"></span>
		                   </h5>
			</div>
			<!--</ul>-->
			<!--信息展示-->
			<ul class="mui-table-view size-14 message-box" style="background: #fafafa;">
				<li class="work-content">
					<span>
						<i class="mui-icon mui-icon-location size-16"></i>
						投诉地址:
					</span>
					<span id="AreaName">河南省郑州市大学科技园东区4号楼</span>
				</li>
				<li class="work-content">
					<span>
						<i class="mui-icon mui-icon-location size-16"></i>
						投诉人:
					</span>
					<span id="F_CusName"></span>
				</li>
				<li class="work-content">
					<span>
						<i class="mui-icon mui-icon-location size-16"></i>
						投诉人电话:
					</span>
					<span id="F_CusPhone">
					</span>
				</li>
				<li class="work-content">
					<span>
						<i class="mui-icon mui-icon-location size-16"></i>
						工单类型:
					</span>
					<span id="TypeName1"></span>
				</li>
				<li class="work-content">
					<span>
						<i class="mui-icon mui-icon-location size-16"></i>
						提交时间:
					</span><span id="F_CreateTime"></span>
				</li>

			</ul>
			<div class="mui-table-view Caozuo " style="padding: 10px 12px;">
				<div class="mui-card-footer">
					<!--<a ><i class="mui-icon mui-icon-more "></i>催单</a>
					<a><i class="mui-icon mui-icon-paperplane"></i>指派</a>
					<a class="Finish"><i class="mui-icon mui-icon-checkmarkempty"></i>完成</a>-->
					
				</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 style="padding-left: 20px; ">
					<h5 class="mui-badge-success mui-badge-inverted">2017-06-23  15:30:20   朱慧娟  已完此成工单</h5>
					<h5><span>操作人:</span><span>蓝胖纸</span></h5>
					<h5><span>操作人电话:</span><span>18839115206</span></h5>
					<h5><span>备注信息:</span><span>圆圆的头，大大的眼睛圆圆的头，大大的眼睛圆圆的头，大大的眼睛圆圆的头，大大的眼睛圆圆的头，大大的眼睛圆圆的头，大大的眼睛圆圆的头，大大的眼睛</span></h5>
				</div>
				<div style="padding-left: 20px; ">
					<h5 class="mui-badge-danger mui-badge-inverted">2017-06-23  15:30:20   朱慧娟  已完此成工单</h5>
					<h5><span>操作人:</span><span>蓝胖纸</span></h5>
					<h5><span>操作人电话:</span><span>18839115206</span></h5>
					<h5><span>备注信息:</span><span>圆圆的头，大大的眼睛圆圆的头，大大的眼睛圆圆的头，大大的眼睛圆圆的头，大大的眼睛圆圆的头，大大的眼睛圆圆的头，大大的眼睛圆圆的头，大大的眼睛</span></h5>
				</div>
				<div style="padding-left: 20px; ">
					<h5 class="mui-badge-warning mui-badge-inverted"><span>2017-06-23</span><span>15:20:20</span><span>蓝胖子</span><span>创建工单</span>
					</h5>
					<h5><span>操作人:</span><span>蓝胖纸</span></h5>
					<h5><span>操作人电话:</span><span>18839115206</span></h5>
					<h5><span>备注信息:</span><span>圆圆的头，大大的眼睛圆圆的头，大大的眼睛圆圆的头，大大的眼睛圆圆的头，大大的眼睛圆圆的头，大大的眼睛圆圆的头，大大的眼睛圆圆的头，大大的眼睛</span></h5>
				</div>-->

			</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 type="text/javascript">
			mui.init();
			mui.init({
				swipeBack: true //启用右滑关闭功能
			});
			mui.plusReady(function() {
				var wv = plus.webview.currentWebview();
				var vText = wv.name;
				var token = wv.token;
				var ID = document.getElementById("ID").innerHTML = vText;
				//工单详情
				//获取工单
				mui.ajax('http://192.168.4.18:4010/WorkOrder/GetWorkOrder', {
					data: {
						workorderid: vText,
						"token": 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("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 = 'mui-collapse-content';
							div.innerHTML =
								'<h5 class="mui-badge-success mui-badge-inverted">'+data.data.gcdata[i].F_CreateTime+' ' +
								'<h5><span>操作人:</span><span>' + data.data.gcdata[i].UserName + '</span></h5>' +
								'<h5><span>备注信息:</span><span>' + data.data.gcdata[i].F_Message + '</span></h5>' ;
								table.appendChild(div);
						}
						//按钮显示
						for(var i = 0; i < data.data.btndata.length; i++) {
							var btns= data.data.btndata[i].key;
							var table = document.body.querySelector('.mui-card-footer');
							var a = document.createElement('a');
//							div.className = 'mui-collapse-content';
							a.innerHTML =							
							'<i class="mui-icon mui-icon-more "></i>'+ data.data.btndata[i].value+''
								table.appendChild(a);
						}
					},
					error: function(xhr, type, errorThrown) {
						//异常处理；

					}
				});
				mui(".mui-card-footer").on("tap",".Finish",function(){
					mui.alert("完成")
				})
			})
		</script>
	</body>

</html>