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

fix:1. 折线图tooltip样式统一2.Network & App Performance 下钻参数调整

Browse Source
This commit is contained in:
@changcode
2022-08-24 18:18:28 +08:00
parent aee1bd3142
commit 45e47477f5
6 changed files with 57 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/assets/css/components/views/charts2/networkOverviewLine.scss
View File

@@ -7,9 +7,15 @@
height: 80%;
width: 100%;
.echarts-tooltip.echarts-tooltip-dark {
.cn-chart-body {
display: flex;
.cn-chart-tooltip {
display: flex;
justify-content: space-between;
flex-direction: column;
flex: 1;
.cn-chart-tooltip-box {
margin-right: 10px;
}
.cn-chart-tooltip-value.cn-chart-tooltip__color {
font-size: 12px;
color: #353636;
@@ -19,6 +25,7 @@
}
}
}
}
.line-header {
display: flex;
justify-content: space-between;

9
src/assets/css/components/views/charts2/npmLine.scss
View File

@@ -62,9 +62,15 @@
height: calc(100% - 41px);
width: 100%;
.echarts-tooltip.echarts-tooltip-dark {
.cn-chart-body {
display: flex;
.cn-chart-tooltip {
display: flex;
justify-content: space-between;
flex-direction: column;
flex: 1;
.cn-chart-tooltip-box {
margin-right: 10px;
}
.cn-chart-tooltip-value.cn-chart-tooltip__color {
font-size: 12px;
color: #353636;
@@ -74,4 +80,5 @@
}
}
}
}
}

9
src/assets/css/components/views/charts2/npmTrafficLine.scss
View File

@@ -16,9 +16,15 @@
height: 100%;
width: 100%;
.echarts-tooltip.echarts-tooltip-dark {
.cn-chart-body {
display: flex;
.cn-chart-tooltip {
display: flex;
justify-content: space-between;
flex-direction: column;
flex: 1;
.cn-chart-tooltip-box {
margin-right: 10px;
}
.cn-chart-tooltip-value.cn-chart-tooltip__color {
font-size: 12px;
color: #353636;
@@ -29,4 +35,5 @@
}
}
}
}
}

32
src/views/charts/charts/tools.js
View File

@@ -469,43 +469,27 @@ export function stackedLineTooltipFormatter (params) {
str += dateFormatByAppearance(tData)
str += '</div>'
}
str += '<div class="cn-chart-tooltip">'
str += '<span class="cn-chart-tooltip-box">'
str += item.marker
str += `<span class="cn-chart-tooltip-content">
${item.seriesName}
</span>`
str += '</span>'
str += `<span class="cn-chart-tooltip-value cn-chart-tooltip__color">
${unitConvert(item.data[1], item.value[2]).join(' ')}
</span>`
str += '</div>'
})
str += '</div>'
return str
}
export function trafficLineTooltipFormatter (params) {
let str = '<div>'
str += '<div class="cn-chart-body">'
str += '<div class="cn-chart-tooltip">'
params.forEach((item, i) => {
const tData = item.data[0]
if (i === 0) {
str += '<div style="margin-bottom: 5px">'
str += dateFormatByAppearance(tData)
str += '</div>'
}
str += '<div class="cn-chart-tooltip">'
str += '<span class="cn-chart-tooltip-box">'
str += item.marker
str += `<span class="cn-chart-tooltip-content">
${item.seriesName}
</span>`
str += '</span>'
})
str += '</div>'
str += '<div class="cn-chart-tooltip">'
params.forEach((item, i) => {
str += `<span class="cn-chart-tooltip-value cn-chart-tooltip__color">
${unitConvert(item.data[1], item.value[2]).join(' ')}
</span>`
str += '</div>'
})
str += '</div>'
str += '</div>'
str += '</div>'
return str
}
export function appStackedLineTooltipFormatter (params) {

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

@@ -59,7 +59,7 @@ export default {
} else if (condition.length > 1 && type && type === 'ip') {
params.q = `${type}='${condition[1]}' and side='${this.side}'`
} else if (condition.length > 1 && type && type !== 'ip') {
if (type === 'country' || type === 'asn') {
if (type === 'country' || type === 'asn' || type === 'province' || type === 'city' || type === 'isp') {
params.q = `${type}='${condition[1]}'`
} else if (type === 'idcRenter') {
params.q = `idc_renter='${condition[1]}'`
@@ -106,7 +106,7 @@ export default {
} else if (condition.length > 1 && type && type === 'ip') {
params.q = `${type}='${condition[1]}' and side='${this.side}'`
} else if (condition.length > 1 && type && type !== 'ip') {
if (type === 'country' || type === 'asn') {
if (type === 'country' || type === 'asn' || type === 'province' || type === 'city' || type === 'isp') {
params.q = `${type}='${condition[1]}'`
} else if (type === 'idcRenter') {
params.q = `idc_renter='${condition[1]}'`

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

@@ -16,7 +16,7 @@ import { trafficLineChartOption } from '@/views/charts2/charts/options/echartOpt
import unitConvert from '@/utils/unit-convert'
import { unitTypes, chartColor3 } from '@/utils/constants.js'
import { shallowRef } from 'vue'
import { trafficLineTooltipFormatter } from '@/views/charts/charts/tools'
import { stackedLineTooltipFormatter, trafficLineTooltipFormatter } from '@/views/charts/charts/tools'
import { get } from '@/utils/http'
import { api } from '@/utils/api'
import { getSecond } from '@/utils/date-util'
@@ -74,7 +74,7 @@ export default {
} else if (condition.length > 1 && type && type === 'ip') {
params.q = `${type}='${condition[1]}' and side='${this.side}'`
} else if (condition.length > 1 && type && type !== 'ip') {
if (type === 'country' || type === 'asn') {
if (type === 'country' || type === 'asn' || type === 'province' || type === 'city' || type === 'isp') {
params.q = `${type}='${condition[1]}'`
} else if (type === 'idcRenter') {
params.q = `idc_renter='${condition[1]}'`
@@ -158,7 +158,7 @@ export default {
params.forEach(t => {
t.seriesName = this.$t(t.seriesName)
})
const str = trafficLineTooltipFormatter(params)
const str = stackedLineTooltipFormatter(params)
return str
}
this.myChart.on('legendselectchanged', this.handleLegendClick)