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

fix: 修复 事件类型 图表不展示问题

Browse Source
This commit is contained in:
@changcode
2022-08-12 19:12:44 +08:00
parent b5a980ed3f
commit c02bf1a9aa
4 changed files with 155 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
src/assets/css/components/views/charts2/npmEventsByType.scss
View File

@@ -13,63 +13,68 @@
border: 1px solid #E2E5EC; border: 1px solid #E2E5EC;
border-radius: 4px; border-radius: 4px;
display: flex; display: flex;
align-items: center; .npm-event-pies {
.npm-event-pie-legends { height: 100%;
width: 100%;
display: flex; display: flex;
width: 40%; align-items: center;
justify-content: space-around; .chart-drawing {
.npm-event-pie-legend { height: 100%;
.npm-event-pie-legend-title { width: 50%;
font-size: 12px; }
color: #575757; .npm-event-pie-legends {
line-height: 12px; display: flex;
font-weight: 400; width: 40%;
margin-bottom: 15px; justify-content: space-around;
} .npm-event-pie-legend {
.npm-event-pie-legend-type { .npm-event-pie-legend-title {
font-size: 12px; font-size: 12px;
color: #353636; color: #575757;
line-height: 12px; line-height: 12px;
font-weight: 500; font-weight: 400;
display: flex; margin-bottom: 15px;
align-items: center;
margin-bottom: 11px;
.npm-event-pie-legend-type-icon {
width: 8px;
height: 8px;
margin-right: 5px;
} }
.npm-event-pie-legend-type-severity { .npm-event-pie-legend-type {
text-transform: capitalize; font-size: 12px;
color: #353636;
line-height: 12px;
font-weight: 500;
display: flex;
align-items: center;
margin-bottom: 11px;
.npm-event-pie-legend-type-icon {
width: 8px;
height: 8px;
margin-right: 5px;
}
.npm-event-pie-legend-type-severity {
text-transform: capitalize;
}
.critical {
background: rgb(226,97,84);
}
.high {
background: rgb(228,142,77);
}
.info {
background: rgb(136,175,101);
}
.medium {
background: rgb(231,179,78);
}
.low {
background: rgb(218,199,75);
}
} }
.critical { .npm-event-pie-legend-total {
background: rgb(226,97,84); font-size: 12px;
color: #353636;
line-height: 12px;
font-weight: 600;
margin-bottom: 11px;
} }
.high {
background: rgb(228,142,77);
}
.info {
background: rgb(136,175,101);
}
.medium {
background: rgb(231,179,78);
}
.low {
background: rgb(218,199,75);
}
}
.npm-event-pie-legend-total {
font-size: 12px;
color: #353636;
line-height: 12px;
font-weight: 600;
margin-bottom: 11px;
} }
} }
} }
.chart-drawing {
height: 100%;
width: 50%;
}
} }
} }

51
src/views/charts2/charts/npm/NpmEventsByType.vue
View File

