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-30 07:35:09 +08:00
parent 7606f1afca
commit 6b6c5307c8
4 changed files with 422 additions and 469 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -94,7 +94,7 @@
</template>
<el-row type="flex" justify="center" style="width: fit-content;flex-direction: column;">
<ul class="select-dropdown" id="breadcrumbSelectDropdown2">
<li v-for="item in detectionMenuList" title='' :key="item.name" :id="item.name" class="select-dropdown__item" @click="jump(item.path)">
<li v-for="item in detectionMenuList" title='' :key="item.name" :id="item.name" class="select-dropdown__item" @click="jump(item.path,'','',2)">
<span>{{$t(item.i18n)}}</span>
</li>
</ul>
@@ -119,7 +119,7 @@
:show-close="false"
>
<div class="cn-menu__left">
<div class="left-menu" v-for="menu in otherMenu" :key="menu.id" @click="jump(menu.route)">
<div class="left-menu" v-for="menu in otherMenu" :key="menu.id" @click="jump(menu.route,'','',0)">
<i :class="menu.icon"></i>
<span>{{$t(menu.i18n || menu.name)}}</span>
<i class="cn-icon cn-icon-right"></i>
@@ -131,12 +131,12 @@
<div class="middle-menus__body">
<div style="width: 260px;">
<template v-for="(menu, index) in networkAnalyticsMenu.children" :key="index">
<div class="middle-menu" v-if="index < 5" @click="jump(menu.route)">{{$t(menu.i18n || menu.name)}}</div>
<div class="middle-menu" v-if="index < 5" @click="jump(menu.route,'','',2)">{{$t(menu.i18n || menu.name)}}</div>
</template>
</div>
<div>
<template v-for="(menu, index) in networkAnalyticsMenu.children" :key="index">
<div class="middle-menu" v-if="index >= 5 && index < 10" @click="jump(menu.route)">{{$t(menu.i18n || menu.name)}}</div>
<div class="middle-menu" v-if="index >= 5 && index < 10" @click="jump(menu.route,'','',2)">{{$t(menu.i18n || menu.name)}}</div>
</template>
</div>
</div>
@@ -180,11 +180,12 @@
<script>
import { useRoute } from 'vue-router'
import { get, put } from '@/utils/http'
import { entityType, storageKey, networkOverviewTabList, operationType, networkOverviewSearchUrl, curTabState } from '@/utils/constants'
import { entityType, storageKey, networkOverviewTabList, operationType, networkOverviewSearchUrl, curTabState, dbDrilldownTableConfig } from '@/utils/constants'
import { api } from '@/utils/api'
import { ref } from 'vue'
import { urlParamsHandler, overwriteUrl, getUserDrilldownTableConfig } from '@/utils/tools'
import { urlParamsHandler, overwriteUrl, combineTabList, getTabList, getDefaultCurTab } from '@/utils/tools'
import { getNowTime, getSecond } from '@/utils/date-util'
import { db } from '@/indexedDB'
export default {
name: 'Header',
@@ -458,20 +459,64 @@ export default {
const newUrl = urlParamsHandler(window.location.href, query, newQuery)
overwriteUrl(newUrl)
},
jump (route, columnName, columnValue, opeType) {
async handleCurDrilldownTableConfig (thirdMenu, fourthMenu) {
console.log('handleCurDrilldownTableConfig--------------')
const userId = localStorage.getItem(storageKey.userId)
const tableType = this.$route.params ? this.$route.params.typeName : 'networkOverview'
// 先从localStorage中获取用户定制的自定义配置，如果没有，则使用默认的自定义配置
const userLocalCongfig = await db[dbDrilldownTableConfig].get({ id: userId })
let drillDownTableConfigs = []
if (userLocalCongfig) {
drillDownTableConfigs = userLocalCongfig.config
}
if (!drillDownTableConfigs || drillDownTableConfigs.length === 0) { // 未找到当前用户的配置，使用默认配置
console.log('default..............')
const defaultCongfig = await db[dbDrilldownTableConfig].get({ id: 'default' })
if (defaultCongfig) {
drillDownTableConfigs = defaultCongfig.config
}
}
console.log(drillDownTableConfigs)
const currentTableConfig = drillDownTableConfigs.find(config => config.route === tableType)
const tables = currentTableConfig ? currentTableConfig.tables : []
const commonTabList = currentTableConfig ? currentTableConfig.tabs : []
if (tables && tables.length > 0) {
const curTableOldConfig = tables.find(table => table.id === tableType)
const curTable = curTableOldConfig
if (curTable) {
const metric = this.getUrlParam(this.curTabState.tableMetric, 'Bits/s')
const tabList = getTabList(curTable, metric)// 未下钻的tab列表
if (tabList && tabList.length > 0) {
combineTabList(tableType, tabList, commonTabList)
tabList.forEach(item => {
if (item.label === thirdMenu) {
item.checked = true
}
})
}
}
}
await db[dbDrilldownTableConfig].put({
id: userId,
config: this.$_.cloneDeep(drillDownTableConfigs)
})
console.log('当前测试。。。。。。。。。。。')
console.log(this.$_.cloneDeep(drillDownTableConfigs))
},
async jump (route, columnName, columnValue, opeType) {
this.showMenu = false
const menus = this.breadcrumb
if (opeType) {
// this.$store.commit('setTabOperationBeforeType', this.$store.getters.getTabOperationType)
// this.$store.commit('setTabOperationType', opeType)
this.changeUrlTabState(this.curTabState.tabOperationBeforeType, this.getUrlParam(this.curTabState.tabOperationType, '', true))
this.changeUrlTabState(this.curTabState.tabOperationType, opeType)
} else {
// this.$store.commit('setTabOperationType', operationType.mainMenu)
this.changeUrlTabState(this.curTabState.tabOperationType, operationType.mainMenu)
}
if (!columnName) { // 点击第二级菜单
this.$store.commit('setNetworkOverviewTabList', [])
}
// 清空网络概况的特殊面包屑
this.$store.getters.menuList.forEach(menu => {
if (!this.$_.isEmpty(menu.children)) {
@@ -501,10 +546,8 @@ export default {
this.changeUrlTabState(this.curTabState.panelName, columnName)
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)
const curTab = getDefaultCurTab(tableType, metric, columnName)
this.changeUrlTabState(this.curTabState.curTab, curTab.prop)
// this.$store.commit('setDimensionType', curTab ? curTab.prop : '')
this.changeUrlTabState(this.curTabState.dimensionType, curTab ? curTab.prop : '')
// this.$store.commit('setQueryCondition', '')
@@ -536,7 +579,21 @@ export default {
}
})
// console.log(this.$store.getters.getDimensionType)
if (opeType === 3) {
if (opeType === 2 || opeType === 0) { // 二级菜单 或主菜单
// 如果有四级菜单，则将四级菜单对应tab的checked设置为true:根据columnName和columnValue 或 url判断不准确
if (menus[3]) {
await this.handleCurDrilldownTableConfig(this.breadcrumb[2], this.breadcrumb[3])
}
console.log('后面 handleCurDrilldownTableConfig')
// let path = this.$route.path; //先获取路由路径
// this.$router.push(path); //再跳转路由路径，query参数没带过去，所以被清除了
this.$router.push({
path: route,
query: {
t: +new Date()
}
})
} else if (opeType === 3) {
this.$router.push({
query: { ...this.$route.query, fourthPanel: '' }
})

2
src/store/modules/user.js
View File

@@ -82,7 +82,7 @@ const user = {
if (res.code === 200 && res.page.list && res.page.list.length > 0) {
await db[dbDrilldownTableConfig].put({
id: 'default',
config: res.page.list[0].cvalue
config: JSON.parse(res.page.list[0].cvalue)
})
// const a = await db[dbDrilldownTableConfig].get({ id: 'default' })
// console.info(a)

56
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, networkTable } from '@/utils/constants'
import { storageKey, iso36112, topDomain, echartsFontSize, dbGeoDataTableName, networkTable, dbDrilldownTableConfig } from '@/utils/constants'
import { getIso36112JsonData } from '@/utils/api'
import { format } from 'echarts'
import router from '@/router'
@@ -528,6 +528,11 @@ export function getCapitalGeo (countryId) {
return data[countryId]
}
export function getUserDrilldownTableGeo (userId) {
const data = getGeoData(storageKey.userCustomizationConfig)
return data[userId]
}
function JSONParse (data) {
const firstParse = JSON.parse(data)
if (typeof firstParse === 'string') {
@@ -845,13 +850,32 @@ export function changeTabState (param, value) {
query: query
})
}
export function getTabList (curTable, curMetric) {
console.log('getTabList--------------')
let tabs = []
if (curTable.hasMetricSearch) { // 有metric
const metricsList = curTable ? curTable.metrics : []
if (metricsList && metricsList.length > 0) {
const metricTab = metricsList.find(metric => metric.name === curMetric)
tabs = metricTab.tabs
}
} else { // 无metric
if (curTable.tabs) {
tabs = curTable.tabs
}
}
return tabs
}
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)
if (!tab.hasOwnProperty('checked')) {
const tabName = tab ? (tab.name ? tab.name : tab) : ''
// 配置的内容
tab = {}
const commonTab = commonTabList.find(item => item.name === tabName)
tab.label = commonTab ? commonTab.i18n : ''
tab.prop = commonTab ? commonTab.prop : ''
if (!tab.hasOwnProperty('checked')) {
@@ -867,6 +891,7 @@ export function combineTabList (tableType, list, commonTabList) {
const tabInCode = listInCode ? listInCode.find(item => item.label === tab.label) : {}
tab.queryCycleTotalProp = tabInCode ? tabInCode.queryCycleTotalProp : null
tab.dillDownProp = tabInCode ? tabInCode.dillDownProp : []
}
})
}
@@ -887,9 +912,28 @@ export function setUserConfig () {
}
}
export function getUserDrilldownTableConfig (tableType, curMetric) {
export async function getDefaultCurTab (tableType, metric, columnName) {
const tabList = await getUserDrilldownTableConfig(tableType, metric)
const curTab = tabList.filter(item => item.label === columnName)[0]
return curTab
}
export async function getUserDrilldownTableConfig (tableType, curMetric) {
let list = []
const defaultDrillDownTableConfigs = JSON.parse(localStorage.getItem(storageKey.drillDownTableConfig))// 所有表格的配置
// 先从localStorage中获取用户定制的自定义配置，如果没有，则使用默认的自定义配置
const userId = localStorage.getItem(storageKey.userId)
const userLocalCongfig = await db[dbDrilldownTableConfig].get({ id: userId })
let defaultDrillDownTableConfigs = []
if (userLocalCongfig) {
defaultDrillDownTableConfigs = userLocalCongfig.config
}
if (!defaultDrillDownTableConfigs || defaultDrillDownTableConfigs.length === 0) { // 未找到当前用户的配置，使用默认配置
console.log('default..............')
const defaultCongfig = await db[dbDrilldownTableConfig].get({ id: 'default' })
if (defaultCongfig) {
defaultDrillDownTableConfigs = defaultCongfig.config
}
}
const currentTableConfig = defaultDrillDownTableConfigs.find(config => config.route === tableType)
const commonTabList = currentTableConfig ? currentTableConfig.tabs : []
const tables = currentTableConfig ? currentTableConfig.tables : []
@@ -907,8 +951,6 @@ export function getUserDrilldownTableConfig (tableType, curMetric) {
list = curTable ? curTable.tabs : []
}
combineTabList(tableType, list, commonTabList)
// this.combineColumnList(this.customTableTitles)
// this.setUserConfig(list)
}
}
return list

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

@@ -168,14 +168,14 @@
</template>
<script>
import { ref } from 'vue'
import { operationType, unitTypes, networkTable, tableColumnType, networkDefaultLimit, curTabState, storageKey } from '@/utils/constants'
import { operationType, unitTypes, networkTable, tableColumnType, networkDefaultLimit, curTabState, storageKey, dbDrilldownTableConfig } from '@/utils/constants'
import { get } from '@/utils/http'
import unitConvert from '@/utils/unit-convert'
import { getChainRatio, computeScore, urlParamsHandler, overwriteUrl } from '@/utils/tools'
import { getChainRatio, computeScore, urlParamsHandler, overwriteUrl, getUserDrilldownTableGeo } from '@/utils/tools'
import { getSecond } from '@/utils/date-util'
import chartMixin from '@/views/charts2/chart-mixin'
import ChartNoData from '@/views/charts/charts/ChartNoData'
import { useRoute } from 'vue-router'
import { db } from '@/indexedDB'
export default {
name: 'NetworkOverviewTabs',
@@ -226,6 +226,8 @@ export default {
curTable: {}, // 当前的表格类型
curTableInCode: {}, // 代码中的配置
tableType: '',
userId: null,
drillDownTableConfigs: [],
hasMetricSearch: true,
activeTab: '',
activeCustomize: '',
@@ -246,33 +248,6 @@ export default {
ChartNoData
},
watch: {
/* chartData: {
deep: true,
handler (n) {
if (this.chartData) {
this.initData()
}
}
}, */
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) {
@@ -283,7 +258,6 @@ export default {
limit: networkDefaultLimit,
type: curTab.prop
}
// const condition = this.$store.getters.getQueryCondition
const condition = this.getQueryCondition()
if (condition) {
queryParams = {
@@ -299,7 +273,6 @@ export default {
},
computed: {
tableClass () {
console.log('computed')
let className
if (this.showRecordNum >= 10) {
className = 'tab-table__average'
@@ -341,7 +314,7 @@ export default {
cancleSortArrow () {
// 取消表格排序高亮的箭头
if (this.column.prop) {
const table = this.$refs['dataTable_' + this.index]
// const table = this.$refs['dataTable_' + this.index]
const tableHeaer = this.$refs['dataTable_' + this.index]
? (Array.isArray(this.$refs['dataTable_' + this.index])
? this.$refs['dataTable_' + this.index][0].$refs.tableHeader
@@ -376,17 +349,6 @@ export default {
}
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 = []
@@ -425,14 +387,12 @@ export default {
item.checked = false
}
})
// 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.list.forEach(item => {
@@ -449,22 +409,8 @@ export default {
this.cycleColumnNameGroup = this.curTable.sessionsCycleColumnNameGroup
this.orderBy = 'sessions'
this.metricUnit = 'sessions'
/*
let totalChecked = true
this.customTableTitles.forEach(item => {
if (item.prop === 'total') {
totalChecked = item.checked
}
})
const totalColumn = this.customTableTitles.filter(item => item.prop === 'total')
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 }
] */
}
// this.showCustomizeTabs = true
// this.setShowNum(10)
const curOperationType = this.getUrlParam(this.curTabState.tabOperationType, '', true)
const beforeOperationType = this.getUrlParam(this.curTabState.tabOperationBeforeType, '', true)
if (this.isFourthMenu()) { // 点击的为第四级菜单
@@ -490,9 +436,7 @@ export default {
this.changeUrlTabState(this.curTabState.curTab, breadcrumbColumnTab.prop)
this.hideTabs(breadcrumbColumnTab)
// this.customTableTitles[0].label = breadcrumbColumnTab.label
this.combineColumnList(breadcrumbColumnTab.columns)
this.setUserConfig()
this.combineColumnList(breadcrumbColumnTab.label)
this.showCustomizeTabs = false
// this.setShowNum(10)
} else if (curOperationType === operationType.changeTab) { // 切换tab
@@ -502,10 +446,7 @@ export default {
this.showCustomizeTabs = true
// this.setShowNum(10)
} else if (curOperationType === operationType.secondMenu || curOperationType === operationType.mainMenu) { // 点击的为第二级菜单、或者点击菜单进入、
// 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)
@@ -525,9 +466,7 @@ export default {
this.$nextTick(() => {
this.hideTabs(item)
})
// this.customTableTitles[0].label = item.label
this.combineColumnList(item.columns)
this.setUserConfig()
this.combineColumnList(item.label)
}
})
this.activeTab = ''
@@ -539,18 +478,14 @@ export default {
// if (beforeOperationType === operationType.thirdMenu) {
if (this.isThirdMenu()) {
this.hideTabs(curTab)
// this.customTableTitles[0].label = curTab.label
this.combineColumnList(curTab.columns)
this.setUserConfig()
this.combineColumnList(curTab.label)
this.showCustomizeTabs = false
}
} else if (curOperationType === operationType.customize) { // customize
// if (beforeOperationType === operationType.thirdMenu) {
if (this.isThirdMenu()) {
this.hideTabs(curTab)
// this.customTableTitles[0].label = curTab.label
this.combineColumnList(curTab.columns)
this.setUserConfig()
this.combineColumnList(curTab.label)
this.showCustomizeTabs = false
} else {
this.$nextTick(() => {
@@ -608,7 +543,7 @@ export default {
}
const self = this
if (this.customTableTitles) {
if (this.customTableTitles && this.customTableTitles.length > 0) {
this.customTableTitles.forEach(tableColumn => {
if (tableColumn.columnType === tableColumnType.chainRatio && tableColumn.isInMainUrl && tableDataTmp && tableDataTmp.length > 0) {
get(self.gerCycleUrl(), queryParams).then(response => {
@@ -769,6 +704,8 @@ export default {
})
}
})
} else {
this.toggleLoading(false)
}
},
showMore () {
@@ -900,12 +837,12 @@ export default {
}
}
},
// 切换metric：bit、packet、session
changeMetric () {
this.tableData = []
this.tableDataBackup = []
this.setShowNum(10)
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))
}
@@ -915,16 +852,14 @@ export default {
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.combineTabList(this.list)
// this.allList = this.$_.cloneDeep(this.list)//备份所有配置，下钻及返回时使用
this.customTableTitles = this.list ? this.list[0].columns : []// 需要获得当前tab的列:默认第一个tab的列
this.combineColumnList(this.customTableTitles)
this.setUserConfig()
const curTabData = this.list.find(item => item.label === label)
this.combineColumnList(curTabData.label)
}
if (this.metric === 'Bits/s') {
@@ -932,73 +867,16 @@ export default {
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.columns.forEach((item, index) => {
if (item.tabColumn) {
//item.label = label
}
if (index === 1) {
item.checked = this.customTableTitles[1].checked
}
titleGroup.push(item)
})
} else {
this.customTableTitles.forEach(item => {
if (item.tabColumn) {
//item.label = label
}
titleGroup.push(item)
})
}
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.columns.forEach((item, index) => {
if (item.tabColumn) {
item.label = label
}
if (index === 1) {
item.checked = this.customTableTitles[1].checked
}
titleGroup.push(item)
})
} else {
this.customTableTitles.forEach(item => {
if (item.tabColumn) {
item.label = label
}
titleGroup.push(item)
})
}
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') {
totalChecked = item.checked
}
})
const totalColumn = this.customTableTitles.filter(item => item.prop === 'total')
this.customTableTitles = [
{ 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,
@@ -1072,30 +950,29 @@ export default {
showTab (curTab) {
if (curTab) {
this.activeTab = ref(curTab.label)
// this.customTableTitles[0].label = curTab.label
this.combineColumnList(curTab.columns)
this.setUserConfig()
this.combineColumnList(curTab.label)
}
},
tabChange (index) {
// 配置tab：显示隐藏与顺序
async tabChange (index) {
console.log('NetworkOverview类------tabChange：隐藏或显示tab-开始')
console.log(this.list)
console.log(this.curTable)
console.log(this.drillDownTableConfigs)
console.log('NetworkOverview类------tabChange：隐藏或显示tab-开始')
this.isNoData = false
// 操作类型设置
// 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))
}
// this.$store.commit('setTabOperationType', operationType.customize)
this.changeUrlTabState(this.curTabState.tabOperationType, operationType.customize)
// 获得操作tab和当前选中的所有tab
const handleTab = this.list[index]
const tabList = this.list.filter(item => item.checked === true)
const defaultTab = tabList.length > 0 ? tabList[0] : {}
// 当前操作之后，只有1个tab被选中，则这一个不允许取消选中
// const columnName = this.$store.getters.getBreadcrumbColumnName
const columnName = this.getUrlParam(this.curTabState.thirdMenu, '')
// const columnValue = this.$store.getters.getBreadcrumbColumnValue
const columnValue = this.getUrlParam(this.curTabState.fourthMenu, '')
if (tabList.length === 1) {
defaultTab.disabled = true
@@ -1108,14 +985,12 @@ export default {
}
}
})
// 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
@@ -1126,7 +1001,7 @@ export default {
}
}
this.saveUserLocalConfig()
await this.saveUserLocalConfig()
// 如果取消tab，则如果取消的是当前选中的tab，则当前tab就需要修改为第一个默认的tab，否则不用
const curTab = this.getCurTab()
if (!handleTab.checked && handleTab.label === curTab.label) {
@@ -1150,6 +1025,11 @@ export default {
}
this.getChartData(queryParams)
}
console.log('NetworkOverview类------tabChange：隐藏或显示tab-结束')
console.log(this.list)
console.log(this.curTable)
console.log(this.drillDownTableConfigs)
console.log('NetworkOverview类------tabChange：隐藏或显示tab-结束')
},
setOperationType (operationType) {
// this.$store.commit('setTabOperationBeforeType', this.$store.getters.getTabOperationType)
@@ -1204,26 +1084,51 @@ export default {
4.设置菜单：第三级，第四级名称，并保存到store中
5.设置panel名称，表格维度类型：如ip，domain等(即查询参数中的type)
* */
handleTabValue (columnName, columnValue) {
// const oldCurTab = this.$store.getters.getNetworkOverviewBeforeTab
const oldCurTab = this.getUrlParam(this.curTabState.networkOverviewBeforeTab, '')
const clickTab = this.getTabByLabel(columnName)
async handleTabValue (columnName, columnValue) {
console.log('NetworkOverview类------handleTabValue：下钻')
const clickTab = this.getTabByLabel(columnName)// 下钻后，显示的下钻tab对应的drilldownTabs
this.setBeforeTab(clickTab)
this.setOperationType(operationType.fourthMenu)
this.setQueryCondition(clickTab, columnValue)
const toPanel = clickTab.panelId
this.changeUrlTabState(this.curTabState.curTab, '')
const thirdMenu = this.getUrlParam(this.curTabState.thirdMenu, '')
const tabList = this.getAllTabList()
if (this.isDrilldown()) { // 点击之前就已经是下钻状态了
this.list.forEach(tab => {
if (tab.label === thirdMenu) {
tab.checked = true
}
})
this.list = this.getDrilldownTabList(columnName)
this.combineTabList(this.list)
const curTab = this.getCurTab(clickTab)
tabList.forEach(tab => {
if (tab.label === curTab.label && tab.columns) {
this.combineColumnList(tab.label)
}
})
} else {
const changeTab = tabList.find(item => item.label == columnName)// 下钻的tab
this.list = changeTab.drilldownTabs
this.combineTabList(this.list)
const curTab = this.getCurTab(clickTab)
tabList.forEach(tab => {
if (tab.label === curTab.label && tab.columns) {
this.combineColumnList(tab.label)
}
})
}
await this.saveUserLocalConfig()
console.log(this.drillDownTableConfigs)
this.$store.getters.menuList.forEach(menu => {
if (this.$_.isEmpty(menu.children) && menu.route) {
if (this.$route.path === menu.route) {
menu.columnName = columnName
menu.columnValue = columnValue
// this.$store.commit('setPanelName', columnValue)
this.changeUrlTabState(this.curTabState.panelName, columnValue)
// this.$store.commit('setBreadcrumbColumnName', columnName)
this.changeUrlTabState(this.curTabState.thirdMenu, columnName)
// this.$store.commit('setDimensionType', clickTab ? clickTab.prop : '')
this.changeUrlTabState(this.curTabState.dimensionType, clickTab ? clickTab.prop : '')
// this.$store.commit('setBreadcrumbColumnValue', columnValue)
this.changeUrlTabState(this.curTabState.fourthMenu, columnValue)
}
} else if (!this.$_.isEmpty(menu.children)) {
@@ -1231,33 +1136,14 @@ export default {
if (this.$route.path === child.route) {
child.columnName = columnName
child.columnValue = columnValue
// this.$store.commit('setPanelName', columnValue)
this.changeUrlTabState(this.curTabState.panelName, columnValue)
// this.$store.commit('setBreadcrumbColumnName', columnName)
this.changeUrlTabState(this.curTabState.thirdMenu, columnName)
// this.$store.commit('setDimensionType', clickTab ? clickTab.prop : '')
this.changeUrlTabState(this.curTabState.dimensionType, clickTab ? clickTab.prop : '')
// this.$store.commit('setBreadcrumbColumnValue', columnValue)
this.changeUrlTabState(this.curTabState.fourthMenu, columnValue)
}
})
}
})
const toPanel = clickTab.panelId
this.list.forEach((item, index) => {
if (item.label === columnName) {
item.checked = false
// toPanel = item.panelId
}
if (oldCurTab && (item.prop === oldCurTab)) {
item.checked = true
}
})
// this.$store.commit('setNetworkOverviewTabList', this.list)
// this.handleSearchParams(columnValue)
const curTab = this.getFirstCheckedTab()
this.changeUrlTabState(this.curTabState.curTab, curTab.prop)
this.$router.push({
query: {
@@ -1288,8 +1174,9 @@ export default {
this.changeUrlTabState(this.curTabState.queryCondition, queryCondition.join(' OR '))
}
},
metricChange () {
this.saveUserLocalConfig()
async metricChange () {
// 需要将列设置到当前tab的"hiddenColumns": [],"disabledColumns": [],
await this.saveUserLocalConfig()
},
dragstart (index) {
this.dragIndex = index
@@ -1345,35 +1232,29 @@ export default {
this.changeUrlTabState(this.curTabState.tableSortTab, '')
this.cancleSortArrow()
},
handleClick (tab) {
// 切换tab的时候，只需要修改列即可,但是列需要从indexDB中获取
async handleClick (tab) {
this.tableData = []
this.tableDataBackup = []
this.setShowNum(10)
this.clearSort()
// this.$store.commit('setTabOperationBeforeType', this.$store.getters.getTabOperationType)
// this.$store.commit('setTabOperationType', operationType.changeTab)
this.changeUrlTabState(this.curTabState.tabOperationBeforeType, this.getUrlParam(this.curTabState.tabOperationType, '', true))
this.changeUrlTabState(this.curTabState.tabOperationType, operationType.changeTab)
// this.customTableTitles[0].label = tab.paneName
const clickTab = this.list.filter(item => item.label == tab.paneName)
if (clickTab.columns) {
this.combineColumnList(clickTab.columns)
this.setUserConfig()
}
this.saveUserLocalConfig()
// 下钻的tab觉得显示哪些tab，这些tab显示什么列，取决于tab本身
const tabObjGroup = this.list.filter(item => item.label == tab.paneName)
if (tabObjGroup && tabObjGroup.length > 0) {
const curTab = tabObjGroup[0]
this.changeUrlTabState(this.curTabState.curTab, curTab.prop)
if (curTab.columns) {
this.combineColumnList(curTab.label)
}
await this.saveUserLocalConfig()
this.tab = curTab.prop
let queryParams = {
orderBy: this.orderBy,
limit: networkDefaultLimit,
type: curTab.prop
}
// const condition = this.$store.getters.getQueryCondition
const condition = this.getQueryCondition()
if (condition) {
queryParams = {
@@ -1443,7 +1324,6 @@ export default {
}
} else if (curOperationType === operationType.secondMenu || curOperationType === operationType.mainMenu) { // 点击第二级菜单，点击菜单
this.list = this.$_.cloneDeep(this.allList)
this.setUserConfig()
const curTab = this.getCurTab()
if (curTab) {
queryType = curTab.prop
@@ -1489,11 +1369,6 @@ export default {
return 'border-right:0px;font-size:12px;font-weight:500;padding:4px 0 !important;border-bottom: 1px solid #E2E5EC;'
}
},
/*
getUrlCurTab () {
let curTab = this.$route.query.curTab?JSON.parse(this.$route.query.curTab):null
return curTab
}, */
getQueryCondition () {
return this.$route.query.queryCondition ? this.$route.query.queryCondition : ''
},
@@ -1505,12 +1380,16 @@ export default {
}
},
// 获取当前tab:url中的curTab，如果url中curTab为空，则从list中取第一个checked为true的tab，如果list里没有checked为true的，就选第一个tab，并更新url
getCurTab () {
getCurTab (excludeTab) {
const curTabProp = this.$route.query.curTab ? this.$route.query.curTab : null
let curTab = curTabProp ? this.list.find(item => item.prop === curTabProp) : null
// let curTab = this.$store.getters.getNetworkOverviewCurrentTab
if (!curTab) {
const tabObjGroup = this.list.filter(item => item.checked)
let tabObjGroup = []
if (excludeTab) {
tabObjGroup = this.list.filter(item => item.checked && (item.prop !== excludeTab.prop))
} else {
tabObjGroup = this.list.filter(item => item.checked)
}
if (tabObjGroup && tabObjGroup.length > 0) {
tabObjGroup[0].checked = true
curTab = tabObjGroup[0]
@@ -1529,25 +1408,23 @@ export default {
// this.showTab(curTab)
}
})
// this.$store.commit('setNetworkOverviewTabList', this.list)
}
return curTab
},
combineTabList () {
combineTabList (tabList) {
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)
tabList.forEach(tab => {
const tabName = tab ? (tab.name ? tab.name : tab) : ''
const commonTab = this.commonTabList.find(item => item.name === tabName)
tab.label = commonTab ? commonTab.i18n : ''
tab.prop = commonTab ? commonTab.prop : ''
if (!tab.hasOwnProperty('checked')) {
if (!tab.hasOwnProperty('checked') || tab.checked === undefined || tab.checked === null) {
tab.checked = tab ? tab.show : true
}
if (!tab.hasOwnProperty('disabled')) {
if (!tab.hasOwnProperty('disabled') || tab.disabled === undefined || tab.disabled === null) {
tab.disabled = tab ? !tab.enable : false
}
if (!tab.hasOwnProperty('panelId')) {
if (!tab.hasOwnProperty('panelId') || tab.panelId === undefined || tab.panelId === null) {
tab.panelId = tab ? tab.panelIdOfFourthMenu : null
}
// 代码里写死的
@@ -1555,80 +1432,50 @@ export default {
tab.queryCycleTotalProp = tabInCode ? tabInCode.queryCycleTotalProp : null
tab.dillDownProp = tabInCode ? tabInCode.dillDownProp : []
})
// 设置drilldownTabs
const oldList = this.$_.cloneDeep(this.list)
this.list.forEach(tab => {
// 设置drilldownTabs：未下钻状态设置，已下钻状态无需设置
const thirdMenu = this.getUrlParam(this.curTabState.thirdMenu, '')
if (!thirdMenu) {
const oldList = this.$_.cloneDeep(tabList)
tabList.forEach(tab => {
const drilldownTabFull = []
tab.drilldownTabs.forEach(drilldownTab => {
const drilldownTabName = drilldownTab ? (drilldownTab.name ? drilldownTab.name : drilldownTab) : ''
const fullTab = oldList.find(item => item.name === drilldownTabName)
if (fullTab) {
const commonTab = this.commonTabList.find(item => item.name === drilldownTabName)
fullTab.label = commonTab ? commonTab.i18n : ''
fullTab.prop = commonTab ? commonTab.prop : ''
if (!tab.hasOwnProperty('panelId')) {
if (!fullTab.hasOwnProperty('panelId') || fullTab.panelId === undefined || tab.panelId === null) {
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
if (!fullTab.hasOwnProperty('checked') || fullTab.checked === undefined || tab.checked === null) {
fullTab.checked = !((tab.hiddenDrilldownTabs.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) : {}
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 : []
combineColumnList (tabLabel) {
const allTabs = this.getAllTabList()
const curTab = allTabs.find(item => item.label === tabLabel)
const customTableTitles = curTab ? curTab.columns : []
const hiddenColumnList = curTab ? curTab.hiddenColumns : []
const disabledColumnList = curTab ? curTab.disabledColumns : []
// let list = customTableTitles, curTabColumns.hiddenColumns, curTabColumns.disabledColumns
const newColumnList = []
if (list && list.length > 0) {
list.forEach(column => {
// let columnName = column
if (customTableTitles && customTableTitles.length > 0) {
customTableTitles.forEach(column => {
if (!column.hasOwnProperty('checked') || column.checked === undefined || column.checked === null) {
const columnName = column ? (column.name ? column.name : column) : ''
// 配置的内容
const commonColumn = this.commonColumnList.find(item => item.name === columnName)
@@ -1636,8 +1483,8 @@ export default {
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.checked = !((hiddenColumnList.indexOf(columnName) >= 0))
column.disabled = (disabledColumnList.indexOf(columnName) >= 0)
column.columnType = commonColumn ? commonColumn.columnType : ''
// 代码里写死的
const listInCode = this.curTableInCode ? this.curTableInCode.column : []
@@ -1649,108 +1496,97 @@ export default {
column.scoreType = columnInCode ? columnInCode.scoreType : 0
column.isScoreColumn = columnInCode ? columnInCode.isScoreColumn : true
newColumnList.push(column)
}
})
if (newColumnList && newColumnList.length > 0) {
curTab.columns = newColumnList
this.customTableTitles = newColumnList
} else {
this.customTableTitles = customTableTitles
}
}
},
async getUserLocalConfig () {
const userLocalCongfig = await db[dbDrilldownTableConfig].get({ id: this.userId })
if (userLocalCongfig) {
console.info(userLocalCongfig.config)
return userLocalCongfig.config
} else {
return null
}
},
isDrilldown () {
if (this.getUrlParam(this.curTabState.fourthMenu)) {
return true
} else {
return false
}
},
async saveUserLocalConfig () {
console.log('NetworkOverview类------saveUserLocalConfig方法：保存用户设置')
/*
let curTab = this.getCurTab()
console.log(this.customTableTitles)
this.getAllTabList().forEach(tab => {
if(tab.name ===curTab.name){
tab.columns = this.customTableTitles
}
}) */
console.log(this.drillDownTableConfigs)
await db[dbDrilldownTableConfig].put({
id: this.userId,
config: this.$_.cloneDeep(this.drillDownTableConfigs)
})
console.log('NetworkOverview类------saveUserLocalConfig方法：保存用户设置-end')
},
initConfig () {
getAllTabList () {
let tabs = []
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)
tabs = metricTab.tabs
}
} else { // 无metric
if (this.curTable.tabs) {
tabs = this.curTable.tabs
}
}
return tabs
},
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
getDrilldownTabList (columnName) {
let tabs = []
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)
const firstTabs = metricTab.tabs
if (firstTabs) {
firstTabs.forEach(tab => {
if (tab.label === columnName) {
tabs = tab.drilldownTabs
}
})
}
}
})
} 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
}
]
}
} else { // 无metric
if (this.curTable.tabs) {
const firstTabs = this.curTable.tabs
if (firstTabs) {
firstTabs.forEach(tab => {
if (tab.label === columnName) {
tabs = tab.drilldownTabs
}
})
}
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))
return tabs
}
},
mounted () {
console.log('mounted')
async mounted () {
console.log('NetworkOverview类------mounted：保存用户设置')
this.userId = localStorage.getItem(storageKey.userId)
this.tableType = this.$route.params ? this.$route.params.typeName : 'networkOverview'
this.curTableInCode = this.networkTable[this.tableType] ? this.networkTable[this.tableType] : this.networkTable.networkOverview
// 表格状态初始化(url)
@@ -1759,36 +1595,57 @@ export default {
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)
// }
const userLocalCongfig = await db[dbDrilldownTableConfig].get({ id: this.userId })
if (userLocalCongfig) {
console.log('user..............')
this.drillDownTableConfigs = userLocalCongfig.config
console.log(this.drillDownTableConfigs)
}
if (!this.drillDownTableConfigs || this.drillDownTableConfigs.length === 0) { // 未找到当前用户的配置，使用默认配置
console.log('default..............')
const defaultCongfig = await db[dbDrilldownTableConfig].get({ id: 'default' })
if (defaultCongfig) {
this.drillDownTableConfigs = defaultCongfig.config
console.log(this.drillDownTableConfigs)
}
}
console.log('vvvvvvvv')
console.log(this.drillDownTableConfigs)
const currentTableConfig = this.drillDownTableConfigs.find(config => config.route === this.tableType)
// 开始设置当前table，当前tab，当前tab对应的列等信息
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
const curTableOldConfig = tables.find(table => table.id === this.tableType)
this.curTable = curTableOldConfig
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 : []
if (this.isDrilldown()) { // 下钻状态
const thirdMenu = this.getUrlParam(this.curTabState.thirdMenu, '')
const tabList = this.getAllTabList()
if (tabList && tabList.length > 0) {
this.combineTabList(tabList)
const drilldownTab = tabList.find(item => item.label === thirdMenu)
this.list = drilldownTab ? drilldownTab.drilldownTabs : []
this.allList = this.$_.cloneDeep(tabList)// 备份所有配置，下钻及返回时使用
const curTab = this.getCurTab()// 初始化完list，才能正确执行
const curTabColumns = tabList.find(item => item.prop === curTab.prop)
this.combineColumnList(curTabColumns.label)
this.activeTab = ref(curTab.label)
}
} else { // 无metric
this.list = this.curTable ? this.curTable.tabs : []
this.networkTabList = this.curTable ? this.curTable.tabs : []
}
this.combineTabList()
} else { // 非下钻状态
this.list = this.getAllTabList()
this.combineTabList(this.list)
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)
console.log(this.list)
if (this.list && this.list.length > 0) {
const curTab = this.getCurTab()// 初始化完list，才能正确执行
this.combineColumnList(curTab.label)
this.activeTab = ref(curTab.label)
}
}
this.activeCustomize = ref('tabs')
this.networkSearchUrl = this.curTable.url
this.curTable.bytesColumnNameGroup = this.curTableInCode ? this.curTableInCode.bytesColumnNameGroup : []
@@ -1799,12 +1656,11 @@ export default {
this.curTable.sessionsCycleColumnNameGroup = this.curTableInCode ? this.curTableInCode.sessionsCycleColumnNameGroup : []
this.columnNameGroup = this.curTable.bytesColumnNameGroup
this.cycleColumnNameGroup = this.curTable.bytesCycleColumnNameGroup
this.setUserConfig()
}
}
console.log('第一次存储默认配置到localstorage')
this.saveUserLocalConfig()
console.log(this.drillDownTableConfigs)
await this.saveUserLocalConfig()
this.getChartData()
this.$nextTick(() => {
setTimeout(() => {
@@ -1813,15 +1669,13 @@ export default {
})
},
setup (props) {
console.log('setup')
},
unmounted () {
async unmounted () {
console.log('NetworkOverview类------unmounted方法：退出界面时，将修改的配置存储到localstorage')
this.isNoData = false
console.log(this.customTableTitles)
// 存储用户的设置
// this.setUserConfig()
this.saveUserLocalConfig()
console.log('退出界面时，将修改的配置存储到localstorage')
console.log('unmounted')
await this.saveUserLocalConfig()
}
}
</script>