From 1afdff8de1441a1cf5f576ac26b294fd2989c19f Mon Sep 17 00:00:00 2001
From: "@changcode" <changyongqiang@geedgenetworks.com>
Date: Thu, 2 Sep 2021 14:43:06 +0800
Subject: [PATCH] =?UTF-8?q?NEZ-963=20chart=20=E9=BC=A0=E6=A0=87=E7=A7=BB?=
 =?UTF-8?q?=E5=85=A5=E6=82=AC=E6=B5=AE=E6=8F=90=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/charts/chart-alert-list.vue    | 10 +++++--
 .../charts/chart-bar-statistics.vue           |  8 +++++-
 .../src/components/charts/chart-pie.vue       |  8 +++++-
 .../components/charts/chart-single-stat.vue   |  9 +++++--
 .../src/components/charts/chart-table.vue     |  8 +++++-
 .../src/components/charts/chart-url.vue       |  8 +++++-
 .../src/components/charts/chart.scss          | 13 ++++++++++
 .../src/components/charts/diagram-chart.vue   |  8 +++++-
 .../components/charts/line-chart-block.vue    | 14 ++++++++--
 .../src/components/charts/text-chart.vue      |  8 +++++-
 .../components/common/mixin/chartDataList.js  | 26 +++++++++++++++++++
 11 files changed, 108 insertions(+), 12 deletions(-)
 create mode 100644 nezha-fronted/src/components/common/mixin/chartDataList.js

diff --git a/nezha-fronted/src/components/charts/chart-alert-list.vue b/nezha-fronted/src/components/charts/chart-alert-list.vue
index e2dbe69f6..5e4426f50 100644
--- a/nezha-fronted/src/components/charts/chart-alert-list.vue
+++ b/nezha-fronted/src/components/charts/chart-alert-list.vue
@@ -23,7 +23,11 @@
           <el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex"  v-clickoutside="clickos" :class="{'move-able':!isLock}">
             <el-dropdown-menu style="display: none"></el-dropdown-menu>
             <span class="el-dropdown-link chart-title">
-              <span class="chart-title-text">{{chartData?chartData.name:'-'}}</span>
+<!--              <span class="chart-title-text">{{chartData?chartData.name:'-'}}</span>-->
+              <span class="chart-title-text" v-on:mouseover="changeActive()" :mouseout="removeActive()">{{chartData?chartData.name:'-'}}</span>
+              <transition  name="el-fade-in-linear">
+                <span v-show="chartDataList" class="chart-title-pit" >{{chartData.name}}</span>
+              </transition>
               <span class="chart-title-icon"  :class="{'visible':caretShow,'hidden':!caretShow}">
                 <span v-if="chartData&&chartData.remark">
                   <el-tooltip :content="chartData.remark" placement="top" effect="light">
@@ -144,6 +148,7 @@ import axios from 'axios'
 import pickTime from '../common/pickTime'
 import chart from '../page/dashboard/overview/chart'
 import alertMessageTable from '@/components/common/table/alert/alertMessageTable.vue'
