YQ-August
/
oldRuico


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405
							<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>瑞高船舶智能监控系统</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="Cache" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache, must-revalidate">
		<meta http-equiv="expires" content="0">
		<meta name="viewport"
			content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<link rel="stylesheet" href="../../css/element.css">
		<link rel="stylesheet" href="../../css/style.css">
		<link rel="stylesheet" id="linkSource" href="../../css/base.css">
		<script src="../../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/yz/init.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/pako.js"></script>
		<script type="text/javascript">
			document.write('<script src="../../js/yz/shipLi.js?id='+(new Date().getTime())+'" type="text/javascript" charset="utf-8"><\/script>');
			document.write('<script src="../../js/yz/defailt.js?id='+(new Date().getTime())+'" type="text/javascript" charset="utf-8"><\/script>');
			document.write('<script src="../../js/yz/ajax.js?id='+(new Date().getTime())+'" type="text/javascript" charset="utf-8"><\/script>');
			checkLogin();
		</script>
	</head>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		body {
			color: #fff;
			height: 100%;
			background-color: #103151;
		}
		div,td {
			box-sizing: border-box;
		}
		.qixiang_box>div>div{
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.qixiang_box>div>div:nth-child(3){
			color:#ffea00;
			font-size: 18px;
			font-weight: 600;
		}
		.qixiang_box>div img{
			width: 40px;
		}
		.num_chiShui{
			font-size: 18px;
			font-weight: bold;
			margin-right: 3px;
			color:#ffea00;
		}
		.qixiang_box .num_chiShui{
			font-size: 18px;
		}
		#rgCx{
			display: none;
		}
	</style>
	<body>
		<div class="topParen">
			<div class="topBox">
				<div>船舶动态</div>
				<i class="iconfont icon-left text-white" onclick="javascript:history.back(-1);"></i>
			</div>
			<div class="table margin-xs text-grey" style="border:1px solid rgba(255,255,255,0.1);">
				<div class="bg-theme-son padding-left padding-tb-sm flex justify-between">
					<span class="text-white">AIS信息</span>
				</div>
				<div>
					<div class="br_b flex">
						<div class="flex-sub br_r padding-tb-xs padding-left-sm">
							当前位置：<span id="shipGps">113.23568,21.399475</span>
						</div>
						<div class="flex-sub padding-tb-xs padding-left-sm">
							航速：<span id="shipSpeed">0</span>节
						</div>
					</div>
					<div class="text-center">
						<div class="flex br_b">
							<div class="padding-tb-xs flex-sub br_r">
								<div style="width: 100%;height: 150px;" id="myChart1"></div>
								<div class="text-white margin-top-sm" style="font-size:15px;">
									船艏向：<span class="num_chiShui" id="shipCsx">0</span>°
								</div>
							</div>
							<div class="padding-tb-xs flex-sub">
								<div style="width: 100%;height: 150px;" id="myChart4"></div>
								<div class="text-white margin-top-sm" style="font-size:15px;">    
									船迹向：<span class="num_chiShui" id="shipCjx">0</span>°
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="table margin-xs text-grey" style="border:1px solid rgba(255,255,255,0.1);">
				<div class="bg-theme-son padding-left padding-tb-sm flex justify-between">
					<span class="text-white">吃水信息</span>
				</div>
				<div class="flex align-center padding-sm">
					<div class="flex-sub flex align-center justify-center">
						<img src="../../imgs/ship_cs.png" style="width: 40%;max-width:140px;">
						<div class="margin-left-xs margin-top">测深：<span class="num_chiShui" id="eatCs">0</span> m</div>
					</div>
					<div class="flex-sub text-center" id="rgCx">
						<div>艏：<span class="valTxt"><span class="num_chiShui" id="eatSs">0</span> m</div>
						<div class="flex align-center justify-center">
							<div>左中：<br><span class="valTxt"><span class="num_chiShui" id="eatZz">0</span> m</div>
							<img src="../../imgs/ship_tblr.png" mode="widthFix" style="width:30px;margin: 10px;">
							<div>右中：<br><span class="valTxt"><span class="num_chiShui" id="eatYz">0</span> m</div>
						</div>
						<div>艉：<span class="valTxt"><span class="num_chiShui" id="eatWx">0</span> m</div>
					</div>
				</div>
			</div>
			<div class="table margin-xs text-grey" style="border:1px solid rgba(255,255,255,0.1);">
				<div class="bg-theme-son padding-left padding-tb-sm flex justify-between">
					<span class="text-white">气象信息</span>
					<div class="flex align-center text-grey">
						<i class="iconfont icon-left" style="font-size: 14px;" onclick="changeDate(-1);"></i>
						<span id="_time" class="margin-lr-sm">2021/12/23 14:00:00</span>
						<i class="iconfont icon-right" style="font-size: 18px;" onclick="changeDate(1);"></i>
					</div>
				</div>
				<div class="qixiang_box">
					<div class="row flex br_b">
						<div class="flex-sub padding-tb-xs">
							<img src="../../imgs/fs_icon.png" alt="">
						</div>
						<div class="flex-sub padding-tb-xs br_r">
							风速
						</div>
						<div class="flex-sub padding-tb-xs br_r" id="weather1">
							0
						</div>
						<div class="flex-sub padding-tb-xs flex-direction">
							<div>米/秒</div>
							<div>(2级风)</div>
						</div>
					</div>
					<div class="row flex br_b">
						<div class="flex-sub padding-tb-xs">
							<img src="../../imgs/fx_icon.png" alt="">
						</div>
						<div class="flex-sub padding-tb-xs br_r">
							风向
						</div>
						<div class="flex-sub padding-tb-xs br_r" id="weather2">
							0
						</div>
						<div class="flex-sub padding-tb-xs">
							度
						</div>
					</div>
					<div class="row flex br_b">
						<div class="flex-sub padding-tb-xs">
							<img src="../../imgs/lg_icon.png" alt="">
						</div>
						<div class="flex-sub padding-tb-xs br_r">
							浪高
						</div>
						<div class="flex-sub padding-tb-xs br_r" id="weather3">
							0
						</div>
						<div class="flex-sub padding-tb-xs">
							米
						</div>
					</div>
					<div class="row flex br_b">
						<div class="flex-sub padding-tb-xs">
							<img src="../../imgs/ls_icon.png" alt="">
						</div>
						<div class="flex-sub padding-tb-xs br_r">
							流速
						</div>
						<div class="flex-sub padding-tb-xs br_r" id="weather4">
							0
						</div>
						<div class="flex-sub padding-tb-xs">
							米/秒
						</div>
					</div>
					<div class="row flex br_b">
						<div class="flex-sub padding-tb-xs">
							<img src="../../imgs/lx_icon.png" alt="">
						</div>
						<div class="flex-sub  padding-tb-xs br_r">
							流向
						</div>
						<div class="flex-sub padding-tb-xs br_r" id="weather5">
							0
						</div>
						<div class="flex-sub padding-tb-xs">
							度
						</div>
					</div>
					<div class="row flex br_b">
						<div class="flex-sub padding-tb-xs">
							<img src="../../imgs/wd_icon.png" alt="">
						</div>
						<div class="flex-sub padding-tb-xs br_r">
							温度
						</div>
						<div class="flex-sub padding-tb-xs br_r" id="weather6">
							0
						</div>
						<div class="flex-sub padding-tb-xs">
							摄氏度
						</div>
					</div>
					<div class="row flex">
						<div class="flex-sub padding-tb-xs">
							<img src="../../imgs/qy_icon.png" alt="">
						</div>
						<div class="flex-sub padding-tb-xs br_r">
							气压
						</div>
						<div class="flex-sub padding-tb-xs br_r" id="weather7">
							0
						</div>
						<div class="flex-sub padding-tb-xs">
							hPa
						</div>
					</div>
				</div>
			</div>
		</div>
		<script type="text/javascript">
			var _Posi = null,nowSn = localStorage.getItem("shipSn");;
			var _Tok = JSON.parse(localStorage.getItem("_yz_TT")).yzTok;
			var myChart1 = echarts.init(document.getElementById('myChart1'));
			var myChart4 = echarts.init(document.getElementById('myChart4'));
			function setoption2(ship_s,txt) {
				ship_s = ship_s == undefined?0 : ship_s;
				$("#"+txt).text(ship_s);
				option = {
					series: [
						{
							name: '实时数据',
							min: 0,
							max: 360,
							splitNumber:12,
							type: 'gauge',
							fontSize: 0,
							center: ['50%', '50%'],
							radius: '97%',
							startAngle:90,
							endAngle: -269.999999,
							detail: {show:false
							},
							axisTick: {
							    distance: 4,
								lineStyle: {
									color: '#1890ff',
								}
							},
							data: [{value: ship_s,itemStyle:{color:"#1890ff"}}],
							axisLine: {
								lineStyle: {
									width: 0,
								},
							},
							axisLabel:{
								textStyle: {
									color: '#fff',
									fontSize:9
								},
								distance: 3,
								formatter: function(e) {
									switch (e + "") {
										case "0":
											return "0";
										case "30":
											return "30";
										case "60":
											return "60";
										case "90":
											return "90";
										case "120":
											return "120";
										case "150":
											return "150";
										case "180":
											return "180";
										case "210":
											return "210";
										case "240":
											return "240";
										case "270":
											return "270";
										case "300":
											return "300";
										case "330":
											return "330";
										default:
											return "";
									}
								}
							},
							pointer: {
								width:2,
								length:"60%"
							},
							splitLine: {    
								distance: 4,
								length: 10,       
								lineStyle: {      
									width: 2,
									color: '#1890ff',
								}
							},
							title: {
								textStyle: {    
									color: '#1890ff',
								}
							},
						}
					]
				};
				return option;
			}
			$(document).ready(function(){
				let nowTime = changeDays(0,new Date());
				let _day = parseInt(nowTime[3])<9?" 08:00:00":(parseInt(nowTime[3])<15?" 14:00:00":" 20:00:00");
				$("#_time").text(nowTime[0].replace(/-/g,"/")+_day);
				firstData();
				// setInterval(()=>{firstData();},60*1000);
			})
			function firstData(){
				_Posi = null;
				deviceList(function(_obj){
					let _arr = _obj;
					myChart1.setOption(setoption2(_arr["0aA1"]<0?256.4:_arr["0aA1"],"shipCsx"));
					myChart4.setOption(setoption2(_arr["0a8"]<0?65:_arr["0a8"],"shipCjx"));
					_Posi = _arr["0a5"]<0?[121.453598,30.769552]: [_arr["0a4"], _arr["0a5"]];
					$("#shipGps").text(_Posi[0]+","+_Posi[1]);
					$("#shipSpeed").text(_arr["0a9"] == undefined?0 : _arr["0a9"]);
					
					if(nowSn == "381001400"){
						$("#rgCx").css("display","none");
					}else{
						$("#rgCx").css("display","block");
					}
					$("#eatCs").text(_arr["0aS"] == undefined?0 : _arr["0aS"]);
					$("#eatSs").text(_arr["0ag"] == undefined?0 : _arr["0ag"]);
					$("#eatZz").text(_arr["0ai"] == undefined?0 : _arr["0ai"]);
					$("#eatYz").text(_arr["0aj"] == undefined?0 : _arr["0aj"]);
					$("#eatWx").text(_arr["0ah"] == undefined?0 : _arr["0ah"]);
					getWeat($("#_time").text().replace(/\//g,"-"));
				})
			}
			function getWeat(_time){
				if(_Posi != null){
					getWeather({
						_Tok: _Tok,
						nowSn: nowSn,
						_time: _time,
						posi: _Posi
					})
				}
			}
			function changeDate(_num){
				let _key = $("#_time").text().split(" ");
				let _time = parseInt(_key[1]);
				let _year = _key[0].replace(/\//g,"-");
				let _newAjax = "";
				if(_num == -1){
					if(_time < 9){
						let _newYW = changeDays(-1,_year);
						$("#_time").text(_newYW[0].replace(/-/g,"/")+" 20:00:00");
						_newAjax = _newYW[0] + " 20:00:00";
					}else if(_time>8&&_time<15){
						$("#_time").text(_year.replace(/-/g,"/")+" 08:00:00");
						_newAjax = _year + " 08:00:00";
					}else if(_time>14){
						$("#_time").text(_year.replace(/-/g,"/")+" 14:00:00");
						_newAjax = _year + " 14:00:00";
					}
				}else{
					if(_time < 9){
						$("#_time").text(_year.replace(/-/g,"/")+" 14:00:00");
						_newAjax = _year + " 14:00:00";
					}else if(_time>8&&_time<15){
						$("#_time").text(_year.replace(/-/g,"/")+" 20:00:00");
						_newAjax = _year + " 20:00:00";
					}else if(_time>14){
						let _newYW = changeDays(1,_year);
						$("#_time").text(_newYW[0].replace(/-/g,"/")+" 08:00:00");
						_newAjax = _newYW[0] + " 08:00:00";
					}
				}
				getWeat(_newAjax);
			}
		</script>
	</body>
</html>