Cab.html 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537
  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 type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.11&key=745d6f0134a56494868bd0e51a57fe46"></script>
  20. <script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
  21. <script src="../js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
  22. <script src="../js/pako.js"></script>
  23. <script type="text/javascript">
  24. document.write('<script src="../js/yz/init.js?id='+(new Date().getTime())+'" type="text/javascript" charset="utf-8"><\/script>');
  25. document.write('<script src="../js/yz/shipLi.js?id='+(new Date().getTime())+'" type="text/javascript" charset="utf-8"><\/script>');
  26. document.write('<script src="../js/yz/ajax.js?id='+(new Date().getTime())+'" type="text/javascript" charset="utf-8"><\/script>');
  27. document.write('<script src="../js/yz/defailt.js?id='+(new Date().getTime())+'" type="text/javascript" charset="utf-8"><\/script>');
  28. document.write('<script src="../js/yz/configuration.js?id='+(new Date().getTime())+'" type="text/javascript" charset="utf-8"><\/script>');
  29. </script>
  30. <script src="//webapi.amap.com/ui/1.1/main.js?v=1.1.1"></script>
  31. </head>
  32. <script>
  33. checkLogin();
  34. </script>
  35. <style type="text/css">
  36. * {
  37. margin: 0;
  38. padding: 0;
  39. box-sizing: border-box;
  40. }
  41. body {
  42. height: 100vh;
  43. color: #fff;
  44. overflow: auto;
  45. background-color: #040d32;
  46. }
  47. .luojing_box{
  48. position: absolute;
  49. top: 50%;
  50. left: 50%;
  51. transform: translate(-50%,-50%);
  52. height: 48%;
  53. }
  54. .luojing_box1{
  55. height: 100%;
  56. transform: rotate(0deg);
  57. transform-origin: center;
  58. }
  59. .nowShip{
  60. left: 20px;
  61. top: 20px;
  62. width: 200px;
  63. font-size: 0.8vw;
  64. }
  65. .map_info>div>div:first-child{
  66. width: 45px;
  67. font-size: 0.8vw;
  68. }
  69. .map_info>div>div:last-child {
  70. width: calc(100% - 45px);
  71. }
  72. .engine1,.engine2,.engine3{
  73. display: flex;
  74. flex-direction: column;
  75. align-items: center;
  76. justify-content: center;
  77. border:3px solid #ccc;
  78. height:60%;
  79. }
  80. .engine1{
  81. border-right: none;
  82. }
  83. .engine3{
  84. border-left: none;
  85. }
  86. </style>
  87. <body>
  88. <div style="height:80px;position: relative;">
  89. <img src="../imgs/cab.png" alt="" style="width: 100%;">
  90. <div style="position: absolute;bottom: 12px;right:20px;color: #fff;">
  91. 最后更新时间:<span id="endTime"></span>
  92. </div>
  93. </div>
  94. <div class="yz_clm15">
  95. <div class="yz_clm3">
  96. <div class="Sense">
  97. <div class="yz_title">气象信息</div>
  98. <div class="flex flex-wrap align-center text-center padding-tb-xs"
  99. style="height: calc(100% - 30px);color: #94d1ff;font-size: 0.8vw;">
  100. <div style="width:66.66%;height:33.33%;">
  101. <div style="font-size: 2vw;" class="padding-top-xs">
  102. <span id="_week">星期一</span>
  103. <!-- <i class="iconfont icon-left yz_cursor" style="font-size: 18px;" onclick="changeDate(-1);"></i> -->
  104. <!-- <span style="vertical-align: middle;color: #39AEFF;" id="_time">08:00:00</span> -->
  105. <!-- <i class="iconfont icon-right yz_cursor" style="font-size: 22px;" onclick="changeDate(1);"></i> -->
  106. </div>
  107. <div><span id="_year">2021年01月01日</span></div>
  108. </div>
  109. <div style="width:33.33%;height:33.33%;">
  110. <img src="../imgs/lg_icon.png" alt="" style="height:30px;">
  111. <div class="text-center">
  112. 浪高<br><span class="text-yellow" id="weather3">0</span> m
  113. </div>
  114. </div>
  115. <div style="width:33.33%;height:33.33%;">
  116. <img src="../imgs/qy_icon.png" alt="" style="height:30px;">
  117. <div class="text-center">
  118. 气压<br><span class="text-yellow" id="weather7">0</span> hPa
  119. </div>
  120. </div>
  121. <div style="width:33.33%;height:33.33%;">
  122. <img src="../imgs/fx_icon.png" alt="" style="height:30px;">
  123. <div class="text-center">
  124. 风向<br><span class="text-yellow" id="weather2">0</span> °
  125. </div>
  126. </div>
  127. <div style="width:33.33%;height:33.33%;">
  128. <img src="../imgs/ls_icon.png" alt="" style="height:30px;">
  129. <div class="text-center">
  130. 流速<br><span class="text-yellow" id="weather4">0</span> m/s
  131. </div>
  132. </div>
  133. <div style="width:33.33%;height:33.33%;">
  134. <img src="../imgs/wd_icon.png" alt="" style="height:30px;">
  135. <div class="text-center">
  136. 温度<br><span class="text-yellow" id="weather6">0</span> ℃
  137. </div>
  138. </div>
  139. <div style="width:33.33%;height:33.33%;">
  140. <img src="../imgs/fs_icon.png" alt="" style="height:30px;">
  141. <div class="text-center">
  142. 风速<br><span class="text-yellow" id="weather1">0</span> m/s
  143. </div>
  144. </div>
  145. <div style="width:33.33%;height:33.33%;">
  146. <img src="../imgs/lx_icon.png" alt="" style="height:30px;">
  147. <div class="text-center">
  148. 流向<br><span class="text-yellow" id="weather5">0</span> °
  149. </div>
  150. </div>
  151. </div>
  152. </div>
  153. </div>
  154. <div class="yz_clm6">
  155. <div class="Sense">
  156. <div class="yz_title">AIS信息</div>
  157. <div style="height: calc(100% - 45px);color: #94d1ff;" class="flex">
  158. <div class="flex-sub">
  159. <div id="myChart1" style="height: calc(100% - 40px);"></div>
  160. <div class="text-center">
  161. 航速:<span class="text-yellow text-bold text-xl" id="_hs">0</span> 节
  162. </div>
  163. </div>
  164. <div class="flex-sub">
  165. <div id="myChart2" style="height: calc(100% - 40px);"></div>
  166. <div class="text-center">
  167. 航向:<span class="text-yellow text-bold text-xl" id="_csx">0</span> 度
  168. </div>
  169. </div>
  170. <div class="flex-sub">
  171. <div id="myChart3" style="height: calc(100% - 40px);"></div>
  172. <div class="text-center">
  173. <div>船艏向:<span class="text-yellow text-bold text-xl" id="_cjx">0</span> 度</div>
  174. </div>
  175. </div>
  176. </div>
  177. </div>
  178. </div>
  179. <div class="yz_clm3">
  180. <div class="Sense">
  181. <div class="yz_title">吃水信息</div>
  182. <div style="height: calc(100% - 45px);color: #94d1ff;">
  183. <div class="flex align-center justify-center _Cc" style="height: 100%;font-size: 0.9vw;">
  184. <div class="flex align-center flex-sub">
  185. <img src="../imgs/ship_cs.png" alt="" style="width:90px;">
  186. <div class="text-center" style="margin: 33px 0 0 10px;">
  187. 测深<br><span class="text-yellow _ces">0</span> m
  188. </div>
  189. </div>
  190. <div class="flex-sub text-center">
  191. <div>艏:<br><span class="text-yellow" id="_csc">0</span>m</div>
  192. <div class="flex align-center justify-center">
  193. <div>左中:<br><span class="text-yellow" id="_czc">0</span>m</div>
  194. <img src="../imgs/ship_tblr.png" style="height:120px;margin: 10px;">
  195. <div>右中:<br><span class="text-yellow" id="_cyc">0</span>m</div>
  196. </div>
  197. <div>艉:<br><span class="text-yellow" id="_cwc">0</span>m</div>
  198. </div>
  199. </div>
  200. <div class="flex align-center justify-center _Cs" style="height: 100%;">
  201. <img src="../imgs/ship_cs.png" alt="" style="width:120px;">
  202. <div class="text-center" style="margin: 33px 0 0 10px;">
  203. 测深<br><span class="text-yellow _ces">0</span> m
  204. </div>
  205. </div>
  206. </div>
  207. </div>
  208. </div>
  209. <div class="yz_clm3">
  210. <div class="Sense">
  211. <div class="yz_title">转速信息</div>
  212. <div id="myChart4" style="height: calc(100% - 80px);"></div>
  213. <div class="text-center margin-top-sm" style="color: #94d1ff;">
  214. <div>主机转速:<span class="text-yellow text-bold text-xl" id="_zjzs">0</span> RPM</div>
  215. </div>
  216. </div>
  217. </div>
  218. <div class="yz_clm6">
  219. <div class="Sense padding-sm" style="position: relative;">
  220. <div id="container" style="width: 100%;height: 100%;"></div>
  221. <div class="nowShip">
  222. <div class="map_title">瑞高热情</div>
  223. <div class="padding-sm map_info">
  224. <div><div>经度:</div><div id="gps_lon">000.0000</div></div>
  225. <div><div>纬度:</div><div id="gps_lat">000.0000</div></div>
  226. <div><div>状态:</div><div id="sailing">在航</div></div>
  227. <div><div>时间:</div><div id="nowtime">2022-01-01 00:00:00</div></div>
  228. <div><div>地址:</div><div style="font-size: 0.7vw;" id="gps_pos"></div></div>
  229. </div>
  230. </div>
  231. </div>
  232. </div>
  233. <div class="yz_clm3">
  234. <div class="Sense">
  235. <div class="yz_title">发电机</div>
  236. <div class="flex text-center align-center justify-center padding-lr" style="height: calc(100% - 40px);font-size: 0.8vw;">
  237. <div class="flex-sub engine1">
  238. <div>转速:</div>
  239. <div class="margin-tb-xs"><span>0</span>RPM</div>
  240. <div>1#发电机</div>
  241. </div>
  242. <div class="flex-sub engine2">
  243. <div>转速:</div>
  244. <div class="margin-tb-xs"><span>0</span>RPM</div>
  245. <div>2#发电机</div>
  246. </div>
  247. <div class="flex-sub engine3">
  248. <div>转速:</div>
  249. <div class="margin-tb-xs"><span>0</span>RPM</div>
  250. <div>3#发电机</div>
  251. </div>
  252. </div>
  253. </div>
  254. </div>
  255. </div>
  256. </body>
  257. <script>
  258. var _Tok = JSON.parse(localStorage.getItem("_yz_TT")).yzTok;
  259. var CabEng = [],timeId = null;
  260. var nowMaker = {};
  261. var nowSn = null;
  262. var shipLi = [];
  263. var map = new AMap.Map('container', {
  264. center: [118.616808,31.942308],
  265. zoom:5,
  266. });
  267. var smallSre = false;
  268. map.setFeatures(['bg', 'point', 'building'])
  269. var myChart1 = echarts.init(document.getElementById('myChart1'));
  270. var myChart2 = echarts.init(document.getElementById('myChart2'));
  271. var myChart3 = echarts.init(document.getElementById('myChart3'));
  272. var myChart4 = echarts.init(document.getElementById('myChart4'));
  273. function setoption1(num,txt,max){
  274. let _num = isNaN(Number(num,10))?0:num;
  275. $(txt).text(((max == 1500&&num>3000)?"--":num));
  276. option = {
  277. series: [
  278. {
  279. name: '实时数据',
  280. min: 0,
  281. max: max,
  282. splitNumber:10,
  283. type: 'gauge',
  284. fontSize: 13,
  285. center: ['50%', '55%'],
  286. radius: max == 20?'90%':'100%',
  287. detail: {show:false },
  288. data: [{value: ((max == 1500&&_num>3000)?0:_num) }],
  289. axisLine: {
  290. lineStyle: {
  291. color: [[0.09, 'lime'], [0.82, '#1e90ff'], [1, '#ff4500']],
  292. width: 5
  293. }
  294. },
  295. axisTick: {
  296. distance: 4,//9
  297. },
  298. pointer: {
  299. width:5,
  300. length:"50%"
  301. },
  302. axisLabel:{
  303. distance:10,
  304. textStyle: {
  305. color: '#fff',
  306. fontSize: (smallSre?6:9)
  307. }
  308. },
  309. splitLine: {
  310. distance: 4,
  311. length: 10,
  312. lineStyle: {
  313. width: 1,
  314. color: '#fff'
  315. }
  316. },
  317. title: {
  318. textStyle: {
  319. color: '#fff',
  320. }
  321. },
  322. }
  323. ]
  324. };
  325. return option;
  326. }
  327. function setoption2(ship_s,txt){
  328. $(txt).text(ship_s);
  329. option = {
  330. series: [
  331. {
  332. name: '实时数据',
  333. min: 0,
  334. max: 360,
  335. splitNumber:12,
  336. type: 'gauge',
  337. fontSize: 0,
  338. center: ['50%', '55%'],
  339. radius: '90%',
  340. startAngle:90,
  341. endAngle: -269.999999,
  342. detail: {show:false
  343. },
  344. axisTick: {
  345. distance: 2,
  346. },
  347. data: [{value: ship_s}],
  348. axisLine: {
  349. lineStyle: {
  350. color: [[1, '#1e90ff']],
  351. width: 5,
  352. },
  353. },
  354. axisLabel:{
  355. textStyle: {
  356. color: '#fff',
  357. fontSize: smallSre?6:9
  358. },
  359. distance: 7,
  360. formatter: function(e) {
  361. switch (e + "") {
  362. case "0":
  363. return "0";
  364. case "30":
  365. return "30";
  366. case "60":
  367. return "60";
  368. case "90":
  369. return "90";
  370. case "120":
  371. return "120";
  372. case "150":
  373. return "150";
  374. case "180":
  375. return "180";
  376. case "210":
  377. return "210";
  378. case "240":
  379. return "240";
  380. case "270":
  381. return "270";
  382. case "300":
  383. return "300";
  384. case "330":
  385. return "330";
  386. default:
  387. return "";
  388. }
  389. }
  390. },
  391. pointer: {
  392. width:5,
  393. length:"60%",
  394. },
  395. splitLine: {
  396. distance: 2,
  397. length: 10,
  398. lineStyle: {
  399. width: 1,
  400. color: '#fff',
  401. }
  402. },
  403. title: {
  404. textStyle: {
  405. color: '#fff',
  406. }
  407. },
  408. }
  409. ]
  410. };
  411. return option;
  412. }
  413. window.addEventListener('message',(data)=>{
  414. initF();
  415. })
  416. $(document).ready(function() {
  417. smallSre = window.innerWidth < 1442;
  418. initF();
  419. })
  420. function initF(){
  421. nowSn = localStorage.getItem("shipSn");
  422. let nowTime = changeDays(0,new Date());
  423. $("#_time").text(parseInt(nowTime[3])<9?"08:00:00":(parseInt(nowTime[3])<15?"14:00:00":"20:00:00"));
  424. $("#_year").text(nowTime[1]);
  425. $("#_week").text(nowTime[2]);
  426. CabEng = Config((nowSn == "381001400"||nowSn == "480000618"?"381001400":"382001400"),nowSn)["Cab"];
  427. firstList(0);
  428. // clearInterval(timeId);
  429. // timeId = setInterval(()=>{
  430. // firstList(1);
  431. // },60*1000)
  432. $("._Cc").css("display",CabEng[5]);
  433. $("._Cs").css("display",CabEng[4]);
  434. }
  435. $(window).resize(function(){
  436. smallSre = window.innerWidth < 1442;
  437. myChart1.resize();
  438. myChart2.resize();
  439. myChart3.resize();
  440. myChart4.resize();
  441. })
  442. function firstList(_num){
  443. if(_num == 0){yzkj.load("load1")};
  444. setTimeout(()=>{
  445. deviceList(function acb(_data){
  446. shipLi = _data;
  447. let _obj = {
  448. icon: "../imgs/ship.png",
  449. prod: shipLi.iboatName,
  450. addr: "获取位置失败",
  451. sn: shipLi.sn,
  452. sound: shipLi["0aS"],
  453. head: shipLi["0aA1"],
  454. sail: shipLi["0a3"],
  455. time: shipLi.time,
  456. "_ponew": shipLi.posit
  457. };
  458. nowMaker = _obj;
  459. setVal(shipLi)
  460. $("#endTime").text(_data["time"])
  461. initMap([nowMaker],"oneShip");
  462. ajaxWeather($("#_year").text().replace("年","-").replace("月","-").replace("日","")+" "+$("#_time").text());
  463. if(_num == 0){yzkj.closeLoad("load1");}
  464. if(_data.mmsi==undefined){
  465. setTimeout(()=>{
  466. firstList(1);
  467. },180*1000)
  468. }
  469. })
  470. },100)
  471. }
  472. function setVal(_data){
  473. myChart1.setOption(setoption1(_data["0a9"],"#_hs",20));
  474. myChart3.setOption(setoption2(_data["0a8"]<0?256.4:_data["0a8"],"#_cjx"));
  475. myChart2.setOption(setoption2(_data["0aA1"]<0?65.0:_data["0aA1"],"#_csx"));
  476. myChart4.setOption(setoption1(_data[CabEng[0]],"#_zjzs",1500));
  477. $("._ces").text(_data["0aS"]!= undefined?(_data["0aS"]):0);
  478. $("#_csc").text(_data["0ag"]!= undefined?_data["0ag"]:0);
  479. $("#_czc").text(_data["0ai"]!= undefined?_data["0ai"]:0);
  480. $("#_cyc").text(_data["0aj"]!= undefined?_data["0aj"]:0);
  481. $("#_cwc").text(_data["0ah"]!= undefined?_data["0ah"]:0);
  482. $(".engine1").css("background-color",_data[CabEng[1]] != undefined&&_data[CabEng[1]] != 0&&!isNaN(Number(_data[CabEng[1]],10))?"#39ba48":"#787878");
  483. $(".engine1 span").text(_data[CabEng[1]]);
  484. $(".engine2").css("background-color",_data[CabEng[2]] != undefined&&_data[CabEng[2]] != 0&&!isNaN(Number(_data[CabEng[2]],10))?"#39ba48":"#787878");
  485. $(".engine2 span").text(_data[CabEng[2]]);
  486. $(".engine3").css("background-color",_data[CabEng[3]] != undefined&&_data[CabEng[3]] != 0&&!isNaN(Number(_data[CabEng[3]],10))?"#39ba48":"#787878");
  487. $(".engine3 span").text(_data[CabEng[3]]);
  488. }
  489. function ajaxWeather(_time){
  490. getWeather({
  491. _Tok: _Tok,
  492. nowSn: nowSn,
  493. _time: _time,
  494. posi: nowMaker._ponew
  495. })
  496. }
  497. function changeDate(_num){
  498. let _time = parseInt($("#_time").text());
  499. let _year = $("#_year").text().replace("年","-").replace("月","-").replace("日","");
  500. let _week = $("#_week").text();
  501. let _newAjax = "";
  502. if(_num == -1){
  503. if(_time < 9){
  504. let _newYW = changeDays(-1,_year);
  505. $("#_time").text("20:00:00");
  506. $("#_year").text(_newYW[1]);
  507. $("#_week").text(_newYW[2]);
  508. _newAjax = _newYW[0] + " 20:00:00";
  509. }else if(_time>8&&_time<15){
  510. $("#_time").text("08:00:00");
  511. _newAjax = _year + " 08:00:00";
  512. }else if(_time>14){
  513. $("#_time").text("14:00:00");
  514. _newAjax = _year + " 14:00:00";
  515. }
  516. }else{
  517. if(_time < 9){
  518. $("#_time").text("14:00:00");
  519. _newAjax = _year + " 14:00:00";
  520. }else if(_time>8&&_time<15){
  521. $("#_time").text("20:00:00");
  522. _newAjax = _year + " 20:00:00";
  523. }else if(_time>14){
  524. let _newYW = changeDays(1,_year);
  525. $("#_time").text("08:00:00");
  526. $("#_year").text(_newYW[1]);
  527. $("#_week").text(_newYW[2]);
  528. _newAjax = _newYW[0] + " 08:00:00";
  529. }
  530. }
  531. ajaxWeather(_newAjax);
  532. }
  533. </script>
  534. </html>