gfwleak/nezha-nezha-fronted
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix：修改 alert显示的 侧滑弹窗的问题

Browse Source
This commit is contained in:
zhangyu
2020-09-30 16:44:52 +08:00
parent 73a0c950bf
commit 353c3c6ece
1 changed files with 54 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
nezha-fronted/src/components/common/project/popData/alertTable.vue
View File

@@ -69,14 +69,10 @@
>
<template slot-scope="scope" :column="item">
<template v-if="item.prop == 'alertRule'">
<span class="too-long-split pointer" v-if="scope.row[item.prop].alertName" @mouseover="alertMessagehover(scope.row,scope.$index)">
<el-tooltip
:placement="scope.$index==0?'right-start':(scope.$index==tableData.length-1?'right-end':'right')"
effect="light">
<alertRuleInfo slot="content" :id="scope.row.alertRule.id" :messageLoad="scope.row.loading"></alertRuleInfo>
<span>{{scope.row[item.prop].alertName}}</span>
</el-tooltip>
</span>
<div v-if="scope.row.alertRule.alertName" >
<span @mouseenter="alertMessagehover(scope.row.alertRule, true, $event)" @mouseleave="alertMessagehover(scope.row.alertRule, false)">{{scope.row.alertRule.alertName}}</span>
<alertRuleInfo v-if="scope.row.alertRule.loading" :id="scope.row.alertRule.id" :that="scope.row.alertRule"></alertRuleInfo>
</div>
<template v-else>-</template>
</template>
<template v-else-if="item.prop == 'summary'">
@@ -93,7 +89,26 @@
<span v-if="scope.row[item.prop] == 'low'"><i class="nz-icon nz-icon-arrow-down"></i>&nbsp;{{returnSeverityLabel(scope.row[item.prop])}}</span>
</span>
<template v-else-if="item.prop == 'labels'" class="labels">
<el-tooltip
<div v-for="(item,i) in labelsSort(scope.row.labels)">
<span @mouseenter="labelHover(scope.row, item.label, true, $event)" @mouseleave="labelHover(scope.row, item.label, false)">
<nz-alert-tag
:label="item.label" :type="tagType(item.label)" style="margin: 5px 0 5px 5px;"
:cursor-point="tagType(item.label) == 'info' ? false : true"
:key="item.label"
v-if="item.label != 'alertname' && item.label != 'severity'"
>
{{item.value}}
</nz-alert-tag>
</span>
<alertLabel
v-if="(item.label === 'asset' ||item.label === 'module' || item.label === 'project') && scope.row[item.label] && scope.row[item.label].loading"
:id="scope.row[item.label].id"
:that="scope.row[item.label]"
:type="item.label"
></alertLabel>
</div>
<!--<el-tooltip
v-for="(item,i) in labelsSort(scope.row.labels)"
:placement="scope.$index==0?'right-start':(scope.$index==tableData.length-1?'right-end':'right')"
effect="light"
@@ -108,16 +123,17 @@
:labelLoading="scope.row[item.label].loading"
></alertLabel>
<span @mouseover="labelHover(scope.row,scope.$index,item.label)" >
<nz-alert-tag
:label="item.label" :type="tagType(item.label)" style="margin: 5px 0 5px 5px;"
:cursor-point="tagType(item.label) == 'info' ? false : true"
:key="item.label"
v-if="item.label != 'alertname' && item.label != 'severity'"
>
{{item.value}}
</nz-alert-tag>
</span>
</el-tooltip>
<nz-alert-tag
:label="item.label" :type="tagType(item.label)" style="margin: 5px 0 5px 5px;"
:cursor-point="tagType(item.label) == 'info' ? false : true"
:key="item.label"
v-if="item.label != 'alertname' && item.label != 'severity'"
>
{{item.value}}
</nz-alert-tag>
</span>
</el-tooltip>-->
</template>
<div v-else-if="item.prop == 'state'">
<span class="">
@@ -372,17 +388,28 @@
this.deleteBox.ids = ids.join(",");
},
// alertNmae鼠标划入
alertMessagehover(item,index){
item.loading=true;
this.$set(this.tableData,index,item);// 调用父组件
alertMessagehover(item, loading, e) {
if (e) {
let dom = e.currentTarget;
let position = dom.getBoundingClientRect();
this.$set(item, "position", position);
}
this.$set(item, "loading", loading);
//item.loading = true;
//this.$set(this.tableData,index,item);// 调用父组件
},
// label 鼠标划入
labelHover(item,index,type){
labelHover(item, type, loading, e){
if(this.labelToolTipDis(type)){
return
return;
}
item[type].loading=true;
this.$set(this.tableData,index,item);// 调用父组件
if (e) {
let dom = e.currentTarget;
let position = dom.getBoundingClientRect();
this.$set(item[type], "position", position);
}
this.$set(item[type], "loading", loading);
//this.$set(this.tableData,index,item);// 调用父组件
},
// label tooltip是否显示
labelToolTipDis(labelType){
@@ -438,6 +465,7 @@
}
this.getAlertList();
},
showExportDialog() {
this.importBox.show = true;
},