master

分支 (1)

管理

管理

master

jilin__hzs
/
subway3.html

<!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" type="text/css" href="iconfont/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="css/all_css.css" />
		<link rel="stylesheet" type="text/css" href="css/weui/base.css" />
		<link rel="stylesheet" type="text/css" href="lib/weui.css" />
		<link rel="stylesheet" type="text/css" href="css/weui/jquery-weui.css" />
		<link rel="stylesheet" type="text/css" href="css/photoswipe.css" />
		<link rel="stylesheet" type="text/css" href="css/default-skin.css" />
		<link rel="stylesheet" type="text/css" href="css/subwayCss.css" />
		<style type="text/css">
			* {
				background-color: transparent;
			}

			img {
				width: 100%;
			}

			.index_head {
				background-color: #0070B4;
				padding: 25px 20px;
				position: static;
				/*层级低于所有页面遮罩层*/
			}

			#subway_main {
				max-width: 640px;
				min-width: 320px;
				width: 100%;
				margin: 0px auto;
			}

			.app_head_left {
				float: left;
				width: 30%;
				padding-left: 6px;
				padding-top: 6px;
			}

			.app_head_left a {
				color: #FFFFFF;
				font-size: 1.5em;
				font-weight: bold;
			}

			.app_head_mid {
				float: left;
				width: 40%;
				padding-top: 5px;
			}

			#app_head_title {
				text-align: center;
				color: #FFFFFF;
				font-size: 1.6em;
				font-family: "宋体";
				font-weight: bold;
			}

			.app_head_right {
				float: right;
				width: 30%;
				text-align: right;
				padding-right: 10px;
				height: 30px;
			}

			.my-gallery {
				width: 45px;
				float: right;
				position: relative;
				left: 16px;
			}

			.weui-row {
				width: 100%;
				position: relative;
				top: -3px;
				border: 1px solid #DEDEDE;
			}

			.weui-row .weui-col-33 {
				display: block;
				height: 50px;
				line-height: 48px;
				background-color: #CCCCCC;
			}

			.weui-row .weui-col-33:nth-child(3) {
				background-color: #FFFFFF;
			}

			.weui-row .weui-col-33:nth-child(1) img {
				width: 37px;
			}

			.weui-row .weui-col-33 img {
				width: 31px;
				vertical-align: middle;
				margin-right: 3px;
			}

			.weui-row .weui-col-33 b {
				color: #FFFFFF;
				font-size: 1.15em;
				padding: 5px 0px;
			}
			/*--白色小竖线划分区域--*/

			.weui-row .weui-col-33 label {
				float: right;
				font-size: 1.3em;
				color: #FFFFFF;
				position: relative;
				left: 2px;
			}

			.close-select {
				color: #0070B4 !important;
			}
			/*--下拉框样式--*/

			.selectSub3 {
				border-radius: 8px;
				width: 70%;
				float: left;
				margin-left: 15%;
				margin-right: 15%;
				margin-top: 40px;
				padding: 8px;
				background-color: #0070B4;
				color: #FFFFFF;
				text-align: center;
			}

			.selectSub3 label {
				font-size: 1.35em;
			}

			.selectSub3 i {
				font-size: 1.3em;
				font-weight: bold;
				color: #FFFFFF;
			}

			#connotsearch_train {
				display: block;
				width: 40%;
				height: 40px;
				line-height: 40px;
				color: #FFFFFF;
				font-size: 1.3em;
				text-align: center;
				border-radius: 8px;
				margin-top: 100px;
				background-color: #CCCCCC;
			}

			#search_train {
				display: block;
				width: 40%;
				height: 40px;
				line-height: 40px;
				color: #FFFFFF;
				font-size: 1.3em;
				text-align: center;
				border-radius: 8px;
				margin-top: 70px;
				background-color: #0070B4;
			}

			.selectAll {
				height: 150px;
				margin-top: 30px;
			}
			/*--下拉框每行高度属性--*/

			.weui_check_label {
				height: 70px;
			}
			/*--车辆查询内容部分--*/

			#subTrain_main {
				max-width: 640px;
				min-width: 320px;
				width: 100%;
				margin: 0px auto;
			}
			/*---遮罩层---*/

			.opacity {
				opacity: 0.7;
				filter: alpha(opacity=30);
				background-color: #000;
				z-index: 99;
			}

			.mask {
				position: fixed;
				height: 100%;
				width: 100%;
			}

			html,
			body {
				height: 100%;
			}
			/*----底部----*/

			footer {
				background-color: #DCDCDC;
				max-width: 640px;
				min-width: 320px;
				margin: 0px auto;
			}

			footer li {
				width: 50%;
			}

			footer li a {
				border-right: 1px solid #B1B1B1;
				height: 65%;
			}

			footer li:first-child a img {
				width: 50px;
			}

			footer li:last-child a img {
				width: 36px;
				margin-top: 2px;
			}

			footer label {
				color: #0070B4;
				position: relative;
				top: -13px;
				font-size: 1.1em;
			}
			/*----车站选择弹出层样式----*/

			#full_trainResult {
				max-width: 640px;
				min-width: 320px;
				width: 100%;
				margin: 0px auto;
				overflow: hidden;
			}

			#subwayTrain_tanchu {
				height: 100%;
				background-color: #FFFFFF;
			}

			#closeBtn {
				color: #FFFFFF;
				font-size: 1.2em;
				margin-top: -7px;
				margin-right: 8px;
			}
			/*全屏弹出框*/

			#subwayTrain_tanchu .toolbar-inner {
				height: 70px !important;
				background-color: #333333;
				padding: 25px 20px;
			}
			/*半屏弹出框*/

			.toolbar-inner {
				height: 55px !important;
				background-color: #333333;
				padding: 7px 20px;
			}

			.toolbar-inner h1 {
				color: #FFFFFF !important;
			}

			.toolbar-inner a {
				color: #00B9E8 !important;
			}

			.toolbar {
				background-color: #FFFFFF;
				height: 100%;
				/*border: 10px solid;*/
				background-image: url(img/subway/subwayBg.png);
				background-size: 130%;
				background-position: 0% 100%;
				/*background-repeat: repeat-y;*/
				background-repeat: no-repeat;
				z-index: 999999;
			}

			#trainResultTable {
				color: #666666;
				width: 80%;
				margin-top: 28px;
			}

			#trainResultTable tr {
				height: 32px;
				padding-left: 1em;
			}

			#trainResultTable tr th {
				background-color: #00B9E8;
				color: #FFFFFF;
				font-weight: bold;
				padding: 0.4em;
				font-size: 1.24em;
				text-align: center;
			}

			#trainResultTable tr td {
				padding-left: 1em;
				text-align: center;
				position: relative;
				left: -10px;
				font-weight: bold;
				font-size: 1.2em;
			}
			/* 换向按钮 */

			#hxBtn {
				float: right;
				display: block;
				color: #00B9E8;
				font-size: 1.3em;
				position: relative;
				top: 1.76em;
			}

			#hxBtn img {
				width: 20px;
				vertical-align: middle;
				margin-right: 5px;
			}
			/* 中间部分 头部 */

			.result_mid_title {
				height: 40px;
				line-height: 20px;
				padding: 0 15px;
				margin-top: 13px;
			}

			.result_mid_title h2 {
				float: left;
			}

			.result_mid_title h2 li {
				font-size: 1.22em;
			}

			#myResultTitle2 {
				position: relative;
				top: -6px;
			}

			#picReturnPage {
				position: fixed;
				font-size: 1.12em;
				color: #FFFFFF;
				top: 33px;
				right: 18px;
				z-index: 100000;
			}

			.pswp__top-bar {
				height: 70px !important;
				display: block;
			}

			.my_lable {
				position: fixed;
				top: 40px;
				right: 20px;
				color: #FFFFFF;
			}

			.pswp__share-tooltip,
			.pswp__share-modal {
				display: none;
			}
		</style>
	</head>

	<body ontouchstart>
		<div class="mask opacity" id="opacityDiv" style="display: none;"></div>
		<div id="subway_main">
			<div class="index_head" id="firTitle">
				<div class="app_head_left">
					<a href="index01.html" class="iconfont">&#xe6d4;</a>
				</div>
				<div class="app_head_mid">
					<p id="app_head_title">轨道交通</p>
				</div>
				<!--<div class="app_head_right">
					<div class="my-gallery" data-pswp-uid="1">
						<figure>
							<a href="img/subway/bigSubwayMap.jpg" data-size="770x812">
								<img src="img/subway/subway_03.png" />
							</a>
						</figure>
					</div>
					<a style="display: none;" id="picReturnPage" onclick="picReturnPage()">返回</a>
				</div>-->
			</div>
			<div class="weui-row weui-no-gutter tc">
				<a class="weui-col-33" href="subway.html">
					<img src="img/subway/whiteZhandian.png" /><b>站站</b>
					<label>|</label>
				</a>
				<a class="weui-col-33" href="subway2.html">
					<img src="img/subway/whiteZhanzhan.png" /><b>站点</b>
				</a>
				<a class="weui-col-33">
					<img src="img/subway/blueCheliang.png" /><b style="color: #0070B4;">车辆</b>
				</a>
			</div>
		</div>
		<div id="subTrain_main">
			<!--车辆查询内容部分-->
			<div class="selectAll">
				<div id="sub_3_select_1" class="selectSub3"><label id="label1">点击选择线路</label><i class="iconfont">&#xe6d5;</i></div>
				<div id="sub_3_select_2" class="selectSub3"><label id="label2">点击选择上下行</label><i class="iconfont">&#xe6d5;</i></div>
			</div>
			<a href="javascript:;" id="search_train" style="display: none;" class="public-th open-popup" data-target="#full_trainResult">查询</a>
			<a href="javascript:;" id="connotsearch_train">查询</a>
			<!--弹出框-->
			<div id="full_trainResult" class="weui-popup-container popup-bottom weui-popup-modal-visible">
				<div class="weui-popup-overlay yinying" id="yinying"></div>
				<div id="subwayTrain_tanchu" class="weui-popup-modal">
					<div class="toolbar" id="toolbar">
						<div class="toolbar-inner">
							<div class="app_head_left">
								<a href="javascript:;" class="picker-button close-popup" id="closeBtn">返回</a>
							</div>
							<div class="app_head_mid">
								<p id="app_head_title">查询结果</p>
							</div>
						</div>
						<div class="result_mid" id="result_mid">
							<div class="result_mid_title">
								<h2 id="myResultTitle"><li id="myResultTitle1"></li>&nbsp;&nbsp;<li id="myResultTitle2"></li></h2>
								<a href="javascript:;" id="hxBtn"><img src="img/subway/huanxiangBtn.png" />换向</a>
							</div>

							<table border="0" cellspacing="1" cellpadding="0" id="trainResultTable">
								<tr id="tableTitle">
									<th>车辆位置</th>
									<th>到达下站时间</th>
								</tr>
								<!--DOM動態添加節點-->
								<!--<tr>
									<td>滑雪场站</td>
									<td>13:30</td>
								</tr>-->
							</table>
						</div>
					</div>
				</div>
			</div>
		</div>

		<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/weui/jquery-weui.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/photoswipe.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/photoswipe-ui-default.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bigPicResearch.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/back_end.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/md5.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/myJS/subway_BigPic_returnBtn.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//			$(function() {
			//				$("#search_train").click();
			//			});
			var gdUrl = "http://111.26.219.36:9595/jt809a-qinggui/cc";
			var lineNub;
			var direction1;
			var direction2;
			var m; //设置0和1来进行换向获取数据
			//下拉框选择地铁线路与上下行方向
			$("#sub_3_select_1").click(function() {
				$("#label2").html("点击选择上下行");
			});
			$("#sub_3_select_1").select({
				title: "请选择线路",
				items: [{
						title: "轻轨3号线",
						value: 3
					},
					{
						title: "轻轨4号线",
						value: 4
					}
				],
				onChange: function(d) {
					//					console.log(d.values);
					$("#label1").html(d.titles);
					$("#myResultTitle1").html(d.titles); //網彈出框標題処賦值 輕軌X號綫
					changeSearchBtn();
					lineNub = d.titles.slice(2, 3);
					//					console.log(lineNub);
					if(lineNub == 3) {
						direction1 = "发往长春站方向";
						direction2 = "发往长影世纪城方向";
					} else if(lineNub == 4) {
						direction1 = "发往车场站方向";
						direction2 = "发往长春站北广场方向";
					}
					$("#sub_3_select_2").select("update", {
						title: "请选择上下行",
						items: [{
								title: direction1,
								value: 3,
							},
							{
								title: direction2,
								value: 4,
							}
						],
						onChange: function(d) {
							//					console.log(d.values);
							$("#label2").html(d.titles);
							$("#myResultTitle2").html(d.titles); //網彈出框標題処賦值 發往方向？
							changeSearchBtn();
						},
						onOpen: function() {
							//弹窗打开时 显示遮罩层
							$("#opacityDiv").show();
						},
						onClose: function() {
							//弹窗关闭时 隐藏遮罩层
							$("#opacityDiv").hide();
						}
					});
				},
				onOpen: function() {
					//弹窗打开时 显示遮罩层
					$("#opacityDiv").show();
				},
				onClose: function() {
					//弹窗关闭时 隐藏遮罩层
					$("#opacityDiv").hide();
				}
			});

			//点击选择线路的select

			function changeSearchBtn() {
				if($("#sub_3_select_1").html().indexOf("点击选择线路") == -1 && $("#sub_3_select_2").html().indexOf("点击选择上下行") == -1) {
					$("#connotsearch_train").hide();
					$("#search_train").show();
				} else {
					$("#search_train").hide();
					$("#connotsearch_train").show();
				}
			}
			//获取车辆数据方法
			function trainGetData() {
				//				console.log($("#trainResultTable tr").not("#tableTitle"));
				$("#trainResultTable tr").not("#tableTitle").remove();
				//				console.log(lineNub);
				$.ajax({
					type: "post",
					url: gdUrl,
					data: {
						"type": "cc_rail_gps_info",
						"LINECODE": lineNub
					},
					async: false,
					cache: false,
					dataType: "jsonp", //数据类型为jsonp
					jsonp: "callbackparam", //服务端用于接收callback调用的function名的参数
					jsonpCallback: "jsonpCallback1",
					success: function(data) {
						if(data.MSG == "成功") {
							var d = data.DATA;
							var m = data.MDATA;
							if(isEncrypt(d, m)) {
								for(var i = 0; i < eval(data.DATA).length; i++) {
									if(eval(data.DATA)[i].fangxiang.indexOf($("#label2").html()) != -1) {
										//选择方向为当前用户已选的内容
										var weizhi = eval(data.DATA)[i].weizhi;
										var timeStr = eval(data.DATA)[i].xiayizhanshijian;
										var time = timeStr.substr(0, 2) + ":" + timeStr.substr(2, 2);
										var tr = $('<tr></tr>');
										if(weizhi.indexOf("车库") == -1) { //不显示入库车
											$("#trainResultTable").append(tr);
											var td1 = $('<td>' + weizhi + '</td>');
											var td2 = $('<td>' + time + '</td>');
											$(tr).append(td1, td2);
										}
									}
								}
							} else {
								errMD();
							}
						} else {
							$.alert("暂无数据", "提示", function() {
								window.location.reload();
							});
						}

						//						//result_mid的高度加上头部高度 设定为整个弹出框高度
						//						var toolbarH = $("#result_mid").height() + 55;
						//						var screenH = document.documentElement.clientHeight; //获取手机屏幕高度
						//						//						var toolbarH = document.body.scrollHeight;
						//						if(toolbarH <= screenH) {
						//							//当内容高度比手机屏幕高度小时，设定它的高度为手机屏幕高度
						//							$("#toolbar").height(screenH);
						//						} else {
						//							//console.log(toolbarH);
						//							$("#toolbar").height(toolbarH);
						//						}
						//						console.log(eval(data.DATA)[i].weizhi);
					},
					error: function(data) {
						$.alert("连接超时，请检查网络设置", "提示");
					}
				});
			};
			//换向 获取数据方法
			function changeDirection() {
				$("#trainResultTable tr").not("#tableTitle").remove();
				//点击换向时替换标题上的发往的列车方向
				($("#myResultTitle2").html() == direction1) ? $("#myResultTitle2").html(direction2): $("#myResultTitle2").html(direction1);
				$.ajax({
					type: "post",
					url: gdUrl,
					data: {
						"type": "cc_rail_gps_info",
						"LINECODE": lineNub
					},
					async: false,
					cache: false,
					dataType: "jsonp", //数据类型为jsonp
					jsonp: "callbackparam", //服务端用于接收callback调用的function名的参数
					jsonpCallback: "jsonpCallback1",
					success: function(data) {
						console.log(data.DATA);
						for(var i = 0; i < eval(data.DATA).length; i++) {
							if(eval(data.DATA)[i].fangxiang.indexOf($("#label2").html()) == -1) {
								//选择方向为当前用户已选的内容
								var weizhi = eval(data.DATA)[i].weizhi;
								var timeStr = eval(data.DATA)[i].xiayizhanshijian;
								var time = timeStr.substr(0, 2) + ":" + timeStr.substr(2, 2);
								var tr = $('<tr></tr>');
								$("#trainResultTable").append(tr);
								var td1 = $('<td>' + weizhi + '</td>');
								var td2 = $('<td>' + time + '</td>');
								$(tr).append(td1, td2);
								//								console.log(line);
								//								eval(data.DATA)[i].weizhi;
							}
						}
					},
					error: function(data) {
						$.alert("连接超时，请检查网络设置", "提示");
					}
				});
			}
			//点击查询按钮查询车辆信息
			$("#search_train").click(function() {
				trainGetData();
				m = 0;
			});
			//点击换向按钮 获取相反方向列车信息
			$("#hxBtn").click(function() {
				if(m == 0) {
					changeDirection();
					m = 1;
				} else {
					trainGetData();
					m = 0;
				}
			});
		</script>
	</body>

</html>