From 1a6afc375926c3051b3cb96b0b45179633c69396 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=8A=B2=E6=9D=BE?= <chenjinsong@zdjizhi.com>
Date: Wed, 21 Oct 2020 20:29:17 +0800
Subject: [PATCH] =?UTF-8?q?NEZ-421=20perf:=20project-topo=E5=8F=B3?=
 =?UTF-8?q?=E4=B8=8A=E8=A7=92=E4=B8=A4=E4=B8=AA=E9=A5=BC=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/project/popData/Main.vue           |  78 ++++-
 .../components/common/project/visNetwork.vue  |   2 +-
 .../page/dashboard/overview/chartConfig.vue   |  37 ++
 .../page/dashboard/overview/overview2.scss    | 322 ++++++++++--------
 .../page/dashboard/overview/overview2.vue     |   2 +-
 5 files changed, 275 insertions(+), 166 deletions(-)

diff --git a/nezha-fronted/src/components/common/project/popData/Main.vue b/nezha-fronted/src/components/common/project/popData/Main.vue
index 27c017b80..bb9f0968c 100644
--- a/nezha-fronted/src/components/common/project/popData/Main.vue
+++ b/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">
-          <span class="content-title"><i class="nz-icon nz-icon-arrow-up2 colorFFF bg23BF9A"></i>up</span>
-          <span class="float-right">{{moduleInfo.assetStat.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.assetStat.down}}</span>
+        <div class="tooltip--row">
+          <div class="legend-value">
+            <div>{{moduleInfo.assetStat.up}}</div>
+            <div>{{moduleInfo.assetStat.down}}</div>
+          </div>
+          <div class="tooltip-chart" id="chart--asset"></div>
         </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:{
@@ -87,24 +98,63 @@
     methods:{
 		  init(){
         this.$get('/module/stat',{id:this.moduleId}).then(res=>{
-          this.moduleInfo=res.data;
+          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{
diff --git a/nezha-fronted/src/components/common/project/visNetwork.vue b/nezha-fronted/src/components/common/project/visNetwork.vue
index 30343c5c4..051b248cf 100644
--- a/nezha-fronted/src/components/common/project/visNetwork.vue
+++ b/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;
diff --git a/nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue b/nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue
index 781dccecc..64f123315 100644
--- a/nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue
+++ b/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){
diff --git a/nezha-fronted/src/components/page/dashboard/overview/overview2.scss b/nezha-fronted/src/components/page/dashboard/overview/overview2.scss
index 512595c78..958f7e4cb 100644
--- a/nezha-fronted/src/components/page/dashboard/overview/overview2.scss
+++ b/nezha-fronted/src/components/page/dashboard/overview/overview2.scss
@@ -391,168 +391,190 @@
   font-weight: 600;
   padding-bottom: 10px;
 }
-.tooltip--row {
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: 10px;
-  position: relative;
+.overview {
+  .tooltip--row {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    position: relative;
 
-  .legend-value {
-    font-size: 12px;
-    color: #333333;
-    position: absolute;
-    left: 132px;
-    top: 45px;
-  }
-  .legend-value + .legend-value {
-    left: 310px;
-  }
-
-  .tooltip-asset {
-    width: 240px;
-    height: 124px;
-    border: 1px solid #DEDEDE;
-    border-radius: 2px;
-
-    .tooltip-asset--title {
-      padding: 0 10px;
-      height: 24px;
-      line-height: 24px;
-      font-size: 14px;
-      color: #333333;
-      display: flex;
-      justify-content: space-between;
-      border-bottom: 1px solid #DEDEDE;
-      box-sizing: border-box;
-    }
-    .tooltip-asset--title span:first-of-type {
-      font-weight: 600;
-    }
-
-    .tooltip-asset--row {
-      display: flex;
-      height: 50px;
-      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;
-      line-height: 50px;
-      font-size: 14px;
-      border-right: 1px solid #DEDEDE;
-      color: #333333;
-      box-sizing: border-box;
-    }
-    .tooltip-asset--sub-row {
-      padding-left: 10px;
-      font-size: 13px;
-      color: #333333;
-      line-height: 25px;
-      display: flex;
-
-      .sub-row--label {
-        width: 94px;
-      }
-      .sub-row--value {
-        position: relative;
-
-        .sign {
-          position: absolute;
-          height: 5px;
-          width: 5px;
-          border-radius: 50%;
-          top: 50%;
-          transform: translateY(-50%);
-          left: 0;
-        }
-        .red-sign {
-          background-color: $danger-color;
-        }
-        .green-sign {
-          background-color: $success-color;
-        }
-
-        span {
-          position: absolute;
-          left: 11px;
-        }
-      }
-    }
-  }
-  .tooltip-alert {
-    width: 96px;
-    height: 125px;
-    box-shadow: 1px 2px 4px 0 rgba(0,0,0,0.12), -1px 1px 4px -1px rgba(205,205,205,0.47);
-
-    .tooltip-alert--title {
-      height: 36px;
-      line-height: 36px;
-      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;
-      height: 20px;
+    .legend-value {
       font-size: 12px;
-      display: flex;
+      color: #333333;
+      position: absolute;
+      left: 132px;
+      top: 45px;
+    }
 
-      .row--label {
-        width: 36px;
-        border-radius: 4px 0 0 4px;
-        color: white;
-        text-align: center;
+    .legend-value + .legend-value {
+      left: 310px;
+    }
+
+    .tooltip-asset {
+      width: 240px;
+      height: 124px;
+      border: 1px solid #DEDEDE;
+      border-radius: 2px;
+
+      .tooltip-asset--title {
+        padding: 0 10px;
+        height: 24px;
+        line-height: 24px;
+        font-size: 14px;
+        color: #333333;
+        display: flex;
+        justify-content: space-between;
+        border-bottom: 1px solid #DEDEDE;
+        box-sizing: border-box;
       }
-      .row--label__p1 {
-        background-color: #F2866E;
-        border-color: #F2866E;
+
+      .tooltip-asset--title span:first-of-type {
+        font-weight: 600;
       }
-      .row--label__p2 {
-        background-color: #F89984;
-        border-color: #F89984;
+
+      .tooltip-asset--row {
+        display: flex;
+        height: 50px;
+        box-sizing: border-box;
+        border-bottom: 1px solid #DEDEDE;
       }
-      .row--label__p3 {
-        background-color: #F7BA78;
-        border-color: #F7BA78;
+
+      .tooltip-asset--row + .tooltip-asset--row {
+        border-bottom: none;
       }
-      .row--value {
-        width: 40px;
-        border: 1px solid;
-        border-radius: 0 4px 4px 0;
-        text-align: center;
+
+      .tooltip-asset--row > div {
+        line-height: 25px;
       }
-      .row--value__p1 {
-        color: #F2866E;
-        border-color: #F2866E;
+
+      .tooltip-asset--row > div:first-of-type {
+        width: 70px;
+        padding-left: 10px;
+        line-height: 50px;
+        font-size: 14px;
+        border-right: 1px solid #DEDEDE;
+        color: #333333;
+        box-sizing: border-box;
       }
-      .row--value__p2 {
-        color: #F89984;
-        border-color: #F89984;
-      }
-      .row--value__p3 {
-        color: #F7BA78;
-        border-color: #F7BA78;
+
+      .tooltip-asset--sub-row {
+        padding-left: 10px;
+        font-size: 13px;
+        color: #333333;
+        line-height: 25px;
+        display: flex;
+
+        .sub-row--label {
+          width: 94px;
+        }
+
+        .sub-row--value {
+          position: relative;
+
+          .sign {
+            position: absolute;
+            height: 5px;
+            width: 5px;
+            border-radius: 50%;
+            top: 50%;
+            transform: translateY(-50%);
+            left: 0;
+          }
+
+          .red-sign {
+            background-color: $danger-color;
+          }
+
+          .green-sign {
+            background-color: $success-color;
+          }
+
+          span {
+            position: absolute;
+            left: 11px;
+          }
+        }
       }
     }
-  }
 
-  .tooltip-chart {
-    width: calc(50% - 7px);
-    height: 100px;
-    box-shadow: 1px 2px 4px 0 rgba(0,0,0,0.12), -1px 1px 4px -1px rgba(205,205,205,0.47);
+    .tooltip-alert {
+      width: 96px;
+      height: 125px;
+      box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.12), -1px 1px 4px -1px rgba(205, 205, 205, 0.47);
+
+      .tooltip-alert--title {
+        height: 36px;
+        line-height: 36px;
+        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;
+        height: 20px;
+        font-size: 12px;
+        display: flex;
+
+        .row--label {
+          width: 36px;
+          border-radius: 4px 0 0 4px;
+          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;
+        }
+      }
+    }
+
+    .tooltip-chart {
+      width: calc(50% - 7px);
+      height: 100px;
+      box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.12), -1px 1px 4px -1px rgba(205, 205, 205, 0.47);
+    }
   }
 }
 
diff --git a/nezha-fronted/src/components/page/dashboard/overview/overview2.vue b/nezha-fronted/src/components/page/dashboard/overview/overview2.vue
index e8cdf9106..b06c03310 100644
--- a/nezha-fronted/src/components/page/dashboard/overview/overview2.vue
+++ b/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"),