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

CN-49 feat ： 饼图调整 && 数值过大的单位处理

Browse Source
This commit is contained in:
zhangyu
2021-07-07 15:51:52 +08:00
parent c08ceb1966
commit 5d24c9cdce
11 changed files with 388 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

121
src/components/charts/PieTable.vue
View File

@@ -1,9 +1,11 @@
<template>
<el-table
v-loading="loading"
ref="table"
class="pie-table"
:data="tableData"
:data="pieTableData"
style="width: 100%;border: 1px solid #E7EAED"
@expand-change="expandChange"
:size="'mini'"
:height="'100%'">
<el-table-column type="expand" :min-width="'5%'">
@@ -19,11 +21,21 @@
min-width="5%">
</el-table-column>
<el-table-column
v-for="(item, index) in tableTitles"
v-for="(item, index) in tableTitlesOther"
:key="index"
:min-width="item.width"
:label="item.label"
:prop="item.prop">
:prop="item.prop"
#default="{row}">
<span v-if="item.prop === 'nameColumn'">
{{nameColumn === 'fqdnCategoryName' ? row['fqdnCategoryName'] : row['reputationLevel'] }}
</span>
<span v-else-if="item.prop === 'bytes' || item.prop === 'packets' || item.prop === 'sessions'" >
{{shortFormatter(row[item.prop])}}
</span>
<span v-else>
{{row[item.prop]}}
</span>
</el-table-column>
</el-table>
</template>
@@ -33,51 +45,144 @@
:key="index"
:min-width="item.width"
:label="item.label"
:prop="item.prop">
:prop="item.prop"
#default="{row}">
<span v-if="item.prop === 'nameColumn'">
{{nameColumn === 'fqdnCategoryName' ? row['categoryName'] : row['reputationLevel'] }}
</span>
<span v-else-if="item.prop === 'bytes' || item.prop === 'packets' || item.prop === 'sessions'" >
{{shortFormatter(row[item.prop])}}
</span>
<span v-else>
{{row[item.prop]}}
</span>
</el-table-column>
</el-table>
</template>
<script>
import { shortFormatter } from '@/components/charts/chartFormatter'
import { get } from '@/utils/http'
import { replaceUrlPlaceholder } from '@/utils/tools'
export default {
name: 'PieTable',
props: {
tableData: Array
tableData: Array,
chartInfo: Object,
order: String,
startTime: {
type: Number
},
endTime: {
type: Number
}
},
watch: {
tableData: {
deep: true,
immediate: true,
handler (n) {
this.pieTableData = JSON.parse((JSON.stringify(n)))
this.pieTableData.forEach(item => {
item.children = []
})
}
},
pieTableData: {
handler (n) {
}
},
chartInfo: {
deep: true,
immediate: true,
handler (n) {
if (n && n.params) {
this.nameColumn = JSON.parse(n.params).nameColumn
}
}
}
},
data () {
return {
loading: false,
nameColumn: '',
pieTableData: [],
tableTitles: [
{
label: this.$t('chart.pieTable.domain'),
prop: 'domain',
width: '20%'
},
{
label: this.$t('chart.pieTable.nameColumn'),
prop: 'nameColumn',
width: '22%'
},
{
label: this.$t('chart.pieTable.sessions'),
prop: 'sessions',
width: '25%'
width: '18%'
},
{
label: this.$t('chart.pieTable.packets'),
prop: 'packets',
width: '25%'
width: '18%'
},
{
label: this.$t('chart.pieTable.bytes'),
prop: 'bytes',
width: '25%'
width: '18%'
}
],
tableTitlesOther: [
{
label: this.$t('chart.pieTable.serverIp'),
prop: 'serverIp',
width: '20%'
},
{
label: this.$t('chart.pieTable.nameColumn'),
prop: 'nameColumn',
width: '22%'
},
{
label: this.$t('chart.pieTable.sessions'),
prop: 'sessions',
width: '18%'
},
{
label: this.$t('chart.pieTable.packets'),
prop: 'packets',
width: '18%'
},
{
label: this.$t('chart.pieTable.bytes'),
prop: 'bytes',
width: '18%'
}
]
}
},
methods: {
shortFormatter: shortFormatter,
// rowChange (echartParams) {
// const nameColumnKey = this.nameColumn === 'fqdnCategoryName' ? 'categoryName' : 'reputationLevel'
// const row = this.pieTableData.find(item => echartParams.name === item[nameColumnKey])
// this.toggleRowExpansion(row)
// },
// toggleRowExpansion (row) {
// this.$refs.table.toggleRowExpansion(row)
// },
expandChange (row) {
const nameColumnKey = this.nameColumn === 'fqdnCategoryName' ? 'categoryName' : 'reputationLevel'
const url = JSON.parse(this.chartInfo.params).urlChildrenTable
const queryParams = { startTime: parseInt(this.startTime / 1000), endTime: parseInt(this.endTime / 1000), order: this.order, domain: row.domain }
get(replaceUrlPlaceholder(url, queryParams)).then(response2 => {
if (response2.code === 200) {
row.children = response2.data.result
}
})
}
}
}
</script>