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;
display: flex;
flex-direction: column;
.panel-chart__no-data {
height: calc(100% - 46px);
}
.ddos-detection-type {
display: flex;
justify-content: space-between;

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

@@ -18,45 +18,44 @@
}
.performance-event-value {
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 {
height: calc(100% - 47px);
height: 50%;
width: 100%;
.chart-drawing {
height: 50%;
height: 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-title"><i class="cn-icon cn-icon-a-DDosDetection"></i>{{$t('network.ddosDetection')}}</div>
<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-name">{{$t('network.numberOfAttacks')}}</div>
<div class="ddos-detection-type-value-number">{{$_.get(ddosData, 'attackerCount') || 0}}</div>
@@ -25,14 +26,19 @@
import { api } from '@/utils/api'
import { get } from '@/utils/http'
import { getSecond } from '@/utils/date-util'
import ChartNoData from '@/views/charts/charts/ChartNoData'
export default {
name: 'NetworkOverviewDdosDetection',
props: {
timeFilter: Object
},
components: {
ChartNoData
},
data () {
return {
ddosData: {}
ddosData: {},
isNoData: false
}
},
methods: {
@@ -43,6 +49,11 @@ export default {
}
get(api.netWorkOverview.ddosEventAnalysis, params).then(res => {
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]
}
})

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

@@ -1,60 +1,63 @@
<template>
<div class="line network">
<div class="chart-drawing" v-show="showMarkLine" id="chart"></div>
<div class="line-value-active" v-if="activeShow"></div>
<div class="line-value">
<div class="line-value-mpackets"
v-show="item.show"
:class=" {'is-active': activeShow === item.class, 'mousemove-cursor': mousemoveCursor === item.class}"
v-for="(item, index) in mpackets"
:key="index"
@mouseenter="mouseenter(item)"
@mouseleave="mouseleave(item)"
@click="activeChange(item, index)">
<div class="line-value-mpackets-name">
<div :class="item.class"></div>
<div class="mpackets-name">{{$t(item.name)}}</div>
</div>
<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">
<chart-no-data v-if="isNoData"></chart-no-data>
<template v-else>
<div class="chart-drawing" v-show="showMarkLine" id="chart"></div>
<div class="line-value-active" v-if="activeShow"></div>
<div class="line-value">
<div class="line-value-mpackets"
v-show="item.show"
:class=" {'is-active': activeShow === item.class, 'mousemove-cursor': mousemoveCursor === item.class}"
v-for="(item, index) in mpackets"
:key="index"
@mouseenter="mouseenter(item)"
@mouseleave="mouseleave(item)"
@click="activeChange(item, index)">
<div class="line-value-mpackets-name">
<div :class="item.class"></div>
<div class="mpackets-name">{{$t(item.name)}}</div>
</div>
<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 v-if="echartsType === 'Bits/s'">bps</span>
<span v-else-if="echartsType === 'Packets/s'">packets/s</span>
<span v-else-if="echartsType === 'Sessions/s'">sessions/s</span>
</span>
</div>
</div>
</div>
</div>
<div class="line-select">
<div class="line-select-metric">
<span>{{$t('network.metric')}}:</span>
<div class="line-select__operation">
<el-select
size="mini"
v-model="value1"
popper-class="metric"
@change="metricSelectChange"
>
<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
<div class="line-select">
<div class="line-select-metric">
<span>{{$t('network.metric')}}:</span>
<div class="line-select__operation">
<el-select
size="mini"
v-model="value1"
popper-class="metric"
@change="metricSelectChange"
>
<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"></el-option>
</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 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>
</template>
</div>
</template>
@@ -69,12 +72,16 @@ import _ from 'lodash'
import { get } from '@/utils/http'
import { api } from '@/utils/api'
import { getSecond } from '@/utils/date-util'
import ChartNoData from '@/views/charts/charts/ChartNoData'
export default {
name: 'NetworkOverviewLine',
props: {
chart: Object,
timeFilter: Object
},
components: {
ChartNoData
},
setup () {
return {
myChart: shallowRef(null)
@@ -132,7 +139,8 @@ export default {
echartsType: 'Bits/s',
echartsData: {},
dynamicVariable: '',
showMarkLine: true
showMarkLine: true,
isNoData: false
}
},
watch: {
@@ -157,6 +165,11 @@ export default {
}
get(api.netWorkOverview.totalTrafficAnalysis, params).then((res) => {
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) => {
if (t.type === 'bytes' && val === 'Bits/s') {
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-value">
<div class="performance-event-pie">
<div class="chart-drawing" id="chart1"></div>
<div class="performance-event-pie-hr"></div>
<div class="chart-drawing" id="chart2"></div>
<chart-no-data v-if="isNoData"></chart-no-data>
<div class="chart-drawing" id="chart1" v-else></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>
<el-button class="pie-button" size="small">{{$t('network.dashboards')}}<i class="cn-icon cn-icon-arrow-right"></i></el-button>
</div>
<el-button class="pie-button" size="small">{{$t('network.dashboards')}}<i class="cn-icon cn-icon-arrow-right"></i></el-button>
</div>
</template>
@@ -19,6 +23,7 @@ import { shallowRef } from 'vue'
import { get } from '@/utils/http'
import { api } from '@/utils/api'
import { getSecond } from '@/utils/date-util'
import ChartNoData from '@/views/charts/charts/ChartNoData'
export default {
name: 'NetworkOverviewPerformanceEvent',
setup () {
@@ -30,9 +35,14 @@ export default {
props: {
timeFilter: Object
},
components: {
ChartNoData
},
data () {
return {
timer: null
timer: null,
isNoData: false,
isNoData2: false
}
},
methods: {
@@ -48,6 +58,11 @@ export default {
this.chartOption = pieChartOption1
get(api.netWorkOverview.eventSeverity, params).then(res => {
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 => {
return {
name: t.eventSeverity,
@@ -69,6 +84,11 @@ export default {
this.chartOption2 = pieChartOption2
get(api.netWorkOverview.eventType, params).then(res => {
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 => {
return {
name: t.eventType,

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

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

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

@@ -1,5 +1,5 @@
<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">
<div class="single-value__title">{{$t(npmNetworkName[index].name)}}</div>
<div class="single-value__content">