+import chartDataList from '@/components/common/mixin/chartDataList'
 export default {
   name: 'chartTable',
   components: {
@@ -176,6 +181,7 @@ export default {
     from: { type: String },
     isLock: { type: Boolean, default: false }
   },
+  mixins: [chartDataList],
   data () {
     return {
       currentMsg: null,
@@ -884,7 +890,7 @@ export default {
       }
       this.$set(this.searchLabel, 'orderBy', orderBy)
       this.getAlertList()
-    }
+    },
 
   },
   created () {
diff --git a/nezha-fronted/src/components/charts/chart-bar-statistics.vue b/nezha-fronted/src/components/charts/chart-bar-statistics.vue
index abac0b23f..d01f122d4 100644
--- a/nezha-fronted/src/components/charts/chart-bar-statistics.vue
+++ b/nezha-fronted/src/components/charts/chart-bar-statistics.vue
@@ -23,7 +23,11 @@
           <el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex"  v-clickoutside="clickos" :class="{'move-able':!isLock}">
             <el-dropdown-menu style="display: none"></el-dropdown-menu>
             <span class="el-dropdown-link chart-title">
-              <span class="chart-title-text">{{chartData.name}}</span>
+<!--              <span class="chart-title-text">{{chartData.name}}</span>-->
+              <span class="chart-title-text" v-on:mouseover="changeActive()" v-on:mouseout="removeActive()">{{chartData.name}}</span>
+              <transition  name="el-fade-in-linear">
+                <span v-show="chartDataList" class="chart-title-pit" >{{chartData.name}}</span>
+              </transition>
               <span class="chart-title-icon"  :class="{'visible':caretShow,'hidden':!caretShow}">
                 <span v-if="chartData.remark">
                   <el-tooltip :content="chartData.remark" placement="top" effect="light">
@@ -95,6 +99,7 @@ import { getChart, setChart, getMousePoint } from '../common/js/common'
 import chartConfig from '../page/dashboard/overview/chartConfig'
 import { randomcolor } from '../common/js/radomcolor/randomcolor'
 import {formatScientificNotation} from "@/components/common/js/tools";
+import chartDataList from '@/components/common/mixin/chartDataList'
 export default {
   name: 'pieChart', // 饼图 或者 柱状图的统计
   components: {
@@ -121,6 +126,7 @@ export default {
     from: { type: String },
     isLock: { type: Boolean, default: false }
   },
+  mixins: [chartDataList],
   data () {
     return {
       data: {}, // 该图表信息,chartItem
diff --git a/nezha-fronted/src/components/charts/chart-pie.vue b/nezha-fronted/src/components/charts/chart-pie.vue
index e508da630..55b88d92a 100644
--- a/nezha-fronted/src/components/charts/chart-pie.vue
+++ b/nezha-fronted/src/components/charts/chart-pie.vue
@@ -23,7 +23,11 @@
           <el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex"  v-clickoutside="clickos" :class="{'move-able':!isLock}">
             <el-dropdown-menu style="display: none"></el-dropdown-menu>
             <span class="el-dropdown-link chart-title">
-              <span class="chart-title-text">{{chartData.name}}</span>
+<!--              <span class="chart-title-text">{{chartData.name}}</span>-->
+              <span class="chart-title-text" v-on:mouseover="changeActive()" v-on:mouseout="removeActive()">{{chartData.name}}</span>
+              <transition  name="el-fade-in-linear">
+                <span v-show="chartDataList" class="chart-title-pit" >{{chartData.name}}</span>
+              </transition>
               <span class="chart-title-icon"  :class="{'visible':caretShow,'hidden':!caretShow}">
                 <span v-if="chartData.remark">
                   <el-tooltip :content="chartData.remark" placement="top" effect="light">
@@ -94,6 +98,7 @@ import * as echarts from 'echarts'
 import { getChart, setChart, getMousePoint } from '../common/js/common'
 import chartConfig from '../page/dashboard/overview/chartConfig'
 import { randomcolor } from '../common/js/radomcolor/randomcolor'
+import chartDataList from '@/components/common/mixin/chartDataList'
 export default {
   name: 'pieChart',
   components: {
@@ -120,6 +125,7 @@ export default {
     from: { type: String },
     isLock: { type: Boolean, default: false }
   },
+  mixins: [chartDataList],
   data () {
     return {
       data: {}, // 该图表信息,chartItem
diff --git a/nezha-fronted/src/components/charts/chart-single-stat.vue b/nezha-fronted/src/components/charts/chart-single-stat.vue
index 3755d36dc..dd1d3bd9f 100644
--- a/nezha-fronted/src/components/charts/chart-single-stat.vue
+++ b/nezha-fronted/src/components/charts/chart-single-stat.vue
@@ -23,8 +23,11 @@
           <el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex"  v-clickoutside="clickos" :class="{'move-able':!isLock}">
             <el-dropdown-menu style="display: none"></el-dropdown-menu>
             <span class="el-dropdown-link chart-title">
-              <span class="chart-title-text">{{chartData.name}}</span>
-              <span class="chart-title-icon"  :class="{'visible':caretShow,'hidden':!caretShow}">
+              <span class="chart-title-text" v-on:mouseover="changeActive()" v-on:mouseout="removeActive()">{{chartData.name}}</span>
+              <transition  name="el-fade-in-linear">
+                <span v-show="chartDataList" class="chart-title-pit" >{{chartData.name}}</span>
+              </transition>
+              <span class="chart-title-icon" :class="{'visible':caretShow,'hidden':!caretShow}">
                 <span v-if="chartData.remark">
                   <el-tooltip :content="chartData.remark" placement="top" effect="light">
                      <i class="nz-icon nz-icon-info-normal"></i>
@@ -85,9 +88,11 @@
 
 <script>
 import chartDataFormat from './chartDataFormat'
+import chartDataList from '@/components/common/mixin/chartDataList'
 
 export default {
   name: 'chartSingleStat',
+  mixins: [chartDataList, chartDataList],
   props: {
     chartData: {
       type: Object
diff --git a/nezha-fronted/src/components/charts/chart-table.vue b/nezha-fronted/src/components/charts/chart-table.vue
index b28eed9c3..ad7486d8f 100644
--- a/nezha-fronted/src/components/charts/chart-table.vue
+++ b/nezha-fronted/src/components/charts/chart-table.vue
@@ -24,7 +24,11 @@
           <el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex"  v-clickoutside="clickos" :class="{'move-able':!isLock}">
             <el-dropdown-menu style="display: none"></el-dropdown-menu>
             <span class="el-dropdown-link chart-title">
-              <span class="chart-title-text">{{chartData.name}}</span>
+<!--              <span class="chart-title-text">{{chartData.name}}</span>-->
+              <span class="chart-title-text" v-on:mouseover="changeActive()" v-on:mouseout="removeActive()">{{chartData.name}}</span>
+              <transition  name="el-fade-in-linear">
+                <span v-show="chartDataList" class="chart-title-pit" >{{chartData.name}}</span>
+              </transition>
               <span class="chart-title-icon"  :class="{'visible':caretShow,'hidden':!caretShow}">
                 <span v-if="chartData.remark">
                   <el-tooltip :content="chartData.remark" placement="top" effect="light">
@@ -122,6 +126,7 @@
 <script>
 import bus from '../../libs/bus'
 import chartDataFormat from './chartDataFormat'
+import chartDataList from '@/components/common/mixin/chartDataList'
 
 export default {
   name: 'chartTable',
@@ -145,6 +150,7 @@ export default {
     from: { type: String },
     isLock: { type: Boolean, default: false }
   },
+  mixins: [chartDataList],
   data () {
     return {
       tableHeight: 0,
diff --git a/nezha-fronted/src/components/charts/chart-url.vue b/nezha-fronted/src/components/charts/chart-url.vue
index 226bce907..6675d0d41 100644
--- a/nezha-fronted/src/components/charts/chart-url.vue
+++ b/nezha-fronted/src/components/charts/chart-url.vue
@@ -11,7 +11,11 @@
           <el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex"  v-clickoutside="clickos" :class="{'move-able':!isLock}">
             <el-dropdown-menu style="display: none"></el-dropdown-menu>
             <span class="el-dropdown-link chart-title">
-              <span class="chart-title-text">{{chartData.name}}</span>
+<!--              <span class="chart-title-text">{{chartData.name}}</span>-->
+              <span class="chart-title-text" v-on:mouseover="changeActive()" v-on:mouseout="removeActive()">{{chartData.name}}</span>
+              <transition  name="el-fade-in-linear">
+                <span v-show="chartDataList" class="chart-title-pit" >{{chartData.name}}</span>
+              </transition>
               <span class="chart-title-icon"  :class="{'visible':caretShow,'hidden':!caretShow}">
                 <span v-if="chartData.remark">
                   <el-tooltip :content="chartData.remark" placement="top" effect="light">
@@ -69,6 +73,7 @@
 
 <script>
 import loading from '../common/loading'
+import chartDataList from '@/components/common/mixin/chartDataList'
 
 export default {
   name: 'chartUrl',
@@ -95,6 +100,7 @@ export default {
     from: { type: String },
     isLock: { type: Boolean, default: false }
   },
+  mixins: [chartDataList],
   data () {
     return {
       data: {}, // 该图表信息,chartItem
diff --git a/nezha-fronted/src/components/charts/chart.scss b/nezha-fronted/src/components/charts/chart.scss
index c297e1979..2c76db79e 100644
--- a/nezha-fronted/src/components/charts/chart.scss
+++ b/nezha-fronted/src/components/charts/chart.scss
@@ -756,3 +756,16 @@
     flex: 1;
   }
 }
+.chart-title-pit {
+  position: absolute;
+  top: 40px;
+  min-width: 200px;
+  height: 20px;
+  line-height: 20px;
+  padding: 10px;
+  text-align: left;
+  z-index: 1000;
+  border-radius: 5px;
+  background: #fff;
+  border: 1px solid #ebeef5;
+}
diff --git a/nezha-fronted/src/components/charts/diagram-chart.vue b/nezha-fronted/src/components/charts/diagram-chart.vue
index 514a2556a..a28b0492e 100644
--- a/nezha-fronted/src/components/charts/diagram-chart.vue
+++ b/nezha-fronted/src/components/charts/diagram-chart.vue
@@ -11,7 +11,11 @@
           <el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex"  v-clickoutside="clickos" :class="{'move-able':!isLock}">
             <el-dropdown-menu style="display: none"></el-dropdown-menu>
             <span class="el-dropdown-link chart-title">
-              <span class="chart-title-text">{{chartData.name}}</span>
+<!--              <span class="chart-title-text">{{chartData.name}}</span>-->
+              <span class="chart-title-text" v-on:mouseover="changeActive()" v-on:mouseout="removeActive()">{{chartData.name}}</span>
+              <transition  name="el-fade-in-linear">
+                <span v-show="chartDataList" class="chart-title-pit" >{{chartData.name}}</span>
+              </transition>
               <span class="chart-title-icon"  :class="{'visible':caretShow,'hidden':!caretShow}">
                 <span v-if="chartData.remark">
                   <el-tooltip :content="chartData.remark" placement="top" effect="light">
@@ -68,6 +72,7 @@
 import loading from '../common/loading'
 import 'quill/dist/quill.snow.css'
 import diagram from '@/components/common/ChartDiagram/diagram'
+import chartDataList from '@/components/common/mixin/chartDataList'
 export default {
   name: 'diagram-chart',
   components: {
@@ -94,6 +99,7 @@ export default {
     from: { type: String },
     isLock: { type: Boolean, default: false }
   },
+  mixins: [chartDataList],
   data () {
     return {
       data: {
diff --git a/nezha-fronted/src/components/charts/line-chart-block.vue b/nezha-fronted/src/components/charts/line-chart-block.vue
index 74ac8e03b..7bad61f6d 100644
--- a/nezha-fronted/src/components/charts/line-chart-block.vue
+++ b/nezha-fronted/src/components/charts/line-chart-block.vue
@@ -37,7 +37,11 @@
           <el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex"  v-clickoutside="clickos" :class="{'move-able':!isLock}">
             <el-dropdown-menu style="display: none"></el-dropdown-menu>
             <span class="el-dropdown-link chart-title">
-              <span class="chart-title-text">{{chartData.name}}</span>
+<!--              <span class="chart-title-text">{{chartData.name}}</span>-->
+              <span class="chart-title-text" v-on:mouseover="changeActive()" v-on:mouseout="removeActive()">{{chartData.name}}</span>
+              <transition  name="el-fade-in-linear">
+                <span v-show="chartDataList" class="chart-title-pit" >{{chartData.name}}</span>
+              </transition>
               <span class="chart-title-icon"  :class="{'visible':caretShow,'hidden':!caretShow}">
                 <span v-if="chartData.remark">
                   <el-tooltip :content="chartData.remark" placement="top" effect="light">
@@ -66,7 +70,11 @@
           </el-dropdown>
         </div>
         <div  v-if="from==='topology'" :class="{'drag-disabled': this.filter.from == $CONSTANTS.fromRoute.alertRule}" :id="'chartTitle'+chartIndex" class="topology-chart-title">
-          <span class="topology-chart-title-text">{{chartData.name}}</span>
+<!--          <span class="topology-chart-title-text">{{chartData.name}}</span>-->
+          <span class="topology-chart-title-text" v-on:mouseover="changeActive()" v-on:mouseout="removeActive()">{{chartData.name}}</span>
+          <transition  name="el-fade-in-linear">
+            <span v-show="chartDataList" class="chart-title-pit" >{{chartData.name}}</span>
+          </transition>
         </div>
         <div class="line-area"  ref="lineChartArea"  :id="'lineChartArea'+chartIndex" v-show="firstShow" style="width:100%;"></div>
         <div class="chart-no-data" v-show="noData">No Data</div>
@@ -205,6 +213,7 @@ import chartConfig from '../page/dashboard/overview/chartConfig'
 import { getChart, setChart, lineChartMove, getMousePoint } from '../common/js/common'
 import { getMetricTypeValue, chartResizeTool, formatScientificNotation } from '../common/js/tools'
 import moment from 'moment-timezone'
+import chartDataList from '@/components/common/mixin/chartDataList'
 
 export default {
   name: 'lineChartBlock',
@@ -259,6 +268,7 @@ export default {
       }
     }
   },
+  mixins: [chartDataList],
   data () {
     return {
       data: {}, // 该图表信息,chartItem
diff --git a/nezha-fronted/src/components/charts/text-chart.vue b/nezha-fronted/src/components/charts/text-chart.vue
index 3388c75ce..34b9c22a0 100644
--- a/nezha-fronted/src/components/charts/text-chart.vue
+++ b/nezha-fronted/src/components/charts/text-chart.vue
@@ -11,7 +11,11 @@
           <el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex"  v-clickoutside="clickos" :class="{'move-able':!isLock}">
             <el-dropdown-menu style="display: none"></el-dropdown-menu>
             <span class="el-dropdown-link chart-title">
-              <span class="chart-title-text">{{chartData.name}}</span>
+<!--              <span class="chart-title-text">{{chartData.name}}</span>-->
+              <span class="chart-title-text" v-on:mouseover="changeActive()" v-on:mouseout="removeActive()">{{chartData.name}}</span>
+              <transition  name="el-fade-in-linear">
+                <span v-show="chartDataList" class="chart-title-pit" >{{chartData.name}}</span>
+              </transition>
               <span class="chart-title-icon"  :class="{'visible':caretShow,'hidden':!caretShow}">
                 <span v-if="chartData.remark">
                   <el-tooltip :content="chartData.remark" placement="top" effect="light">
@@ -71,6 +75,7 @@
 <script>
 import loading from '../common/loading'
 import 'quill/dist/quill.snow.css'
+import chartDataList from '@/components/common/mixin/chartDataList'
 export default {
   name: 'chartSingleStat',
   components: {
@@ -96,6 +101,7 @@ export default {
     from: { type: String },
     isLock: { type: Boolean, default: false }
   },
+  mixins: [chartDataList],
   data () {
     return {
       data: {}, // 该图表信息,chartItem
diff --git a/nezha-fronted/src/components/common/mixin/chartDataList.js b/nezha-fronted/src/components/common/mixin/chartDataList.js
new file mode 100644
index 000000000..c1c7794d4
--- /dev/null
+++ b/nezha-fronted/src/components/common/mixin/chartDataList.js
@@ -0,0 +1,26 @@
+export default {
+  data () {
+    return {
+      chartDataList: false,
+      timer: null
+    }
+  },
+  methods: {
+    // 鼠标移入加入class
+    changeActive () {
+      // 设置定时器
+      this.timer = window.setTimeout(() => {
+        this.chartDataList = true
+      }, 500)
+    },
+    removeActive () {
+      // 移除定时器
+      window.clearInterval(this.timer)
+      this.chartDataList = false
+    }
+  },
+  beforeDestroy () {
+    // 移除定时器
+    window.clearInterval(this.timer)
+  }
+}