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

CN-65 fix: statistics-legend点击事件

Browse Source
This commit is contained in:
chenjinsong
2021-07-22 21:35:06 +08:00
parent fd1bee2ad9
commit 36f0f5570c
6 changed files with 70 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -117,7 +117,7 @@ export default {
expandRowKeys: [],
tableTitles: [
{
label: this.$t('common.domain'),
label: this.$t('overall.domain'),
prop: 'domain',
width: '20%'
},
@@ -127,44 +127,44 @@ export default {
width: '22%'
},
{
label: this.$t('common.sessions'),
label: this.$t('overall.sessions'),
prop: 'sessions',
width: '18%'
},
{
label: this.$t('common.packets'),
label: this.$t('overall.packets'),
prop: 'packets',
width: '18%'
},
{
label: this.$t('common.bytes'),
label: this.$t('overall.bytes'),
prop: 'bytes',
width: '18%'
}
],
tableTitlesOther: [
{
label: this.$t('common.serverIp'),
label: this.$t('overall.serverIp'),
prop: 'serverIp',
width: '20%'
},
{
label: this.$t('common.reputation'),
label: this.$t('overall.reputation'),
prop: 'nameColumn',
width: '22%'
},
{
label: this.$t('common.sessions'),
label: this.$t('overall.sessions'),
prop: 'sessions',
width: '18%'
},
{
label: this.$t('common.packets'),
label: this.$t('overall.packets'),
prop: 'packets',
width: '18%'
},
{
label: this.$t('common.bytes'),
label: this.$t('overall.bytes'),
prop: 'bytes',
width: '18%'
}

16
src/components/charts/StatisticsLegend.vue
View File

@@ -7,7 +7,7 @@
<div class="table__below-statistics">Max</div>
</div>
<div class="chart__table-below">
<div v-for="(item,index) in data" :key="index" class="table-below-box">
<div v-for="(item, index) in data" :key="index" class="table-below-box" :class="{'table-below-box--inactivated': !item.active}" @click="toggleLegend(index)">
<div class="table__below-color"><div :style="{backgroundColor: getChartColor(index)}"></div></div>
<div class="table__below-title" :title="item.legend">{{item.legend}}</div>
<div class="table__below-statistics" :title="item.aggregation.avg">{{unitConvert(item.aggregation.avg, chartInfo.params.unitType).join(' ')}}</div>
@@ -27,6 +27,11 @@ export default {
data: Array,
chartInfo: Object
},
methods: {
toggleLegend (index) {
this.$emit('toggleLegend', index)
}
},
setup () {
return {
getChartColor,
@@ -99,4 +104,13 @@ export default {
text-overflow: ellipsis;
white-space: nowrap;
}
.table-below-box:not(.chart__table-top) {
cursor: pointer;
}
.table-below-box.table-below-box--inactivated {
color: #ccc;
.table__below-color div {
background-color: #ccc !important;
}
}
</style>

32
src/components/charts/chart-table-title.js
View File

@@ -2,73 +2,73 @@ import i18n from '@/i18n'
export const allTableTitle = {
tableTitles10: [
{
label: i18n.global.t('common.clientIp'),
label: i18n.global.t('overall.clientIp'),
prop: 'clientIp'
},
{
label: i18n.global.t('common.sessions'),
label: i18n.global.t('overall.sessions'),
prop: 'sessions'
},
{
label: i18n.global.t('common.bytes'),
label: i18n.global.t('overall.bytes'),
prop: 'bytes'
},
{
label: i18n.global.t('common.packets'),
label: i18n.global.t('overall.packets'),
prop: 'packets'
}
],
tableTitles13: [
{
label: i18n.global.t('common.serverIp'),
label: i18n.global.t('overall.serverIp'),
prop: 'serverIp'
},
{
label: i18n.global.t('common.sessions'),
label: i18n.global.t('overall.sessions'),
prop: 'sessions'
},
{
label: i18n.global.t('common.bytes'),
label: i18n.global.t('overall.bytes'),
prop: 'bytes'
},
{
label: i18n.global.t('common.packets'),
label: i18n.global.t('overall.packets'),
prop: 'packets'
}
],
tableTitles14: [
{
label: i18n.global.t('common.domain'),
label: i18n.global.t('overall.domain'),
prop: 'domain'
},
{
label: i18n.global.t('common.sessions'),
label: i18n.global.t('overall.sessions'),
prop: 'sessions'
},
{
label: i18n.global.t('common.bytes'),
label: i18n.global.t('overall.bytes'),
prop: 'bytes'
},
{
label: i18n.global.t('common.packets'),
label: i18n.global.t('overall.packets'),
prop: 'packets'
}
],
tableTitles15: [
{
label: i18n.global.t('common.appName'),
label: i18n.global.t('overall.appName'),
prop: 'appName'
},
{
label: i18n.global.t('common.sessions'),
label: i18n.global.t('overall.sessions'),
prop: 'sessions'
},
{
label: i18n.global.t('common.bytes'),
label: i18n.global.t('overall.bytes'),
prop: 'bytes'
},
{
label: i18n.global.t('common.packets'),
label: i18n.global.t('overall.packets'),
prop: 'packets'
}
]

10
src/components/entities/EntityList.vue
View File

@@ -25,18 +25,18 @@
<div class="cn-entity__body">
<template v-if="entityType === 'ip'">
<div class="body__row">
<span class="body__row-label">{{$t('common.country')}}:</span>
<span class="body__row-label">{{$t('overall.country')}}:</span>
<div class="body__row-value" :title="d.country">{{d.country || '-'}}</div>
</div>
<div class="body__row">
<span class="body__row-label">{{$t('common.region')}}:</span>
<span class="body__row-label">{{$t('overall.region')}}:</span>
<div class="body__row-value" :title="d.region">{{d.region || '-'}}</div>
</div>
<div class="body__row">
<span class="body__row-label">{{$t('entities.asn')}}:</span>
<div class="body__row-value" :title="d.asn">{{d.asn || '-'}}</div>
</div>
<div class="body__detail">{{$t('common.detail')}}</div>
<div class="body__detail">{{$t('overall.detail')}}</div>
</template>
<template v-else-if="entityType === 'domain'">
<div class="body__row">
@@ -51,7 +51,7 @@
<span class="body__row-label">{{$t('entities.creditScore')}}:</span>
<div class="body__row-value" :title="d.reputationScore">{{d.reputationScore || '-'}}</div>
</div>
<div class="body__detail">{{$t('common.detail')}}</div>
<div class="body__detail">{{$t('overall.detail')}}</div>
</template>
<template v-else-if="entityType === 'app'">
<div class="body__row">
@@ -66,7 +66,7 @@
<span class="body__row-label">{{$t('entities.subcategory')}}:</span>
<div class="body__row-value" :title="d.appSubategory">{{d.appSubategory || '-'}}</div>
</div>
<div class="body__detail">{{$t('common.detail')}}</div>
<div class="body__detail">{{$t('overall.detail')}}</div>
</template>
</div>
</div>

2
src/components/entities/LeftFilter.vue
View File

@@ -26,7 +26,7 @@
</div>
</template>
</el-tree>
<div class="filter__more" :class="{'filter__more--disabled': f.hasnotMore}" @click="showMore(f.key, f.hasnotMore)">{{$t('common.showMore')}}</div>
<div class="filter__more" :class="{'filter__more--disabled': f.hasnotMore}" @click="showMore(f.key, f.hasnotMore)">{{$t('overall.showMore')}}</div>
</el-collapse-item>
</el-collapse>
</div>

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

@@ -72,7 +72,7 @@
<pie-table :tableData="pieTableData" ref="pieTable" :chartInfo="chartInfo" :time-filter="timeFilter" :order="orderPieTable"/>
</template>
<template v-else-if="isEchartsWithStatistics">
<statistics-legend :data="statisticsData" :chart-info="chartInfo"></statistics-legend>
<statistics-legend :data="statisticsData" :chart-info="chartInfo" @toggleLegend="toggleStatisticsLegend"></statistics-legend>
</template>
</template>
</echarts-frame>
@@ -119,7 +119,7 @@
size="mini"
v-model="table.orderBy"
class="option__select select-column"
:placeholder="$t('common.field')"
:placeholder="$t('overall.field')"
popper-class="option-popper"
@change="tableLimitChange"
>
@@ -416,6 +416,22 @@ export default {
getTargetPageData (pageNum, pageSize, tableData) {
return this.$_.slice(tableData, (pageNum - 1) * pageSize, pageNum * pageSize)
},
toggleStatisticsLegend (index) {
this.statisticsData[index].active = !this.statisticsData[index].active
this.statisticsData.forEach((d, i) => {
if (d.active) {
this.myChart.dispatchAction({
type: 'legendSelect',
name: d.legend
})
} else {
this.myChart.dispatchAction({
type: 'legendUnSelect',
name: d.legend
})
}
})
},
orderPieTableChange () {
if (this.chart.type === 31) {
const chartParams = this.chartInfo.params || null // 图表参数
@@ -452,7 +468,12 @@ export default {
const queryParams = { startTime: parseInt(this.timeFilter.startTime / 1000), endTime: parseInt(this.timeFilter.endTime / 1000) }
get(replaceUrlPlaceholder(chartParams.url, queryParams)).then(response => {
if (response.code === 200) {
this.statisticsData = response.data.result
this.statisticsData = response.data.result.map(d => {
return {
...d,
active: true
}
})
const seriesTemplate = this.chartOption.series[0]
this.chartOption.series = response.data.result.map((r, i) => {
return {