yf_zd
/
yfwlwCut


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680
							{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<link href="{% static '/lib/bootstrap-3.3.7/css/bootstrap.css' %}" rel="stylesheet">
	<link rel="stylesheet" href="{% static '/lib/font-awesome/4.5.0/css/font-awesome.css' %}">
	<link rel="stylesheet" href="{% static '/lib/css/ace.min.css' %}" />
	<link rel="stylesheet" href="{% static '/lib/css/ace-skins.min.css' %}">
	<link rel="stylesheet" href="{% static '/lib/css/ace-rtl.min.css' %}">
	<link rel="stylesheet" href="{% static '/lib/layui/css/layui.css' %}">
	<style type="text/css">
		body {
			overflow: hidden;
			background: #fff;
		}

		.searchCover {
			margin: 20px 0;
		}

		.floatRright {
			display: inline-block;
			float: right;
		}

		.innerTable {
			padding: 0 1px 0 0;
			min-width: 750px;
			overflow-x: scroll;
		}

		.table,
		.table.table-striped>thead>tr>th {
			text-align: center;
		}

		table td {
			vertical-align: middle !important;
		}

		.nullData {
			width: 100%;
			height: 500px;
			background: #ddd;
			text-align: center;
			line-height: 500px;
			font-size: 20px;
			border: 1px solid #ddd;
		}

		.refresh {
			font-size: 16px;
			color: #4C8FBD;
			margin-right: 30px;
		}

		.content {
			overflow-x: scroll;
		}

		#bindingEquipBox {
			display: none;
		}

		#bindingRes>div {
			padding: 10px 0;
			border-bottom: 1px solid #a2a2a2;
		}

		/* 充值 */

		.rechargeParent {
			display: none;
		}

		.rechargeParent>h2 {
			line-height: 46px;
			font-size: 24px;
			background: #ECECEC;
			border-bottom: 1px solid #ddd;
			padding-left: 17px;
			margin-bottom: 30px;
		}

		.recharge-demo {
			width: 90%;
			margin: 0 auto;
			border: 2px solid #ddd;
			text-align: center;
			cursor: pointer;
			position: relative;
			margin-bottom: 30px;
		}

		.recharge-demo:hover,
		.recharge-demo.active {
			border: 2px solid red;
		}

		.recharge-demo.active .switchIcon {
			position: absolute;
			bottom: 0;
			right: 0;
			height: 47px;
			width: 52px;
			background: url(../static/img/rechargeIcon.png);
		}

		.recharge-name {
			color: #818181;
			font-size: 26px;
			font-weight: 700;
			letter-spacing: 2px;
			line-height: 47px;
			border-bottom: 1px dashed #ddd;
		}

		.price {
			font-size: 33px;
			color: red;
			padding: 12px 0 4px;
			letter-spacing: 1px;
		}

		.price span {
			font-size: 14px;
		}

		.desc {
			font-size: 14px;
			letter-spacing: 2px;
			color: #8d8d8d;
			padding-bottom: 20px;
		}

		.increase {
			width: 38px;
			height: 32px;
			border: 2px white;
			float: left;
			background: #ececec;
		}

		.increase:hover {
			background: #d9d9d9;
		}

		.increaseVal {
			text-align: center;
			width: 50px;
			height: 32px;
			float: left;
		}

		.increaseBtnDiv {
			width: 145px;
			display: inline-block;
			vertical-align: middle;
		}

		.rechargeBtnDiv {
			text-align: right;
			padding: 0 20px 20px;
		}

		.rechargeA {
			display: none;
		}

		#echarts {
			margin: 20px;
			display: none;
		}

		.echartsBox {
			width: 380px;
			margin: 0 auto;
			height: 380px;
		}

		#pie-chart {
			width: 400PX;
			height: 400PX;
		}

		/* 新增布局 */

		.row {
			margin-right: 0;
			margin-left: 0;
		}

		.operate {
			height: 30px;
		}

		.echeatTitle {
			color: #0ca3fa;
			font-size: 18px;
			border-left: 3px solid #0ca3fa;
			padding-left: 10px;
		}

		.echartsDiv {
			width: 80%;
			height: 400px;
			margin: 0 auto;
		}
		.modal.fade.in{
			top:190px;  
		}
	</style>

	<body>
		<div class="content">
			<div class="operate searchCover">
				<div class="floatRright">
					<a class="refresh rechargeA" onclick="rechargeFun()" href="javascript:;">
						<i class="fa fa-jpy" aria-hidden="true" width="28"></i>
						充值 </a>
					<a class="refresh" onclick="examineEquip()" href="javascript:;">
						<i class="fa fa-search" aria-hidden="true" width="28"></i>
						绑定设备查询 </a>
					<a class="refresh" onclick="examineSIM()" href="javascript:;">
						<i class="fa fa-search" aria-hidden="true" width="28"></i>
						SIM卡查询 </a>
				</div>
			</div>
			<div>
				<div class="row">
					<div class="col-xs-12 col-sm-4">
						<div>
							<div class="echeatTitle">全部状态比例</div>
							<div class="echartsDiv" id="echartsAll"></div>
						</div>
					</div>
					<div class="col-xs-12 col-sm-4">
						<div>
							<div class="echeatTitle">测报灯状态比例</div>
							<div class="echartsDiv" id="echartsCbd"></div>
						</div>
					</div>
					<div class="col-xs-12 col-sm-4">
						<div>
							<div class="echeatTitle">环境监测状态比例</div>
							<div class="echartsDiv" id="echartsScd"></div>
						</div>
					</div>
				</div>
			</div>

			<div class="searchCover">
				设备ID：
				<input type="text" id="imei" autocomplete="off" placeholder="请输入设备ID" onkeypress="if (event.keyCode == 13) sub_filter();"> SIM卡iccid：
				<input type="text" value="" class="" id="iccid" autocomplete="off" placeholder="请输入SIM卡iccid" onkeypress="if (event.keyCode == 13) sub_filter();"
				/> SIM卡状态：
				<select name="" id="status">
					<option value="">请选择</option>
					<option value="1">测试期</option>
					<option value="2">沉默期</option>
					<option value="3">使用中</option>
					<option value="4">停机</option>
					<option value="5">停机保号</option>
					<option value="6">预销号</option>
					<option value="7">销号</option>
					<option value="0">未知</option>
				</select>
				<button type="button" onclick="sub_filter()" class="btn btn-sm btn-primary">筛选</button>
				<button type="button" class="btn btn-success btn-sm" onclick="decideExport()">导出</button>
			<!-- <button type="button" onclick="lookEchart()" class="btn btn-sm btn-success">状态统计</button> -->

			</div>


			<div class="innerTable">
				<table id="datatable" class="table  table-striped table-hover">
					<thead>
						<tr>
							<th>设备ID</th>
							<th>设备名称</th>
							<th>设备类型</th>
							<th>SIM卡iccid</th>
							<th>激活日期</th>
							<th>SIM卡状态</th>
							<th>套餐（Mb）</th>
							<th>已用流量（Mb）</th>
							<th>剩余流量（Mb）</th>
							<th>到期时间</th>
						</tr>
					</thead>
					<tbody>

					</tbody>
				</table>
				<div class="fenpei-bottom">
					<input type="hidden" id="totalPage" value={{ nums }}>
					<div id="page" style="text-align: center;"></div>
				</div>
			</div>
			<!-- 绑定设备展示框 -->
			<div id="bindingEquipBox" style="display:none">
				<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">
					<div>绑定设备查询结果</div>
					<p id="curIccid">ICCID: text</p>
					<div id="bindingRes">
						<!-- <div>
								状态：status
								<br>套餐dat.data_plan'Mb
								<br>已用流量:usage Mb
								<br>剩余流量：balanceMb
								<br>到期时间：89860401101700076454
						</div> -->
					</div>

				</div>
			</div>
			<!-- 充值 -->
			<div id="voucherModel" class="rechargeParent">
				<h2>充值套餐选择</h2>
				<input type="hidden" value="" class="currIccid">
				<div class="layui-row">
					<div class="layui-col-xs4">
						<div class="recharge-demo">
							<input type="hidden" value="22" class="product_id">
							<div class="recharge-name">10MB</div>
							<div>
								<div class="price">999
									<span>元</span>
								</div>
								<div class="desc">6个月每月10Mb</div>
							</div>
							<div class="switchIcon"></div>
						</div>
					</div>
					<div class="layui-col-xs4">
						<div class="recharge-demo active">
							<div class="recharge-name">10MB</div>
							<div>
								<div class="price">999
									<span>元</span>
								</div>
								<div class="desc">6个月每月10Mb</div>
							</div>
							<div class="switchIcon"></div>
						</div>
					</div>
					<div class="layui-col-xs4">
						<div class="recharge-demo">
							<div class="recharge-name">10MB</div>
							<div>
								<div class="price">999
									<span>元</span>
								</div>
								<div class="desc">6个月每月10Mb</div>
							</div>
							<div class="switchIcon"></div>
						</div>
					</div>
				</div>
				<div class="rechargeBtnDiv">
					<div class="increaseBtnDiv">
						<input class="increase" type="button" value="-" onclick="reductionOf(this)" />
						<input class="increaseVal" type="text" value="1" onblur="checkNumber(this)" />
						<input class="increase" type="button" value="+" onclick="add(this)" />
					</div>
					<button type="button" id="shaixuan" onclick="confirmFun()" class="btn btn-sm btn-primary">充值</button>
					<button type="button" id="shaixuan" onclick="cancelFun()" class="btn btn-sm ">取消</button>
				</div>
			</div>
			<!-- 统计图 -->
			<div class="" id="echarts">
				设备类型：
				<select name="" id="typeSelect">
					<option value="">全部</option>
					<option value="2">杀虫灯</option>
					<option value="3">测报灯</option>
				</select>
				<div class="echartsBox fl">
					<div class="hint"></div>
					<div class="fl" id="pie-chart">1</div>
				</div>
			</div>
			<!-- 导出提示框 -->
			<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
				<div class="modal-dialog" role="document">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-label="Close">
								<span aria-hidden="true">&times;</span>
							</button>
							<h4 class="modal-title" id="myModalLabel">导出信息</h4>
						</div>
						<div class="modal-body">
							<div class="row">
								<div class="col-xs-3 downTitle">文件名称：</div>
								<div class="col-xs-8 downContent" style=>
									<input type="text" id="filename" placeholder="请输入文件的名称" maxlength="15" class="col-xs-12">
								</div>
							</div>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default btn-sm" data-dismiss="modal">取消</button>
							<button type="button" class="btn btn-primary btn-sm" onclick="operation()">下载</button>
						</div>
					</div>
				</div>
			</div>
		</div>

		<script src="{% static '/lib/js/jquery-2.1.4.min.js' %}"></script>
		<script src="{% static '/lib/bootstrap-3.3.7/js/bootstrap.js' %}"></script>
		<script src="{% static '/lib/js/coordOffset.js' %}"></script>
		<script src="{% static '/js/common.js' %}"></script>
		<!-- 纠偏 -->
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=TcRPmrsiZUqdUBWoELrUArRkCRC36KMx"></script>
		<script src="{% static '/lib/layui/layui.all.js' %}"></script>
		<script type="text/javascript">
			$.ajaxSetup({
				data: { csrfmiddlewaretoken: '{{ csrf_token }}' },
			});
		</script>
		<script src="{% static '/lib/js/echarts.min.js' %}"></script>
		<script src="{% static '/js/siminfo/siminfo.js' %}?versions=0.5.0" type="text/javascript"></script>
		<script>
			// var colorList = ['#609657', '#6fb2e2', '#ff0000', '#e8ad2c', '#af5183', '#f1cfc7', '#911d5a', '#609657',];
			pieOption = {
				title: {
					// text: 'SIM卡状态比例',
					textStyle: {
						color: '#029eef'
					}
				},
				tooltip: {
					trigger: 'item',
					formatter: "{a} <br/>{b} : {c} ({d}%)"
				},
				legend: {
					orient: 'vertical',
					left: 'right',
					data: []
				},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '6%',
					containLabel: true
				},
				series: [
					{
						name: '状态比例',
						type: 'pie',
						radius: '55%',
						radius: ['0%', '70%'],
						data: [],
						itemStyle: {
							emphasis: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							},
							normal: {
								// color: function (params) {
								// 	//自定义颜色
									
								// 	return colorList[params.dataIndex]
								// }
							}
						}
					}
				]
			};
			var echartsAll = echarts.init(document.getElementById('echartsAll'));
			var echartsCbd = echarts.init(document.getElementById('echartsCbd'));
			var echartsScd = echarts.init(document.getElementById('echartsScd'));
			getEchartData1('', echartsAll);
			getEchartData1('3', echartsCbd);
			getEchartData1('5', echartsScd);
			function getEchartData1(etype, obj) {
				$.ajax({
					url: 'siminfo_chart',
					type: 'post',
					data: {
						etype: etype,
					},
					dataType: 'json',
					success: function (data) {
						renderEchart1(data, obj);
					},
					error: function (type) {
						console.log(type)
					}
				})
			}
			function renderEchart1(data, obj) {
				var v0 = 0, v1 = 0, v2 = 0, v3 = 0, v4 = 0, v5 = 0, v6 = 0, v7 = 0;
				for (var i = 0; i < data.length; i++) {
					if (data[i] == 0) {
						v0++;
					} else if (data[i] == 1) {
						v1++;
					} else if (data[i] == 2) {
						v2++;
					} else if (data[i] == 3) {
						v3++;
					} else if (data[i] == 4) {
						v4++;
					} else if (data[i] == 5) {
						v5++;
					} else if (data[i] == 6) {
						v6++;
					} else if (data[i] == 7) {
						v7++;
					}
					if (i == data.length - 1) {
						var dat = []
						var colorList = []
						if (v0) {
							dat.push({ value: v0, name: "未知" });
							colorList.push('#000');
						}
						if (v1) {
							dat.push({ value: v1, name: "测试期" })
							colorList.push('#63a879');
						}
						if (v2) {
							dat.push({ value: v2, name: "沉默期" })
							colorList.push('#b4b4b4');
						}
						if (v3) {
							dat.push({ value: v3, name: "使用中" })
							colorList.push('#6fb2e2');
						}
						if (v4) {
							dat.push({ value: v4, name: "停机" })
							colorList.push('#f29898');
						}
						if (v5) {
							dat.push({ value: v5, name: "停机保号" })
							colorList.push('#850000');
						}
						if (v6) {
							dat.push({ value: v6, name: "预销号" })
							colorList.push('#ff8a2a');
						}
						if (v7) {
							dat.push({ value: v7, name: "销号" })
							colorList.push('#FF0000');
						}
						pieOption.series[0].data = dat;
						pieOption.series[0].itemStyle.normal.color = function(params){
							return colorList[params.dataIndex]
						};
						obj.setOption(pieOption);
					}
				}

			}
			echartsAll.on("click", function (param) {
				pieConsole(param, '')
			});
			echartsCbd.on("click", function (param) {
				pieConsole(param, '3')
			});
			echartsScd.on("click", function (param) {
				pieConsole(param, '2')
			});
			function pieConsole(param, type) {
				//     获取data长度
				// console.log(pieOption.series[0].data.length);
				//      获取地N个data的值
				// console.log(pieOption);
				//     获取series中param.dataIndex事件对应的值
				// console.log(param.value);
				// console.log(param.name);
				// console.log(pieOption.series[param.seriesIndex].data[param.dataIndex].value);
				// console.log(pieOption.series[param.seriesIndex].data[param.dataIndex].name);
				// 　　clickFunc(param.dataIndex);//执行点击效果,触发相应js函数
				//param具体包含的方法见 https://blog.csdn.net/allenjay11/article/details/76033232
				getPieData(type, param.name)

				//刷新页面
				// location.reload();
				// window.location.reload();
			}

			// 点击饼状图获取数据
			function getPieData(type, para) {
				var accountStatus = 0;
				if (para == "未知") {
					accountStatus = "0";
				} else if (para == "测试期") {
					accountStatus = "1";
				} else if (para == "沉默期") {
					accountStatus = "2";
				} else if (para == "使用中") {
					accountStatus = "3";
				} else if (para == "停机") {
					accountStatus = "4";
				} else if (para == "停机保号") {
					accountStatus = "5";
				} else if (para == "预销号") {
					accountStatus = "6";
				} else if (para == "销号") {
					accountStatus = "7";
				}
				$('#imei').val('');
				$('#iccid').val('');
				$('#status').val('');
				geteChartsData(1, 1, type, accountStatus)
				// console.log(type+','+para)
				console.log(type + ',' + accountStatus)
			}
			window.onresize = function () {
				//当窗口发生变化时图表显示
				echartsAll.resize();
				echartsCbd.resize();
				echartsScd.resize();
				// pieChart.resize();
			}
			function geteChartsData(page, currpage, e_type, status) {
				$.ajax({
					type: 'get',
					url: 'siminfo_listview',
					data: {
						page: page,
						e_type: e_type,
						status: status
					},
					dataType: "html",
					beforeSend: function () {
						$('#loadingParent').show();
					},
					complete: function () {
						$('#loadingParent').hide();
					},
					success: function (data) {
						$('#datatable').children().eq(1).html(data);
						scrollBar();
						layui.use('laypage', function () {
							var laypage = layui.laypage;
							laypage.render({
								elem: 'page' //注意，这里的 test1 是 ID，不用加 # 号
								// ,count: 30
								, curr: currpage
								, count: $('#total_nums').val()
								, theme: '#428BCA'
								, layout: ['prev', 'page', 'next', 'skip']
								, jump: function (obj, first) {
									if (!first) {
										$("#datatable  tr:not(:first)").html("");
										geteChartsData(obj.curr, obj.curr, e_type, status);
									}
								}
							});
						});
					},
					error: function (type) {
						console.log(type)
					}
				})
			}
			// 导出提示框
			function decideExport() {
				$('#myModal').modal('toggle')
			}
			//导出
			function operation() {
				if (!$('#filename').val()) {
					layer.msg("请填写文件名！", { time: 2000 });
					return false;
				}
				window.location.href = 'siminfo_export?status=' + $('#status').val() + '&filename=' + $('#filename').val()

			}
		</script>
	</body>

</html>