feat: overview、endpoint-query的to-top修复

2020-04-24 21:43:51 +08:00
parent 9b12528b0d
commit 86f1b3742f
5 changed files with 237 additions and 27 deletions
--- a/nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue
@@ -143,7 +143,7 @@
        width="180">
      </el-table-column>
    </el-table>-->
-    <button class="to-top" v-show="showTopBtn" :class="{'to-top-is-hover': tableHover}" @click="$('ps', 1)"><i class="nz-icon nz-icon-top"></i></button>
+    <button class="to-top" v-show="showTopBtn" :class="{'to-top-is-hover': tableHover}" @click="$toTop('ps', 1)"><i class="nz-icon nz-icon-top"></i></button>

    <el-dialog class="line-chart-block-modal nz-dialog"
               :title="$t('project.endpoint.dialogTitle')"
--- a/nezha-fronted/src/components/page/dashboard/overview/chart.vue
+++ b/nezha-fronted/src/components/page/dashboard/overview/chart.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="chart-room" @mouseenter="mouseEnterChart" @mouseleave="mouseLeaveChart">
+  <div class="chart-room" @mouseenter="mouseEnterChart" @mouseleave="mouseLeaveChart" ref="chartRoom">
    <loading  ref="loading"></loading>

    <div class="chart-header">{{chartTitle}}</div>
@@ -36,7 +36,8 @@
      chartType:{type:String,default:'line'},
      tooltipFormatter:Function,
      yAxisFormatter:Function,
-      map:{}
+      map:{},
+      axisTooltip: {type: String}, // x/y
    },
    data(){
      return {
@@ -97,11 +98,30 @@
            this.modifyOption('yAxis','formatter',this.defaultYAxisFormatter)
          }
        }
-        console.log(this.option)
+        //console.log(this.option)
        this.$set(this.option,'series',this.series);

        this.chart.clear();
-        this.chart.setOption(this.option)
+        this.chart.setOption(this.option);
+        //坐标轴label鼠标悬浮提示
+        if (this.axisTooltip) {
+          let tooltipDom = document.querySelector(".axis-tooltip");
+          this.chart.on('mouseover', (params) => {
+            if(params.componentType == this.axisTooltip + "Axis") {
+              tooltipDom.style.display = "block";
+              tooltipDom.innerHTML = params.value;
+            }
+            this.$refs.chartRoom.addEventListener("mousemove", (event) => {
+              tooltipDom.style.top = event.pageY + "px";
+              tooltipDom.style.left = event.pageX-15 + "px";
+            });
+          });
+          this.chart.on('mouseout', (params) => {
+            if(params.componentType == this.axisTooltip + "Axis") {
+              tooltipDom.style.display = "";
+            }
+          });
+        }
        this.resize();
      },
      resizeChart:function(width,height){
--- a/nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue
+++ b/nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue
@@ -154,19 +154,138 @@
      legend: {
        show: false,
      },
-      grid: {},
+      grid: {
+        top: 30,
+        left: 0,
+        right: 30,
+        containLabel: true,
+        bottom:8
+      },
      series: [],
      tooltip : {},
      xAxis: {
-        type: 'value'
+        type: 'value',
+        axisLine: {
+          show: false
+        },
+        axisTick: {
+          show: false
+        },
+        axisLabel: {
+          fontSize: 13*window.devicePixelRatio
+        }
      },
      yAxis: {
        type: 'category',
-        data: []
+        axisLine: {
+          show: false
        },
+        axisTick: {
+          show: false
+        },
+        data: [],
+        axisLabel: {
+          formatter: function(value) {
+            if (value.length > 12) {
+              return value.substring(0, 9) + "...";
+            }
+            return value;
+          },
+          fontSize: 12*window.devicePixelRatio
+        },
+        triggerEvent: true
+      },
+    };
+    const overViewLine = {
+      title:{
+        show: false,
+      },
+      color: bgColorList,
+      legend:{
+        show:false,
+      },
+      toolbox:{
+        show:false,
+        top:'0',
+        showTitle:false,
+        tooltip:{
+          show:false,
+        },
+        feature:{
+          dataZoom:{
+            yAxisIndex:false
+          },
+          magicType:{
+            type:['stack']
+          },
+        }
+      },
+      tooltip: {
+        trigger: 'axis',
+        confine: false,
+        extraCssText:'z-index:1000;',
+      },
+      grid: {
+        left: 6,
+        right: 30,
+        containLabel: true,
+        bottom:8,
+      },
+      xAxis: {
+        type: 'time',
+        axisLabel: {
+          intervale: 0,
+          rotate: 0,
+          formatter: function (value) {
+            value = bus.computeTimezone(value)
+            let now = bus.computeTimezone(new Date().getTime());
+            let t_date = new Date(value);
+            let hhmm = [t_date.getHours(), t_date.getMinutes() < 10 ? "0" + t_date.getMinutes() : t_date.getMinutes()].join(':');
+            let mmdd = [t_date.getMonth() + 1, t_date.getDate() < 10 ? "0" + t_date.getDate() : t_date.getDate()].join('/');
+            if (value-now < 1000*60*60*24) {
+              return hhmm;
+            } else if (value-now >= 1000*60*60*24 && value-now < 1000*60*60*24*30) {
+              return mmdd + " " + hhmm;
+            } else {
+              return mmdd;
+            }
+          },
+          fontSize: 13*window.devicePixelRatio
+        },
+        axisPointer: {//y轴上显示指针对应的值
+          show: true,
+        },
+        splitLine:{
+          show:false
+        },
+        axisLine: {
+          show: false
+        },
+        axisTick: {
+          show: false
+        },
+      },
+      yAxis: {
+        type: 'value',
+        splitLine:{
+          show:true
+        },
+        axisLine: {
+          show: false
+        },
+        axisTick: {
+          show: false
+        },
+        axisLabel: {
+          fontSize: 13*window.devicePixelRatio
+        }
+      },
+      useUTC: false,//使用本地时间
+      series: [],
    };
    const chartTypes={
      line:{name:'line',option:commonOption},
+      overviewLine: {name: 'line', option: overViewLine},
      map:{name:'map',option:mapOptions},
      pie: {name: 'assetType', option: assetTypePie},
      bar: {name: 'alertMessage', option: alertMessageBar}
--- a/nezha-fronted/src/components/page/dashboard/overview/overview2.scss
+++ b/nezha-fronted/src/components/page/dashboard/overview/overview2.scss
@@ -127,13 +127,13 @@
  padding: 0 8px;
  border-radius: 0 0 6px 6px;
 }
