YQ-August
/
oldRuico


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361
							<!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="../layui/css/layui.css" media="all">
		<link rel="stylesheet" href="../css/element.css">
		<link rel="stylesheet" href="../css/style.css">
		<link rel="stylesheet" href="../css/base.css">
		
		<script src="../layui/layui.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			document.write('<script src="../js/yz/init.js?id='+(new Date().getTime())+'" type="text/javascript" charset="utf-8"><\/script>');
			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/ajax.js?id='+(new Date().getTime())+'" type="text/javascript" charset="utf-8"><\/script>');
			document.write('<script src="../js/yz/configuration.js?id='+(new Date().getTime())+'" type="text/javascript" charset="utf-8"><\/script>');
		</script>
	</head>
	<script>
		checkLogin();
	</script>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}
		body {
			height: 100vh;
			color: #fff;
			overflow: auto;
			background-color: #040d32;
		}
		._day{
			height: 28px;
			font-size: 14px;
			line-height: 28px;
			width: 60px;
			cursor: pointer;
			border-radius: 4px;
			text-align: center;
			background-color: #5793f3;
		}
		.layui-nav .layui-nav-item{
			cursor: pointer;
			line-height: 45px;
		}
		.layui-nav .layui-nav-item .layui-nav-child{
			top:50px;
		}
		.layui-nav .layui-nav-item .layui-nav-child dd{
			cursor: pointer;
		}
		.layui-nav .layui-this:after{
			background-color: #5793f3;
		}
	</style>
	<body>
		<div style="height:60px;padding:7.5px;">
			<ul class="layui-nav yz-tab" style="background-color: #082041;">
			    <li class="layui-nav-item layui-this">
					<a><span style="font-size: 15px;">左液货舱</span><span class="layui-nav-more"></span></a>
			        <dl class="layui-nav-child">
						<dd data-open="onePost"><a>液位</a></dd>
			            <dd data-open="twoPost"><a>压力</a></dd>
						<dd data-open="nintPost" style="display: none;"><a>容量</a></dd>
						<dd data-open="thrPost"><a>上部温度</a></dd>
			            <dd data-open="forPost"><a>中部温度</a></dd>
						<dd data-open="fivPost"><a>底部温度</a></dd>
			        </dl>
			    </li>
				<li class="layui-nav-item">
					<a><span style="font-size: 15px;">右液货舱</span><span class="layui-nav-more"></span></a>
				    <dl class="layui-nav-child">
				       <dd data-open="sixPost"><a>液位</a></dd>
				       <dd data-open="sevPost"><a>压力</a></dd>
					   <dd data-open="tentPost" style="display: none;"><a>容量</a></dd>
				       <dd data-open="eigPost"><a>上部温度</a></dd>
				       <dd data-open="ninPost"><a>中部温度</a></dd>
				       <dd data-open="tenPost"><a>底部温度</a></dd>
				    </dl>
				</li>
				<li class="layui-nav-item yBeng">
					<a><span style="font-size: 15px;" class="wyGui">货油泵</span><span class="layui-nav-more"></span></a>
				    <dl class="layui-nav-child">
				        <dd data-open="onetPost"><a>前轴温度</a></dd>
						<dd data-open="twotPost"><a>后轴温度</a></dd>
						<dd data-open="thrtPost"><a>泵壳温度</a></dd>
						<dd data-open="fortPost"><a>舱壁轴填料函温度</a></dd>
				    </dl>
				</li>
				<li class="layui-nav-item ydBeng">
					<a><span style="font-size: 15px;">压载泵、淡水舱</span><span class="layui-nav-more"></span></a>
				    <dl class="layui-nav-child">
				        <dd data-open="onetPost"><a>左液位</a></dd>
						<dd data-open="twotPost"><a>右液位</a></dd>
						<dd data-open="thrtPost"><a>左容量</a></dd>
						<dd data-open="fortPost"><a>右容量</a></dd>
				    </dl>
				</li>
				<li class="layui-nav-item">
					<a>
						<span class="zgTxt" style="font-size: 15px;">总管压力</span>
						<span class="layui-nav-more"></span>
					</a>
				    <dl class="layui-nav-child">
				        <dd data-open="fiftPost"><a class="zgTxt">总管压力</a></dd>
				    </dl>
				</li>
				<li class="layui-nav-item yBeng">
					<a><span style="font-size: 15px;" class="ogsTxt">可燃气体</span><span class="layui-nav-more"></span></a>
				    <dl class="layui-nav-child">
				        <dd data-open="sixtPost"><a class="ogsTxt">可燃气体</a></dd>
				    </dl>
				</li>
				<li class="layui-nav-item" id="pumpIO">
					<a><span class="jCy" style="font-size: 15px;">泵进出口压力</span><span class="layui-nav-more"></span></a>
				    <dl class="layui-nav-child">
				        <dd data-open="sevtPost"><a>进口压力</a></dd>
						<dd data-open="eigtPost"><a>出口压力</a></dd>
				    </dl>
				</li>
			</ul>
		</div>
		<div class="search_ flex justify-center align-center">
			<div class="_day" data-num="-1">前一天</div>
			<input type="date" class="startDate text-center margin-lr" style="width: 140px;padding: 0;"/>
			<div class="_day" data-num="1">后一天</div>
		</div>
		<div class="yz_clm15" style="height: calc(100% - 95px);">
			<div class="yz_clm4 reportli">
				<div class="Sense">
					<div class="yz_title">1#左液货舱压力</div>
					<div id="myChart1" style="height: calc(100% - 30px);">
						
					</div>
				</div>
			</div>
			<div class="yz_clm4 reportli">
				<div class="Sense">
					<div class="yz_title">2#左液货舱压力</div>
					<div id="myChart2" style="height: calc(100% - 30px);">
						
					</div>
				</div>
			</div>
			<div class="yz_clm4 reportli">
				<div class="Sense">
					<div class="yz_title">3#左液货舱压力</div>
					<div id="myChart3" style="height: calc(100% - 30px);">
						
					</div>
				</div>
			</div>
			<div class="yz_clm4 reportli">
				<div class="Sense">
					<div class="yz_title">4#左液货舱压力</div>
					<div id="myChart4" style="height: calc(100% - 30px);">
						
					</div>
				</div>
			</div>
			<div class="yz_clm4 reportli">
				<div class="Sense">
					<div class="yz_title">5#左液货舱压力</div>
					<div id="myChart5" style="height: calc(100% - 30px);">
						
					</div>
				</div>
			</div>
			<div class="yz_clm4 reportli">
				<div class="Sense">
					<div class="yz_title">左污液舱压力</div>
					<div id="myChart6" style="height: calc(100% - 30px);">
						
					</div>
				</div>
			</div>
			<div class="yz_clm4 reportli" style="display: none;">
				<div class="Sense">
					<div class="yz_title"></div>
					<div id="myChart7" style="height: calc(100% - 30px);">
						
					</div>
				</div>
			</div>
			<div class="yz_clm4 reportli" style="display: none;">
				<div class="Sense">
					<div class="yz_title"></div>
					<div id="myChart8" style="height: calc(100% - 30px);">
						
					</div>
				</div>
			</div>
		</div>
	</body>
	<script>
		var _Tok = JSON.parse(localStorage.getItem("_yz_TT")).yzTok;
		var _ship = localStorage.getItem("shipSn"),_shipMmsi = undefined;
		var _XAxis = [],_myChart = [],nowCar = "onePost",nowTime = null;
		var _ChartU = ["myChart1","myChart2","myChart3","myChart4","myChart5","myChart6","myChart7","myChart8"];
		var _eCchart = {},_eChartTxt = {};
		
		layui.use(['layer', 'form','element'], function(){
			var layer = layui.layer,
				element = layui.element,
				$ = layui.jquery;
		})
		window.addEventListener('message',(data)=>{
			initFn();
		})
		$(document).ready(function() {
			initFn();
		});
		function initFn(){
			_ship = localStorage.getItem("shipSn");
			let _shipdata = ShipData();
			_shipMmsi = _shipdata.filter(item => item.sn == _ship)[0].mmsi;
			let _Config = Config((_ship == "381001400"||_ship == "480000618"?"381001400":"382001400"),_ship)["Cargo"];
			_eCchart = _Config["eCchart"];
			_eChartTxt = _Config["eChartTxt"];
			let _sta = _Config["eCchartSta"];
			
			$("#pumpIO").css("display",_sta[7]);
			$(".yz-tab dd[data-open='nintPost']").css("display",_sta[0]);
			$(".yz-tab dd[data-open='tentPost']").css("display",_sta[0]);
			$(".yz-tab dd[data-open='nintPost']").css("display",_sta[0]);
			$(".yz-tab dd[data-open='tentPost']").css("display",_sta[0]);
			$(".yz-tab dd[data-open='twotPost']").css("display",_sta[9]);
			$(".yz-tab dd[data-open='thrtPost']").css("display",_sta[9]);
			$(".yz-tab dd[data-open='fortPost']").css("display",_sta[9]);
			
			$(".yz-tab .yBeng").css("display",_sta[1]);
			$(".yz-tab .ydBeng").css("display",_sta[6]);
			
			$(".yz-tab .zgTxt").text(_sta[2]);
			$(".yz-tab .jCy").text(_sta[3]);
			$(".yz-tab .ogsTxt").text(_sta[8]);
			
			$(".yz-tab .wyGui").text(_sta[10]);
			$(".yz-tab dd[data-open='onetPost'] a").text(_sta[11]);
			
			$(".yz-tab dd[data-open='sevtPost'] a").text(_sta[4]);
			$(".yz-tab dd[data-open='eigtPost'] a").text(_sta[5]);
			_myChart = [];
			nowCar = "onePost";
			$(".yz-tab li").removeClass("layui-this").eq(0).addClass("layui-this");
			$(".yz-tab li dd").removeClass("layui-this");
			$(".yz-tab dd[data-open='onePost']").addClass("layui-this");
			$(".startDate").val(getTime(new Date())[0]);
			setXAxis();
			setEcharts(nowCar);
		}
		function setEcharts(_key){
			var _sta = 0;
			yzkj.load("load1");
			setTimeout(()=>{
				let _obj = _eCchart[_key];
				nowTime = $(".startDate").val().replace(/\//g, '-');
				$(".reportli").css("display","block");
				if(_obj.length == 8){
					$(".reportli").removeClass("yz_clm4").addClass("yz_clm3");
				}else if(_obj.length == 7){
					$(".reportli").removeClass("yz_clm4").addClass("yz_clm3");
					$(".reportli").eq(7).css("display","none");
				}else if(_obj.length < 7){
					$(".reportli").removeClass("yz_clm3").addClass("yz_clm4");
					$(".reportli").eq(6).css("display","none");
					$(".reportli").eq(7).css("display","none");
					if(_obj.length == 5){
						$(".reportli").eq(5).css("display","none");
					}else if(_obj.length == 4){
						$(".reportli").eq(4).css("display","none");
						$(".reportli").eq(5).css("display","none");
					}
				}
				for(var i=0;i<_obj.length;i++){
					let _acb = _obj[i],_ind = i;
					$(".reportli .yz_title").eq(i).text(_eChartTxt[_key][i]);
					if(_shipMmsi==undefined){
						reportAjax({
							"_url":_acb[0],
							"_time": nowTime,
							"sn": _ship,
							// "sn":380001104,
							"callback":function(res){
								_sta += 1;
								setData({
									"_data":res,
									"_i":_ind,
									"_unit":_acb[1],
									"_ft":(_sta == _obj.length)?true:false,
									"range":_acb[2],
									"key": _acb[0]
								});
							}
						})
					}else{
						if(i == _obj.length - 1){
							yzkj.closeLoad("load1");
						}
						_myChart[_ind].setOption(setoption1([],_XAxis,_acb[1],_acb[2]));
						_myChart[_ind].resize();
					}
				}
			},100)
		}
		var reduceStr = { "528": 7.44,"529": 7.449,"530": 7.38,"531": 7.359,"532": 7.371,"533": 7.382,
						  "534": 7.378,"535": 7.374,"536": 7.369,"537": 7.38,"538": 7.339,"539": 7.333 };
		function setData(_obj){
			let _newD = [];
			for(var i=0;i<6*24;i++){
				let _tim = getTime(new Date(new Date(nowTime+" 00:00:00").getTime() + (i*60*1000*10)));
				if(reduceStr[_obj.key] != undefined&&(_obj._data[_tim[0]+_tim[2]]) != undefined){
					_newD.push((parseFloat(reduceStr[_obj.key]) - parseFloat(_obj._data[_tim[0]+_tim[2]])).toFixed(2) || 0);
				}else{
					_newD.push(_obj._data[_tim[0]+_tim[2]] || 0);
				}
			}
			_myChart[_obj._i].setOption(setoption1(_newD,_XAxis,_obj._unit,_obj.range));
			_myChart[_obj._i].resize();
			if(_obj._ft){
				yzkj.closeLoad("load1");
			}
		}
		$(window).resize(function(){
			for(var i=0;i<_myChart.length;i++){
				_myChart[i].resize();
			}
		})	
		$(".startDate").on("change","",function(e){
			setEcharts(nowCar);
		})
		$(".layui-nav-child").on("click","dd",function(){
			let _id = $(this).data("open");
			nowCar = _id;
			setEcharts(nowCar);
			$(this).parent().parent().addClass("layui-this").siblings().removeClass("layui-this");
		})
		$(".search_ ._day").on("click","",function(){
			let _id = parseInt($(this).data("num"));
			let _key = $(".startDate").val().replace(/\//g, '-');
			let _a = dayChange(_key,_id);
			if(_a != undefined){
				$(".startDate").val(getTime(dayChange(_key,_id))[0]);
				setEcharts(nowCar);
			}
		})
	</script>
</html>