diff --git a/src/assets/css/components/views/charts2/panel.scss b/src/assets/css/components/views/charts2/panel.scss
index b0d6da97..46f76205 100644
--- a/src/assets/css/components/views/charts2/panel.scss
+++ b/src/assets/css/components/views/charts2/panel.scss
@@ -12,6 +12,39 @@
       line-height: 24px;
       font-weight: 900;
       color: #353636;
+      display:flex;
+      .score {
+        .circle-icon {
+          border-radius: 3px;
+          width: 6px;
+          height: 6px;
+          margin-left: 10px;
+          margin-right: 4px;
+        }
+        .data-score-red {
+          background: #E26154;
+        }
+        .data-score-yellow {
+          background: #E5A219;
+        }
+        .data-score-green {
+          background: #749F4D;
+        }
+        height:24px;
+        font-family: NotoSansHans-Medium;
+        font-size: 12px;
+        color: #353636;
+        font-weight: 500;
+        margin-left:8px;
+        padding-right:13px;
+        background: #F7F7F7;
+        border: 1px solid #E2E5EC;
+        box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
+        border-radius: 4px;
+        display:flex;
+        align-items: center;
+        justify-content: center;
+      }
     }
     .panel__time {
       display: flex;
diff --git a/src/components/layout/Header.vue b/src/components/layout/Header.vue
index 850a7fe7..a88b4443 100644
--- a/src/components/layout/Header.vue
+++ b/src/components/layout/Header.vue
@@ -149,7 +149,7 @@
 <script>
 import { useRoute } from 'vue-router'
 import { get, put } from '@/utils/http'
-import { entityType, storageKey, networkOverviewTabList, operationType, networkOverviewSearchUrl,drillDownPanelTypeMapping } from '@/utils/constants'
+import { entityType, storageKey, networkOverviewTabList, operationType, networkOverviewSearchUrl, drillDownPanelTypeMapping } from '@/utils/constants'
 import { api } from '@/utils/api'
 import { ref } from 'vue'
 import { getNowTime, getSecond } from '@/utils/date-util'
@@ -401,7 +401,7 @@ export default {
                 this.$store.commit('setBreadcrumbColumnValue', columnValue)
                 this.$store.commit('setBreadcrumbColumnName', columnName)
                 const tabObjGroup = networkOverviewTabList.filter(item => item.label == columnName)
-                let type = tabObjGroup&&tabObjGroup[0]?tabObjGroup[0].prop:''
+                const type = tabObjGroup && tabObjGroup[0] ? tabObjGroup[0].prop : ''
                 this.$store.commit('setDimensionType', type)
                 this.$store.commit('setPanelName', columnValue)
               } else if (columnName) { // 点击的为列名
@@ -413,7 +413,7 @@ export default {
                 const tabList = this.$store.getters.getNetworkOverviewTabList
                 const curTab = tabList.filter(item => this.$t(item.label) === columnName)[0]
                 this.$store.commit('setNetworkOverviewCurrentTab', curTab)
-                this.$store.commit('setDimensionType', curTab?curTab.prop:'')
+                this.$store.commit('setDimensionType', curTab ? curTab.prop : '')
                 this.$store.commit('setQueryCondition', '')
                 this.$store.commit('setNetworkOverviewBeforeTab', null)
               } else {
@@ -432,14 +432,14 @@ export default {
           })
         }
       })
