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>
|