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

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

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')
       },

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

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',
+    disabled: false,
-    cycleTotalUrl: '/interface/overview/ipsCycleTrafficTotal',
+    panelId:drillDownPanelTypeMapping.networkOverview
-    disabled: false
   }, {
     label: 'network.countries',
     prop: 'country',
     queryCycleTotalProp: 'countries',
     dillDownProp: ['client_country', 'server_country'],
     checked: true,
-    url: '/interface/overview/countriesTrafficAnalysis',
+    disabled: false,
-    cycleTotalUrl: '/interface/overview/countriesCycleTrafficTotal',
+    panelId:drillDownPanelTypeMapping.networkOverview
-    disabled: false
   }, {
     label: 'network.asns',
     prop: 'asn',
     queryCycleTotalProp: 'asns',
     dillDownProp: ['client_asn', 'server_asn'],
     checked: true,
-    url: '/interface/overview/asnsTrafficAnalysis',
+    disabled: false,
-    cycleTotalUrl: '/interface/overview/asnsCycleTrafficTotal',
+    panelId:drillDownPanelTypeMapping.networkOverview
-    disabled: false
   }, {
     label: 'network.applications',
     prop: 'appLabel',
     queryCycleTotalProp: 'applications',
     dillDownProp: ['common_app_label'],
     checked: true,
-    url: '/interface/overview/applicationsTrafficAnalysis',
+    disabled: false,
-    cycleTotalUrl: '/interface/overview/applicationsCycleTrafficTotal',
+    panelId:drillDownPanelTypeMapping.networkOverview
-    disabled: false
   }, {
     label: 'network.providers',
     prop: 'appCompany',
     queryCycleTotalProp: 'providers',
     dillDownProp: ['app_company'],
     checked: true,
-    url: '/interface/overview/providersTrafficAnalysis',
+    disabled: false,
-    cycleTotalUrl: '/interface/overview/providersCycleTrafficTotal',
+    panelId:drillDownPanelTypeMapping.networkOverview
-    disabled: false
   }, {
     label: 'network.domains',
     prop: 'domain',
     queryCycleTotalProp: 'domains',
     dillDownProp: ['domain'],
     checked: true,
-    url: '/interface/overview/domainsTrafficAnalysis',
+    disabled: false,
-    cycleTotalUrl: '/interface/overview/domainsCycleTrafficTotal',
+    panelId:drillDownPanelTypeMapping.networkOverview
-    disabled: false
   }, {
     label: 'network.protocols',
     prop: 'l7Protocol',
     queryCycleTotalProp: 'protocols',
     dillDownProp: ['common_l7_protocol'],
     checked: true,
-    url: '/interface/overview/protocolsTrafficAnalysis',
+    disabled: false,
-    cycleTotalUrl: '/interface/overview/protocolsCycleTrafficTotal',
+    panelId:drillDownPanelTypeMapping.networkOverview
-    disabled: false
   }, {
     label: 'network.idcTenants',
     prop: 'idcRenter',
     queryCycleTotalProp: 'idcTenants',
     dillDownProp: ['client_idc_renter', 'server_idc_renter'],
     checked: true,
-    url: '/interface/overview/idcTenantsTrafficAnalysis',
+    disabled: false,
-    cycleTotalUrl: '/interface/overview/idcTenantsCycleTrafficTotal',
+    panelId:drillDownPanelTypeMapping.networkOverview
-    disabled: false
   }, {
     label: 'network.provinces',
     prop: 'province',
     queryCycleTotalProp: 'provinces',
     dillDownProp: ['client_province', 'server_province'],
     checked: false,
-    url: '/interface/overview/provincesTrafficAnalysis',
+    disabled: false,
-    cycleTotalUrl: '/interface/overview/provincesCycleTrafficTotal',
+    panelId:drillDownPanelTypeMapping.networkOverview
-    disabled: false
   }, {
     label: 'network.cities',
     prop: 'city',
     queryCycleTotalProp: 'cities',
     dillDownProp: ['client_region', 'server_region'],
     checked: false,
-    url: '/interface/overview/citiesTrafficAnalysis',
+    disabled: false,
-    cycleTotalUrl: '/interface/overview/citiesCycleTrafficTotal',
+    panelId:drillDownPanelTypeMapping.networkOverview
-    disabled: false
   }, {
     label: 'network.isps',
     prop: 'isp',
     queryCycleTotalProp: 'isps',
     dillDownProp: ['client_isp', 'server_isp'],
     checked: false,
-    url: '/interface/overview/ispsTrafficAnalysis',
+    disabled: false,
-    cycleTotalUrl: '/interface/overview/ispsCycleTrafficTotal',
+    panelId:drillDownPanelTypeMapping.networkOverview
-    disabled: false
   }, {
     label: 'network.applicationCategories',
     prop: 'appSubcategory',
     queryCycleTotalProp: 'applicationCategories',
     dillDownProp: ['app_subcategory'],
     checked: false,
-    url: '/interface/overview/applicationCategoriesTrafficAnalysis',
+    disabled: false,
-    cycleTotalUrl: '/interface/overview/applicationCategoriesCycleTrafficTotal',
+    panelId:drillDownPanelTypeMapping.networkOverview
-    disabled: false
   }, {
     label: 'network.domainCategories',
     prop: 'domainCategoryName',
     queryCycleTotalProp: 'domainCategories',
     dillDownProp: ['domain_category_name'],
     checked: false,
-    url: '/interface/overview/domainCategoriesTrafficAnalysis',
+    disabled: false,
-    cycleTotalUrl: '/interface/overview/domainCategoriesCycleTrafficTotal',
+    panelId:drillDownPanelTypeMapping.networkOverview
-    disabled: false
   }, {
     label: 'network.hosts',
     prop: 'httpHost',
     queryCycleTotalProp: 'hosts',
     dillDownProp: ['http_host'],
     checked: false,
-    url: '/interface/overview/hostsTrafficAnalysis',
+    disabled: false,
-    cycleTotalUrl: '/interface/overview/hostsCycleTrafficTotal',
+    panelId:drillDownPanelTypeMapping.networkOverview
-    disabled: false
   }, {
     label: 'network.snis',
     prop: 'sslSni',
     queryCycleTotalProp: 'snis',
     dillDownProp: ['ssl_sni'],
     checked: false,
-    url: '/interface/overview/snisTrafficAnalysis',
+    disabled: false,
-    cycleTotalUrl: '/interface/overview/snisCycleTrafficTotal',
+    panelId:drillDownPanelTypeMapping.networkOverview
-    disabled: false
   }, {
     label: 'network.protocolPorts',
     prop: 'protocolPort',
     queryCycleTotalProp: 'protocolports',
     dillDownProp: ['common_l7_protocol', 'common_server_port '],
     checked: false,
-    url: '/interface/overview/protocolPortsTrafficAnalysis',
+    disabled: false,
-    cycleTotalUrl: '/interface/overview/protocolPortsCycleTrafficTotal',
+    panelId:drillDownPanelTypeMapping.networkOverview
-    disabled: false
   }
 ]
 
