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

2020-10-21 20:29:17 +08:00
parent 2dc2b1ad5b
commit 1a6afc3759
5 changed files with 275 additions and 166 deletions
--- 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{
--- 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;
--- 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){
--- 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);
+    }
  }
 }

--- 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"),