yf_zd
/
commonApp


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325
							<!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="../css/mescroll.min.css">
		<link rel="stylesheet" href="../css/mui.min.css" />
		<link rel="stylesheet" href="../css/common.css" />
		<!--<link rel="stylesheet" type="text/css" href="../css/equipList.css"/>-->
		<style type="text/css">
			.mescroll {
				position: fixed;
				top: 55px;
				bottom: 0;
				height: auto;
				/*如设置bottom:50px,则需height:auto才能生效*/
			}
			
			ul {
				padding: 0;
				margin: 0;
				/*padding-top: 15px;*/
			}
			
			#dataList>li {
				background: #fff;
				margin-bottom: 15px;
				padding: 0 10px;
			}
			
			.item .title {
				line-height: 44px;
				position: relative;
				border-bottom: 1px dashed #ccc;
			}
			
			.item .title span {
				position: absolute;
				right: 10px;
				line-height: 26px;
				top: 11px;
				border-radius: 10px;
				padding: 0px 7px;
				font-size: 12px;
			}
			
			.grayState {
				background: #e8e8e8;
				color: #858585;
			}
			
			.greenState {
				background: #c6ffb2;
				color: #2cae00;
			}
			
			.redState {
				background: #ffb2b2;
				color: #ae0000;
			}
			
			.blueState {
				background: #b2fcff;
				color: #00aead;
			}
			
			.brief {
				line-height: 33px;
			}
			
			.useFlow {
				color: #00a5e2;
			}
			
			.useFlow i {
				font-style: inherit;
				font-size: 28px;
			}
			
			.progressbar {
				position: relative;
				display: block;
				overflow: hidden;
				width: 100%;
				height: 2px;
				-webkit-transform-origin: center top;
				transform-origin: center top;
				vertical-align: middle;
				border-radius: 2px;
				background: #b6b6b6;
				-webkit-transform-style: preserve-3d;
				transform-style: preserve-3d;
			}
			
			.progressbar span {
				position: absolute;
				top: 0;
				left: 0%;
				width: 100%;
				height: 100%;
				-webkit-transition: 150ms;
				transition: 150ms;
				-webkit-transform: translate3d(-100%, 0, 0);
				transform: translate3d(-100%, 0, 0);
				background: #007aff;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">SIM卡信息</h1>
		</header>
		<div class="mui-content">
			<!--<div class="searchBox">
				<div class="searchControl">
					<div class="mui-input-row mui-search">
						<input type="search" id="searchInp" class="mui-input-clear" placeholder="请输入设备ID">
					</div>
					<button id="searchBtn" class="searchBtn">搜索</button>
				</div>
			</div>-->
			<div id="scrollPlace" class="mescroll">
				<!--id可以改,而"mescroll"的class不能删-->
				<ul id="dataList">
					<!--<li class="item">
						<div class="title">设备ID：868575028810101 <span class="state greenState">使用中</span></div>
						<div class="brief">
							<div>SIM卡iccid：89860411101892464191</div>
							<div class="">
								<div class="">套餐<span>（Mb）</span></div>
								<div id="" class="progressbar">
									<span></span>
								</div>
								<table border="0" cellspacing="0" cellpadding="0" style="width: 100%;">
									<tr>
										<th style="width: 60%;">流量剩余</th>
										<th>流量已用</th>
									</tr>
									<tr>
										<td><span class="useFlow"><i>6.04</i>MB</span>/2.03GB</td>
										<td>1.1GB</td>
									</tr>
								</table>
							</div>
							<div>到期时间：2020-2-29 00:00:00</div>
						</div>
					</li>-->
				</ul>

			</div>
			<script src="../js/jquery-2.1.0.js"></script>
			<script src="../js/mescroll.min.js" charset="utf-8"></script>
			<script src="../js/mui.min.js"></script>

			<script type="text/javascript">
				mui.init()
				//创建MeScroll对象,内部已默认开启下拉刷新,自动执行up.callback,重置列表数据;
				var mescroll = new MeScroll("scrollPlace", {
					up: {
						callback: getListData, //上拉回调,此处可简写; 相当于 callback: function (page) { getListData(page); }
						isBounce: false, //此处禁止ios回弹,解析(务必认真阅读,特别是最后一点): http://www.mescroll.com/qa.html#q10
						clearEmptyId: "dataList", //1.下拉刷新时会自动先清空此列表,再加入数据; 2.无任何数据时会在此列表自动提示空
						toTop: { //配置回到顶部按钮
							src: "../images/totop.png", //默认滚动到1000px显示,可配置offset修改
							offset: 700
						},
						empty: {
							//列表第一页无任何数据时,显示的空提示布局; 需配置warpId才显示
							warpId: "dataList", //父布局的id (1.3.5版本支持传入dom元素)
							icon: "../images/listNull.png", //图标,默认null,支持网络图
							tip: "暂无相关数据~" //提示
						},
						htmlNodata: '<p class="upwarp-nodata">-- 没有更多内容了 --</p>',
						noMoreSize: 5, //如果列表已无数据,可设置列表的总数量要大于5才显示无更多数据;
						lazyLoad: {
							use: true // 是否开启懒加载,默认false
						}
					}
				});
				/*联网加载列表数据  page = {num:1, size:10}; num:当前页 从1开始, size:每页数据条数 */
				function getListData(page) {
					//联网加载数据
					getListDataFromNet(page.num, page.size, function(curPageData, totalSize) {
						//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
						//mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;
						//方法二(推荐): 后台接口有返回列表的总数据量 totalSize
						mescroll.endBySize(curPageData.length, totalSize); //必传参数(当前页的数据个数, 总数据量)
						//设置列表数据,因为配置了emptyClearId,第一页会清空dataList的数据,所以setListData应该写在最后;
						setListData(curPageData);
					}, function() {
						//联网失败的回调,隐藏下拉刷新和上拉加载的状态;
						mescroll.endErr();
						mui.toast('数据请求失败');
					});
				}
				/*设置列表数据*/
				function setListData(curPageData) {
					var html = '';
					var dat = curPageData;
					for(var i = 0; i < dat.length; i++) {
						var statusTxt, status;
						if(dat[i].account_status == "0") {
							statusTxt = "未知";
							status = 'grayState';
						} else if(dat[i].account_status == "1") {
							statusTxt = "测试期";
							status = 'blueState';
						} else if(dat[i].account_status == "2") {
							statusTxt = "沉默期";
							status = 'blueState';
						} else if(dat[i].account_status == "3") {
							statusTxt = "使用中";
							status = 'greenState';
						} else if(dat[i].account_status == "4") {
							statusTxt = "停机";
							status = 'blueState';
							status = 'redState';
						} else if(dat[i].account_status == "5") {
							statusTxt = "停机保号";
							status = 'redState';
						} else if(dat[i].account_status == "6") {
							statusTxt = "预销号";
							status = 'redState';
						} else if(dat[i].account_status == "7") {
							statusTxt = "销号";
							status = 'grayState';
						}
						if(dat[i].iccid) {
							var plan = dat[i].data_plan;
							var usage = dat[i].data_usage.toFixed(2);
							var balance = dat[i].data_balance.toFixed(2);
							var timestamp4 = new Date(dat[i].expiry_date * 1000); //直接用 new Date(时间戳) 格式转化获得当前时间
							var time = timestamp4.toLocaleDateString().replace(/\//g, "-") + " " + timestamp4.toTimeString().substr(0, 8);
							var proportionVal = (usage / plan * 100).toFixed(0);
							//	             			console.log(usage)
							//	             			console.log(plan)
							//	             			console.log(proportionVal)

						} else {
							var plan = '--';
							var usage = '--';
							var balance = '--';
							var time = '--';
							var proportionVal = 0;
						}
						html += '<li class="item"><div class="title">设备ID：' + dat[i].equip_id + ' <span class="state ' + status + '">' + statusTxt + '</span></div>' +
							'<div class="brief"><div>SIM卡iccid：' + dat[i].iccid + '</div><div class="">' +
							'<div class="">套餐<span>（Mb）</span></div><div id="" class="progressbar">' +
							'<span>' + proportionVal + '</span></div><table border="0" cellspacing="0" cellpadding="0" style="width: 100%;">' +
							'<tr><th style="width: 60%;">流量剩余</th><th>流量已用</th></tr><tr>' +
							'<td><span class="useFlow"><i>' + balance + '</i>MB</span>/' + plan + 'MB</td><td>' + usage + 'MB</td>' +
							'</tr></table></div><div>到期时间：' + time + '</div></div></li>';
					}
					$('#dataList').append(html);
					$('.progressbar span').each(function(index, value) {
						//						console.log(value);

						var val = $(value).html() + '%';
						$(value).css('left', val);
					})

				}
				/*联网加载列表数据*/
				function getListDataFromNet(pageNum, pageSize, successCallback, errorCallback) {
					mui.ajax({
						type: 'POST',
						url: 'http://192.168.1.11:8000/app_siminfo',
						timeout: 100000, //超时时间设置，单位毫秒
						data: {
							'page': pageNum,
							'req': 'reqdat'
						},
						dataType: 'json',
						success: function(data) {
							successCallback(data.dat, data.nums);
						},
						error: function() {
							errorCallback();
						}
					});
				}

				var markingid = '' //用于记录点击的当前id 以便刷新
				window.addEventListener('refresh', function(event) { //如果详情页面更改数据  才页面刷新
					$('#dataList li').each(function() {
						if(markingid == $(this).data('id')) {
							$(this).find('.equipName').html(event.detail.markingEquipName);
						}
					})
				})

				//搜索操作
				$("#searchInp").on('keypress', function(e) {
					var keycode = e.keyCode;
					if(keycode == '13') {
						e.preventDefault();
						//请求搜索接口  
						if(mui('#searchInp')[0].value) {
							getListData({
								num: 1,
								size: 10
							})
						} else {
							mui.toast("请输入设备ID");
						}
					}
				})
				//				document.getElementById('searchBtn').addEventListener('tap', function() {
				//					if(mui('#searchInp')[0].value) {
				//						getListData({
				//							num: 1,
				//							size: 10
				//						})
				//					} else {
				//						mui.toast("请输入设备ID");
				//					}
				//				})
			</script>
	</body>

</html>