gfwleak/cyber-narrator-cn-ui
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CN-754 下钻table的一些bug

Browse Source
This commit is contained in:
hyx
2022-10-21 10:08:49 +08:00
parent 2a6958f61b
commit a87b096c1c
2 changed files with 126 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/utils/constants.js
View File

@@ -953,7 +953,7 @@ export const dnsServiceInsightsTabList = [
prop: 'dnsServerRole', prop: 'dnsServerRole',
queryCycleTotalProp: 'roles', queryCycleTotalProp: 'roles',
dillDownProp: ['dns_server_role'], dillDownProp: ['dns_server_role'],
queryCondition:['has(dns_server_role,\'$param\')'], queryCondition: ['has(dns_server_role,\'$param\')'],
checked: true, checked: true,
disabled: false, disabled: false,
panelId: drillDownPanelTypeMapping.dnsFourthMenu panelId: drillDownPanelTypeMapping.dnsFourthMenu

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

@@ -90,10 +90,10 @@
</template> </template>
<template v-else> <template v-else>
<template v-if="showUnit && item.unit"> <template v-if="showUnit && item.unit">
{{scope.row[item.prop] ? unitConvert(scope.row[item.prop], item.unit).join(' ') : '-'}} {{(scope.row[item.prop] || scope.row[item.prop]===0) ? unitConvert(scope.row[item.prop], item.unit).join(' ') : '-'}}
</template> </template>
<template v-else> <template v-else>
{{scope.row[item.prop] ? unitConvert(scope.row[item.prop], unitTypes.number).join(' ') : '-'}} {{(scope.row[item.prop] || scope.row[item.prop]===0)? unitConvert(scope.row[item.prop], unitTypes.number).join(' ') : '-'}}
</template> </template>
</template> </template>
</template> </template>
@@ -541,6 +541,7 @@ export default {
const tableDataTmp = this.chartData.map(item => { const tableDataTmp = this.chartData.map(item => {
tabList.push(item[curTab.prop]) tabList.push(item[curTab.prop])
const otherData = { tab: item[curTab.prop] } const otherData = { tab: item[curTab.prop] }
otherData[curTab.prop] = item[curTab.prop]
Object.keys(this.columnNameGroup).forEach(i => { Object.keys(this.columnNameGroup).forEach(i => {
const propName = this.columnNameGroup[i] const propName = this.columnNameGroup[i]
const column = this.customTableTitles.find(tableColumn => { return tableColumn.prop === i }) const column = this.customTableTitles.find(tableColumn => { return tableColumn.prop === i })
@@ -615,7 +616,7 @@ export default {
trend = '' trend = ''
trendPercent = '' trendPercent = ''
} else { } else {
trendPercent = Math.round(Math.abs(chainRatio) * 100) trendPercent = parseFloat(Math.abs(chainRatio) * 100).toFixed(2)
if (totalDiff > 0) { if (totalDiff > 0) {
trend = 'up' trend = 'up'
if (trendPercent <= 500) { if (trendPercent <= 500) {
@@ -642,7 +643,7 @@ export default {
} }
} }
} }
item[tableColumn.prop] = [item[tableColumn.prop] ? item[tableColumn.prop] : '', trend, trendPercent] item[tableColumn.prop] = [(item[tableColumn.prop] || item[tableColumn.prop] === 0) ? item[tableColumn.prop] : '', trend, trendPercent]
}) })
} }
}).catch(e => { }).catch(e => {
@@ -714,7 +715,7 @@ export default {
trend = '' trend = ''
trendPercent = '' trendPercent = ''
} else { } else {
trendPercent = Math.round(Math.abs(chainRatio) * 100) trendPercent = parseFloat(Math.abs(chainRatio) * 100).toFixed(2)
if (totalDiff > 0) { if (totalDiff > 0) {
trend = 'up' trend = 'up'
if (trendPercent <= 500) { if (trendPercent <= 500) {
@@ -742,7 +743,7 @@ export default {
} }
} }
if (!(item[tableColumn.prop] && item[tableColumn.prop].length >= 3)) { if (!(item[tableColumn.prop] && item[tableColumn.prop].length >= 3)) {
item[tableColumn.prop] = [item[tableColumn.prop] ? item[tableColumn.prop] : '', trend, trendPercent] item[tableColumn.prop] = [(item[tableColumn.prop] || item[tableColumn.prop] === 0) ? item[tableColumn.prop] : '', trend, trendPercent]
} }
}) })
} }
@@ -757,6 +758,8 @@ export default {
} }
}) })
} else { } else {
this.tableData = tableDataTmp
this.tableDataBackup = tableDataTmp
this.toggleLoading(false) this.toggleLoading(false)
} }
this.changeUrlTabState() this.changeUrlTabState()
@@ -806,96 +809,96 @@ export default {
this.tableData.slice(0, this.showRecordNum).forEach(val => { this.tableData.slice(0, this.showRecordNum).forEach(val => {
arr.push(val) arr.push(val)
}) })
if (column.prop != 'tab') { if (column.order == 'descending') {
if (column.order == 'descending') { arr.sort((a, b) => {
arr.sort((a, b) => { const str1 = Array.isArray(a[column.prop]) ? a[column.prop][0] : a[column.prop]
const str1 = Array.isArray(a[column.prop]) ? a[column.prop][0] : a[column.prop] const str2 = Array.isArray(b[column.prop]) ? b[column.prop][0] : b[column.prop]
const str2 = Array.isArray(b[column.prop]) ? b[column.prop][0] : b[column.prop] if ((_.isNumber(str1)) || str1 === '') {
return str2 - str1 return str2 - str1
})
if (this.tableData.length - 1 > this.showRecordNum) {
this.tableData = arr.concat(this.tableDataBackup.slice(this.showRecordNum))
} else { } else {
this.tableData = arr let aObj = a[column.prop] ? a[column.prop] : a[index]
let bObj = b[column.prop] ? b[column.prop] : b[index]
if (!aObj) {
const curTab = this.getCurTab()
aObj = a[curTab.prop]
bObj = b[curTab.prop]
}
let res = 0
if (aObj && bObj) {
const len = aObj.length < bObj.length ? aObj.length : bObj.length
for (let i = 0; i < len; i++) {
const char1 = aObj[i]
const char2 = bObj[i]
const char1Type = this.getChartType(char1)
const char2Type = this.getChartType(char2)
if (char1 === char2) {
continue
} else {
if (char1Type[0] === 'zh') {
res = char2.localeCompare(char1)
} else if (char1Type[0] === 'en') {
res = char2.charCodeAt(0) - char1.charCodeAt(0)
} else {
res = char2 - char1
}
break
}
}
}
return res
} }
} else if (column.order == 'ascending') { })
arr.sort((a, b) => { if (this.tableData.length - 1 > this.showRecordNum) {
const str1 = Array.isArray(a[column.prop]) ? a[column.prop][0] : a[column.prop] this.tableData = arr.concat(this.tableDataBackup.slice(this.showRecordNum))
const str2 = Array.isArray(b[column.prop]) ? b[column.prop][0] : b[column.prop] } else {
this.tableData = arr
}
} else if (column.order == 'ascending') {
arr.sort((a, b) => {
const str1 = Array.isArray(a[column.prop]) ? a[column.prop][0] : a[column.prop]
const str2 = Array.isArray(b[column.prop]) ? b[column.prop][0] : b[column.prop]
if ((_.isNumber(str1)) || str1 === '') {
return str1 - str2 return str1 - str2
})
if (this.tableData.length - 1 > this.showRecordNum) {
this.tableData = arr.concat(this.tableDataBackup.slice(this.showRecordNum))
} else { } else {
this.tableData = arr let aObj = a[column.prop] ? a[column.prop] : a[index]
} let bObj = b[column.prop] ? b[column.prop] : b[index]
} else if (!column.order) { if (!aObj) {
this.tableData = this.tableDataBackup const curTab = this.getCurTab()
} aObj = a[curTab.prop]
} else { bObj = b[curTab.prop]
if (column.order == 'descending') { }
arr.sort((a, b) => {
const aObj = a[column.prop]
const bObj = b[column.prop]
let res = 0 let res = 0
for (let i = 0; ; i++) { if (aObj && bObj) {
const char1 = aObj[i] const len = aObj.length < bObj.length ? aObj.length : bObj.length
const char2 = bObj[i] for (let i = 0; i < len; i++) {
const char1Type = this.getChartType(char1) const char1 = aObj[i]
const char2Type = this.getChartType(char2) const char2 = bObj[i]
if (char1 === char2) { const char1Type = this.getChartType(char1)
continue const char2Type = this.getChartType(char2)
} else { if (char1 === char2) {
if (char1Type[0] === 'zh') { continue
res = char2.localeCompare(char1)
} else if (char1Type[0] === 'en') {
res = char2.charCodeAt(0) - char1.charCodeAt(0)
} else { } else {
res = char2 - char1 if (char1Type[0] === 'zh') {
res = char1.localeCompare(char2)
} else if (char1Type[0] === 'en') {
res = char1.charCodeAt(0) - char2.charCodeAt(0)
} else {
res = char1 - char2
}
break
} }
break
} }
} }
return res return res
})
if (this.tableData.length - 1 > this.showRecordNum) {
this.tableData = arr.concat(this.tableDataBackup.slice(this.showRecordNum))
} else {
this.tableData = arr
} }
} else if (column.order == 'ascending') { })
arr.sort((a, b) => { if (this.tableData.length - 1 > this.showRecordNum) {
const aObj = a[column.prop] this.tableData = arr.concat(this.tableDataBackup.slice(this.showRecordNum))
const bObj = b[column.prop] } else {
let res = 0 this.tableData = arr
for (let i = 0; ; i++) {
const char1 = aObj[i]
const char2 = bObj[i]
const char1Type = this.getChartType(char1)
const char2Type = this.getChartType(char2)
if (char1 === char2) {
continue
} else {
if (char1Type[0] === 'zh') {
res = char1.localeCompare(char2)
} else if (char1Type[0] === 'en') {
res = char1.charCodeAt(0) - char2.charCodeAt(0)
} else {
res = char1 - char2
}
break
}
}
return res
})
if (this.tableData.length - 1 > this.showRecordNum) {
this.tableData = arr.concat(this.tableDataBackup.slice(this.showRecordNum))
} else {
this.tableData = arr
}
} else if (!column.order) {
this.tableData = this.tableDataBackup
} }
} else if (!column.order) {
this.tableData = this.tableDataBackup
} }
}, },
// 切换metric：bit、packet、session // 切换metric：bit、packet、session
@@ -1105,12 +1108,12 @@ export default {
} }
this.urlChangeParams[this.curTabState.queryCondition] = queryCondition.join(' AND ') this.urlChangeParams[this.curTabState.queryCondition] = queryCondition.join(' AND ')
} else { } else {
if(tab.queryCondition){ if (tab.queryCondition) {
tab.queryCondition.forEach(item => { tab.queryCondition.forEach(item => {
queryCondition.push(item.replace('$param',value)) queryCondition.push(item.replace('$param', value))
}) })
}else { } else {
if(tab.dillDownProp){ if (tab.dillDownProp) {
tab.dillDownProp.forEach(item => { tab.dillDownProp.forEach(item => {
queryCondition.push(item + "='" + value + "'") queryCondition.push(item + "='" + value + "'")
}) })
@@ -1217,20 +1220,18 @@ export default {
} }
this.urlChangeParams[this.curTabState.queryCondition] = queryCondition.join(' AND ') this.urlChangeParams[this.curTabState.queryCondition] = queryCondition.join(' AND ')
} else { } else {
if(curTab.queryCondition){ if (curTab.queryCondition) {
curTab.queryCondition.forEach(item => { curTab.queryCondition.forEach(item => {
queryCondition.push(item.replace('$param',columnValue)) queryCondition.push(item.replace('$param', columnValue))
}) })
}else { } else {
if(curTab.dillDownProp){ if (curTab.dillDownProp) {
curTab.dillDownProp.forEach(item => { curTab.dillDownProp.forEach(item => {
queryCondition.push(item + "='" + columnValue + "'") queryCondition.push(item + "='" + columnValue + "'")
}) })
} }
} }
this.urlChangeParams[this.curTabState.queryCondition] = queryCondition.join(' OR ') this.urlChangeParams[this.curTabState.queryCondition] = queryCondition.join(' OR ')
} }
}, },
@@ -1494,40 +1495,40 @@ export default {
}) })
// 设置drilldownTabs：未下钻状态设置，已下钻状态无需设置 // 设置drilldownTabs：未下钻状态设置，已下钻状态无需设置
let thirdMenu = this.getUrlParam(this.curTabState.thirdMenu, '') let thirdMenu = this.getUrlParam(this.curTabState.thirdMenu, '')
//if (!thirdMenu) { // if (!thirdMenu) {
let oldList = this.$_.cloneDeep(tabList) let oldList = this.$_.cloneDeep(tabList)
tabList.forEach(tab => { tabList.forEach(tab => {
let drilldownTabFull = [] let drilldownTabFull = []
let drilldownTabList = tab.drilldownTabs let drilldownTabList = tab.drilldownTabs
drilldownTabList.forEach(drilldownTab => { drilldownTabList.forEach(drilldownTab => {
if (!drilldownTab.hasOwnProperty('name') || drilldownTab.name === undefined || drilldownTab.name === null) { if (!drilldownTab.hasOwnProperty('name') || drilldownTab.name === undefined || drilldownTab.name === null) {
let drilldownTabName = drilldownTab || '' let drilldownTabName = drilldownTab || ''
let fullTab = oldList.find(item => item.name === drilldownTabName) let fullTab = oldList.find(item => item.name === drilldownTabName)
let drilldownTabWithAllInfo = this.$_.cloneDeep(fullTab) let drilldownTabWithAllInfo = this.$_.cloneDeep(fullTab)
if (drilldownTabWithAllInfo) { if (drilldownTabWithAllInfo) {
let commonTab = this.commonTabList.find(item => item.name === drilldownTabName) let commonTab = this.commonTabList.find(item => item.name === drilldownTabName)
drilldownTabWithAllInfo.label = commonTab ? commonTab.i18n : '' drilldownTabWithAllInfo.label = commonTab ? commonTab.i18n : ''
drilldownTabWithAllInfo.prop = commonTab ? commonTab.prop : '' drilldownTabWithAllInfo.prop = commonTab ? commonTab.prop : ''
//if (!drilldownTabWithAllInfo.hasOwnProperty('checked') || drilldownTabWithAllInfo.checked === undefined || drilldownTabWithAllInfo.checked === null) { // if (!drilldownTabWithAllInfo.hasOwnProperty('checked') || drilldownTabWithAllInfo.checked === undefined || drilldownTabWithAllInfo.checked === null) {
drilldownTabWithAllInfo.checked = !((tab.hiddenDrilldownTabs.indexOf(drilldownTabName) >= 0)) drilldownTabWithAllInfo.checked = !((tab.hiddenDrilldownTabs.indexOf(drilldownTabName) >= 0))
//} // }
//if (!drilldownTabWithAllInfo.hasOwnProperty('disabled') || drilldownTabWithAllInfo.disabled === undefined || drilldownTabWithAllInfo.disabled === null) { // if (!drilldownTabWithAllInfo.hasOwnProperty('disabled') || drilldownTabWithAllInfo.disabled === undefined || drilldownTabWithAllInfo.disabled === null) {
drilldownTabWithAllInfo.disabled = (tab.disabledDrilldownTabs.indexOf(drilldownTabName) >= 0) drilldownTabWithAllInfo.disabled = (tab.disabledDrilldownTabs.indexOf(drilldownTabName) >= 0)
//} // }
// 代码里写死的 // 代码里写死的
let tabInCode = listInCode ? listInCode.find(item => item.label === fullTab.label) : {} let tabInCode = listInCode ? listInCode.find(item => item.label === fullTab.label) : {}
drilldownTabWithAllInfo.queryCycleTotalProp = tabInCode ? tabInCode.queryCycleTotalProp : null drilldownTabWithAllInfo.queryCycleTotalProp = tabInCode ? tabInCode.queryCycleTotalProp : null
drilldownTabWithAllInfo.dillDownProp = tabInCode ? tabInCode.dillDownProp : [] drilldownTabWithAllInfo.dillDownProp = tabInCode ? tabInCode.dillDownProp : []
drilldownTabWithAllInfo.queryCondition = tabInCode ? tabInCode.queryCondition : [] drilldownTabWithAllInfo.queryCondition = tabInCode ? tabInCode.queryCondition : []
drilldownTabFull.push(drilldownTabWithAllInfo) drilldownTabFull.push(drilldownTabWithAllInfo)
}
} }
})
if (drilldownTabFull.length > 0) {
tab.drilldownTabs = drilldownTabFull
} }
}) })
//} if (drilldownTabFull.length > 0) {
tab.drilldownTabs = drilldownTabFull
}
})
// }
// console.log('CombineTabList：结束') // console.log('CombineTabList：结束')
}, },
combineColumnList (tabLabel) { combineColumnList (tabLabel) {