situation.html 35 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <script src="echarts.min.js"></script>
  7. <script src="swiper.min.js"></script>
  8. <script src="color.js"></script>
  9. <title>Document</title>
  10. <style>
  11. @media screen and (min-height:940px) {
  12. .center {
  13. margin-top: 196px !important;
  14. transform: scale(1.144);
  15. }
  16. .left,
  17. .right {
  18. margin-top: 219px !important;
  19. transform: scale(1.2) !important;
  20. margin-right: 1vh;
  21. }
  22. .right {
  23. margin-left: 102px !important;
  24. }
  25. .left {
  26. margin-left: 71px !important;
  27. margin-right: 44px;
  28. }
  29. }
  30. * {
  31. padding: 0;
  32. margin: 0;
  33. }
  34. .left,
  35. .right {
  36. transform: scale(1.08);
  37. }
  38. /* .center{
  39. transform: scale(1.02);
  40. } */
  41. @font-face {
  42. font-family: 'IMPACT';
  43. src: url('IMPACT.ttf');
  44. font-family: 'New-X-Digital-tfb-2';
  45. src: url('New-X-Digital-tfb-2.ttf');
  46. }
  47. .out {
  48. background-image: url(img/taishibg.png);
  49. background-size: 100% 100%;
  50. height: 100%;
  51. position: fixed;
  52. width: 100%;
  53. /* padding-top: -4vh; */
  54. background-repeat: no-repeat;
  55. overflow: auto;
  56. min-width: 1200px;
  57. display: flex;
  58. flex-direction: row;
  59. overflow-x: hidden;
  60. overflow-y: hidden;
  61. z-index: -1;
  62. }
  63. .title {
  64. position: fixed;
  65. top: -2px;
  66. width: 100%;
  67. }
  68. .left {
  69. margin-top: 7vw;
  70. margin-left: 5.6vw;
  71. }
  72. .left1 {
  73. background-image: url(img/l12.png);
  74. height: 218px;
  75. width: 400px;
  76. background-size: 100%;
  77. background-repeat: no-repeat;
  78. padding-top: 1.5vh;
  79. padding-left: 0.5vw;
  80. box-sizing: border-box;
  81. }
  82. .demot {
  83. background-image: url(img/dtitle.png);
  84. text-align: left;
  85. color: white;
  86. font-size: 12px;
  87. /* padding-top: 1vh; */
  88. margin-left: 0.3vw;
  89. background-size: 100%;
  90. line-height: 23px;
  91. width: 20vw;
  92. height: 22px;
  93. background-repeat: no-repeat;
  94. }
  95. .demot p {
  96. margin-left: 2vw;
  97. }
  98. .left1_b {
  99. margin-top: 1vh;
  100. font-size: 12px;
  101. color: white;
  102. background-color: #033a5d;
  103. height: 33px;
  104. line-height: 31px;
  105. width: 186px;
  106. text-align: center;
  107. display: inline-block;
  108. }
  109. .left1_s {
  110. margin-top: 4px;
  111. font-size: 12px;
  112. color: white;
  113. border: 1px solid #033a5d;
  114. height: 33px;
  115. line-height: 31px;
  116. width: 160px;
  117. text-align: justify;
  118. display: inline-block;
  119. padding-left: 24px;
  120. }
  121. .left1 span {
  122. margin-left: 0.5vw;
  123. font-size: 18px;
  124. color: #30fdff;
  125. }
  126. .left1_l {
  127. margin-top: 4px;
  128. font-size: 12px;
  129. color: white;
  130. border: 1px solid #033a5d;
  131. height: 33px;
  132. line-height: 31px;
  133. width: 374px;
  134. text-align: center;
  135. }
  136. .left2 {
  137. background-image: url(img/l2.png);
  138. height: 285px;
  139. width: 400px;
  140. background-size: 100%;
  141. background-repeat: no-repeat;
  142. padding-top: 1.5vh;
  143. padding-left: 0.5vw;
  144. box-sizing: border-box;
  145. }
  146. .left2_d {
  147. margin-top: 1vh;
  148. font-size: 12px;
  149. color: white;
  150. width: 126px;
  151. text-align: center;
  152. display: inline-block;
  153. margin-bottom: 1vh;
  154. }
  155. .left2_d span {
  156. margin-left: 0.5vw;
  157. font-family: 'IMPACT';
  158. font-size: 22px;
  159. color: #30fdff;
  160. }
  161. .left3 {
  162. background-image: url(img/l21.png);
  163. height: 265px;
  164. width: 400px;
  165. box-sizing: border-box;
  166. background-size: 100%;
  167. background-repeat: no-repeat;
  168. padding-top: 1.5vh;
  169. padding-left: 0.5vw;
  170. }
  171. #left3_d {
  172. width: 450px;
  173. height: 275px;
  174. transform: scale(0.8);
  175. margin-top: -30px;
  176. margin-left: -35px;
  177. color: white;
  178. }
  179. .center {
  180. margin-top: 6.6vw;
  181. margin-left: 3vw;
  182. width: 780px;
  183. }
  184. .center1 {
  185. background-image: url(img/c12.png);
  186. height: 371px;
  187. width: 780px;
  188. background-size: 100%;
  189. background-repeat: no-repeat;
  190. padding-top: 1.5vh;
  191. display: flex;
  192. justify-content: space-around;
  193. flex-wrap: wrap;
  194. }
  195. .center2 {
  196. /* background-image: url(img/cl1.png); */
  197. height: 199px;
  198. width: 370px;
  199. background-size: 100%;
  200. background-repeat: no-repeat;
  201. padding-top: 1.5vh;
  202. padding-left: 0.5vw;
  203. box-sizing: border-box;
  204. }
  205. #center2_d {
  206. width: 380px;
  207. height: 170px;
  208. /* margin-top: -13px; */
  209. }
  210. .center3 {
  211. /* background-image: url(img/cl1.png); */
  212. height: 225px;
  213. width: 403px;
  214. background-size: 100%;
  215. background-repeat: no-repeat;
  216. padding-top: 1.5vh;
  217. padding-left: 0.5vw;
  218. box-sizing: border-box;
  219. }
  220. #center3_d {
  221. width: 600px;
  222. height: 290px;
  223. transform: scale(0.7);
  224. position: relative;
  225. top: -36px;
  226. left: -100px;
  227. }
  228. .center4 {
  229. background-image: url(img/c3.png);
  230. height: 393px;
  231. width: 780px;
  232. background-size: 100%;
  233. background-repeat: no-repeat;
  234. padding-top: 1.5vh;
  235. padding-left: 0.5vw;
  236. box-sizing: border-box;
  237. }
  238. .center4_d {
  239. display: inline-block;
  240. transform: scale(0.7);
  241. margin-left: 0.3vw;
  242. margin-top: -26px;
  243. }
  244. .center4_d img {
  245. width: 70px;
  246. height: 70px;
  247. margin-right: 20px;
  248. }
  249. .center4_l {
  250. color: white;
  251. font-size: 12px;
  252. margin-top: 0.9vh;
  253. margin-left: 0.3vw;
  254. display: inline-block;
  255. margin-right: 80px;
  256. }
  257. .center4_l div {
  258. display: inline-block;
  259. margin-right: 8px;
  260. box-sizing: content-box;
  261. }
  262. .center4_b {
  263. margin-top: 0.8vh;
  264. margin-left: 0.3vw;
  265. color: white;
  266. font-size: 12px;
  267. background-color: rgba(3, 58, 93, 0.3);
  268. border: 0.1px solid #052c41;
  269. height: 50px;
  270. width: 140px;
  271. line-height: 50px;
  272. text-align: center;
  273. }
  274. .center4_b span {
  275. font-family: 'IMPACT';
  276. font-size: 22px;
  277. margin-left: 20px;
  278. }
  279. .center4_s {
  280. /* transform: scale(0.8); */
  281. position: relative;
  282. top: -165px;
  283. left: 153px;
  284. margin-bottom: 5px;
  285. /* margin-top: 10px; */
  286. }
  287. .center4_s img {
  288. width: 45px;
  289. height: 45px;
  290. margin-right: 10px;
  291. }
  292. .center4_y {
  293. color: white;
  294. font-size: 12px;
  295. position: relative;
  296. top: -338px;
  297. left: 290px;
  298. margin-bottom: 20px;
  299. }
  300. .center4_y img {
  301. width: 50px;
  302. }
  303. .right {
  304. margin-top: 7vw;
  305. margin-left: 3vw;
  306. }
  307. .icon {
  308. animation: myMove 1s infinite;
  309. transform: scale(1.2);
  310. }
  311. .icon2 {
  312. animation: breathe 2s infinite;
  313. transform: scale(1.2);
  314. margin: 0 auto;
  315. width: 8px;
  316. height: 5px;
  317. background-color: #f0422a;
  318. }
  319. @-webkit-keyframes breathe {
  320. 0% {
  321. opacity: .6;
  322. box-shadow: 0 1px 2px rgba(240, 66, 42, 0.6);
  323. transform: scale(1, 1);
  324. -moz-transform: scale(1, 1);
  325. -webkit-transform: scale(1, 1);
  326. -o-transform: scale(1, 1);
  327. -ms-transform: scale(1, 1);
  328. }
  329. 50% {
  330. opacity: .8;
  331. box-shadow: 0 1px 2px rgba(240, 66, 42, 0.8);
  332. transform: scale(1.2, 1.2);
  333. -moz-transform: scale(1.2, 1.2);
  334. -webkit-transform: scale(1.2, 1.2);
  335. -o-transform: scale(1.2, 1.2);
  336. -ms-transform: scale(1.2, 1.2);
  337. }
  338. 100% {
  339. opacity: 1;
  340. box-shadow: 0 2px 30px #f0422a;
  341. transform: scale(1, 1);
  342. -moz-transform: scale(1, 1);
  343. -webkit-transform: scale(1, 1);
  344. -o-transform: scale(1, 1);
  345. -ms-transform: scale(1, 1);
  346. }
  347. }
  348. @keyframes myMove {
  349. 0% {
  350. transform: scale(1, 1);
  351. -moz-transform: scale(1, 1);
  352. -webkit-transform: scale(1, 1);
  353. -o-transform: scale(1, 1);
  354. -ms-transform: scale(1, 1);
  355. }
  356. 50% {
  357. transform: scale(1.2, 1.2);
  358. -moz-transform: scale(1.2, 1.2);
  359. -webkit-transform: scale(1.2, 1.2);
  360. -o-transform: scale(1.2, 1.2);
  361. -ms-transform: scale(1.2, 1.2);
  362. }
  363. 100% {
  364. transform: scale(1, 1);
  365. -moz-transform: scale(1, 1);
  366. -webkit-transform: scale(1, 1);
  367. -o-transform: scale(1, 1);
  368. -ms-transform: scale(1, 1);
  369. }
  370. }
  371. .right2 {
  372. /* background-image: url(img/r2.png); */
  373. height: 270px;
  374. width: 400px;
  375. background-size: 100%;
  376. background-repeat: no-repeat;
  377. /* padding-top: 1.5vh; */
  378. padding-left: 0.5vw;
  379. box-sizing: border-box;
  380. }
  381. .right2_d {
  382. color: white;
  383. font-size: 15px;
  384. text-align: center;
  385. display: inline-block;
  386. background-color: #052c41;
  387. height: 30px;
  388. width: 140px;
  389. margin-top: 0.5vh;
  390. }
  391. .right2_d span {
  392. color: #30fdff;
  393. font-size: 22px;
  394. margin-left: 10px;
  395. font-family: 'IMPACT';
  396. }
  397. .right2_b {
  398. color: white;
  399. font-size: 15px;
  400. text-align: center;
  401. display: inline-block;
  402. background-color: rgba(207, 60, 42, 0.3);
  403. height: 30px;
  404. width: 160px;
  405. margin-top: 0.5vh;
  406. margin-bottom: 0.5vh;
  407. }
  408. .right2_b span {
  409. color: #f0422a;
  410. font-size: 22px;
  411. margin-left: 10px;
  412. font-family: 'IMPACT';
  413. }
  414. .right3 {
  415. background-image: url(img/r3.png);
  416. height: 270px;
  417. width: 402px;
  418. background-size: 100%;
  419. background-repeat: no-repeat;
  420. padding-top: 1.5vh;
  421. /* padding-left: 0.5vw; */
  422. box-sizing: border-box;
  423. }
  424. #right3_1 {
  425. display: inline-block;
  426. width: 430px;
  427. height: 400px;
  428. transform: scale(0.52);
  429. position: relative;
  430. top: -105px;
  431. left: -120px;
  432. box-sizing: border-box;
  433. }
  434. #demo {
  435. width: 400px;
  436. height: 400px;
  437. position: relative;
  438. top: -513px;
  439. left: 95px;
  440. transform: scale(0.5);
  441. display: inline-block;
  442. }
  443. .swiper-container {
  444. width: 400px;
  445. height: 200px;
  446. }
  447. /*插件的wrapper 这是关键, 覆盖插件默认切换效果为匀速*/
  448. .swiper-wrapper {
  449. transition-timing-function: linear;
  450. }
  451. .swiper-slide {
  452. display: inline-block;
  453. height: 23px !important;
  454. }
  455. .right1 td {
  456. width: 76px;
  457. height: 23px;
  458. }
  459. .right1 {
  460. background-image: url(img/r1.png);
  461. height: 230px;
  462. width: 400px;
  463. background-size: 100%;
  464. background-repeat: no-repeat;
  465. padding-top: 1.5vh;
  466. padding-left: 0.5vw;
  467. box-sizing: border-box;
  468. color: white;
  469. font-size: 12px;
  470. text-align: center;
  471. overflow: hidden;
  472. padding-bottom: 20px;
  473. margin-bottom: 4px;
  474. }
  475. .center1_d {
  476. font-size: 12px;
  477. color: white;
  478. display: inline-block;
  479. margin-bottom: 10px;
  480. }
  481. .center1_d img {
  482. width: 40px;
  483. height: 40px;
  484. }
  485. .center1_d div {
  486. display: inline-block;
  487. font-size: 35px;
  488. font-family: 'IMPACT';
  489. background-color: #0c3361;
  490. margin-left: 5px;
  491. width: 25px;
  492. text-align: center;
  493. color: #ff9000;
  494. }
  495. .right4 {
  496. background-image: url(img/r2.png);
  497. height: 257px;
  498. width: 400px;
  499. background-size: 100%;
  500. background-repeat: no-repeat;
  501. padding-top: 1.5vh;
  502. padding-left: 0.5vw;
  503. box-sizing: border-box;
  504. }
  505. .anniu {
  506. background: url(img/anniu.png) no-repeat;
  507. background-size: 100%;
  508. width: 250px;
  509. height: 210px;
  510. }
  511. .time {
  512. /* margin-top: 3px; */
  513. font-size: 9px;
  514. color: white;
  515. text-align: center;
  516. display: inline-block;
  517. transform: scale(0.9);
  518. margin-left: -7px;
  519. }
  520. .time td {
  521. height: 33px;
  522. width: 65px;
  523. background-color: #0c3361;
  524. }
  525. .people {
  526. /* margin-top: 3px; */
  527. font-size: 9px;
  528. color: white;
  529. text-align: center;
  530. display: inline-block;
  531. transform: scale(0.9);
  532. margin-left: -12px;
  533. margin-right: -13px;
  534. }
  535. .people td {
  536. height: 33px;
  537. width: 60px;
  538. background-color: #0c3361;
  539. }
  540. .grade {
  541. /* margin-top: 3px; */
  542. font-size: 9px;
  543. color: white;
  544. text-align: center;
  545. display: inline-block;
  546. transform: scale(0.9);
  547. }
  548. .grade td {
  549. height: 33px;
  550. width: 60px;
  551. background-color: #0c3361;
  552. }
  553. .center22 {
  554. background-image: url(img/center.png);
  555. width: 780px;
  556. height: 211px;
  557. background-size: 100%;
  558. background-repeat: no-repeat;
  559. padding-top: 1.5vh;
  560. padding-left: 0.5vw;
  561. box-sizing: border-box;
  562. }
  563. #center22 {
  564. width: 780px;
  565. height: 300px;
  566. transform: scale(1.1);
  567. margin-top: -25px;
  568. }
  569. .center23 {
  570. background-image: url(img/center.png);
  571. width: 800px;
  572. height: 500px;
  573. background-size: 100%;
  574. background-repeat: no-repeat;
  575. padding-top: 1.5vh;
  576. padding-left: 0.5vw;
  577. box-sizing: border-box;
  578. }
  579. #centerl {
  580. width: 780px;
  581. height: 200px;
  582. margin-top: -10px;
  583. }
  584. .center_32 {
  585. background-image: url(img/c2.png);
  586. height: 261px;
  587. width: 780px;
  588. background-size: 100%;
  589. background-repeat: no-repeat;
  590. padding-top: 1.5vh;
  591. display: flex;
  592. /* justify-content: space-around; */
  593. flex-wrap: wrap;
  594. }
  595. </style>
  596. </head>
  597. <body onload="startTime()">
  598. <div class="out">
  599. <div class="left">
  600. <div class="left1">
  601. <div class="demot">
  602. <p>今日值班</p>
  603. </div>
  604. <div class="left1_b" style="letter-spacing: 3px;">值班首长<span style="margin-left: 8px;">李晓明</span> </div>
  605. <div class="left1_b" style="letter-spacing: 2px;padding-left: 6px;width: 180px;">作战值班员<span>孟光旭</span>
  606. </div><br>
  607. <div class="left1_s">机要值班员<span style="letter-spacing: 2px;">贾洪全</span></div>
  608. <div class="left1_s">政治部值班员<span style="letter-spacing: 19px;">陈强</span></div>
  609. <div class="left1_s">通信值班员<span style="letter-spacing: 2px;">李国通</span></div>
  610. <div class="left1_s">保障部值班员<span>孔龚鹏</span></div>
  611. <div class="left1_l">值班分队<span>一队</span></div>
  612. </div>
  613. <div class="left2">
  614. <div class="demot">
  615. <p>装备值班情况</p>
  616. </div>
  617. <div class="left2_d">总计<span>126</span></div>
  618. <div class="left2_d">试验<span>420</span></div>
  619. <div class="left2_d">通用<span>365</span></div>
  620. <div class="demot">
  621. <p>军事训练月统计情况</p>
  622. </div>
  623. <div class="center4_l" style="margin-right: 85px;">
  624. <div style="background-color: #1d79b5;width: 5px;height: 15px;"></div>参训时间
  625. </div>
  626. <div class="center4_l" style="margin-right: 70px;margin-left: -7px;">
  627. <div style="background-color: #1d79b5;width: 5px;height: 15px;"></div>兵力
  628. </div>
  629. <div class="center4_l" style="margin-right: 70px;">
  630. <div style="background-color: #1d79b5;width: 5px;height: 15px;"></div>成绩
  631. </div>
  632. <table class="time">
  633. <tr style="font-size:12px;color: #30fdff;font-weight: bold;">
  634. <td>训练类别</td>
  635. <td style="width: 84px;">人均参训时间</td>
  636. </tr>
  637. <tr>
  638. <td>合成训练</td>
  639. <td>30小时</td>
  640. </tr>
  641. <tr>
  642. <td>分业训练</td>
  643. <td>50小时</td>
  644. </tr>
  645. <tr>
  646. <td>共同训练</td>
  647. <td>45小时</td>
  648. </tr>
  649. </table>
  650. <table class="people">
  651. <tr>
  652. <td>实有人数</td>
  653. <td style=" font-family: 'IMPACT';color: #30fdff;font-size: 20px;">547</td>
  654. </tr>
  655. <tr>
  656. <td>参训人数</td>
  657. <td style=" font-family: 'IMPACT';color: #30fdff;font-size: 20px;">492</td>
  658. </tr>
  659. <tr>
  660. <td>
  661. <p style="font-size: 9px;color: white;text-align: center;transform: scale(0.9);">未参训人数</p>
  662. </td>
  663. <td style=" font-family: 'IMPACT';color: #30fdff;font-size: 20px;">115</td>
  664. </tr>
  665. <tr>
  666. <td>参训率</td>
  667. <td style=" font-family: 'IMPACT';color: #30fdff;font-size: 20px;">90%</td>
  668. </tr>
  669. </table>
  670. <table class="grade">
  671. <tr>
  672. <td>考核人次</td>
  673. <td style=" font-family: 'IMPACT';color: #30fdff;font-size: 20px;">547</td>
  674. </tr>
  675. <tr>
  676. <td>优良</td>
  677. <td style=" font-family: 'IMPACT';color: #30fdff;font-size: 20px;">247</td>
  678. </tr>
  679. <tr>
  680. <td>及格</td>
  681. <td style=" font-family: 'IMPACT';color: #30fdff;font-size: 20px;">195</td>
  682. </tr>
  683. <tr>
  684. <td>未及格</td>
  685. <td style=" font-family: 'IMPACT';color: #30fdff;font-size: 20px;">5</td>
  686. </tr>
  687. </table>
  688. </div>
  689. <div class="left3">
  690. <div class="demot">
  691. <p>车辆在位情况</p>
  692. </div>
  693. <div class="center4_l">
  694. <div style="background-color: #1d79b5;width: 5px;height: 15px;"></div>军车管理
  695. </div>
  696. <div class="center4_l">
  697. <div style="background-color: #1d79b5;width: 5px;height: 15px;"></div>私家车管理
  698. </div>
  699. <div class="center4_b">总计<span style="color: #30fdff;">256</span> </div>
  700. <div class="center4_b">在位<span style="color: #fde17b;">255</span> </div>
  701. <div class="center4_b">外出<span style="color: #f0422a;margin-left:45px;">1</span> </div>
  702. <table class="center4_s">
  703. <tr>
  704. <td rowspan="2"><img src="img/cheliangz.png" alt=""></td>
  705. <td style="color: #30fdff;font-family: 'IMPACT';font-size: 22px;">183</td>
  706. </tr>
  707. <tr>
  708. <td style="font-size: 15px;color: white;">车辆统计</td>
  709. </tr>
  710. </table>
  711. <table class="center4_s">
  712. <tr>
  713. <td rowspan="2"><img src="img/cheliangz.png" alt=""></td>
  714. <td style="color: #30fdff;font-family: 'IMPACT';font-size: 22px;">163</td>
  715. </tr>
  716. <tr>
  717. <td style="font-size: 15px;color: white;">车辆在位</td>
  718. </tr>
  719. </table>
  720. <table class="center4_s">
  721. <tr>
  722. <td rowspan="2"><img src="img/cheliangz.png" alt=""></td>
  723. <td style="color: #30fdff;font-family: 'IMPACT';font-size: 22px;">20</td>
  724. </tr>
  725. <tr>
  726. <td style="font-size: 15px;color: white;">车辆出场</td>
  727. </tr>
  728. </table>
  729. <table class="center4_y">
  730. <tr>
  731. <td><img src="img/cheliangq.png" alt=""></td>
  732. <td style="font-family: 'IMPACT';font-size: 22px;color: #b4372a;">1</td>
  733. </tr>
  734. <tr>
  735. <td colspan="2" style="letter-spacing: 7px;">夜间进入</td>
  736. </tr>
  737. </table>
  738. <table class="center4_y">
  739. <tr>
  740. <td><img src="img/cheliangq.png" alt=""></td>
  741. <td style="font-family: 'IMPACT';font-size: 22px;color: #b4372a;">1</td>
  742. </tr>
  743. <tr>
  744. <td colspan="2" style="letter-spacing: 7px;">外来车辆</td>
  745. </tr>
  746. </table>
  747. </div>
  748. </div>
  749. <div class="center">
  750. <div class="center1">
  751. <div style="height: 0px;">
  752. <table class="center1_d">
  753. <tr>
  754. <td></td>
  755. <td style="padding-left:7px;padding-bottom: 5px;">在位总数</td>
  756. </tr>
  757. <tr>
  758. <td><img src="img/zong.png" alt=""></td>
  759. <td>
  760. <div>5</div>
  761. <div>4</div>
  762. <div>7</div>
  763. </td>
  764. </tr>
  765. </table>
  766. <table class="center1_d">
  767. <tr>
  768. <td></td>
  769. <td style="padding-left:7px;padding-bottom: 5px;">纳编在位</td>
  770. </tr>
  771. <tr>
  772. <td><img src="img/zaiwei.png" alt=""></td>
  773. <td>
  774. <div>4</div>
  775. <div>5</div>
  776. <div>1</div>
  777. </td>
  778. </tr>
  779. </table>
  780. <table class="center1_d">
  781. <tr>
  782. <td></td>
  783. <td style="padding-left:7px;padding-bottom: 5px;">纳编外出</td>
  784. </tr>
  785. <tr>
  786. <td><img src="img/waichu.png" alt=""></td>
  787. <td>
  788. <div>&nbsp;</div>
  789. <div>0</div>
  790. <div>5</div>
  791. </td>
  792. </tr>
  793. </table>
  794. <table class="center1_d">
  795. <tr>
  796. <td></td>
  797. <td style="padding-left:7px;padding-bottom: 5px;">未纳编在位</td>
  798. </tr>
  799. <tr>
  800. <td><img src="img/zaiwei.png" alt=""></td>
  801. <td>
  802. <div>&nbsp;</div>
  803. <div>9</div>
  804. <div>6</div>
  805. </td>
  806. </tr>
  807. </table>
  808. <table class="center1_d">
  809. <tr>
  810. <td></td>
  811. <td style="padding-left:7px;padding-bottom: 5px;">未纳编外出</td>
  812. </tr>
  813. <tr>
  814. <td><img src="img/waichu.png" alt=""></td>
  815. <td>
  816. <div>&nbsp;</div>
  817. <div>0</div>
  818. <div>8</div>
  819. </td>
  820. </tr>
  821. </table>
  822. </div>
  823. <div class="center2" style="margin-top: 55px;">
  824. <div class="demot">
  825. <p>各单位人员在位情况</p>
  826. </div>
  827. <div id="center2_d"></div>
  828. </div>
  829. <br>
  830. <div class="center3" style="padding-top: 72px;">
  831. <div class="demot">
  832. <p>外出人员占比</p>
  833. </div>
  834. <div id="center3_d"></div>
  835. </div>
  836. <div class="demot" style="margin-right: 315px;margin-left: -37px;margin-bottom: -4px;">
  837. <p>人员请销假</p>
  838. </div>
  839. <div class="right2_d" style="margin-left: 10px;">今日迟到<span>0</span> </div>
  840. <div class="right2_d">本月迟到<span>0</span> </div>
  841. <div class="right2_d">应归队<span>0</span> </div>
  842. <div class="right2_b">超时归<span>0</span> </div>
  843. <div class="right2_b" style="margin-right: 10px;">未归队<span>0</span> </div>
  844. </div>
  845. <div class="center_32">
  846. <div class="right2">
  847. <div class="demot">
  848. <p>检查督导统计</p>
  849. </div>
  850. <div id="center22"></div>
  851. </div>
  852. </div>
  853. <div class="center4">
  854. <div class="demot">
  855. <p>营房营具管理</p>
  856. </div>
  857. <table class="center4_d" style="margin-top: 10px;margin-left: 30px;">
  858. <tr>
  859. <td rowspan="2"><img src="img/yinfangz.png" alt=""></td>
  860. <td style="color: #30fdff;font-family: 'IMPACT';font-size: 28px;">100</td>
  861. </tr>
  862. <tr>
  863. <td style="font-size: 18px;color: white;">营房统计</td>
  864. </tr>
  865. </table>
  866. <table class="center4_d" style="margin-top: 10px;">
  867. <tr>
  868. <td rowspan="2"><img src="img/yinfangz.png" alt=""></td>
  869. <td style="color: #30fdff;font-family: 'IMPACT';font-size: 28px;">56</td>
  870. </tr>
  871. <tr>
  872. <td style="font-size: 18px;color: white;">营房使用</td>
  873. </tr>
  874. </table>
  875. <table class="center4_d">
  876. <tr>
  877. <td rowspan="2"><img src="img/yinjus.png" alt=""></td>
  878. <td style="color: #e6923e;font-family: 'IMPACT';font-size: 28px;">100</td>
  879. </tr>
  880. <tr>
  881. <td style="font-size: 18px;color: white;">营具统计</td>
  882. </tr>
  883. </table>
  884. <table class="center4_d">
  885. <tr>
  886. <td rowspan="2"><img src="img/yinjus.png" alt=""></td>
  887. <td style="color: #e6923e;font-family: 'IMPACT';font-size: 28px;">56</td>
  888. </tr>
  889. <tr>
  890. <td style="font-size: 18px;color: white;">营具使用</td>
  891. </tr>
  892. </table>
  893. </div>
  894. </div>
  895. <div class="right">
  896. <div class="right1">
  897. <div class="demot">
  898. <p>登统计落实</p>
  899. </div>
  900. <table style="margin-top: 10px;">
  901. <tr>
  902. <td>落实单位</td>
  903. <td>工作计划</td>
  904. <td>查铺岗哨</td>
  905. <td>教育活动</td>
  906. <td>会议记录</td>
  907. </tr>
  908. </table>
  909. <div class="swiper-container" style="height: 140px;overflow: hidden;margin-top: 5px;">
  910. <div class="swiper-wrapper">
  911. <div class="swiper-slide">
  912. <table>
  913. <tr>
  914. <td>一队</td>
  915. <td><svg t="1638612550724" class="icon2" viewBox="0 0 1024 1024" version="1.1"
  916. xmlns="http://www.w3.org/2000/svg" p-id="3323" width="20" height="10">
  917. <path d="M920 789H104l-40-40V275l40-40h816l40 40v474l-40 40z" p-id="3324"
  918. fill="#d03c2a"></path>
  919. </svg></td>
  920. <td><svg t="1638612550724" class="icon" viewBox="0 0 1024 1024" version="1.1"
  921. xmlns="http://www.w3.org/2000/svg" p-id="3323" width="20" height="10">
  922. <path d="M920 789H104l-40-40V275l40-40h816l40 40v474l-40 40z" p-id="3324"
  923. fill="#00a041"></path>
  924. </svg></td>
  925. <td><svg t="1638612550724" class="icon" viewBox="0 0 1024 1024" version="1.1"
  926. xmlns="http://www.w3.org/2000/svg" p-id="3323" width="20" height="10">
  927. <path d="M920 789H104l-40-40V275l40-40h816l40 40v474l-40 40z" p-id="3324"
  928. fill="#00a041"></path>
  929. </svg></td>
  930. <td><svg t="1638612550724" class="icon" viewBox="0 0 1024 1024" version="1.1"
  931. xmlns="http://www.w3.org/2000/svg" p-id="3323" width="20" height="10">
  932. <path d="M920 789H104l-40-40V275l40-40h816l40 40v474l-40 40z" p-id="3324"
  933. fill="#00a041"></path>
  934. </svg></td>
  935. </tr>
  936. </table>
  937. </div>
  938. <div class="swiper-slide">
  939. <table>
  940. <tr>
  941. <td>二队</td>
  942. <td><svg t="1638612550724" class="icon" viewBox="0 0 1024 1024" version="1.1"
  943. xmlns="http://www.w3.org/2000/svg" p-id="3323" width="20" height="10">
  944. <path d="M920 789H104l-40-40V275l40-40h816l40 40v474l-40 40z" p-id="3324"
  945. fill="#00a041"></path>
  946. </svg></td>
  947. <td><svg t="1638612550724" class="icon2" viewBox="0 0 1024 1024" version="1.1"
  948. xmlns="http://www.w3.org/2000/svg" p-id="3323" width="20" height="10">
  949. <path d="M920 789H104l-40-40V275l40-40h816l40 40v474l-40 40z" p-id="3324"
  950. fill="#d03c2a"></path>
  951. </svg></td>
  952. <td><svg t="1638612550724" class="icon" viewBox="0 0 1024 1024" version="1.1"
  953. xmlns="http://www.w3.org/2000/svg" p-id="3323" width="20" height="10">
  954. <path d="M920 789H104l-40-40V275l40-40h816l40 40v474l-40 40z" p-id="3324"
  955. fill="#00a041"></path>
  956. </svg></td>
  957. <td><svg t="1638612550724" class="icon" viewBox="0 0 1024 1024" version="1.1"
  958. xmlns="http://www.w3.org/2000/svg" p-id="3323" width="20" height="10">
  959. <path d="M920 789H104l-40-40V275l40-40h816l40 40v474l-40 40z" p-id="3324"
  960. fill="#00a041"></path>
  961. </svg></td>
  962. </tr>
  963. </table>
  964. </div>
  965. <div class="swiper-slide">
  966. <table>
  967. <tr>
  968. <td>一连</td>
  969. <td><svg t="1638612550724" class="icon" viewBox="0 0 1024 1024" version="1.1"
  970. xmlns="http://www.w3.org/2000/svg" p-id="3323" width="20" height="10">
  971. <path d="M920 789H104l-40-40V275l40-40h816l40 40v474l-40 40z" p-id="3324"
  972. fill="#00a041"></path>
  973. </svg></td>
  974. <td><svg t="1638612550724" class="icon" viewBox="0 0 1024 1024" version="1.1"
  975. xmlns="http://www.w3.org/2000/svg" p-id="3323" width="20" height="10">
  976. <path d="M920 789H104l-40-40V275l40-40h816l40 40v474l-40 40z" p-id="3324"
  977. fill="#00a041"></path>
  978. </svg></td>
  979. <td><svg t="1638612550724" class="icon" viewBox="0 0 1024 1024" version="1.1"
  980. xmlns="http://www.w3.org/2000/svg" p-id="3323" width="20" height="10">
  981. <path d="M920 789H104l-40-40V275l40-40h816l40 40v474l-40 40z" p-id="3324"
  982. fill="#00a041"></path>
  983. </svg></td>
  984. <td><svg t="1638612550724" class="icon" viewBox="0 0 1024 1024" version="1.1"
  985. xmlns="http://www.w3.org/2000/svg" p-id="3323" width="20" height="10">
  986. <path d="M920 789H104l-40-40V275l40-40h816l40 40v474l-40 40z" p-id="3324"
  987. fill="#00a041"></path>
  988. </svg></td>
  989. </tr>
  990. </table>
  991. </div>
  992. <div class="swiper-slide">
  993. <table>
  994. <tr>
  995. <td>二连</td>
  996. <td><svg t="1638612550724" class="icon" viewBox="0 0 1024 1024" version="1.1"
  997. xmlns="http://www.w3.org/2000/svg" p-id="3323" width="20" height="10">
  998. <path d="M920 789H104l-40-40V275l40-40h816l40 40v474l-40 40z" p-id="3324"
  999. fill="#00a041"></path>
  1000. </svg></td>
  1001. <td><svg t="1638612550724" class="icon" viewBox="0 0 1024 1024" version="1.1"
  1002. xmlns="http://www.w3.org/2000/svg" p-id="3323" width="20" height="10">
  1003. <path d="M920 789H104l-40-40V275l40-40h816l40 40v474l-40 40z" p-id="3324"
  1004. fill="#00a041"></path>
  1005. </svg></td>
  1006. <td><svg t="1638612550724" class="icon" viewBox="0 0 1024 1024" version="1.1"
  1007. xmlns="http://www.w3.org/2000/svg" p-id="3323" width="20" height="10">
  1008. <path d="M920 789H104l-40-40V275l40-40h816l40 40v474l-40 40z" p-id="3324"
  1009. fill="#00a041"></path>
  1010. </svg></td>
  1011. <td><svg t="1638612550724" class="icon" viewBox="0 0 1024 1024" version="1.1"
  1012. xmlns="http://www.w3.org/2000/svg" p-id="3323" width="20" height="10">
  1013. <path d="M920 789H104l-40-40V275l40-40h816l40 40v474l-40 40z" p-id="3324"
  1014. fill="#00a041"></path>
  1015. </svg></td>
  1016. </tr>
  1017. </table>
  1018. </div>
  1019. <div class="swiper-slide">
  1020. <table>
  1021. <tr>
  1022. <td>三连</td>
  1023. <td><svg t="1638612550724" class="icon" viewBox="0 0 1024 1024" version="1.1"
  1024. xmlns="http://www.w3.org/2000/svg" p-id="3323" width="20" height="10">
  1025. <path d="M920 789H104l-40-40V275l40-40h816l40 40v474l-40 40z" p-id="3324"
  1026. fill="#00a041"></path>
  1027. </svg></td>
  1028. <td><svg t="1638612550724" class="icon" viewBox="0 0 1024 1024" version="1.1"
  1029. xmlns="http://www.w3.org/2000/svg" p-id="3323" width="20" height="10">
  1030. <path d="M920 789H104l-40-40V275l40-40h816l40 40v474l-40 40z" p-id="3324"
  1031. fill="#00a041"></path>
  1032. </svg></td>
  1033. <td><svg t="1638612550724" class="icon2" viewBox="0 0 1024 1024" version="1.1"
  1034. xmlns="http://www.w3.org/2000/svg" p-id="3323" width="20" height="10">
  1035. <path d="M920 789H104l-40-40V275l40-40h816l40 40v474l-40 40z" p-id="3324"
  1036. fill="#d03c2a"></path>
  1037. </svg>
  1038. <td><svg t="1638612550724" class="icon" viewBox="0 0 1024 1024" version="1.1"
  1039. xmlns="http://www.w3.org/2000/svg" p-id="3323" width="20" height="10">
  1040. <path d="M920 789H104l-40-40V275l40-40h816l40 40v474l-40 40z" p-id="3324"
  1041. fill="#00a041"></path>
  1042. </svg></td>
  1043. </tr>
  1044. </table>
  1045. </div>
  1046. <div class="swiper-slide">
  1047. <table>
  1048. <tr>
  1049. <td>后勤</td>
  1050. <td><svg t="1638612550724" class="icon" viewBox="0 0 1024 1024" version="1.1"
  1051. xmlns="http://www.w3.org/2000/svg" p-id="3323" width="20" height="10">
  1052. <path d="M920 789H104l-40-40V275l40-40h816l40 40v474l-40 40z" p-id="3324"
  1053. fill="#00a041"></path>
  1054. </svg></td>
  1055. <td><svg t="1638612550724" class="icon" viewBox="0 0 1024 1024" version="1.1"
  1056. xmlns="http://www.w3.org/2000/svg" p-id="3323" width="20" height="10">
  1057. <path d="M920 789H104l-40-40V275l40-40h816l40 40v474l-40 40z" p-id="3324"
  1058. fill="#00a041"></path>
  1059. </svg></td>
  1060. <td><svg t="1638612550724" class="icon" viewBox="0 0 1024 1024" version="1.1"
  1061. xmlns="http://www.w3.org/2000/svg" p-id="3323" width="20" height="10">
  1062. <path d="M920 789H104l-40-40V275l40-40h816l40 40v474l-40 40z" p-id="3324"
  1063. fill="#00a041"></path>
  1064. </svg></td>
  1065. <td><svg t="1638612550724" class="icon" viewBox="0 0 1024 1024" version="1.1"
  1066. xmlns="http://www.w3.org/2000/svg" p-id="3323" width="20" height="10">
  1067. <path d="M920 789H104l-40-40V275l40-40h816l40 40v474l-40 40z" p-id="3324"
  1068. fill="#00a041"></path>
  1069. </svg></td>
  1070. </tr>
  1071. </table>
  1072. </div>
  1073. <div class="swiper-slide">
  1074. <table>
  1075. <tr>
  1076. <td>监察部</td>
  1077. <td><svg t="1638612550724" class="icon" viewBox="0 0 1024 1024" version="1.1"
  1078. xmlns="http://www.w3.org/2000/svg" p-id="3323" width="20" height="10">
  1079. <path d="M920 789H104l-40-40V275l40-40h816l40 40v474l-40 40z" p-id="3324"
  1080. fill="#00a041"></path>
  1081. </svg></td>
  1082. <td><svg t="1638612550724" class="icon" viewBox="0 0 1024 1024" version="1.1"
  1083. xmlns="http://www.w3.org/2000/svg" p-id="3323" width="20" height="10">
  1084. <path d="M920 789H104l-40-40V275l40-40h816l40 40v474l-40 40z" p-id="3324"
  1085. fill="#00a041"></path>
  1086. </svg></td>
  1087. <td><svg t="1638612550724" class="icon" viewBox="0 0 1024 1024" version="1.1"
  1088. xmlns="http://www.w3.org/2000/svg" p-id="3323" width="20" height="10">
  1089. <path d="M920 789H104l-40-40V275l40-40h816l40 40v474l-40 40z" p-id="3324"
  1090. fill="#00a041"></path>
  1091. </svg></td>
  1092. <td><svg t="1638612550724" class="icon" viewBox="0 0 1024 1024" version="1.1"
  1093. xmlns="http://www.w3.org/2000/svg" p-id="3323" width="20" height="10">
  1094. <path d="M920 789H104l-40-40V275l40-40h816l40 40v474l-40 40z" p-id="3324"
  1095. fill="#00a041"></path>
  1096. </svg></td>
  1097. </tr>
  1098. </table>
  1099. </div>
  1100. </div>
  1101. </div>
  1102. </div>
  1103. <div class="right4">
  1104. <div class="demot">
  1105. <p>医疗管理</p>
  1106. </div>
  1107. <div class="center4_l">
  1108. <div style="background-color: #1d79b5;width: 5px;height: 15px;"></div>医疗物资库房
  1109. </div>
  1110. <div class="center4_l" style="margin-left: 18px;">
  1111. <div style="background-color: #1d79b5;width: 5px;height: 15px;"></div>防疫物资库房
  1112. </div>
  1113. <table>
  1114. <tr>
  1115. <td>
  1116. <div class="left2_d" style="margin-top: 1vh;font-size: 15px;color: white;background-color: #033a5d;height:50px;line-height: 50px;width: 186px;text-align: center;display: inline-block;">现有<span>214</span></div>
  1117. </td>
  1118. <td>
  1119. <div class="left2_d" style="margin-top: 1vh;font-size:15px;color: white;background-color: #033a5d;height:50px;line-height: 50px;width: 186px;text-align: center;display: inline-block;">现有<span>333</span></div>
  1120. </td>
  1121. </tr>
  1122. <tr>
  1123. <td>
  1124. <div class="left2_d" style="font-size: 15px;color: white;border: #033a5d 1px solid;height:50px;line-height: 50px;width: 186px;text-align: center;display: inline-block;margin-top: -5px;">入库<span>422</span></div>
  1125. </td>
  1126. <td>
  1127. <div class="left2_d" style="font-size: 15px;color: white;border: #033a5d 1px solid;height:50px;line-height: 50px;width: 186px;text-align: center;display: inline-block;margin-top: -5px;">入库<span>689</span></div>
  1128. </td>
  1129. </tr>
  1130. <tr>
  1131. <td>
  1132. <div class="left2_d" style="font-size: 15px;color: white;border: #033a5d 1px solid;height:50px;line-height: 50px;width: 186px;text-align: center;display: inline-block;margin-top: -5px;">出库<span>208</span></div>
  1133. </td>
  1134. <td>
  1135. <div class="left2_d" style="font-size: 15px;color: white;border: #033a5d 1px solid;height:50px;line-height: 50px;width: 186px;text-align: center;display: inline-block;margin-top: -5px;">出库<span>356</span></div>
  1136. </td>
  1137. </tr>
  1138. </table>
  1139. </div>
  1140. <div class="right3">
  1141. <div class="demot"
  1142. style="display: inline-block;background-image: url(img/r3t.png);width: 150px;margin-right: 40px;">
  1143. <p>涉密载体</p>
  1144. </div>
  1145. <div class="demot" style="display: inline-block;background-image: url(img/r3t.png);width: 140px;">
  1146. <p>集中文印</p>
  1147. </div>
  1148. <br>
  1149. <div id="right3_1"></div>
  1150. <div id="demo"></div>
  1151. <!-- <div class="left2_d"
  1152. style="width: 100px;transform: scale(0.76);margin-right: -40px;margin-left: 177px;">
  1153. 今日<span style="color: #01bbea;">100</span></div>
  1154. <div class="left2_d" style="width: 100px;transform: scale(0.76);margin-right: -38px;"
  1155. style="width: 100px;">
  1156. 一周<span style="color: #ffa531;">100</span></div>
  1157. <div class="left2_d" style="width: 100px;transform: scale(0.76);margin-left: -7px;">一月<span style="color: #009944;">100</span></div> -->
  1158. <p style="display: inline-block;color: white;font-size: 12px;margin-right: 30px;margin-left: 70px;margin-bottom: -5px;position: relative;top: -610px;left:-2px;">
  1159. 涉密载体占比</p>
  1160. <p style="display: inline-block;color: white;font-size: 12px;margin-left: 90px;margin-bottom: -5px;position: relative;top: -610px;left: -15px;">
  1161. 已归还份数占比</p>
  1162. </div>
  1163. </div>
  1164. </div>
  1165. <img class="title" src="img/situationtitle.png" style="position:fixed;width: 100%;" />
  1166. </div>
  1167. <div id="time"
  1168. style="height: 20px; position:fixed;top:35px;right:3.5vw;color:#30fdff;font-size: 22px;font-family: 'New-X-Digital-tfb-2';">
  1169. </div>
  1170. <a href="#"
  1171. style="position: fixed;top: 22px;left: 118px;text-decoration: none;color: #64f5fc;text-align: center;line-height:60px;font-size: 30px;font-weight: bold;">
  1172. <!-- <img src="img/anniu.png" style="width:250px;"> -->
  1173. <div class="anniu">
  1174. 主控台
  1175. </div>
  1176. </a>
  1177. </div>
  1178. <script src="main.js"></script>
  1179. <!-- <script src="left2_1.js"></script>
  1180. <script src="left2_2.js"></script>
  1181. <script src="left2_3.js"></script> -->
  1182. <script src="center2_d.js"></script>
  1183. <script src="center22.js"></script>
  1184. <script src="center3_d.js"></script>
  1185. <script src="centerl.js"></script>
  1186. <script src="right3_1.js"></script>
  1187. <script src="demo.js"></script>
  1188. <script src="left3_d.js"></script>
  1189. </body>
  1190. </html>