From 76e8fe97340778119d85d26e00cf95479693e81f Mon Sep 17 00:00:00 2001
From: hyx <hanyuxia@iie.ac.cn>
Date: Sat, 6 May 2023 11:37:03 +0800
Subject: [PATCH] =?UTF-8?q?CN-989=20=E5=AE=9E=E4=BD=93=E8=AF=A6=E6=83=85--?=
 =?UTF-8?q?=E5=9F=9F=E5=90=8D=E8=A7=A3=E6=9E=90=E5=92=8C=E5=BC=80=E6=94=BE?=
 =?UTF-8?q?=E7=AB=AF=E5=8F=A3tab=E5=BC=80=E5=8F=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/css/components/index.scss          |  1 +
 .../views/charts2/domainNameResolution.scss   | 54 +++++++++++++++++++
 .../charts/entityDetail/EntityDetailTabs.vue  |  5 +-
 .../tabs/DomainNameResolution.vue             | 40 +++++++++++++-
 .../charts/entityDetail/tabs/OpenPort.vue     | 27 ++++++++++
 5 files changed, 124 insertions(+), 3 deletions(-)
 create mode 100644 src/assets/css/components/views/charts2/domainNameResolution.scss
 create mode 100644 src/views/charts2/charts/entityDetail/tabs/OpenPort.vue

diff --git a/src/assets/css/components/index.scss b/src/assets/css/components/index.scss
index 6de947f8..38dc5423 100644
--- a/src/assets/css/components/index.scss
+++ b/src/assets/css/components/index.scss
@@ -65,6 +65,7 @@
 @import './views/charts2/linkBlock';
 @import './views/charts2/linkTrafficSankey';
 @import './views/charts2/linkDirectionGrid';
+@import './views/charts2/domainNameResolution.scss';
 @import 'views/charts2/linkTrafficLine';
 @import 'views/charts2/dnsTrafficLine';
 @import 'views/charts2/dnsRecentEvents';
