123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900 |
- <!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">
- <link rel="stylesheet" href="../css/base.css">
- <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 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;
- font-size: 0.9vw;
- overflow: auto;
- background-color: #040d32;
- }
- .yz_title+div{
- height: calc(100% - 35px);
- }
-
- .Liquid{
- font-size: 0.7vw;
- }
- .Liquid>div{
- flex: 1;
- display: flex;
- flex-direction: column;
- align-items: center;
- }
- .Liquid .liquid_val span{
- font-size: 1vw;
- color: #fbbd08;
- font-weight: bold;
- }
- .Liquid .liquid_val>div{
- margin-top: 10px;
- text-align: center;
- width: 50%;
- }
-
- .beng_box{
- box-sizing: border-box;
- width: 100%;
- padding:6px;
- font-size: 0.8vw;
- margin-bottom: 10px;
- background-color: #082041;
- }
- .beng_box>div:last-child{
- text-align: center;
- margin-top: 4px;
- font-size: 0.9vw;
- }
- .beng_box span{
- letter-spacing:4px;
- font-size: 1.8vw;
- font-weight: bold;
- color: #fbbd08;
- margin-right: 6px;
- }
-
- .Range{
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- align-items: flex-end;
- padding-top: 6px;
- padding:0 12px;
- height: 100px;
- color: rgba(255,255,255,0.6);
- }
- .Range i{
- line-height: 10px;
- vertical-align: middle;
- font-size: 2.4vw;
- }
- .Liquidli{
- position: relative;
- width: 52px;
- height: 100px;
- border-radius: 3px;
- box-shadow: 0 0 4px 2px #6a6a6a;
- background-color: #ccc;
- }
- .Liquidli>div{
- position: absolute;
- bottom: 0;
- left: 0;
- width: 100%;
- height: 0%;
- border-radius: 3px;
- background-color: #48d800;
- }
- .Liquidli>span{
- position: absolute;
- bottom:0;
- left: 50%;
- transform: translate(-50%,0);
- color: #000;
- font-size: 1vw;
- font-weight: bold;
- }
- .Liquidli>span>i{
- font-size: 0.7vw;
- }
- @media screen and (max-width: 1000px) {
- .openYY.yz_clm15>div>div {
- min-height: 580px;
- }
- .openYY .yz_clm12 {
- height: 100%;
- }
- .openBC .yz_clm15{
- height: 200% !important;
- }
- .openBC .yz_clm3{
- height: 25% !important;
- }
- .openBC .yz_clm15.openCX{
- height: 580px !important;
- }
- }
- .liQuid{
- line-height: 36px;
- margin-top: 62px;
- text-align: center;
- writing-mode:tb-rl;
- font-size: 1vw;
- font-weight: bold;
- color: #5793f3;
- }
- .openBC .yz_clm3{
- height: 100%;
- }
- .li_shui{
- width: 48px;
- height: 86%;
- background-color: #005eb6;
- border: 2px solid #fff;
- background-image: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 0%, #040D32 1%);
- }
- ._temp{
- display: flex;
- align-items: flex-end;
- justify-content: center;
- padding-bottom: 5px;
- font-size: 0.7vw;
- height: 86%;
- }
- ._temp+div{
- font-size: 0.7vw;
- }
- ._unit{
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- align-items: flex-end;
- margin-right: 5px;
- color: #fff;
- height: 86%;
- }
- </style>
- <body>
- <div style="height:60px;padding:7.5px 7.5px 0;position: relative;">
- <div class="tabUl">
- <div data-open="1" class="act_this">货舱压力、液位、温度</div>
- <div data-open="2">泵舱</div>
- </div>
- <div style="position: absolute;bottom: 20px;right:20px;color: #fff;">
- 最后更新时间:<span id="endTime"></span>
- </div>
- </div>
- <div class="yz_clm15 openYY" style="height: calc(100% - 60px);">
- <div class="yz_clm12">
- <div class="Sense">
- <div class="yz_title">左舱</div>
- <div class="flex Liquid view_l flex-wrap">
-
- </div>
- </div>
- </div>
- <div class="yz_clm12">
- <div class="Sense">
- <div class="yz_title">右舱</div>
- <div class="flex Liquid view_r flex-wrap">
-
- </div>
- </div>
- </div>
- </div>
- <div class="openBC" style="display: none;height: calc(100% - 60px);">
- <div class="yz_clm15 openRQ" style="height:50%;">
- <div class="yz_clm3">
- <div class="Sense">
- <div class="yz_title yogName">液货总管压力</div>
- <div class="flex text-center">
- <div class="flex-sub">
- <div id="myChart9" style="height: calc(100% - 45px);"></div>
- <div><span class="yogName">1#液货:</span><span class="Num" id="yhyl_1">0</span> <span>MPa</span></div>
- </div>
- <div class="flex-sub">
- <div id="myChart10" style="height: calc(100% - 45px);"></div>
- <div><span class="yogName">2#液货:</span><span class="Num" id="yhyl_2">0</span> <span>MPa</span></div>
- </div>
- </div>
- </div>
- </div>
- <div class="yz_clm3">
- <div class="Sense">
- <div class="yz_title wTempName">可燃气体</div>
- <div style="height: calc(100% - 35px);padding:0 10px;">
- <div class="flex align-center" style="height: 16.6%;">
- <div style="width:94px;" class="wTempName">泵舱底左</div>
- <div class="_Num wTemp">0</div><span class="wTempUnit">%LEL</span>
- </div>
- <div class="flex align-center" style="height: 16.6%;">
- <div style="width:94px;" class="wTempName">泵舱底右</div>
- <div class="_Num wTemp">0</div><span class="wTempUnit">%LEL</span>
- </div>
- <div class="flex align-center" style="height: 16.6%;">
- <div style="width:94px;" class="wTempName">泵舱上甲板</div>
- <div class="_Num wTemp">0</div><span class="wTempUnit">%LEL</span>
- </div>
- <div class="flex align-center" style="height: 16.6%;">
- <div style="width:94px;" class="wTempName">空调通风口</div>
- <div class="_Num wTemp">0</div><span class="wTempUnit">%LEL</span>
- </div>
- <div class="flex align-center" style="height: 16.6%;">
- <div style="width:94px;" class="wTempName">尾楼甲板左</div>
- <div class="_Num wTemp">0</div><span class="wTempUnit">%LEL</span>
- </div>
- <div class="flex align-center" style="height: 16.6%;">
- <div style="width:94px;" class="wTempName">尾楼甲板右</div>
- <div class="_Num wTemp">0</div><span class="wTempUnit">%LEL</span>
- </div>
- </div>
- </div>
- </div>
- <div class="yz_clm3">
- <div class="Sense">
- <div class="yz_title changeName">货油泵前轴承温度</div>
- <div id="myChart11">
-
- </div>
- </div>
- </div>
- <div class="yz_clm3">
- <div class="Sense">
- <div class="yz_title changeName">货油泵后轴承温度</div>
- <div id="myChart12">
-
- </div>
- </div>
- </div>
- </div>
- <div class="yz_clm15" style="height:50%;">
- <div class="yz_clm3">
- <div class="Sense">
- <div class="yz_title">蒸气回收总管压力</div>
- <div class="flex text-center">
- <div class="flex-sub">
- <div id="myChart13" style="height: calc(100% - 45px);"></div>
- <div>1#蒸气:<span class="Num" id="zqyl_1">0</span> <span>MPa</span></div>
- </div>
- <div class="flex-sub">
- <div id="myChart14" style="height: calc(100% - 45px);"></div>
- <div>2#蒸气:<span class="Num" id="zqyl_2">0</span> <span>MPa</span></div>
- </div>
- </div>
- </div>
- </div>
- <div class="yz_clm3 patternNo">
- <div class="Sense">
- <div class="yz_title">泵进口压力</div>
- <div style="height: calc(100% - 35px);" class="padding-lr">
- <div class="flex justify-between" id="OutIn">
-
- </div>
- <div class="flex" id="changeOI">
- <div class="flex text-white margin-right-lg" onclick="changeSta(0)">
- <div class="check_"></div><span style="line-height: 14px;">出口压力</span>
- </div>
- <div class="flex text-white" onclick="changeSta(1)">
- <div class="check_"></div><span style="line-height: 14px;">进口压力</span>
- </div>
- </div>
-
- </div>
- </div>
- </div>
- <div class="yz_clm3 openRQ">
- <div class="Sense">
- <div class="yz_title changeName">货油泵舱壁轴填料函温度</div>
- <div id="myChart15">
-
- </div>
- </div>
- </div>
- <div class="yz_clm3 openCCW">
- <div class="Sense">
- <div class="yz_title">穿舱件温度</div>
- <div style="height: calc(100% - 35px);" class="text-center">
- <div class="flex" style="height: 50%;">
- <div class="flex-sub">
- <div class="_temp">
- <div class="_unit">
- <div>100</div>
- <div>75</div>
- <div>50</div>
- <div>25</div>
- <div>0</div>
- </div>
- <div class="li_shui" id="ccy_wd1_v"></div>
- </div>
- <div>1#压载泵:<span class="text-yellow text-bold text-lg" id="ccy_wd1_h">0</span>℃</div>
- </div>
- <div class="flex-sub">
- <div class="_temp">
- <div class="_unit">
- <div>100</div>
- <div>75</div>
- <div>50</div>
- <div>25</div>
- <div>0</div>
- </div>
- <div class="li_shui" id="ccx_wd1_v"></div>
- </div>
- <div>1#洗舱泵:<span class="text-yellow text-bold text-lg" id="ccx_wd1_h">0</span>℃</div>
- </div>
- </div>
- <div class="flex" style="height: 50%;">
- <div class="flex-sub">
- <div class="_temp">
- <div class="_unit">
- <div>100</div>
- <div>75</div>
- <div>50</div>
- <div>25</div>
- <div>0</div>
- </div>
- <div class="li_shui" id="ccy_wd2_v"></div>
- </div>
- <div>2#压载泵:<span class="text-yellow text-bold text-lg" id="ccy_wd2_h">0</span>℃</div>
- </div>
- <div class="flex-sub">
- <div class="_temp">
- <div class="_unit">
- <div>100</div>
- <div>75</div>
- <div>50</div>
- <div>25</div>
- <div>0</div>
- </div>
- <div class="li_shui" id="ccx_wd2_v"></div>
- </div>
- <div>2#洗舱泵:<span class="text-yellow text-bold text-lg" id="ccx_wd2_h">0</span>℃</div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="yz_clm3">
- <div class="Sense">
- <div class="yz_title chartT">货油泵泵壳温度</div>
- <div id="myChart16">
-
- </div>
- </div>
- </div>
- <div class="yz_clm6 patternHas" style="height: 100%;">
- <div class="Sense">
- <div class="yz_title">清洗泵-综合报警</div>
- <div style="height: calc(100% - 35px);" class="text-center">
- <ul class="switch_CE switch_li">
-
- </ul>
- </div>
- </div>
- </div>
- </div>
- <div class="yz_clm15 openCX" style="height:50%;">
- <div class="yz_clm12" style="height: 100%;">
- <div class="Sense flex">
- <div style="width: 40px;">
- <div class="liQuid">左液位</div>
- <div class="liQuid">右液位</div>
- </div>
- <div style="width: calc(100% - 40px);" class="flex Liquid view_be flex-wrap">
-
- </div>
- </div>
- </div>
- </div>
- </div>
- </body>
- <script>
- var allObj = {};
- var allKey = {};
- var nowSn = null,timeId = null,nowAjax = 1;
- var _tempKey = {
- "z2P":"ccy_wd1_",
- "z2Q":"ccy_wd2_",
- "z2R":"ccx_wd1_",
- "z2S":"ccx_wd2_"
- };
- var smallSre = false;
- var myChart9 = echarts.init(document.getElementById('myChart9'));
- var myChart10 = echarts.init(document.getElementById('myChart10'));
- var myChart11 = echarts.init(document.getElementById('myChart11'));
- var myChart12 = echarts.init(document.getElementById('myChart12'));
- var myChart13 = echarts.init(document.getElementById('myChart13'));
- var myChart14 = echarts.init(document.getElementById('myChart14'));
- var myChart15 = echarts.init(document.getElementById('myChart15'));
- var myChart16 = echarts.init(document.getElementById('myChart16'));
- function setoption1(dataList,xData,unit){
- option = {
- color: ['#3398DB'],
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'cross',
- crossStyle: {
- color: '#999'
- }
- }
- },
- grid: {
- top: '8%',
- left: '0%',
- right: '0%',
- bottom: '0%',
- containLabel: true
- },
- xAxis: [{
- type: 'category',
- data: xData != undefined?xData: ['1#','2#', '3#', '4#', '5#',nowSn == "381001400"?'污液舱':'6#'],
- axisTick: {
- alignWithLabel: true
- },
- axisLine: {
- lineStyle: {
- color: '#fff',
- }
- },
- axisLabel: {
- textStyle: {
- fontSize:10,
- }
- }
- }
- ],
- yAxis: [{
- type: 'value',
- max: 60,
- 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:'#fff'
- },
- color: new echarts.graphic.LinearGradient(
- 0, 0, 0, 1,
- [
- {offset: 0, color:'#fe9a1a'},
- {offset: 1, color:'#fe421b'}
- ]
- )
- }
- },
-
- label: {
- normal: {
- show: true,
- position: 'top',
- color:'#fff',
- formatter: function (params) {
- var index = params.dataIndex;
- return dataList[index]+((unit != undefined?unit:nowSn == "381001400"?"℃":(nowSn == "480000618"?'kPa':'MPa')))
- }
- }
- },
- data:dataList
- }
- ]
- };
- return option;
- }
- function setoption2(data,_txt){
- data = (data == undefined)?0:data;
- // data = data>100?(data/1000).toFixed(2):data;
- $("#"+_txt).text(data);
- $("#"+_txt+"+span").text((nowSn == "480000618"?'kPa':'MPa'));
- option = {
- graphic: [{
- type: 'text',
- left: 'center',
- top: 'center',
- z: 10,
- style: {
- fill: '#fff',
- text: data + (nowSn == "480000618"?'kPa':'MPa'),
- fontSize: smallSre?10:14,
- }
- }],
- series: [{
- name: '实时数据',
- type: 'pie',
- center:["50%", "50%"],
- radius: ['50%', '70%'],
- avoidLabelOverlap: false,
- hoverAnimation: false,
- label: {
- normal: {
- show: false,
- position: 'center',
- textStyle: {
- fontSize: 20,
- color: '#d9d9d9'
- }
- }
- },
- data: [{
- value: isNaN(Number(data,10))?0:data,
- name: data + (nowSn == "480000618"?'kPa':'MPa')
- },{
- value: 5 - parseFloat(isNaN(Number(data,10))?0:data),
- name: ''
- }
- ]
- }],
- color: ['#FFF076','#52989F']
- };
- return option;
- }
- window.addEventListener('message',(data)=>{
- initF();
- })
- $(document).ready(function() {
- smallSre = window.innerHeight < 650;
- initF();
- })
- function initF(){
- nowSn = localStorage.getItem("shipSn");
- allKey = Config((nowSn == "381001400"||nowSn == "480000618"?"381001400":"382001400"),nowSn)["Cargo"];
- $(".openRQ").css("display",allKey["disp"][0]);
- $(".openCX").css("display",allKey["disp"][1]);
- if(nowSn == "480000001"){
- $(".patternHas").css("display","block");
- $(".patternNo").css("display","none");
- $(".openCCW").css("display","none");
- }else{
- $(".patternNo").css("display","block");
- $(".patternHas").css("display","none");
- $(".openCCW").css("display",allKey["disp"][1]);
- }
- firstData(0);
- }
- $(window).resize(function(){
- smallSre = window.innerHeight < 650;
- myChart9.resize();
- myChart10.resize();
- myChart11.resize();
- myChart12.resize();
- myChart13.resize();
- myChart14.resize();
- myChart15.resize();
- myChart16.resize();
- })
- function firstData(_num){
- if(_num == 0){yzkj.load("load1")};
- setTimeout(()=>{
- deviceList(function acb(_data){
- nowSn = localStorage.getItem("shipSn");
- allObj = _data;
- $("#endTime").text(allObj["time"])
- initData(allKey["swKey"]["left"],"view_l");
- initData(allKey["swKey"]["right"],"view_r");
- if(allKey["swKey"]["viewBe"] != undefined){
- initBeng(allKey["swKey"]["viewBe"]);
- }
- setSwiCE(allObj);
- whoShow(nowAjax);
- if(_num == 0){yzkj.closeLoad("load1");}
- if(_data.mmsi==undefined){
- setTimeout(()=>{
- firstData(1);
- },60*1000)
- }
- })
- },100)
- }
- // 格局报警
- function setSwiCE(_obj){
- if(nowSn == "480000001"){
- let swiKey = allKey["swKey"]["switch_CE"];
- for(var key in swiKey){
- let _arr = swiKey[key];
- let _str = "";
- 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>';
- }
- $(".switch_CE").html(_str);
- }
-
- }
- }
- // 热情液位
- function initData(_obj,txt){
- let _str = "";
- for(var i=0;i<_obj.length;i++){
- let _ab = _obj[i];
- // 液位
- // let _e = allObj[_ab[0]] == undefined? 0 : (nowSn == "480000618"?(parseFloat(allObj[_ab[0]])/100).toFixed(2):allObj[_ab[0]]);
- let _e = allObj[_ab[0]] == undefined? 0 : allObj[_ab[0]];
- let _heg = parseFloat((parseFloat(_e)/9)*100)>100?100:parseFloat((parseFloat(_e)/9)*100);
- // let _heg = parseFloat((parseFloat(_e)/(nowSn == "480000618"?5:9))*100)>100?100:parseFloat((parseFloat(_e)/(nowSn == "480000618"?5:9))*100);
- let _spa = _heg<19?0:"calc("+_heg+"% - 24px)";
- let mol = null;
- if(_ab[7] != undefined){
- mol = isNaN(Number(_e,10))?"---":(_e * parseFloat(_ab[7])).toFixed(2);
- }else{
- mol = null;
- }
- _str += `<div>
- <div style="font-size: 0.9vw;">${_ab[6]}${mol != null?'(<span class="text-yellow text-bold">'+mol+'</span> m³)':''}</div>
- <div class="margin-top-sm flex">
- <div class="Range" style="height: ${smallSre?'80px':'100px'}">
- <span>9</span>
- <span>6.75</span>
- <span>5.5</span>
- <span>2.25</span>
- <span>0</span>
- </div>
- <div class="Liquidli" style="height: ${smallSre?'80px':'100px'}">
- <div style="height:${_heg}%;"></div>
- <span style="bottom:${_spa};">${_e}<i>m</i></span>
- </div>
- ${ nowSn == "480000001"?
- '':`<div class="Range" style="align-items: flex-start;height: ${smallSre?'80px':'100px'}">
- ${getDrog(_ab[5])}
- </div>`
- }
- </div>
- <div class="liquid_val flex flex-wrap">
- <div style="display:${nowSn == "480000618"?'none':'block'}"><div><span>${allObj[_ab[1]] == undefined? 0 : allObj[_ab[1]]}</span> kPa</div><div>压力:</div></div>
- <div><div><span>${allObj[_ab[2]] == undefined? 0 : allObj[_ab[2]]}</span> ℃</div><div>上部温度</div></div>
- <div><div><span>${allObj[_ab[4]] == undefined? 0 : ((allObj[_ab[4]]+"").indexOf(".")==-1?0:allObj[_ab[4]])}</span> ℃</div><div>中部温度</div></div>
- <div><div><span>${allObj[_ab[3]] == undefined? 0 : allObj[_ab[3]]}</span> ℃</div><div>底部温度</div></div>
- </div>
- </div>`
- }
- $("."+txt).html(_str);
- }
- function initBeng(_obj){
- let _str = "";
- for(var i=0;i<_obj.length;i++){
- let _ab = _obj[i];
- // 液位
- let _e = allObj[_ab[0]] == undefined? 0 : allObj[_ab[0]];
- let _heg = parseInt((parseFloat(_e)/8)*100)>100?100:parseInt((parseFloat(_e)/8)*100);
- let _spa = _heg<19?0:"calc("+_heg+"% - 24px)";
- let _e1 = allObj[_ab[1]] == undefined? 0 : allObj[_ab[1]];
- let _heg1 = parseInt((parseFloat(_e1)/8)*100)>100?100:parseInt((parseFloat(_e1)/8)*100);
- let _spa1 = _heg1<19?0:"calc("+_heg1+"% - 24px)";
- _str += `<div>
- <div style="font-size: 0.9vw;">${_ab[2]}</div>
- <div class="margin-top-sm flex align-center">
- <div class="Range" style="height: ${smallSre?'70px':'100px'}">
- <span>8</span>
- <span>6</span>
- <span>4</span>
- <span>2</span>
- <span>0</span>
- </div>
- <div class="Liquidli" style="height: ${smallSre?'70px':'100px'}">
- <div style="height:${_heg}%;"></div>
- <span style="bottom:${_spa};">${_e}<i>m</i></span>
- </div>
- ${ nowSn == "480000001"?
- '':`<div class="text-center margin-left-sm">
- 容量:<br><span class="text-yellow text-bold">${allObj[_ab[3]] == undefined? 0 : allObj[_ab[3]]}</span>m³
- </div>`
- }
-
- </div>
- <div class="margin-top-lg flex align-center">
- <div class="Range" style="height: ${smallSre?'70px':'100px'}">
- <span>8</span>
- <span>6</span>
- <span>4</span>
- <span>2</span>
- <span>0</span>
- </div>
- <div class="Liquidli" style="height: ${smallSre?'70px':'100px'}">
- <div style="height:${_heg1}%;"></div>
- <span style="bottom:${_spa1};">${_e1}<i>m</i></span>
- </div>
- ${ nowSn == "480000001"?
- '':`<div class="text-center margin-left-sm">
- 容量:<br><span class="text-yellow text-bold">${allObj[_ab[4]] == undefined? 0 : allObj[_ab[4]]}</span>m³
- </div>`
- }
-
- </div>
- </div>`
- }
- $(".view_be").html(_str);
- }
- function getDrog(_key){
- let _str = "";
- for(var i=0;i<_key.length;i++){
- if(_key[i] == ""){
- _str += "<span style='opacity:0;'>高</span>";
- }else{
- let _a = allObj[_key[i].split("-")[0]] == undefined ?0 : allObj[_key[i].split("-")[0]].charAt(parseInt(_key[i].split("-")[1]));
- let _b = i == 0?'高高':(i==1?'高位':(i==3?'高':'低'));
- _str += `<span><i class="${parseInt(_a) > 0?'text-red':''}">●</i>${_b}</span>`;
- }
- }
- return _str;
- }
- function setTemp(){
- for(var key in _tempKey){
- let _acb = _tempKey[key];
- let _sta = allObj[key] != undefined&&allObj[key] != null&&allObj[key] != "N"?parseFloat(allObj[key]):0;
- _sta = _sta == -3200 ?0:_sta;
- $("#"+_acb+"h").text(isNaN(Number(_sta,10))?"---":_sta);
- let _h = parseFloat(_sta / 100).toFixed(2);
- let _nh = (_h > 1?1:_h)*100;
- $("#"+_acb+"v").css("backgroundImage","linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) "+_nh+"%, #040D32 1%)");
- }
- }
- $(".tabUl div").on("click","",function(){
- $(this).addClass("act_this").siblings().removeClass("act_this");
- let _id = $(this).data("open");
- nowAjax = _id;
- whoShow(_id);
- })
- function setBengData(_in){
- let _str = "";
- let _arr = allKey["outIn"][_in];
- for(var i=0;i<_arr.length;i++){
- _str += '<div style="width: 47%;">';
- let _str1 = "",_acb = _arr[i];
- for(var j=0;j<_acb.length;j++){
- let _nbv = _acb[j].split("_");
- _str1 +=`<div class="beng_box">
- <div>${_nbv[0]}</div>
- <div><span>${allObj[_nbv[1]] == undefined ? 0 : allObj[_nbv[1]]}</span>${(nowSn == "480000618"?'kPa':'MPa')}</div>
- </div>`;
- }
- _str += _str1+'</div>';
- }
- $("#OutIn").html(_str);
- }
- function changeSta(num){
- if(num==0){
- setBengData("in");
- }else if(num==1){
- setBengData("out");
- }
- $(".check_").removeClass("check_act");
- $(".check_").eq(num).addClass("check_act");
- }
- function whoShow(_ind){
- if(_ind == 1){
- $(".openYY").css("display","flex");
- $(".openBC").css("display","none");
- }else if(_ind == 2){
- $(".openYY").css("display","none");
- $(".openWD").css("display","none");
- $(".openBC").css("display","block");
- changeSta(1);
- setTemp();
-
- myChart13.setOption(setoption2(allObj[allKey["anKey"][0]],"zqyl_1"));
- myChart14.setOption(setoption2(allObj[allKey["anKey"][1]],"zqyl_2"));
- let _kTemp = [];
- if(nowSn == "480000618"){
- _kTemp = [["泵壳温度","轴承温度","隔舱传动装置填料函温度","none","污液柜温度","℃"],
- ["左-上温度","左-中温度","左-下温度","右-上温度","右-中温度","右-下温度"],
- ["0hD1","0hE1","0hF1","0hH1","0hI1","0hJ1"],
- ["污液柜压力","左:","右:"]];
- myChart9.setOption(setoption2(allObj["0hv"],"yhyl_1"));
- myChart10.setOption(setoption2(allObj["0hw"],"yhyl_2"));
- myChart11.setOption(setoption1([allObj["0gT1"],allObj["0gX1"],allObj["0ga"]],["洗舱泵","1#压载泵","2#压载泵"],"℃"));
- myChart12.setOption(setoption1([allObj["0gU1"],allObj["0gV1"],allObj["0gZ1"],allObj["0gc"]],["洗舱泵前","洗舱泵后","1#压载泵","2#压载泵"],"℃"));
- myChart15.setOption(setoption1([allObj["0gW1"],allObj["0gY1"],allObj["0gb"]],["洗舱泵","1#压载泵","2#压载泵"],"℃"));
- }else{
- _kTemp = [["货油泵前轴承温度","货油泵后轴承温度","货油泵舱壁轴填料函温度","flex","可燃气体","%LEL"],
- ["泵舱底左","泵舱底右","泵舱上甲板","空调通风口","尾楼甲板左","尾楼甲板右"],
- ["z1d","z1e","z1f","z1g","z1h","z1i"],
- ["液货总管压力","1#液货:","2#液货:"]];
- myChart9.setOption(setoption2(allObj["z1Z1"] == undefined ? 0 : allObj["z1Z1"],"yhyl_1"));
- myChart10.setOption(setoption2(allObj["z1a"] == undefined ? 0 : allObj["z1a"],"yhyl_2"));
- myChart11.setOption(setoption1([allObj["z0y"],allObj["z12"],allObj["z16"],allObj["z1A1"],allObj["z1E1"],allObj["z1I1"]]));
- myChart12.setOption(setoption1([allObj["z0z"],allObj["z13"],allObj["z17"],allObj["z1B1"],allObj["z1F1"],allObj["z1J1"]]));
- myChart15.setOption(setoption1([allObj["z10"],allObj["z14"],allObj["z18"],allObj["z1C1"],allObj["z1G1"],allObj["z1K1"]]));
- }
- checkTemp(_kTemp);
- let _xbn = allKey["Chart"]["key"];
- $(".chartT").text(allKey["Chart"]["name"]);
- myChart16.setOption(setoption1([allObj[_xbn[0]],allObj[_xbn[1]],allObj[_xbn[2]],allObj[_xbn[3]],allObj[_xbn[4]],allObj[_xbn[5]]]));
- myChart9.resize();
- myChart10.resize();
- myChart11.resize();
- myChart12.resize();
- myChart13.resize();
- myChart14.resize();
- myChart15.resize();
- myChart16.resize();
- }
- }
- function checkTemp(_obj){
- $(".changeName").eq(0).text(_obj[0][0]);
- $(".changeName").eq(1).text(_obj[0][1]);
- $(".changeName").eq(2).text(_obj[0][2]);
- $("#changeOI").css("display",_obj[0][3]);
- $(".wTempName").eq(0).text(_obj[0][4]);
- $(".wTempUnit").text(_obj[0][5]);
- $(".yogName").eq(0).text(_obj[3][0]);
- $(".yogName").eq(1).text(_obj[3][1]);
- $(".yogName").eq(2).text(_obj[3][2]);
- for(let i=0;i<_obj[2].length;i++){
- $(".wTemp").eq(i).text(allObj[_obj[2][i]] == undefined || allObj[_obj[2][i]] == "00000000" ? 0 : allObj[_obj[2][i]]);
- $(".wTempName").eq(i+1).text(_obj[1][i]);
- }
- }
- </script>
- </html>
|