NEZ-421 perf: project-topo右上角两个饼图

nezha-fronted/src/components/common/project/popData/Main.vue

@@ -1,30 +1,36 @@
 <template>
   <div class="main-content">
     <div class="main-box">
-      <div class="main-box-title">Assets</div>
+      <div class="main-box-title">{{$t("asset.asset")}}</div>
       <div class="main-box-content">
-        <div class="content-box">
+        <div class="tooltip--row">
-          <span class="content-title"><i class="nz-icon nz-icon-arrow-up2 colorFFF bg23BF9A"></i>up</span>
+          <div class="legend-value">
-          <span class="float-right">{{moduleInfo.assetStat.up}}</span>
+            <div>{{moduleInfo.assetStat.up}}</div>
+            <div>{{moduleInfo.assetStat.down}}</div>
           </div>
-        <div class="content-box">
+          <div class="tooltip-chart" id="chart--asset"></div>
-          <span class="content-title"><i class="nz-icon nz-icon-arrow-down1 colorFFF bgEC7F66"></i>down</span>
-          <span class="float-right">{{moduleInfo.assetStat.down}}</span>
         </div>
       </div>
     </div>
 
     <div class="main-box">
-      <div class="main-box-title">Endpoints</div>
+      <div class="main-box-title">{{$t("project.endpoint.endpoint")}}</div>
       <div class="main-box-content">
-        <div class="content-box">
+        <div class="tooltip--row">
+          <div class="legend-value">
+            <div>{{moduleInfo.endpointStat.up}}</div>
+            <div>{{moduleInfo.endpointStat.down}}</div>
+          </div>
+          <div class="tooltip-chart" id="chart--endpoint"></div>
+        </div>
+        <!--<div class="content-box">
           <span class="content-title"><i class="nz-icon nz-icon-arrow-up2 colorFFF bg23BF9A"></i>up</span>
           <span class="float-right">{{moduleInfo.endpointStat.up}}</span>
         </div>
         <div class="content-box">
           <span class="content-title"><i class="nz-icon nz-icon-arrow-down1 colorFFF bgEC7F66"></i>down</span>
           <span class="float-right">{{moduleInfo.endpointStat.down}}</span>
-        </div>
+        </div>-->
       </div>
     </div>
 
@@ -49,6 +55,11 @@
 </template>
 
 <script>
+  import chartConfig from '../../../page/dashboard/overview/chartConfig';
+  import echarts from "echarts";
+  
+  var endpointChart;
+  var assetChart;
 	export default {
 		name:"popDataMain",
     props:{
@@ -88,23 +99,62 @@
 		  init(){
         this.$get('/module/stat',{id:this.moduleId}).then(res=>{
           this.moduleInfo = res.data;
+          //console.info(this.moduleInfo);
+          endpointChart = echarts.init(document.querySelector("#chart--endpoint"));
+          assetChart = echarts.init(document.querySelector("#chart--asset"));
+          let endpointOption = chartConfig.getOption("topoPie"),
+            assetOption = chartConfig.getOption("topoPie");
+          endpointOption.series[0].label.formatter = this.moduleInfo.endpointStat.down+this.moduleInfo.endpointStat.up + "";
+          endpointOption.series[0].data = [
+            {name: this.$t("dashboard.overview.asset.pingUp"), value: this.moduleInfo.endpointStat.up ? this.moduleInfo.endpointStat.up : 0},
+            {name: this.$t("dashboard.overview.asset.pingDown"), value: this.moduleInfo.endpointStat.down ? this.moduleInfo.endpointStat.down : 0}
+          ];
+          endpointOption.title.show = false;
+          endpointOption.legend.data = [this.$t("dashboard.overview.asset.pingUp"), this.$t("dashboard.overview.asset.pingDown")];
+          assetOption.series[0].label.formatter = this.moduleInfo.assetStat.up+this.moduleInfo.assetStat.down + "";
+          assetOption.series[0].data = [
+            {name: this.$t("dashboard.overview.asset.pingUp"), value: this.moduleInfo.assetStat.up ? this.moduleInfo.assetStat.up : 0},
+            {name: this.$t("dashboard.overview.asset.pingDown"), value: this.moduleInfo.assetStat.down ? this.moduleInfo.assetStat.down : 0}
+          ];
+          assetOption.title.show = false;
+          assetOption.legend.data = [this.$t("dashboard.overview.asset.pingUp"), this.$t("dashboard.overview.asset.pingDown")];
+          endpointChart.setOption(endpointOption, true);
+          assetChart.setOption(assetOption, true);
         })
       }
     },
   }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
   .main-content{
     display: flex;
     margin-right: 15px;
     flex-direction: column;
     justify-content: space-between;
+
+    .tooltip--row {
+      position: relative;
+      height: 50px;
+      
+      .legend-value {
+        font-size: 12px;
+        color: #333333;
+        position: absolute;
+        left: 125px;
+        top: 6px;
+      }
+
+      .tooltip-chart {
+        height: 100%;
+        width: 100%;
+      }
+    }
   }
   .main-box{
     background: #FFFFFF;
     border: 1px solid #E7EAED;
-    width: 173px;
+    width: 180px;
     margin-bottom: 15px;
   }
   .main-box-title{

nezha-fronted/src/components/common/project/visNetwork.vue

@@ -376,7 +376,7 @@
   /*}*/
   .vis-network{
     z-index: 0;
-  };
+  }
   .vis-network .nz-icon-refresh{
     margin-right: 12px;
     margin-top: 10px;

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

@@ -470,6 +470,7 @@
       series: [
         {
           type: "pie",
+          animation: false,
           center: [40, 63],
           radius: [14, 22],
           data: [],
@@ -482,6 +483,41 @@
         }
       ]
     };
