fix: 实体列表、列表下拉详情、实体关系添加国旗

src/views/entityExplorer/EntityExplorer.vue

@@ -25,7 +25,7 @@
           :time-filter="timeFilter"
           @filter="filter"
       ></entity-filter>
-      <div class="explorer-container" style="height: calc(100% - 62px);flex-direction: column;width: 100%;">
+      <div class="explorer-container explorer-container-new">
         <explorer-search
             ref="search"
             :class="{'explorer-search--show-list': showList}"
@@ -662,9 +662,9 @@ export default {
           if (item.code === 200 && item.data.list) {
             this.newFilterData[index].data = []
             item.data.list.forEach(item => {
-              const obj = { label: item.value, flag: '011-china', topColumn: 'Country', value: item.uniqueEntities }
+              const obj = { label: item.value, topColumn: 'Country', value: item.uniqueEntities }
               if (index === 0) {
-                obj.flag = item.uniqueEntities // 接口字段名称为'China'，目前svg名称为'011-china'，后续再指定方案调整
+                obj.flag = item.value // 接口字段名称为'China'，svg名称为'CN'，通过countryNameIdMapping进行转换
               }
               if (index === 1) {
                 obj.topColumn = 'City'

src/views/entityExplorer/EntityFilter.vue

@@ -15,11 +15,11 @@
 
             <div class="filter__body-item" v-for="(data, i) in item.data" :key="i" @click="filter(data.label, data)">
               <div class="filter__body-item-left">
-                <!--当前无更好方案匹配国旗，后续解决-->
-                <!--<div v-if="data.flag">-->
-                <!--  <img :src="require(`../../../public/images/flag/${data.flag}.svg`)" class="filter-country-flag"/>-->
-                <!--</div>-->
-                <div class="filter__body-item-left-index">{{ i+1 }}</div>
+                <div v-if="data.flag">
+                  <img v-if="data.flag===countryNameIdMapping.Unknown || !countryNameIdMapping[data.flag]" src="../../../public/images/flag/Unknown.svg" class="filter-country-flag">
+                  <img v-else :src="require(`../../../public/images/flag/${countryNameIdMapping[data.flag]}.png`)" class="filter-country-flag"/>
+                </div>
+                <div v-else class="filter__body-item-left-index">{{ i+1 }}</div>
                 <div class="filter__body-item-left-label">
                   <el-tooltip :content="data.label" placement="top" effect="light" :disabled="disabledLabel">
                     <span @mouseenter="handleMouse(`filter${index}${i}`)" :id="`filter${index}${i}`">{{ data.label }}</span>
@@ -42,6 +42,7 @@
 <script>
 import Loading from '@/components/common/Loading'
 import ChartNoData from '@/views/charts/charts/ChartNoData'
+import { countryNameIdMapping } from '@/utils/constants'
 export default {
   name: 'EntityFilter',
   components: { ChartNoData, Loading },
@@ -65,7 +66,8 @@ export default {
   },
   data () {
     return {
-      disabledLabel: true
+      disabledLabel: true,
+      countryNameIdMapping
     }
   },
   methods: {

src/views/entityExplorer/entityGraph/GraphEntityList.vue

@@ -39,8 +39,11 @@
               <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"/>-->
+                  <div class="graph-list-item-value graph-list-item-value1" style="display: flex;align-items: center;line-height: 14px;">
+                    <div style="line-height: 10px">
+                      <img v-if="getCountry(item.detail)===countryNameIdMapping.Unknown || !countryNameIdMapping[getCountry(item.detail)]" src="../../../../public/images/flag/Unknown.svg" class="graph-list-country-flag">
+                      <img v-else :src="require(`../../../../public/images/flag/${countryNameIdMapping[getCountry(item.detail)]}.png`)" class="graph-list-country-flag" >
+                    </div>
                     <span>{{ $_.get(item.detail, 'location.city', '-') }}</span>
                   </div>
                 </div>
@@ -105,7 +108,7 @@
 
 <script>
 import Loading from '@/components/common/Loading'
-import { riskLevelMapping } from '@/utils/constants'
+import { riskLevelMapping, countryNameIdMapping } from '@/utils/constants'
 import { scrollToTop } from '@/utils/tools'
 import _ from 'lodash'
 
@@ -119,6 +122,11 @@ export default {
       type: Boolean
     }
   },
+  data () {
+    return {
+      countryNameIdMapping
+    }
+  },
   components: {
     Loading
   },
@@ -181,6 +189,9 @@ export default {
     expandList () {
       // 继续拓展ip列表，传递信息，调用接口
       this.$emit('expandList', _.get(this.node, 'id'))
+    },
+    getCountry (detail) {
+      return this.$_.get(detail, 'location.country') || 'Unknown'
     }
   },
   mounted () {

src/views/entityExplorer/entityList/detailOverview/Ip.vue

@@ -4,7 +4,16 @@
     <div class="overview__content">
       <div class="overview__row">
         <div class="row__label row__label--width130">{{$t('overall.location')}}</div>
-        <div class="row__content">{{ipLocationRegion(entity.location)}}</div>
+        <div class="row__content">
+          <div v-if="entity.location" style="display: flex">
+            <div v-if="entity.location.country">
+              <img v-if="entity.location.country===countryNameIdMapping.Unknown || !countryNameIdMapping[entity.location.country]" src="../../../../../public/images/flag/Unknown.svg" class="filter-country-flag">
+              <img v-else :src="require(`../../../../../public/images/flag/${countryNameIdMapping[entity.location.country]}.png`)" class="filter-country-flag" >
+            </div>
+            {{ipLocationRegion(entity.location)}}
+          </div>
+          <div v-else>-</div>
+        </div>
       </div>
       <div class="overview__row">
         <div class="row__label row__label--width130">ASN</div>
@@ -248,6 +257,7 @@ import relatedServer from '@/mixins/relatedServer'
 import { dateFormatByAppearance, getMillisecond, getSecond } from '@/utils/date-util'
 import Loading from '@/components/common/Loading'
 import axios from 'axios'
+import { countryNameIdMapping } from '@/utils/constants'
 
 export default {
   name: 'Ip',
@@ -345,7 +355,8 @@ export default {
       loadingAlert: false,
       loadingSecurityEvents: false,
       loadingMap: false,
-      openPort: '-'
+      openPort: '-',
+      countryNameIdMapping
     }
   },
   computed: {