CN-247 流量统计页面-APP分析统计图表配置
This commit is contained in:
hanyuxia
@@ -6,7 +6,7 @@
|
||||
style="width: 100%;border: 1px solid #E7EAED"
|
||||
:row-key="getRowKey"
|
||||
@expand-change="currentChange"
|
||||
current-row-key="domain"
|
||||
:current-row-key="tableNameColumn"
|
||||
tooltip-effect="light"
|
||||
:expand-row-keys="expandRowKeys"
|
||||
:size="'mini'"
|
||||
@@ -37,7 +37,10 @@
|
||||
:prop="item.prop"
|
||||
#default="{row}">
|
||||
<span v-if="item.prop === 'nameColumn'">
|
||||
{{ nameColumn === 'fqdnCategoryName' ? row['fqdnCategoryName'] : row['reputationLevel'] }}
|
||||
{{ nameColumn === 'fqdnCategoryName' ? row['fqdnCategoryName'] :(nameColumn === 'fqdnReputationLevel'? row['fqdnReputationLevel']:(nameColumn==='appCategory'?row['appCategory']:row['appRisk']))}}
|
||||
</span>
|
||||
<span v-else-if="item.prop === 'tableNameColumn'">
|
||||
{{ tableNameColumn === 'appName' ? row['appName'] : row['domain']}}
|
||||
</span>
|
||||
<span v-else-if="item.prop === 'bytes'">
|
||||
{{unitConvert(row[item.prop], unitTypes.byte).join(' ')}}
|
||||
@@ -58,11 +61,14 @@
|
||||
:key="index"
|
||||
show-overflow-tooltip
|
||||
:min-width="item.width"
|
||||
:label="item.label"
|
||||
:label="(tableNameColumn === 'appName'&& item.prop === 'tableNameColumn')? $t('overall.appName'):item.label"
|
||||
:prop="item.prop"
|
||||
#default="{row}">
|
||||
<span v-if="item.prop === 'nameColumn'">
|
||||
{{ nameColumn === 'fqdnCategoryName' ? row['categoryName'] : row['reputationLevel'] }}
|
||||
{{ nameColumn === 'fqdnCategoryName' ? row['categoryName'] :(nameColumn === 'fqdnReputationLevel'? row['reputationLevel']:(nameColumn==='appCategory'?row['appCategory']:row['appRisk']))}}
|
||||
</span>
|
||||
<span v-else-if="item.prop === 'tableNameColumn'">
|
||||
{{ tableNameColumn === 'appName' ? row['appName'] : row['domain']}}
|
||||
</span>
|
||||
<span v-else-if="item.prop === 'bytes'">
|
||||
{{unitConvert(row[item.prop], unitTypes.byte).join(' ')}}
|
||||
@@ -108,6 +114,7 @@ export default {
|
||||
handler (n) {
|
||||
if (n && n.params) {
|
||||
this.nameColumn = n.params.nameColumn
|
||||
this.tableNameColumn = n.params.tableNameColumn
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -115,13 +122,14 @@ export default {
|
||||
data () {
|
||||
return {
|
||||
nameColumn: '',
|
||||
tableNameColumn: '',
|
||||
pieTableData: [],
|
||||
childrenTableData: [],
|
||||
expandRowKeys: [],
|
||||
tableTitles: [
|
||||
{
|
||||
label: this.$t('overall.domain'),
|
||||
prop: 'domain',
|
||||
prop: 'tableNameColumn', // 'domain'
|
||||
width: '20%'
|
||||
},
|
||||
{
|
||||
@@ -179,21 +187,43 @@ export default {
|
||||
currentChange (row, expandedRows) {
|
||||
this.loading = true
|
||||
this.childrenTableData = []
|
||||
|
||||
if (this.tableNameColumn === 'appName') {
|
||||
if (this.expandRowKeys[0] && (row.appName === this.expandRowKeys[0])) {
|
||||
this.expandRowKeys = []
|
||||
} else {
|
||||
this.expandRowKeys = [row.appName]
|
||||
}
|
||||
} else {
|
||||
if (this.expandRowKeys[0] && (row.domain === this.expandRowKeys[0])) {
|
||||
this.expandRowKeys = []
|
||||
} else {
|
||||
this.expandRowKeys = [row.domain]
|
||||
}
|
||||
}
|
||||
|
||||
const url = this.chartInfo.params.urlChildrenTable
|
||||
const queryParams = {
|
||||
let queryParams = {
|
||||
startTime: parseInt(this.timeFilter.startTime / 1000),
|
||||
endTime: parseInt(this.timeFilter.endTime / 1000),
|
||||
order: this.order,
|
||||
domain: row.domain,
|
||||
limit: 10
|
||||
}
|
||||
if (this.tableNameColumn === 'appName') {
|
||||
queryParams = {
|
||||
startTime: parseInt(this.timeFilter.startTime / 1000),
|
||||
endTime: parseInt(this.timeFilter.endTime / 1000),
|
||||
order: this.order,
|
||||
appName: row.appName,
|
||||
limit: 10
|
||||
}
|
||||
}
|
||||
setTimeout(() => {
|
||||
get(replaceUrlPlaceholder(url, queryParams)).then(response2 => {
|
||||
// app：测试数据生成，如接口可正常返回数据后，删除即可
|
||||
response2 = this.initTestDataForAppSecondTable(url, row)
|
||||
|
||||
if (response2.code === 200) {
|
||||
this.childrenTableData = response2.data.result
|
||||
}
|
||||
@@ -202,9 +232,44 @@ export default {
|
||||
})
|
||||
}, 500)
|
||||
},
|
||||
initTestDataForAppSecondTable (url, row) {
|
||||
let rlt = ''
|
||||
|
||||
if (url.indexOf('app') > -1) {
|
||||
rlt = {
|
||||
code: 200,
|
||||
msg: '',
|
||||
data: {
|
||||
resultType: 'table',
|
||||
result: [{
|
||||
sessions: '0',
|
||||
packets: '134',
|
||||
bytes: '33202',
|
||||
appCategory: row.appCategory,
|
||||
serverIp: '51.104.167.186',
|
||||
appRisk: row.appRisk
|
||||
}, {
|
||||
sessions: '0',
|
||||
packets: '134',
|
||||
bytes: '33202',
|
||||
appCategory: row.appCategory,
|
||||
serverIp: '23.164.67.16',
|
||||
appRisk: row.appRisk
|
||||
}
|
||||
]
|
||||
},
|
||||
success: true
|
||||
}
|
||||
}
|
||||
return rlt
|
||||
},
|
||||
getRowKey (row) {
|
||||
if (this.tableNameColumn === 'appName') {
|
||||
return row.appName
|
||||
} else {
|
||||
return row.domain
|
||||
}
|
||||
}
|
||||
},
|
||||
setup () {
|
||||
return {
|
||||
|
||||
@@ -2112,14 +2112,94 @@ export default {
|
||||
}, 250)
|
||||
})
|
||||
},
|
||||
|
||||
initTestDataForApp (chartParams) {
|
||||
let rlt = ''
|
||||
if (chartParams.url.indexOf('App') > -1) {
|
||||
rlt = {
|
||||
code: 200,
|
||||
msg: '',
|
||||
data: {
|
||||
resultType: 'table',
|
||||
result: [{
|
||||
appCategory: 'aaa',
|
||||
uniqApps: 'bbb',
|
||||
bytes: '1337678073',
|
||||
packets: '1687757',
|
||||
sessions: '28307',
|
||||
appRisk: 'low'
|
||||
}, {
|
||||
appCategory: 'www',
|
||||
uniqApps: 'uuu',
|
||||
bytes: '1337678073',
|
||||
packets: '1687757',
|
||||
sessions: '28307',
|
||||
appRisk: 'middle'
|
||||
}, {
|
||||
appCategory: 'xxx',
|
||||
uniqApps: 'zzz',
|
||||
bytes: '1337678073',
|
||||
packets: '1687757',
|
||||
sessions: '28307',
|
||||
appRisk: 'high'
|
||||
}
|
||||
]
|
||||
},
|
||||
success: true
|
||||
}
|
||||
}
|
||||
return rlt
|
||||
},
|
||||
|
||||
initTestDataForAppTable (chartParams) {
|
||||
let rlt = ''
|
||||
if (chartParams.urlTable.indexOf('app') > -1) {
|
||||
rlt = {
|
||||
code: 200,
|
||||
msg: '',
|
||||
data: {
|
||||
resultType: 'table',
|
||||
result: [{
|
||||
sessions: '0',
|
||||
packets: '134',
|
||||
bytes: '33202',
|
||||
appName: 'aacccc',
|
||||
appCategory: 'aaa',
|
||||
appRisk: 'low'
|
||||
}, {
|
||||
sessions: '0',
|
||||
packets: '134',
|
||||
bytes: '33202',
|
||||
appName: 'wwcccc',
|
||||
appCategory: 'www',
|
||||
appRisk: 'middle'
|
||||
}, {
|
||||
sessions: '0',
|
||||
packets: '134',
|
||||
bytes: '33202',
|
||||
appName: 'xxcccc',
|
||||
appCategory: 'xxx',
|
||||
appRisk: 'high'
|
||||
}
|
||||
]
|
||||
},
|
||||
success: true
|
||||
}
|
||||
}
|
||||
return rlt
|
||||
},
|
||||
|
||||
initEchartsWithPieTable (chartParams) {
|
||||
const self = this
|
||||
chartParams.valueColumn = this.orderPieTable
|
||||
const unitType = getUnitType(chartParams.valueColumn)
|
||||
const queryParams = { ...this.queryTimeRange, limit: 10, order: this.orderPieTable, ...this.entity } // 统计数据的查询参数
|
||||
const tableQueryParams = { ...this.queryTimeRange, limit: 10, order: this.orderPieTable, ...this.entity } // 统计数据的查询参数
|
||||
tableQueryParams[chartParams.nameColumn] = [] // 处理两个图表不一样的地方
|
||||
tableQueryParams[chartParams.nameColumn] = [] // 处理两个图表不一样的地方)
|
||||
get(replaceUrlPlaceholder(chartParams.url, queryParams)).then(response => {
|
||||
// app：测试数据生成，如接口可正常返回数据后，删除即可
|
||||
response = this.initTestDataForApp(chartParams)
|
||||
|
||||
if (response.code === 200) {
|
||||
if (this.$_.isEmpty(response.data.result)) {
|
||||
this.noData = true
|
||||
@@ -2153,6 +2233,9 @@ export default {
|
||||
this.myChart.setOption(this.chartOption)
|
||||
if (!this.$_.isEmpty(data)) {
|
||||
get(replaceUrlPlaceholder(chartParams.urlTable, tableQueryParams)).then(response2 => {
|
||||
// app：测试数据生成，如接口可正常返回数据后，删除即可
|
||||
response2 = this.initTestDataForAppTable(chartParams)
|
||||
|
||||
if (response2.code === 200) {
|
||||
this.pieTableData = response2.data.result
|
||||
} else {
|
||||
|
||||
Reference in New Issue
Block a user