diff --git a/src/assets/css/components/views/charts2/domainNameResolution.scss b/src/assets/css/components/views/charts2/domainNameResolution.scss
new file mode 100644
index 00000000..36ce2bb5
--- /dev/null
+++ b/src/assets/css/components/views/charts2/domainNameResolution.scss
@@ -0,0 +1,54 @@
+.type-data__column {
+  display:flex;
+  flex-direction: column;
+  margin-left:5px;
+  margin-right:0px;
+  margin-top:0px;
+  .type-data {
+    display:flex;
+    flex-flow:row wrap;
+    margin-top:15px;
+    .type-title {
+      display:flex;
+      flex-direction: row;
+      justify-content: center;
+      align-items: center;
+      margin-bottom:15px;
+      margin-right:10px;
+      font-family: PingFangSC-Semibold;
+      font-size: 14px;
+      color: #575757;
+      line-height: 20px;
+      font-weight: 600;
+      .title-mark {
+        width: 4px;
+        height: 16px;
+        margin-left:0px;
+        margin-right: 6px;
+        background: #38ACD2;
+        border-radius: 1px;
+      }
+    }
+
+    .type-content {
+      display:flex;
+      flex-flow: row wrap;
+      width:100%;
+      .data-item {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background: rgba(119,131,145,0.06);
+        border: 1px solid rgba(119,131,145,0.36);
+        border-radius: 2px;
+        height:28px;
+        padding:8px 15px;
+        margin-right:10px;
+        margin-bottom:15px;
+        font-size: 12px;
+        color: #353636;
+        font-weight: 400;
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/charts2/charts/entityDetail/EntityDetailTabs.vue b/src/views/charts2/charts/entityDetail/EntityDetailTabs.vue
index fedc148f..9ff8d879 100644
--- a/src/views/charts2/charts/entityDetail/EntityDetailTabs.vue
+++ b/src/views/charts2/charts/entityDetail/EntityDetailTabs.vue
@@ -15,6 +15,7 @@
         <domain-name-resolution v-else-if="tab.name === entityDetailTabsName.domainNameResolution"></domain-name-resolution>
         <security-event v-else-if="tab.name === entityDetailTabsName.securityEvent" :timeFilter="timeFilter" />
         <performance-event v-else-if="tab.name === entityDetailTabsName.performanceEvent" />
+        <open-port v-else-if="tab.name === entityDetailTabsName.openPort"></open-port>
       </el-tab-pane>
     </el-tabs>
   </div>
@@ -29,6 +30,7 @@ import InformationAggregation from '@/views/charts2/charts/entityDetail/tabs/Inf
 import DomainNameResolution from '@/views/charts2/charts/entityDetail/tabs/DomainNameResolution'
 import SecurityEvent from '@/views/charts2/charts/entityDetail/tabs/SecurityEvent'
 import PerformanceEvent from '@/views/charts2/charts/entityDetail/tabs/PerformanceEvent'
+import OpenPort from '@/views/charts2/charts/entityDetail/tabs/OpenPort'
 
 export default {
   name: 'EntityDetailTabs',
@@ -37,7 +39,8 @@ export default {
     PerformanceEvent,
     SecurityEvent,
     InformationAggregation,
-    DomainNameResolution
+    DomainNameResolution,
+    OpenPort
   },
   data () {
     return {
diff --git a/src/views/charts2/charts/entityDetail/tabs/DomainNameResolution.vue b/src/views/charts2/charts/entityDetail/tabs/DomainNameResolution.vue
index 70459f2e..0c9f2a2f 100644
--- a/src/views/charts2/charts/entityDetail/tabs/DomainNameResolution.vue
+++ b/src/views/charts2/charts/entityDetail/tabs/DomainNameResolution.vue
@@ -1,9 +1,45 @@
 <template>
-  域名解析
+  <div class="type-data__column">
+    <div class="type-data">
+      <div class="type-title">
+        <span class="title-mark" ></span>{{ $t('entities.tab.relatedApp') }}&nbsp;&nbsp;({{relatedAppList.length}})</div>
+      <div class="type-content">
+        <div v-for="app in relatedAppList" class="data-item">{{app}}</div>
+      </div>
+    </div>
+    <div class="type-data">
+      <div class="type-title">
+        <span class="title-mark" ></span>{{ $t('entities.tab.relatedIp') }}&nbsp;&nbsp;({{relatedIpList.length}})</div>
+      <div class="type-content">
+        <div v-for="ip in relatedIpList" class="data-item">{{ip}}</div>
+      </div>
+    </div>
+    <div class="type-data">
+      <div class="type-title">
+        <span class="title-mark" ></span>{{ $t('entities.tab.relatedDomain') }}&nbsp;&nbsp;({{relatedDomainList.length}})</div>
+      <div class="type-content">
+        <div v-for="domain in relatedDomainList"  class="data-item">{{domain}}</div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
 export default {
-  name: 'DomainNameResolution'
+  name: 'DomainNameResolution',
+  props: {
+  },
+  data () {
+    return {
+      relatedAppList: [],
+      relatedIpList: [],
+      relatedDomainList: []
+    }
+  },
+  mounted () {
+    this.relatedAppList = ['Wechat', 'baidu', 'Wechat', 'baidu', 'Wechat', 'baidu', 'Wechat']
+    this.relatedIpList = ['116.178.70.242', '116.178.70.242', '116.178.70.242', '116.178.70.242', '116.178.70.242', '116.178.70.242', '116.178.70.242', '116.178.70.242', '116.178.70.242', '116.178.70.242', '116.178.70.242', '116.178.70.242', '116.178.70.242', '116.178.70.242', '116.178.70.242', '116.178.70.242', '116.178.70.242', '116.178.70.242', '116.178.70.242']
+    this.relatedDomainList = ['-*.pangolin-sdk-toutiao.com', '-*.pangolin-sdk-toutiao.com', '-*.pangolin-sdk-toutiao.com', '-*.pangolin-sdk-toutiao.com']
+  }
 }
 </script>
diff --git a/src/views/charts2/charts/entityDetail/tabs/OpenPort.vue b/src/views/charts2/charts/entityDetail/tabs/OpenPort.vue
new file mode 100644
index 00000000..6ee0f3a4
--- /dev/null
+++ b/src/views/charts2/charts/entityDetail/tabs/OpenPort.vue
@@ -0,0 +1,27 @@
+<template>
+  <div class="type-data__column">
+    <div class="type-data">
+      <div class="type-title">
+        <span class="title-mark" ></span>{{ $t('entities.tab.currentDevelopmentPortsAndServices') }}&nbsp;&nbsp;(5)</div>
+      <div class="type-content">
+        <div v-for="openPort in openPortList" class="data-item">{{openPort}}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'OpenPort',
+  props: {
+  },
+  data () {
+    return {
+      openPortList: []
+    }
+  },
+  mounted () {
+    this.openPortList = ['11/rpcbind', '22/rpcbind', '231/zmpt', '22/rpcbind', '231/zmpt']
+  }
+}
+</script>