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

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

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

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

@@ -27,7 +27,7 @@
<div class="overview-item">
<div class="overview__title">{{$t('overall.traffic')}}</div>
<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="row__label row__label--width130">{{$t('overall.peak')}}</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__tags domain__tags" ref="relationship">
<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__tag domain__tag">
<span class="tag__value">{{relationshipDataOne.length}}</span>
@@ -82,7 +82,7 @@
</div>
</div>
<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__tag domain__tag">
<span class="tag__value">{{relationshipDataTwo.length}}</span>
@@ -107,7 +107,7 @@
<div class="overview-item">
<div class="overview__title">{{$t('overall.networkQuality')}}</div>
<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">
<chart-single-value
v-for="(chartInfo, i) in singleValues.chartInfos"
@@ -124,14 +124,14 @@
<div class="overview__content">
<div class="overview__tags">
<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__value">{{entityData.linkOutId ? entityData.linkOutId : '-'}},</span>
<span class="tag__desc">{{$t('entities.percentage')}}</span>
<span class="tag__value">{{entityData.linkOutPercent ? unitConvert(entityData.linkOutPercent, unitTypes.percent).join(' ') : '-'}}</span>
</div>
<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__value">{{entityData.linkInId ? entityData.linkInId : '-'}},</span>
<span class="tag__desc">{{$t('entities.percentage')}}</span>
@@ -143,7 +143,7 @@
<div class="overview-item">
<div class="overview__title">{{$t('overall.alert')}}</div>
<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">
<span class="no-recent-alerts"><i class="el-icon-success"></i>{{$t('relationShip.noRecentAlerts')}}</span>
</div>
@@ -167,7 +167,7 @@
<div class="overview-item">
<div class="overview__title">{{$t('entities.securityEvents')}}</div>
<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">
<span class="no-recent-alerts"><i class="el-icon-success"></i>{{$t('relationShip.noRecentAlerts')}}</span>
</div>
@@ -195,6 +195,7 @@
:entity="entityCopy"
:query-params="queryParams"
:hide-header="true"
:loading="loadingMap"
@getCurrentTimeRange="getCurrentTimeRange"
></chart>
</div>
@@ -298,7 +299,8 @@ export default {
loadingOut: false,
loadingIn: false,
loadingAlert: false,
loadingSecurityEvents: false
loadingSecurityEvents: false,
loadingMap: false
}
}
},
@@ -317,10 +319,12 @@ export default {
this.entityData.ipCount = result.ipCount
},
chartGetMap () {
this.loadingMap = true
get((this.trafficUrlMap), this.getQueryParams()).then(response => {
if (response.code === 200) {
this.chartData = response.data.result
}
this.loadingMap = false
})
},
queryRelated () {
@@ -330,9 +334,9 @@ export default {
},
mounted () {
this.queryParams = this.getQueryParams()
this.chartGetMap()
this.$nextTick(() => {
setTimeout(() => {
this.chartGetMap()
this.queryRelated()
}, 250)
})

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

@@ -31,7 +31,7 @@
<div class="overview-item">
<div class="overview__title">{{$t('overall.traffic')}}</div>
<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="row__label row__label--width130">{{$t('overall.peak')}}</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__tags domain__tags" ref="relationship">
<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__tag domain__tag">
<span class="tag__value">{{relationshipDataOne.length}}</span>
@@ -86,7 +86,7 @@
</div>
</div>
<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__tag domain__tag">
<span class="tag__value">{{relationshipDataTwo.length}}</span>
@@ -111,7 +111,7 @@
<div class="overview-item">
<div class="overview__title">{{$t('overall.networkQuality')}}</div>
<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">
<chart-single-value
v-for="(chartInfo, i) in singleValues.chartInfos"
@@ -128,14 +128,14 @@
<div class="overview__content">
<div class="overview__tags">
<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__value">{{entityData.linkOutId ? entityData.linkOutId : '-'}},</span>
<span class="tag__desc">{{$t('entities.percentage')}}</span>
<span class="tag__value">{{entityData.linkOutPercent ? unitConvert(entityData.linkOutPercent, unitTypes.percent).join(' ') : '-'}}</span>
</div>
<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__value">{{entityData.linkInId ? entityData.linkInId : '-'}},</span>
<span class="tag__desc">{{$t('entities.percentage')}}</span>
@@ -147,7 +147,7 @@
<div class="overview-item">
<div class="overview__title">{{$t('overall.alert')}}</div>
<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">
<span class="no-recent-alerts"><i class="el-icon-success"></i>{{$t('relationShip.noRecentAlerts')}}</span>
</div>
@@ -171,7 +171,7 @@
<div class="overview-item">
<div class="overview__title">{{$t('entities.securityEvents')}}</div>
<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">
<span class="no-recent-alerts"><i class="el-icon-success"></i>{{$t('relationShip.noRecentAlerts')}}</span>
</div>
@@ -199,6 +199,7 @@
:entity="entityCopy"
:query-params="queryParams"
:hide-header="true"
:loading="loadingMap"
@getCurrentTimeRange="getCurrentTimeRange"
></chart>
</div>
@@ -303,7 +304,8 @@ export default {
loadingOut: false,
loadingIn: false,
loadingAlert: false,
loadingSecurityEvents: false
loadingSecurityEvents: false,
loadingMap: false
}
}
},
@@ -322,10 +324,12 @@ export default {
this.entityData.ipCount = result.ipCount
},
chartGetMap () {
this.loadingMap = true
get(this.trafficUrlMap, this.getQueryParams()).then(response => {
if (response.code === 200) {
this.chartData = response.data.result
}
this.loadingMap = false
})
},
getBasicProperties () {
@@ -350,9 +354,9 @@ export default {
},
mounted () {
this.queryParams = this.getQueryParams()
this.chartGetMap()
this.$nextTick(() => {
setTimeout(() => {
this.chartGetMap()
this.getBasicProperties()
this.queryRelated()
}, 250)

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

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

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

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