From 3471cb159fb65c031d3d1fed758acadc0f6a0d09 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E6=B4=AA=E6=B4=AA?= <2498601771@qq.com>
Date: Fri, 4 Aug 2023 15:47:47 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=AE=9E=E4=BD=93=E5=88=97=E8=A1=A8?=
 =?UTF-8?q?=E3=80=81=E5=88=97=E8=A1=A8=E4=B8=8B=E6=8B=89=E8=AF=A6=E6=83=85?=
 =?UTF-8?q?=E3=80=81=E5=AE=9E=E4=BD=93=E5=85=B3=E7=B3=BB=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E5=9B=BD=E6=97=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/images/flag/Unknown.svg                  | 16 ++++++++++++++++
 .../views/entityExplorer/entity-explorer.scss   |  7 ++++++-
 .../views/entityExplorer/entity-filter.scss     | 11 ++++++-----
 .../entityExplorer/graphRightListBlock.scss     |  4 ++--
 src/views/entityExplorer/EntityExplorer.vue     |  6 +++---
 src/views/entityExplorer/EntityFilter.vue       | 14 ++++++++------
 .../entityGraph/GraphEntityList.vue             | 17 ++++++++++++++---
 .../entityList/detailOverview/Ip.vue            | 15 +++++++++++++--
 8 files changed, 68 insertions(+), 22 deletions(-)
 create mode 100644 public/images/flag/Unknown.svg

diff --git a/public/images/flag/Unknown.svg b/public/images/flag/Unknown.svg
new file mode 100644
index 00000000..d40fd6f8
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/assets/css/components/views/entityExplorer/entity-explorer.scss b/src/assets/css/components/views/entityExplorer/entity-explorer.scss
index 076c40f0..f1b243bf 100644
--- a/src/assets/css/components/views/entityExplorer/entity-explorer.scss
+++ b/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;
diff --git a/src/assets/css/components/views/entityExplorer/entity-filter.scss b/src/assets/css/components/views/entityExplorer/entity-filter.scss
index 71fbb493..bd4bab16 100644
--- a/src/assets/css/components/views/entityExplorer/entity-filter.scss
+++ b/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;
+}
diff --git a/src/assets/css/components/views/entityExplorer/graphRightListBlock.scss b/src/assets/css/components/views/entityExplorer/graphRightListBlock.scss
index ca025687..354b3c64 100644
--- a/src/assets/css/components/views/entityExplorer/graphRightListBlock.scss
+++ b/src/assets/css/components/views/entityExplorer/graphRightListBlock.scss
@@ -107,8 +107,8 @@ $font-size: 12px;
       }
 
       .graph-list-country-flag {
-        width: 16px;
-        height: 14px;
+        width: 14px;
+        height: 10px;
         margin-right: 5px;
       }
 
diff --git a/src/views/entityExplorer/EntityExplorer.vue b/src/views/entityExplorer/EntityExplorer.vue
index 49678eff..10e96f16 100644
--- a/src/views/entityExplorer/EntityExplorer.vue
+++ b/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'
diff --git a/src/views/entityExplorer/EntityFilter.vue b/src/views/entityExplorer/EntityFilter.vue
index 114c72c4..653d1af8 100644
--- a/src/views/entityExplorer/EntityFilter.vue
+++ b/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: {
diff --git a/src/views/entityExplorer/entityGraph/GraphEntityList.vue b/src/views/entityExplorer/entityGraph/GraphEntityList.vue
index 53d6dff5..62f901f1 100644
--- a/src/views/entityExplorer/entityGraph/GraphEntityList.vue
+++ b/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 () {
diff --git a/src/views/entityExplorer/entityList/detailOverview/Ip.vue b/src/views/entityExplorer/entityList/detailOverview/Ip.vue
index b374601a..25587ea3 100644
--- a/src/views/entityExplorer/entityList/detailOverview/Ip.vue
+++ b/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: {