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