YQ-August
/
oldRuico


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336
							<!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">
		
		<!--引入 element-ui 的样式，-->
		<link rel="stylesheet" href="../css/element.css">
		<link rel="stylesheet" href="../css/style.css">
		<script src="../js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/jquery.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/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/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>');
			document.write('<script src="../js/yz/configuration.js?id='+(new Date().getTime())+'" type="text/javascript" charset="utf-8"><\/script>');
		</script>
		<script>
			checkLogin();
		</script>
	</head>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}
		body{
			height: 100vh;
			color: #94d1ff;
			overflow: auto;
			background-color: #040d32;
		}
		.Range{
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: flex-end;
			padding-top: 6px;
			padding-right: 6px;
			height: 80px;
		}
		.Battery{
			position: relative;
			width: 43px;
			height: 80px;
		}
		.Battery>div{
			position: absolute;
			bottom: 6px;
			left: 5px;
			width: calc(100% - 11px);
			height:0%;
			border-radius: 4px;
			background-color: #45c5ff;
		}
		.Temp{
			position: relative;
			width: 44px;
			height: 80px;
			border: 2px solid #fff;
		}
		.Temp>div{
			position: absolute;
			bottom: 0px;
			left:0px;
			width:100%;
			height: 0%;
			background-color: #ffaa00;
		}
		.switch_li li{
			padding:4px 8px;
			width: 20%;
			text-align: center;
			/* height:20%; */
			font-size: 0.7vw;
		}
		.switch_li li .icon-cloud-state{
			margin-bottom: 3px;
		}
		.switch_li0 li,.switch_li2 li,.switch_li4 li,.switch_li6 li{
			width: 25%;
		}
		.warn_drog{
			position: relative;
			height: 42%;
			overflow: auto;
			padding-top:10px ;
		}
		.warn_drog::after{
			content: "";
			position: absolute;
			top: 0;
			left: 10%;
			width: 80%;
			border-top: 1px solid rgba(232, 232, 232, 0.2);
		}
	</style>
	<body>
		<div style="position: relative;height:45px;">
			<div class="tabUl" style="margin:7.5px 7.5px 0;">
				<div data-open="0" class="act_this">1#、2#发动机</div>
				<div data-open="1">3#、应急发动机</div>
			</div>
			<div style="position: absolute;bottom: 12px;right:20px;color: #fff;">
				最后更新时间：<span id="endTime"></span>
			</div>
		</div>
		<div id="htmVi" style="height:calc(100% - 60px);">
			<div class="yz_clm15" style="height: 100%;font-size: 0.8vw;">
				
			</div>
		</div>
	</body>
	<script>
		var nowDis = null; switchKey = {},angVal = [];
		var timeId = null;
		var myChart1,myChart2,myChart3,myChart4,myChart5,myChart6,myChart7,myChart8;
		
		function setoption1(num,_max,_unit,_txt){
			num = num == undefined?0 : num;
			$("#"+_txt).text(num);
			option = {
				series: [
					{
						name: '实时数据',
						min: 0,
						max: _max,
						// splitNumber:6,
						type: 'gauge',
						fontSize: 13,
						center: ['50%', '50%'],
						radius: "93%",
						detail: {
							show: false,
							formatter: '{value}'+_unit,
							fontSize: 14,
							offsetCenter: [0,"80%"],
							color:"#fbbd08"
						},
						data: [{value:(isNaN(Number(num,10))?0:num) }],
						axisLine: {           
							lineStyle: {       
								color: [[0.09, 'lime'], [0.82, '#1e90ff'], [1, '#ff4500']],
								width: 5
							}
						},
						axisTick: {
							distance: 4,
						},
						pointer: {
							width:5,
							length:"50%"
						},
						axisLabel:{
							distance: 8,
							textStyle: {
								color: '#fff',
								fontSize:9
							}
						},
						splitLine: {     
							distance: 4,
							length: 10,         
							lineStyle: {       
								width: 2,
								color: '#fff'
							}
						},
						title: {
							textStyle: {     
								color: '#fff',
							}
						},
					}
				]
			};
			return option;
		}
		var nowSn = localStorage.getItem("shipSn");
		window.addEventListener('message',(data)=>{
			initF(1);
		})
		$(document).ready(function(){
			smallSre = window.innerWidth < 1442;
			initF(0);
		})
		function initF(num){
			nowSn = localStorage.getItem("shipSn");
			let ds = Config((nowSn == "381001400"?"381001400":"382001400"),nowSn)["Engine"];
			switchKey = ds["switchKey"],angVal = ds["angVal"],nowDis = ds["Display"];
			ds.initHtml();
			$("#htmVi").css("height","calc(100% - "+(nowDis != "none"?60:52)+"px)");
			$(".tabUl").css("display",nowDis != "none"?"flex":"none");
			let _hei = ds["Height"];
			$(".Ch_hei").css("height",_hei+"%");
			$(".warn_drog").css("height",(100 - 2*_hei)+"%");
			myChart1 = echarts.init(document.getElementById('myChart1'));
			myChart2 = echarts.init(document.getElementById('myChart2'));
			myChart3 = echarts.init(document.getElementById('myChart3'));
			myChart4 = echarts.init(document.getElementById('myChart4'));
			myChart5 = echarts.init(document.getElementById('myChart5'));
			myChart6 = echarts.init(document.getElementById('myChart6'));
			if(nowDis != "none"){
				$(".tabUl>div").removeClass("act_this").eq(0).addClass("act_this");
				myChart7 = echarts.init(document.getElementById('myChart7'));
				myChart8 = echarts.init(document.getElementById('myChart8'));
			}
			firstData(0,nowDis);
			setOpt(2);
		}
		$(window).resize(function(){
			smallSre = window.innerWidth < 1442;
			setOpt(2);
		})	
		function firstData(_num,_sf){
			if(_num == 0){yzkj.load("load1")};
			setTimeout(()=>{
				deviceList(function acb(_data){
					setOpt(1,_data,_sf);
					$("#endTime").text(_data["time"])
					if(_num == 0){yzkj.closeLoad("load1");}
					if(_data.mmsi==undefined){
						setTimeout(()=>{
							firstData(1,_sf);
						},60*1000)
					}
				})
			},100)
		}
		function setOpt(num,_obj,_sf){
			if(num == 1){
				myChart1.setOption(setoption1(_obj[angVal[0][0]],5000,"RPM","cyzs_0"));
				myChart2.setOption(setoption1(_obj[angVal[0][1]],(nowSn == "480000618"?1500:20),(nowSn == "480000618"?"kPa":"MPa"),"yali_0"));
				myChart3.setOption(setoption1(_obj[angVal[1][0]],5000,"RPM","cyzs_1"));
				myChart4.setOption(setoption1(_obj[angVal[1][1]],(nowSn == "480000618"?1500:20),(nowSn == "480000618"?"kPa":"MPa"),"yali_1"));
				myChart5.setOption(setoption1(_obj[angVal[2][0]],5000,"RPM","cyzs_2"));
				myChart6.setOption(setoption1(_obj[angVal[2][1]],(nowSn == "480000618"?1500:20),(nowSn == "480000618"?"kPa":"MPa"),"yali_2"));
				if(_sf != "none"){
					myChart7.setOption(setoption1(_obj[angVal[3][0]],5000,"RPM","cyzs_3"));
					myChart8.setOption(setoption1(_obj[angVal[3][1]],(nowSn == "480000618"?1500:20),(nowSn == "480000618"?"kPa":"MPa"),"yali_3"));
				}
				initData(_obj);
				setText(_obj);
			}else{
				myChart1.resize();
				myChart2.resize();
				myChart3.resize();
				myChart4.resize();
				myChart5.resize();
				myChart6.resize();
				if(nowDis != "none"){
					myChart7.resize();
					myChart8.resize();
				}
			}
		}
		function setText(_obj){
			let _data = _obj;
			for(var i=0;i<angVal.length;i++){
				let _ab = angVal[i];
				let _a = _data[_ab[2]] == undefined?0 : parseFloat(_data[_ab[2]]);//淡水
				let _b = _data[_ab[3]] == undefined?0 : parseFloat(_data[_ab[3]]);//滑油温度
				let _c = _data[_ab[4]] == undefined?0 : parseFloat(_data[_ab[4]]);//电池
				$("#dcdy_"+i).text(_c == -3200 ?0:(isNaN(Number(_c,10))?"---":_c));
				$("#dswd_"+i).text(_a == -3200 || _a > 101 ?0:(isNaN(Number(_a,10))?"---":_a));
				$("#hywd_"+i).text(_b == -3200 || _b > 101 ?0:(isNaN(Number(_b,10))?"---":_b));
				$("#yxsj_"+i).text(_data[_ab[5]] == undefined?0 :(isNaN(Number(_data[_ab[5]],10))?"---":_data[_ab[5]]));//时间
				$("#dl_"+i).css("height",(parseInt((_c/110)*80)>80?80:parseInt((_c/110)*80))+"%")
				$("#dwdz_"+i).css("height",(parseInt(((_a>101?0:_a)/100)*98)>100?100:parseInt(((_a>101?0:_a)/100)*98))+"%")
				$("#hwdzdl_"+i).css("height",(parseInt(((_b>101?0:_b)/100)*98)>100?100:parseInt(((_b>101?0:_b)/100)*98))+"%")
			}
			
		}
		function initData(_obj){
			for(var key in switchKey){
				let _arr = switchKey[key];
				let _str = "";
				if(_arr != null){
					for(var subkey in _arr){
						let _ab = _arr[subkey].split(",");
						let _cd = subkey.split("_");
						let _sta = '';
						if(_obj[_cd[0]] != undefined){
							let _c = _obj[_cd[0]].charAt(parseInt(_cd[1]));
							if(_ab[1] == 2){
								_sta = _c == 0?'red':'';
							}else{
								if(_ab[1]==1){
									_sta = _c == 1?'green':'';
								}else{
									_sta = _c == 1?'red':'';
								}
							}
						}else{
							_sta = '';
						}
						
						_str += '<li>'+
									'<div class="iconfont icon-cloud-state" style="color:'+_sta+'"></div>'+
									'<div>'+_ab[0]+'</div>'+
								'</li>';
					}
				}
				$("."+key).html(_str);
			}
		}
		
		$(".tabUl div").on("click","",function(){
			$(this).addClass("act_this").siblings().removeClass("act_this");
			let _id = $(this).data("open");
			if(_id == 0){
				$("._Engi0").css("display","block");
				$("._Engi1").css("display","block");
				$("._Engi2").css("display","none");
				$("._Engi3").css("display","none");
			}else if(_id == 1){
				$("._Engi0").css("display","none");
				$("._Engi1").css("display","none");
				$("._Engi2").css("display","block");
				$("._Engi3").css("display","block");
			}
			setOpt(2);
		})
	</script>
</html>