gfwleak/cyber-narrator-cn-ui
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CN-1612 feat: 部分css重构内容：实体列表以及实体下拉详情

Browse Source
This commit is contained in:
刘洪洪
2024-04-02 12:00:49 +08:00
parent e8a9968e44
commit 8ddc0d95f5
14 changed files with 431 additions and 227 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/assets/css/components/views/detections/detection-filter.scss
View File

@@ -59,7 +59,7 @@
margin-right: 6px;
font-family: NotoSansHans-Black;
font-size: 9px;
color: #96A2B0;
color: var(--el-color-info);
font-weight: 900;
display: flex;
align-items: center;
@@ -108,7 +108,7 @@
}
.filter-no-show-more {
cursor: not-allowed;
color: rgba(16, 16, 16, 0.3);
color: var(--el-text-color-disabled);
}
.filter-hr {

115
src/assets/css/components/views/entityExplorer/entity-explorer.scss
View File

@@ -1,13 +1,14 @@
.entity-explorer {
display: flex;
flex-direction: column;
background-color: white;
background-color: var(--el-fill-color-blank);
margin: 20px;
height: calc(100% - 40px) !important;
justify-content: center;
transition: all linear .2s;
transition: all linear var(--el-transition-duration-fast);
$text-color-primary: var(--el-text-color-primary);
.entity__loading {
/* .entity__loading {
position: absolute;
height: 100%;
width: 100%;
@@ -20,7 +21,7 @@
font-size: 30px;
color: #aaa;
}
}
} */
&.entity-explorer--show-list {
background-color: unset;
justify-content: flex-start;
@@ -32,103 +33,146 @@
align-items: center;
padding-bottom: 18px;
&>div {
& > div {
padding: 0 0 0 10px;
}
.el-button--small{
.el-button--small {
padding: 4px 6px !important;
min-height: 28px !important;
&.active i {
color: $--color-primary;
color: var(--el-color-primary);
}
i {
font-size: 14px;
}
}
}
.explorer-entity-top-tools {
width: 100%;
}
.explorer-detection-top-tools, .explorer-entity-top-tools {
display: flex;
justify-content: space-between;
}
.explorer-top-tools-new {
display: flex;
justify-content: space-between;
margin: 2px 0;
}
.explorer-top-tools-title {
font-size: 24px;
line-height: 24px;
font-weight: 900;
color: #353636;
color: $text-color-primary;
}
.tools-title__margin {
padding: 0;
margin-left: -10px;
}
.explorer-top-tools-block {
height: 28px;
line-height: 28px;
background: #F5F8FA;
background: var(--el-fill-color-light);
font-size: 14px;
color: #353636;
color: $text-color-primary;
font-weight: 500;
padding: 0 10px;
margin-right: 20px;
border: 1px solid #E2E5EC;
border: 1px solid var(--el-border-color-light);
border-radius: 2px;
cursor: pointer;
}
.detection-icon-setting {
margin-right: 10px;
font-size: 14px;
}
.detection-border {
border: 1px solid #E2E5EC;
border-radius: 4px;
border: 1px solid var(--el-border-color-light);
border-radius: var(--el-border-radius-base);
}
.explorer-result {
margin-top: 10px;
margin-bottom: 18px;
font-size: 14px;
color: #353636;
color: $text-color-primary;
font-weight: 400;
height: 20.8px;
line-height: 20.8px;
.entity-hide-entity {
margin-left: 20px;
.el-checkbox__label {
padding-left: 6px;
}
.margin-l__10 {
margin-left: -10px;
}
}
.explorer-result-loading {
width: 240px;
}
}
.explorer-content {
display: flex;
flex-direction: row;
padding-bottom: 20px;
}
.explorer-container, .explorer-container-new {
display: flex;
overflow: visible; /*overflow: hidden;*/
height: calc(100% - 120px);
position: relative;
}
.explorer-container-new {
width: calc(100% - 340px);
height: calc(100% - 62px);
flex-direction: column;
width: calc(100% - 340px);
.explorer-list {
display: flex;
flex-direction: column;
height: calc(100% - 42px);
}
}
.explorer-foot {
display: flex;
justify-content: center;
align-items: flex-start;
height: 17vh;
&>div {
& > div {
width: 100%;
max-width: 1200px;
display: flex;
justify-content: space-between;
align-items: center;
}
.el-divider {
width: 2px;
height: 40px;
background-color: #cecece;
background-color: var(--el-color-info-light-5);
}
.entity-overview {
display: flex;
@@ -140,22 +184,26 @@
.overview-left-span {
font-size: 16px;
color: #666666;
color: var(--el-text-color-regular);
}
.overview-left-loading {
display: inline-block;
position: relative;
.overview-left-loading-span {
font-family: NotoSansHans-Medium;
font-size: 18px;
color: #575757;
color: var(--el-text-color-regular);
font-weight: 500;
}
.chart__loading i.el-icon-loading {
top: calc(50% - 12px);
}
}
}
.overview-right {
display: flex;
flex-direction: column;
@@ -167,13 +215,15 @@
height: 18px;
line-height: 18px;
align-items: center;
color: #666666;
color: var(--el-text-color-regular);
.right-label-loading {
position: relative;
.chart__loading {
width: auto;
}
.chart__loading i.el-icon-loading {
padding: 0;
top: calc(50% - 8px);
@@ -184,46 +234,51 @@
.right-label {
width: 55px;
font-size: 14px;
color: #666666;
color: var(--el-text-color-regular);
}
.right-value {
font-size: 14px;
color: #333333;
color: var(--el-text-color-primary);
font-weight: bold;
}
.right-value-block {
font-family: NotoSansHans-Medium;
font-size: 14px;
color: #353636;
color: $text-color-primary;
font-weight: 600;
.last-hour {
font-family: NotoSansSChineseRegular;
font-size: 12px;
color: #717171;
color: var(--el-text-color-regular);
font-weight: 400;
}
}
i {
padding-right: 4px;
font-size: 19px;
}
.cn-icon-increase {
/* .cn-icon-increase {
color: #23BF9A;
}
} */
.cn-icon-active {
color: #35ADDA;
color: var(--el-color-business);
}
.entity-explorer-total__icon {
width: 18px;
height: 18px;
line-height: 18px;
padding-left: 3px;
background-color: #04A6AB;
color: #fff;
background-color: #04A6AB; // todo 保留原颜色
color: var(--el-color-white);
border-radius: 50%;
font-size: 12px;
font-weight: 500;
//font-weight: 500;
margin-right: 4px;
margin-left: 1px;
}

51
src/assets/css/components/views/entityExplorer/entity-filter.scss
View File

@@ -5,26 +5,27 @@
margin-right: 12px;
overflow: auto;
z-index: 1;
border: 1px solid rgba(226, 229, 236, 1) !important;
border: 1px solid var(--el-border-color-light) !important;
border-radius: 4px !important;
$color-primary: var(--el-text-color-primary);
.filter-case__header {
padding-left: 8px;
height: 36px;
line-height: 36px;
color: #666;
font-size: 14px;
background: #F7F7F7;
box-shadow: 0 1px 0 0 rgba(226,229,236,1);
border-radius: 4px 4px 0 0;
}
padding-left: 8px;
height: 36px;
line-height: 36px;
color: var(--el-text-color-regular);
font-size: 14px;
background: var(--cn-bg-color-lighter);
box-shadow: 0 1px 0 0 var(--el-border-color-light);
border-radius: 4px 4px 0 0;
}
.filter__header {
height: 46px;
line-height: 46px;
margin: 0 20px;
font-size: 14px;
color: #353636;
color: $color-primary;
font-weight: 500;
}
@@ -35,6 +36,10 @@
overflow-y: scroll;
overflow-x: hidden;
.filter__body-loading {
top: -5px;
}
.filter__body-item {
height: 26px;
line-height: 26px;
@@ -47,19 +52,19 @@
display: flex;
align-items: center;
font-size: 14px;
color: #353636;
color: $color-primary;
font-weight: 400;
.filter__body-item-left-index {
width: 16px;
height: 16px;
text-align: center;
background: #EFF2F5;
background: var(--el-bg-color-page);
border-radius: 2px;
margin-right: 6px;
font-family: NotoSansHans-Black;
font-size: 9px;
color: #96A2B0;
color: var(--el-color-info);
font-weight: 900;
display: flex;
align-items: center;
@@ -70,7 +75,7 @@
max-width: 180px;
font-family: NotoSansSChineseRegular;
font-size: 14px;
color: #353636;
color: $color-primary;
font-weight: 400;
overflow: hidden;
white-space: nowrap;
@@ -82,19 +87,23 @@
flex-shrink: 0;
font-family: NotoSansSChineseRegular;
font-size: 12px;
color: #717171;
color: var(--el-text-color-regular);
font-weight: 400;
margin-right: 10px;
}
}
}
.padding-t-40 {
padding-top: 40px;
}
}
.filter-country-flag {
width: 18px;
height: 12px;
margin-right: 6px;
border: 1px solid #E8E8E8;
border: 1px solid var(--el-border-color-light);
}
.filter-show-more, .filter-no-show-more {
@@ -102,13 +111,14 @@
height: 26px;
line-height: 26px;
margin-left: 20px;
color: #046ECA;
color: var(--el-color-primary);
user-select: none; // 禁止文本选中
font-size: 12px;
}
.filter-no-show-more {
cursor: not-allowed;
color: rgba(16, 16, 16, 0.3);
color: var(--el-text-color-disabled);
}
.filter-hr {
@@ -116,6 +126,5 @@
margin-left: 20px;
margin-top: 6px;
height: 1px;
background: #EFF2F5;
//background: #000;
background: var(--el-bg-color-page);
}

213
src/assets/css/components/views/entityExplorer/entityList/detail-overview.scss
View File

@@ -3,6 +3,9 @@
position: relative;
flex-direction: column;
padding: 0 30px;
$color-text-primary: var(--el-text-color-primary);
$color-primary: var(--el-color-primary);
$color-primary9: var(--el-color-primary-light-9);
.overview-map {
position: absolute;
@@ -14,37 +17,48 @@
&.overview-map--ip {
height: 210px;
}
&.overview-map--app {
height: 260px;
}
.cn-chart {
height: 100%;
width: 100%;
.chart-drawing {
height: 100%;
width: 100%;
}
}
}
.overview-item {
display: flex;
flex-direction: column;
padding-bottom: 10px;
.overview__title {
color: #333;
color: $color-text-primary;
font-size: 14px;
font-weight: 600;
}
.overview__content-loading.overview__content {
.overview__content-loading {
position: relative;
.chart__loading i.el-icon-loading {
left: calc(50% - 428px);
}
.content-loading {
width: 50%;
}
}
.overview__content-loading-net.overview__content {
position: relative;
}
.overview__content {
display: flex;
flex-direction: column;
@@ -56,13 +70,15 @@
flex-wrap: wrap;
padding: 2px 0;
font-size: 14px;
.no-recent-alerts {
font-size: 12px;
color: #333333;
color: $color-text-primary;
font-weight: 400;
line-height: 19px;
i {
color: #23BF9A;
color: var(--el-color-success);
margin-right: 4px;
margin-top: 2px;
}
@@ -71,38 +87,49 @@
&.overview__row--small-font {
font-size: 12px;
}
.show-more.show-more-disabled {
color: #8FA1BE;
color: var(--el-text-color-disabled);
}
.show-more {
color: #3976CB;
color: $color-primary;
cursor: pointer;
}
&.overview__row--single-value {
flex-wrap: wrap;
.cn-chart__single-value--detail-overview {
margin-right: 30px;
}
}
.row__label {
color: #6B717B;
color: var(--el-text-color-regular);
padding-right: 20px;
&.row__label--width130 {
flex-basis: 140px;
padding-right: unset;
}
&.row__label--width160 {
flex-basis: 160px;
padding-right: unset;
}
}
.row__content {
display: flex;
color: #046ECA;
color: $color-primary;
word-wrap: break-word;
max-width: 30%;
.row__content__word {
word-break: break-word;
}
.alert-level-tag {
display: flex;
padding: 1px 4px;
@@ -113,40 +140,60 @@
&.alert-level-tag--high.critical {
background-color: #D84C4C;
}
&.alert-level-tag--high.high {
background-color: #FF9A79;
}
&.alert-level-tag--high.info {
background-color: #D1BD50;
}
&.alert-level-tag--high.medium {
background-color: #FFB65A;
}
&.alert-level-tag--high.low {
background-color: #FFD82D;
}
&.alert-level-tag--middle {
background-color: #FFAB66;
}
&.alert-level-tag--low {
background-color: #F6C738;
}
}
&.row__content--width90 {
width: 90px;
}
&.row__content--width200 {
width: 200px;
}
.row__content-loading {
position: relative;
.chart__loading i.el-icon-loading {
font-size: 14px;
top: calc(50% - 5px);
left: calc(50% - 4px);
}
}
.relationship-one__loading, .relationship-two__loading {
width: 450px;
position: relative;
.one__loading {
left: 1rem;
}
}
}
.row__contents {
display: flex;
//flex-direction: column;
@@ -158,6 +205,7 @@
&:first-of-type {
padding-top: 0;
}
&:last-of-type {
padding-bottom: 0;
}
@@ -165,31 +213,41 @@
.el-popper {
min-width: 90px !important;
}
.row__content-display {
display: flex;
}
}
.row__content-accept {
margin-left: 39px;
}
.row__charts-msg {
width: auto;
padding-right: 10px;
}
.new-row__charts-msg {
width: auto;
padding-right: 10px;
}
.row__charts {
height: 20px;
width: 60px;
//padding-left: 5px;
}
}
.row__charts {
width:80px;
height:20px;
width: 80px;
height: 20px;
padding-bottom: 5px;
}
.row__desc {
color: #666666;
color: var(--el-text-color-regular);
}
}
@@ -204,75 +262,86 @@
.overview__tags.domain__tags {
flex-direction: column;
width: 70%;
.overview__domain-tabs-loading.overview__domain-tabs {
position: relative;
}
.overview__domain-tabs {
display: flex;
margin: 0 0 8px 0;
.overview__domain-tab {
display: flex;
}
.overview__tag.domain__tag {
display: unset;
padding: 6px 15px;
margin: 0 12px 0 0;
text-align: center;
white-space: nowrap;
height: 32px;
line-height: 1.5;
background-color: #EFF6FE;
font-size: 14px;
border-radius: 4px;
}
padding: 6px 15px;
margin: 0 12px 0 0;
text-align: center;
white-space: nowrap;
height: 32px;
line-height: 1.5;
//background-color: #EFF6FE;
background-color: $color-primary9;
font-size: 14px;
border-radius: 4px;
}
.overview__tag.domain__tag-list {
padding: 6px 15px;
margin: 4px 12px 0 0;
text-align: center;
height: 24px;
line-height: 0.9;
background-color: #EFF6FE;
color: #3976CB;
background-color: $color-primary9;
color: $color-primary;
font-size: 14px;
font-weight: 400;
border-radius: 15px;
}
.overview__domain-btn {
.overview__domain-more {
background-color: #EFF6FE;
background-color: $color-primary9;
width: 44px;
height: 24px;
border-radius: 15px;
color: #3976CB;
color: $color-primary;
text-align: center;
margin: 4px 12px 0 0;
padding: 6px 15px;
line-height: .3;
cursor: pointer;
}
position: relative;
}
.overview__domain-more-tabs::-webkit-scrollbar {
width: 10px;
}
.overview__domain-more-tabs {
min-width: 150px;
max-height: 180px;
overflow: auto;
background: #FFFFFF;
box-shadow: 0 3px 6px -4px rgba(0,0,0,0.12), 0 6px 16px 0 rgba(0,0,0,0.08), 0 9px 28px 8px rgba(0,0,0,0.05);
background: var(--el-fill-color-blank);
box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
border-radius: 2px;
padding: 5px;
z-index: 1;
position: absolute;
right: -120px;
top: -180px;
.domain-more-tab {
height: 24px;
padding: 6px 12px;
text-align: center;
font-size: 12px;
color: #666666;
color: var(--el-text-color-regular);
letter-spacing: 0;
line-height: 12px;
font-weight: 400;
@@ -288,52 +357,68 @@
.overview__tags {
display: flex;
.overview__tag-loading.overview__tag {
position: relative;
}
.overview__tag {
display: flex;
padding: 0 15px;
height: 31px;
align-items: center;
margin-right: 20px;
background-color: #EFF6FE;
background-color: $color-primary9;
font-size: 14px;
border-radius: 4px;
.tag__value {
color: #3976CB;
color: $color-primary;
font-weight: bold;
}
.tag__desc {
padding-right: 5px;
color: #3976CB;
color: $color-primary;
white-space: nowrap;
}
}
}
.data-item {
display: flex;
justify-content: center;
align-items: center;
background: rgba(119,131,145,0.06);
border: 1px solid rgba(119,131,145,0.36);
background: rgba(119, 131, 145, 0.06);
border: 1px solid rgba(119, 131, 145, 0.36);
border-radius: 2px;
height:28px;
padding:8px 15px;
margin-right:10px;
height: 28px;
padding: 8px 15px;
margin-right: 10px;
//margin-bottom:15px;
font-size: 12px;
color: #353636;
color: var(--el-text-color-primary);
font-weight: 400;
white-space: nowrap;
}
.show-more-related {
height: 28px;
line-height: 28px;
padding-bottom: 12px;
cursor: pointer;
position: relative;
}
.entity-score__block {
position: relative;
.entity-score__loading {
width: 50%;
left: 1rem;
}
}
.entity-score {
.circle-icon {
border-radius: 3px;
@@ -341,59 +426,72 @@
height: 6px;
margin-right: 4px;
}
.entity-score__padding {
padding-left: 4px;
}
.data-score-red {
background: #E26154;
background: var(--el-color-danger);
}
.data-score-yellow {
background: #E5A219;
background: var(--el-color-warning);
}
.data-score-green {
background: #749F4D;
background: var(--el-color-success);
}
.score-dot {
display: inline-block;
margin-bottom: 2px;
width: 6px;
height: 6px;
border-radius: 50%;
background-color: #CBCBCB;
background-color: var(--el-color-info-light-5);
margin-right: 4px;
&.score-dot--red {
background-color: #E26154;
background-color: var(--el-color-danger);
}
&.score-dot--yellow {
background-color: #E5A219;
background-color: var(--el-color-warning);
}
&.score-dot--green {
background-color: #749F4D;
background-color: var(--el-color-success);
}
}
height:24px;
height: 24px;
font-size: 14px;
color: #046ECA;
color: $color-primary;
font-weight: 500;
display:flex;
display: flex;
align-items: center;
justify-content: center;
}
.cn-detection__header {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
padding-bottom: 3px;
color: #333333;
color: $color-text-primary;
align-items: center;
font-size: 12px;
i {
color: #7b8fa2;
//color: #7b8fa2; // todo 待确定
color: var(--el-text-color-primary);
margin-right: 5px;
font-size: 18px;
}
.line {
color: #da5656;
color: var(--el-color-error);
margin-left: 12px;
font-size: xx-small;
font-weight: bold;
@@ -402,17 +500,17 @@
.circle {
width: 10px;
height: 10px;
border: 2px solid #da5656;
border: 2px solid var(--el-color-error);
border-radius: 10px;
margin-top: 4px;
margin-right: 12px;
}
.domain {
background: #EFF2F5;
background: var(--el-bg-color-page);
border-radius: 2px;
font-size: 14px;
color: #333333;
color: $color-text-primary;
letter-spacing: 0;
line-height: 14px;
margin-left: 5px;
@@ -421,26 +519,29 @@
font-weight: 500;
}
}
.app-popover_block, .domain-popover_block {
position: absolute;
border: 1px solid #E7EAED;
border: 1px solid var(--el-border-color-light);
max-height: 180px;
width: auto;
max-width: 220px;
color: #666665;
color: var(--el-text-color-regular);
line-height: 24px;
overflow: scroll;
padding: 12px 12px 4px;
background: #fff;
background: var(--el-fill-color-blank);
z-index: 1;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
border-radius: 4px;
}
.domain-popover_block {
//top: 194px;
}
}
}
.margin-l-140 {
margin-left: 140px;
}

4
src/assets/css/components/views/entityExplorer/entityList/entity-list.scss
View File

@@ -18,6 +18,7 @@
width: calc(100% - 10px);
height: 100%;
}
.entity-list--list {
display: flex;
flex-direction: column;
@@ -36,8 +37,7 @@
}
}
.entity__pagination{
.entity__pagination {
position: absolute;
bottom: 9px;
height: 40px;

81
src/assets/css/components/views/entityExplorer/entityList/row.scss
View File

@@ -1,8 +1,11 @@
.cn-entity--list {
display: flex;
border: 1px #E2E5EC solid;
border: 1px var(--el-border-color-light) solid;
margin-bottom: 10px;
border-radius: 4px;
$border-radius: var(--el-border-radius-base);
border-radius: $border-radius;
$color-info: var(--el-color-info);
$color-regular: var(--el-text-color-regular);
.cn-entity__collapse {
margin-bottom: 1px;
@@ -11,12 +14,12 @@
display: flex;
justify-content: center;
align-items: flex-start;
background-color: #F3F7FA;
border-radius: 4px 0 0 4px;
background-color: var(--el-fill-color-light);
border-radius: $border-radius 0 0 $border-radius;
span {
transform: rotate(0);
transition: all linear .2s;
transition: all linear var(--el-transition-duration-fast);
padding-top: 0;
&.reg-down {
@@ -30,7 +33,7 @@
}
.cn-icon-arrow-right {
color: #ADBCCA;
color: var(--el-text-color-placeholder);
font-size: 12px;
}
}
@@ -44,7 +47,7 @@
padding: 16px 0;
margin-bottom: 1px;
//background-color: white;
border-radius: 0 4px 4px 0;
border-radius: 0 $border-radius $border-radius 0;
.cn-entity__icon {
margin-left: 26px;
@@ -57,11 +60,11 @@
width: 52px;
height: 52px;
border-radius: 50%;
background-color: #F3F7FA;
background-color: var(--el-fill-color-light);
i {
font-size: 26px;
color: #4E84B4;
color: #4E84B4; // todo 颜色待确定
}
}
@@ -75,13 +78,15 @@
.cn-entity__header {
font-size: 16px;
padding-bottom: 3px;
color: #333333;
color: var(--el-text-color-primary);
.cn-entity__header-title {
margin-right: 10px;
}
.entity-related-entity {
font-size: 12px;
color: #717171;
color: var(--el-text-color-regular);
cursor: pointer;
margin-right: 6px;
}
@@ -116,9 +121,11 @@
display: flex;
align-items: center;
flex-direction: row;
.item-box-loading {
position: relative;
display: flex;
.chart__loading i.el-icon-loading {
font-size: 14px;
padding: 0;
@@ -129,7 +136,7 @@
i {
padding-right: 5px;
color: #8FA1BE;
color: var(--el-text-color-primary);
font-size: 12px;
height: 13px;
}
@@ -139,11 +146,11 @@
}
span:first-of-type {
color: #999;
color: $color-info;
}
span:last-of-type {
color: #666;
color: $color-regular;
}
.row__charts {
@@ -156,7 +163,7 @@
i {
padding-right: 6px;
color: #8FA1BE;
color: var(--el-text-color-primary);
font-size: 12px;
}
@@ -165,36 +172,39 @@
}
span:first-of-type {
color: #999;
color: $color-info;
}
span:last-of-type {
color: #666;
color: $color-regular;
}
}
.basic-info__item1 {
span: {
color: #666;
color: $color-regular;
}
span:first-of-type {
color: #666;
color: $color-regular;
}
.row-item-label {
color: #999 !important;
color: $color-info !important;
}
}
.row-item-label {
font-family: NotoSansSChineseRegular;
font-size: 14px;
color: #717171;
color: var(--el-text-color-regular);
font-weight: 400;
}
.row-item-value {
font-family: NotoSansSChineseRegular;
font-size: 14px;
color: #353636;
color: var(--el-text-color-primary);
font-weight: 400;
.score-dot {
@@ -203,17 +213,19 @@
width: 6px;
height: 6px;
border-radius: 50%;
background-color: #CBCBCB;
background-color: var(--el-color-info-light-5);
margin-right: 4px;
&.score-dot--red {
background-color: #E26154;
background-color: var(--el-color-danger);
}
&.score-dot--yellow {
background-color: #E5A219;
background-color: var(--el-color-warning);
}
&.score-dot--green {
background-color: #749F4D;
background-color: var(--el-color-success);
}
}
}
@@ -226,7 +238,7 @@
flex-shrink: 0;
padding: 0 30px;
font-size: 12px;
color: #2C72C6;
color: var(--el-color-business);
font-weight: 400;
display: flex;
flex-direction: column;
@@ -249,8 +261,21 @@
overflow: hidden;
.el-divider {
background-color: #EFF2F5;
background-color: var(--el-bg-color-page);
}
}
}
.my__display {
display: flex;
align-items: center;
}
.my__display1 {
display: flex;
}
.padding-l-4 {
padding-left: 4px;
}
}

64
src/assets/css/components/views/entityExplorer/search/explorer-search.scss
View File

@@ -8,17 +8,20 @@
background-position: 0 100%;
background-size: 100%;
margin-bottom: 10px;
$color-primary: var(--el-color-primary);
&.explorer-search--show-list {
flex: 0 0 40px;
background-image: none;
}
.explorer-search__title {
height: 112px;
text-align: center;
font-size: 42px;
color: #3976CB;
color: $color-primary;
}
.explorer-search__input-case {
display: flex;
flex-direction: column;
@@ -36,24 +39,27 @@
}
.explorer-search__input--border .CodeMirror {
border: 1px solid #DEDEDE;
border: 1px solid var(--el-color-info-light-7);
}
}
.search-symbol-inline {
display: flex;
align-items: center;
justify-content: center;
color: #666;
color: var(--el-text-color-regular);
font-size: 16px;
padding: 0 10px;
cursor: pointer;
}
.explorer-search__input {
width: 100%;
max-width: 1000px;
height: 40px;
}
.explorer-search__foot,.explorer-search__foot-list {
.explorer-search__foot, .explorer-search__foot-list {
display: flex;
padding-top: 9px;
width: 100%;
@@ -66,10 +72,10 @@
display: flex;
align-items: center;
font-size: 14px;
color: #3976CB;
color: $color-primary;
.el-divider {
background-color: #3976CB;
background-color: $color-primary;
}
i, span {
@@ -80,6 +86,7 @@
transition: all linear .1s;
transform: rotate(0) translate(0, 0);
}
i.arrow-rotate {
transform: rotate(90deg) translate(2px, 3px);
}
@@ -95,11 +102,11 @@
max-width: 1000px;
z-index: 2;
//top: 47px;
border: 1px solid rgba(226,229,236,1);
border: 1px solid var(--el-border-color-light);
border-radius: 2px;
background-color: white;
background-color: var(--el-fill-color-blank);
.history__items {
/* .history__items {
max-height: 300px;
overflow: auto;
.history__item {
@@ -116,6 +123,7 @@
}
div {
color: #999;
border: 1px red solid;
}
.item-date {
color: #bbb;
@@ -137,34 +145,40 @@
background-color: #ecf5ff;
color: #66b1ff;
}
}
} */
.history__items-new {
max-height: 300px;
overflow: auto;
.el-table th,.el-table td {
.el-table th, .el-table td {
padding: 6px 0;
border: none !important;
}
.el-table {
font-family: NotoSansSChineseRegular;
font-size: 14px;
color: #575757;
color: var(--el-text-color-regular);
font-weight: 400;
thead {
font-family: NotoSansHans-Medium;
font-size: 14px;
color: #353636;
color: var(--el-text-color-primary);
font-weight: 500;
}
.cell {
padding-left: 18px;
}
}
.el-scrollbar__bar {
visibility: hidden;
}
}
.clear-all {
padding-left: 18px;
font-weight: normal;
@@ -172,7 +186,7 @@
height: 35px;
display: flex;
align-items: center;
color: #3976CB;
color: $color-primary;
span {
cursor: pointer;
@@ -180,28 +194,35 @@
}
}
}
.explorer-search__foot-list {
max-width: 756px;
position: absolute;
left: 196px;
top: 44px;
.search__history {
top: 6px;
max-width: 756px;
margin-left: -196px;
.history__items-new {
max-height: 300px;
overflow: auto;
.el-table th,.el-table td {
.el-table th, .el-table td {
padding: 4px 0;
border: none !important;
}
.el-table {
font-size: 12px;
thead {
font-size: 12px;
}
}
.el-table--scrollable-x .el-table__body-wrapper {
overflow-x: hidden;
}
@@ -211,21 +232,26 @@
}
}
.highlight__text {
background: #FEECC2;
background: var(--el-color-warning-light-7);
padding: 0 3px;
}
.highlight__block {
background: #FEECC2;
background: var(--el-color-warning-light-7);
}
.explorer-search__foot-list .explorer-search__block {
margin-left: -196px;
top: -44px;
}
.explorer-search__foot .explorer-search__block {
margin-left: 0;
top: -40px;
}
.explorer-search__block {
position: absolute;
padding-left: 15px;
@@ -237,13 +263,13 @@
i {
font-size: 20px;
color: #999;
color: var(--el-color-info);
}
.search-dividing-line {
width: 1px;
height: 26px;
background: #DEDEDE;
background: var(--el-color-info-light-7);
margin-left: 15px;
margin-top: 2px;
}

4
src/utils/tools.js
View File

@@ -1440,7 +1440,7 @@ export const myHighLight = {
if (newText && newText !== '-') {
// 此处不用el.className.indexOf('high-light-block')判断，是因为block可能会有多个，有一个满足所有的都会渲染
if (newText.indexOf('highlight__block') > -1) {
el.style.cssText = el.style.cssText + 'background: #FEECC2;'
el.style.cssText = el.style.cssText + 'background: var(--el-color-warning-light-7);'
// 此处是相关app、相关ip、相关domain弹窗获取不到dom的操作
let dom
if (document.getElementById('showRelatedApp')) {
@@ -1454,7 +1454,7 @@ export const myHighLight = {
if (itemDom) {
for (let i = 0; i < itemDom.length; i++) {
if (itemDom[i].innerHTML === el.innerHTML) {
itemDom[i].style.cssText = itemDom[i].style.cssText + 'background: #FEECC2;'
itemDom[i].style.cssText = itemDom[i].style.cssText + 'background: var(--el-color-warning-light-7);'
}
}
}

30
src/views/entityExplorer/EntityExplorer.vue
View File

@@ -3,9 +3,9 @@
class="entity-explorer"
:class="{'entity-explorer--show-list': showList}">
<!-- 顶部工具栏，在列表页显示 -->
<div class="explorer-top-tools explorer-top-tools-new" style="margin: 2px 0;" v-show="showList">
<div class="explorer-top-tools explorer-top-tools-new" v-show="showList">
<div class="explorer-entity-top-tools">
<div class="explorer-top-tools-title" style="padding: 0;margin-left: -10px;">{{$t('network.entity')}}</div>
<div class="explorer-top-tools-title tools-title__margin">{{$t('network.entity')}}</div>
<date-time-range
class="date-time-range"
:start-time="timeFilter.startTime"
@@ -25,7 +25,7 @@
@search="search"
></explorer-search>
<!-- 内容区 -->
<div v-if="showList" style="display: flex;flex-direction: row;padding-bottom: 20px;">
<div v-if="showList" class="explorer-content">
<entity-filter
:filter-data="newFilterData"
:q="q"
@@ -40,27 +40,19 @@
@search="search"
></explorer-search>
<div style="display: flex;flex-direction: column;height: calc(100% - 42px);">
<div class="explorer-list">
<div class="explorer-result" v-if="showList" style="position: relative;display: flex">
<loading :loading="loadingCount" style="width: 240px"></loading>
<loading :loading="loadingCount" class="explorer-result-loading"></loading>
<span>{{ summaryCount.totalCount }}&nbsp;</span>{{$t('overall.results')}}，IP<span class="margin-r-3"></span>
<span>{{ summaryCount.ipCount }}</span>，{{$t('overall.domain')}}<span class="margin-r-3"></span>
<span>{{ summaryCount.domainCount }}</span>，APP<span class="margin-r-3"></span>
<span>{{ summaryCount.appCount }}</span>
<span class="entity-hide-entity" v-if="q">
<!-- <span v-if="listData.length !== 0">-->
<!-- <el-checkbox-->
<!-- v-model="isHideRelatedEntities"-->
<!-- :label="$t('entity.hideRelatedEntities')"-->
<!-- :disabled="listData.length===0"-->
<!-- @change="hideRelatedEntities"-->
<!-- size="large" />-->
<el-radio-group v-model="isHideRelatedEntities" @change="hideRelatedEntities" class="ml-4">
<el-radio :label="true" size="large">{{ $t('entity.entityMode') }}</el-radio>
<el-radio :label="false" style="margin-left: -10px;" size="large">{{ $t('entity.relatedMode') }}</el-radio>
</el-radio-group>
<!-- </span>-->
<el-radio-group v-model="isHideRelatedEntities" @change="hideRelatedEntities" class="ml-4">
<el-radio :label="true" size="large">{{ $t('entity.entityMode') }}</el-radio>
<el-radio :label="false" class="margin-l__10" size="large">{{ $t('entity.relatedMode') }}</el-radio>
</el-radio-group>
</span>
</div>
@@ -614,9 +606,9 @@ export default {
this.listData = []
this.$nextTick(() => {
this.listData = response.data.data.list
/*if (this.listData.length === 0) {
/* if (this.listData.length === 0) {
this.isHideRelatedEntities = false
}*/
} */
})
} else {
this.$message.error(response.data.message)

5
src/views/entityExplorer/EntityFilter.vue
View File

@@ -11,7 +11,7 @@
</div>
<div class="filter__body" style="position: relative">
<loading :loading="item.loading" style="top: -5px;"></loading>
<loading :loading="item.loading" class="filter__body-loading"></loading>
<div class="filter__body-item"
v-for="(data, i) in item.data.slice(0, item.showNum)"
@@ -46,8 +46,7 @@
</div>
</div>
<loading v-else-if="isFirstLoad" :loading="isFirstLoad"></loading>
<chart-no-data v-else style="padding-top: 40px"></chart-no-data>
<chart-no-data v-else class="padding-t-40"></chart-no-data>
</div>
</template>

13
src/views/entityExplorer/entityList/Row.vue
View File

@@ -10,7 +10,7 @@
<div class="cn-entity__icon"><i :class="iconClass"></i></div>
<div class="cn-entity__row">
<!--标签-->
<div class="cn-entity__header" style="display: flex;">
<div class="cn-entity__header my__display1">
<span class="cn-entity__header-title" v-high-light="keywordList">{{ entityData.entityValue || 'Unknown' }}</span>
<span v-show="entityData.isRelated">
<el-popover
@@ -150,7 +150,7 @@
</div>
<!--score分数-->
<div class="basic-info__item" style="display: flex;align-items: center;">
<div class="basic-info__item my__display">
<i class="cn-icon cn-icon-Score"></i>
<div class="row-item-label">
<span class="row-item-label">{{ $t('network.score') }}&nbsp;:&nbsp;&nbsp;</span>
@@ -158,7 +158,7 @@
<template v-if="!loadingNetworkQuality && score !=='-'">
<span v-for="(dot, i) in scoreDot" :key="i" :class="dot.class"></span>
</template>
<span style="padding-left: 4px;">{{score}}</span>
<span class="padding-l-4">{{score}}</span>
<loading :loading="loadingNetworkQuality" size="small"></loading>
</span>
</div>
@@ -166,17 +166,14 @@
<!--事件数量，即Performance和security事件总和-->
<div class="basic-info__item" style="position: relative">
<div v-if="eventNum>0 && !loadingEvent" style="display: flex;align-items: center;">
<div v-if="eventNum>0 && !loadingEvent" class="my__display">
<i class="cn-icon cn-icon-Event1"></i>
<div class="row-item-label">
<span class="row-item-label">{{ $t('dnsInsight.event') }}&nbsp;:&nbsp;&nbsp;</span>
<span class="row-item-value">{{ eventNum }}</span>
</div>
</div>
<!-- <loading :loading="loadingEvent" size="small" style="width: 90px"></loading>-->
</div>
</div>
</div>
</div>
@@ -318,7 +315,7 @@ export default {
if (this.isCollapse) {
this.$refs.rowBlock.style.cssText = 'background-color: none'
} else {
this.$refs.rowBlock.style.cssText = 'background-color: #fff'
this.$refs.rowBlock.style.cssText = 'background-color: var(--el-fill-color-blank)'
}
this.$emit('switchCollapse', this.isCollapse, this.index)
},

22
src/views/entityExplorer/entityList/detailOverview/App.vue
View File

@@ -29,7 +29,7 @@
<div class="overview-item">
<div class="overview__title">{{$t('overall.traffic')}}</div>
<div class="overview__content overview__content-loading">
<loading :loading="loadingTraffic" size="small" inner-style="left: 8.75rem;" style="width: 50%;"></loading>
<loading :loading="loadingTraffic" size="small" inner-style="left: 8.75rem;" class="content-loading"></loading>
<div class="overview__row">
<div class="row__label row__label--width130">{{$t('overall.peak')}}</div>
<div class="row__content">
@@ -68,13 +68,13 @@
<div class="overview__row">
<div class="row__label row__label--width130">{{$t('entities.networkQualityRating')}}</div>
<div style="position: relative;">
<div class="entity-score__block">
<div class="entity-score" v-if="!loadingNetworkQuality && score !=='-'">
<span v-for="(dot, i) in scoreDot" :key="i" :class="dot.class"></span>
<span style="padding-left: 4px;">{{score}}</span>
<span class="entity-score__padding">{{score}}</span>
</div>
<div class="entity-score" v-else>{{score}}</div>
<loading :loading="loadingNetworkQuality" size="small" style="left: 1rem;width: 50%;"></loading>
<loading :loading="loadingNetworkQuality" size="small" class="entity-score__loading"></loading>
</div>
</div>
</div>
@@ -87,8 +87,8 @@
<div class="overview__row">
<div class="row__label row__label--width130">{{$t('entities.tab.relatedDomain')}}</div>
<div class="row__content overview__row-related">
<div v-if="loadingRelationshipOne" style="position: relative;width: 450px;">
<loading :loading="loadingRelationshipOne" size="small" style="left: 1rem;"></loading>
<div v-if="loadingRelationshipOne" class="relationship-one__loading">
<loading :loading="loadingRelationshipOne" size="small" class="one__loading"></loading>
</div>
<div class="data-item high-light-block" v-high-light="keywordList" v-show="item.show" v-for="(item, index) in relationshipDataOne" :key="index">
@@ -97,7 +97,7 @@
<div v-if="relationshipDataOne.length===0 && !loadingRelationshipOne">-</div>
<div v-if="relationshipShowOne">
<div class="data-item show-more-related" id="related-app-more" @click.stop="showMoreApp" style="position: relative">...</div>
<div class="data-item show-more-related" id="related-app-more" @click.stop="showMoreApp">...</div>
<div v-if="isShowMoreApp" class="app-popover_block" id="showRelatedApp">
<div class="popover-content" v-for="(item, index) in relationshipDataOne" :key="index">
<span v-if="!item.show" class="high-light-block" v-high-light="keywordList">{{item.value}}</span>
@@ -111,8 +111,8 @@
<div class="row__label row__label--width130">{{$t('entities.tab.relatedIp')}}</div>
<div class="row__content">
<div v-if="loadingRelationshipTwo" style="position: relative;width: 450px;">
<loading :loading="loadingRelationshipTwo" size="small" style="left: 1rem;"></loading>
<div v-if="loadingRelationshipTwo" class="relationship-two__loading">
<loading :loading="loadingRelationshipTwo" size="small" class="one__loading"></loading>
</div>
<div class="data-item high-light-block" v-high-light="keywordList" v-show="item.show" v-for="(item, index) in relationshipDataTwo" :key="index">
@@ -121,7 +121,7 @@
<div v-if="relationshipDataTwo.length===0 && !loadingRelationshipTwo">-</div>
<div v-if="relationshipShowTwo">
<div class="data-item show-more-related" id="related-domain-more" @click.stop="showMoreDomain" style="position: relative">...</div>
<div class="data-item show-more-related" id="related-domain-more" @click.stop="showMoreDomain">...</div>
<div v-if="isShowMoreDomain" class="domain-popover_block" id="showRelatedDomain">
<div v-for="(item, index) in relationshipDataTwo" :key="index">
<span v-if="!item.show" class="high-light-block" v-high-light="keywordList">{{item.value}}</span>
@@ -149,7 +149,7 @@
<div class="row__content row__content--width90">
<div class="alert-level-tag alert-level-tag--high" :class="iconClass(performance)">{{performance.eventSeverity}}</div>
</div>
<div class="row__content-loading" style="position: relative;">
<div class="row__content-loading">
<div class="performance-event-remark">{{performance.eventType}}</div>
</div>
<div class="row__desc"></div>

22
src/views/entityExplorer/entityList/detailOverview/Domain.vue
View File

@@ -35,7 +35,7 @@
<div class="overview-item">
<div class="overview__title">{{$t('overall.traffic')}}</div>
<div class="overview__content overview__content-loading">
<loading :loading="loadingTraffic" size="small" inner-style="left: 8.75rem;" style="width: 50%;"></loading>
<loading :loading="loadingTraffic" size="small" inner-style="left: 8.75rem;" class="content-loading"></loading>
<div class="overview__row">
<div class="row__label row__label--width130">{{$t('overall.peak')}}</div>
<div class="row__content">
@@ -74,13 +74,13 @@
<div class="overview__row">
<div class="row__label row__label--width130">{{$t('entities.networkQualityRating')}}</div>
<div style="position: relative;">
<div class="entity-score__block">
<div class="entity-score" v-if="!loadingNetworkQuality && score !=='-'">
<span v-for="(dot, i) in scoreDot" :key="i" :class="dot.class"></span>
<span style="padding-left: 4px;">{{score}}</span>
<span class="entity-score__padding">{{score}}</span>
</div>
<div class="entity-score" v-else>{{score}}</div>
<loading :loading="loadingNetworkQuality" size="small" style="left: 1rem;width: 50%;"></loading>
<loading :loading="loadingNetworkQuality" size="small" class="entity-score__loading"></loading>
</div>
</div>
</div>
@@ -93,8 +93,8 @@
<div class="overview__row">
<div class="row__label row__label--width130">{{$t('entities.tab.relatedApp')}}</div>
<div class="row__content overview__row-related">
<div v-if="loadingRelationshipOne" style="position: relative;width: 450px;">
<loading :loading="loadingRelationshipOne" size="small" style="left: 1rem;"></loading>
<div v-if="loadingRelationshipOne" class="relationship-one__loading">
<loading :loading="loadingRelationshipOne" size="small" class="one__loading"></loading>
</div>
<div class="data-item high-light-block" v-high-light="keywordList" v-show="item.show" v-for="(item, index) in relationshipDataOne" :key="index">
@@ -103,7 +103,7 @@
<div v-if="relationshipDataOne.length===0 && !loadingRelationshipOne">-</div>
<div v-if="relationshipShowOne">
<div class="data-item show-more-related" id="related-app-more" @click.stop="showMoreApp" style="position: relative">...</div>
<div class="data-item show-more-related" id="related-app-more" @click.stop="showMoreApp">...</div>
<div v-if="isShowMoreApp" class="app-popover_block" id="showRelatedApp">
<div class="popover-content" v-for="(item, index) in relationshipDataOne" :key="index">
<span v-if="!item.show" class="high-light-block" v-high-light="keywordList">{{item.value}}</span>
@@ -116,8 +116,8 @@
<div class="overview__row overview__row-related">
<div class="row__label row__label--width130">{{$t('entities.tab.relatedIp')}}</div>
<div class="row__content">
<div v-if="loadingRelationshipTwo" style="position: relative;width: 450px;">
<loading :loading="loadingRelationshipTwo" size="small" style="left: 1rem;"></loading>
<div v-if="loadingRelationshipTwo" class="relationship-two__loading">
<loading :loading="loadingRelationshipTwo" size="small" class="one__loading"></loading>
</div>
<div class="data-item high-light-block" v-high-light="keywordList" v-show="item.show" v-for="(item, index) in relationshipDataTwo" :key="index">
{{item.value}}
@@ -125,7 +125,7 @@
<div v-if="relationshipDataTwo.length===0 && !loadingRelationshipTwo">-</div>
<div v-if="relationshipShowTwo">
<div class="data-item show-more-related" id="related-domain-more" @click.stop="showMoreDomain" style="position: relative">...</div>
<div class="data-item show-more-related" id="related-domain-more" @click.stop="showMoreDomain">...</div>
<div v-if="isShowMoreDomain" class="domain-popover_block" id="showRelatedDomain">
<div v-for="(item, index) in relationshipDataTwo" :key="index">
<span v-if="!item.show" class="high-light-block" v-high-light="keywordList">{{item.value}}</span>
@@ -153,7 +153,7 @@
<div class="row__content row__content--width90">
<div class="alert-level-tag alert-level-tag--high" :class="iconClass(performance)">{{performance.eventSeverity}}</div>
</div>
<div class="row__content-loading" style="position: relative;">
<div class="row__content-loading">
<div class="performance-event-remark">{{performance.eventType}}</div>
</div>
<div class="row__desc"></div>

30
src/views/entityExplorer/entityList/detailOverview/Ip.vue
View File

@@ -5,7 +5,7 @@
<div class="overview__row">
<div class="row__label row__label--width130">{{$t('overall.location')}}</div>
<div class="row__content">
<div v-if="entity.location" style="display: flex">
<div v-if="entity.location" class="row__content-display">
<div v-if="entity.location.country">
<img v-if="entity.location.country===countryNameIdMapping.Unknown || !countryNameIdMapping[entity.location.country]" src="../../../../../public/images/flag/Unknown.svg" class="filter-country-flag">
<img v-else :src="require(`../../../../../public/images/flag/${countryNameIdMapping[entity.location.country]}.png`)" class="filter-country-flag" >
@@ -25,14 +25,14 @@
</div>
<div class="overview__row">
<div class="row__label row__label--width130">{{$t('entities.openPort')}}</div>
<div class="row__content high-location" style="word-break: break-word;" v-high-light="keywordList">{{ openPort }}</div>
<div class="row__content high-location row__content__word" v-high-light="keywordList">{{ openPort }}</div>
</div>
</div>
</div>
<div class="overview-item" v-if="entityData.dnsServerRole">
<div class="overview__title">{{$t('overall.dnsServerInfo')}}</div>
<div class="overview__content overview__content-loading">
<loading :loading="loadingDns" size="small" inner-style="left: 8.75rem;" style="width: 50%;"></loading>
<loading :loading="loadingDns" size="small" inner-style="left: 8.75rem;" class="content-loading"></loading>
<div class="overview__row">
<div class="row__label row__label--width130">{{$t('overall.dnsServerInfo.role')}}</div>
<div class="row__content">{{$_.get(entityData, 'dnsServerRole') || '-'}}</div>
@@ -71,7 +71,7 @@
<div class="overview-item">
<div class="overview__title">{{$t('overall.traffic')}}</div>
<div class="overview__content overview__content-loading">
<loading :loading="loadingTraffic" size="small" inner-style="left: 8.75rem;" style="width: 50%;"></loading>
<loading :loading="loadingTraffic" size="small" inner-style="left: 8.75rem;" class="content-loading"></loading>
<div class="overview__row">
<div class="row__label row__label--width130">{{$t('overall.peak')}}</div>
<div class="row__content">
@@ -109,13 +109,13 @@
</div>
<div class="overview__row">
<div class="row__label row__label--width130">{{$t('entities.networkQualityRating')}}</div>
<div style="position: relative;">
<div class="entity-score__block">
<div class="entity-score" v-if="!loadingNetworkQuality && score !=='-'">
<span v-for="(dot, i) in scoreDot" :key="i" :class="dot.class"></span>
<span style="padding-left: 4px;">{{score}}</span>
<span class="entity-score__padding">{{score}}</span>
</div>
<div class="entity-score" v-else>{{score}}</div>
<loading :loading="loadingNetworkQuality" size="small" style="left: 1rem;width: 50%;"></loading>
<loading :loading="loadingNetworkQuality" size="small" class="entity-score__loading"></loading>
</div>
</div>
</div>
@@ -128,8 +128,8 @@
<div class="overview__row overview__row-related">
<div class="row__label row__label--width130">{{$t('entities.tab.relatedApp')}}</div>
<div class="row__content">
<div v-if="loadingRelationshipOne" style="position: relative;width: 450px;">
<loading :loading="loadingRelationshipOne" size="small" style="left: 1rem;"></loading>
<div v-if="loadingRelationshipOne" class="relationship-one__loading">
<loading :loading="loadingRelationshipOne" size="small" class="one__loading"></loading>
</div>
<div class="data-item high-light-block" v-high-light="keywordList" v-show="item.show" v-for="(item, index) in relationshipDataOne" :key="index">
@@ -138,7 +138,7 @@
<div v-if="relationshipDataOne.length===0 && !loadingRelationshipOne">-</div>
<div v-if="relationshipShowOne">
<div class="data-item show-more-related" id="related-app-more" @click.stop="showMoreApp" style="position: relative">...</div>
<div class="data-item show-more-related" id="related-app-more" @click.stop="showMoreApp">...</div>
<div v-if="isShowMoreApp" class="app-popover_block" id="showRelatedApp">
<div class="popover-content" v-for="(item, index) in relationshipDataOne" :key="index">
<span v-if="!item.show" class="high-light-block" v-high-light="keywordList">{{item.value}}</span>
@@ -151,8 +151,8 @@
<div class="overview__row overview__row-related">
<div class="row__label row__label--width130">{{$t('entities.relatedDomain')}}</div>
<div class="row__content">
<div v-if="loadingRelationshipTwo" style="position: relative;width: 450px;">
<loading :loading="loadingRelationshipTwo" size="small" style="left: 1rem;"></loading>
<div v-if="loadingRelationshipTwo" class="relationship-two__loading">
<loading :loading="loadingRelationshipTwo" size="small" class="one__loading"></loading>
</div>
<div class="data-item high-light-block" v-high-light="keywordList" v-show="item.show" v-for="(item, index) in relationshipDataTwo" :key="index">
@@ -161,7 +161,7 @@
<div v-if="relationshipDataTwo.length===0 && !loadingRelationshipTwo">-</div>
<div v-if="relationshipShowTwo">
<div class="data-item show-more-related" id="related-domain-more" @click.stop="showMoreDomain" style="position: relative">...</div>
<div class="data-item show-more-related" id="related-domain-more" @click.stop="showMoreDomain">...</div>
<div v-if="isShowMoreDomain" class="domain-popover_block" id="showRelatedDomain">
<div v-for="(item, index) in relationshipDataTwo" :key="index">
<span v-if="!item.show" class="high-light-block" v-high-light="keywordList">{{item.value}}</span>
@@ -189,7 +189,7 @@
<div class="row__content row__content--width90">
<div class="alert-level-tag alert-level-tag--high" :class="iconClass(performance)">{{performance.eventSeverity}}</div>
</div>
<div class="row__content-loading" style="position: relative;">
<div class="row__content-loading">
<div class="performance-event-remark">{{performance.eventType}}</div>
</div>
<div class="row__desc"></div>
@@ -201,7 +201,7 @@
</div>
<div class="overview-item">
<div class="overview__title">{{$t('entities.securityEvents')}}</div>
<div class="overview__content overview__content-loading">
<div class="overview__content overview__content-loading" style="position: relative">
<loading :loading="loadingSecurityEvents" size="small" inner-style="left: 10rem"></loading>
<div class="overview__row" v-if="securityData.length === 0">
<span class="no-recent-alerts"><el-icon><SuccessFilled /></el-icon>{{$t('relationShip.noRecentAlerts')}}</span>