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

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>

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>

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>

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 () {