gfwleak/cyber-narrator-cn-ui
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CN-710 下钻table配置化

Browse Source
This commit is contained in:
hyx
2022-10-02 16:21:39 +08:00
parent 2e96db67d5
commit 9e52841c55
4 changed files with 219 additions and 263 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
src/views/charts2/charts/networkOverview/NetworkOverviewApps.vue
View File

@@ -187,7 +187,8 @@ export default {
flag: false,
timerSearch: null,
loadingBody: false,
curTabState: curTabState
curTabState: curTabState,
urlChangeParams: {}
}
},
setup () {
@@ -326,7 +327,7 @@ export default {
return this.$route.query[param] ? this.$route.query[param] : defaultValue
}
},
drillDownData (type, value) {
async drillDownData (type, value) {
let tabType = ''
if (type === 'provider') {
tabType = 'network.providers'
@@ -334,58 +335,47 @@ export default {
tabType = 'network.applications'
}
if (tabType) {
// const oldCurTab = this.$store.getters.getNetworkOverviewBeforeTab
const oldCurTab = this.getUrlParam(this.curTabState.networkOverviewBeforeTab, '')
const curTable = networkTable.networkOverview
// const list = this.$store.getters.getNetworkOverviewTabList
const tableType = this.$route.params ? this.$route.params.typeName : 'networkOverview'
const metric = this.getUrlParam(this.curTabState.tableMetric, 'Bits/s')
const list = getUserDrilldownTableConfig(tableType, metric)
const list = await getUserDrilldownTableConfig(tableType, metric)
const tabGroup = list.filter(item => item.label === tabType)
if (tabGroup && tabGroup.length > 0) {
// this.$store.commit('setNetworkOverviewBeforeTab', tabGroup[0])
this.changeUrlTabState(this.curTabState.networkOverviewBeforeTab, tabGroup[0].prop)
this.urlChangeParams[this.curTabState.networkOverviewBeforeTab] = tabGroup[0].prop
}
// this.$store.commit('setTabOperationBeforeType', this.$store.getters.getTabOperationType)
// this.$store.commit('setTabOperationType', operationType.fourthMenu)
this.changeUrlTabState(this.curTabState.tabOperationBeforeType, this.getUrlParam(this.curTabState.tabOperationType, '', true))
this.changeUrlTabState(this.curTabState.tabOperationType, operationType.fourthMenu)
this.urlChangeParams[this.curTabState.tabOperationBeforeType] = this.getUrlParam(this.curTabState.tabOperationType, '', true)
this.urlChangeParams[this.curTabState.tabOperationType] = operationType.fourthMenu
const queryCondition = []
const searchProps = tabGroup[0].dillDownProp
searchProps.forEach(item => {
queryCondition.push(item + "='" + value + "'")
})
// this.$store.commit('setQueryCondition', queryCondition.join(' OR '))
this.changeUrlTabState(this.curTabState.queryCondition, queryCondition.join(' OR '))
this.urlChangeParams[this.curTabState.queryCondition] = queryCondition.join(' OR ')
this.$store.getters.menuList.forEach(menu => {
if (this.$_.isEmpty(menu.children) && menu.route) {
if (this.$route.path === menu.route) {
menu.columnName = tabType
menu.columnValue = value
// this.$store.commit('setPanelName', value)
this.changeUrlTabState(this.curTabState.panelName, value)
// this.$store.commit('setBreadcrumbColumnName', tabType)
this.changeUrlTabState(this.curTabState.thirdMenu, tabType)
// this.$store.commit('setDimensionType', tabGroup[0] ? tabGroup[0].prop : '')
this.changeUrlTabState(this.curTabState.dimensionType, tabGroup[0] ? tabGroup[0].prop : '')
// this.$store.commit('setBreadcrumbColumnValue', value)
this.changeUrlTabState(this.curTabState.fourthMenu, value)
this.urlChangeParams[this.curTabState.panelName] = value
this.urlChangeParams[this.curTabState.thirdMenu] = tabType
this.urlChangeParams[this.curTabState.dimensionType] = tabGroup[0] ? tabGroup[0].prop : ''
this.urlChangeParams[this.curTabState.fourthMenu] = value
}
} else if (!this.$_.isEmpty(menu.children)) {
menu.children.forEach(child => {
if (this.$route.path === child.route) {
child.columnName = tabType
child.columnValue = value
// this.$store.commit('setPanelName', value)
this.changeUrlTabState(this.curTabState.panelName, value)
// this.$store.commit('setBreadcrumbColumnName', tabType)
this.changeUrlTabState(this.curTabState.thirdMenu, tabType)
// this.$store.commit('setDimensionType', tabGroup[0] ? tabGroup[0].prop : '')
this.changeUrlTabState(this.curTabState.dimensionType, tabGroup[0] ? tabGroup[0].prop : '')
// this.$store.commit('setBreadcrumbColumnValue', value)
this.changeUrlTabState(this.curTabState.fourthMenu, value)
this.urlChangeParams[this.curTabState.panelName] = value
this.urlChangeParams[this.curTabState.thirdMenu] = tabType
this.urlChangeParams[this.curTabState.dimensionType] = tabGroup[0] ? tabGroup[0].prop : ''
this.urlChangeParams[this.curTabState.fourthMenu] = value
}
})
}
@@ -404,8 +394,9 @@ export default {
const tabObjGroup = list.filter(item => item.checked)
if (tabObjGroup && tabObjGroup.length > 0) {
const curTab = tabObjGroup[0]
this.changeUrlTabState(this.curTabState.curTab, curTab)
this.urlChangeParams[this.curTabState.curTab] = curTab
}
this.changeUrlTabState()
this.$router.push({
query: {
...this.$route.query,
@@ -415,13 +406,13 @@ export default {
})
}
},
// tab改变
changeUrlTabState (param, value) {
const { query } = this.$route
const newQuery = {}
newQuery[param] = value
const newUrl = urlParamsHandler(window.location.href, query, newQuery)
overwriteUrl(newUrl)
changeUrlTabState () {
if (this.urlChangeParams && JSON.stringify(this.urlChangeParams) !== '{}') {
const { query } = this.$route
const newUrl = urlParamsHandler(window.location.href, query, this.urlChangeParams)
overwriteUrl(newUrl)
}
this.urlChangeParams = {}
},
initChart (obj) {
let chart = this.myChart.find(m => m.name === obj.name && m.type === obj.type)