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-09-23 19:01:30 +08:00
parent af2bf4c96a
commit e1d75bdeff
8 changed files with 795 additions and 358 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -183,7 +183,7 @@ import { get, put } from '@/utils/http'
import { entityType, storageKey, networkOverviewTabList, operationType, networkOverviewSearchUrl, curTabState } from '@/utils/constants'
import { api } from '@/utils/api'
import { ref } from 'vue'
import { urlParamsHandler, overwriteUrl } from '@/utils/tools'
import { urlParamsHandler, overwriteUrl, getUserDrilldownTableConfig } from '@/utils/tools'
import { getNowTime, getSecond } from '@/utils/date-util'
export default {
@@ -499,7 +499,10 @@ export default {
this.changeUrlTabState(this.curTabState.fourthMenu, '')
// this.$store.commit('setPanelName', columnName)
this.changeUrlTabState(this.curTabState.panelName, columnName)
const tabList = this.$store.getters.getNetworkOverviewTabList
const tableType = this.$route.params ? this.$route.params.typeName : 'networkOverview'
const metric = this.getUrlParam(this.curTabState.tableMetric, 'Bits/s')
// const tabList = this.$store.getters.getNetworkOverviewTabList
const tabList = getUserDrilldownTableConfig(tableType, metric)
const curTab = tabList.filter(item => item.label === columnName)[0]
this.changeUrlTabState(this.curTabState.curTab, curTab)
// this.$store.commit('setDimensionType', curTab ? curTab.prop : '')
@@ -513,6 +516,8 @@ export default {
child.columnValue = ''
// this.$store.commit('setBreadcrumbColumnValue', '')
// 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', '')

10
src/utils/constants.js
View File

@@ -31,6 +31,7 @@ export const storageKey = {
echartLabelFontSize: 'echartLabelFontSize',
tokenExpireCurrentPath: 'token-expire-current-path',
drillDownTableConfig: 'cn-drill-down-table-config',
userCustomizationConfig: 'userCustomizationConfig'
linkInfo: 'cn-link-info'
}
export const largeCountryList = ['CN', 'US', 'RU', 'AU', 'CA', 'KZ', 'IN', 'BR']
@@ -252,6 +253,8 @@ export const curTabState = {
panelName: 'panelName',
thirdMenu: 'thirdMenu',
fourthMenu: 'fourthMenu',
thirdPanel: 'thirdPanel',
fourthPanel: 'fourthPanel',
networkOverviewBeforeTab: 'networkOverviewBeforeTab',
tabOperationType: 'tabOperationType',
tabOperationBeforeType: 'tabOperationBeforeType'
@@ -676,9 +679,6 @@ export const sessionsColumnNameGroup = {
export const bytesCycleColumnNameGroup = {
total: 'bytesRate'
}
export const bytesCycleColumnNameGroupForNmp = {
through: 'throughBitsRate'
}
export const packetsCycleColumnNameGroup = {
total: 'packetsRate'
}
@@ -686,6 +686,10 @@ export const sessionsCycleColumnNameGroup = {
total: 'sessionsRate'
}
export const bytesCycleColumnNameGroupForNmp = {
through: 'throughBitsRate'
}
// 不同表格类型对应的相关数据
export const networkTable = {
networkOverview: {

70
src/utils/tools.js
View File

@@ -1,7 +1,7 @@
import { ElMessageBox, ElMessage } from 'element-plus'
import i18n from '@/i18n'
import _ from 'lodash'
import { storageKey, iso36112, topDomain, echartsFontSize, dbGeoDataTableName } from '@/utils/constants'
import { storageKey, iso36112, topDomain, echartsFontSize, dbGeoDataTableName, networkTable } from '@/utils/constants'
import { getIso36112JsonData } from '@/utils/api'
import { format } from 'echarts'
import router from '@/router'
@@ -846,6 +846,74 @@ export function changeTabState (param, value) {
})
}
export function combineTabList (tableType, list, commonTabList) {
const curTableInCode = networkTable[tableType] ? networkTable[tableType] : networkTable.networkOverview
const listInCode = curTableInCode ? curTableInCode.tabList : []
list.forEach(tab => {
// 配置的内容
const commonTab = commonTabList.find(item => item.name === tab.name)
tab.label = commonTab ? commonTab.i18n : ''
tab.prop = commonTab ? commonTab.prop : ''
if (!tab.hasOwnProperty('checked')) {
tab.checked = tab ? tab.show : true
}
if (!tab.hasOwnProperty('disabled')) {
tab.disabled = tab ? !tab.enable : false
}
if (!tab.hasOwnProperty('panelId')) {
tab.panelId = tab ? tab.panelIdOfFourthMenu : null
}
// 代码里写死的
const tabInCode = listInCode ? listInCode.find(item => item.label === tab.label) : {}
tab.queryCycleTotalProp = tabInCode ? tabInCode.queryCycleTotalProp : null
tab.dillDownProp = tabInCode ? tabInCode.dillDownProp : []
})
}
export function setUserConfig () {
const userTableConfig = this.getUserLocalConfig()
if (userTableConfig) {
const newTabConfigs = []
userTableConfig.tabConfig.forEach(tab => {
const tabConfig = this.list.find(item => item.name === tab.name)
if (tabConfig) {
tabConfig.checked = tab ? tab.checked : true
} else {
tabConfig.checked = true
}
newTabConfigs.push(tabConfig)
})
this.list = newTabConfigs
}
}
export function getUserDrilldownTableConfig (tableType, curMetric) {
let list = []
const defaultDrillDownTableConfigs = JSON.parse(localStorage.getItem(storageKey.drillDownTableConfig))// 所有表格的配置
const currentTableConfig = defaultDrillDownTableConfigs.find(config => config.route === tableType)
const commonTabList = currentTableConfig ? currentTableConfig.tabs : []
const tables = currentTableConfig ? currentTableConfig.tables : []
if (tables && tables.length > 0) {
const curTableOldConfig = tables.find(table => table.id === tableType)
const curTable = curTableOldConfig || null
if (curTable) {
if (curTable.hasMetricSearch) { // 有metric
const metricsList = curTable ? curTable.metrics : []
if (metricsList && metricsList.length > 0) {
const metricTab = metricsList.find(metric => metric.name === curMetric)
list = metricTab ? metricTab.tabs : []
}
} else { // 无metric
list = curTable ? curTable.tabs : []
}
combineTabList(tableType, list, commonTabList)
// this.combineColumnList(this.customTableTitles)
// this.setUserConfig(list)
}
}
return list
}
// cleanOldParams: true|false，是否清除oldParams
export function urlParamsHandler (url, oldParams, newParams, cleanOldParams) {
let newUrl = url.split('?')[0]

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

@@ -246,7 +246,7 @@ export default {
} else {
return this.$route.query[param] ? this.$route.query[param] : defaultValue
}
},
}
}
}
</script>

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

@@ -132,7 +132,7 @@ import { get, put } from '@/utils/http'
import { api } from '@/utils/api'
import _ from 'lodash'
import { getSecond } from '@/utils/date-util'
import { getChainRatio, overwriteUrl, urlParamsHandler } from '@/utils/tools'
import { getChainRatio, overwriteUrl, urlParamsHandler, getUserDrilldownTableConfig } from '@/utils/tools'
import loading from '@/components/common/Loading'
import ChartNoData from '@/views/charts/charts/ChartNoData'
import { appStackedLineTooltipFormatter } from '@/views/charts/charts/tools'
@@ -333,7 +333,10 @@ export default {
// const oldCurTab = this.$store.getters.getNetworkOverviewBeforeTab
const oldCurTab = this.getUrlParam(this.curTabState.networkOverviewBeforeTab, '')
const curTable = networkTable.networkOverview
const list = this.$store.getters.getNetworkOverviewTabList
// 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 tabGroup = list.filter(item => item.label === tabType)
if (tabGroup && tabGroup.length > 0) {
// this.$store.commit('setNetworkOverviewBeforeTab', tabGroup[0])

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

@@ -143,9 +143,8 @@
</el-tab-pane>
<el-tab-pane :label="$t('network.metric')" name="metrics" width="50%" >
<transition-group name="dragMetric" class="list" tag="ul" ref="metric">
<template v-for="(item, index) in customTableTitles">
<li v-if="item.tabColumn != true"
:key="item.label"
<template v-for="(item, index) in customTableTitles" :key="item.label">
<li v-if="index>0"
class="list-item"
@dragenter="dragMetricEnter($event, index)"
@dragover="dragMetricOver($event, index)"
@@ -154,7 +153,7 @@
>
<i class="cn-icon-sort cn-icon icon-drag"
:key="item.label"
></i> <el-checkbox @change="metricChange" v-model="item.checked" :label="$t(item.label) " size="small" :key="item.label"/>
></i> <el-checkbox @change="metricChange" :disabled="item.disabled" v-model="item.checked" :label="$t(item.label) " size="small" :key="item.label"/>
</li>
</template>
</transition-group>
@@ -169,7 +168,7 @@
</template>
<script>
import { ref } from 'vue'
import { operationType, unitTypes, networkTable, tableColumnType, networkDefaultLimit, curTabState } from '@/utils/constants'
import { operationType, unitTypes, networkTable, tableColumnType, networkDefaultLimit, curTabState, storageKey } from '@/utils/constants'
import { get } from '@/utils/http'
import unitConvert from '@/utils/unit-convert'
import { getChainRatio, computeScore, urlParamsHandler, overwriteUrl } from '@/utils/tools'
@@ -205,8 +204,12 @@ export default {
label: 'Sessions/s'
}
],
customTableTitlesForTab: [],
customTableTitles: [],
commonTabList: [],
commonColumnList: [],
list: [], // 当前状态列表
allList: [], // 包含2级标签的所有状态的列表
networkTabList: [], // 原始状态列表
showBackground: false,
tableData: [],
@@ -215,11 +218,13 @@ export default {
showCustomizeTabs: true,
columnNameGroup: {},
cycleColumnNameGroup: {},
metricUnit: 'bytes',
// metricUnit: 'bytes',
// loading: false,
tableColumnType: tableColumnType,
metricsList: [],
curTabState: curTabState,
curTable: {}, // 当前的表格类型
curTableInCode: {}, // 代码中的配置
tableType: '',
hasMetricSearch: true,
activeTab: '',
@@ -249,16 +254,37 @@ export default {
}
}
}, */
list: {
deep: true,
handler (n) {
if (this.hasMetricSearch) {
if (this.metricsList && this.metricsList.length > 0) {
this.metricsList.forEach(metric => {
if (metric.name != this.metric) {
// metric.tabs = this.list
metric.tabs.forEach(metricTabItem => {
const newConfig = this.list.find(item => item.name === metricTabItem.name)
// metricTabItem.show = newConfig?newConfig.checked:true
// metricTabItem.checked = newConfig?newConfig.checked:true
})
}
})
}
}
}
},
timeFilter: {
deep: true,
handler (n) {
console.log('watch')
const curTab = this.getCurTab()
let queryParams = {
orderBy: this.orderBy,
limit: networkDefaultLimit,
type: curTab.prop
}
const condition = this.$store.getters.getQueryCondition
// const condition = this.$store.getters.getQueryCondition
const condition = this.getQueryCondition()
if (condition) {
queryParams = {
orderBy: this.orderBy,
@@ -273,6 +299,7 @@ export default {
},
computed: {
tableClass () {
console.log('computed')
let className
if (this.showRecordNum >= 10) {
className = 'tab-table__average'
@@ -302,6 +329,9 @@ export default {
if (response.code === 200) {
this.chartData = response.data.result
this.initData()
} else {
this.isNoData = true
this.toggleLoading(false)
}
})
} catch (e) {
@@ -327,23 +357,37 @@ export default {
this.index = 0
}
},
isThirdMenu () { // 当前是否为3级
const thirdMenu = this.getUrlParam(this.curTabState.thirdMenu, '')
const fourthMenu = this.getUrlParam(this.curTabState.fourthMenu, '')
return thirdMenu && !fourthMenu
},
isFourthMenu () { // 当前是否为4级
const thirdMenu = this.getUrlParam(this.curTabState.thirdMenu, '')
const fourthMenu = this.getUrlParam(this.curTabState.fourthMenu, '')
return thirdMenu && fourthMenu
},
initState () {
let curTab = this.getCurTab()
// 没有选中任何tab时，默认选中第一个
const tabList = this.list.filter(item => item.checked === true)
if (tabList.length === 0) {
this.list[0].checked = true
this.showTab(this.list[0])
} else {
//this.showTab(tabList[0])
if (curTab) { // 显示当前tab
let realTab = this.list.find(item => item.label===curTab.label)
const realTab = this.list.find(item => item.label === curTab.label)
if (realTab) {
realTab.checked = true
}
this.showTab(curTab)
}
/*
else {// 没有选中任何tab时，默认选中第一个
const tabList = this.list.filter(item => item.checked === true)
if (tabList.length > 0) {
tabList[0].checked = true
this.showTab(tabList[0])
}else {
this.list[0].checked = true
this.showTab(this.list[0])
}
} */
this.isNoData = false
this.tableData = []
this.tableDataBackup = []
@@ -373,7 +417,6 @@ export default {
})
// 针对network overview – app list 点击标题触发下钻，相关内容处理
// const columnName = this.$store.getters.getBreadcrumbColumnName
const thirdMenu = this.getUrlParam(this.curTabState.thirdMenu, '')
const fourthMenu = this.getUrlParam(this.curTabState.fourthMenu, '')
if (thirdMenu && fourthMenu) {
@@ -382,15 +425,16 @@ export default {
item.checked = false
}
})
this.$store.commit('setNetworkOverviewTabList', this.list)
// this.$store.commit('setNetworkOverviewTabList', this.list)
} else if (thirdMenu && !fourthMenu) {
this.list.forEach(item => {
if (item.label === thirdMenu) {
item.checked = true
}
})
this.$store.commit('setNetworkOverviewTabList', this.list)
// this.$store.commit('setNetworkOverviewTabList', this.list)
}
// 选中的都进行展示
this.list.forEach(item => {
if (item.checked) {
const tabDom = document.getElementById('tab-' + item.label)
@@ -400,11 +444,12 @@ export default {
}
})
if (this.metric === 'Sessions/s') {
if (this.hasMetricSearch && this.metric === 'Sessions/s') {
this.columnNameGroup = this.curTable.sessionsColumnNameGroup
this.cycleColumnNameGroup = this.curTable.sessionsCycleColumnNameGroup
this.orderBy = 'sessions'
this.metricUnit = 'sessions'
/*
let totalChecked = true
this.customTableTitles.forEach(item => {
if (item.prop === 'total') {
@@ -415,49 +460,52 @@ export default {
this.customTableTitles = [
{ label:curTab.label, prop: 'tab', checked: true, tabColumn: true, columnType: this.curTable.column[0].columnType },
{ label: 'network.total', prop: 'total', checked: totalChecked, tabColumn: false, columnType: this.curTable.column[1].columnType, cycleDataUrl: totalColumn ? totalColumn.cycleDataUrl : '', isInMainUrl: true }
]
] */
}
//const curOperationType = this.$store.getters.getTabOperationType
//const beforeOperationType = this.$store.getters.getTabOperationBeforeType
// this.showCustomizeTabs = true
// this.setShowNum(10)
const curOperationType = this.getUrlParam(this.curTabState.tabOperationType, '', true)
const beforeOperationType = this.getUrlParam(this.curTabState.tabOperationBeforeType, '', true)
if (curOperationType === operationType.changeTab) { // 切换tab
if (curTab) { // tab切换
if (this.isFourthMenu()) { // 点击的为第四级菜单
curTab = this.getCurTab()
if (curTab) {
this.showTab(curTab)
this.changeUrlTabState(this.curTabState.curTab, curTab.prop)// curTab改变了，所有要更新
}
this.showCustomizeTabs = true
this.setShowNum(10)
} else if (curOperationType === operationType.thirdMenu) { // 点击的为第三级菜单
// this.setShowNum(10)
} else if (this.isThirdMenu()) { // 点击的为第三级菜单
// const name = this.$store.getters.getBreadcrumbColumnName
const name = this.getUrlParam(this.curTabState.thirdMenu, '')
const networkTabList = []
// const networkTabList = []
this.list.forEach(item => {
if (item.label === name) {
item.checked = true
}
networkTabList.push(item)
// networkTabList.push(item)
})
this.$store.commit('setNetworkOverviewTabList', networkTabList)
// this.$store.commit('setNetworkOverviewTabList', networkTabList)
const breadcrumbColumnTab = this.list.find(item => item.label === name)
this.changeUrlTabState(this.curTabState.curTab, breadcrumbColumnTab.prop)
this.hideTabs(breadcrumbColumnTab)
this.customTableTitles[0].label = breadcrumbColumnTab.label
// this.customTableTitles[0].label = breadcrumbColumnTab.label
this.combineColumnList(breadcrumbColumnTab.columns)
this.setUserConfig()
this.showCustomizeTabs = false
// this.showRecordNum = 10
this.setShowNum(10)
} else if (curOperationType === operationType.fourthMenu) { // 点击的为第四级菜单
curTab = this.getDefaultTab()
if (curTab) {
this.showTab(curTab)
this.changeUrlTabState(this.curTabState.curTab, curTab.prop)
}
// this.setShowNum(10)
} else if (curOperationType === operationType.changeTab) { // 切换tab
// if (curTab) { // tab切换
// this.showTab(curTab)//???????
// }
this.showCustomizeTabs = true
this.setShowNum(10)
// this.setShowNum(10)
} else if (curOperationType === operationType.secondMenu || curOperationType === operationType.mainMenu) { // 点击的为第二级菜单、或者点击菜单进入、
this.list = this.$_.cloneDeep(this.curTable.tabList)
this.$store.commit('setNetworkOverviewTabList', this.list)
// this.list = this.$_.cloneDeep(this.curTable.tabList)
this.list = this.$_.cloneDeep(this.allList)
this.setUserConfig()
// this.$store.commit('setNetworkOverviewTabList', this.list)
if (curTab) {
this.showTab(curTab)
this.changeUrlTabState(this.curTabState.curTab, curTab.prop)
@@ -477,24 +525,32 @@ export default {
this.$nextTick(() => {
this.hideTabs(item)
})
this.customTableTitles[0].label = item.label
// this.customTableTitles[0].label = item.label
this.combineColumnList(item.columns)
this.setUserConfig()
}
})
this.activeTab = ''
}
this.list = Object.assign({}, this.list)
this.$store.commit('setNetworkOverviewTabList', this.list)
// this.$store.commit('setNetworkOverviewTabList', this.list)
this.showCustomizeTabs = true
} else if (curOperationType === operationType.changeMetric) { // 切换metric
if (beforeOperationType === operationType.thirdMenu) {
// if (beforeOperationType === operationType.thirdMenu) {
if (this.isThirdMenu()) {
this.hideTabs(curTab)
this.customTableTitles[0].label = curTab.label
// this.customTableTitles[0].label = curTab.label
this.combineColumnList(curTab.columns)
this.setUserConfig()
this.showCustomizeTabs = false
}
} else if (curOperationType === operationType.customize) { // customize
if (beforeOperationType === operationType.thirdMenu) {
// if (beforeOperationType === operationType.thirdMenu) {
if (this.isThirdMenu()) {
this.hideTabs(curTab)
this.customTableTitles[0].label = curTab.label
// this.customTableTitles[0].label = curTab.label
this.combineColumnList(curTab.columns)
this.setUserConfig()
this.showCustomizeTabs = false
} else {
this.$nextTick(() => {
@@ -552,6 +608,7 @@ export default {
}
const self = this
if (this.customTableTitles) {
this.customTableTitles.forEach(tableColumn => {
if (tableColumn.columnType === tableColumnType.chainRatio && tableColumn.isInMainUrl && tableDataTmp && tableDataTmp.length > 0) {
get(self.gerCycleUrl(), queryParams).then(response => {
@@ -712,13 +769,14 @@ export default {
})
}
})
}
},
showMore () {
this.setShowNum(50)
this.sortChange(this.column, this.index)// 当前选中的tab？？？？
},
setShowNum (num) {
this.showRecordNum = num
this.showRecordNum = Number(num)
this.changeUrlTabState(curTabState.tableShowMore, this.showRecordNum)
},
rowClass (row, column, rowIndex, columnIndex) {
@@ -845,29 +903,42 @@ export default {
changeMetric () {
this.tableData = []
this.tableDataBackup = []
// this.showRecordNum = 10
this.setShowNum(10)
//const beforeType = this.$store.getters.getTabOperationBeforeType
const beforeType = this.getUrlParam(this.curTabState.tabOperationBeforeType, '', true)
// if (beforeType != operationType.thirdMenu) {
if (beforeType != operationType.thirdMenu) {
//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.changeUrlTabState(this.curTabState.tabOperationType, operationType.changeMetric)
const curTab = this.getCurTab()
const label = curTab.label
this.changeUrlTabState(this.curTabState.tableMetric, this.metric)
// 1:先根据metric获得tabs，再根据当前tab，获得columns，再进行数据组装？？？
if (this.metricsList && this.metricsList.length > 0) {
const metricTab = this.metricsList.find(metric => metric.name === this.metric)
this.list = metricTab ? metricTab.tabs : []
this.networkTabList = metricTab ? metricTab.tabs : []
this.combineTabList()
// this.allList = this.$_.cloneDeep(this.list)//备份所有配置，下钻及返回时使用
this.customTableTitles = this.list ? this.list[0].columns : []// 需要获得当前tab的列:默认第一个tab的列
this.combineColumnList(this.customTableTitles)
this.setUserConfig()
}
if (this.metric === 'Bits/s') {
this.columnNameGroup = this.curTable.bytesColumnNameGroup
this.cycleColumnNameGroup = this.curTable.bytesCycleColumnNameGroup
this.orderBy = 'bytesTotal'
this.metricUnit = 'bytes'
/*
const titleGroup = []
if (this.customTableTitles.length === 2) {
this.curTable.column.forEach((item, index) => {
//this.curTable.column.forEach((item, index) => {
this.curTable.columns.forEach((item, index) => {
if (item.tabColumn) {
item.label = label
//item.label = label
}
if (index === 1) {
item.checked = this.customTableTitles[1].checked
@@ -877,20 +948,21 @@ export default {
} else {
this.customTableTitles.forEach(item => {
if (item.tabColumn) {
item.label = label
//item.label = label
}
titleGroup.push(item)
})
}
this.customTableTitles = titleGroup
this.customTableTitles = titleGroup */
} else if (this.metric === 'Packets/s') {
this.columnNameGroup = this.curTable.packetsColumnNameGroup
this.cycleColumnNameGroup = this.curTable.packetsCycleColumnNameGroup
this.orderBy = 'packetsTotal'
this.metricUnit = 'packets'
/*
const titleGroup = []
if (this.customTableTitles.length === 2) {
this.curTable.column.forEach((item, index) => {
this.curTable.columns.forEach((item, index) => {
if (item.tabColumn) {
item.label = label
}
@@ -908,11 +980,13 @@ export default {
})
}
this.customTableTitles = titleGroup
*/
} else if (this.metric === 'Sessions/s') {
this.columnNameGroup = this.curTable.sessionsColumnNameGroup
this.cycleColumnNameGroup = this.curTable.sessionsCycleColumnNameGroup
this.orderBy = 'sessions'
this.metricUnit = 'sessions'
/*
let totalChecked = true
this.customTableTitles.forEach(item => {
if (item.prop === 'total') {
@@ -924,6 +998,7 @@ export default {
{ label: label, prop: 'tab', checked: true, tabColumn: true, columnType: this.curTable.column[0].columnType },
{ label: 'network.total', prop: 'total', checked: totalChecked, tabColumn: false, columnType: this.curTable.column[1].columnType, cycleDataUrl: totalColumn ? totalColumn.cycleDataUrl : '', isInMainUrl: true }
]
*/
}
let queryParams = {
orderBy: this.orderBy,
@@ -964,20 +1039,7 @@ export default {
}
}
})
this.$store.commit('setNetworkOverviewTabList', this.list)
}
},
getDefaultTab () {
let curTab = this.getCurTab()
if(curTab){
return curTab
} else {
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]
}
// this.$store.commit('setNetworkOverviewTabList', this.list)
}
},
// 隐藏tabs的标题
@@ -1008,13 +1070,18 @@ export default {
},
// 激活tab修改的内容：第一列的列名，list中此tab为checked=true
showTab (curTab) {
if (curTab) {
this.activeTab = ref(curTab.label)
this.customTableTitles[0].label = curTab.label
// this.customTableTitles[0].label = curTab.label
this.combineColumnList(curTab.columns)
this.setUserConfig()
}
},
tabChange (index) {
this.isNoData = false
// 操作类型设置
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.changeUrlTabState(this.curTabState.tabOperationBeforeType, this.getUrlParam(this.curTabState.tabOperationType, '', true))
@@ -1041,9 +1108,25 @@ export default {
}
}
})
this.$store.commit('setNetworkOverviewTabList', this.list)
// this.$store.commit('setNetworkOverviewTabList', this.list)
}
// 如果有metric切换，则需要更新其它metric的tabs
if (this.hasMetricSearch) {
if (this.metricsList && this.metricsList.length > 0) {
this.metricsList.forEach(metric => {
if (metric.name != this.metric) {
// metric.tabs = this.list
metric.tabs.forEach(metricTabItem => {
const newConfig = this.list.find(item => item.name === metricTabItem.name)
metricTabItem.show = newConfig ? newConfig.checked : true
metricTabItem.checked = newConfig ? newConfig.checked : true
})
}
})
}
}
this.saveUserLocalConfig()
// 如果取消tab，则如果取消的是当前选中的tab，则当前tab就需要修改为第一个默认的tab，否则不用
const curTab = this.getCurTab()
if (!handleTab.checked && handleTab.label === curTab.label) {
@@ -1170,7 +1253,7 @@ export default {
item.checked = true
}
})
this.$store.commit('setNetworkOverviewTabList', this.list)
// this.$store.commit('setNetworkOverviewTabList', this.list)
// this.handleSearchParams(columnValue)
const curTab = this.getFirstCheckedTab()
@@ -1206,6 +1289,7 @@ export default {
}
},
metricChange () {
this.saveUserLocalConfig()
},
dragstart (index) {
this.dragIndex = index
@@ -1270,8 +1354,14 @@ export default {
// 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
// this.customTableTitles[0].label = tab.paneName
const clickTab = this.list.filter(item => item.label == tab.paneName)
if (clickTab.columns) {
this.combineColumnList(clickTab.columns)
this.setUserConfig()
}
this.saveUserLocalConfig()
const tabObjGroup = this.list.filter(item => item.label == tab.paneName)
if (tabObjGroup && tabObjGroup.length > 0) {
const curTab = tabObjGroup[0]
@@ -1326,21 +1416,16 @@ export default {
return tableColumn.cycleDataUrl
}
},
/*
getTabList(){
let tabList = this.$store.getters.getNetworkOverviewTabList
if (!tabList || tabList.length === 0) {
tabList = this.$_.cloneDeep(this.networkTabList)
}
return tabList
}, */
handleQueryParams (extraParams) {
let queryType = ''
const thirdMenu = this.getUrlParam(this.curTabState.thirdMenu, '')
const fourthMenu = this.getUrlParam(this.curTabState.fourthMenu, '')
// const name = this.$store.getters.getBreadcrumbColumnName
const name = this.getUrlParam(this.curTabState.thirdMenu, '')
// const curOperationType = this.$store.getters.getTabOperationType
const curOperationType = this.getUrlParam(this.curTabState.tabOperationType, '', true)
if (curOperationType === operationType.fourthMenu) { // 点击的为第四级菜单
// if (curOperationType === operationType.fourthMenu) { // 点击的为第四级菜单
if (this.isFourthMenu()) { // 点击的为第四级菜单
const curTab = this.getCurTab()
if (curTab) {
queryType = curTab.prop
@@ -1348,25 +1433,31 @@ export default {
const checkedTab = this.list.find(item => item.checked)
queryType = checkedTab ? checkedTab.prop : ''
}
} else if (curOperationType === operationType.thirdMenu) { // 点击的为第三级菜单
} else if (this.isThirdMenu()) { // 点击的为第三级菜单
const breadcrumbTab = this.list.find(item => item.label === name)
queryType = breadcrumbTab ? breadcrumbTab.prop : ''
} else if (curOperationType === operationType.changeTab) { // 切换tab
const curTab = this.getCurTab()
if (curTab) {
queryType = curTab.prop
}
} else if (curOperationType === operationType.secondMenu || curOperationType === operationType.mainMenu) { // 点击第二级菜单，点击菜单
this.list = this.$_.cloneDeep(this.curTable.tabList)
this.$store.commit('setNetworkOverviewTabList', this.list)
this.list = this.$_.cloneDeep(this.allList)
this.setUserConfig()
const curTab = this.getCurTab()
if (curTab) {
queryType = curTab.prop
}
} else {
const curTab = this.getCurTab()
if (curTab) {
queryType = curTab.prop
}
}
if (JSON.stringify(extraParams) === '{}') {
extraParams = {
type: queryType || this.networkTabList[0].prop,
type: queryType,
orderBy: this.orderBy ? this.orderBy : 'bytesTotal',
limit: networkDefaultLimit
}
@@ -1413,7 +1504,7 @@ export default {
return this.$route.query[param] ? this.$route.query[param] : defaultValue
}
},
// 获取当前tab
// 获取当前tab:url中的curTab，如果url中curTab为空，则从list中取第一个checked为true的tab，如果list里没有checked为true的，就选第一个tab，并更新url
getCurTab () {
const curTabProp = this.$route.query.curTab ? this.$route.query.curTab : null
let curTab = curTabProp ? this.list.find(item => item.prop === curTabProp) : null
@@ -1421,11 +1512,16 @@ export default {
if (!curTab) {
const tabObjGroup = this.list.filter(item => item.checked)
if (tabObjGroup && tabObjGroup.length > 0) {
tabObjGroup[0].checked = true
curTab = tabObjGroup[0]
} else {
curTab = this.networkTabList[0]
}
this.changeUrlTabState(this.curTabState.curTab, curTab.prop)
} else {
if (this.list && this.list.length > 0) {
this.list[0].checked = true
curTab = this.list[0]
this.changeUrlTabState(this.curTabState.curTab, curTab.prop)
}
}
} else {
this.list.forEach(item => {
if (item.label === curTab.label) {
@@ -1433,36 +1529,282 @@ export default {
// this.showTab(curTab)
}
})
this.$store.commit('setNetworkOverviewTabList', this.list)
// this.$store.commit('setNetworkOverviewTabList', this.list)
}
return curTab
},
combineTabList () {
const listInCode = this.curTableInCode ? this.curTableInCode.tabList : []
// let userTableConfig = this.getUserLocalConfig()
this.list.forEach(tab => {
// 配置的内容
const commonTab = this.commonTabList.find(item => item.name === tab.name)
tab.label = commonTab ? commonTab.i18n : ''
tab.prop = commonTab ? commonTab.prop : ''
if (!tab.hasOwnProperty('checked')) {
tab.checked = tab ? tab.show : true
}
if (!tab.hasOwnProperty('disabled')) {
tab.disabled = tab ? !tab.enable : false
}
if (!tab.hasOwnProperty('panelId')) {
tab.panelId = tab ? tab.panelIdOfFourthMenu : null
}
// 代码里写死的
const tabInCode = listInCode ? listInCode.find(item => item.label === tab.label) : {}
tab.queryCycleTotalProp = tabInCode ? tabInCode.queryCycleTotalProp : null
tab.dillDownProp = tabInCode ? tabInCode.dillDownProp : []
})
// 设置drilldownTabs
const oldList = this.$_.cloneDeep(this.list)
this.list.forEach(tab => {
const drilldownTabFull = []
tab.drilldownTabs.forEach(drilldownTab => {
const drilldownTabName = drilldownTab ? (drilldownTab.name ? drilldownTab.name : drilldownTab) : ''
const fullTab = oldList.find(item => item.name === drilldownTabName)
const commonTab = this.commonTabList.find(item => item.name === drilldownTabName)
fullTab.label = commonTab ? commonTab.i18n : ''
fullTab.prop = commonTab ? commonTab.prop : ''
if (!tab.hasOwnProperty('panelId')) {
fullTab.panelId = tab ? tab.panelIdOfFourthMenu : ''
}
fullTab.show = !(tab.hiddenDrilldownTabs.indexOf(drilldownTabName) >= 0)
fullTab.checked = !(tab.hiddenDrilldownTabs.indexOf(drilldownTabName) >= 0)
fullTab.enable = !(tab.disabledDrilldownTabs.indexOf(drilldownTabName) >= 0)
fullTab.disabled = tab.disabledDrilldownTabs.indexOf(drilldownTabName) >= 0
// 代码里写死的
const tabInCode = listInCode ? listInCode.find(item => item.label === fullTab.label) : {}
fullTab.queryCycleTotalProp = tabInCode ? tabInCode.queryCycleTotalProp : null
fullTab.dillDownProp = tabInCode ? tabInCode.dillDownProp : []
drilldownTabFull.push(fullTab)
})
tab.drilldownTabs = drilldownTabFull
})
console.log(this.list)
},
setUserConfig () {
const userTableConfig = this.getUserLocalConfig()
if (userTableConfig) {
const newTabConfigs = []
userTableConfig.tabConfig.forEach(tab => {
const tabConfig = this.list.find(item => item.name === tab.name)
if (tabConfig) {
tabConfig.checked = tab ? tab.checked : true
} else {
tabConfig.checked = true
}
newTabConfigs.push(tabConfig)
})
this.list = newTabConfigs
const newColumnConfigs = []
userTableConfig.columnConfig.forEach((column, index) => {
if (index === 0) {
newColumnConfigs.push(this.customTableTitles[0])
} else {
const customColumnConfig = this.customTableTitles.find(item => item.name === column.name)
if (customColumnConfig) {
customColumnConfig.checked = column ? column.checked : true
newColumnConfigs.push(customColumnConfig)
}
}
})
this.customTableTitles = newColumnConfigs
/* let cfg = userTableConfig.columnConfig
this.customTableTitles.forEach(item => {
let customColumnConfig = cfg.find(column => item.name===column.name)
if(customColumnConfig){
item.checked = customColumnConfig?customColumnConfig.checked:true
//newColumnConfigs.push(customColumnConfig)
}
}) */
}
},
combineColumnList (list) {
const hiddenColumnList = this.list ? this.list[0].hiddenColumns : []
const disabledColumns = this.list ? this.list[0].disabledColumns : []
const newColumnList = []
if (list && list.length > 0) {
list.forEach(column => {
// let columnName = column
const columnName = column ? (column.name ? column.name : column) : ''
// 配置的内容
const commonColumn = this.commonColumnList.find(item => item.name === columnName)
column = {}
column.name = commonColumn ? commonColumn.name : ''
column.label = commonColumn ? commonColumn.i18n : ''
column.prop = commonColumn ? commonColumn.prop : ''
column.checked = !(hiddenColumnList.indexOf(columnName) >= 0)
column.disabled = disabledColumns.indexOf(columnName) >= 0
column.columnType = commonColumn ? commonColumn.columnType : ''
// 代码里写死的
const listInCode = this.curTableInCode ? this.curTableInCode.column : []
const columnInCode = listInCode ? listInCode.find(item => item.label === column.label) : {}
column.cycleDataUrl = columnInCode ? columnInCode.cycleDataUrl : ''
column.isInMainUrl = columnInCode ? columnInCode.isInMainUrl : false
column.dillDownCycleDataUrl = columnInCode ? columnInCode.dillDownCycleDataUrl : ''
column.cycle = columnInCode ? columnInCode.cycle : 0
column.scoreType = columnInCode ? columnInCode.scoreType : 0
column.isScoreColumn = columnInCode ? columnInCode.isScoreColumn : true
newColumnList.push(column)
})
this.customTableTitles = newColumnList
}
console.log(this.customTableTitles)
},
initConfig () {
},
getUserLocalConfig () {
let config = null
const userCustomizationConfigs = localStorage.getItem(storageKey.userCustomizationConfig)// 所有用户的[{id:1,tabsConfig:{},columnsConfig:{}},{id:2,tabsConfig:{},columnsConfig:{}}]
const userId = localStorage.getItem(storageKey.userId)
if (userCustomizationConfigs) { // 用户自定义配置
const userConfigGroup = JSON.parse(userCustomizationConfigs)
const currentUserConfig = userConfigGroup ? userConfigGroup.find(userConfig => userConfig.userId === userId) : null
const allConfig = currentUserConfig ? currentUserConfig.config : null
if (allConfig) {
config = allConfig.find(config => config.route === this.tableType)
}
}
return config
},
saveUserLocalConfig () {
const columnConfig = []
this.customTableTitles.forEach(item => {
const config = {
name: item.name,
checked: item.checked
}
columnConfig.push(config)
})
const tabConfig = []
this.list.forEach(item => {
const config = {
name: item.name,
checked: item.checked,
columns: columnConfig
}
tabConfig.push(config)
})
const userCustomizationConfigs = localStorage.getItem(storageKey.userCustomizationConfig)
const userConfigGroup = userCustomizationConfigs ? JSON.parse(userCustomizationConfigs) : []
const userId = localStorage.getItem(storageKey.userId)
if (this.getUserLocalConfig()) {
userConfigGroup.forEach(item => {
if (item.userId === userId) {
if (item.config) {
item.config.forEach(config => {
if (config.route === this.tableType) {
config.tabConfig = tabConfig
config.columnConfig = columnConfig
}
})
}
}
})
} else {
if (userConfigGroup && userConfigGroup.length > 0) {
userConfigGroup.forEach(userConfig => {
if (userConfig.userId === userId) {
if (userConfig.config) {
userConfig.config.push({
route: this.tableType,
tabConfig: tabConfig,
columnConfig: columnConfig
})
} else {
userConfig.config = [
{
route: this.tableType,
tabConfig: tabConfig,
columnConfig: columnConfig
}
]
}
}
})
}
const currentUserConfig = userConfigGroup ? userConfigGroup.find(userConfig => userConfig.userId === userId) : null
if (!currentUserConfig) {
const newConfig = {
userId: userId,
config: [
{
route: this.tableType,
tabConfig: tabConfig,
columnConfig: columnConfig
}
]
}
userConfigGroup.push(newConfig)
}
}
console.log(userConfigGroup)
// localStorage.removeItem(storageKey.userCustomizationConfig)
localStorage.setItem(storageKey.userCustomizationConfig, JSON.stringify(userConfigGroup))
}
},
mounted () {
// 表格结构初始化
this.tableType = this.chart.params ? this.chart.params.name : 'networkOverview'// 可以改成根据path得到类型，并获取对应的配置
this.curTable = this.networkTable[this.tableType] ? this.networkTable[this.tableType] : this.networkTable.networkOverview
this.customTableTitles = this.$_.cloneDeep(this.curTable.column)
this.list = this.$_.cloneDeep(this.curTable.tabList)
this.networkTabList = this.curTable.tabList
this.activeTab = ref(this.networkTabList[0].label)
console.log('mounted')
this.tableType = this.$route.params ? this.$route.params.typeName : 'networkOverview'
this.curTableInCode = this.networkTable[this.tableType] ? this.networkTable[this.tableType] : this.networkTable.networkOverview
// 表格状态初始化(url)
this.metric = this.getUrlParam(this.curTabState.tableMetric, 'Bits/s')
this.showRecordNum = Number(this.getUrlParam(this.curTabState.tableShowMore, 10))
this.tableSortColumn = this.getUrlParam(this.curTabState.tableSortColumn, '')
this.tableSortType = this.getUrlParam(this.curTabState.tableSortType, '')
this.tableSortTab = this.getUrlParam(this.curTabState.tableSortTab, '')
// 先从localStorage中获取用户定制的自定义配置，如果没有，则使用默认的自定义配置
// let userTableConfig = this.getUserLocalConfig()
// if (!currentTableConfig) {//未找到当前用户的配置，使用默认配置
const defaultDrillDownTableConfigs = JSON.parse(localStorage.getItem(storageKey.drillDownTableConfig))// 所有表格的配置
const currentTableConfig = defaultDrillDownTableConfigs.find(config => config.route === this.tableType)
// }
this.commonTabList = currentTableConfig ? currentTableConfig.tabs : []
this.commonColumnList = currentTableConfig ? currentTableConfig.columns : []
const tables = currentTableConfig ? currentTableConfig.tables : []
const tableId = this.tableType
if (tables && tables.length > 0) {
const curTableOldConfig = tables.find(table => table.id === tableId)
this.curTable = curTableOldConfig || null
if (this.curTable) {
if (this.curTable.hasMetricSearch) { // 有metric
this.metricsList = this.curTable ? this.curTable.metrics : []
if (this.metricsList && this.metricsList.length > 0) {
const metricTab = this.metricsList.find(metric => metric.name === this.metric)
this.list = metricTab ? metricTab.tabs : []
this.networkTabList = metricTab ? metricTab.tabs : []
}
} else { // 无metric
this.list = this.curTable ? this.curTable.tabs : []
this.networkTabList = this.curTable ? this.curTable.tabs : []
}
this.combineTabList()
this.allList = this.$_.cloneDeep(this.list)// 备份所有配置，下钻及返回时使用
this.customTableTitles = this.list ? this.list[0].columns : []// 需要获得当前tab的列:默认第一个tab的列
this.combineColumnList(this.customTableTitles)
this.activeTab = ref(this.list[0].label)
this.activeCustomize = ref('tabs')
this.networkSearchUrl = this.curTable.url
this.curTable.bytesColumnNameGroup = this.curTableInCode ? this.curTableInCode.bytesColumnNameGroup : []
this.curTable.bytesCycleColumnNameGroup = this.curTableInCode ? this.curTableInCode.bytesCycleColumnNameGroup : []
this.curTable.packetsColumnNameGroup = this.curTableInCode ? this.curTableInCode.packetsColumnNameGroup : []
this.curTable.packetsCycleColumnNameGroup = this.curTableInCode ? this.curTableInCode.packetsCycleColumnNameGroup : []
this.curTable.sessionsColumnNameGroup = this.curTableInCode ? this.curTableInCode.sessionsColumnNameGroup : []
this.curTable.sessionsCycleColumnNameGroup = this.curTableInCode ? this.curTableInCode.sessionsCycleColumnNameGroup : []
this.columnNameGroup = this.curTable.bytesColumnNameGroup
this.cycleColumnNameGroup = this.curTable.bytesCycleColumnNameGroup
// 表格状态初始化
this.metric = this.$route.query[curTabState.tableMetric] ? this.$route.query[curTabState.tableMetric] : 'Bits/s'
this.showRecordNum = this.$route.query[curTabState.tableShowMore] ? Number(this.$route.query[curTabState.tableShowMore]) : 10
this.tableSortColumn = this.$route.query[curTabState.tableSortColumn] ? this.$route.query[curTabState.tableSortColumn] : ''
this.tableSortType = this.$route.query[curTabState.tableSortType] ? this.$route.query[curTabState.tableSortType] : ''
this.tableSortTab = this.$route.query[curTabState.tableSortTab] ? this.$route.query[curTabState.tableSortTab] : ''
if (this.$store.getters.getNetworkOverviewTabList.length > 0) {
this.list = this.$store.getters.getNetworkOverviewTabList
} else {
this.$store.commit('setNetworkOverviewTabList', this.list)
this.setUserConfig()
}
// this.initState()
}
console.log('第一次存储默认配置到localstorage')
this.saveUserLocalConfig()
this.getChartData()
this.$nextTick(() => {
setTimeout(() => {
@@ -1471,10 +1813,15 @@ export default {
})
},
setup (props) {
console.log('setup')
},
unmounted () {
this.isNoData = false
this.$store.commit('setNetworkOverviewTabList', this.list)// 保存状态
// 存储用户的设置
// this.setUserConfig()
this.saveUserLocalConfig()
console.log('退出界面时，将修改的配置存储到localstorage')
console.log('unmounted')
}
}
</script>

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

@@ -134,7 +134,7 @@ import unitConvert from '@/utils/unit-convert'
import { api } from '@/utils/api'
import { getSecond } from '@/utils/date-util'
import { get } from '@/utils/http'
import { getChainRatio, computeScore, changeCurTab, urlParamsHandler, overwriteUrl } from '@/utils/tools'
import { getChainRatio, computeScore, changeCurTab, urlParamsHandler, overwriteUrl, getUserDrilldownTableConfig } from '@/utils/tools'
import chartMixin from '@/views/charts2/chart-mixin'
import ChartNoData from '@/views/charts/charts/ChartNoData'
export default {
@@ -252,6 +252,13 @@ export default {
this.toggleLoading(false)
})
},
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 (key) {
const value = npmCategoryToAppCategoryMap[key]
const tabType = 'network.applicationCategories'
@@ -259,7 +266,10 @@ export default {
const oldCurTab = this.getUrlParam(this.curTabState.networkOverviewBeforeTab, '')
// const curTable = networkTable.networkOverview
const curTable = networkTable.networkAppPerformance
const list = this.$store.getters.getNetworkOverviewTabList
// 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 tabGroup = list.filter(item => item.label === tabType)
if (tabGroup && tabGroup.length > 0) {
// this.$store.commit('setNetworkOverviewBeforeTab', tabGroup[0])