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

CN-700 界面刷新保持状态-下钻table等：queryCondition,type,panelName,thirdMenu,fourthMenu

Browse Source
This commit is contained in:
hanyuxia
2022-09-20 11:44:39 +08:00
parent 250b3d21aa
commit 2510299540
7 changed files with 108 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/layout/Header.vue
View File

@@ -390,8 +390,12 @@ export default {
hideBreadcrumbPopover () {
this.showBackground = false
},
getUrlParam (param, defaultValue) {
return this.$route.query[param] ? this.$route.query[param] : defaultValue
getUrlParam (param, defaultValue,isNumber) {
if(isNumber){
return this.$route.query[param] ? Number(this.$route.query[param]) : defaultValue
}else {
return this.$route.query[param] ? this.$route.query[param] : defaultValue
}
},
changeValue (value) {
// 设置面包屑显示的内容及hover时的title
@@ -457,10 +461,13 @@ export default {
jump (route, columnName, columnValue, opeType) {
this.showMenu = false
if (opeType) {
this.$store.commit('setTabOperationBeforeType', this.$store.getters.getTabOperationType)
this.$store.commit('setTabOperationType', opeType)
//this.$store.commit('setTabOperationBeforeType', this.$store.getters.getTabOperationType)
//this.$store.commit('setTabOperationType', opeType)
this.changeUrlTabState(this.curTabState.tabOperationBeforeType, this.getUrlParam(this.curTabState.tabOperationType, '',true))
this.changeUrlTabState(this.curTabState.tabOperationType, opeType)
} else {
this.$store.commit('setTabOperationType', operationType.mainMenu)
//this.$store.commit('setTabOperationType', operationType.mainMenu)
this.changeUrlTabState(this.curTabState.tabOperationType, operationType.mainMenu)
}
if (!columnName) { // 点击第二级菜单
this.$store.commit('setNetworkOverviewTabList', [])

28
src/store/modules/panel.js
View File

@@ -45,8 +45,8 @@ const panel = {
//networkOverviewBeforeTab: null, // 点击表格的值时使用，记录点击当前tab表格的值之前点击的表格值所属的tab
// queryCondition: '', // 数据查询的条件
networkOverviewTabList: [], // 存储tab列表的一些状态：如是否选中
tabOperationType: 0, // 操作类型:2-二级菜单；3-三级菜单；4-四级菜单；5-切换tab；6-切换metric；7-操作Customize
tabOperationBeforeType: 0, // 记录上次的操作类型
//tabOperationType: 0, // 操作类型:2-二级菜单；3-三级菜单；4-四级菜单；5-切换tab；6-切换metric；7-操作Customize
//tabOperationBeforeType: 0, // 记录上次的操作类型
npmThirdLevelMenuScore: null, // npm overview 第三级菜单的panel分数
npmLocationCountry: '', // npm location的查询条件--国家
npmLocationSide: 'server' // npm location的查询条件--方向
@@ -121,15 +121,15 @@ const panel = {
setNetworkOverviewTabList (state, networkOverviewTabList) {
state.networkOverviewTabList = networkOverviewTabList
},
setTabOperationType (state, tabOperationType) {
state.tabOperationType = tabOperationType
},
//setTabOperationType (state, tabOperationType) {
//state.tabOperationType = tabOperationType
//},
//setNetworkOverviewBeforeTab (state, networkOverviewBeforeTab) {
//state.networkOverviewBeforeTab = networkOverviewBeforeTab
//},
setTabOperationBeforeType (state, tabOperationBeforeType) {
state.tabOperationBeforeType = tabOperationBeforeType
},
//setTabOperationBeforeType (state, tabOperationBeforeType) {
//state.tabOperationBeforeType = tabOperationBeforeType
//},
setNpmLocationCountry (state, country) {
state.npmLocationCountry = country
},
@@ -204,15 +204,15 @@ const panel = {
getNetworkOverviewTabList (state) {
return state.networkOverviewTabList
},
getTabOperationType (state) {
return state.tabOperationType
},
//getTabOperationType (state) {
//return state.tabOperationType
//},
//getNetworkOverviewBeforeTab (state) {
//return state.networkOverviewBeforeTab
//},
getTabOperationBeforeType (state) {
return state.tabOperationBeforeType
},
//getTabOperationBeforeType (state) {
//return state.tabOperationBeforeType
//},
getNpmLocationCountry (state) {
return state.npmLocationCountry
},

4
src/utils/constants.js
View File

@@ -250,7 +250,9 @@ export const curTabState = {
panelName: 'panelName',
thirdMenu: 'thirdMenu',
fourthMenu: 'fourthMenu',
networkOverviewBeforeTab: 'networkOverviewBeforeTab'
networkOverviewBeforeTab: 'networkOverviewBeforeTab',
tabOperationType:'tabOperationType',
tabOperationBeforeType:'tabOperationBeforeType'
}
export const scoreUrl = [

16
src/views/charts2/Panel.vue
View File

@@ -76,7 +76,8 @@ export default {
npmThirdLevelMenuScore: {
deep: true,
handler (n) {
const curOperationType = this.$store.getters.getTabOperationType
//const curOperationType = this.$store.getters.getTabOperationType
const curOperationType = this.getUrlParam(this.curTabState.tabOperationType, '',true)
if (curOperationType === operationType.thirdMenu) { // 点击的为第三级菜单
this.score = n
}
@@ -86,7 +87,8 @@ export default {
async mounted () {
// this.panelName = this.$store.getters.getPanelName
this.panelName = this.$route.query.panelName ? this.$t(this.$route.query.panelName) : ''
const curOperationType = this.$store.getters.getTabOperationType
//const curOperationType = this.$store.getters.getTabOperationType
const curOperationType = this.getUrlParam(this.curTabState.tabOperationType, '',true)
if (this.panelName && this.$route.path === '/panel/networkAppPerformance' && curOperationType !== operationType.thirdMenu) {
// const columnValue = this.$store.getters.getBreadcrumbColumnValue
const columnValue = this.getUrlParam(this.curTabState.fourthMenu, '')
@@ -238,9 +240,13 @@ export default {
this.timeFilter = JSON.parse(JSON.stringify(this.timeFilter))
}
},
getUrlParam (param, defaultValue) {
return this.$route.query[param] ? this.$route.query[param] : defaultValue
}
getUrlParam (param, defaultValue,isNumber) {
if(isNumber){
return this.$route.query[param] ? Number(this.$route.query[param]) : defaultValue
}else {
return this.$route.query[param] ? this.$route.query[param] : defaultValue
}
},
}
}
</script>

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

@@ -315,8 +315,12 @@ export default {
}
this.init()
},
getUrlParam (param, defaultValue) {
return this.$route.query[param] ? this.$route.query[param] : defaultValue
getUrlParam (param, defaultValue,isNumber) {
if(isNumber){
return this.$route.query[param] ? Number(this.$route.query[param]) : defaultValue
}else {
return this.$route.query[param] ? this.$route.query[param] : defaultValue
}
},
drillDownData (type, value) {
let tabType = ''
@@ -335,8 +339,10 @@ export default {
//this.$store.commit('setNetworkOverviewBeforeTab', tabGroup[0])
this.changeUrlTabState(this.curTabState.networkOverviewBeforeTab, tabGroup[0].prop)
}
this.$store.commit('setTabOperationBeforeType', this.$store.getters.getTabOperationType)
this.$store.commit('setTabOperationType', operationType.fourthMenu)
//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)
const queryCondition = []
const searchProps = tabGroup[0].dillDownProp

75
src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue
View File

@@ -328,6 +328,7 @@ export default {
}
},
initState () {
let curTab = this.getCurTab()
// 没有选中任何tab时，默认选中第一个
const tabList = this.list.filter(item => item.checked === true)
if (tabList.length === 0) {
@@ -335,6 +336,13 @@ export default {
this.showTab(this.list[0])
} else {
//this.showTab(tabList[0])
if (curTab) { // 显示当前tab
let realTab = this.list.find(item => item.label===curTab.label)
if(realTab){
realTab.checked = true
}
this.showTab(curTab)
}
}
this.isNoData = false
this.tableData = []
@@ -392,7 +400,6 @@ export default {
}
})
let curTab = this.getCurTab()
if (this.metric === 'Sessions/s') {
this.columnNameGroup = this.curTable.sessionsColumnNameGroup
this.cycleColumnNameGroup = this.curTable.sessionsCycleColumnNameGroup
@@ -411,8 +418,10 @@ export default {
]
}
const curOperationType = this.$store.getters.getTabOperationType
const beforeOperationType = this.$store.getters.getTabOperationBeforeType
//const curOperationType = this.$store.getters.getTabOperationType
//const beforeOperationType = this.$store.getters.getTabOperationBeforeType
const curOperationType = this.getUrlParam(this.curTabState.tabOperationType, '',true)
const beforeOperationType = this.getUrlParam(this.curTabState.tabOperationBeforeType, '',true)
if (curOperationType === operationType.changeTab) { // 切换tab
if (curTab) { // tab切换
this.showTab(curTab)
@@ -838,11 +847,14 @@ export default {
this.tableDataBackup = []
// this.showRecordNum = 10
this.setShowNum(10)
const beforeType = this.$store.getters.getTabOperationBeforeType
//const beforeType = this.$store.getters.getTabOperationBeforeType
const beforeType = this.getUrlParam(this.curTabState.tabOperationBeforeType, '',true)
if (beforeType != operationType.thirdMenu) {
this.$store.commit('setTabOperationBeforeType', this.$store.getters.getTabOperationType)
//this.$store.commit('setTabOperationBeforeType', this.$store.getters.getTabOperationType)
this.changeUrlTabState(this.curTabState.tabOperationBeforeType, this.getUrlParam(this.curTabState.tabOperationType, '',true))
}
this.$store.commit('setTabOperationType', operationType.changeMetric)
//this.$store.commit('setTabOperationType', operationType.changeMetric)
this.changeUrlTabState(this.curTabState.tabOperationType, operationType.changeMetric)
const curTab = this.getCurTab()
const label = curTab.label
this.changeUrlTabState(this.curTabState.tableMetric, this.metric)
@@ -956,11 +968,16 @@ export default {
}
},
getDefaultTab () {
let tabObjGroup = this.list.filter(item => item.checked)
if (tabObjGroup && tabObjGroup.length > 0) {
return tabObjGroup[0]
let curTab = this.getCurTab()
if(curTab){
return curTab
} else {
return tabObjGroup = this.networkTabList.filter(item => item.checked)[0]
let tabObjGroup = this.list.filter(item => item.checked)
if (tabObjGroup && tabObjGroup.length > 0) {
return tabObjGroup[0]
} else {
return tabObjGroup = this.networkTabList.filter(item => item.checked)[0]
}
}
},
// 隐藏tabs的标题
@@ -999,9 +1016,11 @@ export default {
// 操作类型设置
const beforeType = this.$store.getters.getTabOperationBeforeType
if (beforeType != operationType.thirdMenu) {
this.$store.commit('setTabOperationBeforeType', this.$store.getters.getTabOperationType)
//this.$store.commit('setTabOperationBeforeType', this.$store.getters.getTabOperationType)
this.changeUrlTabState(this.curTabState.tabOperationBeforeType, this.getUrlParam(this.curTabState.tabOperationType, '',true))
}
this.$store.commit('setTabOperationType', operationType.customize)
//this.$store.commit('setTabOperationType', operationType.customize)
this.changeUrlTabState(this.curTabState.tabOperationType, operationType.customize)
// 获得操作tab和当前选中的所有tab
const handleTab = this.list[index]
const tabList = this.list.filter(item => item.checked === true)
@@ -1050,8 +1069,10 @@ export default {
}
},
setOperationType (operationType) {
this.$store.commit('setTabOperationBeforeType', this.$store.getters.getTabOperationType)
this.$store.commit('setTabOperationType', operationType)
//this.$store.commit('setTabOperationBeforeType', this.$store.getters.getTabOperationType)
//this.$store.commit('setTabOperationType', operationType)
this.changeUrlTabState(this.curTabState.tabOperationBeforeType, this.getUrlParam(this.curTabState.tabOperationType, '',true))
this.changeUrlTabState(this.curTabState.tabOperationType, operationType)
},
getTabByLabel (label) {
let tab = null
@@ -1245,8 +1266,10 @@ export default {
this.tableDataBackup = []
this.setShowNum(10)
this.clearSort()
this.$store.commit('setTabOperationBeforeType', this.$store.getters.getTabOperationType)
this.$store.commit('setTabOperationType', operationType.changeTab)
//this.$store.commit('setTabOperationBeforeType', this.$store.getters.getTabOperationType)
//this.$store.commit('setTabOperationType', operationType.changeTab)
this.changeUrlTabState(this.curTabState.tabOperationBeforeType, this.getUrlParam(this.curTabState.tabOperationType, '',true))
this.changeUrlTabState(this.curTabState.tabOperationType, operationType.changeTab)
this.customTableTitles[0].label = tab.paneName
const tabObjGroup = this.list.filter(item => item.label == tab.paneName)
@@ -1315,10 +1338,16 @@ export default {
let queryType = ''
// const name = this.$store.getters.getBreadcrumbColumnName
const name = this.getUrlParam(this.curTabState.thirdMenu, '')
const curOperationType = this.$store.getters.getTabOperationType
//const curOperationType = this.$store.getters.getTabOperationType
const curOperationType = this.getUrlParam(this.curTabState.tabOperationType, '',true)
if (curOperationType === operationType.fourthMenu) { // 点击的为第四级菜单
const checkedTab = this.list.find(item => item.checked)
queryType = checkedTab ? checkedTab.prop : ''
const curTab = this.getCurTab()
if(curTab){
queryType = curTab.prop
} else {
const checkedTab = this.list.find(item => item.checked)
queryType = checkedTab ? checkedTab.prop : ''
}
} else if (curOperationType === operationType.thirdMenu) { // 点击的为第三级菜单
const breadcrumbTab = this.list.find(item => item.label === name)
queryType = breadcrumbTab ? breadcrumbTab.prop : ''
@@ -1377,8 +1406,12 @@ export default {
getQueryCondition () {
return this.$route.query.queryCondition ? this.$route.query.queryCondition : ''
},
getUrlParam (param, defaultValue) {
return this.$route.query[param] ? this.$route.query[param] : defaultValue
getUrlParam (param, defaultValue,isNumber) {
if(isNumber){
return this.$route.query[param] ? Number(this.$route.query[param]) : defaultValue
}else {
return this.$route.query[param] ? this.$route.query[param] : defaultValue
}
},
// 获取当前tab
getCurTab () {

6
src/views/charts2/charts/npm/NpmAppCategoryScore.vue
View File

@@ -267,8 +267,10 @@ export default {
//this.$store.commit('setNetworkOverviewBeforeTab', tabGroup[0])
this.changeUrlTabState(this.curTabState.networkOverviewBeforeTab, tabGroup[0].prop)
}
this.$store.commit('setTabOperationBeforeType', this.$store.getters.getTabOperationType)
this.$store.commit('setTabOperationType', operationType.fourthMenu)
//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)
const queryCondition = []
const searchProps = tabGroup[0].dillDownProp