EngineRe.html 7.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>发电机报表</title>
  6. <meta name="renderer" content="webkit">
  7. <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
  8. <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  9. <meta http-equiv="pragma" content="no-cache">
  10. <meta http-equiv="Cache" content="no-cache">
  11. <meta http-equiv="cache-control" content="no-cache, must-revalidate">
  12. <meta http-equiv="expires" content="0">
  13. <meta name="viewport"
  14. content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  15. <!--引入 element-ui 的样式,-->
  16. <link rel="stylesheet" href="../css/element.css">
  17. <link rel="stylesheet" href="../css/style.css">
  18. <link rel="stylesheet" href="../css/base.css">
  19. <script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
  20. <script src="../js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
  21. <script type="text/javascript">
  22. document.write('<script src="../js/yz/init.js?id='+(new Date().getTime())+'" type="text/javascript" charset="utf-8"><\/script>');
  23. document.write('<script src="../js/yz/shipLi.js?id='+(new Date().getTime())+'" type="text/javascript" charset="utf-8"><\/script>');
  24. document.write('<script src="../js/yz/ajax.js?id='+(new Date().getTime())+'" type="text/javascript" charset="utf-8"><\/script>');
  25. document.write('<script src="../js/yz/configuration.js?id='+(new Date().getTime())+'" type="text/javascript" charset="utf-8"><\/script>');
  26. </script>
  27. <script>
  28. checkLogin();
  29. </script>
  30. </head>
  31. <style type="text/css">
  32. * {
  33. margin: 0;
  34. padding: 0;
  35. box-sizing: border-box;
  36. }
  37. body {
  38. height: 100vh;
  39. color: #fff;
  40. overflow: auto;
  41. background-color: #040d32;
  42. }
  43. ._day{
  44. height: 28px;
  45. font-size: 14px;
  46. line-height: 28px;
  47. width: 60px;
  48. cursor: pointer;
  49. border-radius: 4px;
  50. text-align: center;
  51. background-color: #5793f3;
  52. }
  53. @media screen and (max-width: 500px){
  54. .tabUl div {
  55. padding: 0 12px;
  56. font-size: 13px;
  57. }
  58. }
  59. </style>
  60. <body>
  61. <div style="height:60px;padding:7.5px;">
  62. <div class="tabUl">
  63. <div data-open="onePost" class="act_this">1号发电机</div>
  64. <div data-open="twoPost">2号发电机</div>
  65. <div data-open="thrPost">3号发电机</div>
  66. <div data-open="forPost" style="display: none;">应急发电机</div>
  67. </div>
  68. </div>
  69. <div class="search_ flex justify-center align-center">
  70. <div class="_day" data-num="-1">前一天</div>
  71. <input type="date" class="startDate text-center margin-lr" style="width: 140px;padding: 0;"/>
  72. <div class="_day" data-num="1">后一天</div>
  73. </div>
  74. <div class="yz_clm15" style="height: calc(100% - 95px);">
  75. <div class="yz_clm4">
  76. <div class="Sense">
  77. <div class="yz_title">柴油转速</div>
  78. <div id="myChart1" style="height: calc(100% - 30px);">
  79. </div>
  80. </div>
  81. </div>
  82. <div class="yz_clm4">
  83. <div class="Sense">
  84. <div class="yz_title">滑油压力</div>
  85. <div id="myChart2" style="height: calc(100% - 30px);">
  86. </div>
  87. </div>
  88. </div>
  89. <div class="yz_clm4">
  90. <div class="Sense">
  91. <div class="yz_title">运行时间</div>
  92. <div id="myChart3" style="height: calc(100% - 30px);">
  93. </div>
  94. </div>
  95. </div>
  96. <div class="yz_clm4">
  97. <div class="Sense">
  98. <div class="yz_title">电池电压</div>
  99. <div id="myChart4" style="height: calc(100% - 30px);">
  100. </div>
  101. </div>
  102. </div>
  103. <div class="yz_clm4">
  104. <div class="Sense">
  105. <div class="yz_title">滑油温度</div>
  106. <div id="myChart5" style="height: calc(100% - 30px);">
  107. </div>
  108. </div>
  109. </div>
  110. <div class="yz_clm4">
  111. <div class="Sense">
  112. <div class="yz_title">淡水温度</div>
  113. <div id="myChart6" style="height: calc(100% - 30px);">
  114. </div>
  115. </div>
  116. </div>
  117. </div>
  118. </body>
  119. <script>
  120. var _Tok = JSON.parse(localStorage.getItem("_yz_TT")).yzTok;
  121. var _ship = localStorage.getItem("shipSn"),_shipMmsi=undefined;
  122. var _XAxis = [],_myChart = [],nowCar = "onePost",nowTime = null;
  123. var _ChartUn = ["RPM","kPa","H","V","℃","℃"];
  124. var _ChartU = ["myChart1","myChart2","myChart3","myChart4","myChart5","myChart6"];
  125. window.addEventListener('message',(data)=>{
  126. initFn();
  127. })
  128. var _eCchart = {};
  129. $(document).ready(function() {
  130. initFn();
  131. });
  132. function initFn(){
  133. _ship = localStorage.getItem("shipSn");
  134. let _shipdata = ShipData();
  135. _shipMmsi = _shipdata.filter(item => item.sn == _ship)[0].mmsi;
  136. _eCchart = Config((_ship == "381001400"?"381001400":"382001400"),_ship)["Engine"]["eCchart"];
  137. if(_eCchart["forPost"] != undefined){
  138. $(".tabUl>div[data-open='forPost']").css("display","block");
  139. }else{
  140. $(".tabUl>div[data-open='forPost']").css("display","none");
  141. }
  142. _myChart = [];
  143. nowCar = "onePost";
  144. $(".tabUl>div").removeClass("act_this").eq(0).addClass("act_this");
  145. $(".startDate").val(getTime(new Date())[0]);
  146. setXAxis();
  147. setEcharts(nowCar);
  148. }
  149. function setEcharts(_key){
  150. yzkj.load("load1");
  151. setTimeout(()=>{
  152. let _obj = _eCchart[_key];
  153. nowTime = $(".startDate").val();
  154. let _sta = false;
  155. for(var i=0;i<_obj.length;i++){
  156. let _acb = _obj[i],_ind = i;
  157. if(_ind == (_obj.length - 1)){
  158. _sta = true;
  159. }
  160. if(_shipMmsi==undefined){
  161. reportAjax({
  162. "_url":_acb,
  163. "_time": nowTime,
  164. "sn": _ship,
  165. "callback":function(res){
  166. setData(res,_ind,_ChartUn[_ind],_sta,_acb);
  167. }
  168. })
  169. }else{
  170. if(_sta){
  171. yzkj.closeLoad("load1");
  172. }
  173. _myChart[_ind].setOption(setoption1([],_XAxis,_ChartUn[_ind]));
  174. _myChart[_ind].resize();
  175. }
  176. }
  177. },100)
  178. }
  179. var reduceStr = { "0fv": 0.1,"0ft": 0.1,"0fs": 0.1,"0g1": 0.1,"0fz": 0.1,"0fy": 0.1,
  180. "0g7": 0.1,"0g5": 0.1,"0g4": 0.1,"0gD1": 0.1,"0gB1": 0.1,"0gA1": 0.1 };
  181. function setData(_data,_i,_unit,_ft,_key){
  182. let _newD = [];
  183. for(var i=0;i<6*24;i++){
  184. let _tim = getTime(new Date(new Date(nowTime + " 00:00:00").getTime() + (i*60*1000*10)));
  185. if(reduceStr[_key] != undefined&&(_data[_tim[0]+_tim[2]]) != undefined){
  186. _newD.push((parseFloat(reduceStr[_key])*parseFloat(_data[_tim[0]+_tim[2]])).toFixed(2) || 0);
  187. }else{
  188. _newD.push(_data[_tim[0]+_tim[2]] || 0);
  189. }
  190. }
  191. _myChart[_i].setOption(setoption1(_newD,_XAxis,_unit));
  192. if(_ft){
  193. yzkj.closeLoad("load1");
  194. }
  195. }
  196. $(window).resize(function(){
  197. for(var i=0;i<_myChart.length;i++){
  198. _myChart[i].resize();
  199. }
  200. })
  201. $(".startDate").on("change","",function(e){
  202. setEcharts(nowCar);
  203. })
  204. $(".tabUl div").on("click","",function(){
  205. $(this).addClass("act_this").siblings().removeClass("act_this");
  206. let _id = $(this).data("open");
  207. nowCar = _id;
  208. setEcharts(nowCar);
  209. })
  210. $(".search_ ._day").on("click","",function(){
  211. let _id = parseInt($(this).data("num"));
  212. let _key = $(".startDate").val();
  213. let _a = dayChange(_key,_id);
  214. if(_a != undefined){
  215. $(".startDate").val(getTime(dayChange(_key,_id))[0]);
  216. setEcharts(nowCar);
  217. }
  218. })
  219. </script>
  220. </html>