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

CN-1035: 多页签图表loading和error交互开发

Browse Source
This commit is contained in:
刘洪洪
2023-05-22 16:39:20 +08:00
parent 8c74be31bb
commit c50e41e649
4 changed files with 131 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/views/charts2/charts/entityDetail/tabs/DigitalCertificate.vue
View File

@@ -1,9 +1,9 @@
<template> <template>
<div> <div>
<chart-error v-if="showError" :content="errorMsg" style="margin-top: 18px;margin-left: 8px;"></chart-error> <chart-error v-if="showError" :content="errorMsg" class="entity-detail-event-error"></chart-error>
<chart-no-data v-if="isNoData && !showError"></chart-no-data> <chart-no-data v-if="isNoData && !showError"></chart-no-data>
<div class="digital-certificate" v-if="!showError && !isNoData" :style="{width: moreCertificatesWidth}"> <div v-if="!isNoData && !showError && !loading" class="digital-certificate" :style="{width: moreCertificatesWidth}">
<div class="digital-certificate-header"> <div class="digital-certificate-header">
<div class="digital-certificate-header__icon"></div> <div class="digital-certificate-header__icon"></div>
<div class="digital-certificate-header-name"> <div class="digital-certificate-header-name">
@@ -51,9 +51,9 @@ export default {
data () { data () {
return { return {
showError: false, showError: false,
isNoData: false,
infoList: [], infoList: [],
errorMsg: '' errorMsg: '',
loading: true // 添加loading，为了避免初始化loading时，标题显示，而在loading结束error出现时标题隐藏，导致闪一下的效果
} }
}, },
mixins: [chartMixin], mixins: [chartMixin],
@@ -88,6 +88,7 @@ export default {
name: this.entityName // 实体名称 name: this.entityName // 实体名称
} }
this.loading = true
this.toggleLoading(true) this.toggleLoading(true)
// todo 接口、数据不明确，故没有模拟mock数据，后续此处需修改 // todo 接口、数据不明确，故没有模拟mock数据，后续此处需修改
axios.get(api.entity.performanceEvent, { params: params }).then(response => { axios.get(api.entity.performanceEvent, { params: params }).then(response => {
@@ -160,6 +161,7 @@ export default {
console.error(e) console.error(e)
this.httpError(e) this.httpError(e)
}).finally(() => { }).finally(() => {
this.loading = false
this.toggleLoading(false) this.toggleLoading(false)
}) })
}, },

48
src/views/charts2/charts/entityDetail/tabs/DomainNameResolution.vue
View File

