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

fix: 调整实体列表代码样式

Browse Source
This commit is contained in:
刘洪洪
2023-04-27 16:50:37 +08:00
parent 95b2a089fb
commit 5a1c20f84a
1 changed files with 49 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

134
src/views/entityExplorer/entityList/Row.vue
View File

@@ -2,20 +2,15 @@
<div class="cn-entity--list" :style="{ zIndex: !isCollapse ? 1 : 'unset' }"> <div class="cn-entity--list" :style="{ zIndex: !isCollapse ? 1 : 'unset' }">
<!-- 左侧下拉按钮 --> <!-- 左侧下拉按钮 -->
<div class="cn-entity__collapse"> <div class="cn-entity__collapse">
<span @click="switchCollapse" :class="{ 'reg-down': !isCollapse }" <span @click="switchCollapse" :class="{ 'reg-down': !isCollapse }">
><i class="cn-icon cn-icon-arrow-right"></i <i class="cn-icon cn-icon-arrow-right"></i>
></span> </span>
</div> </div>
<div class="cn-entity__case"> <div class="cn-entity__case">
<div class="cn-entity__icon"><i :class="iconClass"></i></div> <div class="cn-entity__icon"><i :class="iconClass"></i></div>
<div class="cn-entity__row"> <div class="cn-entity__row">
<div class="cn-entity__header"> <div class="cn-entity__header">
{{ {{ entityData.ipAddr || entityData.domainName || entityData.appName || 'Unknown' }}
entityData.ipAddr ||
entityData.domainName ||
entityData.appName ||
'Unknown'
}}
</div> </div>
<div class="cn-entity__body"> <div class="cn-entity__body">
<div class="body__basic-info"> <div class="body__basic-info">
@@ -40,11 +35,7 @@
<template v-else-if="entityData.entityType === 'domain'"> <template v-else-if="entityData.entityType === 'domain'">
<div class="basic-info__item"> <div class="basic-info__item">
<i class="cn-icon cn-icon-category"></i> <i class="cn-icon cn-icon-category"></i>
<span <span>{{ $t('entities.domainDetail.categoryGroup') }}&nbsp;:&nbsp;&nbsp;</span>
>{{
$t('entities.domainDetail.categoryGroup')
}}&nbsp;:&nbsp;&nbsp;</span
>
<span>{{ entityData.domainCategoryGroup || '-' }}</span> <span>{{ entityData.domainCategoryGroup || '-' }}</span>
</div> </div>
<div class="basic-info__item"> <div class="basic-info__item">
@@ -54,11 +45,7 @@
</div> </div>
<div class="basic-info__item"> <div class="basic-info__item">
<i class="cn-icon cn-icon-credit"></i> <i class="cn-icon cn-icon-credit"></i>
<span <span>{{ $t('entities.reputationLevel') }}&nbsp;:&nbsp;&nbsp;</span>
>{{
$t('entities.reputationLevel')
}}&nbsp;:&nbsp;&nbsp;</span
>
<span>{{ entityData.domainReputationScore || '-' }}</span> <span>{{ entityData.domainReputationScore || '-' }}</span>
</div> </div>
</template> </template>
@@ -71,7 +58,7 @@
<div class="basic-info__item"> <div class="basic-info__item">
<i class="cn-icon cn-icon-category"></i> <i class="cn-icon cn-icon-category"></i>
<span <span
>{{ $t('entities.subcategory') }}&nbsp;:&nbsp;&nbsp;</span >{{ $t('entities.subcategory') }}&nbsp;:&nbsp;&nbsp;</span
> >
<span>{{ entityData.appSubcategory || '-' }}</span> <span>{{ entityData.appSubcategory || '-' }}</span>
</div> </div>
@@ -85,37 +72,30 @@
<div class="basic-info__item"> <div class="basic-info__item">
<div class="item__box"> <div class="item__box">
<i class="cn-icon cn-icon-rise"></i> <i class="cn-icon cn-icon-rise"></i>
<span <span>{{ $t('entities.sentThroughput') }}&nbsp;:&nbsp;&nbsp;</span>
>{{ <span>
$t('entities.sentThroughput') {{
}}&nbsp;:&nbsp;&nbsp;</span entityData.bytesSentRate ? unitConvert(entityData.bytesSentRate, unitTypes.byte).join(' ') + 'ps' : '-'
> }}
<span>{{ </span>
entityData.bytesSentRate
? unitConvert(
entityData.bytesSentRate,
unitTypes.byte,
).join(' ') + 'ps'
: '-'
}}</span>
<!-- 曲线--> <!-- 曲线-->
<div class="item-box-loading"> <div class="item-box-loading">
<loading :loading="loading" size="small"></loading> <loading :loading="loading" size="small"></loading>
<div <div
class="row__charts" class="row__charts"
:id="`entityDetailSend${entityType}${listMode}`" :id="`entityDetailSend${entityType}${listMode}`"
v-if="entityData.entityType === 'domain'" v-if="entityData.entityType === 'domain'">
></div> </div>
<div <div
class="row__charts" class="row__charts"
:id="`entityDetailSend${entityType}${listMode}`" :id="`entityDetailSend${entityType}${listMode}`"
v-if="entityData.entityType === 'app'" v-if="entityData.entityType === 'app'">
></div> </div>
<div <div
class="row__charts" class="row__charts"
:id="`entityDetailSend${entityType}${listMode}`" :id="`entityDetailSend${entityType}${listMode}`"
v-if="entityData.entityType === 'ip'" v-if="entityData.entityType === 'ip'">
></div> </div>
</div> </div>
</div> </div>
</div> </div>
@@ -123,57 +103,44 @@
<div class="basic-info__item"> <div class="basic-info__item">
<div class="item__box"> <div class="item__box">
<i class="cn-icon cn-icon-fall"></i> <i class="cn-icon cn-icon-fall"></i>
<span <span>{{ $t('entities.receivedThroughput') }}&nbsp;:&nbsp;&nbsp;</span>
>{{ <span>
$t('entities.receivedThroughput') {{
}}&nbsp;:&nbsp;&nbsp;</span entityData.bytesReceivedRate ? unitConvert(entityData.bytesReceivedRate, unitTypes.byte).join(' ') + 'ps' : '-'
> }}
<span>{{ </span>
entityData.bytesReceivedRate
? unitConvert(
entityData.bytesReceivedRate,
unitTypes.byte,
).join(' ') + 'ps'
: '-'
}}</span>
<div class="item-box-loading"> <div class="item-box-loading">
<loading :loading="loading" size="small"></loading> <loading :loading="loading" size="small"></loading>
<div <div
class="row__charts" class="row__charts"
:id="`entityDetailReceived${entityType}${listMode}`" :id="`entityDetailReceived${entityType}${listMode}`"
v-if="entityData.entityType === 'domain'" v-if="entityData.entityType === 'domain'">
></div> </div>
<div <div
class="row__charts" class="row__charts"
:id="`entityDetailReceived${entityType}${listMode}`" :id="`entityDetailReceived${entityType}${listMode}`"
v-if="entityData.entityType === 'app'" v-if="entityData.entityType === 'app'">
></div> </div>
<div <div
class="row__charts" class="row__charts"
:id="`entityDetailReceived${entityType}${listMode}`" :id="`entityDetailReceived${entityType}${listMode}`"
v-if="entityData.entityType === 'ip'" v-if="entityData.entityType === 'ip'">
></div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="basic-info__item"> <div class="basic-info__item">
<i class="cn-icon cn-icon-entity-alert"></i> <i class="cn-icon cn-icon-entity-alert"></i>
<span>{{ $t('entities.recentAlert') }}&nbsp;:&nbsp;&nbsp;</span> <span>{{ $t('entities.recentAlert') }}&nbsp;:&nbsp;&nbsp;</span>
<span>{{ entityData.performanceCount}}</span> <span>{{ entityData.performanceCount }}</span>
</div> </div>
<div class="basic-info__item"> <div class="basic-info__item">
<i class="cn-icon cn-icon-safe"></i> <i class="cn-icon cn-icon-safe"></i>
<span <span>{{ $t('entities.recentSecurity') }}&nbsp;:&nbsp;&nbsp;</span>
>{{ $t('entities.recentSecurity') }}&nbsp;:&nbsp;&nbsp;</span <span>{{ entityData.securityCount }}</span>
>
<span>{{ entityData.securityCount}}</span>
</div> </div>
</div> </div>
<div <div class="show-detail" @click="showDetail">
class="show-detail"
@click="showDetail"
>
{{ $t('overall.detail') }}> {{ $t('overall.detail') }}>
</div> </div>
</div> </div>
@@ -182,10 +149,7 @@
<el-collapse-transition> <el-collapse-transition>
<div class="cn-entity__detail-overview" v-if="!isCollapse"> <div class="cn-entity__detail-overview" v-if="!isCollapse">
<el-divider></el-divider> <el-divider></el-divider>
<detail-overview <detail-overview :entity="entityData" :time-filter="timeFilter"/>
:entity="entityData"
:time-filter="timeFilter"
></detail-overview>
</div> </div>
</el-collapse-transition> </el-collapse-transition>
</div> </div>
@@ -220,15 +184,15 @@ export default {
ipLocationRegion () { ipLocationRegion () {
return function (entityData) { return function (entityData) {
const hasProvinceAndCity = const hasProvinceAndCity =
entityData.ipLocationProvince && entityData.ipLocationProvince &&
entityData.ipLocationCity && entityData.ipLocationCity &&
entityData.ipLocationProvince !== 'null' && entityData.ipLocationProvince !== 'null' &&
entityData.ipLocationCity !== 'null' entityData.ipLocationCity !== 'null'
const hasProvince = const hasProvince =
entityData.ipLocationProvince && entityData.ipLocationProvince &&
entityData.ipLocationProvince !== 'null' entityData.ipLocationProvince !== 'null'
const hasCity = const hasCity =
entityData.ipLocationCity && entityData.ipLocationCity !== 'null' entityData.ipLocationCity && entityData.ipLocationCity !== 'null'
if (hasProvinceAndCity) { if (hasProvinceAndCity) {
return `${entityData.ipLocationProvince}, ${entityData.ipLocationCity}` return `${entityData.ipLocationProvince}, ${entityData.ipLocationCity}`
} else if (hasProvince) { } else if (hasProvince) {