taishi.html 71 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970197119721973197419751976197719781979198019811982198319841985198619871988198919901991199219931994199519961997199819992000200120022003
  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="/taishi/echarts.min.js"></script>
  7. <script src="/taishi/swiper.min.js"></script>
  8. <script src="/taishi/color.js"></script>
  9. <title>应急发射机动大队态势分析</title>
  10. <!--<link rel="stylesheet" href="/taishi/liMarquee.cpcss">-->
  11. <style>
  12. /* @media screen and (min-height:1079px) {
  13. .center {
  14. margin-top: 196px !important;
  15. transform: scale(1.144);
  16. }
  17. .left,
  18. .right {
  19. margin-top: 219px !important;
  20. transform: scale(1.2) !important;
  21. margin-right: 1vh;
  22. }
  23. .right {
  24. margin-left: 44px !important;
  25. margin-right: 180px !important;
  26. }
  27. .left {
  28. margin-left: 180px !important;
  29. margin-right: 44px;
  30. }
  31. } */
  32. * {
  33. padding: 0;
  34. margin: 0;
  35. }
  36. html,
  37. body {
  38. height: 100%;
  39. width: 100%;
  40. }
  41. .left,
  42. .right {
  43. transform: scale(1.08);
  44. }
  45. /* .center{
  46. transform: scale(1.02);
  47. } */
  48. @font-face {
  49. font-family: 'IMPACT';
  50. src: url('IMPACT.ttf');
  51. font-family: 'New-X-Digital-tfb-2';
  52. src: url('New-X-Digital-tfb-2.ttf');
  53. }
  54. .out {
  55. background-image: url(/taishi/img/taishibg.png);
  56. background-size: 100% 100%;
  57. height: 100%;
  58. position: fixed;
  59. width: 100%;
  60. /* padding-top: -4vh; */
  61. background-repeat: no-repeat;
  62. overflow: auto;
  63. min-width: 1200px;
  64. display: flex;
  65. flex-direction: row;
  66. overflow-x: hidden;
  67. overflow-y: hidden;
  68. z-index: -1;
  69. }
  70. .title {
  71. position: fixed;
  72. top: -2px;
  73. width: 100%;
  74. }
  75. .left {
  76. margin-top: 6.6vw;
  77. margin-left: 6vw;
  78. display: flex;
  79. flex-direction: column;
  80. height: 100%;
  81. }
  82. .left1 {
  83. background-image: url(/taishi/img/l12.png);
  84. height: 20%;
  85. width: 400px;
  86. background-size: 100% 100%;
  87. background-repeat: no-repeat;
  88. padding-top: 1.5vh;
  89. padding-left: 0.5vw;
  90. box-sizing: border-box;
  91. margin-top: 0.5vw;
  92. /* margin-bottom: 2vh; */
  93. }
  94. .demot {
  95. background-image: url(/taishi/img/dtitle.png);
  96. text-align: left;
  97. color: white;
  98. font-size: 12px;
  99. /* padding-top: 1vh; */
  100. margin-left: 0.3vw;
  101. background-size: 100%;
  102. line-height: 23px;
  103. width: 20vw;
  104. height: 22px;
  105. background-repeat: no-repeat;
  106. }
  107. .demot p {
  108. margin-left: 2vw;
  109. }
  110. .left1_b {
  111. margin-top: 1vh;
  112. font-size: 12px;
  113. color: white;
  114. background-color: #033a5d;
  115. height: 33px;
  116. line-height: 31px;
  117. width: 186px;
  118. text-align: center;
  119. display: inline-block;
  120. }
  121. .left1_s {
  122. margin-top: 4px;
  123. font-size: 12px;
  124. color: white;
  125. border: 1px solid #033a5d;
  126. height: 27px;
  127. line-height: 27px;
  128. width: 180px;
  129. text-align: left;
  130. display: inline-block;
  131. padding-left: 6px;
  132. }
  133. .left1 span {
  134. margin-left: 0.1vw;
  135. font-size: 16px;
  136. color: #30fdff;
  137. }
  138. .left1_l {
  139. margin-top: 4px;
  140. font-size: 12px;
  141. color: white;
  142. border: 1px solid #033a5d;
  143. height: 33px;
  144. line-height: 31px;
  145. width: 378px;
  146. text-align: center;
  147. }
  148. .left2 {
  149. background-image: url(/taishi/img/l2.png);
  150. height: 29%;
  151. width: 400px;
  152. background-size: 100% 100%;
  153. background-repeat: no-repeat;
  154. /* padding-top: 1.5vh; */
  155. margin-top: 0.5vw;
  156. padding-left: 0.5vw;
  157. box-sizing: border-box;
  158. }
  159. .left2_d {
  160. margin-top: 1vh;
  161. font-size: 12px;
  162. color: white;
  163. width: 126px;
  164. text-align: center;
  165. display: inline-block;
  166. margin-bottom: 1vh;
  167. }
  168. .left2_d span {
  169. margin-left: 0.5vw;
  170. font-family: 'IMPACT';
  171. font-size: 22px;
  172. color: #30fdff;
  173. }
  174. .left3 {
  175. background-image: url(/taishi/img/l21.png);
  176. height: 30%;
  177. width: 400px;
  178. box-sizing: border-box;
  179. background-size: 100% 100%;
  180. background-repeat: no-repeat;
  181. margin-top: 0.5vw;
  182. padding-left: 0.5vw;
  183. }
  184. #left3_d {
  185. width: 450px;
  186. height: 275px;
  187. transform: scale(0.8);
  188. margin-top: -30px;
  189. margin-left: -35px;
  190. color: white;
  191. }
  192. .center {
  193. margin-top: 5vw;
  194. margin-left: 3vw;
  195. width: 780px;
  196. }
  197. .center1 {
  198. background-image: url(/taishi/img/c12.png);
  199. height: 46%;
  200. width: 780px;
  201. background-size: 100% 100%;
  202. background-repeat: no-repeat;
  203. /* padding-top: 1.5vh; */
  204. /* margin-top: 0.5vw; */
  205. display: flex;
  206. justify-content: space-around;
  207. flex-wrap: wrap;
  208. margin-bottom: 7px;
  209. }
  210. .center2 {
  211. /* background-image: url(/taishi/img/cl1.png); */
  212. height: 199px;
  213. width: 370px;
  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. #center2_d {
  221. width: 380px;
  222. height: 170px;
  223. /* margin-top: -13px; */
  224. }
  225. .center3 {
  226. /* background-image: url(/taishi/img/cl1.png); */
  227. height: 225px;
  228. width: 403px;
  229. background-size: 100%;
  230. background-repeat: no-repeat;
  231. padding-top: 1.5vh;
  232. padding-left: 0.5vw;
  233. box-sizing: border-box;
  234. }
  235. #center3_d {
  236. width: 600px;
  237. height: 300px;
  238. transform: scale(0.7);
  239. position: relative;
  240. top: -50px;
  241. left: -100px;
  242. }
  243. .center4 {
  244. background-image: url(/taishi/img/c3.png);
  245. height: 23%;
  246. width: 780px;
  247. background-size: 100%;
  248. background-repeat: no-repeat;
  249. /* padding-top: 1.5vh; */
  250. margin-top: 0.5vw;
  251. padding-left: 0.5vw;
  252. box-sizing: border-box;
  253. position: relative;
  254. }
  255. .center4_d {
  256. display: inline-block;
  257. transform: scale(0.7);
  258. margin-left: 0.3vw;
  259. margin-top: -26px;
  260. }
  261. .center4_d img {
  262. width: 70px;
  263. height: 70px;
  264. margin-right: 20px;
  265. }
  266. .center4_l {
  267. color: white;
  268. font-size: 12px;
  269. margin-top: 0.9vh;
  270. margin-left: 0.3vw;
  271. display: inline-block;
  272. margin-right: 80px;
  273. }
  274. .center4_l div {
  275. display: inline-block;
  276. margin-right: 8px;
  277. box-sizing: content-box;
  278. }
  279. .center4_b {
  280. margin-top: 0.8vh;
  281. margin-left: 0.3vw;
  282. color: white;
  283. font-size: 12px;
  284. background-color: rgba(3, 58, 93, 0.3);
  285. border: 0.1px solid #052c41;
  286. height: 50px;
  287. width: 140px;
  288. line-height: 50px;
  289. text-align: center;
  290. }
  291. .center4_b span {
  292. font-family: 'IMPACT';
  293. font-size: 22px;
  294. margin-left: 20px;
  295. }
  296. .center4_s {
  297. /* transform: scale(0.8); */
  298. position: relative;
  299. top: -165px;
  300. left: 153px;
  301. margin-bottom: 5px;
  302. /* margin-top: 10px; */
  303. }
  304. .center4_s img {
  305. width: 45px;
  306. height: 45px;
  307. margin-right: 10px;
  308. }
  309. .center4_y {
  310. color: white;
  311. font-size: 12px;
  312. position: relative;
  313. top: -338px;
  314. left: 290px;
  315. margin-bottom: 20px;
  316. }
  317. .center4_y img {
  318. width: 50px;
  319. }
  320. .right {
  321. margin-top: 6.6vw;
  322. margin-left: 3vw;
  323. margin-right: 6vw;
  324. }
  325. .icon {
  326. animation: myMove 1s infinite;
  327. transform: scale(1.2);
  328. }
  329. .icon2 {
  330. animation: breathe 2s infinite;
  331. transform: scale(1.2);
  332. margin: 0 auto;
  333. width: 8px;
  334. height: 5px;
  335. background-color: #f0422a;
  336. }
  337. @-webkit-keyframes breathe {
  338. 0% {
  339. opacity: .6;
  340. box-shadow: 0 1px 2px rgba(240, 66, 42, 0.6);
  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. 50% {
  348. opacity: .8;
  349. box-shadow: 0 1px 2px rgba(240, 66, 42, 0.8);
  350. transform: scale(1.2, 1.2);
  351. -moz-transform: scale(1.2, 1.2);
  352. -webkit-transform: scale(1.2, 1.2);
  353. -o-transform: scale(1.2, 1.2);
  354. -ms-transform: scale(1.2, 1.2);
  355. }
  356. 100% {
  357. opacity: 1;
  358. box-shadow: 0 2px 30px #f0422a;
  359. transform: scale(1, 1);
  360. -moz-transform: scale(1, 1);
  361. -webkit-transform: scale(1, 1);
  362. -o-transform: scale(1, 1);
  363. -ms-transform: scale(1, 1);
  364. }
  365. }
  366. @keyframes myMove {
  367. 0% {
  368. transform: scale(1, 1);
  369. -moz-transform: scale(1, 1);
  370. -webkit-transform: scale(1, 1);
  371. -o-transform: scale(1, 1);
  372. -ms-transform: scale(1, 1);
  373. }
  374. 50% {
  375. transform: scale(1.2, 1.2);
  376. -moz-transform: scale(1.2, 1.2);
  377. -webkit-transform: scale(1.2, 1.2);
  378. -o-transform: scale(1.2, 1.2);
  379. -ms-transform: scale(1.2, 1.2);
  380. }
  381. 100% {
  382. transform: scale(1, 1);
  383. -moz-transform: scale(1, 1);
  384. -webkit-transform: scale(1, 1);
  385. -o-transform: scale(1, 1);
  386. -ms-transform: scale(1, 1);
  387. }
  388. }
  389. .right2 {
  390. /* background-image: url(/taishi/img/r2.png); */
  391. height: 270px;
  392. width: 400px;
  393. background-size: 100% 100%;
  394. background-repeat: no-repeat;
  395. /* padding-top: 1.5vh; */
  396. padding-left: 0.5vw;
  397. box-sizing: border-box;
  398. }
  399. .right2_d {
  400. color: white;
  401. font-size: 15px;
  402. text-align: center;
  403. display: inline-block;
  404. background-color: #052c41;
  405. height: 30px;
  406. width: 140px;
  407. margin-top: 0.5vh;
  408. }
  409. .right2_d span {
  410. color: #30fdff;
  411. font-size: 22px;
  412. margin-left: 10px;
  413. font-family: 'IMPACT';
  414. }
  415. .right2_b {
  416. color: white;
  417. font-size: 15px;
  418. text-align: center;
  419. display: inline-block;
  420. background-color: rgba(207, 60, 42, 0.3);
  421. height: 30px;
  422. width: 160px;
  423. margin-top: 0.5vh;
  424. }
  425. .right2_b span {
  426. color: #f0422a;
  427. font-size: 22px;
  428. margin-left: 10px;
  429. font-family: 'IMPACT';
  430. }
  431. .right3 {
  432. background-image: url(/taishi/img/r3.png);
  433. height: 30%;
  434. width: 402px;
  435. background-size: 100% 100%;
  436. background-repeat: no-repeat;
  437. /* padding-top: 1.5vh; */
  438. margin-top: 0.5vw;
  439. /* padding-left: 0.5vw; */
  440. box-sizing: border-box;
  441. }
  442. #right3_1 {
  443. display: inline-block;
  444. width: 430px;
  445. height: 400px;
  446. transform: scale(0.52);
  447. position: relative;
  448. top: -320px;
  449. left: 80px;
  450. box-sizing: border-box;
  451. }
  452. #demo {
  453. width: 400px;
  454. height: 400px;
  455. position: relative;
  456. top: -513px;
  457. left: 95px;
  458. transform: scale(0.5);
  459. display: inline-block;
  460. }
  461. .swiper-container {
  462. width: 400px;
  463. height: 200px;
  464. }
  465. /*插件的wrapper 这是关键, 覆盖插件默认切换效果为匀速*/
  466. .swiper-wrapper {
  467. transition-timing-function: linear;
  468. }
  469. .swiper-slide {
  470. display: inline-block;
  471. height: 23px !important;
  472. }
  473. .right1 td {
  474. width: 76px;
  475. height: 23px;
  476. }
  477. .right1 {
  478. background-image: url(/taishi/img/r1.png);
  479. height: 30%;
  480. width: 400px;
  481. background-size: 100% 100%;
  482. background-repeat: no-repeat;
  483. /* padding-top: 1.5vh; */
  484. margin-top:0.5vw;
  485. padding-left: 0.5vw;
  486. box-sizing: border-box;
  487. color: white;
  488. font-size: 12px;
  489. text-align: center;
  490. overflow: hidden;
  491. padding-bottom: 20px;
  492. margin-bottom: 4px;
  493. }
  494. .table_change {
  495. color: white;
  496. font-size: 12px;
  497. width: 100%;
  498. margin-top: 10px;
  499. text-align: center;
  500. }
  501. .table_change td {
  502. height: 23px;
  503. }
  504. .center1_d {
  505. font-size: 12px;
  506. color: white;
  507. display: inline-block;
  508. margin-bottom: 10px;
  509. }
  510. .center1_d img {
  511. width: 40px;
  512. height: 40px;
  513. }
  514. .center1_d div {
  515. display: inline-block;
  516. font-size: 35px;
  517. font-family: 'IMPACT';
  518. background-color: #0c3361;
  519. margin-left: 5px;
  520. width: 25px;
  521. text-align: center;
  522. color: #ff9000;
  523. }
  524. .right4 {
  525. background-image: url(/taishi/img/r2.png);
  526. height: 31%;
  527. width: 400px;
  528. background-size: 100% 100%;
  529. background-repeat: no-repeat;
  530. /* padding-top: 1.5vh; */
  531. margin-top: 0.5vw;
  532. padding-left: 0.5vw;
  533. box-sizing: border-box;
  534. }
  535. .anniu {
  536. background: url(/taishi/img/anniu.png) no-repeat;
  537. background-size: 100%;
  538. width: 250px;
  539. height: 64px;
  540. }
  541. .time {
  542. /* margin-top: 3px; */
  543. font-size: 9px;
  544. color: white;
  545. text-align: center;
  546. display: inline-block;
  547. transform: scale(0.9);
  548. margin-left: -7px;
  549. }
  550. .time td {
  551. height: 33px;
  552. width: 65px;
  553. background-color: #0c3361;
  554. }
  555. .people {
  556. /* margin-top: 3px; */
  557. font-size: 9px;
  558. color: white;
  559. text-align: center;
  560. display: inline-block;
  561. transform: scale(0.9);
  562. margin-left: -12px;
  563. margin-right: -13px;
  564. }
  565. .people td {
  566. height: 33px;
  567. width: 60px;
  568. background-color: #0c3361;
  569. }
  570. .grade {
  571. /* margin-top: 3px; */
  572. font-size: 9px;
  573. color: white;
  574. text-align: center;
  575. display: inline-block;
  576. transform: scale(0.9);
  577. }
  578. .grade td {
  579. height: 33px;
  580. width: 60px;
  581. background-color: #0c3361;
  582. }
  583. .center22 {
  584. background-image: url(/taishi/img/center.png);
  585. width: 780px;
  586. height: 211px;
  587. background-size: 100%;
  588. background-repeat: no-repeat;
  589. padding-top: 1.5vh;
  590. padding-left: 0.5vw;
  591. box-sizing: border-box;
  592. }
  593. #center22 {
  594. width: 780px;
  595. height: 300px;
  596. transform: scale(1.1);
  597. margin-top: -25px;
  598. }
  599. .center23 {
  600. background-image: url(/taishi/img/center.png);
  601. width: 800px;
  602. height: 500px;
  603. background-size: 100%;
  604. background-repeat: no-repeat;
  605. padding-top: 1.5vh;
  606. padding-left: 0.5vw;
  607. box-sizing: border-box;
  608. }
  609. #centerl {
  610. width: 780px;
  611. height: 200px;
  612. margin-top: -10px;
  613. }
  614. .center_32 {
  615. background-image: url(/taishi/img/c2.png);
  616. height: 33%;
  617. width: 780px;
  618. background-size: 100% 100%;
  619. background-repeat: no-repeat;
  620. /* padding-top: 1.5vh; */
  621. margin-top:0.5vw;
  622. display: flex;
  623. /* justify-content: space-around; */
  624. flex-wrap: wrap;
  625. }
  626. .new_right_bottom {
  627. width: 200px;
  628. float: left;
  629. /*margin-left: 90px;*/
  630. margin-bottom: -5px;
  631. position: relative;
  632. top: -5px;
  633. }
  634. .gundong_box {
  635. overflow: hidden;
  636. height: 167px;
  637. }
  638. .table_tdtd td {
  639. height: 23px;
  640. }
  641. .left1-box {
  642. width: 100%;
  643. height: 370px;
  644. display: flex;
  645. flex-wrap: wrap;
  646. }
  647. .left1-box-item {
  648. flex: 1;
  649. margin: 3px;
  650. display: flex;
  651. }
  652. .left1-box-item-left {
  653. width: 50%;
  654. height: 100%;
  655. font-size: 12px;
  656. text-align: center;
  657. color: #fff;
  658. display: flex;
  659. align-items: center;
  660. justify-content: center;
  661. align-items: center;
  662. justify-content: center;
  663. }
  664. .left1-box-item-right {
  665. width: 50%;
  666. height: 100%;
  667. font-size: 14px;
  668. display: flex;
  669. align-items: center;
  670. justify-content: center;
  671. text-align: center;
  672. color: aqua;
  673. }
  674. </style>
  675. </head>
  676. <body onload="startTime()">
  677. <div class="out">
  678. <div class="left">
  679. <div class="left1" id="left1">
  680. <div class="demot">
  681. <p>今日值班</p>
  682. </div>
  683. <div class="left1_s"> </div>
  684. <div class="left1_s">
  685. </div>
  686. <br>
  687. <div class="left1_s">
  688. </div>
  689. <div class="left1_s">
  690. </div>
  691. <div class="left1_s">
  692. </div>
  693. <div class="left1_s">
  694. </div>
  695. <div class="left1_s">
  696. </div>
  697. <div class="left1_s">
  698. </div>
  699. <!--<div class="left1_l">-->
  700. <!--<div class="left1-box" >-->
  701. <!-- <div class="left1-box-item">-->
  702. <!-- <div class="left1-box-item-left">-->
  703. <!-- </div>-->
  704. <!-- <div class="left1-box-item-right">-->
  705. <!-- </div>-->
  706. <!-- </div>-->
  707. <!--</div>-->
  708. <!--</div>-->
  709. </div>
  710. <script type="text/html" id="left1-tpl">
  711. <div class="demot">
  712. <p>今日值班</p>
  713. </div>
  714. <div class="left1_s" style="letter-spacing:3px;">值班首长:<span
  715. style="margin-left: 8px;font-size:18px;letter-spacing:normal">{{d.people_id_text||'无'}}</span>
  716. </div>
  717. <div class="left1_s" style="letter-spacing:2.2px;">作战值班员:<span
  718. style="font-size:18px;letter-spacing:normal">{{d.people_id1_text||'无'}}</span>
  719. </div>
  720. <div class="left1_s">值班通信员:<span style="font-size:16px;"></span>
  721. </div>
  722. <div class="left1_s" style="letter-spacing:3px;">机要值班员:<span
  723. style="font-size:16px;letter-spacing:normal">{{d.people_id3_text||'无'}}</span>
  724. </div>
  725. <div class="left1_s">通信值班员:<span style="font-size:16px;">{{d.people_id2_text||'无'}}</span>
  726. </div>
  727. <div class="left1_s">政治工作部值班员:<span style="font-size:16px;">{{d.people_id4_text||'无'}}</span>
  728. </div>
  729. <div class="left1_s">保障部值班员:<span style="font-size:16px;">{{d.people_id5_text||'无'}}</span>
  730. </div>
  731. <div class="left1_s">值班分队:<span style="font-size:16px;">{{d.unit_id_text||'无'}}</span></div>
  732. <div class="left1_s">大队值班:<span style="font-size:16px;">{{d.people_id7_text||'无'}}</span></div>
  733. </script>
  734. <div class="left2">
  735. <div id="left2_1">
  736. <div class="demot">
  737. </div>
  738. <div class="left2_d">
  739. </div>
  740. <div class="left2_d">
  741. </div>
  742. <div class="left2_d">
  743. </div>
  744. </div>
  745. <script type="text/html" id="left2_1-tpl">
  746. <div class="demot">
  747. <p>装备值班情况</p>
  748. </div>
  749. <div class="left2_d">
  750. 总计<span>{{d.total}}</span>
  751. </div>
  752. <div class="left2_d">
  753. 试验<span>{{d.count1}}</span>
  754. </div>
  755. <div class="left2_d">
  756. 通用<span>{{d.count2}}</span>
  757. </div>
  758. </script>
  759. <div class="demot">
  760. <p>军事训练月统计情况</p>
  761. </div>
  762. <div class="center4_l" style="margin-right: 85px;">
  763. <div style="background-color: #1d79b5;width: 5px;height: 9px;"></div><span
  764. style="line-height:15px">参训时</span>间
  765. </div>
  766. <div class="center4_l" style="margin-right: 70px;margin-left: -7px;">
  767. <div style="background-color: #1d79b5;width: 5px;height: 9px;"></div>兵力
  768. </div>
  769. <div class="center4_l" style="margin-right: 70px;">
  770. <div style="background-color: #1d79b5;width: 5px;height: 9px;"></div>成绩
  771. </div>
  772. <table class="time">
  773. <tr style="font-size:12px;color: #30fdff;font-weight: bold;">
  774. <td>训练类别</td>
  775. <td style="width: 84px;">人均参训时间</td>
  776. </tr>
  777. <tr>
  778. <td>合成训练</td>
  779. <td>30小时</td>
  780. </tr>
  781. <tr>
  782. <td>分业训练</td>
  783. <td>50小时</td>
  784. </tr>
  785. <tr>
  786. <td>共同训练</td>
  787. <td>45小时</td>
  788. </tr>
  789. </table>
  790. <table class="people">
  791. <tr>
  792. <td>实有人数</td>
  793. <td style=" font-family: 'IMPACT';color: #30fdff;font-size: 20px;">547</td>
  794. </tr>
  795. <tr>
  796. <td>参训人数</td>
  797. <td style=" font-family: 'IMPACT';color: #30fdff;font-size: 20px;">492</td>
  798. </tr>
  799. <tr>
  800. <td>
  801. <p style="font-size: 9px;color: white;text-align: center;transform: scale(0.9);">未参训人数</p>
  802. </td>
  803. <td style=" font-family: 'IMPACT';color: #30fdff;font-size: 20px;">115</td>
  804. </tr>
  805. <tr>
  806. <td>参训率</td>
  807. <td style=" font-family: 'IMPACT';color: #30fdff;font-size: 20px;">90%</td>
  808. </tr>
  809. </table>
  810. <table class="grade">
  811. <tr>
  812. <td>考核人次</td>
  813. <td style=" font-family: 'IMPACT';color: #30fdff;font-size: 20px;">547</td>
  814. </tr>
  815. <tr>
  816. <td>优良</td>
  817. <td style=" font-family: 'IMPACT';color: #30fdff;font-size: 20px;">247</td>
  818. </tr>
  819. <tr>
  820. <td>及格</td>
  821. <td style=" font-family: 'IMPACT';color: #30fdff;font-size: 20px;">195</td>
  822. </tr>
  823. <tr>
  824. <td>未及格</td>
  825. <td style=" font-family: 'IMPACT';color: #30fdff;font-size: 20px;">5</td>
  826. </tr>
  827. </table>
  828. </div>
  829. <div class="left3" id="left3">
  830. <div class="demot">
  831. <p>车辆在位情况</p>
  832. </div>
  833. <div class="center4_l">
  834. <div style="background-color: #1d79b5;width: 5px;height: 15px;"></div>军车管理
  835. </div>
  836. <div class="center4_l">
  837. <div style="background-color: #1d79b5;width: 5px;height: 15px;"></div>私家车管理
  838. </div>
  839. <div class="center4_b">
  840. </div>
  841. <div class="center4_b">
  842. </div>
  843. <div class="center4_b">
  844. </div>
  845. <table class="center4_s">
  846. <tr>
  847. <td rowspan="2">
  848. <img src="/taishi/img/cheliangz.png" alt="">
  849. </td>
  850. <td style="color: #30fdff;font-family: 'IMPACT';font-size: 22px;"></td>
  851. </tr>
  852. <tr>
  853. <td style="font-size: 15px;color: white;">车辆统计</td>
  854. </tr>
  855. </table>
  856. <table class="center4_s">
  857. <tr>
  858. <td rowspan="2">
  859. <img src="/taishi/img/cheliangz.png" alt="">
  860. </td>
  861. <td style="color: #30fdff;font-family: 'IMPACT';font-size: 22px;"></td>
  862. </tr>
  863. <tr>
  864. <td style="font-size: 15px;color: white;">车辆在位</td>
  865. </tr>
  866. </table>
  867. <table class="center4_s">
  868. <tr>
  869. <td rowspan="2">
  870. <img src="/taishi/img/cheliangz.png" alt="">
  871. </td>
  872. <td style="color: #30fdff;font-family: 'IMPACT';font-size: 22px;"></td>
  873. </tr>
  874. <tr>
  875. <td style="font-size: 15px;color: white;">车辆出场</td>
  876. </tr>
  877. </table>
  878. <table class="center4_y">
  879. <tr>
  880. <td>
  881. <img src="/taishi/img/cheliangq.png" alt="">
  882. </td>
  883. <td style="font-family: 'IMPACT';font-size: 22px;color: #b4372a;">1</td>
  884. </tr>
  885. <tr>
  886. <td colspan="2" style="letter-spacing: 7px;">夜间进入</td>
  887. </tr>
  888. </table>
  889. <table class="center4_y">
  890. <tr>
  891. <td>
  892. <img src="/taishi/img/cheliangq.png" alt="">
  893. </td>
  894. <td style="font-family: 'IMPACT';font-size: 22px;color: #b4372a;">1</td>
  895. </tr>
  896. <tr>
  897. <td colspan="2" style="letter-spacing: 7px;">外来车辆</td>
  898. </tr>
  899. </table>
  900. </div>
  901. <script type="text/html" id="left3-tpl">
  902. <div class="demot">
  903. <p>车辆在位情况</p>
  904. </div>
  905. <div class="center4_l">
  906. <div style="background-color: #1d79b5;width: 5px;height: 9px;"></div>军车管理
  907. </div>
  908. <div class="center4_l">
  909. <div style="background-color: #1d79b5;width: 5px;height: 9px;"></div>私家车管理
  910. </div>
  911. <div class="center4_b">总计<span style="color: #30fdff;">{{d.jc.total}}</span>
  912. </div>
  913. <div class="center4_b">在位<span style="color: #fde17b;">{{d.jc.count1}}</span>
  914. </div>
  915. <div class="center4_b">外出<span style="color: #f0422a;">{{d.jc.count2}}</span>
  916. </div>
  917. <table class="center4_s">
  918. <tr>
  919. <td rowspan="2">
  920. <img src="/taishi/img/cheliangz.png" alt="">
  921. </td>
  922. <td style="color: #30fdff;font-family: 'IMPACT';font-size: 22px;">{{d.sjc.total}}</td>
  923. </tr>
  924. <tr>
  925. <td style="font-size: 15px;color: white;">车辆统计</td>
  926. </tr>
  927. </table>
  928. <table class="center4_s">
  929. <tr>
  930. <td rowspan="2">
  931. <img src="/taishi/img/cheliangz.png" alt="">
  932. </td>
  933. <td style="color: #30fdff;font-family: 'IMPACT';font-size: 22px;">{{d.sjc.count1}}</td>
  934. </tr>
  935. <tr>
  936. <td style="font-size: 15px;color: white;">车辆在位</td>
  937. </tr>
  938. </table>
  939. <table class="center4_s">
  940. <tr>
  941. <td rowspan="2">
  942. <img src="/taishi/img/cheliangz.png" alt="">
  943. </td>
  944. <td style="color: #30fdff;font-family: 'IMPACT';font-size: 22px;">{{d.sjc.count2}}</td>
  945. </tr>
  946. <tr>
  947. <td style="font-size: 15px;color: white;">车辆出场</td>
  948. </tr>
  949. </table>
  950. <table class="center4_y">
  951. <tr>
  952. <td>
  953. <img src="/taishi/img/cheliangq.png" alt="">
  954. </td>
  955. <td style="font-family: 'IMPACT';font-size: 22px;color: #b4372a;">1</td>
  956. </tr>
  957. <tr>
  958. <td colspan="2" style="letter-spacing: 7px;">夜间进入</td>
  959. </tr>
  960. </table>
  961. <table class="center4_y">
  962. <tr>
  963. <td>
  964. <img src="/taishi/img/cheliangq.png" alt="">
  965. </td>
  966. <td style="font-family: 'IMPACT';font-size: 22px;color: #b4372a;">1</td>
  967. </tr>
  968. <tr>
  969. <td colspan="2" style="letter-spacing: 7px;">外来车辆</td>
  970. </tr>
  971. </table>
  972. </script>
  973. </div>
  974. <div class="center">
  975. <div class="center1">
  976. <div style="width:755px">
  977. <div class="demot">
  978. <p>大队人员在位情况</p>
  979. </div>
  980. </div>
  981. <div style="height: 0px;" id="center1">
  982. <table class="center1_d">
  983. <tr>
  984. <td></td>
  985. <td style="padding-left:7px;padding-bottom: 5px;">在位总数</td>
  986. </tr>
  987. <tr>
  988. <td>
  989. <img src="/taishi/img/zong.png" alt="">
  990. </td>
  991. <td>
  992. <div>&nbsp;</div>
  993. <div>&nbsp;</div>
  994. <div>&nbsp;</div>
  995. </td>
  996. </tr>
  997. </table>
  998. <table class="center1_d">
  999. <tr>
  1000. <td></td>
  1001. <td style="padding-left:7px;padding-bottom: 5px;">纳编在位</td>
  1002. </tr>
  1003. <tr>
  1004. <td>
  1005. <img src="/taishi/img/zaiwei.png" alt="">
  1006. </td>
  1007. <td>
  1008. <div>&nbsp;</div>
  1009. <div>&nbsp;</div>
  1010. <div>&nbsp;</div>
  1011. </td>
  1012. </tr>
  1013. </table>
  1014. <table class="center1_d">
  1015. <tr>
  1016. <td></td>
  1017. <td style="padding-left:7px;padding-bottom: 5px;">纳编外出</td>
  1018. </tr>
  1019. <tr>
  1020. <td>
  1021. <img src="/taishi/img/waichu.png" alt="">
  1022. </td>
  1023. <td>
  1024. <div>&nbsp;</div>
  1025. <div>&nbsp;</div>
  1026. <div>&nbsp;</div>
  1027. </td>
  1028. </tr>
  1029. </table>
  1030. <table class="center1_d">
  1031. <tr>
  1032. <td></td>
  1033. <td style="padding-left:7px;padding-bottom: 5px;">未纳编在位</td>
  1034. </tr>
  1035. <tr>
  1036. <td>
  1037. <img src="/taishi/img/zaiwei.png" alt="">
  1038. </td>
  1039. <td>
  1040. <div>&nbsp;</div>
  1041. <div>&nbsp;</div>
  1042. <div>&nbsp;</div>
  1043. </td>
  1044. </tr>
  1045. </table>
  1046. <table class="center1_d">
  1047. <tr>
  1048. <td></td>
  1049. <td style="padding-left:7px;padding-bottom: 5px;">未纳编外出</td>
  1050. </tr>
  1051. <tr>
  1052. <td>
  1053. <img src="/taishi/img/waichu.png" alt="">
  1054. </td>
  1055. <td>
  1056. <div>&nbsp;</div>
  1057. <div>&nbsp;</div>
  1058. <div>&nbsp;</div>
  1059. </td>
  1060. </tr>
  1061. </table>
  1062. </div>
  1063. <script type="text/html" id="center1-tpl">
  1064. <table class="center1_d">
  1065. <tr>
  1066. <td></td>
  1067. <td style="padding-left:7px;padding-bottom: 5px;">在位总数</td>
  1068. </tr>
  1069. <tr>
  1070. <td>
  1071. <img src="/taishi/img/zong.png" alt="">
  1072. </td>
  1073. <td>
  1074. {{#$.each(d.count1,function(i,v){}}
  1075. <div>{{v}}</div>
  1076. {{#});}}
  1077. </td>
  1078. </tr>
  1079. </table>
  1080. <table class="center1_d">
  1081. <tr>
  1082. <td></td>
  1083. <td style="padding-left:7px;padding-bottom: 5px;">纳编在位</td>
  1084. </tr>
  1085. <tr>
  1086. <td>
  1087. <img src="/taishi/img/zaiwei.png" alt="">
  1088. </td>
  1089. <td>
  1090. {{#$.each(d.count2,function(i,v){}}
  1091. <div>{{v}}</div>
  1092. {{#});}}
  1093. </td>
  1094. </tr>
  1095. </table>
  1096. <table class="center1_d">
  1097. <tr>
  1098. <td></td>
  1099. <td style="padding-left:7px;padding-bottom: 5px;">纳编外出</td>
  1100. </tr>
  1101. <tr>
  1102. <td>
  1103. <img src="/taishi/img/waichu.png" alt="">
  1104. </td>
  1105. <td>
  1106. {{#$.each(d.count3,function(i,v){}}
  1107. <div>{{v}}</div>
  1108. {{#});}}
  1109. </td>
  1110. </tr>
  1111. </table>
  1112. <table class="center1_d">
  1113. <tr>
  1114. <td></td>
  1115. <td style="padding-left:7px;padding-bottom: 5px;">未纳编在位</td>
  1116. </tr>
  1117. <tr>
  1118. <td>
  1119. <img src="/taishi/img/zaiwei.png" alt="">
  1120. </td>
  1121. <td>
  1122. {{#$.each(d.count4,function(i,v){}}
  1123. <div>{{v}}</div>
  1124. {{#});}}
  1125. </td>
  1126. </tr>
  1127. </table>
  1128. <table class="center1_d">
  1129. <tr>
  1130. <td></td>
  1131. <td style="padding-left:7px;padding-bottom: 5px;">未纳编外出</td>
  1132. </tr>
  1133. <tr>
  1134. <td>
  1135. <img src="/taishi/img/waichu.png" alt="">
  1136. </td>
  1137. <td>
  1138. {{#$.each(d.count5,function(i,v){}}
  1139. <div>{{v}}</div>
  1140. {{#});}}
  1141. </td>
  1142. </tr>
  1143. </table>
  1144. </script>
  1145. <div class="center2" style="margin-top: 55px;">
  1146. <div class="demot">
  1147. <p>各单位人员在位情况</p>
  1148. </div>
  1149. <div id="center2_d"></div>
  1150. </div>
  1151. <br>
  1152. <div class="center3" style="padding-top: 68px;">
  1153. <div class="demot">
  1154. <p>外出人员占比</p>
  1155. </div>
  1156. <div id="center3_d"></div>
  1157. </div>
  1158. <div id="center2">
  1159. <div class="demot">
  1160. <p>人员请销假</p>
  1161. </div>
  1162. <div class="right2_d" style="margin-left: 10px;">
  1163. </div>
  1164. <div class="right2_d">
  1165. </div>
  1166. <div class="right2_d">
  1167. </div>
  1168. <div class="right2_b">
  1169. </div>
  1170. <div class="right2_b" style="margin-right: 10px;">
  1171. </div>
  1172. </div>
  1173. <script type="text/html" id="center2-tpl">
  1174. <div class="demot" style="margin-right: 315px;margin-bottom: 5px;margin-left:17px">
  1175. <p>人员请销假</p>
  1176. </div>
  1177. <div class="right2_d" style="margin-left: 10px;">今日迟到<span>0</span>
  1178. </div>
  1179. <div class="right2_d">本月迟到<span>0</span>
  1180. </div>
  1181. <div class="right2_d">今日应归队<span>{{d.count3}}</span>
  1182. </div>
  1183. <div class="right2_b">超时归队<span>{{d.count4}}</span>
  1184. </div>
  1185. <div class="right2_b" style="margin-right: 10px;">未归队<span>{{d.count5}}</span>
  1186. </div>
  1187. </script>
  1188. </div>
  1189. <div class="center_32">
  1190. <div class="right2">
  1191. <div class="demot">
  1192. <p>量化统计</p>
  1193. </div>
  1194. <div id="center22" style="position: relative;left: -15px;top: 5px;"></div>
  1195. </div>
  1196. </div>
  1197. <div class="center4" id="center4">
  1198. <!--<div class="demot">-->
  1199. <!-- <p>营房营具管理</p>-->
  1200. <!--</div>-->
  1201. <div style="width: 380px; float: left;">
  1202. <div class="demot">
  1203. <p>营房统计</p>
  1204. </div>
  1205. </div>
  1206. <div style="width: 380px; float: right;">
  1207. <div class="demot">
  1208. <p>营具统计</p>
  1209. </div>
  1210. </div>
  1211. <table class="center4_d" style="margin-top: 10px;margin-left: 30px;">
  1212. <tr>
  1213. <td rowspan="2">
  1214. <img src="/taishi/img/yinfangz.png" alt="">
  1215. </td>
  1216. <td style="color: #30fdff;font-family: 'IMPACT';font-size: 28px;"></td>
  1217. </tr>
  1218. <tr>
  1219. <td style="font-size: 18px;color: white;">营房统计</td>
  1220. </tr>
  1221. </table>
  1222. <table class="center4_d" style="margin-top: 10px;">
  1223. <tr>
  1224. <td rowspan="2">
  1225. <img src="/taishi/img/yinfangz.png" alt="">
  1226. </td>
  1227. <td style="color: #30fdff;font-family: 'IMPACT';font-size: 28px;"></td>
  1228. </tr>
  1229. <tr>
  1230. <td style="font-size: 18px;color: white;">营房使用</td>
  1231. </tr>
  1232. </table>
  1233. <table class="center4_d">
  1234. <tr>
  1235. <td rowspan="2">
  1236. <img src="/taishi/img/yinjus.png" alt="">
  1237. </td>
  1238. <td style="color: #e6923e;font-family: 'IMPACT';font-size: 28px;"></td>
  1239. </tr>
  1240. <tr>
  1241. <td style="font-size: 18px;color: white;">营具统计</td>
  1242. </tr>
  1243. </table>
  1244. <table class="center4_d">
  1245. <tr>
  1246. <td rowspan="2">
  1247. <img src="/taishi/img/yinjus.png" alt="">
  1248. </td>
  1249. <td style="color: #e6923e;font-family: 'IMPACT';font-size: 28px;"></td>
  1250. </tr>
  1251. <tr>
  1252. <td style="font-size: 18px;color: white;">营具使用</td>
  1253. </tr>
  1254. </table>
  1255. </div>
  1256. <script type="text/html" id="center4-tpl">
  1257. <div style="width: 380px; float: left;">
  1258. <div class="demot">
  1259. <p>营房统计</p>
  1260. </div>
  1261. </div>
  1262. <div style="width: 380px; float: right;">
  1263. <div class="demot">
  1264. <p>营具统计</p>
  1265. </div>
  1266. </div>
  1267. <div style="position:absolute;top: 30px;left: -17px;">
  1268. <table class="center4_d" style="margin-top: 10px;margin-left: 30px;">
  1269. <tr>
  1270. <td rowspan="2">
  1271. <img src="/taishi/img/yinfangz.png" alt="">
  1272. </td>
  1273. <td style="color: #30fdff;font-family: 'IMPACT';font-size: 28px;">{{d.count1}}</td>
  1274. </tr>
  1275. <tr>
  1276. <td style="font-size: 18px;color: white;">营房统计</td>
  1277. </tr>
  1278. </table>
  1279. <table class="center4_d" style="margin-top: 10px;">
  1280. <tr>
  1281. <td rowspan="2">
  1282. <img src="/taishi/img/yinfangz.png" alt="">
  1283. </td>
  1284. <td style="color: #30fdff;font-family: 'IMPACT';font-size: 28px;">{{d.count2}}</td>
  1285. </tr>
  1286. <tr>
  1287. <td style="font-size: 18px;color: white;">营房使用</td>
  1288. </tr>
  1289. </table>
  1290. </div>
  1291. <div style="position:absolute;top: 66px;left: 400px;">
  1292. <table class="center4_d">
  1293. <tr>
  1294. <td rowspan="2">
  1295. <img src="/taishi/img/yinjus.png" alt="">
  1296. </td>
  1297. <td style="color: #e6923e;font-family: 'IMPACT';font-size: 28px;">{{d.count3}}</td>
  1298. </tr>
  1299. <tr>
  1300. <td style="font-size: 18px;color: white;">营具统计</td>
  1301. </tr>
  1302. </table>
  1303. <table class="center4_d">
  1304. <tr>
  1305. <td rowspan="2">
  1306. <img src="/taishi/img/yinjus.png" alt="">
  1307. </td>
  1308. <td style="color: #e6923e;font-family: 'IMPACT';font-size: 28px;">{{d.count4}}</td>
  1309. </tr>
  1310. <tr>
  1311. <td style="font-size: 18px;color: white;">营具使用</td>
  1312. </tr>
  1313. </table>
  1314. </div>
  1315. </script>
  1316. </div>
  1317. <div class="right">
  1318. <div class="right1">
  1319. <div class="demot" style="display:flex;">
  1320. <p>登统计落实</p>
  1321. <div style="margin-left:45%;">
  1322. <span
  1323. style="width:5px;height:10px;background-color:#F56C6C;display:inline-block;margin-right:5px;"></span>未登记
  1324. <span
  1325. style="width:5px;height:10px;background-color:#67C23A;display:inline-block;margin-right:5px;margin-left:10px;"></span>已登记
  1326. </div>
  1327. </div>
  1328. <table style="margin-top: 10px;">
  1329. <tr>
  1330. <td>落实单位</td>
  1331. <td>要事日记</td>
  1332. <td>值班登记</td>
  1333. <td>工作安排</td>
  1334. <td>查铺查哨</td>
  1335. </tr>
  1336. </table>
  1337. <div class="swiper-container" style="height: 140px;overflow: hidden;margin-top: 5px;">
  1338. <div class="swiper-wrapper" id="right3">
  1339. </div>
  1340. <script type="text/html" id="right3-tpl">
  1341. {{# $.each(d,function(i,v){ }}
  1342. <div class="swiper-slide" id="a">
  1343. <table id="a1">
  1344. <tr>
  1345. <td>{{v.name}}</td>
  1346. <td>
  1347. {{#if(v.ysrj == 0){}}
  1348. <svg t="1638612550724" class="icon2" viewBox="0 0 1024 1024" version="1.1"
  1349. xmlns="http://www.w3.org/2000/svg" p-id="3323" width="20" height="10">
  1350. <path d="M920 789H104l-40-40V275l40-40h816l40 40v474l-40 40z" p-id="3324" fill="#d03c2a"></path>
  1351. </svg>
  1352. {{#}else{}}
  1353. <svg t="1638612550724" class="icon" viewBox="0 0 1024 1024" version="1.1"
  1354. xmlns="http://www.w3.org/2000/svg" p-id="3323" width="20" height="10">
  1355. <path d="M920 789H104l-40-40V275l40-40h816l40 40v474l-40 40z" p-id="3324" fill="#00a041"></path>
  1356. </svg>
  1357. {{#} }}
  1358. </td>
  1359. <td>
  1360. {{#if(v.zbdj == 0){}}
  1361. <svg t="1638612550724" class="icon2" viewBox="0 0 1024 1024" version="1.1"
  1362. xmlns="http://www.w3.org/2000/svg" p-id="3323" width="20" height="10">
  1363. <path d="M920 789H104l-40-40V275l40-40h816l40 40v474l-40 40z" p-id="3324" fill="#d03c2a"></path>
  1364. </svg>
  1365. {{#}else{}}
  1366. <svg t="1638612550724" class="icon" viewBox="0 0 1024 1024" version="1.1"
  1367. xmlns="http://www.w3.org/2000/svg" p-id="3323" width="20" height="10">
  1368. <path d="M920 789H104l-40-40V275l40-40h816l40 40v474l-40 40z" p-id="3324" fill="#00a041"></path>
  1369. </svg>
  1370. {{#} }}
  1371. </td>
  1372. <td>
  1373. {{#if(v.gzap == 0){}}
  1374. <svg t="1638612550724" class="icon2" viewBox="0 0 1024 1024" version="1.1"
  1375. xmlns="http://www.w3.org/2000/svg" p-id="3323" width="20" height="10">
  1376. <path d="M920 789H104l-40-40V275l40-40h816l40 40v474l-40 40z" p-id="3324" fill="#d03c2a"></path>
  1377. </svg>
  1378. {{#}else{}}
  1379. <svg t="1638612550724" class="icon" viewBox="0 0 1024 1024" version="1.1"
  1380. xmlns="http://www.w3.org/2000/svg" p-id="3323" width="20" height="10">
  1381. <path d="M920 789H104l-40-40V275l40-40h816l40 40v474l-40 40z" p-id="3324" fill="#00a041"></path>
  1382. </svg>
  1383. {{#} }}
  1384. </td>
  1385. <td>
  1386. {{#if(v.cpcs == 0){}}
  1387. <svg t="1638612550724" class="icon2" viewBox="0 0 1024 1024" version="1.1"
  1388. xmlns="http://www.w3.org/2000/svg" p-id="3323" width="20" height="10">
  1389. <path d="M920 789H104l-40-40V275l40-40h816l40 40v474l-40 40z" p-id="3324" fill="#d03c2a"></path>
  1390. </svg>
  1391. {{#}else{}}
  1392. <svg t="1638612550724" class="icon" viewBox="0 0 1024 1024" version="1.1"
  1393. xmlns="http://www.w3.org/2000/svg" p-id="3323" width="20" height="10">
  1394. <path d="M920 789H104l-40-40V275l40-40h816l40 40v474l-40 40z" p-id="3324" fill="#00a041"></path>
  1395. </svg>
  1396. {{#} }}
  1397. </td>
  1398. </tr>
  1399. </table>
  1400. <table id="a2"></table>
  1401. </div>
  1402. {{#});}}
  1403. </script>
  1404. <!--滚动-->
  1405. <!-- <script type="text/javascript" charset="utf-8">-->
  1406. <!-- function roll2(t) {-->
  1407. <!--console.log(11111);-->
  1408. <!-- var ul5 = document.getElementById("a1");-->
  1409. <!-- var ul6 = document.getElementById("a2");-->
  1410. <!-- var ulbox6 = document.getElementById("a");-->
  1411. <!-- ul6.innerHTML = ul5.innerHTML;-->
  1412. <!--ulbox6.scrollTop = 0; // 开始无滚动时设为0-->
  1413. <!--var timer2 = setInterval(rollStart1, t); // 设置定时器,参数t用在这为间隔时间(单位毫秒),参数t越小,滚动速度越快-->
  1414. <!--// 鼠标移入div时暂停滚动-->
  1415. <!-- ulbox6.onmouseover = function() {-->
  1416. <!-- clearInterval(timer2);-->
  1417. <!-- }-->
  1418. <!--// 鼠标移出div后继续滚动-->
  1419. <!-- ulbox6.onmouseout = function() {-->
  1420. <!-- timer2 = setInterval(rollStart2, t);-->
  1421. <!-- }-->
  1422. <!-- }-->
  1423. <!--// 开始滚动函数-->
  1424. <!-- function rollStart2() {-->
  1425. <!--// 上面声明的DOM对象为局部对象需要再次声明-->
  1426. <!-- var ul1 = document.getElementById("a1");-->
  1427. <!-- var ul2 = document.getElementById("a2");-->
  1428. <!-- var ulbox = document.getElementById("a");-->
  1429. <!--// 正常滚动不断给scrollTop的值+1,当滚动高度大于列表内容高度时恢复为0-->
  1430. <!-- if (ulbox.scrollTop >= ul1.scrollHeight) {-->
  1431. <!-- ulbox.scrollTop = 0;-->
  1432. <!-- } else {-->
  1433. <!-- ulbox.scrollTop++;-->
  1434. <!-- }-->
  1435. <!-- }-->
  1436. <!-- </script>-->
  1437. </div>
  1438. </div>
  1439. <div class="right4">
  1440. <div class="demot">
  1441. <p>防疫物资储备情况</p>
  1442. </div>
  1443. <!--<div class="center4_l">-->
  1444. <!-- <div style="background-color: #1d79b5;width: 5px;height: 15px;"></div>医疗物资库房</div>-->
  1445. <!--<div class="center4_l" style="margin-left: 18px;">-->
  1446. <!-- <div style="background-color: #1d79b5;width: 5px;height: 15px;"></div>防疫物资库房</div>-->
  1447. <table id="right2" class="table_change">
  1448. <tr style="height:28px">
  1449. <th width="10%">序号</th>
  1450. <th width="40%">单位</th>
  1451. <th width="35%">防疫品名称</th>
  1452. <th width="15%">现有数量</th>
  1453. </tr>
  1454. </table>
  1455. <div id="r_box" class="gundong_box">
  1456. <table class="table_change" style="margin:0" id="c1">
  1457. <tr>
  1458. <td width="10%">1</td>
  1459. <td width="40%">支援保障营支援保障营</td>
  1460. <td width="35%">84消毒液</td>
  1461. <td width="15%">50</td>
  1462. </tr>
  1463. <tr>
  1464. <td width="10%">2</td>
  1465. <td width="40%">支援保障营支援保障营</td>
  1466. <td width="35%">84消毒液</td>
  1467. <td width="15%">50</td>
  1468. </tr>
  1469. <tr>
  1470. <td width="10%">3</td>
  1471. <td width="40%">支援保障营支援保障营</td>
  1472. <td width="35%">84消毒液</td>
  1473. <td width="15%">50</td>
  1474. </tr>
  1475. <tr>
  1476. <td width="10%">4</td>
  1477. <td width="40%">支援保障营支援保障营</td>
  1478. <td width="35%">84消毒液</td>
  1479. <td width="15%">50</td>
  1480. </tr>
  1481. <tr>
  1482. <td width="10%">5</td>
  1483. <td width="40%">支援保障营支援保障营</td>
  1484. <td width="35%">84消毒液</td>
  1485. <td width="15%">50</td>
  1486. </tr>
  1487. <tr>
  1488. <td width="10%">6</td>
  1489. <td width="40%">支援保障营支援保障营</td>
  1490. <td width="35%">84消毒液</td>
  1491. <td width="15%">50</td>
  1492. </tr>
  1493. <tr>
  1494. <td width="10%">7</td>
  1495. <td width="40%">支援保障营支援保障营</td>
  1496. <td width="35%">84消毒液</td>
  1497. <td width="15%">50</td>
  1498. </tr>
  1499. <tr>
  1500. <td width="10%">8</td>
  1501. <td width="40%">支援保障营支援保障营</td>
  1502. <td width="35%">84消毒液</td>
  1503. <td width="15%">50</td>
  1504. </tr>
  1505. <tr>
  1506. <td width="10%">9</td>
  1507. <td width="40%">支援保障营支援保障营</td>
  1508. <td width="35%">84消毒液</td>
  1509. <td width="15%">50</td>
  1510. </tr>
  1511. </table>
  1512. <!--<script type="text/html" charset="utf-8" id="slide1-tpl">-->
  1513. <!-- {{#$.each(d,function(i,v){}}-->
  1514. <!-- <tr>-->
  1515. <!-- <td width="10%">{{v.id}}</td>-->
  1516. <!-- <td width="30%">{{v.unit_id_text}}</td>-->
  1517. <!-- <td width="40%">{{v.durg_name}}</td>-->
  1518. <!-- <td width="20%">{{v.amount}}</td>-->
  1519. <!-- </tr>-->
  1520. <!-- {{#});}}-->
  1521. <!--</script>-->
  1522. <table id='c2' class="table_change" style="margin:0"></table>
  1523. </div>
  1524. <!--右边中间表循环滚动-->
  1525. <script type="text/javascript" charset="utf-8">
  1526. function roll1(t) {
  1527. console.log(11111);
  1528. var ul11 = document.getElementById("c1");
  1529. var ul21 = document.getElementById("c2");
  1530. var ulbox1 = document.getElementById("r_box");
  1531. ul21.innerHTML = ul11.innerHTML;
  1532. ulbox1.scrollTop = 0; // 开始无滚动时设为0
  1533. var timer1 = setInterval(rollStart1, t); // 设置定时器,参数t用在这为间隔时间(单位毫秒),参数t越小,滚动速度越快
  1534. // 鼠标移入div时暂停滚动
  1535. ulbox1.onmouseover = function () {
  1536. clearInterval(timer1);
  1537. }
  1538. // 鼠标移出div后继续滚动
  1539. ulbox1.onmouseout = function () {
  1540. timer1 = setInterval(rollStart1, t);
  1541. }
  1542. }
  1543. // 开始滚动函数
  1544. function rollStart1() {
  1545. // 上面声明的DOM对象为局部对象需要再次声明
  1546. var ul1 = document.getElementById("c1");
  1547. var ul2 = document.getElementById("c2");
  1548. var ulbox = document.getElementById("r_box");
  1549. // 正常滚动不断给scrollTop的值+1,当滚动高度大于列表内容高度时恢复为0
  1550. if (ulbox.scrollTop >= ul1.scrollHeight) {
  1551. ulbox.scrollTop = 0;
  1552. } else {
  1553. ulbox.scrollTop++;
  1554. }
  1555. }
  1556. </script>
  1557. <!--<script type="text/html" id="right2-tpl">-->
  1558. <!-- <tr>-->
  1559. <!-- <td>-->
  1560. <!-- <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>{{d.count1}}</span>种-->
  1561. <!-- </div>-->
  1562. <!-- </td>-->
  1563. <!-- <td>-->
  1564. <!-- <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>{{d.count4}}</span>种-->
  1565. <!-- </div>-->
  1566. <!-- </td>-->
  1567. <!-- </tr>-->
  1568. <!-- <tr>-->
  1569. <!-- <td>-->
  1570. <!-- <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>{{d.count2}}</span>种-->
  1571. <!-- </div>-->
  1572. <!-- </td>-->
  1573. <!-- <td>-->
  1574. <!-- <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>{{d.count5}}</span>种-->
  1575. <!-- </div>-->
  1576. <!-- </td>-->
  1577. <!-- </tr>-->
  1578. <!-- <tr>-->
  1579. <!-- <td>-->
  1580. <!-- <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>{{d.count3}}</span>种-->
  1581. <!-- </div>-->
  1582. <!-- </td>-->
  1583. <!-- <td>-->
  1584. <!-- <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>{{d.count6}}</span>种-->
  1585. <!-- </div>-->
  1586. <!-- </td>-->
  1587. <!-- </tr>-->
  1588. <!--</script>-->
  1589. </div>
  1590. <div class="right3">
  1591. <div class="demot"
  1592. style="display: inline-block;background-image: url(/taishi/img/r3t.png);width: 150px;margin-right: 49px;">
  1593. <p>集中文印</p>
  1594. </div>
  1595. <div class="demot"
  1596. style="display: inline-block;background-image: url(/taishi/img/r3t.png);width: 150px;">
  1597. <p>保密室外借物品数量</p>
  1598. </div>
  1599. <br>
  1600. <div class="new_right_bottom">
  1601. <table class="table_change">
  1602. <tr style="height:28px">
  1603. <!--<th width="15%">序号</th>-->
  1604. <th width="35%">人员</th>
  1605. <th width="20%">份数</th>
  1606. <th width="45%">日期</th>
  1607. </tr>
  1608. </table>
  1609. <div id="review_box" style="overflow:hidden;height:180px;">
  1610. <table class="table_change table_tdtd" style="margin-top:0" id="comment1">
  1611. <tr>
  1612. <!--<td width="15%">1</td>-->
  1613. <td width="35%">苏景刚刚</td>
  1614. <td width="20%">100</td>
  1615. <td width="45%">22.01.21</td>
  1616. </tr>
  1617. <tr>
  1618. <!--<td width="15%">1</td>-->
  1619. <td width="35%">苏景刚刚</td>
  1620. <td width="20%">100</td>
  1621. <td width="45%">22.01.21</td>
  1622. </tr>
  1623. <tr>
  1624. <!--<td width="15%">1</td>-->
  1625. <td width="35%">苏景刚刚</td>
  1626. <td width="20%">100</td>
  1627. <td width="45%">22.01.21</td>
  1628. </tr>
  1629. <tr>
  1630. <!--<td width="15%">1</td>-->
  1631. <td width="35%">苏景刚刚</td>
  1632. <td width="20%">100</td>
  1633. <td width="45%">22.01.21</td>
  1634. </tr>
  1635. <tr>
  1636. <!--<td width="15%">1</td>-->
  1637. <td width="35%">苏景刚刚</td>
  1638. <td width="20%">100</td>
  1639. <td width="45%">22.01.21</td>
  1640. </tr>
  1641. <tr>
  1642. <!--<td width="15%">1</td>-->
  1643. <td width="35%">苏景刚刚</td>
  1644. <td width="20%">100</td>
  1645. <td width="45%">22.01.21</td>
  1646. </tr>
  1647. <tr>
  1648. <!--<td width="15%">1</td>-->
  1649. <td width="35%">苏景刚刚</td>
  1650. <td width="20%">100</td>
  1651. <td width="45%">22.01.21</td>
  1652. </tr>
  1653. <tr>
  1654. <!--<td width="15%">1</td>-->
  1655. <td width="35%">苏景刚刚</td>
  1656. <td width="20%">100</td>
  1657. <td width="45%">22.01.21</td>
  1658. </tr>
  1659. <tr>
  1660. <!--<td width="15%">1</td>-->
  1661. <td width="35%">苏景刚刚</td>
  1662. <td width="20%">100</td>
  1663. <td width="45%">22.01.21</td>
  1664. </tr>
  1665. </table>
  1666. <table class="table_change table_tdtd" style="margin-top:0" id="comment2"></table>
  1667. </div>
  1668. <script type="text/javascript" charset="utf-8">
  1669. window.onload = function () {
  1670. roll(80);
  1671. roll1(80);
  1672. }
  1673. function roll(t) {
  1674. var ul1 = document.getElementById("comment1");
  1675. var ul2 = document.getElementById("comment2");
  1676. var ulbox = document.getElementById("review_box");
  1677. ul2.innerHTML = ul1.innerHTML;
  1678. ulbox.scrollTop = 0; // 开始无滚动时设为0
  1679. var timer = setInterval(rollStart, t); // 设置定时器,参数t用在这为间隔时间(单位毫秒),参数t越小,滚动速度越快
  1680. // 鼠标移入div时暂停滚动
  1681. ulbox.onmouseover = function () {
  1682. clearInterval(timer);
  1683. }
  1684. // 鼠标移出div后继续滚动
  1685. ulbox.onmouseout = function () {
  1686. timer = setInterval(rollStart, t);
  1687. }
  1688. }
  1689. // 开始滚动函数
  1690. function rollStart() {
  1691. // 上面声明的DOM对象为局部对象需要再次声明
  1692. var ul1 = document.getElementById("comment1");
  1693. var ul2 = document.getElementById("comment2");
  1694. var ulbox = document.getElementById("review_box");
  1695. // 正常滚动不断给scrollTop的值+1,当滚动高度大于列表内容高度时恢复为0
  1696. if (ulbox.scrollTop >= ul1.scrollHeight) {
  1697. ulbox.scrollTop = 0;
  1698. } else {
  1699. ulbox.scrollTop++;
  1700. }
  1701. }
  1702. </script>
  1703. </div>
  1704. <div id="right3_1"></div>
  1705. <!--<div style="color: white;font-size: 12px;margin-bottom: -5px;position: relative;top: -410px;left: 247px;">涉密载体占比</div>-->
  1706. <!--<div id="demo"></div>-->
  1707. <!-- <div class="left2_d"
  1708. style="width: 100px;transform: scale(0.76);margin-right: -40px;margin-left: 177px;">
  1709. 今日<span style="color: #01bbea;">100</span></div>
  1710. <div class="left2_d" style="width: 100px;transform: scale(0.76);margin-right: -38px;"
  1711. style="width: 100px;">
  1712. 一周<span style="color: #ffa531;">100</span></div>
  1713. <div class="left2_d" style="width: 100px;transform: scale(0.76);margin-left: -7px;">一月<span style="color: #009944;">100</span></div> -->
  1714. <!--<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;">涉密载体占比</p>-->
  1715. <!--<p style="display: inline-block;color: white;font-size: 12px;margin-left: 90px;margin-bottom: -5px;position: relative;top: -610px;left: -15px;">已归还份数占比</p>-->
  1716. </div>
  1717. </div>
  1718. </div>
  1719. <img class="title" src="/taishi/img/situationtitle.png" style="position:fixed;width: 100%;" />
  1720. <div id="time"
  1721. style="height: 20px; position:fixed;top:35px;right:3.5vw;color:#30fdff;font-size: 22px;font-family: 'New-X-Digital-tfb-2';">
  1722. </div>
  1723. <a href="/index/welcome"
  1724. style="position: fixed;top: 22px;left: 118px;text-decoration: none;color: #64f5fc;text-align: center;line-height:60px;font-size: 30px;font-weight: bold;">
  1725. <!-- <img src="/taishi/img/anniu.png" style="width:250px;"> -->
  1726. <div class="anniu">主控台</div>
  1727. </a>
  1728. <script type="text/javascript" charset="utf-8" src="/assets/libs/jquery/dist/jquery.min.js"></script>
  1729. <script src="/static/js/laytpl.js"></script>
  1730. <script src="/taishi/main.js"></script>
  1731. <!-- <script src="left2_1.js"></script>
  1732. <script src="left2_2.js"></script>
  1733. <script src="left2_3.js"></script> -->
  1734. <script src="/taishi/center2_d.js"></script>
  1735. <script src="/taishi/center22.js"></script>
  1736. <script src="/taishi/center3_d.js"></script>
  1737. <script src="/taishi/centerl.js"></script>
  1738. <script src="/taishi/right3_1.js"></script>
  1739. <!--<script src="/taishi/demo.js"></script>-->
  1740. <script src="/taishi/left3_d.js"></script>
  1741. <!--滚动插件代码-->
  1742. <!--<script src="/taishi/jquery-1.8.3.min.js"></script>-->
  1743. <!--<script src="/taishi/jquery.liMarquee.js"></script>-->
  1744. <!--右下滚动-->
  1745. <!-- <script>-->
  1746. <!-- $(function () {-->
  1747. <!-- $('#dowebok').liMarquee({-->
  1748. <!-- direction: 'up',-->
  1749. <!-- scrollamount: 80-->
  1750. <!-- });-->
  1751. <!-- });-->
  1752. <!--</script>-->
  1753. </body>
  1754. </html>
  1755. <script type="text/javascript" charset="utf-8">
  1756. $(function () {
  1757. $.get('dashboard/taishi_data', {}, function (res) {
  1758. if (res.msg == '请登录后操作') window.location.href = res.url;
  1759. if (res.code == 0) alert(res.msg);;
  1760. laytpl($('#left1-tpl').html()).render(res.data.left1, function (html) {
  1761. $('#left1').html(html);
  1762. });
  1763. laytpl($('#left2_1-tpl').html()).render(res.data.left2_1, function (html) {
  1764. $('#left2_1').html(html);
  1765. });
  1766. laytpl($('#left3-tpl').html()).render(res.data.left3, function (html) {
  1767. $('#left3').html(html);
  1768. });
  1769. laytpl($('#center1-tpl').html()).render(res.data.center1, function (html) {
  1770. $('#center1').html(html);
  1771. });
  1772. laytpl($('#center2-tpl').html()).render(res.data.center2, function (html) {
  1773. $('#center2').html(html);
  1774. });
  1775. laytpl($('#center4-tpl').html()).render(res.data.center3, function (html) {
  1776. $('#center4').html(html);
  1777. });
  1778. // laytpl($('#right2-tpl').html()).render(res.data.right2,function(html){
  1779. // $('#right2').html(html);
  1780. // });
  1781. laytpl($('#slide1-tpl').html()).render(res.data.right2.count1, function (html) {
  1782. $('#slide1').html(html);
  1783. });
  1784. });
  1785. $.get('dashboard/taishi_api', {}, function (res) {
  1786. // res.data.people2.count[2]=20;
  1787. center2_d(res.data.people1.count, res.data.people1.name);
  1788. center3_d(res.data.people2.count, res.data.people2.name);
  1789. unit_score(res.data.unit_score.name, res.data.unit_score.score);
  1790. right3_1(res.data.secrecy);
  1791. laytpl($('#right3-tpl').html()).render(res.data.duty_statistics, function (html) {
  1792. $('#right3').html(html);
  1793. var mySwiper = new Swiper('.swiper-container', {
  1794. autoplay: {
  1795. delay: 2000, //3秒切换一次
  1796. },
  1797. loop: true,
  1798. speed: 2000,
  1799. slidesPerView: 'auto',
  1800. spaceBetween: 3,
  1801. direction: 'vertical',
  1802. autoplay: 2000,
  1803. autoplayDisableOnInteraction: false //点击后打断auto-play
  1804. })
  1805. });
  1806. });
  1807. });
  1808. </script>