fix：修改alertMessage lables tooltip 接口调用两次的问题

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

@@ -864,7 +864,6 @@ export default {
     if (pageSize && pageSize !== 'undefined') {
       this.pageObj.pageSize = pageSize
     }
-    console.log(this.$refs.dataTable, this.$refs.dataDetail)
     const tableTitle = this.$refs.dataTable ? this.$refs.dataTable.tableTitle : this.$refs.dataDetail.tableTitle
     let localStorageTableTitle = localStorage.getItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + this.tableId)
     localStorageTableTitle = localStorageTableTitle ? JSON.parse(localStorageTableTitle) : tableTitle

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

@@ -1,4 +1,5 @@
 <template>
+  <div>
     <!--表格-->
     <el-table
       id="alertMessageTable"
@@ -35,10 +36,9 @@
           <template v-if="item.prop === 'alertRule'">
             <div v-if="scope.row.alertRule&&scope.row.alertRule.name" >
             <span
-              @mouseenter="alertMessageHover(scope.row.alertRule, true, $event)"
-              @mouseleave="alertMessageHover(scope.row.alertRule, false)"
+              @mouseenter="alertMessageHover(scope.row, true, $event)"
+              @mouseleave="alertMessageHover(scope.row, false)"
             >{{scope.row.alertRule?scope.row.alertRule.name : '--'}}</span>
-            <alertRuleInfo v-if="scope.row.alertRule.loading" :id="scope.row.alertRule.id" :severity-data="severityData" :that="scope.row.alertRule" @showText="$emit('showText',scope.row)"></alertRuleInfo>
             </div>
             <template v-else>-</template>
           </template>
@@ -81,13 +81,6 @@
                {{item.value}}
               </nz-alert-tag>
             </span>
-            <alertLabel
-              v-if="(item.label === 'asset' ||item.label === 'module' || item.label === 'project' || item.label === 'dc' ||item.label === 'endpoint' ||item.label === 'cpu' ||item.label === 'user' ||item.label === 'parent_asset') && scope.row[item.label] && scope.row[item.label].loading"
-              :id="scope.row[item.label].id"
-              :that="scope.row[item.label]"
-              :type="item.label"
-              :alert-table-dialog="chartAlertList"
-            ></alertLabel>
           </span>
           </template>
           <span v-else-if="item.prop === 'state'" :class="{'green': scope.row['state'] == 2, 'red': scope.row['state'] == 1}">
@@ -111,7 +104,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 :command="['showText', scope.row]"><i class="nz-icon nz-icon-guzhangshuju"></i><span class="operation-dropdown-text">{{$t('alert.config.trbShot')}}</span></el-dropdown-item>-->
+              <!--            <el-dropdown-item :command="['showText', scope.row]"><i class="nz-icon nz-icon-guzhangshuju"></i><span class="operation-dropdown-text">{{$t('alert.config.trbShot')}}</span></el-dropdown-item>-->
               <el-dropdown-item v-has="'alertMessage_view'" :command="['delete', scope.row]"><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="'alertSilence_add'" :command="['fastSilence', scope.row, 'alertMessage']"><i class="nz-icon nz-icon-fast-silence"></i><span class="operation-dropdown-text">{{$t('overall.silenceAlert')}}</span></el-dropdown-item>
             </el-dropdown-menu>
@@ -128,6 +121,15 @@
         <div v-else>&nbsp;</div>
       </template>
     </el-table>
+    <alertRuleInfo v-if="alertRuleShow" :id="alertRuleId" :severity-data="severityData" :that="alertRuleObj.alertRule" @showText="$emit('showText',alertRuleObj)"></alertRuleInfo>
+    <alertLabel
+      v-if="alertLabelShow"
+      :id="alertLabelId"
+      :that="alertLabelObj"
+      :type="alertLabelType"
+      :alert-table-dialog="chartAlertList"
+    ></alertLabel>
+  </div>
 </template>
 
 <script>
@@ -225,7 +227,14 @@ export default {
         }
       ],
       viewAssetState: false,
-      tableDataInitNum: 0
+      tableDataInitNum: 0,
+      alertLabelShow: false,
+      alertLabelId: '',
+      alertLabelObj: {},
+      alertLabelType: '',
+      alertRuleShow: false,
+      alertRuleId: '',
+      alertRuleObj: ''
     }
   },
   computed: {
@@ -561,9 +570,12 @@ export default {
       if (e) {
         const dom = e.currentTarget
         const position = dom.getBoundingClientRect()
-        this.$set(item, 'position', position)
+        this.$set(item.alertRule, 'position', position)
+        this.alertRuleId = item.alertRule.id
+        this.alertRuleObj = item
       }
-      this.$set(item, 'loading', loading)
+      this.$set(item.alertRule, 'loading', loading)
+      this.alertRuleShow = loading
     },
     // label 鼠标划入
     labelHover (item, type, loading, e) {
@@ -574,8 +586,12 @@ export default {
         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) {

nezha-fronted/src/components/page/alert/alertMessage.vue

@@ -761,41 +761,21 @@ export default {
         this.tools.loading = false
         if (response.code == 200) {
           this.nowTime = this.utcTimeToTimezoneStr(response.time)
+          response.data.list.forEach((item) => {
+            const labels = JSON.parse(item.labels)
+            if (labels) {
+              Object.keys(labels).forEach((key) => {
+                if (item[key] && item[key].id) {
+                  item.position = {}
+                  item.loading = false
+                }
+              })
+            }
+          })
           this.tableData = response.data.list
           if (response.statistics && this.$route.path === '/alertMessage') {
             this.setSearchData(response.statistics)
           }
-          /* const axiosAll = []
-            this.$nextTick(() => {
-              this.tableData.forEach((item) => {
-                item.labels = JSON.parse(item.labels)
-                if (!this.isBuildIn(item.alertRule)) {
-                  const paramStr = JSON.stringify(this.promQueryParamConvert(item))
-                  axiosAll.push(axios.get('/prom/api/v1/query?query=' + paramStr.substring(1, paramStr.length - 1).replace(/\+/g, '%2B').replace(/ /g, '%20').replace(/\\/g, '')))
-                } else {
-                  axiosAll.push('')
-                }
-              })
-              axios.all(axiosAll).then(res => {
-                res.forEach((item, index) => {
-                  let current = []
-                  const response2 = item.data
-                  if (response2.data && response2.data.result && response2.data.result.length > 0) {
-                    current = response2.data.result[0].value.map((item, i) => {
-                      if (i == 0) {
-                        return bus.computeTimezone(item)
-                      } else {
-                        return parseFloat(item).toFixed(2)
-                      }
-                    })
-                  } else {
-                    current = [null, null]
-                  }
-                  this.tableData[index].current = current
-                })
-                this.$set(this.tableData, [...this.tableData])
-              })
-            }) */
           this.deleteBox.ids = ''
           this.pageObj.total = response.data.total
         }