.right-grid{ grid-template-columns: 472px auto 472px; grid-template-rows: 1fr; } .right-grid-left{ grid-template-columns: 1fr; grid-template-rows: repeat(4,1fr); } .right-grid-center{ grid-template-columns: 1fr; grid-template-rows: 766px auto; } .right-grid-right{ grid-template-columns: 1fr; grid-template-rows: repeat(4,1fr); } #chart-gzfbqk,#chart-bjfx,#chart-sbgzphb,#chart-pcsssjc{ width:100%; height:100%; } .flex-column-table{ flex-direction:column; } .table-wspf{ width:90%; height:50%; } .table-wspf>.table-wspf-head{ font-size:12px; height:18px; line-height:18px; color:#ccf5f9; } .scroll-table-wspf{ width:100%; height:calc(100% - 18px); overflow:hidden; } .table-wspf table{ font-size:12px; width:100%; } .table-wspf table tr{ } .table-wspf table tr th{ font-weight:bolder; } .table-wspf table tr td,.table-wspf table tr th{ height:16px; vertical-align:middle; text-align:center; border:1px solid #6584d7; color:#ccf5f9; } #map-content{ width:100%; height:100%; } .wrapper>.content-container{ border: 0.5px solid #6076ae; border-top: 2px solid #6076ae; height: 100%; display: flex; justify-content: center; align-items: center; position: relative; background-color: rgba(113,138,149,0.1); } .pding-2{ padding:2px; } .justify-around{ justify-content:space-around !important; } .data-statis{ border: 0.5px solid #6076ae; border-top: 2px solid #6076ae; height: 80%; width:20%; position: relative; } .data-statis>.data-circle{ width:140px; height:140px; border-radius:50%; border: 1px solid #6584d7; position:absolute; top:50%; left:50%; margin-top:-70px; margin-left:-70px; display:flex; flex-direction:column; justify-content:center; align-items:center; overflow:hidden; } .data-statis>.data-circle>.data-circle-num{ font-size:20px; color:#c83428; } .data-statis>.data-circle>.data-circle-line{ width:70%; height:2px; background-color:#3996dc; margin:10px 0; } .data-statis>.data-circle>.data-circle-item{ font-size:12px; color:#ccf5f9; } .data-statis>.data-circle>.data-circle-name{ font-size:12px; color:#c83428; height:30px; line-height:30px; } .data-statis>.data-circle>.data-circle-value{ font-size:12px; color:#6584d7; width:60%; text-align:center; } .tab>.widther-tab{ width:197px; } .justify-between{ justify-content:space-between !important; } .mcjc-top-datetime{ display:flex; align-items:center; justify-content:center; height:2em; font-size:0.8em; color:#ccf5f9; } .mcjc-top-datalist{ display:flex; align-items:center; justify-content:center; } .mcjc-top-datalist>.mcjc-top-item,.mcjc-top>.mcjc-top-datalist>.mcjc-top-status,.mcjc-top>.mcjc-top-datalist>.mcjc-top-style{ display:flex; align-items:center; justify-content:center; flex-direction:column; } .mcjc-top-datalist>.mcjc-top-status{ margin: 0 20px; } .mcjc-top-item>.mcjc-top-itemname{ font-size:1em; color:#ccf5f9; line-height:1.8em; } .mcjc-top-status>.mcjc-top-statusvalue{ font-size:1em; line-height:1.8em; color:#17b45e; } .mcjc-top-status>.mcjc-top-statusvalue.leave{ color:#dbb244; } .mcjc-top-style>.mcjc-top-stylevalue{ font-size:1em; line-height:1.8em; color:#17b45e; } .mcjc-top-style>.mcjc-top-stylevalue.stop{ color:#c83428; } .mcjc-top-style>.mcjc-top-stylevalue.waiting{ color:#dbb244; } .mcjc-top-count{ display:flex; align-items:center; justify-content:space-around; width:80%; } .mcjc-top-count>.mcjc-top-count-part{ width:25%; display:flex; align-items:center; justify-content:center; flex-direction:column; color:#ccf5f9; } .mcjc-top-count>.mcjc-top-count-part .mcjc-top-count-part-value{ color:#3996dc; font-size:1.2em; } .mcjc-top-count>.mcjc-top-count-part .mcjc-top-count-part-line{ width:100%; height:1px; background-color:#449ba4; margin:6px 0; } .mcjc-top-count>.mcjc-top-count-part .mcjc-top-count-part-name{ font-size:0.8em; margin-bottom:6px; } #video-box{ width:100%; height:100%; overflow:hidden; } #system-runing-msg{ border: 1px solid #3e68c0; position:absolute; height: 95%; width: 95%; overflow:hidden; } .system-count-msglist-item{ width:100%; display:flex; align-items:center; justify-content:flex-start; font-size:0.6em; height:1.6em; color:#ccf5f9; border-bottom:1px solid #3e68c0; } .system-count-msglist-item>.type{ width:17%; } .system-count-msglist-item>.warning-type{ color:#c83428; } .system-count-msglist-item>.recover-type{ color:#6584d7; } .system-count-msglist-item>.cure-type{ color:#17b45e; } .system-count-msglist-item>.repair-type{ color:#dbb244; } .system-count-msglist-item>.system-count-msglist-content{ width:83%; overflow: hidden; text-overflow:ellipsis; white-space: nowrap; } .clickable-tab{ cursor:pointer; } .open-box-container{ position:fixed; left:0; top:0; width:100%; height:100%; background-color:rgba(0,0,0,0.3); display:none; overflow:hidden; z-index:99; } .open-lauer-box{ position:fixed; top:50%; width:1000px; height:700px; background-color:#021429; border-radius:10px; left:50%; margin-left:-500px; margin-top:-350px; box-shadow: 0px -10px 5px 0px rgba(255,255,255,0.1), -10px 0px 5px 0px rgba(255,255,255,0.1), 10px 0px 10px 0px rgba(255,255,255,0.1), 0px 10px 10px 0px rgba(255,255,255,0.1); } .open-box-head{ height:50px; line-height:50px; width:100%; text-align:center; position:relative; color:#ccf5f9; font-size:1.4em; letter-spacing:0.1em; } .open-box-head:after{ content: ''; position: absolute; bottom: 0px; left: 5%; height: 2px; width: 90%; background: linear-gradient(to right, rgba(11,82,224,0), #0b52e0, rgba(11,82,224,0)); } .open-box-body{ height:calc(100% - 50px); width:100%; display:flex; flex-wrap:wrap; padding:10px; align-items:center; justify-content:center; overflow:hidden; } .open-box-body video{ width:100%; height:100%; } .wsclxt-img{ width:100%; height:100%; } .open-box-chart-area{ width:50%; height:50%; } .open-box-msg-area{ width:50%; height:100%; } .left-line{ position:relative; } .left-line:before{ content:''; position:absolute; height:100%; top:0; right:-1px; width:2px; background: linear-gradient(to top, rgba(11,82,224,0), #0b52e0, rgba(11,82,224,0)); } .open-box-msg-area>.msg-area-header{ width:100%; height:40px; line-height:40px; text-align:center; font-size:1.2em; color:#ccf5f9; letter-spacing:0.1em; } .open-box-msg-area>.msg-area-count{ height:100px; width:100%; display:flex; justify-content:space-around; align-items:center; } .open-box-msg-area>.msg-area-list{ height: calc(100% - 140px); width: 100%; padding:10px; } .open-box-msg-area .msg-area-content{ border: 1px solid #3e68c0; width: 100%; height:100%; overflow: hidden; margin:0 auto } .open-box-msg-area>.msg-area-count>.left-count{ display:flex; justify-content:center; align-items:center; } .open-box-msg-area>.msg-area-count>.left-count>img{ width:35px; margin-right:10px; } .open-box-msg-area>.msg-area-count>.left-count>.left-count-item{ display:flex; justify-content:center; align-items:center; flex-direction:column; color:#ccf5f9; } .open-box-msg-area>.msg-area-count>.left-count>.left-count-item>.left-count-name{ margin-bottom:10px; font-size:1em; } .wsclxt-box{ width:2000px; height:1080px; margin-left:-400px; margin-top:0; top:0; } .wsclxt-back{ background:url(../images/1992.gif) center center no-repeat; background-size:100%; position:relative; } .wscl-status{ position:absolute; font-size:12px; color:#fff; -webkit-transform-origin-x: 0; -webkit-transform: scale(0.75); transform: scale(0.75); width:49px; text-align:center; } .wscl-status{ font-size:9px; } .line-style{ position:absolute; } .line-runingtoright{ animation: toright 0.5s infinite linear; } .line-runingtotop{ animation: totop 0.5s infinite linear; } .line-runingtobottom{ animation: tobottom 0.5s infinite linear; } .line-runingtorightandbottom{ animation: torightandbottom 0.5s infinite linear; } .line-runingtorightandtop{ animation: torightandtop 0.5s infinite linear; } @keyframes toright { from { } to { background-position: 5px 0; } } @keyframes totop { from { } to { background-position: 0 -5px; } } @keyframes tobottom { from { } to { background-position: 100% 5px; } } @keyframes torightandbottom { from { } to { background-position: 100% 6px, 6px 0; } } @keyframes torightandtop { from { } to { background-position: 6px 100%,100% -6px; } } .ylbtojcj{ width:30px; height:1px; top: 228px; left: 93px; -webkit-transform-origin-x: 0; background:linear-gradient(90deg, transparent 50%, #0f0ae8 0) repeat-x; background-size: 5px 1px; background-position: 0 0; } .jcjtozddj{ width: 22px; height: 1px; top: 228px; left: 158px; -webkit-transform-origin-x: 0; background:linear-gradient(90deg, transparent 50%, #0f0ae8 0) repeat-x; background-size: 5px 1px; background-position: 0 0; } .zddjtoylc{ width: 1px; height: 82px; top: 269px; left: 201px; -webkit-transform-origin-x: 0; background: linear-gradient(0deg, transparent 50%, #0f0ae8 0) repeat-y; background-size: 1px 5px; background-position: 100% 0; } .ylctoslb{ width: 12px; height: 1px; top: 397px; left: 242px; -webkit-transform-origin-x: 0; background:linear-gradient(90deg, transparent 50%, #0f0ae8 0) repeat-x; background-size: 5px 1px; background-position: 0 0; } .slbtolyc{ width: 1px; height: 112px; top: 270px; left: 270px; -webkit-transform-origin-x: 0; background: linear-gradient(0deg, transparent 3px, #0f0ae8 3px) repeat-y; background-size: 1px 6px; background-position: 0 0; } .lyctolyb{ width: 20px; height: 1px; top: 202px; left: 307px; -webkit-transform-origin-x: 0; background:linear-gradient(90deg, transparent 50%, #0f0ae8 0) repeat-x; background-size: 5px 1px; background-position: 0 0; } .lybtozds{ width: 20px; height: 1px; top: 202px; left: 365px; -webkit-transform-origin-x: 0; background:linear-gradient(90deg, transparent 50%, #0f0ae8 0) repeat-x; background-size: 5px 1px; background-position: 0 0; } .zdstowsc{ width: 1px; height: 71px; top: 242px; left: 406px; -webkit-transform-origin-x: 0; background: linear-gradient(0deg, transparent 50%, #0f0ae8 0) repeat-y; background-size: 1px 5px; background-position: 100% 0; } .wsctowsb{ width: 20px; height: 1px; top: 370px; left: 453px; -webkit-transform-origin-x: 0; background:linear-gradient(90deg, transparent 50%, #0f0ae8 0) repeat-x; background-size: 5px 1px; background-position: 0 0; } .wsbtoglsx{ width: 20px; height: 1px; top: 367px; left: 510px; -webkit-transform-origin-x: 0; background:linear-gradient(90deg, transparent 50%, #0f0ae8 0) repeat-x; background-size: 5px 1px; background-position: 0 0; } .glsxtoufzyb1{ width: 41px; height: 1px; top: 382px; left: 615px; -webkit-transform-origin-x: 0; background:linear-gradient(90deg, transparent 50%, #0f0ae8 0) repeat-x; background-size: 5px 1px; background-position: 0 0; } .ufzyb1togjsf1{ width: 19px; height: 1px; top: 383px; left: 690px; -webkit-transform-origin-x: 0; background:linear-gradient(90deg, transparent 50%, #0f0ae8 0) repeat-x; background-size: 5px 1px; background-position: 0 0; } .jsf1tocxf1{ width: 13px; height: 1px; top: 383px; left: 733px; -webkit-transform-origin-x: 0; background:linear-gradient(90deg, transparent 50%, #0f0ae8 0) repeat-x; background-size: 5px 1px; background-position: 0 0; } .jsf1totop{ width: 1px; height: 91px; top: 292px; left: 740px; -webkit-transform-origin-x: 0; background: linear-gradient(0deg, transparent 3px, #0f0ae8 3px) repeat-y; background-size: 1px 6px; background-position: 0 0; } .jsf1toxpf{ width: 62px; height: 8px; top: 280px; left: 740px; -webkit-transform-origin-x: 0; background: linear-gradient(0deg, transparent 50%, #0f0ae8 0) repeat-y,linear-gradient(90deg, transparent 50%, #0f0ae8 0) repeat-x; background-size: 1px 6px, 6px 1px; background-position: 100% 0, 0 0; } .csf1tofxf1{ width: 77px; height: 81px; top: 304px; left: 771px; -webkit-transform-origin-x: 0; background: linear-gradient(90deg, transparent 50%, #0f0ae8 0) repeat-x,linear-gradient(0deg, transparent 50%, #0f0ae8 0) repeat-y; background-size: 6px 1px,1px 6px; background-position: 0 100%, 100% 0; } .yuanlioabang{ top: 255px; left: 64px; } .jichuji{ top: 255px; left: 124px; } .zhengdongdianji{ top: 255px; left: 182px; } .lvyechi{ top: 251px; left: 251px; } .lvyebang{ top: 229px; left: 330px; } .zhengdangshai{ top: 229px; left: 386px; } .yuanliaochi{ top: 458px; left: 182px; } .shangliaobang{ top: 429px; left: 254px; } .wushuichi{ top: 424px; left: 393px; } .wushuibang{ top: 398px; left: 477px; } .guolvshuixiang{ top: 410px; left: 557px; } .xunhuanfa{ top: 253px; left: 619px; } .shangpaifa{ top: 253px; left: 657px; } .ufzengyabang1{ top: 412px; left: 659px; } .jinshuifa{ top: 401px; left: 705px; } .chongxifa{ top: 401px; left: 742px; } .xiapaifa{ top: 310px; left: 810px; } .fanxifa{ top: 292px; left: 856px; } .chanpaifa{ top: 208px; left: 888px; } .chanshuifa{ top: 171px; left: 897px; } .xunhuanfa2{ top: 676px; left: 712px; } .shangpaifa2{ top: 677px; left: 757px; } .ufzengyabang2{ top: 857px; left: 693px; } .jinshuifa2{ top: 857px; left: 756px; } .chongxifa2{ top: 857px; left: 812px; } .xiapaifa2{ top: 749px; left: 869px; } .fanxifa2{ top: 731px; left: 915px; } .chanpaifa2{ top: 636px; left: 970px; } .chanshuifa2{ top: 608px; left: 980px; } .mochognxibang{ top: 516px; left: 964px; } .zhongjianshuixiang1{ top: 531px; left: 1041px; } .nfzengyafa{ top: 529px; left: 1116px; } .yijunji{ top: 529px; left: 1163px; } .zugouji{ top: 378px; left: 1172px; } .phji{ top: 378px; left: 1202px; } .yijunji2{ top: 378px; left: 1239px; } .baoanlvxing{ top: 536px; left: 1253px; } .nfgaoyafa{ top: 526px; left: 1309px; } .nfchongxifa{ top: 601px; left: 1310px; } .mochognxibang2{ top: 680px; left: 1361px; } .chongxishuixiang{ top: 709px; left: 1490px; } .chongxipaifangfa{ top: 571px; left: 1443px; } .shibeinongsuochi{ top: 573px; left: 1542px; } .zhongjianshuixiang2{ top: 366px; left: 1486px; } .rozengyabang{ top: 378px; left: 1574px; } .zugouji2{ top: 289px; left: 1638px; } .baoanlvxing2{ top: 390px; left: 1666px; } .rogaoyabang{ top: 380px; left: 1709px; } .rochongxifa{ top: 449px; left: 1722px; } .chongxipaifangfa2{ top: 440px; left: 1843px; } .yanshuicao{ top: 427px; left: 1924px; } .guyefenlidanyuan{ left: 171px; bottom: 288px; text-align:left; } .uf1xitong{ left: 171px; bottom: 261px; text-align:left; } .ufxitong{ left: 171px; bottom: 235px; text-align:left; } .uf2xitong{ left: 171px; bottom: 209px; text-align:left; } .roxitong{ left: 171px; bottom: 182px; text-align:left; } .wscl-3dcontent{ width:100%; height:100%; position:relative; } .wscl-datadetail{ position:absolute; left:20px; top:20px; display:flex; align-items:center; justify-content:start } #WebGL-output{ width:100%; height:500px; } #chart-ws-data{ width:100%; height:calc(100% - 500px); display:flex; justify-content:space-around } #chart-center1,#chart-center2,#chart-center3{ width:33.33%; height:100%; } .t_num{ display:flex; align-items:center; } .t_num i { width: 16.5px; height: 23.5px; display: inline-block; background: url(../images/number1.png) no-repeat; background-position: 0 0; background-size:100%; } .day_handle_count{ color:#ccf5f9; font-size:24px; font-family:Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", "sans-serif" } .all_handle_count{ color:#ccf5f9; font-size:24px; margin-left:20px; font-family:Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", "sans-serif" } .num_dot{ color:#fff; margin:0 7px; font-size:33px; font-family:Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", "sans-serif" } .label{ width:80px; height:30px; text-align:center; line-height:30px; background:linear-gradient(to bottom, #3c92f5, #194d95); border-radius:5px; } .right-wsclset{ position:absolute; right: 6px; bottom: 255px; background:linear-gradient(to bottom, #3c92f5, #194d95); border-radius:5px; z-index:9 } .wsclset-item{ display: flex; justify-content: space-around; align-items: center; height: 38px; font-size: 16px; color: #fff; width: 180px; cursor:pointer; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; } .set-itembottom{ position:relative; } .set-itembottom:after{ content:''; width:90%; position:absolute; left:5%; bottom:0; height:1px; background-color:#a2a2a2 } .wsclset-item>img{ width:30px; } .wscl-dataset-container{ position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.3); overflow: hidden; z-index: 999; display:none; } .wscl-dataset-box{ position:absolute; width:700px; height:760px; left:50%; top:70px; background-color: #021429; border-radius: 10px; margin-left: -350px; box-shadow: 0px -10px 5px 0px rgba(255,255,255,0.1), -10px 0px 5px 0px rgba(255,255,255,0.1), 10px 0px 10px 0px rgba(255,255,255,0.1), 0px 10px 10px 0px rgba(255,255,255,0.1); } .wscl-dataset-box>.open-box-body{ flex-direction:column; } .wsclset-dataTable{ width:90%; border:1px solid #0b52e0; color:#fff; } .wsclset-dataTable tr td{ border:1px solid #0b52e0; height:40px; line-height:40px; text-align:center; } .wsclset-dataTable tr td.top-system-set{ height:40px; line-height:40px; } .wsclset-dataTable tr td.table-real-head{ height:50px; line-height:50px; font-size:16px; font-weight:bold; background-color:#171567; } .wsclset-dataTable tr td.top-system-set{ background-color:#0c0a4a; height:50px; line-height:50px; font-weight:bold; font-size:20px; } .wsclset-dataTable tr td .param-dataset{ border:1px solid #0b52e0; height:30px; line-height:30px; width:85px; background:none; text-align:center; border-radius:5px; color:#fff; } .wsclset-dataTable tr td.switch-block{ width:154px; } input:focus{ outline:none; } .savewsclset{ padding:10px 15px; font-size:16px; color:#fff; background-color:#0a5bb5; border-radius:3px; margin-top: 30px; cursor: pointer; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }