123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310 |
- <!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="../layui/css/layui.css" media="all">
- <link rel="stylesheet" href="../css/element.css">
- <link rel="stylesheet" href="../css/style.css">
- <link rel="stylesheet" href="../css/base.css">
-
- <script src="../layui/layui.js" type="text/javascript" charset="utf-8"></script>
- <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 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/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: #fff;
- overflow: auto;
- background-color: #040d32;
- }
- ._day{
- height: 28px;
- font-size: 14px;
- line-height: 28px;
- width: 60px;
- cursor: pointer;
- border-radius: 4px;
- text-align: center;
- background-color: #5793f3;
- }
- .layui-nav .layui-nav-item{
- cursor: pointer;
- line-height: 45px;
- }
- .layui-nav .layui-nav-item .layui-nav-child{
- top:50px;
- }
- .layui-nav .layui-nav-item .layui-nav-child dd{
- cursor: pointer;
- }
- @media screen and (max-width: 500px){
- .tabUl div {
- padding: 0 12px;
- font-size: 13px;
- }
- }
- .layui-nav .layui-this:after{
- background-color: #5793f3;
- }
- </style>
- <body>
- <div style="height:60px;padding:7.5px;">
- <ul class="layui-nav yz-tab" style="background-color: #082041;">
- <li class="layui-nav-item layui-this">
- <a><span style="font-size: 15px;">主机数据</span><span class="layui-nav-more"></span></a>
- <dl class="layui-nav-child">
- <dd data-open="onePost"><a>关键数据</a></dd>
- <dd data-open="sixPost"><a>1-6#缸排气温度</a></dd>
- <dd data-open="sevPost"><a>0-7#主轴承温度</a></dd>
- <dd data-open="twoPost"><a>涡轮、滑油、高温水</a></dd>
- <dd data-open="thrPost"><a>中冷器</a></dd>
- </dl>
- </li>
- <li class="layui-nav-item Enthus">
- <a><span style="font-size: 15px;">齿轮箱数据</span><span class="layui-nav-more"></span></a>
- <dl class="layui-nav-child">
- <dd data-open="forPost"><a>滤前、滑油</a></dd>
- <dd data-open="fivPost"><a>正车、倒车、输出</a></dd>
- </dl>
- </li>
- <li class="layui-nav-item Inova">
- <a><span style="font-size: 15px;">滤前、滑油、正车、倒车</span><span class="layui-nav-more"></span></a>
- <dl class="layui-nav-child">
- <dd data-open="forPost"><a>滤前、滑油、正车、倒车</a></dd>
- </dl>
- </li>
- <li class="layui-nav-item Inova">
- <a><span style="font-size: 15px;">燃油舱、柴油舱</span><span class="layui-nav-more"></span></a>
- <dl class="layui-nav-child">
- <dd data-open="fivPost"><a>柴油舱液位</a></dd>
- <dd data-open="eigPost"><a>燃油舱液位</a></dd>
- <dd data-open="ninPost"><a>燃油舱温度</a></dd>
- </dl>
- </li>
- </ul>
- </div>
- <div class="search_ flex justify-center align-center">
- <div class="_day" data-num="-1">前一天</div>
- <input type="date" class="startDate text-center margin-lr" style="width: 140px;padding: 0;"/>
- <div class="_day" data-num="1">后一天</div>
- </div>
- <div class="yz_clm15" style="height: calc(100% - 95px);">
- <div class="yz_clm4 reportli">
- <div class="Sense">
- <div class="yz_title">主机转速</div>
- <div id="myChart1" style="height: calc(100% - 30px);">
-
- </div>
- </div>
- </div>
- <div class="yz_clm4 reportli">
- <div class="Sense">
- <div class="yz_title">燃油进机压力</div>
- <div id="myChart2" style="height: calc(100% - 30px);">
-
- </div>
- </div>
- </div>
- <div class="yz_clm4 reportli">
- <div class="Sense">
- <div class="yz_title">燃油进机温度</div>
- <div id="myChart3" style="height: calc(100% - 30px);">
-
- </div>
- </div>
- </div>
- <div class="yz_clm4 reportli">
- <div class="Sense">
- <div class="yz_title">起动空气压力</div>
- <div id="myChart4" style="height: calc(100% - 30px);">
-
- </div>
- </div>
- </div>
- <div class="yz_clm4 reportli">
- <div class="Sense">
- <div class="yz_title">控制空气压力</div>
- <div id="myChart5" style="height: calc(100% - 30px);">
-
- </div>
- </div>
- </div>
- <div class="yz_clm4 reportli">
- <div class="Sense">
- <div class="yz_title">预润滑油压力</div>
- <div id="myChart6" style="height: calc(100% - 30px);">
-
- </div>
- </div>
- </div>
- <div class="yz_clm3 reportli">
- <div class="Sense">
- <div class="yz_title">高温水进机温度</div>
- <div id="myChart7" style="height: calc(100% - 30px);">
-
- </div>
- </div>
- </div>
- <div class="yz_clm3 reportli">
- <div class="Sense">
- <div class="yz_title">高温水出机温度</div>
- <div id="myChart8" style="height: calc(100% - 30px);">
-
- </div>
- </div>
- </div>
- </div>
- </body>
- <script>
- var _Tok = JSON.parse(localStorage.getItem("_yz_TT")).yzTok;
- var _ship = localStorage.getItem("shipSn"),_shipMmsi=undefined;
- var _XAxis = [],_myChart = [],nowCar = "onePost",nowTime = null;
- var _ChartU = ["myChart1","myChart2","myChart3","myChart4","myChart5","myChart6","myChart7","myChart8"];
- layui.use(['layer', 'form','element'], function(){
- var layer = layui.layer,
- element = layui.element,
- $ = layui.jquery;
- })
- window.addEventListener('message',(data)=>{
- initFn();
- })
- var _eCchart = {},_eChartTxt = {};
- $(document).ready(function() {
- initFn();
- });
- function initFn(){
- _ship = localStorage.getItem("shipSn");
- let _shipdata = ShipData();
- _shipMmsi = _shipdata.filter(item => item.sn == _ship)[0].mmsi;
- let _Config = Config((_ship == "381001400"||_ship == "480000618"?"381001400":"382001400"),_ship)["Post"];
- _eCchart = _Config["eCchart"];
- _eChartTxt = _Config["eChartTxt"];
- let _sta = _Config["eCchartSta"];
- $(".yz-tab .Enthus").css("display",_sta[0]);
- $(".yz-tab .Inova").css("display",_sta[1]);
- $(".yz-tab dd[data-open='sixPost'] a").text(_sta[2]);
- $(".yz-tab dd[data-open='sevPost'] a").text(_sta[3]);
- $(".yz-tab dd[data-open='twoPost'] a").text(_sta[5]);
- $(".yz-tab dd[data-open='thrPost']").css("display",_sta[4]);
-
- _myChart = [];
- nowCar = "onePost";
- $(".yz-tab li").removeClass("layui-this").eq(0).addClass("layui-this");
- $(".yz-tab li dd").removeClass("layui-this");
- $(".yz-tab dd[data-open='onePost']").addClass("layui-this");
-
- $(".startDate").val(getTime(new Date())[0]);
- setXAxis();
- setEcharts(nowCar);
- }
- function setEcharts(_key){
- var _sta = 0;
- yzkj.load("load1");
- setTimeout(()=>{
- let _obj = _eCchart[_key];
- nowTime = $(".startDate").val().replace(/\//g, '-');
- $(".reportli").css("display","block");
- if(_obj.length == 8){
- $(".reportli").removeClass("yz_clm4").addClass("yz_clm3");
- }else if(_obj.length == 7){
- $(".reportli").removeClass("yz_clm4").addClass("yz_clm3");
- $(".reportli").eq(7).css("display","none");
- }else if(_obj.length < 7){
- $(".reportli").removeClass("yz_clm3").addClass("yz_clm4");
- $(".reportli").eq(6).css("display","none");
- $(".reportli").eq(7).css("display","none");
- if(_obj.length == 5){
- $(".reportli").eq(5).css("display","none");
- }else if(_obj.length == 4){
- $(".reportli").eq(4).css("display","none");
- $(".reportli").eq(5).css("display","none");
- }
- }
- let _sta = false;
- for(var i=0;i<_obj.length;i++){
- let _acb = _obj[i],_ind = i;
- $(".reportli .yz_title").eq(i).text(_eChartTxt[_key][i]);
- _sta += 1;
- if(_shipMmsi==undefined){
- reportAjax({
- "_url":_acb[0],
- "_time": nowTime,
- "sn": _ship,
- "callback":function(res){
- setData(res,_ind,_acb[1],(_sta == _obj.length?true:false));
- }
- })
- }else{
- if(_sta == _obj.length){
- yzkj.closeLoad("load1");
- }
- _myChart[_ind].setOption(setoption1([],_XAxis,_acb[1]));
- _myChart[_ind].resize();
- }
- }
- },100);
- }
- function setData(_data,_i,_unit,_ft){
- let _newD = [];
- for(var i=0;i<6*24;i++){
- let _tim = getTime(new Date(new Date(nowTime+" 00:00:00").getTime() + (i*60*1000*10)));
- _newD.push(_data[_tim[0]+_tim[2]] || 0);
- }
- _myChart[_i].setOption(setoption1(_newD,_XAxis,_unit));
- _myChart[_i].resize();
- if(_ft){
- yzkj.closeLoad("load1");
- }
- }
- $(window).resize(function(){
- for(var i=0;i<_myChart.length;i++){
- _myChart[i].resize();
- }
- })
- $(".startDate").on("change","",function(e){
- setEcharts(nowCar);
- })
- $(".layui-nav-child").on("click","dd",function(){
- let _id = $(this).data("open");
- nowCar = _id;
- setEcharts(nowCar);
- $(this).parent().parent().addClass("layui-this").siblings().removeClass("layui-this");
- })
- $(".search_ ._day").on("click","",function(){
- let _id = parseInt($(this).data("num"));
- let _key = $(".startDate").val().replace(/\//g, '-');
- let _a = dayChange(_key,_id);
- if(_a != undefined){
- $(".startDate").val(getTime(dayChange(_key,_id))[0]);
- setEcharts(nowCar);
- }
- })
- </script>
- </html>
|