From 48550a47a2cf73518793cb0433006084a31a26a9 Mon Sep 17 00:00:00 2001
From: hyx <hanyuxia@iie.ac.cn>
Date: Thu, 26 Aug 2021 15:35:20 +0800
Subject: [PATCH] =?UTF-8?q?CN-108=20IP=E8=AF=A6=E6=83=85=E9=A1=B5=20client?=
 =?UTF-8?q?IP=E5=92=8CserverIP=E5=88=87=E6=8D=A2=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/constants.js     |  2 +-
 src/views/charts/Panel.vue | 19 +++++++++++++++----
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/utils/constants.js b/src/utils/constants.js
index 1692dce0..33f965fb 100644
--- a/src/utils/constants.js
+++ b/src/utils/constants.js
@@ -37,7 +37,7 @@ export const panelTypeAndRouteMapping = {
   trafficSummary: 1,
   networkAppPerformance: 2,
   dnsServiceInsights: 3,
-  clientIpEntityDetail: 4,
+  ipEntityDetail: 4,//此为clientIP
   domainEntityDetail: 5,
   appEntityDetail: 6,
   serverIpEntityDetail: 7
diff --git a/src/views/charts/Panel.vue b/src/views/charts/Panel.vue
index 6514dd17..4b8d44bc 100644
--- a/src/views/charts/Panel.vue
+++ b/src/views/charts/Panel.vue
@@ -6,7 +6,7 @@
         <span style="padding-left: 15px; color: #333;">{{tabTitle}}</span>
       </div>
       <el-radio-group v-model="tab" size="mini" @change="changeTab">
-        <el-radio-button v-for="tab in tabs" :key="tab.key" :label="tab.label"></el-radio-button>
+        <el-radio-button v-for="tabTmp in tabs"   :label="tabTmp.key" >{{tabTmp.label}}</el-radio-button>
       </el-radio-group>
     </div>
     <div class="cn-panel" id="cn-panel" :style="{height: typeName ? 'calc(100% - 80px)' : ''}">
@@ -69,7 +69,10 @@ export default {
     tabTitle () {
       let title
       switch (this.typeName) {
-        case 'clientIpEntityDetail':
+        case 'ipEntityDetail':{//client IP
+          title = this.$t('entities.ipDetail')
+          break
+        }
         case 'serverIpEntityDetail': {
           title = this.$t('entities.ipDetail')
           break
@@ -93,7 +96,7 @@ export default {
   setup (props, ctx) {
     let tab = ''
     if (!_.isEmpty(props.tabs)) {
-      tab = ref(props.tabs[0].label)
+      tab = ref(props.tabs[0].key)
     }
     // data
     const dateRangeValue = 60
@@ -115,7 +118,15 @@ export default {
     goBack () {
       this.$emit('goBack')
     },
-    changeTab (label) {
+    async changeTab (label) {
+      let routePath;
+      if(label=='clientIP'){
+        routePath = 'ipEntityDetail';
+      }else if(label=='serverIP'){
+        routePath = 'serverIpEntityDetail';
+      }
+      this.panelType = panelTypeAndRouteMapping[routePath];
+      await this.init();
     },
     async init () {
       const panels = await getPanelList({ type: this.panelType })