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

public/images/flag/Unknown.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="18px" height="12px" viewBox="0 0 18 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>未知</title>
+    <g id="🥇Entity" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Entity_Explore【domain展开】" transform="translate(-180.000000, -216.000000)">
+            <g id="未知" transform="translate(180.000000, 216.000000)">
+                <rect id="矩形" fill="#EFF2F5" x="0" y="0" width="18" height="12"></rect>
+                <g transform="translate(2.000000, 3.000000)" fill="#96A2B0" fill-rule="nonzero">
+                    <polygon id="路径" points="1.513 2.957 1.035 2 0.991 2 1.13 2.957 1.13 6.131 0 6.131 0 0 0.869 0 3.174 3.243 3.635 4.174 3.679 4.174 3.539 3.243 3.539 0.043 4.67 0.043 4.67 6.174 3.8 6.174"></polygon>
+                    <path d="M12.261,4.783 L10.391,4.783 L9.93,6.131 L8.739,6.131 L10.93,0 L11.808,0 L14,6.131 L12.748,6.131 L12.261,4.783 Z M10.696,3.827 L12,3.827 L11.548,2.47 L11.365,1.513 L11.321,1.513 L11.138,2.478 L10.696,3.827 Z" id="形状"></path>
+                    <polygon id="路径" points="8.101 0 5.367 6.174 6.396 6.174 9.123 0"></polygon>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/assets/css/components/views/entityExplorer/entity-explorer.scss

@@ -88,12 +88,17 @@
     color: #353636;
     font-weight: 400;
   }
-  .explorer-container {
+  .explorer-container, .explorer-container-new {
     display: flex;
     overflow: visible; /*overflow: hidden;*/
     height: calc(100% - 120px);
     position: relative;
   }
+  .explorer-container-new {
+    height: calc(100% - 62px);
+    flex-direction: column;
+    width: calc(100% - 340px);
+  }
   .explorer-foot {
     display: flex;
     justify-content: center;

src/assets/css/components/views/entityExplorer/entity-filter.scss

@@ -56,11 +56,6 @@
         color: #353636;
         font-weight: 400;
 
-        .filter-country-flag {
-          width: 18px;
-          height: 12px;
-        }
-
         .filter__body-item-left-index {
           width: 16px;
           height: 16px;
@@ -99,3 +94,9 @@
     }
   }
 }
+
+.filter-country-flag {
+  width: 18px;
+  height: 12px;
+  margin-right: 6px;
+}

src/assets/css/components/views/entityExplorer/graphRightListBlock.scss

@@ -107,8 +107,8 @@ $font-size: 12px;
       }
 
       .graph-list-country-flag {
-        width: 16px;
+        width: 14px;
-        height: 14px;
+        height: 10px;
         margin-right: 5px;
       }
 

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">
-                <!--<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 :src="require(`../../../public/images/flag/${data.flag}.svg`)" class="filter-country-flag"/>-->
+                  <img v-else :src="require(`../../../public/images/flag/${countryNameIdMapping[data.flag]}.png`)" class="filter-country-flag"/>
-                <!--</div>-->
+                </div>
-                <div class="filter__body-item-left-index">{{ i+1 }}</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;">
+                  <div class="graph-list-item-value graph-list-item-value1" style="display: flex;align-items: center;line-height: 14px;">
-                    <!--                  <img :src="require(`../../../../public/images/flag/${item.flag}.svg`)" class="graph-list-country-flag"/>-->
+                    <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: {