/*告警监控*/
|
#databoardWarnView{width: 100%; height:220px; margin-top: 10px;}
|
#databoardWarnTrend{width: 100%; height:200px;}
|
|
/* 运行天数 */
|
.ui-row.main-between {
|
justify-content: space-between;
|
}
|
|
.ui-row {
|
display: flex;
|
width: 100%;
|
flex-wrap: wrap;
|
box-sizing: border-box;
|
}
|
|
.databoard-runday {
|
/* padding: 20px;*/
|
}
|
|
.g-content-run-day {
|
padding: 20px;
|
margin-top: 30px;
|
}
|
|
.databoard-runday .title {
|
text-align: left;
|
margin-bottom: 38px;
|
}
|
|
.databoard-runday .content {
|
padding: 0;
|
}
|
|
.databoard-runday__day {
|
display: inline-table;
|
position: relative;
|
z-index: 2;
|
width: 80px;
|
height: 140px;
|
flex-shrink: 0;
|
background: linear-gradient(180deg, #00faff 0%, #6f7ae7 100%);
|
border-radius: 8px;
|
overflow: hidden;
|
text-align: center;
|
font-size: 100px;
|
font-weight: 500;
|
color: #dbf5ff;
|
line-height: 140px;
|
}
|
|
.databoard-runday__day::before {
|
content: '';
|
position: absolute;
|
top: 50%;
|
left: 50%;
|
z-index: -1;
|
width: calc(100% - 8px);
|
height: calc(100% - 8px);
|
transform: translate3d(-50%, -50%, 0);
|
border: 1px solid rgba(255, 255, 255, 0.65);
|
border-radius: 8px;
|
}
|
|
.databoard-runday__day.zero {
|
color: rgba(219, 245, 255, 0.3);
|
}
|
|
.databoard-runday__unit {
|
width: 20px;
|
height: 28px;
|
margin-left: 15px;
|
font-size: 20px;
|
font-weight: 500;
|
color: #4fccff;
|
line-height: 28px;
|
align-self: flex-end;
|
}
|
|
|
/** 警告**/
|
.databoard-monitor {
|
width: 100%;
|
height: 100%;
|
padding: 15px 20px;
|
}
|
|
.databoard-monitor.databoard-box .title {
|
font-weight: 400;
|
text-align: left;
|
margin-top: 10px;
|
}
|
|
.databoard-box .title {
|
height: 28px;
|
margin-top: 14px;
|
font-size: 20px;
|
font-weight: 500;
|
color: #fff;
|
line-height: 28px;
|
text-align: center;
|
}
|
|
.databoard-monitor .subtitle::before {
|
content: '';
|
position: static;
|
width: 7px;
|
height: 20px;
|
margin-right: 6px;
|
margin-top: -3px;
|
display: inline-block;
|
vertical-align: middle;
|
background: #fff;
|
}
|
|
.databoard-monitor__list {
|
width: 100%;
|
height: 244px;
|
margin-top: 15px;
|
text-align: center;
|
font-size: 14px;
|
color: #4fccff;
|
}
|
|
.databoard-monitor__list table {
|
width: 100%;
|
}
|
|
.databoard-monitor__list tr {
|
height: 34px;
|
line-height: 34px;
|
}
|
.databoard-monitor__list th {
|
text-align: center
|
}
|
|
.databoard-monitor__list td {
|
border: 1px solid rgba(22, 42, 95, 0.5);
|
}
|
|
.databoard-monitor__list thead tr {
|
color: #fff;
|
font-weight: 500;
|
background: rgba(22, 43, 95, 0.6);
|
}
|
|
/* 市电 */
|
.databoard-electric .title {
|
margin: 10px 0 8px;
|
font-size: 16px;
|
height: 22px;
|
line-height: 22px;
|
}
|
|
.databoard-electric__item {
|
width: 100%;
|
margin: auto;
|
}
|
|
.databoard-electric__item:nth-child(1) {
|
color: #fec65f;
|
}
|
|
.databoard-electric__item:nth-child(1) .databoard-electric__ratio--rate {
|
background: #fec65f;
|
}
|
|
.databoard-electric__item:nth-child(2) {
|
color: #6fe621;
|
}
|
|
.databoard-electric__item:nth-child(2) .databoard-electric__ratio--rate {
|
background: #6fe621;
|
}
|
|
.databoard-electric__item:nth-child(3) {
|
color: #fb497c;
|
}
|
|
.databoard-electric__item:nth-child(3) .databoard-electric__ratio--rate {
|
background: #fb497c;
|
}
|
|
.databoard-electric__item+.databoard-electric__item {
|
margin-top: 14px;
|
}
|
|
.databoard-electric__label {
|
height: 22px;
|
margin-bottom: 7px;
|
font-size: 16px;
|
font-weight: 500;
|
line-height: 22px;
|
}
|
|
.databoard-electric__ratio {
|
position: relative;
|
z-index: 2;
|
height: 10px;
|
background: rgba(47, 141, 194, 0.3);
|
border-radius: 7px;
|
}
|
|
.databoard-electric__ratio--rate {
|
position: absolute;
|
top: -1px;
|
left: 0;
|
z-index: 1;
|
border-radius: 7px;
|
height: 12px
|
}
|
|
.databoard-electric__label-text {
|
margin-top: 17px;
|
}
|
|
.databoard-electric__ratio-label {
|
height: 16px;
|
font-size: 14px;
|
font-weight: 400;
|
color: #4fccff;
|
line-height: 16px;
|
}
|
|
.databoard-electric__ratio-label--item {
|
position: relative;
|
padding-left: 22px;
|
}
|
|
.databoard-electric__ratio-label--item::before {
|
content: '';
|
position: absolute;
|
top: 4px;
|
left: 0;
|
width: 12px;
|
height: 8px;
|
border-radius: 1px;
|
}
|
|
.databoard-electric__ratio-label--item:nth-child(1)::before {
|
background: #fec65f;
|
}
|
|
.databoard-electric__ratio-label--item:nth-child(2)::before {
|
background: #6fe621;
|
}
|
|
.databoard-electric__ratio-label--item:nth-child(3)::before {
|
background: #fb497c;
|
}
|
|
.databoard-electric__frequency {
|
width: 90px;
|
height: 22px;
|
margin-left: 56px;
|
font-size: 16px;
|
font-weight: 500;
|
color: #fff;
|
line-height: 22px;
|
}
|
|
|
/** PUE */
|
.ui-row.main-around {
|
justify-content: space-around;
|
}
|
|
.ui-row {
|
display: flex;
|
width: 100%;
|
flex-wrap: wrap;
|
box-sizing: border-box
|
}
|
|
.databoard-pue__circle {
|
position: relative;
|
z-index: 2;
|
width: 140px;
|
height: 140px;
|
margin: 16px 0px 16px 0px;
|
border-radius: 70px;
|
border: 2px solid rgba(79, 204, 255, 0.2);
|
text-align: center;
|
color: #fff;
|
font-size: 50px;
|
font-weight: 500;
|
line-height: 132px;
|
}
|
|
.databoard-pue__circle::after {
|
content: '';
|
position: absolute;
|
z-index: -1;
|
top: 50%;
|
left: 50%;
|
width: 128px;
|
height: 128px;
|
border-radius: 64px;
|
background: linear-gradient(180deg, #00cfff 0, #d201ff 100%);
|
transform: translate3d(-50%, -50%, 0);
|
|
}
|
|
|
/** 电表 */
|
.databoard-electric .title {
|
margin: 10px 0px 8px;
|
font-size: 16px;
|
height: 22px;
|
line-height: 22px;
|
}
|
|
.databoard-box .content {
|
padding: 0 25px;
|
}
|
|
.databoard-electric__dvc,
|
.databoard-electric__ec {
|
width: 150px;
|
}
|
|
.databoard-electric__item {
|
width: 100%;
|
margin: auto;
|
}
|
|
.databoard-electric__item+.databoard-electric__item {
|
margin-top: 14px;
|
}
|
|
.databoard-electric__item:nth-child(1) {
|
color: #fec65f;
|
}
|
|
.databoard-electric__item:nth-child(2) {
|
color: #6fe621;
|
}
|
|
.databoard-electric__item:nth-child(3) {
|
color: #fb497c;
|
}
|
|
.databoard-electric__label {
|
height: 22px;
|
margin-bottom: 7px;
|
font-size: 16px;
|
font-weight: 500;
|
line-height: 22px;
|
}
|
|
.databoard-electric__ratio {
|
osition: relative;
|
z-index: 2;
|
height: 10px;
|
background: rgba(47, 141, 194, 0.3);
|
border-radius: 7px;
|
}
|
|
.databoard-electric__ratio--rate {
|
position: absolute;
|
top: -1px;
|
left: 0;
|
z-index: 1;
|
border-radius: 7px;
|
height: 12px;
|
}
|
|
.databoard-electric__item:nth-child(1) .databoard-electric__ratio--rate {
|
background: #fec65f;
|
}
|
|
.databoard-electric__item:nth-child(2) .databoard-electric__ratio--rate {
|
background: #6fe621;
|
}
|
|
.databoard-electric__item:nth-child(3) .databoard-electric__ratio--rate {
|
background: #fb497c;
|
}
|
|
.databoard-electric__ratio-label .databoard-electric__ratio-label--item {
|
position: relative;
|
padding-left: 22px;
|
}
|
|
|
/** UPS */
|
.databoard-ups .content {
|
margin-top: 32px;
|
padding: 0px 22.5px;
|
}
|
|
.ui-grid {
|
display: flex;
|
width: 100%;
|
padding: 5px;
|
margin: auto;
|
box-sizing: border-box;
|
flex-direction: column;
|
}
|
|
.ui-row.cross-center {
|
align-items: center;
|
}
|
|
.databoard-ups__item {
|
width: 100%;
|
height: 42px;
|
}
|
|
.databoard-ups .databoard-ups__label,
|
.databoard-ups .databoard-ups__input {
|
height: 22px;
|
font-size: 16px;
|
line-height: 22px;
|
flex-shrink: 0;
|
}
|
|
.databoard-ups__label {
|
width: 64px;
|
margin-right: 24px;
|
font-weight: 400;
|
color: #fff;
|
}
|
|
.databoard-ups__input {
|
font-weight: 500;
|
color: #4fccff;
|
}
|
|
.databoard-ups__item+.databoard-ups__item {
|
margin-top: 20px;
|
}
|
|
.databoard-ups__item.power .databoard-ups__range {
|
position: relative;
|
z-index: 2;
|
}
|
|
.databoard-ups__range {
|
width: 220px;
|
margin-right: 4px;
|
}
|
|
.ui-col {
|
position: relative;
|
width: 100%;
|
max-width: 100%;
|
margin: 0;
|
padding: 5px;
|
flex-basis: 0;
|
flex-grow: 1;
|
box-sizing: border-box;
|
}
|
|
.databoard-ups__item.battery .databoard-ups__range {
|
height: 100%;
|
background: url(../../../css/page/single/assets/databoard-battery.svg) no-repeat center;
|
background-size: contain;
|
}
|
|
.databoard-ups__item.power .databoard-ups__range--progress {
|
height: 12px;
|
border-radius: 6px;
|
background: linear-gradient(270deg, #fd3f2f 0, #face15 100%);
|
}
|
|
.databoard-ups__item.power .databoard-ups__range::after {
|
content: '';
|
position: absolute;
|
z-index: -1;
|
width: 95%;
|
height: 12px;
|
border-radius: 5px;
|
background: rgba(47, 141, 194, 0.3);
|
}
|
|
.databoard-ups__item.battery .databoard-ups__range--progress {
|
display: block;
|
width: 0;
|
height: 100%;
|
max-width: 100% !important;
|
max-height: 100% !important;
|
background-image: url(../../../css/page/single/assets/databoard-battery-progress.svg);
|
background-size: cover;
|
|
}
|
|
|
/** 精密空调 */
|
.databoard-crac .content {
|
margin-top: 34px;
|
}
|
|
.databoard-crac__wind {
|
padding: 0;
|
flex-direction: column;
|
}
|
|
.databoard-crac__wind--item {
|
position: relative;
|
height: 48px;
|
padding-left: 68px;
|
}
|
|
.databoard-crac__wind--item::before {
|
content: '';
|
position: absolute;
|
left: 0;
|
top: 0;
|
width: 48px;
|
height: 48px;
|
background: url(assets/databoard-icon-wind.png) no-repeat center;
|
background-size: contain;
|
}
|
|
.databoard-crac__wind .databoard-crac__wind--label,
|
.databoard-crac__wind .databoard-crac__wind--input {
|
height: 22px;
|
font-size: 16px;
|
line-height: 22px;
|
}
|
|
.databoard-crac__wind--label {
|
font-weight: 400;
|
color: #4fccff;
|
}
|
|
.databoard-crac__wind--input {
|
margin-top: 8px;
|
font-weight: 500;
|
color: #fec65f;
|
}
|
|
.databoard-crac__wind--item+.databoard-crac__wind--item {
|
margin-top: 40px;
|
}
|
|
.databoard-crac__wind--item.reverse::before {
|
transform: rotateY(180deg);
|
}
|
|
.databoard-crac__wind-speed {
|
margin-left: 58px;
|
padding: 0;
|
text-align: center;
|
font-size: 16px;
|
font-weight: 400;
|
color: #4fccff;
|
line-height: 22px;
|
}
|
|
.databoard-crac__wind-speed::before {
|
content: '';
|
display: block;
|
width: 126px;
|
height: 126px;
|
background: url(assets/databoard-icon-wind-big.png) no-repeat center;
|
background-size: contain;
|
margin-bottom: 20px;
|
will-change: transform;
|
}
|
|
.databoard-crac__wind-speed.animate::before {
|
animation: rotate 1.5s linear infinite both;
|
}
|
|
@keyframes rotate {
|
0% {
|
transform: rotate(0deg);
|
}
|
|
100% {
|
transform: rotate(360deg);
|
}
|
}
|
|
|
|
|
|
|
|
/** 环境检测 */
|
.databoard-environmental,
|
.databoard-sensor {
|
width: 390px;
|
height: 200px;
|
|
}
|
|
.ui-row.main-center {
|
justify-content: center;
|
}
|
|
.databoard-environmental__box1 {
|
margin-bottom: 8px;
|
}
|
|
.temperature .databoard-environmental__icon {
|
background-image: url(assets/databoard-temperature2.png);
|
}
|
|
.databoard-environmental__icon {
|
display: inline-block;
|
width: 120px;
|
height: 120px;
|
background: no-repeat center;
|
background-size: contain;
|
}
|
|
.databoard-environmental__label {
|
width: 100px;
|
font-size: 20px;
|
font-weight: 500;
|
color: #4fccff;
|
line-height: 28px;
|
text-align: center;
|
}
|
|
.databoard-environmental__label .hot {
|
color: #fec65f;
|
}
|
|
.humidity .databoard-environmental__icon {
|
background-image: url(assets/databoard-humidity2.png);
|
}
|
|
.databoard-sensor .donut{
|
position: relative;
|
width: 140px;
|
height: 140px;
|
}
|
.databoard-sensor .donut__label{
|
position: absolute;
|
left: 50%;
|
top: 50%;
|
width: 48px;
|
height: 66px;
|
transform: translate3d(-50%,-50%,0);
|
color: #4fccff;
|
font-size: 24px;
|
font-weight: 500;
|
line-height: 34px;
|
text-align: center;
|
}
|
|
|
|
/*--------大屏标题--------*/
|
.main .g-box .m-titl1{
|
background-image: url(assets/bgl2.png);
|
}
|
.main .g-box .m-desc{
|
background-image: url(assets/bgl3.png);
|
}
|
|
/*--------警告监控--------*/
|
.main .g-box .m-box .col-l .gjjk{
|
background-image: url(assets/bgl4.png);
|
}
|
.main .g-box .m-box .col-l .gjjk .g-titl .tit i{
|
background-image: url(assets/iconl1.png);
|
}
|
|
/*--------监控设备数量--------*/
|
.main .g-box .m-box .col-c .jksbsl{
|
background-image: url(assets/bgl5.png);
|
}
|
.main .g-box .m-box .col-c .jksbsl .g-titl .tit i{
|
background-image: url(assets/iconl2.png);
|
}
|
|
/*--------PUE--------*/
|
.main .g-box .m-box .col-c .pue{
|
background-image: url(assets/bgl8.png);
|
}
|
.main .g-box .m-box .col-c .pue .g-titl .tit i{
|
background-image: url(assets/iconl3.png);
|
}
|
|
/*--------电表--------*/
|
.main .g-box .m-box .col-c .db{
|
background-image: url(assets/bgl8.png);
|
}
|
.main .g-box .m-box .col-c .db .g-titl .tit i{
|
background-image: url(assets/iconl4.png);
|
}
|
|
/*--------环境监控--------*/
|
.main .g-box .m-box .col-c .hjjk{
|
background-image: url(assets/bgl7.png);
|
}
|
.main .g-box .m-box .col-c .hjjk .g-titl .tit i{
|
background-image: url(assets/iconl5.png);
|
}
|
|
/*--------安全运行天数--------*/
|
.main .g-box .m-box .col-r .aqyxts{
|
background-image: url(assets/bgl8.png);
|
}
|
.main .g-box .m-box .col-r .aqyxts .g-titl .tit i{
|
background-image: url(assets/iconl6.png);
|
}
|
|
/*--------UPS--------*/
|
.main .g-box .m-box .col-r .ups{
|
background-image: url(assets/bgl8.png);
|
}
|
.main .g-box .m-box .col-r .ups .g-titl .tit i{
|
background-image: url(assets/iconl7.png);
|
}
|
|
/*--------精密空调--------*/
|
.main .g-box .m-box .col-r .jmkt{
|
background-image: url(assets/bgl8.png);
|
}
|
.main .g-box .m-box .col-r .jmkt .g-titl .tit i{
|
background-image: url(assets/iconl8.png);
|
}
|
@media only screen and (max-width:1920px){
|
/*环境监控*/
|
.databoard-sensor .title {margin-top:0px;margin-bottom: 15px;height: 16px;font-size: 20px;line-height: 16px;}
|
}
|
|
|
@media only screen and (max-width:1280px) and (max-height: 800px){
|
.div-body {
|
overflow-y: scroll;
|
}
|
/** 隐藏列表下拉滚动条 **/
|
.div-body::-webkit-scrollbar {
|
display: none;
|
}
|
/*IE 10+ ----隐藏滚动条*/
|
.div-body {
|
-ms-overflow-style: none;
|
}
|
/*Firefox ----隐藏滚动条*/
|
.div-body {
|
scrollbar-width: none;
|
}
|
|
/*告警监控*/
|
#databoardWarnView{width: 100%; height:120px; margin-top: 15px;}
|
#databoardWarnTrend{width: 100%; height:140px; margin-top: 10px;}
|
/*运行天数*/
|
.g-content-run-day {padding: 20px 10px;margin-top: 3px;}
|
.databoard-runday__unit{margin-left: 8px;}
|
.databoard-runday__day {width: 50px;height: 95px;font-size: 70px;line-height: 95px;}
|
/*pue*/
|
.databoard-pue__liveload,.databoard-pue__recent7day {margin-top: 5px;}
|
.databoard-pue__circle {width: 110px;height: 110px;border-radius: 55px;font-size: 35px;line-height: 102px;}
|
.databoard-pue__circle::after {width: 100px;height: 100px;border-radius: 50px;}
|
.databoard-electric .title{margin: 5px 5px 5px 5px;}
|
.databoard-box .title {height: 18px;font-size: 16px;line-height: 18px;}
|
.databoard-box .content {padding: 0 10px;}
|
/*电表*/
|
.databoard-electric__dvc, .databoard-electric__ec {width: 115px;margin-top: 5px;}
|
.databoard-electric__label {margin-bottom: 5px;height: 14px;font-size: 16px;line-height: 14px;}
|
.databoard-electric__frequency {height: 16px;font-size: 14px;line-height: 16px;}
|
.databoard-electric__ratio-label .databoard-electric__ratio-label--item {position: relative;padding-left: 16px;}
|
.databoard-electric__frequency {width: 100px;margin-left: 0px;}
|
.ui-col {padding: 1px;}
|
/*ups*/
|
.databoard-ups .content{margin-top: 20px;}
|
.databoard-ups__item{height: 29px;}
|
.databoard-ups .databoard-ups__label, .databoard-ups .databoard-ups__input{margin-left: 8px;margin-right: 5px;font-size: 14px;}
|
.databoard-ups__range{width: 110px;}
|
.databoard-ups__item+.databoard-ups__item{margin-top: 25px;}
|
/*环境监控*/
|
.databoard-environmental__icon{width: 100px;height: 100px;}
|
.hjjk .g-content{padding: 5px;}
|
|
.databoard-environmental,.databoard-sensor {width: 48%;height: 200px;}
|
.databoard-environmental .title {margin-top: 0px;margin-bottom: 8px;height: 14px;font-size: 16px;line-height: 14px;}
|
.databoard-environmental__label {width: 110px;font-size: 16px;line-height: 28px;}
|
.databoard-sensor .donut__label{width: 40px;height: 60px;font-size: 20px;line-height: 30px;}
|
.databoard-sensor .donut{position: relative;width: 110px;height: 110px;}
|
.databoard-sensor .title {margin-top:0px;margin-bottom: 15px;height: 14px;font-size: 16px;line-height: 14px;}
|
|
/*精密空调*/
|
.databoard-crac__wind--item{position: relative;height: 48px;padding-left: 50px;}
|
.databoard-crac__wind--item::before {content: '';position: absolute;left: 10px;top: 10px;width: 32px;height: 32px;background: url(assets/databoard-icon-wind.png) no-repeat center;background-size: contain;}
|
|
.databoard-crac .content{margin-top: 15px;}
|
.databoard-crac__wind-speed::before {display: block;width: 70px;height: 70px;background: url(assets/databoard-icon-wind-big.png) no-repeat center;background-size: contain;margin-bottom: 20px;will-change: transform;}
|
.databoard-crac__wind-speed {margin-left: 32px;padding: 0;text-align: center;font-size: 16px;font-weight: 400;color: #4fccff;line-height: 22px;}
|
.databoard-crac__wind .databoard-crac__wind--label, .databoard-crac__wind .databoard-crac__wind--input {height: 22px;font-size: 14px;line-height: 22px;}
|
}
|
