fix：修改 overview 地图的tootip

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:'联邦',
+      federation: '联邦',
-      federationEnable:'可用',
+      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: {

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',
+      federation: 'Federation',
-      federationEnable:'Enable',
+      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',
@@ -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',
+      name: 'Name',
-      vm:'VM',
+      vm: 'VM',
-      vmh:'VMH',
+      vmh: 'VMH',
-      authProtocol:'AuthProtocol',
+      authProtocol: 'AuthProtocol',
       snmpEnable: 'SnmpEnable',
-      snmpCollect:'SnmpCollect',
+      snmpCollect: 'SnmpCollect',
-      createModel:'New Type',
+      createModel: 'New Type',
-      sshCollect:'SshCollect',
+      sshCollect: 'SshCollect',
-      sshCollectScript:'SshCollectScript',
+      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',

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

@@ -443,23 +443,23 @@ const tooltipPieOption = {
   legend: {
     data: [],
     show: true,
-    left: 70,
+    left: '50%',
-    top: 35,
+    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],
+      center: ['25%', '60%'],
-      radius: [14, 22],
+      radius: [36, 48],
       data: [],
       label: {
         show: true,

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.ok'), value: data.asset.ok ? data.asset.ok : 0 },
-          { name: vm.$t('dashboard.overview.asset.pingDown'), value: data.endpointDown ? data.endpointDown : 0 },
+          { name: vm.$t('dashboard.overview.asset.alarm'), value: data.asset.alarm ? data.asset.alarm : 0 },
-          { name: vm.$t('asset.suspended'), value: data.endpointSuspended ? data.endpointSuspended : 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.title.text = vm.$t('asset.asset')
-        endpointOption.legend.data = [vm.$t('dashboard.overview.asset.pingUp'), vm.$t('dashboard.overview.asset.pingDown'), vm.$t('asset.suspended')]
+        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.promTotal + ''
+        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('config.agent.up'), value: data.agent.up ? data.agent.up : 0 },
-          { name: vm.$t('dashboard.overview.asset.pingDown'), value: data.promDown ? data.promDown : 0 }
+          { name: vm.$t('config.agent.down'), value: data.agent.down ? data.agent.down : 0 }
         ]
-        prometheusOption.title.text = 'Prometheus'
+        prometheusOption.title.text = vm.$t('config.agent.agent.agent')
-        prometheusOption.legend.data = [vm.$t('dashboard.overview.asset.pingUp'), vm.$t('dashboard.overview.asset.pingDown')]
+        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--row">
-          <div class="tooltip--title">${dcStat.name}</div>
-          <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 class="legend-value legend-value-asset">
-              <div>${dcStat.endpointUp}</div>
+              <div>${dcStat.asset.ok}</div>
-              <div>${dcStat.endpointDown}</div>
+              <div>${dcStat.asset.alarm}</div>
-              <div>${dcStat.endpointSuspended}</div>
+              <div>${dcStat.asset.total}</div>
             </div>
-            <div class="legend-value">
+            <div class="legend-value legend-value-agent">
-              <div>${dcStat.promUp}</div>
+              <div>${dcStat.agent.up}</div>
-              <div>${dcStat.promDown}</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>

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;
+      //left: 155px;
-      top: 35px;
+      //top: 35px;
     }
-
+    .legend-value-asset{
-    .legend-value + .legend-value {
+      top: 40px;
-      left: 356px;
+      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);
+      width: 100%;
-      height: 100px;
+      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);
     }
   }