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:
@changcode
2022-08-10 09:24:53 +08:00
parent e6e6ccdabd
commit 4d712ebbb0
7 changed files with 136 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/assets/css/components/views/charts2/networkOverviewDdosDetection.scss
View File

@@ -21,6 +21,9 @@
padding: 0 20px; padding: 0 20px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.panel-chart__no-data {
height: calc(100% - 46px);
}
.ddos-detection-type { .ddos-detection-type {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;

67
src/assets/css/components/views/charts2/networkOverviewPerformanceEvent.scss
View File

@@ -18,45 +18,44 @@
} }
.performance-event-value { .performance-event-value {
width: 100%; width: 100%;
height: calc(100% - 36px); height: calc(100% - 81px);
.performance-event-pie-hr {
height: 1px;
width: 310px;
margin: auto;
background: #E2E5EC;
}
.performance-event-pie { .performance-event-pie {
height: calc(100% - 47px); height: 50%;
width: 100%; width: 100%;
.chart-drawing { .chart-drawing {
height: 50%; height: 100%;
width: 100%; width: 100%;
} }
.performance-event-pie-hr {
height: 1px;
width: 310px;
margin: auto;
background: #E2E5EC;
}
}
.pie-button.el-button {
width: 96px;
}
.el-button {
width: 117px;
min-height: 28px;
background: #FBFBFB;
border: 1px solid #C5C5C5;
box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
border-radius: 4px;
padding: 8px 5px;
margin-left: 30px;
span {
font-size: 12px;
color: #575757;
font-weight: 500;
i {
transform: rotate(-90deg);
color: #575757;
font-size: 12px;
margin-left: 4px;
}
}
} }
} }
.pie-button.el-button {
width: 96px;
}
.el-button {
width: 117px;
min-height: 28px;
background: #FBFBFB;
border: 1px solid #C5C5C5;
box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
border-radius: 4px;
padding: 8px 5px;
margin-left: 30px;
span {
font-size: 12px;
color: #575757;
font-weight: 500;
i {
transform: rotate(-90deg);
color: #575757;
font-size: 12px;
margin-left: 4px;
}
}
}
} }

15
src/views/charts2/charts/NetworkOverviewDdosDetection.vue
View File