@@ -2,22 +2,25 @@
<div class="npm-event"> <div class="npm-event">
<div class="npm-event-title">{{$t('network.eventByType')}}</div> <div class="npm-event-title">{{$t('network.eventByType')}}</div>
<div class="npm-event-pie"> <div class="npm-event-pie">
<div class="chart-drawing" id="chart"></div> <chart-no-data v-if="isNoData"></chart-no-data>
<div class="npm-event-pie-legends"> <div class="npm-event-pies" v-else>
<div class="npm-event-pie-legend"> <div class="chart-drawing" id="chart"></div>
<div class="npm-event-pie-legend-title">{{ $t('overall.type') }}</div> <div class="npm-event-pie-legends">
<template v-for="(legend, index) in chartData" :key="index"> <div class="npm-event-pie-legend">
<div class="npm-event-pie-legend-type"> <div class="npm-event-pie-legend-title">{{ $t('overall.type') }}</div>
<div class="npm-event-pie-legend-type-icon" :class="legend.eventSeverity"></div> <template v-for="(legend, index) in chartData" :key="index">
<div class="npm-event-pie-legend-type-severity">{{legend.eventSeverity}}</div> <div class="npm-event-pie-legend-type">
</div> <div class="npm-event-pie-legend-type-icon" :class="legend.eventSeverity"></div>
</template> <div class="npm-event-pie-legend-type-severity">{{legend.eventSeverity}}</div>
</div> </div>
<div class="npm-event-pie-legend"> </template>
<div class="npm-event-pie-legend-title">{{ $t('network.total') }}</div> </div>
<template v-for="(legend, index) in chartData" :key="index"> <div class="npm-event-pie-legend">
<div class="npm-event-pie-legend-total">{{legend.count}}</div> <div class="npm-event-pie-legend-title">{{ $t('network.total') }}</div>
</template> <template v-for="(legend, index) in chartData" :key="index">
<div class="npm-event-pie-legend-total">{{legend.count}}</div>
</template>
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -31,6 +34,7 @@ import { api } from '@/utils/api'
import * as echarts from 'echarts' import * as echarts from 'echarts'
import { pieChartOption3 } from '@/views/charts2/charts/options/echartOption' import { pieChartOption3 } from '@/views/charts2/charts/options/echartOption'
import { getSecond } from '@/utils/date-util' import { getSecond } from '@/utils/date-util'
import ChartNoData from '@/views/charts/charts/ChartNoData'
export default { export default {
name: 'NpmEventsByType', name: 'NpmEventsByType',
@@ -39,6 +43,9 @@ export default {
timeFilter: Object, timeFilter: Object,
type: String type: String
}, },
components: {
ChartNoData
},
setup () { setup () {
return { return {
myChart: shallowRef(null) myChart: shallowRef(null)
@@ -47,7 +54,8 @@ export default {
data () { data () {
return { return {
chartData: [], chartData: [],
timer: null timer: null,
isNoData: false
} }
}, },
methods: { methods: {
@@ -89,6 +97,9 @@ export default {
} }
get(api.npm.events.list, params).then(res => { get(api.npm.events.list, params).then(res => {
if (res.code === 200) { if (res.code === 200) {
if (res.data.result.length <= 0) {
this.isNoData = true
}
res.data.result.forEach(t => { res.data.result.forEach(t => {
if (t.eventSeverity === 'critical') { if (t.eventSeverity === 'critical') {
t.index = 0 t.index = 0
@@ -109,6 +120,9 @@ export default {
value: t.count value: t.count
} }
}) })
this.init()
} else {
this.isNoData = true
} }
}) })
}, },
@@ -118,9 +132,8 @@ export default {
}, },
mounted () { mounted () {
this.timer = setTimeout(() => { this.timer = setTimeout(() => {
this.init() this.eventsVyTypeData()
}, 100) }, 100)
this.eventsVyTypeData()
window.addEventListener('resize', this.resize) window.addEventListener('resize', this.resize)
}, },
beforeUnmount () { beforeUnmount () {

85
src/views/charts2/charts/npm/NpmLine.vue
View File

@@ -1,12 +1,37 @@
<template> <template>
<div class="npm-line"> <div class="npm-line">
<div class="npm-line-header" v-if="chartData.params && chartData.params.showLegend"> <template v-if="chartData.id === 11">
<div class="npm-line-header-right" :class="{'active': item.show}" v-for="(item, index) in chartOptionLineData" :key="index" @click="highlightEvent(item)"> <div class="npm-line-header">
<div class="npm-line-header-icon" :class="'icon' + index"></div> <div class="npm-line-header-title">{{chartData.name}}</div>
<div class="npm-line-header-value">{{$t(item.legend)}}</div> <div class="npm-line-header-rights" v-if="chartData.params && chartData.params.showLegend">
<div class="npm-line-header-right" :class="{'active': item.show}" v-for="(item, index) in chartOptionLineData" :key="index" @click="highlightEvent(item)">
<div class="npm-line-header-icon" :class="'icon' + index"></div>
<div class="npm-line-header-value">{{$t(item.legend)}}</div>
</div>
</div>
</div> </div>
</div> <div class="chart-drawing" :id="`chart${chartData.name}`"></div>
<div class="chart-drawing" :id="`chart${chartData.name}`"></div> </template>
<template v-if="chartData.id === 12">
<div class="npm-line-title">{{chartData.name}}</div>
<div class="chart-drawing" :id="`chart${chartData.name}`"></div>
</template>
<template v-if="chartData.id === 13">
<div class="npm-line-title">{{chartData.name}}</div>
<div class="chart-drawing" :id="`chart${chartData.name}`"></div>
</template>
<template v-if="chartData.id === 14">
<div class="npm-line-title">{{chartData.name}}</div>
<div class="chart-drawing" :id="`chart${chartData.name}`"></div>
</template>
<template v-if="chartData.id === 15">
<div class="npm-line-title">{{chartData.name}}</div>
<div class="chart-drawing" :id="`chart${chartData.name}`"></div>
</template>
<template v-if="chartData.id === 16">
<div class="npm-line-title">{{chartData.name}}</div>
<div class="chart-drawing" :id="`chart${chartData.name}`"></div>
</template>
</div> </div>
</template> </template>
@@ -16,11 +41,18 @@ import { npmLineChartOption } from '@/views/charts2/charts/options/echartOption.
import { shallowRef } from 'vue' import { shallowRef } from 'vue'
import _ from 'lodash' import _ from 'lodash'
import { stackedLineTooltipFormatter } from '@/views/charts/charts/tools' import { stackedLineTooltipFormatter } from '@/views/charts/charts/tools'
import { getSecond } from '@/utils/date-util'
import { get } from '@/utils/http'
import { api } from '@/utils/api'
export default { export default {
name: 'NpmLine', name: 'NpmLine',
props: { props: {
chart: Object chart: Object,
timeFilter: Object,
// side: String,
// country: String,
// province: String
}, },
setup () { setup () {
return { return {
@@ -36,32 +68,49 @@ export default {
{ legend: 'network.outbound', index: 2, invertTab: true } { legend: 'network.outbound', index: 2, invertTab: true }
], ],
timer: null, timer: null,
myChartArray: [] myChartArray: [],
side: 'server',
country: '北京',
province: '北京'
} }
}, },
methods: { methods: {
init () { init () {
const params = {
startTime: getSecond(this.timeFilter.startTime),
endTime: getSecond(this.timeFilter.endTime),
side: this.side,
country: this.country,
province: this.province
}
console.log(this.chartData)
if (this.chartData.id === 11) {
get(api.npm.location.thoughput, params).then(res => {
if (res.code === 200) {
console.log(res)
}
})
}
this.echartsInit()
},
echartsInit () {
const dom = document.getElementById(`chart${this.chartData.name}`) const dom = document.getElementById(`chart${this.chartData.name}`)
this.myChart = echarts.init(dom) this.myChart = echarts.init(dom)
this.chartOption = npmLineChartOption this.chartOption = npmLineChartOption
const seriesTemplate = this.chartOption.series[0] const seriesTemplate = this.chartOption.series[0]
this.chartOption.title.text = this.chartData.i18n ? this.chartData.i18n : this.chartData.name
this.chartOption.color = this.chartData.params.color this.chartOption.color = this.chartData.params.color
let result = [ let result = [
{ {
values: [[1435781430781, '1'], [1435781431781, '2']], type: 'inboundBytesRate',
legend: 'network.total', values: [[1435781430781, '3'], [1435781431781, '4']]
color: '#749F4D'
}, },
{ {
values: [[1435781430781, '1'], [1435781431781, '2']], type: 'totalBytesRate',
legend: 'network.inbound', values: [[1435781430781, '5'], [1435781431781, '6']]
color: '#98709B'
}, },
{ {
values: [[1435781430781, '1'], [1435781431781, '2']], type: 'outboundBytesRate',
legend: 'network.outbound', values: [[1435781430781, '2'], [1435781431781, '9']]
color: '#E5A219'
} }
] ]
result = result.filter(item => this.chartData.params.color.indexOf(item.color) > -1) result = result.filter(item => this.chartData.params.color.indexOf(item.color) > -1)

10
src/views/charts2/charts/options/echartOption.js
View File

@@ -256,16 +256,6 @@ export const appListChartOption = {
} }
export const npmLineChartOption = { export const npmLineChartOption = {
title: {
text: '',
top: 14.5,
left: 20,
textStyle: {
fontSize: 14,
color: '#353636',
fontWeight: 500
}
},
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
className: 'echarts-tooltip echarts-tooltip-dark' className: 'echarts-tooltip echarts-tooltip-dark'