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

feat； 首页 六方图 tootip样式调整

Browse Source
This commit is contained in:
zhangyu
2021-11-05 13:43:23 +08:00
parent 163f5deb36
commit 47c4d195f5
2 changed files with 243 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

317
nezha-fronted/src/components/common/alert/alertLabel2.vue
View File

@@ -1,24 +1,31 @@
<template> <template>
<div ref="alertLabels" :class="['alert-labelUp',LRTriangle?'left-triangle':'right-triangle']" :style="{top:that.position.top + 'px',left:that.position.left + 'px','--mt': that.position.mt+'px',}"> <div
ref="alertLabels"
:class="['alert-labelUp',LRTriangle?'left-triangle':'right-triangle']"
:style="{top:that.position.top + 'px',
left:that.position.left ? (that.position.left + 'px') : 'unset',
right:that.position.right ? (that.position.right + 'px') : 'unset',
'--mt': that.position.mt+'px'
}">
<div class="alert-label-info" v-if="type==='asset'" v-loading="loading"> <div class="alert-label-info" v-if="type==='asset'" v-loading="loading">
<div class="alert-label-box"> <div class="alert-label-box">
<div class="alert-label-title">ID</div> <div class="alert-label-title">ID</div>
<div class="alert-label-value">{{alertLabelData && alertLabelData.id ? alertLabelData.id : '--'}}</div> <div class="alert-label-value">{{alertLabelData && alertLabelData.id ? alertLabelData.id : '--'}}</div>
</div> </div>
<div class="alert-label-box"> <div class="alert-label-box">
<div class="alert-label-title">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">{{alertLabelData && alertLabelData.name ? alertLabelData.name : '--'}}</div>
</div> </div>
<div class="alert-label-box"> <div class="alert-label-box">
<div class="alert-label-title">SN</div> <div class="alert-label-title">{{$t('overall.manageIp')}}</div>
<div class="alert-label-value">{{alertLabelData && alertLabelData.sn ? alertLabelData.sn:'--'}}</div>
</div>
<div class="alert-label-box">
<div class="alert-label-title">ManageIp</div>
<div class="alert-label-value">{{alertLabelData && alertLabelData.manageIp ? alertLabelData.manageIp : '--'}}</div> <div class="alert-label-value">{{alertLabelData && alertLabelData.manageIp ? alertLabelData.manageIp : '--'}}</div>
</div> </div>
<div class="alert-label-box"> <div class="alert-label-box">
<div class="alert-label-title">State</div> <div class="alert-label-title">{{$t('overall.type')}}</div>
<div class="alert-label-value">{{alertLabelData && alertLabelData.type && alertLabelData.type.name ? alertLabelData.type.name:'--'}}</div>
</div>
<div class="alert-label-box">
<div class="alert-label-title">{{$t('overall.state')}}</div>
<div class="alert-label-value">{{alertLabelData && alertLabelData.state && alertLabelData.state.name ? alertLabelData.state.name : '--'}}</div> <div class="alert-label-value">{{alertLabelData && alertLabelData.state && alertLabelData.state.name ? alertLabelData.state.name : '--'}}</div>
</div> </div>
<div class="alert-label-box"> <div class="alert-label-box">
@@ -29,30 +36,33 @@
</div> </div>
</div> </div>
<div class="alert-label-box"> <div class="alert-label-box">
<div class="alert-label-title">Asset Type</div> <div class="alert-label-title">{{$t('overall.dc')}}</div>
<div class="alert-label-value">{{alertLabelData && alertLabelData.type && alertLabelData.type.name ? alertLabelData.type.name:'--'}}</div> <div class="alert-label-value">{{alertLabelData && alertLabelData.dc && alertLabelData.dc.name ? alertLabelData.dc.name:'--'}}</div>
</div> </div>
<div class="alert-label-box"> <div class="alert-label-box">
<div class="alert-label-title">Brand</div> <div class="alert-label-title">{{$t('overall.cabinet')}}</div>
<div class="alert-label-value">{{alertLabelData && alertLabelData.cabinet && alertLabelData.cabinet.name ? alertLabelData.cabinet.name : '--'}}</div>
</div>
<div class="alert-label-box">
<div class="alert-label-title">{{$t('overall.brand')}}</div>
<div class="alert-label-value">{{alertLabelData && alertLabelData.brand && alertLabelData.brand.name ? alertLabelData.brand.name : '--'}}</div> <div class="alert-label-value">{{alertLabelData && alertLabelData.brand && alertLabelData.brand.name ? alertLabelData.brand.name : '--'}}</div>
</div> </div>
<div class="alert-label-box"> <div class="alert-label-box">
<div class="alert-label-title">Model</div> <div class="alert-label-title">{{$t('overall.model')}}</div>
<div class="alert-label-value">{{alertLabelData && alertLabelData.model && alertLabelData.model.name ? alertLabelData.model.name : '--'}}</div> <div class="alert-label-value">{{alertLabelData && alertLabelData.model && alertLabelData.model.name ? alertLabelData.model.name : '--'}}</div>
</div> </div>
<div class="alert-label-box"> <div class="alert-label-box">
<div class="alert-label-title">PingLastReply</div> <div class="alert-label-title">{{$t('overall.alert')}}</div>
<div class="alert-label-value">{{alertLabelData && alertLabelData.pingInfo && alertLabelData.pingInfo.lastUpdate ? utcTimeToTimezoneStr(alertLabelData.pingInfo.lastUpdate) : '--'}}</div>
</div>
<div class="alert-label-box">
<div class="alert-label-title">Alert</div>
<div class="alert-label-value"> <div class="alert-label-value">
<span v-if="alertLabelData" :class="alertLabelData && alertLabelData.alertNum > 0 ? 'danger' : 'success'">{{alertLabelData && alertLabelData.alertNum ? alertLabelData.alertNum : 0 + ' ' + alertActiveStr()}}</span> <i v-if="alertLabelData" :class="alertLabelData && alertLabelData.alertNum > 0 ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert"></i>&nbsp;
<span>{{alertLabelData && alertLabelData.alertNum ? alertLabelData.alertNum : 0}}</span>
</div> </div>
</div> </div>
<div class="alert-label-box"> <div class="alert-label-box">
<div class="alert-label-title">DC</div> <div class="alert-label-title">Endpoint</div>
<div class="alert-label-value">{{alertLabelData && alertLabelData.dc && alertLabelData.dc.name ? alertLabelData.dc.name : '--'}}</div> <div class="alert-label-value">
<i class="nz-icon nz-icon-overview-endpoint monitorColor"></i>&nbsp;
<span>{{alertLabelData && alertLabelData.endpointNum ? alertLabelData.endpointNum : 0}}</span></div>
</div> </div>
</div> </div>
@@ -62,16 +72,36 @@
<div class="alert-label-value">{{alertLabelData && alertLabelData.id ? alertLabelData.id : '--'}}</div> <div class="alert-label-value">{{alertLabelData && alertLabelData.id ? alertLabelData.id : '--'}}</div>
</div> </div>
<div class="alert-label-box"> <div class="alert-label-box">
<div class="alert-label-title">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">{{alertLabelData && alertLabelData.name ? alertLabelData.name : '--'}}</div>
</div> </div>
<div class="alert-label-box"> <div class="alert-label-box">
<div class="alert-label-title">Project</div> <div class="alert-label-title">{{$t('overall.project')}}</div>
<div class="alert-label-value">{{alertLabelData && alertLabelData.project && alertLabelData.project.name ?alertLabelData.project.name : '--'}}</div> <div class="alert-label-value">{{alertLabelData && alertLabelData.project && alertLabelData.project.name ?alertLabelData.project.name : '--'}}</div>
</div> </div>
<div class="alert-label-box"> <div class="alert-label-box">
<div class="alert-label-title">Description</div> <div class="alert-label-title">Endpoint</div>
<div class="alert-label-value">{{alertLabelData && alertLabelData.remark ? alertLabelData.remark : '-'}}</div> <div class="alert-label-value">
<i class="nz-icon nz-icon-overview-endpoint monitorColor"></i>&nbsp;
<span>{{alertLabelData && alertLabelData.endpointNum ? alertLabelData.endpointNum : 0}}</span></div>
</div>
<div class="alert-label-box">
<div class="alert-label-title">{{$t('overall.asset')}}</div>
<div class="alert-label-value">
<i class="nz-icon nz-icon-overview-project monitorColor color23BF9A"/>&nbsp;
<span>{{alertLabelData && alertLabelData.assetNum ? alertLabelData.assetNum: 0}}</span>
</div>
</div>
<div class="alert-label-box">
<div class="alert-label-title">{{$t('overall.alert')}}</div>
<div class="alert-label-value">
<i v-if="alertLabelData" :class="alertLabelData && alertLabelData.alertNum > 0 ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert"></i>&nbsp;
<span>{{alertLabelData && alertLabelData.alertNum ? alertLabelData.alertNum : 0 + ' ' + alertActiveStr()}}</span>
</div>
</div>
<div class="alert-label-box">
<div class="alert-label-title">{{$t('overall.remark')}}</div>
<div class="alert-label-value alert-label-remark">{{alertLabelData && alertLabelData.remark ? alertLabelData.remark : '--'}}</div>
</div> </div>
</div> </div>
@@ -81,12 +111,38 @@
<div class="alert-label-value">{{alertLabelData && alertLabelData ? alertLabelData.id : '--'}}</div> <div class="alert-label-value">{{alertLabelData && alertLabelData ? alertLabelData.id : '--'}}</div>
</div> </div>
<div class="alert-label-box"> <div class="alert-label-box">
<div class="alert-label-title">Name</div> <div class="alert-label-title">{{$t('overall.name')}}</div>
<div class="alert-label-value">{{alertLabelData && alertLabelData ? alertLabelData.name : '--'}}</div> <div class="alert-label-value">{{alertLabelData && alertLabelData ? alertLabelData.name : '--'}}</div>
</div> </div>
<div class="alert-label-box"> <div class="alert-label-box">
<div class="alert-label-title">Description</div> <div class="alert-label-title">{{$t('overall.module')}}</div>
<div class="alert-label-value">{{alertLabelData && alertLabelData.remark ? alertLabelData.remark : '--'}}</div> <div class="alert-label-value">
<i style="cursor: pointer" class="nz-icon nz-icon-overview-module monitorColor"/>&nbsp;
<span>{{alertLabelData && alertLabelData.module && alertLabelData.module.name ? alertLabelData.module.name : '--'}}</span></div>
</div>
<div class="alert-label-box">
<div class="alert-label-title">Endpoint</div>
<div class="alert-label-value">
<i class="nz-icon nz-icon-overview-endpoint monitorColor"></i>&nbsp;
<span>{{alertLabelData && alertLabelData.endpointNum ? alertLabelData.endpointNum : 0}}</span></div>
</div>
<div class="alert-label-box">
<div class="alert-label-title">{{$t('overall.asset')}}</div>
<div class="alert-label-value">
<i class="nz-icon nz-icon-overview-project monitorColor color23BF9A"/>
<span>{{alertLabelData && alertLabelData.assetNum ? alertLabelData.assetNum: 0}}</span>
</div>
</div>
<div class="alert-label-box">
<div class="alert-label-title">{{$t('overall.alert')}}</div>
<div class="alert-label-value">
<i v-if="alertLabelData" :class="alertLabelData && alertLabelData.alertNum > 0 ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert"></i>&nbsp;
<span>{{alertLabelData && alertLabelData.alertNum ? alertLabelData.alertNum : 0 + ' ' + alertActiveStr()}}</span>
</div>
</div>
<div class="alert-label-box">
<div class="alert-label-title">{{$t('overall.remark')}}</div>
<div class="alert-label-value alert-label-remark">{{alertLabelData && alertLabelData.remark ? alertLabelData.remark : '--'}}</div>
</div> </div>
</div> </div>
@@ -96,28 +152,104 @@
<div class="alert-label-value">{{alertLabelData && alertLabelData.id ? alertLabelData.id : '--'}}</div> <div class="alert-label-value">{{alertLabelData && alertLabelData.id ? alertLabelData.id : '--'}}</div>
</div> </div>
<div class="alert-label-box"> <div class="alert-label-box">
<div class="alert-label-title">Project</div> <div class="alert-label-title">{{$t('overall.name')}}</div>
<div class="alert-label-value">{{alertLabelData && alertLabelData.name ? alertLabelData.name : '--'}}</div>
</div>
<div class="alert-label-box">
<div class="alert-label-title">{{$t('overall.project')}}</div>
<div class="alert-label-value">{{alertLabelData && alertLabelData.project && alertLabelData.project.name ? alertLabelData.project.name : '--'}}</div> <div class="alert-label-value">{{alertLabelData && alertLabelData.project && alertLabelData.project.name ? alertLabelData.project.name : '--'}}</div>
</div> </div>
<div class="alert-label-box"> <div class="alert-label-box">
<div class="alert-label-title">Module</div> <div class="alert-label-title">{{$t('overall.module')}}</div>
<div class="alert-label-value">{{alertLabelData && alertLabelData.module && alertLabelData.module.name ? alertLabelData.module.name : '--'}}</div> <div class="alert-label-value">
<i style="cursor: pointer" class="nz-icon nz-icon-overview-module monitorColor"/>&nbsp;
<span>{{alertLabelData && alertLabelData.module && alertLabelData.module.name ? alertLabelData.module.name : '--'}}</span>
</div>
</div> </div>
<div class="alert-label-box"> <div class="alert-label-box">
<div class="alert-label-title">Labels</div> <div class="alert-label-title">{{$t('overall.asset')}}</div>
<div class="alert-label-value">{{alertLabelData && alertLabelData.labels ? alertLabelData.labels : '--'}}</div> <div class="alert-label-value">
<i class="nz-icon nz-icon-overview-project monitorColor color23BF9A"></i>&nbsp;
<span>{{alertLabelData && alertLabelData.asset.name ? alertLabelData.asset.name : '--'}}</span>
</div>
</div> </div>
<div class="alert-label-box"> <div class="alert-label-box">
<div class="alert-label-title">Host</div> <div class="alert-label-title">{{$t('overall.alert')}}</div>
<div class="alert-label-value">{{alertLabelData && alertLabelData.host ? alertLabelData.host : '--'}}</div> <div class="alert-label-value">
<i v-if="alertLabelData" :class="alertLabelData && alertLabelData.alertNum > 0 ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert"></i>&nbsp;
<span>{{alertLabelData && alertLabelData.alertNum ? alertLabelData.alertNum : 0 + ' ' + alertActiveStr()}}</span>
</div>
</div> </div>
<div class="alert-label-box"> <div class="alert-label-box">
<div class="alert-label-title">Port</div> <div class="alert-label-title">{{$t('overall.state')}}</div>
<div class="alert-label-value">{{alertLabelData && alertLabelData.port ? alertLabelData.port : '--'}}</div> <div class="alert-label-value">
<span style="width: auto">
<span class="endpoint-cell-left"><i class="nz-icon nz-icon-Metrics colorFA901C" /> {{$t('project.endpoint.metrics')}} </span>
<span v-if="alertLabelData && alertLabelData.configs[0].state === 0">
<span class="active-icon red-bg inline-block"></span>
</span>
<span v-else-if="alertLabelData && alertLabelData.configs[0].state === 1">
<span class="active-icon green-bg inline-block"></span>
</span>
<span v-else-if="alertLabelData && alertLabelData.configs[0].state">
<span class="active-icon gray-bg inline-block"></span>
</span>
</span>
<span style="width: auto">
<span class="endpoint-cell-left" style="margin-left: 10px"><i class="nz-icon nz-icon-logs colorFA901C" /> {{$t('project.endpoint.logs')}} </span>
<span v-if="alertLabelData && alertLabelData.configs[1].state === 0">
<span class="active-icon red-bg inline-block"></span>
</span>
<span v-else-if="alertLabelData && alertLabelData.configs[1].state === 1">
<span class="active-icon green-bg inline-block"></span>
</span>
<span v-else-if="alertLabelData && alertLabelData.configs[1].state">
<span class="active-icon gray-bg inline-block"></span>
</span>
</span>
</div>
</div>
</div>
<div class="alert-label-info" v-if="type==='dc'" v-loading="loading">
<div class="alert-label-box">
<div class="alert-label-title">ID</div>
<div class="alert-label-value">{{alertLabelData && alertLabelData.id ? alertLabelData.id : '--'}}</div>
</div> </div>
<div class="alert-label-box"> <div class="alert-label-box">
<div class="alert-label-title">Path</div> <div class="alert-label-title">{{$t('overall.name')}}</div>
<div class="alert-label-value">{{alertLabelData && alertLabelData.path ? alertLabelData.path : '--'}}</div> <div class="alert-label-value">{{alertLabelData && alertLabelData.name ? alertLabelData.name : '--'}}</div>
</div>
<div class="alert-label-box">
<div class="alert-label-title">{{$t('overall.location')}}</div>
<div class="alert-label-value">{{alertLabelData && alertLabelData.location && alertLabelData.location ? alertLabelData.location : '--'}}</div>
</div>
<div class="alert-label-box">
<div class="alert-label-title">{{$t('overall.cabinet')}}</div>
<div class="alert-label-value">
<i v-if="alertLabelData" class="nz-icon nz-icon-cabinet monitorColor" :class="alertLabelData && alertLabelData.cabinetNum> 0 ? 'color23BF9A' : 'colorEF7458'"/>&nbsp;
<span>{{alertLabelData && alertLabelData.cabinetNum ? alertLabelData.cabinetNum : 0}}</span></div>
</div>
<div class="alert-label-box">
<div class="alert-label-title">{{$t('overall.asset')}}</div>
<div class="alert-label-value">
<i class="nz-icon nz-icon-overview-project monitorColor color23BF9A"/>&nbsp;
<span>{{alertLabelData && alertLabelData.assetNum && alertLabelData.assetNum ? alertLabelData.assetNum: 0}}</span>
</div>
</div>
<div class="alert-label-box">
<div class="alert-label-title">{{$t('overall.alert')}}</div>
<div class="alert-label-value">
<i v-if="alertLabelData" :class="alertLabelData && alertLabelData.alertNum > 0 ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert"></i>&nbsp;
<span>{{alertLabelData && alertLabelData.alertNum ? alertLabelData.alertNum : 0}}</span></div>
</div>
<div class="alert-label-box">
<div class="alert-label-title">{{$t('overall.state')}}</div>
<div class="alert-label-value" style="margin-left: 3px">
<div v-if="alertLabelData" :class="{'green-bg': alertLabelData && alertLabelData.state === 'ON','red-bg': alertLabelData && alertLabelData.state === 'OFF'}" class="active-icon"></div>
<span v-if="alertLabelData && alertLabelData.state === 'ON'">{{ $t('overall.enabled') }}</span>
<span v-if="alertLabelData && alertLabelData.state === 'OFF'">{{ $t('overall.disabled') }}</span>
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -321,67 +453,27 @@ export default {
overflow: hidden; overflow: hidden;
font-size: 0; font-size: 0;
line-height: 0; line-height: 0;
border: 5px;
border-style: dashed solid dashed dashed;
border-color: transparent #fff transparent transparent;
position: absolute; position: absolute;
top: 20px; top: 20px;
left: 0; left: 0;
transform: translate(-100%, -50%); transform: translate(-100%, -50%);
} }
.left-triangle::after {
content: '';
display: block;
width:0;
height:0;
overflow: hidden;
font-size: 0;
line-height: 0;
border: 5px;
border-style: dashed solid dashed dashed;
border-color: transparent #fff transparent transparent;
position: absolute;
top: var(--mt);
left: 0;
transform: translate(-100%, -50%);
}
.right-triangle::after {
content: '';
display: block;
width:0;
height:0;
overflow: hidden;
font-size: 0;
line-height: 0;
border: 5px;
border-style: dashed dashed dashed solid;
border-color: transparent transparent transparent #fff;
position: absolute;
top: var(--mt);
right: 0;
transform: translate(100%, -50%);
}
.alert-label-info{ .alert-label-info{
border: 1px solid #ebeef5;
border-bottom: none;
font-size: 13px; font-size: 13px;
line-height: 26px; line-height: 26px;
} }
.alert-label-box{ .alert-label-box{
display: flex; display: flex;
justify-content:space-between; justify-content:space-between;
border-bottom: 1px solid #ebeef5;
} }
.alert-label-title{ .alert-label-title{
text-align: left; text-align: left;
width: 110px; width: 110px;
border-right: 1px solid #ebeef5;
color: #666; color: #666;
padding: 0 3px 0 13px; padding: 0 3px 0 13px;
} }
.alert-label-value{ .alert-label-value{
text-align: left; text-align: left;
width: 150px;
color: #1a1a1a; color: #1a1a1a;
padding: 0 3px 0 13px; padding: 0 3px 0 13px;
word-break: break-all; word-break: break-all;
@@ -401,4 +493,73 @@ export default {
/deep/.active-icon{ /deep/.active-icon{
margin-top: 0; margin-top: 0;
} }
.alert-label {
position: fixed;
background-color: white;
z-index: 3000;
padding: 10px 23px 10px 10px;
border-radius: 4px;
box-shadow: -1px 1px 9px -1px rgba(205,205,205,0.77);
}
.alert-label__border {
background: #FFFFFF;
border: 1px solid #E7EAED;
box-shadow: 0 6px 16px 0 rgba(0,0,0,0.08);
border-radius: 3px 3px 3px 3px 0 0;
}
.alert-labelUp {
position: fixed;
background-color: white;
z-index: 3000;
padding: 10px;
border-radius: 4px;
box-shadow: -1px 1px 9px -1px rgba(205,205,205,0.77);
}
.alert-label-info{
/*border: 1px solid #ebeef5;*/
border-bottom: none;
font-size: 13px;
line-height: 26px;
}
.alert-label-box{
display: flex;
flex-direction: row;
/*border-bottom: 1px solid #ebeef5;*/
}
.alert-label-title{
font-size: 14px;
color: #666666;
letter-spacing: 0;
line-height: 26px;
min-width: 110px;
padding: 0 3px 0 13px;
}
.alert-label-value{
word-wrap: break-word;
white-space: normal;
overflow: hidden;
max-width: 200px;
font-size: 14px;
color: #333333;
letter-spacing: 0;
line-height: 26px;
}
.danger{
background-color: #d64f40;
color: white;
padding: 2px 5px;
border-radius: 4px;
}
.success{
background-color: #50d050;
color: white;
padding: 2px 5px;
border-radius: 4px;
}
/deep/.active-icon{
margin-top: 0;
}
.colorFA901C{
color: #fa901c;
}
</style> </style>

5
nezha-fronted/src/components/common/overView/messageAsset.vue
View File

@@ -267,6 +267,7 @@ export default {
this.calcPosition(e) this.calcPosition(e)
}, },
calcPosition (e) { calcPosition (e) {
console.log(e)
const boxWidth = this.boxWidth const boxWidth = this.boxWidth
const distance = this.fromType === 'asset' ? 300 : 50 const distance = this.fromType === 'asset' ? 300 : 50
const minus = (e.pageY - distance) + this.$refs.alertLabel.$el.offsetHeight - window.innerHeight const minus = (e.pageY - distance) + this.$refs.alertLabel.$el.offsetHeight - window.innerHeight
@@ -280,9 +281,11 @@ export default {
} }
if (boxWidth / 2 > e.pageX - 200) { if (boxWidth / 2 > e.pageX - 200) {
this.assetData.position.left = e.pageX + 35 this.assetData.position.left = e.pageX + 35
this.assetData.position.right = 0
this.LRTriangle = true this.LRTriangle = true
} else { } else {
this.assetData.position.left = e.pageX - 35 - this.$refs.alertLabel.$el.offsetWidth this.assetData.position.right = window.innerWidth - (e.pageX - 35)
this.assetData.position.left = 0
this.LRTriangle = false this.LRTriangle = false
} }
}, },