From 7e5f792e6edc2e3dd7230acf9ebbe78548133ac6 Mon Sep 17 00:00:00 2001 From: zhangyu Date: Thu, 13 May 2021 20:27:23 +0800 Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=E4=BF=AE=E6=94=B9=20overview=20?= =?UTF-8?q?=E5=9C=B0=E5=9B=BE=E7=9A=84tootip?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/common/language/cn.js | 24 +++++++--- .../src/components/common/language/en.js | 35 ++++++++------- .../page/dashboard/overview/chartConfig.vue | 10 ++--- .../page/dashboard/overview/overview.vue | 44 +++++++++---------- .../page/dashboard/overview/overview2.scss | 26 +++++++---- 5 files changed, 81 insertions(+), 58 deletions(-) diff --git a/nezha-fronted/src/components/common/language/cn.js b/nezha-fronted/src/components/common/language/cn.js index 0d96a64c7..2e4667cdc 100644 --- a/nezha-fronted/src/components/common/language/cn.js +++ b/nezha-fronted/src/components/common/language/cn.js @@ -106,7 +106,7 @@ const cn = { moreOption: '更多选项', copy: '复制', silence: '静默', - labels: '标签', + labels: '标签' }, setup: { step0: '欢迎', @@ -137,9 +137,9 @@ const cn = { system: { configTitle: '系统配置', configTip: '请输入管理员的用户名和密码，并设置Nezha WEB模块的安装信息，如IP:port', - federation:'联邦', - federationEnable:'可用', - federationDisable:'不可用', + federation: '联邦', + federationEnable: '可用', + 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: { diff --git a/nezha-fronted/src/components/common/language/en.js b/nezha-fronted/src/components/common/language/en.js index a610677a6..01659a61b 100644 --- a/nezha-fronted/src/components/common/language/en.js +++ b/nezha-fronted/src/components/common/language/en.js @@ -111,7 +111,7 @@ const en = { labels: 'Labels', moreOption: 'More option', copy: 'Copy', - silence: 'Silence', + silence: 'Silence' }, pageSize: '/page', setup: { @@ -143,9 +143,9 @@ const en = { system: { configTitle: 'System configuration', 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', + federation: 'Federation', + federationEnable: 'Enable', + 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', @@ -687,7 +690,9 @@ const en = { type: 'Type', // "类别" checkTime: 'Check time', dataCenter: 'Data center', - name : 'Name', + name: 'Name', + up: 'UP', + down: 'Down', agent: { agent: 'Agent', title: 'Download agent', @@ -986,15 +991,15 @@ const en = { assetType: { assetType: 'Asset Type', type: 'Asset Type', - name:'Name', - vm:'VM', - vmh:'VMH', - authProtocol:'AuthProtocol', + name: 'Name', + vm: 'VM', + vmh: 'VMH', + authProtocol: 'AuthProtocol', snmpEnable: 'SnmpEnable', - snmpCollect:'SnmpCollect', - createModel:'New Type', - sshCollect:'SshCollect', - sshCollectScript:'SshCollectScript', + snmpCollect: 'SnmpCollect', + createModel: 'New Type', + sshCollect: 'SshCollect', + sshCollectScript: 'SshCollectScript', parent: 'Parent', pname: 'Parent name', editAssetType: 'Edit asset type', @@ -1136,7 +1141,7 @@ const en = { alertRuleInfo: 'Alert rule information', alertNumTrend: 'Alert num trend', affectEntity: 'Affect entity' - }, + } }, silence: { name: 'Name', diff --git a/nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue b/nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue index d7f387aa8..26dc2aa0c 100644 --- a/nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue +++ b/nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue @@ -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, diff --git a/nezha-fronted/src/components/page/dashboard/overview/overview.vue b/nezha-fronted/src/components/page/dashboard/overview/overview.vue index 6b4f649ae..e14e4a757 100644 --- a/nezha-fronted/src/components/page/dashboard/overview/overview.vue +++ b/nezha-fronted/src/components/page/dashboard/overview/overview.vue @@ -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 `
-
${dcStat.name}
-
+ /*
${this.$t('asset.asset')}Total：${dcStat.assetTotal}
@@ -1025,16 +1023,18 @@ export default {
P3
${dcStat.alertP3}
-
+
*/ + return `
+
${dcStat.name}
-
-
${dcStat.endpointUp}
-
${dcStat.endpointDown}
-
${dcStat.endpointSuspended}
+
+
${dcStat.asset.ok}
+
${dcStat.asset.alarm}
+
${dcStat.asset.total}
-
-
${dcStat.promUp}
-
${dcStat.promDown}
+
+
${dcStat.agent.up}
+
${dcStat.agent.down}
diff --git a/nezha-fronted/src/components/page/dashboard/overview/overview2.scss b/nezha-fronted/src/components/page/dashboard/overview/overview2.scss index 0a7cc4cfe..e46d2bdca 100644 --- a/nezha-fronted/src/components/page/dashboard/overview/overview2.scss +++ b/nezha-fronted/src/components/page/dashboard/overview/overview2.scss @@ -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); } }