fix: 实体下拉详情的related App弃用el-popover，并将vue文件内的css移入css文件

2023-09-11 16:57:47 +08:00
parent badef3c064
commit 7100ee2298
9 changed files with 230 additions and 213 deletions
--- 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;
+}
--- 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;
-}
--- a/src/components/advancedSearch/TagMode.vue
+++ b/src/components/advancedSearch/TagMode.vue
@@ -657,26 +657,3 @@ export default {
  }
 }
 </script>
-
-<style lang="scss">
-.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;
-}
-.el-popover.my-popper-class {
-  padding: 8px 4px 0 12px !important;
-}
-</style>
--- a/src/components/advancedSearch/TextMode.vue
+++ b/src/components/advancedSearch/TextMode.vue
@@ -247,40 +247,3 @@ export default {
  }
 }
 </script>
-
-<style lang="scss">
-.search__suffix-close {
-  height: 40px;
-  line-height: 40px;
-  margin-top: -9px;
-
-  .el-icon-error {
-    font-size: 17px;
-    color: #C4C4C4;
-    margin-right: 12px;
-    cursor: pointer;
-  }
-}
-
-.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;
-  }
-}
-.entity-explorer-search {
-  color: #3976CB;
-  margin-top: -2px;
-}
-.margin-r-12 {
-  margin-right: 12px;
-}
-</style>
--- 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)
            })
          }
        })
--- a/src/views/entityExplorer/entityList/detailOverview/App.vue
+++ b/src/views/entityExplorer/entityList/detailOverview/App.vue
@@ -98,12 +98,10 @@
          <div v-if="relationshipDataOne.length===0 && !loadingRelationshipOne">-</div>

          <div v-if="relationshipShowOne">
-            <el-popover popper-class="entity-detail__popover" placement="right-end" trigger="click" show-arrow="false" offset="20">
-              <template #reference>
-                <div class="data-item show-more-related">...</div>
-              </template>
-              <div v-for="(item, index) in relationshipDataOne" :key="index">{{item.value}}</div>
-            </el-popover>
+            <div class="data-item show-more-related" id="related-app-more" @click.stop="showMoreApp" style="position: relative">...</div>
+            <div v-if="isShowMoreApp" class="app-popover_block" id="showRelatedApp">
+              <div class="popover-content" v-for="(item, index) in relationshipDataOne" :key="index">{{item.value}}</div>
+            </div>
          </div>
        </div>
      </div>
@@ -122,12 +120,10 @@
          <div v-if="relationshipDataTwo.length===0 && !loadingRelationshipTwo">-</div>

          <div v-if="relationshipShowTwo">
-            <el-popover popper-class="entity-detail__popover" class="entity-expand-detail" placement="right-end" trigger="click" show-arrow="false" offset="20">
-              <template #reference>
-                <div class="data-item show-more-related">...</div>
-              </template>
+            <div class="data-item show-more-related" id="related-domain-more" @click.stop="showMoreDomain" style="position: relative">...</div>
+            <div v-if="isShowMoreDomain" class="domain-popover_block" id="showRelatedDomain">
              <div v-for="(item, index) in relationshipDataTwo" :key="index">{{item.value}}</div>
-            </el-popover>
+            </div>
          </div>
        </div>
      </div>
--- a/src/views/entityExplorer/entityList/detailOverview/Domain.vue
+++ b/src/views/entityExplorer/entityList/detailOverview/Domain.vue
@@ -106,12 +106,10 @@
          <div v-if="relationshipDataOne.length===0 && !loadingRelationshipOne">-</div>

          <div v-if="relationshipShowOne">
-            <el-popover popper-class="entity-detail__popover" placement="right-end" trigger="click" show-arrow="false" offset="20">
-              <template #reference>
-                <div class="data-item show-more-related">...</div>
-              </template>
-              <div v-for="(item, index) in relationshipDataOne" :key="index">{{item.value}}</div>
-            </el-popover>
+            <div class="data-item show-more-related" id="related-app-more" @click.stop="showMoreApp" style="position: relative">...</div>
+            <div v-if="isShowMoreApp" class="app-popover_block" id="showRelatedApp">
+              <div class="popover-content" v-for="(item, index) in relationshipDataOne" :key="index">{{item.value}}</div>
+            </div>
          </div>
        </div>
      </div>
@@ -128,12 +126,10 @@
          <div v-if="relationshipDataTwo.length===0 && !loadingRelationshipTwo">-</div>

          <div v-if="relationshipShowTwo">
-            <el-popover popper-class="entity-detail__popover" class="entity-expand-detail" placement="right-end" trigger="click" show-arrow="false" offset="20">
-              <template #reference>
-                <div class="data-item show-more-related">...</div>
-              </template>
+            <div class="data-item show-more-related" id="related-domain-more" @click.stop="showMoreDomain" style="position: relative">...</div>
+            <div v-if="isShowMoreDomain" class="domain-popover_block" id="showRelatedDomain">
              <div v-for="(item, index) in relationshipDataTwo" :key="index">{{item.value}}</div>
-            </el-popover>
+            </div>
          </div>
        </div>
      </div>
--- a/src/views/entityExplorer/entityList/detailOverview/Ip.vue
+++ b/src/views/entityExplorer/entityList/detailOverview/Ip.vue
@@ -137,12 +137,10 @@
          <div v-if="relationshipDataOne.length===0 && !loadingRelationshipOne">-</div>

          <div v-if="relationshipShowOne">
-            <el-popover popper-class="entity-detail__popover" tabindex="1" class="test-popover" placement="right-end" trigger="click" show-arrow="false" offset="20">
-              <template #reference>
-                <div class="data-item show-more-related">...</div>
-              </template>
+            <div class="data-item show-more-related" id="related-app-more" @click.stop="showMoreApp" style="position: relative">...</div>
+            <div v-if="isShowMoreApp" class="app-popover_block" id="showRelatedApp">
              <div class="popover-content" v-for="(item, index) in relationshipDataOne" :key="index">{{item.value}}</div>
-            </el-popover>
+            </div>
          </div>
        </div>
      </div>
@@ -160,12 +158,10 @@
          <div v-if="relationshipDataTwo.length===0 && !loadingRelationshipTwo">-</div>

          <div v-if="relationshipShowTwo">
-            <el-popover popper-class="entity-detail__popover" class="entity-expand-detail" placement="right-end" trigger="click" show-arrow="false" offset="20">
-              <template #reference>
-                <div class="data-item show-more-related">...</div>
-              </template>
+            <div class="data-item show-more-related" id="related-domain-more" @click.stop="showMoreDomain" style="position: relative">...</div>
+            <div v-if="isShowMoreDomain" class="domain-popover_block" id="showRelatedDomain">
              <div v-for="(item, index) in relationshipDataTwo" :key="index">{{item.value}}</div>
-            </el-popover>
+            </div>
          </div>
        </div>
      </div>
@@ -484,97 +480,3 @@ export default {
  }
 }
 </script>
-
-<style lang="scss">
-  .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;
-  }
-}
-</style>
--- 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 () {