Cargo.html 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535
  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. <link rel="stylesheet" href="../../css/element.css">
  16. <link rel="stylesheet" href="../../css/style.css">
  17. <link rel="stylesheet" id="linkSource" href="../../css/base.css">
  18. <script src="../../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
  19. <script src="../../js/yz/init.js" type="text/javascript" charset="utf-8"></script>
  20. <script src="../../js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
  21. <script src="../../js/pako.js"></script>
  22. <script type="text/javascript">
  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/defailt.js?id='+(new Date().getTime())+'" type="text/javascript" charset="utf-8"><\/script>');
  25. document.write('<script src="../../js/yz/ajax.js?id='+(new Date().getTime())+'" type="text/javascript" charset="utf-8"><\/script>');
  26. checkLogin();
  27. </script>
  28. </head>
  29. <style type="text/css">
  30. *{
  31. margin: 0;
  32. padding: 0;
  33. }
  34. body {
  35. color: #fff;
  36. height: 100%;
  37. background-color: #103151;
  38. }
  39. div,td {
  40. box-sizing: border-box;
  41. }
  42. .infoLi{
  43. width: 50%;
  44. line-height:19px;
  45. font-size: 13px;
  46. padding-left:18px;
  47. color: rgba(255,255,255,0.7);
  48. border-right: 1px solid #797979;
  49. border-bottom: 1px solid #797979;
  50. }
  51. .infoLi:nth-child(even){
  52. border-right:none;
  53. }
  54. .infoLi>div{
  55. display: flex;
  56. }
  57. .infoLi>div>div:first-child{
  58. width: 50px;
  59. text-align: right;
  60. padding-right: 15px;
  61. }
  62. .title{
  63. color: #0081ff;
  64. font-size: 16px;
  65. font-weight: 600;
  66. justify-content: center;
  67. padding: 9px 0;
  68. }
  69. .beng_box{
  70. box-sizing: border-box;
  71. width: 100%;
  72. padding:6px;
  73. font-size: 13px;
  74. margin-bottom: 10px;
  75. background-color: rgba(82,152,159,0.6);
  76. }
  77. .beng_box>div:last-child{
  78. text-align: center;
  79. margin-top: 4px;
  80. font-size: 14px;
  81. }
  82. .beng_box span{
  83. letter-spacing:4px;
  84. font-size: 24px;
  85. font-weight: bold;
  86. color: #fbbd08;
  87. margin-right: 6px;
  88. }
  89. .numbox{
  90. font-size: 16px;
  91. font-weight: bold;
  92. color: #fbbd08;
  93. margin-right: 5px;
  94. }
  95. .numbox+span{
  96. font-size: 12px;
  97. }
  98. .bg-theme-son{
  99. display: flex;
  100. align-items: center;
  101. justify-content: space-between;
  102. padding: 5px 10px;
  103. color: rgba(255,255,255,0.8);
  104. }
  105. .bg-theme-son .iconfont.act{
  106. transform:rotate(90deg);
  107. transition:transform 0.3s linear;
  108. }
  109. .check_+span{
  110. font-size: 13px;
  111. }
  112. </style>
  113. <body>
  114. <div class="topParen">
  115. <div class="topBox">
  116. <div>货控室管理</div>
  117. <i class="iconfont icon-left text-white" onclick="javascript:history.back(-1);"></i>
  118. </div>
  119. <div class="tabli">
  120. <div class="yz_this" name="oneEng">货舱</div>
  121. <div name="twoEng">泵舱</div>
  122. </div>
  123. <div class="hk_inf oneEng">
  124. <div style="border: 1px solid rgba(125,125,125,0.4);margin: 7px;">
  125. <div class="bg-theme-son">
  126. <span>货舱压力、液位、温度</span>
  127. </div>
  128. <div class="flex flex-wrap" id="_View">
  129. </div>
  130. </div>
  131. </div>
  132. <div class="hk_inf twoEng" style="display: none;">
  133. <div style="border: 1px solid rgba(125,125,125,0.4);margin: 7px;">
  134. <div class="bg-theme-son">
  135. <span>泵进出口压力</span>
  136. <span class="iconfont icon-right act"></span>
  137. </div>
  138. <div>
  139. <div class="flex padding-sm byli">
  140. <div class="flex text-grey" onclick="yaliSta(0)">
  141. <div class="check_"></div><span style="line-height: 14px;">进口压力</span>
  142. </div>
  143. <div class="flex text-grey margin-lr-lg" onclick="yaliSta(1)">
  144. <div class="check_"></div><span style="line-height: 14px;">出口压力</span>
  145. </div>
  146. </div>
  147. <div class="flex justify-around">
  148. <div style="width: 46%;">
  149. <div class="beng_box">
  150. <div>1#货油泵</div>
  151. <div><span id="beng_1">0</span>MPa</div>
  152. </div>
  153. <div class="beng_box">
  154. <div>2#货油泵</div>
  155. <div><span id="beng_2">0</span>MPa</div>
  156. </div>
  157. <div class="beng_box">
  158. <div>洗舱泵</div>
  159. <div><span id="beng_3">0</span>MPa</div>
  160. </div>
  161. </div>
  162. <div style="width: 46%;">
  163. <div class="beng_box">
  164. <div>1#压载泵</div>
  165. <div><span id="beng_4">0</span>MPa</div>
  166. </div>
  167. <div class="beng_box">
  168. <div>2#压载泵</div>
  169. <div><span id="beng_5">0</span>MPa</div>
  170. </div>
  171. <div class="beng_box">
  172. <div>扫舱泵</div>
  173. <div><span id="beng_6">0</span>MPa</div>
  174. </div>
  175. </div>
  176. </div>
  177. </div>
  178. </div>
  179. <div style="border: 1px solid rgba(125,125,125,0.4);margin: 7px;">
  180. <div class="bg-theme-son">
  181. <span>可燃气体</span>
  182. <span class="iconfont icon-right act"></span>
  183. </div>
  184. <div class="padding-sm text-grey">
  185. <div class="flex align-center">
  186. <div style="width:94px;">泵舱底左</div>
  187. <div class="_Num" id="qt_cdz">0</div>%LEL
  188. </div>
  189. <div class="flex align-center margin-tb-xs">
  190. <div style="width:94px;">泵舱底右</div>
  191. <div class="_Num" id="qt_cdy">0</div>%LEL
  192. </div>
  193. <div class="flex align-center">
  194. <div style="width:94px;">泵舱上甲板</div>
  195. <div class="_Num" id="qt_cjb">0</div>%LEL
  196. </div>
  197. <div class="flex align-center margin-tb-xs">
  198. <div style="width:94px;">空调通风口</div>
  199. <div class="_Num" id="qt_tfk">0</div>%LEL
  200. </div>
  201. <div class="flex align-center margin-tb-xs">
  202. <div style="width:94px;">尾楼甲板左</div>
  203. <div class="_Num" id="qt_wjbz">0</div>%LEL
  204. </div>
  205. <div class="flex align-center">
  206. <div style="width:94px;">尾楼甲板右</div>
  207. <div class="_Num" id="qt_wjby">0</div>%LEL
  208. </div>
  209. </div>
  210. </div>
  211. <div style="border: 1px solid rgba(125,125,125,0.4);margin: 7px;">
  212. <div class="bg-theme-son">
  213. <span>总管压力</span>
  214. <span class="iconfont icon-right"></span>
  215. </div>
  216. <div style="display: none;">
  217. <div class="flex padding-sm zgyl">
  218. <div class="flex text-grey" onclick="chanSta(0)">
  219. <div class="check_"></div><span style="line-height: 14px;">液货</span>
  220. </div>
  221. <div class="flex text-grey margin-lr" onclick="chanSta(1)">
  222. <div class="check_"></div><span style="line-height: 14px;">蒸气回收</span>
  223. </div>
  224. </div>
  225. <div class="flex text-center">
  226. <div class="flex-sub">
  227. <div id="myChart2" style="height: 160px;"></div>
  228. <div>1#</div>
  229. </div>
  230. <div class="flex-sub">
  231. <div id="myChart3" style="height: 160px;"></div>
  232. <div>2#</div>
  233. </div>
  234. </div>
  235. </div>
  236. </div>
  237. <div style="border: 1px solid rgba(125,125,125,0.4);margin: 7px;">
  238. <div class="bg-theme-son">
  239. <span>货油泵温度(℃)</span>
  240. <span class="iconfont icon-right"></span>
  241. </div>
  242. <div style="display: none;">
  243. <div class="flex padding-sm hywd">
  244. <div class="flex text-grey" onclick="changeSta(0)">
  245. <div class="check_"></div><span style="line-height: 14px;">前轴承</span>
  246. </div>
  247. <div class="flex text-grey margin-lr" onclick="changeSta(1)">
  248. <div class="check_"></div><span style="line-height: 14px;">前轴承</span>
  249. </div>
  250. <div class="flex text-grey margin-right" onclick="changeSta(2)">
  251. <div class="check_"></div><span style="line-height: 14px;">泵壳</span>
  252. </div>
  253. <div class="flex text-grey" onclick="changeSta(3)">
  254. <div class="check_"></div><span style="line-height: 14px;">舱壁轴填料函</span>
  255. </div>
  256. </div>
  257. <div id="myChart1" style="height: 220px;"></div>
  258. </div>
  259. </div>
  260. </div>
  261. </div>
  262. <script type="text/javascript">
  263. let nowSn = localStorage.getItem("shipSn");
  264. var awData = {};
  265. var zgYl = [["z1Z1","z1a"],["z1b","z1Y1"]];
  266. var yhbWd = [["z0y","z12","z16","z1A1","z1E1","z1I1"],//前轴承
  267. ["z0z","z13","z17","z1B1","z1F1","z1J1"],//后轴承
  268. ["z11","z15","z19","z1D1","z1H1","z1L1"],//泵壳
  269. ["z10","z14","z18","z1C1","z1G1","z1K1"]];//舱壁轴填料函
  270. var huoCang = [{"name":"左-1#","data":["z01","z0D1","z0R1","z0T1","z0S1",["Q28-0","Q28-1","Q24-3","Q24-2"]]},
  271. {"name":"右-1#","data":["z00","z0C1","z0O1","z0Q1","z0P1",["Q28-2","Q28-3","Q24-6","Q24-5"]]},
  272. {"name":"左-2#","data":["z03","z0F1","z0X1","z0Z1","z0Y1",["Q29-4","Q29-5","Q25-6","Q25-4"]]},
  273. {"name":"右-2#","data":["z02","z0E1","z0U1","z0W1","z0V1",["Q29-6","Q29-7","Q24-0","Q25-7"]]},
  274. {"name":"左-3#","data":["z05","z0H1","z0d","z0f","z0e",["Q29-0","Q29-1","Q26-7","Q26-6"]]},
  275. {"name":"右-3#","data":["z04","z0G1","z0a","z0c","z0b",["Q29-2","Q29-3","Q25-2","Q25-1"]]},
  276. {"name":"左-4#","data":["z07","z0J1","z0j","z0l","z0k",["Q2a-4","Q2a-5","Q26-1","Q26-0"]]},
  277. {"name":"右-4#","data":["z06","z0I1","z0g","z0i","z0h",["Q2a-6","Q2a-7","Q26-4","Q26-3"]]},
  278. {"name":"左-5#","data":["z09","z0L1","z0p","z0r","z0q",["Q2a-0","Q2a-1","Q27-3","Q27-2"]]},
  279. {"name":"右-5#","data":["z08","z0K1","z0m","z0o","z0n",["Q2a-2","Q2a-3","Q27-6","Q27-5"]]},
  280. {"name":"左污液舱","data":["z0B","z0N1","z0v","z0x","z0w",["Q2b-4","Q2b-6","Q28-6","Q28-4"]]},
  281. {"name":"右污液舱","data":["z0A","z0M1","z0s","z0t","z0u",["Q2b-6","Q2b-7","Q27-0","Q28-7"]]}];
  282. var myChart1 = echarts.init(document.getElementById('myChart1'));
  283. var myChart2 = echarts.init(document.getElementById('myChart2'));
  284. var myChart3 = echarts.init(document.getElementById('myChart3'));
  285. function setoption1(dataList){
  286. option = {
  287. color: ['#3398DB'],
  288. tooltip: {
  289. trigger: 'axis',
  290. axisPointer: {
  291. type: 'cross',
  292. crossStyle: {
  293. color: '#999'
  294. }
  295. }
  296. },
  297. grid: {
  298. top: '10%',
  299. left: '2%',
  300. right: '2%',
  301. bottom: '4%',
  302. containLabel: true
  303. },
  304. xAxis: [{
  305. type: 'category',
  306. data: ['1号','2号', '3号', '4号', '5号', '污液舱'],
  307. axisTick: {
  308. alignWithLabel: true
  309. },
  310. axisLine: {
  311. lineStyle: {
  312. color: '#fff',
  313. }
  314. },
  315. axisLabel: {
  316. textStyle: {
  317. fontSize:12,
  318. }
  319. }
  320. }
  321. ],
  322. yAxis: [{
  323. type: 'value',
  324. axisLine: {
  325. show: false
  326. },
  327. splitLine: {
  328. lineStyle: {
  329. color: ['rgba(132, 132, 132, 0.5)']
  330. }
  331. },
  332. axisLabel:{
  333. formatter: function(){
  334. return "";
  335. }
  336. }
  337. }
  338. ],
  339. series: [{
  340. name: '实时数据',
  341. type: 'bar',
  342. barWidth: '20',
  343. itemStyle:{
  344. normal: {
  345. label:{
  346. color:'#8799a3'
  347. },
  348. color: new echarts.graphic.LinearGradient(
  349. 0, 0, 0, 1,
  350. [
  351. {offset: 0, color:'#fe9a1a'},
  352. {offset: 1, color:'#fe421b'}
  353. ]
  354. )
  355. }
  356. },
  357. label: {
  358. normal: {
  359. show: true,
  360. position: 'top',
  361. color:'#8799a3',
  362. formatter: function (params) {
  363. var index = params.dataIndex;
  364. return dataList[index]
  365. }
  366. }
  367. },
  368. data:dataList
  369. }
  370. ]
  371. };
  372. return option;
  373. }
  374. function setoption2(data){
  375. option = {
  376. graphic: [{
  377. type: 'text',
  378. left: 'center',
  379. top: 'center',
  380. z: 10,
  381. style: {
  382. fill: '#fbbd08',
  383. text: data + "MPa",
  384. font: '16px Microsoft YaHei'
  385. }
  386. }],
  387. series: [{
  388. name: '实时数据',
  389. type: 'pie',
  390. center:["50%", "50%"],
  391. radius: ['60%', '80%'],
  392. avoidLabelOverlap: false,
  393. hoverAnimation: false,
  394. label: {
  395. normal: {
  396. show: false,
  397. position: 'center',
  398. textStyle: {
  399. fontSize: 20,
  400. color: '#d9d9d9'
  401. }
  402. }
  403. },
  404. data: [{
  405. value: data,
  406. name: data + "MPa"
  407. },{
  408. value: 3 - parseFloat(data),
  409. name: ''
  410. }]
  411. }],
  412. color: ['#FFF076','#52989F']
  413. };
  414. return option;
  415. }
  416. $(document).ready(function(){
  417. firstData();
  418. // setInterval(()=>{firstData();},60*1000);
  419. })
  420. function firstData(){
  421. awData = {};
  422. deviceList(function(_obj){
  423. awData = _obj;
  424. setVal();
  425. changeSta(0);
  426. chanSta(0);
  427. yaliSta(0);
  428. })
  429. }
  430. function changeSta(num){
  431. myChart1.setOption(setoption1([awData[yhbWd[num][0]],awData[yhbWd[num][1]],awData[yhbWd[num][2]],awData[yhbWd[num][3]],awData[yhbWd[num][4]],awData[yhbWd[num][5]]]));
  432. $(".hywd .check_").removeClass("check_act");
  433. $(".hywd .check_").eq(num).addClass("check_act");
  434. }
  435. function chanSta(num){
  436. myChart2.setOption(setoption2(awData[zgYl[num][0]] || 0));
  437. myChart3.setOption(setoption2(awData[zgYl[num][1]] || 0));
  438. $(".zgyl .check_").removeClass("check_act");
  439. $(".zgyl .check_").eq(num).addClass("check_act");
  440. }
  441. function yaliSta(num){
  442. let _data = [];
  443. if(num==0){
  444. _data =[awData["z1M1"],awData["z1O1"],awData["z1R1"],awData["z1T1"],awData["z1V1"],awData["z1X1"]];
  445. }else if(num==1){
  446. _data =[awData["z1N1"],awData["z1P1"],awData["z1Q1"],awData["z1S1"],awData["z1U1"],awData["z1W1"]];
  447. }
  448. $("#beng_1").text(_data[0] == undefined ? 0 : _data[0]);
  449. $("#beng_2").text(_data[1] == undefined ? 0 : _data[1]);
  450. $("#beng_3").text(_data[2] == undefined ? 0 : _data[2]);
  451. $("#beng_4").text(_data[3] == undefined ? 0 : _data[3]);
  452. $("#beng_5").text(_data[4] == undefined ? 0 : _data[4]);
  453. $("#beng_6").text(_data[5] == undefined ? 0 : _data[5]);
  454. $(".byli .check_").removeClass("check_act");
  455. $(".byli .check_").eq(num).addClass("check_act");
  456. }
  457. function setVal(){
  458. $("#qt_cdz").text(awData["z1d"] == undefined || awData["z1d"] == "00000000"? 0 : awData["z1d"]);
  459. $("#qt_cdy").text(awData["z1e"] == undefined || awData["z1e"] == "00000000"? 0 : awData["z1e"]);
  460. $("#qt_cjb").text(awData["z1f"] == undefined || awData["z1f"] == "00000000"? 0 : awData["z1f"]);
  461. $("#qt_tfk").text(awData["z1g"] == undefined || awData["z1g"] == "00000000"? 0 : awData["z1g"]);
  462. $("#qt_wjbz").text(awData["z1h"] == undefined || awData["z1h"] == "00000000"? 0 : awData["z1h"]);
  463. $("#qt_wjby").text(awData["z1i"] == undefined || awData["z1i"] == "00000000"? 0 : awData["z1i"]);
  464. let _str = "";
  465. for(var i=0;i<huoCang.length;i++){
  466. let _ab = huoCang[i].data;
  467. _str += `<div class="infoLi">
  468. <div class="title">${huoCang[i].name}</div>
  469. <div>
  470. <div>液位:</div>
  471. <div><span class="numbox">${awData[_ab[0]] || 0}</span><span>m</span></div>
  472. </div>
  473. <div>
  474. <div>压力:</div>
  475. <div><span class="numbox">${awData[_ab[1]] || 0}</span><span>kPa</span></div>
  476. </div>
  477. <div>
  478. <div>上温:</div>
  479. <div><span class="numbox">${awData[_ab[2]] || 0}</span><span>℃</span></div>
  480. </div>
  481. <div>
  482. <div>中温:</div>
  483. <div><span class="numbox">${awData[_ab[3]] || 0}</span><span>℃</span></div>
  484. </div>
  485. <div>
  486. <div>底温:</div>
  487. <div><span class="numbox">${awData[_ab[4]] || 0}</span><span>℃</span></div>
  488. </div>
  489. <div>
  490. <div>报警:</div>
  491. <div class="text-red">${getYWarm(_ab[5])}</div>
  492. </div>
  493. </div>`
  494. }
  495. $("#_View").html(_str);
  496. }
  497. function getYWarm(_key){
  498. let _txt = ["高高位","高位","高报警","低报警"];
  499. let _ij = "无";
  500. for(var i=0;i<_key.length;i++){
  501. let _ab = _key[i].split("-");
  502. let _df = awData[_ab[0]] == undefined?0:awData[_ab[0]].charAt(parseInt(_ab[1]));
  503. if(_df == 1){
  504. _ij = _txt[i];
  505. break;
  506. }
  507. }
  508. return _ij
  509. }
  510. $(".tabli>div").on("click","",function(){
  511. $(".hk_inf").css("display","none");
  512. $("."+$(this).attr("name")).css("display","block");
  513. $(this).addClass("yz_this").siblings().removeClass("yz_this");
  514. myChart1.resize();
  515. myChart2.resize();
  516. myChart3.resize();
  517. })
  518. $(".bg-theme-son").on("click","",function(){
  519. if($(this).next().is(":hidden")){
  520. $(this).next().css("display","block");
  521. $(this).find(".iconfont").addClass("act");
  522. }else{
  523. $(this).next().css("display","none");
  524. $(this).find(".iconfont").removeClass("act");
  525. }
  526. myChart1.resize();
  527. myChart2.resize();
  528. myChart3.resize();
  529. })
  530. </script>
  531. </body>
  532. </html>