633 lines
13 KiB
SCSS
633 lines
13 KiB
SCSS
.overview {
|
|
height: 100%;
|
|
padding: 0 10px;
|
|
background-color: #f6f6f6;
|
|
}
|
|
.overview-content-header{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-top: 10px;
|
|
padding: 5px 0 0 0;
|
|
background-color: white;
|
|
box-sizing: border-box;
|
|
}
|
|
.overview-content-header .header-title{
|
|
height: 35px;
|
|
line-height: 35px;
|
|
font-size: 1.5rem !important;
|
|
font-weight: 700;
|
|
margin-left: 15px;
|
|
}
|
|
.overview-content-header .header-tool{
|
|
height: 35px;
|
|
min-width: 340px;
|
|
display: flex;
|
|
padding: 5px;
|
|
}
|
|
.overview .header-tool .tool-container{
|
|
display: flex;
|
|
text-align: center;
|
|
justify-content: space-between;
|
|
min-width: 310px;
|
|
padding-right: 7px !important;
|
|
}
|
|
.tool-container .pickTime{
|
|
margin-right: -20px;
|
|
}
|
|
.tool-container .time{
|
|
font-size: 1rem !important;
|
|
display: inline-block;
|
|
height: 35px;
|
|
line-height: 35px;
|
|
color: #333333;
|
|
vertical-align: middle;
|
|
}
|
|
.content-row-box .content-col-box:first-child{
|
|
margin-left: 0;
|
|
}
|
|
.content-row-box .content-col-box:last-child{
|
|
margin-right: 0;
|
|
}
|
|
.tool-container .date{
|
|
height: 35px;
|
|
}
|
|
.date .week{
|
|
font-size: 0.7rem;
|
|
line-height: 1.3rem;
|
|
}
|
|
.date .sys-date{
|
|
color: #333333;
|
|
font-size: 0.75rem;
|
|
line-height: 0.75rem;
|
|
width: 88px;
|
|
}
|
|
.tool-container .operation{
|
|
display: inline-block;
|
|
line-height: 35px;
|
|
}
|
|
.operation .screen-icon{
|
|
font-size: 1.35rem !important;
|
|
cursor: pointer;
|
|
color: #666666;
|
|
}
|
|
.overview-content {
|
|
padding: 0 10px 15px;
|
|
background-color: white;
|
|
box-sizing: border-box;
|
|
height: calc(100% - 42px);
|
|
width: 100%;
|
|
}
|
|
.overview-content .content-row-box {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-content: flex-start;
|
|
}
|
|
.overview-content .content-row-box:first-of-type {
|
|
height: 14%;
|
|
}
|
|
.overview-content .content-row-box:nth-of-type(2) {
|
|
height: 46%;
|
|
}
|
|
.overview-content .content-row-box:nth-of-type(3) {
|
|
height: 39%;
|
|
}
|
|
.overview-content .content-row-box:nth-of-type(2) .content-col-box {
|
|
width: calc(50% - 10px);
|
|
}
|
|
.overview-content .content-row-box:nth-of-type(3) .content-col-box {
|
|
width: calc(33.33% - 10px);
|
|
}
|
|
.content-row-box .content-col-box{
|
|
margin: 5px;
|
|
display: inline-block;
|
|
background-color: white;
|
|
flex: 1;
|
|
border-radius: 5px;
|
|
border: 1px solid #edecec;
|
|
}
|
|
.content-col-title {
|
|
height: 2rem;
|
|
line-height: 2rem;
|
|
color: #333;
|
|
font-size: 0.875rem;
|
|
padding: 0 0.625rem;
|
|
background-color: #efefef;
|
|
border-radius: 5px 5px 0 0;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
.content-col-title .el-dropdown {
|
|
font-size: 0.875rem;
|
|
color: #333;
|
|
.nz-icon-arrow-down {
|
|
font-size: 0.75rem;
|
|
margin: 0 1.2rem 0 0.8rem;
|
|
}
|
|
}
|
|
|
|
.content-col-title-tools {
|
|
display: flex;
|
|
font-size: 0.85rem;
|
|
}
|
|
.content-col-title-tool {
|
|
cursor: pointer;
|
|
padding-left: 1rem;
|
|
padding-right: 0.8rem;
|
|
border-left: 1px solid #e7eaed;
|
|
position: relative;
|
|
.el-cascader {
|
|
height: 100%;
|
|
line-height: 1.6rem;
|
|
position: absolute;
|
|
top: 0;
|
|
opacity: 0;
|
|
width: 0.8rem;
|
|
.el-input__suffix i {
|
|
color: #606266;
|
|
}
|
|
.el-cascader__tags {
|
|
display: none;
|
|
}
|
|
.el-input {
|
|
height: 100%;
|
|
line-height: 1.6rem;
|
|
padding-right: 0.2rem;
|
|
i {
|
|
line-height: 2rem;
|
|
font-size: 0.75rem;
|
|
}
|
|
.el-input__inner {
|
|
height: 100% !important;
|
|
line-height: 1.6rem;
|
|
background-color: #efefef;
|
|
width: 6.688rem;
|
|
padding-left: 0.625rem;
|
|
padding-right: 0.8rem;
|
|
border: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.diy-content {
|
|
height: 2rem;
|
|
pointer-event: none;
|
|
color: #333;
|
|
span, i {
|
|
line-height: 2rem;
|
|
}
|
|
span {
|
|
margin-right: 0.3rem;
|
|
}
|
|
i {
|
|
font-size: 0.75rem;
|
|
}
|
|
}
|
|
.trend-cascader {
|
|
.el-cascader-panel {
|
|
font-size: 0.85rem;
|
|
}
|
|
}
|
|
.no-data-tip {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
color: #bbb;
|
|
transform: translate(-50%, -50%);
|
|
font-size: 1rem;
|
|
}
|
|
.content-col-box .content-col-title .nz-dashboard-picker {
|
|
height: 100%;
|
|
}
|
|
.content-col-box .content-col-title .nz-dashboard-picker .nz-icon-arrow-down {
|
|
width: unset !important;
|
|
}
|
|
.content-col-box .content-col-title .calendar-dropdown-title {
|
|
height: 100%;
|
|
line-height: unset;
|
|
border: none;
|
|
}
|
|
.dropdown-btn {
|
|
position: relative;
|
|
}
|
|
.dropdown-btn .el-popper {
|
|
top: 20px;
|
|
left: unset;
|
|
right: 0;
|
|
}
|
|
.dropdown-btn .el-popper::after {
|
|
content: '';
|
|
display: block;
|
|
width:0;
|
|
height:0;
|
|
overflow: hidden;
|
|
font-size: 0;
|
|
line-height: 0;
|
|
border: 5px;
|
|
border-style: dashed dashed solid dashed;
|
|
border-color: transparent transparent #fff transparent;
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: 0;
|
|
transform: translate(-50%, -54px);
|
|
}
|
|
.content-col-content {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 100%;
|
|
justify-content: center;
|
|
padding: 0 0.5rem;
|
|
border-radius: 0 0 6px 6px;
|
|
position: relative;
|
|
}
|
|
.content-row-box:nth-of-type(2) .content-col-box .content-col-content {
|
|
padding: 0.7rem;
|
|
height: calc(100% - 3rem);
|
|
}
|
|
.content-row-box:nth-of-type(3) .content-col-box .content-col-content {
|
|
height: calc(100% - 2rem);
|
|
}
|
|
.content-row-box:nth-of-type(2) .content-col-box:first-of-type .content-col-title {
|
|
padding-right: 0;
|
|
}
|
|
.content-row-box:first-of-type .content-col-box:last-of-type .content-col-content {
|
|
position: relative;
|
|
}
|
|
.content-row-box:first-of-type .content-col-box:last-of-type .content-col-content>span:last-of-type {
|
|
position: absolute;
|
|
bottom: 5%;
|
|
right: 5%;
|
|
font-size: 0.7rem;
|
|
font-style: italic;
|
|
}
|
|
.content-col-content-icon {
|
|
height: 3.75rem;
|
|
width: 3.75rem;
|
|
border-radius: 50%;
|
|
box-sizing: border-box;
|
|
border: 1px solid #e5eaef;
|
|
position: relative;
|
|
.nz-icon {
|
|
font-size: 1.75rem !important;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
.nz-icon-overview-project {
|
|
color: #80A7F4;
|
|
}
|
|
.nz-icon-project {
|
|
font-size: 1.75rem !important;
|
|
color: #F6B275;
|
|
}
|
|
.nz-icon-overview-module {
|
|
color: #7AD0BC;
|
|
}
|
|
.nz-icon-overview-endpoint {
|
|
color: #969DEA;
|
|
}
|
|
.nz-icon-overview-alert {
|
|
font-size: 1.75rem !important;
|
|
color: #EE9A87;
|
|
}
|
|
}
|
|
.content-num-box {
|
|
padding-left: 1.25rem;
|
|
}
|
|
.content-alert-num {
|
|
position: absolute;
|
|
color: #666;
|
|
font-size: 0.7rem;
|
|
font-style: italic;
|
|
right: 0;
|
|
bottom: 0;
|
|
padding: 0 0.68rem 0.5rem 0;
|
|
}
|
|
.content-num-box .content-col-content-title {
|
|
font-size: 0.875rem;
|
|
color: #666;
|
|
}
|
|
.content-col-content-num {
|
|
font-weight: bold;
|
|
color: #333;
|
|
}
|
|
|
|
.overview-tooltip-box {
|
|
display: flex;
|
|
height: 1.8rem;
|
|
}
|
|
.tooltip-item {
|
|
min-width: 2.8rem;
|
|
padding: 0 0.2rem;
|
|
line-height: 1.8rem;
|
|
font-size: 0.75rem;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.item-status {
|
|
width: 0.625rem;
|
|
height: 0.19rem;
|
|
border-radius: 2px;
|
|
margin-right: 5px;
|
|
}
|
|
@media only screen and (min-width: 10px) and (min-height: 10px){
|
|
.content-col-content-num {
|
|
font-size: 1.44rem;
|
|
}
|
|
}
|
|
@media only screen and (min-width: 1020px) and (min-height: 560px){
|
|
.content-col-content-num {
|
|
font-size: 1.44rem;
|
|
}
|
|
}
|
|
@media only screen and (min-width: 1360px) and (min-height: 650px){
|
|
.content-col-content-num {
|
|
font-size: 1.6rem;
|
|
}
|
|
}
|
|
@media only screen and (min-width: 1700px) and (min-height: 800px){
|
|
.content-col-content-num {
|
|
font-size: 1.8rem;
|
|
}
|
|
}
|
|
.hide-div {
|
|
visibility: hidden;
|
|
}
|
|
.axis-tooltip {
|
|
display: none;
|
|
position: fixed;
|
|
transform: translate(-100%, -50%);
|
|
min-width: unset;
|
|
background-color: rgba(255, 255, 255, 0.8) !important;
|
|
}
|
|
.axis-tooltip::after {
|
|
content: '';
|
|
display: block;
|
|
width:0;
|
|
height:0;
|
|
overflow: hidden;
|
|
font-size: 0;
|
|
line-height: 0;
|
|
border: 5px;
|
|
border-style: dashed dashed dashed solid;
|
|
border-color: transparent transparent transparent #fff ;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 50%;
|
|
transform: translate(100%, -50%);
|
|
}
|
|
.overview-loading{
|
|
width: 35px;
|
|
height: 35px;
|
|
position: relative;
|
|
}
|
|
.overview-loading .el-loading-spinner{
|
|
transform: scale(0.5);
|
|
top: -5px;
|
|
left: 0px;
|
|
}
|
|
|
|
.tooltip{
|
|
opacity: 0.99;
|
|
background: rgba(255,255,255,0.94);
|
|
border-radius: 2px;
|
|
padding: 10px 20px;
|
|
box-sizing: border-box;
|
|
width: 420px;
|
|
height: 320px;
|
|
}
|
|
.content-bottom-box .tooltip{
|
|
width: auto;
|
|
height: auto;
|
|
}
|
|
.leaflet-pane.leaflet-my-pane {
|
|
position: absolute;
|
|
top: -150px;
|
|
left: -420px;
|
|
|
|
.leaflet-tooltip {
|
|
transform: unset !important;
|
|
}
|
|
}
|
|
.tooltip--title {
|
|
color: #333333;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
padding-bottom: 10px;
|
|
}
|
|
.yAxis-text-style{
|
|
white-space: nowrap;
|
|
}
|
|
.overview {
|
|
.tooltip--row {
|
|
//display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: 10px;
|
|
position: relative;
|
|
height: calc(100% - 30px);
|
|
.legend-value {
|
|
font-size: 12px;
|
|
color: #333333;
|
|
position: absolute;
|
|
//left: 155px;
|
|
//top: 35px;
|
|
}
|
|
.legend-value-asset{
|
|
top: 40px;
|
|
right: 67px;
|
|
}
|
|
.legend-value-agent{
|
|
top: 168px;
|
|
right: 67px;
|
|
}
|
|
//.legend-value + .legend-value {
|
|
// left: 356px;
|
|
//}
|
|
|
|
.tooltip-asset {
|
|
width: 260px;
|
|
height: 150px;
|
|
border: 1px solid $--primary-border-color;
|
|
border-radius: 2px;
|
|
|
|
.tooltip-asset--title {
|
|
padding: 0 10px;
|
|
height: 24px;
|
|
line-height: 24px;
|
|
font-size: 14px;
|
|
color: #333333;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
border-bottom: 1px solid $--primary-border-color;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.tooltip-asset--title span:first-of-type {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.tooltip-asset--row {
|
|
display: flex;
|
|
height: 75px;
|
|
box-sizing: border-box;
|
|
border-bottom: 1px solid $--primary-border-color;
|
|
}
|
|
|
|
.tooltip-asset--row + .tooltip-asset--row {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.tooltip-asset--row > div {
|
|
line-height: 25px;
|
|
}
|
|
|
|
.tooltip-asset--row > div:first-of-type {
|
|
width: 70px;
|
|
padding-left: 10px;
|
|
line-height: 75px;
|
|
font-size: 14px;
|
|
border-right: 1px solid $--primary-border-color;
|
|
color: #333333;
|
|
box-sizing: border-box;
|
|
}
|
|
.tooltip-asset--ping{
|
|
height: 50px;
|
|
line-height: 50px !important;
|
|
}
|
|
.tooltip-asset--row .tooltip-asset--sub-rows{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-direction: column;
|
|
}
|
|
.tooltip-asset--sub-row {
|
|
padding-left: 10px;
|
|
font-size: 13px;
|
|
color: #333333;
|
|
line-height: 25px;
|
|
display: flex;
|
|
|
|
.sub-row--label {
|
|
width: 94px;
|
|
}
|
|
|
|
.sub-row--value {
|
|
position: relative;
|
|
|
|
.sign {
|
|
position: absolute;
|
|
height: 5px;
|
|
width: 5px;
|
|
border-radius: 50%;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
left: 15px;
|
|
}
|
|
|
|
.red-sign {
|
|
background-color: $danger-color;
|
|
}
|
|
|
|
.green-sign {
|
|
background-color: $success-color;
|
|
}
|
|
|
|
.gray-sign {
|
|
background-color: $suspended-color;
|
|
}
|
|
span {
|
|
position: absolute;
|
|
left: 26px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.tooltip-alert {
|
|
width: 106px;
|
|
height: 150px;
|
|
box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.12), -1px 1px 4px -1px rgba(205, 205, 205, 0.47);
|
|
|
|
.tooltip-alert--title {
|
|
height: 36px;
|
|
line-height: 36px;
|
|
font-size: 14px;
|
|
padding: 0 10px;
|
|
}
|
|
|
|
.tooltip-alert--title span:first-of-type {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.tooltip-alert--title span:last-of-type {
|
|
padding-left: 10px;
|
|
}
|
|
|
|
.tooltip-alert--row {
|
|
padding: 0 10px;
|
|
margin-bottom: 18px;
|
|
height: 20px;
|
|
font-size: 12px;
|
|
display: flex;
|
|
|
|
.row--label {
|
|
width: 36px;
|
|
border-radius: 4px 0 0 4px;
|
|
color: white;
|
|
text-align: center;
|
|
}
|
|
|
|
.row--label__p1 {
|
|
background-color: #F2866E;
|
|
border-color: #F2866E;
|
|
}
|
|
|
|
.row--label__p2 {
|
|
background-color: #F89984;
|
|
border-color: #F89984;
|
|
}
|
|
|
|
.row--label__p3 {
|
|
background-color: #F7BA78;
|
|
border-color: #F7BA78;
|
|
}
|
|
|
|
.row--value {
|
|
width: 40px;
|
|
border: 1px solid;
|
|
border-radius: 0 4px 4px 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.row--value__p1 {
|
|
color: #F2866E;
|
|
border-color: #F2866E;
|
|
}
|
|
|
|
.row--value__p2 {
|
|
color: #F89984;
|
|
border-color: #F89984;
|
|
}
|
|
|
|
.row--value__p3 {
|
|
color: #F7BA78;
|
|
border-color: #F7BA78;
|
|
}
|
|
}
|
|
}
|
|
|
|
.tooltip-chart {
|
|
width: 100%;
|
|
height: calc(50% - 10px);
|
|
padding-bottom: 5px;
|
|
box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.12), -1px 1px 4px -1px rgba(205, 205, 205, 0.47);
|
|
}
|
|
#tooltip-chart--endpoint{
|
|
margin-bottom: 10px;
|
|
}
|
|
}
|
|
}
|
|
.over-num{
|
|
margin-left: -11px;
|
|
}
|
|
|