diff --git a/src/assets/css/components/views/charts2/networkOverviewTabs.scss b/src/assets/css/components/views/charts2/networkOverviewTabs.scss index 99c658eb..8ec96843 100644 --- a/src/assets/css/components/views/charts2/networkOverviewTabs.scss +++ b/src/assets/css/components/views/charts2/networkOverviewTabs.scss @@ -233,7 +233,7 @@ height: calc(100% - 40px); border:none; .el-table__body-wrapper { - height: calc(100% - 30px) !important; + height: calc(100% - 45px) !important; } } } diff --git a/src/components/layout/Header.vue b/src/components/layout/Header.vue index 66fd94b5..e705a6cd 100644 --- a/src/components/layout/Header.vue +++ b/src/components/layout/Header.vue @@ -628,11 +628,19 @@ export default { } // console.log(queryCondition.join(' AND ')) this.urlChangeParams[this.curTabState.queryCondition] = queryCondition.join(' AND ') + this.urlChangeParams[this.curTabState.lineQueryCondition] = queryCondition.join(' AND ') } else { searchProps.forEach(item => { queryCondition.push(item + '=\'' + handleSpecialValue(value) + '\'') }) this.urlChangeParams[this.curTabState.queryCondition] = queryCondition.join(' OR ') + const lineQueryCondition = [] + if (curTab.lineQueryCondition) { + curTab.lineQueryCondition.forEach(item => { + lineQueryCondition.push(item.replaceAll('$param', value)) + }) + this.urlChangeParams[this.curTabState.lineQueryCondition] = lineQueryCondition.join(' OR ') + } } } this.changeUrlTabState() @@ -700,7 +708,7 @@ export default { } } }, - jump (route, columnName, columnValue, opeType) { + async jump (route, columnName, columnValue, opeType) { if (route === '/panel/linkMonitor' && opeType === 3) { return true } @@ -719,6 +727,9 @@ export default { this.$store.commit('setNetworkOverviewTabList', []) } // 清空网络概况的特殊面包屑 + const tableType = this.$route.params ? this.$route.params.typeName : 'networkOverview' + const metric = this.getUrlParam(this.curTabState.tableMetric, 'Bits/s') + const curTab = await getDefaultCurTab(tableType, metric, columnName) this.$store.getters.menuList.forEach(menu => { if (!this.$_.isEmpty(menu.children)) { menu.children.forEach(child => { @@ -740,16 +751,19 @@ export default { this.urlChangeParams[this.curTabState.thirdMenu] = columnName this.urlChangeParams[this.curTabState.fourthMenu] = '' this.urlChangeParams[this.curTabState.panelName] = columnName - const tableType = this.$route.params ? this.$route.params.typeName : 'networkOverview' - const metric = this.getUrlParam(this.curTabState.tableMetric, 'Bits/s') - const curTab = getDefaultCurTab(tableType, metric, columnName) + if (curTab.thirdDimensionQueryCondition) { + this.urlChangeParams[this.curTabState.thirdDimensionQueryCondition] = curTab.thirdDimensionQueryCondition.join(' OR ') + } + if (curTab.lineThirdDimensionQueryCondition) { + this.urlChangeParams[this.curTabState.lineThirdDimensionQueryCondition] = curTab.lineThirdDimensionQueryCondition.join(' OR ') + } this.urlChangeParams[this.curTabState.curTab] = curTab.prop this.urlChangeParams[this.curTabState.dimensionType] = curTab ? curTab.prop : '' - this.$_.omit(this.urlChangeParams, [this.curTabState.queryCondition, this.curTabState.networkOverviewBeforeTab]) + this.$_.omit(this.urlChangeParams, [this.curTabState.queryCondition, this.curTabState.networkOverviewBeforeTab, this.curTabState.lineQueryCondition]) } else { child.columnName = '' child.columnValue = '' - this.$_.omit(this.urlChangeParams, [this.curTabState.thirdPanel, this.curTabState.fourthPanel, this.curTabState.thirdMenu, this.curTabState.fourthMenu, this.curTabState.dimensionType, this.curTabState.panelName, this.curTabState.curTab, this.curTabState.queryCondition, this.curTabState.networkOverviewBeforeTab]) + this.$_.omit(this.urlChangeParams, [this.curTabState.thirdPanel, this.curTabState.fourthPanel, this.curTabState.thirdMenu, this.curTabState.fourthMenu, this.curTabState.dimensionType, this.curTabState.panelName, this.curTabState.curTab, this.curTabState.queryCondition, this.curTabState.networkOverviewBeforeTab,, this.curTabState.lineThirdDimensionQueryCondition,, this.curTabState.thirdDimensionQueryCondition]) } } }) diff --git a/src/utils/constants.js b/src/utils/constants.js index f2b629ca..233f0ae8 100644 --- a/src/utils/constants.js +++ b/src/utils/constants.js @@ -435,6 +435,9 @@ export const curTabState = { tableSortType: 'tableSortType', tableSortTab: 'tableSortTab', queryCondition: 'queryCondition', + thirdDimensionQueryCondition: 'thirdDimensionQueryCondition', + lineQueryCondition: 'lineQueryCondition', + lineThirdDimensionQueryCondition: 'lineThirdDimensionQueryCondition', dimensionType: 'dimensionType', // 纬度 panelName: 'panelName', thirdMenu: 'thirdMenu', @@ -681,7 +684,10 @@ export const networkOverviewTabList = [ label: 'network.ips', prop: 'ip', queryCycleTotalProp: 'ips', - dillDownProp: ['common_client_ip', 'common_server_ip'], + dillDownProp: ['common_client_ip', 'common_server_ip'], // 下钻表格：查询条件q（dillDownProp里条件之间都是OR的关系）,或者queryCondition属性，queryCondition: ['ip = \'$param\' AND side = \'server\''], + thirdDimensionQueryCondition: ['notEmpty(common_client_ip) OR notEmpty(common_server_ip)'], // 下钻表格：第三级维度查询条件q + lineQueryCondition: ['ip = \'$param\''], // 曲线图：查询条件q + lineThirdDimensionQueryCondition: ['notEmpty(ip)'], // 曲线图：第三级维度查询条件q checked: true, disabled: false, panelId: drillDownPanelTypeMapping.networkOverview @@ -690,6 +696,9 @@ export const networkOverviewTabList = [ prop: 'countryRegion', queryCycleTotalProp: 'countries', dillDownProp: ['client_country_region', 'server_country_region'], + thirdDimensionQueryCondition: ['notEmpty(client_country_region) OR notEmpty(server_country_region)'], // 下钻表格：第三级维度查询条件q + lineQueryCondition: ['country_region = \'$param\''], // 曲线图：查询条件q + lineThirdDimensionQueryCondition: ['notEmpty(country_region)'], // 曲线图：第三级维度查询条件q checked: true, disabled: false, panelId: drillDownPanelTypeMapping.networkOverview @@ -698,6 +707,9 @@ export const networkOverviewTabList = [ prop: 'asn', queryCycleTotalProp: 'asns', dillDownProp: ['client_asn', 'server_asn'], + thirdDimensionQueryCondition: ['notEmpty(client_asn) OR notEmpty(server_asn)'], // 下钻表格：第三级维度查询条件q + lineQueryCondition: ['asn = \'$param\''], // 曲线图：查询条件q + lineThirdDimensionQueryCondition: ['notEmpty(asn)'], // 曲线图：第三级维度查询条件q checked: true, disabled: false, panelId: drillDownPanelTypeMapping.networkOverview @@ -706,6 +718,9 @@ export const networkOverviewTabList = [ prop: 'appLabel', queryCycleTotalProp: 'applications', dillDownProp: ['common_app_label'], + thirdDimensionQueryCondition: ['notEmpty(common_app_label)'], // 下钻表格：第三级维度查询条件q + lineQueryCondition: ['common_app_label = \'$param\''], // 曲线图：查询条件q + lineThirdDimensionQueryCondition: ['notEmpty(common_app_label)'], // 曲线图：第三级维度查询条件q checked: true, disabled: false, panelId: drillDownPanelTypeMapping.networkOverview @@ -714,6 +729,9 @@ export const networkOverviewTabList = [ prop: 'appCompany', queryCycleTotalProp: 'providers', dillDownProp: ['app_company'], + thirdDimensionQueryCondition: ['notEmpty(app_company)'], // 下钻表格：第三级维度查询条件q + lineQueryCondition: ['app_company = \'$param\''], // 曲线图：查询条件q + lineThirdDimensionQueryCondition: ['notEmpty(app_company)'], // 曲线图：第三级维度查询条件q checked: true, disabled: false, panelId: drillDownPanelTypeMapping.networkOverview @@ -722,6 +740,9 @@ export const networkOverviewTabList = [ prop: 'domain', queryCycleTotalProp: 'domains', dillDownProp: ['domain'], + thirdDimensionQueryCondition: ['notEmpty(domain)'], // 下钻表格：第三级维度查询条件q + lineQueryCondition: ['domain = \'$param\''], // 曲线图：查询条件q + lineThirdDimensionQueryCondition: ['notEmpty(domain)'], // 曲线图：第三级维度查询条件q checked: true, disabled: false, panelId: drillDownPanelTypeMapping.networkOverview @@ -730,6 +751,9 @@ export const networkOverviewTabList = [ prop: 'domainSld', queryCycleTotalProp: 'domainSld', dillDownProp: ['domain_sld'], + thirdDimensionQueryCondition: ['notEmpty(domain_sld)'], // 下钻表格：第三级维度查询条件q + lineQueryCondition: ['domain_sld = \'$param\''], // 曲线图：查询条件q + lineThirdDimensionQueryCondition: ['notEmpty(domain_sld)'], // 曲线图：第三级维度查询条件q checked: true, disabled: false, panelId: drillDownPanelTypeMapping.networkOverview @@ -738,6 +762,9 @@ export const networkOverviewTabList = [ prop: 'l7Protocol', queryCycleTotalProp: 'protocols', dillDownProp: ['common_l7_protocol'], + thirdDimensionQueryCondition: ['notEmpty(common_l7_protocol)'], // 下钻表格：第三级维度查询条件q + lineQueryCondition: ['common_l7_protocol = \'$param\''], // 曲线图：查询条件q + lineThirdDimensionQueryCondition: ['notEmpty(common_l7_protocol)'], // 曲线图：第三级维度查询条件q checked: true, disabled: false, panelId: drillDownPanelTypeMapping.networkOverview @@ -746,6 +773,9 @@ export const networkOverviewTabList = [ prop: 'superAdminArea', queryCycleTotalProp: 'regions', dillDownProp: ['client_super_admin_area', 'server_super_admin_ area'], + thirdDimensionQueryCondition: ['notEmpty(client_super_admin_area) OR notEmpty(server_super_admin_area)'], // 下钻表格：第三级维度查询条件q + lineQueryCondition: ['super_admin_area = \'$param\''], // 曲线图：查询条件q + lineThirdDimensionQueryCondition: ['notEmpty(super_admin_area)'], // 曲线图：第三级维度查询条件q checked: false, disabled: false, panelId: drillDownPanelTypeMapping.networkOverview @@ -754,6 +784,9 @@ export const networkOverviewTabList = [ prop: 'adminArea', queryCycleTotalProp: 'cities', dillDownProp: ['client_admin_area', 'server_admin_area'], + thirdDimensionQueryCondition: ['notEmpty(client_admin_area) OR notEmpty(server_admin_area)'], // 下钻表格：第三级维度查询条件q + lineQueryCondition: ['admin_area = \'$param\''], // 曲线图：查询条件q + lineThirdDimensionQueryCondition: ['notEmpty(admin_area)'], // 曲线图：第三级维度查询条件q checked: false, disabled: false, panelId: drillDownPanelTypeMapping.networkOverview @@ -762,6 +795,9 @@ export const networkOverviewTabList = [ prop: 'isp', queryCycleTotalProp: 'isps', dillDownProp: ['client_isp', 'server_isp'], + thirdDimensionQueryCondition: ['notEmpty(client_isp) OR notEmpty(server_isp)'], // 下钻表格：第三级维度查询条件q + lineQueryCondition: ['isp = \'$param\''], // 曲线图：查询条件q + lineThirdDimensionQueryCondition: ['notEmpty(isp)'], // 曲线图：第三级维度查询条件q checked: false, disabled: false, panelId: drillDownPanelTypeMapping.networkOverview @@ -770,6 +806,9 @@ export const networkOverviewTabList = [ prop: 'appSubcategory', queryCycleTotalProp: 'applicationCategories', dillDownProp: ['app_subcategory'], + thirdDimensionQueryCondition: ['notEmpty(app_subcategory)'], // 下钻表格：第三级维度查询条件q + lineQueryCondition: ['app_subcategory = \'$param\''], // 曲线图：查询条件q + lineThirdDimensionQueryCondition: ['notEmpty(app_subcategory)'], // 曲线图：第三级维度查询条件q checked: false, disabled: false, panelId: drillDownPanelTypeMapping.networkOverview @@ -778,6 +817,9 @@ export const networkOverviewTabList = [ prop: 'domainCategoryName', queryCycleTotalProp: 'domainCategories', dillDownProp: ['domain_category_name'], + thirdDimensionQueryCondition: ['notEmpty(domain_category_name)'], // 下钻表格：第三级维度查询条件q + lineQueryCondition: ['domain_category_name = \'$param\''], // 曲线图：查询条件q + lineThirdDimensionQueryCondition: ['notEmpty(domain_category_name)'], // 曲线图：第三级维度查询条件q checked: false, disabled: false, panelId: drillDownPanelTypeMapping.networkOverview @@ -786,6 +828,9 @@ export const networkOverviewTabList = [ prop: 'httpHost', queryCycleTotalProp: 'hosts', dillDownProp: ['http_host'], + thirdDimensionQueryCondition: ['notEmpty(http_host)'], // 下钻表格：第三级维度查询条件q + lineQueryCondition: ['http_host = \'$param\''], // 曲线图：查询条件q + lineThirdDimensionQueryCondition: ['notEmpty(http_host)'], // 曲线图：第三级维度查询条件q checked: false, disabled: false, panelId: drillDownPanelTypeMapping.networkOverview @@ -794,6 +839,9 @@ export const networkOverviewTabList = [ prop: 'protocolPort', queryCycleTotalProp: 'protocolports', dillDownProp: ['common_l7_protocol', 'common_server_port '], + thirdDimensionQueryCondition: ['notEmpty(common_l7_protocol)'], // 下钻表格：第三级维度查询条件q + lineQueryCondition: ['common_l7_protocol = \'$protocol_param\' AND common_server_port = $port_param'], // 曲线图：查询条件q + lineThirdDimensionQueryCondition: ['notEmpty(common_l7_protocol)'], // 曲线图：第三级维度查询条件q checked: false, disabled: false, panelId: drillDownPanelTypeMapping.networkOverview @@ -802,6 +850,9 @@ export const networkOverviewTabList = [ prop: 'clientIp', queryCycleTotalProp: 'clientIps', dillDownProp: ['common_client_ip'], + thirdDimensionQueryCondition: ['notEmpty(common_client_ip)'], // 下钻表格：第三级维度查询条件q + lineQueryCondition: ['ip = \'$param\' and side = \'client\''], // 曲线图：查询条件q + lineThirdDimensionQueryCondition: ['notEmpty(ip) and side = \'client\''], // 曲线图：第三级维度查询条件q checked: false, disabled: false, panelId: drillDownPanelTypeMapping.networkOverview @@ -810,6 +861,9 @@ export const networkOverviewTabList = [ prop: 'serverIp', queryCycleTotalProp: 'serverIps', dillDownProp: ['common_server_ip'], + thirdDimensionQueryCondition: ['notEmpty(common_server_ip)'], // 下钻表格：第三级维度查询条件q + lineQueryCondition: ['ip = \'$param\' and side = \'server\''], // 曲线图：查询条件q + lineThirdDimensionQueryCondition: ['notEmpty(ip) and side = \'server\''], // 曲线图：第三级维度查询条件q checked: false, disabled: false, panelId: drillDownPanelTypeMapping.networkOverview @@ -818,6 +872,9 @@ export const networkOverviewTabList = [ prop: 'clientCountryRegion', queryCycleTotalProp: 'clientCountries', dillDownProp: ['client_country_region'], + thirdDimensionQueryCondition: ['notEmpty(client_country_region)'], // 下钻表格：第三级维度查询条件q + lineQueryCondition: ['country_region = \'$param\' and side = \'client\''], // 曲线图：查询条件q + lineThirdDimensionQueryCondition: ['notEmpty(country_region) and side = \'client\''], // 曲线图：第三级维度查询条件q checked: false, disabled: false, panelId: drillDownPanelTypeMapping.networkOverview @@ -826,22 +883,31 @@ export const networkOverviewTabList = [ prop: 'serverCountryRegion', queryCycleTotalProp: 'serverCountries', dillDownProp: ['server_country_region'], + thirdDimensionQueryCondition: ['notEmpty(server_country_region)'], // 下钻表格：第三级维度查询条件q + lineQueryCondition: ['country_region = \'$param\' and side = \'server\''], // 曲线图：查询条件q + lineThirdDimensionQueryCondition: ['notEmpty(country_region) and side = \'server\''], // 曲线图：第三级维度查询条件q checked: false, disabled: false, panelId: drillDownPanelTypeMapping.networkOverview }, { - label: 'network.clientProvinces', + label: 'network.clientRegions', prop: 'clientSuperAdminArea', queryCycleTotalProp: 'clientProvinces', dillDownProp: ['client_super_admin_area'], + thirdDimensionQueryCondition: ['notEmpty(client_super_admin_area)'], // 下钻表格：第三级维度查询条件q + lineQueryCondition: ['super_admin_area = \'$param\' and side = \'client\''], // 曲线图：查询条件q + lineThirdDimensionQueryCondition: ['notEmpty(super_admin_area) and side = \'client\''], // 曲线图：第三级维度查询条件q checked: false, disabled: false, panelId: drillDownPanelTypeMapping.networkOverview }, { - label: 'network.serverProvinces', + label: 'network.serverRegions', prop: 'serverSuperAdminArea', queryCycleTotalProp: 'serverProvinces', dillDownProp: ['server_super_admin_area'], + thirdDimensionQueryCondition: ['notEmpty(server_super_admin_area)'], // 下钻表格：第三级维度查询条件q + lineQueryCondition: ['super_admin_area = \'$param\' and side = \'server\''], // 曲线图：查询条件q + lineThirdDimensionQueryCondition: ['notEmpty(super_admin_area) and side = \'server\''], // 曲线图：第三级维度查询条件q checked: false, disabled: false, panelId: drillDownPanelTypeMapping.networkOverview @@ -850,6 +916,9 @@ export const networkOverviewTabList = [ prop: 'clientAdminArea', queryCycleTotalProp: 'clientCities', dillDownProp: ['client_admin_area'], + thirdDimensionQueryCondition: ['notEmpty(client_admin_area)'], // 下钻表格：第三级维度查询条件q + lineQueryCondition: ['admin_area = \'$param\' and side = \'client\''], // 曲线图：查询条件q + lineThirdDimensionQueryCondition: ['notEmpty(admin_area) and side = \'client\''], // 曲线图：第三级维度查询条件q checked: false, disabled: false, panelId: drillDownPanelTypeMapping.networkOverview @@ -858,6 +927,9 @@ export const networkOverviewTabList = [ prop: 'serverAdminArea', queryCycleTotalProp: 'serverCities', dillDownProp: ['server_admin_area'], + thirdDimensionQueryCondition: ['notEmpty(server_admin_area)'], // 下钻表格：第三级维度查询条件q + lineQueryCondition: ['admin_area = \'$param\' and side = \'server\''], // 曲线图：查询条件q + lineThirdDimensionQueryCondition: ['notEmpty(admin_area) and side = \'server\''], // 曲线图：第三级维度查询条件q checked: false, disabled: false, panelId: drillDownPanelTypeMapping.networkOverview @@ -866,6 +938,9 @@ export const networkOverviewTabList = [ prop: 'clientIsp', queryCycleTotalProp: 'clientIsps', dillDownProp: ['client_isp'], + thirdDimensionQueryCondition: ['notEmpty(client_isp)'], // 下钻表格：第三级维度查询条件q + lineQueryCondition: ['isp = \'$param\' and side = \'client\''], // 曲线图：查询条件q + lineThirdDimensionQueryCondition: ['notEmpty(isp) and side = \'client\''], // 曲线图：第三级维度查询条件q checked: false, disabled: false, panelId: drillDownPanelTypeMapping.networkOverview @@ -874,6 +949,9 @@ export const networkOverviewTabList = [ prop: 'serverIsp', queryCycleTotalProp: 'serverIsps', dillDownProp: ['server_isp'], + thirdDimensionQueryCondition: ['notEmpty(server_isp)'], // 下钻表格：第三级维度查询条件q + lineQueryCondition: ['isp = \'$param\' and side = \'server\''], // 曲线图：查询条件q + lineThirdDimensionQueryCondition: ['notEmpty(isp) and side = \'server\''], // 曲线图：第三级维度查询条件q checked: false, disabled: false, panelId: drillDownPanelTypeMapping.networkOverview @@ -882,6 +960,9 @@ export const networkOverviewTabList = [ prop: 'clientAsn', queryCycleTotalProp: 'clientAsns', dillDownProp: ['client_asn'], + thirdDimensionQueryCondition: ['notEmpty(client_asn)'], // 下钻表格：第三级维度查询条件q + lineQueryCondition: ['asn = \'$param\' and side = \'client\''], // 曲线图：查询条件q + lineThirdDimensionQueryCondition: ['notEmpty(asn) and side = \'client\''], // 曲线图：第三级维度查询条件q checked: false, disabled: false, panelId: drillDownPanelTypeMapping.networkOverview @@ -890,6 +971,9 @@ export const networkOverviewTabList = [ prop: 'serverAsn', queryCycleTotalProp: 'serverAsns', dillDownProp: ['server_asn'], + thirdDimensionQueryCondition: ['notEmpty(server_asn)'], // 下钻表格：第三级维度查询条件q + lineQueryCondition: ['asn = \'$param\' and side = \'server\''], // 曲线图：查询条件q + lineThirdDimensionQueryCondition: ['notEmpty(asn) and side = \'server\''], // 曲线图：第三级维度查询条件q checked: false, disabled: false, panelId: drillDownPanelTypeMapping.networkOverview @@ -1022,6 +1106,7 @@ export const networkAppPerformanceTabList = [ prop: 'clientIp', queryCycleTotalProp: 'clientIps', dillDownProp: ['common_client_ip'], + queryCondition: ['ip = \'$param\' AND side = \'client\''], checked: false, disabled: false, panelId: drillDownPanelTypeMapping.npmOverviewCommon @@ -1030,6 +1115,7 @@ export const networkAppPerformanceTabList = [ prop: 'serverIp', queryCycleTotalProp: 'serverIps', dillDownProp: ['common_server_ip'], + queryCondition: ['ip = \'$param\' AND side = \'server\''], checked: false, disabled: false, panelId: drillDownPanelTypeMapping.npmOverviewCommon @@ -1038,6 +1124,7 @@ export const networkAppPerformanceTabList = [ prop: 'clientCountryRegion', queryCycleTotalProp: 'clientCountries', dillDownProp: ['client_country_region'], + queryCondition: ['country_region = \'$param\' AND side = \'client\''], checked: false, disabled: false, panelId: drillDownPanelTypeMapping.npmOverviewCommon @@ -1046,22 +1133,25 @@ export const networkAppPerformanceTabList = [ prop: 'serverCountryRegion', queryCycleTotalProp: 'serverCountries', dillDownProp: ['server_country_region'], + queryCondition: ['country_region = \'$param\' AND side = \'server\''], checked: false, disabled: false, panelId: drillDownPanelTypeMapping.npmOverviewCommon }, { - label: 'network.clientProvinces', + label: 'network.clientRegions', prop: 'clientSuperAdminArea', queryCycleTotalProp: 'clientProvinces', dillDownProp: ['client_super_admin_area'], + queryCondition: ['super_admin_area = \'$param\' AND side = \'client\''], checked: false, disabled: false, panelId: drillDownPanelTypeMapping.npmOverviewCommon }, { - label: 'network.serverProvinces', + label: 'network.serverRegions', prop: 'serverSuperAdminArea', queryCycleTotalProp: 'serverProvinces', dillDownProp: ['server_super_admin_area'], + queryCondition: ['super_admin_area = \'$param\' AND side = \'server\''], checked: false, disabled: false, panelId: drillDownPanelTypeMapping.npmOverviewCommon @@ -1070,6 +1160,7 @@ export const networkAppPerformanceTabList = [ prop: 'clientAdminArea', queryCycleTotalProp: 'clientCities', dillDownProp: ['client_admin_area'], + queryCondition: ['admin_area = \'$param\' AND side = \'client\''], checked: false, disabled: false, panelId: drillDownPanelTypeMapping.npmOverviewCommon @@ -1078,6 +1169,7 @@ export const networkAppPerformanceTabList = [ prop: 'serverAdminArea', queryCycleTotalProp: 'serverCities', dillDownProp: ['server_admin_area'], + queryCondition: ['admin_area = \'$param\' AND side = \'server\''], checked: false, disabled: false, panelId: drillDownPanelTypeMapping.npmOverviewCommon @@ -1086,6 +1178,7 @@ export const networkAppPerformanceTabList = [ prop: 'clientIsp', queryCycleTotalProp: 'clientIsps', dillDownProp: ['client_isp'], + queryCondition: ['isp = \'$param\' AND side = \'client\''], checked: false, disabled: false, panelId: drillDownPanelTypeMapping.npmOverviewCommon @@ -1094,6 +1187,7 @@ export const networkAppPerformanceTabList = [ prop: 'serverIsp', queryCycleTotalProp: 'serverIsps', dillDownProp: ['server_isp'], + queryCondition: ['isp = \'$param\' AND side = \'server\''], checked: false, disabled: false, panelId: drillDownPanelTypeMapping.npmOverviewCommon @@ -1102,6 +1196,7 @@ export const networkAppPerformanceTabList = [ prop: 'clientAsn', queryCycleTotalProp: 'clientAsns', dillDownProp: ['client_asn'], + queryCondition: ['asn = \'$param\' AND side = \'client\''], checked: false, disabled: false, panelId: drillDownPanelTypeMapping.npmOverviewCommon @@ -1110,6 +1205,7 @@ export const networkAppPerformanceTabList = [ prop: 'serverAsn', queryCycleTotalProp: 'serverAsns', dillDownProp: ['server_asn'], + queryCondition: ['asn = \'$param\' AND side = \'server\''], checked: false, disabled: false, panelId: drillDownPanelTypeMapping.npmOverviewCommon @@ -1269,7 +1365,7 @@ export const linkMonitorTabList = [ disabled: false, panelId: drillDownPanelTypeMapping.linkMonitor }, { - label: 'network.clientProvinces', + label: 'network.clientRegions', prop: 'clientSuperAdminArea', queryCycleTotalProp: 'clientProvinces', dillDownProp: ['client_super_admin_area'], @@ -1277,7 +1373,7 @@ export const linkMonitorTabList = [ disabled: false, panelId: drillDownPanelTypeMapping.linkMonitor }, { - label: 'network.serverProvinces', + label: 'network.serverRegions', prop: 'serverSuperAdminArea', queryCycleTotalProp: 'serverProvinces', dillDownProp: ['server_super_admin_area'], diff --git a/src/utils/tools.js b/src/utils/tools.js index fca63979..e3d7e284 100644 --- a/src/utils/tools.js +++ b/src/utils/tools.js @@ -980,6 +980,9 @@ export function combineTabList (tableType, list, commonTabList) { const tabInCode = listInCode ? listInCode.find(item => item.label === tab.label) : {} tab.queryCycleTotalProp = tabInCode ? tabInCode.queryCycleTotalProp : null tab.dillDownProp = tabInCode ? tabInCode.dillDownProp : [] + tab.thirdDimensionQueryCondition = tabInCode ? tabInCode.thirdDimensionQueryCondition : [] + tab.lineQueryCondition = tabInCode ? tabInCode.lineQueryCondition : [] + tab.lineThirdDimensionQueryCondition = tabInCode ? tabInCode.lineThirdDimensionQueryCondition : [] }) } /* diff --git a/src/views/charts2/charts/networkOverview/NetworkOverviewApps.vue b/src/views/charts2/charts/networkOverview/NetworkOverviewApps.vue index 1d7066e0..45063dbd 100644 --- a/src/views/charts2/charts/networkOverview/NetworkOverviewApps.vue +++ b/src/views/charts2/charts/networkOverview/NetworkOverviewApps.vue @@ -339,6 +339,15 @@ export default { }) this.urlChangeParams[this.curTabState.queryCondition] = queryCondition.join(' OR ') + const curTab = tabGroup[0] + if (curTab.lineQueryCondition) { + const lineQueryCondition = [] + curTab.lineQueryCondition.forEach(item => { + lineQueryCondition.push(item.replaceAll('$param', value)) + }) + this.urlChangeParams[this.curTabState.lineQueryCondition] = lineQueryCondition.join(' OR ') + } + this.$store.getters.menuList.forEach(menu => { if (this.$_.isEmpty(menu.children) && menu.route) { if (this.$route.path === menu.route) { diff --git a/src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue b/src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue index 9747f208..8522844f 100644 --- a/src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue +++ b/src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue @@ -89,13 +89,15 @@ export default { const { query } = useRoute() const lineRefer = ref(query.lineRefer || 'Average') const lineTab = ref(query.lineTab || '') - const queryCondition = ref(query.queryCondition || '') + const lineQueryCondition = ref(query.lineQueryCondition || '') + const lineThirdDimensionQueryCondition = ref(query.lineThirdDimensionQueryCondition || '') const tabOperationType = ref(query.tabOperationType) const networkOverviewBeforeTab = ref(query.networkOverviewBeforeTab) return { lineRefer, lineTab, - queryCondition, + lineQueryCondition, + lineThirdDimensionQueryCondition, tabOperationType, networkOverviewBeforeTab, myChart: shallowRef(null) @@ -167,8 +169,13 @@ export default { } let url - if (this.queryCondition) { - params.q = this.queryCondition + if (this.lineQueryCondition) { + params.q = this.lineQueryCondition + const { query } = this.$route + params.type = query.dimensionType + url = api.netWorkOverview.drilldownTrafficAnalysis + } if (this.lineThirdDimensionQueryCondition) { + params.q = this.lineThirdDimensionQueryCondition const { query } = this.$route params.type = query.dimensionType url = api.netWorkOverview.drilldownTrafficAnalysis diff --git a/src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue b/src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue index a47250e4..4324bf3b 100644 --- a/src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue +++ b/src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue @@ -1383,6 +1383,7 @@ export default { } conditions = queryCondition.join(' AND ') this.urlChangeParams[this.curTabState.queryCondition] = conditions + this.urlChangeParams[this.curTabState.lineQueryCondition] = conditions } else { if (tab.queryCondition) { tab.queryCondition.forEach(item => { @@ -1397,6 +1398,13 @@ export default { } conditions = queryCondition.join(' OR ') this.urlChangeParams[this.curTabState.queryCondition] = conditions + if (tab.lineQueryCondition) { + const lineQueryCondition = [] + tab.lineQueryCondition.forEach(item => { + lineQueryCondition.push(item.replaceAll('$param', value)) + }) + this.urlChangeParams[this.curTabState.lineQueryCondition] = lineQueryCondition.join(' OR ') + } } }, getFirstCheckedTab () { @@ -1555,6 +1563,7 @@ export default { queryCondition.push('common_server_port=' + valueGroup[1]) } this.urlChangeParams[this.curTabState.queryCondition] = queryCondition.join(' AND ') + this.urlChangeParams[this.curTabState.lineQueryCondition] = queryCondition.join(' AND ') } else { if (curTab.queryCondition) { curTab.queryCondition.forEach(item => { @@ -1567,9 +1576,15 @@ export default { }) } } - this.urlChangeParams[this.curTabState.queryCondition] = queryCondition.join(' OR ') } + const lineQueryCondition = [] + if (curTab.lineQueryCondition) { + curTab.lineQueryCondition.forEach(item => { + lineQueryCondition.push(item.replaceAll('$param', value)) + }) + this.urlChangeParams[this.curTabState.lineQueryCondition] = lineQueryCondition.join(' OR ') + } }, async metricChange () { // 需要将列设置到当前tab的"hiddenColumns": [],"disabledColumns": [], @@ -1800,7 +1815,6 @@ export default { } }, getQueryCondition () { - const queryCondition = this.getUrlParam('queryCondition') const fourthPanel = this.getUrlParam('fourthPanel', -1, true) const dimensionType = this.getUrlParam('dimensionType', '') const fourthMenu = this.getUrlParam('fourthMenu', '') @@ -1815,8 +1829,15 @@ export default { } } } - - return queryCondition + const queryCondition = this.getUrlParam('queryCondition') + const thirdDimensionQueryCondition = this.getUrlParam('thirdDimensionQueryCondition') + if (queryCondition) { + return queryCondition + } else if (thirdDimensionQueryCondition) { + return thirdDimensionQueryCondition + } else { + return null + } }, getUrlParam (param, defaultValue, isNumber) { if (isNumber) { @@ -1880,6 +1901,9 @@ export default { tab.queryCycleTotalProp = tabInCode ? tabInCode.queryCycleTotalProp : null tab.dillDownProp = tabInCode ? tabInCode.dillDownProp : [] tab.queryCondition = tabInCode ? tabInCode.queryCondition : [] + tab.thirdDimensionQueryCondition = tabInCode ? tabInCode.thirdDimensionQueryCondition : [] + tab.lineQueryCondition = tabInCode ? tabInCode.lineQueryCondition : [] + tab.lineThirdDimensionQueryCondition = tabInCode ? tabInCode.lineThirdDimensionQueryCondition : [] }) // 设置drilldownTabs：未下钻状态设置，已下钻状态无需设置 // let thirdMenu = this.getUrlParam(this.curTabState.thirdMenu, '') @@ -1909,6 +1933,9 @@ export default { drilldownTabWithAllInfo.queryCycleTotalProp = tabInCode ? tabInCode.queryCycleTotalProp : null drilldownTabWithAllInfo.dillDownProp = tabInCode ? tabInCode.dillDownProp : [] drilldownTabWithAllInfo.queryCondition = tabInCode ? tabInCode.queryCondition : [] + drilldownTabWithAllInfo.thirdDimensionQueryCondition = tabInCode ? tabInCode.thirdDimensionQueryCondition : [] + drilldownTabWithAllInfo.lineQueryCondition = tabInCode ? tabInCode.lineQueryCondition : [] + drilldownTabWithAllInfo.lineThirdDimensionQueryCondition = tabInCode ? tabInCode.lineThirdDimensionQueryCondition : [] drilldownTabFull.push(drilldownTabWithAllInfo) } }