diff --git a/src/assets/css/components/components/advancedSearch/advanced-search2.scss b/src/assets/css/components/components/advancedSearch/advanced-search2.scss
index 9806d054..ce7df5b6 100644
--- a/src/assets/css/components/components/advancedSearch/advanced-search2.scss
+++ b/src/assets/css/components/components/advancedSearch/advanced-search2.scss
@@ -25,6 +25,42 @@
cursor: pointer;
}
}
+ .search__suffix-close {
+ height: 40px;
+ line-height: 40px;
+ margin-top: -9px;
+
+ .el-icon-error {
+ font-size: 17px;
+ color: #C4C4C4;
+ margin-right: 12px;
+ cursor: pointer;
+ }
+ }
+ .entity-explorer-search {
+ color: #3976CB;
+ margin-top: -2px;
+ }
+ .margin-r-12 {
+ margin-right: 12px;
+ }
+ .new-search__suffix {
+ width: 41px;
+ height: 41px;
+ line-height: 41px;
+ background: #38ACD2;
+ text-align: center;
+ margin-top: -10px;
+ margin-right: -10px;
+
+ .el-icon-search {
+ color: #fff !important;
+ margin-top: 9px !important;
+ }
+ }
+ .my-popper-class .el-popper__arrow {
+ display: none;
+ }
}
}
/*.search-tip--error {
@@ -131,3 +167,8 @@
}
}
}
+
+.el-popover.my-popper-class {
+ width: auto !important;
+ padding: 8px 12px !important;
+}
diff --git a/src/assets/css/components/views/entityExplorer/entityList/detail-overview.scss b/src/assets/css/components/views/entityExplorer/entityList/detail-overview.scss
index 8d9c77e5..187b3328 100644
--- a/src/assets/css/components/views/entityExplorer/entityList/detail-overview.scss
+++ b/src/assets/css/components/views/entityExplorer/entityList/detail-overview.scss
@@ -311,6 +311,114 @@
}
}
}
+ .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);
+ border-radius: 2px;
+ height:28px;
+ padding:8px 15px;
+ margin-right:10px;
+ //margin-bottom:15px;
+ font-size: 12px;
+ color: #353636;
+ font-weight: 400;
+ white-space: nowrap;
+ }
+ .show-more-related {
+ height: 28px;
+ line-height: 28px;
+ padding-bottom: 12px;
+ cursor: pointer;
+ }
+ .entity-score {
+ .circle-icon {
+ border-radius: 3px;
+ width: 6px;
+ height: 6px;
+ margin-right: 4px;
+ }
+ .data-score-red {
+ background: #E26154;
+ }
+ .data-score-yellow {
+ background: #E5A219;
+ }
+ .data-score-green {
+ background: #749F4D;
+ }
+ height:24px;
+ font-size: 14px;
+ color: #046ECA;
+ font-weight: 500;
+ display:flex;
+ align-items: center;
+ justify-content: center;
+ }
+ .cn-detection__header {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: nowrap;
+ padding-bottom: 3px;
+ color: #333333;
+ align-items: center;
+ font-size: 12px;
+
+ i {
+ color: #7b8fa2;
+ margin-right: 5px;
+ font-size: 18px;
+ }
+
+ .line {
+ color: #da5656;
+ margin-left: 12px;
+ font-size: xx-small;
+ font-weight: bold;
+ }
+
+ .circle {
+ width: 10px;
+ height: 10px;
+ border: 2px solid #da5656;
+ border-radius: 10px;
+ margin-top: 4px;
+ margin-right: 12px;
+ }
+
+ .domain {
+ background: #EFF2F5;
+ border-radius: 2px;
+ font-size: 14px;
+ color: #333333;
+ letter-spacing: 0;
+ line-height: 14px;
+ margin-left: 5px;
+ font-style: italic;
+ padding: 0 2px;
+ font-weight: 500;
+ }
+ }
+ .app-popover_block, .domain-popover_block {
+ position: absolute;
+ border: 1px solid #E7EAED;
+ max-height: 180px;
+ width: auto;
+ max-width: 220px;
+ color: #666665;
+ line-height: 24px;
+ overflow: scroll;
+ padding: 12px 12px 4px;
+ background: #fff;
+ 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 {
@@ -321,12 +429,3 @@
display: flex;
align-items: center;
}
-
-.entity-detail__popover.el-popper {
- min-width: 90px !important;
- width: auto !important;
- max-width: 300px !important;
- max-height: 180px !important;
- overflow: scroll !important;
- line-height: 24px !important;
-}
diff --git a/src/components/advancedSearch/TagMode.vue b/src/components/advancedSearch/TagMode.vue
index 5ca05a20..2bc4b416 100644
--- a/src/components/advancedSearch/TagMode.vue
+++ b/src/components/advancedSearch/TagMode.vue
@@ -657,26 +657,3 @@ export default {
}
}
-
-
diff --git a/src/components/advancedSearch/TextMode.vue b/src/components/advancedSearch/TextMode.vue
index 2282d198..83e8c4a3 100644
--- a/src/components/advancedSearch/TextMode.vue
+++ b/src/components/advancedSearch/TextMode.vue
@@ -247,40 +247,3 @@ export default {
}
}
-
-
diff --git a/src/views/entityExplorer/EntityExplorer.vue b/src/views/entityExplorer/EntityExplorer.vue
index ea18120a..ef9ac039 100644
--- a/src/views/entityExplorer/EntityExplorer.vue
+++ b/src/views/entityExplorer/EntityExplorer.vue
@@ -504,28 +504,30 @@ export default {
const aggTag = axios.get(api.entity.entityList.aggTag, { params: queryParams })
Promise.all([aggCountry, aggCity, aggIPAsn, aggIPIsp, aggPort, aggDomain, aggAppCategory, aggTag]).then(response => {
- response.forEach((item, index) => {
- if (item.status === 200 && item.data.data.list) {
+ response.forEach((item1, index) => {
+ if (item1.status === 200 && item1.data.data.list) {
this.newFilterData[index].data = []
- item.data.data.list.forEach(item => {
- let obj = {
- label: item.value,
- topColumn: this.newFilterData[index].topColumn,
- value: item.uniqueEntities
- }
- if (index === 0) {
- obj.flag = item.value // 接口字段名称为'China'，svg名称为'CN'，通过countryNameIdMapping进行转换
- }
- if (index === 4) {
- obj = {
+ item1.data.data.list.forEach((item, i) => {
+ if (i < 5) {
+ let obj = {
+ label: item.value,
topColumn: this.newFilterData[index].topColumn,
- topColumn1: this.newFilterData[index].topColumn1,
- port: item.port,
- l7Protocol: item.l7Protocol,
value: item.uniqueEntities
}
+ if (index === 0) {
+ obj.flag = item.value // 接口字段名称为'China'，svg名称为'CN'，通过countryNameIdMapping进行转换
+ }
+ if (index === 4) {
+ obj = {
+ topColumn: this.newFilterData[index].topColumn,
+ topColumn1: this.newFilterData[index].topColumn1,
+ port: item.port,
+ l7Protocol: item.l7Protocol,
+ value: item.uniqueEntities
+ }
+ }
+ this.newFilterData[index].data.push(obj)
}
- this.newFilterData[index].data.push(obj)
})
}
})
diff --git a/src/views/entityExplorer/entityList/detailOverview/App.vue b/src/views/entityExplorer/entityList/detailOverview/App.vue
index b7474073..8a98b750 100644
--- a/src/views/entityExplorer/entityList/detailOverview/App.vue
+++ b/src/views/entityExplorer/entityList/detailOverview/App.vue
@@ -98,12 +98,10 @@
-
-
-
- ...
-
- {{item.value}}
-
+
...
+
-
diff --git a/src/views/entityExplorer/entityList/detailOverview/Domain.vue b/src/views/entityExplorer/entityList/detailOverview/Domain.vue
index fac51b8b..07cdbfb2 100644
--- a/src/views/entityExplorer/entityList/detailOverview/Domain.vue
+++ b/src/views/entityExplorer/entityList/detailOverview/Domain.vue
@@ -106,12 +106,10 @@
-
-
-
- ...
-
- {{item.value}}
-
+
...
+
-
diff --git a/src/views/entityExplorer/entityList/detailOverview/Ip.vue b/src/views/entityExplorer/entityList/detailOverview/Ip.vue
index b25cc6d7..73feae0f 100644
--- a/src/views/entityExplorer/entityList/detailOverview/Ip.vue
+++ b/src/views/entityExplorer/entityList/detailOverview/Ip.vue
@@ -137,12 +137,10 @@
-
@@ -160,12 +158,10 @@
-
@@ -484,97 +480,3 @@ export default {
}
}
-
-
diff --git a/src/views/entityExplorer/entityList/detailOverview/entityDetailMixin.js b/src/views/entityExplorer/entityList/detailOverview/entityDetailMixin.js
index 032f6591..121f2ddb 100644
--- a/src/views/entityExplorer/entityList/detailOverview/entityDetailMixin.js
+++ b/src/views/entityExplorer/entityList/detailOverview/entityDetailMixin.js
@@ -46,7 +46,9 @@ export default {
performanceChartList: [],
loadingPerformance: [],
score: '-', // 网络质量评分
- performanceMetricEndTimeInterval: 3600 // 服务质量事件指标的结束时间与开始时间的秒间隔
+ performanceMetricEndTimeInterval: 3600, // 服务质量事件指标的结束时间与开始时间的秒间隔
+ isShowMoreApp: false, // related App 展示更多时
+ isShowMoreDomain: false // related Domain 展示更多时
}
},
computed: {
@@ -432,6 +434,45 @@ export default {
resize () {
this.echartsArray.forEach(item => { item.value.resize() })
+ },
+ showMoreApp () {
+ const vm = this
+ this.isShowMoreApp = !this.isShowMoreApp
+ this.isShowMoreDomain = false
+ if (this.isShowMoreApp) {
+ this.$nextTick(() => {
+ const dom = document.getElementById('related-app-more')
+ const dom1 = document.getElementById('showRelatedApp')
+ console.log('bottom', dom.offsetTop, dom1.offsetHeight)
+ dom1.style.cssText = `top: ${dom.offsetTop - dom1.offsetHeight + 30}px;left: ${dom.offsetLeft + 62}px`
+ function showBlock () {
+ // 改变数据 在body上绑定事件, 让数据变成false, 阻止点击'...'时候冒泡到body上,所以用stop,
+ vm.isShowMoreApp = false
+ // 消失后,为了性能,取消body这个事件
+ document.body.removeEventListener('click', showBlock)
+ }
+ document.body.addEventListener('click', showBlock)
+ })
+ }
+ },
+ showMoreDomain () {
+ const vm = this
+ this.isShowMoreDomain = !this.isShowMoreDomain
+ this.isShowMoreApp = false
+ if (this.isShowMoreDomain) {
+ this.$nextTick(() => {
+ const dom = document.getElementById('related-domain-more')
+ const dom1 = document.getElementById('showRelatedDomain')
+ dom1.style.cssText = `top: ${dom.offsetTop - dom1.offsetHeight + 30}px;left: ${dom.offsetLeft + 62}px`
+ function showBlock () {
+ // 改变数据 在body上绑定事件, 让数据变成false, 阻止点击'...'时候冒泡到body上,所以用stop,
+ vm.isShowMoreDomain = false
+ // 消失后,为了性能,取消body这个事件
+ document.body.removeEventListener('click', showBlock)
+ }
+ document.body.addEventListener('click', showBlock)
+ })
+ }
}
},
setup () {