diff --git a/src/components/layout/Header.vue b/src/components/layout/Header.vue
index 91cc5b01..ba99dbac 100644
--- a/src/components/layout/Header.vue
+++ b/src/components/layout/Header.vue
@@ -73,7 +73,7 @@
-
+
@@ -266,10 +266,16 @@ export default {
}
})
const breadcrumb = breadcrumbMap.find(b => this.path === b.path)
+ const thirdMenu = this.getUrlParam(this.curTabState.thirdMenu, '')
+ const fourthMenu = this.getUrlParam(this.curTabState.fourthMenu, '')
if (breadcrumb.columnValue) {
- return breadcrumb ? [breadcrumb.parentName, breadcrumb.name, this.$t(breadcrumb.columnName), breadcrumb.columnValue] : []
+ return breadcrumb ? [breadcrumb.parentName, breadcrumb.name, breadcrumb.columnName, breadcrumb.columnValue] : []
} else if (breadcrumb.columnName) {
- return breadcrumb ? [breadcrumb.parentName, breadcrumb.name, this.$t(breadcrumb.columnName)] : []
+ return breadcrumb ? [breadcrumb.parentName, breadcrumb.name, breadcrumb.columnName] : []
+ } else if (fourthMenu) {
+ return breadcrumb ? [breadcrumb.parentName, breadcrumb.name, thirdMenu, fourthMenu] : []
+ } else if (thirdMenu) {
+ return breadcrumb ? [breadcrumb.parentName, breadcrumb.name, thirdMenu] : []
} else {
return breadcrumb ? [breadcrumb.parentName, breadcrumb.name] : []
}
@@ -338,7 +344,8 @@ export default {
},
initDropdownList () {
const currentValue = document.getElementById('breadcrumbValue') ? document.getElementById('breadcrumbValue').innerText : ''
- const columnName = this.$store.getters.getBreadcrumbColumnName
+ // const columnName = this.$store.getters.getBreadcrumbColumnName
+ const columnName = this.getUrlParam(this.curTabState.thirdMenu, '')
let type = 'ip'
const tabObjGroup = networkOverviewTabList.filter(item => item.label == columnName)
if (tabObjGroup && tabObjGroup.length > 0) {
@@ -383,13 +390,17 @@ export default {
hideBreadcrumbPopover () {
this.showBackground = false
},
+ getUrlParam (param, defaultValue) {
+ return this.$route.query[param] ? this.$route.query[param] : defaultValue
+ },
changeValue (value) {
// 设置面包屑显示的内容及hover时的title
document.getElementById('breadcrumbValue').innerText = value
document.getElementById('breadcrumbButton').setAttribute('title', value)
document.getElementById(this.valueMenuId).setAttribute('title', value)
document.getElementById('breadcrumbButton').click()
- const columnName = this.$store.getters.getBreadcrumbColumnName
+ // const columnName = this.$store.getters.getBreadcrumbColumnName
+ const columnName = this.getUrlParam(this.curTabState.thirdMenu, '')
const tabObjGroup = networkOverviewTabList.filter(item => item.label == columnName)
if (tabObjGroup && tabObjGroup.length > 0) {
const curTab = tabObjGroup[0]
@@ -403,12 +414,14 @@ export default {
queryCondition.push('common_server_port=' + valueGroup[1])
}
console.log(queryCondition.join(' AND '))
- this.$store.commit('setQueryCondition', queryCondition.join(' AND '))
+ // this.$store.commit('setQueryCondition', queryCondition.join(' AND '))
+ this.changeUrlTabState(this.curTabState.queryCondition, queryCondition.join(' AND '))
} else {
searchProps.forEach(item => {
queryCondition.push(item + "='" + value + "'")
})
- this.$store.commit('setQueryCondition', queryCondition.join(' OR '))
+ // this.$store.commit('setQueryCondition', queryCondition.join(' OR '))
+ this.changeUrlTabState(this.curTabState.queryCondition, queryCondition.join(' OR '))
}
}
}
@@ -434,7 +447,7 @@ export default {
}
})
},
- changeTabState (param, value) {
+ changeUrlTabState (param, value) {
const { query } = this.$route
const newQuery = {}
newQuery[param] = value
@@ -460,34 +473,48 @@ export default {
if (columnValue) { // 点击的为值
child.columnValue = columnValue
child.columnName = columnName
- this.$store.commit('setBreadcrumbColumnValue', columnValue)
- this.$store.commit('setBreadcrumbColumnName', columnName)
+ // this.$store.commit('setBreadcrumbColumnValue', columnValue)
+ // this.$store.commit('setBreadcrumbColumnName', columnName)
+ this.changeUrlTabState(this.curTabState.thirdMenu, columnName)
+ this.changeUrlTabState(this.curTabState.fourthMenu, columnValue)
const tabObjGroup = networkOverviewTabList.filter(item => item.label == columnName)
const type = tabObjGroup && tabObjGroup[0] ? tabObjGroup[0].prop : ''
- this.$store.commit('setDimensionType', type)
- this.$store.commit('setPanelName', columnValue)
+ // this.$store.commit('setDimensionType', type)
+ this.changeUrlTabState(this.curTabState.dimensionType, type)
+ // this.$store.commit('setPanelName', columnValue)
+ this.changeUrlTabState(this.curTabState.panelName, columnValue)
} else if (columnName) { // 点击的为列名
child.columnValue = ''
child.columnName = columnName
- this.$store.commit('setBreadcrumbColumnValue', '')
- this.$store.commit('setBreadcrumbColumnName', columnName)
- this.$store.commit('setPanelName', columnName)
+ // this.$store.commit('setBreadcrumbColumnValue', '')
+ // this.$store.commit('setBreadcrumbColumnName', columnName)
+ this.changeUrlTabState(this.curTabState.thirdMenu, columnName)
+ this.changeUrlTabState(this.curTabState.fourthMenu, '')
+ // this.$store.commit('setPanelName', columnName)
+ this.changeUrlTabState(this.curTabState.panelName, columnName)
const tabList = this.$store.getters.getNetworkOverviewTabList
- const curTab = tabList.filter(item => this.$t(item.label) === columnName)[0]
- this.changeTabState(this.curTabState.curTab, curTab)
- this.$store.commit('setDimensionType', curTab ? curTab.prop : '')
- this.$store.commit('setQueryCondition', '')
+ const curTab = tabList.filter(item => item.label === columnName)[0]
+ this.changeUrlTabState(this.curTabState.curTab, curTab)
+ // this.$store.commit('setDimensionType', curTab ? curTab.prop : '')
+ this.changeUrlTabState(this.curTabState.dimensionType, curTab ? curTab.prop : '')
+ // this.$store.commit('setQueryCondition', '')
+ this.changeUrlTabState(this.curTabState.queryCondition, '')
this.$store.commit('setNetworkOverviewBeforeTab', null)
} else {
child.columnName = ''
child.columnValue = ''
- this.$store.commit('setBreadcrumbColumnValue', '')
- this.$store.commit('setBreadcrumbColumnName', '')
- this.$store.commit('setDimensionType', '')
- this.$store.commit('setPanelName', '')
+ // this.$store.commit('setBreadcrumbColumnValue', '')
+ // this.$store.commit('setBreadcrumbColumnName', '')
+ this.changeUrlTabState(this.curTabState.thirdMenu, '')
+ this.changeUrlTabState(this.curTabState.fourthMenu, '')
+ // this.$store.commit('setDimensionType', '')
+ this.changeUrlTabState(this.curTabState.dimensionType, '')
+ // this.$store.commit('setPanelName', '')
+ this.changeUrlTabState(this.curTabState.panelName, '')
// this.$store.commit('setBreadcrumbColumnValueList', [])
- this.changeTabState(this.curTabState.curTab, null)
- this.$store.commit('setQueryCondition', '')
+ this.changeUrlTabState(this.curTabState.curTab, null)
+ // this.$store.commit('setQueryCondition', '')
+ this.changeUrlTabState(this.curTabState.queryCondition, '')
this.$store.commit('setNetworkOverviewBeforeTab', null)
}
}
diff --git a/src/store/modules/panel.js b/src/store/modules/panel.js
index 41f31a07..107cbc3b 100644
--- a/src/store/modules/panel.js
+++ b/src/store/modules/panel.js
@@ -37,13 +37,13 @@ const panel = {
breadcrumbColumnValue、
queryCondition
*/
- panelName: '', // 网络概况的Panel的名称
- breadcrumbColumnName: '', // 点击tab里的value,都会修改此值,为面包屑的菜单
- dimensionType: '', // 维度
- breadcrumbColumnValue: '', // 点击tab里的value,都会修改此值,为面包屑的菜单
+ // panelName: '', // 网络概况的Panel的名称
+ // breadcrumbColumnName: '', // 点击tab里的value,都会修改此值,为面包屑的菜单
+ // dimensionType: '', // 维度
+ // breadcrumbColumnValue: '', // 点击tab里的value,都会修改此值,为面包屑的菜单
// networkOverviewCurrentTab: null, // 只代表选中的tab,有时会与面包屑中显示的值不同
networkOverviewBeforeTab: null, // 点击表格的值时使用,记录点击当前tab表格的值之前点击的表格值所属的tab
- queryCondition: '', // 数据查询的条件
+ // queryCondition: '', // 数据查询的条件
networkOverviewTabList: [], // 存储tab列表的一些状态:如是否选中
tabOperationType: 0, // 操作类型:2-二级菜单;3-三级菜单;4-四级菜单;5-切换tab;6-切换metric;7-操作Customize
tabOperationBeforeType: 0, // 记录上次的操作类型
@@ -100,24 +100,24 @@ const panel = {
setCurrentMap (state, currentMap) {
state.currentMap = currentMap
},
- setPanelName (state, panelName) {
- state.panelName = panelName
- },
- setBreadcrumbColumnName (state, breadcrumbColumnName) {
- state.breadcrumbColumnName = breadcrumbColumnName
- },
- setDimensionType (state, dimensionType) {
- state.dimensionType = dimensionType
- },
- setBreadcrumbColumnValue (state, breadcrumbColumnValue) {
- state.breadcrumbColumnValue = breadcrumbColumnValue
- },
+ // setPanelName (state, panelName) {
+ // state.panelName = panelName
+ // },
+ // setBreadcrumbColumnName (state, breadcrumbColumnName) {
+ // state.breadcrumbColumnName = breadcrumbColumnName
+ // },
+ // setDimensionType (state, dimensionType) {
+ // state.dimensionType = dimensionType
+ // },
+ // setBreadcrumbColumnValue (state, breadcrumbColumnValue) {
+ // state.breadcrumbColumnValue = breadcrumbColumnValue
+ // },
// setNetworkOverviewCurrentTab (state, networkOverviewCurrentTab) {
// state.networkOverviewCurrentTab = networkOverviewCurrentTab
// },
- setQueryCondition (state, queryCondition) {
- state.queryCondition = queryCondition
- },
+ // setQueryCondition (state, queryCondition) {
+ // state.queryCondition = queryCondition
+ // },
setNetworkOverviewTabList (state, networkOverviewTabList) {
state.networkOverviewTabList = networkOverviewTabList
},
@@ -183,24 +183,24 @@ const panel = {
getCurrentMap (state) {
return state.currentMap
},
- getPanelName (state) {
- return state.panelName
- },
- getBreadcrumbColumnName (state) {
- return state.breadcrumbColumnName
- },
- getDimensionType (state) {
- return state.dimensionType
- },
- getBreadcrumbColumnValue (state) {
- return state.breadcrumbColumnValue
- },
+ // getPanelName (state) {
+ // return state.panelName
+ // },
+ // getBreadcrumbColumnName (state) {
+ // return state.breadcrumbColumnName
+ // },
+ // getDimensionType (state) {
+ // return state.dimensionType
+ // },
+ // getBreadcrumbColumnValue (state) {
+ // return state.breadcrumbColumnValue
+ // },
// getNetworkOverviewCurrentTab (state) {
// return state.networkOverviewCurrentTab
// },
- getQueryCondition (state) {
- return state.queryCondition
- },
+ // getQueryCondition (state) {
+ // return state.queryCondition
+ // },
getNetworkOverviewTabList (state) {
return state.networkOverviewTabList
},
diff --git a/src/utils/constants.js b/src/utils/constants.js
index cb00fa03..b73d0f44 100644
--- a/src/utils/constants.js
+++ b/src/utils/constants.js
@@ -244,7 +244,13 @@ export const curTabState = {
tableShowMore: 'tableShowMore',
tableSortColumn: 'tableSortColumn',
tableSortType: 'tableSortType',
- tableSortTab: 'tableSortTab'
+ tableSortTab: 'tableSortTab',
+ queryCondition: 'queryCondition',
+ dimensionType: 'dimensionType', // 纬度
+ panelName: 'panelName',
+ thirdMenu: 'thirdMenu',
+ fourthMenu: 'fourthMenu',
+ networkOverviewBeforeTab: 'networkOverviewBeforeTab'
}
export const scoreUrl = [
diff --git a/src/views/charts2/Panel.vue b/src/views/charts2/Panel.vue
index c7140014..179ca237 100644
--- a/src/views/charts2/Panel.vue
+++ b/src/views/charts2/Panel.vue
@@ -40,7 +40,7 @@