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>