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

feat: loading和部分nodata处理;地图功能

Browse Source
This commit is contained in:
chenjinsong
2022-08-21 22:11:53 +08:00
parent c4cf810011
commit ab19220e0d
17 changed files with 257 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/store/modules/panel.js
View File

@@ -47,7 +47,9 @@ const panel = {
queryCondition: '', // 数据查询的条件
networkOverviewTabList: [], // 存储tab列表的一些状态：如是否选中
tabOperationType: 0, // 操作类型:2-二级菜单；3-三级菜单；4-四级菜单；5-切换tab；6-切换metric；7-操作Customize
tabOperationBeforeType: 0// 记录上次的操作类型
tabOperationBeforeType: 0, // 记录上次的操作类型
npmLocationCountry: '', // npm location的查询条件--国家
npmLocationSide: 'server' // npm location的查询条件--方向
},
mutations: {
setShowRightBox (state, flag) {
@@ -127,6 +129,12 @@ const panel = {
},
setTabOperationBeforeType (state, tabOperationBeforeType) {
state.tabOperationBeforeType = tabOperationBeforeType
},
setNpmLocationCountry (state, country) {
state.npmLocationCountry = country
},
setNpmLocationSide (state, side) {
state.npmLocationSide = side
}
},
getters: {
@@ -201,6 +209,12 @@ const panel = {
},
getTabOperationBeforeType (state) {
return state.tabOperationBeforeType
},
getNpmLocationCountry (state) {
return state.npmLocationCountry
},
getNpmLocationSide (state) {
return state.npmLocationSide
}
},
actions: {

2
src/utils/constants.js
View File

File diff suppressed because one or more lines are too long

6
src/utils/unit-convert.js
View File

@@ -149,6 +149,12 @@ export function valueToRangeValue (value, unitType) {
}
break
}
case unitTypes.bps: {
if (values[0] < 0.01) {
return ['<0.01', 'bps']
}
break
}
default: break
}
}

26
src/views/charts2/Chart.vue
View File

