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

fix:实现没后端数据时候展示NO Data

Browse Source
This commit is contained in:
zhangxiaolong
2022-03-11 16:08:52 +08:00
parent 5924b5d050
commit ba02debc3e
2 changed files with 95 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/views/charts/Chart.vue
View File

@@ -437,6 +437,7 @@ export default {
), ),
isTwoSupportStatistics: isTwoSupportStatistics(props.chartInfo.type), isTwoSupportStatistics: isTwoSupportStatistics(props.chartInfo.type),
isAlarmInfo: isAlarmInfo(props.chartInfo.type), isAlarmInfo: isAlarmInfo(props.chartInfo.type),
} }
}, },
} }

177
src/views/charts/charts/ChartAlarmInfo.vue
View File

@@ -1,106 +1,107 @@
<template> <template>
<div class="cn-chart-alarm-info"> <div class="cn-chart-alarm-info">
<div class="cn-chart-alarm-info-mainContent"> <div class="no-data" v-if="isNoData">No data</div>
<div <template v-else>
class="cn-chart-alarm-content" <div class="cn-chart-alarm-info-mainContent">
v-for="(value, index) in chartData ? chartData : []" <div
:key="index" class="cn-chart-alarm-content"
> v-for="(value, index) in chartData ? chartData : []"
<div class="cn-alarm-info-main"> :key="index"
<div class="cn-alarm-info-main-left"> >
<div <div class="cn-alarm-info-main">
class="cn-chart-alarm-info-icon" <div class="cn-alarm-info-main-left">
:style="{
background: eventSeverityColor[value.eventSeverity],
opacity: 0.1,
}"
></div>
<i
class="cn-icon cn-icon-alert"
:style="{
color: eventSeverityColor[value.eventSeverity],
opacity: 1,
}"
></i>
</div>
<div class="cn-alarm-info-textContent">
<div class="cn-alarm-info-main-title" >
<div v-if="value.entityType === 'domain'" :title="value.domain" >
<span >{{
value.domain
}}</span>
</div>
<div v-if="value.entityType === 'app'" :title="value.appName" >
<span >{{ value.appName }}</span>
</div>
<div v-if="value.entityType === 'ip'" :title="value.serverIp" >
<span >{{ value.serverIp }}</span>
</div>
</div>
<div class="cn-alarm-info-bottom">
<div <div
class="cn-alarm-info-bottom-type" class="cn-chart-alarm-info-icon"
:style="{
background: eventSeverityColor[value.eventSeverity],
opacity: 0.1,
}"
></div>
<i
class="cn-icon cn-icon-alert"
:style="{ :style="{
color: eventSeverityColor[value.eventSeverity], color: eventSeverityColor[value.eventSeverity],
'border-color': eventSeverityColor[value.eventSeverity], opacity: 1,
}" }"
:title="value.eventType" ></i>
> </div>
{{ value.eventType }} <div class="cn-alarm-info-textContent">
</div> <div class="cn-alarm-info-main-title">
<div class="cn-alarm-info-bottom-middle"> <div v-if="value.entityType === 'domain'" :title="value.domain">
<i class="cn-icon cn-icon-time2"></i> <span>{{ value.domain }}</span>
<div class="cn-alarm-info-bottom-time">
&nbsp; {{ $t(`dns.startTime`) }}:&nbsp;&nbsp;&nbsp;
</div> </div>
<div> <div v-if="value.entityType === 'app'" :title="value.appName">
{{ <span>{{ value.appName }}</span>
value.startTime </div>
? dayJs <div v-if="value.entityType === 'ip'" :title="value.serverIp">
.tz(getMillisecond(value.startTime)) <span>{{ value.serverIp }}</span>
.format('YYYY-MM-DD HH:mm:ss')
: '-'
}}
</div> </div>
</div> </div>
&nbsp;&nbsp;&nbsp;
<div class="cn-alarm-info-bottom-right">
<i class="cn-icon cn-icon-time2"></i>
<div class="cn-alarm-info-bottom-time">
&nbsp;{{ $t(`dns.duration`) }}:&nbsp;&nbsp;&nbsp;
</div>
<div class="cn-alarm-info-bottom">
<div <div
class="cn-alarm-info-bottom-circle" class="cn-alarm-info-bottom-type"
:style="{ :style="{
background: eventSeverityColor[value.eventSeverity], color: eventSeverityColor[value.eventSeverity],
'border-color': eventSeverityColor[value.eventSeverity],
}" }"
></div> :title="value.eventType"
>
{{ value.eventType }}
</div>
<div class="cn-alarm-info-bottom-middle">
<i class="cn-icon cn-icon-time2"></i>
<div class="cn-alarm-info-bottom-time">
&nbsp; {{ $t(`dns.startTime`) }}:&nbsp;&nbsp;&nbsp;
</div>
<div>
{{
value.startTime
? dayJs
.tz(getMillisecond(value.startTime))
.format('YYYY-MM-DD HH:mm:ss')
: '-'
}}
</div>
</div>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<div>
{{ <div class="cn-alarm-info-bottom-right">
unitConvert(value.endTime - value.startTime, 'time').join( <i class="cn-icon cn-icon-time2"></i>
' ', <div class="cn-alarm-info-bottom-time">
) &nbsp;{{ $t(`dns.duration`) }}:&nbsp;&nbsp;&nbsp;
}} </div>
<div
class="cn-alarm-info-bottom-circle"
:style="{
background: eventSeverityColor[value.eventSeverity],
}"
></div>
&nbsp;&nbsp;&nbsp;
<div>
{{
unitConvert(value.endTime - value.startTime, 'time').join(
' ',
)
}}
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> <chart-table-pagination
<chart-table-pagination ref="tablePagination"
ref="tablePagination" class="cn-chart-alarm-info-pagination"
class="cn-chart-alarm-info-pagination" :total="alarmInfoCount.result"
:total="alarmInfoCount.result" :pageSizeForAlarm="pageSizeForAlarm"
:pageSizeForAlarm="pageSizeForAlarm" v-model:currentPage="pageNo"
v-model:currentPage="pageNo" @pageJump="pageJump"
@pageJump="pageJump" ></chart-table-pagination>
></chart-table-pagination> </template>
</div> </div>
</template> </template>
@@ -127,6 +128,7 @@ export default {
pageNo: 1, pageNo: 1,
alarmInfoCount: {}, alarmInfoCount: {},
fromChartData: '', fromChartData: '',
isNoData:false
// result: [ // result: [
// { // {
// entityType: 'ip', // entityType: 'ip',
@@ -142,6 +144,15 @@ export default {
// ], // ],
} }
}, },
computed: {
isNoData() {
let isNoData = true
if (!this.$_.isEmpty(this.chartData)) {
isNoData = false
}
return isNoData
},
},
watch: { watch: {
tabHandleClickType: { tabHandleClickType: {
deep: true, deep: true,