Cargo.html 28 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900
  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 src="../js/pako.js"></script>
  22. <script type="text/javascript">
  23. document.write('<script src="../js/yz/init.js?id='+(new Date().getTime())+'" type="text/javascript" charset="utf-8"><\/script>');
  24. document.write('<script src="../js/yz/shipLi.js?id='+(new Date().getTime())+'" type="text/javascript" charset="utf-8"><\/script>');
  25. document.write('<script src="../js/yz/defailt.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/configuration.js?id='+(new Date().getTime())+'" type="text/javascript" charset="utf-8"><\/script>');
  28. </script>
  29. <script>
  30. checkLogin();
  31. </script>
  32. </head>
  33. <style type="text/css">
  34. * {
  35. margin: 0;
  36. padding: 0;
  37. box-sizing: border-box;
  38. }
  39. body {
  40. height: 100vh;
  41. color: #94d1ff;
  42. font-size: 0.9vw;
  43. overflow: auto;
  44. background-color: #040d32;
  45. }
  46. .yz_title+div{
  47. height: calc(100% - 35px);
  48. }
  49. .Liquid{
  50. font-size: 0.7vw;
  51. }
  52. .Liquid>div{
  53. flex: 1;
  54. display: flex;
  55. flex-direction: column;
  56. align-items: center;
  57. }
  58. .Liquid .liquid_val span{
  59. font-size: 1vw;
  60. color: #fbbd08;
  61. font-weight: bold;
  62. }
  63. .Liquid .liquid_val>div{
  64. margin-top: 10px;
  65. text-align: center;
  66. width: 50%;
  67. }
  68. .beng_box{
  69. box-sizing: border-box;
  70. width: 100%;
  71. padding:6px;
  72. font-size: 0.8vw;
  73. margin-bottom: 10px;
  74. background-color: #082041;
  75. }
  76. .beng_box>div:last-child{
  77. text-align: center;
  78. margin-top: 4px;
  79. font-size: 0.9vw;
  80. }
  81. .beng_box span{
  82. letter-spacing:4px;
  83. font-size: 1.8vw;
  84. font-weight: bold;
  85. color: #fbbd08;
  86. margin-right: 6px;
  87. }
  88. .Range{
  89. display: flex;
  90. flex-direction: column;
  91. justify-content: space-between;
  92. align-items: flex-end;
  93. padding-top: 6px;
  94. padding:0 12px;
  95. height: 100px;
  96. color: rgba(255,255,255,0.6);
  97. }
  98. .Range i{
  99. line-height: 10px;
  100. vertical-align: middle;
  101. font-size: 2.4vw;
  102. }
  103. .Liquidli{
  104. position: relative;
  105. width: 52px;
  106. height: 100px;
  107. border-radius: 3px;
  108. box-shadow: 0 0 4px 2px #6a6a6a;
  109. background-color: #ccc;
  110. }
  111. .Liquidli>div{
  112. position: absolute;
  113. bottom: 0;
  114. left: 0;
  115. width: 100%;
  116. height: 0%;
  117. border-radius: 3px;
  118. background-color: #48d800;
  119. }
  120. .Liquidli>span{
  121. position: absolute;
  122. bottom:0;
  123. left: 50%;
  124. transform: translate(-50%,0);
  125. color: #000;
  126. font-size: 1vw;
  127. font-weight: bold;
  128. }
  129. .Liquidli>span>i{
  130. font-size: 0.7vw;
  131. }
  132. @media screen and (max-width: 1000px) {
  133. .openYY.yz_clm15>div>div {
  134. min-height: 580px;
  135. }
  136. .openYY .yz_clm12 {
  137. height: 100%;
  138. }
  139. .openBC .yz_clm15{
  140. height: 200% !important;
  141. }
  142. .openBC .yz_clm3{
  143. height: 25% !important;
  144. }
  145. .openBC .yz_clm15.openCX{
  146. height: 580px !important;
  147. }
  148. }
  149. .liQuid{
  150. line-height: 36px;
  151. margin-top: 62px;
  152. text-align: center;
  153. writing-mode:tb-rl;
  154. font-size: 1vw;
  155. font-weight: bold;
  156. color: #5793f3;
  157. }
  158. .openBC .yz_clm3{
  159. height: 100%;
  160. }
  161. .li_shui{
  162. width: 48px;
  163. height: 86%;
  164. background-color: #005eb6;
  165. border: 2px solid #fff;
  166. background-image: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 0%, #040D32 1%);
  167. }
  168. ._temp{
  169. display: flex;
  170. align-items: flex-end;
  171. justify-content: center;
  172. padding-bottom: 5px;
  173. font-size: 0.7vw;
  174. height: 86%;
  175. }
  176. ._temp+div{
  177. font-size: 0.7vw;
  178. }
  179. ._unit{
  180. display: flex;
  181. flex-direction: column;
  182. justify-content: space-between;
  183. align-items: flex-end;
  184. margin-right: 5px;
  185. color: #fff;
  186. height: 86%;
  187. }
  188. </style>
  189. <body>
  190. <div style="height:60px;padding:7.5px 7.5px 0;position: relative;">
  191. <div class="tabUl">
  192. <div data-open="1" class="act_this">货舱压力、液位、温度</div>
  193. <div data-open="2">泵舱</div>
  194. </div>
  195. <div style="position: absolute;bottom: 20px;right:20px;color: #fff;">
  196. 最后更新时间:<span id="endTime"></span>
  197. </div>
  198. </div>
  199. <div class="yz_clm15 openYY" style="height: calc(100% - 60px);">
  200. <div class="yz_clm12">
  201. <div class="Sense">
  202. <div class="yz_title">左舱</div>
  203. <div class="flex Liquid view_l flex-wrap">
  204. </div>
  205. </div>
  206. </div>
  207. <div class="yz_clm12">
  208. <div class="Sense">
  209. <div class="yz_title">右舱</div>
  210. <div class="flex Liquid view_r flex-wrap">
  211. </div>
  212. </div>
  213. </div>
  214. </div>
  215. <div class="openBC" style="display: none;height: calc(100% - 60px);">
  216. <div class="yz_clm15 openRQ" style="height:50%;">
  217. <div class="yz_clm3">
  218. <div class="Sense">
  219. <div class="yz_title yogName">液货总管压力</div>
  220. <div class="flex text-center">
  221. <div class="flex-sub">
  222. <div id="myChart9" style="height: calc(100% - 45px);"></div>
  223. <div><span class="yogName">1#液货:</span><span class="Num" id="yhyl_1">0</span> <span>MPa</span></div>
  224. </div>
  225. <div class="flex-sub">
  226. <div id="myChart10" style="height: calc(100% - 45px);"></div>
  227. <div><span class="yogName">2#液货:</span><span class="Num" id="yhyl_2">0</span> <span>MPa</span></div>
  228. </div>
  229. </div>
  230. </div>
  231. </div>
  232. <div class="yz_clm3">
  233. <div class="Sense">
  234. <div class="yz_title wTempName">可燃气体</div>
  235. <div style="height: calc(100% - 35px);padding:0 10px;">
  236. <div class="flex align-center" style="height: 16.6%;">
  237. <div style="width:94px;" class="wTempName">泵舱底左</div>
  238. <div class="_Num wTemp">0</div><span class="wTempUnit">%LEL</span>
  239. </div>
  240. <div class="flex align-center" style="height: 16.6%;">
  241. <div style="width:94px;" class="wTempName">泵舱底右</div>
  242. <div class="_Num wTemp">0</div><span class="wTempUnit">%LEL</span>
  243. </div>
  244. <div class="flex align-center" style="height: 16.6%;">
  245. <div style="width:94px;" class="wTempName">泵舱上甲板</div>
  246. <div class="_Num wTemp">0</div><span class="wTempUnit">%LEL</span>
  247. </div>
  248. <div class="flex align-center" style="height: 16.6%;">
  249. <div style="width:94px;" class="wTempName">空调通风口</div>
  250. <div class="_Num wTemp">0</div><span class="wTempUnit">%LEL</span>
  251. </div>
  252. <div class="flex align-center" style="height: 16.6%;">
  253. <div style="width:94px;" class="wTempName">尾楼甲板左</div>
  254. <div class="_Num wTemp">0</div><span class="wTempUnit">%LEL</span>
  255. </div>
  256. <div class="flex align-center" style="height: 16.6%;">
  257. <div style="width:94px;" class="wTempName">尾楼甲板右</div>
  258. <div class="_Num wTemp">0</div><span class="wTempUnit">%LEL</span>
  259. </div>
  260. </div>
  261. </div>
  262. </div>
  263. <div class="yz_clm3">
  264. <div class="Sense">
  265. <div class="yz_title changeName">货油泵前轴承温度</div>
  266. <div id="myChart11">
  267. </div>
  268. </div>
  269. </div>
  270. <div class="yz_clm3">
  271. <div class="Sense">
  272. <div class="yz_title changeName">货油泵后轴承温度</div>
  273. <div id="myChart12">
  274. </div>
  275. </div>
  276. </div>
  277. </div>
  278. <div class="yz_clm15" style="height:50%;">
  279. <div class="yz_clm3">
  280. <div class="Sense">
  281. <div class="yz_title">蒸气回收总管压力</div>
  282. <div class="flex text-center">
  283. <div class="flex-sub">
  284. <div id="myChart13" style="height: calc(100% - 45px);"></div>
  285. <div>1#蒸气:<span class="Num" id="zqyl_1">0</span> <span>MPa</span></div>
  286. </div>
  287. <div class="flex-sub">
  288. <div id="myChart14" style="height: calc(100% - 45px);"></div>
  289. <div>2#蒸气:<span class="Num" id="zqyl_2">0</span> <span>MPa</span></div>
  290. </div>
  291. </div>
  292. </div>
  293. </div>
  294. <div class="yz_clm3 patternNo">
  295. <div class="Sense">
  296. <div class="yz_title">泵进口压力</div>
  297. <div style="height: calc(100% - 35px);" class="padding-lr">
  298. <div class="flex justify-between" id="OutIn">
  299. </div>
  300. <div class="flex" id="changeOI">
  301. <div class="flex text-white margin-right-lg" onclick="changeSta(0)">
  302. <div class="check_"></div><span style="line-height: 14px;">出口压力</span>
  303. </div>
  304. <div class="flex text-white" onclick="changeSta(1)">
  305. <div class="check_"></div><span style="line-height: 14px;">进口压力</span>
  306. </div>
  307. </div>
  308. </div>
  309. </div>
  310. </div>
  311. <div class="yz_clm3 openRQ">
  312. <div class="Sense">
  313. <div class="yz_title changeName">货油泵舱壁轴填料函温度</div>
  314. <div id="myChart15">
  315. </div>
  316. </div>
  317. </div>
  318. <div class="yz_clm3 openCCW">
  319. <div class="Sense">
  320. <div class="yz_title">穿舱件温度</div>
  321. <div style="height: calc(100% - 35px);" class="text-center">
  322. <div class="flex" style="height: 50%;">
  323. <div class="flex-sub">
  324. <div class="_temp">
  325. <div class="_unit">
  326. <div>100</div>
  327. <div>75</div>
  328. <div>50</div>
  329. <div>25</div>
  330. <div>0</div>
  331. </div>
  332. <div class="li_shui" id="ccy_wd1_v"></div>
  333. </div>
  334. <div>1#压载泵:<span class="text-yellow text-bold text-lg" id="ccy_wd1_h">0</span>℃</div>
  335. </div>
  336. <div class="flex-sub">
  337. <div class="_temp">
  338. <div class="_unit">
  339. <div>100</div>
  340. <div>75</div>
  341. <div>50</div>
  342. <div>25</div>
  343. <div>0</div>
  344. </div>
  345. <div class="li_shui" id="ccx_wd1_v"></div>
  346. </div>
  347. <div>1#洗舱泵:<span class="text-yellow text-bold text-lg" id="ccx_wd1_h">0</span>℃</div>
  348. </div>
  349. </div>
  350. <div class="flex" style="height: 50%;">
  351. <div class="flex-sub">
  352. <div class="_temp">
  353. <div class="_unit">
  354. <div>100</div>
  355. <div>75</div>
  356. <div>50</div>
  357. <div>25</div>
  358. <div>0</div>
  359. </div>
  360. <div class="li_shui" id="ccy_wd2_v"></div>
  361. </div>
  362. <div>2#压载泵:<span class="text-yellow text-bold text-lg" id="ccy_wd2_h">0</span>℃</div>
  363. </div>
  364. <div class="flex-sub">
  365. <div class="_temp">
  366. <div class="_unit">
  367. <div>100</div>
  368. <div>75</div>
  369. <div>50</div>
  370. <div>25</div>
  371. <div>0</div>
  372. </div>
  373. <div class="li_shui" id="ccx_wd2_v"></div>
  374. </div>
  375. <div>2#洗舱泵:<span class="text-yellow text-bold text-lg" id="ccx_wd2_h">0</span>℃</div>
  376. </div>
  377. </div>
  378. </div>
  379. </div>
  380. </div>
  381. <div class="yz_clm3">
  382. <div class="Sense">
  383. <div class="yz_title chartT">货油泵泵壳温度</div>
  384. <div id="myChart16">
  385. </div>
  386. </div>
  387. </div>
  388. <div class="yz_clm6 patternHas" style="height: 100%;">
  389. <div class="Sense">
  390. <div class="yz_title">清洗泵-综合报警</div>
  391. <div style="height: calc(100% - 35px);" class="text-center">
  392. <ul class="switch_CE switch_li">
  393. </ul>
  394. </div>
  395. </div>
  396. </div>
  397. </div>
  398. <div class="yz_clm15 openCX" style="height:50%;">
  399. <div class="yz_clm12" style="height: 100%;">
  400. <div class="Sense flex">
  401. <div style="width: 40px;">
  402. <div class="liQuid">左液位</div>
  403. <div class="liQuid">右液位</div>
  404. </div>
  405. <div style="width: calc(100% - 40px);" class="flex Liquid view_be flex-wrap">
  406. </div>
  407. </div>
  408. </div>
  409. </div>
  410. </div>
  411. </body>
  412. <script>
  413. var allObj = {};
  414. var allKey = {};
  415. var nowSn = null,timeId = null,nowAjax = 1;
  416. var _tempKey = {
  417. "z2P":"ccy_wd1_",
  418. "z2Q":"ccy_wd2_",
  419. "z2R":"ccx_wd1_",
  420. "z2S":"ccx_wd2_"
  421. };
  422. var smallSre = false;
  423. var myChart9 = echarts.init(document.getElementById('myChart9'));
  424. var myChart10 = echarts.init(document.getElementById('myChart10'));
  425. var myChart11 = echarts.init(document.getElementById('myChart11'));
  426. var myChart12 = echarts.init(document.getElementById('myChart12'));
  427. var myChart13 = echarts.init(document.getElementById('myChart13'));
  428. var myChart14 = echarts.init(document.getElementById('myChart14'));
  429. var myChart15 = echarts.init(document.getElementById('myChart15'));
  430. var myChart16 = echarts.init(document.getElementById('myChart16'));
  431. function setoption1(dataList,xData,unit){
  432. option = {
  433. color: ['#3398DB'],
  434. tooltip: {
  435. trigger: 'axis',
  436. axisPointer: {
  437. type: 'cross',
  438. crossStyle: {
  439. color: '#999'
  440. }
  441. }
  442. },
  443. grid: {
  444. top: '8%',
  445. left: '0%',
  446. right: '0%',
  447. bottom: '0%',
  448. containLabel: true
  449. },
  450. xAxis: [{
  451. type: 'category',
  452. data: xData != undefined?xData: ['1#','2#', '3#', '4#', '5#',nowSn == "381001400"?'污液舱':'6#'],
  453. axisTick: {
  454. alignWithLabel: true
  455. },
  456. axisLine: {
  457. lineStyle: {
  458. color: '#fff',
  459. }
  460. },
  461. axisLabel: {
  462. textStyle: {
  463. fontSize:10,
  464. }
  465. }
  466. }
  467. ],
  468. yAxis: [{
  469. type: 'value',
  470. max: 60,
  471. axisLine: {
  472. show: false
  473. },
  474. splitLine: {
  475. lineStyle: {
  476. color: ['rgba(132, 132, 132, 0.5)']
  477. }
  478. },
  479. axisLabel:{
  480. formatter: function(){
  481. return "";
  482. }
  483. }
  484. }
  485. ],
  486. series: [{
  487. name: '实时数据',
  488. type: 'bar',
  489. barWidth: '20',
  490. itemStyle:{
  491. normal: {
  492. label:{
  493. color:'#fff'
  494. },
  495. color: new echarts.graphic.LinearGradient(
  496. 0, 0, 0, 1,
  497. [
  498. {offset: 0, color:'#fe9a1a'},
  499. {offset: 1, color:'#fe421b'}
  500. ]
  501. )
  502. }
  503. },
  504. label: {
  505. normal: {
  506. show: true,
  507. position: 'top',
  508. color:'#fff',
  509. formatter: function (params) {
  510. var index = params.dataIndex;
  511. return dataList[index]+((unit != undefined?unit:nowSn == "381001400"?"℃":(nowSn == "480000618"?'kPa':'MPa')))
  512. }
  513. }
  514. },
  515. data:dataList
  516. }
  517. ]
  518. };
  519. return option;
  520. }
  521. function setoption2(data,_txt){
  522. data = (data == undefined)?0:data;
  523. // data = data>100?(data/1000).toFixed(2):data;
  524. $("#"+_txt).text(data);
  525. $("#"+_txt+"+span").text((nowSn == "480000618"?'kPa':'MPa'));
  526. option = {
  527. graphic: [{
  528. type: 'text',
  529. left: 'center',
  530. top: 'center',
  531. z: 10,
  532. style: {
  533. fill: '#fff',
  534. text: data + (nowSn == "480000618"?'kPa':'MPa'),
  535. fontSize: smallSre?10:14,
  536. }
  537. }],
  538. series: [{
  539. name: '实时数据',
  540. type: 'pie',
  541. center:["50%", "50%"],
  542. radius: ['50%', '70%'],
  543. avoidLabelOverlap: false,
  544. hoverAnimation: false,
  545. label: {
  546. normal: {
  547. show: false,
  548. position: 'center',
  549. textStyle: {
  550. fontSize: 20,
  551. color: '#d9d9d9'
  552. }
  553. }
  554. },
  555. data: [{
  556. value: isNaN(Number(data,10))?0:data,
  557. name: data + (nowSn == "480000618"?'kPa':'MPa')
  558. },{
  559. value: 5 - parseFloat(isNaN(Number(data,10))?0:data),
  560. name: ''
  561. }
  562. ]
  563. }],
  564. color: ['#FFF076','#52989F']
  565. };
  566. return option;
  567. }
  568. window.addEventListener('message',(data)=>{
  569. initF();
  570. })
  571. $(document).ready(function() {
  572. smallSre = window.innerHeight < 650;
  573. initF();
  574. })
  575. function initF(){
  576. nowSn = localStorage.getItem("shipSn");
  577. allKey = Config((nowSn == "381001400"||nowSn == "480000618"?"381001400":"382001400"),nowSn)["Cargo"];
  578. $(".openRQ").css("display",allKey["disp"][0]);
  579. $(".openCX").css("display",allKey["disp"][1]);
  580. if(nowSn == "480000001"){
  581. $(".patternHas").css("display","block");
  582. $(".patternNo").css("display","none");
  583. $(".openCCW").css("display","none");
  584. }else{
  585. $(".patternNo").css("display","block");
  586. $(".patternHas").css("display","none");
  587. $(".openCCW").css("display",allKey["disp"][1]);
  588. }
  589. firstData(0);
  590. }
  591. $(window).resize(function(){
  592. smallSre = window.innerHeight < 650;
  593. myChart9.resize();
  594. myChart10.resize();
  595. myChart11.resize();
  596. myChart12.resize();
  597. myChart13.resize();
  598. myChart14.resize();
  599. myChart15.resize();
  600. myChart16.resize();
  601. })
  602. function firstData(_num){
  603. if(_num == 0){yzkj.load("load1")};
  604. setTimeout(()=>{
  605. deviceList(function acb(_data){
  606. nowSn = localStorage.getItem("shipSn");
  607. allObj = _data;
  608. $("#endTime").text(allObj["time"])
  609. initData(allKey["swKey"]["left"],"view_l");
  610. initData(allKey["swKey"]["right"],"view_r");
  611. if(allKey["swKey"]["viewBe"] != undefined){
  612. initBeng(allKey["swKey"]["viewBe"]);
  613. }
  614. setSwiCE(allObj);
  615. whoShow(nowAjax);
  616. if(_num == 0){yzkj.closeLoad("load1");}
  617. if(_data.mmsi==undefined){
  618. setTimeout(()=>{
  619. firstData(1);
  620. },60*1000)
  621. }
  622. })
  623. },100)
  624. }
  625. // 格局报警
  626. function setSwiCE(_obj){
  627. if(nowSn == "480000001"){
  628. let swiKey = allKey["swKey"]["switch_CE"];
  629. for(var key in swiKey){
  630. let _arr = swiKey[key];
  631. let _str = "";
  632. for(var subkey in _arr){
  633. let _ab = _arr[subkey].split(",");
  634. let _cd = subkey.split("_");
  635. let _sta = '';
  636. if(_obj[_cd[0]] != undefined){
  637. let _c = _obj[_cd[0]].charAt(parseInt(_cd[1]));
  638. if(_ab[1] == 2){
  639. _sta = _c == 0?'red':'';
  640. }else{
  641. if(_ab[1]==1){
  642. _sta = _c == 1?'green':'';
  643. }else{
  644. _sta = _c == 1?'red':'';
  645. }
  646. }
  647. }else{
  648. _sta = '';
  649. }
  650. _str += '<li>'+
  651. '<div class="iconfont icon-cloud-state" style="color:'+_sta+'"></div>'+
  652. '<div>'+_ab[0]+'</div>'+
  653. '</li>';
  654. }
  655. $(".switch_CE").html(_str);
  656. }
  657. }
  658. }
  659. // 热情液位
  660. function initData(_obj,txt){
  661. let _str = "";
  662. for(var i=0;i<_obj.length;i++){
  663. let _ab = _obj[i];
  664. // 液位
  665. // let _e = allObj[_ab[0]] == undefined? 0 : (nowSn == "480000618"?(parseFloat(allObj[_ab[0]])/100).toFixed(2):allObj[_ab[0]]);
  666. let _e = allObj[_ab[0]] == undefined? 0 : allObj[_ab[0]];
  667. let _heg = parseFloat((parseFloat(_e)/9)*100)>100?100:parseFloat((parseFloat(_e)/9)*100);
  668. // let _heg = parseFloat((parseFloat(_e)/(nowSn == "480000618"?5:9))*100)>100?100:parseFloat((parseFloat(_e)/(nowSn == "480000618"?5:9))*100);
  669. let _spa = _heg<19?0:"calc("+_heg+"% - 24px)";
  670. let mol = null;
  671. if(_ab[7] != undefined){
  672. mol = isNaN(Number(_e,10))?"---":(_e * parseFloat(_ab[7])).toFixed(2);
  673. }else{
  674. mol = null;
  675. }
  676. _str += `<div>
  677. <div style="font-size: 0.9vw;">${_ab[6]}${mol != null?'(<span class="text-yellow text-bold">'+mol+'</span> m³)':''}</div>
  678. <div class="margin-top-sm flex">
  679. <div class="Range" style="height: ${smallSre?'80px':'100px'}">
  680. <span>9</span>
  681. <span>6.75</span>
  682. <span>5.5</span>
  683. <span>2.25</span>
  684. <span>0</span>
  685. </div>
  686. <div class="Liquidli" style="height: ${smallSre?'80px':'100px'}">
  687. <div style="height:${_heg}%;"></div>
  688. <span style="bottom:${_spa};">${_e}<i>m</i></span>
  689. </div>
  690. ${ nowSn == "480000001"?
  691. '':`<div class="Range" style="align-items: flex-start;height: ${smallSre?'80px':'100px'}">
  692. ${getDrog(_ab[5])}
  693. </div>`
  694. }
  695. </div>
  696. <div class="liquid_val flex flex-wrap">
  697. <div style="display:${nowSn == "480000618"?'none':'block'}"><div><span>${allObj[_ab[1]] == undefined? 0 : allObj[_ab[1]]}</span> kPa</div><div>压力:</div></div>
  698. <div><div><span>${allObj[_ab[2]] == undefined? 0 : allObj[_ab[2]]}</span> ℃</div><div>上部温度</div></div>
  699. <div><div><span>${allObj[_ab[4]] == undefined? 0 : ((allObj[_ab[4]]+"").indexOf(".")==-1?0:allObj[_ab[4]])}</span> ℃</div><div>中部温度</div></div>
  700. <div><div><span>${allObj[_ab[3]] == undefined? 0 : allObj[_ab[3]]}</span> ℃</div><div>底部温度</div></div>
  701. </div>
  702. </div>`
  703. }
  704. $("."+txt).html(_str);
  705. }
  706. function initBeng(_obj){
  707. let _str = "";
  708. for(var i=0;i<_obj.length;i++){
  709. let _ab = _obj[i];
  710. // 液位
  711. let _e = allObj[_ab[0]] == undefined? 0 : allObj[_ab[0]];
  712. let _heg = parseInt((parseFloat(_e)/8)*100)>100?100:parseInt((parseFloat(_e)/8)*100);
  713. let _spa = _heg<19?0:"calc("+_heg+"% - 24px)";
  714. let _e1 = allObj[_ab[1]] == undefined? 0 : allObj[_ab[1]];
  715. let _heg1 = parseInt((parseFloat(_e1)/8)*100)>100?100:parseInt((parseFloat(_e1)/8)*100);
  716. let _spa1 = _heg1<19?0:"calc("+_heg1+"% - 24px)";
  717. _str += `<div>
  718. <div style="font-size: 0.9vw;">${_ab[2]}</div>
  719. <div class="margin-top-sm flex align-center">
  720. <div class="Range" style="height: ${smallSre?'70px':'100px'}">
  721. <span>8</span>
  722. <span>6</span>
  723. <span>4</span>
  724. <span>2</span>
  725. <span>0</span>
  726. </div>
  727. <div class="Liquidli" style="height: ${smallSre?'70px':'100px'}">
  728. <div style="height:${_heg}%;"></div>
  729. <span style="bottom:${_spa};">${_e}<i>m</i></span>
  730. </div>
  731. ${ nowSn == "480000001"?
  732. '':`<div class="text-center margin-left-sm">
  733. 容量:<br><span class="text-yellow text-bold">${allObj[_ab[3]] == undefined? 0 : allObj[_ab[3]]}</span>m³
  734. </div>`
  735. }
  736. </div>
  737. <div class="margin-top-lg flex align-center">
  738. <div class="Range" style="height: ${smallSre?'70px':'100px'}">
  739. <span>8</span>
  740. <span>6</span>
  741. <span>4</span>
  742. <span>2</span>
  743. <span>0</span>
  744. </div>
  745. <div class="Liquidli" style="height: ${smallSre?'70px':'100px'}">
  746. <div style="height:${_heg1}%;"></div>
  747. <span style="bottom:${_spa1};">${_e1}<i>m</i></span>
  748. </div>
  749. ${ nowSn == "480000001"?
  750. '':`<div class="text-center margin-left-sm">
  751. 容量:<br><span class="text-yellow text-bold">${allObj[_ab[4]] == undefined? 0 : allObj[_ab[4]]}</span>m³
  752. </div>`
  753. }
  754. </div>
  755. </div>`
  756. }
  757. $(".view_be").html(_str);
  758. }
  759. function getDrog(_key){
  760. let _str = "";
  761. for(var i=0;i<_key.length;i++){
  762. if(_key[i] == ""){
  763. _str += "<span style='opacity:0;'>高</span>";
  764. }else{
  765. let _a = allObj[_key[i].split("-")[0]] == undefined ?0 : allObj[_key[i].split("-")[0]].charAt(parseInt(_key[i].split("-")[1]));
  766. let _b = i == 0?'高高':(i==1?'高位':(i==3?'高':'低'));
  767. _str += `<span><i class="${parseInt(_a) > 0?'text-red':''}">●</i>${_b}</span>`;
  768. }
  769. }
  770. return _str;
  771. }
  772. function setTemp(){
  773. for(var key in _tempKey){
  774. let _acb = _tempKey[key];
  775. let _sta = allObj[key] != undefined&&allObj[key] != null&&allObj[key] != "N"?parseFloat(allObj[key]):0;
  776. _sta = _sta == -3200 ?0:_sta;
  777. $("#"+_acb+"h").text(isNaN(Number(_sta,10))?"---":_sta);
  778. let _h = parseFloat(_sta / 100).toFixed(2);
  779. let _nh = (_h > 1?1:_h)*100;
  780. $("#"+_acb+"v").css("backgroundImage","linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) "+_nh+"%, #040D32 1%)");
  781. }
  782. }
  783. $(".tabUl div").on("click","",function(){
  784. $(this).addClass("act_this").siblings().removeClass("act_this");
  785. let _id = $(this).data("open");
  786. nowAjax = _id;
  787. whoShow(_id);
  788. })
  789. function setBengData(_in){
  790. let _str = "";
  791. let _arr = allKey["outIn"][_in];
  792. for(var i=0;i<_arr.length;i++){
  793. _str += '<div style="width: 47%;">';
  794. let _str1 = "",_acb = _arr[i];
  795. for(var j=0;j<_acb.length;j++){
  796. let _nbv = _acb[j].split("_");
  797. _str1 +=`<div class="beng_box">
  798. <div>${_nbv[0]}</div>
  799. <div><span>${allObj[_nbv[1]] == undefined ? 0 : allObj[_nbv[1]]}</span>${(nowSn == "480000618"?'kPa':'MPa')}</div>
  800. </div>`;
  801. }
  802. _str += _str1+'</div>';
  803. }
  804. $("#OutIn").html(_str);
  805. }
  806. function changeSta(num){
  807. if(num==0){
  808. setBengData("in");
  809. }else if(num==1){
  810. setBengData("out");
  811. }
  812. $(".check_").removeClass("check_act");
  813. $(".check_").eq(num).addClass("check_act");
  814. }
  815. function whoShow(_ind){
  816. if(_ind == 1){
  817. $(".openYY").css("display","flex");
  818. $(".openBC").css("display","none");
  819. }else if(_ind == 2){
  820. $(".openYY").css("display","none");
  821. $(".openWD").css("display","none");
  822. $(".openBC").css("display","block");
  823. changeSta(1);
  824. setTemp();
  825. myChart13.setOption(setoption2(allObj[allKey["anKey"][0]],"zqyl_1"));
  826. myChart14.setOption(setoption2(allObj[allKey["anKey"][1]],"zqyl_2"));
  827. let _kTemp = [];
  828. if(nowSn == "480000618"){
  829. _kTemp = [["泵壳温度","轴承温度","隔舱传动装置填料函温度","none","污液柜温度","℃"],
  830. ["左-上温度","左-中温度","左-下温度","右-上温度","右-中温度","右-下温度"],
  831. ["0hD1","0hE1","0hF1","0hH1","0hI1","0hJ1"],
  832. ["污液柜压力","左:","右:"]];
  833. myChart9.setOption(setoption2(allObj["0hv"],"yhyl_1"));
  834. myChart10.setOption(setoption2(allObj["0hw"],"yhyl_2"));
  835. myChart11.setOption(setoption1([allObj["0gT1"],allObj["0gX1"],allObj["0ga"]],["洗舱泵","1#压载泵","2#压载泵"],"℃"));
  836. myChart12.setOption(setoption1([allObj["0gU1"],allObj["0gV1"],allObj["0gZ1"],allObj["0gc"]],["洗舱泵前","洗舱泵后","1#压载泵","2#压载泵"],"℃"));
  837. myChart15.setOption(setoption1([allObj["0gW1"],allObj["0gY1"],allObj["0gb"]],["洗舱泵","1#压载泵","2#压载泵"],"℃"));
  838. }else{
  839. _kTemp = [["货油泵前轴承温度","货油泵后轴承温度","货油泵舱壁轴填料函温度","flex","可燃气体","%LEL"],
  840. ["泵舱底左","泵舱底右","泵舱上甲板","空调通风口","尾楼甲板左","尾楼甲板右"],
  841. ["z1d","z1e","z1f","z1g","z1h","z1i"],
  842. ["液货总管压力","1#液货:","2#液货:"]];
  843. myChart9.setOption(setoption2(allObj["z1Z1"] == undefined ? 0 : allObj["z1Z1"],"yhyl_1"));
  844. myChart10.setOption(setoption2(allObj["z1a"] == undefined ? 0 : allObj["z1a"],"yhyl_2"));
  845. myChart11.setOption(setoption1([allObj["z0y"],allObj["z12"],allObj["z16"],allObj["z1A1"],allObj["z1E1"],allObj["z1I1"]]));
  846. myChart12.setOption(setoption1([allObj["z0z"],allObj["z13"],allObj["z17"],allObj["z1B1"],allObj["z1F1"],allObj["z1J1"]]));
  847. myChart15.setOption(setoption1([allObj["z10"],allObj["z14"],allObj["z18"],allObj["z1C1"],allObj["z1G1"],allObj["z1K1"]]));
  848. }
  849. checkTemp(_kTemp);
  850. let _xbn = allKey["Chart"]["key"];
  851. $(".chartT").text(allKey["Chart"]["name"]);
  852. myChart16.setOption(setoption1([allObj[_xbn[0]],allObj[_xbn[1]],allObj[_xbn[2]],allObj[_xbn[3]],allObj[_xbn[4]],allObj[_xbn[5]]]));
  853. myChart9.resize();
  854. myChart10.resize();
  855. myChart11.resize();
  856. myChart12.resize();
  857. myChart13.resize();
  858. myChart14.resize();
  859. myChart15.resize();
  860. myChart16.resize();
  861. }
  862. }
  863. function checkTemp(_obj){
  864. $(".changeName").eq(0).text(_obj[0][0]);
  865. $(".changeName").eq(1).text(_obj[0][1]);
  866. $(".changeName").eq(2).text(_obj[0][2]);
  867. $("#changeOI").css("display",_obj[0][3]);
  868. $(".wTempName").eq(0).text(_obj[0][4]);
  869. $(".wTempUnit").text(_obj[0][5]);
  870. $(".yogName").eq(0).text(_obj[3][0]);
  871. $(".yogName").eq(1).text(_obj[3][1]);
  872. $(".yogName").eq(2).text(_obj[3][2]);
  873. for(let i=0;i<_obj[2].length;i++){
  874. $(".wTemp").eq(i).text(allObj[_obj[2][i]] == undefined || allObj[_obj[2][i]] == "00000000" ? 0 : allObj[_obj[2][i]]);
  875. $(".wTempName").eq(i+1).text(_obj[1][i]);
  876. }
  877. }
  878. </script>
  879. </html>