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

NEZ-1783 feat：asset，endpoint 等详情页面优化

Browse Source
This commit is contained in:
zhangyu
2022-04-06 14:54:03 +08:00
parent 4674e2f09d
commit 4be3edb7a3
6 changed files with 119 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
nezha-fronted/src/assets/css/components/common/alert/alertLabel.scss
View File

@@ -2,14 +2,42 @@
position: fixed;
background-color: $--background-color-empty;
z-index: 3000;
padding: 10px;
border-radius: 4px;
box-shadow: -1px 1px 10px -1px $--dropdown-menu-box-shadow-color;
.alert-label-header-title {
padding: 10px 15px;
display: flex;
align-items: center;
justify-content: flex-start;
box-sizing: border-box;
font-size: 16px;
color: $--color-text-primary;
letter-spacing: 0;
width: 100%;
border-bottom: 1px solid $--border-color-light;
//line-height: 23px;
font-weight: 600;
.alert-label-header-circle {
height: 24px;
width: 24px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 12px;
background: #23bf9a;
margin-right: 8px;
}
.nz-icon {
font-weight: 400;
font-size: 14px;
color: $--background-color-empty;
}
}
.alert-label-info{
border-bottom: none;
font-size: 13px;
line-height: 26px;
padding: 0 10px 10px 5px;
.active {
color: $--color-primary;
border-bottom: none;

1
nezha-fronted/src/assets/css/components/common/alert/alertRuleInfo.scss
View File

@@ -64,6 +64,7 @@
border-bottom: none;
font-size: 13px;
line-height: 26px;
padding: 0 10px 10px 5px;
}
.alert-rule-box{
display: flex;

10
nezha-fronted/src/components/chart/chart/chartTopology.vue
View File

File diff suppressed because one or more lines are too long

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

@@ -1,14 +1,18 @@
<template>
<div :class="calcHeight(that.position,that)" :style="calcPosition(that.position,that)" class="alert-label__border" ref="alertLabels">
<div class="alert-label-header-title">
<div class="alert-label-header-circle" :style="`background: ${alertColor}`">
<i class="nz-icon" :class="selectIcon(type)"></i>
</div>
<div class="alert-label-header-name">
{{alertLabelData && alertLabelData.name ? alertLabelData.name : '--'}}
</div>
</div>
<div class="alert-label-info" v-if="type==='asset'" v-my-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 class="alert-label-box">
<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.manageIp')}}</div>
<div class="alert-label-value">{{alertLabelData && alertLabelData.manageIp ? alertLabelData.manageIp : '--'}}</div>
@@ -74,10 +78,6 @@
<div class="alert-label-title">ID</div>
<div class="alert-label-value">{{alertLabelData && alertLabelData.id ? alertLabelData.id : '--'}}</div>
</div>
<div class="alert-label-box">
<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>
@@ -123,10 +123,6 @@
<div class="alert-label-title">ID</div>
<div class="alert-label-value">{{alertLabelData && alertLabelData ? alertLabelData.id : '--'}}</div>
</div>
<div class="alert-label-box">
<div class="alert-label-title">{{$t('overall.name')}}</div>
<div class="alert-label-value">{{alertLabelData && alertLabelData ? alertLabelData.name : '--'}}</div>
</div>
<div class="alert-label-box">
<div class="alert-label-title">{{$t('overall.module')}}</div>
<div class="alert-label-value">
@@ -175,10 +171,6 @@
<div class="alert-label-title">ID</div>
<div class="alert-label-value">{{alertLabelData && alertLabelData.id ? alertLabelData.id : '--'}}</div>
</div>
<div class="alert-label-box">
<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>
@@ -250,10 +242,6 @@
<div class="alert-label-title">ID</div>
<div class="alert-label-value">{{alertLabelData && alertLabelData.id ? alertLabelData.id : '--'}}</div>
</div>
<div class="alert-label-box">
<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.location')}}</div>
<div class="alert-label-value">{{alertLabelData && alertLabelData.location && alertLabelData.location ? alertLabelData.location : '--'}}</div>
@@ -303,6 +291,7 @@
<script>
import trendMixin from './trendMixins'
export default {
name: 'alertLabel',
mixins: [trendMixin],
@@ -319,7 +308,9 @@ export default {
alertLabelData: null,
loading: true,
heightList: 0,
boxWidth: 0
boxWidth: 0,
severityDataWeight: this.$store.getters.severityDataWeight,
alertColor: '#23bf9a'
}
},
watch: {
@@ -364,7 +355,6 @@ export default {
dialog = document.querySelector('#viewGraphDialog .el-dialog')
}
const dialogHeight = dialog.getBoundingClientRect()
console.log(dialogHeight, 'dialogHeight')
leftOffSet = leftOffSet - dialogHeight.x
leftOffSetView = dialogHeight.x
topOffSet = topOffSet - dialogHeight.y
@@ -410,6 +400,7 @@ export default {
if (res.msg === 'success') {
this.loading = false
this.alertLabelData = res.data
this.alertColor = this.returnColor(res.data.alert)
} else {
this.$message.error(res.msg)
}
@@ -420,6 +411,7 @@ export default {
if (res.msg === 'success') {
this.loading = false
this.alertLabelData = res.data
this.alertColor = this.returnColor(res.data.alert)
} else {
this.$message.error(res.msg)
}
@@ -430,6 +422,7 @@ export default {
if (res.msg === 'success') {
this.loading = false
this.alertLabelData = res.data
this.alertColor = this.returnColor(res.data.alert)
} else {
this.$message.error(res.msg)
}
@@ -440,6 +433,7 @@ export default {
if (res.msg === 'success') {
this.loading = false
this.alertLabelData = res.data
this.alertColor = this.returnColor(res.data.alert)
} else {
this.$message.error(res.msg)
}
@@ -450,6 +444,7 @@ export default {
if (res.msg === 'success') {
this.loading = false
this.alertLabelData = res.data
this.alertColor = this.returnColor(res.data.alert)
} else {
this.$message.error(res.msg)
}
@@ -498,6 +493,34 @@ export default {
} else {
return this.$t('asset.notInStock')
}
},
selectIcon (type) {
switch (type) {
case 'asset' : return 'nz-icon-overview-project'
case 'dc' : return 'nz-icon-Datacenter2'
case 'project' : return 'nz-icon-project'
case 'module' : return 'nz-icon-overview-module'
case 'endpoint' : return 'nz-icon-overview-endpoint'
case 'alertrule' : return 'nz-icon-Alertrule'
}
return 'nz-icon-module5'
},
returnColor (obj) {
let color = ''
if (!obj) {
return '#23bf9a'
} else {
this.severityDataWeight.forEach(severity => {
const num = obj.find(alert => alert.priority === severity.name)
if (num && !color && num.num > 0) {
color = severity.color
}
})
if (!color) {
color = '#23bf9a'
}
return color
}
}
},
mounted () {

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

@@ -1,14 +1,22 @@
<template>
<div :style="calcPosition(that.position,that)" class="alert-label__border alert-label" v-my-loading="loading" ref="alertLabels">
<div class="alert-label-header-title">
<div class="alert-label-header-circle" :style="`background: ${alertColor}`">
<i class="nz-icon nz-icon-Alertrule"></i>
</div>
<div class="alert-label-header-name">
{{alertRuleData && alertRuleData.name ? alertRuleData.name : '--'}}
</div>
</div>
<div class="alert-rule-info" >
<div class="alert-rule-box">
<div class="alert-rule-title">ID</div>
<div class="alert-rule-value">{{alertRuleData.id ? alertRuleData.id : '--'}}</div>
</div>
<div class="alert-rule-box">
<div class="alert-rule-title">{{$t('alert.name')}}</div>
<div class="alert-rule-value">{{alertRuleData.name ? alertRuleData.name : '--'}}</div>
</div>
<!-- <div class="alert-rule-box">-->
<!-- <div class="alert-rule-title">{{$t('alert.name')}}</div>-->
<!-- <div class="alert-rule-value">{{alertRuleData.name ? alertRuleData.name : '&#45;&#45;'}}</div>-->
<!-- </div>-->
<div class="alert-rule-box">
<div class="alert-rule-title">{{$t('alert.type')}}</div>
<div class="alert-rule-value">
@@ -85,7 +93,9 @@ export default {
return {
loading: true,
alertRuleData: '',
severityColor: ''
severityColor: '',
severityDataWeight: this.$store.getters.severityDataWeight,
alertColor: '#23bf9a'
}
},
components: {
@@ -135,6 +145,23 @@ export default {
this.severityData.map(item => {
this.severityColor = item.color
})
},
returnColor (obj) {
let color = '#23bf9a'
if (!obj) {
return color
} else {
this.severityDataWeight.forEach(severity => {
const num = obj.find(alert => alert.priority === severity.name)
if (num && !color && num.num > 0) {
color = severity.color
}
})
if (!color) {
color = '#23bf9a'
}
return color
}
}
},
mounted () {
@@ -143,6 +170,7 @@ export default {
this.loading = false
this.severityDataColor()
this.alertRuleData = res.data
this.alertColor = this.returnColor(res.data.alert)
const weekDays = this.getWeeksTime()
if (this.trendTimer) {
clearTimeout(this.trendTimer)

7
nezha-fronted/src/components/common/js/constants.js
View File

File diff suppressed because one or more lines are too long