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

fix: 实体列表以及展开详情的loading调整

Browse Source
This commit is contained in:
刘洪洪
2023-07-10 18:54:43 +08:00
parent 4114c3fa36
commit d7b6a4f735
4 changed files with 55 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -34,9 +34,9 @@
></explorer-search> ></explorer-search>
<div style="display: flex;flex-direction: column;height: calc(100% - 42px);"> <div style="display: flex;flex-direction: column;height: calc(100% - 42px);">
<div class="explorer-result" v-if="showList"> <div class="explorer-result" v-if="showList" style="position: relative;">
<loading :loading="loadingCount"></loading> <loading :loading="loadingCount" style="width: 240px"></loading>
<span>{{ summaryCount.total }}</span>results，IP <span>{{ summaryCount.total }}&nbsp;</span>results，IP
<span>{{ summaryCount.ipCount }}</span>，Domain <span>{{ summaryCount.ipCount }}</span>，Domain
<span>{{ summaryCount.fqdnCount }}</span>，APP <span>{{ summaryCount.fqdnCount }}</span>，APP
<span>{{ summaryCount.appCount }}</span> <span>{{ summaryCount.appCount }}</span>

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

@@ -58,12 +58,16 @@
<div class="overview__row"> <div class="overview__row">
<div class="row__label row__label--width130">{{$t('entities.networkQualityRating')}}</div> <div class="row__label row__label--width130">{{$t('entities.networkQualityRating')}}</div>
<loading :loading="loadingNetworkQuality" size="small" inner-style="left: 1rem;"></loading>
<div class="entity-score" v-if="!loadingNetworkQuality"> <div style="position: relative;">
<div class="circle-icon" v-if="score <= 2 || score === '-'" :class="{'data-score-red': score <= 2 || score === '-'}" ></div> <div class="entity-score" v-if="!loadingNetworkQuality">
<div class="circle-icon" v-else-if="score <= 4" :class="{'data-score-yellow': score <= 4}" ></div> <div class="circle-icon" v-if="score <= 2 || score === '-'" :class="{'data-score-red': score <= 2 || score === '-'}" ></div>
<div class="circle-icon" v-else-if="score <= 6" :class="{'data-score-green': score <= 6}" ></div> <div class="circle-icon" v-else-if="score <= 4" :class="{'data-score-yellow': score <= 4}" ></div>
Score:{{score}} <div class="circle-icon" v-else-if="score <= 6" :class="{'data-score-green': score <= 6}" ></div>
Score:{{score}}
</div>
<loading :loading="loadingNetworkQuality" size="small" style="left: 1rem;width: 50%;"></loading>
</div> </div>
</div> </div>
</div> </div>
@@ -74,10 +78,12 @@
<div class="overview__content domain__content"> <div class="overview__content domain__content">
<div class="overview__tags domain__tags" ref="relationship"></div> <div class="overview__tags domain__tags" ref="relationship"></div>
<div class="overview__row"> <div class="overview__row">
<div class="row__label row__label--width130">{{$t('entities.tab.relatedIp')}}</div> <div class="row__label row__label--width130">{{$t('entities.tab.relatedDomain')}}</div>
<loading :loading="loadingRelationshipOne" size="small" inner-style="left: 1rem;" style="width: 50%;"></loading>
<div class="row__content overview__row-related"> <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>
<div class="data-item" v-show="item.show" v-for="(item, index) in relationshipDataOne" :key="index"> <div class="data-item" v-show="item.show" v-for="(item, index) in relationshipDataOne" :key="index">
{{item.value}} {{item.value}}
</div> </div>
@@ -96,8 +102,11 @@
<div class="overview__row overview__row-related"> <div class="overview__row overview__row-related">
<div class="row__label row__label--width130">{{$t('entities.tab.relatedIp')}}</div> <div class="row__label row__label--width130">{{$t('entities.tab.relatedIp')}}</div>
<loading :loading="loadingRelationshipTwo" size="small" inner-style="left: 1rem;" style="width: 50%;"></loading>
<div class="row__content"> <div class="row__content">
<div v-if="loadingRelationshipTwo" style="position: relative;width: 450px;">
<loading :loading="loadingRelationshipTwo" size="small" style="left: 1rem;"></loading>
</div>
<div class="data-item" v-show="item.show" v-for="(item, index) in relationshipDataTwo" :key="index"> <div class="data-item" v-show="item.show" v-for="(item, index) in relationshipDataTwo" :key="index">
{{item.value}} {{item.value}}
</div> </div>

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

