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

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

@@ -232,7 +232,8 @@ export default {
} }
], ],
curPageNum: 1, curPageNum: 1,
curTabState: curTabState curTabState: curTabState,
urlChangeParams: {}
} }
}, },
computed: { computed: {
@@ -419,18 +420,16 @@ export default {
queryCondition.push('common_server_port=' + valueGroup[1]) queryCondition.push('common_server_port=' + valueGroup[1])
} }
console.log(queryCondition.join(' AND ')) console.log(queryCondition.join(' AND '))
// this.$store.commit('setQueryCondition', queryCondition.join(' AND ')) this.urlChangeParams[this.curTabState.queryCondition] = queryCondition.join(' AND ')
this.changeUrlTabState(this.curTabState.queryCondition, queryCondition.join(' AND '))
} else { } else {
searchProps.forEach(item => { searchProps.forEach(item => {
queryCondition.push(item + "='" + value + "'") queryCondition.push(item + "='" + value + "'")
}) })
// this.$store.commit('setQueryCondition', queryCondition.join(' OR ')) this.urlChangeParams[this.curTabState.queryCondition] = queryCondition.join(' OR ')
this.changeUrlTabState(this.curTabState.queryCondition, queryCondition.join(' OR '))
} }
} }
} }
this.changeUrlTabState()
this.jump(this.path, columnName, value, operationType.fourthMenu) this.jump(this.path, columnName, value, operationType.fourthMenu)
}, },
shrink () { shrink () {
@@ -452,12 +451,13 @@ export default {
} }
}) })
}, },
changeUrlTabState (param, value) { changeUrlTabState () {
const { query } = this.$route if (this.urlChangeParams && JSON.stringify(this.urlChangeParams) !== '{}') {
const newQuery = {} const { query } = this.$route
newQuery[param] = value const newUrl = urlParamsHandler(window.location.href, query, this.urlChangeParams)
const newUrl = urlParamsHandler(window.location.href, query, newQuery) overwriteUrl(newUrl)
overwriteUrl(newUrl) }
this.urlChangeParams = {}
}, },
async handleCurDrilldownTableConfig (thirdMenu, fourthMenu) { async handleCurDrilldownTableConfig (thirdMenu, fourthMenu) {
console.log('handleCurDrilldownTableConfig--------------') console.log('handleCurDrilldownTableConfig--------------')
@@ -504,14 +504,14 @@ export default {
console.log('当前测试。。。。。。。。。。。') console.log('当前测试。。。。。。。。。。。')
console.log(this.$_.cloneDeep(drillDownTableConfigs)) console.log(this.$_.cloneDeep(drillDownTableConfigs))
}, },
async jump (route, columnName, columnValue, opeType) { jump (route, columnName, columnValue, opeType) {
this.showMenu = false this.showMenu = false
const menus = this.breadcrumb const menus = this.breadcrumb
if (opeType) { if (opeType) {
this.changeUrlTabState(this.curTabState.tabOperationBeforeType, this.getUrlParam(this.curTabState.tabOperationType, '', true)) this.urlChangeParams[this.curTabState.tabOperationBeforeType] = this.getUrlParam(this.curTabState.tabOperationType, '', true)
this.changeUrlTabState(this.curTabState.tabOperationType, opeType) this.urlChangeParams[this.curTabState.tabOperationType] = opeType
} else { } else {
this.changeUrlTabState(this.curTabState.tabOperationType, operationType.mainMenu) this.urlChangeParams[this.curTabState.tabOperationType] = operationType.mainMenu
} }
if (!columnName) { // 点击第二级菜单 if (!columnName) { // 点击第二级菜单
this.$store.commit('setNetworkOverviewTabList', []) this.$store.commit('setNetworkOverviewTabList', [])
@@ -525,68 +525,39 @@ export default {
if (columnValue) { // 点击的为值 if (columnValue) { // 点击的为值
child.columnValue = columnValue child.columnValue = columnValue
child.columnName = columnName child.columnName = columnName
// this.$store.commit('setBreadcrumbColumnValue', columnValue) this.urlChangeParams[this.curTabState.thirdMenu] = columnName
// this.$store.commit('setBreadcrumbColumnName', columnName) this.urlChangeParams[this.curTabState.fourthMenu] = columnValue
this.changeUrlTabState(this.curTabState.thirdMenu, columnName)
this.changeUrlTabState(this.curTabState.fourthMenu, columnValue)
const tabObjGroup = networkOverviewTabList.filter(item => item.label == columnName) const tabObjGroup = networkOverviewTabList.filter(item => item.label == columnName)
const type = tabObjGroup && tabObjGroup[0] ? tabObjGroup[0].prop : '' const type = tabObjGroup && tabObjGroup[0] ? tabObjGroup[0].prop : ''
// this.$store.commit('setDimensionType', type) this.urlChangeParams[this.curTabState.dimensionType] = type
this.changeUrlTabState(this.curTabState.dimensionType, type) this.urlChangeParams[this.curTabState.panelName] = columnValue
// this.$store.commit('setPanelName', columnValue)
this.changeUrlTabState(this.curTabState.panelName, columnValue)
} else if (columnName) { // 点击的为列名 } else if (columnName) { // 点击的为列名
child.columnValue = '' child.columnValue = ''
child.columnName = columnName child.columnName = columnName
// this.$store.commit('setBreadcrumbColumnValue', '') this.urlChangeParams[this.curTabState.thirdMenu] = columnName
// this.$store.commit('setBreadcrumbColumnName', columnName) this.urlChangeParams[this.curTabState.fourthMenu] = ''
this.changeUrlTabState(this.curTabState.thirdMenu, columnName) this.urlChangeParams[this.curTabState.panelName] = columnName
this.changeUrlTabState(this.curTabState.fourthMenu, '')
// this.$store.commit('setPanelName', columnName)
this.changeUrlTabState(this.curTabState.panelName, columnName)
const tableType = this.$route.params ? this.$route.params.typeName : 'networkOverview' const tableType = this.$route.params ? this.$route.params.typeName : 'networkOverview'
const metric = this.getUrlParam(this.curTabState.tableMetric, 'Bits/s') const metric = this.getUrlParam(this.curTabState.tableMetric, 'Bits/s')
const curTab = getDefaultCurTab(tableType, metric, columnName) const curTab = getDefaultCurTab(tableType, metric, columnName)
this.changeUrlTabState(this.curTabState.curTab, curTab.prop) this.urlChangeParams[this.curTabState.curTab] = curTab.prop
// this.$store.commit('setDimensionType', curTab ? curTab.prop : '') this.urlChangeParams[this.curTabState.dimensionType] = curTab ? curTab.prop : ''
this.changeUrlTabState(this.curTabState.dimensionType, curTab ? curTab.prop : '') this.$_.omit(this.urlChangeParams, [this.curTabState.queryCondition, this.curTabState.networkOverviewBeforeTab])
// this.$store.commit('setQueryCondition', '')
this.changeUrlTabState(this.curTabState.queryCondition, '')
// this.$store.commit('setNetworkOverviewBeforeTab', null)
this.changeUrlTabState(this.curTabState.networkOverviewBeforeTab, '')
} else { } else {
child.columnName = '' child.columnName = ''
child.columnValue = '' child.columnValue = ''
// this.$store.commit('setBreadcrumbColumnValue', '') 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.$store.commit('setBreadcrumbColumnName', '')
this.changeUrlTabState(this.curTabState.thirdPanel, '')
this.changeUrlTabState(this.curTabState.fourthPanel, '')
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.changeUrlTabState(this.curTabState.curTab, null)
// this.$store.commit('setQueryCondition', '')
this.changeUrlTabState(this.curTabState.queryCondition, '')
// this.$store.commit('setNetworkOverviewBeforeTab', null)
this.changeUrlTabState(this.curTabState.networkOverviewBeforeTab, '')
} }
} }
}) })
} }
}) })
// console.log(this.$store.getters.getDimensionType) this.changeUrlTabState()
if (opeType === 2 || opeType === 0) { // 二级菜单 或主菜单 if (opeType === 2 || opeType === 0) { // 二级菜单 或主菜单
// 如果有四级菜单，则将四级菜单对应tab的checked设置为true:根据columnName和columnValue 或 url判断不准确 // 如果有四级菜单，则将四级菜单对应tab的checked设置为true:根据columnName和columnValue 或 url判断不准确
if (menus[3]) { if (menus[3]) {
await this.handleCurDrilldownTableConfig(this.breadcrumb[2], this.breadcrumb[3]) this.handleCurDrilldownTableConfig(this.breadcrumb[2], this.breadcrumb[3])
} }
console.log('后面 handleCurDrilldownTableConfig')
// let path = this.$route.path; //先获取路由路径
// this.$router.push(path); //再跳转路由路径，query参数没带过去，所以被清除了
this.$router.push({ this.$router.push({
path: route, path: route,
query: { query: {

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

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

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

@@ -145,7 +145,7 @@
<transition-group name="dragMetric" class="list" tag="ul" ref="metric"> <transition-group name="dragMetric" class="list" tag="ul" ref="metric">
<template v-for="(item, index) in customTableTitles" :key="item.label"> <template v-for="(item, index) in customTableTitles" :key="item.label">
<li v-if="index>0" <li v-if="index>0"
class="list-item" class="list-item"
@dragenter="dragMetricEnter($event, index)" @dragenter="dragMetricEnter($event, index)"
@dragover="dragMetricOver($event, index)" @dragover="dragMetricOver($event, index)"
@dragstart="dragMetricStart(index)" @dragstart="dragMetricStart(index)"
@@ -237,7 +237,8 @@ export default {
chartData: [], chartData: [],
tableSortColumn: '', tableSortColumn: '',
tableSortType: '', tableSortType: '',
tableSortTab: '' tableSortTab: '',
urlChangeParams: {}
} }
}, },
props: { props: {
@@ -267,6 +268,7 @@ export default {
q: condition q: condition
} }
} }
this.changeUrlTabState()
this.getChartData(queryParams) this.getChartData(queryParams)
} }
} }
@@ -292,13 +294,13 @@ export default {
try { try {
this.initState() this.initState()
// const chartParams = this.chart.params // const chartParams = this.chart.params
this.queryParams = { const queryParams = {
...this.handleQueryParams(extraParams), ...this.handleQueryParams(extraParams),
startTime: getSecond(this.timeFilter.startTime), startTime: getSecond(this.timeFilter.startTime),
endTime: getSecond(this.timeFilter.endTime) endTime: getSecond(this.timeFilter.endTime)
} }
const requestUrl = this.getCurUrl() const requestUrl = this.getCurUrl()
get(requestUrl, this.queryParams).then(response => { get(requestUrl, queryParams).then(response => {
if (response.code === 200) { if (response.code === 200) {
this.chartData = response.data.result this.chartData = response.data.result
this.initData() this.initData()
@@ -309,6 +311,8 @@ export default {
}) })
} catch (e) { } catch (e) {
console.error(e) console.error(e)
} finally {
this.changeUrlTabState()
} }
}, },
cancleSortArrow () { cancleSortArrow () {
@@ -341,6 +345,7 @@ export default {
return thirdMenu && fourthMenu return thirdMenu && fourthMenu
}, },
initState () { initState () {
console.log('InitState：开始')
let curTab = this.getCurTab() let curTab = this.getCurTab()
if (curTab) { // 显示当前tab if (curTab) { // 显示当前tab
const realTab = this.list.find(item => item.label === curTab.label) const realTab = this.list.find(item => item.label === curTab.label)
@@ -417,12 +422,11 @@ export default {
curTab = this.getCurTab() curTab = this.getCurTab()
if (curTab) { if (curTab) {
this.showTab(curTab) this.showTab(curTab)
this.changeUrlTabState(this.curTabState.curTab, curTab.prop)// curTab改变了，所有要更新 this.urlChangeParams[this.curTabState.curTab] = curTab.prop
} }
this.showCustomizeTabs = true this.showCustomizeTabs = true
// this.setShowNum(10) // this.setShowNum(10)
} else if (this.isThirdMenu()) { // 点击的为第三级菜单 } else if (this.isThirdMenu()) { // 点击的为第三级菜单
// const name = this.$store.getters.getBreadcrumbColumnName
const name = this.getUrlParam(this.curTabState.thirdMenu, '') const name = this.getUrlParam(this.curTabState.thirdMenu, '')
// const networkTabList = [] // const networkTabList = []
this.list.forEach(item => { this.list.forEach(item => {
@@ -431,25 +435,19 @@ export default {
} }
// networkTabList.push(item) // networkTabList.push(item)
}) })
// this.$store.commit('setNetworkOverviewTabList', networkTabList)
const breadcrumbColumnTab = this.list.find(item => item.label === name) const breadcrumbColumnTab = this.list.find(item => item.label === name)
this.changeUrlTabState(this.curTabState.curTab, breadcrumbColumnTab.prop) this.urlChangeParams[this.curTabState.curTab] = breadcrumbColumnTab.prop
this.hideTabs(breadcrumbColumnTab) this.hideTabs(breadcrumbColumnTab)
this.combineColumnList(breadcrumbColumnTab.label) this.combineColumnList(breadcrumbColumnTab.label)
this.showCustomizeTabs = false this.showCustomizeTabs = false
// this.setShowNum(10)
} else if (curOperationType === operationType.changeTab) { // 切换tab } else if (curOperationType === operationType.changeTab) { // 切换tab
// if (curTab) { // tab切换
// this.showTab(curTab)//???????
// }
this.showCustomizeTabs = true this.showCustomizeTabs = true
// this.setShowNum(10)
} else if (curOperationType === operationType.secondMenu || curOperationType === operationType.mainMenu) { // 点击的为第二级菜单、或者点击菜单进入、 } else if (curOperationType === operationType.secondMenu || curOperationType === operationType.mainMenu) { // 点击的为第二级菜单、或者点击菜单进入、
this.list = this.$_.cloneDeep(this.allList) // this.list = this.$_.cloneDeep(this.allList)
if (curTab) { if (curTab) {
this.showTab(curTab) this.showTab(curTab)
this.changeUrlTabState(this.curTabState.curTab, curTab.prop) this.urlChangeParams[this.curTabState.curTab] = curTab.prop
} }
if (thirdMenu && fourthMenu) { if (thirdMenu && fourthMenu) {
this.$nextTick(() => { this.$nextTick(() => {
@@ -472,17 +470,14 @@ export default {
this.activeTab = '' this.activeTab = ''
} }
this.list = Object.assign({}, this.list) this.list = Object.assign({}, this.list)
// this.$store.commit('setNetworkOverviewTabList', this.list)
this.showCustomizeTabs = true this.showCustomizeTabs = true
} else if (curOperationType === operationType.changeMetric) { // 切换metric } else if (curOperationType === operationType.changeMetric) { // 切换metric
// if (beforeOperationType === operationType.thirdMenu) {
if (this.isThirdMenu()) { if (this.isThirdMenu()) {
this.hideTabs(curTab) this.hideTabs(curTab)
this.combineColumnList(curTab.label) this.combineColumnList(curTab.label)
this.showCustomizeTabs = false this.showCustomizeTabs = false
} }
} else if (curOperationType === operationType.customize) { // customize } else if (curOperationType === operationType.customize) { // customize
// if (beforeOperationType === operationType.thirdMenu) {
if (this.isThirdMenu()) { if (this.isThirdMenu()) {
this.hideTabs(curTab) this.hideTabs(curTab)
this.combineColumnList(curTab.label) this.combineColumnList(curTab.label)
@@ -506,6 +501,8 @@ export default {
}) })
} }
} }
this.changeUrlTabState()
console.log('InitState: 结束')
}, },
initData () { initData () {
const tabList = [] const tabList = []
@@ -707,14 +704,16 @@ export default {
} else { } else {
this.toggleLoading(false) this.toggleLoading(false)
} }
this.changeUrlTabState()
}, },
showMore () { showMore () {
this.setShowNum(50) this.setShowNum(50)
this.sortChange(this.column, this.index)// 当前选中的tab？？？？ this.sortChange(this.column, this.index)// 当前选中的tab？？？？
this.changeUrlTabState()
}, },
setShowNum (num) { setShowNum (num) {
this.showRecordNum = Number(num) this.showRecordNum = Number(num)
this.changeUrlTabState(curTabState.tableShowMore, this.showRecordNum) this.urlChangeParams[curTabState.tableShowMore] = this.showRecordNum
}, },
rowClass (row, column, rowIndex, columnIndex) { rowClass (row, column, rowIndex, columnIndex) {
if (rowIndex === 49) { if (rowIndex === 49) {
@@ -736,9 +735,16 @@ export default {
return ['others', 999] return ['others', 999]
}, },
sortChange (column, index) { sortChange (column, index) {
this.changeUrlTabState(this.curTabState.tableSortColumn, column.prop) if (column.prop) {
this.changeUrlTabState(this.curTabState.tableSortType, column.order) this.urlChangeParams[this.curTabState.tableSortColumn] = column.prop
this.changeUrlTabState(this.curTabState.tableSortTab, index) }
if (column.order) {
this.urlChangeParams[this.curTabState.tableSortType] = column.order
}
if (index || index === 0) {
this.urlChangeParams[this.curTabState.tableSortTab] = index
}
this.index = index this.index = index
this.column = column this.column = column
const arr = [] const arr = []
@@ -843,13 +849,13 @@ export default {
this.tableDataBackup = [] this.tableDataBackup = []
this.setShowNum(10) this.setShowNum(10)
const beforeType = this.getUrlParam(this.curTabState.tabOperationBeforeType, '', true) const beforeType = this.getUrlParam(this.curTabState.tabOperationBeforeType, '', true)
if (beforeType != operationType.thirdMenu) { if (beforeType && beforeType != operationType.thirdMenu) {
this.changeUrlTabState(this.curTabState.tabOperationBeforeType, this.getUrlParam(this.curTabState.tabOperationType, '', true)) this.urlChangeParams[this.curTabState.tabOperationBeforeType] = this.getUrlParam(this.curTabState.tabOperationType, '', true)
} }
this.changeUrlTabState(this.curTabState.tabOperationType, operationType.changeMetric) this.urlChangeParams[this.curTabState.tabOperationType] = operationType.changeMetric
const curTab = this.getCurTab() const curTab = this.getCurTab()
const label = curTab.label const label = curTab.label
this.changeUrlTabState(this.curTabState.tableMetric, this.metric) this.urlChangeParams[this.curTabState.tableMetric] = this.metric
// 1:先根据metric获得tabs，再根据当前tab，获得columns，再进行数据组装？？？ // 1:先根据metric获得tabs，再根据当前tab，获得columns，再进行数据组装？？？
if (this.metricsList && this.metricsList.length > 0) { if (this.metricsList && this.metricsList.length > 0) {
@@ -882,7 +888,6 @@ export default {
limit: networkDefaultLimit, limit: networkDefaultLimit,
type: curTab.prop type: curTab.prop
} }
// const condition = this.$store.getters.getQueryCondition
const condition = this.getQueryCondition() const condition = this.getQueryCondition()
if (condition) { if (condition) {
queryParams = { queryParams = {
@@ -892,6 +897,7 @@ export default {
q: condition q: condition
} }
} }
this.changeUrlTabState()
this.getChartData(queryParams) this.getChartData(queryParams)
}, },
handleCustomizeButton (status) { handleCustomizeButton (status) {
@@ -901,9 +907,7 @@ export default {
} }
const tabList = this.list.filter(item => item.checked === true) const tabList = this.list.filter(item => item.checked === true)
const defaultTab = tabList.length > 0 ? tabList[0] : {} const defaultTab = tabList.length > 0 ? tabList[0] : {}
// const columnName = this.$store.getters.getBreadcrumbColumnName
const columnName = this.getUrlParam(this.curTabState.thirdMenu, '') const columnName = this.getUrlParam(this.curTabState.thirdMenu, '')
// const columnValue = this.$store.getters.getBreadcrumbColumnValue
const columnValue = this.getUrlParam(this.curTabState.fourthMenu, '') const columnValue = this.getUrlParam(this.curTabState.fourthMenu, '')
if (tabList.length === 1) { if (tabList.length === 1) {
defaultTab.disabled = true defaultTab.disabled = true
@@ -916,7 +920,6 @@ export default {
} }
} }
}) })
// this.$store.commit('setNetworkOverviewTabList', this.list)
} }
}, },
// 隐藏tabs的标题 // 隐藏tabs的标题
@@ -936,14 +939,13 @@ export default {
}) })
}, },
// tab改变 // tab改变
changeUrlTabState (param, value) { changeUrlTabState () {
if (value != null && value != undefined) { if (this.urlChangeParams && JSON.stringify(this.urlChangeParams) !== '{}') {
const { query } = this.$route const { query } = this.$route
const newQuery = {} const newUrl = urlParamsHandler(window.location.href, query, this.urlChangeParams)
newQuery[param] = value
const newUrl = urlParamsHandler(window.location.href, query, newQuery)
overwriteUrl(newUrl) overwriteUrl(newUrl)
} }
this.urlChangeParams = {}
}, },
// 激活tab修改的内容：第一列的列名，list中此tab为checked=true // 激活tab修改的内容：第一列的列名，list中此tab为checked=true
showTab (curTab) { showTab (curTab) {
@@ -953,7 +955,7 @@ export default {
} }
}, },
// 配置tab：显示隐藏与顺序 // 配置tab：显示隐藏与顺序
async tabChange (index) { tabChange (index) {
console.log('NetworkOverview类------tabChange：隐藏或显示tab-开始') console.log('NetworkOverview类------tabChange：隐藏或显示tab-开始')
console.log(this.list) console.log(this.list)
console.log(this.curTable) console.log(this.curTable)
@@ -963,9 +965,9 @@ export default {
// 操作类型设置 // 操作类型设置
const beforeType = this.getUrlParam(this.curTabState.tabOperationBeforeType, '', true) const beforeType = this.getUrlParam(this.curTabState.tabOperationBeforeType, '', true)
if (beforeType != operationType.thirdMenu) { if (beforeType != operationType.thirdMenu) {
this.changeUrlTabState(this.curTabState.tabOperationBeforeType, this.getUrlParam(this.curTabState.tabOperationType, '', true)) this.urlChangeParams[this.curTabState.tabOperationBeforeType] = this.getUrlParam(this.curTabState.tabOperationType, '', true)
} }
this.changeUrlTabState(this.curTabState.tabOperationType, operationType.customize) this.urlChangeParams[this.curTabState.tabOperationType] = operationType.customize
// 获得操作tab和当前选中的所有tab // 获得操作tab和当前选中的所有tab
const handleTab = this.list[index] const handleTab = this.list[index]
const tabList = this.list.filter(item => item.checked === true) const tabList = this.list.filter(item => item.checked === true)
@@ -1000,18 +1002,18 @@ export default {
} }
} }
await this.saveUserLocalConfig() this.saveUserLocalConfig()
// 如果取消tab，则如果取消的是当前选中的tab，则当前tab就需要修改为第一个默认的tab，否则不用 // 如果取消tab，则如果取消的是当前选中的tab，则当前tab就需要修改为第一个默认的tab，否则不用
const curTab = this.getCurTab() const curTab = this.getCurTab()
if (!handleTab.checked && handleTab.label === curTab.label) { if (!handleTab.checked && handleTab.label === curTab.label) {
// this.showRecordNum = 10
this.setShowNum(10) this.setShowNum(10)
this.changeUrlTabState(this.curTabState.curTab, tabList[0].prop) this.urlChangeParams[this.curTabState.curTab] = tabList[0].prop
let queryParams = { let queryParams = {
orderBy: this.orderBy, orderBy: this.orderBy,
limit: networkDefaultLimit, limit: networkDefaultLimit,
type: tabList[0].prop type: tabList[0].prop
} }
this.changeUrlTabState()
// const condition = this.$store.getters.getQueryCondition // const condition = this.$store.getters.getQueryCondition
const condition = this.getQueryCondition() const condition = this.getQueryCondition()
if (condition) { if (condition) {
@@ -1023,6 +1025,8 @@ export default {
} }
} }
this.getChartData(queryParams) this.getChartData(queryParams)
} else {
this.changeUrlTabState()
} }
console.log('NetworkOverview类------tabChange：隐藏或显示tab-结束') console.log('NetworkOverview类------tabChange：隐藏或显示tab-结束')
console.log(this.list) console.log(this.list)
@@ -1031,10 +1035,8 @@ export default {
console.log('NetworkOverview类------tabChange：隐藏或显示tab-结束') console.log('NetworkOverview类------tabChange：隐藏或显示tab-结束')
}, },
setOperationType (operationType) { setOperationType (operationType) {
// this.$store.commit('setTabOperationBeforeType', this.$store.getters.getTabOperationType) this.urlChangeParams[this.curTabState.tabOperationBeforeType] = this.getUrlParam(this.curTabState.tabOperationType, '', true)
// this.$store.commit('setTabOperationType', operationType) this.urlChangeParams[this.curTabState.tabOperationType] = operationType
this.changeUrlTabState(this.curTabState.tabOperationBeforeType, this.getUrlParam(this.curTabState.tabOperationType, '', true))
this.changeUrlTabState(this.curTabState.tabOperationType, operationType)
}, },
getTabByLabel (label) { getTabByLabel (label) {
let tab = null let tab = null
@@ -1045,8 +1047,7 @@ export default {
return tab return tab
}, },
setBeforeTab (tab) { setBeforeTab (tab) {
// this.$store.commit('setNetworkOverviewBeforeTab', tab) this.urlChangeParams[this.curTabState.networkOverviewBeforeTab] = tab.prop
this.changeUrlTabState(this.curTabState.networkOverviewBeforeTab, tab.prop)
}, },
setQueryCondition (tab, value) { setQueryCondition (tab, value) {
const queryCondition = [] const queryCondition = []
@@ -1057,14 +1058,12 @@ export default {
queryCondition.push("common_l7_protocol='" + valueGroup[0] + "'") queryCondition.push("common_l7_protocol='" + valueGroup[0] + "'")
queryCondition.push('common_server_port=' + valueGroup[1]) queryCondition.push('common_server_port=' + valueGroup[1])
} }
// this.$store.commit('setQueryCondition', queryCondition.join(' AND ')) this.urlChangeParams[this.curTabState.queryCondition] = queryCondition.join(' AND ')
this.changeUrlTabState(this.curTabState.queryCondition, queryCondition.join(' AND '))
} else { } else {
searchProps.forEach(item => { searchProps.forEach(item => {
queryCondition.push(item + "='" + value + "'") queryCondition.push(item + "='" + value + "'")
}) })
// this.$store.commit('setQueryCondition', queryCondition.join(' OR ')) this.urlChangeParams[this.curTabState.queryCondition] = queryCondition.join(' OR ')
this.changeUrlTabState(this.curTabState.queryCondition, queryCondition.join(' OR '))
} }
}, },
getFirstCheckedTab () { getFirstCheckedTab () {
@@ -1076,21 +1075,22 @@ export default {
return tab return tab
}, },
/* /*
* 点击表格第一列数据后 * 点击表格第一列数据后
1.设置beforeTab 1.设置beforeTab
2.设置OperationType 2.设置OperationType
3.设置QueryCondition 3.设置QueryCondition
4.设置菜单：第三级，第四级名称，并保存到store中 4.设置菜单：第三级，第四级名称，并保存到store中
5.设置panel名称，表格维度类型：如ip，domain等(即查询参数中的type) 5.设置panel名称，表格维度类型：如ip，domain等(即查询参数中的type)
* */ * */
async handleTabValue (columnName, columnValue) { handleTabValue (columnName, columnValue) {
console.log('NetworkOverview类------handleTabValue：下钻') console.log('NetworkOverview类------handleTabValue：下钻')
const clickTab = this.getTabByLabel(columnName)// 下钻后，显示的下钻tab对应的drilldownTabs const clickTab = this.getTabByLabel(columnName)// 下钻后，显示的下钻tab对应的drilldownTabs
this.setBeforeTab(clickTab) this.setBeforeTab(clickTab)
this.setOperationType(operationType.fourthMenu) this.setOperationType(operationType.fourthMenu)
this.setQueryCondition(clickTab, columnValue) this.setQueryCondition(clickTab, columnValue)
const toPanel = clickTab.panelId const toPanel = clickTab.panelId
this.changeUrlTabState(this.curTabState.curTab, '') this.urlChangeParams[this.curTabState.curTab] = ''
this.changeUrlTabState()
const thirdMenu = this.getUrlParam(this.curTabState.thirdMenu, '') const thirdMenu = this.getUrlParam(this.curTabState.thirdMenu, '')
const tabList = this.getAllTabList() const tabList = this.getAllTabList()
if (this.isDrilldown()) { // 点击之前就已经是下钻状态了 if (this.isDrilldown()) { // 点击之前就已经是下钻状态了
@@ -1100,7 +1100,7 @@ export default {
} }
}) })
this.list = this.getDrilldownTabList(columnName) this.list = this.getDrilldownTabList(columnName)
this.combineTabList(this.list) // this.combineTabList(this.list)
const curTab = this.getCurTab(clickTab) const curTab = this.getCurTab(clickTab)
tabList.forEach(tab => { tabList.forEach(tab => {
if (tab.label === curTab.label && tab.columns) { if (tab.label === curTab.label && tab.columns) {
@@ -1110,7 +1110,7 @@ export default {
} else { } else {
const changeTab = tabList.find(item => item.label == columnName)// 下钻的tab const changeTab = tabList.find(item => item.label == columnName)// 下钻的tab
this.list = changeTab.drilldownTabs this.list = changeTab.drilldownTabs
this.combineTabList(this.list) // this.combineTabList(this.list)
const curTab = this.getCurTab(clickTab) const curTab = this.getCurTab(clickTab)
tabList.forEach(tab => { tabList.forEach(tab => {
if (tab.label === curTab.label && tab.columns) { if (tab.label === curTab.label && tab.columns) {
@@ -1118,32 +1118,32 @@ export default {
} }
}) })
} }
await this.saveUserLocalConfig() this.saveUserLocalConfig()
console.log(this.drillDownTableConfigs) console.log(this.drillDownTableConfigs)
this.$store.getters.menuList.forEach(menu => { this.$store.getters.menuList.forEach(menu => {
if (this.$_.isEmpty(menu.children) && menu.route) { if (this.$_.isEmpty(menu.children) && menu.route) {
if (this.$route.path === menu.route) { if (this.$route.path === menu.route) {
menu.columnName = columnName menu.columnName = columnName
menu.columnValue = columnValue menu.columnValue = columnValue
this.changeUrlTabState(this.curTabState.panelName, columnValue) this.urlChangeParams[this.curTabState.panelName] = columnValue
this.changeUrlTabState(this.curTabState.thirdMenu, columnName) this.urlChangeParams[this.curTabState.thirdMenu] = columnName
this.changeUrlTabState(this.curTabState.dimensionType, clickTab ? clickTab.prop : '') this.urlChangeParams[this.curTabState.dimensionType] = clickTab ? clickTab.prop : ''
this.changeUrlTabState(this.curTabState.fourthMenu, columnValue) this.urlChangeParams[this.curTabState.fourthMenu] = columnValue
} }
} else if (!this.$_.isEmpty(menu.children)) { } else if (!this.$_.isEmpty(menu.children)) {
menu.children.forEach(child => { menu.children.forEach(child => {
if (this.$route.path === child.route) { if (this.$route.path === child.route) {
child.columnName = columnName child.columnName = columnName
child.columnValue = columnValue child.columnValue = columnValue
this.changeUrlTabState(this.curTabState.panelName, columnValue) this.urlChangeParams[this.curTabState.panelName] = columnValue
this.changeUrlTabState(this.curTabState.thirdMenu, columnName) this.urlChangeParams[this.curTabState.thirdMenu] = columnName
this.changeUrlTabState(this.curTabState.dimensionType, clickTab ? clickTab.prop : '') this.urlChangeParams[this.curTabState.dimensionType] = clickTab ? clickTab.prop : ''
this.changeUrlTabState(this.curTabState.fourthMenu, columnValue) this.urlChangeParams[this.curTabState.fourthMenu] = columnValue
} }
}) })
} }
}) })
this.changeUrlTabState()
this.$router.push({ this.$router.push({
query: { query: {
...this.$route.query, ...this.$route.query,
@@ -1163,14 +1163,12 @@ export default {
queryCondition.push("common_l7_protocol='" + valueGroup[0] + "'") queryCondition.push("common_l7_protocol='" + valueGroup[0] + "'")
queryCondition.push('common_server_port=' + valueGroup[1]) queryCondition.push('common_server_port=' + valueGroup[1])
} }
// this.$store.commit('setQueryCondition', queryCondition.join(' AND ')) this.urlChangeParams[this.curTabState.queryCondition] = queryCondition.join(' AND ')
this.changeUrlTabState(this.curTabState.queryCondition, queryCondition.join(' AND '))
} else { } else {
searchProps.forEach(item => { searchProps.forEach(item => {
queryCondition.push(item + "='" + columnValue + "'") queryCondition.push(item + "='" + columnValue + "'")
}) })
// this.$store.commit('setQueryCondition', queryCondition.join(' OR ')) this.urlChangeParams[this.curTabState.queryCondition] = queryCondition.join(' OR ')
this.changeUrlTabState(this.curTabState.queryCondition, queryCondition.join(' OR '))
} }
}, },
async metricChange () { async metricChange () {
@@ -1226,28 +1224,29 @@ export default {
this.tableSortColumn = '' this.tableSortColumn = ''
this.tableSortType = '' this.tableSortType = ''
this.tableSortTab = '' this.tableSortTab = ''
this.changeUrlTabState(this.curTabState.tableSortColumn, '') this.urlChangeParams = this.$_.omit(this.urlChangeParams, [this.curTabState.tableSortColumn, this.curTabState.tableSortType, this.curTabState.tableSortTab])
this.changeUrlTabState(this.curTabState.tableSortType, '')
this.changeUrlTabState(this.curTabState.tableSortTab, '')
this.cancleSortArrow() this.cancleSortArrow()
}, },
// 切换tab的时候，只需要修改列即可,但是列需要从indexDB中获取 // 切换tab的时候，只需要修改列即可,但是列需要从indexDB中获取
async handleClick (tab) { handleClick (tab) {
this.tableData = [] this.tableData = []
this.tableDataBackup = [] this.tableDataBackup = []
this.setShowNum(10) this.setShowNum(10)
this.clearSort() this.clearSort()
this.changeUrlTabState(this.curTabState.tabOperationBeforeType, this.getUrlParam(this.curTabState.tabOperationType, '', true)) const tabOpeType = this.getUrlParam(this.curTabState.tabOperationType, '', true)
this.changeUrlTabState(this.curTabState.tabOperationType, operationType.changeTab) if (tabOpeType) {
this.urlChangeParams[this.curTabState.tabOperationBeforeType] = tabOpeType
}
this.urlChangeParams[this.curTabState.tabOperationType] = operationType.changeTab
// 下钻的tab觉得显示哪些tab，这些tab显示什么列，取决于tab本身 // 下钻的tab觉得显示哪些tab，这些tab显示什么列，取决于tab本身
const tabObjGroup = this.list.filter(item => item.label == tab.paneName) const tabObjGroup = this.list.filter(item => item.label == tab.paneName)
if (tabObjGroup && tabObjGroup.length > 0) { if (tabObjGroup && tabObjGroup.length > 0) {
const curTab = tabObjGroup[0] const curTab = tabObjGroup[0]
this.changeUrlTabState(this.curTabState.curTab, curTab.prop) this.urlChangeParams[this.curTabState.curTab] = curTab.prop
if (curTab.columns) { if (curTab.columns) {
this.combineColumnList(curTab.label) this.combineColumnList(curTab.label)
} }
await this.saveUserLocalConfig() this.saveUserLocalConfig()
this.tab = curTab.prop this.tab = curTab.prop
let queryParams = { let queryParams = {
orderBy: this.orderBy, orderBy: this.orderBy,
@@ -1263,6 +1262,7 @@ export default {
q: condition q: condition
} }
} }
this.changeUrlTabState()
this.tableData = [] this.tableData = []
this.tableDataBackup = [] this.tableDataBackup = []
this.toggleLoading(true) this.toggleLoading(true)
@@ -1270,7 +1270,6 @@ export default {
} }
}, },
getCurUrl () { getCurUrl () {
// const condition = this.$store.getters.getQueryCondition
const condition = this.getQueryCondition() const condition = this.getQueryCondition()
if (condition) { if (condition) {
return this.networkSearchUrl.drilldownCurUrl return this.networkSearchUrl.drilldownCurUrl
@@ -1279,7 +1278,6 @@ export default {
} }
}, },
gerCycleUrl () { gerCycleUrl () {
// const condition = this.$store.getters.getQueryCondition
const condition = this.getQueryCondition() const condition = this.getQueryCondition()
if (condition) { if (condition) {
return this.networkSearchUrl.drilldownCycleUrl return this.networkSearchUrl.drilldownCycleUrl
@@ -1288,7 +1286,6 @@ export default {
} }
}, },
gerColumnUrl (tableColumn) { gerColumnUrl (tableColumn) {
// const condition = this.$store.getters.getQueryCondition
const condition = this.getQueryCondition() const condition = this.getQueryCondition()
if (condition) { if (condition) {
return tableColumn.dillDownCycleDataUrl return tableColumn.dillDownCycleDataUrl
@@ -1300,11 +1297,8 @@ export default {
let queryType = '' let queryType = ''
const thirdMenu = this.getUrlParam(this.curTabState.thirdMenu, '') const thirdMenu = this.getUrlParam(this.curTabState.thirdMenu, '')
const fourthMenu = this.getUrlParam(this.curTabState.fourthMenu, '') const fourthMenu = this.getUrlParam(this.curTabState.fourthMenu, '')
// const name = this.$store.getters.getBreadcrumbColumnName
const name = this.getUrlParam(this.curTabState.thirdMenu, '') const name = this.getUrlParam(this.curTabState.thirdMenu, '')
// const curOperationType = this.$store.getters.getTabOperationType
const curOperationType = this.getUrlParam(this.curTabState.tabOperationType, '', true) const curOperationType = this.getUrlParam(this.curTabState.tabOperationType, '', true)
// if (curOperationType === operationType.fourthMenu) { // 点击的为第四级菜单
if (this.isFourthMenu()) { // 点击的为第四级菜单 if (this.isFourthMenu()) { // 点击的为第四级菜单
const curTab = this.getCurTab() const curTab = this.getCurTab()
if (curTab) { if (curTab) {
@@ -1392,12 +1386,14 @@ export default {
if (tabObjGroup && tabObjGroup.length > 0) { if (tabObjGroup && tabObjGroup.length > 0) {
tabObjGroup[0].checked = true tabObjGroup[0].checked = true
curTab = tabObjGroup[0] curTab = tabObjGroup[0]
this.changeUrlTabState(this.curTabState.curTab, curTab.prop) this.urlChangeParams[this.curTabState.curTab] = curTab.prop
this.changeUrlTabState()
} else { } else {
if (this.list && this.list.length > 0) { if (this.list && this.list.length > 0) {
this.list[0].checked = true this.list[0].checked = true
curTab = this.list[0] curTab = this.list[0]
this.changeUrlTabState(this.curTabState.curTab, curTab.prop) this.urlChangeParams[this.curTabState.curTab] = curTab.prop
this.changeUrlTabState()
} }
} }
} else { } else {
@@ -1411,6 +1407,7 @@ export default {
return curTab return curTab
}, },
combineTabList (tabList) { combineTabList (tabList) {
console.log('CombineTabList：开始')
const listInCode = this.curTableInCode ? this.curTableInCode.tabList : [] const listInCode = this.curTableInCode ? this.curTableInCode.tabList : []
tabList.forEach(tab => { tabList.forEach(tab => {
const tabName = tab ? (tab.name ? tab.name : tab) : '' const tabName = tab ? (tab.name ? tab.name : tab) : ''
@@ -1437,28 +1434,30 @@ export default {
const oldList = this.$_.cloneDeep(tabList) const oldList = this.$_.cloneDeep(tabList)
tabList.forEach(tab => { tabList.forEach(tab => {
const drilldownTabFull = [] const drilldownTabFull = []
tab.drilldownTabs.forEach(drilldownTab => { const drilldownTabList = tab.drilldownTabs
drilldownTabList.forEach(drilldownTab => {
if (!drilldownTab.hasOwnProperty('name') || drilldownTab.name === undefined || drilldownTab.name === null) { if (!drilldownTab.hasOwnProperty('name') || drilldownTab.name === undefined || drilldownTab.name === null) {
const drilldownTabName = drilldownTab || '' const drilldownTabName = drilldownTab || ''
const fullTab = oldList.find(item => item.name === drilldownTabName) const fullTab = oldList.find(item => item.name === drilldownTabName)
if (fullTab) { const drilldownTabWithAllInfo = this.$_.cloneDeep(fullTab)
if (drilldownTabWithAllInfo) {
const commonTab = this.commonTabList.find(item => item.name === drilldownTabName) const commonTab = this.commonTabList.find(item => item.name === drilldownTabName)
fullTab.label = commonTab ? commonTab.i18n : '' drilldownTabWithAllInfo.label = commonTab ? commonTab.i18n : ''
fullTab.prop = commonTab ? commonTab.prop : '' drilldownTabWithAllInfo.prop = commonTab ? commonTab.prop : ''
if (!fullTab.hasOwnProperty('panelId') || fullTab.panelId === undefined || tab.panelId === null) { /* if (!drilldownTabWithAllInfo.hasOwnProperty('panelId') || drilldownTabWithAllInfo.panelId === undefined || drilldownTabWithAllInfo.panelId === null) {
fullTab.panelId = tab ? tab.panelIdOfFourthMenu : '' drilldownTabWithAllInfo.panelId = tab ? tab.panelIdOfFourthMenu : ''
} */
if (!drilldownTabWithAllInfo.hasOwnProperty('checked') || drilldownTabWithAllInfo.checked === undefined || drilldownTabWithAllInfo.checked === null) {
drilldownTabWithAllInfo.checked = !((tab.hiddenDrilldownTabs.indexOf(drilldownTabName) >= 0))
} }
if (!fullTab.hasOwnProperty('checked') || fullTab.checked === undefined || tab.checked === null) { if (!drilldownTabWithAllInfo.hasOwnProperty('disabled') || drilldownTabWithAllInfo.disabled === undefined || drilldownTabWithAllInfo.disabled === null) {
fullTab.checked = !((tab.hiddenDrilldownTabs.indexOf(drilldownTabName) >= 0)) drilldownTabWithAllInfo.disabled = (tab.disabledDrilldownTabs.indexOf(drilldownTabName) >= 0)
}
if (!fullTab.hasOwnProperty('disabled') || fullTab.disabled === undefined || tab.disabled === null) {
fullTab.disabled = (tab.disabledDrilldownTabs.indexOf(drilldownTabName) >= 0)
} }
// 代码里写死的 // 代码里写死的
const tabInCode = listInCode ? listInCode.find(item => item.label === fullTab.label) : {} const tabInCode = listInCode ? listInCode.find(item => item.label === fullTab.label) : {}
fullTab.queryCycleTotalProp = tabInCode ? tabInCode.queryCycleTotalProp : null drilldownTabWithAllInfo.queryCycleTotalProp = tabInCode ? tabInCode.queryCycleTotalProp : null
fullTab.dillDownProp = tabInCode ? tabInCode.dillDownProp : [] drilldownTabWithAllInfo.dillDownProp = tabInCode ? tabInCode.dillDownProp : []
drilldownTabFull.push(fullTab) drilldownTabFull.push(drilldownTabWithAllInfo)
} }
} }
}) })
@@ -1467,14 +1466,15 @@ export default {
} }
}) })
} }
console.log('CombineTabList：结束')
}, },
combineColumnList (tabLabel) { combineColumnList (tabLabel) {
console.log('CombineColumnList：开始')
const allTabs = this.getAllTabList() const allTabs = this.getAllTabList()
const curTab = allTabs.find(item => item.label === tabLabel) const curTab = allTabs.find(item => item.label === tabLabel)
const customTableTitles = curTab ? curTab.columns : [] const customTableTitles = curTab ? curTab.columns : []
const hiddenColumnList = curTab ? curTab.hiddenColumns : [] const hiddenColumnList = curTab ? curTab.hiddenColumns : []
const disabledColumnList = curTab ? curTab.disabledColumns : [] const disabledColumnList = curTab ? curTab.disabledColumns : []
// let list = customTableTitles, curTabColumns.hiddenColumns, curTabColumns.disabledColumns
const newColumnList = [] const newColumnList = []
if (customTableTitles && customTableTitles.length > 0) { if (customTableTitles && customTableTitles.length > 0) {
customTableTitles.forEach(column => { customTableTitles.forEach(column => {
@@ -1508,6 +1508,8 @@ export default {
this.customTableTitles = customTableTitles this.customTableTitles = customTableTitles
} }
} }
console.log('CombineColumnList：结束')
}, },
async getUserLocalConfig () { async getUserLocalConfig () {
const userLocalCongfig = await db[dbDrilldownTableConfig].get({ id: this.userId }) const userLocalCongfig = await db[dbDrilldownTableConfig].get({ id: this.userId })
@@ -1525,22 +1527,24 @@ export default {
return false return false
} }
}, },
async saveUserLocalConfig () { isSetDrilldownTabInfo (tabList) {
console.log('NetworkOverview类------saveUserLocalConfig方法：保存用户设置') let isSetDrilldownTabInfo = false
/* if (tabList && tabList.length > 0) {
let curTab = this.getCurTab() const drilldownTab = tabList[0].drilldownTabs
console.log(this.customTableTitles) if (drilldownTab && drilldownTab.length > 0 && drilldownTab.hasOwnProperty('name')) {
this.getAllTabList().forEach(tab => { isSetDrilldownTabInfo = true
if(tab.name ===curTab.name){
tab.columns = this.customTableTitles
} }
}) */ }
return isSetDrilldownTabInfo
},
async saveUserLocalConfig () {
console.log('SaveUserLocalConfig方法：开始')
console.log(this.drillDownTableConfigs) console.log(this.drillDownTableConfigs)
await db[dbDrilldownTableConfig].put({ await db[dbDrilldownTableConfig].put({
id: this.userId, id: this.userId,
config: this.$_.cloneDeep(this.drillDownTableConfigs) config: this.$_.cloneDeep(this.drillDownTableConfigs)
}) })
console.log('NetworkOverview类------saveUserLocalConfig方法：保存用户设置-end') console.log('SaveUserLocalConfig方法：结束')
}, },
getAllTabList () { getAllTabList () {
let tabs = [] let tabs = []
@@ -1588,7 +1592,7 @@ export default {
} }
}, },
async mounted () { async mounted () {
console.log('NetworkOverview类------mounted：保存用户设置') console.log('Mounted：开始')
this.userId = localStorage.getItem(storageKey.userId) this.userId = localStorage.getItem(storageKey.userId)
this.tableType = this.$route.params ? this.$route.params.typeName : 'networkOverview' this.tableType = this.$route.params ? this.$route.params.typeName : 'networkOverview'
this.curTableInCode = this.networkTable[this.tableType] ? this.networkTable[this.tableType] : this.networkTable.networkOverview this.curTableInCode = this.networkTable[this.tableType] ? this.networkTable[this.tableType] : this.networkTable.networkOverview
@@ -1602,19 +1606,16 @@ export default {
// 先从localStorage中获取用户定制的自定义配置，如果没有，则使用默认的自定义配置 // 先从localStorage中获取用户定制的自定义配置，如果没有，则使用默认的自定义配置
const userLocalCongfig = await db[dbDrilldownTableConfig].get({ id: this.userId }) const userLocalCongfig = await db[dbDrilldownTableConfig].get({ id: this.userId })
if (userLocalCongfig) { if (userLocalCongfig) {
console.log('user..............')
this.drillDownTableConfigs = userLocalCongfig.config this.drillDownTableConfigs = userLocalCongfig.config
console.log(this.drillDownTableConfigs) console.log(this.drillDownTableConfigs)
} }
if (!this.drillDownTableConfigs || this.drillDownTableConfigs.length === 0) { // 未找到当前用户的配置，使用默认配置 if (!this.drillDownTableConfigs || this.drillDownTableConfigs.length === 0) { // 未找到当前用户的配置，使用默认配置
console.log('default..............')
const defaultCongfig = await db[dbDrilldownTableConfig].get({ id: 'default' }) const defaultCongfig = await db[dbDrilldownTableConfig].get({ id: 'default' })
if (defaultCongfig) { if (defaultCongfig) {
this.drillDownTableConfigs = defaultCongfig.config this.drillDownTableConfigs = defaultCongfig.config
console.log(this.drillDownTableConfigs) console.log(this.drillDownTableConfigs)
} }
} }
console.log('vvvvvvvv')
console.log(this.drillDownTableConfigs) console.log(this.drillDownTableConfigs)
const currentTableConfig = this.drillDownTableConfigs.find(config => config.route === this.tableType) const currentTableConfig = this.drillDownTableConfigs.find(config => config.route === this.tableType)
// 开始设置当前table，当前tab，当前tab对应的列等信息 // 开始设置当前table，当前tab，当前tab对应的列等信息
@@ -1629,9 +1630,13 @@ export default {
const thirdMenu = this.getUrlParam(this.curTabState.thirdMenu, '') const thirdMenu = this.getUrlParam(this.curTabState.thirdMenu, '')
const tabList = this.getAllTabList() const tabList = this.getAllTabList()
if (tabList && tabList.length > 0) { if (tabList && tabList.length > 0) {
this.combineTabList(tabList) if (!this.isSetDrilldownTabInfo(tabList)) { // 设否设置了下钻的详细信息
this.combineTabList(tabList)
}
const drilldownTab = tabList.find(item => item.label === thirdMenu) const drilldownTab = tabList.find(item => item.label === thirdMenu)
this.list = drilldownTab ? drilldownTab.drilldownTabs : [] this.list = drilldownTab ? drilldownTab.drilldownTabs : []
console.log('下钻：list')
console.log(this.list)
this.allList = this.$_.cloneDeep(tabList)// 备份所有配置，下钻及返回时使用 this.allList = this.$_.cloneDeep(tabList)// 备份所有配置，下钻及返回时使用
const curTab = this.getCurTab()// 初始化完list，才能正确执行 const curTab = this.getCurTab()// 初始化完list，才能正确执行
const curTabColumns = tabList.find(item => item.prop === curTab.prop) const curTabColumns = tabList.find(item => item.prop === curTab.prop)
@@ -1640,8 +1645,11 @@ export default {
} }
} else { // 非下钻状态 } else { // 非下钻状态
this.list = this.getAllTabList() this.list = this.getAllTabList()
this.combineTabList(this.list) if (!this.isSetDrilldownTabInfo(this.list)) { // 设否设置了下钻的详细信息
this.combineTabList(this.list)
}
this.allList = this.$_.cloneDeep(this.list)// 备份所有配置，下钻及返回时使用 this.allList = this.$_.cloneDeep(this.list)// 备份所有配置，下钻及返回时使用
console.log('未下钻：list')
console.log(this.list) console.log(this.list)
if (this.list && this.list.length > 0) { if (this.list && this.list.length > 0) {
const curTab = this.getCurTab()// 初始化完list，才能正确执行 const curTab = this.getCurTab()// 初始化完list，才能正确执行
@@ -1661,24 +1669,23 @@ export default {
this.cycleColumnNameGroup = this.curTable.bytesCycleColumnNameGroup this.cycleColumnNameGroup = this.curTable.bytesCycleColumnNameGroup
} }
} }
console.log('第一次存储默认配置到localstorage') this.saveUserLocalConfig()
console.log(this.drillDownTableConfigs)
await this.saveUserLocalConfig()
this.getChartData() this.getChartData()
this.$nextTick(() => { this.$nextTick(() => {
setTimeout(() => { setTimeout(() => {
this.hasMetricSearch = this.curTable.hasMetricSearch this.hasMetricSearch = this.curTable.hasMetricSearch
}, 250) }, 250)
}) })
console.log('Mounted：结束')
}, },
setup (props) { setup (props) {
}, },
async unmounted () { unmounted () {
console.log('NetworkOverview类------unmounted方法：退出界面时，将修改的配置存储到localstorage') console.log('Unmounted方法：开始')
this.isNoData = false this.isNoData = false
console.log(this.customTableTitles)
// 存储用户的设置 // 存储用户的设置
await this.saveUserLocalConfig() this.saveUserLocalConfig()
console.log('Unmounted方法：结束')
} }
} }
</script> </script>

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

@@ -161,7 +161,8 @@ export default {
{ label: 'network.inbound', prop: 'inbound' } { label: 'network.inbound', prop: 'inbound' }
], ],
isNoData: false, isNoData: false,
curTabState: curTabState curTabState: curTabState,
urlChangeParams: {}
} }
}, },
components: { components: {
@@ -259,62 +260,47 @@ export default {
return this.$route.query[param] ? this.$route.query[param] : defaultValue return this.$route.query[param] ? this.$route.query[param] : defaultValue
} }
}, },
drillDownData (key) { async drillDownData (key) {
const value = npmCategoryToAppCategoryMap[key] const value = npmCategoryToAppCategoryMap[key]
const tabType = 'network.applicationCategories' const tabType = 'network.applicationCategories'
// const oldCurTab = this.$store.getters.getNetworkOverviewBeforeTab
const oldCurTab = this.getUrlParam(this.curTabState.networkOverviewBeforeTab, '') const oldCurTab = this.getUrlParam(this.curTabState.networkOverviewBeforeTab, '')
// const curTable = networkTable.networkOverview
const curTable = networkTable.networkAppPerformance const curTable = networkTable.networkAppPerformance
// const list = this.$store.getters.getNetworkOverviewTabList
const tableType = this.$route.params ? this.$route.params.typeName : 'networkOverview' const tableType = this.$route.params ? this.$route.params.typeName : 'networkOverview'
const metric = this.getUrlParam(this.curTabState.tableMetric, 'Bits/s') 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) const tabGroup = list.filter(item => item.label === tabType)
if (tabGroup && tabGroup.length > 0) { if (tabGroup && tabGroup.length > 0) {
// this.$store.commit('setNetworkOverviewBeforeTab', tabGroup[0]) this.urlChangeParams[this.curTabState.networkOverviewBeforeTab] = tabGroup[0].prop
this.changeUrlTabState(this.curTabState.networkOverviewBeforeTab, tabGroup[0].prop)
} }
// this.$store.commit('setTabOperationBeforeType', this.$store.getters.getTabOperationType) this.urlChangeParams[this.curTabState.tabOperationBeforeType] = this.getUrlParam(this.curTabState.tabOperationType, '', true)
// this.$store.commit('setTabOperationType', operationType.fourthMenu) this.urlChangeParams[this.curTabState.tabOperationType] = operationType.fourthMenu
this.changeUrlTabState(this.curTabState.tabOperationBeforeType, this.getUrlParam(this.curTabState.tabOperationType, '', true))
this.changeUrlTabState(this.curTabState.tabOperationType, operationType.fourthMenu)
const queryCondition = [] const queryCondition = []
const searchProps = tabGroup[0].dillDownProp const searchProps = tabGroup[0].dillDownProp
searchProps.forEach(item => { searchProps.forEach(item => {
queryCondition.push(item + "='" + value + "'") queryCondition.push(item + "='" + value + "'")
}) })
// this.$store.commit('setQueryCondition', queryCondition.join(' OR ')) this.urlChangeParams[this.curTabState.queryCondition] = queryCondition.join(' OR ')
this.changeUrlTabState(this.curTabState.queryCondition, queryCondition.join(' OR '))
this.$store.getters.menuList.forEach(menu => { this.$store.getters.menuList.forEach(menu => {
if (this.$_.isEmpty(menu.children) && menu.route) { if (this.$_.isEmpty(menu.children) && menu.route) {
if (this.$route.path === menu.route) { if (this.$route.path === menu.route) {
menu.columnName = tabType menu.columnName = tabType
menu.columnValue = value menu.columnValue = value
// this.$store.commit('setPanelName', value) this.urlChangeParams[this.curTabState.panelName] = value
this.changeUrlTabState(this.curTabState.panelName, value) this.urlChangeParams[this.curTabState.thirdMenu] = tabType
// this.$store.commit('setBreadcrumbColumnName', tabType) this.urlChangeParams[this.curTabState.dimensionType] = tabGroup[0] ? tabGroup[0].prop : ''
this.changeUrlTabState(this.curTabState.thirdMenu, tabType) this.urlChangeParams[this.curTabState.fourthMenu] = value
// 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)
} }
} else if (!this.$_.isEmpty(menu.children)) { } else if (!this.$_.isEmpty(menu.children)) {
menu.children.forEach(child => { menu.children.forEach(child => {
if (this.$route.path === child.route) { if (this.$route.path === child.route) {
child.columnName = tabType child.columnName = tabType
child.columnValue = value child.columnValue = value
// this.$store.commit('setPanelName', value) this.urlChangeParams[this.curTabState.panelName] = value
this.changeUrlTabState(this.curTabState.panelName, value) this.urlChangeParams[this.curTabState.thirdMenu] = tabType
// this.$store.commit('setBreadcrumbColumnName', tabType) this.urlChangeParams[this.curTabState.dimensionType] = tabGroup[0] ? tabGroup[0].prop : ''
this.changeUrlTabState(this.curTabState.thirdMenu, tabType) this.urlChangeParams[this.curTabState.fourthMenu] = value
// 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)
} }
}) })
} }
@@ -333,8 +319,9 @@ export default {
const tabObjGroup = list.filter(item => item.checked) const tabObjGroup = list.filter(item => item.checked)
if (tabObjGroup && tabObjGroup.length > 0) { if (tabObjGroup && tabObjGroup.length > 0) {
const curTab = tabObjGroup[0] const curTab = tabObjGroup[0]
this.changeUrlTabState(this.curTabState.curTab, curTab) this.urlChangeParams[this.curTabState.curTab] = curTab
} }
this.changeUrlTabState()
this.$router.push({ this.$router.push({
query: { query: {
...this.$route.query, ...this.$route.query,
@@ -343,13 +330,13 @@ export default {
} }
}) })
}, },
// tab改变 changeUrlTabState () {
changeUrlTabState (param, value) { if (this.urlChangeParams && JSON.stringify(this.urlChangeParams) !== '{}') {
const { query } = this.$route const { query } = this.$route
const newQuery = {} const newUrl = urlParamsHandler(window.location.href, query, this.urlChangeParams)
newQuery[param] = value overwriteUrl(newUrl)
const newUrl = urlParamsHandler(window.location.href, query, newQuery) }
overwriteUrl(newUrl) this.urlChangeParams = {}
} }
}, },
mounted () { mounted () {