diff --git a/src/components/layout/Header.vue b/src/components/layout/Header.vue index 8fe3ad9f..9a120120 100644 --- a/src/components/layout/Header.vue +++ b/src/components/layout/Header.vue @@ -379,14 +379,28 @@ export default { if (this.from !== n) { this.from = n } + }, + async breadcrumb (n) { + if (this.$route.params.typeName === fromRoute.dnsServiceInsights) { + if (this.dnsQtypeMapData.size === 0) { + this.dnsQtypeMapData = await getDnsMapData('dnsQtype') + } + if (this.dnsRcodeMapData.size === 0) { + this.dnsRcodeMapData = await getDnsMapData('dnsRcode') + } + } } }, async mounted () { this.from = Object.keys(this.entityType)[0] // 是否需要dns的qtype和rcode的数据字典 if (this.$route.params.typeName === fromRoute.dnsServiceInsights) { - this.dnsQtypeMapData = await getDnsMapData('dnsQtype') - this.dnsRcodeMapData = await getDnsMapData('dnsRcode') + if (this.dnsQtypeMapData.size === 0) { + this.dnsQtypeMapData = await getDnsMapData('dnsQtype') + } + if (this.dnsRcodeMapData.size === 0) { + this.dnsRcodeMapData = await getDnsMapData('dnsRcode') + } } this.initDropdownList() }, @@ -464,9 +478,13 @@ export default { get(curTableInCode.url.drilldownList, params).then(async response => { if (response.code === 200) { this.breadcrumbColumnValueListShow = response.data.result - if (this.from === fromRoute.dnsServiceInsights) { - this.dnsQtypeMapData = await getDnsMapData('dnsQtype') - this.dnsRcodeMapData = await getDnsMapData('dnsRcode') + if (this.$route.params.typeName === fromRoute.dnsServiceInsights) { + if (this.dnsQtypeMapData.size === 0) { + this.dnsQtypeMapData = await getDnsMapData('dnsQtype') + } + if (this.dnsRcodeMapData.size === 0) { + this.dnsRcodeMapData = await getDnsMapData('dnsRcode') + } } this.$nextTick(() => { this.breadcrumbColumnValueListShow.forEach(item => { @@ -575,6 +593,7 @@ export default { async handleCurDrilldownTableConfig (thirdMenu) { // const userId = localStorage.getItem(storageKey.userId) const tableType = this.$route.params ? this.$route.params.typeName : 'networkOverview' + const metric = this.getUrlParam(this.curTabState.tableMetric, 'Bits/s') const drillDownTableConfigs = await combinDrilldownTableWithUserConfig() const currentTableConfig = drillDownTableConfigs.find(config => config.route === tableType) const tables = currentTableConfig ? currentTableConfig.tables : [] @@ -582,7 +601,6 @@ export default { if (tables && tables.length > 0) { const curTable = tables.find(table => table.id === tableType) 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) diff --git a/src/utils/tools.js b/src/utils/tools.js index bf4d5341..174a91b3 100644 --- a/src/utils/tools.js +++ b/src/utils/tools.js @@ -6,6 +6,7 @@ import { getIso36112JsonData, getDictList } from '@/utils/api' import { format } from 'echarts' import router from '@/router' import { db } from '@/indexedDB' +import { useRoute } from 'vue-router' export const tableSort = { // 是否需要排序 @@ -863,10 +864,10 @@ export async function getDnsMapData (type) { if (code.indexOf('-') > -1) { const range = mapData.code.split('-') if (range && range.length >= 2) { - const start = range[0].trim() - const eEnd = range[1].trim() - mapData.value = (start <= code && code <= eEnd) ? mapData.value : code + const start = Number(range[0].trim()) + const eEnd = Number(range[1].trim()) for (let i = start; i <= eEnd; i++) { + mapData.value = (start <= i && i <= eEnd) ? mapData.value : i codeValueMap.set(i, mapData.value) } } @@ -877,11 +878,11 @@ export async function getDnsMapData (type) { } return codeValueMap } -export function handleSpecialValue(value){ - if(value){ +export function handleSpecialValue (value) { + if (value) { value = value.replaceAll("'", "\\\\'") - .replaceAll('"','\\"') - .replaceAll('&','%26') + .replaceAll('"', '\\"') + .replaceAll('&', '%26') } return value } @@ -958,26 +959,64 @@ export async function getConfigVersion (id) { export async function combinDrilldownTableWithUserConfig () { const defaultCongfigInDb = await db[dbDrilldownTableConfig].get({ id: 'default' }) - const defaultConfigs = defaultCongfigInDb ? defaultCongfigInDb.config : [] - const curUserConfig = await readDrilldownTableConfigByUser() - if (defaultConfigs && curUserConfig && curUserConfig.length > 0) { - defaultConfigs.forEach(defaultConfig => { - const currentTableConfig = curUserConfig.find(config => config.route === defaultConfig.route) - if (currentTableConfig) { - const tableConfig = defaultConfig.tables.find(table => table.id === defaultConfig.route) - const newTableConfig = currentTableConfig.tables.find(table => table.id === defaultConfig.route) - tableConfig.hiddenColumns = newTableConfig.hiddenColumns - tableConfig.tabs.forEach(tab => { - const newTab = newTableConfig.tabs.find(newTab => newTab.name === tab.name) - if (newTab) { - tab.hiddenDrilldownTabs = newTab.hiddenDrilldownTabs - tab.checked = newTab.checked + const defaultConfigGroup = defaultCongfigInDb ? defaultCongfigInDb.config : [] + const currentUserConfigGroup = await readDrilldownTableConfigByUser() + if (defaultConfigGroup && currentUserConfigGroup && currentUserConfigGroup.length > 0) { + defaultConfigGroup.forEach(defaultConfig => { + const currentUserConfig = currentUserConfigGroup.find(config => config.route === defaultConfig.route) + if (currentUserConfig) { + const defaultTableConfig = defaultConfig.tables.find(table => table.id === defaultConfig.route) + const currentUserTableConfig = currentUserConfig.tables.find(table => table.id === defaultConfig.route) + defaultTableConfig.hiddenColumns = currentUserTableConfig.hiddenColumns + const sortTabs = [] + currentUserTableConfig.tabs.forEach(currentUserTab => { + const defaultTab = defaultTableConfig.tabs.find(tab => tab.name === currentUserTab.name) + if (defaultTab) { + defaultTab.hiddenDrilldownTabs = currentUserTab.hiddenDrilldownTabs + defaultTab.checked = currentUserTab.checked + if (defaultTab && defaultTab.hasMetricSearch === true) { + defaultTab.metrics.forEach(metric => { + const sortColumns = [] + sortColumns.push(metric.columns[0]) + currentUserTableConfig.columns.forEach((column, index) => { + const sortColumn = metric.columns.find(metricColumn => { + if (metricColumn.name) { + return metricColumn.name === column + } else { + return metricColumn === column + } + }) + if (sortColumn) { + sortColumns.push(sortColumn) + } + }) + metric.columns = sortColumns + }) + } else { + const sortColumns = [] + sortColumns.push(defaultTab.columns[0]) + currentUserTableConfig.columns.forEach((column, index) => { + const sortColumn = defaultTab.columns.find(metricColumn => { + if (metricColumn.name) { + return metricColumn.name === column + } else { + return metricColumn === column + } + }) + if (sortColumn) { + sortColumns.push(sortColumn) + } + }) + defaultTab.columns = sortColumns + } + sortTabs.push(defaultTab) } }) + defaultTableConfig.tabs = sortTabs } }) } - return defaultConfigs + return defaultConfigGroup } export async function getUserDrilldownTableConfig (tableType, curMetric) { diff --git a/src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue b/src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue index 9093b5d3..9fa32041 100644 --- a/src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue +++ b/src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue @@ -276,7 +276,6 @@ export default { watch: { timeFilter: { handler (n) { - // console.log('watch') const curTab = this.getCurTab() let queryParams = { orderBy: this.orderBy, @@ -421,7 +420,6 @@ export default { } }, initState () { - // console.log('InitState:开始') let curTab = this.getCurTab() if (curTab) { // 显示当前tab const realTab = this.list.find(item => item.name === curTab.name) @@ -568,7 +566,6 @@ export default { this.showCustomizeTabs = true } this.changeUrlTabState() - // console.log('InitState: 结束') }, async initData () { const tabList = [] @@ -1109,15 +1106,14 @@ export default { return tab }, /* - * 点击表格第一列数据后 - 1.设置beforeTab - 2.设置OperationType - 3.设置QueryCondition - 4.设置菜单:第三级,第四级名称,并保存到store中 - 5.设置panel名称,表格维度类型:如ip,domain等(即查询参数中的type) - * */ + * 点击表格第一列数据后 + 1.设置beforeTab + 2.设置OperationType + 3.设置QueryCondition + 4.设置菜单:第三级,第四级名称,并保存到store中 + 5.设置panel名称,表格维度类型:如ip,domain等(即查询参数中的type) + * */ async handleTabValue (columnName, columnValue) { - // console.log('NetworkOverview类------handleTabValue:下钻') // 下钻前保存当前路由状态 this.beforeRouterPush() const clickTab = this.getTabByName(columnName)// 下钻后,显示的下钻tab对应的drilldownTabs @@ -1148,8 +1144,8 @@ export default { const changeTab = tabList.find(item => item.name === tabName)// 下钻的tab this.list = changeTab.drilldownTabs /* this.list.forEach(tab => { - const hiddenTab = tabList.find(item => item.name == tab.name) - }) */ + const hiddenTab = tabList.find(item => item.name == tab.name) + }) */ const curTab = this.getCurTab(clickTab) tabList.forEach(tab => { if (tab.name === curTab.name) { @@ -1160,13 +1156,13 @@ export default { await this.saveUserLocalConfig() /* let forthMenuName = '' - if (clickTab.prop === 'qtype') { - forthMenuName = this.dnsQtypeMapData.get(columnValue) - } else if (clickTab.prop === 'rcode') { - forthMenuName = this.dnsRcodeMapData.get(columnValue) - } else { - forthMenuName = columnValue - } */ + if (clickTab.prop === 'qtype') { + forthMenuName = this.dnsQtypeMapData.get(columnValue) + } else if (clickTab.prop === 'rcode') { + forthMenuName = this.dnsRcodeMapData.get(columnValue) + } else { + forthMenuName = columnValue + } */ this.$store.getters.menuList.forEach(menu => { if (this.$_.isEmpty(menu.children) && menu.route) { if (this.$route.path === menu.route) { @@ -1210,8 +1206,8 @@ export default { }) }, /** - * 在路由跳转前,即下钻前将路由数据保存起来,确保回退和前进保留当时状态 - */ + * 在路由跳转前,即下钻前将路由数据保存起来,确保回退和前进保留当时状态 + */ beforeRouterPush () { const currentRouter = this.$_.cloneDeep(this.$route.query) const historyList = this.$_.cloneDeep(this.$store.getters.getRouterHistoryList) @@ -1644,45 +1640,122 @@ export default { return isSetDrilldownTabInfo }, async saveUserLocalConfig () { - let curUserConfigs = await readDrilldownTableConfigByUser() - const hiddenColumns = this.getHiddenColumnNameGroup() - this.curTable.hiddenColumns = hiddenColumns + let curUserConfigGroup = await readDrilldownTableConfigByUser() let version = '' - if (curUserConfigs && curUserConfigs.length > 0) { // 当前用户存在缓存配置 - const currentRouteConfig = curUserConfigs.find(config => config.route === this.tableType) - if (currentRouteConfig) { // 用户的缓存中存在当前路径对应的下钻表格对应的配置 - const currentTableConfig = currentRouteConfig.tables.find(table => table.id === this.tableType) - if (currentTableConfig) { - currentTableConfig.hiddenColumns = hiddenColumns - currentTableConfig.tabs.forEach(tab => { - const newTab = this.curTable.tabs.find(newTab => newTab.name === tab.name) - tab.hiddenDrilldownTabs = this.getHiddenDrilldownTabNameGroup(newTab) - tab.checked = newTab.checked + if (curUserConfigGroup && curUserConfigGroup.length > 0) { // 当前用户存在缓存配置 + const curUserRouteConfig = curUserConfigGroup.find(config => config.route === this.tableType) + if (curUserRouteConfig) { // 用户的缓存中存在当前路径对应的下钻表格对应的配置 + const curUserTableConfig = curUserRouteConfig.tables.find(table => table.id === this.tableType) + if (curUserTableConfig) { + this.customTableTitles.forEach(col => { + const colName = col.name ? col.name : col + const colIndex = curUserTableConfig.hiddenColumns.indexOf(colName) + if (col.checked === false) { + if (colIndex === -1) { + curUserTableConfig.hiddenColumns = curUserTableConfig.hiddenColumns.concat(colName) + } + } else if (col.checked === true) { + if (colIndex > -1) { + curUserTableConfig.hiddenColumns.splice(colIndex, 1) + } + } }) + this.curTable.hiddenColumns = curUserTableConfig.hiddenColumns + const oldSortColumns = curUserTableConfig.columns + const newSortColumns = this.getSortColumnName() + if (newSortColumns.length > 0) { + if (!curUserTableConfig.columns) { + curUserTableConfig.columns = [] + } + if (oldSortColumns && newSortColumns.length < oldSortColumns.length) { + const sameColumnIndexGroup = [] + oldSortColumns.forEach((oldColumn, oldIndex) => { + if (newSortColumns.indexOf(oldColumn) > -1) { + sameColumnIndexGroup.push(oldIndex) + } + }) + sameColumnIndexGroup.forEach((oldIndex, index) => { + curUserTableConfig.columns[oldIndex] = newSortColumns[index] + }) + } else { + curUserTableConfig.columns = newSortColumns + } + } + const sortTabs = [] + this.curTable.tabs.forEach(tab => { + const newTab = { + name: tab.name, + hiddenDrilldownTabs: this.getHiddenDrilldownTabNameGroup(tab), + checked: tab.checked + } + sortTabs.push(newTab) + }) + curUserTableConfig.tabs = sortTabs } } else { // 用户的缓存中不存在当前路径对应的下钻表格对应的配置 - curUserConfigs.push(this.handleInitDrilldownTableConfig()) + curUserConfigGroup.push(this.handleInitDrilldownTableConfig()) } version = await getConfigVersion(this.userId) } else { // 当前用户不存在缓存配置 - curUserConfigs = [] - curUserConfigs.push(this.handleInitDrilldownTableConfig()) + curUserConfigGroup = [] + curUserConfigGroup.push(this.handleInitDrilldownTableConfig()) version = await getConfigVersion('default') } // 更新缓存中的配置 await db[dbDrilldownTableConfig].put({ id: this.userId, version: version, - config: this.$_.cloneDeep(curUserConfigs) + config: this.$_.cloneDeep(curUserConfigGroup) }) // 更新使用的配置 const curCfg = this.drillDownTableConfigs.find(cfg => cfg.route === this.tableType) if (curCfg) { const curTable = curCfg.tables.find(table => table.id === this.tableType) - curTable.hiddenColumns = hiddenColumns + // curTable.hiddenColumns = curUserTableConfig.hiddenColumns curTable.tabs.forEach(tab => { - const newTab = this.curTable.tabs.find(newTab => newTab.name === tab.name) - tab.hiddenDrilldownTabs = this.getHiddenDrilldownTabNameGroup(newTab) + const tabItem = this.curTable.tabs.find(tabItem => tabItem.name === tab.name) + tab.hiddenDrilldownTabs = this.getHiddenDrilldownTabNameGroup(tabItem) + if (tab && tab.hasMetricSearch === true) { + const columnsForMetric = tab.metrics.find(metric => metric.name === this.metric) + tab.metrics.forEach(metric => { + const oldSortColumns = metric.columns + const newSortColumns = this.customTableTitles.slice(1) + if (oldSortColumns && newSortColumns.length < oldSortColumns.length) { + const sameColumnIndexGroup = [] + oldSortColumns.forEach((oldColumn, oldIndex) => { + const oldColName = oldColumn.name ? oldColumn.name : oldColumn + newSortColumns.forEach(newCol => { + const newColName = newCol.name ? newCol.name : newCol + if (newColName === oldColName) { + sameColumnIndexGroup.push(oldIndex) + } + }) + }) + sameColumnIndexGroup.forEach((oldIndex, index) => { + metric.columns[oldIndex] = newSortColumns[index] + }) + } else { + const columnGroup = [] + columnGroup.push(JSON.parse(JSON.stringify(oldSortColumns[0]))) + newSortColumns.forEach(newColumn => { + const newColName = newColumn.name ? newColumn.name : newColumn + const sameColumn = metric.columns.find(metricColumn => { + const metricColumnName = metricColumn.name ? metricColumn.name : metricColumn + return metricColumnName === newColName + }) + if (sameColumn) { + columnGroup.push(JSON.parse(JSON.stringify(newColumn))) + } + }) + metric.columns = columnGroup + } + }) + } else { + let columnGroup = [] + columnGroup.push(JSON.parse(JSON.stringify(tab.columns[0]))) + columnGroup = columnGroup.concat(JSON.parse(JSON.stringify(this.customTableTitles.slice(1)))) + tab.columns = columnGroup + } }) } }, @@ -1694,6 +1767,7 @@ export default { tables: [{ id: this.tableType, hiddenColumns: hiddenColumns, + columns: this.getSortColumnName(), tabs: [] }] } @@ -1715,11 +1789,20 @@ export default { } }) /* - if (hiddenColumns.length === 0) { - hiddenColumns = this.curTable.hiddenColumns - } */ + if (hiddenColumns.length === 0) { + hiddenColumns = this.curTable.hiddenColumns + } */ return hiddenColumns }, + getSortColumnName () { + const sortColumns = [] + this.customTableTitles.forEach((column, index) => { + if (index != 0) { + sortColumns.push(column.name) + } + }) + return sortColumns + }, getHiddenDrilldownTabNameGroup (newTab) { let hiddenDrilldownTabs = [] if (newTab && newTab.drilldownTabs) { @@ -1775,7 +1858,6 @@ export default { } }, async mounted () { - console.log('mounted start...') this.list = null this.tabList = null this.allList = null