@@ -66,12 +66,15 @@
<div class="overview__row"> <div class="overview__row">
<div class="row__label row__label--width130">{{$t('entities.networkQualityRating')}}</div> <div class="row__label row__label--width130">{{$t('entities.networkQualityRating')}}</div>
<loading :loading="loadingNetworkQuality" size="small" inner-style="left: 1rem;"></loading> <div style="position: relative;">
<div class="entity-score" v-if="!loadingNetworkQuality"> <div class="entity-score" v-if="!loadingNetworkQuality">
<div class="circle-icon" v-if="score <= 2 || score === '-'" :class="{'data-score-red': score <= 2 || score === '-'}" ></div> <div class="circle-icon" v-if="score <= 2 || score === '-'" :class="{'data-score-red': score <= 2 || score === '-'}" ></div>
<div class="circle-icon" v-else-if="score <= 4" :class="{'data-score-yellow': score <= 4}" ></div> <div class="circle-icon" v-else-if="score <= 4" :class="{'data-score-yellow': score <= 4}" ></div>
<div class="circle-icon" v-else-if="score <= 6" :class="{'data-score-green': score <= 6}" ></div> <div class="circle-icon" v-else-if="score <= 6" :class="{'data-score-green': score <= 6}" ></div>
Score:{{score}} Score:{{score}}
</div>
<loading :loading="loadingNetworkQuality" size="small" style="left: 1rem;width: 50%;"></loading>
</div> </div>
</div> </div>
</div> </div>
@@ -83,9 +86,11 @@
<div class="overview__tags domain__tags" ref="relationship"></div> <div class="overview__tags domain__tags" ref="relationship"></div>
<div class="overview__row"> <div class="overview__row">
<div class="row__label row__label--width130">{{$t('entities.tab.relatedApp')}}</div> <div class="row__label row__label--width130">{{$t('entities.tab.relatedApp')}}</div>
<loading :loading="loadingRelationshipOne" size="small" inner-style="left: 1rem;" style="width: 50%;"></loading>
<div class="row__content overview__row-related"> <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>
<div class="data-item" v-show="item.show" v-for="(item, index) in relationshipDataOne" :key="index"> <div class="data-item" v-show="item.show" v-for="(item, index) in relationshipDataOne" :key="index">
{{item.value}} {{item.value}}
</div> </div>
@@ -103,9 +108,10 @@
<div class="overview__row overview__row-related"> <div class="overview__row overview__row-related">
<div class="row__label row__label--width130">{{$t('entities.tab.relatedIp')}}</div> <div class="row__label row__label--width130">{{$t('entities.tab.relatedIp')}}</div>
<loading :loading="loadingRelationshipTwo" size="small" inner-style="left: 1rem;" style="width: 50%;"></loading>
<div class="row__content"> <div class="row__content">
<div v-if="loadingRelationshipTwo" style="position: relative;width: 450px;">
<loading :loading="loadingRelationshipTwo" size="small" style="left: 1rem;"></loading>
</div>
<div class="data-item" v-show="item.show" v-for="(item, index) in relationshipDataTwo" :key="index"> <div class="data-item" v-show="item.show" v-for="(item, index) in relationshipDataTwo" :key="index">
{{item.value}} {{item.value}}
</div> </div>

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

@@ -88,12 +88,15 @@
</div> </div>
<div class="overview__row"> <div class="overview__row">
<div class="row__label row__label--width130">{{$t('entities.networkQualityRating')}}</div> <div class="row__label row__label--width130">{{$t('entities.networkQualityRating')}}</div>
<loading :loading="loadingNetworkQuality" size="small" inner-style="left: 1rem;"></loading> <div style="position: relative;">
<div class="entity-score" v-if="!loadingNetworkQuality"> <div class="entity-score" v-if="!loadingNetworkQuality">
<div class="circle-icon" v-if="score <= 2 || score === '-'" :class="{'data-score-red': score <= 2 || score === '-'}" ></div> <div class="circle-icon" v-if="score <= 2 || score === '-'" :class="{'data-score-red': score <= 2 || score === '-'}" ></div>
<div class="circle-icon" v-else-if="score <= 4" :class="{'data-score-yellow': score <= 4}" ></div> <div class="circle-icon" v-else-if="score <= 4" :class="{'data-score-yellow': score <= 4}" ></div>
<div class="circle-icon" v-else-if="score <= 6" :class="{'data-score-green': score <= 6}" ></div> <div class="circle-icon" v-else-if="score <= 6" :class="{'data-score-green': score <= 6}" ></div>
Score:{{score}} Score:{{score}}
</div>
<loading :loading="loadingNetworkQuality" size="small" style="left: 1rem;width: 50%;"></loading>
</div> </div>
</div> </div>
</div> </div>
@@ -105,9 +108,11 @@
<div class="overview__tags domain__tags" ref="relationship"></div> <div class="overview__tags domain__tags" ref="relationship"></div>
<div class="overview__row overview__row-related"> <div class="overview__row overview__row-related">
<div class="row__label row__label--width130">{{$t('entities.tab.relatedApp')}}</div> <div class="row__label row__label--width130">{{$t('entities.tab.relatedApp')}}</div>
<loading :loading="loadingRelationshipOne" size="small" inner-style="left: 1rem;" style="width: 50%;"></loading>
<div class="row__content"> <div class="row__content">
<div v-if="loadingRelationshipOne" style="position: relative;width: 450px;">
<loading :loading="loadingRelationshipOne" size="small" style="left: 1rem;"></loading>
</div>
<div class="data-item" v-show="item.show" v-for="(item, index) in relationshipDataOne" :key="index"> <div class="data-item" v-show="item.show" v-for="(item, index) in relationshipDataOne" :key="index">
{{item.value}} {{item.value}}
</div> </div>
@@ -125,9 +130,11 @@
<div class="overview__row overview__row-related"> <div class="overview__row overview__row-related">
<div class="row__label row__label--width130">{{$t('entities.relatedDomain')}}</div> <div class="row__label row__label--width130">{{$t('entities.relatedDomain')}}</div>
<loading :loading="loadingRelationshipTwo" size="small" inner-style="left: 1rem;" style="width: 50%;"></loading>
<div class="row__content"> <div class="row__content">
<div v-if="loadingRelationshipTwo" style="position: relative;width: 450px;">
<loading :loading="loadingRelationshipTwo" size="small" style="left: 1rem;"></loading>
</div>
<div class="data-item" v-show="item.show" v-for="(item, index) in relationshipDataTwo" :key="index"> <div class="data-item" v-show="item.show" v-for="(item, index) in relationshipDataTwo" :key="index">
{{item.value}} {{item.value}}
</div> </div>