YQ-August
/
oldRuico


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567
							<!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;
		}
		.infoLi{
			width: 50%;
			line-height:19px;
			font-size: 13px;
			padding-left:18px;
			color: rgba(255,255,255,0.7);
			border-right: 1px solid #797979;
			border-bottom: 1px solid #797979;
		}
		.infoLi:nth-child(even){
			border-right:none;
		}
		.infoLi>div{
			display: flex;
		}
		.infoLi>div>div:first-child{
			width: 50px;
			text-align: right;
			padding-right: 15px;
		}
		.infoLi .shipYw{
			position: relative;
		}
		.infoLi .shipYw .text-lg{
			position: absolute;
			left: -10px;
		}
		.title{
			color: #0081ff;
			font-size: 15px;
			font-weight: 600;
			justify-content: center;
			padding: 9px 0;
		}
		.beng_box{
			box-sizing: border-box;
			width: 100%;
			padding:6px;
			font-size: 12px;
			margin-bottom: 10px;
			background-color: rgba(82,152,159,0.6);
		}
		.beng_box>div:last-child{
			text-align: center;
			margin-top: 10px;
			font-size: 14px;
		}
		.beng_box span{
			letter-spacing:4px;
			font-size: 22px;
			font-weight: bold;
			color: #fbbd08;
			margin-right: 6px;
		}
		.numbox{
			font-size: 16px;
			font-weight: bold;
			color: #fbbd08;
			margin-right: 5px;
		}
		.numbox+span{
			font-size: 12px;
		}
		.bg-theme-son{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 5px 10px;
			/* color: rgba(255,255,255,0.8); */
		}
		.bg-theme-son .iconfont.act{
			transform:rotate(90deg);
			transition:transform 0.3s linear;
		}
		.temBox{
			width: 50px;
			height: 80px;
			background-color: #005eb6;
			border: 1px solid #fff;
			margin-left: 5px;
			background-image: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 20%, #103151 1%);
		}
	</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="tabli">
				<div class="yz_this" name="oneEng">货舱</div>
				<div name="twoEng" style="flex: 2;">压载舱、淡水舱液位容量</div>
				<div name="thrEng">泵舱</div>
			</div>
			<div class="hk_inf oneEng">
				<div style="border: 1px solid rgba(125,125,125,0.4);margin: 7px;">
					<div class="bg-theme-son flex justify-between">
						<div>货舱压力、液位、温度</div>
						<div class="text-sm text-grey flex">
							<div class="flex align-center">
								<span class="text-lg">●</span>
								<span>无</span>
							</div>
							<div class="flex align-center margin-lr-sm">
								<span class="text-lg text-red">●</span>
								<span>高高位</span>
							</div>
							<div class="flex align-center">
								<span class="text-lg text-orange">●</span>
								<span>高位</span>
							</div>
						</div>
					</div>
					<div class="flex flex-wrap" id="_View">
						
					</div>
				</div>
			</div>
			<div class="hk_inf twoEng" style="display: none;">
				<div style="border: 1px solid rgba(125,125,125,0.4);margin: 7px;">
					<div class="bg-theme-son">
						<div>压载舱、淡水舱液位容量</div>
					</div>
					<div class="flex flex-wrap" id="_yaView">
						
					</div>
				</div>
			</div>
			<div class="hk_inf thrEng" style="display: none;">
				<div style="border: 1px solid rgba(125,125,125,0.4);margin: 7px;">
					<div class="bg-theme-son">
						<span>泵进出口压力</span>
						<span class="iconfont icon-right act"></span>
					</div>
					<div>
						<div class="flex justify-around">
							<div style="width: 46%;">
								<div class="beng_box">
									<div>进口 - 1#压载泵</div>
									<div><span id="beng_1">0</span>MPa</div>
								</div>
								<div class="beng_box">
									<div>进口 - 2#压载泵</div>
									<div><span id="beng_2">0</span>MPa</div>
								</div>
								<div class="beng_box">
									<div>进口 - 1#清洗泵</div>
									<div><span id="beng_3">0</span>MPa</div>
								</div>
								<div class="beng_box">
									<div>进口 - 2#清洗泵</div>
									<div><span id="beng_4">0</span>MPa</div>
								</div>
							</div>
							<div style="width: 46%;">
								<div class="beng_box">
									<div>进口 - 1#压载泵</div>
									<div><span id="beng_5">0</span>MPa</div>
								</div>
								<div class="beng_box">
									<div>进口 - 2#压载泵</div>
									<div><span id="beng_6">0</span>MPa</div>
								</div>
								<div class="beng_box">
									<div>进口 - 1#清洗泵</div>
									<div><span id="beng_7">0</span>MPa</div>
								</div>
								<div class="beng_box">
									<div>进口 - 2#清洗泵</div>
									<div><span id="beng_8">0</span>MPa</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div style="border: 1px solid rgba(125,125,125,0.4);margin: 7px;">
					<div class="bg-theme-son">
						<span>穿舱件温度</span>
						<span class="iconfont icon-right act"></span>
					</div>
					<div class="padding-sm flex flex-wrap" id="ccWd">
						
					</div>
				</div>
				<div style="border: 1px solid rgba(125,125,125,0.4);margin: 7px;">
					<div class="bg-theme-son">
						<span>蒸汽回收总管压力</span>
						<span class="iconfont icon-right"></span>
					</div>
					<div style="display: none;">
						<div class="flex text-center">
							<div class="flex-sub">
								<div id="myChart2" style="height: 160px;"></div>
								<div>1#蒸汽</div>
							</div>
							<div class="flex-sub">
								<div id="myChart3" style="height: 160px;"></div>
								<div>2#蒸汽</div>
							</div>
						</div>
					</div>
				</div>
				<div style="border: 1px solid rgba(125,125,125,0.4);margin: 7px;">
					<div class="bg-theme-son">
						<span>液货舱集管压力(MPa)</span>
						<span class="iconfont icon-right"></span>
					</div>
					<div style="display: none;">
						<div id="myChart1" style="height: 220px;"></div>
					</div>
				</div>
			</div>
		</div>
		<script type="text/javascript">
			let nowSn = localStorage.getItem("shipSn");
			var awData = {};
			var yhbWd = [["1#压载泵","z2P"],["1#洗舱泵","z2R"], ["2#压载泵","z2Q"],["2#洗舱泵","z2S"]];
			var huoCang = [{"name":"左-1#","data":["z01","z0D1","z0R1","z0T1","z0S1",41.06,["Q0J-3","Q0J-15"]]},
							{"name":"右-1#","data":["z00","z0C1","z0O1","z0Q1","z0P1",40.34,["Q0J-2","Q0J-14"]]},
							{"name":"左-2#","data":["z03","z0F1","z0X1","z0Z1","z0Y1",75.44,["Q0J-1","Q0J-13"]]},
							{"name":"右-2#","data":["z02","z0E1","z0U1","z0W1","z0V1",75.43,["Q0J-0","Q0J-12"]]},
							{"name":"左-3#","data":["z05","z0H1","z0d","z0f","z0e",79.44,["Q0K-15","Q0J-11"]]},
							{"name":"右-3#","data":["z04","z0G1","z0a","z0c","z0b",79.37,["Q0K-14","Q0J-10"]]},
							{"name":"左-4#","data":["z07","z0J1","z0j","z0l","z0k",79.28,["Q0K-13","Q0J-9"]]},
							{"name":"右-4#","data":["z06","z0I1","z0g","z0i","z0h",79.31,["Q0K-12","Q0J-8"]]},
							{"name":"左-5#","data":["z09","z0L1","z0p","z0r","z0q",79.81,["Q0K-11","Q0J-7"]]},
							{"name":"右-5#","data":["z08","z0K1","z0m","z0o","z0n",79.28,["Q0K-10","Q0J-6"]]},
							{"name":"左-6#","data":["z2U","z0N1","z1x","z1w","z1v",23.27,["Q0K-9","Q0J-8"]]},
							{"name":"右-6#","data":["z2T","z0M1","z20","z1z","z1y",23.85,["Q0K-8","Q0J-4"]]}];
							
			var yaCang = [{"name":"左-1#压载舱","data":["0KF","0eL"]},
						  {"name":"右-1#压载舱","data":["0KG","0eM"]},
						  {"name":"左-2#压载舱","data":["0KH","0eN"]},
						  {"name":"右-2#压载舱","data":["0KI","0eO"]},
						  {"name":"左-3#压载舱","data":["0KJ","0eP"]},
						  {"name":"右-3#压载舱","data":["0KK","0eQ"]},
						  {"name":"左-4#压载舱","data":["0KL","0eR"]},
						  {"name":"右-4#压载舱","data":["0KM","0eS"]},
						  {"name":"左-5#压载舱","data":["0KN","0eT"]},
						  {"name":"右-5#压载舱","data":["0KO","0eU"]},
						  {"name":"左-1#淡水舱","data":["0KP","0ef"]},
						  {"name":"右-1#淡水舱","data":["0KG","0eg"]},
						  {"name":"左-2#淡水舱","data":["0KR","0eh"]},
						  {"name":"右-2#淡水舱","data":["0KS","0ei"]}];
			var myChart1 = echarts.init(document.getElementById('myChart1'));
			var myChart2 = echarts.init(document.getElementById('myChart2'));
			var myChart3 = echarts.init(document.getElementById('myChart3'));
			function setoption1(dataList){
				option = {
					color: ['#3398DB'],
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'cross',
							crossStyle: {
								color: '#999'
							}
						}
					},
					grid: {
						top: '10%',
						left: '2%',
						right: '2%',
						bottom: '4%',
						containLabel: true
					},
					xAxis: [{
							type: 'category',
							data: ['1#','2#', '3#', '4#', '5#', '6#'],
							axisTick: {
								alignWithLabel: true
							},
							axisLine: {
								lineStyle: {
									color: '#fff',
								}
							},
							axisLabel: {
								textStyle: {
									fontSize:12,
								}
							}
						}
					],
					yAxis: [{
							type: 'value',
							axisLine: {
								show: false
							},
							splitLine: {
								lineStyle: {
									color: ['rgba(132, 132, 132, 0.5)']
								}
							},
							axisLabel:{
								formatter: function(){
									return "";
								}
							}
						}
					],
					series: [{
							name: '实时数据',
							type: 'bar',
							barWidth: '20',
							itemStyle:{
								normal: {
									label:{
										color:'#8799a3'
									},
									color: new echarts.graphic.LinearGradient(
											0, 0, 0, 1,
											[
												{offset: 0, color:'#3973ac'},
												{offset: 1, color:'#00aaff'}
											]
									)
								}
							},
			
							label: {
								normal: {
									show: true,
									position: 'top',
									color:'#fbbd08',
									formatter: function (params) {
										var index = params.dataIndex;
										return dataList[index]
									}
								}
							},
							data:dataList
						}
					]
				};
				return option;
			}
			function setoption2(data){
				data = data>100?(data/1000).toFixed(2):data;
				option = {
					graphic: [{
						type: 'text',
						left: 'center',
						top: 'center',
						z: 10,
						style: {
							fill: '#fbbd08',  
							text: data + "MPa",
							font: '16px Microsoft YaHei'
						}
					}],
					series: [{
						name: '实时数据',
						type: 'pie',
						center:["50%", "50%"],
						radius: ['60%', '80%'], 
						avoidLabelOverlap: false,
						hoverAnimation: false, 
						label: {
							normal: {
								show: false,
								position: 'center',
								textStyle: {
									fontSize: 20,
									color: '#d9d9d9'
								}
							}
						},
						data: [{
							value: data,
							name: data + "MPa"
						},{
							value: 3 - parseFloat(data),
							name: ''
						}]
					}],
					color: ['#FFF076','#52989F']
				};
				return option;
			}
			$(document).ready(function(){
				firstData();
				// setInterval(()=>{firstData();},60*1000);
			})
			function firstData(){
				awData = {};
				deviceList(function(_obj){
					awData = _obj
					setVal();
					setYaVal();
					changeSta();
					setCcwd();
				})
			}
			function changeSta(){
				myChart1.setOption(setoption1([awData["z1j"] == undefined?0: awData["z1j"],
										   awData["z1k"] == undefined?0: awData["z1k"],
										   awData["z1l"] == undefined?0: awData["z1l"],
										   awData["z1m"] == undefined?0: awData["z1m"],
										   awData["z1n"] == undefined?0: awData["z1n"],
										   awData["z1o"] == undefined?0: awData["z1o"]]));
				myChart2.setOption(setoption2(awData["z1p"] == undefined?0: awData["z1p"]));
				myChart3.setOption(setoption2(awData["z1q"] == undefined?0: awData["z1q"]));
				$("#beng_1").text(awData["z1S1"] == undefined ? 0 : awData["z1S1"]);
				$("#beng_2").text(awData["z1U1"] == undefined ? 0 : awData["z1U1"]);
				$("#beng_3").text(awData["z1r"] == undefined ? 0 : awData["z1r"]);
				$("#beng_4").text(awData["z1t"] == undefined ? 0 : awData["z1t"]);
				$("#beng_5").text(awData["z1T1"] == undefined ? 0 : awData["z1T1"]);
				$("#beng_6").text(awData["z1V1"] == undefined ? 0 : awData["z1V1"]);
				$("#beng_7").text(awData["z1s"] == undefined ? 0 : awData["z1s"]);
				$("#beng_8").text(awData["z1u"] == undefined ? 0 : awData["z1u"]);
			}
			function setCcwd(){
				let _htm = "";
				for(let d=0;d<yhbWd.length;d++){
					let sf = yhbWd[d];
					let _h = awData[sf[1]] != undefined&&!isNaN(Number(awData[sf[1]],10))? parseFloat(awData[sf[1]]): "---"
					_htm += `<div class="text-center margin-tb-sm" style="width: 50%;">
								<div class="flex align-center justify-center">
									<div style="height: 80px;" class="flex flex-direction justify-between text-grey align-end">
										<span>100</span>
										<span>75</span>
										<span>50</span>
										<span>25</span>
										<span>0</span>
									</div>
									<div class="temBox" style="background-image: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) ${isNaN(Number(_h,10))?0:_h}%, #103151 1%);"></div>
								</div>
								<div class="margin-top-xs">${sf[0]}：<span class="numbox">${_h}</span>℃</div>
							</div>`
				}
				$("#ccWd").html(_htm);
			}
			function setVal(){
				let _str = "";
				for(let i=0;i<huoCang.length;i++){
					let _ab = huoCang[i].data;
					let _e = awData[_ab[0]] != undefined&&!isNaN(Number(awData[_ab[0]],10))?(awData[_ab[0]]* parseFloat(_ab[5])).toFixed(2):"---";
					_str += `<div class="infoLi">
								<div class="title">${huoCang[i].name}</div>
								<div>
									<div class="shipYw"><span class="text-lg ${getYWarm(_ab[6])}">●</span>液位:</div>
									<div><span class="numbox">${awData[_ab[0]] || 0}</span><span>m</span></div>
								</div>
								<div>
									<div>压力:</div>
									<div><span class="numbox">${awData[_ab[1]] || 0}</span><span>kPa</span></div>
								</div>
								<div>
									<div>上温:</div>
									<div><span class="numbox">${awData[_ab[2]] || 0}</span><span>℃</span></div>
								</div>
								<div>
									<div>中温:</div>
									<div><span class="numbox">${awData[_ab[3]] || 0}</span><span>℃</span></div>
								</div>
								<div>
									<div>底温:</div>
									<div><span class="numbox">${awData[_ab[4]] || 0}</span><span>℃</span></div>
								</div>
								<div>
									<div>容量:</div>
									<div><span class="numbox">${_e}</span><span>m³</span></div>
								</div>
								
							</div>`
				}
				$("#_View").html(_str);
			}
			function setYaVal(){
				let _str = "";
				for(let i=0;i<yaCang.length;i++){
					let _ab = yaCang[i].data;
					_str += `<div class="infoLi">
								<div class="title">${yaCang[i].name}</div>
								<div>
									<div>液位:</div>
									<div><span class="numbox">${awData[_ab[0]] == undefined?0.00 : awData[_ab[0]]}</span><span>m</span></div>
								</div>
								<div>
									<div>容量:</div>
									<div><span class="numbox">${awData[_ab[1]] == undefined?0.00 : awData[_ab[1]]}</span><span>m³</span></div>
								</div>
								
							</div>`
				}
				$("#_yaView").html(_str);
			}
			function getYWarm(_key){
				let _ab = _key[0].split("-");
				let _df = awData[_ab[0]] == undefined?0:awData[_ab[0]].charAt(parseInt(_ab[1]));
				let _cb = _key[1].split("-");
				let _eh = awData[_cb[0]] == undefined?0:awData[_cb[0]].charAt(parseInt(_cb[1]));
				let _ij = "";
				if(_df == 0&&_eh==0){
					_ij = "";
				}else if(_df == 1&&_eh==0){
					_ij = "text-red";
				}else if(_df == 0&&_eh==1){
					_ij = "text-orange";
				}
				return _ij
			}
			$(".tabli>div").on("click","",function(){
				$(".hk_inf").css("display","none");
				$("."+$(this).attr("name")).css("display","block");
				$(this).addClass("yz_this").siblings().removeClass("yz_this");
				myChart1.resize();
				myChart2.resize();
				myChart3.resize();
			})
			$(".bg-theme-son").on("click","",function(){
				if($(this).next().is(":hidden")){
					$(this).next().css("display","block");
					$(this).find(".iconfont").addClass("act");
				}else{
					$(this).next().css("display","none");
					$(this).find(".iconfont").removeClass("act");
				}
				myChart1.resize();
				myChart2.resize();
				myChart3.resize();
			})
		</script>
	</body>
</html>