-      //console.log(this.$store.getters.getDimensionType)
-      if(opeType===3){
+      // console.log(this.$store.getters.getDimensionType)
+      if (opeType === 3) {
         this.$router.push({
-          params:{...this.$route.params,fourthPanel:''}
+          params: { ...this.$route.params, fourthPanel: '' }
         })
-      }else if(opeType!=4){
+      } else if (opeType != 4) {
         this.$router.push({
-          params:{...this.$route.params,fourthPanel:'',thirdPanel:''}
+          params: { ...this.$route.params, fourthPanel: '', thirdPanel: '' }
         })
       }
 
diff --git a/src/router/index.js b/src/router/index.js
index ac458641..e29ea3f5 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -15,7 +15,7 @@ const routes = [
     component: () => import('@/components/layout/Home'),
     children: [
       {
-        name:'panel',
+        name: 'panel',
         path: '/panel/:typeName',
         component: () => import('@/views/charts2/Panel')
       },
diff --git a/src/utils/api.js b/src/utils/api.js
index 9c4427a1..11295a55 100644
--- a/src/utils/api.js
+++ b/src/utils/api.js
@@ -162,7 +162,14 @@ export const api = {
       // 各维度下钻会话统计
       relatedSessions: '/interface/application/performance/relatedSessions',
       // 各维度下钻流量曲线图
-      trafficGraph: '/interface/application/performance/overview/drilldown/drilldown/dimension/trafficGraph'
+      trafficGraph: '/interface/application/performance/overview/drilldown/drilldown/dimension/trafficGraph',
+      // 下钻地图
+      map: '/interface/application/performance/overview/drilldown/dimension/clientLocations/world/trafficAnalysis',
+      mapTcp: '/interface/application/performance/overview/drilldown/dimension/clientLocations/world/tcpSessionDelay',
+      mapHttp: '/interface/application/performance/overview/drilldown/dimension/clientLocations/world/httpResponseDelay',
+      mapSsl: '/interface/application/performance/overview/drilldown/dimension/clientLocations/world/sslConDelay',
+      mapPacketLoss: '/interface/application/performance/overview/drilldown/dimension/clientLocations/world/tcpSessionDelay',
+      mapPacketRetrans: '/interface/application/performance/overview/drilldown/dimension/clientLocations/world/tcpSessionDelay'
     },
     location: {
       // 折线图
diff --git a/src/utils/constants.js b/src/utils/constants.js
index 0cd59aa2..9b9b9ab8 100644
--- a/src/utils/constants.js
+++ b/src/utils/constants.js
@@ -176,11 +176,11 @@ export const networkOverviewTabs = [
   'network.hosts',
   'network.snis',
   'network.protocolPorts'
-]*/
+] */
 
 export const operationType = {
   mainMenu: 0, // 菜单
-  secondMenu: 1, // 二级菜单
+  secondMenu: 2, // 二级菜单
   thirdMenu: 3, // 三级菜单
   fourthMenu: 4, // 四级菜单:点击顶部第四级菜单 OR 点击表格的第一列的值
   changeTab: 5, // 切换tab
@@ -205,38 +205,16 @@ export const networkOverviewTableUrlName = {
   hosts: 'hosts',
   snis: 'snis',
   protocolPorts: 'protocolPorts'
-}*/
+} */
 
-//列的类型：下钻列，环比列，普通列
+// 列的类型：下钻列，环比列，普通列
 export const tableColumnType = {
-  dillDown:'dillDown',
-  chainRatio:'chainRatio',
-  normal:'normal'
+  dillDown: 'dillDown',
+  chainRatio: 'chainRatio',
+  normal: 'normal'
 }
 
-//AppPerformance类型表格的列
-export const customTableTitlesForAppPerformance = [
-  { label: 'network.ips', prop: 'tab', checked: true, tabColumn: true,columnType:tableColumnType.dillDown},
-  { label: 'network.score', prop: 'score', checked: true, tabColumn: false,columnType:tableColumnType.normal},
-  { label: 'networkAppPerformance.throughput', prop: 'throughput', checked: true, tabColumn: false,columnType:tableColumnType.chainRatio},
-  { label: 'networkAppPerformance.tcpConnectionEstablishLatency', prop: 'tcpConnectionEstablishLatency', checked: true, tabColumn: false,columnType:tableColumnType.chainRatio},
-  { label: 'networkAppPerformance.packetLoss', prop: 'packetLoss', checked: false, tabColumn: false,columnType:tableColumnType.normal},
-  { label: 'networkAppPerformance.packetRetrans', prop: 'packetRetrans', checked: false, tabColumn: false,columnType:tableColumnType.normal},
-  { label: 'networkAppPerformance.sslResponseLatency', prop: 'sslResponseLatency', checked: false, tabColumn: false,columnType:tableColumnType.normal},
-  { label: 'networkAppPerformance.httpResponseLatency', prop: 'httpResponseLatency', checked: false, tabColumn: false,columnType:tableColumnType.normal}
-]
-
-//NetworkOverview类型表格的列
-export const customTableTitlesForNetworkOverview = [
-  { label: 'network.ips', prop: 'tab', checked: true, tabColumn: true,columnType:tableColumnType.dillDown},
-  { label: 'network.total', prop: 'total', checked: true, tabColumn: false,columnType:tableColumnType.chainRatio},
-  { label: 'network.inbound', prop: 'inbound', checked: true, tabColumn: false,columnType:tableColumnType.normal},
-  { label: 'network.outbound', prop: 'outbound', checked: true, tabColumn: false,columnType:tableColumnType.normal},
-  { label: 'network.internal', prop: 'internal', checked: true, tabColumn: false,columnType:tableColumnType.normal},
-  { label: 'network.through', prop: 'through', checked: true, tabColumn: false,columnType:tableColumnType.normal}
-]
-
-//networkOverview:接口url
+// networkOverview:接口url（主URL）
 export const networkOverviewSearchUrl = {
   curUrl: '/interface/overview/dimensionTrafficAnalysis',
   cycleUrl: '/interface/overview/dimensionCycleTrafficAnalysis',
@@ -244,7 +222,7 @@ export const networkOverviewSearchUrl = {
   drilldownCycleUrl: '/interface/overview/drilldown/dimensionCycleTrafficAnalysis',
   drilldownList: '/interface/overview/drilldown/list'
 }
-//npm:接口url
+// npm:接口url（主URL）
 export const npmSearchUrl = {
   curUrl: '/interface/application/performance/overview/dimensionTrafficAnalysis',
   cycleUrl: '/interface/application/performance/overview/dimensionCycleTrafficAnalysis',
@@ -253,6 +231,125 @@ export const npmSearchUrl = {
   drilldownList: '/interface/overview/drilldown/list'
 }
 
+export const cycle = {
+  current: 0,
+  pre: 1
+}
+
+export const scoreUrl = [
+  '/interface/application/performance/overview/drilldown/dimensionTcpSessionDelay',
+  '/interface/application/performance/overview/drilldown/dimensionSslConDelay',
+  '/interface/application/performance/overview/drilldown/dimensionHttpResponseDelay'
+]
+
+// AppPerformance类型表格的列：有属性cycleDataUrl的，代表此数据的来源为对应接口返回的数据，无cycleDataUrl的属性代表数据来源于主url：npmSearchUrl.curUrl、npmSearchUrl.cycleUrl、npmSearchUrl.drilldownCurUrl、npmSearchUrl.drilldownCycleUrl
+export const customTableTitlesForAppPerformance = [
+  { label: 'network.ips', prop: 'tab', checked: true, tabColumn: true, columnType: tableColumnType.dillDown },
+  { label: 'network.score', prop: 'score', checked: true, tabColumn: false, columnType: tableColumnType.normal },
+  {
+    label: 'networkAppPerformance.throughput',
+    prop: 'through',
+    checked: true,
+    tabColumn: false,
+    columnType: tableColumnType.chainRatio,
+    cycleDataUrl: npmSearchUrl.cycleUrl,
+    isInMainUrl: true
+  }, // 此字段当前周期的数据是否在主URL中（npmSearchUrl中的URL为主URL）
+  {
+    label: 'networkAppPerformance.tcpConnectionEstablishLatency',
+    prop: 'tcpConEstLatency',
+    dillDownProp: 'establishLatencyMs',
+    dillDownCycleProp: 'establishLatencyMs',
+    checked: true,
+    tabColumn: false,
+    columnType: tableColumnType.chainRatio,
+    cycleDataUrl: '/interface/application/performance/overview/dimensionTcpSessionDelay',
+    dillDownCycleDataUrl: '/interface/application/performance/overview/drilldown/dimensionTcpSessionDelay',
+    cycle: cycle.pre,
+    scoreType: 0,
+    isScoreColumn: true,
+    isInMainUrl: false
+  },
+  {
+    label: 'networkAppPerformance.packetLoss',
+    prop: 'packetLoss',
+    dillDownProp: 'tcpLostlenPercent',
+    dillDownCycleProp: 'tcpLostlenPercent',
+    checked: false,
+    tabColumn: false,
+    columnType: tableColumnType.chainRatio,
+    cycleDataUrl: '/interface/application/performance/overview/dimensionTcpLostlenPercent',
+    dillDownCycleDataUrl: '/interface/application/performance/overview/drilldown/dimensionTcpSessionDelay',
+    cycle: cycle.pre,
+    scoreType: 3,
+    isScoreColumn: true,
+    isInMainUrl: false
+  },
+  {
+    label: 'networkAppPerformance.packetRetrans',
+    prop: 'packetRetrans',
+    dillDownProp: 'pktRetransPercent',
+    dillDownCycleProp: 'pktRetransPercent',
+    checked: false,
+    tabColumn: false,
+    columnType: tableColumnType.chainRatio,
+    cycleDataUrl: '/interface/application/performance/overview/dimensionPacketRetransPercent',
+    dillDownCycleDataUrl: '/interface/application/performance/overview/drilldown/dimensionTcpSessionDelay',
+    cycle: cycle.pre,
+    scoreType: 4,
+    isScoreColumn: true,
+    isInMainUrl: false
+  },
+  {
+    label: 'networkAppPerformance.sslResponseLatency',
+    prop: 'sslResponseLatency',
+    dillDownProp: 'sslConLatency',
+    dillDownCycleProp: 'sslConLatency',
+    checked: false,
+    tabColumn: false,
+    columnType: tableColumnType.chainRatio,
+    cycleDataUrl: '/interface/application/performance/overview/dimensionSslConDelay',
+    dillDownCycleDataUrl: '/interface/application/performance/overview/drilldown/dimensionSslConDelay',
+    cycle: cycle.pre,
+    scoreType: 2,
+    isScoreColumn: true,
+    isInMainUrl: false
+  },
+  {
+    label: 'networkAppPerformance.httpResponseLatency',
+    prop: 'httpResponseLatency',
+    dillDownProp: 'httpResponseLatency',
+    dillDownCycleProp: 'httpResponseLatency',
+    checked: false,
+    tabColumn: false,
+    columnType: tableColumnType.chainRatio,
+    cycleDataUrl: '/interface/application/performance/overview/dimensionHttpResponseDelay',
+    dillDownCycleDataUrl: '/interface/application/performance/overview/drilldown/dimensionHttpResponseDelay',
+    cycle: cycle.pre,
+    scoreType: 1,
+    isScoreColumn: true,
+    isInMainUrl: false
+  }
+]
+
+// NetworkOverview类型表格的列:prop 为接口响应数据中的属性名
+export const customTableTitlesForNetworkOverview = [
+  { label: 'network.ips', prop: 'tab', checked: true, tabColumn: true, columnType: tableColumnType.dillDown },
+  {
+    label: 'network.total',
+    prop: 'total',
+    checked: true,
+    tabColumn: false,
+    columnType: tableColumnType.chainRatio,
+    cycleDataUrl: networkOverviewSearchUrl.cycleUrl,
+    isInMainUrl: true
+  },
+  { label: 'network.inbound', prop: 'inbound', checked: true, tabColumn: false, columnType: tableColumnType.normal },
+  { label: 'network.outbound', prop: 'outbound', checked: true, tabColumn: false, columnType: tableColumnType.normal },
+  { label: 'network.internal', prop: 'internal', checked: true, tabColumn: false, columnType: tableColumnType.normal },
+  { label: 'network.through', prop: 'through', checked: true, tabColumn: false, columnType: tableColumnType.normal }
+]
+
 /* panel类别和名称之间的映射 */
 export const drillDownPanelTypeMapping = {
   npmOverviewIp: 8,
@@ -260,7 +357,7 @@ export const drillDownPanelTypeMapping = {
   npmOverviewApp: 10,
   npmOverviewCommon: 11,
   npmThirdMenu: 12,
-  networkOverview: 13,
+  networkOverview: 13
 }
 
 export const networkOverviewTabList = [
@@ -271,7 +368,7 @@ export const networkOverviewTabList = [
     dillDownProp: ['common_client_ip', 'common_server_ip'],
     checked: true,
     disabled: false,
-    panelId:drillDownPanelTypeMapping.networkOverview
+    panelId: drillDownPanelTypeMapping.networkOverview
   }, {
     label: 'network.countries',
     prop: 'country',
@@ -279,7 +376,7 @@ export const networkOverviewTabList = [
     dillDownProp: ['client_country', 'server_country'],
     checked: true,
     disabled: false,
-    panelId:drillDownPanelTypeMapping.networkOverview
+    panelId: drillDownPanelTypeMapping.networkOverview
   }, {
     label: 'network.asns',
     prop: 'asn',
@@ -287,7 +384,7 @@ export const networkOverviewTabList = [
     dillDownProp: ['client_asn', 'server_asn'],
     checked: true,
     disabled: false,
-    panelId:drillDownPanelTypeMapping.networkOverview
+    panelId: drillDownPanelTypeMapping.networkOverview
   }, {
     label: 'network.applications',
     prop: 'appLabel',
@@ -295,7 +392,7 @@ export const networkOverviewTabList = [
     dillDownProp: ['common_app_label'],
     checked: true,
     disabled: false,
-    panelId:drillDownPanelTypeMapping.networkOverview
+    panelId: drillDownPanelTypeMapping.networkOverview
   }, {
     label: 'network.providers',
     prop: 'appCompany',
@@ -303,7 +400,7 @@ export const networkOverviewTabList = [
     dillDownProp: ['app_company'],
     checked: true,
     disabled: false,
-    panelId:drillDownPanelTypeMapping.networkOverview
+    panelId: drillDownPanelTypeMapping.networkOverview
   }, {
     label: 'network.domains',
     prop: 'domain',
@@ -311,7 +408,7 @@ export const networkOverviewTabList = [
     dillDownProp: ['domain'],
     checked: true,
     disabled: false,
-    panelId:drillDownPanelTypeMapping.networkOverview
+    panelId: drillDownPanelTypeMapping.networkOverview
   }, {
     label: 'network.protocols',
     prop: 'l7Protocol',
@@ -319,7 +416,7 @@ export const networkOverviewTabList = [
     dillDownProp: ['common_l7_protocol'],
     checked: true,
     disabled: false,
-    panelId:drillDownPanelTypeMapping.networkOverview
+    panelId: drillDownPanelTypeMapping.networkOverview
   }, {
     label: 'network.idcTenants',
     prop: 'idcRenter',
@@ -327,7 +424,7 @@ export const networkOverviewTabList = [
     dillDownProp: ['client_idc_renter', 'server_idc_renter'],
     checked: true,
     disabled: false,
-    panelId:drillDownPanelTypeMapping.networkOverview
+    panelId: drillDownPanelTypeMapping.networkOverview
   }, {
     label: 'network.provinces',
     prop: 'province',
@@ -335,7 +432,7 @@ export const networkOverviewTabList = [
     dillDownProp: ['client_province', 'server_province'],
     checked: false,
     disabled: false,
-    panelId:drillDownPanelTypeMapping.networkOverview
+    panelId: drillDownPanelTypeMapping.networkOverview
   }, {
     label: 'network.cities',
     prop: 'city',
@@ -343,7 +440,7 @@ export const networkOverviewTabList = [
     dillDownProp: ['client_region', 'server_region'],
     checked: false,
     disabled: false,
-    panelId:drillDownPanelTypeMapping.networkOverview
+    panelId: drillDownPanelTypeMapping.networkOverview
   }, {
     label: 'network.isps',
     prop: 'isp',
@@ -351,7 +448,7 @@ export const networkOverviewTabList = [
     dillDownProp: ['client_isp', 'server_isp'],
     checked: false,
     disabled: false,
-    panelId:drillDownPanelTypeMapping.networkOverview
+    panelId: drillDownPanelTypeMapping.networkOverview
   }, {
     label: 'network.applicationCategories',
     prop: 'appSubcategory',
@@ -359,7 +456,7 @@ export const networkOverviewTabList = [
     dillDownProp: ['app_subcategory'],
     checked: false,
     disabled: false,
-    panelId:drillDownPanelTypeMapping.networkOverview
+    panelId: drillDownPanelTypeMapping.networkOverview
   }, {
     label: 'network.domainCategories',
     prop: 'domainCategoryName',
@@ -367,7 +464,7 @@ export const networkOverviewTabList = [
     dillDownProp: ['domain_category_name'],
     checked: false,
     disabled: false,
-    panelId:drillDownPanelTypeMapping.networkOverview
+    panelId: drillDownPanelTypeMapping.networkOverview
   }, {
     label: 'network.hosts',
     prop: 'httpHost',
@@ -375,7 +472,7 @@ export const networkOverviewTabList = [
     dillDownProp: ['http_host'],
     checked: false,
     disabled: false,
-    panelId:drillDownPanelTypeMapping.networkOverview
+    panelId: drillDownPanelTypeMapping.networkOverview
   }, {
     label: 'network.snis',
     prop: 'sslSni',
@@ -383,7 +480,7 @@ export const networkOverviewTabList = [
     dillDownProp: ['ssl_sni'],
     checked: false,
     disabled: false,
-    panelId:drillDownPanelTypeMapping.networkOverview
+    panelId: drillDownPanelTypeMapping.networkOverview
   }, {
     label: 'network.protocolPorts',
     prop: 'protocolPort',
@@ -391,19 +488,19 @@ export const networkOverviewTabList = [
     dillDownProp: ['common_l7_protocol', 'common_server_port '],
     checked: false,
     disabled: false,
-    panelId:drillDownPanelTypeMapping.networkOverview
+    panelId: drillDownPanelTypeMapping.networkOverview
   }
 ]
 
 export const networkAppPerformanceTabList = [
   {
-    label: 'network.ips',//tab名称对应的il8n
-    prop: 'ip',//接口返回数据中，tab第一列对应的属性名
-    queryCycleTotalProp: 'ips',//SQL中查询不同纬度的列名称
-    dillDownProp: ['common_client_ip', 'common_server_ip'],//下钻时，传递的查询条件，即接口的q参数
-    checked: true,//自定义设置中，是否默认选中
-    disabled: false,//自定义设置中，是否可操作（选中或取消选中）
-    panelId:drillDownPanelTypeMapping.npmOverviewIp//下钻后展示的panelId
+    label: 'network.ips', // tab名称对应的il8n
+    prop: 'ip', // 接口返回数据中，tab第一列对应的属性名
+    queryCycleTotalProp: 'ips', // SQL中查询不同纬度的列名称
+    dillDownProp: ['common_client_ip', 'common_server_ip'], // 下钻时，传递的查询条件，即接口的q参数
+    checked: true, // 自定义设置中，是否默认选中
+    disabled: false, // 自定义设置中，是否可操作（选中或取消选中）
+    panelId: drillDownPanelTypeMapping.npmOverviewIp// 下钻后展示的panelId
   }, {
     label: 'network.countries',
     prop: 'country',
@@ -411,7 +508,7 @@ export const networkAppPerformanceTabList = [
     dillDownProp: ['client_country', 'server_country'],
     checked: true,
     disabled: false,
-    panelId:drillDownPanelTypeMapping.npmOverviewCommon
+    panelId: drillDownPanelTypeMapping.npmOverviewCommon
   }, {
     label: 'network.asns',
     prop: 'asn',
@@ -419,7 +516,7 @@ export const networkAppPerformanceTabList = [
     dillDownProp: ['client_asn', 'server_asn'],
     checked: true,
     disabled: false,
-    panelId:drillDownPanelTypeMapping.npmOverviewCommon
+    panelId: drillDownPanelTypeMapping.npmOverviewCommon
   }, {
     label: 'network.applications',
     prop: 'appLabel',
@@ -427,7 +524,7 @@ export const networkAppPerformanceTabList = [
     dillDownProp: ['common_app_label'],
     checked: true,
     disabled: false,
-    panelId:drillDownPanelTypeMapping.npmOverviewApp
+    panelId: drillDownPanelTypeMapping.npmOverviewApp
   }, {
     label: 'network.providers',
     prop: 'appCompany',
@@ -435,7 +532,7 @@ export const networkAppPerformanceTabList = [
     dillDownProp: ['app_company'],
     checked: true,
     disabled: false,
-    panelId:drillDownPanelTypeMapping.npmOverviewCommon
+    panelId: drillDownPanelTypeMapping.npmOverviewCommon
   }, {
     label: 'network.domains',
     prop: 'domain',
@@ -443,7 +540,7 @@ export const networkAppPerformanceTabList = [
     dillDownProp: ['domain'],
     checked: true,
     disabled: false,
-    panelId:drillDownPanelTypeMapping.npmOverviewDomain
+    panelId: drillDownPanelTypeMapping.npmOverviewDomain
   }, {
     label: 'network.protocols',
     prop: 'l7Protocol',
@@ -451,7 +548,7 @@ export const networkAppPerformanceTabList = [
     dillDownProp: ['common_l7_protocol'],
     checked: true,
     disabled: false,
-    panelId:drillDownPanelTypeMapping.npmOverviewCommon
+    panelId: drillDownPanelTypeMapping.npmOverviewCommon
   }, {
     label: 'network.idcTenants',
     prop: 'idcRenter',
@@ -459,7 +556,7 @@ export const networkAppPerformanceTabList = [
     dillDownProp: ['client_idc_renter', 'server_idc_renter'],
     checked: true,
     disabled: false,
-    panelId:drillDownPanelTypeMapping.npmOverviewCommon
+    panelId: drillDownPanelTypeMapping.npmOverviewCommon
   }, {
     label: 'network.provinces',
     prop: 'province',
@@ -467,7 +564,7 @@ export const networkAppPerformanceTabList = [
     dillDownProp: ['client_province', 'server_province'],
     checked: false,
     disabled: false,
-    panelId:drillDownPanelTypeMapping.npmOverviewCommon
+    panelId: drillDownPanelTypeMapping.npmOverviewCommon
   }, {
     label: 'network.cities',
     prop: 'city',
@@ -475,7 +572,7 @@ export const networkAppPerformanceTabList = [
     dillDownProp: ['client_region', 'server_region'],
     checked: false,
     disabled: false,
-    panelId:drillDownPanelTypeMapping.npmOverviewCommon
+    panelId: drillDownPanelTypeMapping.npmOverviewCommon
   }, {
     label: 'network.isps',
     prop: 'isp',
@@ -483,7 +580,7 @@ export const networkAppPerformanceTabList = [
     dillDownProp: ['client_isp', 'server_isp'],
     checked: false,
     disabled: false,
-    panelId:drillDownPanelTypeMapping.npmOverviewCommon
+    panelId: drillDownPanelTypeMapping.npmOverviewCommon
   }, {
     label: 'network.applicationCategories',
     prop: 'appSubcategory',
@@ -491,7 +588,7 @@ export const networkAppPerformanceTabList = [
     dillDownProp: ['app_subcategory'],
     checked: false,
     disabled: false,
-    panelId:drillDownPanelTypeMapping.npmOverviewCommon
+    panelId: drillDownPanelTypeMapping.npmOverviewCommon
   }, {
     label: 'network.domainCategories',
     prop: 'domainCategoryName',
@@ -499,7 +596,7 @@ export const networkAppPerformanceTabList = [
     dillDownProp: ['domain_category_name'],
     checked: false,
     disabled: false,
-    panelId:drillDownPanelTypeMapping.npmOverviewCommon
+    panelId: drillDownPanelTypeMapping.npmOverviewCommon
   }, {
     label: 'network.hosts',
     prop: 'httpHost',
@@ -507,7 +604,7 @@ export const networkAppPerformanceTabList = [
     dillDownProp: ['http_host'],
     checked: false,
     disabled: false,
-    panelId:drillDownPanelTypeMapping.npmOverviewCommon
+    panelId: drillDownPanelTypeMapping.npmOverviewCommon
   }, {
     label: 'network.snis',
     prop: 'sslSni',
@@ -515,7 +612,7 @@ export const networkAppPerformanceTabList = [
     dillDownProp: ['ssl_sni'],
     checked: false,
     disabled: false,
-    panelId:drillDownPanelTypeMapping.npmOverviewCommon
+    panelId: drillDownPanelTypeMapping.npmOverviewCommon
   }, {
     label: 'network.protocolPorts',
     prop: 'protocolPort',
@@ -523,51 +620,76 @@ export const networkAppPerformanceTabList = [
     dillDownProp: ['common_l7_protocol', 'common_server_port '],
     checked: false,
     disabled: false,
-    panelId:drillDownPanelTypeMapping.npmOverviewCommon
+    panelId: drillDownPanelTypeMapping.npmOverviewCommon
   }
 ]
 
+// 用于组织数据时的名称，对应的属性名称
+export const bytesColumnNameGroupForNpm = {
+  through: 'throughBitsRate',
+  tcpConEstLatency: 'establishLatencyMs',
+  packetLoss: 'tcpLostlenPercent',
+  packetRetrans: 'pktRetransPercent',
+  sslResponseLatency: 'sslConLatency',
+  httpResponseLatency: 'httpResponseLatency'
+}
+// networkOverview 当前周期返回数据对应的属性名称（与上一周期中的属性名称不一致,total）,之所以写在这里是因为有byte，packets，sessions3种，如果只有一种，可以直接写在customTableTitlesForAppPerformance
 export const bytesColumnNameGroup = {
-  total: 'bytesTotal',
+  total: 'bytesTotalRate',
   inbound: 'inboundBitsRate',
   outbound: 'outboundBitsRate',
   internal: 'internalBitsRate',
   through: 'throughBitsRate'
 }
-
 export const packetsColumnNameGroup = {
-  total: 'packetsTotal',
+  total: 'packetsTotalRate',
   inbound: 'inboundPacketsRate',
   outbound: 'outboundPacketsRate',
   internal: 'internalPacketsRate',
   through: 'throughPacketsRate'
 }
-
 export const sessionsColumnNameGroup = {
   total: 'sessionsRate'
 }
 
-//不同表格类型对应的相关数据
+export const bytesCycleColumnNameGroup = {
+  total: 'bytesRate'
+}
+export const bytesCycleColumnNameGroupForNmp = {
+  through: 'throughBitsRate'
+}
+export const packetsCycleColumnNameGroup = {
+  total: 'packetsRate'
+}
+export const sessionsCycleColumnNameGroup = {
+  total: 'sessionsRate'
+}
+
+// 不同表格类型对应的相关数据
 export const networkTable = {
-  networkOverview:{
-    tabList:networkOverviewTabList,//tab列表
-    column:customTableTitlesForNetworkOverview,//列
-    url:networkOverviewSearchUrl,//接口url
-    hasMetricSearch:true,//顶部是否有metric下拉列表
-    panelIdOfThirdMenu:drillDownPanelTypeMapping.networkOverview,
-    bytesColumnNameGroup:bytesColumnNameGroup,
-    packetsColumnNameGroup:packetsColumnNameGroup,
-    sessionsColumnNameGroup:sessionsColumnNameGroup
+  networkOverview: {
+    tabList: networkOverviewTabList, // tab列表
+    column: customTableTitlesForNetworkOverview, // 列
+    url: networkOverviewSearchUrl, // 接口url
+    hasMetricSearch: true, // 顶部是否有metric下拉列表
+    panelIdOfThirdMenu: drillDownPanelTypeMapping.networkOverview,
+    bytesColumnNameGroup: bytesColumnNameGroup,
+    packetsColumnNameGroup: packetsColumnNameGroup,
+    sessionsColumnNameGroup: sessionsColumnNameGroup,
+    bytesCycleColumnNameGroup: bytesCycleColumnNameGroup,
+    packetsCycleColumnNameGroup: packetsCycleColumnNameGroup,
+    sessionsCycleColumnNameGroup: sessionsCycleColumnNameGroup
   },
-  networkAppPerformance:{
-    tabList:networkAppPerformanceTabList,
-    column:customTableTitlesForAppPerformance,
-    url:npmSearchUrl,
-    hasMetricSearch:false,//是否有metric下拉列表
-    panelIdOfThirdMenu:drillDownPanelTypeMapping.npmThirdMenu,
-    bytesColumnNameGroup:{},//无metric下拉列表条件，用不到此3个属性
-    packetsColumnNameGroup:{},//无metric下拉列表条件，用不到此3个属性
-    sessionsColumnNameGroup:{}//无metric下拉列表条件，用不到此3个属性
+  networkAppPerformance: {
+    tabList: networkAppPerformanceTabList,
+    column: customTableTitlesForAppPerformance,
+    url: npmSearchUrl,
+    hasMetricSearch: false, // 是否有metric下拉列表
+    panelIdOfThirdMenu: drillDownPanelTypeMapping.npmThirdMenu,
+    bytesColumnNameGroup: bytesColumnNameGroupForNpm,
+    bytesCycleColumnNameGroup: bytesCycleColumnNameGroupForNmp,
+    packetsColumnNameGroup: {}, // 无metric下拉列表条件，用不到此属性
+    sessionsColumnNameGroup: {}// 无metric下拉列表条件，用不到此属性
   }
 }
 
@@ -864,7 +986,7 @@ export const iso36112 = {
   MN: 'mongoliaLow'
 }
 
-export const countryNameIdMapping = {"Afghanistan":"AF","Albania":"AL","Algeria":"DZ","American Samoa":"AS","Andorra":"AD","Angola":"AO","Anguilla":"AI","Antarctica":"AQ","Antigua and Barbuda":"AG","Argentina":"AR","Armenia":"AM","Aruba":"AW","Australia":"AU","Austria":"AT","Azerbaijan":"AZ","Bahamas (the)":"BS","Bahrain":"BH","Bangladesh":"BD","Barbados":"BB","Belarus":"BY","Belgium":"BE","Belize":"BZ","Benin":"BJ","Bermuda":"BM","Åland Islands":"AX","Bhutan":"BT","Bolivia (Plurinational State of)":"BO","Bonaire, Sint Eustatius and Saba":"BQ","Bosnia and Herzegovina":"BA","Botswana":"BW","Bouvet Island":"BV","Brazil":"BR","British Indian Ocean Territory (the)":"IO","Brunei Darussalam":"BN","Bulgaria":"BG","Burkina Faso":"BF","Burundi":"BI","Cabo Verde":"CV","Cambodia":"KH","Cameroon":"CM","Canada":"CA","Cayman Islands (the)":"KY","Central African Republic (the)":"CF","Chad":"TD","Chile":"CL","China":"CN","Christmas Island":"CX","Cocos (Keeling) Islands (the)":"CC","Colombia":"CO","Comoros (the)":"KM","Congo (the Democratic Republic of the)":"CD","Congo (the)":"CG","Cook Islands (the)":"CK","Costa Rica":"CR","Croatia":"HR","Cuba":"CU","Curaçao":"CW","Cyprus":"CY","Czechia":"CZ","Côte d'Ivoire":"CI","Denmark":"DK","Djibouti":"DJ","Dominica":"DM","Dominican Republic (the)":"DO","Ecuador":"EC","Egypt":"EG","El Salvador":"SV","Equatorial Guinea":"GQ","Eritrea":"ER","Estonia":"EE","Eswatini":"SZ","Ethiopia":"ET","Falkland Islands (the) [Malvinas]":"FK","Faroe Islands (the)":"FO","Fiji":"FJ","Finland":"FI","France":"FR","French Guiana":"GF","French Polynesia":"PF","French Southern Territories (the)":"TF","Gabon":"GA","Gambia (the)":"GM","Georgia":"GE","Germany":"DE","Ghana":"GH","Gibraltar":"GI","Greece":"GR","Greenland":"GL","Grenada":"GD","Guadeloupe":"GP","Guam":"GU","Guatemala":"GT","Guernsey":"GG","Guinea":"GN","Guinea-Bissau":"GW","Guyana":"GY","Haiti":"HT","Heard Island and McDonald Islands":"HM","Holy See (the)":"VA","Honduras":"HN","Hong Kong":"HK","Hungary":"HU","Iceland":"IS","India":"IN","Indonesia":"ID","Iran (Islamic Republic of)":"IR","Iraq":"IQ","Ireland":"IE","Isle of Man":"IM","Israel":"IL","Italy":"IT","Jamaica":"JM","Japan":"JP","Jersey":"JE","Jordan":"JO","Kazakhstan":"KZ","Kenya":"KE","Kiribati":"KI","Korea (the Democratic People's Republic of)":"KP","Korea (the Republic of)":"KR","Kuwait":"KW","Kyrgyzstan":"KG","Lao People's Democratic Republic (the)":"LA","Latvia":"LV","Lebanon":"LB","Lesotho":"LS","Liberia":"LR","Libya":"LY","Liechtenstein":"LI","Lithuania":"LT","Luxembourg":"LU","Macao":"MO","Madagascar":"MG","Malawi":"MW","Malaysia":"MY","Maldives":"MV","Mali":"ML","Malta":"MT","Marshall Islands (the)":"MH","Martinique":"MQ","Mauritania":"MR","Mauritius":"MU","Mayotte":"YT","Mexico":"MX","Micronesia (Federated States of)":"FM","Moldova (the Republic of)":"MD","Monaco":"MC","Mongolia":"MN","Montenegro":"ME","Montserrat":"MS","Morocco":"MA","Mozambique":"MZ","Myanmar":"MM","Namibia":"NA","Nauru":"NR","Nepal":"NP","Netherlands (the)":"NL","New Caledonia":"NC","New Zealand":"NZ","Nicaragua":"NI","Niger (the)":"NE","Nigeria":"NG","Niue":"NU","Norfolk Island":"NF","North Macedonia":"MK","Northern Mariana Islands (the)":"MP","Norway":"NO","Oman":"OM","Pakistan":"PK","Palau":"PW","Palestine, State of":"PS","Panama":"PA","Papua New Guinea":"PG","Paraguay":"PY","Peru":"PE","Philippines (the)":"PH","Pitcairn":"PN","Poland":"PL","Portugal":"PT","Puerto Rico":"PR","Qatar":"QA","Romania":"RO","Russian Federation (the)":"RU","Rwanda":"RW","Réunion":"RE","Saint Barthélemy":"BL","Saint Helena, Ascension and Tristan da Cunha":"SH","Saint Kitts and Nevis":"KN","Saint Lucia":"LC","Saint Martin (French part)":"MF","Saint Pierre and Miquelon":"PM","Saint Vincent and the Grenadines":"VC","Samoa":"WS","San Marino":"SM","Sao Tome and Principe":"ST","Saudi Arabia":"SA","Senegal":"SN","Serbia":"RS","Seychelles":"SC","Sierra Leone":"SL","Singapore":"SG","Sint Maarten (Dutch part)":"SX","Slovakia":"SK","Slovenia":"SI","Solomon Islands":"SB","Somalia":"SO","South Africa":"ZA","South Georgia and the South Sandwich Islands":"GS","South Sudan":"SS","Spain":"ES","Sri Lanka":"LK","Sudan (the)":"SD","Suriname":"SR","Svalbard and Jan Mayen":"SJ","Sweden":"SE","Switzerland":"CH","Syrian Arab Republic (the)":"SY","Taiwan (Province of China)":"TW","Tajikistan":"TJ","Tanzania, the United Republic of":"TZ","Thailand":"TH","Timor-Leste":"TL","Togo":"TG","Tokelau":"TK","Tonga":"TO","Trinidad and Tobago":"TT","Tunisia":"TN","Turkey":"TR","Turkmenistan":"TM","Turks and Caicos Islands (the)":"TC","Tuvalu":"TV","Uganda":"UG","Ukraine":"UA","United Arab Emirates (the)":"AE","United Kingdom of Great Britain and Northern Ireland (the)":"GB","United States Minor Outlying Islands (the)":"UM","United States of America (the)":"US","Uruguay":"UY","Uzbekistan":"UZ","Vanuatu":"VU","Venezuela (Bolivarian Republic of)":"VE","Viet Nam":"VN","Virgin Islands (British)":"VG","Virgin Islands (U.S.)":"VI","Wallis and Futuna":"WF","Western Sahara*":"EH","Yemen":"YE","Zambia":"ZM","Zimbabwe":"ZW"}
+export const countryNameIdMapping = { Afghanistan: 'AF', Albania: 'AL', Algeria: 'DZ', 'American Samoa': 'AS', Andorra: 'AD', Angola: 'AO', Anguilla: 'AI', Antarctica: 'AQ', 'Antigua and Barbuda': 'AG', Argentina: 'AR', Armenia: 'AM', Aruba: 'AW', Australia: 'AU', Austria: 'AT', Azerbaijan: 'AZ', 'Bahamas (the)': 'BS', Bahrain: 'BH', Bangladesh: 'BD', Barbados: 'BB', Belarus: 'BY', Belgium: 'BE', Belize: 'BZ', Benin: 'BJ', Bermuda: 'BM', 'Åland Islands': 'AX', Bhutan: 'BT', 'Bolivia (Plurinational State of)': 'BO', 'Bonaire, Sint Eustatius and Saba': 'BQ', 'Bosnia and Herzegovina': 'BA', Botswana: 'BW', 'Bouvet Island': 'BV', Brazil: 'BR', 'British Indian Ocean Territory (the)': 'IO', 'Brunei Darussalam': 'BN', Bulgaria: 'BG', 'Burkina Faso': 'BF', Burundi: 'BI', 'Cabo Verde': 'CV', Cambodia: 'KH', Cameroon: 'CM', Canada: 'CA', 'Cayman Islands (the)': 'KY', 'Central African Republic (the)': 'CF', Chad: 'TD', Chile: 'CL', China: 'CN', 'Christmas Island': 'CX', 'Cocos (Keeling) Islands (the)': 'CC', Colombia: 'CO', 'Comoros (the)': 'KM', 'Congo (the Democratic Republic of the)': 'CD', 'Congo (the)': 'CG', 'Cook Islands (the)': 'CK', 'Costa Rica': 'CR', Croatia: 'HR', Cuba: 'CU', Curaçao: 'CW', Cyprus: 'CY', Czechia: 'CZ', "Côte d'Ivoire": 'CI', Denmark: 'DK', Djibouti: 'DJ', Dominica: 'DM', 'Dominican Republic (the)': 'DO', Ecuador: 'EC', Egypt: 'EG', 'El Salvador': 'SV', 'Equatorial Guinea': 'GQ', Eritrea: 'ER', Estonia: 'EE', Eswatini: 'SZ', Ethiopia: 'ET', 'Falkland Islands (the) [Malvinas]': 'FK', 'Faroe Islands (the)': 'FO', Fiji: 'FJ', Finland: 'FI', France: 'FR', 'French Guiana': 'GF', 'French Polynesia': 'PF', 'French Southern Territories (the)': 'TF', Gabon: 'GA', 'Gambia (the)': 'GM', Georgia: 'GE', Germany: 'DE', Ghana: 'GH', Gibraltar: 'GI', Greece: 'GR', Greenland: 'GL', Grenada: 'GD', Guadeloupe: 'GP', Guam: 'GU', Guatemala: 'GT', Guernsey: 'GG', Guinea: 'GN', 'Guinea-Bissau': 'GW', Guyana: 'GY', Haiti: 'HT', 'Heard Island and McDonald Islands': 'HM', 'Holy See (the)': 'VA', Honduras: 'HN', 'Hong Kong': 'HK', Hungary: 'HU', Iceland: 'IS', India: 'IN', Indonesia: 'ID', 'Iran (Islamic Republic of)': 'IR', Iraq: 'IQ', Ireland: 'IE', 'Isle of Man': 'IM', Israel: 'IL', Italy: 'IT', Jamaica: 'JM', Japan: 'JP', Jersey: 'JE', Jordan: 'JO', Kazakhstan: 'KZ', Kenya: 'KE', Kiribati: 'KI', "Korea (the Democratic People's Republic of)": 'KP', 'Korea (the Republic of)': 'KR', Kuwait: 'KW', Kyrgyzstan: 'KG', "Lao People's Democratic Republic (the)": 'LA', Latvia: 'LV', Lebanon: 'LB', Lesotho: 'LS', Liberia: 'LR', Libya: 'LY', Liechtenstein: 'LI', Lithuania: 'LT', Luxembourg: 'LU', Macao: 'MO', Madagascar: 'MG', Malawi: 'MW', Malaysia: 'MY', Maldives: 'MV', Mali: 'ML', Malta: 'MT', 'Marshall Islands (the)': 'MH', Martinique: 'MQ', Mauritania: 'MR', Mauritius: 'MU', Mayotte: 'YT', Mexico: 'MX', 'Micronesia (Federated States of)': 'FM', 'Moldova (the Republic of)': 'MD', Monaco: 'MC', Mongolia: 'MN', Montenegro: 'ME', Montserrat: 'MS', Morocco: 'MA', Mozambique: 'MZ', Myanmar: 'MM', Namibia: 'NA', Nauru: 'NR', Nepal: 'NP', 'Netherlands (the)': 'NL', 'New Caledonia': 'NC', 'New Zealand': 'NZ', Nicaragua: 'NI', 'Niger (the)': 'NE', Nigeria: 'NG', Niue: 'NU', 'Norfolk Island': 'NF', 'North Macedonia': 'MK', 'Northern Mariana Islands (the)': 'MP', Norway: 'NO', Oman: 'OM', Pakistan: 'PK', Palau: 'PW', 'Palestine, State of': 'PS', Panama: 'PA', 'Papua New Guinea': 'PG', Paraguay: 'PY', Peru: 'PE', 'Philippines (the)': 'PH', Pitcairn: 'PN', Poland: 'PL', Portugal: 'PT', 'Puerto Rico': 'PR', Qatar: 'QA', Romania: 'RO', 'Russian Federation (the)': 'RU', Rwanda: 'RW', Réunion: 'RE', 'Saint Barthélemy': 'BL', 'Saint Helena, Ascension and Tristan da Cunha': 'SH', 'Saint Kitts and Nevis': 'KN', 'Saint Lucia': 'LC', 'Saint Martin (French part)': 'MF', 'Saint Pierre and Miquelon': 'PM', 'Saint Vincent and the Grenadines': 'VC', Samoa: 'WS', 'San Marino': 'SM', 'Sao Tome and Principe': 'ST', 'Saudi Arabia': 'SA', Senegal: 'SN', Serbia: 'RS', Seychelles: 'SC', 'Sierra Leone': 'SL', Singapore: 'SG', 'Sint Maarten (Dutch part)': 'SX', Slovakia: 'SK', Slovenia: 'SI', 'Solomon Islands': 'SB', Somalia: 'SO', 'South Africa': 'ZA', 'South Georgia and the South Sandwich Islands': 'GS', 'South Sudan': 'SS', Spain: 'ES', 'Sri Lanka': 'LK', 'Sudan (the)': 'SD', Suriname: 'SR', 'Svalbard and Jan Mayen': 'SJ', Sweden: 'SE', Switzerland: 'CH', 'Syrian Arab Republic (the)': 'SY', 'Taiwan (Province of China)': 'TW', Tajikistan: 'TJ', 'Tanzania, the United Republic of': 'TZ', Thailand: 'TH', 'Timor-Leste': 'TL', Togo: 'TG', Tokelau: 'TK', Tonga: 'TO', 'Trinidad and Tobago': 'TT', Tunisia: 'TN', Turkey: 'TR', Turkmenistan: 'TM', 'Turks and Caicos Islands (the)': 'TC', Tuvalu: 'TV', Uganda: 'UG', Ukraine: 'UA', 'United Arab Emirates (the)': 'AE', 'United Kingdom of Great Britain and Northern Ireland (the)': 'GB', 'United States Minor Outlying Islands (the)': 'UM', 'United States of America (the)': 'US', Uruguay: 'UY', Uzbekistan: 'UZ', Vanuatu: 'VU', 'Venezuela (Bolivarian Republic of)': 'VE', 'Viet Nam': 'VN', 'Virgin Islands (British)': 'VG', 'Virgin Islands (U.S.)': 'VI', 'Wallis and Futuna': 'WF', 'Western Sahara*': 'EH', Yemen: 'YE', Zambia: 'ZM', Zimbabwe: 'ZW' }
 
 export const reg = {
   // 不严格ipv4
diff --git a/src/views/charts2/Chart.vue b/src/views/charts2/Chart.vue
index 08fc0dbf..67ac0179 100644
--- a/src/views/charts2/Chart.vue
+++ b/src/views/charts2/Chart.vue
@@ -231,10 +231,6 @@ export default {
           get(requestUrl, this.queryParams).then(response => {
             if (response.code === 200) {
               this.chartData = response.data.result
-            } else {
-              if (this.chart.type === 601) {
-                this.$refs['tab' + this.chart.id].loading = false
-              }
             }
           })
         }
diff --git a/src/views/charts2/ChartList.vue b/src/views/charts2/ChartList.vue
index b0c86fb3..167b5899 100644
--- a/src/views/charts2/ChartList.vue
+++ b/src/views/charts2/ChartList.vue
@@ -36,7 +36,7 @@
 import VueGridLayout from 'vue-grid-layout'
 import _ from 'lodash'
 import Chart from '@/views/charts2/Chart'
-import { panelTypeAndRouteMapping, storageKey,drillDownPanelTypeMapping } from '@/utils/constants'
+import { panelTypeAndRouteMapping, storageKey, drillDownPanelTypeMapping } from '@/utils/constants'
 import { typeMapping } from '@/views/charts2/chart-tools'
 export default {
   name: 'ChartList',
@@ -66,7 +66,7 @@ export default {
       if (!_.isEmpty(n)) {
         if (this.panelType === panelTypeAndRouteMapping.networkAppPerformance) {
           this.layout = n.filter(c => c.type === typeMapping.npm.npmTabs || c.params.tabIndex === this.npmTabIndex)
-        }else if(Object.values(drillDownPanelTypeMapping).indexOf(this.panelType)>=-1){
+        } else if (Object.values(drillDownPanelTypeMapping).indexOf(this.panelType) >= -1) {
           this.layout = n.filter(c => c.type === typeMapping.npm.npmTabs || c.params.tabIndex === this.npmTabIndex || !c.params.hasOwnProperty('tabIndex'))
         } else {
           this.layout = [...n]
@@ -86,7 +86,7 @@ export default {
     },
     npmTabIndex (n) {
       if (this.panelType === panelTypeAndRouteMapping.networkAppPerformance ||
-          Object.values(drillDownPanelTypeMapping).indexOf(this.panelType)>=-1) {
+          Object.values(drillDownPanelTypeMapping).indexOf(this.panelType) >= -1) {
         this.layout = this.chartList.filter(c => c.type === typeMapping.npm.npmTabs || c.params.tabIndex === this.npmTabIndex || !c.params.hasOwnProperty('tabIndex'))
       }
     }
diff --git a/src/views/charts2/Panel.vue b/src/views/charts2/Panel.vue
index fc024363..2919ebef 100644
--- a/src/views/charts2/Panel.vue
+++ b/src/views/charts2/Panel.vue
@@ -1,7 +1,14 @@
 <template>
   <div class="panel-box">
     <div class="panel__header">
-      <div class="panel__title">{{panelName?panelName:(panel.i18n ? $t(panel.i18n) : panel.name)}}</div>
+      <div class="panel__title">{{panelName?panelName:(panel.i18n ? $t(panel.i18n) : panel.name)}}
+        <div  v-if="score" class="score">
+          <div class="circle-icon"  v-if="score <= 2" :class="{'data-score-red': score <= 2}" ></div>
+          <div class="circle-icon"  v-else-if="score <= 4" :class="{'data-score-yellow': score <= 4}" ></div>
+          <div class="circle-icon"  v-else-if="score <= 6" :class="{'data-score-green': score <= 6}" ></div>
+          Score:{{score}}
+        </div>
+      </div>
       <div class="panel__time">
         <date-time-range
             class="date-time-range"
@@ -31,13 +38,15 @@
 </template>
 
 <script>
-  import {useRoute, useRouter} from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 import { ref } from 'vue'
-import { panelTypeAndRouteMapping } from '@/utils/constants'
+import { panelTypeAndRouteMapping, bytesColumnNameGroupForNpm, scoreUrl, customTableTitlesForAppPerformance } from '@/utils/constants'
 import { getPanelList, getChartList } from '@/utils/api'
-import { getNowTime } from '@/utils/date-util'
+import { getNowTime, getSecond } from '@/utils/date-util'
 import { getTypeCategory } from '@/views/charts/charts/tools'
+import { computeScore } from '@/utils/tools'
 import ChartList from '@/views/charts2/ChartList'
+import { get } from '@/utils/http'
 
 export default {
   name: 'Panel',
@@ -53,11 +62,58 @@ export default {
       chartList: [], // 普通panel的chart
       panelLock: true,
       extraParams: {},
-      panelName: ''
+      panelName: '',
+      score: null
     }
   },
   async mounted () {
     this.panelName = this.$store.getters.getPanelName
+    if (this.panelName && this.$route.path === '/panel/networkAppPerformance') {
+      // let columnName = this.$store.getters.getBreadcrumbColumnName
+      const columnValue = this.$store.getters.getBreadcrumbColumnValue
+      const queryParams = {
+        startTime: getSecond(this.timeFilter.startTime),
+        endTime: getSecond(this.timeFilter.endTime),
+        type: this.$store.getters.getDimensionType,
+        params: columnValue || ''
+      }
+      const requestGroup = []
+      scoreUrl.forEach(url => {
+        if (url) {
+          const request = get(url, queryParams, true)
+          requestGroup.push(request)
+        }
+      })
+      const scoreGroup = []
+      let score = 0
+      Promise.all(requestGroup).then(res => {
+        res.forEach(t => {
+          if (t.code === 200) {
+            const data = t.data.result ? t.data.result[0] : null
+            if (data) {
+              customTableTitlesForAppPerformance.forEach(item => {
+                if (data[bytesColumnNameGroupForNpm[item.prop]]) {
+                  score = computeScore(data, item.scoreType)
+                  scoreGroup.push(score)
+                } else {
+                  scoreGroup.push(0)
+                }
+              })
+            }
+          }
+        })
+      }).finally(() => {
+        scoreGroup.forEach(i => {
+          score = Number(score) + Number(i)
+        })
+        score = Math.ceil(score * 6)
+        if (score > 6) {
+          score = 6
+        }
+        this.score = score || 0
+      })
+    }
+
     await this.init()
     const vm = this
     this.emitter.on('reloadChartList', async function () {
@@ -74,14 +130,14 @@ export default {
     const panel = ref({})
     let panelType = 1 // 取得panel的type
     const { params } = useRoute()
-    let router = useRouter()
-    let thirdPanel = router.currentRoute.value.params.thirdPanel
-    let fourthPanel = router.currentRoute.value.params.fourthPanel
-    if(fourthPanel){
+    const router = useRouter()
+    const thirdPanel = router.currentRoute.value.params.thirdPanel
+    const fourthPanel = router.currentRoute.value.params.fourthPanel
+    if (fourthPanel) {
       panelType = Number(fourthPanel)
-    }else if(thirdPanel){
+    } else if (thirdPanel) {
       panelType = Number(thirdPanel)
-    }else {
+    } else {
       panelType = props.entity ? props.entity.type : panelTypeAndRouteMapping[params.typeName]
     }
 
@@ -131,11 +187,17 @@ export default {
         })
       }
     },
-    timeRefreshChange (startTime, endTime, dateRangeValue) {
-
+    reload (startTime, endTime, dateRangeValue) {
+      this.timeFilter = { startTime: startTime, endTime: endTime, dateRangeValue: dateRangeValue }
     },
-    reload () {
-
+    timeRefreshChange () {
+      // 不是自选时间
+      if (!this.$refs.dateTimeRange.isCustom) {
+        const value = this.timeFilter.dateRangeValue
+        this.$refs.dateTimeRange.quickChange(value)
+      } else {
+        this.timeFilter = JSON.parse(JSON.stringify(this.timeFilter))
+      }
     }
   }
 }
diff --git a/src/views/charts2/charts/networkOverview/NetworkOverviewApps.vue b/src/views/charts2/charts/networkOverview/NetworkOverviewApps.vue
index 292287e0..673db4bd 100644
--- a/src/views/charts2/charts/networkOverview/NetworkOverviewApps.vue
+++ b/src/views/charts2/charts/networkOverview/NetworkOverviewApps.vue
@@ -118,19 +118,20 @@
 
 <script>
 import unitConvert from '@/utils/unit-convert'
-import { storageKey, unitTypes } from '@/utils/constants'
+import {storageKey, unitTypes} from '@/utils/constants'
 import * as echarts from 'echarts'
-import { appListChartOption } from '@/views/charts2/charts/options/echartOption'
-import { shallowRef } from 'vue'
-import { get, put } from '@/utils/http'
-import { api } from '@/utils/api'
+import {appListChartOption} from '@/views/charts2/charts/options/echartOption'
+import {shallowRef} from 'vue'
+import {get, put} from '@/utils/http'
+import {api} from '@/utils/api'
 import _ from 'lodash'
-import { getSecond } from '@/utils/date-util'
-import { getChainRatio } from '@/utils/tools'
+import {getSecond} from '@/utils/date-util'
+import {getChainRatio} from '@/utils/tools'
 import loading from '@/components/common/Loading'
 import ChartNoData from '@/views/charts/charts/ChartNoData'
-import { appStackedLineTooltipFormatter } from '@/views/charts/charts/tools'
+import {appStackedLineTooltipFormatter} from '@/views/charts/charts/tools'
 import chartMixin from '@/views/charts2/chart-mixin'
+
 export default {
   name: 'NetworkOverviewApps',
   components: {
@@ -198,6 +199,12 @@ export default {
           window.removeEventListener('scroll', this.handleScroll, true)
         }
       }
+    },
+    timeFilter: {
+      deep: true,
+      handler (n) {
+        this.init()
+      }
     }
   },
   methods: {
@@ -320,8 +327,7 @@ export default {
           params.forEach(t => {
             t.seriesName = this.$t(t.seriesName)
           })
-          const str = appStackedLineTooltipFormatter(params)
-          return str
+          return appStackedLineTooltipFormatter(params)
         }
         chart.setOption(chartOption)
         this.myChart.push(chart)
diff --git a/src/views/charts2/charts/networkOverview/NetworkOverviewDdosDetection.vue b/src/views/charts2/charts/networkOverview/NetworkOverviewDdosDetection.vue
index 3b14a1ff..dedc6acf 100644
--- a/src/views/charts2/charts/networkOverview/NetworkOverviewDdosDetection.vue
+++ b/src/views/charts2/charts/networkOverview/NetworkOverviewDdosDetection.vue
@@ -40,6 +40,14 @@ export default {
       isNoData: false
     }
   },
+  watch: {
+    timeFilter: {
+      deep: true,
+      handler (n) {
+        this.ddosDetectDataRequests()
+      }
+    }
+  },
   methods: {
     ddosDetectDataRequests () {
       const params = {
diff --git a/src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue b/src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue
index 14fc237b..63ef5fe3 100644
--- a/src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue
+++ b/src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue
@@ -147,6 +147,12 @@ export default {
       this.$nextTick(() => {
         this.handleActiveBar(n)
       })
+    },
+    timeFilter: {
+      deep: true,
+      handler (n) {
+        this.init(this.echartsType, this.showMarkLine, 'active')
+      }
     }
   },
   methods: {
diff --git a/src/views/charts2/charts/networkOverview/NetworkOverviewPerformanceEvent.vue b/src/views/charts2/charts/networkOverview/NetworkOverviewPerformanceEvent.vue
index 86a60005..fee60b29 100644
--- a/src/views/charts2/charts/networkOverview/NetworkOverviewPerformanceEvent.vue
+++ b/src/views/charts2/charts/networkOverview/NetworkOverviewPerformanceEvent.vue
@@ -140,6 +140,12 @@ export default {
   watch: {
     loading (n) {
       this.toggleLoading(n)
+    },
+    timeFilter: {
+      deep: true,
+      handler (n) {
+        this.init()
+      }
     }
   },
   mounted () {
diff --git a/src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue b/src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue
index 986046b7..58daac25 100644
--- a/src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue
+++ b/src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue
@@ -37,17 +37,21 @@
                 <template  #default="scope" :column="item">
                   <template v-if="item.columnType === tableColumnType.chainRatio"  >
                     <div class="data-total" >
-                      {{scope.row[item.prop] ? unitConvert(scope.row[item.prop], unitTypes.number).join(' ') : '-'}}
-                      <div v-if="scope.row['trend'] === 'up'" class="data-total-trend data-total-trend-red">
-                        <i class="cn-icon-rise1 cn-icon"></i><span>{{scope.row['trendValue']}}</span>
-                      </div>
-                      <div v-else-if="scope.row['trend'] === 'down'" class="data-total-trend data-total-trend-green">
-                        <i class="cn-icon-decline cn-icon"></i><span>{{scope.row['trendValue']}}</span>
-                      </div>
-                      <div v-else-if="scope.row['trend'] === 'noChange'" class="data-total-trend data-total-trend-black">
-                        <i class="cn-icon-constant cn-icon"></i>
-                      </div>
-
+                      {{scope.row[item.prop]?((scope.row[item.prop][0]||scope.row[item.prop][0]===0)? unitConvert(scope.row[item.prop][0], unitTypes.number).join(' ') : '-'):'' }}
+                      <template v-if="scope.row[item.prop]">
+                        <div v-if="scope.row[item.prop][1] === 'up'" class="data-total-trend data-total-trend-red">
+                          <i class="cn-icon-rise1 cn-icon"></i><span>{{scope.row[item.prop][2]}}</span>
+                        </div>
+                        <div v-else-if="scope.row[item.prop][1] === 'down'" class="data-total-trend data-total-trend-green">
+                          <i class="cn-icon-decline cn-icon"></i><span>{{scope.row[item.prop][2]}}</span>
+                        </div>
+                        <div v-else-if="scope.row[item.prop][1] === 'noChange'" class="data-total-trend data-total-trend-black">
+                          <i class="cn-icon-constant cn-icon"></i>
+                        </div>
+                      </template>
+                      <template  v-else>
+                        -
+                      </template>
                     </div>
                   </template>
                   <template v-else-if="item.columnType === tableColumnType.dillDown" >
@@ -145,10 +149,11 @@
 </template>
 <script>
 import { ref } from 'vue'
-import {operationType, unitTypes,networkTable,tableColumnType } from '@/utils/constants'
+import { operationType, unitTypes, networkTable, tableColumnType, cycle } from '@/utils/constants'
 import { get } from '@/utils/http'
 import unitConvert from '@/utils/unit-convert'
-import { getChainRatio } from '@/utils/tools'
+import { getChainRatio, computeScore } from '@/utils/tools'
+import { getSecond } from '@/utils/date-util'
 import chartMixin from '@/views/charts2/chart-mixin'
 
 export default {
@@ -177,28 +182,22 @@ export default {
         }
       ],
       customTableTitles: [],
-      list: [],//当前状态列表
-      networkTabList: [],//原始状态列表
+      list: [], // 当前状态列表
+      networkTabList: [], // 原始状态列表
       showBackground: false,
       tableData: [],
       showTabs: true,
-      columnNameGroup: {
-        total: 'bytesTotal',
-        inbound: 'inboundBitsRate',
-        outbound: 'outboundBitsRate',
-        internal: 'internalBitsRate',
-        through: 'throughBitsRate'
-      },
+      columnNameGroup: {},
+      cycleColumnNameGroup: {},
       metricUnit: 'bytes',
       loading: false,
-      drillDown: false,
-      tableColumnType:tableColumnType,
-      curTable:{},//当前的表格类型
-      tableType:'',
-      hasMetricSearch:true,
-      activeTab:'',
-      activeCustomize:'',
-      networkSearchUrl:{}
+      tableColumnType: tableColumnType,
+      curTable: {}, // 当前的表格类型
+      tableType: '',
+      hasMetricSearch: true,
+      activeTab: '',
+      activeCustomize: '',
+      networkSearchUrl: {}
     }
   },
   props: {
@@ -231,15 +230,16 @@ export default {
       const label = curTab.label
       if (this.metric === 'Bits/s') {
         this.columnNameGroup = this.curTable.bytesColumnNameGroup
+        this.cycleColumnNameGroup = this.curTable.bytesCycleColumnNameGroup
         this.orderBy = 'bytesTotal'
         this.metricUnit = 'bytes'
         const titleGroup = []
         if (this.customTableTitles.length === 2) {
-          this.curTable.column.forEach((item,index) => {
+          this.curTable.column.forEach((item, index) => {
             if (item.tabColumn) {
               item.label = label
             }
-            if(index===1){
+            if (index === 1) {
               item.checked = this.customTableTitles[1].checked
             }
             titleGroup.push(item)
@@ -253,18 +253,18 @@ export default {
           })
         }
         this.customTableTitles = titleGroup
-
       } else if (this.metric === 'Packets/s') {
         this.columnNameGroup = this.curTable.packetsColumnNameGroup
+        this.cycleColumnNameGroup = this.curTable.packetsCycleColumnNameGroup
         this.orderBy = 'packetsTotal'
         this.metricUnit = 'packets'
         const titleGroup = []
         if (this.customTableTitles.length === 2) {
-          this.curTable.column.forEach((item,index) => {
+          this.curTable.column.forEach((item, index) => {
             if (item.tabColumn) {
               item.label = label
             }
-            if(index===1){
+            if (index === 1) {
               item.checked = this.customTableTitles[1].checked
             }
             titleGroup.push(item)
@@ -280,6 +280,7 @@ export default {
         this.customTableTitles = titleGroup
       } else if (this.metric === 'Sessions/s') {
         this.columnNameGroup = this.curTable.sessionsColumnNameGroup
+        this.cycleColumnNameGroup = this.curTable.sessionsCycleColumnNameGroup
         this.orderBy = 'sessions'
         this.metricUnit = 'sessions'
         let totalChecked = true
@@ -288,9 +289,10 @@ export default {
             totalChecked = item.checked
           }
         })
+        const totalColumn = this.customTableTitles.filter(item => item.prop === 'total')
         this.customTableTitles = [
-          { label: label, prop: 'tab', checked: true, tabColumn: true,columnType:this.curTable.column[0].columnType},
-          { label: 'network.total', prop: 'total', checked: totalChecked, tabColumn: false,columnType:this.curTable.column[1].columnType}
+          { label: label, prop: 'tab', checked: true, tabColumn: true, columnType: this.curTable.column[0].columnType },
+          { label: 'network.total', prop: 'total', checked: totalChecked, tabColumn: false, columnType: this.curTable.column[1].columnType, cycleDataUrl: totalColumn ? totalColumn.cycleDataUrl : '', isInMainUrl: true }
         ]
       }
       let queryParams = {
@@ -367,7 +369,8 @@ export default {
           this.$store.commit('setNetworkOverviewCurrentTab', curTab)
         }
         this.showTabs = true
-      } else if (curOperationType === operationType.secondMenu) { // 点击的为第二级菜单、或者点击菜单进入、
+      } else if (curOperationType === operationType.secondMenu || curOperationType === operationType.mainMenu) { // 点击的为第二级菜单、或者点击菜单进入、
+        this.list = this.$_.cloneDeep(this.curTable.tabList)
         if (curTab) { // tab切换
           this.activeTab = curTab.label
           this.customTableTitles[0].label = curTab.label
@@ -428,20 +431,19 @@ export default {
         }
       }
 
-      this.tableData = []
       const tabList = []
       const tableDataTmp = this.chartData.map(item => {
         tabList.push(item[curTab.prop])
-        return {
-          tab: item[curTab.prop],
-          total: item[this.columnNameGroup.total],
-          inbound: item[this.columnNameGroup.inbound],
-          outbound: item[this.columnNameGroup.outbound],
-          internal: item[this.columnNameGroup.internal],
-          through: item[this.columnNameGroup.through]
-        }
+        const otherData = { tab: item[curTab.prop] }
+        Object.keys(this.columnNameGroup).forEach(i => {
+          otherData[i] = item[this.columnNameGroup[i]]
+        })
+        return otherData
       })
-      const queryParams = {}
+      const queryParams = {
+        startTime: getSecond(this.timeFilter.startTime),
+        endTime: getSecond(this.timeFilter.endTime)
+      }
       if (tabList.length > 0) {
         const conditionStr = tabList.filter(item => item != '')
         queryParams.params = conditionStr.toString()
@@ -454,60 +456,143 @@ export default {
       if (condition) {
         queryParams.q = condition
       }
-      get(this.gerCycleUrl(), queryParams).then(response => {
-        if (response.code === 200) {
-          cycleTotalList = response.data.result
-          tableDataTmp.forEach(item => {
-            const cycle = cycleTotalList.find(i => i[curTab.prop] === item.tab)
-            let trend = ''//空：无图标；up：向上的图标；down：向下的图标；noChange：横向箭头图标
-            let trendPercent = ''
-            if (cycle) {
-              const totalDiff = item.total - cycle[this.metricUnit]
-              if (cycle[this.metricUnit] && cycle[this.metricUnit]!=0) {
-                let chainRatio = getChainRatio(item.total, cycle[this.metricUnit])
-                if (chainRatio === '-') {
-                  trend = ''
-                  trendPercent = ''
-                }else {
-                  trendPercent = Math.round(Math.abs(chainRatio)* 100)
-                  if (totalDiff > 0) {
-                    trend = 'up'
-                    trendPercent = trendPercent + '%'
-                  } else if (totalDiff < 0) {
-                    trend = 'down'
-                    trendPercent = trendPercent + '%'
-                  } else {
-                    trend = 'noChange'//横向图标
-                  }
-                  if (trendPercent === '0%') {
-                    trend = 'noChange'
-                    trendPercent = ''
+
+      const self = this
+      this.customTableTitles.forEach(tableColumn => {
+        if (tableColumn.columnType === tableColumnType.chainRatio && tableColumn.isInMainUrl) {
+          get(self.gerCycleUrl(), queryParams).then(response => {
+            if (response.code === 200) {
+              cycleTotalList = response.data.result
+              tableDataTmp.forEach(item => {
+                const cycle = cycleTotalList.find(i => i[curTab.prop] === item.tab)
+                let trend = ''// 空：无图标；up：向上的图标；down：向下的图标；noChange：横向箭头图标
+                let trendPercent = ''
+                if (cycle) {
+                  const curVal = Number(item[tableColumn.prop])
+                  const preVal = Number(cycle[self.cycleColumnNameGroup[tableColumn.prop]])
+                  if (preVal && preVal != 0) {
+                    const totalDiff = curVal - preVal
+                    const chainRatio = getChainRatio(curVal, preVal)
+                    if (chainRatio === '-') {
+                      trend = ''
+                      trendPercent = ''
+                    } else {
+                      trendPercent = Math.round(Math.abs(chainRatio) * 100)
+                      if (totalDiff > 0) {
+                        trend = 'up'
+                        trendPercent = trendPercent + '%'
+                      } else if (totalDiff < 0) {
+                        trend = 'down'
+                        trendPercent = trendPercent + '%'
+                      } else {
+                        trend = 'noChange'// 横向图标
+                      }
+                      if (trendPercent === '0%') {
+                        trend = 'noChange'
+                        trendPercent = ''
+                      }
+                    }
                   }
                 }
-              }
+                item[tableColumn.prop] = [item[tableColumn.prop], trend, trendPercent]
+              })
             }
-            this.tableData.push({
-              tab: item.tab,
-              total: item.total,
-              trend: trend,
-              trendValue: trendPercent,
-              inbound: item.inbound,
-              outbound: item.outbound,
-              internal: item.internal,
-              through: item.through
+          }).catch(e => {
+            console.log(e)
+          }).finally(e => {
+            this.tableData = tableDataTmp
+            // 查询需要单独查询的，且需要展示环比图标，列的当前周期的数据
+            this.customTableTitles.forEach(tableColumn => {
+              if (tableColumn.columnType === tableColumnType.chainRatio && !tableColumn.isInMainUrl) {
+                get(self.gerColumnUrl(tableColumn), queryParams).then(response => {
+                  if (response.code === 200) {
+                    const columnList = response.data.result
+                    self.tableData.forEach((item, i) => {
+                      const data = columnList.find(i => i[curTab.prop] === item.tab)
+                      if (data) {
+                        item[tableColumn.prop] = data[self.columnNameGroup[tableColumn.prop]]
+                        let score = 0
+                        if (data) {
+                          score = computeScore(data, tableColumn.scoreType)
+                        }
+                        item.scoreGroup = item.scoreGroup ? [...item.scoreGroup, score] : [score]
+                        if (item && item.scoreGroup && item.scoreGroup.length >= 5) {
+                          // self.tableData.forEach(data => {
+                          let score = 0
+                          item.scoreGroup.forEach(i => {
+                            score = Number(score) + Number(i)
+                          })
+                          score = Math.ceil(score * 6)
+                          if (score > 6) {
+                            score = 6
+                          }
+                          item.score = score || 0
+                        }
+                      }
+                    })
+                  }
+                }).catch(e => {
+                  console.log(e)
+                  self.toggleLoading(false)
+                }).finally(e => {
+                  // 查询需要单独查询的，且需要展示环比图标，列的前一周期的数据
+                  if (tableColumn.cycle) {
+                    const queryCycleParams = {
+                      ...queryParams,
+                      cycle: tableColumn.cycle
+                    }
+                    get(self.gerColumnUrl(tableColumn), queryCycleParams).then(response => {
+                      if (response.code === 200) {
+                        cycleTotalList = response.data.result
+                        self.tableData.forEach(item => {
+                          const cycle = cycleTotalList.find(i => i[curTab.prop] === item.tab)
+                          let trend = ''// 空：无图标；up：向上的图标；down：向下的图标；noChange：横向箭头图标
+                          let trendPercent = ''
+                          if (cycle) {
+                            const curVal = Number(item[tableColumn.prop])
+                            // let preVal = Number(cycle[self.metricUnit])
+                            const preVal = Number(cycle[self.columnNameGroup[tableColumn.prop]])
+                            if (preVal && preVal != 0) {
+                              const totalDiff = curVal - preVal
+                              const chainRatio = getChainRatio(curVal, preVal)
+                              if (chainRatio === '-') {
+                                trend = ''
+                                trendPercent = ''
+                              } else {
+                                trendPercent = Math.round(Math.abs(chainRatio) * 100)
+                                if (totalDiff > 0) {
+                                  trend = 'up'
+                                  trendPercent = trendPercent + '%'
+                                } else if (totalDiff < 0) {
+                                  trend = 'down'
+                                  trendPercent = trendPercent + '%'
+                                } else {
+                                  trend = 'noChange'// 横向图标
+                                }
+                                if (trendPercent === '0%') {
+                                  trend = 'noChange'
+                                  trendPercent = ''
+                                }
+                              }
+                            }
+                          }
+                          item[tableColumn.prop] = [item[tableColumn.prop] ? item[tableColumn.prop] : '', trend, trendPercent]
+                        })
+                      }
+                    }).catch(e => {
+                      console.log(e)
+                    })
+                  }
+                  self.toggleLoading(false)
+                })
+              }
             })
+            self.toggleLoading(false)
           })
-
-          this.toggleLoading(false)
-        } else {
-          this.tableData = tableDataTmp
-          this.toggleLoading(false)
         }
-      }).catch(e => {
-        this.toggleLoading(false)
-      }).finally(e => {
-        this.toggleLoading(false)
       })
+
+      self.toggleLoading(false)
     },
     tabChange (index) {
       const beforeType = this.$store.getters.getTabOperationBeforeType
@@ -582,7 +667,7 @@ export default {
             menu.columnValue = columnValue
             this.$store.commit('setPanelName', columnValue)
             this.$store.commit('setBreadcrumbColumnName', columnName)
-            this.$store.commit('setDimensionType', tabGroup[0]?tabGroup[0].prop:'')
+            this.$store.commit('setDimensionType', tabGroup[0] ? tabGroup[0].prop : '')
             this.$store.commit('setBreadcrumbColumnValue', columnValue)
           }
         } else if (!this.$_.isEmpty(menu.children)) {
@@ -592,13 +677,12 @@ export default {
               child.columnValue = columnValue
               this.$store.commit('setPanelName', columnValue)
               this.$store.commit('setBreadcrumbColumnName', columnName)
-              this.$store.commit('setDimensionType', tabGroup[0]?tabGroup[0].prop:'')
+              this.$store.commit('setDimensionType', tabGroup[0] ? tabGroup[0].prop : '')
               this.$store.commit('setBreadcrumbColumnValue', columnValue)
             }
           })
         }
       })
-      console.log(this.$store.getters.getDimensionType)
       let toPanel = null
       this.list.forEach((item, index) => {
         if (item.label === columnName) {
@@ -627,14 +711,14 @@ export default {
       })
       this.$store.commit('setBreadcrumbColumnValueList', valueList)
       this.$router.push({
-        name:'panel',
+        name: 'panel',
         path: this.$route.path,
         query: {
           t: +new Date()
         },
-        params:{
-          thirdPanel:this.curTable.panelIdOfThirdMenu,
-          fourthPanel:toPanel
+        params: {
+          thirdPanel: this.curTable.panelIdOfThirdMenu,
+          fourthPanel: toPanel
         }
       })
     },
@@ -717,6 +801,22 @@ export default {
         return this.networkSearchUrl.curUrl
       }
     },
+    gerCycleUrl () {
+      const condition = this.$store.getters.getQueryCondition
+      if (condition) {
+        return this.networkSearchUrl.drilldownCycleUrl
+      } else {
+        return this.networkSearchUrl.cycleUrl
+      }
+    },
+    gerColumnUrl (tableColumn) {
+      const condition = this.$store.getters.getQueryCondition
+      if (condition) {
+        return tableColumn.dillDownCycleDataUrl
+      } else {
+        return tableColumn.cycleDataUrl
+      }
+    },
     handleQueryParams (extraParams) {
       let queryType = ''
       const name = this.$store.getters.getBreadcrumbColumnName
@@ -768,9 +868,10 @@ export default {
           this.customTableTitles[0].label = curTab.label
           this.$store.commit('setNetworkOverviewCurrentTab', curTab)
         }
-      } else if (curOperationType === operationType.secondMenu) { // 点击第二级菜单，点击菜单
-        const list = this.$_.cloneDeep(this.networkTabList)
-        const tabObjGroup = list.filter(item => item.checked)
+      } else if (curOperationType === operationType.secondMenu || curOperationType === operationType.mainMenu) { // 点击第二级菜单，点击菜单
+        this.list = this.$_.cloneDeep(this.curTable.tabList)
+        this.$store.commit('setNetworkOverviewTabList', this.list)
+        const tabObjGroup = this.list.filter(item => item.checked)
         if (tabObjGroup && tabObjGroup.length > 0) {
           const curTab = tabObjGroup[0]
           queryType = curTab.prop
@@ -809,14 +910,6 @@ export default {
       }
       return extraParams
     },
-    gerCycleUrl () {
-      const condition = this.$store.getters.getQueryCondition
-      if (condition) {
-        return this.networkSearchUrl.drilldownCycleUrl
-      } else {
-        return this.networkSearchUrl.cycleUrl
-      }
-    },
     handleCustomizeClick (tab) {
       this.activeCustomize = tab.paneName
     },
@@ -848,19 +941,18 @@ export default {
     }
   },
   mounted () {
-    if (this.chart.params && this.chart.params.drillDown) {
-      this.drillDown = this.chart.params.drillDown
-    }
-    //当前表格相关数据初始化
-    this.tableType = this.chart.params?this.chart.params.name:'networkOverview'
-    this.curTable = networkTable[this.tableType]?networkTable[this.tableType]:networkTable[0]
+    // 当前表格相关数据初始化
+    this.tableType = this.chart.params ? this.chart.params.name : 'networkOverview'
+    this.curTable = networkTable[this.tableType] ? networkTable[this.tableType] : networkTable.networkOverview
     this.hasMetricSearch = this.curTable.hasMetricSearch
-    this.customTableTitles =  this.$_.cloneDeep(this.curTable.column)
+    this.customTableTitles = this.$_.cloneDeep(this.curTable.column)
     this.list = this.$_.cloneDeep(this.curTable.tabList)
     this.networkTabList = this.curTable.tabList
     this.activeTab = this.networkTabList[0].label
     this.activeCustomize = ref('tabs')
     this.networkSearchUrl = this.curTable.url
+    this.columnNameGroup = this.curTable.bytesColumnNameGroup
+    this.cycleColumnNameGroup = this.curTable.bytesCycleColumnNameGroup
 
     if (this.$store.getters.getNetworkOverviewTabList.length > 0) {
       this.list = this.$store.getters.getNetworkOverviewTabList
@@ -889,8 +981,8 @@ export default {
     }
   },
   setup (props) {},
-  destroyed () {
-    this.$store.commit('setNetworkOverviewTabList', this.list)//保存状态
+  unmounted () {
+    this.$store.commit('setNetworkOverviewTabList', this.list)// 保存状态
   }
 }
 </script>
diff --git a/src/views/charts2/charts/npm/NpmAppCategoryScore.vue b/src/views/charts2/charts/npm/NpmAppCategoryScore.vue
index a23ba136..a0329f58 100644
--- a/src/views/charts2/charts/npm/NpmAppCategoryScore.vue
+++ b/src/views/charts2/charts/npm/NpmAppCategoryScore.vue
@@ -128,13 +128,19 @@ export default {
     }
   },
   mixins: [chartMixin],
+  watch: {
+    timeFilter: {
+      deep: true,
+      handler (n) {
+        this.init()
+      }
+    }
+  },
   methods: {
-    init (params) {
-      if (!params) {
-        params = {
-          startTime: getSecond(this.timeFilter.startTime),
-          endTime: getSecond(this.timeFilter.endTime)
-        }
+    init () {
+      const params = {
+        startTime: getSecond(this.timeFilter.startTime),
+        endTime: getSecond(this.timeFilter.endTime)
       }
       // 获取table后三列内容
       const currentTrafficRequest = get(api.npm.overview.appTrafficAnalysis, { ...params, cycle: 0 })
diff --git a/src/views/charts2/charts/npm/NpmEventsHeader.vue b/src/views/charts2/charts/npm/NpmEventsHeader.vue
index 9ed488ba..f3a73524 100644
--- a/src/views/charts2/charts/npm/NpmEventsHeader.vue
+++ b/src/views/charts2/charts/npm/NpmEventsHeader.vue
@@ -24,6 +24,14 @@ export default {
       type: 'severity'
     }
   },
+  watch: {
+    timeFilter: {
+      deep: true,
+      handler (n) {
+        this.recentEventsListData()
+      }
+    }
+  },
   methods: {
     recentEventsListData () {
       const params = {
diff --git a/src/views/charts2/charts/npm/NpmIpMap.vue b/src/views/charts2/charts/npm/NpmIpMap.vue
index 29e13fd3..7a06cc3a 100644
--- a/src/views/charts2/charts/npm/NpmIpMap.vue
+++ b/src/views/charts2/charts/npm/NpmIpMap.vue
@@ -1,117 +1,58 @@
 <template>
   <div class="cn-chart__map">
-    <div class="map-canvas" id="npmMap"></div>
-    <div class="map-filter">
-      <el-select
-          size="mini"
-          v-model="trafficDirection"
-          class="map-select map-select__direction"
-      >
-        <el-option value="Server">Server</el-option>
-        <el-option value="Client">Client</el-option>
-      </el-select>
-      <el-select
-          size="mini"
-          v-model="location"
-          class="map-select map-select__location"
-          clearable
-          placeholder="All"
-          filterable
-      >
-        <template #prefix><i class="cn-icon cn-icon-location" style="color: #575757;"></i></template>
-        <el-option v-for="(country, index) in locationOptions" :key="index" :value="country.value">{{country.label}}</el-option>
-      </el-select>
-    </div>
-    <div class="map-legend">
-      <div class="map-legend__row">
-        <div class="map-legend__symbol map-legend__symbol--green"></div>
-        <div class="map-legend__desc">{{$t('npm.highScore')}}</div>
-      </div>
-      <div class="map-legend__row">
-        <div class="map-legend__symbol map-legend__symbol--yellow"></div>
-        <div class="map-legend__desc">{{$t('npm.middleScore')}}</div>
-      </div>
-      <div class="map-legend__row">
-        <div class="map-legend__symbol map-legend__symbol--red"></div>
-        <div class="map-legend__desc">{{$t('npm.lowScore')}}</div>
-      </div>
-    </div>
+    <div class="map-canvas" id="npmDrillDownMap"></div>
   </div>
 </template>
 
 <script>
-import { mapData, drillDownData } from '@/views/charts2/charts/mapTestData'
 import { shallowRef } from 'vue'
 import * as am4Core from '@amcharts/amcharts4/core'
 import * as am4Maps from '@amcharts/amcharts4/maps'
-import { getGeoData } from '@/utils/tools'
-import { storageKey, unitTypes } from '@/utils/constants'
-import locationOptions from '@/views/charts2/charts/locationOptions'
-import unitConvert, { valueToRangeValue } from '@/utils/unit-convert'
-
+import { computeScore, getGeoData } from '@/utils/tools'
+import { storageKey, unitTypes, countryNameIdMapping } from '@/utils/constants'
+import { valueToRangeValue } from '@/utils/unit-convert'
+import { getSecond } from '@/utils/date-util'
+import { api, getData } from '@/utils/api'
+import { get } from '@/utils/http'
+import chartMixin from '@/views/charts2/chart-mixin'
 export default {
-  name: 'NpmMap',
+  name: 'NpmIpMap',
   data () {
     return {
-      locationOptions,
-      mapData,
-      drillDownData,
       myChart: null,
       polygonSeries: null,
       countrySeries: null,
       worldImageSeries: null,
       countryImageSeries: null,
       // Server | Client
-      trafficDirection: 'Server',
-      location: ''
+      trafficDirection: 'Server'
     }
   },
+  mixins: [chartMixin],
   methods: {
-    initMap () {
+    async initMap () {
       // 初始化插件
-      const chart = am4Core.create('npmMap', am4Maps.MapChart)
-      chart.geodata = getGeoData(storageKey.iso36112WorldLow)
+      this.toggleLoading(true)
+      const geoData = await getGeoData(storageKey.iso36112WorldLow)
+      const chart = am4Core.create('npmDrillDownMap', am4Maps.MapChart)
+      chart.geodata = geoData
       chart.projection = new am4Maps.projections.Miller()
-      chart.homeZoomLevel = 2
+      chart.homeZoomLevel = 1.5
       chart.homeGeoPoint = {
         latitude: 21,
         longitude: 0
       }
       this.myChart = shallowRef(chart)
       this.polygonSeries = shallowRef(this.polygonSeriesFactory())
-      this.worldImageSeries = shallowRef(this.imageSeriesFactory('score'))
+      this.worldImageSeries = shallowRef(this.imageSeriesFactory('score', this.polygonSeries))
       // 渲染
       this.loadAm4ChartMap(this.polygonSeries, this.worldImageSeries)
-      this.worldImageSeries.mapImages.template.events.on('hit', async ev => {
-        const countryId = ev.target.dataItem.dataContext.id
-        ev.target.isHover = false
-        if (countryId) {
-          const targetMapObject = this.polygonSeries.getPolygonById(countryId)
-          targetMapObject.series.chart.zoomToMapObject(targetMapObject)
-          const geoData = getGeoData(countryId)
-          if (geoData) {
-            this.countrySeries = shallowRef(this.polygonSeriesFactory())
-            this.countrySeries.geodata = geoData
-            this.countryImageSeries = shallowRef(this.imageSeriesFactory('score'))
-            this.polygonSeries.hide()
-            this.worldImageSeries.hide()
-            const country = ev.target.dataItem.dataContext.name
-            const queryParams = { ...this.queryParams, ipLocationCountry: country }
-            const chartData = this.drillDownData
-            this.loadAm4ChartMap(this.countrySeries, this.countryImageSeries, country, chartData)
-          }
-        }
-      })
     },
-    loadAm4ChartMap (polygonSeries, imageSeries, country, chartData) {
-      // chartData不为空是下钻
-      if (chartData) {
-        this.$emit('showLoading', true)
-      }
+    loadAm4ChartMap (polygonSeries, imageSeries) {
       try {
         // 清除数据
-        polygonSeries.data.splice(0)
-
+        // polygonSeries.data.splice(0)
+        this.toggleLoading(true)
         // 清除legend
         this.myChart.children.each((s, i) => {
           if (s && s.className !== 'Container') {
@@ -119,25 +60,62 @@ export default {
           }
         })
 
-        this.showMapBackButton = !!country
-        const data = chartData || this.mapData
-        imageSeries.data = data.map(r => ({
-          score: r.score,
-          id: r.locationId,
-          color: this.scoreColor(r.score),
-          border: this.scoreColor(r.score)
-        }))
+        const params = {
+          startTime: getSecond(this.timeFilter.startTime),
+          endTime: getSecond(this.timeFilter.endTime),
+          type: this.$store.getters.getDimensionType,
+          typeVal: this.$store.getters.getBreadcrumbColumnValue
+        }
+        getData(api.npm.overview.map, params).then(res => {
+          // 计算分数
+          const tcpRequest = get(api.npm.overview.mapTcp, params)
+          const httpRequest = get(api.npm.overview.mapHttp, params)
+          const sslRequest = get(api.npm.overview.mapSsl, params)
+          const tcpLostRequest = get(api.npm.overview.mapPacketLoss, params)
+          const packetRetransRequest = get(api.npm.overview.mapPacketRetrans, params)
+          Promise.all([tcpRequest, httpRequest, sslRequest, tcpLostRequest, packetRetransRequest]).then(res2 => {
+            const keyPre = ['tcp', 'http', 'ssl', 'tcpLost', 'packetRetrans']
+            const mapData = res
+            res2.forEach((r, i) => {
+              if (r.code === 200) {
+                mapData.forEach(t => {
+                  let score = 0
+                  const find = r.data.result.find(d => d.country === t.country)
+                  if (find) {
+                    score = computeScore(find, i)
+                  }
+                  t[keyPre[i] + 'Score'] = score
+                })
+              } else {
+                mapData.forEach(t => {
+                  t[keyPre[i] + 'Score'] = 0
+                })
+              }
+            })
+            mapData.forEach(t => {
+              t.score = Math.ceil((t.tcpScore + t.httpScore + t.sslScore + t.tcpLostScore + t.packetRetransScore) * 6)
+              if (t.score > 6) {
+                t.score = 6
+              }
+            })
+            this.loadMarkerData(imageSeries, mapData)
+          })
+        }).finally(() => {
+          this.toggleLoading(false)
+        })
       } catch (e) {
         console.error(e)
-      } finally {
-        if (chartData) {
-          setTimeout(() => {
-            this.$emit('showLoading', false)
-          }, 200)
-        }
       }
     },
-    convertMapData (data) {
+    loadMarkerData (imageSeries, data) {
+      imageSeries.data = data.map(r => ({
+        score: r.score,
+        name: r.province || r.country,
+        throughput: valueToRangeValue(r.throughBitsRate, unitTypes.bps).join(' '),
+        id: r.serverId,
+        color: this.scoreColor(r.score),
+        border: this.scoreColor(r.score)
+      }))
     },
     scoreColor (score) {
       if (score >= 0 && score <= 2) {
@@ -148,6 +126,23 @@ export default {
         return '#7E9F54'
       }
     },
+    generatePolygonTooltipHTML () {
+      const html = `
+        <div class="map-tooltip" style="padding-bottom: 10px;">
+          <div class="map-tooltip__title">{name}</div>
+          <div class="map-tooltip__content">
+            <div class="content-row">
+              <div class="row__label">Score</div>
+              <div class="row__value">{score}</div>
+            </div>
+            <div class="content-row">
+              <div class="row__label">Throughput</div>
+              <div class="row__value">{throughput}</div>
+            </div>
+          </div>
+        </div>`
+      return html
+    },
     polygonSeriesFactory () {
       const polygonSeries = this.myChart.series.push(new am4Maps.MapPolygonSeries())
       polygonSeries.useGeodata = true
@@ -163,8 +158,7 @@ export default {
       polygonTemplate.fill = am4Core.color('#EFEFEF')
       return polygonSeries
     },
-    imageSeriesFactory (dataField) {
-      const vm = this
+    imageSeriesFactory (dataField, polygonSeries) {
       // amcharts实例中增加地图图案series（用来在地图上画圆点、方块、连线等）
       const imageSeries = this.myChart.series.push(new am4Maps.MapImageSeries())
       // 指定接口数据中哪个字段名代表数值
@@ -174,14 +168,14 @@ export default {
       imageTemplate.nonScaling = true
       // 通过地区ID来获取经纬度，设置后无需自己提供经纬度
       imageTemplate.adapter.add('latitude', function (latitude, target) {
-        const polygon = vm.polygonSeries.getPolygonById(target.dataItem.dataContext.id)
+        const polygon = polygonSeries.getPolygonById(target.dataItem.dataContext.id)
         if (polygon) {
           return polygon.visualLatitude
         }
         return latitude
       })
       imageTemplate.adapter.add('longitude', function (longitude, target) {
-        const polygon = vm.polygonSeries.getPolygonById(target.dataItem.dataContext.id)
+        const polygon = polygonSeries.getPolygonById(target.dataItem.dataContext.id)
         if (polygon) {
           return polygon.visualLongitude
         }
@@ -193,11 +187,12 @@ export default {
       circle.propertyFields.fill = 'color'
       circle.propertyFields.stroke = 'border'
       circle.strokeWidth = 1
-      // circle.tooltipHTML = this.generatePolygonTooltipHTML()
+      circle.fillOpacity = 0.8
+      circle.tooltipHTML = this.generatePolygonTooltipHTML()
       imageSeries.tooltip.getFillFromObject = false
-      imageSeries.tooltip.background.fill = am4Core.color('#41495D')
+      imageSeries.tooltip.background.fill = am4Core.color('#FFFFFF')
       imageSeries.tooltip.background.filters.clear()
-      imageSeries.tooltip.background.stroke = '#41495D'
+      imageSeries.tooltip.background.stroke = '#C5C5C5'
 
       imageSeries.heatRules.push({
         target: circle,
@@ -212,6 +207,14 @@ export default {
   },
   mounted () {
     this.initMap()
+  },
+  beforeUnmount () {
+    this.polygonSeries = null
+    this.countrySeries = null
+    this.worldImageSeries = null
+    this.countryImageSeries = null
+    this.myChart && this.myChart.dispose()
+    this.myChart = null
   }
 }
 </script>
diff --git a/src/views/charts2/charts/npm/NpmLine.vue b/src/views/charts2/charts/npm/NpmLine.vue
index 0b690daa..e236b8d4 100644
--- a/src/views/charts2/charts/npm/NpmLine.vue
+++ b/src/views/charts2/charts/npm/NpmLine.vue
@@ -2,7 +2,7 @@
   <div class="npm-line">
     <template v-if="chartData.id === 11">
       <div class="npm-line-header">
-        <div class="npm-line-header-title">{{$_.get(chartData, 'i18n') || chartData.name}}</div>
+        <div class="npm-line-header-title">{{$t(chartData.i18n) || chartData.name}}</div>
         <div class="npm-line-header-rights" v-if="chartData.params && chartData.params.showLegend && !throughputName">
           <div class="npm-line-header-right" :class="{'active': item.show}" v-for="(item, index) in chartOptionLineData" :key="index" @click="highlightEvent(item)">
             <div class="npm-line-header-icon" :class="'icon' + index"></div>
@@ -14,27 +14,27 @@
       <div v-else class="chart-drawing" :id="`chart${chartData.name}`"></div>
     </template>
     <template v-else-if="chartData.id === 12">
-      <div class="npm-line-title">{{$_.get(chartData, 'i18n') || chartData.name}}</div>
+      <div class="npm-line-title">{{$t(chartData.i18n) || chartData.name}}</div>
       <chart-no-data v-if="tcpName"></chart-no-data>
       <div v-else class="chart-drawing" :id="`chart${chartData.name}`"></div>
     </template>
     <template v-else-if="chartData.id === 13">
-      <div class="npm-line-title">{{$_.get(chartData, 'i18n') || chartData.name}}</div>
+      <div class="npm-line-title">{{$t(chartData.i18n) || chartData.name}}</div>
       <chart-no-data v-if="httpName"></chart-no-data>
       <div v-else class="chart-drawing" :id="`chart${chartData.name}`"></div>
     </template>
     <template v-else-if="chartData.id === 14">
-      <div class="npm-line-title">{{$_.get(chartData, 'i18n') || chartData.name}}</div>
+      <div class="npm-line-title">{{$t(chartData.i18n) || chartData.name}}</div>
       <chart-no-data v-if="sslName"></chart-no-data>
       <div v-else class="chart-drawing" :id="`chart${chartData.name}`"></div>
     </template>
     <template v-else-if="chartData.id === 15">
-      <div class="npm-line-title">{{$_.get(chartData, 'i18n') || chartData.name}}</div>
+      <div class="npm-line-title">{{$t(chartData.i18n) || chartData.name}}</div>
       <chart-no-data v-if="packetsLossName"></chart-no-data>
       <div v-else class="chart-drawing" :id="`chart${chartData.name}`"></div>
     </template>
     <template v-else-if="chartData.id === 16">
-      <div class="npm-line-title">{{$_.get(chartData, 'i18n') || chartData.name}}</div>
+      <div class="npm-line-title">{{$t(chartData.i18n) || chartData.name}}</div>
       <chart-no-data v-if="packetsRetrainsName"></chart-no-data>
       <div v-else class="chart-drawing" :id="`chart${chartData.name}`"></div>
     </template>
@@ -199,7 +199,7 @@ export default {
         this.chartOption.series = data.map((t, i) => {
           return {
             ...seriesTemplate,
-            name: t.legend ? t.legend : this.$_.get(chartData, 'i18n') || chartData.name,
+            name: t.legend ? t.legend : this.$t(chartData.i18n) || chartData.name,
             stack: this.chartData.params.isStack ? 'network.total' : '',
             lineStyle: {
               width: 1
diff --git a/src/views/charts2/charts/npm/NpmMap.vue b/src/views/charts2/charts/npm/NpmMap.vue
index b28a904b..df087342 100644
--- a/src/views/charts2/charts/npm/NpmMap.vue
+++ b/src/views/charts2/charts/npm/NpmMap.vue
@@ -44,7 +44,6 @@
 </template>
 
 <script>
-import { mapData, drillDownData } from '@/views/charts2/charts/mapTestData'
 import { shallowRef } from 'vue'
 import * as am4Core from '@amcharts/amcharts4/core'
 import * as am4Maps from '@amcharts/amcharts4/maps'
@@ -56,13 +55,12 @@ import { getSecond } from '@/utils/date-util'
 import { api, getData } from '@/utils/api'
 import { get } from '@/utils/http'
 import chartMixin from '@/views/charts2/chart-mixin'
+import {Rectangle3D} from '@amcharts/amcharts4/.internal/core/elements/3d/Rectangle3D'
 export default {
   name: 'NpmMap',
   data () {
     return {
       locationOptions,
-      mapData,
-      drillDownData,
       myChart: null,
       polygonSeries: null,
       countrySeries: null,
@@ -92,6 +90,20 @@ export default {
       this.worldImageSeries = shallowRef(this.imageSeriesFactory('score', this.polygonSeries))
       // 渲染
       this.loadAm4ChartMap(this.polygonSeries, this.worldImageSeries)
+
+      this.worldImageSeries.mapImages.template.events.on('hit', async ev => {
+        this.$store.commit('setNpmLocationCountry', ev.target.dataItem.dataContext.name)
+        this.location = ev.target.dataItem.dataContext.name
+        if (this.countrySeries) {
+          this.countrySeries.dispose()
+        }
+        if (this.countryImageSeries) {
+          this.countryImageSeries.dispose()
+        }
+        const countryId = ev.target.dataItem.dataContext.id
+        ev.target.isHover = false
+        await this.drill(countryId)
+      })
     },
     loadAm4ChartMap (polygonSeries, imageSeries) {
       try {
@@ -161,8 +173,6 @@ export default {
         color: this.scoreColor(r.score),
         border: this.scoreColor(r.score)
       }))
-      console.info(imageSeries)
-      console.info(this.countryImageSeries)
     },
     scoreColor (score) {
       if (score >= 0 && score <= 2) {
@@ -250,49 +260,71 @@ export default {
       })
 
       return imageSeries
+    },
+    async drill (countryId) {
+      if (countryId) {
+        const targetMapObject = this.polygonSeries.getPolygonById(countryId)
+        targetMapObject.series.chart.zoomToMapObject(targetMapObject)
+        const geoData = await getGeoData(countryId)
+        if (geoData) {
+          this.countrySeries = shallowRef(this.polygonSeriesFactory())
+          this.countrySeries.geodata = geoData
+          this.countryImageSeries = shallowRef(this.imageSeriesFactory('score', this.countrySeries))
+          this.polygonSeries.hide()
+          this.worldImageSeries.hide()
+          this.$nextTick(() => {
+            this.loadAm4ChartMap(this.countrySeries, this.countryImageSeries)
+          })
+        }
+      }
     }
   },
   watch: {
     trafficDirection (n) {
       this.$store.commit('setNpmLocationSide', n.toLowerCase())
-      this.loadAm4ChartMap(this.countrySeries || this.polygonSeries, this.countryImageSeries || this.worldImageSeries)
+      if (this.location) {
+        this.loadAm4ChartMap(this.countrySeries, this.countryImageSeries)
+      } else {
+        this.loadAm4ChartMap(this.polygonSeries, this.worldImageSeries)
+      }
     },
     async location (n) {
       this.$store.commit('setNpmLocationCountry', n)
-      if (this.countrySeries) {
-        this.countrySeries.dispose()
-      }
-      if (this.countryImageSeries) {
-        this.countryImageSeries.dispose()
-      }
+      this.countrySeries.dispose()
+      this.countryImageSeries.dispose()
       if (n) {
         const countryId = countryNameIdMapping[n]
-        if (countryId) {
-          const targetMapObject = this.polygonSeries.getPolygonById(countryId)
-          targetMapObject.series.chart.zoomToMapObject(targetMapObject)
-          const geoData = await getGeoData(countryId)
-          if (geoData) {
-            this.countrySeries = shallowRef(this.polygonSeriesFactory())
-            this.countrySeries.geodata = geoData
-            this.countryImageSeries = shallowRef(this.imageSeriesFactory('score', this.countrySeries))
-            this.polygonSeries.hide()
-            this.worldImageSeries.hide()
-            this.$nextTick(() => {
-              this.loadAm4ChartMap(this.countrySeries, this.countryImageSeries)
-            })
-          }
-        }
+        await this.drill(countryId)
       } else {
         this.polygonSeries.show()
         this.worldImageSeries.show()
-        this.countrySeries = null
-        this.countryImageSeries = null
         this.myChart.zoomToGeoPoint(this.myChart.homeGeoPoint, this.myChart.homeZoomLevel, true)
       }
+    },
+    timeFilter: {
+      deep: true,
+      handler (n) {
+        if (this.location) {
+          this.loadAm4ChartMap(this.countrySeries, this.countryImageSeries)
+        } else {
+          this.loadAm4ChartMap(this.polygonSeries, this.worldImageSeries)
+        }
+      }
     }
   },
   mounted () {
     this.initMap()
+  },
+  beforeUnmount () {
+    if (this.polygonSeries) {
+      this.polygonSeries.mapPolygons.template.events.off('hit', this.mapBlockHitEvent)
+    }
+    this.polygonSeries = null
+    this.countrySeries = null
+    this.worldImageSeries = null
+    this.countryImageSeries = null
+    this.myChart && this.myChart.dispose()
+    this.myChart = null
   }
 }
 </script>
diff --git a/src/views/charts2/charts/npm/NpmRecentEvents.vue b/src/views/charts2/charts/npm/NpmRecentEvents.vue
index 07bf30b8..2d3232b5 100644
--- a/src/views/charts2/charts/npm/NpmRecentEvents.vue
+++ b/src/views/charts2/charts/npm/NpmRecentEvents.vue
@@ -31,7 +31,7 @@
         </el-table-column>
       </template>
       <template v-slot:empty>
-        <div class="table-no-data">
+        <div class="table-no-data" v-show="isNoData">
           <svg class="icon" aria-hidden="true">
             <use xlink:href="#cn-icon-a-allclear"></use>
           </svg>