fix：处理 表格tooltip 调用两次接口的问题

nezha-fronted/src/components/chart/chartMixin.js

@@ -263,7 +263,8 @@ export default {
     chartData: {
       deep: true,
       handler (n) {
-        if (!this.isInit) {
+        if (!this.isInit && this.chartOption.color) {
+          console.log(this.chartOption)
           this.colorList = this.colorList.slice(0, 20)
           this.chartOption.color = this.chartOption.color.slice(0, 20)
           this.initChart(this.chartOption)

nezha-fronted/src/components/common/mixin/alertLabelMixin.js

@@ -0,0 +1,52 @@
+export default {
+  data () {
+    return {
+      alertLabelShow: false,
+      alertLabelId: '',
+      alertLabelObj: {},
+      alertLabelType: ''
+    }
+  },
+  methods: {
+    // label 鼠标划入
+    labelHover (item, type, loading, isUseType = true, e) {
+      if (this.labelToolTipDis(type)) {
+        return
+      }
+      if (isUseType) {
+        if (e) {
+          const dom = e.currentTarget
+          const position = dom.getBoundingClientRect()
+          this.$set(item[type], 'position', position)
+          this.alertLabelId = item[type].id
+          this.alertLabelObj = item[type]
+          this.alertLabelType = type
+        }
+        this.$set(item[type], 'loading', loading)
+      } else {
+        if (e) {
+          const dom = e.currentTarget
+          const position = dom.getBoundingClientRect()
+          this.$set(item, 'position', position)
+          this.alertLabelId = item.id
+          this.alertLabelObj = item
+          this.alertLabelType = type
+        }
+        this.$set(item, 'loading', loading)
+      }
+      this.alertLabelShow = loading
+    },
+    // label tooltip是否显示
+    labelToolTipDis (labelType) {
+      switch (labelType) {
+        case 'asset':
+        case 'module':
+        case 'endpoint':
+        case 'project':
+        case 'dc':
+          return false
+        default: return true
+      }
+    }
+  }
+}

nezha-fronted/src/components/common/table/alert/alertMessageTable.vue

@@ -72,8 +72,8 @@
           <template v-else-if="item.prop === 'labels'" class="labels">
           <span v-for="(item, i) in labelsSort(scope.row.labels)" :key="i">
             <span
-              @mouseenter="labelHover(scope.row, item.label, true, $event)"
-              @mouseleave="labelHover(scope.row, item.label, false)">
+              @mouseenter="labelHover(scope.row, item.label, true, true, $event)"
+              @mouseleave="labelHover(scope.row, item.label, false, true,)">
               <nz-alert-tag
                 v-if="item.label !== 'alertname' && item.label !== 'severity'" :key="item.label" :cursor-point="tagType(item.label) !== 'info'"
                 :label="item.label"
@@ -145,6 +145,7 @@ import alertRuleInfo from '../../alert/alertRuleInfo'
 import alertLabel from '../../alert/alertLabel'
 import { calcDurationByStringTimeB } from '../../js/tools'
 import { alertMessage as alertMessageConstant } from '@/components/common/js/constants'
+import alertLabelMixin from '@/components/common/mixin/alertLabelMixin'
 export default {
   name: 'alertMessageTable',
   components: {
@@ -164,7 +165,7 @@ export default {
     loading: Boolean,
     chartAlertList: Boolean
   },
-  mixins: [table, bus],
+  mixins: [table, bus, alertLabelMixin],
   data () {
     return {
       /* 二级列表相关 */
@@ -247,10 +248,6 @@ export default {
       ],
       viewAssetState: false,
       tableDataInitNum: 0,
-      alertLabelShow: false,
-      alertLabelId: '',
-      alertLabelObj: {},
-      alertLabelType: '',
       alertRuleShow: false,
       alertRuleId: '',
       alertRuleObj: ''
@@ -572,18 +569,6 @@ export default {
       this.$refs.moduleBox.show(false, false)
       this.viewAssetState = false
     },
-    // label tooltip是否显示
-    labelToolTipDis (labelType) {
-      switch (labelType) {
-        case 'asset':
-        case 'module':
-        case 'endpoint':
-        case 'project':
-        case 'dc':
-          return false
-        default: return true
-      }
-    },
     // alertName鼠标划入
     alertMessageHover (item, loading, e) {
       if (e) {
@@ -596,22 +581,6 @@ export default {
       this.$set(item.alertRule, 'loading', loading)
       this.alertRuleShow = loading
     },
-    // label 鼠标划入
-    labelHover (item, type, loading, e) {
-      if (this.labelToolTipDis(type)) {
-        return
-      }
-      if (e) {
-        const dom = e.currentTarget
-        const position = dom.getBoundingClientRect()
-        this.$set(item[type], 'position', position)
-        this.alertLabelId = item[type].id
-        this.alertLabelObj = item[type]
-        this.alertLabelType = type
-      }
-      this.$set(item[type], 'loading', loading)
-      this.alertLabelShow = loading
-    },
     // Severity Label
     returnSeverityLabel (key) {
       return this.$t(this.$CONSTANTS.alertMessage.severityData.find(s => { return s.value == key }).label)

nezha-fronted/src/components/common/table/asset/assetTable.vue

@@ -1,4 +1,5 @@
 <template>
+  <div style="height: 100%">
     <el-table
       id="roleTable"
       ref="dataTable"
@@ -43,7 +44,7 @@
             <span style="cursor: pointer" @click="$emit('showBottomBox', 'endpointTab', scope.row)"><i class="nz-icon nz-icon-overview-endpoint monitorColor"></i> <span>{{scope.row.endpointNum ? scope.row.endpointNum : 0}}</span></span>
           </template>
           <template v-else-if="item.prop === 'alertNum'">
-<!--          v-my-loading:ldsFacebook="scope.row.trendLoading"-->
+            <!--          v-my-loading:ldsFacebook="scope.row.trendLoading"-->
             <span style="cursor: pointer" @click="$emit('showBottomBox', 'alertMessageTab', scope.row)">
             <i :class="scope.row.alertNum ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert vertical-align-top;"  @mouseenter="tooltipHover(scope.row,true, $event)" @mouseleave="tooltipHover(scope.row,false, $event)"></i>
             <div v-if="scope.row.alertNumtooltipShow" class="alert-days-info-tooltip" :style="{left: scope.row.left + 'px',top:scope.row.top + 'px'}">
@@ -77,15 +78,9 @@
           <span
             v-if="scope.row.parent"
             style="cursor: pointer"
-            @mouseenter="labelHover(scope.row, 'asset', true, $event)"
-            @mouseleave="labelHover(scope.row, 'asset', false)">
+            @mouseenter="labelHover(scope.row, 'asset', true, false, $event)"
+            @mouseleave="labelHover(scope.row, 'asset', false, false)">
             {{scope.row.parent.name}}
-                <alertLabel
-                  v-if="scope.row.loading"
-                  :id="scope.row.pid"
-                  :that="scope.row"
-                  :type="'asset'"
-                ></alertLabel>
               </span>
             <span v-else> - </span>
           </template>
@@ -93,7 +88,7 @@
             <div  @click="$emit('showBottomBox', 'assetSubTab', scope.row)" v-if="scope.row.childrenNum" style="cursor: pointer">
               <i class="nz-icon nz-icon-overview-project monitorColor color23BF9A"></i>
               {{scope.row.childrenNum}}</div>
-<!--          <span v-else-if="scope.row.pid == -1">  <i class="nz-icon nz-icon-overview-project monitorColor color23BF9A"></i> 0 </span>-->
+            <!--          <span v-else-if="scope.row.pid == -1">  <i class="nz-icon nz-icon-overview-project monitorColor color23BF9A"></i> 0 </span>-->
             <span v-else> - </span>
           </template>
           <template v-else-if="item.prop === 'clientState'">
@@ -161,6 +156,13 @@
         <div v-else>&nbsp;</div>
       </template>
     </el-table>
+    <alertLabel
+      v-if="alertLabelShow"
+      :id="alertLabelId"
+      :that="alertLabelObj"
+      :type="alertLabelType"
+    ></alertLabel>
+  </div>
 </template>
 
 <script>
@@ -169,9 +171,10 @@ import { showTableTooltip, hideTableTooltip } from '@/components/common/js/tools
 // import bus from '@/libs/bus'
 import alertLabel from '@/components/common/alert/alertLabel'
 import alertDaysInfo from '@/components/common/alert/alertDaysInfo'
+import alertLabelMixin from '@/components/common/mixin/alertLabelMixin'
 export default {
   name: 'assetTable',
-  mixins: [table],
+  mixins: [table, alertLabelMixin],
   components: {
     alertLabel: alertLabel,
     alertDaysInfo
@@ -337,16 +340,6 @@ export default {
       this.bottomBox.targetTab = 'endpoint'
       this.bottomBox.showSubList = true
     },
-    // label 鼠标划入
-    labelHover (item, type, loading, e) {
-      if (e) {
-        const dom = e.currentTarget
-        const position = dom.getBoundingClientRect()
-        this.$set(item, 'position', position)
-      }
-      this.$set(item, 'loading', loading)
-      // this.$set(this.tableData,index,item);// 调用父组件
-    },
     returnCabinet (start, end) { // 返回机柜u位信息
       if (!start || !end) {
         return ''

nezha-fronted/src/components/common/table/settings/endpointTable.vue

@@ -1,4 +1,5 @@
 <template>
+  <div style="height: 100%">
     <el-table
       id="endpointTable"
       ref="dataTable"
@@ -45,49 +46,31 @@
           <template v-else-if="item.prop === 'project'">
           <span
             class="pointer"
-            @mouseenter="labelHover(scope.row, item.prop, true, $event)"
-            @mouseleave="labelHover(scope.row, item.prop, false)"
+            @mouseenter="labelHover(scope.row, item.prop, true,true, $event)"
+            @mouseleave="labelHover(scope.row, item.prop, false,true)"
           >
             {{scope.row[item.prop].name}}
           </span>
-          <alertLabel
-            v-if="scope.row[item.prop] && scope.row[item.prop].loading"
-            :id="scope.row[item.prop].id"
-            :that="scope.row[item.prop]"
-            :type="'project'"
-          ></alertLabel>
           </template>
           <template v-else-if="item.prop === 'module'">
           <span
             class="pointer"
-            @mouseenter="labelHover(scope.row, item.prop, true, $event)"
-            @mouseleave="labelHover(scope.row, item.prop, false)"
+            @mouseenter="labelHover(scope.row, item.prop, true,true, $event)"
+            @mouseleave="labelHover(scope.row, item.prop, false,true)"
           >
             <i style="cursor: pointer" class="nz-icon nz-icon-overview-module monitorColor"/>
           {{scope.row[item.prop].name}}
           </span>
-          <alertLabel
-            v-if="scope.row[item.prop] && scope.row[item.prop].loading"
-            :id="scope.row[item.prop].id"
-            :that="scope.row[item.prop]"
-            :type="'module'"
-          ></alertLabel>
           </template>
           <template v-else-if="item.prop === 'asset'">
           <span
             class="pointer"
-            @mouseenter="labelHover(scope.row, item.prop, true, $event)"
-            @mouseleave="labelHover(scope.row, item.prop, false)"
+            @mouseenter="labelHover(scope.row, item.prop, true,true, $event)"
+            @mouseleave="labelHover(scope.row, item.prop, false,true)"
           >
             <i class="nz-icon nz-icon-overview-project monitorColor color23BF9A"></i>
             {{scope.row.asset.name}}
           </span>
-          <alertLabel
-            v-if="scope.row[item.prop] && scope.row[item.prop].loading"
-            :id="scope.row[item.prop].id"
-            :that="scope.row[item.prop]"
-            :type="'asset'"
-          ></alertLabel>
           </template>
           <template v-else-if="item.prop === 'alerts'">
           <span style="cursor: pointer"  @click="showBottomBox('endpointAlertMessage', scope.row)">
@@ -107,8 +90,8 @@
           </template>
           <template v-else-if="item.prop === 'configs'">
           <span class="configs-endpoint metrics"
-                @mouseenter="labelHover(scope.row, item.prop, true, $event)"
-                @mouseleave="labelHover(scope.row, item.prop, false, $event, true)">
+                @mouseenter="labelHover1(scope.row, item.prop, true, $event)"
+                @mouseleave="labelHover1(scope.row, item.prop, false, $event, true)">
             [{{scope.row.configs[0].enable ?  'Metrics':''}}{{scope.row.configs[0].enable&&scope.row.configs[1].enable?',':''}}{{scope.row.configs[1].enable ?  'logs' : ''}}]
           </span>
             <nz-tooltip :that="scope.row[item.prop]" class="data-column__" v-if="scope.row[item.prop] && scope.row[item.prop].loading" :type="item.prop">
@@ -184,7 +167,7 @@
               <i class="nz-icon nz-icon-more3"></i>
             </div>
             <el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top">
-<!--            <el-dropdown-item v-if="!endpointTab" :command="['endpointQuery', scope.row]"><i class="nz-icon nz-icon-search"></i><span class="operation-dropdown-text">{{$t('overall.query')}}</span></el-dropdown-item>-->
+              <!--            <el-dropdown-item v-if="!endpointTab" :command="['endpointQuery', scope.row]"><i class="nz-icon nz-icon-search"></i><span class="operation-dropdown-text">{{$t('overall.query')}}</span></el-dropdown-item>-->
               <el-dropdown-item v-if="!endpointTab" v-has="'monitor_endpoint_edit'" :command="['edit', scope.row]"><i class="nz-icon nz-icon-edit"></i><span class="operation-dropdown-text">{{$t('overall.edit')}}</span></el-dropdown-item>
               <el-dropdown-item v-has="'monitor_endpoint_delete'" :command="['delete', scope.row, `sys/endpoint?ids=${scope.row.id}`]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
               <el-dropdown-item v-has="'monitor_endpoint_edit'" :command="['copy', scope.row, 'project']"><i class="nz-icon nz-icon-override"></i><span class="operation-dropdown-text">{{$t('overall.duplicate')}}</span></el-dropdown-item>
@@ -203,19 +186,27 @@
         <div v-else>&nbsp;</div>
       </template>
     </el-table>
+    <alertLabel
+      v-if="alertLabelShow"
+      :id="alertLabelId"
+      :that="alertLabelObj"
+      :type="alertLabelType"
+    ></alertLabel>
+  </div>
 </template>
 
 <script>
 import table from '@/components/common/mixin/table'
 import alertLabel from '../../alert/alertLabel'
 import nzTooltip from '../../alert/nzTooltip'
+import alertLabelMixin from '@/components/common/mixin/alertLabelMixin'
 export default {
   name: 'endpointTable',
   components: {
     alertLabel,
     nzTooltip
   },
-  mixins: [table],
+  mixins: [table, alertLabelMixin],
   props: {
     showOption: {
       type: Boolean,
@@ -325,7 +316,7 @@ export default {
       return str
     },
     // label 鼠标划入
-    labelHover (item, type, loading, e, slow) {
+    labelHover1 (item, type, loading, e, slow) {
       if (e) {
         const dom = e.currentTarget
         const position = dom.getBoundingClientRect()