-.content-row-box:nth-of-type(2) .content-col-content:last-of-type {
+.content-row-box:nth-of-type(2) .content-col-box:last-of-type .content-col-content {
  padding: 0;
 }
-.content-row-box:first-of-type .content-col-content:last-of-type {
+.content-row-box:first-of-type .content-col-box:last-of-type .content-col-content {
  position: relative;
 }
-.content-row-box:first-of-type .content-col-content:last-of-type span {
+.content-row-box:first-of-type .content-col-box:last-of-type .content-col-content span {
  position: absolute;
  bottom: 5%;
  right: 5%;
@@ -147,4 +147,26 @@
 .hide-div {
  visibility: hidden;
 }
+.axis-tooltip {
+  display: none;
+  position: fixed;
+  transform: translate(-100%, -50%);
+  min-width: unset;
+}
+.axis-tooltip::after {
+  content: '';
+  display: block;
+  width:0;
+  height:0;
+  overflow: hidden;
+  font-size: 0;
+  line-height: 0;
+  border: 5px;
+  border-style: dashed dashed dashed solid;
+  border-color: transparent transparent transparent #fff ;
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translate(100%, -50%);
+}

--- a/nezha-fronted/src/components/page/dashboard/overview/overview2.vue
+++ b/nezha-fronted/src/components/page/dashboard/overview/overview2.vue
@@ -67,7 +67,7 @@
            <div class="content-col-box">
              <div class="content-col-title">{{$t("dashboard.overview.alert.chart.chartTitle")}}</div>
              <div class="content-col-content">
-                <chart-box ref="chartbox" :show-toolbox="false" name="trend"></chart-box>
+                <chart-box chart-type="overviewLine" ref="chartbox" :show-toolbox="false" name="trend"></chart-box>
              </div>
            </div>
            <div class="content-col-box">
@@ -82,13 +82,13 @@
            <div class="content-col-box">
              <div class="content-col-title">{{$t("dashboard.overview.asset.assetType")}}</div>
              <div class="content-col-content">
-                <chart-box chart-type="pie" ref="assetTypePie" :show-toolbox="false" name="assetTypePie"></chart-box>
+                <chart-box chart-type="pie" ref="assetTypePie" :show-toolbox="false" name="assetTypePie" :tooltip-formatter="assetTypeFormatter" ></chart-box>
              </div>
            </div>
            <div class="content-col-box">
              <div class="content-col-title">{{$t("dashboard.overview.alert.alertRuleTopN")}}</div>
              <div class="content-col-content">
-                <chart-box chart-type="bar" ref="ruleMessage" :show-toolbox="false" name="ruleMessage"></chart-box>
+                <chart-box axis-tooltip="y" chart-type="bar" ref="ruleMessage" :tooltip-formatter="simpleFormatter" :show-toolbox="false" name="ruleMessage"></chart-box>
              </div>
            </div>
            <div class="content-col-box">
@@ -106,14 +106,15 @@
                </span>
              </div>
              <div class="content-col-content">
-                <chart-box v-show="alertMessageShow == 'asset'" chart-type="bar" ref="assetMessage" name="assetMessage" :show-toolbox="false"></chart-box>
-                <chart-box v-show="alertMessageShow == 'module'" chart-type="bar" ref="moduleMessage" name="moduleMessage" :show-toolbox="false"></chart-box>
+                <chart-box axis-tooltip="y" v-show="alertMessageShow == 'asset'" :tooltip-formatter="simpleFormatter" chart-type="bar" ref="assetMessage" name="assetMessage" :show-toolbox="false"></chart-box>
+                <chart-box axis-tooltip="y" v-show="alertMessageShow == 'module'" :tooltip-formatter="simpleFormatter" chart-type="bar" ref="moduleMessage" name="moduleMessage" :show-toolbox="false"></chart-box>
              </div>
            </div>
          </div>
        </div>
      </div>
    </left-menu>
+    <div class="axis-tooltip el-popover"></div>
  </div>
 </template>

@@ -205,15 +206,61 @@

            /*饼图*/
            this.$refs.assetTypePie.startLoading();
-            let seriesData = [];
+            let legendData = [];
+            let typeSeriesData = [];
+            let modelSeriesData = [];
            this.assetData.typeStat.forEach(item => {
-              seriesData.push({name: item.name, value: item.total});
+              legendData.push(item.name);
+              typeSeriesData.push({name: item.name, value: item.total});
+            });
+            this.assetData.modelStat.forEach(item => {
+              legendData.push(item.name);
+              modelSeriesData.push({name: item.name, value: item.total});
+            });
+            let series = [{
+              name: 'Type',
+              data: typeSeriesData,
+              type: 'pie',
+              radius: [0, '50%'],
+              label: {
+                position: 'inner',
+                formatter: function(params) {
+                  if (params.name.length > 12) {
+                    return params.name.substring(0, 9) + "...";
+                  }
+                  return params.name;
+                }
+              },
+              labelLine: {
+                show: false
+              },
+              left: '25%'
+            }, {
+              name: 'Model',
+              radius: ['65%', '80%'],
+              data: modelSeriesData,
+              type: 'pie',
+              left: '25%',
+              label: {
+                formatter: function(params) {
+                  if (params.name.length > 12) {
+                    return params.name.substring(0, 9) + "...";
+                  }
+                  return params.name;
+                }
+              }
+            }];
+            this.$refs.assetTypePie.modifyOption('legend','show', true);
+            this.$refs.assetTypePie.modifyOption('legend','orient', "vertical");
+            this.$refs.assetTypePie.modifyOption('legend','data', legendData);
+            this.$refs.assetTypePie.modifyOption('legend','left', 0);
+            this.$refs.assetTypePie.modifyOption('legend','top', 5);
+            this.$refs.assetTypePie.modifyOption('legend','formatter', function(name) {
+              if (name.length > 12) {
+                return name.substring(0, 9) + "...";
+              }
+              return name;
            });
-            let series = {
-              name: 'nz_alert_nums',
-              data: seriesData,
-              type: 'pie'
-            };
            this.$refs.assetTypePie.setSeries(series);
            this.$refs.assetTypePie.endLoading();
          }
@@ -296,9 +343,6 @@
                return [item[0]*1000,item[1]];
              })
              this.chartSeries=[series];
-              this.$refs.chartbox.modifyOption('tooltip','formatter',this.tooltipFormatter);
-              this.$refs.chartbox.modifyOption('tooltip','position',this.tooltipPosition);
-              this.$refs.chartbox.modifyOption('yAxis','formatter',this.yAxisFormatter);
              this.$refs.chartbox.setSeries(this.chartSeries);
              this.$refs.chartbox.endLoading();
            }
@@ -553,7 +597,12 @@

        return tooltip;
      },
-
+      simpleFormatter(params) {
+        return `<div class="tooltip" style="min-width: unset;">${params.name}:&nbsp;${params.value}</div>`;
+      },
+      assetTypeFormatter(params) {
+        return `<div class="tooltip" style="min-width: unset;">${params.seriesName}<br/>${params.name}:&nbsp;${params.value}</div>`;
+      },
      switchFullScreen:function(){
        this.isFullScreen = this.judgeFullScreen();
        if(this.isFullScreen){