ReportAng.html 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659
  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 type="text/javascript">
  22. document.write('<script src="../../js/yz/ajax.js?id='+(new Date().getTime())+'" type="text/javascript" charset="utf-8"><\/script>');
  23. checkLogin();
  24. </script>
  25. </head>
  26. <style type="text/css">
  27. *{
  28. margin: 0;
  29. padding: 0;
  30. }
  31. body {
  32. color: #fff;
  33. height: 100%;
  34. background-color: #103151;
  35. }
  36. div,td {
  37. box-sizing: border-box;
  38. }
  39. .bg-theme-son{
  40. display: flex;
  41. align-items: center;
  42. justify-content: space-between;
  43. padding: 5px 10px;
  44. color: #8799a3;
  45. }
  46. .bg-theme-son .iconfont.act{
  47. transform:rotate(90deg);
  48. transition:transform 0.3s linear;
  49. }
  50. .type_li{
  51. display: flex;
  52. justify-content: center;
  53. padding: 10px;
  54. }
  55. .drog_li{
  56. display: flex;
  57. align-items: center;
  58. flex-wrap: wrap;
  59. padding:0 10px 10px;
  60. color: #aaa;
  61. font-size: 11px;
  62. }
  63. .drog_li>div{
  64. width: 160px;
  65. margin-top: 15px;
  66. }
  67. .myChart3>div,.myChart14>div,.myChart15>div{
  68. width: 80px;
  69. }
  70. .myChart12>div,.myChart13>div,.myChart2>div{
  71. width: 105px;
  72. }
  73. .drog_act {
  74. position: relative;
  75. }
  76. .act_dro {
  77. cursor: pointer;
  78. width: 15px;
  79. height: 15px;
  80. border-radius: 50%;
  81. margin-right: 4px;
  82. background-color: #4a95df;
  83. }
  84. .drog_act::after {
  85. content: "";
  86. position: absolute;
  87. left: 3px;
  88. top: 3.5px;
  89. width: 50%;
  90. height: 26%;
  91. border: 2px solid #fff;
  92. border-radius: 1px;
  93. border-top: none;
  94. border-right: none;
  95. background: transparent;
  96. transform: rotate(-45deg);
  97. }
  98. ._day{
  99. height: 28px;
  100. font-size: 14px;
  101. line-height: 28px;
  102. width: 60px;
  103. cursor: pointer;
  104. border-radius: 4px;
  105. text-align: center;
  106. background-color: #5793f3;
  107. }
  108. </style>
  109. <script type="text/javascript">
  110. </script>
  111. <body>
  112. <div class="topParen">
  113. <div class="topBox">
  114. <div>数据报表</div>
  115. <i class="iconfont icon-left" onclick="javascript:history.back(-1);"></i>
  116. </div>
  117. <div class="tabli">
  118. <div class="yz_this" name="0">货控室</div>
  119. <div name="1">主机</div>
  120. <div name="2">发电机</div>
  121. </div>
  122. <div class="search_ flex justify-center align-center">
  123. <div class="_day" data-num="-1">前一天</div>
  124. <input type="date" class="startDate text-center margin-lr" style="width: 140px;padding: 0;"/>
  125. <div class="_day" data-num="1">后一天</div>
  126. </div>
  127. <div class="ReportC">
  128. <div style="border: 1px solid rgba(125,125,125,0.4);margin: 7px;">
  129. <div class="bg-theme-son">
  130. <span>左、右液货舱</span>
  131. <span class="iconfont icon-right act"></span>
  132. </div>
  133. <div>
  134. <div class="type_li carGoYH" name="carGoYH">
  135. <div class="flex text-grey" name="yeHuo1">
  136. <div class="check_ check_act"></div><span style="line-height: 14px;">1#</span>
  137. </div>
  138. <div class="flex text-grey margin-lr-lg" name="yeHuo2">
  139. <div class="check_"></div><span style="line-height: 14px;">2#</span>
  140. </div>
  141. <div class="flex text-grey" name="yeHuo3">
  142. <div class="check_"></div><span style="line-height: 14px;">3#</span>
  143. </div>
  144. <div class="flex text-grey margin-lr-lg" name="yeHuo4">
  145. <div class="check_"></div><span style="line-height: 14px;">4#</span>
  146. </div>
  147. <div class="flex text-grey" name="yeHuo5">
  148. <div class="check_"></div><span style="line-height: 14px;">5#</span>
  149. </div>
  150. <div class="flex text-grey margin-left-sm" name="yeHuo6">
  151. <div class="check_"></div><span style="line-height: 14px;">污液舱</span>
  152. </div>
  153. </div>
  154. <div style="height: 200px;">
  155. <div id="myChart2" style="height:100%;"></div>
  156. </div>
  157. <div class="drog_li myChart2" name="myChart2">
  158. </div>
  159. </div>
  160. </div>
  161. <div style="border: 1px solid rgba(125,125,125,0.4);margin: 7px;">
  162. <div class="bg-theme-son">
  163. <span>货油泵温度</span>
  164. <span class="iconfont icon-right act"></span>
  165. </div>
  166. <div>
  167. <div class="type_li bengWd" name="bengWd">
  168. <div class="flex text-grey" name="bengWd1">
  169. <div class="check_ check_act"></div><span style="line-height: 14px;">前缀</span>
  170. </div>
  171. <div class="flex text-grey margin-lr-lg" name="bengWd2">
  172. <div class="check_"></div><span style="line-height: 14px;">后轴</span>
  173. </div>
  174. <div class="flex text-grey" name="bengWd3">
  175. <div class="check_"></div><span style="line-height: 14px;">泵壳</span>
  176. </div>
  177. <div class="flex text-grey margin-lr-lg" name="bengWd4">
  178. <div class="check_"></div><span style="line-height: 14px;">舱壁轴填料函</span>
  179. </div>
  180. </div>
  181. <div style="height: 200px;">
  182. <div id="myChart3" style="height:100%;"></div>
  183. </div>
  184. <div class="drog_li myChart3" name="myChart3">
  185. </div>
  186. </div>
  187. </div>
  188. <div style="border: 1px solid rgba(125,125,125,0.4);margin: 7px;">
  189. <div class="bg-theme-son">
  190. <span>总管压力</span>
  191. <span class="iconfont icon-right"></span>
  192. </div>
  193. <div style="display: none;">
  194. <div style="height: 200px;">
  195. <div id="myChart4" style="height:100%;"></div>
  196. </div>
  197. <div class="drog_li myChart4" name="myChart4">
  198. </div>
  199. </div>
  200. </div>
  201. <div style="border: 1px solid rgba(125,125,125,0.4);margin: 7px;">
  202. <div class="bg-theme-son">
  203. <span>可燃气体</span>
  204. <span class="iconfont icon-right"></span>
  205. </div>
  206. <div style="display: none;">
  207. <div style="height: 200px;">
  208. <div id="myChart5" style="height:100%;"></div>
  209. </div>
  210. <div class="drog_li myChart5" name="myChart5">
  211. </div>
  212. </div>
  213. </div>
  214. <div style="border: 1px solid rgba(125,125,125,0.4);margin: 7px;">
  215. <div class="bg-theme-son">
  216. <span>泵进出口压力</span>
  217. <span class="iconfont icon-right"></span>
  218. </div>
  219. <div style="display: none;">
  220. <div class="type_li bengYl" name="bengYl">
  221. <div class="flex text-grey" name="bengYl1">
  222. <div class="check_ check_act"></div><span style="line-height: 14px;">进口压力</span>
  223. </div>
  224. <div class="flex text-grey margin-lr-lg" name="bengYl2">
  225. <div class="check_"></div><span style="line-height: 14px;">出口压力</span>
  226. </div>
  227. </div>
  228. <div style="height: 200px;">
  229. <div id="myChart6" style="height:100%;"></div>
  230. </div>
  231. <div class="drog_li myChart6" name="myChart6">
  232. </div>
  233. </div>
  234. </div>
  235. </div>
  236. <div style="display: none;" class="ReportP">
  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 act"></span>
  241. </div>
  242. <div>
  243. <div style="height: 200px;">
  244. <div id="myChart7" style="height:100%;"></div>
  245. </div>
  246. <div class="drog_li myChart7" name="myChart7">
  247. </div>
  248. </div>
  249. </div>
  250. <div style="border: 1px solid rgba(125,125,125,0.4);margin: 7px;">
  251. <div class="bg-theme-son">
  252. <span>1-6#缸排气温度</span>
  253. <span class="iconfont icon-right act"></span>
  254. </div>
  255. <div style="display: none;">
  256. <div style="height: 200px;">
  257. <div id="myChart14" style="height:100%;"></div>
  258. </div>
  259. <div class="drog_li myChart14" name="myChart14">
  260. </div>
  261. </div>
  262. </div>
  263. <div style="border: 1px solid rgba(125,125,125,0.4);margin: 7px;">
  264. <div class="bg-theme-son">
  265. <span>0-7#主轴承温度</span>
  266. <span class="iconfont icon-right act"></span>
  267. </div>
  268. <div style="display: none;">
  269. <div style="height: 200px;">
  270. <div id="myChart15" style="height:100%;"></div>
  271. </div>
  272. <div class="drog_li myChart15" name="myChart15">
  273. </div>
  274. </div>
  275. </div>
  276. <div style="border: 1px solid rgba(125,125,125,0.4);margin: 7px;">
  277. <div class="bg-theme-son">
  278. <span>涡轮、滑油、高温水温度</span>
  279. <span class="iconfont icon-right act"></span>
  280. </div>
  281. <div style="display: none;">
  282. <div style="height: 200px;">
  283. <div id="myChart8" style="height:100%;"></div>
  284. </div>
  285. <div class="drog_li myChart8" name="myChart8">
  286. </div>
  287. </div>
  288. </div>
  289. <div style="border: 1px solid rgba(125,125,125,0.4);margin: 7px;">
  290. <div class="bg-theme-son">
  291. <span>增压器、中冷器</span>
  292. <span class="iconfont icon-right"></span>
  293. </div>
  294. <div style="display: none;">
  295. <div style="height: 200px;">
  296. <div id="myChart9" style="height:100%;"></div>
  297. </div>
  298. <div class="drog_li myChart9" name="myChart9">
  299. </div>
  300. </div>
  301. </div>
  302. <div style="border: 1px solid rgba(125,125,125,0.4);margin: 7px;">
  303. <div class="bg-theme-son">
  304. <span>滤前、滑油</span>
  305. <span class="iconfont icon-right"></span>
  306. </div>
  307. <div style="display: none;">
  308. <div style="height: 200px;">
  309. <div id="myChart10" style="height:100%;"></div>
  310. </div>
  311. <div class="drog_li myChart10" name="myChart10">
  312. </div>
  313. </div>
  314. </div>
  315. <div style="border: 1px solid rgba(125,125,125,0.4);margin: 7px;">
  316. <div class="bg-theme-son">
  317. <span>正车、倒车、输出</span>
  318. <span class="iconfont icon-right"></span>
  319. </div>
  320. <div style="display: none;">
  321. <div style="height: 200px;">
  322. <div id="myChart11" style="height:100%;"></div>
  323. </div>
  324. <div class="drog_li myChart11" name="myChart11">
  325. </div>
  326. </div>
  327. </div>
  328. </div>
  329. <div style="display: none;" class="ReportE">
  330. <div class="type_li engMa" name="engMa">
  331. <div class="flex text-grey" name="oneEngine">
  332. <div class="check_ check_act"></div><span style="line-height: 14px;">1#</span>
  333. </div>
  334. <div class="flex text-grey margin-lr-lg" name="twoEngine">
  335. <div class="check_"></div><span style="line-height: 14px;">2#</span>
  336. </div>
  337. <div class="flex text-grey" name="thrEngine">
  338. <div class="check_"></div><span style="line-height: 14px;">3#</span>
  339. </div>
  340. </div>
  341. <div style="border: 1px solid rgba(125,125,125,0.4);margin: 7px;">
  342. <div class="bg-theme-son">
  343. <span>转速、电池电压、运行时间</span>
  344. <span class="iconfont icon-right act"></span>
  345. </div>
  346. <div>
  347. <div style="height: 200px;">
  348. <div id="myChart12" style="height:100%;"></div>
  349. </div>
  350. <div class="drog_li myChart12" name="myChart12">
  351. </div>
  352. </div>
  353. </div>
  354. <div style="border: 1px solid rgba(125,125,125,0.4);margin: 7px;">
  355. <div class="bg-theme-son">
  356. <span>滑油压力、温度/淡水温度</span>
  357. <span class="iconfont icon-right act"></span>
  358. </div>
  359. <div>
  360. <div style="height: 200px;">
  361. <div id="myChart13" style="height:100%;"></div>
  362. </div>
  363. <div class="drog_li myChart13" name="myChart13">
  364. </div>
  365. </div>
  366. </div>
  367. </div>
  368. </div>
  369. <script type="text/javascript">
  370. var nowSn = localStorage.getItem("shipSn");
  371. var _XAxis = [];
  372. var _ChartU = ["myChart2","myChart3","myChart4","myChart5","myChart6","myChart7","myChart8","myChart9","myChart10","myChart11","myChart12","myChart13","myChart14","myChart15"];
  373. var _myChart = {},nowTime = null,nowCar = null,nowTar = 0;
  374. var nowCar = {
  375. "myChart2":"yeHuo1",
  376. "myChart3":"bengWd1",
  377. "myChart4":"zgYali",
  378. "myChart5":"zgYali",
  379. "myChart6":"bengYl1",
  380. "myChart7":"Post",
  381. "myChart8":"Post",
  382. "myChart9":"Post",
  383. "myChart10":"Post",
  384. "myChart11":"Post",
  385. "myChart12":"oneEngine",
  386. "myChart13":"oneEngine",
  387. "myChart14":"Post",
  388. "myChart15":"Post"
  389. }
  390. var _eCchart = [{
  391. "yeHuo1":{"myChart2":["左液位_z01_m","左压力_z0D1_kPa","左上温_z0R1_℃","左中温_z0T1_℃","左底温_z0S1_℃","右液位_z00_m","右压力_z0C1_kPa","右上温_z0O1_℃","右中温_z0Q1_℃","右底温_z0P1_℃"]},
  392. "yeHuo2":{"myChart2":["左液位_z03_m","左压力_z0F1_kPa","左上温_z0X1_℃","左中温_z0Z1_℃","左底温_z0Y1_℃","右液位_z02_m","右压力_z0E1_kPa","右上温_z0U1_℃","右中温_z0W1_℃","右底温_z0V1_℃"]},
  393. "yeHuo3":{"myChart2":["左液位_z05_m","左压力_z0H1_kPa","左上温度_z0d_℃","左中温_z0f_℃","左底温_z0e_℃","右液位_z04_m","右压力_z0G1_kPa","右上温_z0a_℃","右中温_z0c_℃","右底温_z0b_℃"]},
  394. "yeHuo4":{"myChart2":["左液位_z07_m","左压力_z0J1_kPa","左上温度_z0j_℃","左中温_z0l_℃","左底温_z0k_℃","右液位_z06_m","右压力_z0I1_kPa","右上温_z0g_℃","右中温_z0i_℃","右底温_z0h_℃"]},
  395. "yeHuo5":{"myChart2":["左液位_z09_m","左压力_z0L1_kPa","左上温度_z0p_℃","左中温_z0r_℃","左底温_z0q_℃","右液位_z08_m","右压力_z0K1_kPa","右上温_z0m_℃","右中温_z0o_℃","右底温_z0n_℃"]},
  396. "yeHuo6":{"myChart2":["左液位_z0B1_m","左压力_z0N1_kPa","左上温度_z0v_℃","左中温_z0x_℃","左底温_z0w_℃","右液位_z0A1_m","右压力_z0M1_kPa","右上温_z0s_℃","右中温_z0u_℃","右底温_z0t_℃"]},
  397. "zgYali":{
  398. "myChart4":["1#液货_z1Z1_kPa","2#液货_z1a_kPa","1#蒸气回收_z1b_kPa","2#蒸气回收_z1Y1_kPa"],
  399. "myChart5":["泵舱底左_z1d_%LEL","空调通风口_z1g_%LEL","泵舱底右_z1e_%LEL","尾楼甲板左_z1h_%LEL","泵舱上甲板_z1f_%LEL","尾楼甲板右_z1i_%LEL"]
  400. },
  401. "bengWd1":{"myChart3":["1#_z0y_℃","2#_z12_℃","3#_z16_℃","4#_z1A1_℃","5#_z1E1_℃","污液舱_z1I1_℃"]},
  402. "bengWd2":{"myChart3":["1#_z0z_℃","2#_z13_℃","3#_z17_℃","4#_z1B1_℃","5#_z1F1_℃","污液舱_z1J1_℃"]},
  403. "bengWd3":{"myChart3":["1#_z11_℃","2#_z15_℃","3#_z19_℃","4#_z1D1_℃","5#_z1H1_℃","污液舱_z1L1_℃"]},
  404. "bengWd4":{"myChart3":["1#_z10_℃","2#_z14_℃","3#_z18_℃","4#_z1C1_℃","5#_z1G1_℃","污液舱_z1K1_℃"]},
  405. "bengYl1":{
  406. "myChart6":["1#货油泵_z1N1_kPa","2#货油泵_z1P1_kPa","1#压载泵_z1S1_kPa","2#压载泵_z1U1_kPa","洗舱泵_z1R1_kPa","扫舱泵_z1W1_kPa"]
  407. },
  408. "bengYl2":{
  409. "myChart6":["1#货油泵_z1N1_kPa","2#货油泵_z1O1_kPa","1#压载泵_z1T1_kPa","2#压载泵_z1V1_kPa","洗舱泵_z1Q1_kPa","扫舱泵_z1X1_kPa"]
  410. }
  411. },{
  412. "Post":{
  413. "myChart7":["转速_00x_rpm","燃油进机压力_00K1_kPa","燃油进机温度_00P1_℃","起动空气压力_00L1_MPa","控制空气压力_00M1_MPa","预润滑油压力_00w_MPa"],
  414. "myChart8":["涡轮进口排气_00b_℃","滑油进机_00Q1_℃","涡轮出口排气_00e_℃","滑油出机_00R1_℃","涡轮进口(上)排气_00c_℃","高温水进机_00h_℃","涡轮进口(下)排气_00d_℃","高温水出机_00i_℃"],
  415. "myChart9":["增-滑油进口压力_00G1_kPa","冷-后进气温度_00k_℃","增-空气压力_00N1_kPa","冷-高温水进口压力_00H1_kPa","增-滑油出口温度_00O1_℃","冷-低温水进口压力_00I1_kPa"],
  416. "myChart10":["滤前工作油压力_0M0_kPa","滑油温度_0M6_℃","滤前压力_0M3_kPa","滑油压力_0M7_kPa","滤后压力_0M4_kPa"],
  417. "myChart11":["正车工作油压力_0M1_kPa","正车推力轴承温度_0M9_℃","倒车工作油压力_0M2_kPa","倒车推力轴承温度_0MA_℃","输出前轴承温度_0M7_℃","输出后轴承温度_0M8_℃"],
  418. "myChart14":["1#_00S1_℃","2#_00T1_℃","3#_00U1_℃","4#_00V1_℃","5#_00W1_℃","6#_00X1_℃"],
  419. "myChart15":["0#_00m_℃","1#_00n_℃","2#_00o_℃","3#_00p_℃","4#_00q_℃","5#_00r_℃","6#_00s_℃","7#_00t_℃"]
  420. },
  421. },{
  422. "oneEngine":{
  423. "myChart12":["转速_030_rpm","电池电压_035_V","运行时间_036_h"],
  424. "myChart13":["滑油压力_031_kPa","滑油温度_034_℃","淡水温度_033_℃"]
  425. },
  426. "twoEngine":{
  427. "myChart12":["转速_03A1_rpm","电池电压_03F1_V","运行时间_03G1_h"],
  428. "myChart13":["滑油压力_03B1_kPa","滑油温度_03E1_℃","淡水温度_03D1_℃"]
  429. },
  430. "thrEngine":{
  431. "myChart12":["转速_03a_rpm","电池电压_03f_V","运行时间_03g_h"],
  432. "myChart13":["滑油压力_03b_kPa","滑油温度_03e_℃","淡水温度_03d_℃"]
  433. }
  434. }]
  435. function chartOption(_data, _xais, _key) {
  436. option = {
  437. grid: {
  438. top: '18%',
  439. left: '2%',
  440. right: '2%',
  441. bottom: '0%',
  442. containLabel: true
  443. },
  444. xAxis: {
  445. type: 'category',
  446. data: _xais,
  447. axisLine: {
  448. lineStyle: {
  449. color: '#9ed2f9'
  450. }
  451. },
  452. axisLabel: {
  453. interval: 0,
  454. },
  455. axisTick: {
  456. show: false
  457. }
  458. },
  459. yAxis: {
  460. // name: "(" + _key + ")",
  461. type: 'value',
  462. axisLine: {
  463. show: false
  464. },
  465. splitLine: {
  466. lineStyle: {
  467. color: ['rgba(132, 132, 132, 0.5)']
  468. }
  469. },
  470. axisLabel:{
  471. formatter: function(){
  472. return "";
  473. }
  474. }
  475. },
  476. series: [{
  477. data: _data,
  478. type: 'line',
  479. symbol: 'none',
  480. markPoint: {
  481. data: [{
  482. name:"最大值",
  483. type: "max"
  484. }]
  485. }
  486. }],
  487. tooltip: {
  488. trigger: 'axis',
  489. axisPointer: {
  490. type: 'cross',
  491. label: {
  492. backgroundColor: '#6a7985'
  493. }
  494. },
  495. formatter: function(v) {
  496. let _tim = getTime(new Date(new Date(nowTime+" 00:00:00").getTime() + ((v[0].dataIndex)*60*1000*10)));
  497. return _tim[2] + ':' + v[0].data + _key;
  498. }
  499. }
  500. };
  501. return option;
  502. }
  503. $(document).ready(function(){
  504. nowTime = getTime(new Date())[0];
  505. $(".startDate").val(nowTime);
  506. getXAxis();
  507. getTar(0);
  508. })
  509. function setEcharts(num,_key){
  510. let _obj = _eCchart[nowTar][_key];
  511. for(var key in _obj){
  512. let _acb = _obj[key],_sdh = key;
  513. let _cbv = _acb[0].split("_");
  514. if(num == 0){
  515. let _str = "";
  516. for(var i=0;i<_acb.length;i++){
  517. let _bnc = _acb[i].split("_");
  518. _str += `<div class="flex" data-id="${i}">
  519. <div class="act_dro ${i==0?'drog_act':''}"></div>
  520. <span>${_bnc[0]}(${_bnc[2]})</span>
  521. </div>`
  522. }
  523. $("."+_sdh).html(_str);
  524. }else{
  525. $("."+_sdh+" .act_dro").removeClass("drog_act");
  526. $("."+_sdh+" .act_dro").eq(0).addClass("drog_act");
  527. }
  528. reportAjax({
  529. "_url":_cbv[1],
  530. "_time": nowTime,
  531. "sn":nowSn,
  532. "callback":function(res){
  533. setData(res,_cbv[2],_sdh);
  534. }
  535. })
  536. }
  537. }
  538. function setData(_data,_unit,_i){
  539. let _newD = [];
  540. for(var i=0;i<6*24;i++){
  541. let _tim = getTime(new Date(new Date(nowTime+" 00:00:00").getTime() + (i*60*1000*10)));
  542. _newD.push(_data[_tim[0]+_tim[2]] || 0);
  543. }
  544. _myChart[_i].setOption(chartOption(_newD,_XAxis,_unit));
  545. _myChart[_i].resize();
  546. yzkj.closeLoad("load1");
  547. }
  548. $(document).on("click",".type_li>div",function(){
  549. let _na = $(this).parent().attr("name");
  550. $("."+_na +" .check_").removeClass("check_act");
  551. $(this).find(".check_").addClass("check_act");
  552. getCar(_na,$(this).attr("name"));
  553. })
  554. $(document).on("click",".drog_li>div",function(){
  555. // yzkj.load("load1");
  556. let _na = $(this).parent().attr("name");
  557. $("."+_na +" .act_dro").removeClass("drog_act");
  558. $(this).find(".act_dro").addClass("drog_act");
  559. let _id = $(this).data("id");
  560. let _car = nowCar[_na];
  561. let _key = _eCchart[nowTar][_car][_na][_id];
  562. reportAjax({
  563. "_url":_key.split("_")[1],
  564. "_time": nowTime,
  565. "sn":nowSn,
  566. "callback":function(res){
  567. setData(res,_key.split("_")[2],_na);
  568. }
  569. })
  570. })
  571. // 折线图X轴
  572. function getXAxis() {
  573. for (var i = 0; i < _ChartU.length; i++) {
  574. let _ecid = echarts.init(document.getElementById(_ChartU[i] + ''));
  575. _myChart[_ChartU[i]] = _ecid;
  576. }
  577. _XAxis = [];
  578. for (var i = 0; i < 12; i++) {
  579. _XAxis = [..._XAxis, ...[i * 2, '', '', '', '', '', '', '', '', '', '', '']];
  580. }
  581. }
  582. $(".tabli>div").on("click","",function(){
  583. getTar($(this).attr("name"));
  584. $(this).addClass("yz_this").siblings().removeClass("yz_this");
  585. })
  586. function getTar(num){
  587. nowTar = num;
  588. if(num == 0){
  589. $(".ReportC").css("display","block");
  590. $(".ReportP").css("display","none");
  591. $(".ReportE").css("display","none");
  592. setEcharts(0,"yeHuo1");
  593. setEcharts(0,"zgYali");
  594. setEcharts(0,"bengWd1");
  595. setEcharts(0,"bengYl1");
  596. }else if(num == 1){
  597. $(".ReportC").css("display","none");
  598. $(".ReportP").css("display","block");
  599. $(".ReportE").css("display","none");
  600. setEcharts(0,"Post");
  601. }else if(num == 2){
  602. $(".ReportC").css("display","none");
  603. $(".ReportP").css("display","none");
  604. $(".ReportE").css("display","block");
  605. setEcharts(0,"oneEngine");
  606. }
  607. }
  608. function getCar(_txt,_ca){
  609. if(_txt == "carGoYH"){
  610. nowCar["myChart2"] = _ca;
  611. }else if(_txt == "bengWd"){
  612. nowCar["myChart3"] = _ca;
  613. }else if(_txt == "bengYl"){
  614. nowCar["myChart6"] = _ca;
  615. }else if(_txt == "engMa"){
  616. nowCar["myChart12"] = _ca;
  617. nowCar["myChart13"] = _ca;
  618. }
  619. setEcharts(1,_ca);
  620. }
  621. $(".bg-theme-son").on("click","",function(){
  622. if($(this).next().is(":hidden")){
  623. $(this).next().css("display","block");
  624. $(this).find(".iconfont").addClass("act");
  625. }else{
  626. $(this).next().css("display","none");
  627. $(this).find(".iconfont").removeClass("act");
  628. }
  629. for(var key in _myChart){
  630. _myChart[key].resize();
  631. }
  632. })
  633. $(".search_ ._day").on("click","",function(){
  634. let _id = parseInt($(this).data("num"));
  635. let _key = $(".startDate").val().replace(/\//g, '-');
  636. let _a = dayChange(_key,_id);
  637. if(_a != undefined){
  638. nowTime = getTime(dayChange(_key,_id))[0];
  639. $(".startDate").val(getTime(dayChange(_key,_id))[0]);
  640. getTar(nowTar)
  641. }
  642. })
  643. </script>
  644. </body>
  645. </html>