@@ -1,25 +1,29 @@
<template> <template>
<chart-no-data v-if="isNoData && !showError"></chart-no-data> <div>
<div class="type-data__column"> <chart-error v-if="showError" :content="errorMsg" class="entity-detail-event-error"></chart-error>
<div class="type-data"> <chart-no-data v-if="isNoData && !showError"></chart-no-data>
<div class="type-title">
<span class="title-mark" ></span>{{ $t('entities.tab.relatedApp') }}&nbsp;&nbsp;({{relatedAppList.length}})</div> <div v-if="!isNoData && !showError && !loading" class="type-data__column">
<div class="type-content"> <div class="type-data">
<div v-for="entity in relatedAppList" class="data-item">{{entity.appName?entity.appName:entity}}</div> <div class="type-title">
<span class="title-mark" ></span>{{ $t('entities.tab.relatedApp') }}&nbsp;&nbsp;({{relatedAppList.length}})</div>
<div class="type-content">
<div v-for="entity in relatedAppList" class="data-item">{{entity.appName?entity.appName:entity}}</div>
</div>
</div> </div>
</div> <div class="type-data">
<div class="type-data"> <div class="type-title">
<div class="type-title"> <span class="title-mark" ></span>{{ $t('entities.tab.relatedIp') }}&nbsp;&nbsp;({{relatedIpList.length}})</div>
<span class="title-mark" ></span>{{ $t('entities.tab.relatedIp') }}&nbsp;&nbsp;({{relatedIpList.length}})</div> <div class="type-content">
<div class="type-content"> <div v-for="entity in relatedIpList" class="data-item">{{entity.ip?entity.ip:entity}}</div>
<div v-for="entity in relatedIpList" class="data-item">{{entity.ip?entity.ip:entity}}</div> </div>
</div> </div>
</div> <div class="type-data">
<div class="type-data"> <div class="type-title">
<div class="type-title"> <span class="title-mark" ></span>{{ $t('entities.tab.relatedDomain') }}&nbsp;&nbsp;({{relatedDomainList.length}})</div>
<span class="title-mark" ></span>{{ $t('entities.tab.relatedDomain') }}&nbsp;&nbsp;({{relatedDomainList.length}})</div> <div class="type-content">
<div class="type-content"> <div v-for="entity in relatedDomainList" class="data-item">{{entity.domain?entity.domain:entity}}</div>
<div v-for="entity in relatedDomainList" class="data-item">{{entity.domain?entity.domain:entity}}</div> </div>
</div> </div>
</div> </div>
</div> </div>
@@ -42,7 +46,9 @@ export default {
relatedAppList: [], relatedAppList: [],
relatedIpList: [], relatedIpList: [],
relatedDomainList: [], relatedDomainList: [],
showError: false showError: false,
errorMsg: '',
loading: true
} }
}, },
mounted () { mounted () {
@@ -79,6 +85,7 @@ export default {
endTime: getSecond(this.timeFilter.endTime), endTime: getSecond(this.timeFilter.endTime),
ip: '116.178.70.242' ip: '116.178.70.242'
} }
this.loading = true
this.toggleLoading(true) this.toggleLoading(true)
const relatedApp = new Promise(resolve => { const relatedApp = new Promise(resolve => {
axios.get(api.entity.domainNameResolutionRelatedApp, { params: params }).then(response => { axios.get(api.entity.domainNameResolutionRelatedApp, { params: params }).then(response => {
@@ -140,6 +147,7 @@ export default {
}) })
Promise.all([relatedApp, relatedIp, relatedDomain]).finally(response => { Promise.all([relatedApp, relatedIp, relatedDomain]).finally(response => {
this.toggleLoading(false) this.toggleLoading(false)
this.loading = false
}) })
}, },
httpError (e) { httpError (e) {

154
src/views/charts2/charts/entityDetail/tabs/InformationAggregation.vue
View File

@@ -1,82 +1,88 @@
<template> <template>
<div class="information-aggregation__table"> <div>
<el-table <!--初步方案：error提示替换table。后续若改为table内error提示，记得在此修改-->
style="width: 100%" <chart-error v-if="showError" :content="errorMsg" class="entity-detail-event-error"></chart-error>
tooltip-effect="light" <chart-no-data v-if="isNoData && !showError"></chart-no-data>
border
id="informationAggregationTable" <div v-if="!isNoData && !showError" class="information-aggregation__table">
ref="informationAggregationTable" <el-table
:data="informationAggregationList" style="width: 100%"
:cell-class-name="intelligenceContentClass" tooltip-effect="light"
> border
<el-table-column id="informationAggregationTable"
key="discoveryTime" ref="informationAggregationTable"
width="150px" :data="informationAggregationList"
:label="$t('entities.tab.informationAggregation.discoveryTime')" :cell-class-name="intelligenceContentClass"
prop="discoveryTime"
></el-table-column>
<el-table-column
key="updateTime"
width="150px"
:label="$t('entities.tab.informationAggregation.updateTime')"
prop="updateTime"
></el-table-column>
<el-table-column
key="intelligenceContent"
:label="$t('entities.tab.informationAggregation.intelligenceContent')"
prop="intelligenceContent"
> >
<template #default="scope"> <el-table-column
<div class="intelligence-content"> key="discoveryTime"
<div class="information-aggregation-tags"> width="150px"
<template v-for="ic in scope.row.intelligenceContent" > :label="$t('entities.tab.informationAggregation.discoveryTime')"
<template v-if="ic.type === 0" > prop="discoveryTime"
<div v-if="ic.threatLevel === -1" class="entity-tag entity-tag--small entity-tag--level-one-negative margin-r-6"> ></el-table-column>
{{ic.value}} <el-table-column
</div> key="updateTime"
<div v-else-if="ic.threatLevel === 0" class="entity-tag entity-tag--small entity-tag--level-one-normal margin-r-6"> width="150px"
{{ic.value}} :label="$t('entities.tab.informationAggregation.updateTime')"
</div> prop="updateTime"
<div v-else-if="ic.threatLevel === 1" class="entity-tag entity-tag--small entity-tag--level-one-positive margin-r-6"> ></el-table-column>
{{ic.value}} <el-table-column
</div> key="intelligenceContent"
:label="$t('entities.tab.informationAggregation.intelligenceContent')"
prop="intelligenceContent"
>
<template #default="scope">
<div class="intelligence-content">
<div class="information-aggregation-tags">
<template v-for="ic in scope.row.intelligenceContent" >
<template v-if="ic.type === 0" >
<div v-if="ic.threatLevel === -1" class="entity-tag entity-tag--small entity-tag--level-one-negative margin-r-6">
{{ic.value}}
</div>
<div v-else-if="ic.threatLevel === 0" class="entity-tag entity-tag--small entity-tag--level-one-normal margin-r-6">
{{ic.value}}
</div>
<div v-else-if="ic.threatLevel === 1" class="entity-tag entity-tag--small entity-tag--level-one-positive margin-r-6">
{{ic.value}}
</div>
</template>
</template> </template>
</template> </div>
</div> <div class="information-aggregation-tags">
<div class="information-aggregation-tags"> <div v-for="ic in scope.row.intelligenceContent" >
<div v-for="ic in scope.row.intelligenceContent" > <div v-if="ic.type === 1">
<div v-if="ic.type === 1"> <div v-if="ic.threatLevel === -1" class="entity-tag entity-tag--small entity-tag--level-two-negative margin-r-6">
<div v-if="ic.threatLevel === -1" class="entity-tag entity-tag--small entity-tag--level-two-negative margin-r-6"> {{ic.value}}
{{ic.value}} </div>
</div> <div v-else-if="ic.threatLevel === 0" class="entity-tag entity-tag--small entity-tag--level-two-normal margin-r-6">
<div v-else-if="ic.threatLevel === 0" class="entity-tag entity-tag--small entity-tag--level-two-normal margin-r-6"> {{ic.value}}
{{ic.value}} </div>
</div> <div v-else-if="ic.threatLevel === 1" class="entity-tag entity-tag--small entity-tag--level-two-positive margin-r-6">
<div v-else-if="ic.threatLevel === 1" class="entity-tag entity-tag--small entity-tag--level-two-positive margin-r-6"> {{ic.value}}
{{ic.value}} </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </template>
</template> </el-table-column>
</el-table-column> <el-table-column
<el-table-column key="status"
key="status" width="150px"
width="150px" :label="$t('entities.tab.informationAggregation.status')"
:label="$t('entities.tab.informationAggregation.status')" prop="status"
prop="status" >
> <template #default="scope">
<template #default="scope"> <div v-if="scope.row.status === 1" class="information-aggregation__valid">
<div v-if="scope.row.status === 1" class="information-aggregation__valid"> 有效
有效 </div>
</div> <div v-else-if="scope.row.status === 0" class="information-aggregation__invalid">
<div v-else-if="scope.row.status === 0" class="information-aggregation__invalid"> 无效
无效 </div>
</div> </template>
</template> </el-table-column>
</el-table-column> </el-table>
</el-table> </div>
</div> </div>
</template> </template>
@@ -87,7 +93,9 @@ export default {
name: 'InformationAggregation', name: 'InformationAggregation',
data () { data () {
return { return {
informationAggregationList: [] informationAggregationList: [],
errorMsg: '',
showError: false
} }
}, },
mixins: [chartMixin], mixins: [chartMixin],

24
src/views/charts2/charts/entityDetail/tabs/OpenPort.vue
View File

@@ -1,11 +1,15 @@
<template> <template>
<chart-no-data v-if="isNoData && !showError"></chart-no-data> <div>
<div class="type-data__column"> <chart-error v-if="showError" :content="errorMsg" class="entity-detail-event-error"></chart-error>
<div class="type-data"> <chart-no-data v-if="isNoData && !showError"></chart-no-data>
<div class="type-title">
<span class="title-mark" ></span>{{ $t('entities.tab.currentDevelopmentPortsAndServices') }}&nbsp;&nbsp;(5)</div> <div v-if="!showError && !isNoData && !loading" class="type-data__column">
<div class="type-content"> <div class="type-data">
<div v-for="openPort in openPortList" class="data-item">{{openPort}}</div> <div class="type-title">
<span class="title-mark" ></span>{{ $t('entities.tab.currentDevelopmentPortsAndServices') }}&nbsp;&nbsp;(5)</div>
<div class="type-content">
<div v-for="openPort in openPortList" class="data-item">{{openPort}}</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -26,7 +30,9 @@ export default {
data () { data () {
return { return {
openPortList: [], openPortList: [],
showError: false showError: false,
errorMsg: '',
loading: true
} }
}, },
mounted () { mounted () {
@@ -64,6 +70,7 @@ export default {
} }
this.toggleLoading(true) this.toggleLoading(true)
this.loading = true
axios.get(api.entity.openPort, { params: params }).then(response => { axios.get(api.entity.openPort, { params: params }).then(response => {
const res = response.data const res = response.data
if (res.code === 200) { if (res.code === 200) {
@@ -80,6 +87,7 @@ export default {
this.httpError(e) this.httpError(e)
}).finally(() => { }).finally(() => {
this.toggleLoading(false) this.toggleLoading(false)
this.loading = false
}) })
}, },
httpError (e) { httpError (e) {