gfwleak/nezha-nezha-fronted
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix：修改 overview 地图的tootip

Browse Source
This commit is contained in:
zhangyu
2021-05-13 20:27:23 +08:00
parent e2d054c2b4
commit 7e5f792e6e
5 changed files with 81 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
nezha-fronted/src/components/common/language/cn.js
View File

@@ -106,7 +106,7 @@ const cn = {
moreOption: '更多选项',
copy: '复制',
silence: '静默',
labels: '标签',
labels: '标签'
},
setup: {
step0: '欢迎',
@@ -139,7 +139,7 @@ const cn = {
configTip: '请输入管理员的用户名和密码，并设置Nezha WEB模块的安装信息，如IP:port',
federation: '联邦',
federationEnable: '可用',
federationDisable:'不可用',
federationDisable: '不可用'
},
name: '数据库名称',
username: '用户名',
@@ -415,7 +415,10 @@ const cn = {
type: '类型',
model: '型号',
dc: '数据中心'
}
},
ok: 'OK',
alarm: 'Alarm',
total: 'Total'
},
project: {
project: '系统',
@@ -686,15 +689,22 @@ const cn = {
download: '下载',
osType: 'OS 类型',
autoScript: '自动安装脚本',
type: 'Agent类型'
type: 'Agent类型',
}
},
agent: {
name: '名称',
type: '类型',
createProm: '创建代理服务',
up: 'UP',
down: 'Down',
agent: {
agent: '代理'
agent: '代理',
title: 'Download agent',
download: 'Download',
osType: 'OS type',
autoScript: 'Auto install script',
type: 'Agent type'
}
},
terminallog: {

13
nezha-fronted/src/components/common/language/en.js
View File

@@ -111,7 +111,7 @@ const en = {
labels: 'Labels',
moreOption: 'More option',
copy: 'Copy',
silence: 'Silence',
silence: 'Silence'
},
pageSize: '/page',
setup: {
@@ -145,7 +145,7 @@ const en = {
configTip: 'Please enter username and password for administrator ,and set the Nezha WEB module install information,like IP:port',
federation: 'Federation',
federationEnable: 'Enable',
federationDisable:'Disable',
federationDisable: 'Disable'
},
name: 'Database name',
@@ -423,7 +423,10 @@ const en = {
type: 'type',
model: 'model',
dc: 'data center'
}
},
ok: 'OK',
alarm: 'Alarm',
total: 'Total'
},
project: {
project: 'Projects',
@@ -688,6 +691,8 @@ const en = {
checkTime: 'Check time',
dataCenter: 'Data center',
name: 'Name',
up: 'UP',
down: 'Down',
agent: {
agent: 'Agent',
title: 'Download agent',
@@ -1136,7 +1141,7 @@ const en = {
alertRuleInfo: 'Alert rule information',
alertNumTrend: 'Alert num trend',
affectEntity: 'Affect entity'
},
}
},
silence: {
name: 'Name',

10
nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue
View File

@@ -443,23 +443,23 @@ const tooltipPieOption = {
legend: {
data: [],
show: true,
left: 70,
top: 35,
left: '50%',
top: '30%',
icon: 'circle',
itemHeight: 4,
orient: 'vertical',
itemGap: 6,
textStyle: {
fontSize: 12,
padding: [0, 0, 0, -10]
padding: [0, 0, 10, -10]
}
},
series: [
{
type: 'pie',
animation: false,
center: [40, 63],
radius: [14, 22],
center: ['25%', '60%'],
radius: [36, 48],
data: [],
label: {
show: true,

44
nezha-fronted/src/components/page/dashboard/overview/overview.vue
View File

@@ -631,21 +631,21 @@ export default {
tooltipPrometheusChart = echarts.init(document.querySelector('#tooltip-chart--prometheus'))
const endpointOption = chartConfig.getOption('tooltipPie')
const prometheusOption = chartConfig.getOption('tooltipPie')
endpointOption.series[0].label.formatter = data.endpointTotal + ''
endpointOption.series[0].label.formatter = data.asset.total + ''
endpointOption.series[0].data = [
{ name: vm.$t('dashboard.overview.asset.pingUp'), value: data.endpointUp ? data.endpointUp : 0 },
{ name: vm.$t('dashboard.overview.asset.pingDown'), value: data.endpointDown ? data.endpointDown : 0 },
{ name: vm.$t('asset.suspended'), value: data.endpointSuspended ? data.endpointSuspended : 0 }
{ name: vm.$t('dashboard.overview.asset.ok'), value: data.asset.ok ? data.asset.ok : 0 },
{ name: vm.$t('dashboard.overview.asset.alarm'), value: data.asset.alarm ? data.asset.alarm : 0 },
{ name: vm.$t('dashboard.overview.asset.total'), value: data.asset.total ? data.asset.total : 0 }
]
endpointOption.title.text = vm.$t('project.endpoint.endpoint')
endpointOption.legend.data = [vm.$t('dashboard.overview.asset.pingUp'), vm.$t('dashboard.overview.asset.pingDown'), vm.$t('asset.suspended')]
prometheusOption.series[0].label.formatter = data.promTotal + ''
endpointOption.title.text = vm.$t('asset.asset')
endpointOption.legend.data = [vm.$t('dashboard.overview.asset.ok'), vm.$t('dashboard.overview.asset.alarm'), vm.$t('dashboard.overview.asset.total')]
prometheusOption.series[0].label.formatter = data.agent.up + ''
prometheusOption.series[0].data = [
{ name: vm.$t('dashboard.overview.asset.pingUp'), value: data.promUp ? data.promUp : 0 },
{ name: vm.$t('dashboard.overview.asset.pingDown'), value: data.promDown ? data.promDown : 0 }
{ name: vm.$t('config.agent.up'), value: data.agent.up ? data.agent.up : 0 },
{ name: vm.$t('config.agent.down'), value: data.agent.down ? data.agent.down : 0 }
]
prometheusOption.title.text = 'Prometheus'
prometheusOption.legend.data = [vm.$t('dashboard.overview.asset.pingUp'), vm.$t('dashboard.overview.asset.pingDown')]
prometheusOption.title.text = vm.$t('config.agent.agent.agent')
prometheusOption.legend.data = [vm.$t('config.agent.up'), vm.$t('config.agent.down')]
tooltipEndpointChart.setOption(endpointOption, true)
tooltipPrometheusChart.setOption(prometheusOption, true)
}, 100)
@@ -977,9 +977,7 @@ export default {
return result
},
mapTooltipFormatter (dcStat) {
return `<div class="tooltip">
<div class="tooltip--title">${dcStat.name}</div>
<div class="tooltip--row">
/* <div class="tooltip--row">
<div class="tooltip-asset">
<div class="tooltip-asset--title"><span>${this.$t('asset.asset')}</span><span>Total：${dcStat.assetTotal}</span></div>
<div class="tooltip-asset--row">
@@ -1025,16 +1023,18 @@ export default {
<div class="row--label row--label__p3">P3</div><div class="row--value row--value__p3">${dcStat.alertP3}</div>
</div>
</div>
</div>
</div> */
return `<div class="tooltip">
<div class="tooltip--title">${dcStat.name}</div>
<div class="tooltip--row">
<div class="legend-value">
<div>${dcStat.endpointUp}</div>
<div>${dcStat.endpointDown}</div>
<div>${dcStat.endpointSuspended}</div>
<div class="legend-value legend-value-asset">
<div>${dcStat.asset.ok}</div>
<div>${dcStat.asset.alarm}</div>
<div>${dcStat.asset.total}</div>
</div>
<div class="legend-value">
<div>${dcStat.promUp}</div>
<div>${dcStat.promDown}</div>
<div class="legend-value legend-value-agent">
<div>${dcStat.agent.up}</div>
<div>${dcStat.agent.down}</div>
</div>
<div class="tooltip-chart" id="tooltip-chart--endpoint"></div>
<div class="tooltip-chart" id="tooltip-chart--prometheus"></div>

26
nezha-fronted/src/components/page/dashboard/overview/overview2.scss
View File

@@ -420,22 +420,29 @@
}
.overview {
.tooltip--row {
display: flex;
//display: flex;
justify-content: space-between;
margin-bottom: 10px;
position: relative;
height: calc(100% - 30px);
.legend-value {
font-size: 12px;
color: #333333;
position: absolute;
left: 155px;
top: 35px;
//left: 155px;
//top: 35px;
}
.legend-value + .legend-value {
left: 356px;
.legend-value-asset{
top: 40px;
right: 67px;
}
.legend-value-agent{
top: 168px;
right: 67px;
}
//.legend-value + .legend-value {
// left: 356px;
//}
.tooltip-asset {
width: 260px;
@@ -609,8 +616,9 @@
}
.tooltip-chart {
width: calc(50% - 7px);
height: 100px;
width: 100%;
height: calc(50% - 10px);
padding-bottom: 5px;
box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.12), -1px 1px 4px -1px rgba(205, 205, 205, 0.47);
}
}