@@ -2,7 +2,8 @@
<div class="ddos-detection"> <div class="ddos-detection">
<div class="ddos-detection-title"><i class="cn-icon cn-icon-a-DDosDetection"></i>{{$t('network.ddosDetection')}}</div> <div class="ddos-detection-title"><i class="cn-icon cn-icon-a-DDosDetection"></i>{{$t('network.ddosDetection')}}</div>
<div class="ddos-detection-value"> <div class="ddos-detection-value">
<div class="ddos-detection-type"> <chart-no-data v-if="isNoData"></chart-no-data>
<div class="ddos-detection-type" v-else>
<div class="ddos-detection-type-value"> <div class="ddos-detection-type-value">
<div class="ddos-detection-type-value-name">{{$t('network.numberOfAttacks')}}</div> <div class="ddos-detection-type-value-name">{{$t('network.numberOfAttacks')}}</div>
<div class="ddos-detection-type-value-number">{{$_.get(ddosData, 'attackerCount') || 0}}</div> <div class="ddos-detection-type-value-number">{{$_.get(ddosData, 'attackerCount') || 0}}</div>
@@ -25,14 +26,19 @@
import { api } from '@/utils/api' import { api } from '@/utils/api'
import { get } from '@/utils/http' import { get } from '@/utils/http'
import { getSecond } from '@/utils/date-util' import { getSecond } from '@/utils/date-util'
import ChartNoData from '@/views/charts/charts/ChartNoData'
export default { export default {
name: 'NetworkOverviewDdosDetection', name: 'NetworkOverviewDdosDetection',
props: { props: {
timeFilter: Object timeFilter: Object
}, },
components: {
ChartNoData
},
data () { data () {
return { return {
ddosData: {} ddosData: {},
isNoData: false
} }
}, },
methods: { methods: {
@@ -43,6 +49,11 @@ export default {
} }
get(api.netWorkOverview.ddosEventAnalysis, params).then(res => { get(api.netWorkOverview.ddosEventAnalysis, params).then(res => {
if (res.code === 200) { if (res.code === 200) {
// res.data.result.length = 0
if (res.data.result.length === 0) {
this.isNoData = true
return
}
this.ddosData = res.data.result[0] this.ddosData = res.data.result[0]
} }
}) })

107
src/views/charts2/charts/NetworkOverviewLine.vue
View File

@@ -1,60 +1,63 @@
<template> <template>
<div class="line network"> <div class="line network">
<div class="chart-drawing" v-show="showMarkLine" id="chart"></div> <chart-no-data v-if="isNoData"></chart-no-data>
<div class="line-value-active" v-if="activeShow"></div> <template v-else>
<div class="line-value"> <div class="chart-drawing" v-show="showMarkLine" id="chart"></div>
<div class="line-value-mpackets" <div class="line-value-active" v-if="activeShow"></div>
v-show="item.show" <div class="line-value">
:class=" {'is-active': activeShow === item.class, 'mousemove-cursor': mousemoveCursor === item.class}" <div class="line-value-mpackets"
v-for="(item, index) in mpackets" v-show="item.show"
:key="index" :class=" {'is-active': activeShow === item.class, 'mousemove-cursor': mousemoveCursor === item.class}"
@mouseenter="mouseenter(item)" v-for="(item, index) in mpackets"
@mouseleave="mouseleave(item)" :key="index"
@click="activeChange(item, index)"> @mouseenter="mouseenter(item)"
<div class="line-value-mpackets-name"> @mouseleave="mouseleave(item)"
<div :class="item.class"></div> @click="activeChange(item, index)">
<div class="mpackets-name">{{$t(item.name)}}</div> <div class="line-value-mpackets-name">
</div> <div :class="item.class"></div>
<div class="line-value-unit"> <div class="mpackets-name">{{$t(item.name)}}</div>
<span class="line-value-unit-number">{{unitConvert(item.analysis.avg, unitTypes.number)[0]}}</span> </div>
<span class="line-value-unit-number2"> <div class="line-value-unit">
<span class="line-value-unit-number">{{unitConvert(item.analysis.avg, unitTypes.number)[0]}}</span>
<span class="line-value-unit-number2">
<span>{{unitConvert(item.analysis.avg, unitTypes.number)[1]}}</span> <span>{{unitConvert(item.analysis.avg, unitTypes.number)[1]}}</span>
<span v-if="echartsType === 'Bits/s'">bps</span> <span v-if="echartsType === 'Bits/s'">bps</span>
<span v-else-if="echartsType === 'Packets/s'">packets/s</span> <span v-else-if="echartsType === 'Packets/s'">packets/s</span>
<span v-else-if="echartsType === 'Sessions/s'">sessions/s</span> <span v-else-if="echartsType === 'Sessions/s'">sessions/s</span>
</span> </span>
</div>
</div> </div>
</div> </div>
</div> <div class="line-select">
<div class="line-select"> <div class="line-select-metric">
<div class="line-select-metric"> <span>{{$t('network.metric')}}:</span>
<span>{{$t('network.metric')}}:</span> <div class="line-select__operation">
<div class="line-select__operation"> <el-select
<el-select size="mini"
size="mini" v-model="value1"
v-model="value1" popper-class="metric"
popper-class="metric" @change="metricSelectChange"
@change="metricSelectChange" >
> <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"></el-option>
<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"></el-option> </el-select>
</el-select> </div>
</div>
<div class="line-select-reference-line">
<span>{{$t('network.referenceLine')}}:</span>
<div class="line-select__operation">
<el-select
size="mini"
v-model="value2"
:disabled="activeShow === ''"
popper-class="reference-line"
@change="referenceSelectChange"
>
<el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</div>
</div> </div>
</div> </div>
<div class="line-select-reference-line"> </template>
<span>{{$t('network.referenceLine')}}:</span>
<div class="line-select__operation">
<el-select
size="mini"
v-model="value2"
:disabled="activeShow === ''"
popper-class="reference-line"
@change="referenceSelectChange"
>
<el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</div>
</div>
</div>
</div> </div>
</template> </template>
@@ -69,12 +72,16 @@ import _ from 'lodash'
import { get } from '@/utils/http' import { get } from '@/utils/http'
import { api } from '@/utils/api' import { api } from '@/utils/api'
import { getSecond } from '@/utils/date-util' import { getSecond } from '@/utils/date-util'
import ChartNoData from '@/views/charts/charts/ChartNoData'
export default { export default {
name: 'NetworkOverviewLine', name: 'NetworkOverviewLine',
props: { props: {
chart: Object, chart: Object,
timeFilter: Object timeFilter: Object
}, },
components: {
ChartNoData
},
setup () { setup () {
return { return {
myChart: shallowRef(null) myChart: shallowRef(null)
@@ -132,7 +139,8 @@ export default {
echartsType: 'Bits/s', echartsType: 'Bits/s',
echartsData: {}, echartsData: {},
dynamicVariable: '', dynamicVariable: '',
showMarkLine: true showMarkLine: true,
isNoData: false
} }
}, },
watch: { watch: {
@@ -157,6 +165,11 @@ export default {
} }
get(api.netWorkOverview.totalTrafficAnalysis, params).then((res) => { get(api.netWorkOverview.totalTrafficAnalysis, params).then((res) => {
if (res.code === 200) { if (res.code === 200) {
// res.data.result.length = 0
if (res.data.result.length === 0) {
this.isNoData = true
return
}
res.data.result.forEach((t, i) => { res.data.result.forEach((t, i) => {
if (t.type === 'bytes' && val === 'Bits/s') { if (t.type === 'bytes' && val === 'Bits/s') {
this.mpackets[0].analysis = t.totalBitsRate.analysis this.mpackets[0].analysis = t.totalBitsRate.analysis

30
src/views/charts2/charts/NetworkOverviewPerformanceEvent.vue
View File

@@ -3,12 +3,16 @@
<div class="performance-event-title"><i class="cn-icon cn-icon-a-NetworkPerformanceEvent"></i>{{$t('network.networkPerEvent')}}</div> <div class="performance-event-title"><i class="cn-icon cn-icon-a-NetworkPerformanceEvent"></i>{{$t('network.networkPerEvent')}}</div>
<div class="performance-event-value"> <div class="performance-event-value">
<div class="performance-event-pie"> <div class="performance-event-pie">
<div class="chart-drawing" id="chart1"></div> <chart-no-data v-if="isNoData"></chart-no-data>
<div class="performance-event-pie-hr"></div> <div class="chart-drawing" id="chart1" v-else></div>
<div class="chart-drawing" id="chart2"></div> </div>
<div class="performance-event-pie-hr"></div>
<div class="performance-event-pie">
<chart-no-data v-if="isNoData2"></chart-no-data>
<div class="chart-drawing" id="chart2" v-else></div>
</div> </div>
<el-button class="pie-button" size="small">{{$t('network.dashboards')}}<i class="cn-icon cn-icon-arrow-right"></i></el-button>
</div> </div>
<el-button class="pie-button" size="small">{{$t('network.dashboards')}}<i class="cn-icon cn-icon-arrow-right"></i></el-button>
</div> </div>
</template> </template>
@@ -19,6 +23,7 @@ import { shallowRef } from 'vue'
import { get } from '@/utils/http' import { get } from '@/utils/http'
import { api } from '@/utils/api' import { api } from '@/utils/api'
import { getSecond } from '@/utils/date-util' import { getSecond } from '@/utils/date-util'
import ChartNoData from '@/views/charts/charts/ChartNoData'
export default { export default {
name: 'NetworkOverviewPerformanceEvent', name: 'NetworkOverviewPerformanceEvent',
setup () { setup () {
@@ -30,9 +35,14 @@ export default {
props: { props: {
timeFilter: Object timeFilter: Object
}, },
components: {
ChartNoData
},
data () { data () {
return { return {
timer: null timer: null,
isNoData: false,
isNoData2: false
} }
}, },
methods: { methods: {
@@ -48,6 +58,11 @@ export default {
this.chartOption = pieChartOption1 this.chartOption = pieChartOption1
get(api.netWorkOverview.eventSeverity, params).then(res => { get(api.netWorkOverview.eventSeverity, params).then(res => {
if (res.code === 200) { if (res.code === 200) {
// res.data.result.length = 0
if (res.data.result.length === 0) {
this.isNoData = true
return
}
res.data.result = res.data.result.map(t => { res.data.result = res.data.result.map(t => {
return { return {
name: t.eventSeverity, name: t.eventSeverity,
@@ -69,6 +84,11 @@ export default {
this.chartOption2 = pieChartOption2 this.chartOption2 = pieChartOption2
get(api.netWorkOverview.eventType, params).then(res => { get(api.netWorkOverview.eventType, params).then(res => {
if (res.code === 200) { if (res.code === 200) {
// res.data.result.length = 0
if (res.data.result.length === 0) {
this.isNoData2 = true
return
}
res.data.result = res.data.result.map(t => { res.data.result = res.data.result.map(t => {
return { return {
name: t.eventType, name: t.eventType,

3
src/views/charts2/charts/NetworkOverviewTabs.vue
View File

@@ -66,7 +66,7 @@
</template> </template>
</el-tabs> </el-tabs>
<div class="tab-search" > <div class="tab-search">
<div class="search-select" v-if="drillDown"> <div class="search-select" v-if="drillDown">
<span>{{$t('network.metric')}}:</span> <span>{{$t('network.metric')}}:</span>
<el-select v-model="metric" <el-select v-model="metric"
@@ -140,7 +140,6 @@
</el-tabs> </el-tabs>
</el-popover> </el-popover>
</div> </div>
</div> </div>
</template> </template>

2
src/views/charts2/charts/SingleValue.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<div class="single-value" v-for="(npm, index) in npmNetworkCycleData" :key="index"> <div class="single-value" v-for="(npm, index) in npmNetworkData" :key="index">
<template v-if="index === 0"> <template v-if="index === 0">
<div class="single-value__title">{{$t(npmNetworkName[index].name)}}</div> <div class="single-value__title">{{$t(npmNetworkName[index].name)}}</div>
<div class="single-value__content"> <div class="single-value__content">