CN-668 Dashboard - npm - 下钻功能交互开发：交互部分完成（接口未完成）

2022-08-19 10:46:24 +08:00
parent fa0a4c359e
commit 6ca3c96eb8
7 changed files with 394 additions and 181 deletions
--- 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 } 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'
@@ -293,7 +293,7 @@ export default {
      })
    },
    initDropdownList () {
-      const currentValue = document.getElementById('breadcrumbValue')?document.getElementById('breadcrumbValue').innerText:''
+      const currentValue = document.getElementById('breadcrumbValue') ? document.getElementById('breadcrumbValue').innerText : ''
      const columnName = this.$store.getters.getBreadcrumbColumnName
      let type = 'ip'
      const tabObjGroup = networkOverviewTabList.filter(item => item.label == columnName)
@@ -329,7 +329,7 @@ export default {
      })
    },
    showBreadcrumbPopover (valueMenuId) {
-      this.breadcrumbColumnValueListShow.splice(0,this.breadcrumbColumnValueListShow.length)
+      this.breadcrumbColumnValueListShow.splice(0, this.breadcrumbColumnValueListShow.length)
      this.curPageNum = 1
      this.showBackground = true
      this.dropDownValue = ''
@@ -427,6 +427,17 @@ export default {
          })
        }
      })
