zhaozhiqiang
/
YH_Web_UI


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547
							<!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">
		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" href="../css/WorkSeach.css" />
	</head>

	<body>
		<div class="mui-content order_search" id="order_search">
			<!--disshow-->
			<div id="slider" class="mui-slider mui-fullscreen disnone">
			<!--<div id="slider" class="mui-slider mui-fullscreen disnone">-->
				<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<div class="mui-scroll">
						<a class="mui-control-item mui-active" href="#item1mobile" index="1" state="1">
							待维修
						</a>
						<a class="mui-control-item" href="#item2mobile" index="2" state="2">
							<!--  已处理-->
							待评价
						</a>
						<a class="mui-control-item" href="#item3mobile" index="3" state="3">
							已评价
						</a>
						<a class="mui-control-item" href="#item4mobile" index="4" state="7">
							挂起
						</a>
					</div>
				</div>
				<!--<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-3"></div>-->
				<div class="mui-slider-group">
					<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
						<div id="" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<ul class="mui-table-view mui-table-view-striped mui-table-view-condensed">
									<!--<li class="mui-table-view-cell">
                                    <a href="WorkDeail.html?id=result.data.rows[i].id" class="mui-navigate-right">
                                    <span><i class="Img-box"><img class="Seach-img"src="../img/shuijiao.jpg" alt="" /></i>23456789</span>
                                    </a>
                                    </li>
                                    <li class="mui-table-view-cell" id="result.data.rows[i].id" type="result.data.rows[i].wostate ">
                                    <div class="mui-table">
                                    <div class="mui-table-cell mui-col-xs-4">
                                    <h5 "><i class="iconfont">&#xe61d;</i> <span>报修单位</span></h5>
                                    <h5 ><i  class="iconfont">&#xe61a;</i> <span>报修人</span></h5>
                                    <h5 ><i  class="iconfont">&#xe619;</i> <span>联系人电话</span></h5>
                                  										//	'<h5 ><i  class="iconfont">&#xe627;</i> <span>报修设备</span></h5>'+-->
									<!--<h5 ><i  class="iconfont">&#xe663;</i> <span>提交时间</span></h5>
                                    </div>
                                    <div class="mui-table-cell mui-col-xs-8 mui-text-right">
                                    <h5><i class="iconfont"></i> <span>地方2</span></h5>
                                    <h5><i  class="iconfont"></i> <span>维修工</span></h5>
                                    <h5><i  class="iconfont"></i> <span>123456789</span></h5>
                                   							//					'<h5><i  class="iconfont"></i> <span>'+result.data.rows[i].equipname+'</span></h5>
                                    <h5><i  class="iconfont"></i> <span>2018-12-12</span></h5>
                                    </div>
                                    </div>
                                    </li>-->

								</ul>
							</div>
						</div>
					</div>
					<div id="item2mobile" class="mui-slider-item mui-control-content ">
						<div id="" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<ul class="mui-table-view mui-table-view-striped mui-table-view-condensed"></ul>
							</div>
						</div>
					</div>
					<div id="item3mobile" class="mui-slider-item mui-control-content ">
						<div id="" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<ul class="mui-table-view mui-table-view-striped mui-table-view-condensed"></ul>
							</div>
						</div>
					</div>
					<div id="item4mobile" class="mui-slider-item mui-control-content ">
						<div id="" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<ul class="mui-table-view mui-table-view-striped mui-table-view-condensed"></ul>
							</div>
						</div>
					</div>
					<div id="item5mobile" class="mui-slider-item mui-control-content ">
						<div id="" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<ul class="mui-table-view mui-table-view-striped mui-table-view-condensed"></ul>
							</div>
						</div>
					</div>
				</div>
			</div>
			
			<div id="slider1" class="mui-slider mui-fullscreen disnone">
				<div id="sliderSegmentedControl1" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<div class="mui-scroll">
						<a class="mui-control-item mui-active" href="#deliveryItem1" index="1" state="1">
							未完结
						</a>
						<a class="mui-control-item" id="waitEvaluate" href="#deliveryItem2" index="2" state="2">
							待评价
						</a>
						<a class="mui-control-item" href="#deliveryItem3" index="3" state="3">
							已评价
						</a>
						<!--<a class="mui-control-item" href="#deliveryItem4" index="4" state="9">
							已评价
						</a>-->
					</div>
				</div>
				<!--<div id="sliderProgressBar1" class="mui-slider-progress-bar mui-col-xs-3"></div>-->
				<div class="mui-slider-group">
					<div id="deliveryItem1" class="mui-slider-item mui-control-content mui-active">
						<div id="" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<ul class="mui-table-view mui-table-view-striped mui-table-view-condensed">
									<!-- <li class="mui-table-view-cell">
										<a href="WorkDeail.html?id=result.data.rows[i].id" class="mui-navigate-right">
											<span><i class="iconfont delivery_code">&#xe663;</i>23456789</span>
										</a>
									</li>
									<li class="mui-table-view-cell" id="result.data.rows[i].id" type="result.data.rows[i].wostate ">
										<div class="mui-table">
											<div class="mui-table-cell mui-col-xs-1 order_address">
												<img src="../img/deliver.png" alt="发货地址" />
												<span></span>
												<img src="../img/receiving.png" alt="收货地址" />
											</div>
											<div class="mui-table-cell mui-col-xs-11 mui-text-left order_address_info">
												<h3 class="order_address_info_title">五号楼22楼2208</h3>
												<h5 class="order_address_info_dept">内科    消化科</h5>
												<h3 class="order_address_info_title1">五号楼22楼2208</h3>
												<h5 class="order_address_info_dept1">内科    消化科</h5>
											</div>
										</div>
										<div class="mui-table order_goods">
											<div class="mui-table-cell mui-col-xs-1">
												<img src="../img/goodsIcon.png" alt="物品信息"/>
											</div>
											<div class="mui-table-cell mui-col-xs-11">
												<div class="order_goods_contets mui-clearfix">
													<span class="order_goods_type">jdajkdh</span>
													<span class="order_goods_title">2018-12-12</span>
													<span class="order_goods_num">X 32</span>
												</div>
											</div>
										</div>
									</li> -->

								</ul>
							</div>
						</div>
					</div>
					<div id="deliveryItem2" class="mui-slider-item mui-control-content ">
						<div id="" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<ul class="mui-table-view mui-table-view-striped mui-table-view-condensed"></ul>
							</div>
						</div>
					</div>
					<div id="deliveryItem3" class="mui-slider-item mui-control-content ">
						<div id="" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<ul class="mui-table-view mui-table-view-striped mui-table-view-condensed"></ul>
							</div>
						</div>
					</div>
					<!--<div id="deliveryItem4" class="mui-slider-item mui-control-content ">
						<div id="" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<ul class="mui-table-view mui-table-view-striped mui-table-view-condensed"></ul>
							</div>
						</div>
					</div>-->
				</div>
			</div>
		</div>
		<script src="../layui/layui.js?1.1"></script>
		<script src="../js/mui.min.js?1.1"></script>
		<script src="../js/zepto.js?1.1"></script>
		<script src="../js/jquery.min.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 src="../js/mui.pullToRefresh.js?1.1"></script>
		<script src="../js/mui.pullToRefresh.material.js?1.1"></script>
		<script>
			//先判断 有没有工单类型的分类
			getOrderType();
			mui.init();
			//报修工单
			var page = 1; //页数
			var pageSize = 10; //每页显示条目
			var total; //数据总条数
			var type = 1,states = 1;
			Ajax(states, type, page, pageSize);
			//配送工单
			var pageDelivery = 1; //页数
			var pageSizeDelivery = 10; //每页显示条目
			var totalDelivery; //数据总条数
			var typeDelivery = 1,statesDelivery = 1;
			var goPj = helper.request.queryString("pj");
			getDeliveryOrder();
			window.onload=function(){
				if(goPj){
					$('#waitEvaluate').addClass('mui-active').siblings().removeClass('mui-active');
					pageDelivery = 1;
					typeDelivery = $('#waitEvaluate').attr("index");
					statesDelivery = $('#waitEvaluate').attr("state");
					$('#deliveryItem'+ typeDelivery +' ul').empty();
					$('#deliveryItem'+ typeDelivery ).addClass('mui-active').siblings().removeClass('mui-active');
					getDeliveryOrder();
				}
			}
		
			;(function($) {
				
				//阻尼系数
				var deceleration = mui.os.ios ? 0.003 : 0.0009;
				//报修
				$('#slider .mui-scroll-wrapper').scroll({
					bounce: false,
					indicators: true, //是否显示滚动条
					deceleration: deceleration
				});
				//配送
				$('#slider1 .mui-scroll-wrapper').scroll({
					bounce: false,
					indicators: true, //是否显示滚动条
					deceleration: deceleration
				});
				//配送工单  左右滑动事件
				document.getElementById('slider1').addEventListener('slide', function(e) {
									if(e.detail.slideNumber === 0){
										document.getElementById('deliveryItem1').getElementsByTagName("ul")[0].innerHTML="";
										typeDelivery=1;
										statesDelivery=1;
										pageDelivery = 1;
										if (document.getElementById('deliveryItem1').querySelector('.mui-pull-loading')) {
											setTimeout(function() {
												getDeliveryOrder();
											}, 300);
											
										}
										
									}else if(e.detail.slideNumber === 1){
										typeDelivery=2;
										statesDelivery=2;
										pageDelivery = 1;
										document.getElementById('deliveryItem2').getElementsByTagName("ul")[0].innerHTML=""
										if (document.getElementById('deliveryItem2').querySelector('.mui-pull-loading')) {
											setTimeout(function() {
												getDeliveryOrder();
											}, 300);
											
										}
									}else{
										typeDelivery=3
										statesDelivery=3;
										pageDelivery = 3;
										document.getElementById('deliveryItem3').getElementsByTagName("ul")[0].innerHTML=""
										if (document.getElementById('deliveryItem3').querySelector('.mui-pull-loading')) {
											setTimeout(function() {
												getDeliveryOrder();
											}, 300);
											
										}
									}
								});
			
				$.ready(function() {
					//循环初始化所有下拉刷新，上拉加载。
					//报修
					$.each(document.querySelectorAll('#slider .mui-slider-group .mui-scroll'), function(index, pullRefreshEl) {
						$(pullRefreshEl).pullToRefresh({
							up: {
								callback: function() {
									var self = this;
									setTimeout(function() {
										var ul = self.element.querySelector('.mui-table-view');
										page++
										//										self.endPullUpToRefresh((page++ >= Math.ceil(total / 10)));
										createFragment();
										//										Ajax(type)
									}, 1000);
								}
							}
						});
					});
					var createFragment = function() {
						Ajax(states, type, page, pageSize)
					};
					//配送
					$.each(document.querySelectorAll('#slider1 .mui-slider-group .mui-scroll'), function(index, pullRefreshEl) {
						$(pullRefreshEl).pullToRefresh({
							up: {
								callback: function() {
									var self = this;
									setTimeout(function() {
										var ul = self.element.querySelector('.mui-table-view');
										pageDelivery++
										createFragment1();
									}, 1000);
								}
							}
						});
					});
					var createFragment1 = function() {
						getDeliveryOrder();
					};
				});
			
			})(mui);
			//报修
			$('#slider .mui-control-item').on('tap', function() {
				page = 1;
				type = $(this).attr("index");
				states = $(this).attr("state");
				$('#item' + type + 'mobile ul').empty();
				Ajax(states, type, page, pageSize)
			});
			//配送
			$('#slider1 .mui-control-item').on('tap', function() {
				pageDelivery = 1;
				typeDelivery = $(this).attr("index");
				statesDelivery = $(this).attr("state");
				$('#deliveryItem'+ typeDelivery +' ul').empty();
				getDeliveryOrder();
			});
				
			//报修
			function Ajax(states, type, page, pageSize) {
				$.ajax({
					type: "get",
					url: huayi.config.callcenter_url + 'equipmentapi/api/worepairbase/getlistbypage',
					data: {
						pageindex: page,
						pagesize: pageSize,
						wxstate: states,
						//                  state: states,
					},
					dataType: 'json',
					success: function(result) {
						//					$('#item'+type+'mobile ul').empty();
						total = result.total;
						if(result.state == 'success') {
							if(page==1){
								$('#item' + type + 'mobile ul').empty();
							}
							if(result.data.rows.length <= 0) {
								$('#slider .mui-pull-loading').text("没有数据了")
							} else {
								for(var i = 0; i < result.data.rows.length; i++) {
									$('<li class="mui-table-view-cell">' +
										'<a href="WorkDeail.html?id=' + result.data.rows[i].id + '" class="mui-navigate-right">' +
										'<span><i class="Img-box"><img class="Seach-img"src="../img/shuijiao.jpg" alt="" /></i>' + result.data.rows[i].wocode + '</span>' +
										'</a>' +
										'</li>' +
										'<li class="mui-table-view-cell" id="' + result.data.rows[i].id + '" type="' + result.data.rows[i].wostate + '">' +
										'<div class="mui-table">' +
										'<div class="mui-table-cell mui-col-xs-4">' +
										'<h5 "><i class="iconfont">&#xe61d;</i> <span>报修单位</span></h5>' +
										'<h5 ><i  class="iconfont">&#xe61a;</i> <span>报修人</span></h5>' +
										'<h5 ><i  class="iconfont">&#xe619;</i> <span>联系人电话</span></h5>' +
										//												'<h5 ><i  class="iconfont">&#xe627;</i> <span>报修设备</span></h5>'+
										'<h5 ><i  class="iconfont">&#xe663;</i> <span>提交时间</span></h5>' +
										'</div>' +
										'<div class="mui-table-cell mui-col-xs-8 mui-text-right">' +
										'<h5><i class="iconfont"></i> <span>' + result.data.rows[i].repairreplace + " "+ (result.data.rows[i].repairoom || '') + '</span></h5>' +
										'<h5><i  class="iconfont"></i> <span>' + result.data.rows[i].repairman + '</span></h5>' +
										'<h5><i  class="iconfont"></i> <span>' + result.data.rows[i].contactway + '</span></h5>' +
										//												'<h5><i  class="iconfont"></i> <span>'+result.data.rows[i].equipname+'</span></h5>'+
										'<h5><i  class="iconfont"></i> <span>' + result.data.rows[i].createtime + '</span></h5>' +
										'</div>' +
										'</div>' +
										'</li>').appendTo('#item' + type + 'mobile ul');
								}
							}

							//工单详情
							$("#slider .mui-table-view-cell").on('tap', function() {
								var id = $(this).attr("id");
								window.location.href = "WorkDeail.html?id=" + id;
							})
						}
					}
				});
			}
			//配送
			function getDeliveryOrder() {
				$.ajax({
					type: "get",
					url: huayi.config.callcenter_url + 'distributionapi/api/DistriWorkOrder/getlistbypage',
					data: {
						projectid: window.localStorage.getItem('projectid'),	//否	string	项目id
						pageindex: pageDelivery,//否	string	当前页
						pagesize: pageSizeDelivery,//否	string	每页记录数
						wxstate: statesDelivery,//否	int	配送工单状态:0创建工单，1转派或者抢单（待取货）,2已取货（配送中）,3货物异常（异常），4已完结/待评价，5已取消，6挂起 ，9已评价 -1所有
						wosorts: 1,//否	int	工单分类(1随机工单,2分送工单,-1所有 )
					},
					dataType: 'json',
					success: function(result) {
						totalDelivery = result.total;
						if(result.state.toLowerCase() == 'success') {
							if(pageDelivery==1){
								$('#deliveryItem'+ statesDelivery +' ul').empty();
							}
							
							var res = result.data.rows;
							if(!res || !res.length){
								$('#slider1 .mui-pull-loading').text("没有数据了");
								return;
							}
							$.each(res, function(i,v){
								var str = '<li class="mui-table-view-cell">'+
										'<a href="deliveryOrderDetail.html?id='+ v.id +'" class="mui-navigate-right">'+
											'<span><i class="iconfont delivery_code">&#xe663;</i>'+ v.wocode +'</span> '
											if(v.wostate==0){
												str +='<span class="stateText">新工单</span>'
											}else if(v.wostate==1){
												str +='<span class="stateText">待取货</span>'
											}else if(v.wostate==2){
													str +='<span class="stateText">配送中</span>'
											}else if(v.wostate==3){
													str +='<span class="stateText">异常</span>'
											}else if(v.wostate==4){
													str +='<span class="stateText">待评价</span>'
											}else if(v.wostate==5){
													str +='<span class="stateText">已取消</span>'
											}else if(v.wostate==6){
													str +='<span class="stateText">挂起 </span>'
											}else if(v.wostate==9){
													str +='<span class="stateText">已评价 </span>'
											}
										str +='</a>'+
									'</li>'+
									'<li class="mui-table-view-cell" id="'+ v.id +'">'+
//										'<div class="mui-table">'+
//											'<div class="mui-table-cell mui-col-xs-12 mui-text-left "> <img src="../img/zt-ztbd.png" alt="工单状态" />新工单</div>'+
//										'</div>'+
										'<div class="mui-table">'+
											'<div class="mui-table-cell mui-col-xs-1 order_address">'+
												'<img src="../img/deliver.png" alt="发货地址" />'+
												'<span></span>'+
												'<img src="../img/receiving.png" alt="收货地址" />'+
											'</div>'+
											'<div class="mui-table-cell mui-col-xs-11 mui-text-left order_address_info">'+
												'<h3 class="order_address_info_title">'+ (v.deliverylist && v.deliverylist.length && (v.deliverylist[0].building_name + v.deliverylist[0].floor_name)) +'</h3>'+
												'<h5 class="order_address_info_dept">'+ formatterDept(v.deliverylist && v.deliverylist.length &&  v.deliverylist[0].department_name) +'</h5>'+
												'<h3 class="order_address_info_title1">'+ (v.receiverlist && v.receiverlist.length && (v.receiverlist[0].building_name + v.receiverlist[0].floor_name)) +'</h3>'+
												'<h5 class="order_address_info_dept1">'+ formatterDept(v.receiverlist[0] && v.receiverlist.length && v.receiverlist[0].department_name) +'</h5>'+
											'</div>'+
										'</div>'+
										'<div class="mui-table order_goods">'+
											'<div class="mui-table-cell mui-col-xs-1">'+
												'<img src="../img/goodsIcon.png" alt="物品信息"/>'+
											'</div>'+
											'<div class="mui-table-cell mui-col-xs-11">'+
												'<div class="order_goods_contets mui-clearfix">'+
													'<span class="order_goods_type">'+ formatterGoodsNum(JSON.stringify(v.goodslist)) +'</span>'+
													'<span class="order_goods_title">'+ (v.goodslist && v.goodslist.length && v.goodslist[0].goodsname) +'</span>'+
													'<span class="order_goods_num">x '+ (v.goodslist && v.goodslist.length && v.goodslist[0].num) +'</span>'+
												'</div>'+
											'</div>'+
										'</div>'+
									'</li>';
								$('#deliveryItem' + typeDelivery + ' ul').append(str);
							});

							//工单详情
							$("#slider1 .mui-table-view-cell").on('tap', function() {
								var id = $(this).attr("id");
								window.location.href = "deliveryOrderDetail.html?id=" + id+"&r="+Math.random();
							})
						}
					}
					
				});
			}
			//获取工单类型的分类
			function getOrderType() {
				$.ajax({
					type: "get",
					url: huayi.config.callcenter_url + 'configurationapi/api/WorkOrderType/getwotype',
					data: {},
					dataType: 'json',
					success: function(res) {
						if(res.state.toLowerCase() === 'success'){
							if(res.data && res.data.length === 1){
								//工单类型：1报修，2保养，3巡检，4配送
								var topWotype = res.data[0].wotype;
								if(topWotype === 4){
									$('.mui-slider').eq(1).addClass('disshow').siblings().removeClass('disshow');
								}
								
							}
							if(res.data && res.data.length === 2){
								$('#order_search').find('.mui-fullscreen').css({
									top: '42px'
								});
								var str = '<ul class="top_tabs mui-clearfix" id="top_tabs">'+
												'<li class="active"><span>'+ res.data[0].wotypename +'工单</span></li>'+
												'<li><span>'+ res.data[1].wotypename +'工单</span></li>'+
											'</ul>';
								$('#order_search').prepend(str);
								$('.mui-slider').eq(0).addClass('disshow').siblings().removeClass('disshow');
							}
							$('#top_tabs').find('li').on('tap',function(){
								$(this).addClass('active').siblings().removeClass('active');
								$('.mui-slider').eq($(this).index()).addClass('disshow').siblings().removeClass('disshow');
							});
						}
					}
				});
			}
			
			//格式化物品数量和种类
			function formatterGoodsNum(goodslist){
				goodslist = JSON.parse(goodslist);
				var nums = 0
				$.each(goodslist, function(i, v){
					nums += v.num;
				});
				return goodslist.length + '种' + nums + '件';
			}
			
			//格式化部门
			function formatterDept(val){
				val = val && val.split('|');
				var str = '';
				if(val && val.length > 0){
					$.each(val, function(i, v){
						str += '<span>'+ v +'</span>';
					});
				}
				return str;
			}
		</script>
	</body>

</html>