mesScreen.html 25 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  6. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7. <title>MES可视化大屏</title>
  8. <link rel="stylesheet" href="${ctxStatic}/bootstrap/css/bootstrap.min.css">
  9. <link rel="stylesheet" href="${ctxStatic}/screen/style.css">
  10. <style>
  11. .devicestatus{
  12. position: absolute;
  13. z-index: 11;
  14. left: 150px;
  15. right: 150px;
  16. top: 120px;
  17. height: 30px;
  18. line-height: 30px;
  19. margin: 0;
  20. text-align: center;
  21. }
  22. .statuszx,.statuslx{
  23. padding-left: 20px;
  24. position: relative;
  25. display: inline-block;
  26. width: 100px;
  27. height: 30px;
  28. line-height: 30px;
  29. font-size: 18px;
  30. color: #ffffff;
  31. }
  32. .statuszx::before{
  33. content: '';
  34. background-color: #40DE78;
  35. width: 18px;
  36. height: 18px;
  37. position: absolute;
  38. z-index: 1;
  39. top: 6px;
  40. left: 0;
  41. }
  42. .statuslx::before{
  43. content: '';
  44. background-color: #F63E65;
  45. width: 18px;
  46. height: 18px;
  47. position: absolute;
  48. z-index: 1;
  49. top: 6px;
  50. left: 0;
  51. }
  52. .devicebox{
  53. position: absolute;
  54. z-index: 10;
  55. left: 150px;
  56. right: 150px;
  57. top: 150px;
  58. bottom: 80px;
  59. margin: 0;
  60. /*background-color: red;*/
  61. }
  62. .devicebox .opronbox{
  63. display: inline-block;
  64. position: relative;
  65. width: 180px;
  66. height: 170px;
  67. /*background-color: gold;*/
  68. text-align: center;
  69. color: #35D86E;
  70. font-size: 18px;
  71. font-family: FZChaoCuHei-M10S;
  72. font-weight: 400;
  73. float: left;
  74. margin: 21px 0;
  75. }
  76. .opronbox-h2 .opronbox{
  77. margin: 51px 0;
  78. }
  79. .devicebox .opronbox .s{
  80. width: 71px;
  81. height: 127px;
  82. }
  83. .devicebox .opronsn{
  84. position: absolute;
  85. width: 100%;
  86. height: 40px;
  87. line-height: 40px;
  88. top: 91px;
  89. left: 0;
  90. color: #35D86E;
  91. font-size: 18px;
  92. font-family: FZChaoCuHei-M10S;
  93. font-weight: 400;
  94. }
  95. .devicebox .oprontitle{
  96. color: #FFFFFF;
  97. font-size: 18px;
  98. font-family: FZChaoCuHei-M10S;
  99. font-weight: 400;
  100. height: 30px;
  101. line-height: 30px;
  102. overflow: hidden;
  103. padding: 0 10px;
  104. }
  105. .devicebox .arrow{
  106. position: absolute;
  107. width: 72px;
  108. height: 28px;
  109. z-index: 10;
  110. right: -36px;
  111. top: 70px;
  112. }
  113. .opronbox .online{
  114. position: absolute;
  115. z-index: 10;
  116. width: 80px;
  117. height: 40px;
  118. line-height: 40px;
  119. top: 70px;
  120. left: -80px;
  121. text-align: center;
  122. }
  123. .opronbox .online,.opronbox .unonline{
  124. position: absolute;
  125. z-index: 10;
  126. width: 80px;
  127. height: 40px;
  128. line-height: 40px;
  129. top: 60px;
  130. text-align: center;
  131. font-size: 24px;
  132. font-family: FZChaoCuHei-M10S;
  133. font-weight: 400;
  134. color: #35D86E;
  135. }
  136. .opronbox .online{
  137. left: -80px;
  138. }
  139. .opronbox .unonline{
  140. right: -80px;
  141. }
  142. </style>
  143. </head>
  144. <body>
  145. <div class="screenbg">
  146. <img class="bg1" src="${ctxStatic}/screen/imgs/bg.png" alt="">
  147. <img class="bg2" style="display: none;" src="${ctxStatic}/screen/imgs/bg2.png" alt="">
  148. </div>
  149. <div class="screenbox1">
  150. <div class="screenmain">
  151. <div class="screen-title">MES系统KPI数据大屏</div>
  152. <div class="slbox">
  153. <div class="slbox-header">
  154. <div class="slbox-td1">B007</div>
  155. <div class="slbox-td2">&nbsp;</div>
  156. <div class="slbox-td3">计划</div>
  157. <div class="slbox-td4">实际</div>
  158. <div class="slbox-td5">达成率</div>
  159. </div>
  160. <!-- <div class="slbox-tr1">-->
  161. <!-- <div class="slbox-th slbox-td1">冷板</div>-->
  162. <!-- <div class="slbox-tdleft">-->
  163. <!-- <div class="tdcell">-->
  164. <!-- <div class="slbox-td2">上线</div>-->
  165. <!-- <div class="slbox-td3" id="xzcsxjh">0</div>-->
  166. <!-- <div class="slbox-td4" id="xzcsxsj">0</div>-->
  167. <!-- <div class="slbox-td5" id="xzcsxdcl">0%</div>-->
  168. <!-- </div>-->
  169. <!-- <div class="tdcell">-->
  170. <!-- <div class="slbox-td2">下线</div>-->
  171. <!-- <div class="slbox-td3" id="xzcxxjh">0</div>-->
  172. <!-- <div class="slbox-td4" id="xzcxxsj">0</div>-->
  173. <!-- <div class="slbox-td5" id="xzcxxdcl">0%</div>-->
  174. <!-- </div>-->
  175. <!-- </div>-->
  176. <!-- </div>-->
  177. <div class="slbox-tr1">
  178. <div class="slbox-th slbox-td1">框架</div>
  179. <div class="slbox-tdleft">
  180. <div class="tdcell">
  181. <div class="slbox-td2">上线</div>
  182. <div class="slbox-td3" id="op1sxjh">0</div>
  183. <div class="slbox-td4" id="op1sxsj">0</div>
  184. <div class="slbox-td5" id="op1sxdcl">0%</div>
  185. </div>
  186. <div class="tdcell">
  187. <div class="slbox-td2">下线</div>
  188. <div class="slbox-td3" id="op1xxjh">0</div>
  189. <div class="slbox-td4" id="op1xxsj">0</div>
  190. <div class="slbox-td5" id="op1xxdcl">0%</div>
  191. </div>
  192. </div>
  193. </div>
  194. <div class="slbox-tr1">
  195. <div class="slbox-th slbox-td1">箱体</div>
  196. <div class="slbox-tdleft">
  197. <div class="tdcell">
  198. <div class="slbox-td2">上线</div>
  199. <div class="slbox-td3" id="op2sxjh">0</div>
  200. <div class="slbox-td4" id="op2sxsj">0</div>
  201. <div class="slbox-td5" id="op2sxdcl">0%</div>
  202. </div>
  203. <div class="tdcell">
  204. <div class="slbox-td2">下线</div>
  205. <div class="slbox-td3" id="op2xxjh">0</div>
  206. <div class="slbox-td4" id="op2xxsj">0</div>
  207. <div class="slbox-td5" id="op2xxdcl">0%</div>
  208. </div>
  209. </div>
  210. </div>
  211. <div class="slbox-tr2">
  212. <div class="slbox-th slbox-td1">主线FTT</div>
  213. <div class="slbox-tdleft">
  214. <div class="slbox-td2">--</div>
  215. <div class="slbox-td3" id="ftt1">--</div>
  216. <div class="slbox-td4" id="ftt2">100%</div>
  217. <div class="slbox-td5" id="ftt3">--</div>
  218. </div>
  219. </div>
  220. </div>
  221. <div class="srbox">
  222. <!-- <div class="jphlist">-->
  223. <!-- <div class="jphcount"><span id="avgjp1">0</span>/<span id="jp1">0</span></div>-->
  224. <!-- <div class="jphtitle">冷板 JPH</div>-->
  225. <!-- </div>-->
  226. <div class="jphlist">
  227. <div class="jphcount"><span id="avgjp2">0</span>/<span id="jp2">0</span></div>
  228. <div class="jphtitle">框架 JPH</div>
  229. </div>
  230. <div class="jphlist">
  231. <div class="jphcount"><span id="avgjp3">0</span>/<span id="jp3">0</span></div>
  232. <div class="jphtitle">箱体 JPH</div>
  233. </div>
  234. </div>
  235. <!-- <div class="screen-footer" onclick="changeIndex(1)">切换冷板设备状态</div>-->
  236. </div>
  237. </div>
  238. <div class="screenbox2">
  239. <div class="screenmain">
  240. <div class="screen-title">MES系统冷板设备状态大屏</div>
  241. <div class="devicestatus">
  242. <div class="statuszx">在线</div>
  243. <div class="statuslx">离线</div>
  244. </div>
  245. <div class="devicebox opronbox-h2">
  246. <div class="opronbox LBOP040">
  247. <div class="online">上线</div>
  248. <img class="s" src="${ctxStatic}/screen/imgs/s2.png" alt="">
  249. <div class="opronsn">OP40-OP50</div>
  250. <div class="oprontitle">左右冷板FSW</div>
  251. <img class="arrow" src="${ctxStatic}/screen/imgs/arrow1.png" alt="">
  252. </div>
  253. <div class="opronbox LBOP060">
  254. <img class="s" src="${ctxStatic}/screen/imgs/s1.png" alt="">
  255. <div class="opronsn">OP60</div>
  256. <div class="oprontitle">左右冷板正面CNC</div>
  257. <img class="arrow" src="${ctxStatic}/screen/imgs/arrow1.png" alt="">
  258. </div>
  259. <div class="opronbox LBOP070A">
  260. <img class="s" src="${ctxStatic}/screen/imgs/s1.png" alt="">
  261. <div class="opronsn">OP70A</div>
  262. <div class="oprontitle">左右冷板反面CNC</div>
  263. <img class="arrow" src="${ctxStatic}/screen/imgs/arrow2.png" alt="">
  264. </div>
  265. <div class="opronbox LBOP070B">
  266. <img class="s" src="${ctxStatic}/screen/imgs/s1.png" alt="">
  267. <div class="opronsn">OP70B</div>
  268. <div class="oprontitle">左右冷板反面CNC</div>
  269. <img class="arrow" src="${ctxStatic}/screen/imgs/arrow1.png" alt="">
  270. </div>
  271. <div class="opronbox LBOP080">
  272. <img class="s" src="${ctxStatic}/screen/imgs/s1.png" alt="">
  273. <div class="opronsn">OP80</div>
  274. <div class="oprontitle">去毛刺吹铝屑</div>
  275. <img class="arrow" src="${ctxStatic}/screen/imgs/arrow1.png" alt="">
  276. </div>
  277. <div class="opronbox LBOP090">
  278. <img class="s" src="${ctxStatic}/screen/imgs/s1.png" alt="">
  279. <div class="opronsn">OP90</div>
  280. <div class="oprontitle">超声波清洗</div>
  281. <img class="arrow" src="${ctxStatic}/screen/imgs/arrow1.png" alt="">
  282. </div>
  283. <div class="opronbox LBOP100A">
  284. <img class="s" src="${ctxStatic}/screen/imgs/s1.png" alt="">
  285. <div class="opronsn">OP100-OP110A</div>
  286. <div class="oprontitle">冷板FSW堵头焊接</div>
  287. <img class="arrow" src="${ctxStatic}/screen/imgs/arrow2.png" alt="">
  288. </div>
  289. <div class="opronbox LBOP100B">
  290. <img class="s" src="${ctxStatic}/screen/imgs/s1.png" alt="">
  291. <div class="opronsn">OP100-OP110B</div>
  292. <div class="oprontitle">冷板FSW堵头焊接</div>
  293. <img class="arrow" src="${ctxStatic}/screen/imgs/arrow2.png" alt="">
  294. </div>
  295. <div class="opronbox LBOP100C">
  296. <img class="s" src="${ctxStatic}/screen/imgs/s1.png" alt="">
  297. <div class="opronsn">OP100-OP110C</div>
  298. <div class="oprontitle">冷板FSW堵头焊接</div>
  299. <!-- <img class="arrow" src="${ctxStatic}/screen/imgs/arrow1.png" alt="">-->
  300. </div>
  301. <div class="opronbox LBOP120">
  302. <img class="s" src="${ctxStatic}/screen/imgs/s1.png" alt="">
  303. <div class="opronsn">OP120</div>
  304. <div class="oprontitle">打磨焊道</div>
  305. <img class="arrow" src="${ctxStatic}/screen/imgs/arrow1.png" alt="">
  306. </div>
  307. <div class="opronbox LBOP130">
  308. <img class="s" src="${ctxStatic}/screen/imgs/s1.png" alt="">
  309. <div class="opronsn">OP130</div>
  310. <div class="oprontitle">水嘴自动激光焊</div>
  311. <img class="arrow" src="${ctxStatic}/screen/imgs/arrow1.png" alt="">
  312. </div>
  313. <div class="opronbox LBOP140">
  314. <img class="s" src="${ctxStatic}/screen/imgs/s1.png" alt="">
  315. <div class="opronsn">OP140</div>
  316. <div class="oprontitle">底护板支撑柱+BDU柱+线束支架焊接</div>
  317. <img class="arrow" src="${ctxStatic}/screen/imgs/arrow1.png" alt="">
  318. </div>
  319. <div class="opronbox LBOP150">
  320. <img class="s" src="${ctxStatic}/screen/imgs/s1.png" alt="">
  321. <div class="opronsn">OP150</div>
  322. <div class="oprontitle">冷板气检</div>
  323. <img class="arrow" src="${ctxStatic}/screen/imgs/arrow1.png" alt="">
  324. </div>
  325. <div class="opronbox LBOP160A">
  326. <img class="s" src="${ctxStatic}/screen/imgs/s1.png" alt="">
  327. <div class="opronsn">OP160A</div>
  328. <div class="oprontitle">冷板总成CNC正面</div>
  329. <img class="arrow" src="${ctxStatic}/screen/imgs/arrow2.png" alt="">
  330. </div>
  331. <div class="opronbox LBOP160B">
  332. <img class="s" src="${ctxStatic}/screen/imgs/s1.png" alt="">
  333. <div class="opronsn">OP160B</div>
  334. <div class="oprontitle">冷板总成CNC正面</div>
  335. <img class="arrow" src="${ctxStatic}/screen/imgs/arrow1.png" alt="">
  336. </div>
  337. <div class="opronbox LBOP170A">
  338. <img class="s" src="${ctxStatic}/screen/imgs/s1.png" alt="">
  339. <div class="opronsn">OP170A</div>
  340. <div class="oprontitle">冷板总成CNC反面</div>
  341. <img class="arrow" src="${ctxStatic}/screen/imgs/arrow2.png" alt="">
  342. </div>
  343. <div class="opronbox LBOP170B">
  344. <img class="s" src="${ctxStatic}/screen/imgs/s1.png" alt="">
  345. <div class="opronsn">OP170B</div>
  346. <div class="oprontitle">冷板总成CNC反面</div>
  347. <img class="arrow" src="${ctxStatic}/screen/imgs/arrow1.png" alt="">
  348. </div>
  349. <div class="opronbox LBOP180">
  350. <img class="s" src="${ctxStatic}/screen/imgs/s1.png" alt="">
  351. <div class="opronsn">OP180</div>
  352. <div class="oprontitle">去毛刺吹铝屑,清洁</div>
  353. <!-- <img class="arrow" src="${ctxStatic}/screen/imgs/arrow1.png" alt="">-->
  354. </div>
  355. <div class="opronbox LBOP190">
  356. <img class="s" src="${ctxStatic}/screen/imgs/s1.png" alt="">
  357. <div class="opronsn">OP190</div>
  358. <div class="oprontitle">高压冲洗</div>
  359. <img class="arrow" src="${ctxStatic}/screen/imgs/arrow1.png" alt="">
  360. </div>
  361. <div class="opronbox LBOP200">
  362. <img class="s" src="${ctxStatic}/screen/imgs/s1.png" alt="">
  363. <div class="opronsn">OP200</div>
  364. <div class="oprontitle">M5+M6钢丝牙套安装</div>
  365. <img class="arrow" src="${ctxStatic}/screen/imgs/arrow1.png" alt="">
  366. </div>
  367. <div class="opronbox LBOP210">
  368. <img class="s" src="${ctxStatic}/screen/imgs/s1.png" alt="">
  369. <div class="opronsn">OP210</div>
  370. <div class="oprontitle">冷板气检</div>
  371. <img class="arrow" src="${ctxStatic}/screen/imgs/arrow1.png" alt="">
  372. </div>
  373. <div class="opronbox LBOP220">
  374. <img class="s" src="${ctxStatic}/screen/imgs/s1.png" alt="">
  375. <div class="opronsn">OP220</div>
  376. <div class="oprontitle">冷板氦检</div>
  377. <div class="unonline">下线</div>
  378. </div>
  379. </div>
  380. <div class="screen-footer" onclick="changeIndex(2)">切换框架设备状态</div>
  381. </div>
  382. </div>
  383. <div class="screenbox3">
  384. <div class="screenmain">
  385. <div class="screen-title">MES系统框架设备状态大屏</div>
  386. <div class="devicestatus">
  387. <div class="statuszx">在线</div>
  388. <div class="statuslx">离线</div>
  389. </div>
  390. <div class="devicebox">
  391. <div class="opronbox XTOP040">
  392. <div class="online">上线</div>
  393. <img class="s" src="${ctxStatic}/screen/imgs/s1.png" alt="">
  394. <div class="opronsn">OP40</div>
  395. <div class="oprontitle">右边梁镭雕二维码</div>
  396. <img class="arrow" src="${ctxStatic}/screen/imgs/arrow1.png" alt="">
  397. </div>
  398. <div class="opronbox XTOP050">
  399. <img class="s" src="${ctxStatic}/screen/imgs/s1.png" alt="">
  400. <div class="opronsn">OP50</div>
  401. <div class="oprontitle">框架总成CMT焊接</div>
  402. <img class="arrow" src="${ctxStatic}/screen/imgs/arrow1.png" alt="">
  403. </div>
  404. <div class="opronbox XTOP060">
  405. <img class="s" src="${ctxStatic}/screen/imgs/s1.png" alt="">
  406. <div class="opronsn">OP60</div>
  407. <div class="oprontitle">角撑型材焊接+人工补焊</div>
  408. <img class="arrow" src="${ctxStatic}/screen/imgs/arrow1.png" alt="">
  409. </div>
  410. <div class="opronbox XTOP070">
  411. <img class="s" src="${ctxStatic}/screen/imgs/s1.png" alt="">
  412. <div class="opronsn">OP70</div>
  413. <div class="oprontitle">焊道铣削+打磨</div>
  414. <img class="arrow" src="${ctxStatic}/screen/imgs/arrow1.png" alt="">
  415. </div>
  416. <div class="opronbox XTOP080">
  417. <img class="s" src="${ctxStatic}/screen/imgs/s1.png" alt="">
  418. <div class="opronsn">OP80</div>
  419. <div class="oprontitle">焊道检查</div>
  420. <img class="arrow" src="${ctxStatic}/screen/imgs/arrow1.png" alt="">
  421. </div>
  422. <div class="opronbox XTOP090">
  423. <img class="s" src="${ctxStatic}/screen/imgs/s1.png" alt="">
  424. <div class="opronsn">OP90</div>
  425. <div class="oprontitle">边框气密</div>
  426. <img class="arrow" src="${ctxStatic}/screen/imgs/arrow1.png" alt="">
  427. </div>
  428. <div class="opronbox XTOP100A">
  429. <img class="s" src="${ctxStatic}/screen/imgs/s1.png" alt="">
  430. <div class="opronsn">OP100A</div>
  431. <div class="oprontitle">框架正面CNC</div>
  432. <img class="arrow" src="${ctxStatic}/screen/imgs/arrow2.png" alt="">
  433. </div>
  434. <div class="opronbox XTOP100B">
  435. <img class="s" src="${ctxStatic}/screen/imgs/s1.png" alt="">
  436. <div class="opronsn">OP100B</div>
  437. <div class="oprontitle">框架正面CNC</div>
  438. <img class="arrow" src="${ctxStatic}/screen/imgs/arrow1.png" alt="">
  439. </div>
  440. <div class="opronbox XTOP110A">
  441. <img class="s" src="${ctxStatic}/screen/imgs/s1.png" alt="">
  442. <div class="opronsn">OP110A</div>
  443. <div class="oprontitle">框架反面CNC</div>
  444. </div>
  445. <div class="opronbox XTOP110B">
  446. <img class="s" src="${ctxStatic}/screen/imgs/s1.png" alt="">
  447. <div class="opronsn">OP110B</div>
  448. <div class="oprontitle">框架反面CNC</div>
  449. <img class="arrow" src="${ctxStatic}/screen/imgs/arrow1.png" alt="">
  450. </div>
  451. <div class="opronbox XTOP120">
  452. <img class="s" src="${ctxStatic}/screen/imgs/s1.png" alt="">
  453. <div class="opronsn">OP120</div>
  454. <div class="oprontitle">框架去毛刺吹铝屑,清洁</div>
  455. <img class="arrow" src="${ctxStatic}/screen/imgs/arrow1.png" alt="">
  456. </div>
  457. <div class="opronbox XTOP130">
  458. <img class="s" src="${ctxStatic}/screen/imgs/s1.png" alt="">
  459. <div class="opronsn">OP130</div>
  460. <div class="oprontitle">套筒涂胶压合</div>
  461. <img class="arrow" src="${ctxStatic}/screen/imgs/arrow1.png" alt="">
  462. </div>
  463. <div class="opronbox XTOP140">
  464. <img class="s" src="${ctxStatic}/screen/imgs/s1.png" alt="">
  465. <div class="opronsn">OP140</div>
  466. <div class="oprontitle">胶水固化</div>
  467. <img class="arrow" src="${ctxStatic}/screen/imgs/arrow1.png" alt="">
  468. </div>
  469. <div class="opronbox XTOP150">
  470. <img class="s" src="${ctxStatic}/screen/imgs/s1.png" alt="">
  471. <div class="opronsn">OP150</div>
  472. <div class="oprontitle">正面安装螺接螺母+M6钢丝牙套</div>
  473. <img class="arrow" src="${ctxStatic}/screen/imgs/arrow1.png" alt="">
  474. </div>
  475. <div class="opronbox XTOP160">
  476. <img class="s" src="${ctxStatic}/screen/imgs/s1.png" alt="">
  477. <div class="opronsn">OP160</div>
  478. <div class="oprontitle">正面拉铆</div>
  479. <img class="arrow" src="${ctxStatic}/screen/imgs/arrow1.png" alt="">
  480. </div>
  481. <div class="opronbox XTOP170">
  482. <img class="s" src="${ctxStatic}/screen/imgs/s1.png" alt="">
  483. <div class="opronsn">OP170</div>
  484. <div class="oprontitle">反面拉铆+安装螺接螺母</div>
  485. <img class="arrow" src="${ctxStatic}/screen/imgs/arrow1.png" alt="">
  486. </div>
  487. <div class="opronbox XTOP180">
  488. <img class="s" src="${ctxStatic}/screen/imgs/s1.png" alt="">
  489. <div class="opronsn">OP180</div>
  490. <div class="oprontitle">贴密封条+边框涂胶</div>
  491. <img class="arrow" src="${ctxStatic}/screen/imgs/arrow1.png" alt="">
  492. </div>
  493. <div class="opronbox XTOP190A">
  494. <img class="s" src="${ctxStatic}/screen/imgs/s1.png" alt="">
  495. <div class="opronsn">OP190A</div>
  496. <div class="oprontitle">FDS+安装抽芯铆钉</div>
  497. <!-- <img class="arrow" src="${ctxStatic}/screen/imgs/arrow1.png" alt="">-->
  498. </div>
  499. <div class="opronbox XTOP190B">
  500. <img class="s" src="${ctxStatic}/screen/imgs/s1.png" alt="">
  501. <div class="opronsn">OP190B</div>
  502. <div class="oprontitle">FDS+安装抽芯铆钉</div>
  503. <img class="arrow" src="${ctxStatic}/screen/imgs/arrow2.png" alt="">
  504. </div>
  505. <div class="opronbox XTOP200">
  506. <img class="s" src="${ctxStatic}/screen/imgs/s1.png" alt="">
  507. <div class="opronsn">OP200</div>
  508. <div class="oprontitle">正面清理溢胶,反面框架清胶,正面JH348胶水封堵</div>
  509. <img class="arrow" src="${ctxStatic}/screen/imgs/arrow1.png" alt="">
  510. </div>
  511. <div class="opronbox XTOP210">
  512. <img class="s" src="${ctxStatic}/screen/imgs/s1.png" alt="">
  513. <div class="opronsn">OP210</div>
  514. <div class="oprontitle">箱体FDS螺钉头部涂胶</div>
  515. <img class="arrow" src="${ctxStatic}/screen/imgs/arrow1.png" alt="">
  516. </div>
  517. <div class="opronbox XTOP220">
  518. <img class="s" src="${ctxStatic}/screen/imgs/s1.png" alt="">
  519. <div class="opronsn">OP220</div>
  520. <div class="oprontitle">胶水固化</div>
  521. <img class="arrow" src="${ctxStatic}/screen/imgs/arrow1.png" alt="">
  522. </div>
  523. <div class="opronbox XTOP230">
  524. <img class="s" src="${ctxStatic}/screen/imgs/s1.png" alt="">
  525. <div class="opronsn">OP230</div>
  526. <div class="oprontitle">半成品气密检测</div>
  527. <img class="arrow" src="${ctxStatic}/screen/imgs/arrow1.png" alt="">
  528. </div>
  529. <div class="opronbox XTOP240">
  530. <img class="s" src="${ctxStatic}/screen/imgs/s1.png" alt="">
  531. <div class="opronsn">OP240</div>
  532. <div class="oprontitle">泡棉装配+底护板装配</div>
  533. <img class="arrow" src="${ctxStatic}/screen/imgs/arrow1.png" alt="">
  534. </div>
  535. <div class="opronbox XTOP250">
  536. <img class="s" src="${ctxStatic}/screen/imgs/s1.png" alt="">
  537. <div class="opronsn">OP250</div>
  538. <div class="oprontitle">总成气密检测+液冷板气密检测</div>
  539. <img class="arrow" src="${ctxStatic}/screen/imgs/arrow1.png" alt="">
  540. </div>
  541. <div class="opronbox XTOP260">
  542. <img class="s" src="${ctxStatic}/screen/imgs/s1.png" alt="">
  543. <div class="opronsn">OP260</div>
  544. <div class="oprontitle">检具检测</div>
  545. <img class="arrow" src="${ctxStatic}/screen/imgs/arrow1.png" alt="">
  546. </div>
  547. <div class="opronbox XTOP270">
  548. <img class="s" src="${ctxStatic}/screen/imgs/s1.png" alt="">
  549. <div class="opronsn">OP270</div>
  550. <div class="oprontitle">箱体清洁</div>
  551. <!-- <img class="arrow" src="${ctxStatic}/screen/imgs/arrow1.png" alt="">-->
  552. </div>
  553. <div class="opronbox XTOP280">
  554. <img class="s" src="${ctxStatic}/screen/imgs/s1.png" alt="">
  555. <div class="opronsn">OP280</div>
  556. <div class="oprontitle">贴四周保温泡棉</div>
  557. <img class="arrow" src="${ctxStatic}/screen/imgs/arrow1.png" alt="">
  558. </div>
  559. <div class="opronbox XTOP290">
  560. <img class="s" src="${ctxStatic}/screen/imgs/s1.png" alt="">
  561. <div class="opronsn">OP290</div>
  562. <div class="oprontitle">视觉检测</div>
  563. <img class="arrow" src="${ctxStatic}/screen/imgs/arrow1.png" alt="">
  564. </div>
  565. <div class="opronbox XTOP300">
  566. <img class="s" src="${ctxStatic}/screen/imgs/s1.png" alt="">
  567. <div class="opronsn">OP300</div>
  568. <div class="oprontitle">终检</div>
  569. <img class="arrow" src="${ctxStatic}/screen/imgs/arrow1.png" alt="">
  570. </div>
  571. <div class="opronbox XTOP310">
  572. <img class="s" src="${ctxStatic}/screen/imgs/s1.png" alt="">
  573. <div class="opronsn">OP310</div>
  574. <div class="oprontitle">GP12</div>
  575. <img class="arrow" src="${ctxStatic}/screen/imgs/arrow1.png" alt="">
  576. </div>
  577. <div class="opronbox XTOP320">
  578. <img class="s" src="${ctxStatic}/screen/imgs/s1.png" alt="">
  579. <div class="opronsn">OP320</div>
  580. <div class="oprontitle">包装</div>
  581. <div class="unonline">下线</div>
  582. </div>
  583. </div>
  584. <div class="screen-footer" onclick="changeIndex(0)">切换KPI数据</div>
  585. </div>
  586. </div>
  587. <script src="${ctxStatic}/jquery-1.11.3.min.js"></script>
  588. <script>
  589. let devices = [];
  590. let info = null;
  591. let curIdx = 0;
  592. $(window).resize(function(){
  593. location.reload()
  594. });
  595. $(function () {
  596. changeZoom();
  597. changeIndex(0);
  598. getData();
  599. //
  600. // setInterval(function () {
  601. // let idx = curIdx == 0?1:0;
  602. // changeIndex(idx)
  603. // },1000*80);
  604. //
  605. setInterval(function () {
  606. getData();
  607. },1000*60*2);
  608. });
  609. function changeZoom() {
  610. var wb = $(window).width()/1920;
  611. var hb = $(window).height()/1080;
  612. if(wb >= hb){
  613. $('body').css({
  614. 'zoom': hb,
  615. });
  616. }else{
  617. $('body').css({
  618. 'zoom': wb,
  619. });
  620. }
  621. }
  622. function changeIndex(idx) {
  623. curIdx = idx;
  624. if(idx == 1){
  625. $('.screenbox3').hide();
  626. $('.screenbox2').show();
  627. $('.screenbox1').hide();
  628. $('.bg2').show();
  629. $('.bg1').hide();
  630. }else if(idx == 2){
  631. $('.screenbox3').show();
  632. $('.screenbox2').hide();
  633. $('.screenbox1').hide();
  634. $('.bg2').show();
  635. $('.bg1').hide();
  636. }else{
  637. $('.screenbox1').show();
  638. $('.screenbox2').hide();
  639. $('.screenbox3').hide();
  640. $('.bg1').show();
  641. $('.bg2').hide();
  642. }
  643. }
  644. function getData() {
  645. let url = "/js/a/mes/mesProduct/screenData";
  646. $.post(url,function (ret) {
  647. console.log(ret);
  648. // devices = ret.data.devices;
  649. info = ret.data;
  650. console.log(info);
  651. console.log(devices);
  652. formatData();
  653. });
  654. }
  655. function formatData(){
  656. if(info){
  657. $("#jp1").html(info.jp1);
  658. $("#jp2").html(info.jp2);
  659. $("#jp3").html(info.jp3);
  660. $("#avgjp1").html(info.avgjp1);
  661. $("#avgjp2").html(info.avgjp2);
  662. $("#avgjp3").html(info.avgjp3);
  663. $("#ftt1").html(info.ftt1);
  664. $("#ftt2").html(info.ftt2);
  665. $("#ftt3").html(info.ftt3);
  666. $("#op2xxjh").html(info.op2xxjh);
  667. $("#op2xxsj").html(info.op2xxsj);
  668. $("#op2xxdcl").html(info.op2xxdcl);
  669. $("#op2sxjh").html(info.op2sxjh);
  670. $("#op2sxsj").html(info.op2sxsj);
  671. $("#op2sxdcl").html(info.op2sxdcl);
  672. $("#op1xxjh").html(info.op1xxjh);
  673. $("#op1xxsj").html(info.op1xxsj);
  674. $("#op1xxdcl").html(info.op1xxdcl);
  675. $("#op1sxjh").html(info.op1sxjh);
  676. $("#op1sxsj").html(info.op1sxsj);
  677. $("#op1sxdcl").html(info.op1sxdcl);
  678. $("#xzcxxjh").html(info.xzcxxjh);
  679. $("#xzcxxsj").html(info.xzcxxsj);
  680. $("#xzcxxdcl").html(info.xzcxxdcl);
  681. $("#xzcsxjh").html(info.xzcsxjh);
  682. $("#xzcsxsj").html(info.xzcsxsj);
  683. $("#xzcsxdcl").html(info.xzcsxdcl);
  684. }else{
  685. $("#jp1").html("0");
  686. $("#jp2").html("0");
  687. $("#jp3").html("0");
  688. $("#avgjp1").html("0");
  689. $("#avgjp2").html("0");
  690. $("#avgjp3").html("0");
  691. $("#ftt1").html("0");
  692. $("#ftt2").html("0");
  693. $("#ftt3").html("0");
  694. $("#op2xxjh").html("0");
  695. $("#op2xxsj").html("0");
  696. $("#op2xxdcl").html("0");
  697. $("#op2sxjh").html("0");
  698. $("#op2sxsj").html("0");
  699. $("#op2sxdcl").html("0");
  700. $("#op1xxjh").html("0");
  701. $("#op1xxsj").html("0");
  702. $("#op1xxdcl").html("0");
  703. $("#op1sxjh").html("0");
  704. $("#op1sxsj").html("0");
  705. $("#op1sxdcl").html("0");
  706. $("#xzcxxjh").html("0");
  707. $("#xzcxxsj").html("0");
  708. $("#xzcxxdcl").html("0");
  709. $("#xzcsxjh").html("0");
  710. $("#xzcsxsj").html("0");
  711. $("#xzcsxdcl").html("0");
  712. }
  713. for(let o in devices){
  714. $("."+devices.gw).removeClass("cur1");
  715. $("."+devices.gw).removeClass("cur2");
  716. $("."+devices.gw).removeClass("cur3");
  717. $("."+devices.gw).removeClass("cur4");
  718. if(devices.workStatus == "1"||devices.workStatus == "2"||devices.workStatus == "5"){
  719. $("."+devices.oprno).addClass("cur1");
  720. }else if(devices.workStatus == "3"||devices.workStatus == "4"||devices.workStatus == "6"){
  721. $("."+devices.oprno).addClass("cur3");
  722. }else if(devices.workStatus == "7"){
  723. $("."+devices.oprno).addClass("cur4");
  724. }else if(devices.workStatus == "8"){
  725. $("."+devices.oprno).addClass("cur2");
  726. }
  727. }
  728. }
  729. </script>
  730. </body>
  731. </html>