diff --git a/src/assets/css/components/views/charts2/networkOverviewTabs.scss b/src/assets/css/components/views/charts2/networkOverviewTabs.scss index ef15415e..2a087ae3 100644 --- a/src/assets/css/components/views/charts2/networkOverviewTabs.scss +++ b/src/assets/css/components/views/charts2/networkOverviewTabs.scss @@ -115,6 +115,15 @@ .el-table thead { color: $grey; } + .data-score-red { + color: #E26154; + } + .data-score-yellow { + color: #E5A219; + } + .data-score-green { + color: #749F4D; + } } .el-tabs__header { margin-bottom: 10px; diff --git a/src/components/layout/Header.vue b/src/components/layout/Header.vue index 31915931..b4ed1157 100644 --- a/src/components/layout/Header.vue +++ b/src/components/layout/Header.vue @@ -194,7 +194,7 @@ import { } from '@/utils/constants' import { api } from '@/utils/api' import { ref } from 'vue' -import { combineTabList, getDefaultCurTab, getTabList, overwriteUrl, urlParamsHandler } from '@/utils/tools' +import { combineTabList, getDefaultCurTab, getTabList, overwriteUrl, urlParamsHandler, combinDrilldownTableWithUserConfig } from '@/utils/tools' import { getNowTime, getSecond } from '@/utils/date-util' import { db } from '@/indexedDB' @@ -468,19 +468,7 @@ export default { async handleCurDrilldownTableConfig (thirdMenu, fourthMenu) { const userId = localStorage.getItem(storageKey.userId) const tableType = this.$route.params ? this.$route.params.typeName : 'networkOverview' - - // 先从localStorage中获取用户定制的自定义配置,如果没有,则使用默认的自定义配置 - const userLocalConfig = await db[dbDrilldownTableConfig].get({ id: userId }) - let drillDownTableConfigs = [] - if (userLocalConfig) { - drillDownTableConfigs = userLocalConfig.config - } - if (!drillDownTableConfigs || drillDownTableConfigs.length === 0) { // 未找到当前用户的配置,使用默认配置 - const defaultConfig = await db[dbDrilldownTableConfig].get({ id: 'default' }) - if (defaultConfig) { - drillDownTableConfigs = defaultConfig.config - } - } + const drillDownTableConfigs = await combinDrilldownTableWithUserConfig() const currentTableConfig = drillDownTableConfigs.find(config => config.route === tableType) const tables = currentTableConfig ? currentTableConfig.tables : [] const commonTabList = currentTableConfig ? currentTableConfig.tabs : [] @@ -499,10 +487,6 @@ export default { } } } - await db[dbDrilldownTableConfig].put({ - id: userId, - config: this.$_.cloneDeep(drillDownTableConfigs) - }) }, jump (route, columnName, columnValue, opeType) { this.showMenu = false diff --git a/src/store/modules/user.js b/src/store/modules/user.js index 3ca916b7..a05ce046 100644 --- a/src/store/modules/user.js +++ b/src/store/modules/user.js @@ -3,6 +3,7 @@ import router from '@/router' import { sortByOrderNum, getWelcomeMenu } from '@/permission' import { ElMessage } from 'element-plus' // dependent on utc plugin import { storageKey, dbDrilldownTableConfig } from '@/utils/constants' +import { readDrilldownTableConfigByUser } from '@/utils/tools' import { api } from '@/utils/api' import { db } from '@/indexedDB' @@ -11,7 +12,8 @@ const user = { return { menuList: [], buttonList: [], - roleList: [] + roleList: [], + drilldownTableConfigList: [] } }, mutations: { @@ -24,6 +26,9 @@ const user = { setRoleList (state, roleList) { state.roleList = [...roleList] }, + setDrilldownTableList (state, drilldownTableConfigList) { + state.drilldownTableConfigList = [...drilldownTableConfigList] + }, clean (state) { state.menuList = [] state.buttonList = [] @@ -39,6 +44,9 @@ const user = { }, roleList (state) { return state.roleList + }, + drilldownTableConfigList (state) { + return state.drilldownTableConfigList } }, actions: { @@ -82,13 +90,12 @@ const user = { }) get(api.config, { ckey: 'drill_down_table_config' }).then(async res => { if (res.code === 200 && res.page.list && res.page.list.length > 0) { + // 从接口返回整体配置,再读取用户缓存,将对应条目覆盖,作为使用的配置 + const defaultConfigs = JSON.parse(res.page.list[0].cvalue) await db[dbDrilldownTableConfig].put({ id: 'default', - config: JSON.parse(res.page.list[0].cvalue) + config: defaultConfigs }) - // const a = await db[dbDrilldownTableConfig].get({ id: 'default' }) - // console.info(a) - // localStorage.setItem(storageKey.drillDownTableConfig, res.page.list[0].cvalue) } }) get(api.config, { ckey: 'link_info' }).then(res => { diff --git a/src/utils/constants.js b/src/utils/constants.js index 60639425..a2436300 100644 --- a/src/utils/constants.js +++ b/src/utils/constants.js @@ -31,7 +31,7 @@ export const storageKey = { echartLegendFontSize: 'echartLegendFontSize', echartLabelFontSize: 'echartLabelFontSize', tokenExpireCurrentPath: 'token-expire-current-path', - drillDownTableConfig: 'cn-drill-down-table-config', + drillDownTableConfig: 'drilldownTableConfig', userCustomizationConfig: 'userCustomizationConfig', linkInfo: 'cn-link-info', history: 'cn-history' @@ -291,7 +291,7 @@ export const customTableTitlesForAppPerformance = [ { label: 'network.score', prop: 'score', checked: true, tabColumn: false, columnType: tableColumnType.normal }, { label: 'networkAppPerformance.throughput', - prop: 'totalBitsRate', + prop: 'totalBytes', checked: true, tabColumn: false, columnType: tableColumnType.chainRatio, @@ -379,7 +379,7 @@ export const customTableTitlesForLinkMonitor = [ { label: 'network.score', prop: 'score', checked: true, tabColumn: false, columnType: tableColumnType.normal }, { label: 'networkAppPerformance.throughput', - prop: 'totalBitsRate', + prop: 'totalBytes', checked: true, tabColumn: false, columnType: tableColumnType.chainRatio, @@ -475,7 +475,7 @@ export const customTableTitlesForDns = [ }, { label: 'dns.queriesFromIE', prop: 'totalInExNum', checked: true, tabColumn: true, columnType: tableColumnType.percent }, { label: 'dns.dnsResponseTime', prop: 'dnsResponseLatencyAvg', checked: true, tabColumn: true, columnType: tableColumnType.normal }, - { label: 'overall.throughput', prop: 'totalBitsRate', checked: true, tabColumn: true, columnType: tableColumnType.normal } + { label: 'overall.throughput', prop: 'totalBytes', checked: true, tabColumn: true, columnType: tableColumnType.normal } ] // NetworkOverview类型表格的列:prop 为接口响应数据中的属性名 export const customTableTitlesForNetworkOverview = [ @@ -1041,7 +1041,7 @@ export const dnsServiceInsightsTabList = [ // 用于组织数据时的名称,对应的属性名称 export const bytesColumnNameGroupForNpm = { - totalBitsRate: 'totalBitsRate', + totalBytes: 'totalBytes', tcpConEstLatency: 'establishLatencyMs', packetLoss: 'tcpLostlenPercent', packetRetrans: 'pktRetransPercent', @@ -1050,7 +1050,7 @@ export const bytesColumnNameGroupForNpm = { } export const bytesCycleColumnNameGroupForNpm = { - totalBitsRate: 'totalBitsRate' + totalBytes: 'totalBytes' } // 用于组织数据时的名称,对应的属性名称 @@ -1058,7 +1058,7 @@ export const bytesColumnNameGroupForDns = { queryRate: 'queryRate', totalInExNum: 'totalInternalQueryNum,totalExternalQueryNum', dnsResponseLatencyAvg: 'dnsResponseLatencyAvg', - totalBitsRate: 'totalBitsRate' + totalBytes: 'totalBytes' } export const bytesCycleColumnNameGroupForDns = { @@ -1067,14 +1067,14 @@ export const bytesCycleColumnNameGroupForDns = { // networkOverview 当前周期返回数据对应的属性名称(与上一周期中的属性名称不一致,total),之所以写在这里是因为有byte,packets,sessions3种,如果只有一种,可以直接写在customTableTitlesForAppPerformance export const bytesColumnNameGroup = { - total: 'bytesTotalRate', + total: 'totalBitsRate', inbound: 'inboundBitsRate', outbound: 'outboundBitsRate', internal: 'internalBitsRate', through: 'throughBitsRate' } export const packetsColumnNameGroup = { - total: 'packetsTotalRate', + total: 'totalPacketsRate', inbound: 'inboundPacketsRate', outbound: 'outboundPacketsRate', internal: 'internalPacketsRate', @@ -1085,7 +1085,7 @@ export const sessionsColumnNameGroup = { } export const bytesCycleColumnNameGroup = { - total: 'bytesRate' + total: 'bitsRate' } export const packetsCycleColumnNameGroup = { total: 'packetsRate' diff --git a/src/utils/tools.js b/src/utils/tools.js index 36a32bf7..499d8b92 100644 --- a/src/utils/tools.js +++ b/src/utils/tools.js @@ -853,30 +853,27 @@ export function combineTabList (tableType, list, commonTabList) { const listInCode = curTableInCode ? curTableInCode.tabList : [] list.forEach(tab => { // 配置的内容 + const tabName = tab ? (tab.name ? tab.name : tab) : '' + // 配置的内容 + const commonTab = commonTabList.find(item => item.name === tabName) + tab.label = commonTab ? commonTab.i18n : '' + tab.prop = commonTab ? commonTab.prop : '' 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')) { - 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 : [] + 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) { @@ -893,45 +890,92 @@ export function setUserConfig () { this.list = newTabConfigs } } - +*/ 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 = [] - // 先从localStorage中获取用户定制的自定义配置,如果没有,则使用默认的自定义配置 +export async function readDrilldownTableConfigByUser (tableType, curMetric) { + // 获取用户定制的自定义配置 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 + return defaultDrillDownTableConfigs +} + +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) + tab.hiddenDrilldownTabs = newTab.hiddenDrilldownTabs + tab.checked = newTab.checked + }) + } + }) + } + return defaultConfigs +} + +/* +export async function readDrilldownTableConfigByUser2 (tableType, curMetric) { + let list = [] + // 获取用户定制的自定义配置,如果没有,则使用默认的自定义配置 + 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){ + 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) + } + } } } - const currentTableConfig = defaultDrillDownTableConfigs.find(config => config.route === tableType) + return list +} +*/ +export async function getUserDrilldownTableConfig (tableType, curMetric) { + let list = [] + // 获取用户定制的自定义配置,如果没有,则使用默认的自定义配置 + const drillDownTableConfigs = await combinDrilldownTableWithUserConfig() + const currentTableConfig = drillDownTableConfigs.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 : [] - } + list = curTable ? curTable.tabs : [] combineTabList(tableType, list, commonTabList) } } diff --git a/src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue b/src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue index e1631c6f..f61653ab 100644 --- a/src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue +++ b/src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue @@ -74,7 +74,7 @@