lihai
/
ZZDianXin_UI


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544
							<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>工单详情</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		
		<link rel="stylesheet" href="../layui/css/layui.css" />
		<link rel="stylesheet" href="../css/iconfont.css" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<style>
			.order_state {
				padding: 2px 9px;
				background: #FD7C78;
				border: 0;
			}
			.order_icon {
				color: #FD7C78;
				vertical-align: baseline;
			}
			.order_title {
				color: #5FBEDA;
				line-height: 20px;
				margin-bottom: 7px;
			}
			.order_content,.order_HandleContent{
				    line-height: 20px;
			}
			.order_HandleContent{
				display: none;
			}
			.order_content {
				line-height: 20px;
			}			
			.head_pic {
				display: inline-block;
				width: 16px;
				height: 16px;
				vertical-align: middle;
				margin-right: 5px;
			}
			.icon_right {
				margin-right: 3px;
			}			
			.gdgz {
				font-weight: normal;
				margin-top: 10px;
			}
			.gzDiv{
				display: none;
			}
			.layui-text h3 {
				font-size: 15px;
			}
			
			.detail_list div {
				margin-top: 5px;
			}
			.prompt_div{
				width: 80%;
				height: 180px;
				position: fixed;
				top: 0px;
				left: 0px;
				right: 0px;
				bottom: 0px;
				margin: auto;
				text-align: center;
				display: none;
				z-index: 99999;
				background: #FFFFFF;
				border-radius: 5px;
				-moz-border-radius: 5px;
				-webkit-border-radius: 5px;
				-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.5);
				-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.5);
				text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
			}
			.prompt_div .title{
				width: 100%;
				height: 50px;
				text-align: center;
				line-height: 50px;
				margin-top: 10px;
			}
			.prompt_div .content{
				width: 90%;
				margin-left: 5%;
				margin-top: 10px;
			}
			.prompt_div .content input{
				width: 100%;
				height: 30px;
				line-height: 30px;
			}
			.prompt_div .botdiv{
				margin-top: 20px;
				position: relative;
			}
			.prompt_div .botdiv .btn_confi{
				padding: 6px 12px;
				color: #007aff;
				/*background: #007aff;*/
				font-size: 14px;
				display: inline;
				position: absolute;
				left: 20px;
			}
			.prompt_div .botdiv .btn_cancel{
				padding: 6px 12px;
				color: #007aff;
				/*background: #007aff;*/
				font-size: 14px;
				display: inline;
				position: absolute;
				right: 20px;
			}
			.body_bj{
				width: 100%;
				height: 100%;
				background: #000000;
				position: fixed;
				top: 0px;
				z-index: 99998;
				display: none;
				filter:alpha(opacity=60);  
			    -moz-opacity:0.6;  
			    -khtml-opacity: 0.6;  
			    opacity: 0.6;  
			}
			.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;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav" style="padding-right: 15px;color: #fff;">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-center mui-title"><span class="Totle-box">任务详情</span></h1>
		</header>
		<div class="mui-content">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<i class="iconfont icon-iconfont02 order_icon"></i><span class="workOrder"></span>
					<button type="button" class="order_state mui-btn mui-btn-primary">
							<!--待解决-->
					</button>
				</li>
				<li class="mui-table-view-cell">
					<h5 class="order_title"></h5>
					<p class='order_content'></p>
					<p class='order_HandleContent'></p>
					<button type="button" class="order_remind mui-btn mui-btn-primary" style="display: block;">催单</button>
					<div id="info" style="display: none;"></div>
				</li>
				<li class="mui-table-view-cell detail_list">
					<div class="clearFix">
						<p class="mui-pull-left"><i class="iconfont icon-dizhi icon_right"></i>事件地址：</p>
						<p class="mui-pull-right address"></p>
					</div></br>
					<div class="clearFix">
						<p class="mui-pull-left"><i class="mui-icon mui-icon-person icon_right" style="font-size: 20px;"></i>
							<!--<img class="head_pic" src="../img/shuijiao.jpg" alt="" />-->联系人：</p>
						<p class="mui-pull-right people"></p>
					</div></br>
					<!--<div class="clearFix">
						<p class="mui-pull-left">
							性别：</p>
						<p class="mui-pull-right sex"></p>
					</div></br>
					<div class="clearFix">
						<p class="mui-pull-left">
							邮箱：</p>
						<p class="mui-pull-right mailbox"></p>
					</div></br>
					<div class="clearFix">
						<p class="mui-pull-left">
							邮编：</p>
						<p class="mui-pull-right zipcode"></p>
					</div></br>-->
					<div class="clearFix">
						<p class="mui-pull-left"><i class="iconfont icon-dianhua icon_right"></i>联系电话：</p>
						<p class="mui-pull-right phone"></p>
					</div></br>
					<div class="clearFix">
						<p class="mui-pull-left"><i class="iconfont icon-dianhua icon_right"></i>来电号码：</p>
						<p class="mui-pull-right comphone"></p>
					</div>
					<div class="clearFix" style="display: none;">
						<p class="mui-pull-left"><i class="iconfont icon-quanbu icon_right"></i>工单类型：</p>
						<p class="mui-pull-right order_type"></p>
					</div></br>
					<!--<div class="clearFix">
						<p class="mui-pull-left"><i class="iconfont icon-quanbu icon_right"></i>紧急程度：</p>
						<p class="mui-pull-right order_secrecy"></p>
					</div></br>
					<div class="clearFix">
						<p class="mui-pull-left"><i class="iconfont icon-quanbu icon_right"></i>保密程度：</p>
						<p class="mui-pull-right order_urgent"></p>
					</div></br>-->
					<!--<div class="clearFix">
						<p class="mui-pull-left"><i class="iconfont icon-quanbu icon_right"></i>来源：</p>
						<p class="mui-pull-right order_from"></p>
					</div></br>-->
					<div class="clearFix">
						<p class="mui-pull-left"><i class="iconfont icon-daichuli icon_right"></i>提交时间：</p>
						<p class="mui-pull-right order_time"></p>
					</div></br>
					<!--图片展示-->
					<div id='image-list' class="row image-list"></div>
					
					<h4 class="gdgz gzDiv">工单跟踪信息</h4>
				</li>
				<!--工单进度-->
				<li class="mui-table-view-cell gzDiv">
					<ul class="layui-timeline time_line" >
						
					</ul>

				</li>
			</ul>

		</div>
		<div class="prompt_div">
			<div class="title">提示</div>
			<div class="content"><input type="text" name="" id="tanipnt" placeholder="请输入催单内容" value="" /></div>
			<div class="botdiv">
				<div class="btn_confi">确定</div>
				<div class="btn_cancel">取消</div>
			</div>
		</div>
		<div class="body_bj"></div>
		<script src="../js/mui.min.js"></script>
		<script src="../js/zepto.js"></script>
		<script src="../js/echarts-all.js"></script>
		<script src="../js/huayi.http.js"></script>
		<script src="../js/huayi.config.js"></script>
		<script src="../js/mui.zoom.js"></script>
		<script src="../js/mui.previewimage.js"></script>
		<script type="text/javascript">
			
			mui.init()
			mui.previewImage();
			var usercode = localStorage.getItem("user1"); //获取本地存储
			var id=helper.request.queryString("id");
			
				$('.order_remind').on('tap',function(){
					$(".prompt_div").show();
					$(".body_bj").show();
					$(".btn_confi").click(function(){
						content=$("#tanipnt").val();
						$.ajax({
				  		type:"post",
					  		dataType: 'json',
					  		url:huayi.config.callcenter_url + '/APP/AdditionalWorkOrder',
					  		async:true,
					  		data:{
					  			usercode:usercode,
								workorderid:id,
								content:content
					  		},
					  		success:function(data){	
					  			if(data.state=="success"){
					  				mui.toast('催单成功');
					  			}else{
					  				
					  				mui.toast(data.message);
					  			}					
					  		}
					  	});
					  	$(".prompt_div").hide();
						$(".body_bj").hide();
					})
					$(".btn_cancel").click(function(){
						
					  	$(".prompt_div").hide();
						$(".body_bj").hide();
						mui.toast('取消');
					})
				})
				$.ajax({
					type:"get",
					url:huayi.config.callcenter_url + '/APP/GetWorkOrder',
					async:true,
					data:{
						usercode:usercode,
						workorderid:id
					},
					success:function(data){
						var con=JSON.parse(data); 
						var conDetail=con.data.data[0];
						if(con.state.toLowerCase()=='success'){
							$('.workOrder').html('工单编号：'+conDetail.F_WorkOrderId+'');
							if(conDetail.F_WorkState==0){
								$('.order_state').html('已受理');
								$(".order_remind").show();
							}else if(conDetail.F_WorkState==9){
								$('.order_state').html('已处理');
								$(".order_remind").hide();
								$('.order_HandleContent').show();
								$('.order_HandleContent').html('处理内容：'+ conDetail.F_Result);
							}else{
								$('.order_state').html('办理中');
							}
							$('.order_title').html(''+conDetail.TypeName1+'标题：'+conDetail.F_ComTitle+'');
							$('.order_content').html(''+conDetail.TypeName1+'内容：'+conDetail.F_ComContent+'');
							$('.address').html(conDetail.AreaName+conDetail.F_SourceAddress);
							$('.people').html(conDetail.F_CusName);
							$('.phone').html(conDetail.F_CusPhone);
							$('.comphone').html(conDetail.F_ConPhone);
							$('.order_type').html(conDetail.TypeName1);
							$('.mailbox').html(conDetail.F_Email);
							$('.zipcode').html(conDetail.F_ZipCode);
							if(conDetail.F_Level == 1) {
								$('.order_secrecy').text("普通");
							} else if(conDetail.F_Level == 2) {
								$('.order_secrecy').text("紧急");
							}
							if(conDetail.F_IsProtect == 0) {
								$('.order_urgent').text("普通");
							} else {
								$('.order_urgent').text("保密");
							}
							if(conDetail.F_CusSex == 1) {
								$('.sex').text("男");
							} else if(conDetail.F_CusSex == 2){
								$('.sex').text("女");
							}else{
								$('.sex').text("");
							}
							$('.order_time').html(conDetail.F_CreateTime);
							$('.order_from').html(conDetail.SourceName);
							
//							$('.order_secrecy').html(conDetail.TypeName1);
							
						}
						//图片展示
						if(conDetail.File) {
							$(conDetail.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('猜猜我是谁')
//								}

							})
						}
						//跟踪信息
						var time_line=con.data.gcdata;
						
						$(time_line).each(function(i,n){
		                    var oldmsg=n.F_Message
	                        var jqmsg="";
	                        var jqmsgnew;
	                        if(oldmsg.match(/-(\S*)\)/)==null){
	                        	jqmsgnew=n.F_Message;
	                        }else{
	                        	jqmsg=oldmsg.match(/-(\S*)\)/)[0];
	                        	jqmsgnew=oldmsg.replace(jqmsg,"");
	                        }
							$('<li class="layui-timeline-item">'+
								'<i class="layui-icon layui-timeline-axis" style="z-index: 0;">&#xe63f;</i>'+
								'<div class="layui-timeline-content layui-text">'+
									'<h3 class="layui-timeline-title">'+ n.F_CreateTime +'</h3>'+
//									'<p>操作人：'+Agree+'</p>'+
									'<p>备注信息：'+jqmsgnew+'</p>'+
								'</div>'+
							'</li>').appendTo('.time_line')
						})
						
					}
				});
		</script>
	</body>

</html>