fix: 调整实体详情基础信息图表样式

src/assets/css/components/views/charts2/entityDetailBasicInfo.scss

@@ -68,11 +68,9 @@
   border-radius: 4px;
 
   .dividing-line {
-    position: absolute;
-    top: 159px;
-    left: 30px;
     height: 1px;
     width: calc(100% - 60px);
+    margin-top: 21px;
     background-color: #EFF2F5;
   }
   .entity-type {
@@ -134,10 +132,13 @@
   }
   .entity-tags {
     display: flex;
+    flex-wrap: wrap;
     align-items: center;
-    height: 60px;
+    margin-top: 16px;
+    margin-bottom: -10px;
 
     .entity-tag {
+      margin-bottom: 10px;
       margin-right: 10px;
 
       &:last-of-type {
@@ -150,7 +151,6 @@
     flex-flow: row wrap;
     align-content: space-around;
     padding: 10px 0;
-    margin-top: 5px;
 
     .detail-card {
       display: flex;

src/views/charts2/ChartList.vue

@@ -70,12 +70,12 @@ export default {
           // 需要额外修正的值
           correctionHeight: 24,
           chartType: typeMapping.networkOverview.appList
-        },
+        }/*,
         {
           selector: '.entity-detail-info',
           correctionHeight: 161,
           chartType: typeMapping.entityDetail.basicInfo
-        }
+        }*/
       ]
     }
   },
@@ -152,6 +152,23 @@ export default {
           }
         }
       })
+    },
+    // 实体详情基础信息的特殊处理：tag动态高度、底部详情动态高度
+    // 顶部padding+entityType+entityName高度94，tag高度实时获取，空隙6，分割线22，底下信息实时获取
+    handleEntityDetailBasicInfoHeight () {
+      const tagsDom = document.querySelector('.entity-tags')
+      const detailInfoDom = document.querySelector('.entity-detail-info')
+      let height = 94 + 6 + 22
+      if (tagsDom) {
+        height += tagsDom.offsetHeight
+      }
+      if (detailInfoDom) {
+        height += detailInfoDom.offsetHeight
+      }
+      const layout = _.cloneDeep(this.layout)
+      const destinationChart = layout.find(c => c.type === typeMapping.entityDetail.basicInfo)
+      destinationChart.h = (height + this.rowMargin) / (this.rowHeight + this.rowMargin)
+      this.layout = layout
     }
   },
   mounted () {
@@ -161,10 +178,13 @@ export default {
     this.handleDynamicChartHeight()
     this.debounceFunc = _.debounce(this.handleDynamicChartHeight, 500)
     window.addEventListener('resize', this.debounceFunc)
+
+    this.emitter.on('entity-detail-hide-tag-area', this.handleEntityDetailBasicInfoHeight)
   },
   beforeUnmount () {
     window.removeEventListener('resize', this.debounceFunc)
     clearTimeout(this.timeoutFunc)
+    this.emitter.off('entity-detail-hide-tag-area')
   }
 }
 </script>

src/views/charts2/charts/entityDetail/EntityDetailBasicInfo.vue

@@ -31,7 +31,7 @@
         </div>
       </el-popover>
     </div>
-    <div class="entity-tags">
+    <div class="entity-tags" v-if="!hideTagArea">
       <div v-for="tag in levelTwoTags" :key="tag.value" class="entity-tag" :class="`entity-tag--level-two-${tag.type}`">{{tag.value}}</div>
     </div>
 <!--    分割线-->
@@ -79,7 +79,8 @@ export default {
     return {
       // type: positive 正面的，绿色；normal 灰色；negative 负面的，红色
       levelTwoTags: [{ value: '安全', type: 'positive' }, { value: '工具', type: 'normal' }, { value: '恶意IP', type: 'negative' }],
-      analysisPopShow: false
+      analysisPopShow: false,
+      hideTagArea: false
     }
   },
   methods: {
@@ -121,6 +122,10 @@ export default {
             if (_.isArray(res.data.userDefinedTags)) {
               this.levelTwoTags = _.concat(this.levelTwoTags, res.data.userDefinedTags.map(tag => ({ value: tag.tagValue, type: 'normal' })))
             }
+            this.hideTagArea = _.isEmpty(this.levelTwoTags)
+            this.$nextTick(() => {
+              this.emitter.emit('entity-detail-hide-tag-area')
+            })
           } else {
             tagError = this.errorMsgHandler(res)
           }
@@ -380,7 +385,7 @@ export default {
       case 'ip': {
         detailCards.value = _.concat(detailCards.value,
           { icon: 'cn-icon cn-icon-as', name: 'asn', label: 'ASN', value: '' },
-          { icon: 'cn-icon cn-icon-registration-agency', name: 'asOrg', label: i18n.global.t('entities.asOrg'), value: '' },
+          { icon: 'cn-icon cn-icon-registry', name: 'asOrg', label: i18n.global.t('entities.asOrg'), value: '' },
           // { icon: 'cn-icon cn-icon-as-subnet', name: 'asSubnet', label: i18n.global.t('entities.asSubnet'), value: '' },
           { icon: 'cn-icon cn-icon-operator', name: 'isp', label: 'ISP', value: '' },
           { icon: 'cn-icon cn-icon-geo-location', name: 'location', label: i18n.global.t('entities.geographicLocation'), value: '' }