fix: 更改link下钻折线图字段

This commit is contained in:
chenjinsong
2022-10-13 16:14:15 +08:00
parent 1273dc91af
commit 9d2a905f07
4 changed files with 26 additions and 6363 deletions

File diff suppressed because one or more lines are too long

View File

@@ -35,7 +35,7 @@ import { get } from '@/utils/http'
import { api } from '@/utils/api' import { api } from '@/utils/api'
import { getSecond } from '@/utils/date-util' import { getSecond } from '@/utils/date-util'
import { useRoute } from 'vue-router' import { useRoute } from 'vue-router'
import { overwriteUrl, urlParamsHandler, ingress, egress } from '@/utils/tools' import { overwriteUrl, urlParamsHandler } from '@/utils/tools'
import unitConvert from '@/utils/unit-convert' import unitConvert from '@/utils/unit-convert'
import { storageKey, unitTypes } from '@/utils/constants' import { storageKey, unitTypes } from '@/utils/constants'

View File

@@ -2,11 +2,11 @@
<div class="link-traffic-list"> <div class="link-traffic-list">
<div class="link-traffic-list-center"> <div class="link-traffic-list-center">
<div class="link-traffic-list-center-label">{{$t('network.total')}}</div> <div class="link-traffic-list-center-label">{{$t('network.total')}}</div>
<div class="link-traffic-list-center-value">{{unitConvert(linkTrafficListData.bytesTotal, unitTypes.bps).join('')}}</div> <div class="link-traffic-list-center-value">{{unitConvert(linkTrafficListData.totalBitsRate, unitTypes.bps).join('')}}</div>
</div> </div>
<div class="link-traffic-list-center"> <div class="link-traffic-list-center">
<div class="link-traffic-list-center-label">{{$t('linkMonitor.bandwidthUsage')}}</div> <div class="link-traffic-list-center-label">{{$t('linkMonitor.bandwidthUsage')}}</div>
<div class="link-traffic-list-center-value" v-if="bandWidth">{{unitConvert(linkTrafficListData.bytesTotal / bandWidth, unitTypes.percent).join('')}}</div> <div class="link-traffic-list-center-value" v-if="bandWidth">{{unitConvert(linkTrafficListData.totalBitsRate / bandWidth, unitTypes.percent).join('')}}</div>
<div class="link-traffic-list-center-value" v-else>-</div> <div class="link-traffic-list-center-value" v-else>-</div>
</div> </div>
<div class="link-traffic-list-center"> <div class="link-traffic-list-center">

View File

