CN-1087 fix: 代码整理，修复一些问题

src/components/layout/Header.vue

@@ -391,7 +391,9 @@ export default {
         this.dnsRcodeMapData = await getDnsMapData('dnsRcode')
       }
     }
-    this.initDropdownList()
+    if (this.$route.path.indexOf('panel') > -1) {
+      await this.initDropdownList()
+    }
   },
   setup () {
     const { query } = useRoute()
@@ -435,6 +437,23 @@ export default {
           type: entityDetailMenu.type
         })
         return true
+      } else if (this.route === '/entityGraph') {
+        const entityMenu = menus.find(m => m.route === '/entityExplorer')
+        const entityGraphMenu = menus.find(m => m.route === '/entityGraph')
+        console.info(entityGraphMenu)
+        breadcrumb.push({
+          code: entityMenu.code,
+          value: entityMenu.i18n ? this.$t(entityMenu.i18n) : entityMenu.name,
+          route: entityMenu.route,
+          type: entityMenu.type
+        })
+        breadcrumb.push({
+          code: entityGraphMenu.code,
+          value: entityGraphMenu.i18n ? this.$t(entityGraphMenu.i18n) : entityGraphMenu.name,
+          route: entityGraphMenu.route,
+          type: entityGraphMenu.type
+        })
+        return true
       }
       const menu = menus.find(m => m.route === this.route)
       if (menu) {

src/router/index.js

@@ -29,7 +29,7 @@ const routes = [
       },
       {
         path: '/entityGraph',
-        component: () => import('@/views/entityExplorer/EntityGraph2')
+        component: () => import('@/views/entityExplorer/EntityGraph')
       },
       {
         path: '/detection',

src/views/entityExplorer/entityGraph/GraphEntityDetail.vue

@@ -124,14 +124,6 @@ export default {
     }
   },
   computed: {
-    appRisk () {
-      return function (level) {
-        const m = riskLevelMapping.find(mapping => {
-          return mapping.value == level
-        })
-        return (m && m.name) || level
-      }
-    },
     iconClass () {
       let className
       switch (_.get(this.node, 'myData.entityType', '')) {
@@ -230,6 +222,12 @@ export default {
       this.showError = true
       this.errorMsg = this.errorMsgHandler(e)
     },
+    appRisk (level) {
+      const m = riskLevelMapping.find(mapping => {
+        return mapping.value == level
+      })
+      return (m && m.name) || level
+    },
     location (detailData) {
       let location = ''
       if (detailData) {
@@ -292,12 +290,12 @@ export default {
             {
               name: 'categoryName',
               label: this.$t('entities.category'),
-              value: _.get(n.myData, 'basicInfo.category.name', '-')
+              value: _.get(n.myData, 'basicInfo.category.categoryName', '-')
             },
             {
               name: 'categoryGroup',
               label: this.$t('entities.group'),
-              value: _.get(n.myData, 'basicInfo.category.group', '-')
+              value: _.get(n.myData, 'basicInfo.category.categoryGroup', '-')
             },
             {
               name: 'reputationLevel',
@@ -365,32 +363,32 @@ export default {
             {
               name: 'appCategory',
               label: this.$t('entities.category'),
-              value: _.get(n.myData, 'detail.category.appCategory', '-')
+              value: _.get(n.myData, 'basicInfo.category.appCategory', '-')
             },
             {
               name: 'appSubcategory',
               label: this.$t('entities.subcategory'),
-              value: _.get(n.myData, 'detail.category.appSubcategory', '-')
+              value: _.get(n.myData, 'basicInfo.category.appSubcategory', '-')
             },
             {
               name: 'appRisk',
               label: this.$t('entities.riskLevel'),
-              value: _.get(n.myData, 'detail.category.appRisk', '-')
+              value: this.appRisk(_.get(n.myData, 'basicInfo.category.appRisk', '-'))
             },
             {
               name: 'appTechnology',
               label: this.$t('overall.technology'),
-              value: _.get(n.myData, 'detail.category.appTechnology', '-')
+              value: _.get(n.myData, 'basicInfo.category.appTechnology', '-')
             },
             {
               name: 'appLongname',
               label: this.$t('overall.appFullName'),
-              value: _.get(n.myData, 'detail.category.appLongname', '-')
+              value: _.get(n.myData, 'basicInfo.category.appLongname', '-')
             },
             {
               name: 'appDescription',
               label: this.$t('config.dataSource.description'),
-              value: _.get(n.myData, 'detail.category.appDescription', '-')
+              value: _.get(n.myData, 'basicInfo.category.appDescription', '-')
             }
           ]
 

src/views/entityExplorer/entityGraphDetail/AppList.vue

@@ -1,119 +0,0 @@
-<template>
-  <div>
-    <loading :loading="entity.loading" size="small"></loading>
-    <div class="graph-list-header">
-      <div>
-        <div class="graph-list-header-title">
-          <i class="graph-list-header-icon cn-icon cn-icon-app-name"></i>
-          <span>{{ $t('entities.tab.relatedApp') }}</span>
-        </div>
-        <div class="graph-list-header-number">
-          {{ $t('entity.graph.associatedCount') }}:&nbsp;<span>{{entity.count}}</span>
-        </div>
-      </div>
-
-      <i class="cn-icon cn-icon-close graph-close" @click="closeBlock"></i>
-    </div>
-    <div class="graph-list-expand-btn-block">
-      <div class="graph-list-expand-btn" :class="{ 'graph-list-expand-btn--disabled': expandBtnDisable }" style="display: inline-flex;" @click="expandList">
-        <i class="cn-icon cn-icon-expand-continue graph-expand-continue"></i>
-        {{ $t('entity.graph.continueToExpand') }}
-      </div>
-    </div>
-    <div>
-      <div class="digital-certificate">
-        <div class="digital-certificate-header padding-b-12">
-          <div class="digital-certificate-header__icon graph-header__icon"></div>
-          <div class="graph-list-content-header ">
-            {{ $t('entity.graph.expandedEntityCount') }}:&nbsp;&nbsp;
-            <span>{{ entity.listData ? entity.listData.length : 0 }}</span>
-          </div>
-        </div>
-
-        <div class="graph-list-content">
-          <div v-for="(item, index) in entity.listData" :key="index" @mouseenter="onMouseenter(item)">
-            <div class="graph-list-item-ip" @click="expandDetail">{{ item.vertex }}</div>
-            <div class="graph-list-item-block">
-              <div class="graph-list-item__app">
-                <div class="graph-list-item-label__app">APP ID:</div>
-                <div class="graph-list-item-value">{{ $_.get(item.detail, 'category.appId', '-') }}</div>
-              </div>
-              <div class="graph-list-item__app">
-                <div class="graph-list-item-label__app">{{$t('entities.category')}}:</div>
-                <div class="graph-list-item-value">{{ $_.get(item.detail, 'category.appCategory', '-') }}</div>
-              </div>
-              <div class="graph-list-item__app">
-                <div class="graph-list-item-label__app">{{$t('entities.subcategory')}}:</div>
-                <div class="graph-list-item-value">{{ $_.get(item.detail, 'category.appSubcategory', '-') }}</div>
-              </div>
-              <div class="graph-list-item__app">
-                <div class="graph-list-item-label__app">{{$t('entities.riskLevel')}}:</div>
-                <div class="graph-list-item-value">{{ appRisk($_.get(item.detail, 'category.appRisk', '-')) }}</div>
-              </div>
-              <div class="graph-list-item__app">
-                <div class="graph-list-item-label__app">{{$t('config.dataSource.description')}}:</div>
-                <div class="graph-list-item-value">{{ $_.get(item.detail, 'category.appDescription', '-') }}</div>
-              </div>
-            </div>
-            <div class="graph-list-dividing-line" v-if="index !== entity.listData.length - 1"></div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { riskLevelMapping } from '@/utils/constants'
-import Loading from '@/components/common/Loading'
-import { scrollToTop } from '@/utils/tools'
-export default {
-  name: 'AppList',
-  props: {
-    entity: {
-      type: Object
-    }
-  },
-  components: {
-    Loading
-  },
-  computed: {
-    appRisk () {
-      return function (level) {
-        const m = riskLevelMapping.find(mapping => {
-          return mapping.value == level
-        })
-        return (m && m.name) || level
-      }
-    },
-    expandBtnDisable () {
-      return !((this.entity.listData ? this.entity.listData.length : 0) < this.entity.count && this.entity.count > 10 && (this.entity.listData && this.entity.listData.length < 50))
-    }
-  },
-  methods: {
-    closeBlock () {
-      this.$emit('closeBlock')
-    },
-    expandDetail () {
-      if (this.entity.entityType === 'app') {
-        this.$emit('expandDetail', 'appDetail')
-      } else if (this.entity.entityType === 'domain') {
-        this.$emit('expandDetail', 'domainDetail')
-      }
-    },
-    onMouseenter (val) {
-      // 鼠标移动过graph列表名称时，graph图的分支图形会变大一点
-      this.$emit('mouseenter', val)
-    },
-    expandList () {
-      // 继续拓展ip列表，传递信息，调用接口
-      this.$emit('expandList', this.entity.sourceName, this.entity.nodeId)
-    }
-  },
-  mounted () {
-    this.$nextTick(() => {
-      scrollToTop()
-    })
-  }
-}
-</script>

src/views/entityExplorer/entityGraphDetail/DomainList.vue

@@ -1,115 +0,0 @@
-<template>
-  <div>
-    <loading :loading="entity.loading" size="small"></loading>
-    <div class="graph-list-header">
-      <div>
-        <div class="graph-list-header-title">
-          <i class="graph-list-header-icon cn-icon cn-icon-subdomain"></i>
-          <span>{{ entity.isSubdomain ? $t('entities.subdomain') : (entity.sourceType === 'ip' ? $t('entity.graph.resolveDomain') : $t('entities.relatedDomain')) }}</span>
-        </div>
-        <div class="graph-list-header-number">
-          {{ $t('entity.graph.associatedCount') }}:&nbsp;<span>{{entity.count}}</span>
-        </div>
-      </div>
-
-      <i class="cn-icon cn-icon-close graph-close" @click="closeBlock"></i>
-    </div>
-    <div class="graph-list-expand-btn-block">
-      <div class="graph-list-expand-btn" :class="{ 'graph-list-expand-btn--disabled': expandBtnDisable }" style="display: inline-flex;" @click="expandList">
-        <i class="cn-icon cn-icon-expand-continue graph-expand-continue"></i>
-        {{ $t('entity.graph.continueToExpand') }}
-      </div>
-    </div>
-    <div>
-      <div class="digital-certificate">
-        <div class="digital-certificate-header padding-b-12">
-          <div class="digital-certificate-header__icon graph-header__icon"></div>
-          <div class="graph-list-content-header ">
-            {{ $t('entity.graph.expandedEntityCount') }}:&nbsp;&nbsp;
-            <span>{{ entity.listData ? entity.listData.length : 0 }}</span>
-          </div>
-        </div>
-
-        <div class="graph-list-content">
-          <div v-for="(item, index) in entity.listData" :key="index" @mouseenter="onMouseenter(item)">
-            <div class="graph-list-item-ip" @click="expandDetail">{{ item.vertex }}</div>
-            <div class="graph-list-item-block">
-              <div class="graph-list-item__app">
-                <div class="graph-list-item-label__app">{{$t('entities.category')}}:</div>
-                <div class="graph-list-item-value">{{ $_.get(item.detail, 'category.name', '-') }}</div>
-              </div>
-              <div class="graph-list-item__app">
-                <div class="graph-list-item-label__app">{{$t('entities.group')}}:</div>
-                <div class="graph-list-item-value">{{ $_.get(item.detail, 'category.group', '-') }}</div>
-              </div>
-              <div class="graph-list-item__app">
-                <div class="graph-list-item-label__app">{{$t('entities.registration')}}:</div>
-                <div class="graph-list-item-value">{{ $_.get(item.detail, 'whois.registrantCountry', '-') }}</div>
-              </div>
-              <div class="graph-list-item__app">
-                <div class="graph-list-item-label__app">{{$t('entities.registry')}}:</div>
-                <div class="graph-list-item-value">{{ $_.get(item.detail, 'whois.registrantOrg', '-') }}</div>
-              </div>
-            </div>
-            <div class="graph-list-dividing-line" v-if="index !== entity.listData.length - 1"></div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { riskLevelMapping } from '@/utils/constants'
-import Loading from '@/components/common/Loading'
-import { scrollToTop } from '@/utils/tools'
-export default {
-  name: 'DomainList',
-  props: {
-    entity: {
-      type: Object
-    }
-  },
-  components: {
-    Loading
-  },
-  computed: {
-    appRisk () {
-      return function (level) {
-        const m = riskLevelMapping.find(mapping => {
-          return mapping.value == level
-        })
-        return (m && m.name) || level
-      }
-    },
-    expandBtnDisable () {
-      return !((this.entity.listData ? this.entity.listData.length : 0) < this.entity.count && this.entity.count > 10 && (this.entity.listData && this.entity.listData.length < 50))
-    }
-  },
-  methods: {
-    closeBlock () {
-      this.$emit('closeBlock')
-    },
-    expandDetail () {
-      if (this.entity.entityType === 'app') {
-        this.$emit('expandDetail', 'appDetail')
-      } else if (this.entity.entityType === 'domain') {
-        this.$emit('expandDetail', 'domainDetail')
-      }
-    },
-    onMouseenter (val) {
-      // 鼠标移动过graph列表名称时，graph图的分支图形会变大一点
-      this.$emit('mouseenter', val)
-    },
-    expandList () {
-      // 继续拓展ip列表，传递信息，调用接口
-      this.$emit('expandList', this.entity.sourceName, this.entity.nodeId)
-    }
-  },
-  mounted () {
-    this.$nextTick(() => {
-      scrollToTop()
-    })
-  }
-}
-</script>

src/views/entityExplorer/entityGraphDetail/GraphDetail.vue

@@ -1,493 +0,0 @@
-<template>
-  <!--title-->
-  <div class="graph-detail-basic-info">
-    <div style="display: flex">
-      <div class="graph-detail__icon"><i :class="iconClass"></i></div>
-
-      <div class="graph-detail-header">
-        <div class="entity-graph-type">{{ entityType[entity.type || entity.entityType] }}</div>
-        <div class="graph-basic-info">
-          <div class="graph-basic-info-name__block">
-            <div class="graph-basic-info-name" :title="$_.get(entity, 'detailData.vertex', '')" id="entityName">{{ $_.get(entity, 'detailData.vertex', '') }}</div>
-            <div class="graph-basic-info-icon" @click="copyEntityName">
-              <i class="cn-icon cn-icon-copy"></i>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <i class="cn-icon cn-icon-close graph-close" @click="closeBlock"></i>
-  </div>
-
-  <!--basic info-->
-  <div class="digital-certificate graph-basic-info__block">
-    <div class="digital-certificate-header padding-b-10">
-      <div class="digital-certificate-header__icon graph-header__icon"></div>
-      <div class="graph-basic-info__block-title">
-        {{ $t('overall.basicInfo') }}
-      </div>
-    </div>
-
-    <div class="graph-basic-info__block-content">
-      <template v-if="entity.type === 'ip'">
-        <div class="graph-content-item" >
-          <div class="graph-content-item-label">{{ $t('entities.asNumber') }}:</div>
-          <div class="graph-content-item-value">{{ $_.get(entity.detailData, 'detail.asn.asn', '-') }}</div>
-        </div>
-        <div class="graph-content-item" >
-          <div class="graph-content-item-label">{{ $t('entities.asOrg') }}:</div>
-          <div class="graph-content-item-value">{{ $_.get(entity.detailData, 'detail.asn.organization', '-') }}</div>
-        </div>
-        <div class="graph-content-item" >
-          <div class="graph-content-item-label">{{ $t('entities.graph.isp') }}:</div>
-          <div class="graph-content-item-value">{{ $_.get(entity.detailData, 'detail.location.isp', '-') }}</div>
-        </div>
-        <div class="graph-content-item" >
-          <div class="graph-content-item-label">{{ $t('overall.location') }}:</div>
-          <div class="graph-content-item-value">{{ location(entity.detailData) }}</div>
-        </div>
-      </template>
-      <template v-else-if="entity.type === 'domain'">
-        <div class="graph-content-item" >
-          <div class="graph-content-item-label">{{ $t('entities.category') }}:</div>
-          <div class="graph-content-item-value">{{ $_.get(entity, 'detailData.detail.category.name', '-') }}</div>
-        </div>
-        <div class="graph-content-item" >
-          <div class="graph-content-item-label">{{ $t('entities.group') }}:</div>
-          <div class="graph-content-item-value">{{ $_.get(entity, 'detailData.detail.category.group', '-') }}</div>
-        </div>
-        <div class="graph-content-item" >
-          <div class="graph-content-item-label">{{ $t('entities.creditLevel2') }}:</div>
-          <div class="graph-content-item-value">{{ $_.get(entity, 'detailData.detail.category.reputationLevel', '-') }}</div>
-        </div>
-        <div class="graph-content-item" >
-          <div class="graph-content-item-label">{{ $t('entities.graph.expirationDate') }}:</div>
-          <div class="graph-content-item-value">{{ handleDate('detailData.detail.whois.expireDate') }}</div>
-        </div>
-        <div class="graph-content-item" >
-          <div class="graph-content-item-label">{{ $t('entities.registrar') }}:</div>
-          <div class="graph-content-item-value">{{ $_.get(entity, 'detailData.detail.whois.registrarName', '-') }}</div>
-        </div>
-        <div class="graph-content-item" >
-          <div class="graph-content-item-label">{{ $t('entities.registry') }}:</div>
-          <div class="graph-content-item-value">{{ $_.get(entity, 'detailData.detail.whois.registrantOrg', '-') }}</div>
-        </div>
-        <div class="graph-content-item" >
-          <div class="graph-content-item-label">{{ $t('entities.registrationCountry') }}:</div>
-          <div class="graph-content-item-value">{{ $_.get(entity, 'detailData.detail.whois.registrantCountry', '-') }}</div>
-        </div>
-        <div class="graph-content-item" >
-          <div class="graph-content-item-label">{{ $t('entities.registrationDate') }}:</div>
-          <div class="graph-content-item-value">{{ handleDate('detailData.detail.whois.createDate') }}</div>
-        </div>
-        <div class="graph-content-item" >
-          <div class="graph-content-item-label">{{ $t('entities.registryEmail') }}:</div>
-          <div class="graph-content-item-value">{{ $_.get(entity, 'detailData.detail.whois.email', '-') }}</div>
-        </div>
-      </template>
-      <template v-else-if="entity.type === 'app'">
-        <div class="graph-content-item" >
-          <div class="graph-content-item-label">{{ $t('entities.category') }}:</div>
-          <div class="graph-content-item-value">{{ $_.get(entity, 'detailData.detail.category.appCategory', '-') }}</div>
-        </div>
-        <div class="graph-content-item" >
-          <div class="graph-content-item-label">{{ $t('entities.subcategory') }}:</div>
-          <div class="graph-content-item-value">{{ $_.get(entity, 'detailData.detail.category.appSubcategory', '-') }}</div>
-        </div>
-        <div class="graph-content-item" >
-          <div class="graph-content-item-label">{{ $t('entities.riskLevel') }}:</div>
-          <div class="graph-content-item-value">{{ appRisk($_.get(entity, 'detailData.detail.category.appRisk', '-')) }}</div>
-        </div>
-        <div class="graph-content-item" >
-          <div class="graph-content-item-label">{{ $t('overall.technology') }}:</div>
-          <div class="graph-content-item-value">{{ $_.get(entity, 'detailData.detail.category.appTechnology', '-') }}</div>
-        </div>
-        <div class="graph-content-item" >
-          <div class="graph-content-item-label">{{ $t('overall.appFullName') }}:</div>
-          <div class="graph-content-item-value">{{ $_.get(entity, 'detailData.detail.category.appLongname', '-') }}</div>
-        </div>
-        <div class="graph-content-item" >
-          <div class="graph-content-item-label">{{ $t('config.dataSource.description') }}:</div>
-          <div class="graph-content-item-value">{{ $_.get(entity, 'detailData.detail.category.appDescription', '-') }}</div>
-        </div>
-      </template>
-    </div>
-  </div>
-
-  <!--关系拓展-->
-  <div class="digital-certificate graph-basic-info__block">
-    <loading :loading="entity.loading" size="small"></loading>
-    <div class="digital-certificate-header padding-b-10">
-      <div class="digital-certificate-header__icon graph-header__icon"></div>
-      <div class="graph-basic-info__block-title">
-        {{ $t('entity.graph.relationshipExpansion') }}
-      </div>
-    </div>
-
-    <div class="graph-basic-info__block-content" style="margin-top: -4px;">
-      <div v-for="item in relationList" :key="item.name">
-        <div class="graph-content-item graph-content-relationship-item" v-if="item.value === item.total">
-          <div class="graph-relationship-item-label">
-            <i class="margin-r-6" :class="item.icon"></i>
-            <span>{{ item.label }}：</span>
-          </div>
-          <div class="graph-relationship-item-value">
-            <span class="margin-r-6">{{ item.value }}/{{ item.total }}</span>
-            <i class="cn-icon cn-icon-expand-relationship" :style="{color: iconColor(item.value, item.total)}"></i>
-          </div>
-        </div>
-
-        <div v-else class="graph-content-item graph-content-relationship-item">
-          <div class="graph-relationship-item-label">
-            <i class="graph-relationship-item-label-icon margin-r-6" :class="item.icon"></i>
-            <span>{{ item.label }}：</span>
-          </div>
-          <div class="graph-relationship-item-value">
-            <span class="margin-r-6">{{ item.value }}/{{ item.total }}</span>
-            <i class="cn-icon cn-icon-expand-relationship graph-expand-relationship__icon" :style="{color: iconColor(item.value, item.total)}" @click="expandRelation(item.name)"></i>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <!--标签-->
-  <div v-if="entity.tags && entity.tags.length > 1" class="digital-certificate graph-basic-info__block">
-    <div class="digital-certificate-header padding-b-10">
-      <div class="digital-certificate-header__icon graph-header__icon"></div>
-      <div class="graph-basic-info__block-title">
-        {{ $t('entity.graph.tags') }}
-      </div>
-    </div>
-
-    <div class="entity-detail graph-basic-info__block-content">
-      <div class="graph-tag-list">
-        <div v-for="ic in entity.tags" :key="ic.value">
-          <div class="entity-tag graph-tag-item" :class="`entity-tag--level-two-${ic.type}`">
-            <span>{{ic.value}}</span>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { copySelectionText, selectElementText } from '@/utils/tools'
-import { entityType, riskLevelMapping } from '@/utils/constants'
-import chartMixin from '@/views/charts2/chart-mixin'
-import { dateFormatByAppearance } from '@/utils/date-util'
-import { ref } from 'vue'
-import _ from 'lodash'
-import Loading from '@/components/common/Loading'
-
-export default {
-  name: 'DomainDetail',
-  props: {
-    entity: {
-      type: Object
-    }
-  },
-  mixins: [chartMixin],
-  components: {
-    Loading
-  },
-  data () {
-    return {
-      entityType
-    }
-  },
-  computed: {
-    appRisk () {
-      return function (level) {
-        const m = riskLevelMapping.find(mapping => {
-          return mapping.value == level
-        })
-        return (m && m.name) || level
-      }
-    },
-    iconClass () {
-      let className
-      switch (this.entity.type) {
-        case ('ip'): {
-          className = 'cn-icon cn-icon-ip2'
-          break
-        }
-        case ('domain'): {
-          className = 'cn-icon cn-icon-domain2'
-          break
-        }
-        case ('app'): {
-          className = 'cn-icon cn-icon-app2'
-          break
-        }
-        default:
-          break
-      }
-      return className
-    },
-    handleDate () {
-      return function (key) {
-        const date = _.get(this.entity, key, '')
-        return date ? dateFormatByAppearance(date) : '-'
-      }
-    }
-  },
-  watch: {
-    entity: {
-      deep: true,
-      handler (n) {
-        this.handleDetailData(n)
-      }
-    }
-  },
-  mounted () {
-    this.handleDetailData(this.entity)
-  },
-  setup (props) {
-    const detailCards = ref([])
-    const relationList = ref([])
-    const tagList = ref([])
-
-    return {
-      detailCards,
-      relationList,
-      tagList
-    }
-  },
-  methods: {
-    /** 复制实体名称 */
-    copyEntityName () {
-      selectElementText(document.getElementById('entityName'))
-      if (copySelectionText()) {
-        this.$message.success(this.$t('tip.copySuccess'))
-      } else {
-        this.$message.error('Unknown error')
-      }
-    },
-    /** 修改关系拓展图标颜色，全部拓展浅灰色，否则深灰色 */
-    iconColor (length, total) {
-      if (length < total) {
-        if (length === 50) {
-          return 'rgba(57, 57, 57, 0.5)'
-        } else {
-          return 'rgba(57, 57, 57, 1)'
-        }
-      } else {
-        return 'rgba(57, 57, 57, 0.5)'
-      }
-    },
-    // 关闭右侧详情栏
-    closeBlock () {
-      this.$emit('closeBlock')
-    },
-    /** 构造地址，国-省市-市 */
-    handleLocation (data) {
-      const location = []
-      if (data.country) {
-        location.push(data.country)
-      }
-      if (data.province) {
-        location.push(data.province)
-      }
-      if (data.city) {
-        location.push(data.city)
-      }
-      return location.join(' - ')
-    },
-    /** 关系拓展 */
-    expandRelation (name) {
-      this.$emit('expandDetailList', name === 'subDomain' ? 'domain' : name, this.entity.name)
-    },
-    httpError (e) {
-      this.isNoData = false
-      this.showError = true
-      this.errorMsg = this.errorMsgHandler(e)
-    },
-    location (detailData) {
-      let location = ''
-      if (detailData) {
-        const data = detailData.detail
-        if (data) {
-          if (data.city) {
-            location = data.city
-          }
-          if (data.province) {
-            location = location ? `${data.province}, ${location}` : data.province
-          }
-          if (data.country) {
-            location = location ? `${data.country}, ${location}` : data.country
-          }
-        }
-      }
-      return location || '-'
-    },
-    handleDetailData (entity) {
-      const n = entity
-      const type = n.type || n.entityType
-      switch (type) {
-        case 'ip': {
-          this.detailCards = [
-            { name: 'asn', label: this.$t('entities.asNumber'), value: _.get(n.detailData, 'detail.asn.asn', '-') },
-            {
-              name: 'asOrg',
-              label: this.$t('entities.asOrg'),
-              value: _.get(n.detailData, 'detail.asn.organization', '-')
-            },
-            {
-              name: 'isp',
-              label: this.$t('entities.graph.isp'),
-              value: _.get(n.detailData, 'detail.location.isp', '-')
-            },
-            { name: 'location', label: this.$t('overall.location'), value: this.location(n.detailData) }
-          ]
-          this.relationList = [
-            {
-              icon: 'cn-icon cn-icon-subdomain',
-              name: 'domain',
-              label: this.$t('entity.graph.resolveDomain'),
-              value: _.get(n.relatedEntityCount, 'domain.current', '0') || 0,
-              total: _.get(n.relatedEntityCount, 'domain.total', '0') || 0
-            },
-            {
-              icon: 'cn-icon cn-icon-app-name',
-              name: 'app',
-              label: this.$t('entities.tab.relatedApp'),
-              value: _.get(n.relatedEntityCount, 'app.current', '0') || 0,
-              total: _.get(n.relatedEntityCount, 'app.total', '0') || 0
-            }
-          ]
-          break
-        }
-        case 'domain': {
-          const expireDate = _.get(n.detailData, 'detail.whois.expireDate', '')
-          const createDate = _.get(n.detailData, 'detail.whois.createDate', '')
-          this.detailCards = [
-            {
-              name: 'categoryName',
-              label: this.$t('entities.category'),
-              value: _.get(n.detailData, 'detail.category.name', '-')
-            },
-            {
-              name: 'categoryGroup',
-              label: this.$t('entities.group'),
-              value: _.get(n.detailData, 'detail.category.group', '-')
-            },
-            {
-              name: 'reputationLevel',
-              label: this.$t('entities.creditLevel2'),
-              value: _.get(n.detailData, 'detail.category.reputationLevel', '-')
-            },
-            {
-              name: 'expireDate',
-              label: this.$t('entities.graph.expirationDate'),
-              value: expireDate ? dateFormatByAppearance(expireDate) : '-'
-            },
-            {
-              name: 'registrarName',
-              label: this.$t('entities.registrar'),
-              value: _.get(n.detailData, 'detail.whois.registrarName', '-')
-            },
-            {
-              name: 'registrantOrg',
-              label: this.$t('entities.registry'),
-              value: _.get(n.detailData, 'detail.whois.registrantOrg', '-')
-            },
-            {
-              name: 'registrantCountry',
-              label: this.$t('entities.registrationCountry'),
-              value: _.get(n.detailData, 'detail.whois.registrantCountry', '-')
-            },
-            {
-              name: 'createDate',
-              label: this.$t('entities.registrationDate'),
-              value: createDate ? dateFormatByAppearance(createDate) : '-'
-            },
-            {
-              name: 'email',
-              label: this.$t('entities.registryEmail'),
-              value: _.get(n.detailData, 'detail.whois.email', '-')
-            }
-          ]
-          this.relationList = [
-            {
-              icon: 'cn-icon cn-icon-resolve-ip',
-              name: 'ip',
-              label: this.$t('entities.graph.resolveIp'),
-              value: _.get(n.relatedEntityCount, 'ip.current', '0') || 0,
-              total: _.get(n.relatedEntityCount, 'ip.total', '0') || 0
-            },
-            {
-              icon: 'cn-icon cn-icon-subdomain',
-              name: 'subDomain',
-              label: this.$t('entities.subdomain'),
-              value: _.get(n.relatedEntityCount, 'subDomain.current', '0') || 0,
-              total: _.get(n.relatedEntityCount, 'subDomain.total', '0') || 0
-            },
-            {
-              icon: 'cn-icon cn-icon-app-name',
-              name: 'app',
-              label: this.$t('entities.tab.relatedApp'),
-              value: _.get(n.relatedEntityCount, 'app.current', 0) || 0,
-              total: _.get(n.relatedEntityCount, 'app.total', 0) || 0
-            }
-          ]
-          break
-        }
-        case 'app': {
-          this.detailCards = [
-            {
-              name: 'appCategory',
-              label: this.$t('entities.category'),
-              value: _.get(n.detailData, 'detail.category.appCategory', '-')
-            },
-            {
-              name: 'appSubcategory',
-              label: this.$t('entities.subcategory'),
-              value: _.get(n.detailData, 'detail.category.appSubcategory', '-')
-            },
-            {
-              name: 'appRisk',
-              label: this.$t('entities.riskLevel'),
-              value: _.get(n.detailData, 'detail.category.appRisk', '-')
-            },
-            {
-              name: 'appTechnology',
-              label: this.$t('overall.technology'),
-              value: _.get(n.detailData, 'detail.category.appTechnology', '-')
-            },
-            {
-              name: 'appLongname',
-              label: this.$t('overall.appFullName'),
-              value: _.get(n.detailData, 'detail.category.appLongname', '-')
-            },
-            {
-              name: 'appDescription',
-              label: this.$t('config.dataSource.description'),
-              value: _.get(n.detailData, 'detail.category.appDescription', '-')
-            }
-          ]
-
-          this.relationList = [
-            {
-              icon: 'cn-icon cn-icon-resolve-ip',
-              name: 'ip',
-              label: this.$t('entities.tab.relatedIp'),
-              value: _.get(n.relatedEntityCount, 'ip.current', '0') || 0,
-              total: _.get(n.relatedEntityCount, 'ip.total', '0') || 0
-            },
-            {
-              icon: 'cn-icon cn-icon-subdomain',
-              name: 'domain',
-              label: this.$t('entities.graph.relatedDomain'),
-              value: _.get(n.relatedEntityCount, 'domain.current', '0') || 0,
-              total: _.get(n.relatedEntityCount, 'domain.total', '0') || 0
-            }
-          ]
-        }
-      }
-    }
-  }
-}
-</script>

src/views/entityExplorer/entityGraphDetail/IpList.vue

@@ -1,101 +0,0 @@
-<template>
-  <div>
-    <loading :loading="entity.loading" size="small"></loading>
-    <div class="graph-list-header">
-      <div>
-        <div class="graph-list-header-title">
-          <i class="cn-icon cn-icon-resolve-ip graph-list-header-icon"></i>
-          <span>{{ entity.sourceType === 'domain' ? $t('entities.graph.resolveIp') : $t('entities.tab.relatedIp') }}</span>
-        </div>
-        <div class="graph-list-header-number">
-          {{ $t('entity.graph.associatedCount') }}:&nbsp;<span>{{entity.count}}</span>
-        </div>
-      </div>
-
-      <i class="cn-icon cn-icon-close graph-close" @click="closeBlock"></i>
-    </div>
-
-    <div class="graph-list-expand-btn-block">
-      <div class="graph-list-expand-btn" :class="{ 'graph-list-expand-btn--disabled': expandBtnDisable }" style="display: inline-flex;" @click="expandList">
-          <i class="cn-icon cn-icon-expand-continue graph-expand-continue"></i>
-        {{ $t('entity.graph.continueToExpand') }}
-      </div>
-    </div>
-
-    <div>
-      <div class="digital-certificate">
-        <div class="digital-certificate-header padding-b-16">
-          <div class="digital-certificate-header__icon graph-header__icon"></div>
-          <div class="graph-list-content-header ">
-            {{ $t('entity.graph.expandedEntityCount') }}:&nbsp;&nbsp;
-            <span>{{ entity.listData ? entity.listData.length : 0 }}</span>
-          </div>
-        </div>
-
-        <div class="graph-list-content">
-          <div v-for="(item, index) in entity.listData" :key="index" @mouseenter="onMouseenter(item)">
-            <div class="graph-list-item-ip"><span @click="expandDetail">{{ item.vertex }}</span></div>
-            <div class="graph-list-item-block">
-              <div class="graph-list-item padding-b-4">
-                <div class="graph-list-item-label">{{ $t('overall.location') }}:</div>
-                <div class="graph-list-item-value graph-list-item-value1" style="display: flex;align-items: center;">
-<!--                  <img :src="require(`../../../../public/images/flag/${item.flag}.svg`)" class="graph-list-country-flag"/>-->
-                  <span>{{ $_.get(item.detail, 'location.city', '-') }}</span>
-                </div>
-              </div>
-
-              <div class="graph-list-item">
-                <div class="graph-list-item-label">ASN:</div>
-                <div class="graph-list-item-value">{{ $_.get(item.detail, 'asn.asn', '-') }}</div>
-              </div>
-            </div>
-
-            <div class="graph-list-dividing-line" v-if="index !== entity.listData.length - 1"></div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import Loading from '@/components/common/Loading'
-import { scrollToTop } from '@/utils/tools'
-export default {
-  name: 'IpList',
-  props: {
-    entity: {
-      type: Object
-    }
-  },
-  components: {
-    Loading
-  },
-  computed: {
-    expandBtnDisable () {
-      return !((this.entity.listData ? this.entity.listData.length : 0) < this.entity.count && this.entity.count > 10 && (this.entity.listData && this.entity.listData.length < 50))
-    }
-  },
-  methods: {
-    closeBlock () {
-      this.$emit('closeBlock')
-    },
-    expandDetail () {
-      this.$emit('expandDetail', 'ipDetail')
-    },
-    onMouseenter (val) {
-      // 鼠标移动过graph列表名称时，graph图的分支图形会变大一点
-      this.$emit('mouseenter', val)
-    },
-    expandList () {
-      // 继续拓展ip列表，传递信息，调用接口
-      this.$emit('expandList', this.entity.sourceName, this.entity.nodeId)
-    }
-  },
-  mounted () {
-    this.$nextTick(() => {
-      scrollToTop()
-    })
-  }
-}
-</script>