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

fix: 全局loading统一，实体详情下拉地图loading补充

Browse Source
This commit is contained in:
changyongqiang
2022-05-27 12:14:24 +08:00
parent d61878c85f
commit 8a9e6efcfc
6 changed files with 42 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/views/detections/DetectionList.vue
View File

@@ -1,8 +1,6 @@
<template> <template>
<div class="detection-list" id="detectionList"> <div class="detection-list" id="detectionList">
<div class="detection__loading" style="background: #eff2f5;opacity: .6;" v-show="loading"> <loading :loading="loading"></loading>
<i class="el-icon-loading"></i>
</div>
<div class="detection-list__content"> <div class="detection-list__content">
<div class="detection-list--list"> <div class="detection-list--list">
<div class="no-data" v-if="noData">No data</div> <div class="no-data" v-if="noData">No data</div>
@@ -24,9 +22,11 @@
<script> <script>
import DetectionRow from '@/views/detections/DetectionRow' import DetectionRow from '@/views/detections/DetectionRow'
import Loading from '@/components/common/Loading'
export default { export default {
name: 'DetectionList', name: 'DetectionList',
components: { components: {
Loading,
DetectionRow DetectionRow
}, },
props: { props: {

9
src/views/detections/Index.vue
View File

@@ -15,9 +15,7 @@
></detection-search> ></detection-search>
<!-- 内容区 --> <!-- 内容区 -->
<div class="explorer-container" style="height: calc(100% - 20px); flex-direction: column"> <div class="explorer-container" style="height: calc(100% - 20px); flex-direction: column">
<div class="entity__loading" style="background: #eff2f5;opacity: .6;" v-show="loading"> <loading :loading="loading"></loading>
<i class="el-icon-loading"></i>
</div>
<template v-if="isEventSeverityNoData"> <template v-if="isEventSeverityNoData">
<div class="no-data detection__event-severity-bar" >No data</div> <div class="no-data detection__event-severity-bar" >No data</div>
</template> </template>
@@ -108,18 +106,19 @@ import DetectionList from '@/views/detections/DetectionList'
import Pagination from '@/components/common/Pagination' import Pagination from '@/components/common/Pagination'
import { defaultPageSize, detectionPageType } from '@/utils/constants' import { defaultPageSize, detectionPageType } from '@/utils/constants'
import { getNowTime, getSecond, rTime } from '@/utils/date-util' import { getNowTime, getSecond, rTime } from '@/utils/date-util'
import { ref } from 'vue' import { ref, shallowRef } from 'vue'
import * as echarts from 'echarts' import * as echarts from 'echarts'
import { multipleBarOption, pieForSeverity, activeAttackBar, getAttackColor, getSeverityColor, getSeriesIndex } from '@/views/detections/options/detectionOptions' import { multipleBarOption, pieForSeverity, activeAttackBar, getAttackColor, getSeverityColor, getSeriesIndex } from '@/views/detections/options/detectionOptions'
import { api, getData } from '@/utils/api' import { api, getData } from '@/utils/api'
import { reverseSortBy, sortBy, extensionEchartY } from '@/utils/tools' import { reverseSortBy, sortBy, extensionEchartY } from '@/utils/tools'
import { useRoute } from 'vue-router' import { useRoute } from 'vue-router'
import DetectionNoData from '@/views/detections/DetectionNoData' import DetectionNoData from '@/views/detections/DetectionNoData'
import { shallowRef } from 'vue' import Loading from '@/components/common/Loading'
export default { export default {
name: 'Index', name: 'Index',
components: { components: {
Loading,
DetectionSearch, DetectionSearch,
DateTimeRange, DateTimeRange,
TimeRefresh, TimeRefresh,

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

@@ -27,7 +27,7 @@
<div class="overview-item"> <div class="overview-item">
<div class="overview__title">{{$t('overall.traffic')}}</div> <div class="overview__title">{{$t('overall.traffic')}}</div>
<div class="overview__content overview__content-loading"> <div class="overview__content overview__content-loading">
<loading :loading="loadingTraffic"></loading> <loading :loading="loadingTraffic" size="small" inner-style="left: 8.75rem;" style="width: 50%;"></loading>
<div class="overview__row"> <div class="overview__row">
<div class="row__label row__label--width130">{{$t('overall.peak')}}</div> <div class="row__label row__label--width130">{{$t('overall.peak')}}</div>
<div class="row__content">{{unitConvert(entityData.max, unitTypes.byte).join(' ')}}/s</div> <div class="row__content">{{unitConvert(entityData.max, unitTypes.byte).join(' ')}}/s</div>
@@ -62,7 +62,7 @@
<div class="overview__content domain__content"> <div class="overview__content domain__content">
<div class="overview__tags domain__tags" ref="relationship"> <div class="overview__tags domain__tags" ref="relationship">
<div class="overview__domain-tabs overview__domain-tabs-loading"> <div class="overview__domain-tabs overview__domain-tabs-loading">
<loading :loading="loadingRelationshipOne"></loading> <loading :loading="loadingRelationshipOne" size="small" inner-style="left: 1rem;" style="width: 50%;"></loading>
<div class="overview__domain-tab"> <div class="overview__domain-tab">
<div class="overview__tag domain__tag"> <div class="overview__tag domain__tag">
<span class="tag__value">{{relationshipDataOne.length}}</span> <span class="tag__value">{{relationshipDataOne.length}}</span>
@@ -82,7 +82,7 @@
</div> </div>
</div> </div>
<div class="overview__domain-tabs overview__domain-tabs-loading"> <div class="overview__domain-tabs overview__domain-tabs-loading">
<loading :loading="loadingRelationshipTwo"></loading> <loading :loading="loadingRelationshipTwo" size="small" inner-style="left: 1rem;" style="width: 50%;"></loading>
<div class="overview__domain-tab"> <div class="overview__domain-tab">
<div class="overview__tag domain__tag"> <div class="overview__tag domain__tag">
<span class="tag__value">{{relationshipDataTwo.length}}</span> <span class="tag__value">{{relationshipDataTwo.length}}</span>
@@ -107,7 +107,7 @@
<div class="overview-item"> <div class="overview-item">
<div class="overview__title">{{$t('overall.networkQuality')}}</div> <div class="overview__title">{{$t('overall.networkQuality')}}</div>
<div class="overview__content overview__content-loading-net"> <div class="overview__content overview__content-loading-net">
<loading :loading="loadingNetworkQuality"></loading> <loading :loading="loadingNetworkQuality" size="small"></loading>
<div class="overview__row overview__row--single-value"> <div class="overview__row overview__row--single-value">
<chart-single-value <chart-single-value
v-for="(chartInfo, i) in singleValues.chartInfos" v-for="(chartInfo, i) in singleValues.chartInfos"
@@ -124,14 +124,14 @@
<div class="overview__content"> <div class="overview__content">
<div class="overview__tags"> <div class="overview__tags">
<div class="overview__tag overview__tag-loading"> <div class="overview__tag overview__tag-loading">
<loading :loading="loadingOut"></loading> <loading :loading="loadingOut" size="small"></loading>
<span class="tag__desc">{{$t('entities.outLinkTrafficPercentage')}}</span> <span class="tag__desc">{{$t('entities.outLinkTrafficPercentage')}}</span>
<span class="tag__value">{{entityData.linkOutId ? entityData.linkOutId : '-'}},</span> <span class="tag__value">{{entityData.linkOutId ? entityData.linkOutId : '-'}},</span>
<span class="tag__desc">{{$t('entities.percentage')}}</span> <span class="tag__desc">{{$t('entities.percentage')}}</span>
<span class="tag__value">{{entityData.linkOutPercent ? unitConvert(entityData.linkOutPercent, unitTypes.percent).join(' ') : '-'}}</span> <span class="tag__value">{{entityData.linkOutPercent ? unitConvert(entityData.linkOutPercent, unitTypes.percent).join(' ') : '-'}}</span>
</div> </div>
<div class="overview__tag overview__tag-loading"> <div class="overview__tag overview__tag-loading">
<loading :loading="loadingIn"></loading> <loading :loading="loadingIn" size="small"></loading>
<span class="tag__desc">{{$t('entities.inLinkTrafficPercentage')}}</span> <span class="tag__desc">{{$t('entities.inLinkTrafficPercentage')}}</span>
<span class="tag__value">{{entityData.linkInId ? entityData.linkInId : '-'}},</span> <span class="tag__value">{{entityData.linkInId ? entityData.linkInId : '-'}},</span>
<span class="tag__desc">{{$t('entities.percentage')}}</span> <span class="tag__desc">{{$t('entities.percentage')}}</span>
@@ -143,7 +143,7 @@
<div class="overview-item"> <div class="overview-item">
<div class="overview__title">{{$t('overall.alert')}}</div> <div class="overview__title">{{$t('overall.alert')}}</div>
<div class="overview__content overview__content-loading"> <div class="overview__content overview__content-loading">
<loading :loading="loadingAlert"></loading> <loading :loading="loadingAlert" size="small" inner-style="left: 10rem"></loading>
<div class="overview__row" v-if="performanceData.length === 0"> <div class="overview__row" v-if="performanceData.length === 0">
<span class="no-recent-alerts"><i class="el-icon-success"></i>{{$t('relationShip.noRecentAlerts')}}</span> <span class="no-recent-alerts"><i class="el-icon-success"></i>{{$t('relationShip.noRecentAlerts')}}</span>
</div> </div>
@@ -167,7 +167,7 @@
<div class="overview-item"> <div class="overview-item">
<div class="overview__title">{{$t('entities.securityEvents')}}</div> <div class="overview__title">{{$t('entities.securityEvents')}}</div>
<div class="overview__content overview__content-loading"> <div class="overview__content overview__content-loading">
<loading :loading="loadingSecurityEvents"></loading> <loading :loading="loadingSecurityEvents" size="small" inner-style="left: 10rem"></loading>
<div class="overview__row" v-if="securityData.length === 0"> <div class="overview__row" v-if="securityData.length === 0">
<span class="no-recent-alerts"><i class="el-icon-success"></i>{{$t('relationShip.noRecentAlerts')}}</span> <span class="no-recent-alerts"><i class="el-icon-success"></i>{{$t('relationShip.noRecentAlerts')}}</span>
</div> </div>
@@ -195,6 +195,7 @@
:entity="entityCopy" :entity="entityCopy"
:query-params="queryParams" :query-params="queryParams"
:hide-header="true" :hide-header="true"
:loading="loadingMap"
@getCurrentTimeRange="getCurrentTimeRange" @getCurrentTimeRange="getCurrentTimeRange"
></chart> ></chart>
</div> </div>
@@ -298,7 +299,8 @@ export default {
loadingOut: false, loadingOut: false,
loadingIn: false, loadingIn: false,
loadingAlert: false, loadingAlert: false,
loadingSecurityEvents: false loadingSecurityEvents: false,
loadingMap: false
} }
} }
}, },
@@ -317,10 +319,12 @@ export default {
this.entityData.ipCount = result.ipCount this.entityData.ipCount = result.ipCount
}, },
chartGetMap () { chartGetMap () {
this.loadingMap = true
get((this.trafficUrlMap), this.getQueryParams()).then(response => { get((this.trafficUrlMap), this.getQueryParams()).then(response => {
if (response.code === 200) { if (response.code === 200) {
this.chartData = response.data.result this.chartData = response.data.result
} }
this.loadingMap = false
}) })
}, },
queryRelated () { queryRelated () {
@@ -330,9 +334,9 @@ export default {
}, },
mounted () { mounted () {
this.queryParams = this.getQueryParams() this.queryParams = this.getQueryParams()
this.chartGetMap()
this.$nextTick(() => { this.$nextTick(() => {
setTimeout(() => { setTimeout(() => {
this.chartGetMap()
this.queryRelated() this.queryRelated()
}, 250) }, 250)
}) })

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

@@ -31,7 +31,7 @@
<div class="overview-item"> <div class="overview-item">
<div class="overview__title">{{$t('overall.traffic')}}</div> <div class="overview__title">{{$t('overall.traffic')}}</div>
<div class="overview__content overview__content-loading"> <div class="overview__content overview__content-loading">
<loading :loading="loadingTraffic"></loading> <loading :loading="loadingTraffic" size="small" inner-style="left: 8.75rem;" style="width: 50%;"></loading>
<div class="overview__row"> <div class="overview__row">
<div class="row__label row__label--width130">{{$t('overall.peak')}}</div> <div class="row__label row__label--width130">{{$t('overall.peak')}}</div>
<div class="row__content">{{unitConvert(entityData.max, unitTypes.byte).join(' ')}}/s</div> <div class="row__content">{{unitConvert(entityData.max, unitTypes.byte).join(' ')}}/s</div>
@@ -66,7 +66,7 @@
<div class="overview__content domain__content"> <div class="overview__content domain__content">
<div class="overview__tags domain__tags" ref="relationship"> <div class="overview__tags domain__tags" ref="relationship">
<div class="overview__domain-tabs overview__domain-tabs-loading"> <div class="overview__domain-tabs overview__domain-tabs-loading">
<loading :loading="loadingRelationshipOne"></loading> <loading :loading="loadingRelationshipOne" size="small" inner-style="left: 1rem;" style="width: 50%;"></loading>
<div class="overview__domain-tab"> <div class="overview__domain-tab">
<div class="overview__tag domain__tag"> <div class="overview__tag domain__tag">
<span class="tag__value">{{relationshipDataOne.length}}</span> <span class="tag__value">{{relationshipDataOne.length}}</span>
@@ -86,7 +86,7 @@
</div> </div>
</div> </div>
<div class="overview__domain-tabs overview__domain-tabs-loading"> <div class="overview__domain-tabs overview__domain-tabs-loading">
<loading :loading="loadingRelationshipTwo"></loading> <loading :loading="loadingRelationshipTwo" size="small" inner-style="left: 1rem;" style="width: 50%;"></loading>
<div class="overview__domain-tab"> <div class="overview__domain-tab">
<div class="overview__tag domain__tag"> <div class="overview__tag domain__tag">
<span class="tag__value">{{relationshipDataTwo.length}}</span> <span class="tag__value">{{relationshipDataTwo.length}}</span>
@@ -111,7 +111,7 @@
<div class="overview-item"> <div class="overview-item">
<div class="overview__title">{{$t('overall.networkQuality')}}</div> <div class="overview__title">{{$t('overall.networkQuality')}}</div>
<div class="overview__content overview__content-loading-net"> <div class="overview__content overview__content-loading-net">
<loading :loading="loadingNetworkQuality"></loading> <loading :loading="loadingNetworkQuality" size="small"></loading>
<div class="overview__row overview__row--single-value"> <div class="overview__row overview__row--single-value">
<chart-single-value <chart-single-value
v-for="(chartInfo, i) in singleValues.chartInfos" v-for="(chartInfo, i) in singleValues.chartInfos"
@@ -128,14 +128,14 @@
<div class="overview__content"> <div class="overview__content">
<div class="overview__tags"> <div class="overview__tags">
<div class="overview__tag overview__tag-loading"> <div class="overview__tag overview__tag-loading">
<loading :loading="loadingOut"></loading> <loading :loading="loadingOut" size="small"></loading>
<span class="tag__desc">{{$t('entities.outLinkTrafficPercentage')}}</span> <span class="tag__desc">{{$t('entities.outLinkTrafficPercentage')}}</span>
<span class="tag__value">{{entityData.linkOutId ? entityData.linkOutId : '-'}},</span> <span class="tag__value">{{entityData.linkOutId ? entityData.linkOutId : '-'}},</span>
<span class="tag__desc">{{$t('entities.percentage')}}</span> <span class="tag__desc">{{$t('entities.percentage')}}</span>
<span class="tag__value">{{entityData.linkOutPercent ? unitConvert(entityData.linkOutPercent, unitTypes.percent).join(' ') : '-'}}</span> <span class="tag__value">{{entityData.linkOutPercent ? unitConvert(entityData.linkOutPercent, unitTypes.percent).join(' ') : '-'}}</span>
</div> </div>
<div class="overview__tag overview__tag-loading"> <div class="overview__tag overview__tag-loading">
<loading :loading="loadingIn"></loading> <loading :loading="loadingIn" size="small"></loading>
<span class="tag__desc">{{$t('entities.inLinkTrafficPercentage')}}</span> <span class="tag__desc">{{$t('entities.inLinkTrafficPercentage')}}</span>
<span class="tag__value">{{entityData.linkInId ? entityData.linkInId : '-'}},</span> <span class="tag__value">{{entityData.linkInId ? entityData.linkInId : '-'}},</span>
<span class="tag__desc">{{$t('entities.percentage')}}</span> <span class="tag__desc">{{$t('entities.percentage')}}</span>
@@ -147,7 +147,7 @@
<div class="overview-item"> <div class="overview-item">
<div class="overview__title">{{$t('overall.alert')}}</div> <div class="overview__title">{{$t('overall.alert')}}</div>
<div class="overview__content overview__content-loading"> <div class="overview__content overview__content-loading">
<loading :loading="loadingAlert"></loading> <loading :loading="loadingAlert" size="small" inner-style="left: 10rem"></loading>
<div class="overview__row" v-if="performanceData.length === 0"> <div class="overview__row" v-if="performanceData.length === 0">
<span class="no-recent-alerts"><i class="el-icon-success"></i>{{$t('relationShip.noRecentAlerts')}}</span> <span class="no-recent-alerts"><i class="el-icon-success"></i>{{$t('relationShip.noRecentAlerts')}}</span>
</div> </div>
@@ -171,7 +171,7 @@
<div class="overview-item"> <div class="overview-item">
<div class="overview__title">{{$t('entities.securityEvents')}}</div> <div class="overview__title">{{$t('entities.securityEvents')}}</div>
<div class="overview__content overview__content-loading"> <div class="overview__content overview__content-loading">
<loading :loading="loadingSecurityEvents"></loading> <loading :loading="loadingSecurityEvents" size="small" inner-style="left: 10rem"></loading>
<div class="overview__row" v-if="securityData.length === 0"> <div class="overview__row" v-if="securityData.length === 0">
<span class="no-recent-alerts"><i class="el-icon-success"></i>{{$t('relationShip.noRecentAlerts')}}</span> <span class="no-recent-alerts"><i class="el-icon-success"></i>{{$t('relationShip.noRecentAlerts')}}</span>
</div> </div>
@@ -199,6 +199,7 @@
:entity="entityCopy" :entity="entityCopy"
:query-params="queryParams" :query-params="queryParams"
:hide-header="true" :hide-header="true"
:loading="loadingMap"
@getCurrentTimeRange="getCurrentTimeRange" @getCurrentTimeRange="getCurrentTimeRange"
></chart> ></chart>
</div> </div>
@@ -303,7 +304,8 @@ export default {
loadingOut: false, loadingOut: false,
loadingIn: false, loadingIn: false,
loadingAlert: false, loadingAlert: false,
loadingSecurityEvents: false loadingSecurityEvents: false,
loadingMap: false
} }
} }
}, },
@@ -322,10 +324,12 @@ export default {
this.entityData.ipCount = result.ipCount this.entityData.ipCount = result.ipCount
}, },
chartGetMap () { chartGetMap () {
this.loadingMap = true
get(this.trafficUrlMap, this.getQueryParams()).then(response => { get(this.trafficUrlMap, this.getQueryParams()).then(response => {
if (response.code === 200) { if (response.code === 200) {
this.chartData = response.data.result this.chartData = response.data.result
} }
this.loadingMap = false
}) })
}, },
getBasicProperties () { getBasicProperties () {
@@ -350,9 +354,9 @@ export default {
}, },
mounted () { mounted () {
this.queryParams = this.getQueryParams() this.queryParams = this.getQueryParams()
this.chartGetMap()
this.$nextTick(() => { this.$nextTick(() => {
setTimeout(() => { setTimeout(() => {
this.chartGetMap()
this.getBasicProperties() this.getBasicProperties()
this.queryRelated() this.queryRelated()
}, 250) }, 250)

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

@@ -222,6 +222,7 @@
:entity="entityCopy" :entity="entityCopy"
:query-params="queryParams" :query-params="queryParams"
:hide-header="true" :hide-header="true"
:loading="loadingMap"
@getCurrentTimeRange="getCurrentTimeRange" @getCurrentTimeRange="getCurrentTimeRange"
></chart> ></chart>
</div> </div>
@@ -330,7 +331,8 @@ export default {
loadingOut: false, loadingOut: false,
loadingIn: false, loadingIn: false,
loadingAlert: false, loadingAlert: false,
loadingSecurityEvents: false loadingSecurityEvents: false,
loadingMap: false
} }
}, },
computed: { computed: {
@@ -388,10 +390,12 @@ export default {
this.entityData.domainCount = result.domainCount this.entityData.domainCount = result.domainCount
}, },
chartGetMap () { chartGetMap () {
this.loadingMap = true
get((this.trafficUrlMap), this.getQueryParams()).then(response => { get((this.trafficUrlMap), this.getQueryParams()).then(response => {
if (response.code === 200) { if (response.code === 200) {
this.chartData = response.data.result this.chartData = response.data.result
} }
this.loadingMap = false
}) })
}, },
queryRelated () { queryRelated () {
@@ -401,9 +405,9 @@ export default {
}, },
mounted () { mounted () {
this.queryParams = this.getQueryParams() this.queryParams = this.getQueryParams()
this.chartGetMap()
this.$nextTick(() => { this.$nextTick(() => {
setTimeout(() => { setTimeout(() => {
this.chartGetMap()
this.queryRelated() this.queryRelated()
}, 250) }, 250)
}) })

2
src/views/entityExplorer/entityList/detailOverview/entityDetailMixin.js
View File

@@ -431,7 +431,7 @@ export default {
setTimeout(() => { this.queryEntityDetail() }) setTimeout(() => { this.queryEntityDetail() })
const _this = this const _this = this
this.emitter.on('switch-collapse', function () { this.emitter.on('switch-collapse', function () {
setTimeout(() => { _this.queryEntityDetail() }, 400) setTimeout(() => { _this.queryEntityDetail() }, 200)
}) })
}, },
beforeUnmount () { beforeUnmount () {