@@ -1,22 +1,24 @@
<template>
<div class="cn-chart" style="height: 100%; width: 100%;">
<loading :loading="loading"></loading>
<chart-no-data v-if="isNoData"></chart-no-data>
<network-overview-line
v-if="chart.type === typeMapping.networkOverview.line"
:chart="chart"
:time-filter="timeFilter"
ref="networkLine"
@toggleLoading="toggleLoading"
></network-overview-line>
<network-overview-ddos-detection
v-else-if="chart.type === typeMapping.networkOverview.ddosDetection"
:chart="chart"
:time-filter="timeFilter"
@toggleLoading="toggleLoading"
></network-overview-ddos-detection>
<network-overview-performance-event
v-else-if="chart.type === typeMapping.networkOverview.performanceEvent"
:chart="chart"
:time-filter="timeFilter"
@toggleLoading="toggleLoading"
></network-overview-performance-event>
<network-overview-tabs @getChartData="getChartData"
v-else-if="chart.type === typeMapping.networkOverview.table"
@@ -24,6 +26,7 @@
:chart="chart"
:chartData="chartData"
:ref="`tab${chart.id}`"
@toggleLoading="toggleLoading"
></network-overview-tabs>
<npm-app-event-table @getChartData="getChartData"
v-else-if="chart.type === typeMapping.npm.appEventTable"
@@ -31,11 +34,13 @@
:chart="chart"
:chartData="chartData"
:ref="`tab${chart.id}`"
@toggleLoading="toggleLoading"
></npm-app-event-table>
<network-overview-apps
v-else-if="chart.type === typeMapping.networkOverview.appList"
:chart="chart"
:time-filter="timeFilter"
@toggleLoading="toggleLoading"
>
</network-overview-apps>
<npm-tabs
@@ -43,63 +48,73 @@
:time-filter="timeFilter"
:chart="chart"
@tabChange="npmTabChange"
@toggleLoading="toggleLoading"
></npm-tabs>
<npm-network-quantity
v-else-if="chart.type === typeMapping.npm.npmNetworkQuantity"
:time-filter="timeFilter"
:chart="chart"
@toggleLoading="toggleLoading"
></npm-network-quantity>
<npm-app-category-score
v-else-if="chart.type === typeMapping.npm.npmAppCategoryScore"
:time-filter="timeFilter"
:chart="chart"
@toggleLoading="toggleLoading"
></npm-app-category-score>
<npm-map
v-else-if="chart.type === typeMapping.npm.npmMap"
:time-filter="timeFilter"
:chart="chart"
@toggleLoading="toggleLoading"
></npm-map>
<npm-line
v-else-if="chart.type === typeMapping.npm.npmLine"
:time-filter="timeFilter"
:chart="chart"
@toggleLoading="toggleLoading"
></npm-line>
<npm-events-header
v-else-if="chart.type === typeMapping.npm.npmEventsHeader"
:time-filter="timeFilter"
:chart="chart"
@toggleLoading="toggleLoading"
></npm-events-header>
<npm-events-by-type
v-else-if="chart.type === typeMapping.npm.npmEventsByType"
:time-filter="timeFilter"
:chart="chart"
@toggleLoading="toggleLoading"
></npm-events-by-type>
<npm-recent-events
v-else-if="chart.type === typeMapping.npm.npmRecentEvents"
:time-filter="timeFilter"
:chart="chart"
@toggleLoading="toggleLoading"
></npm-recent-events>
<related-sessions
v-else-if="chart.type === typeMapping.npm.relatedSessions"
:time-filter="timeFilter"
:chart="chart"
@toggleLoading="toggleLoading"
></related-sessions>
<npm-ip-map
v-else-if="chart.type === typeMapping.npm.npmIpMap"
:time-filter="timeFilter"
:chart="chart"
@toggleLoading="toggleLoading"
></npm-ip-map>
<npm-traffic-line
v-else-if="chart.type === typeMapping.npm.npmTrafficLine"
:time-filter="timeFilter"
:chart="chart"
@toggleLoading="toggleLoading"
></npm-traffic-line>
</div>
</template>
<script>
import Loading from '@/components/common/Loading'
import ChartNoData from '@/views/charts/charts/ChartNoData'
import { typeMapping } from '@/views/charts2/chart-tools'
import NetworkOverviewLine from '@/views/charts2/charts/networkOverview/NetworkOverviewLine'
import NetworkOverviewDdosDetection from '@/views/charts2/charts/networkOverview/NetworkOverviewDdosDetection'
@@ -131,7 +146,6 @@ export default {
NpmMap,
NpmAppCategoryScore,
Loading,
ChartNoData,
NetworkOverviewLine,
NetworkOverviewDdosDetection,
NetworkOverviewPerformanceEvent,
@@ -152,8 +166,7 @@ export default {
data () {
return {
typeMapping,
loading: false,
isNoData: false,
loading: true,
chartData: null,
queryParams: {}
}
@@ -237,6 +250,9 @@ export default {
}
}, 250)
})
},
toggleLoading (loading) {
this.loading = loading
}
}
}

16
src/views/charts2/chart-mixin.js Normal file
View File

@@ -0,0 +1,16 @@
export default {
props: {
chart: Object,
timeFilter: Object
},
data () {
return {
isNoData: false
}
},
methods: {
toggleLoading (loading) {
this.$emit('toggleLoading', loading)
}
}
}

18
src/views/charts2/charts/networkOverview/NetworkOverviewApps.vue
View File

