CN-1592 fix: tag table 下拉实体计数展现形式调整

This commit is contained in:
chenjinsong
2024-04-25 14:36:46 +08:00
parent 9f8cbfeea5
commit 868b6c06e5
4 changed files with 70 additions and 31 deletions

View File

@@ -128,7 +128,7 @@
width: 200px;
display: flex;
flex-direction: column;
justify-content: center;
padding-top: 30px;
.expand-count {
font-size: 22px;
@@ -141,6 +141,40 @@
padding: 2px 3px 0 0;
}
}
.expand-observed-entities {
font-size: 12px;
color: var(--el-color-primary);
margin-bottom: 4px;
cursor: pointer;
text-transform: capitalize;
&.expand-observed-entities--disabled {
color: var(--el-text-color-regular);
cursor: default;
}
i {
top: 1px;
}
}
.entity-count-detail {
display: flex;
flex-direction: column;
align-items: flex-start;
font-size: 12px;
.detail__row {
display: flex;
.detail__label {
width: 90px;
text-align: right;
}
.detail__value {
padding-left: 10px;
}
}
}
.expand-icon {
display: flex;
justify-content: space-evenly;

View File

@@ -43,7 +43,7 @@
</ul>
</el-row>
</el-popover>
<span class="expand-observed-entities" :class="{'expand-observed-entities--disabled': disableToEntity}" @click="toEntityList(props.row)">{{countDesc}}&nbsp;<el-icon v-if="!disableToEntity && !showError"><Right /></el-icon></span>
<!-- <span class="expand-observed-entities" :class="{'expand-observed-entities&#45;&#45;disabled': disableToEntity}" @click="toEntityList(props.row)">{{countDesc}}&nbsp;<el-icon v-if="!disableToEntity && !showError"><Right /></el-icon></span>-->
<date-time-range v-if="noMinutes"
class="date-time-range"
:start-time="timeFilter.startTime"
@@ -69,6 +69,22 @@
<div class="expand-left">
<div class="chart-drawing" :id="`chart${props.row.id}`"></div>
</div>
<div class="expand-right">
<div class="expand-count">{{observedCount}}</div>
<div class="expand-observed-entities" :class="{'expand-observed-entities--disabled': disableToEntity}" @click="toEntityList(props.row)">
{{countDesc}}&nbsp;<el-icon v-if="!disableToEntity"><Right /></el-icon>
</div>
<div v-if="props.row.indicatorType && props.row.indicatorType.indexOf('IP') > -1 &&
props.row.indicatorType && props.row.indicatorType.indexOf('Domain') > -1"
class="entity-count-detail">
<div class="detail__row">
<div class="detail__label">IP</div><span class="detail__value">{{observedIpCount}}</span>
</div>
<div class="detail__row">
<div class="detail__label">{{$t('overall.domain')}}</div><span class="detail__value">{{observedDomainCount}}</span>
</div>
</div>
</div>
</div>
</div>
</div>
@@ -445,48 +461,48 @@ export default {
if (hasIp && hasDomain) {
if (this.disableToEntity) {
if (this.observedCount < 2) {
desc += `${this.observedCount} ${this.$t('overall.entity2')}`
desc = this.$t('overall.entity2')
} else {
desc += `${this.observedCount} ${this.$t('overall.entities2')}`
desc = this.$t('overall.entities2')
}
} else { // 活跃实体
if (this.observedCount < 2) {
desc += `${this.observedCount} ${this.$t('tag.activeEntity2')}`
desc = this.$t('tag.activeEntity2')
} else {
desc += `${this.observedCount} ${this.$t('tag.observedEntities2')}`
desc = this.$t('tag.observedEntities2')
}
}
if (this.observedCount > 0) {
/*if (this.observedCount > 0) {
desc += `, IP ${this.observedIpCount}, ${this.$t('overall.domain2')} ${this.observedDomainCount}`
}
}*/
} else {
// 只有单种实体时,单个描述
if (this.disableToEntity) {
if (hasIp) {
if (this.observedIpCount < 2) {
desc += `${this.observedIpCount} IP`
desc = 'IP'
} else {
desc += `${this.observedIpCount} ${this.$t('overall.ips')}`
desc = this.$t('overall.ips')
}
} else if (hasDomain) {
if (this.observedDomainCount < 2) {
desc += `${this.observedDomainCount} ${this.$t('overall.domain2')}`
desc = this.$t('overall.domain2')
} else {
desc += `${this.observedDomainCount} ${this.$t('overall.domains2')}`
desc = this.$t('overall.domains2')
}
}
} else { // 活跃实体
if (hasIp) {
if (this.observedIpCount < 2) {
desc += `${this.observedIpCount} ${this.$t('tag.observedIp2')}`
desc = this.$t('tag.observedIp2')
} else {
desc += `${this.observedIpCount} ${this.$t('tag.observedIps2')}`
desc = this.$t('tag.observedIps2')
}
} else if (hasDomain) {
if (this.observedDomainCount < 2) {
desc += `${this.observedDomainCount} ${this.$t('tag.observedDomain2')}`
desc = this.$t('tag.observedDomain2')
} else {
desc += `${this.observedDomainCount} ${this.$t('tag.observedDomains2')}`
desc = this.$t('tag.observedDomains2')
}
}
}

View File

@@ -808,13 +808,14 @@ export const tagLineChartOption = {
x: 'center',
y: 'bottom',
icon: 'circle',
itemGap: 50
itemGap: 40,
bottom: 0
},
grid: {
top: '12%',
left: '1%',
right: '1%',
bottom: 30,
right: 0,
bottom: 25,
containLabel: true
},
xAxis: [

View File

@@ -310,18 +310,6 @@
<div class="item__label">{{ $t('location.number') }}</div>
<div class="item__value">{{currentPolygon.number}}</div>
</div>
<div class="body__item">
<div class="item__label">{{ $t('location.locals') }}</div>
<div class="item__value">{{currentPolygon.number}}</div>
</div>
<div class="body__item">
<div class="item__label">{{ $t('location.visitors') }}</div>
<div class="item__value">{{currentPolygon.number}}</div>
</div>
<div class="body__item">
<div class="item__label">{{ $t('location.roamers') }}</div>
<div class="item__value">{{currentPolygon.number}}</div>
</div>
</template>
<template v-else>
<template v-for="(item, i) in JSON.parse(currentPolygon.locations)" :key="item.hexId">