@@ -274,7 +274,7 @@ export default {
watch: { watch: {
timeFilter: { timeFilter: {
handler (n) { handler (n) {
console.log('watch') // console.log('watch')
const curTab = this.getCurTab() const curTab = this.getCurTab()
let queryParams = { let queryParams = {
orderBy: this.orderBy, orderBy: this.orderBy,
@@ -378,7 +378,7 @@ export default {
} }
}, },
initState () { initState () {
console.log('InitState开始') // console.log('InitState开始')
let curTab = this.getCurTab() let curTab = this.getCurTab()
if (curTab) { // 显示当前tab if (curTab) { // 显示当前tab
const realTab = this.list.find(item => item.label === curTab.label) const realTab = this.list.find(item => item.label === curTab.label)
@@ -533,7 +533,7 @@ export default {
this.showCustomizeTabs = true this.showCustomizeTabs = true
} }
this.changeUrlTabState() this.changeUrlTabState()
console.log('InitState: 结束') // console.log('InitState: 结束')
}, },
initData () { initData () {
const tabList = [] const tabList = []
@@ -1129,7 +1129,7 @@ export default {
5.设置panel名称表格维度类型如ipdomain等(即查询参数中的type) 5.设置panel名称表格维度类型如ipdomain等(即查询参数中的type)
* */ * */
handleTabValue (columnName, columnValue) { handleTabValue (columnName, columnValue) {
console.log('NetworkOverview类------handleTabValue下钻') // console.log('NetworkOverview类------handleTabValue下钻')
const clickTab = this.getTabByLabel(columnName)// 下钻后显示的下钻tab对应的drilldownTabs const clickTab = this.getTabByLabel(columnName)// 下钻后显示的下钻tab对应的drilldownTabs
this.setBeforeTab(clickTab) this.setBeforeTab(clickTab)
this.setOperationType(operationType.fourthMenu) this.setOperationType(operationType.fourthMenu)
@@ -1163,7 +1163,7 @@ export default {
}) })
} }
this.saveUserLocalConfig() this.saveUserLocalConfig()
console.log(this.drillDownTableConfigs) // console.log(this.drillDownTableConfigs)
this.$store.getters.menuList.forEach(menu => { this.$store.getters.menuList.forEach(menu => {
if (this.$_.isEmpty(menu.children) && menu.route) { if (this.$_.isEmpty(menu.children) && menu.route) {
if (this.$route.path === menu.route) { if (this.$route.path === menu.route) {
@@ -1453,7 +1453,7 @@ export default {
return curTab return curTab
}, },
combineTabList (tabList) { combineTabList (tabList) {
console.log('CombineTabList开始') // console.log('CombineTabList开始')
let listInCode = this.curTableInCode ? this.curTableInCode.tabList : [] let listInCode = this.curTableInCode ? this.curTableInCode.tabList : []
tabList.forEach(tab => { tabList.forEach(tab => {
let tabName = tab ? (tab.name ? tab.name : tab) : '' let tabName = tab ? (tab.name ? tab.name : tab) : ''
@@ -1509,10 +1509,10 @@ export default {
} }
}) })
//} //}
console.log('CombineTabList结束') // console.log('CombineTabList结束')
}, },
combineColumnList (tabLabel) { combineColumnList (tabLabel) {
console.log('CombineColumnList开始') // console.log('CombineColumnList开始')
const allTabs = this.getAllTabList() const allTabs = this.getAllTabList()
const curTab = allTabs.find(item => item.label === tabLabel) const curTab = allTabs.find(item => item.label === tabLabel)
const customTableTitles = curTab ? curTab.columns : [] const customTableTitles = curTab ? curTab.columns : []
@@ -1553,12 +1553,11 @@ export default {
} }
} }
console.log('CombineColumnList结束') // console.log('CombineColumnList结束')
}, },
async getUserLocalConfig () { async getUserLocalConfig () {
const userLocalCongfig = await db[dbDrilldownTableConfig].get({ id: this.userId }) const userLocalCongfig = await db[dbDrilldownTableConfig].get({ id: this.userId })
if (userLocalCongfig) { if (userLocalCongfig) {
console.info(userLocalCongfig.config)
return userLocalCongfig.config return userLocalCongfig.config
} else { } else {
return null return null
@@ -1582,13 +1581,13 @@ export default {
return isSetDrilldownTabInfo return isSetDrilldownTabInfo
}, },
async saveUserLocalConfig () { async saveUserLocalConfig () {
console.log('SaveUserLocalConfig方法开始') // console.log('SaveUserLocalConfig方法开始')
console.log(this.drillDownTableConfigs) // console.log(this.drillDownTableConfigs)
await db[dbDrilldownTableConfig].put({ await db[dbDrilldownTableConfig].put({
id: this.userId, id: this.userId,
config: this.$_.cloneDeep(this.drillDownTableConfigs) config: this.$_.cloneDeep(this.drillDownTableConfigs)
}) })
console.log('SaveUserLocalConfig方法结束') // console.log('SaveUserLocalConfig方法结束')
}, },
getAllTabList () { getAllTabList () {
let tabs = [] let tabs = []
@@ -1636,7 +1635,7 @@ export default {
} }
}, },
async mounted () { async mounted () {
console.log('Mounted开始') // console.log('Mounted开始')
this.userId = localStorage.getItem(storageKey.userId) this.userId = localStorage.getItem(storageKey.userId)
this.tableType = this.$route.params ? this.$route.params.typeName : 'networkOverview' this.tableType = this.$route.params ? this.$route.params.typeName : 'networkOverview'
this.curTableInCode = this.networkTable[this.tableType] ? this.networkTable[this.tableType] : this.networkTable.networkOverview this.curTableInCode = this.networkTable[this.tableType] ? this.networkTable[this.tableType] : this.networkTable.networkOverview
@@ -1651,16 +1650,16 @@ export default {
const userLocalCongfig = await db[dbDrilldownTableConfig].get({ id: this.userId }) const userLocalCongfig = await db[dbDrilldownTableConfig].get({ id: this.userId })
if (userLocalCongfig) { if (userLocalCongfig) {
this.drillDownTableConfigs = userLocalCongfig.config this.drillDownTableConfigs = userLocalCongfig.config
console.log(this.drillDownTableConfigs) // console.log(this.drillDownTableConfigs)
} }
if (!this.drillDownTableConfigs || this.drillDownTableConfigs.length === 0) { // 未找到当前用户的配置,使用默认配置 if (!this.drillDownTableConfigs || this.drillDownTableConfigs.length === 0) { // 未找到当前用户的配置,使用默认配置
const defaultCongfig = await db[dbDrilldownTableConfig].get({ id: 'default' }) const defaultCongfig = await db[dbDrilldownTableConfig].get({ id: 'default' })
if (defaultCongfig) { if (defaultCongfig) {
this.drillDownTableConfigs = defaultCongfig.config this.drillDownTableConfigs = defaultCongfig.config
console.log(this.drillDownTableConfigs) // console.log(this.drillDownTableConfigs)
} }
} }
console.log(this.drillDownTableConfigs) // console.log(this.drillDownTableConfigs)
const currentTableConfig = this.drillDownTableConfigs.find(config => config.route === this.tableType) const currentTableConfig = this.drillDownTableConfigs.find(config => config.route === this.tableType)
// 开始设置当前table当前tab当前tab对应的列等信息 // 开始设置当前table当前tab当前tab对应的列等信息
this.commonTabList = currentTableConfig ? currentTableConfig.tabs : [] this.commonTabList = currentTableConfig ? currentTableConfig.tabs : []
@@ -1679,8 +1678,8 @@ export default {
} }
const drilldownTab = tabList.find(item => item.label === thirdMenu) const drilldownTab = tabList.find(item => item.label === thirdMenu)
this.list = drilldownTab ? drilldownTab.drilldownTabs : [] this.list = drilldownTab ? drilldownTab.drilldownTabs : []
console.log('下钻list') // console.log('下钻list')
console.log(this.list) // console.log(this.list)
this.allList = this.$_.cloneDeep(tabList)// 备份所有配置,下钻及返回时使用 this.allList = this.$_.cloneDeep(tabList)// 备份所有配置,下钻及返回时使用
const curTab = this.getCurTab()// 初始化完list才能正确执行 const curTab = this.getCurTab()// 初始化完list才能正确执行
const curTabColumns = tabList.find(item => item.prop === curTab.prop) const curTabColumns = tabList.find(item => item.prop === curTab.prop)
@@ -1693,8 +1692,8 @@ export default {
this.combineTabList(this.list) this.combineTabList(this.list)
} }
this.allList = this.$_.cloneDeep(this.list)// 备份所有配置,下钻及返回时使用 this.allList = this.$_.cloneDeep(this.list)// 备份所有配置,下钻及返回时使用
console.log('未下钻list') // console.log('未下钻list')
console.log(this.list) // console.log(this.list)
if (this.list && this.list.length > 0) { if (this.list && this.list.length > 0) {
const curTab = this.getCurTab()// 初始化完list才能正确执行 const curTab = this.getCurTab()// 初始化完list才能正确执行
this.combineColumnList(curTab.label) this.combineColumnList(curTab.label)
@@ -1725,16 +1724,16 @@ export default {
this.hasMetricSearch = this.curTable.hasMetricSearch this.hasMetricSearch = this.curTable.hasMetricSearch
}, 250) }, 250)
}) })
console.log('Mounted结束') // console.log('Mounted结束')
}, },
setup (props) { setup (props) {
}, },
unmounted () { unmounted () {
console.log('Unmounted方法开始') // console.log('Unmounted方法开始')
this.isNoData = false this.isNoData = false
// 存储用户的设置 // 存储用户的设置
this.saveUserLocalConfig() this.saveUserLocalConfig()
console.log('Unmounted方法结束') // console.log('Unmounted方法结束')
} }
} }
</script> </script>