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

CN-1612 feat: 部分css重构内容：实体列表以及实体下拉详情

Browse Source
This commit is contained in:
刘洪洪
2024-04-02 12:00:49 +08:00
parent e8a9968e44
commit 8ddc0d95f5
14 changed files with 431 additions and 227 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/views/entityExplorer/EntityExplorer.vue
View File

@@ -3,9 +3,9 @@
class="entity-explorer"
:class="{'entity-explorer--show-list': showList}">
<!-- 顶部工具栏，在列表页显示 -->
<div class="explorer-top-tools explorer-top-tools-new" style="margin: 2px 0;" v-show="showList">
<div class="explorer-top-tools explorer-top-tools-new" v-show="showList">
<div class="explorer-entity-top-tools">
<div class="explorer-top-tools-title" style="padding: 0;margin-left: -10px;">{{$t('network.entity')}}</div>
<div class="explorer-top-tools-title tools-title__margin">{{$t('network.entity')}}</div>
<date-time-range
class="date-time-range"
:start-time="timeFilter.startTime"
@@ -25,7 +25,7 @@
@search="search"
></explorer-search>
<!-- 内容区 -->
<div v-if="showList" style="display: flex;flex-direction: row;padding-bottom: 20px;">
<div v-if="showList" class="explorer-content">
<entity-filter
:filter-data="newFilterData"
:q="q"
@@ -40,27 +40,19 @@
@search="search"
></explorer-search>
<div style="display: flex;flex-direction: column;height: calc(100% - 42px);">
<div class="explorer-list">
<div class="explorer-result" v-if="showList" style="position: relative;display: flex">
<loading :loading="loadingCount" style="width: 240px"></loading>
<loading :loading="loadingCount" class="explorer-result-loading"></loading>
<span>{{ summaryCount.totalCount }}&nbsp;</span>{{$t('overall.results')}}，IP<span class="margin-r-3"></span>
<span>{{ summaryCount.ipCount }}</span>，{{$t('overall.domain')}}<span class="margin-r-3"></span>
<span>{{ summaryCount.domainCount }}</span>，APP<span class="margin-r-3"></span>
<span>{{ summaryCount.appCount }}</span>
<span class="entity-hide-entity" v-if="q">
<!-- <span v-if="listData.length !== 0">-->
<!-- <el-checkbox-->
<!-- v-model="isHideRelatedEntities"-->
<!-- :label="$t('entity.hideRelatedEntities')"-->
<!-- :disabled="listData.length===0"-->
<!-- @change="hideRelatedEntities"-->
<!-- size="large" />-->
<el-radio-group v-model="isHideRelatedEntities" @change="hideRelatedEntities" class="ml-4">
<el-radio :label="true" size="large">{{ $t('entity.entityMode') }}</el-radio>
<el-radio :label="false" style="margin-left: -10px;" size="large">{{ $t('entity.relatedMode') }}</el-radio>
</el-radio-group>
<!-- </span>-->
<el-radio-group v-model="isHideRelatedEntities" @change="hideRelatedEntities" class="ml-4">
<el-radio :label="true" size="large">{{ $t('entity.entityMode') }}</el-radio>
<el-radio :label="false" class="margin-l__10" size="large">{{ $t('entity.relatedMode') }}</el-radio>
</el-radio-group>
</span>
</div>
@@ -614,9 +606,9 @@ export default {
this.listData = []
this.$nextTick(() => {
this.listData = response.data.data.list
/*if (this.listData.length === 0) {
/* if (this.listData.length === 0) {
this.isHideRelatedEntities = false
}*/
} */
})
} else {
this.$message.error(response.data.message)

5
src/views/entityExplorer/EntityFilter.vue
View File

@@ -11,7 +11,7 @@
</div>
<div class="filter__body" style="position: relative">
<loading :loading="item.loading" style="top: -5px;"></loading>
<loading :loading="item.loading" class="filter__body-loading"></loading>
<div class="filter__body-item"
v-for="(data, i) in item.data.slice(0, item.showNum)"
@@ -46,8 +46,7 @@
</div>
</div>
<loading v-else-if="isFirstLoad" :loading="isFirstLoad"></loading>
<chart-no-data v-else style="padding-top: 40px"></chart-no-data>
<chart-no-data v-else class="padding-t-40"></chart-no-data>
</div>
</template>

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

@@ -10,7 +10,7 @@
<div class="cn-entity__icon"><i :class="iconClass"></i></div>
<div class="cn-entity__row">
<!--标签-->
<div class="cn-entity__header" style="display: flex;">
<div class="cn-entity__header my__display1">
<span class="cn-entity__header-title" v-high-light="keywordList">{{ entityData.entityValue || 'Unknown' }}</span>
<span v-show="entityData.isRelated">
<el-popover
@@ -150,7 +150,7 @@
</div>
<!--score分数-->
<div class="basic-info__item" style="display: flex;align-items: center;">
<div class="basic-info__item my__display">
<i class="cn-icon cn-icon-Score"></i>
<div class="row-item-label">
<span class="row-item-label">{{ $t('network.score') }}&nbsp;:&nbsp;&nbsp;</span>
@@ -158,7 +158,7 @@
<template v-if="!loadingNetworkQuality && score !=='-'">
<span v-for="(dot, i) in scoreDot" :key="i" :class="dot.class"></span>
</template>
<span style="padding-left: 4px;">{{score}}</span>
<span class="padding-l-4">{{score}}</span>
<loading :loading="loadingNetworkQuality" size="small"></loading>
</span>
</div>
@@ -166,17 +166,14 @@
<!--事件数量，即Performance和security事件总和-->
<div class="basic-info__item" style="position: relative">
<div v-if="eventNum>0 && !loadingEvent" style="display: flex;align-items: center;">
<div v-if="eventNum>0 && !loadingEvent" class="my__display">
<i class="cn-icon cn-icon-Event1"></i>
<div class="row-item-label">
<span class="row-item-label">{{ $t('dnsInsight.event') }}&nbsp;:&nbsp;&nbsp;</span>
<span class="row-item-value">{{ eventNum }}</span>
</div>
</div>
<!-- <loading :loading="loadingEvent" size="small" style="width: 90px"></loading>-->
</div>
</div>
</div>
</div>
@@ -318,7 +315,7 @@ export default {
if (this.isCollapse) {
this.$refs.rowBlock.style.cssText = 'background-color: none'
} else {
this.$refs.rowBlock.style.cssText = 'background-color: #fff'
this.$refs.rowBlock.style.cssText = 'background-color: var(--el-fill-color-blank)'
}
this.$emit('switchCollapse', this.isCollapse, this.index)
},

22
src/views/entityExplorer/entityList/detailOverview/App.vue
View File

@@ -29,7 +29,7 @@
<div class="overview-item">
<div class="overview__title">{{$t('overall.traffic')}}</div>
<div class="overview__content overview__content-loading">
<loading :loading="loadingTraffic" size="small" inner-style="left: 8.75rem;" style="width: 50%;"></loading>
<loading :loading="loadingTraffic" size="small" inner-style="left: 8.75rem;" class="content-loading"></loading>
<div class="overview__row">
<div class="row__label row__label--width130">{{$t('overall.peak')}}</div>
<div class="row__content">
@@ -68,13 +68,13 @@
<div class="overview__row">
<div class="row__label row__label--width130">{{$t('entities.networkQualityRating')}}</div>
<div style="position: relative;">
<div class="entity-score__block">
<div class="entity-score" v-if="!loadingNetworkQuality && score !=='-'">
<span v-for="(dot, i) in scoreDot" :key="i" :class="dot.class"></span>
<span style="padding-left: 4px;">{{score}}</span>
<span class="entity-score__padding">{{score}}</span>
</div>
<div class="entity-score" v-else>{{score}}</div>
<loading :loading="loadingNetworkQuality" size="small" style="left: 1rem;width: 50%;"></loading>
<loading :loading="loadingNetworkQuality" size="small" class="entity-score__loading"></loading>
</div>
</div>
</div>
@@ -87,8 +87,8 @@
<div class="overview__row">
<div class="row__label row__label--width130">{{$t('entities.tab.relatedDomain')}}</div>
<div class="row__content overview__row-related">
<div v-if="loadingRelationshipOne" style="position: relative;width: 450px;">
<loading :loading="loadingRelationshipOne" size="small" style="left: 1rem;"></loading>
<div v-if="loadingRelationshipOne" class="relationship-one__loading">
<loading :loading="loadingRelationshipOne" size="small" class="one__loading"></loading>
</div>
<div class="data-item high-light-block" v-high-light="keywordList" v-show="item.show" v-for="(item, index) in relationshipDataOne" :key="index">
@@ -97,7 +97,7 @@
<div v-if="relationshipDataOne.length===0 && !loadingRelationshipOne">-</div>
<div v-if="relationshipShowOne">
<div class="data-item show-more-related" id="related-app-more" @click.stop="showMoreApp" style="position: relative">...</div>
<div class="data-item show-more-related" id="related-app-more" @click.stop="showMoreApp">...</div>
<div v-if="isShowMoreApp" class="app-popover_block" id="showRelatedApp">
<div class="popover-content" v-for="(item, index) in relationshipDataOne" :key="index">
<span v-if="!item.show" class="high-light-block" v-high-light="keywordList">{{item.value}}</span>
@@ -111,8 +111,8 @@
<div class="row__label row__label--width130">{{$t('entities.tab.relatedIp')}}</div>
<div class="row__content">
<div v-if="loadingRelationshipTwo" style="position: relative;width: 450px;">
<loading :loading="loadingRelationshipTwo" size="small" style="left: 1rem;"></loading>
<div v-if="loadingRelationshipTwo" class="relationship-two__loading">
<loading :loading="loadingRelationshipTwo" size="small" class="one__loading"></loading>
</div>
<div class="data-item high-light-block" v-high-light="keywordList" v-show="item.show" v-for="(item, index) in relationshipDataTwo" :key="index">
@@ -121,7 +121,7 @@
<div v-if="relationshipDataTwo.length===0 && !loadingRelationshipTwo">-</div>
<div v-if="relationshipShowTwo">
<div class="data-item show-more-related" id="related-domain-more" @click.stop="showMoreDomain" style="position: relative">...</div>
<div class="data-item show-more-related" id="related-domain-more" @click.stop="showMoreDomain">...</div>
<div v-if="isShowMoreDomain" class="domain-popover_block" id="showRelatedDomain">
<div v-for="(item, index) in relationshipDataTwo" :key="index">
<span v-if="!item.show" class="high-light-block" v-high-light="keywordList">{{item.value}}</span>
@@ -149,7 +149,7 @@
<div class="row__content row__content--width90">
<div class="alert-level-tag alert-level-tag--high" :class="iconClass(performance)">{{performance.eventSeverity}}</div>
</div>
<div class="row__content-loading" style="position: relative;">
<div class="row__content-loading">
<div class="performance-event-remark">{{performance.eventType}}</div>
</div>
<div class="row__desc"></div>

22
src/views/entityExplorer/entityList/detailOverview/Domain.vue
View File

@@ -35,7 +35,7 @@
<div class="overview-item">
<div class="overview__title">{{$t('overall.traffic')}}</div>
<div class="overview__content overview__content-loading">
<loading :loading="loadingTraffic" size="small" inner-style="left: 8.75rem;" style="width: 50%;"></loading>
<loading :loading="loadingTraffic" size="small" inner-style="left: 8.75rem;" class="content-loading"></loading>
<div class="overview__row">
<div class="row__label row__label--width130">{{$t('overall.peak')}}</div>
<div class="row__content">
@@ -74,13 +74,13 @@
<div class="overview__row">
<div class="row__label row__label--width130">{{$t('entities.networkQualityRating')}}</div>
<div style="position: relative;">
<div class="entity-score__block">
<div class="entity-score" v-if="!loadingNetworkQuality && score !=='-'">
<span v-for="(dot, i) in scoreDot" :key="i" :class="dot.class"></span>
<span style="padding-left: 4px;">{{score}}</span>
<span class="entity-score__padding">{{score}}</span>
</div>
<div class="entity-score" v-else>{{score}}</div>
<loading :loading="loadingNetworkQuality" size="small" style="left: 1rem;width: 50%;"></loading>
<loading :loading="loadingNetworkQuality" size="small" class="entity-score__loading"></loading>
</div>
</div>
</div>
@@ -93,8 +93,8 @@
<div class="overview__row">
<div class="row__label row__label--width130">{{$t('entities.tab.relatedApp')}}</div>
<div class="row__content overview__row-related">
<div v-if="loadingRelationshipOne" style="position: relative;width: 450px;">
<loading :loading="loadingRelationshipOne" size="small" style="left: 1rem;"></loading>
<div v-if="loadingRelationshipOne" class="relationship-one__loading">
<loading :loading="loadingRelationshipOne" size="small" class="one__loading"></loading>
</div>
<div class="data-item high-light-block" v-high-light="keywordList" v-show="item.show" v-for="(item, index) in relationshipDataOne" :key="index">
@@ -103,7 +103,7 @@
<div v-if="relationshipDataOne.length===0 && !loadingRelationshipOne">-</div>
<div v-if="relationshipShowOne">
<div class="data-item show-more-related" id="related-app-more" @click.stop="showMoreApp" style="position: relative">...</div>
<div class="data-item show-more-related" id="related-app-more" @click.stop="showMoreApp">...</div>
<div v-if="isShowMoreApp" class="app-popover_block" id="showRelatedApp">
<div class="popover-content" v-for="(item, index) in relationshipDataOne" :key="index">
<span v-if="!item.show" class="high-light-block" v-high-light="keywordList">{{item.value}}</span>
@@ -116,8 +116,8 @@
<div class="overview__row overview__row-related">
<div class="row__label row__label--width130">{{$t('entities.tab.relatedIp')}}</div>
<div class="row__content">
<div v-if="loadingRelationshipTwo" style="position: relative;width: 450px;">
<loading :loading="loadingRelationshipTwo" size="small" style="left: 1rem;"></loading>
<div v-if="loadingRelationshipTwo" class="relationship-two__loading">
<loading :loading="loadingRelationshipTwo" size="small" class="one__loading"></loading>
</div>
<div class="data-item high-light-block" v-high-light="keywordList" v-show="item.show" v-for="(item, index) in relationshipDataTwo" :key="index">
{{item.value}}
@@ -125,7 +125,7 @@
<div v-if="relationshipDataTwo.length===0 && !loadingRelationshipTwo">-</div>
<div v-if="relationshipShowTwo">
<div class="data-item show-more-related" id="related-domain-more" @click.stop="showMoreDomain" style="position: relative">...</div>
<div class="data-item show-more-related" id="related-domain-more" @click.stop="showMoreDomain">...</div>
<div v-if="isShowMoreDomain" class="domain-popover_block" id="showRelatedDomain">
<div v-for="(item, index) in relationshipDataTwo" :key="index">
<span v-if="!item.show" class="high-light-block" v-high-light="keywordList">{{item.value}}</span>
@@ -153,7 +153,7 @@
<div class="row__content row__content--width90">
<div class="alert-level-tag alert-level-tag--high" :class="iconClass(performance)">{{performance.eventSeverity}}</div>
</div>
<div class="row__content-loading" style="position: relative;">
<div class="row__content-loading">
<div class="performance-event-remark">{{performance.eventType}}</div>
</div>
<div class="row__desc"></div>

30
src/views/entityExplorer/entityList/detailOverview/Ip.vue
View File

@@ -5,7 +5,7 @@
<div class="overview__row">
<div class="row__label row__label--width130">{{$t('overall.location')}}</div>
<div class="row__content">
<div v-if="entity.location" style="display: flex">
<div v-if="entity.location" class="row__content-display">
<div v-if="entity.location.country">
<img v-if="entity.location.country===countryNameIdMapping.Unknown || !countryNameIdMapping[entity.location.country]" src="../../../../../public/images/flag/Unknown.svg" class="filter-country-flag">
<img v-else :src="require(`../../../../../public/images/flag/${countryNameIdMapping[entity.location.country]}.png`)" class="filter-country-flag" >
@@ -25,14 +25,14 @@
</div>
<div class="overview__row">
<div class="row__label row__label--width130">{{$t('entities.openPort')}}</div>
<div class="row__content high-location" style="word-break: break-word;" v-high-light="keywordList">{{ openPort }}</div>
<div class="row__content high-location row__content__word" v-high-light="keywordList">{{ openPort }}</div>
</div>
</div>
</div>
<div class="overview-item" v-if="entityData.dnsServerRole">
<div class="overview__title">{{$t('overall.dnsServerInfo')}}</div>
<div class="overview__content overview__content-loading">
<loading :loading="loadingDns" size="small" inner-style="left: 8.75rem;" style="width: 50%;"></loading>
<loading :loading="loadingDns" size="small" inner-style="left: 8.75rem;" class="content-loading"></loading>
<div class="overview__row">
<div class="row__label row__label--width130">{{$t('overall.dnsServerInfo.role')}}</div>
<div class="row__content">{{$_.get(entityData, 'dnsServerRole') || '-'}}</div>
@@ -71,7 +71,7 @@
<div class="overview-item">
<div class="overview__title">{{$t('overall.traffic')}}</div>
<div class="overview__content overview__content-loading">
<loading :loading="loadingTraffic" size="small" inner-style="left: 8.75rem;" style="width: 50%;"></loading>
<loading :loading="loadingTraffic" size="small" inner-style="left: 8.75rem;" class="content-loading"></loading>
<div class="overview__row">
<div class="row__label row__label--width130">{{$t('overall.peak')}}</div>
<div class="row__content">
@@ -109,13 +109,13 @@
</div>
<div class="overview__row">
<div class="row__label row__label--width130">{{$t('entities.networkQualityRating')}}</div>
<div style="position: relative;">
<div class="entity-score__block">
<div class="entity-score" v-if="!loadingNetworkQuality && score !=='-'">
<span v-for="(dot, i) in scoreDot" :key="i" :class="dot.class"></span>
<span style="padding-left: 4px;">{{score}}</span>
<span class="entity-score__padding">{{score}}</span>
</div>
<div class="entity-score" v-else>{{score}}</div>
<loading :loading="loadingNetworkQuality" size="small" style="left: 1rem;width: 50%;"></loading>
<loading :loading="loadingNetworkQuality" size="small" class="entity-score__loading"></loading>
</div>
</div>
</div>
@@ -128,8 +128,8 @@
<div class="overview__row overview__row-related">
<div class="row__label row__label--width130">{{$t('entities.tab.relatedApp')}}</div>
<div class="row__content">
<div v-if="loadingRelationshipOne" style="position: relative;width: 450px;">
<loading :loading="loadingRelationshipOne" size="small" style="left: 1rem;"></loading>
<div v-if="loadingRelationshipOne" class="relationship-one__loading">
<loading :loading="loadingRelationshipOne" size="small" class="one__loading"></loading>
</div>
<div class="data-item high-light-block" v-high-light="keywordList" v-show="item.show" v-for="(item, index) in relationshipDataOne" :key="index">
@@ -138,7 +138,7 @@
<div v-if="relationshipDataOne.length===0 && !loadingRelationshipOne">-</div>
<div v-if="relationshipShowOne">
<div class="data-item show-more-related" id="related-app-more" @click.stop="showMoreApp" style="position: relative">...</div>
<div class="data-item show-more-related" id="related-app-more" @click.stop="showMoreApp">...</div>
<div v-if="isShowMoreApp" class="app-popover_block" id="showRelatedApp">
<div class="popover-content" v-for="(item, index) in relationshipDataOne" :key="index">
<span v-if="!item.show" class="high-light-block" v-high-light="keywordList">{{item.value}}</span>
@@ -151,8 +151,8 @@
<div class="overview__row overview__row-related">
<div class="row__label row__label--width130">{{$t('entities.relatedDomain')}}</div>
<div class="row__content">
<div v-if="loadingRelationshipTwo" style="position: relative;width: 450px;">
<loading :loading="loadingRelationshipTwo" size="small" style="left: 1rem;"></loading>
<div v-if="loadingRelationshipTwo" class="relationship-two__loading">
<loading :loading="loadingRelationshipTwo" size="small" class="one__loading"></loading>
</div>
<div class="data-item high-light-block" v-high-light="keywordList" v-show="item.show" v-for="(item, index) in relationshipDataTwo" :key="index">
@@ -161,7 +161,7 @@
<div v-if="relationshipDataTwo.length===0 && !loadingRelationshipTwo">-</div>
<div v-if="relationshipShowTwo">
<div class="data-item show-more-related" id="related-domain-more" @click.stop="showMoreDomain" style="position: relative">...</div>
<div class="data-item show-more-related" id="related-domain-more" @click.stop="showMoreDomain">...</div>
<div v-if="isShowMoreDomain" class="domain-popover_block" id="showRelatedDomain">
<div v-for="(item, index) in relationshipDataTwo" :key="index">
<span v-if="!item.show" class="high-light-block" v-high-light="keywordList">{{item.value}}</span>
@@ -189,7 +189,7 @@
<div class="row__content row__content--width90">
<div class="alert-level-tag alert-level-tag--high" :class="iconClass(performance)">{{performance.eventSeverity}}</div>
</div>
<div class="row__content-loading" style="position: relative;">
<div class="row__content-loading">
<div class="performance-event-remark">{{performance.eventType}}</div>
</div>
<div class="row__desc"></div>
@@ -201,7 +201,7 @@
</div>
<div class="overview-item">
<div class="overview__title">{{$t('entities.securityEvents')}}</div>
<div class="overview__content overview__content-loading">
<div class="overview__content overview__content-loading" style="position: relative">
<loading :loading="loadingSecurityEvents" size="small" inner-style="left: 10rem"></loading>
<div class="overview__row" v-if="securityData.length === 0">
<span class="no-recent-alerts"><el-icon><SuccessFilled /></el-icon>{{$t('relationShip.noRecentAlerts')}}</span>