NEZ-1072 feat: 主题切换冲突解决
This commit is contained in:
chenjinsong
@@ -0,0 +1,38 @@
|
||||
.charts__chart-list {
|
||||
.chartBox {
|
||||
float:left;
|
||||
padding: 0 10px 10px 0;
|
||||
position:relative;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.no-data{
|
||||
height: 1189px;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
.icon {
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-top: -52px;
|
||||
margin-left: -40px;
|
||||
text-align: center;
|
||||
}
|
||||
.no-data-div {
|
||||
position: absolute;
|
||||
font-size: 16px;
|
||||
color: $--color-text-primary;
|
||||
font-weight: 400;
|
||||
margin-left: -29px;
|
||||
top: 52.5%;
|
||||
left: 50%
|
||||
}
|
||||
}
|
||||
.list-width{
|
||||
width: 100%;
|
||||
padding: 0 10px 5px 10px;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;/*避免鼠标第一次放到曲线时，x轴出现滚动条后消失*/
|
||||
}
|
||||
}
|
||||
@@ -7,7 +7,6 @@
|
||||
box-shadow: -1px 1px 9px -1px rgba(205,205,205,0.77);
|
||||
|
||||
.alert-label-info{
|
||||
border: 1px solid $--border-color-light;
|
||||
border-bottom: none;
|
||||
font-size: 13px;
|
||||
line-height: 26px;
|
||||
@@ -15,21 +14,21 @@
|
||||
.alert-label-box{
|
||||
display: flex;
|
||||
justify-content:space-between;
|
||||
border-bottom: 1px solid $--border-color-light;
|
||||
}
|
||||
.alert-label-title{
|
||||
text-align: left;
|
||||
width: 110px;
|
||||
border-right: 1px solid $--border-color-light;
|
||||
font-size: 14px;
|
||||
color: $--color-text-regular;
|
||||
letter-spacing: 0;
|
||||
line-height: 23px;
|
||||
min-width: 110px;
|
||||
padding: 0 3px 0 13px;
|
||||
}
|
||||
.alert-label-value{
|
||||
text-align: left;
|
||||
width: 150px;
|
||||
color: #1a1a1a;
|
||||
padding: 0 3px 0 13px;
|
||||
word-break: break-all;
|
||||
height: 26px;
|
||||
font-size: 14px;
|
||||
color: $--color-text-primary;
|
||||
letter-spacing: 0;
|
||||
line-height: 23px;
|
||||
}
|
||||
.danger{
|
||||
background-color: $--color-danger;
|
||||
@@ -46,6 +45,12 @@
|
||||
.active-icon{
|
||||
margin-top: 0;
|
||||
}
|
||||
.alert-label-remark {
|
||||
overflow: hidden;
|
||||
text-overflow:ellipsis;
|
||||
white-space: nowrap;
|
||||
max-width: 210px;
|
||||
}
|
||||
}
|
||||
.alert-label::after, .alert-labelUp::after {
|
||||
content: '';
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
line-height: 0;
|
||||
border: 5px;
|
||||
border-style: dashed solid dashed dashed;
|
||||
border-color: transparent #fff transparent transparent;
|
||||
border-color: transparent $--background-color-empty transparent transparent;
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
left: 0;
|
||||
@@ -47,7 +47,7 @@
|
||||
line-height: 0;
|
||||
border: 5px;
|
||||
border-style: dashed solid dashed dashed;
|
||||
border-color: transparent #fff transparent transparent;
|
||||
border-color: transparent $--background-color-empty transparent transparent;
|
||||
position: absolute;
|
||||
bottom: 95px;
|
||||
left: 0;
|
||||
@@ -61,7 +61,6 @@
|
||||
box-shadow: -1px 1px 9px -1px rgba(205,205,205,0.77);
|
||||
}
|
||||
.alert-rule-info{
|
||||
border: 1px solid $--border-color-light;
|
||||
border-bottom: none;
|
||||
font-size: 13px;
|
||||
line-height: 26px;
|
||||
|
||||
@@ -119,6 +119,12 @@
|
||||
.bottom-box .sub-container .nz-table2{
|
||||
height: calc(100% - 20px);
|
||||
}
|
||||
.asset-detail .sub-container .nz-table2 {
|
||||
height: 100%;
|
||||
}
|
||||
.endpoint-tab-new .sub-container .nz-table2 {
|
||||
height: 100%;
|
||||
}
|
||||
/* end--二级顶部工具栏*/
|
||||
|
||||
.log-no-data {
|
||||
|
||||
@@ -80,5 +80,8 @@
|
||||
width: calc(100% - 20px);
|
||||
}
|
||||
}
|
||||
.nz-detail-view-no-data {
|
||||
border-top: 1px solid $--border-color-light;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -39,6 +39,7 @@
|
||||
position: relative;
|
||||
padding: 0;
|
||||
background-color: $--background-color-empty;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.sub-box .top-tools.top-tools--sub {
|
||||
|
||||
@@ -1,15 +1,15 @@
|
||||
.tooltip-box {
|
||||
background: $--background-color-empty;
|
||||
box-shadow: 1px 2px 8px 0 rgba(0, 0, 0, 0.11);
|
||||
box-shadow: 1px 2px 8px 0 rgba(0, 0, 0, 0.08);
|
||||
border-radius: 4px;
|
||||
padding: 10px;
|
||||
max-height: 400px;
|
||||
min-height: 200px;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid $--border-color-light;
|
||||
|
||||
.tooltip-box-chart {
|
||||
border: 1px solid $--border-color-light;
|
||||
max-height: 400px;
|
||||
min-height: 200px;
|
||||
height: 100%;
|
||||
@@ -38,6 +38,7 @@
|
||||
margin-top: 24px;
|
||||
padding-top: 5px;
|
||||
line-height: 16px;
|
||||
border-top: 1px dashed $--border-color-base;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -61,7 +62,6 @@
|
||||
.topology-tool-tip .topology-chart-title {
|
||||
margin-top: -23px;
|
||||
border-bottom: 1px dashed $--border-color-base;
|
||||
padding-left: 0;
|
||||
margin-left: 10px;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
|
||||
@@ -0,0 +1,78 @@
|
||||
.info-content{
|
||||
display: flex;
|
||||
margin-right: 15px;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
background: $--background-color-empty;
|
||||
border: 1px solid $--border-color-light;
|
||||
box-shadow: 0 6px 16px 0 rgba(0,0,0,0.08);
|
||||
border-radius: 3px;
|
||||
}
|
||||
.pop-data-info-content {
|
||||
|
||||
.info-box {
|
||||
background: $--background-color-empty;
|
||||
margin-bottom: 15px;
|
||||
min-width: 260px;
|
||||
}
|
||||
|
||||
.info-box-title {
|
||||
background: $--background-color-1;
|
||||
font-size: 14px;
|
||||
color: $--color-text-primary;
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
padding-left: 12px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.info-box-content {
|
||||
font-size: 12px;
|
||||
color: $--color-text-primary;
|
||||
}
|
||||
|
||||
.content-box {
|
||||
padding: 0 12px;
|
||||
height: 26px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.content-title {
|
||||
font-size: 14px;
|
||||
min-width: 120px;
|
||||
display: inline-block;
|
||||
color: $--color-text-regular;
|
||||
padding: 3px 0;
|
||||
}
|
||||
|
||||
.content-text {
|
||||
color: $--color-text-primary;
|
||||
font-size: 14px;
|
||||
padding: 3px 5px;
|
||||
}
|
||||
|
||||
.module-type {
|
||||
text-align: center;
|
||||
width: 44px;
|
||||
display: inline-block;
|
||||
height: 20px;
|
||||
margin: 0 auto;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.module-type:first-child {
|
||||
border-radius: 4px 0 0 4px;
|
||||
margin-right: -4px;
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.module-type:last-child {
|
||||
border-radius: 0 4px 4px 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.module-type-select {
|
||||
border-color: rgba(255, 140, 14, 0.54);
|
||||
color: rgba(255, 140, 14, 0.54);
|
||||
}
|
||||
}
|
||||
@@ -1,3 +1,4 @@
|
||||
.right-box-alert-rule {
|
||||
.severity-circle{
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
@@ -6,7 +7,7 @@
|
||||
.severity-box{
|
||||
position: relative;
|
||||
}
|
||||
.severity-box /deep/ .el-select .el-input__inner{
|
||||
.severity-box .el-select .el-input__inner{
|
||||
padding-left: 25px;
|
||||
}
|
||||
.half-form-item {
|
||||
@@ -16,13 +17,13 @@
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.right-box-alert-rule /deep/ .right-box__container .el-form-item__content .el-input-group--prepend{
|
||||
.right-box-alert-rule .right-box__container .el-form-item__content .el-input-group--prepend{
|
||||
width: 100%;
|
||||
}
|
||||
/deep/ .rich-text-editor{
|
||||
.rich-text-editor{
|
||||
line-height: 24px;
|
||||
}
|
||||
/deep/ .el-input-group__prepend{
|
||||
.el-input-group__prepend{
|
||||
position: relative;
|
||||
.hide-icon{
|
||||
width: 38px;
|
||||
@@ -43,7 +44,7 @@
|
||||
margin-bottom: 10px;
|
||||
height: 24px;
|
||||
}
|
||||
/deep/ .el-form-item__content .el-input-group{
|
||||
.el-form-item__content .el-input-group{
|
||||
vertical-align: middle;
|
||||
}
|
||||
.severity-item{
|
||||
@@ -57,3 +58,7 @@
|
||||
text-overflow:ellipsis;
|
||||
white-space:nowrap
|
||||
}
|
||||
.query-row .metric-selector-input-box {
|
||||
width: calc(100% - 120px);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -20,11 +20,17 @@
|
||||
padding: 2px 6px;
|
||||
}
|
||||
.schedEnableTitle {
|
||||
padding: 15px 20px;
|
||||
padding: 20px 15px;
|
||||
margin-right: 0;
|
||||
left: 1995px !important;
|
||||
background: $--background-color-empty;
|
||||
border: 1px solid rgba(119,131,145,0.60);
|
||||
box-shadow: 0 6px 16px 0 rgba(0,0,0,0.08);
|
||||
border-radius: 3px;
|
||||
}
|
||||
.schedEnableTitle .nz-icon-a-rilizhou, .schedEnableTitle .nz-icon-dingshishijian {
|
||||
font-size: 14px;
|
||||
color: $--color-primary;
|
||||
color: $--color-text-regular;
|
||||
margin-right: 12px;
|
||||
}
|
||||
.schedEnableTitle .week-item {
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
@import './charts/chart.scss';
|
||||
@import './charts/chart-list.scss';
|
||||
@import './cli/webSSH.scss';
|
||||
@import './common/alert/alertLabel.scss';
|
||||
@import './common/alert/alertRuleInfo.scss';
|
||||
@@ -19,6 +20,7 @@
|
||||
@import './common/popBox/selectAssetType.scss';
|
||||
@import './common/popBox/selectPanel.scss';
|
||||
@import './common/popBox/selectWalk.scss';
|
||||
@import './common/project/popData/Info.scss';
|
||||
@import './common/project/L5/popData/common.scss';
|
||||
@import './common/project/L5/CanvasContextMenu.scss';
|
||||
@import './common/project/L5/CanvasProps.scss';
|
||||
|
||||
@@ -1,6 +1,15 @@
|
||||
.alert-message-list {
|
||||
.active {
|
||||
border-bottom: 3px solid $--color-primary;
|
||||
color: $--color-text-primary;
|
||||
cursor: default;
|
||||
font-weight: bold;
|
||||
}
|
||||
.list-page .main-container{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.nz-table2{
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,13 +4,11 @@
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
border-radius: 4px;
|
||||
display: inline-block;
|
||||
display: inline-flex;
|
||||
box-sizing: content-box;
|
||||
.nz-alert-tag__label {
|
||||
border-radius: 3px 0 0 3px;
|
||||
padding: 0 4px;
|
||||
min-width: 36px;
|
||||
max-width: 100px;
|
||||
text-align: center;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
@@ -22,6 +20,7 @@
|
||||
margin-left: -1px;
|
||||
}
|
||||
.nz-alert-tag__content {
|
||||
flex: 1;
|
||||
border-radius: 0 3px 3px 0;
|
||||
padding: 0 4px;
|
||||
min-width: 36px;
|
||||
@@ -34,10 +33,10 @@
|
||||
display: inline-block;
|
||||
}
|
||||
.nz-alert-tag_normal {
|
||||
border-color: #409eff;
|
||||
border-color: $--color-text-link;
|
||||
.nz-alert-tag__label {
|
||||
border-right: 1px solid #409eff;
|
||||
background-color: #409eff;
|
||||
border-right: 1px solid $--color-text-link;
|
||||
background-color: $--color-text-link;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
line-height: 24px;
|
||||
}
|
||||
.mib-browser-ad-search {
|
||||
width: 450px;
|
||||
width: 300px;
|
||||
}
|
||||
.mib-browser-model-dropdown {
|
||||
height: 300px;
|
||||
|
||||
@@ -6,6 +6,14 @@
|
||||
.log-table{
|
||||
position: relative;
|
||||
min-height: 200px;
|
||||
.table-no-data {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-top: -35px;
|
||||
margin-left: -50px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.log-table .nz-table2 {
|
||||
padding: 10px 0 0 0;
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
.border-t-1-de{
|
||||
border-top: 1px solid $--border-color-base;
|
||||
padding-top: 10px;
|
||||
}
|
||||
.border-t-1-tr{
|
||||
border-top: 1px solid transparent;
|
||||
|
||||
@@ -1214,32 +1214,30 @@ li {
|
||||
}
|
||||
.result-detail{
|
||||
height: 100px;
|
||||
/*overflow-y: auto;*/
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.result-title-top{
|
||||
font-family: Roboto-Regular;
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
color: $--color-text-primary;
|
||||
letter-spacing: 0;
|
||||
font-weight: 400;
|
||||
}
|
||||
.nz-icon-import-success{
|
||||
margin-right: 5px;
|
||||
color: #23BF9A ;
|
||||
color: $--color-success;
|
||||
font-size: 14px;
|
||||
background: #fff;
|
||||
background: $--background-color-empty;
|
||||
}
|
||||
.nz-icon-import-failed {
|
||||
margin-right: 5px;
|
||||
color: #EC7F66 ;
|
||||
color: $--color-danger;
|
||||
font-size: 14px;
|
||||
background: #fff;
|
||||
background: $--background-color-empty;
|
||||
}
|
||||
.result-detail {
|
||||
opacity: 0.9;
|
||||
background: #F6F8FA;
|
||||
border: 1px solid #E7EAED;
|
||||
background: $--background-color-base;
|
||||
border: 1px solid $--border-color-light;
|
||||
border-radius: 2px;
|
||||
padding: 12px;
|
||||
margin-top: 10px;
|
||||
@@ -1248,9 +1246,8 @@ li {
|
||||
display: flex;
|
||||
margin-bottom: 5px;
|
||||
.line-num {
|
||||
font-family: Roboto-Medium;
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
color: $--color-text-primary;
|
||||
letter-spacing: 0;
|
||||
line-height: 16px;
|
||||
font-weight: 600;
|
||||
@@ -1258,15 +1255,13 @@ li {
|
||||
}
|
||||
.line-content{
|
||||
flex: 1;
|
||||
font-family: Roboto-Black;
|
||||
font-size: 14px;
|
||||
color: #666666;
|
||||
color: $--color-text-regular;
|
||||
letter-spacing: 0;
|
||||
line-height: 16px;
|
||||
font-weight: 400;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
overflow:hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
@@ -1278,11 +1273,11 @@ li {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
color: #666666;
|
||||
color: $--color-text-regular;
|
||||
letter-spacing: 0;
|
||||
font-weight: 600;
|
||||
.nz-icon-import-success {
|
||||
color: #23BF9A;
|
||||
color: $--color-success;
|
||||
font-size: 80px;
|
||||
}
|
||||
.result-success-txt{
|
||||
@@ -1307,7 +1302,6 @@ li {
|
||||
top:50%;
|
||||
left:50%;
|
||||
transform:translate(-50%,-50%);
|
||||
/*height:600px;*/
|
||||
max-height:calc(100% - 30px);
|
||||
max-width:calc(100% - 30px);
|
||||
}
|
||||
|
||||
@@ -1,44 +1,5 @@
|
||||
<style scoped>
|
||||
.chartBox {
|
||||
float:left;
|
||||
padding: 0 10px 10px 0;
|
||||
position:relative;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.no-data{
|
||||
height: 1189px;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
.icon {
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-top: -52px;
|
||||
margin-left: -40px;
|
||||
text-align: center;
|
||||
}
|
||||
.no-data-div {
|
||||
position: absolute;
|
||||
font-size: 16px;
|
||||
color: #333333;
|
||||
font-weight: 400;
|
||||
margin-left: -29px;
|
||||
top: 52.5%;
|
||||
left: 50%
|
||||
}
|
||||
}
|
||||
.list-width{
|
||||
width: 100%;
|
||||
//height: 100%;
|
||||
padding: 0 10px 5px 10px;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;/*避免鼠标第一次放到曲线时，x轴出现滚动条后消失*/
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div class="list-width" id="listContainer" ref="listContainer"><!--v-drag-->
|
||||
<div id="listContainer" ref="listContainer" class="list-width charts__chart-list"><!--v-drag-->
|
||||
|
||||
<draggable v-model="dataList" :disabled="panelLock" :move="move" @end="end" @start="start"
|
||||
:scroll-sensitivity="150"
|
||||
|
||||
@@ -177,7 +177,7 @@
|
||||
<div class="alert-label-title">{{$t('overall.state')}}</div>
|
||||
<div class="alert-label-value">
|
||||
<span style="width: auto">
|
||||
<span class="endpoint-cell-left"><i class="nz-icon nz-icon-Metrics colorFA901C" /> {{$t('project.endpoint.metrics')}} </span>
|
||||
<span class="endpoint-cell-left"><i class="nz-icon nz-icon-Metrics active" /> {{$t('project.endpoint.metrics')}} </span>
|
||||
<span v-if="alertLabelData && alertLabelData.configs[0].state === 0">
|
||||
<span class="active-icon red-bg inline-block"></span>
|
||||
</span>
|
||||
@@ -189,7 +189,7 @@
|
||||
</span>
|
||||
</span>
|
||||
<span style="width: auto">
|
||||
<span class="endpoint-cell-left" style="margin-left: 10px"><i class="nz-icon nz-icon-logs colorFA901C" /> {{$t('project.endpoint.logs')}} </span>
|
||||
<span class="endpoint-cell-left" style="margin-left: 10px"><i class="nz-icon nz-icon-logs active" /> {{$t('project.endpoint.logs')}} </span>
|
||||
<span v-if="alertLabelData && alertLabelData.configs[1].state === 0">
|
||||
<span class="active-icon red-bg inline-block"></span>
|
||||
</span>
|
||||
@@ -401,110 +401,3 @@ export default {
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.alert-label {
|
||||
position: fixed;
|
||||
background-color: white;
|
||||
z-index: 3000;
|
||||
padding: 10px 23px 10px 10px;
|
||||
border-radius: 4px;
|
||||
box-shadow: -1px 1px 9px -1px rgba(205,205,205,0.77);
|
||||
}
|
||||
.alert-label__border {
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #E7EAED;
|
||||
box-shadow: 0 6px 16px 0 rgba(0,0,0,0.08);
|
||||
border-radius: 3px 3px 3px 3px 0 0;
|
||||
}
|
||||
.alert-labelUp {
|
||||
position: fixed;
|
||||
background-color: white;
|
||||
z-index: 3000;
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
box-shadow: -1px 1px 9px -1px rgba(205,205,205,0.77);
|
||||
}
|
||||
.alert-label::after {
|
||||
content: '';
|
||||
display: block;
|
||||
width:0;
|
||||
height:0;
|
||||
overflow: hidden;
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
/*border: 5px;*/
|
||||
/*border-style: dashed solid dashed dashed;*/
|
||||
/*border-color: transparent #fff transparent transparent;*/
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 0;
|
||||
transform: translate(-100%, -50%);
|
||||
}
|
||||
.alert-labelUp::after {
|
||||
content: '';
|
||||
display: block;
|
||||
width:0;
|
||||
height:0;
|
||||
overflow: hidden;
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
/*border: 5px;*/
|
||||
/*border-style: dashed solid dashed dashed;*/
|
||||
/*border-color: transparent #fff transparent transparent;*/
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
left: 0;
|
||||
transform: translate(-100%, -50%);
|
||||
}
|
||||
.alert-label-info{
|
||||
/*border: 1px solid #ebeef5;*/
|
||||
border-bottom: none;
|
||||
font-size: 13px;
|
||||
line-height: 26px;
|
||||
}
|
||||
.alert-label-box{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
/*border-bottom: 1px solid #ebeef5;*/
|
||||
}
|
||||
.alert-label-title{
|
||||
font-size: 14px;
|
||||
color: #666666;
|
||||
letter-spacing: 0;
|
||||
line-height: 23px;
|
||||
min-width: 110px;
|
||||
padding: 0 3px 0 13px;
|
||||
}
|
||||
.alert-label-value{
|
||||
height: 26px;
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
letter-spacing: 0;
|
||||
line-height: 23px;
|
||||
}
|
||||
.alert-label-remark {
|
||||
overflow: hidden;
|
||||
text-overflow:ellipsis;
|
||||
white-space: nowrap;
|
||||
max-width: 210px;
|
||||
}
|
||||
.danger{
|
||||
background-color: #d64f40;
|
||||
color: white;
|
||||
padding: 2px 5px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.success{
|
||||
background-color: #50d050;
|
||||
color: white;
|
||||
padding: 2px 5px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
/deep/.active-icon{
|
||||
margin-top: 0;
|
||||
}
|
||||
.colorFA901C{
|
||||
color: #fa901c;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -16,17 +16,6 @@
|
||||
<div class="alert-rule-box">
|
||||
<div class="alert-rule-title">{{$t('alert.severity')}}</div>
|
||||
<div class="alert-rule-value"><i class="nz-icon nz-icon-circle" :style="{color:severityColor,'font-size':'12px','margin-right':'5px'}"></i>{{alertRuleData.severityId ? severityData.find(s => alertRuleData.severityId === s.id).name : '--'}}</div>
|
||||
<!-- <div class="alert-rule-value severity">
|
||||
<span v-if="alertRuleData && alertRuleData.severity === 'P1'" class="P1">
|
||||
{{$CONSTANTS.alertMessage.severityData.find(s => {return s.value === 'P1'}).label}}
|
||||
</span>
|
||||
<span v-if="alertRuleData && alertRuleData.severity === 'P2'" class="P2">
|
||||
{{$CONSTANTS.alertMessage.severityData.find(s => {return s.value === 'P2'}).label}}
|
||||
</span>
|
||||
<span v-if="alertRuleData && alertRuleData.severity === 'P3'" class="P3">
|
||||
{{$CONSTANTS.alertMessage.severityData.find(s => {return s.value === 'P3'}).label}}
|
||||
</span>
|
||||
</div>-->
|
||||
</div>
|
||||
<div class="alert-rule-box">
|
||||
<div class="alert-rule-title">{{$t('alert.config.expr')}}</div>
|
||||
@@ -155,170 +144,3 @@ export default {
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.alert-rule-tip {
|
||||
position: fixed;
|
||||
background-color: white;
|
||||
z-index: 3000;
|
||||
padding: 10px 23px 10px 10px;
|
||||
border-radius: 4px;
|
||||
box-shadow: -1px 1px 9px -1px rgba(205,205,205,0.77);
|
||||
}
|
||||
.alert-rule-tip::after {
|
||||
content: '';
|
||||
display: block;
|
||||
width:0;
|
||||
height:0;
|
||||
overflow: hidden;
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
border: 5px;
|
||||
border-style: dashed solid dashed dashed;
|
||||
border-color: transparent #fff transparent transparent;
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
left: 0;
|
||||
transform: translate(-100%, -50%);
|
||||
}
|
||||
.alert-rule-abs {
|
||||
background-color: white;
|
||||
z-index: 3000;
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
box-shadow: -1px 1px 9px -1px rgba(205,205,205,0.77);
|
||||
}
|
||||
.alert-rule-tip-Up {
|
||||
position: fixed;
|
||||
background-color: white;
|
||||
z-index: 3000;
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
box-shadow: -1px 1px 9px -1px rgba(205,205,205,0.77);
|
||||
}
|
||||
.alert-rule-tip-Up::after {
|
||||
content: '';
|
||||
display: block;
|
||||
width:0;
|
||||
height:0;
|
||||
overflow: hidden;
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
border: 5px;
|
||||
border-style: dashed solid dashed dashed;
|
||||
border-color: transparent #fff transparent transparent;
|
||||
position: absolute;
|
||||
bottom: 95px;
|
||||
left: 0;
|
||||
transform: translate(-100%, -50%);
|
||||
}
|
||||
.alert-rule-abs-Up {
|
||||
background-color: white;
|
||||
z-index: 3000;
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
box-shadow: -1px 1px 9px -1px rgba(205,205,205,0.77);
|
||||
}
|
||||
.alert-rule-info{
|
||||
border-bottom: none;
|
||||
font-size: 13px;
|
||||
line-height: 26px;
|
||||
}
|
||||
.alert-rule-box{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
.alert-rule-title{
|
||||
text-align: left;
|
||||
min-width: 110px;
|
||||
color: #666;
|
||||
padding: 0 3px 0 13px;
|
||||
}
|
||||
.alert-rule-value{
|
||||
text-align: left;
|
||||
color: #1a1a1a;
|
||||
padding: 0 3px 0 13px;
|
||||
width: 159px;
|
||||
word-wrap: break-word;
|
||||
white-space: normal;
|
||||
overflow: hidden;
|
||||
}
|
||||
.severity .P1{
|
||||
background: #F5846A;
|
||||
border-radius: 2px;
|
||||
font-size: 12px;
|
||||
color: #FFFFFF;
|
||||
padding: 2px 6px;
|
||||
}
|
||||
.severity .P2{
|
||||
background: #F7A54A;
|
||||
border-radius: 2px;
|
||||
font-size: 12px;
|
||||
color: #FFFFFF;
|
||||
padding: 2px 6px;
|
||||
}
|
||||
.severity .P3{
|
||||
background: #F1C13D;
|
||||
border-radius: 2px;
|
||||
font-size: 12px;
|
||||
color: #FFFFFF;
|
||||
padding: 2px 6px;
|
||||
}
|
||||
.alert-label__border {
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #E7EAED;
|
||||
box-shadow: 0 6px 16px 0 rgba(0,0,0,0.08);
|
||||
border-radius: 3px 3px 3px 3px 0 0;
|
||||
}
|
||||
/* .alert-rule-info::after {
|
||||
content: '';
|
||||
display: block;
|
||||
width:0;
|
||||
height:0;
|
||||
overflow: hidden;
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
border: 5px;
|
||||
border-style: dashed solid dashed dashed;
|
||||
border-color: transparent #fff transparent transparent;
|
||||
position: absolute;
|
||||
top: calc(50% - 6px);
|
||||
left: 0;
|
||||
transform: translate(-100%, -100%);
|
||||
}
|
||||
.alert-rule-info{
|
||||
border: 1px solid #ebeef5;
|
||||
border-bottom: none;
|
||||
font-size: 13px;
|
||||
line-height: 26px;
|
||||
}*/
|
||||
/* .alert-rule-info{
|
||||
border: 1px solid #ebeef5;
|
||||
border-bottom: none;
|
||||
font-size: 13px;
|
||||
line-height: 26px;
|
||||
display: flex;
|
||||
background-color: white;
|
||||
padding: 10px;
|
||||
transform: translateY(-50%);
|
||||
overflow-wrap: break-word;
|
||||
border-radius: 4px;
|
||||
box-shadow: -1px 1px 9px -1px rgba(205,205,205,0.77);
|
||||
}
|
||||
.alert-rule-box{
|
||||
display: flex;
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
}
|
||||
.alert-rule-title{
|
||||
text-align: left;
|
||||
width: 80px;
|
||||
border-right: 1px solid #ebeef5;
|
||||
color: #666;
|
||||
padding: 0 3px 0 13px;
|
||||
}
|
||||
.alert-rule-value{
|
||||
text-align: left;
|
||||
color: #1a1a1a;
|
||||
padding: 0 3px 0 13px;
|
||||
}*/
|
||||
</style>
|
||||
|
||||
@@ -293,135 +293,3 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
/* begin--二级顶部工具栏*/
|
||||
.sub-top-tools {
|
||||
display: flex;
|
||||
height: 32px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-top: 1px solid #DCDFE6;
|
||||
border-bottom: 1px solid #E4E7ED;
|
||||
margin: 0 -6px;
|
||||
padding-right: 80px;
|
||||
background-color: $content-right-background-color;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.sub-top-tools>div {
|
||||
margin-top: 2px;
|
||||
}
|
||||
.sub-top-tools .top-tool-search {
|
||||
width: 260px;
|
||||
margin: -1px 0 0 0;
|
||||
.select_input input {
|
||||
background-color: white;
|
||||
}
|
||||
}
|
||||
.bottom-data-list .sub-container {
|
||||
padding: 10px;
|
||||
height: calc(100% - 64px);
|
||||
background-color: #f6f6f6;
|
||||
overflow-y: auto;
|
||||
&>div {
|
||||
background-color: white;
|
||||
}
|
||||
&>.nz-table2 {
|
||||
height: 100%;
|
||||
padding-top: 20px !important;
|
||||
}
|
||||
}
|
||||
.sub-top-tools .top-tool-btn-txt .nz-icon{
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
.sub-top-tool-right {
|
||||
display: flex;
|
||||
align-content: center;
|
||||
}
|
||||
.has-sub-popper {
|
||||
color: $danger-color;
|
||||
}
|
||||
.sub-box {
|
||||
height: 50%;
|
||||
position: relative;
|
||||
}
|
||||
.sub-list {
|
||||
height: calc(100% - 9px);
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
top: 9px;
|
||||
|
||||
.sub-list__tabs {
|
||||
height: 100%;
|
||||
background-color: white;
|
||||
|
||||
&>div {
|
||||
height: 100%;
|
||||
background-color: #f6f6f6;
|
||||
|
||||
&>.nz-table2 {
|
||||
height: calc(100% - 92px);
|
||||
padding: 20px 20px 0;
|
||||
}
|
||||
}
|
||||
.chart-list{
|
||||
.nz-table2 {
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.main-and-sub-transition {
|
||||
transition: .4s height;
|
||||
}
|
||||
|
||||
.bottom-panel {
|
||||
padding-top: 15px;
|
||||
background-color: white;
|
||||
/*padding-bottom: 50px;*/
|
||||
/*height: calc(100% - 50px);*/
|
||||
padding-bottom: 10px;
|
||||
height: calc(100% - 30px);
|
||||
}
|
||||
.bottom-log {
|
||||
padding: 15px;
|
||||
}
|
||||
.bottom-common {
|
||||
padding: 20px;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.chart-temp{
|
||||
height: calc(100% - 20px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
.resize-modal {
|
||||
width: calc(100% - 240px);
|
||||
opacity: 0.6;
|
||||
background-color: #f5f9ff;
|
||||
border: 1px solid #a7d0f7;
|
||||
box-sizing: border-box;
|
||||
position: fixed;
|
||||
cursor: ns-resize;
|
||||
display: none;
|
||||
z-index: 20;
|
||||
vertical-align: bottom;
|
||||
bottom: 0;
|
||||
}
|
||||
.bottom-box .sub-container{
|
||||
height: calc(100% - 64px);
|
||||
}
|
||||
.bottom-box .sub-container .nz-table2{
|
||||
height: calc(100% - 20px);
|
||||
}
|
||||
.asset-detail .sub-container .nz-table2 {
|
||||
height: 100%;
|
||||
}
|
||||
.endpoint-tab-new .sub-container .nz-table2 {
|
||||
height: 100%;
|
||||
}
|
||||
/* end--二级顶部工具栏*/
|
||||
</style>
|
||||
|
||||
@@ -1,8 +1,4 @@
|
||||
<style scope>
|
||||
.chart-bottom {
|
||||
text-align: center;
|
||||
margin-top: 16px;
|
||||
}
|
||||
.plTableBox.nz-table /deep/ .el-table{
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
@@ -232,6 +232,3 @@ export default {
|
||||
left: 440px !important;
|
||||
}
|
||||
</style>
|
||||
<style scoped lang="scss">
|
||||
@import '../detailList';
|
||||
</style>
|
||||
|
||||
@@ -171,7 +171,3 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '../detailList';
|
||||
</style>
|
||||
|
||||
@@ -155,7 +155,3 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '../detailList';
|
||||
</style>
|
||||
|
||||
@@ -1,101 +0,0 @@
|
||||
.order-box{
|
||||
display: flex;
|
||||
height:40px;
|
||||
padding: 0 15px;
|
||||
line-height: 40px;
|
||||
align-items: center;
|
||||
/*.detail-select{*/
|
||||
/* height: 30px;*/
|
||||
/* line-height: 30px;*/
|
||||
/* flex: 1;*/
|
||||
/* /deep/ .el-input--small{*/
|
||||
/* height: 30px;*/
|
||||
/* line-height: 30px;*/
|
||||
/* background-color: rgba(9,30,66,0.08);*/
|
||||
/* border: none;*/
|
||||
/* color: #344563;*/
|
||||
/* input{*/
|
||||
/* height: 30px;*/
|
||||
/* line-height: 30px;*/
|
||||
/* background-color: rgba(9,30,66,0.08);*/
|
||||
/* border: none;*/
|
||||
/* color: #344563;*/
|
||||
/* }*/
|
||||
/* }*/
|
||||
/*}*/
|
||||
/*.detail-select:hover{*/
|
||||
/* /deep/ .el-input--small{*/
|
||||
/* input{*/
|
||||
/* background-color: rgba(9,30,66,0.13);*/
|
||||
/* }*/
|
||||
/* }*/
|
||||
/*}*/
|
||||
/*.detail-button{*/
|
||||
/* height: 28px;*/
|
||||
/* line-height: 28px;*/
|
||||
/* background-color: rgba(9,30,66,0.08);*/
|
||||
/* border: none;*/
|
||||
/* .nz-icon{*/
|
||||
/* color: #344563;*/
|
||||
/* }*/
|
||||
/*}*/
|
||||
/*.detail-button:hover{*/
|
||||
/* background-color: rgba(9,30,66,0.13);*/
|
||||
/*}*/
|
||||
}
|
||||
.detail-row-box{
|
||||
height: calc(100% - 40px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.detail-row{
|
||||
width: 245px;
|
||||
padding: 0px 0 0px 15px;
|
||||
height: 60px;
|
||||
border-bottom: 1px solid #E7EAED;
|
||||
cursor: pointer;
|
||||
}
|
||||
.detail-row:last-of-type{
|
||||
border-bottom: none
|
||||
}
|
||||
.detail-row-info{
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: calc(100% - 15px);
|
||||
justify-content:center;
|
||||
flex-direction: column;
|
||||
> div{
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.asset-manageIp{
|
||||
font-size: 16px;
|
||||
color: #333333;
|
||||
font-weight: 400;
|
||||
.nz-icon{
|
||||
font-size: 14px;
|
||||
padding-right: 2px;
|
||||
}
|
||||
}
|
||||
.asset-name {
|
||||
padding-left: 22px;
|
||||
width: calc(100% - 22px);
|
||||
font-size: 14px;
|
||||
color: #999999;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
.selected{
|
||||
background: #FFFBF6;
|
||||
}
|
||||
.colorEF7458{
|
||||
color: #EF7458;
|
||||
}
|
||||
.color23BF9A{
|
||||
color: #23BF9A;
|
||||
}
|
||||
.colorFA901C{
|
||||
color: #fa901c;
|
||||
}
|
||||
@@ -152,7 +152,3 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '../detailList';
|
||||
</style>
|
||||
|
||||
@@ -135,7 +135,3 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '../detailList';
|
||||
</style>
|
||||
|
||||
@@ -161,7 +161,3 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '../detailList';
|
||||
</style>
|
||||
|
||||
@@ -136,7 +136,3 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '../detailList';
|
||||
</style>
|
||||
|
||||
@@ -182,12 +182,3 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import './detailView.scss';
|
||||
.active{
|
||||
color: #fa901c;
|
||||
}
|
||||
.nz-detail-view-no-data{
|
||||
border-top: 1px solid #E7EAED;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -305,66 +305,3 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.detail-view-right-top{
|
||||
height: 60px;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #E7EAED;
|
||||
margin-bottom: 10px
|
||||
}
|
||||
.sub-box{
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
}
|
||||
.sub-list__tabs {
|
||||
flex: 1;
|
||||
background-color: white;
|
||||
/*height: calc(100% - 82px);*/
|
||||
height: calc(100% - 12px);
|
||||
border: 1px solid #E7EAED;
|
||||
&>div {
|
||||
height: 100%;
|
||||
&>.nz-table2 {
|
||||
height: calc(100% - 92px);
|
||||
padding: 20px 20px 0;
|
||||
}
|
||||
}
|
||||
.chart-list{
|
||||
.nz-table2 {
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
/deep/ .bottom-data-list .sub-container{
|
||||
height: calc(100% - 45px);
|
||||
position: relative;
|
||||
padding: 0;
|
||||
background-color: #fff;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
.sub-box /deep/ .top-tools.top-tools--sub{
|
||||
border: none;
|
||||
padding: 0 15px 0px 0px;
|
||||
margin-right: 15px;
|
||||
margin-left: 20px;
|
||||
border-bottom: 1px solid #E7EAED;
|
||||
}
|
||||
.sub-box /deep/ .list-width {
|
||||
padding: 0;
|
||||
}
|
||||
.sub-box /deep/ .nz-table2{
|
||||
padding: 20px;
|
||||
height: 100%;
|
||||
}
|
||||
.sub-box /deep/ .table-list{
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
}
|
||||
.sub-box /deep/ .pagination-bottom {
|
||||
bottom: -3px;
|
||||
}
|
||||
.sub-box /deep/ .sub-list-tab{
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -340,30 +340,16 @@ export default {
|
||||
series.push(seriesItem.theData)
|
||||
seriesItem = null
|
||||
}
|
||||
} else if (chartItem.elements && chartItem.elements[innerPos]) {
|
||||
// 无数据提示
|
||||
/*
|
||||
const currentInfo = chartItem.elements[innerPos];
|
||||
const errorMsg = `图表 ${chartItem.title} 中 ${currentInfo.metric},${currentInfo.tags} 无数据`;
|
||||
this.$message.warning({
|
||||
duration: 15,
|
||||
content: errorMsg,
|
||||
closable: true,
|
||||
});
|
||||
*/
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (response.msg) {
|
||||
// this.$message.error(response.msg);
|
||||
errorMsg = response.msg
|
||||
} else if (response.error) {
|
||||
// this.$message.error(response.error);
|
||||
errorMsg = response.error
|
||||
} else {
|
||||
// this.$message.error(response);
|
||||
errorMsg = response
|
||||
}
|
||||
}
|
||||
@@ -457,79 +443,3 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tooltip-box{
|
||||
padding: 10px;
|
||||
max-height: 400px;
|
||||
min-height: 200px;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #E7EAED;
|
||||
box-shadow: 0 6px 16px 0 rgba(0,0,0,0.08);
|
||||
border-radius: 3px 3px 3px 3px;
|
||||
|
||||
.tooltip-box-chart{
|
||||
max-height: 400px;
|
||||
min-height: 200px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
.line-chart{
|
||||
width: 300px;
|
||||
flex: 1;
|
||||
/deep/ .resize-box{
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
.chart-remark{
|
||||
white-space: pre-wrap;
|
||||
width: 110px;
|
||||
font-size: 12px;
|
||||
color: #666666;
|
||||
letter-spacing: 0;
|
||||
font-weight: 400;
|
||||
word-break: break-word;
|
||||
padding-right: 5px;
|
||||
height: calc(100% - 29px) !important;
|
||||
margin-top: 29px;
|
||||
padding-top: 5px;
|
||||
line-height: 16px;
|
||||
border-top: 1px dashed #DCE1E7;
|
||||
}
|
||||
}
|
||||
.tooltip-box-info{
|
||||
border: 1px solid #E7EAED;
|
||||
background: #FFFFFF;
|
||||
max-height: 400px;
|
||||
min-height: 200px;
|
||||
min-width: 186px;
|
||||
max-width: 300px;
|
||||
}
|
||||
/deep/ .line-area{
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
/deep/ .topology-chart-title{
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
line-height: 19px;
|
||||
padding: 5px 0 5px 10px;
|
||||
height: 29px;
|
||||
box-sizing: border-box;
|
||||
border-bottom: 1px dashed #DCE1E7;
|
||||
}
|
||||
.topology-tool-tip /deep/ .topology-chart-title{
|
||||
margin-top: -23px;
|
||||
border-bottom: 1px dashed #DCE1E7;
|
||||
padding-left: 0;
|
||||
margin-left: 10px;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
width: 388px;
|
||||
}
|
||||
.topology-tool-tip /deep/ .line-area{
|
||||
margin-top: -15px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -72,73 +72,3 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.info-content{
|
||||
display: flex;
|
||||
margin-right: 15px;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #E7EAED;
|
||||
box-shadow: 0 6px 16px 0 rgba(0,0,0,0.08);
|
||||
border-radius: 3px 3px 3px 3px 0 0;
|
||||
}
|
||||
.info-box{
|
||||
background: #FFFFFF;
|
||||
margin-bottom: 15px;
|
||||
min-width: 260px;
|
||||
}
|
||||
.info-box-title{
|
||||
background: #EFEFEF;
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
padding-left: 12px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.info-box-content{
|
||||
font-size: 12px;
|
||||
color: #333333;
|
||||
}
|
||||
.content-box{
|
||||
padding: 0 12px;
|
||||
height: 26px;
|
||||
line-height: 24px;
|
||||
}
|
||||
.content-title{
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
min-width: 120px;
|
||||
display: inline-block;
|
||||
color: #666666;
|
||||
padding: 3px 0;
|
||||
}
|
||||
.content-text{
|
||||
color: #333333;
|
||||
font-size: 14px;
|
||||
padding: 3px 5px;
|
||||
}
|
||||
.module-type{
|
||||
text-align: center;
|
||||
width: 44px;
|
||||
display: inline-block;
|
||||
height: 20px;
|
||||
margin: 0 auto;
|
||||
line-height: 20px;
|
||||
}
|
||||
.module-type:first-child{
|
||||
border-radius: 4px 0 0 4px;
|
||||
margin-right: -4px;
|
||||
border-right: none;
|
||||
}
|
||||
.module-type:last-child{
|
||||
border-radius: 0 4px 4px 0;
|
||||
z-index: -1;
|
||||
}
|
||||
.module-type-select{
|
||||
border-color:rgba(255,140,14,0.54);
|
||||
color: rgba(255,140,14,0.54);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -673,67 +673,3 @@ export default {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
<style scoped lang="scss">
|
||||
.severity-circle{
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 0;
|
||||
}
|
||||
.severity-box{
|
||||
position: relative;
|
||||
}
|
||||
.severity-box /deep/ .el-select .el-input__inner{
|
||||
padding-left: 25px;
|
||||
}
|
||||
.half-form-item {
|
||||
width: calc(50% - 5px);
|
||||
display: inline-block;
|
||||
.el-form-item__content,.el-select{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.right-box-alert-rule /deep/ .right-box__container .el-form-item__content .el-input-group--prepend{
|
||||
width: 100%;
|
||||
}
|
||||
/deep/ .rich-text-editor{
|
||||
line-height: 24px;
|
||||
}
|
||||
/deep/ .el-input-group__prepend{
|
||||
position: relative;
|
||||
.hide-icon{
|
||||
width: 38px;
|
||||
.el-input__inner{
|
||||
border: none;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
.alert-rule-split-title{
|
||||
background: #F6F6F6;
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
letter-spacing: 0;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
padding-left: 10px;
|
||||
margin-bottom: 10px;
|
||||
height: 24px;
|
||||
}
|
||||
/deep/ .el-form-item__content .el-input-group{
|
||||
vertical-align: middle;
|
||||
}
|
||||
.severity-item{
|
||||
color: #999999;
|
||||
font-size: 12px;
|
||||
max-width: 120px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.text-ellipsis{
|
||||
overflow:hidden;
|
||||
text-overflow:ellipsis;
|
||||
white-space:nowrap
|
||||
}
|
||||
/deep/ .query-row .metric-selector-input-box {
|
||||
width: calc(100% - 120px);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -291,56 +291,3 @@ export default {
|
||||
margin-left: 5px;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.severity .P1{
|
||||
background: #F5846A;
|
||||
border-radius: 2px;
|
||||
font-size: 12px;
|
||||
color: #FFFFFF;
|
||||
padding: 2px 6px;
|
||||
}
|
||||
.severity .P2{
|
||||
background: #F7A54A;
|
||||
border-radius: 2px;
|
||||
font-size: 12px;
|
||||
color: #FFFFFF;
|
||||
padding: 2px 6px;
|
||||
}
|
||||
.severity .P3{
|
||||
background: #F1C13D;
|
||||
border-radius: 2px;
|
||||
font-size: 12px;
|
||||
color: #FFFFFF;
|
||||
padding: 2px 6px;
|
||||
}
|
||||
.schedEnableTitle{
|
||||
padding: 20px 15px;
|
||||
margin-right: 0;
|
||||
left: 1995px !important;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid rgba(119,131,145,0.60);
|
||||
box-shadow: 0 6px 16px 0 rgba(0,0,0,0.08);
|
||||
border-radius: 3px;
|
||||
}
|
||||
.schedEnableTitle .nz-icon-a-rilizhou, .schedEnableTitle .nz-icon-dingshishijian{
|
||||
font-size: 14px;
|
||||
color: #666666;
|
||||
margin-right: 12px;
|
||||
}
|
||||
.schedEnableTitle .week-item{
|
||||
width: 32px;
|
||||
height: 22px;
|
||||
line-height: 22px;
|
||||
opacity: 0.9;
|
||||
background: #F6F6FA;
|
||||
border-radius: 2px;
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
color: #666666;
|
||||
letter-spacing: 0;
|
||||
font-weight: 400;
|
||||
padding-left: 3px;
|
||||
margin-right: 12px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -124,7 +124,7 @@
|
||||
<div v-html="suspendedStr(scope.row.configs[0].state)"></div>
|
||||
</div>
|
||||
<span slot="reference" style="width: auto">
|
||||
<span class="endpoint-cell-left"><i class="nz-icon nz-icon-Metrics colorFA901C" /> {{$t('project.endpoint.metrics')}} </span>
|
||||
<span class="endpoint-cell-left"><i class="nz-icon nz-icon-Metrics active" /> {{$t('project.endpoint.metrics')}} </span>
|
||||
<span v-if="scope.row.configs[0].state===0 || !scope.row.configs[0].state">
|
||||
<span class="active-icon red-bg inline-block"></span>
|
||||
</span>
|
||||
@@ -141,7 +141,7 @@
|
||||
<div v-html="suspendedStr(scope.row.configs[1].state)"></div>
|
||||
</div>
|
||||
<span slot="reference" style="width: auto">
|
||||
<span class="endpoint-cell-left" style="margin-left: 10px"><i class="nz-icon nz-icon-logs colorFA901C" /> {{$t('project.endpoint.logs')}} </span>
|
||||
<span class="endpoint-cell-left" style="margin-left: 10px"><i class="nz-icon nz-icon-logs active" /> {{$t('project.endpoint.logs')}} </span>
|
||||
<span v-if="scope.row.configs[1].state===0 || !scope.row.configs[1].state">
|
||||
<span class="active-icon red-bg inline-block"></span>
|
||||
</span>
|
||||
@@ -337,11 +337,6 @@ export default {
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.endpoint-num{
|
||||
padding: 0 3px;
|
||||
cursor: pointer;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.bagEF7458{
|
||||
background: #EF7458;
|
||||
color: #fff;
|
||||
@@ -367,38 +362,13 @@ export default {
|
||||
.color23BF9A{
|
||||
color: #23BF9A;
|
||||
}
|
||||
.endpoint-num, .alert-num{
|
||||
cursor: pointer;
|
||||
}
|
||||
.inline-block{
|
||||
display: inline-block;
|
||||
}
|
||||
.pointer{
|
||||
cursor: pointer;
|
||||
}
|
||||
.state-box{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
border: 1px solid #E7EAED;
|
||||
border-bottom: none;
|
||||
}
|
||||
.state-box-content{
|
||||
padding: 0 5px;
|
||||
width: 50%;
|
||||
border-bottom: 1px solid #E7EAED;
|
||||
}
|
||||
.state-box-content:nth-of-type(odd){
|
||||
border-right: 1px solid #E7EAED;
|
||||
}
|
||||
.state-content-text{
|
||||
width:64px;text-align:left;margin-right: 5px;display: inline-block
|
||||
}
|
||||
.colorFA901C{
|
||||
color: #fa901c;
|
||||
}
|
||||
.endpoint-cell-left{
|
||||
/*display: inline-block;*/
|
||||
/*width: 70px;*/
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
@@ -412,12 +382,6 @@ export default {
|
||||
right: 6px;
|
||||
top: 6px;
|
||||
}
|
||||
.data-column__endpoint {
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #E7EAED;
|
||||
box-shadow: 0 6px 16px 0 rgba(0,0,0,0.08);
|
||||
border-radius: 3px 3px 3px 3px 0 0;
|
||||
}
|
||||
.copy-value-content__pre {
|
||||
height: 200px;
|
||||
margin-top: 20px;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="alert-message-list">
|
||||
<nz-data-list
|
||||
ref="dataList"
|
||||
:api="url"
|
||||
@@ -1009,19 +1009,3 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.active{
|
||||
border-bottom: 3px solid #fa901c;
|
||||
color: #333;
|
||||
cursor: default;
|
||||
font-weight: bold;
|
||||
}
|
||||
.list-page /deep/ .main-container{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/deep/ .nz-table2{
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -16,82 +16,3 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.nz-alert-tag {
|
||||
border: 1px solid;
|
||||
height: 20px;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
border-radius: 4px;
|
||||
display: inline-block;
|
||||
box-sizing: content-box;
|
||||
display: inline-flex;
|
||||
}
|
||||
.nz-alert-tag__label {
|
||||
border-radius: 3px 0 0 3px;
|
||||
padding: 0 4px;
|
||||
text-align: center;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
word-break: break-all;
|
||||
display: inline-block;
|
||||
height: 21px;
|
||||
box-sizing: content-box;
|
||||
margin-left: -1px;
|
||||
}
|
||||
.nz-alert-tag__content {
|
||||
flex: 1;
|
||||
border-radius: 0 3px 3px 0;
|
||||
padding: 0 4px;
|
||||
min-width: 36px;
|
||||
max-width: 115px;
|
||||
text-align: center;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
word-break: break-all;
|
||||
display: inline-block;
|
||||
}
|
||||
.nz-alert-tag_normal {
|
||||
border-color: #409eff;
|
||||
.nz-alert-tag__label {
|
||||
border-right: 1px solid #409eff;
|
||||
background-color: #409eff;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
.nz-alert-tag_success {
|
||||
border-color: #50d050;
|
||||
.nz-alert-tag__label {
|
||||
border-right: 1px solid #50d050;
|
||||
background-color: #50d050;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
.nz-alert-tag_info {
|
||||
border-color: #909399;
|
||||
.nz-alert-tag__label {
|
||||
border-right: 1px solid #909399;
|
||||
background-color: #909399;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
.nz-alert-tag_danger {
|
||||
border-color: #d64f40;
|
||||
.nz-alert-tag__label {
|
||||
border-right: 1px solid #d64f40;
|
||||
background-color: #d64f40;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
.nz-alert-tag_warning {
|
||||
border-color: #e6a23c;
|
||||
.nz-alert-tag__label {
|
||||
border-right: 1px solid #e6a23c;
|
||||
background-color: #e6a23c;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -571,241 +571,3 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.mib-browser-ad-search-item {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.mib-browser-ad-search .el-radio-group .el-radio-button__inner {
|
||||
height: 24px;
|
||||
line-height: 0;
|
||||
}
|
||||
.mib-browser-ad-search-label {
|
||||
line-height: 24px;
|
||||
}
|
||||
.mib-browser-ad-search {
|
||||
width: 300px;
|
||||
}
|
||||
.mib-browser-model-dropdown {
|
||||
height: 300px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.mib-browser {
|
||||
.operation {
|
||||
width: 90px;
|
||||
}
|
||||
#browser-advanced {
|
||||
border-radius: 0;
|
||||
border-right: 1px solid rgba(162,162,162,0.50);
|
||||
}
|
||||
.mib-browser-btn-group {
|
||||
position: relative;
|
||||
}
|
||||
.mib-browser-ad-tip {
|
||||
position: absolute;
|
||||
transform: translate(-100%, -100%);
|
||||
top: 3px;
|
||||
left: 114px;
|
||||
width: 20px;
|
||||
min-width: 0;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
color: #999;
|
||||
height: 13px;
|
||||
}
|
||||
.mib-browser-ad-tip::after {
|
||||
content: '';
|
||||
display: block;
|
||||
width:0;
|
||||
height:0;
|
||||
overflow: hidden;
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
border: 4px;
|
||||
border-style: solid dashed dashed dashed;
|
||||
border-color: #fff transparent transparent transparent;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
transform: translate(-6px, 6px);
|
||||
}
|
||||
|
||||
.mib-browser-box {
|
||||
display: flex;
|
||||
height: calc(100% - 55px);
|
||||
width: 100%;
|
||||
border: 1px solid #D8D8D8;
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.mib-browser-left {
|
||||
height: 100%;
|
||||
width: 28%;
|
||||
}
|
||||
.mib-browser-tree {
|
||||
height: calc(69% - 40px);
|
||||
background-color: white;
|
||||
border-radius: 4px 0 0 0;
|
||||
font-size: 14px;
|
||||
padding-bottom: 5px;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
.mib-browser-detail {
|
||||
height: 31%;
|
||||
width: 100%;
|
||||
}
|
||||
.el-scrollbar__wrap .el-scrollbar__view, .el-scrollbar__wrap, .el-tree {
|
||||
height: 100%;
|
||||
}
|
||||
.tree-detail-resize {
|
||||
height: 2px;
|
||||
width: 100%;
|
||||
background-color: #fcfcfc;
|
||||
cursor: ns-resize;
|
||||
border: 1px solid #d8d8d8;
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
}
|
||||
.mib-browser-detail-row {
|
||||
line-height: 25px;
|
||||
background-color: white;
|
||||
border-bottom: 1px solid #D8D8D8;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
}
|
||||
.mib-browser-detail-row:last-of-type {
|
||||
border-bottom: none;
|
||||
position: relative;
|
||||
}
|
||||
.mib-browser-detail-row:last-of-type div:last-of-type {
|
||||
position: absolute;
|
||||
left: calc(25% + 2px);
|
||||
width: calc(75% - 20px);
|
||||
height: 100%;
|
||||
padding-right: 12px;
|
||||
overflow: auto;
|
||||
}
|
||||
/*第一列宽25%*/
|
||||
.mib-browser-detail-row>div:first-of-type {
|
||||
color: #666;
|
||||
width: 25%;
|
||||
word-break: break-all;
|
||||
}
|
||||
/*第一列宽75%*/
|
||||
.mib-browser-detail-row>div:last-of-type {
|
||||
width: 75%;
|
||||
border-left: 1px solid #D8D8D8;
|
||||
word-break: break-all;
|
||||
}
|
||||
.mib-browser-detail-row:not(:last-of-type) {
|
||||
border-bottom: 1px solid #D8D8D8;
|
||||
height: 25px;
|
||||
}
|
||||
.mib-browser-detail-row:last-of-type {
|
||||
min-height: calc(100% - 182px);
|
||||
}
|
||||
.mib-browser-detail-row>div {
|
||||
padding-left: 5px;
|
||||
}
|
||||
.mib-browser-detail-description {
|
||||
padding: 0 14px 0 0;
|
||||
}
|
||||
.mib-browser-right {
|
||||
width: calc(72% - 4px);
|
||||
height: 100%;
|
||||
}
|
||||
.left-right-resize {
|
||||
width: 2px;
|
||||
border: 1px solid #d8d8d8;
|
||||
background-color: #fcfcfc;
|
||||
cursor: ew-resize;
|
||||
height: 100%;
|
||||
border-top: none;
|
||||
border-bottom: none;
|
||||
}
|
||||
.mib-browser-table {
|
||||
height: calc(100% - 50px) !important;
|
||||
width: calc(100% - 20px) !important;
|
||||
padding: 10px;
|
||||
.ant-table-scroll {
|
||||
max-height: unset !important;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.el-table {
|
||||
height: calc(100% - 20px) !important;
|
||||
width: calc(100% - 20px) !important;
|
||||
}
|
||||
.el-table__body-wrapper td {
|
||||
padding: 2px 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.mib-browser-table-title, .mib-browser-tree-title {
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
color: #333;
|
||||
font-size: 16px;
|
||||
border-bottom: 1px solid #D8D8D8;
|
||||
padding: 0 5px 0 8px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.mib-browser-table-op {
|
||||
display: inline-block;
|
||||
margin: 0 5px;
|
||||
cursor: pointer;
|
||||
color: #666;
|
||||
}
|
||||
.mib-browser-table-op.mib-browser-table-op-light {
|
||||
color: #ccc;
|
||||
cursor: default;
|
||||
}
|
||||
.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
|
||||
background-color: #F5F7FA;
|
||||
font-weight: bold;
|
||||
color: #ee9d3f;
|
||||
}
|
||||
|
||||
.pagination-bottom {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.mib-browser-table.nz-table th .cell {
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
}
|
||||
.mib-browser-table.nz-table td .cell {
|
||||
height: 28px;
|
||||
min-height: 28px;
|
||||
line-height: 28px;
|
||||
}
|
||||
.snmp-set-form {
|
||||
padding: 0 15px;
|
||||
}
|
||||
.snmp-set-form>div {
|
||||
margin-top: 15px;
|
||||
width: calc(100% - 11px);
|
||||
}
|
||||
.snmp-set-form>span {
|
||||
color: #F56C6C;
|
||||
}
|
||||
.mib-browser .el-dialog .el-dialog__footer {
|
||||
margin-top: 0;
|
||||
}
|
||||
.mib-browser .el-button:focus, .mib-browser .el-button:hover {
|
||||
color: unset;
|
||||
border-color: unset;
|
||||
background-color: unset;
|
||||
}
|
||||
</style>
|
||||
<style scoped>
|
||||
.plTableBox.nz-table /deep/ .el-table{
|
||||
display: block !important;
|
||||
border-top: 1px solid #d8d8d8;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1004,381 +1004,3 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.explore-collapse.el-collapse {
|
||||
border: none;
|
||||
.el-collapse-item {
|
||||
margin-bottom: 10px;
|
||||
border: 1px solid $--right-box-border-color;
|
||||
border-bottom: none;
|
||||
}
|
||||
.el-collapse-item__header {
|
||||
height: 38px;
|
||||
line-height: 38px;
|
||||
flex-direction: row-reverse;
|
||||
justify-content: flex-end;
|
||||
|
||||
i {
|
||||
margin: 0 8px;
|
||||
}
|
||||
}
|
||||
.el-collapse-item__content {
|
||||
padding: 0 30px 20px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
.el-dropdown-link {
|
||||
span:nth-of-type(1) {
|
||||
color: #FA901C;
|
||||
padding-right: 10px;
|
||||
}
|
||||
span:nth-of-type(2) {
|
||||
font-family: Roboto-Medium;
|
||||
font-size: 16px;
|
||||
color: #333333;
|
||||
font-weight: 500;
|
||||
padding-right: 20px;
|
||||
}
|
||||
span:nth-of-type(3) {
|
||||
color: #BEBEBE;
|
||||
}
|
||||
}
|
||||
.explore {
|
||||
height: 100%;
|
||||
.explore-close {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 18px 20px 4px 0px;
|
||||
|
||||
span {
|
||||
cursor: pointer;
|
||||
}
|
||||
i {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.explore .chart-room {
|
||||
width: 100%;
|
||||
height: 300px
|
||||
}
|
||||
|
||||
.explore .chart-view, .table-view {
|
||||
padding: 22px 10px 10px 10px;
|
||||
border: 1px solid lightgrey;
|
||||
box-sizing: inherit;
|
||||
margin-bottom: 5px;
|
||||
transition: height 1s;
|
||||
}
|
||||
.explore .chart-view:hover,.explore .table-view:hover {
|
||||
cursor: default;
|
||||
}
|
||||
.shrink-view {
|
||||
height: 30px;
|
||||
|
||||
.view-title i {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.chart-room, .table-room {
|
||||
height: 0px;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
}
|
||||
.table-room {
|
||||
position: relative;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.explore .view-title {
|
||||
font-weight: 500;
|
||||
margin-right: 8px;
|
||||
font-size: 14px;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.introduce-view .info-room {
|
||||
padding: 24px;
|
||||
background-color: #e9edf2;
|
||||
border-top: 3px solid #3274d9;
|
||||
-webkit-box-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, .1), 1px 1px 0 0 rgba(0, 0, 0, .1);
|
||||
box-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, .1), 1px 1px 0 0 rgba(0, 0, 0, .1);
|
||||
-webkit-box-flex: 1;
|
||||
-webkit-flex-grow: 1;
|
||||
-ms-flex-positive: 1;
|
||||
flex-grow: 1;
|
||||
}
|
||||
.introduce-view {
|
||||
.title-heard.info-room {
|
||||
color: #333333;
|
||||
h1 {
|
||||
font-family: Roboto-Medium;
|
||||
font-size: 22px;
|
||||
color: #333333;
|
||||
font-weight: 500;
|
||||
}
|
||||
.title-heard__divider {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
border-bottom: 2px solid #DEDEDE;
|
||||
margin: 5px 0 28px 0;
|
||||
}
|
||||
.introduce-view__content {
|
||||
line-height: 28px;
|
||||
margin-top: 18px;
|
||||
h2 {
|
||||
font-family: Roboto-Black;
|
||||
font-size: 22px;
|
||||
margin-bottom: 5px;
|
||||
color: #333333;
|
||||
font-weight: 400;
|
||||
}
|
||||
.introduce-view__content-label {
|
||||
p {
|
||||
font-family: Roboto-Black;
|
||||
font-size: 16px;
|
||||
color: #333333;
|
||||
font-weight: 400;
|
||||
}
|
||||
span {
|
||||
font-family: Roboto-Black;
|
||||
font-size: 14px;
|
||||
color: #666666;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.info-room .cheat-sheet-item__title {
|
||||
font-size: 21px;
|
||||
}
|
||||
|
||||
.info-room .cheat-sheet-item__label {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.info-room code {
|
||||
font-family: Menlo, Monaco, Consolas, Courier New, monospace;
|
||||
font-size: 11px;
|
||||
background-color: #e9edf2;
|
||||
color: #52545c;
|
||||
border: 1px solid #c7d0d9;
|
||||
border-radius: 4px;
|
||||
}
|
||||
/*外部引用 样式start*/
|
||||
.doc-content {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.doc-content p, .doc-content.ul, .doc-content .alert {
|
||||
margin: 15px 0 15px 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.doc-content .content-divider{
|
||||
height: 1px;
|
||||
width:100%;
|
||||
border-bottom: 2px solid #C0C4CC;
|
||||
margin: 5px 0px;
|
||||
}
|
||||
|
||||
.doc-content > h1 {
|
||||
color: #e6522c;
|
||||
font-size: 30px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.doc-content > h1 a {
|
||||
color: #000 !important;
|
||||
}
|
||||
|
||||
.doc-content.blog > h1 {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
.doc-content.blog .sponsor-logos > a > img {
|
||||
width: 250px;
|
||||
display: inline-block !important;
|
||||
margin: 15px 55px;
|
||||
}
|
||||
.doc-content > h1 {
|
||||
color: #e6522c;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.doc-content > h2 {
|
||||
color: #e6522c;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.doc-content > h2 code {
|
||||
color: #e6522c;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.doc-content > h3 {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.doc-content > h4 {
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.doc-content a.header-anchor {
|
||||
padding-left: 15px;
|
||||
color: gray;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.doc-content a.header-anchor:link,
|
||||
.doc-content a.header-anchor:visited {
|
||||
/*visibility: hidden;*/
|
||||
}
|
||||
|
||||
.doc-content h1:hover a.header-anchor:hover,
|
||||
.doc-content h2:hover a.header-anchor:hover,
|
||||
.doc-content h3:hover a.header-anchor:hover,
|
||||
.doc-content h4:hover a.header-anchor:hover,
|
||||
.doc-content h5:hover a.header-anchor:hover,
|
||||
.doc-content h6:hover a.header-anchor:hover {
|
||||
/*color: #000;*/
|
||||
}
|
||||
|
||||
.doc-content h1:hover a.header-anchor,
|
||||
.doc-content h2:hover a.header-anchor,
|
||||
.doc-content h3:hover a.header-anchor,
|
||||
.doc-content h4:hover a.header-anchor,
|
||||
.doc-content h5:hover a.header-anchor,
|
||||
.doc-content h6:hover a.header-anchor {
|
||||
/*color: #999;*/
|
||||
/*visibility: visible;*/
|
||||
}
|
||||
|
||||
.doc-content img {
|
||||
width: 90%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.doc-content img.orig-size {
|
||||
width: auto;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.doc-content .open-source-notice {
|
||||
color: #666;
|
||||
background-color: #f5f5f5;
|
||||
text-align: center;
|
||||
padding: 0.8em;
|
||||
margin-top: 1.5em;
|
||||
}
|
||||
|
||||
.toc {
|
||||
padding: 1em;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.toc-right {
|
||||
float: right;
|
||||
width: 40%;
|
||||
margin: 0 0 0.5em 0.5em;
|
||||
}
|
||||
|
||||
.toc ul {
|
||||
padding: 0 0 0 1.5em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.toc a code {
|
||||
color: #337ab7;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
pre {
|
||||
border: 1px solid #ddd;
|
||||
border-left: 4px solid #e6522c;
|
||||
border-radius: 0;
|
||||
font-family: "Courier New", Monaco, Menlo, Consolas, monospace;
|
||||
background-color: #f5f5f5;
|
||||
color: #333;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
pre code {
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
code {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
aside {
|
||||
color: #888;
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 1px solid #aaa;
|
||||
}
|
||||
|
||||
article {
|
||||
margin: 10px 0 60px 0;
|
||||
}
|
||||
.explore {
|
||||
.chart-view__switch {
|
||||
margin-top: 20px;
|
||||
border: 1px solid #E4E8EB;
|
||||
border-radius: 2px;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
.el-switch.is-checked {
|
||||
margin-left: 35px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.metric-table{
|
||||
border-bottom: 1px solid #e7eaed !important;
|
||||
}
|
||||
/*外部引用 样式end*/
|
||||
.el-collapse-item__height /deep/ .el-collapse-item__wrap{
|
||||
overflow: unset;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
.explore-table {
|
||||
.el-table {
|
||||
position: static !important;
|
||||
}
|
||||
.explore-table-gear .cell {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
.explore-table tr td .cell {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.explore .promqlInput {
|
||||
.query-row > div:first-of-type {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
.explore .promqlInput:not(:first-of-type) {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.explore {
|
||||
border-right: 1px solid #f6f6f6;
|
||||
.main-container {
|
||||
padding: 0 !important;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -566,118 +566,3 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.log-detail {
|
||||
position: relative;
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.log-table{
|
||||
position: relative;
|
||||
min-height: 200px;
|
||||
.table-no-data {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-top: -35px;
|
||||
margin-left: -50px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.log-table .nz-table2 {
|
||||
padding: 10px 0 0 0;
|
||||
position: relative;
|
||||
.el-table__body {
|
||||
border-collapse: separate;
|
||||
border-spacing: 0 6px;
|
||||
|
||||
td {
|
||||
vertical-align: top;
|
||||
padding: 1px 0;
|
||||
border: none;
|
||||
}
|
||||
td.el-table__expanded-cell {
|
||||
padding: 0 0 0 60px;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
// 左侧边框
|
||||
td:first-child {
|
||||
border-left: 3px solid;
|
||||
}
|
||||
td.log-border--debug {
|
||||
border-left-color: #1f78c1;
|
||||
}
|
||||
td.log-border--info {
|
||||
border-left-color: #7eb26d;
|
||||
}
|
||||
td.log-border--warn {
|
||||
border-left-color: #ff851b;
|
||||
}
|
||||
td.log-border--error {
|
||||
border-left-color: #e24d42;
|
||||
}
|
||||
td.log-border--fatel {
|
||||
border-left-color: #705da0;
|
||||
}
|
||||
td.log-border--trace {
|
||||
border-left-color: #6ed0e0;
|
||||
}
|
||||
td.log-border--unknown {
|
||||
border-left-color: #dde4ed;
|
||||
}
|
||||
td.el-table__expanded-cell:first-child {
|
||||
border-left: none;
|
||||
}
|
||||
// 不换行
|
||||
.log-row-wrap--no-wrap .cell {
|
||||
white-space: nowrap;
|
||||
overflow: visible;
|
||||
.text-ellipsis{
|
||||
overflow:hidden;
|
||||
text-overflow:ellipsis;
|
||||
white-space:nowrap
|
||||
}
|
||||
}
|
||||
.cell {
|
||||
.text-ellipsis{
|
||||
overflow:visible;
|
||||
text-overflow:unset;
|
||||
white-space: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.log-chart {
|
||||
height: 300px;
|
||||
width: 100%;
|
||||
}
|
||||
.log-operations {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 50px;
|
||||
width: 100%;
|
||||
padding: 0 10px 0 20px;
|
||||
border: 1px solid #E4E8EB;
|
||||
border-radius: 2px;
|
||||
|
||||
.log-operation {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&.log-operation--right {
|
||||
margin-left: auto;
|
||||
}
|
||||
&:not(:last-of-type) {
|
||||
margin-right: 30px;
|
||||
}
|
||||
|
||||
.operation-label {
|
||||
padding-right: 10px;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -642,172 +642,6 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.no-resize{
|
||||
background: rgba(255,255,255,0);
|
||||
}
|
||||
/deep/ .el-textarea.no-resize .el-input__count {
|
||||
right: 5px !important;
|
||||
}
|
||||
.promqlInput {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.promqlInput .query-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.input-box .append-msg {
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
padding-top: 4px;
|
||||
}
|
||||
|
||||
.input-box .error {
|
||||
color: #F56C6C;
|
||||
}
|
||||
|
||||
.promqlInput .query-options {
|
||||
/*display: flex;*/
|
||||
/*justify-content: flex-start;*/
|
||||
/*width: 84px;*/
|
||||
}
|
||||
|
||||
.query-options .option {
|
||||
/*border-right: 1px solid #dde4ed;*/
|
||||
/*border-radius: 3px;*/
|
||||
/*background-color: #dde4ed;*/
|
||||
width: 34px;
|
||||
height: 29px !important;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.query-options .option:focus, .query-options .option:hover {
|
||||
background-color: rgb(247, 248, 250);
|
||||
}
|
||||
|
||||
.query-row .input-box {
|
||||
flex: auto;
|
||||
}
|
||||
|
||||
.metric-btn {
|
||||
height: 29px !important;
|
||||
width: 105px;
|
||||
margin-left: 1px;
|
||||
}
|
||||
|
||||
.metric-btn:hover, .metric-btn:focus {
|
||||
background-image: linear-gradient(180deg, rgb(247, 248, 250) 0%, rgb(247, 248, 250) 100%);
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.metric-selector .el-cascader-panel {
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
z-index: 2100;
|
||||
background-color: #FFF;
|
||||
}
|
||||
|
||||
.expr-title {
|
||||
width: 120px;
|
||||
padding-right: 20px;
|
||||
text-align: right;
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
letter-spacing: 0;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
/deep/ .el-cascader-node {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/deep/ .el-cascader-menu:last-child .el-cascader-node, /deep/ .el-cascader-node__label {
|
||||
padding: 0;
|
||||
max-width: 250px;
|
||||
/deep/ .nz-cascade {
|
||||
overflow: hidden;
|
||||
width: calc(100% - 50px);
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
.metric-selector-title{
|
||||
/*'width':plugins.indexOf('metric-selector') > -1 ? '110px':'100%',*/
|
||||
/*'padding': plugins.indexOf('metric-selector') > -1 ?'0 0 0 10px':'0 20px 0 0 ',*/
|
||||
/*'text-align':'left', 'color': '#666',*/
|
||||
/*'font-weight':plugins.indexOf('metric-selector') > -1 ?'400':'bold',*/
|
||||
width:108px;
|
||||
margin-right: 10px;
|
||||
height: 32px;
|
||||
text-align: left;
|
||||
padding: 0 0 0 10px;
|
||||
font-weight: 400;
|
||||
line-height: 33px;
|
||||
background: #E7EAED;
|
||||
border-radius: $--primary-border-radius;
|
||||
font-family: ArialMT;
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
.metric-selector-input-box{
|
||||
width: calc(100% - 160px);
|
||||
}
|
||||
.metric-null-input-box{
|
||||
width: 100%;
|
||||
}
|
||||
.metric-null-title{
|
||||
width:100%;
|
||||
font-weight: bold;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
.nz-cascade {
|
||||
padding: 0 10px 0 25px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width: calc(100% - 50px);
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.nz-cascade .nz-icon-template2 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nz-cascade-temp .nz-icon-template2{
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
left: 5px;
|
||||
|
||||
/*background: #F8F9FB;*/
|
||||
}
|
||||
.cascader-panel-more {
|
||||
text-align: center;
|
||||
}
|
||||
.temp-form-box{
|
||||
width: 480px;
|
||||
}
|
||||
.temp-form-box .temp-form-box-title{
|
||||
font-family: PingFangSC-Medium;
|
||||
font-size: 14px;
|
||||
color: #666666;
|
||||
letter-spacing: 0;
|
||||
font-weight: 600;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.temp-form-box .temp-form-box-col{
|
||||
margin-right: 10px;
|
||||
}
|
||||
.explore-select-header {
|
||||
text-align: center;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.input-box .el-input__inner {
|
||||
height: 30px;
|
||||
|
||||
@@ -744,79 +744,3 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.border-t-1-de{
|
||||
border-top: 1px solid #dedede;
|
||||
padding-top: 10px;
|
||||
}
|
||||
.border-t-1-tr{
|
||||
border-top: 1px solid transparent;
|
||||
}
|
||||
.panel {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction:column;
|
||||
}
|
||||
|
||||
.panel .el-table {
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
/* begin-chart list*/
|
||||
.table-list {
|
||||
margin-top: 0px;
|
||||
overflow-y: auto;
|
||||
height: calc(100% - 50px);
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.box-content {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
.panel-select-header {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.panel-select-tail {
|
||||
border-top: 1px solid #DEDEDE;
|
||||
.panel-select-add {
|
||||
line-height: 32px;
|
||||
height: 32px;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
i {
|
||||
color: #FA901C;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
padding-left: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* end-chart list*/
|
||||
</style>
|
||||
<style lang="scss">
|
||||
@import '@/assets/css/common/tableCommon.scss';
|
||||
</style>
|
||||
<style scoped>
|
||||
.loading {
|
||||
position: fixed;
|
||||
left: 250px;
|
||||
top: 59px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: center center no-repeat #fff;
|
||||
z-index: 10;
|
||||
}
|
||||
.show-panel-name{
|
||||
display: inline-block;
|
||||
padding: 0 7px;
|
||||
font-weight: bold;
|
||||
max-width: 310px;
|
||||
overflow:hidden;
|
||||
text-overflow:ellipsis;
|
||||
white-space:nowrap;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user