+
+      if(opeType===3){
+        this.$router.push({
+          params:{...this.$route.params,fourthPanel:''}
+        })
+      }else if(opeType!=4){
+        this.$router.push({
+          params:{...this.$route.params,fourthPanel:'',thirdPanel:''}
+        })
+      }
+
      if (route === this.route) {
        this.refresh()
        return
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -15,6 +15,7 @@ const routes = [
    component: () => import('@/components/layout/Home'),
    children: [
      {
+        name:'panel',
        path: '/panel/:typeName',
        component: () => import('@/views/charts2/Panel')
      },
--- a/src/store/modules/panel.js
+++ b/src/store/modules/panel.js
@@ -41,7 +41,6 @@ const panel = {
    panelName: '', // 网络概况的Panel的名称
    breadcrumbColumnName: '', // 点击tab里的value，都会修改此值,为面包屑的菜单
    breadcrumbColumnValue: '', // 点击tab里的value，都会修改此值,为面包屑的菜单
-
    breadcrumbColumnValueList: [], // 第四级面包屑的下拉列表
    networkOverviewCurrentTab: null, // 只代表选中的tab，有时会与面包屑中显示的值不同
    networkOverviewBeforeTab: null, // 点击表格的值时使用，记录点击当前tab表格的值之前点击的表格值所属的tab
--- a/src/utils/constants.js
+++ b/src/utils/constants.js
@@ -158,7 +158,7 @@ export const listScrollPath = [
  '/detection/performanceEvent',
  '/detection/securityEvent'
 ]
-
+/*
 export const networkOverviewTabs = [
  'network.ips',
  'network.countries',
@@ -176,18 +176,18 @@ export const networkOverviewTabs = [
  'network.hosts',
  'network.snis',
  'network.protocolPorts'
-]
+]*/

 export const operationType = {
  mainMenu: 0, // 菜单
  secondMenu: 1, // 二级菜单
  thirdMenu: 3, // 三级菜单
-  fourthMenu: 4, // 四级菜单
+  fourthMenu: 4, // 四级菜单:点击顶部第四级菜单 OR 点击表格的第一列的值
  changeTab: 5, // 切换tab
  changeMetric: 6, // 切换metric
  customize: 7// 操作Customize
 }
-
+/*
 export const networkOverviewTableUrlName = {
  ips: 'ips',
  countries: 'countries',
@@ -205,15 +205,62 @@ export const networkOverviewTableUrlName = {
  hosts: 'hosts',
  snis: 'snis',
  protocolPorts: 'protocolPorts'
+}*/
+
+//列的类型：下钻列，环比列，普通列
+export const tableColumnType = {
+  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
 export const networkOverviewSearchUrl = {
  curUrl: '/interface/overview/dimensionTrafficAnalysis',
  cycleUrl: '/interface/overview/dimensionCycleTrafficAnalysis',
  drilldownCurUrl: '/interface/overview/drilldown/dimensionTrafficAnalysis',
  drilldownCycleUrl: '/interface/overview/drilldown/dimensionCycleTrafficAnalysis',
  drilldownList: '/interface/overview/drilldown/list'
+}
+//npm:接口url
+export const npmSearchUrl = {
+  curUrl: '/interface/application/performance/overview/dimensionTrafficAnalysis',
+  cycleUrl: '/interface/application/performance/overview/dimensionCycleTrafficAnalysis',
+  drilldownCurUrl: '/interface/application/performance/overview/drilldown/dimensionTrafficAnalysis',
+  drilldownCycleUrl: '/interface/application/performance/overview/drilldown/dimensionCycleTrafficAnalysis',
+  drilldownList: '/interface/overview/drilldown/list'
+}

+/* panel类别和名称之间的映射 */
+export const drillDownPanelTypeMapping = {
+  npmOverviewIp: 8,
+  npmOverviewDomain: 9,
+  npmOverviewApp: 10,
+  npmOverviewCommon: 11,
+  npmThirdMenu: 12,
+  networkOverview: 13,
 }

 export const networkOverviewTabList = [
@@ -223,147 +270,307 @@ export const networkOverviewTabList = [
    queryCycleTotalProp: 'ips',
    dillDownProp: ['common_client_ip', 'common_server_ip'],
    checked: true,
-    url: '/interface/overview/ipsTrafficAnalysis',
-    cycleTotalUrl: '/interface/overview/ipsCycleTrafficTotal',
-    disabled: false
+    disabled: false,
+    panelId:drillDownPanelTypeMapping.networkOverview
  }, {
    label: 'network.countries',
    prop: 'country',
    queryCycleTotalProp: 'countries',
    dillDownProp: ['client_country', 'server_country'],
    checked: true,
-    url: '/interface/overview/countriesTrafficAnalysis',
-    cycleTotalUrl: '/interface/overview/countriesCycleTrafficTotal',
-    disabled: false
+    disabled: false,
+    panelId:drillDownPanelTypeMapping.networkOverview
  }, {
    label: 'network.asns',
    prop: 'asn',
    queryCycleTotalProp: 'asns',
    dillDownProp: ['client_asn', 'server_asn'],
    checked: true,
-    url: '/interface/overview/asnsTrafficAnalysis',
-    cycleTotalUrl: '/interface/overview/asnsCycleTrafficTotal',
-    disabled: false
+    disabled: false,
+    panelId:drillDownPanelTypeMapping.networkOverview
  }, {
    label: 'network.applications',
    prop: 'appLabel',
    queryCycleTotalProp: 'applications',
    dillDownProp: ['common_app_label'],
    checked: true,
-    url: '/interface/overview/applicationsTrafficAnalysis',
-    cycleTotalUrl: '/interface/overview/applicationsCycleTrafficTotal',
-    disabled: false
+    disabled: false,
+    panelId:drillDownPanelTypeMapping.networkOverview
  }, {
    label: 'network.providers',
    prop: 'appCompany',
    queryCycleTotalProp: 'providers',
    dillDownProp: ['app_company'],
    checked: true,
-    url: '/interface/overview/providersTrafficAnalysis',
-    cycleTotalUrl: '/interface/overview/providersCycleTrafficTotal',
-    disabled: false
+    disabled: false,
+    panelId:drillDownPanelTypeMapping.networkOverview
  }, {
    label: 'network.domains',
    prop: 'domain',
    queryCycleTotalProp: 'domains',
    dillDownProp: ['domain'],
    checked: true,
-    url: '/interface/overview/domainsTrafficAnalysis',
-    cycleTotalUrl: '/interface/overview/domainsCycleTrafficTotal',
-    disabled: false
+    disabled: false,
+    panelId:drillDownPanelTypeMapping.networkOverview
  }, {
    label: 'network.protocols',
    prop: 'l7Protocol',
    queryCycleTotalProp: 'protocols',
    dillDownProp: ['common_l7_protocol'],
    checked: true,
-    url: '/interface/overview/protocolsTrafficAnalysis',
-    cycleTotalUrl: '/interface/overview/protocolsCycleTrafficTotal',
-    disabled: false
+    disabled: false,
+    panelId:drillDownPanelTypeMapping.networkOverview
  }, {
    label: 'network.idcTenants',
    prop: 'idcRenter',
    queryCycleTotalProp: 'idcTenants',
    dillDownProp: ['client_idc_renter', 'server_idc_renter'],
    checked: true,
-    url: '/interface/overview/idcTenantsTrafficAnalysis',
-    cycleTotalUrl: '/interface/overview/idcTenantsCycleTrafficTotal',
-    disabled: false
+    disabled: false,
+    panelId:drillDownPanelTypeMapping.networkOverview
  }, {
    label: 'network.provinces',
    prop: 'province',
    queryCycleTotalProp: 'provinces',
    dillDownProp: ['client_province', 'server_province'],
    checked: false,
-    url: '/interface/overview/provincesTrafficAnalysis',
-    cycleTotalUrl: '/interface/overview/provincesCycleTrafficTotal',
-    disabled: false
+    disabled: false,
+    panelId:drillDownPanelTypeMapping.networkOverview
  }, {
    label: 'network.cities',
    prop: 'city',
    queryCycleTotalProp: 'cities',
    dillDownProp: ['client_region', 'server_region'],
    checked: false,
-    url: '/interface/overview/citiesTrafficAnalysis',
-    cycleTotalUrl: '/interface/overview/citiesCycleTrafficTotal',
-    disabled: false
+    disabled: false,
+    panelId:drillDownPanelTypeMapping.networkOverview
  }, {
    label: 'network.isps',
    prop: 'isp',
    queryCycleTotalProp: 'isps',
    dillDownProp: ['client_isp', 'server_isp'],
    checked: false,
-    url: '/interface/overview/ispsTrafficAnalysis',
-    cycleTotalUrl: '/interface/overview/ispsCycleTrafficTotal',
-    disabled: false
+    disabled: false,
+    panelId:drillDownPanelTypeMapping.networkOverview
  }, {
    label: 'network.applicationCategories',
    prop: 'appSubcategory',
    queryCycleTotalProp: 'applicationCategories',
    dillDownProp: ['app_subcategory'],
    checked: false,
-    url: '/interface/overview/applicationCategoriesTrafficAnalysis',
-    cycleTotalUrl: '/interface/overview/applicationCategoriesCycleTrafficTotal',
-    disabled: false
+    disabled: false,
+    panelId:drillDownPanelTypeMapping.networkOverview
  }, {
    label: 'network.domainCategories',
    prop: 'domainCategoryName',
    queryCycleTotalProp: 'domainCategories',
    dillDownProp: ['domain_category_name'],
    checked: false,
-    url: '/interface/overview/domainCategoriesTrafficAnalysis',
-    cycleTotalUrl: '/interface/overview/domainCategoriesCycleTrafficTotal',
-    disabled: false
+    disabled: false,
+    panelId:drillDownPanelTypeMapping.networkOverview
  }, {
    label: 'network.hosts',
    prop: 'httpHost',
    queryCycleTotalProp: 'hosts',
    dillDownProp: ['http_host'],
    checked: false,
-    url: '/interface/overview/hostsTrafficAnalysis',
-    cycleTotalUrl: '/interface/overview/hostsCycleTrafficTotal',
-    disabled: false
+    disabled: false,
+    panelId:drillDownPanelTypeMapping.networkOverview
  }, {
    label: 'network.snis',
    prop: 'sslSni',
    queryCycleTotalProp: 'snis',
    dillDownProp: ['ssl_sni'],
    checked: false,
-    url: '/interface/overview/snisTrafficAnalysis',
-    cycleTotalUrl: '/interface/overview/snisCycleTrafficTotal',
-    disabled: false
+    disabled: false,
+    panelId:drillDownPanelTypeMapping.networkOverview
  }, {
    label: 'network.protocolPorts',
    prop: 'protocolPort',
    queryCycleTotalProp: 'protocolports',
    dillDownProp: ['common_l7_protocol', 'common_server_port '],
    checked: false,
-    url: '/interface/overview/protocolPortsTrafficAnalysis',
-    cycleTotalUrl: '/interface/overview/protocolPortsCycleTrafficTotal',
-    disabled: false
+    disabled: false,
+    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.countries',
+    prop: 'country',
+    queryCycleTotalProp: 'countries',
+    dillDownProp: ['client_country', 'server_country'],
+    checked: true,
+    disabled: false,
+    panelId:drillDownPanelTypeMapping.npmOverviewCommon
+  }, {
+    label: 'network.asns',
+    prop: 'asn',
+    queryCycleTotalProp: 'asns',
+    dillDownProp: ['client_asn', 'server_asn'],
+    checked: true,
+    disabled: false,
+    panelId:drillDownPanelTypeMapping.npmOverviewCommon
+  }, {
+    label: 'network.applications',
+    prop: 'appLabel',
+    queryCycleTotalProp: 'applications',
+    dillDownProp: ['common_app_label'],
+    checked: true,
+    disabled: false,
+    panelId:drillDownPanelTypeMapping.npmOverviewApp
+  }, {
+    label: 'network.providers',
+    prop: 'appCompany',
+    queryCycleTotalProp: 'providers',
+    dillDownProp: ['app_company'],
+    checked: true,
+    disabled: false,
+    panelId:drillDownPanelTypeMapping.npmOverviewCommon
+  }, {
+    label: 'network.domains',
+    prop: 'domain',
+    queryCycleTotalProp: 'domains',
+    dillDownProp: ['domain'],
+    checked: true,
+    disabled: false,
+    panelId:drillDownPanelTypeMapping.npmOverviewDomain
+  }, {
+    label: 'network.protocols',
+    prop: 'l7Protocol',
+    queryCycleTotalProp: 'protocols',
+    dillDownProp: ['common_l7_protocol'],
+    checked: true,
+    disabled: false,
+    panelId:drillDownPanelTypeMapping.npmOverviewCommon
+  }, {
+    label: 'network.idcTenants',
+    prop: 'idcRenter',
+    queryCycleTotalProp: 'idcTenants',
+    dillDownProp: ['client_idc_renter', 'server_idc_renter'],
+    checked: true,
+    disabled: false,
+    panelId:drillDownPanelTypeMapping.npmOverviewCommon
+  }, {
+    label: 'network.provinces',
+    prop: 'province',
+    queryCycleTotalProp: 'provinces',
+    dillDownProp: ['client_province', 'server_province'],
+    checked: false,
+    disabled: false,
+    panelId:drillDownPanelTypeMapping.npmOverviewCommon
+  }, {
+    label: 'network.cities',
+    prop: 'city',
+    queryCycleTotalProp: 'cities',
+    dillDownProp: ['client_region', 'server_region'],
+    checked: false,
+    disabled: false,
+    panelId:drillDownPanelTypeMapping.npmOverviewCommon
+  }, {
+    label: 'network.isps',
+    prop: 'isp',
+    queryCycleTotalProp: 'isps',
+    dillDownProp: ['client_isp', 'server_isp'],
+    checked: false,
+    disabled: false,
+    panelId:drillDownPanelTypeMapping.npmOverviewCommon
+  }, {
+    label: 'network.applicationCategories',
+    prop: 'appSubcategory',
+    queryCycleTotalProp: 'applicationCategories',
+    dillDownProp: ['app_subcategory'],
+    checked: false,
+    disabled: false,
+    panelId:drillDownPanelTypeMapping.npmOverviewCommon
+  }, {
+    label: 'network.domainCategories',
+    prop: 'domainCategoryName',
+    queryCycleTotalProp: 'domainCategories',
+    dillDownProp: ['domain_category_name'],
+    checked: false,
+    disabled: false,
+    panelId:drillDownPanelTypeMapping.npmOverviewCommon
+  }, {
+    label: 'network.hosts',
+    prop: 'httpHost',
+    queryCycleTotalProp: 'hosts',
+    dillDownProp: ['http_host'],
+    checked: false,
+    disabled: false,
+    panelId:drillDownPanelTypeMapping.npmOverviewCommon
+  }, {
+    label: 'network.snis',
+    prop: 'sslSni',
+    queryCycleTotalProp: 'snis',
+    dillDownProp: ['ssl_sni'],
+    checked: false,
+    disabled: false,
+    panelId:drillDownPanelTypeMapping.npmOverviewCommon
+  }, {
+    label: 'network.protocolPorts',
+    prop: 'protocolPort',
+    queryCycleTotalProp: 'protocolports',
+    dillDownProp: ['common_l7_protocol', 'common_server_port '],
+    checked: false,
+    disabled: false,
+    panelId:drillDownPanelTypeMapping.npmOverviewCommon
+  }
+]
+
+export const bytesColumnNameGroup = {
+  total: 'bytesTotal',
+  inbound: 'inboundBitsRate',
+  outbound: 'outboundBitsRate',
+  internal: 'internalBitsRate',
+  through: 'throughBitsRate'
+}
+
+export const packetsColumnNameGroup = {
+  total: 'packetsTotal',
+  inbound: 'inboundPacketsRate',
+  outbound: 'outboundPacketsRate',
+  internal: 'internalPacketsRate',
+  through: 'throughPacketsRate'
+}
+
+export const sessionsColumnNameGroup = {
+  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
+  },
+  networkAppPerformance:{
+    tabList:networkAppPerformanceTabList,
+    column:customTableTitlesForAppPerformance,
+    url:npmSearchUrl,
+    hasMetricSearch:false,//是否有metric下拉列表
+    panelIdOfThirdMenu:drillDownPanelTypeMapping.npmThirdMenu,
+    bytesColumnNameGroup:{},//无metric下拉列表条件，用不到此3个属性
+    packetsColumnNameGroup:{},//无metric下拉列表条件，用不到此3个属性
+    sessionsColumnNameGroup:{}//无metric下拉列表条件，用不到此3个属性
+  }
+}
+
 export const dnsServerRole = {
  RTDNS: 'RTDNS',
  TLDNS: 'TLDNS',
--- 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 } from '@/utils/constants'
+import { panelTypeAndRouteMapping, storageKey,drillDownPanelTypeMapping } from '@/utils/constants'
 import { typeMapping } from '@/views/charts2/chart-tools'
 export default {
  name: 'ChartList',
@@ -66,6 +66,8 @@ 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){
+          this.layout = n.filter(c => c.type === typeMapping.npm.npmTabs || c.params.tabIndex === this.npmTabIndex || !c.params.hasOwnProperty('tabIndex'))
        } else {
          this.layout = [...n]
        }
@@ -83,8 +85,9 @@ export default {
      }
    },
    npmTabIndex (n) {
-      if (this.panelType === panelTypeAndRouteMapping.networkAppPerformance) {
-        this.layout = this.chartList.filter(c => c.type === typeMapping.npm.npmTabs || c.params.tabIndex === this.npmTabIndex)
+      if (this.panelType === panelTypeAndRouteMapping.networkAppPerformance ||
+          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'))
      }
    }
  },
@@ -93,7 +96,6 @@ export default {
      this.npmTabIndex = parseInt(index)
    },
    resizeLine () {
-      console.log(this.$refs)
      this.$refs.chartGrid.resizeLine()
    }
  }
--- a/src/views/charts2/Panel.vue
+++ b/src/views/charts2/Panel.vue
@@ -31,7 +31,7 @@
 </template>

 <script>
-import { useRoute } from 'vue-router'
+  import {useRoute, useRouter} from 'vue-router'
 import { ref } from 'vue'
 import { panelTypeAndRouteMapping } from '@/utils/constants'
 import { getPanelList, getChartList } from '@/utils/api'
@@ -74,7 +74,16 @@ export default {
    const panel = ref({})
    let panelType = 1 // 取得panel的type
    const { params } = useRoute()
-    panelType = props.entity ? props.entity.type : panelTypeAndRouteMapping[params.typeName]
+    let router = useRouter()
+    let thirdPanel = router.currentRoute.value.params.thirdPanel
+    let fourthPanel = router.currentRoute.value.params.fourthPanel
+    if(fourthPanel){
+      panelType = Number(fourthPanel)
+    }else if(thirdPanel){
+      panelType = Number(thirdPanel)
+    }else {
+      panelType = props.entity ? props.entity.type : panelTypeAndRouteMapping[params.typeName]
+    }

    function isEntityDetail (t) {
      return [4, 5, 6].indexOf(t) > -1
@@ -108,16 +117,6 @@ export default {
          this.initChartAttr(chart)
          return chart
        })
-
-        if (this.$store.getters.getBreadcrumbColumnName || this.$store.getters.getBreadcrumbColumnValue) { // networkOverview页面
-          const list = this.chartList.filter(item => {
-            return (item.type === 102 || item.type === 601)
-          })
-          list.forEach(item => {
-            item.w = 24
-          })
-          this.chartList = ref(list)
-        }
      }
    },
    initChartAttr (chart) {
--- a/src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue
+++ b/src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue
@@ -35,7 +35,7 @@
                  <span class="data-column__span">{{$t(item.label)}}</span>
                </template>
                <template  #default="scope" :column="item">
-                  <template v-if="item.prop === 'total'"  >
+                  <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">
@@ -45,14 +45,13 @@
                        <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><span>{{scope.row['trendValue']}}</span>
+                        <i class="cn-icon-constant cn-icon"></i>
                      </div>

                    </div>
                  </template>
-                  <template v-else-if="item.prop === 'tab'" >
-                    <div class="data-click" v-if='drillDown' @click="handleTabValue(item.label,scope.row['tab'])">{{scope.row['tab']}}</div>
-                    <div v-else >{{scope.row['tab']}}</div>
+                  <template v-else-if="item.columnType === tableColumnType.dillDown" >
+                    <div class="data-click" @click="handleTabValue(item.label,scope.row['tab'])">{{scope.row['tab']}}</div>
                  </template>
                  <template v-else>
                    {{scope.row[item.prop] ? unitConvert(scope.row[item.prop], unitTypes.number).join(' ') : '-'}}
@@ -66,8 +65,8 @@
      </template>

    </el-tabs>
-    <div class="tab-search">
-      <div class="search-select"  v-if="drillDown">
+    <div class="tab-search" >
+      <div class="search-select"  v-if="hasMetricSearch">
        <span>{{$t('network.metric')}}:</span>
        <el-select v-model="metric"
                   class="option__select select-column"
@@ -140,19 +139,23 @@
        </el-tabs>
      </el-popover>
    </div>
+
  </div>

 </template>
 <script>
 import { ref } from 'vue'
-import { networkOverviewTabs, networkOverviewTabList, operationType, networkOverviewSearchUrl, unitTypes } from '@/utils/constants'
+import {operationType, unitTypes,networkTable,tableColumnType } from '@/utils/constants'
 import { get } from '@/utils/http'
 import unitConvert from '@/utils/unit-convert'
+import { getChainRatio } from '@/utils/tools'

 export default {
  name: 'NetworkOverviewTabs',
  data () {
    return {
+      dragIndex: '',
+      dragMetricIndex: '',
      metric: 'Bits/s',
      orderBy: 'bytesTotal',
      tab: 'ip',
@@ -172,20 +175,10 @@ export default {
          label: 'Sessions/s'
        }
      ],
-      customTableTitles: [
-        { label: 'network.ips', prop: 'tab', checked: true, tabColumn: true },
-        { label: 'network.total', prop: 'total', checked: true, tabColumn: false },
-        { label: 'network.inbound', prop: 'inbound', checked: true, tabColumn: false },
-        { label: 'network.outbound', prop: 'outbound', checked: true, tabColumn: false },
-        { label: 'network.internal', prop: 'internal', checked: true, tabColumn: false },
-        { label: 'network.through', prop: 'through', checked: true, tabColumn: false }
-      ],
-      list: this.$_.cloneDeep(networkOverviewTabList),
-      dragIndex: '',
-      dragMetricIndex: '',
+      customTableTitles: [],
+      list: [],//当前状态列表
+      networkTabList: [],//原始状态列表
      showBackground: false,
-      tabUrl: networkOverviewTabList[0].url,
-      cycleTotalUrl: networkOverviewTabList[0].cycleTotalUrl,
      tableData: [],
      showTabs: true,
      columnNameGroup: {
@@ -197,7 +190,14 @@ export default {
      },
      metricUnit: 'bytes',
      loading: false,
-      drillDown: false
+      drillDown: false,
+      tableColumnType:tableColumnType,
+      curTable:{},//当前的表格类型
+      tableType:'',
+      hasMetricSearch:true,
+      activeTab:'',
+      activeCustomize:'',
+      networkSearchUrl:{}
    }
  },
  props: {
@@ -217,9 +217,6 @@ export default {
        }
      }
    }
-  },
-  computed: {
-
  },
  methods: {
    changeMetric () {
@@ -231,68 +228,56 @@ export default {
      const curTab = this.getCurTab()
      const label = curTab.label
      if (this.metric === 'Bits/s') {
-        this.columnNameGroup = {
-          total: 'bytesTotal',
-          inbound: 'inboundBitsRate',
-          outbound: 'outboundBitsRate',
-          internal: 'internalBitsRate',
-          through: 'throughBitsRate'
-        }
+        this.columnNameGroup = this.curTable.bytesColumnNameGroup
        this.orderBy = 'bytesTotal'
        this.metricUnit = 'bytes'
-
+        const titleGroup = []
        if (this.customTableTitles.length === 2) {
-          this.customTableTitles = [
-            { label: label, prop: 'tab', checked: true, tabColumn: true },
-            { label: 'network.total', prop: 'total', checked: this.customTableTitles[1].checked, tabColumn: false },
-            { label: 'network.inbound', prop: 'inbound', checked: this.customTableTitles[2] ? this.customTableTitles[2].checked : true, tabColumn: false },
-            { label: 'network.outbound', prop: 'outbound', checked: this.customTableTitles[3] ? this.customTableTitles[3].checked : true, tabColumn: false },
-            { label: 'network.internal', prop: 'internal', checked: this.customTableTitles[4] ? this.customTableTitles[4].checked : true, tabColumn: false },
-            { label: 'network.through', prop: 'through', checked: this.customTableTitles[5] ? this.customTableTitles[5].checked : true, tabColumn: false }
-          ]
+          this.curTable.column.forEach((item,index) => {
+            if (item.tabColumn) {
+              item.label = label
+            }
+            if(index===1){
+              item.checked = this.customTableTitles[1].checked
+            }
+            titleGroup.push(item)
+          })
        } else {
-          const titleGroup = []
          this.customTableTitles.forEach(item => {
            if (item.tabColumn) {
              item.label = label
            }
            titleGroup.push(item)
          })
-          this.customTableTitles = titleGroup
        }
+        this.customTableTitles = titleGroup
+
      } else if (this.metric === 'Packets/s') {
-        this.columnNameGroup = {
-          total: 'packetsTotal',
-          inbound: 'inboundPacketsRate',
-          outbound: 'outboundPacketsRate',
-          internal: 'internalPacketsRate',
-          through: 'throughPacketsRate'
-        }
+        this.columnNameGroup = this.curTable.packetsColumnNameGroup
        this.orderBy = 'packetsTotal'
        this.metricUnit = 'packets'
+        const titleGroup = []
        if (this.customTableTitles.length === 2) {
-          this.customTableTitles = [
-            { label: label, prop: 'tab', checked: true, tabColumn: true },
-            { label: 'network.total', prop: 'total', checked: this.customTableTitles[1].checked, tabColumn: false },
-            { label: 'network.inbound', prop: 'inbound', checked: this.customTableTitles[2] ? this.customTableTitles[2].checked : true, tabColumn: false },
-            { label: 'network.outbound', prop: 'outbound', checked: this.customTableTitles[3] ? this.customTableTitles[3].checked : true, tabColumn: false },
-            { label: 'network.internal', prop: 'internal', checked: this.customTableTitles[4] ? this.customTableTitles[4].checked : true, tabColumn: false },
-            { label: 'network.through', prop: 'through', checked: this.customTableTitles[5] ? this.customTableTitles[5].checked : true, tabColumn: false }
-          ]
+          this.curTable.column.forEach((item,index) => {
+            if (item.tabColumn) {
+              item.label = label
+            }
+            if(index===1){
+              item.checked = this.customTableTitles[1].checked
+            }
+            titleGroup.push(item)
+          })
        } else {
-          const titleGroup = []
          this.customTableTitles.forEach(item => {
            if (item.tabColumn) {
              item.label = label
            }
            titleGroup.push(item)
          })
-          this.customTableTitles = titleGroup
        }
+        this.customTableTitles = titleGroup
      } else if (this.metric === 'Sessions/s') {
-        this.columnNameGroup = {
-          total: 'sessionsRate'
-        }
+        this.columnNameGroup = this.curTable.sessionsColumnNameGroup
        this.orderBy = 'sessions'
        this.metricUnit = 'sessions'
        let totalChecked = true
@@ -302,8 +287,8 @@ export default {
          }
        })
        this.customTableTitles = [
-          { label: label, prop: 'tab', checked: true, tabColumn: true },
-          { label: 'network.total', prop: 'total', checked: totalChecked, tabColumn: false }
+          { 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}
        ]
      }
      let queryParams = {
@@ -334,7 +319,7 @@ export default {
      if (tabObjGroup && tabObjGroup.length > 0) {
        return tabObjGroup[0]
      } else {
-        return tabObjGroup = networkOverviewTabList.filter(item => item.checked)[0]
+        return tabObjGroup = this.networkTabList.filter(item => item.checked)[0]
      }
    },
    initData () {
@@ -357,7 +342,7 @@ export default {
        }
        this.showTabs = true
      } else if (curOperationType === operationType.thirdMenu) { // 点击的为第三级菜单
-        // 此处的id为tab- name
+        // 此处的id为tab-name
        this.list.forEach(item => {
          const tabDom = document.getElementById('tab-' + item.label)
          const paneDom = document.getElementById('pane-' + item.label)
@@ -472,23 +457,30 @@ export default {
          cycleTotalList = response.data.result
          tableDataTmp.forEach(item => {
            const cycle = cycleTotalList.find(i => i[curTab.prop] === item.tab)
-            let trend = ''
+            let trend = ''//空：无图标；up：向上的图标；down：向下的图标；noChange：横向箭头图标
            let trendPercent = ''
            if (cycle) {
              const totalDiff = item.total - cycle[this.metricUnit]
-              if (cycle[this.metricUnit]) {
-                trendPercent = Math.round((Math.abs(totalDiff) / cycle[this.metricUnit]) * 100)
-                if (totalDiff > 0) {
-                  trend = 'up'
-                } else if (totalDiff < 0) {
-                  trend = 'down'
-                } else {
-                  trend = 'noChange'
-                }
-                trendPercent = trendPercent + '%'
-                if (trendPercent === '0%') {
-                  trend = 'noChange'
+              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 = ''
+                  }
                }
              }
            }
@@ -539,8 +531,6 @@ export default {
        })
      }

-      this.tabUrl = tabList[0].url
-      this.cycleTotalUrl = tabList[0].cycleTotalUrl
      this.$store.commit('setNetworkOverviewCurrentTab', tabList[0])

      let queryParams = {
@@ -603,9 +593,11 @@ export default {
          })
        }
      })
+      let toPanel = null
      this.list.forEach((item, index) => {
        if (item.label === columnName) {
          item.checked = false
+          toPanel = item.panelId
        }
        if (oldCurTab && (item.label === oldCurTab.label)) {
          item.checked = true
@@ -621,8 +613,6 @@ export default {
      }

      const tab = this.list.filter(item => item.checked)
-      this.tabUrl = tab.url
-      this.cycleTotalUrl = tab.cycleTotalUrl

      // 如果面包屑的columnValue有值，则不更新valueList
      const valueList = []
@@ -631,9 +621,14 @@ export default {
      })
      this.$store.commit('setBreadcrumbColumnValueList', valueList)
      this.$router.push({
+        name:'panel',
        path: this.$route.path,
        query: {
          t: +new Date()
+        },
+        params:{
+          thirdPanel:this.curTable.panelIdOfThirdMenu,
+          fourthPanel:toPanel
        }
      })
    },
@@ -688,8 +683,6 @@ export default {
      if (tabObjGroup && tabObjGroup.length > 0) {
        const curTab = tabObjGroup[0]
        this.$store.commit('setNetworkOverviewCurrentTab', curTab)
-        this.tabUrl = curTab.url
-        this.cycleTotalUrl = curTab.cycleTotalUrl
        this.tab = curTab.prop

        let queryParams = {
@@ -713,9 +706,9 @@ export default {
    getCurUrl () {
      const condition = this.$store.getters.getQueryCondition
      if (condition) {
-        return networkOverviewSearchUrl.drilldownCurUrl
+        return this.networkSearchUrl.drilldownCurUrl
      } else {
-        return networkOverviewSearchUrl.curUrl
+        return this.networkSearchUrl.curUrl
      }
    },
    handleQueryParams (extraParams) {
@@ -723,7 +716,7 @@ export default {
      const name = this.$store.getters.getBreadcrumbColumnName
      let tabList = this.$store.getters.getNetworkOverviewTabList
      if (tabList.length === 0 || !tabList) {
-        tabList = this.$_.cloneDeep(networkOverviewTabList)
+        tabList = this.$_.cloneDeep(this.networkTabList)
      }

      const curOperationType = this.$store.getters.getTabOperationType
@@ -740,14 +733,14 @@ export default {
          this.customTableTitles[0].label = tabCheckedGroup[0].label
        }
      } else if (curOperationType === operationType.thirdMenu) { // 点击的为第三级菜单
-        const networkOverviewTabList = []
+        const networkTabList = []
        tabList.forEach(item => {
          if (this.$t(item.label) === name) {
            item.checked = true
          }
-          networkOverviewTabList.push(item)
+          networkTabList.push(item)
        })
-        this.$store.commit('setNetworkOverviewTabList', networkOverviewTabList)
+        this.$store.commit('setNetworkOverviewTabList', networkTabList)

        const breadcrumbColumnNameUrl = tabList.filter(item => this.$t(item.label) === name)
        if (breadcrumbColumnNameUrl && breadcrumbColumnNameUrl.length > 0) {
@@ -770,7 +763,7 @@ export default {
          this.$store.commit('setNetworkOverviewCurrentTab', curTab)
        }
      } else if (curOperationType === operationType.secondMenu) { // 点击第二级菜单，点击菜单
-        const list = this.$_.cloneDeep(networkOverviewTabList)
+        const list = this.$_.cloneDeep(this.networkTabList)
        const tabObjGroup = list.filter(item => item.checked)
        if (tabObjGroup && tabObjGroup.length > 0) {
          const curTab = tabObjGroup[0]
@@ -783,7 +776,7 @@ export default {
        if (!curTab) {
          let list = this.$store.getters.getNetworkOverviewTabList
          if (list.length === 0 || !list) {
-            list = this.$_.cloneDeep(networkOverviewTabList)
+            list = this.$_.cloneDeep(this.networkTabList)
          }
          const tabObjGroup = list.filter(item => item.checked)
          if (tabObjGroup && tabObjGroup.length > 0) {
@@ -799,7 +792,7 @@ export default {

      if (JSON.stringify(extraParams) === '{}') {
        extraParams = {
-          type: queryType || networkOverviewTabList[0].prop,
+          type: queryType || this.networkTabList[0].prop,
          orderBy: this.orderBy ? this.orderBy : 'bytesTotal',
          limit: 10
        }
@@ -813,9 +806,9 @@ export default {
    gerCycleUrl () {
      const condition = this.$store.getters.getQueryCondition
      if (condition) {
-        return networkOverviewSearchUrl.drilldownCycleUrl
+        return this.networkSearchUrl.drilldownCycleUrl
      } else {
-        return networkOverviewSearchUrl.cycleUrl
+        return this.networkSearchUrl.cycleUrl
      }
    },
    handleCustomizeClick (tab) {
@@ -841,7 +834,7 @@ export default {
        if (tabObjGroup && tabObjGroup.length > 0) {
          curTab = tabObjGroup[0]
        } else {
-          curTab = networkOverviewTabList[0]
+          curTab = this.networkTabList[0]
        }
        this.$store.commit('setNetworkOverviewCurrentTab', curTab)
      }
@@ -852,8 +845,17 @@ export default {
    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.hasMetricSearch = this.curTable.hasMetricSearch
+    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.list = this.$_.cloneDeep(networkOverviewTabList)
    if (this.$store.getters.getNetworkOverviewTabList.length > 0) {
      this.list = this.$store.getters.getNetworkOverviewTabList
    } else {
@@ -880,17 +882,9 @@ export default {
      })
    }
  },
-  setup (props) {
-    const activeTab = networkOverviewTabList[0].label
-    const activeCustomize = ref('tabs')
-    return {
-      activeTab,
-      activeCustomize,
-      networkOverviewTabs
-    }
-  },
+  setup (props) {},
  destroyed () {
-    this.$store.commit('setNetworkOverviewTabList', this.list)
+    this.$store.commit('setNetworkOverviewTabList', this.list)//保存状态
  }
 }
 </script>