+    const topoPieOption = {
+      color: ["#60C6B4", "#EEA694"],
+      title: {
+        show: false,
+      },
+      legend: {
+        data: [],
+        show: true,
+        left: 60,
+        top: 6,
+        icon: "circle",
+        itemHeight: 4,
+        orient: "vertical",
+        itemGap: 6,
+        textStyle: {
+          fontSize: 12,
+          padding: [0, 0, 0, -10]
+        },
+      },
+      series: [
+        {
+          type: "pie",
+          animation: false,
+          center: [30, 25],
+          radius: [14, 22],
+          data: [],
+          label: {
+            show: true,
+            formatter: "",
+            color: "#666666",
+            position: "center",
+          }
+        }
+      ]
+    };
     function createTempTimes(){
       let times=[];
       for(let i=0;i<10;i++){
@@ -501,6 +537,7 @@
       assetBar: {name: 'assetMessage', option: alertMessageBarByAsset},
       noData:{name:'noData',option:noDataOption},
       tooltipPie: {option: tooltipPieOption},
+      topoPie: {option: topoPieOption},
     };
     export default {
       getOption:function(type){

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

@@ -391,6 +391,7 @@
   font-weight: 600;
   padding-bottom: 10px;
 }
+.overview {
   .tooltip--row {
     display: flex;
     justify-content: space-between;
@@ -404,6 +405,7 @@
       left: 132px;
       top: 45px;
     }
+
     .legend-value + .legend-value {
       left: 310px;
     }
@@ -425,6 +427,7 @@
         border-bottom: 1px solid #DEDEDE;
         box-sizing: border-box;
       }
+
       .tooltip-asset--title span:first-of-type {
         font-weight: 600;
       }
@@ -435,12 +438,15 @@
         box-sizing: border-box;
         border-bottom: 1px solid #DEDEDE;
       }
+
       .tooltip-asset--row + .tooltip-asset--row {
         border-bottom: none;
       }
+
       .tooltip-asset--row > div {
         line-height: 25px;
       }
+
       .tooltip-asset--row > div:first-of-type {
         width: 70px;
         padding-left: 10px;
@@ -450,6 +456,7 @@
         color: #333333;
         box-sizing: border-box;
       }
+
       .tooltip-asset--sub-row {
         padding-left: 10px;
         font-size: 13px;
@@ -460,6 +467,7 @@
         .sub-row--label {
           width: 94px;
         }
+
         .sub-row--value {
           position: relative;
 
@@ -472,9 +480,11 @@
             transform: translateY(-50%);
             left: 0;
           }
+
           .red-sign {
             background-color: $danger-color;
           }
+
           .green-sign {
             background-color: $success-color;
           }
@@ -486,6 +496,7 @@
         }
       }
     }
+
     .tooltip-alert {
       width: 96px;
       height: 125px;
@@ -497,12 +508,15 @@
         font-size: 14px;
         padding: 0 10px;
       }
+
       .tooltip-alert--title span:first-of-type {
         font-weight: 600;
       }
+
       .tooltip-alert--title span:last-of-type {
         padding-left: 10px;
       }
+
       .tooltip-alert--row {
         padding: 0 10px;
         margin-bottom: 10px;
@@ -516,32 +530,39 @@
           color: white;
           text-align: center;
         }
+
         .row--label__p1 {
           background-color: #F2866E;
           border-color: #F2866E;
         }
+
         .row--label__p2 {
           background-color: #F89984;
           border-color: #F89984;
         }
+
         .row--label__p3 {
           background-color: #F7BA78;
           border-color: #F7BA78;
         }
+
         .row--value {
           width: 40px;
           border: 1px solid;
           border-radius: 0 4px 4px 0;
           text-align: center;
         }
+
         .row--value__p1 {
           color: #F2866E;
           border-color: #F2866E;
         }
+
         .row--value__p2 {
           color: #F89984;
           border-color: #F89984;
         }
+
         .row--value__p3 {
           color: #F7BA78;
           border-color: #F7BA78;
@@ -555,4 +576,5 @@
       box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.12), -1px 1px 4px -1px rgba(205, 205, 205, 0.47);
     }
   }
+}
 

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

@@ -748,7 +748,7 @@
       },
       initTooltipChart(param) {
         let data = param.tooltip.options.data;
-        //console.info(data);
+        //console.info(tooltipEndpointChart);
         tooltipEndpointChart = echarts.init(document.querySelector("#tooltip-chart--endpoint"));
         tooltipPrometheusChart = echarts.init(document.querySelector("#tooltip-chart--prometheus"));
         let endpointOption = chartConfig.getOption("tooltipPie"),