+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',

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) {
+      if (this.panelType === panelTypeAndRouteMapping.networkAppPerformance ||
-        this.layout = this.chartList.filter(c => c.type === typeMapping.npm.npmTabs || c.params.tabIndex === this.npmTabIndex)
+          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()
     }
   }

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) {

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'" >
+                  <template v-else-if="item.columnType === tableColumnType.dillDown" >
-                    <div class="data-click" v-if='drillDown' @click="handleTabValue(item.label,scope.row['tab'])">{{scope.row['tab']}}</div>
+                    <div class="data-click" @click="handleTabValue(item.label,scope.row['tab'])">{{scope.row['tab']}}</div>
-                    <div v-else >{{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="tab-search" >
-      <div class="search-select"  v-if="drillDown">
+      <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: [
+      customTableTitles: [],
-        { label: 'network.ips', prop: 'tab', checked: true, tabColumn: true },
+      list: [],//当前状态列表
-        { label: 'network.total', prop: 'total', checked: true, tabColumn: false },
+      networkTabList: [],//原始状态列表
-        { 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: '',
       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 = {
+        this.columnNameGroup = this.curTable.bytesColumnNameGroup
-          total: 'bytesTotal',
-          inbound: 'inboundBitsRate',
-          outbound: 'outboundBitsRate',
-          internal: 'internalBitsRate',
-          through: 'throughBitsRate'
-        }
         this.orderBy = 'bytesTotal'
         this.metricUnit = 'bytes'
-
+        const titleGroup = []
         if (this.customTableTitles.length === 2) {
-          this.customTableTitles = [
+          this.curTable.column.forEach((item,index) => {
-            { label: label, prop: 'tab', checked: true, tabColumn: true },
+            if (item.tabColumn) {
-            { label: 'network.total', prop: 'total', checked: this.customTableTitles[1].checked, tabColumn: false },
+              item.label = label
-            { 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 },
+            if(index===1){
-            { label: 'network.internal', prop: 'internal', checked: this.customTableTitles[4] ? this.customTableTitles[4].checked : true, tabColumn: false },
+              item.checked = this.customTableTitles[1].checked
-            { label: 'network.through', prop: 'through', checked: this.customTableTitles[5] ? this.customTableTitles[5].checked : true, tabColumn: false }
+            }
-          ]
+            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 = {
+        this.columnNameGroup = this.curTable.packetsColumnNameGroup
-          total: 'packetsTotal',
-          inbound: 'inboundPacketsRate',
-          outbound: 'outboundPacketsRate',
-          internal: 'internalPacketsRate',
-          through: 'throughPacketsRate'
-        }
         this.orderBy = 'packetsTotal'
         this.metricUnit = 'packets'
+        const titleGroup = []
         if (this.customTableTitles.length === 2) {
-          this.customTableTitles = [
+          this.curTable.column.forEach((item,index) => {
-            { label: label, prop: 'tab', checked: true, tabColumn: true },
+            if (item.tabColumn) {
-            { label: 'network.total', prop: 'total', checked: this.customTableTitles[1].checked, tabColumn: false },
+              item.label = label
-            { 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 },
+            if(index===1){
-            { label: 'network.internal', prop: 'internal', checked: this.customTableTitles[4] ? this.customTableTitles[4].checked : true, tabColumn: false },
+              item.checked = this.customTableTitles[1].checked
-            { label: 'network.through', prop: 'through', checked: this.customTableTitles[5] ? this.customTableTitles[5].checked : true, tabColumn: false }
+            }
-          ]
+            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 = {
+        this.columnNameGroup = this.curTable.sessionsColumnNameGroup
-          total: 'sessionsRate'
-        }
         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: label, prop: 'tab', checked: true, tabColumn: true,columnType:this.curTable.column[0].columnType},
-          { label: 'network.total', prop: 'total', checked: totalChecked, tabColumn: false }
+          { 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]) {
+              if (cycle[this.metricUnit] && cycle[this.metricUnit]!=0) {
-                trendPercent = Math.round((Math.abs(totalDiff) / cycle[this.metricUnit]) * 100)
+                let chainRatio = getChainRatio(item.total, cycle[this.metricUnit])
-                if (totalDiff > 0) {
+                if (chainRatio === '-') {
-                  trend = 'up'
+                  trend = ''
-                } else if (totalDiff < 0) {
-                  trend = 'down'
-                } else {
-                  trend = 'noChange'
-                }
-                trendPercent = trendPercent + '%'
-                if (trendPercent === '0%') {
-                  trend = 'noChange'
                   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) {
+  setup (props) {},
-    const activeTab = networkOverviewTabList[0].label
-    const activeCustomize = ref('tabs')
-    return {
-      activeTab,
-      activeCustomize,
-      networkOverviewTabs
-    }
-  },
   destroyed () {
-    this.$store.commit('setNetworkOverviewTabList', this.list)
+    this.$store.commit('setNetworkOverviewTabList', this.list)//保存状态
   }
 }
 </script>