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

fix: 修复部分echarts图表国际化报警问题

Browse Source
This commit is contained in:
@changcode
2022-12-20 10:22:54 +08:00
parent b9328c2eca
commit 33af252411
3 changed files with 30 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -426,9 +426,6 @@ export default {
} }
}] }]
chartOption.tooltip.formatter = (params) => { chartOption.tooltip.formatter = (params) => {
params.forEach(t => {
t.seriesName = this.$t(t.seriesName)
})
return appStackedLineTooltipFormatter(params) return appStackedLineTooltipFormatter(params)
} }
chart.setOption(chartOption) chart.setOption(chartOption)

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

@@ -84,9 +84,9 @@ export default {
return { return {
chartData: {}, chartData: {},
chartOptionLineData: [ chartOptionLineData: [
{ legend: 'network.total', index: 0, invertTab: true, show: false, color: '#749F4D' }, { legend: this.$t('network.total'), index: 0, invertTab: true, show: false, color: '#749F4D' },
{ legend: 'network.inbound', index: 1, invertTab: true, show: false, color: '#98709B' }, { legend: this.$t('network.inbound'), index: 1, invertTab: true, show: false, color: '#98709B' },
{ legend: 'network.outbound', index: 2, invertTab: true, show: false, color: '#E5A219' } { legend: this.$t('network.outbound'), index: 2, invertTab: true, show: false, color: '#E5A219' }
], ],
npmLineColor: [ npmLineColor: [
{ legend: '', color: '#749F4D' }, { legend: '', color: '#749F4D' },
@@ -230,9 +230,8 @@ export default {
} }
this.chartOption.tooltip.formatter = (params) => { this.chartOption.tooltip.formatter = (params) => {
params.forEach(t => { params.forEach(t => {
t.seriesName = this.$t(t.seriesName)
this.chartOptionLineData.forEach(e => { this.chartOptionLineData.forEach(e => {
if (this.$t(e.legend) === t.seriesName) { if (e.legend === t.seriesName) {
t.borderColor = e.color t.borderColor = e.color
} }
if (this.$t(chartData.i18n) === t.seriesName) { if (this.$t(chartData.i18n) === t.seriesName) {

53
src/views/charts2/charts/npm/NpmTrafficLine.vue
View File

@@ -69,19 +69,19 @@ export default {
unitTypes, unitTypes,
side: '', side: '',
mpackets: [ mpackets: [
{ name: 'network.total', show: true, positioning: 0, data: [], unitType: 'number' }, { name: this.$t('network.total'), show: true, positioning: 0, data: [], unitType: 'number' },
{ name: 'network.inbound', show: true, positioning: 1, data: [], unitType: 'number' }, { name: this.$t('network.inbound'), show: true, positioning: 1, data: [], unitType: 'number' },
{ name: 'network.outbound', show: true, positioning: 2, data: [], unitType: 'number' }, { name: this.$t('network.outbound'), show: true, positioning: 2, data: [], unitType: 'number' },
{ name: 'network.internal', show: true, positioning: 3, data: [], unitType: 'number' }, { name: this.$t('network.internal'), show: true, positioning: 3, data: [], unitType: 'number' },
{ name: 'network.through', show: true, positioning: 4, data: [], unitType: 'number' }, { name: this.$t('network.through'), show: true, positioning: 4, data: [], unitType: 'number' },
{ name: 'network.other', show: true, positioning: 5, data: [], unitType: 'number' } { name: this.$t('network.other'), show: true, positioning: 5, data: [], unitType: 'number' }
], ],
npmQuantity: [ npmQuantity: [
{ name: 'networkAppPerformance.tcpConnectionEstablishLatency', show: true, positioning: 0, data: [], unitType: unitTypes.time }, { name: this.$t('networkAppPerformance.tcpConnectionEstablishLatency'), show: true, positioning: 0, data: [], unitType: unitTypes.time },
{ name: 'networkAppPerformance.httpResponse', show: true, positioning: 0, data: [], unitType: unitTypes.time }, { name: this.$t('networkAppPerformance.httpResponse'), show: true, positioning: 0, data: [], unitType: unitTypes.time },
{ name: 'networkAppPerformance.sslResponseLatency', show: true, positioning: 0, data: [], unitType: unitTypes.time }, { name: this.$t('networkAppPerformance.sslResponseLatency'), show: true, positioning: 0, data: [], unitType: unitTypes.time },
{ name: 'networkAppPerformance.packetLoss', show: true, positioning: 0, data: [], unitType: unitTypes.percent }, { name: this.$t('networkAppPerformance.packetLoss'), show: true, positioning: 0, data: [], unitType: unitTypes.percent },
{ name: 'overall.packetRetrans', show: true, positioning: 0, data: [], unitType: unitTypes.percent } { name: this.$t('overall.packetRetrans'), show: true, positioning: 0, data: [], unitType: unitTypes.percent }
], ],
chartData: {}, chartData: {},
metricOptions: [ metricOptions: [
@@ -192,19 +192,19 @@ export default {
this.isNoData = res.data.result.length === 0 this.isNoData = res.data.result.length === 0
if (this.isNoData) { if (this.isNoData) {
this.mpackets = [ this.mpackets = [
{ name: 'network.total', show: true, positioning: 0, data: [], unitType: 'number' }, { name: this.$t('network.total'), show: true, positioning: 0, data: [], unitType: 'number' },
{ name: 'network.inbound', show: true, positioning: 1, data: [], unitType: 'number' }, { name: this.$t('network.inbound'), show: true, positioning: 1, data: [], unitType: 'number' },
{ name: 'network.outbound', show: true, positioning: 2, data: [], unitType: 'number' }, { name: this.$t('network.outbound'), show: true, positioning: 2, data: [], unitType: 'number' },
{ name: 'network.internal', show: true, positioning: 3, data: [], unitType: 'number' }, { name: this.$t('network.internal'), show: true, positioning: 3, data: [], unitType: 'number' },
{ name: 'network.through', show: true, positioning: 4, data: [], unitType: 'number' }, { name: this.$t('network.through'), show: true, positioning: 4, data: [], unitType: 'number' },
{ name: 'network.other', show: true, positioning: 5, data: [], unitType: 'number' } { name: this.$t('network.other'), show: true, positioning: 5, data: [], unitType: 'number' }
] ]
this.npmQuantity = [ this.npmQuantity = [
{ name: 'networkAppPerformance.tcpConnectionEstablishLatency', show: true, positioning: 0, data: [], unitType: unitTypes.time }, { name: this.$t('networkAppPerformance.tcpConnectionEstablishLatency'), show: true, positioning: 0, data: [], unitType: unitTypes.time },
{ name: 'networkAppPerformance.httpResponse', show: true, positioning: 0, data: [], unitType: unitTypes.time }, { name: this.$t('networkAppPerformance.httpResponse'), show: true, positioning: 0, data: [], unitType: unitTypes.time },
{ name: 'networkAppPerformance.sslResponseLatency', show: true, positioning: 0, data: [], unitType: unitTypes.time }, { name: this.$t('networkAppPerformance.sslResponseLatency'), show: true, positioning: 0, data: [], unitType: unitTypes.time },
{ name: 'networkAppPerformance.packetLoss', show: true, positioning: 0, data: [], unitType: unitTypes.percent }, { name: this.$t('networkAppPerformance.packetLoss'), show: true, positioning: 0, data: [], unitType: unitTypes.percent },
{ name: 'overall.packetRetrans', show: true, positioning: 0, data: [], unitType: unitTypes.percent } { name: this.$t('overall.packetRetrans'), show: true, positioning: 0, data: [], unitType: unitTypes.percent }
] ]
} }
res.data.result.forEach((t, i) => { res.data.result.forEach((t, i) => {
@@ -559,7 +559,7 @@ export default {
} }
return { return {
...chartOption, ...chartOption,
name: this.$t(t.name) + (legendUnit || ''), name: t.name + (legendUnit || ''),
lineStyle: { lineStyle: {
color: chartColor3[t.positioning], color: chartColor3[t.positioning],
width: 1 width: 1
@@ -583,15 +583,14 @@ export default {
}) })
this.chartOption.tooltip.formatter = (params) => { this.chartOption.tooltip.formatter = (params) => {
params.forEach(t => { params.forEach(t => {
t.seriesName = this.$t(t.seriesName)
this.mpackets.forEach(e => { this.mpackets.forEach(e => {
if (this.$t(e.name) === t.seriesName) { if (e.name === t.seriesName) {
t.borderColor = chartColor3[e.positioning] t.borderColor = chartColor3[e.positioning]
} }
}) })
this.npmQuantity.forEach(d => { this.npmQuantity.forEach(d => {
const nameMs = this.$t(d.name) + '(ms)' const nameMs = d.name + '(ms)'
const namePrent = this.$t(d.name) + '(%)' const namePrent = d.name + '(%)'
if (nameMs === t.seriesName) { if (nameMs === t.seriesName) {
t.borderColor = chartColor3[d.positioning] t.borderColor = chartColor3[d.positioning]
} else if (namePrent === t.seriesName) { } else if (namePrent === t.seriesName) {