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

NEZ-1965 feat : 补充 复制功能

Browse Source
This commit is contained in:
likexuan
2022-07-15 10:42:09 +08:00
parent e623431c99
commit 9d39d0231c
9 changed files with 230 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
nezha-fronted/src/assets/css/components/common/alert/alertMessageInfo.scss
View File

@@ -291,6 +291,9 @@
#alert .name-labe { #alert .name-labe {
display: none; display: none;
} }
#alert .asset-manageIp{
visibility: hidden !important;
}
.el-timeline { .el-timeline {
.el-timeline-item { .el-timeline-item {
.el-timeline-item__wrapper { .el-timeline-item__wrapper {

35
nezha-fronted/src/components/common/alert/alertLabel.vue
View File

@@ -4,6 +4,8 @@
:style="calcPosition(that.position, that)" :style="calcPosition(that.position, that)"
class="alert-label__border" class="alert-label__border"
ref="alertLabels" ref="alertLabels"
@mouseenter="tipHover(true)"
@mouseleave="tipHover(false)"
> >
<!-- user info --> <!-- user info -->
<template v-if="type === 'user'"> <template v-if="type === 'user'">
@@ -47,8 +49,11 @@
</div> </div>
</div> </div>
<div class="alert-label-box name-labe"> <div class="alert-label-box name-labe">
<div class="document-copy-block">
<div class="alert-label-title">{{$t('overall.name')}}</div> <div class="alert-label-title">{{$t('overall.name')}}</div>
<div class="alert-label-value">{{alertLabelData && alertLabelData.name ? alertLabelData.name : '--'}}</div> <div class="alert-label-value document-copy-text">{{alertLabelData && alertLabelData.name ? alertLabelData.name : '--'}}</div>
<i class="nz-icon nz-icon-override" style="visibility: hidden" @click="onCopy(alertLabelData.name)" :title="$t('overall.copyText')"></i>
</div>
</div> </div>
<!-- <div class="alert-label-box name-labe"> <!-- <div class="alert-label-box name-labe">
<div class="alert-label-title">Name</div> <div class="alert-label-title">Name</div>
@@ -56,15 +61,16 @@
{{ alertLabelData && alertLabelData.name ? alertLabelData.name : "--" }} {{ alertLabelData && alertLabelData.name ? alertLabelData.name : "--" }}
</div> </div>
</div> --> </div> -->
<div class="alert-label-box"> <div class="alert-label-box document-copy-block">
<div class="alert-label-title">{{ $t("asset.manageIp") }}</div> <div class="alert-label-title">{{ $t("asset.manageIp") }}</div>
<div class="alert-label-value"> <div class="alert-label-value document-copy-text">
{{ {{
alertLabelData && alertLabelData.manageIp alertLabelData && alertLabelData.manageIp
? alertLabelData.manageIp ? alertLabelData.manageIp
: "--" : "--"
}} }}
</div> </div>
<i class="nz-icon nz-icon-override asset-manageIp" style="visibility: hidden" @click="onCopy(alertLabelData.manageIp)" :title="$t('overall.copyText')"></i>
</div> </div>
<div class="alert-label-box"> <div class="alert-label-box">
<div class="alert-label-title">{{ $t("overall.type") }}</div> <div class="alert-label-title">{{ $t("overall.type") }}</div>
@@ -207,10 +213,13 @@
</div> </div>
</div> </div>
<div class="alert-label-box name-labe"> <div class="alert-label-box name-labe">
<div class="document-copy-block">
<div class="alert-label-title">{{$t('overall.name')}}</div> <div class="alert-label-title">{{$t('overall.name')}}</div>
<div class="alert-label-value"> <div class="alert-label-value document-copy-text">
{{ alertLabelData && alertLabelData.name ? alertLabelData.name : "--" }} {{ alertLabelData && alertLabelData.name ? alertLabelData.name : "--" }}
</div> </div>
<i class="nz-icon nz-icon-override" style="visibility: hidden" @click="onCopy(alertLabelData.name)" :title="$t('overall.copyText')"></i>
</div>
</div> </div>
<div class="alert-label-box"> <div class="alert-label-box">
<div class="alert-label-title">{{ $t("project.project.projectName") }}</div> <div class="alert-label-title">{{ $t("project.project.projectName") }}</div>
@@ -300,10 +309,13 @@
</div> </div>
</div> </div>
<div class="alert-label-box name-labe"> <div class="alert-label-box name-labe">
<div class="document-copy-block">
<div class="alert-label-title">{{$t('overall.name')}}</div> <div class="alert-label-title">{{$t('overall.name')}}</div>
<div class="alert-label-value"> <div class="alert-label-value document-copy-text">
{{ alertLabelData && alertLabelData.name ? alertLabelData.name : "--" }} {{ alertLabelData && alertLabelData.name ? alertLabelData.name : "--" }}
</div> </div>
<i class="nz-icon nz-icon-override" style="visibility: hidden" @click="onCopy(alertLabelData.name)" :title="$t('overall.copyText')"></i>
</div>
</div> </div>
<div class="alert-label-box"> <div class="alert-label-box">
<div class="alert-label-title">{{ $t("overall.module") }}</div> <div class="alert-label-title">{{ $t("overall.module") }}</div>
@@ -395,10 +407,13 @@
</div> </div>
</div> </div>
<div class="alert-label-box name-labe"> <div class="alert-label-box name-labe">
<div class="document-copy-block">
<div class="alert-label-title">{{$t('overall.name')}}</div> <div class="alert-label-title">{{$t('overall.name')}}</div>
<div class="alert-label-value"> <div class="alert-label-value document-copy-text">
{{ alertLabelData && alertLabelData.name ? alertLabelData.name : "--" }} {{ alertLabelData && alertLabelData.name ? alertLabelData.name : "--" }}
</div> </div>
<i class="nz-icon nz-icon-override" style="visibility: hidden" @click="onCopy(alertLabelData.name)" :title="$t('overall.copyText')"></i>
</div>
</div> </div>
<div class="alert-label-box"> <div class="alert-label-box">
<div class="alert-label-title">{{ $t("project.project.projectName") }}</div> <div class="alert-label-title">{{ $t("project.project.projectName") }}</div>
@@ -527,10 +542,13 @@
</div> </div>
</div> </div>
<div class="alert-label-box name-labe"> <div class="alert-label-box name-labe">
<div class="document-copy-block">
<div class="alert-label-title">{{$t('overall.name')}}</div> <div class="alert-label-title">{{$t('overall.name')}}</div>
<div class="alert-label-value"> <div class="alert-label-value document-copy-text">
{{ alertLabelData && alertLabelData.name ? alertLabelData.name : "--" }} {{ alertLabelData && alertLabelData.name ? alertLabelData.name : "--" }}
</div> </div>
<i class="nz-icon nz-icon-override" style="visibility: hidden" @click="onCopy(alertLabelData.name)" :title="$t('overall.copyText')"></i>
</div>
</div> </div>
<div class="alert-label-box"> <div class="alert-label-box">
<div class="alert-label-title">{{ $t("asset.location") }}</div> <div class="alert-label-title">{{ $t("asset.location") }}</div>
@@ -955,6 +973,9 @@ export default {
} }
return color return color
} }
},
tipHover (tipLoading) {
this.$emit('tipHover', tipLoading)
} }
}, },
mounted () { mounted () {

32
nezha-fronted/src/components/common/alert/alertLabel3.vue
View File

@@ -28,8 +28,11 @@
</div> </div>
</div> </div>
<div class="alert-label-box name-labe"> <div class="alert-label-box name-labe">
<div class="document-copy-block">
<div class="alert-label-title">{{$t('overall.name')}}</div> <div class="alert-label-title">{{$t('overall.name')}}</div>
<div class="alert-label-value">{{alertLabelData && alertLabelData.name ? alertLabelData.name : '--'}}</div> <div class="alert-label-value document-copy-text">{{alertLabelData && alertLabelData.name ? alertLabelData.name : '--'}}</div>
<i class="nz-icon nz-icon-override" style="visibility: hidden" @click="onCopy(alertLabelData.name)" :title="$t('overall.copyText')"></i>
</div>
</div> </div>
<!-- <div class="alert-label-box name-labe"> <!-- <div class="alert-label-box name-labe">
<div class="alert-label-title">Name</div> <div class="alert-label-title">Name</div>
@@ -37,15 +40,16 @@
{{ alertLabelData && alertLabelData.name ? alertLabelData.name : "--" }} {{ alertLabelData && alertLabelData.name ? alertLabelData.name : "--" }}
</div> </div>
</div> --> </div> -->
<div class="alert-label-box"> <div class="alert-label-box document-copy-block">
<div class="alert-label-title">{{ $t("asset.manageIp") }}</div> <div class="alert-label-title">{{ $t("asset.manageIp") }}</div>
<div class="alert-label-value"> <div class="alert-label-value document-copy-text">
{{ {{
alertLabelData && alertLabelData.manageIp alertLabelData && alertLabelData.manageIp
? alertLabelData.manageIp ? alertLabelData.manageIp
: "--" : "--"
}} }}
</div> </div>
<i class="nz-icon nz-icon-override asset-manageIp" style="visibility: hidden" @click="onCopy(alertLabelData.manageIp)" :title="$t('overall.copyText')"></i>
</div> </div>
<div class="alert-label-box"> <div class="alert-label-box">
<div class="alert-label-title">{{ $t("overall.type") }}</div> <div class="alert-label-title">{{ $t("overall.type") }}</div>
@@ -188,9 +192,12 @@
</div> </div>
</div> </div>
<div class="alert-label-box name-labe"> <div class="alert-label-box name-labe">
<div class="document-copy-block">
<div class="alert-label-title">{{$t('overall.name')}}</div> <div class="alert-label-title">{{$t('overall.name')}}</div>
<div class="alert-label-value"> <div class="alert-label-value document-copy-text">
{{ alertLabelData && alertLabelData.Name ? alertLabelData.Name : "--" }} {{ alertLabelData && alertLabelData.name ? alertLabelData.name : "--" }}
</div>
<i class="nz-icon nz-icon-override" style="visibility: hidden" @click="onCopy(alertLabelData.name)" :title="$t('overall.copyText')"></i>
</div> </div>
</div> </div>
<div class="alert-label-box"> <div class="alert-label-box">
@@ -281,10 +288,13 @@
</div> </div>
</div> </div>
<div class="alert-label-box name-labe"> <div class="alert-label-box name-labe">
<div class="document-copy-block">
<div class="alert-label-title">{{$t('overall.name')}}</div> <div class="alert-label-title">{{$t('overall.name')}}</div>
<div class="alert-label-value"> <div class="alert-label-value document-copy-text">
{{ alertLabelData && alertLabelData.name ? alertLabelData.name : "--" }} {{ alertLabelData && alertLabelData.name ? alertLabelData.name : "--" }}
</div> </div>
<i class="nz-icon nz-icon-override" style="visibility: hidden" @click="onCopy(alertLabelData.name)" :title="$t('overall.copyText')"></i>
</div>
</div> </div>
<div class="alert-label-box"> <div class="alert-label-box">
<div class="alert-label-title">{{ $t("overall.module") }}</div> <div class="alert-label-title">{{ $t("overall.module") }}</div>
@@ -376,10 +386,13 @@
</div> </div>
</div> </div>
<div class="alert-label-box name-labe"> <div class="alert-label-box name-labe">
<div class="document-copy-block">
<div class="alert-label-title">{{$t('overall.name')}}</div> <div class="alert-label-title">{{$t('overall.name')}}</div>
<div class="alert-label-value"> <div class="alert-label-value document-copy-text">
{{ alertLabelData && alertLabelData.name ? alertLabelData.name : "--" }} {{ alertLabelData && alertLabelData.name ? alertLabelData.name : "--" }}
</div> </div>
<i class="nz-icon nz-icon-override" style="visibility: hidden" @click="onCopy(alertLabelData.name)" :title="$t('overall.copyText')"></i>
</div>
</div> </div>
<div class="alert-label-box"> <div class="alert-label-box">
<div class="alert-label-title">{{ $t("project.project.projectName") }}</div> <div class="alert-label-title">{{ $t("project.project.projectName") }}</div>
@@ -508,10 +521,13 @@
</div> </div>
</div> </div>
<div class="alert-label-box name-labe"> <div class="alert-label-box name-labe">
<div class="document-copy-block">
<div class="alert-label-title">{{$t('overall.name')}}</div> <div class="alert-label-title">{{$t('overall.name')}}</div>
<div class="alert-label-value"> <div class="alert-label-value document-copy-text">
{{ alertLabelData && alertLabelData.name ? alertLabelData.name : "--" }} {{ alertLabelData && alertLabelData.name ? alertLabelData.name : "--" }}
</div> </div>
<i class="nz-icon nz-icon-override" style="visibility: hidden" @click="onCopy(alertLabelData.name)" :title="$t('overall.copyText')"></i>
</div>
</div> </div>
<div class="alert-label-box"> <div class="alert-label-box">
<div class="alert-label-title">{{ $t("asset.location") }}</div> <div class="alert-label-title">{{ $t("asset.location") }}</div>

12
nezha-fronted/src/components/common/alert/alertRuleInfo.vue
View File

@@ -1,5 +1,6 @@
<template> <template>
<div :style="calcPosition(that.position,that)" class="alert-label__border alert-label" ref="alertLabels"> <div :style="calcPosition(that.position,that)" class="alert-label__border alert-label" ref="alertLabels" @mouseenter="tipHoverRule(true)"
@mouseleave="tipHoverRule(false)">
<div v-my-loading="loading"> <div v-my-loading="loading">
<div class="alert-label-header-title"> <div class="alert-label-header-title">
<div class="alert-label-header-circle" :style="`background: ${alertColor}`"> <div class="alert-label-header-circle" :style="`background: ${alertColor}`">
@@ -15,8 +16,12 @@
<div class="alert-label-value">{{alertRuleData.id ? alertRuleData.id : '--'}}</div> <div class="alert-label-value">{{alertRuleData.id ? alertRuleData.id : '--'}}</div>
</div> </div>
<div class="alert-label-box name-labe"> <div class="alert-label-box name-labe">
<div class="document-copy-block">
<div class="alert-label-title">{{$t('overall.name')}}</div> <div class="alert-label-title">{{$t('overall.name')}}</div>
<div class="alert-label-value">{{alertRuleData.name ? alertRuleData.name : '--'}}</div> <div class="alert-label-value document-copy-text">{{alertRuleData.name ? alertRuleData.name : '--'}}</div>
<i class="nz-icon nz-icon-override" style="visibility: hidden" @click="onCopy(alertRuleData.name)" :title="$t('overall.copyText')"></i>
</div>
</div> </div>
<!-- <div class="alert-label-box">--> <!-- <div class="alert-label-box">-->
<!-- <div class="alert-label-title">{{$t('overall.name')}}</div>--> <!-- <div class="alert-label-title">{{$t('overall.name')}}</div>-->
@@ -173,6 +178,9 @@ export default {
} }
return color return color
} }
},
tipHoverRule (tipLoading) {
this.$emit('tipHoverRule', tipLoading)
} }
}, },
mounted () { mounted () {

7
nezha-fronted/src/components/common/alert/alertRuleInfo2.vue
View File

@@ -13,9 +13,12 @@
<div class="alert-label-title">ID</div> <div class="alert-label-title">ID</div>
<div class="alert-label-value">{{alertRuleData.id ? alertRuleData.id : '--'}}</div> <div class="alert-label-value">{{alertRuleData.id ? alertRuleData.id : '--'}}</div>
</div> </div>
<div class="alert-label-box name-labe" style="display:flex"> <div class="alert-label-box name-labe">
<div class="document-copy-block" style="display:flex">
<div class="alert-label-title">{{$t('overall.name')}}</div> <div class="alert-label-title">{{$t('overall.name')}}</div>
<div class="alert-label-value">{{alertRuleData.name ? alertRuleData.name : '--'}}</div> <div class="alert-label-value document-copy-text">{{alertRuleData.name ? alertRuleData.name : '--'}}</div>
<i class="nz-icon nz-icon-override" style="visibility: hidden" @click="onCopy(alertRuleData.name)" :title="$t('overall.copyText')"></i>
</div>
</div> </div>
<!-- <div class="alert-label-box">--> <!-- <div class="alert-label-box">-->
<!-- <div class="alert-label-title">{{$t('overall.name')}}</div>--> <!-- <div class="alert-label-title">{{$t('overall.name')}}</div>-->

103
nezha-fronted/src/components/common/globalSearch/searchItemInfo.vue
View File

@@ -77,6 +77,109 @@
:alertDaysData="alertDaysData" :alertDaysData="alertDaysData"
/> />
</div> </div>
<!-- asset -->
<div class="search-item-value-box" v-else-if="obj.type === 'asset'">
<i v-if="(item.icon && getPathContent(item.key)!=='--') || item.key === 'pingInfo.rtt'" class="nz-icon" :class="searchItemClass(item)" :style="searchItemStyle(item)"/>
<!-- item.key === name -->
<div class="document-copy-block" v-if="item.key === 'name'">
<span class="search-item-value document-copy-text" v-if="item.key !== 'pingInfo.rtt' || (item.key === 'pingInfo.rtt'&& alertLabelData.pingInfo&&alertLabelData.pingInfo.status == 1)">
{{getPathContent(item.key)}}
</span>
<i class="nz-icon nz-icon-override" style="visibility: hidden" @click="onCopy(getPathContent(item.key))" :title="$t('overall.copyText')"></i>
</div>
<!-- item.key === manageIp -->
<div class="document-copy-block" v-else-if="item.key === 'manageIp'">
<span class="search-item-value document-copy-text" v-if="item.key !== 'pingInfo.rtt' || (item.key === 'pingInfo.rtt'&& alertLabelData.pingInfo&&alertLabelData.pingInfo.status == 1)">
{{getPathContent(item.key)}}
</span>
<i class="nz-icon nz-icon-override" style="visibility: hidden" @click="onCopy(getPathContent(item.key))" :title="$t('overall.copyText')"></i>
</div>
<div v-else>
<span class="search-item-value" v-if="item.key !== 'pingInfo.rtt' || (item.key === 'pingInfo.rtt'&& alertLabelData.pingInfo&&alertLabelData.pingInfo.status == 1)">
{{getPathContent(item.key)}}
</span>
</div>
</div>
<!-- endpoint -->
<div class="search-item-value-box" v-else-if="obj.type === 'endpoint'">
<i v-if="(item.icon && getPathContent(item.key)!=='--') || item.key === 'pingInfo.rtt'" class="nz-icon" :class="searchItemClass(item)" :style="searchItemStyle(item)"/>
<!-- item.key === name -->
<div class="document-copy-block" v-if="item.key === 'name'">
<span class="search-item-value document-copy-text" v-if="item.key !== 'pingInfo.rtt' || (item.key === 'pingInfo.rtt'&& alertLabelData.pingInfo&&alertLabelData.pingInfo.status == 1)">
{{getPathContent(item.key)}}
</span>
<i class="nz-icon nz-icon-override" style="visibility: hidden" @click="onCopy(getPathContent(item.key))" :title="$t('overall.copyText')"></i>
</div>
<div v-else>
<span class="search-item-value" v-if="item.key !== 'pingInfo.rtt' || (item.key === 'pingInfo.rtt'&& alertLabelData.pingInfo&&alertLabelData.pingInfo.status == 1)">
{{getPathContent(item.key)}}
</span>
</div>
</div>
<!-- project -->
<div class="search-item-value-box" v-else-if="obj.type === 'project'">
<i v-if="(item.icon && getPathContent(item.key)!=='--') || item.key === 'pingInfo.rtt'" class="nz-icon" :class="searchItemClass(item)" :style="searchItemStyle(item)"/>
<!-- item.key === name -->
<div class="document-copy-block" v-if="item.key === 'name'">
<span class="search-item-value document-copy-text" v-if="item.key !== 'pingInfo.rtt' || (item.key === 'pingInfo.rtt'&& alertLabelData.pingInfo&&alertLabelData.pingInfo.status == 1)">
{{getPathContent(item.key)}}
</span>
<i class="nz-icon nz-icon-override" style="visibility: hidden" @click="onCopy(getPathContent(item.key))" :title="$t('overall.copyText')"></i>
</div>
<div v-else>
<span class="search-item-value" v-if="item.key !== 'pingInfo.rtt' || (item.key === 'pingInfo.rtt'&& alertLabelData.pingInfo&&alertLabelData.pingInfo.status == 1)">
{{getPathContent(item.key)}}
</span>
</div>
</div>
<!-- module -->
<div class="search-item-value-box" v-else-if="obj.type === 'module'">
<i v-if="(item.icon && getPathContent(item.key)!=='--') || item.key === 'pingInfo.rtt'" class="nz-icon" :class="searchItemClass(item)" :style="searchItemStyle(item)"/>
<!-- item.key === name -->
<div class="document-copy-block" v-if="item.key === 'name'">
<span class="search-item-value document-copy-text" v-if="item.key !== 'pingInfo.rtt' || (item.key === 'pingInfo.rtt'&& alertLabelData.pingInfo&&alertLabelData.pingInfo.status == 1)">
{{getPathContent(item.key)}}
</span>
<i class="nz-icon nz-icon-override" style="visibility: hidden" @click="onCopy(getPathContent(item.key))" :title="$t('overall.copyText')"></i>
</div>
<div v-else>
<span class="search-item-value" v-if="item.key !== 'pingInfo.rtt' || (item.key === 'pingInfo.rtt'&& alertLabelData.pingInfo&&alertLabelData.pingInfo.status == 1)">
{{getPathContent(item.key)}}
</span>
</div>
</div>
<!-- datacenter -->
<div class="search-item-value-box" v-else-if="obj.type === 'datacenter'">
<i v-if="(item.icon && getPathContent(item.key)!=='--') || item.key === 'pingInfo.rtt'" class="nz-icon" :class="searchItemClass(item)" :style="searchItemStyle(item)"/>
<!-- item.key === name -->
<div class="document-copy-block" v-if="item.key === 'name'">
<span class="search-item-value document-copy-text" v-if="item.key !== 'pingInfo.rtt' || (item.key === 'pingInfo.rtt'&& alertLabelData.pingInfo&&alertLabelData.pingInfo.status == 1)">
{{getPathContent(item.key)}}
</span>
<i class="nz-icon nz-icon-override" style="visibility: hidden" @click="onCopy(getPathContent(item.key))" :title="$t('overall.copyText')"></i>
</div>
<div v-else>
<span class="search-item-value" v-if="item.key !== 'pingInfo.rtt' || (item.key === 'pingInfo.rtt'&& alertLabelData.pingInfo&&alertLabelData.pingInfo.status == 1)">
{{getPathContent(item.key)}}
</span>
</div>
</div>
<!-- alertrule -->
<div class="search-item-value-box" v-else-if="obj.type === 'alertrule'">
<i v-if="(item.icon && getPathContent(item.key)!=='--') || item.key === 'pingInfo.rtt'" class="nz-icon" :class="searchItemClass(item)" :style="searchItemStyle(item)"/>
<!-- item.key === name -->
<div class="document-copy-block" v-if="item.key === 'name'">
<span class="search-item-value document-copy-text" v-if="item.key !== 'pingInfo.rtt' || (item.key === 'pingInfo.rtt'&& alertLabelData.pingInfo&&alertLabelData.pingInfo.status == 1)">
{{getPathContent(item.key)}}
</span>
<i class="nz-icon nz-icon-override" style="visibility: hidden" @click="onCopy(getPathContent(item.key))" :title="$t('overall.copyText')"></i>
</div>
<div v-else>
<span class="search-item-value" v-if="item.key !== 'pingInfo.rtt' || (item.key === 'pingInfo.rtt'&& alertLabelData.pingInfo&&alertLabelData.pingInfo.status == 1)">
{{getPathContent(item.key)}}
</span>
</div>
</div>
<div class="search-item-value-box" v-else> <div class="search-item-value-box" v-else>
<i v-if="(item.icon && getPathContent(item.key)!=='--') || item.key === 'pingInfo.rtt'" class="nz-icon" :class="searchItemClass(item)" :style="searchItemStyle(item)"/> <i v-if="(item.icon && getPathContent(item.key)!=='--') || item.key === 'pingInfo.rtt'" class="nz-icon" :class="searchItemClass(item)" :style="searchItemStyle(item)"/>
<span class="search-item-value" v-if="item.key !== 'pingInfo.rtt' || (item.key === 'pingInfo.rtt'&& alertLabelData.pingInfo&&alertLabelData.pingInfo.status == 1)"> <span class="search-item-value" v-if="item.key !== 'pingInfo.rtt' || (item.key === 'pingInfo.rtt'&& alertLabelData.pingInfo&&alertLabelData.pingInfo.status == 1)">

16
nezha-fronted/src/components/common/mixin/alertLabelMixin.js
View File

@@ -8,12 +8,15 @@ export default {
alertLabelShow: false, alertLabelShow: false,
alertLabelId: '', alertLabelId: '',
alertLabelObj: {}, alertLabelObj: {},
alertLabelType: '' alertLabelType: '',
timer: null,
flag: null
} }
}, },
methods: { methods: {
// label 鼠标划入 // label 鼠标划入
labelHover (item, type, loading, isUseType = true, e) { labelHover (item, type, loading, isUseType = true, e) {
clearTimeout(this.timer)
if (this.labelToolTipDis(type)) { if (this.labelToolTipDis(type)) {
return return
} }
@@ -36,9 +39,18 @@ export default {
this.alertLabelObj = item this.alertLabelObj = item
this.alertLabelType = type this.alertLabelType = type
} }
this.$set(item, 'loading', loading) this.$set(item[type], 'loading', loading)
} }
this.timer = setTimeout(() => {
this.alertLabelShow = loading this.alertLabelShow = loading
}, 500)
this.flag = loading
},
tipHover (tipLoading) {
clearTimeout(this.timer)
if (this.flag === false) {
this.alertLabelShow = tipLoading
}
}, },
// label tooltip是否显示 // label tooltip是否显示
labelToolTipDis (labelType) { labelToolTipDis (labelType) {

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

@@ -129,13 +129,14 @@
<div v-else>&nbsp;</div> <div v-else>&nbsp;</div>
</template> </template>
</el-table> </el-table>
<alertRuleInfo v-if="alertRuleShow" :id="alertRuleId" :severity-data="severityData" :that="alertRuleObj.alertRule" @showText="$emit('showText',alertRuleObj)"></alertRuleInfo> <alertRuleInfo @tipHoverRule='tipHoverRule' v-if="alertRuleShow" :id="alertRuleId" :severity-data="severityData" :that="alertRuleObj.alertRule" @showText="$emit('showText',alertRuleObj)"></alertRuleInfo>
<alertLabel <alertLabel
v-if="alertLabelShow" v-if="alertLabelShow"
:id="alertLabelId" :id="alertLabelId"
:that="alertLabelObj" :that="alertLabelObj"
:type="alertLabelType" :type="alertLabelType"
:alert-table-dialog="chartAlertList" :alert-table-dialog="chartAlertList"
@tipHover='tipHover'
></alertLabel> ></alertLabel>
</div> </div>
</template> </template>
@@ -520,6 +521,7 @@ export default {
}, },
// alertName鼠标划入 // alertName鼠标划入
alertMessageHover (item, loading, e) { alertMessageHover (item, loading, e) {
clearTimeout(this.timer)
if (e) { if (e) {
const dom = e.currentTarget const dom = e.currentTarget
const position = dom.getBoundingClientRect() const position = dom.getBoundingClientRect()
@@ -528,7 +530,16 @@ export default {
this.alertRuleObj = item this.alertRuleObj = item
} }
this.$set(item.alertRule, 'loading', loading) this.$set(item.alertRule, 'loading', loading)
this.timer = setTimeout(() => {
this.alertRuleShow = loading this.alertRuleShow = loading
}, 500)
this.flag = loading
},
tipHoverRule (tipLoading) {
clearTimeout(this.timer)
if (this.flag === false) {
this.alertRuleShow = tipLoading
}
}, },
// Severity Label // Severity Label
returnSeverityLabel (key) { returnSeverityLabel (key) {

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

@@ -180,6 +180,7 @@
:id="alertLabelId" :id="alertLabelId"
:that="alertLabelObj" :that="alertLabelObj"
:type="alertLabelType" :type="alertLabelType"
@tipHover='tipHover'
></alertLabel> ></alertLabel>
</div> </div>
</template> </template>