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

Merge branch 'dev' of https://git.mesalab.cn/cyber-narrator/cn-ui into dev

Browse Source
This commit is contained in:
晶晶 张
2021-07-08 16:25:21 +08:00
parent 1fede2e0c8 5af48a6be1
commit 25fb5d1c50
3 changed files with 100 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/charts/ChartTable.vue
View File

@@ -23,10 +23,18 @@
v-for="(c, i) in tableColumns"
show-overflow-tooltip
:key="i"
:prop="c"
:label="c.label"
:prop="c.prop"
>
<template #header>{{c}}</template>
<template #default="{ row }">{{row[c]}}</template>
<template #header>{{c.label}}</template>
<template #default="{ row }">{{}}
<span v-if="c.prop === 'bytes' || c.prop === 'packets' || c.prop === 'sessions'" >
{{shortFormatter(row[c.prop])}}
</span>
<span v-else>
{{row[c.prop]}}
</span>
</template>
</el-table-column>
</el-table>
</div>
@@ -37,11 +45,15 @@
</template>
<script>
import { shortFormatter } from '@/components/charts/chartFormatter'
export default {
name: 'ChartTable',
props: {
tableColumns: Array,
tableData: Array
},
methods: {
shortFormatter: shortFormatter
}
}
</script>

74
src/components/charts/chartTableTitle.js Normal file
View File

@@ -0,0 +1,74 @@
export const allTableTitle = {
tableTitles10: [
{
label: 'clientIp',
prop: 'clientIp'
},
{
label: 'bytes',
prop: 'bytes'
},
{
label: 'packets',
prop: 'packets'
},
{
label: 'sessions',
prop: 'sessions'
}
],
tableTitles13: [
{
label: 'serverIp',
prop: 'serverIp'
},
{
label: 'bytes',
prop: 'bytes'
},
{
label: 'packets',
prop: 'packets'
},
{
label: 'sessions',
prop: 'sessions'
}
],
tableTitles14: [
{
label: 'domain',
prop: 'domain'
},
{
label: 'bytes',
prop: 'bytes'
},
{
label: 'packets',
prop: 'packets'
},
{
label: 'sessions',
prop: 'sessions'
}
],
tableTitles15: [
{
label: 'appName',
prop: 'appName'
},
{
label: 'bytes',
prop: 'bytes'
},
{
label: 'packets',
prop: 'packets'
},
{
label: 'sessions',
prop: 'sessions'
}
]
}

23
src/views/charts/Chart.vue
View File

@@ -46,7 +46,7 @@
{{chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name}}
</template>
<template #operations v-if="layout.indexOf(layoutConstant.HEADER) > -1">
<div class="header__operation header__operation--table">
<div class="header__operation header__operation--table" v-if="chart.type === 31">
<el-select
size="mini"
v-model="orderPieTable"
@@ -118,7 +118,7 @@
popper-class="option-popper"
@change="tabelLimtChange"
>
<el-option v-for="item in table.tableColumns" :key="item" :value="item">{{item}}</el-option>
<el-option v-for="item in table.tableColumns" :key="item.prop" :value="item.prop">{{item.prop}}</el-option>
</el-select>
</div>
<!-- <div class="header__operation header__operation&#45;&#45;table">
@@ -144,7 +144,7 @@ import * as echarts from 'echarts'
import * as am4Core from '@amcharts/amcharts4/core'
import * as am4Maps from '@amcharts/amcharts4/maps'
import { shallowRef } from 'vue'
import { allTableTitle } from '@/components/charts/chartTableTitle'
import {
isEcharts,
isSingleValue,
@@ -408,32 +408,29 @@ export default {
return this.$_.slice(tableData, (pageNum - 1) * pageSize, pageNum * pageSize)
},
orderPieTableChange () {
if (this.chart.type === 31) {
const chartParams = this.chartInfo.params ? JSON.parse(this.chartInfo.params) : null // 图表参数
this.myChart.off('click')
this.chartWithPieTableInit(chartParams)
}
},
chartWithPieTableInit (chartParams) {
const self = this
chartParams.valueColumn = this.orderPieTable
const queryParams = { startTime: parseInt(this.startTime / 1000), endTime: parseInt(this.endTime / 1000), limit: 10, order: this.orderPieTable } // 统计数据的查询参数
const tableQueryParams = { startTime: parseInt(this.startTime / 1000), endTime: this.endTime, limit: 10, order: this.orderPieTable } // 统计数据的查询参数
const tableQueryParams = { startTime: parseInt(this.startTime / 1000), endTime: parseInt(this.endTime / 1000), limit: 10, order: this.orderPieTable } // 统计数据的查询参数
tableQueryParams[chartParams.nameColumn] = [] // 处理两个图表不一样的地方
get(replaceUrlPlaceholder(chartParams.url, queryParams)).then(response => {
if (response.code === 200) {
const data = response.data.result
this.chartOption.series[0].data = data.map(d => {
if (chartParams.nameColumn === 'fqdnCategoryName') {
tableQueryParams[chartParams.nameColumn].push(d[chartParams.nameColumn])
}
return {
data: d,
name: d[chartParams.nameColumn],
value: parseInt(d[chartParams.valueColumn])
}
})
if (tableQueryParams[chartParams.nameColumn].length) {
// tableQueryParams[chartParams.nameColumn] = JSON.stringify(tableQueryParams[chartParams.nameColumn])
}
if (this.chartOption.series[0].data && this.chartOption.series[0].data.length > 10) { // pieWithTable 图例超过10个改为滚动显示
this.chartOption.legend.type = 'scroll'
}
@@ -473,13 +470,7 @@ export default {
const queryParams = { startTime: parseInt(this.startTime / 1000), endTime: parseInt(this.endTime / 1000), limit: this.table.limit, order: this.table.orderBy }
get(replaceUrlPlaceholder(chartParams.url, queryParams)).then(response => {
if (response.code === 200) {
const tableColumns = new Set()
response.data.result.forEach(d => {
Object.keys(d).forEach(k => {
tableColumns.add(k)
})
})
this.table.tableColumns = Array.from(tableColumns)
this.table.tableColumns = allTableTitle['tableTitles' + this.chart.id]
this.table.tableData = response.data.result
this.table.currentPageData = this.getTargetPageData(1, this.table.pageSize, this.table.tableData)
}