@@ -128,17 +128,14 @@ import { getChainRatio } from '@/utils/tools'
import loading from '@/components/common/Loading'
import ChartNoData from '@/views/charts/charts/ChartNoData'
import { appStackedLineTooltipFormatter } from '@/views/charts/charts/tools'
import chartMixin from '@/views/charts2/chart-mixin'
export default {
name: 'NetworkOverviewApps',
props: {
chart: Object,
timeFilter: Object
},
components: {
loading,
ChartNoData
},
mixins: [chartMixin],
setup () {
return {
myChart: shallowRef([])
@@ -211,7 +208,6 @@ export default {
})
},
init () {
// this.appDataQuery(this.appData)
const appCards = []
const providerCards = []
this.appData.forEach(d => {
@@ -252,18 +248,8 @@ export default {
handleData (prevRequest, request, _t) {
Promise.all([prevRequest, request]).then(res => {
if (res[0].code === 200 && res[1].code === 200) {
// if (true) {
const prevData = res[0].data.result
const data = res[1].data.result
/* let prevData
let data
if (_t === 'app') {
prevData = appPrevTestData
data = appTestData
} else if (_t === 'provider') {
prevData = providerPrevTestData
data = providerTestData
} */
let toCompareType = 'bytes'
if (this.metricFilter === 'Sessions/s') {
toCompareType = 'sessions'

11
src/views/charts2/charts/networkOverview/NetworkOverviewDdosDetection.vue
View File

@@ -27,14 +27,13 @@ import { api } from '@/utils/api'
import { get } from '@/utils/http'
import { getSecond } from '@/utils/date-util'
import ChartNoData from '@/views/charts/charts/ChartNoData'
import chartMixin from '@/views/charts2/chart-mixin'
export default {
name: 'NetworkOverviewDdosDetection',
props: {
timeFilter: Object
},
components: {
ChartNoData
},
mixins: [chartMixin],
data () {
return {
ddosData: {},
@@ -47,15 +46,19 @@ export default {
startTime: getSecond(this.timeFilter.startTime),
endTime: getSecond(this.timeFilter.endTime)
}
this.toggleLoading(true)
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
} else {
this.isNoData = false
}
this.ddosData = res.data.result[0]
}
}).finally(() => {
this.toggleLoading(false)
})
}
},

20
src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue
View File

@@ -74,12 +74,9 @@ import { get } from '@/utils/http'
import { api } from '@/utils/api'
import { getSecond } from '@/utils/date-util'
import ChartNoData from '@/views/charts/charts/ChartNoData'
import chartMixin from '@/views/charts2/chart-mixin'
export default {
name: 'NetworkOverviewLine',
props: {
chart: Object,
timeFilter: Object
},
components: {
ChartNoData
},
@@ -88,6 +85,7 @@ export default {
myChart: shallowRef(null)
}
},
mixins: [chartMixin],
data () {
return {
options1: [
@@ -139,8 +137,7 @@ export default {
echartsLabelValue: '',
echartsType: 'Bits/s',
dynamicVariable: '',
showMarkLine: true,
isNoData: false
showMarkLine: true
}
},
watch: {
@@ -163,13 +160,10 @@ export default {
if (condition) {
params.q = condition
}
this.toggleLoading(true)
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
}
this.isNoData = res.data.result.length === 0
res.data.result.forEach((t, i) => {
if (t.type === 'bytes' && val === 'Bits/s') {
const mpackets = _.cloneDeep(this.mpackets)
@@ -243,6 +237,10 @@ export default {
}
})
}
}).catch(e => {
this.isNoData = true
}).finally(() => {
this.toggleLoading(false)
})
},
echartsInit (echartsData, show) {

31
src/views/charts2/charts/networkOverview/NetworkOverviewPerformanceEvent.vue
View File

@@ -24,6 +24,7 @@ import { get } from '@/utils/http'
import { api } from '@/utils/api'
import { getSecond } from '@/utils/date-util'
import ChartNoData from '@/views/charts/charts/ChartNoData'
import chartMixin from '@/views/charts2/chart-mixin'
export default {
name: 'NetworkOverviewPerformanceEvent',
setup () {
@@ -32,9 +33,7 @@ export default {
myChart2: shallowRef(null)
}
},
props: {
timeFilter: Object
},
mixins: [chartMixin],
components: {
ChartNoData
},
@@ -42,7 +41,9 @@ export default {
return {
timer: null,
isNoData: false,
isNoData2: false
isNoData2: false,
loading1: false,
loading2: false
}
},
methods: {
@@ -56,12 +57,14 @@ export default {
if (dom) {
this.myChart = echarts.init(dom)
this.chartOption = pieChartOption1
this.loading1 = true
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
} else {
this.isNoData = false
}
res.data.result = res.data.result.map(t => {
if (t.eventSeverity === 'critical') {
@@ -89,17 +92,21 @@ export default {
this.chartOption.series[0].data = res.data.result.sort((a, b) => { return a.index - b.index })
this.myChart.setOption(this.chartOption)
}
}).finally(() => {
this.loading1 = false
})
}
if (dom2) {
this.myChart2 = echarts.init(dom2)
this.chartOption2 = pieChartOption2
this.loading2 = true
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
} else {
this.isNoData2 = false
}
res.data.result = res.data.result.map(t => {
return {
@@ -115,6 +122,8 @@ export default {
this.chartOption2.series[0].data = res.data.result
this.myChart2.setOption(this.chartOption2)
}
}).finally(() => {
this.loading2 = false
})
}
},
@@ -123,6 +132,16 @@ export default {
this.myChart2.resize()
}
},
computed: {
loading () {
return this.loading1 && this.loading2
}
},
watch: {
loading (n) {
this.toggleLoading(n)
}
},
mounted () {
this.timer = setTimeout(() => {
this.init()

31
src/views/charts2/charts/npm/NpmAppCategoryScore.vue
View File

@@ -1,5 +1,6 @@
<template>
<div class="npm-app">
<chart-no-data v-if="isNoData"></chart-no-data>
<div class="npm-app-left">
<div class="npm-app-letter">
<div v-for="(letter, index) in colorPatchData" :key="index">
@@ -100,7 +101,9 @@ import { api } from '@/utils/api'
import { getSecond } from '@/utils/date-util'
import { get } from '@/utils/http'
import { getChainRatio, computeScore } from '@/utils/tools'
import chartMixin from '@/views/charts2/chart-mixin'
import Loading from '@/components/common/Loading'
import ChartNoData from '@/views/charts/charts/ChartNoData'
export default {
name: 'NpmAppCategoryScore',
data () {
@@ -126,23 +129,12 @@ export default {
]
}
},
props: {
timeFilter: Object
components: {
Loading,
ChartNoData
},
mixins: [chartMixin],
methods: {
// tableCellStyle ({ row, column, rowIndex, columnIndex }) {
// let style = 'border-right:0px;font-size:12px;padding:7px 0 !important;border-bottom: 1px solid #ECECEC;'
// if (rowIndex === this.tableData.length - 1) {
// style = style + 'border-bottom:0px !important;'
// }
// if (columnIndex === 0) {
// style = style + 'color:#046ECA;'
// }
// return style
// },
// tableHeaderCellStyle ({ row, column, rowIndex, columnIndex }) {
// return 'border-right:0px;font-size:12px;font-weight:500;padding:4px 0 !important;border-bottom: 1px solid #E2E5EC;'
// },
init (params) {
if (!params) {
params = {
@@ -153,10 +145,12 @@ export default {
// 获取table后三列内容
const currentTrafficRequest = get(api.npm.overview.appTrafficAnalysis, { ...params, cycle: 0 })
const lastCycleTrafficRequest = get(api.npm.overview.appTrafficAnalysis, { ...params, cycle: 1 })
this.toggleLoading(true)
Promise.all([currentTrafficRequest, lastCycleTrafficRequest]).then(res => {
const prevData = res[1].data.result
const data = res[0].data.result
if (data && data.length > 0) {
this.isNoData = false
const tableData = data.map(d => {
const mapping = npmCategoryInfoMapping.find(mapping => mapping.appSubcategory === d.appSubcategory)
const result = {
@@ -206,9 +200,12 @@ export default {
}
})
this.tableData = tableData
// console.info(tableData)
})
} else {
this.isNoData = true
}
}).finally(() => {
this.toggleLoading(false)
})
}
},

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

@@ -35,17 +35,17 @@ import * as echarts from 'echarts'
import { pieChartOption3 } from '@/views/charts2/charts/options/echartOption'
import { getSecond } from '@/utils/date-util'
import ChartNoData from '@/views/charts/charts/ChartNoData'
import chartMixin from '@/views/charts2/chart-mixin'
export default {
name: 'NpmEventsByType',
props: {
chart: Object,
timeFilter: Object,
type: String
},
components: {
ChartNoData
},
mixins: [chartMixin],
setup () {
return {
myChart: shallowRef(null)
@@ -95,9 +95,10 @@ export default {
endTime: getSecond(this.timeFilter.endTime),
type: 'severity'
}
this.toggleLoading(true)
get(api.npm.events.list, params).then(res => {
if (res.code === 200) {
if (res.data.result.length <= 0) {
if (!res.data.result || res.data.result.length === 0) {
this.isNoData = true
return
}
@@ -125,6 +126,8 @@ export default {
} else {
this.isNoData = true
}
}).finally(() => {
this.toggleLoading(false)
})
},
resize () {

11
src/views/charts2/charts/npm/NpmEventsHeader.vue
View File

@@ -14,14 +14,10 @@
import { getSecond } from '@/utils/date-util'
import { get } from '@/utils/http'
import { api } from '@/utils/api'
import chartMixin from '@/views/charts2/chart-mixin'
export default {
name: 'NpmEventsHeader',
props: {
chart: Object,
timeFilter: Object,
// type: String
},
mixins: [chartMixin],
data () {
return {
chartData: [],
@@ -35,6 +31,7 @@ export default {
endTime: getSecond(this.timeFilter.endTime),
type: this.type
}
this.toggleLoading(true)
get(api.npm.events.list, params).then(res => {
if (res.code === 200) {
res.data.result.forEach(t => {
@@ -52,6 +49,8 @@ export default {
})
this.chartData = res.data.result.sort((a, b) => { return a.index - b.index })
}
}).finally(() => {
this.toggleLoading(false)
})
}
},

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

@@ -52,22 +52,17 @@ import { get } from '@/utils/http'
import { api } from '@/utils/api'
import ChartNoData from '@/views/charts/charts/ChartNoData'
import { throughputData, tcpData, httpData, sslData, packetsLossData, packetsRetrainsData } from '@/views/charts2/charts/npmLineData'
import chartMixin from '@/views/charts2/chart-mixin'
export default {
name: 'NpmLine',
props: {
chart: Object,
timeFilter: Object,
// side: String,
// country: String,
// province: String
},
components: {
ChartNoData
},
mixins: [chartMixin],
setup () {
return {
myChart: shallowRef()
myChart: shallowRef(null)
}
},
data () {
@@ -86,8 +81,8 @@ export default {
timer: null,
myChartArray: [],
side: 'server',
country: '北京',
province: '北京',
country: '',
province: '',
throughputName: '',
tcpName: '',
httpName: '',
@@ -105,6 +100,7 @@ export default {
country: this.country,
province: this.province
}
this.toggleLoading(true)
if (this.chartData.id === 11) {
throughputData.forEach((t, i) => {
if (t.type === 'totalBytesRate') {
@@ -122,6 +118,8 @@ export default {
} else {
this.throughputName = this.$_.get(this.chartData, 'i18n') || this.chartData.name
}
}).finally(() => {
this.toggleLoading(false)
})
} else if (this.chartData.id === 12) {
get(api.npm.location.tcpConnectionEstablishLatency, params).then(res => {
@@ -130,6 +128,8 @@ export default {
} else {
this.tcpName = this.$_.get(this.chartData, 'i18n') || this.chartData.name
}
}).finally(() => {
this.toggleLoading(false)
})
} else if (this.chartData.id === 13) {
get(api.npm.location.httpResponseLatency, params).then(res => {
@@ -138,6 +138,8 @@ export default {
} else {
this.httpName = this.$_.get(this.chartData, 'i18n') || this.chartData.name
}
}).finally(() => {
this.toggleLoading(false)
})
} else if (this.chartData.id === 14) {
get(api.npm.location.sslHandshakeLatency, params).then(res => {
@@ -146,6 +148,8 @@ export default {
} else {
this.sslName = this.$_.get(this.chartData, 'i18n') || this.chartData.name
}
}).finally(() => {
this.toggleLoading(false)
})
} else if (this.chartData.id === 15) {
get(api.npm.location.packetsLoss, params).then(res => {
@@ -154,6 +158,8 @@ export default {
} else {
this.packetsLossName = this.$_.get(this.chartData, 'i18n') || this.chartData.name
}
}).finally(() => {
this.toggleLoading(false)
})
} else if (this.chartData.id === 16) {
get(api.npm.location.packetsRetrains, params).then(res => {
@@ -162,6 +168,8 @@ export default {
} else {
this.packetsRetrainsName = this.$_.get(this.chartData, 'i18n') || this.chartData.name
}
}).finally(() => {
this.toggleLoading(false)
})
}
},

98
src/views/charts2/charts/npm/NpmMap.vue
View File

@@ -45,18 +45,15 @@ import { shallowRef } from 'vue'
import * as am4Core from '@amcharts/amcharts4/core'
import * as am4Maps from '@amcharts/amcharts4/maps'
import { computeScore, getGeoData } from '@/utils/tools'
import { storageKey, unitTypes } from '@/utils/constants'
import { storageKey, unitTypes, countryNameIdMapping } from '@/utils/constants'
import locationOptions from '@/views/charts2/charts/locationOptions'
import unitConvert, { valueToRangeValue } from '@/utils/unit-convert'
import { valueToRangeValue } from '@/utils/unit-convert'
import { getSecond } from '@/utils/date-util'
import { api, getData } from '@/utils/api'
import { get } from '@/utils/http'
import chartMixin from '@/views/charts2/chart-mixin'
export default {
name: 'NpmMap',
props: {
timeFilter: Object
},
data () {
return {
locationOptions,
@@ -72,9 +69,11 @@ export default {
location: ''
}
},
mixins: [chartMixin],
methods: {
async initMap () {
// 初始化插件
this.toggleLoading(true)
const geoData = await getGeoData(storageKey.iso36112WorldLow)
const chart = am4Core.create('npmMap', am4Maps.MapChart)
chart.geodata = geoData
@@ -86,19 +85,15 @@ export default {
}
this.myChart = shallowRef(chart)
this.polygonSeries = shallowRef(this.polygonSeriesFactory())
this.worldImageSeries = shallowRef(this.imageSeriesFactory('score'))
this.worldImageSeries = shallowRef(this.imageSeriesFactory('score', this.polygonSeries))
// 渲染
this.loadAm4ChartMap(this.polygonSeries, this.worldImageSeries)
},
loadAm4ChartMap (polygonSeries, imageSeries, country, chartData) {
// chartData不为空是下钻
if (chartData) {
this.$emit('showLoading', true)
}
loadAm4ChartMap (polygonSeries, imageSeries) {
try {
// 清除数据
polygonSeries.data.splice(0)
// polygonSeries.data.splice(0)
this.toggleLoading(true)
// 清除legend
this.myChart.children.each((s, i) => {
if (s && s.className !== 'Container') {
@@ -106,19 +101,11 @@ export default {
}
})
this.showMapBackButton = !!country
if (chartData) {
imageSeries.data = chartData.map(r => ({
score: r.score,
id: r[this.trafficDirection.toLowerCase() + 'Id'],
color: this.scoreColor(r.score),
border: this.scoreColor(r.score)
}))
} else {
const params = {
startTime: getSecond(this.timeFilter.startTime),
endTime: getSecond(this.timeFilter.endTime),
side: this.trafficDirection.toLowerCase()
side: this.trafficDirection.toLowerCase(),
country: this.location
}
getData(api.npm.location.map, params).then(res => {
// 计算分数
@@ -130,7 +117,6 @@ export default {
Promise.all([tcpRequest, httpRequest, sslRequest, tcpLostRequest, packetRetransRequest]).then(res2 => {
const keyPre = ['tcp', 'http', 'ssl', 'tcpLost', 'packetRetrans']
const mapData = res
if (!country) {
res2.forEach((r, i) => {
if (r.code === 200) {
mapData.forEach(t => {
@@ -154,29 +140,25 @@ export default {
}
})
this.loadMarkerData(imageSeries, mapData)
}
})
}).finally(() => {
this.toggleLoading(false)
})
}
} catch (e) {
console.error(e)
} finally {
if (chartData) {
setTimeout(() => {
this.$emit('showLoading', false)
}, 200)
}
}
},
loadMarkerData (imageSeries, data) {
imageSeries.data = data.map(r => ({
score: r.score,
name: r.province || r.country,
throughput: r.totalPacketsRate,
id: r[this.trafficDirection.toLowerCase() + 'Id'],
throughput: valueToRangeValue(r.throughBitsRate, unitTypes.bps).join(' '),
id: r.serverId,
color: this.scoreColor(r.score),
border: this.scoreColor(r.score)
}))
console.info(imageSeries)
console.info(this.countryImageSeries)
},
scoreColor (score) {
if (score >= 0 && score <= 2) {
@@ -219,8 +201,7 @@ export default {
polygonTemplate.fill = am4Core.color('#EFEFEF')
return polygonSeries
},
imageSeriesFactory (dataField) {
const vm = this
imageSeriesFactory (dataField, polygonSeries) {
// amcharts实例中增加地图图案series（用来在地图上画圆点、方块、连线等）
const imageSeries = this.myChart.series.push(new am4Maps.MapImageSeries())
// 指定接口数据中哪个字段名代表数值
@@ -230,14 +211,14 @@ export default {
imageTemplate.nonScaling = true
// 通过地区ID来获取经纬度，设置后无需自己提供经纬度
imageTemplate.adapter.add('latitude', function (latitude, target) {
const polygon = vm.polygonSeries.getPolygonById(target.dataItem.dataContext.id)
const polygon = polygonSeries.getPolygonById(target.dataItem.dataContext.id)
if (polygon) {
return polygon.visualLatitude
}
return latitude
})
imageTemplate.adapter.add('longitude', function (longitude, target) {
const polygon = vm.polygonSeries.getPolygonById(target.dataItem.dataContext.id)
const polygon = polygonSeries.getPolygonById(target.dataItem.dataContext.id)
if (polygon) {
return polygon.visualLongitude
}
@@ -267,6 +248,45 @@ export default {
return imageSeries
}
},
watch: {
trafficDirection (n) {
this.$store.commit('setNpmLocationSide', n.toLowerCase())
this.loadAm4ChartMap(this.countrySeries || this.polygonSeries, this.countryImageSeries || this.worldImageSeries)
},
async location (n) {
this.$store.commit('setNpmLocationCountry', n)
if (this.countrySeries) {
this.countrySeries.dispose()
}
if (this.countryImageSeries) {
this.countryImageSeries.dispose()
}
if (n) {
const countryId = countryNameIdMapping[n]
if (countryId) {
const targetMapObject = this.polygonSeries.getPolygonById(countryId)
targetMapObject.series.chart.zoomToMapObject(targetMapObject)
const geoData = await getGeoData(countryId)
if (geoData) {
this.countrySeries = shallowRef(this.polygonSeriesFactory())
this.countrySeries.geodata = geoData
this.countryImageSeries = shallowRef(this.imageSeriesFactory('score', this.countrySeries))
this.polygonSeries.hide()
this.worldImageSeries.hide()
this.$nextTick(() => {
this.loadAm4ChartMap(this.countrySeries, this.countryImageSeries)
})
}
}
} else {
this.polygonSeries.show()
this.worldImageSeries.show()
this.countrySeries = null
this.countryImageSeries = null
this.myChart.zoomToGeoPoint(this.myChart.homeGeoPoint, this.myChart.homeZoomLevel, true)
}
}
},
mounted () {
this.initMap()
}

10
src/views/charts2/charts/npm/NpmNetworkQuantity.vue
View File

@@ -13,14 +13,11 @@ import SingleValue from '@/views/charts2/charts/SingleValue'
import { get } from '@/utils/http'
import { getSecond } from '@/utils/date-util'
import { api } from '@/utils/api'
import chartMixin from '@/views/charts2/chart-mixin'
export default {
name: 'NpmNetworkQuantity',
components: { SingleValue },
props: {
chart: Object,
timeFilter: Object
},
mixins: [chartMixin],
data () {
return {
npmNetworkName: [
@@ -45,12 +42,15 @@ export default {
const ssl = get(api.npm.overview.sslConDelay, params)
const tcpPercent = get(api.npm.overview.tcpLostlenPercent, params)
const packetPercent = get(api.npm.overview.packetRetransPercent, params)
this.toggleLoading(true)
Promise.all([tcp, http, ssl, tcpPercent, packetPercent]).then(res => {
res.forEach(t => {
if (t.code === 200) {
this.npmNetworkCycleData.push(t.data.result)
}
})
}).finally(() => {
this.toggleLoading(false)
})
}

19
src/views/charts2/charts/npm/NpmRecentEvents.vue
View File

@@ -37,7 +37,6 @@
</svg>
<div class="table-no-data__title">{{ $t('npm.thereNoEvents') }}</div>
</div>
<!-- <div v-else>&nbsp;</div>-->
</template>
</el-table>
</div>
@@ -47,13 +46,11 @@
import { get } from '@/utils/http'
import { api } from '@/utils/api'
import { getSecond } from '@/utils/date-util'
import chartMixin from '@/views/charts2/chart-mixin'
export default {
name: 'NpmRecentEvents',
props: {
chart: Object,
timeFilter: Object
},
mixins: [chartMixin],
data () {
return {
tableData: [],
@@ -62,7 +59,7 @@ export default {
{ label: 'network.entity', prop: 'eventKey' },
{ label: 'detections.eventType', prop: 'eventType' }
],
isNoData: true
isNoData: false
}
},
methods: {
@@ -72,10 +69,18 @@ export default {
endTime: getSecond(this.timeFilter.endTime),
limit: 8
}
this.toggleLoading(true)
get(api.npm.events.recentEvents, params).then(res => {
if (res.code === 200) {
this.tableData = res.data.result
if (!res.data.result || res.data.result.length === 0) {
this.isNoData = true
}
this.tableData = res.data.result
} else {
this.isNoData = true
}
}).finally(() => {
this.toggleLoading(false)
})
}
},

3
src/views/charts2/charts/npm/NpmTabs.vue
View File

@@ -15,6 +15,7 @@
</template>
<script>
import chartMixin from '@/views/charts2/chart-mixin'
export default {
name: 'NpmTabs',
data () {
@@ -24,6 +25,7 @@ export default {
tabs: []
}
},
mixins: [chartMixin],
props: {
chart: Object
},
@@ -43,6 +45,7 @@ export default {
}
},
mounted () {
this.toggleLoading(false)
if (this.chart.params && this.chart.params.tabs) {
this.tabs = this.chart.params.tabs
}